/* ============================================================
   entrepreneur-news.de — eigenständiges Design
   Schriften: Oswald + Nunito Sans
   Layoutform: kompakt
   Dieses Stylesheet gehört nur zu entrepreneur-news.de.
   ============================================================ */

:root {
	--papier: #ffffff;
	--papier-2: #f6f3f3;
	--tinte: #141010;
	--tinte-weich: #453c3c;
	--gedaempft: #867979;
	--akzent: #b91c1c;
	--akzent-tief: #8d1414;
	--akzent-hauch: #fbeaea;
	--linie: #e7e0e0;

	--anzeige: "Oswald", "Helvetica Neue", Arial, sans-serif;
	--lauf: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

	--rund: 3px;
	--breite: 1160px;
	--rand: clamp(18px, 3.5vw, 46px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--papier); color: var(--tinte);
	font-family: var(--lauf); font-size: 17px; line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--anzeige); font-weight: 700; line-height: 1.16; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.1em; }
button { font: inherit; }

.bahn { width: min(100% - var(--rand) * 2, var(--breite)); margin-inline: auto; }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.marke {
	display: inline-block; font-family: var(--anzeige); font-size: 11px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--akzent);
	text-decoration: none; margin-bottom: 12px;
}

/* Kopf */
.oben { border-bottom: 1px solid var(--linie); }
.oben__in { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 38px;
	font-family: var(--anzeige); font-size: 11px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--gedaempft); }
.oben__punkt { color: var(--akzent); }
.kopf { padding: clamp(22px,3.5vw,38px) 0 clamp(14px,2vw,20px); text-align: center; }
.kopf img { width: 240px; height: auto; margin-inline: auto; }
.kopf__claim { margin-top: 12px; font-family: var(--anzeige); font-size: 11.5px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--gedaempft); }

/* Menü */
.menue { position: sticky; top: 0; z-index: 40; background: var(--papier);
	border-top: 3px solid var(--tinte); border-bottom: 1px solid var(--linie); }
.menue__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; }
.menue__marke { font-family: var(--anzeige); font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.menue__marke span { color: var(--akzent); }
.menue__liste { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menue__liste a { font-family: var(--anzeige); font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; text-decoration: none; color: var(--tinte-weich);
	padding: 5px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.menue__liste a:hover, .menue__liste a[aria-current="page"] { color: var(--akzent); border-color: var(--akzent); }
.menue__knopf { display: none; border: 1px solid var(--linie); border-radius: var(--rund); background: none; width: 42px; height: 34px; cursor: pointer; padding: 0; }
.menue__knopf span { display: block; width: 17px; height: 2px; background: var(--tinte); margin: 3.5px auto; transition: transform .2s, opacity .2s; }
.menue__knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menue__knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue__knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menue__mobil { display: none; border-top: 1px solid var(--linie); padding: 6px 0 14px; }
.menue__mobil ul { list-style: none; margin: 0; padding: 0; }
.menue__mobil a { display: block; padding: 12px 0; border-bottom: 1px solid var(--linie);
	font-family: var(--anzeige); font-size: 15px; font-weight: 600; text-decoration: none; }

/* Beitragsliste */
.beitraege { padding: clamp(30px,4.5vw,54px) 0 clamp(40px,6vw,72px); }
.abschnitt { margin-bottom: clamp(22px,3vw,36px); }
.abschnitt h2 { font-size: clamp(22px,3vw,34px); }
.eintrag a, .leitgeschichte a, .weiter__karte a { text-decoration: none; }
.eintrag h3 a:hover, .leitgeschichte h2 a:hover { color: var(--akzent); }
.eintrag__meta, .leitgeschichte__meta { font-family: var(--anzeige); font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); }
.eintrag__anriss, .leitgeschichte__anriss { font-size: 15.5px; color: var(--tinte-weich); margin: 9px 0 0; }

.liste { display: grid; gap: 0; }
.eintrag { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: clamp(14px,2vw,24px);
	align-items: center; padding: clamp(14px,2vw,20px) 0; border-bottom: 1px solid var(--linie); }
.eintrag:first-child { border-top: 3px solid var(--tinte); }
.eintrag img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--rund); }
.eintrag h3 { font-size: clamp(18px,2.1vw,24px); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .01em; }
.eintrag__anriss { display: none; }

.leer { background: var(--papier-2); border-radius: var(--rund); padding: clamp(38px,7vw,80px) clamp(22px,4vw,48px); text-align: center; }
.leer h3 { font-size: clamp(23px,3.2vw,36px); margin: 14px 0 12px; }
.leer p { color: var(--tinte-weich); margin: 0 auto; max-width: 48ch; }

/* Zitatband */
.band { background: var(--akzent); color: var(--papier); padding: clamp(40px,6vw,80px) 0; }
.band blockquote { margin: 0; max-width: 28ch; }
.band q { font-family: var(--anzeige); font-weight: 700; font-size: clamp(24px,4vw,48px); line-height: 1.14; quotes: none; }
.band q::before, .band q::after { content: ""; }
.band cite { display: block; margin-top: 20px; font-style: normal; font-family: var(--anzeige);
	font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

/* Newsletter */
.brief { background: var(--papier-2); padding: clamp(40px,6vw,78px) 0; }
.brief__in { max-width: 40rem; margin-inline: auto; text-align: center; }
.brief h2 { font-size: clamp(23px,3.2vw,38px); }
.brief p { color: var(--tinte-weich); margin: 13px 0 22px; }
.formular { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.formular input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border-radius: var(--rund);
	border: 1px solid var(--linie); background: var(--papier); font-family: var(--lauf); font-size: 16px; color: var(--tinte); }
.formular input[type="email"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px;
	border-radius: var(--rund); border: 1px solid var(--akzent); background: var(--akzent); color: var(--papier);
	font-family: var(--anzeige); font-size: 13px; font-weight: 600; letter-spacing: .06em;
	text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.knopf:hover { background: transparent; color: var(--akzent); }
.knopf--leer { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf--leer:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.formular-hinweis { font-size: 13.5px; color: var(--gedaempft); margin: 12px 0 0; }
.formular-ok { font-size: 14.5px; color: var(--akzent-tief); margin: 12px 0 0; font-weight: 600; }

/* Beitragsseite */
.beitragskopf { padding: clamp(28px,4vw,50px) 0 clamp(18px,2.5vw,26px); max-width: 46rem; }
.beitragskopf h1 { font-size: clamp(27px,4.6vw,52px); margin-bottom: 16px; }
.beitragskopf__meta { display: flex; flex-wrap: wrap; gap: 7px 20px; font-family: var(--anzeige);
	font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--gedaempft); border-top: 1px solid var(--linie); padding-top: 15px; }
.grossbild { margin: 0 0 clamp(24px,3.5vw,40px); border-radius: var(--rund); overflow: hidden; }
.grossbild img { width: 100%; }
.koerper { display: grid; grid-template-columns: minmax(0,1fr) 262px; gap: clamp(28px,4.5vw,60px);
	align-items: start; padding-bottom: clamp(38px,5vw,70px); }
.text { max-width: 40rem; }
.text h2 { font-size: clamp(21px,2.7vw,29px); margin: 1.9em 0 .5em; }
.text h3 { font-size: clamp(18px,2.1vw,22px); margin: 1.6em 0 .4em; }
.text h2:first-child, .text h3:first-child { margin-top: 0; }
.text a { color: var(--akzent-tief); text-underline-offset: 3px; }
.text ul, .text ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.text li { margin-bottom: .45em; }
.text blockquote { margin: 1.7em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--akzent); font-size: 19px; }
.text img { margin: 1.5em 0; border-radius: var(--rund); }
.text hr { border: 0; border-top: 1px solid var(--linie); margin: 2.2em 0; }
.text table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.text th, .text td { border: 1px solid var(--linie); padding: 9px 11px; text-align: left; }
.text th { background: var(--papier-2); font-weight: 700; }

.spalte { position: sticky; top: 72px; }
.spalte__block { background: var(--papier-2); border-radius: var(--rund); padding: 20px; margin-bottom: 18px; }
.spalte h4 { font-family: var(--anzeige); font-size: 11px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--gedaempft); margin-bottom: 12px; }
.spalte p { font-size: 15px; color: var(--tinte-weich); }
.spalte__liste { list-style: none; margin: 0; padding: 0; }
.spalte__liste li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.spalte__liste a { font-family: var(--anzeige); font-weight: 600; font-size: 15.5px; text-decoration: none; line-height: 1.3; display: block; }
.spalte__liste a:hover { color: var(--akzent); }
.werbung { display: block; }
.werbung img { width: 100%; border-radius: var(--rund); }
.werbung__marke { display: block; font-family: var(--anzeige); font-size: 10.5px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); margin-bottom: 8px; }

/* Inhaltsseiten */
.seite { padding: clamp(30px,4.5vw,56px) 0 clamp(44px,6vw,80px); }
.seite__kopf { border-bottom: 3px solid var(--tinte); padding-bottom: clamp(18px,2.5vw,28px); margin-bottom: clamp(24px,3.5vw,40px); }
.seite__kopf h1 { font-size: clamp(27px,4.4vw,50px); }

/* Weitere Beiträge */
.weiter { border-top: 1px solid var(--linie); margin-top: clamp(28px,4vw,44px); padding-top: clamp(20px,3vw,30px); }
.weiter__raster { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; }
.weiter__karte a { text-decoration: none; }
.weiter__karte img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 10px; border-radius: var(--rund); }
.weiter__karte h3 { font-size: 16px; line-height: 1.3; }
.weiter__karte a:hover h3 { color: var(--akzent); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: clamp(34px,5vw,62px) 0 28px; }
.fuss__raster { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: clamp(24px,4vw,48px); }
.fuss__logo img { width: 200px; margin-bottom: 14px; }
.fuss p { color: var(--gedaempft); font-size: 15px; margin: 0; max-width: 38ch; }
.fuss h4 { font-family: var(--anzeige); font-size: 11px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--gedaempft); margin-bottom: 13px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li + li { margin-top: 8px; }
.fuss ul a { font-size: 15px; text-decoration: none; color: var(--tinte-weich); }
.fuss ul a:hover { color: var(--akzent); }
.fuss__sockel { border-top: 1px solid var(--linie); margin-top: clamp(26px,4vw,44px); padding-top: 18px;
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--gedaempft); }

/* Einblenden */
.auf { opacity: 0; transform: translateY(13px); transition: opacity .45s ease, transform .45s ease; }
.auf.da { opacity: 1; transform: none; }

/* Mobil */
@media (max-width: 940px) {
	.koerper { grid-template-columns: 1fr; }
	.spalte { position: static; }
	.leitgeschichte { grid-template-columns: 1fr; }
	.liste { grid-template-columns: 1fr !important; }
	.liste > .eintrag:first-child { grid-row: auto; }
	.fuss__raster { grid-template-columns: 1fr 1fr; }
	.fuss__raster > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	body { font-size: 16.5px; }
	.menue__liste { display: none; }
	.menue__knopf { display: block; }
	.menue__mobil.offen { display: block; }
	.oben__in > :last-child { display: none; }
	.fuss__raster { grid-template-columns: 1fr; }
	.knopf { width: 100%; }
	.liste > .eintrag:not(:first-child) { grid-template-columns: 88px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.auf { opacity: 1; transform: none; transition: none; }
	.eintrag:hover { transform: none; }
}
@media print {
	.menue, .brief, .band, .werbung, .spalte { display: none; }
	.koerper { grid-template-columns: 1fr; }
	body { font-size: 12pt; }
}