/* Patrick Schlüter. Schwarzweiß wie eine Zeitung: eine Serife für Überschriften und Text (Newsreader),
   Menü und Rubriken in Großbuchstaben, schwarze Haarlinien, dicke Balken über Rubriken, eckige Knöpfe in Helvetica,
   die Überschrift der Startseite mit Dachzeile, Schlagzeile und Unterzeile. Porträts in Schwarzweiß.
   Mindestwerte: Fließtext ab 18 px, Nebentext ab 15 px, Touch-Ziele ab 48 px, Kontrast ab 7:1 für Lesetext. */

/* Newsreader, Production Type, SIL Open Font License 1.1. Variable Schrift mit Stärken 200 bis 800 und optischer Größe. */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* Farben: Schwarz und Weiß. Dunkel: reines Schwarz. Der Standard folgt der Systemeinstellung. */
:root {
  color-scheme: light;
  --papier: #ffffff;
  --feld: #ffffff;
  --feld-rand: #000000;
  --platzhalter: #4d4d4d;
  --karte: #ffffff;
  --portrait: #f2f2f2;
  --tinte: #000000;
  --tinte-2: #1a1a1a;
  --mute: #4d4d4d;
  --linie: #000000;
  --linie-2: #d9d9d9;
  --knopf: #000000;
  --knopf-tinte: #ffffff;
  --knopf-hover: #ffffff;
  --knopf-hover-tinte: #000000;
  --fokus: #000000;
  --akzent: #000000;
  --auswahl: #000000;
  --auswahl-tinte: #ffffff;
  --titel: "Newsreader", "Book Antiqua", Georgia, serif;
  --text: "Newsreader", "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 820px;
  --breit: 1120px;
  --rand: 40px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #000000;
  --feld: #000000;
  --feld-rand: #ffffff;
  --platzhalter: #c4c4c4;
  --karte: #000000;
  --portrait: #1a1a1a;
  --tinte: #ffffff;
  --tinte-2: #ececec;
  --mute: #c4c4c4;
  --linie: #ffffff;
  --linie-2: #333333;
  --knopf: #ffffff;
  --knopf-tinte: #000000;
  --knopf-hover: #000000;
  --knopf-hover-tinte: #ffffff;
  --fokus: #ffffff;
  --akzent: #ffffff;
  --auswahl: #ffffff;
  --auswahl-tinte: #000000;
}

::selection { background: var(--auswahl); color: var(--auswahl-tinte); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 18px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 18px; background: var(--knopf); color: var(--knopf-tinte); font-size: 16px; }
.skip:focus { top: 12px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.haupt { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand) 64px; }
.haupt-breit { max-width: var(--breit); }
.seiten-titel { font: 600 clamp(32px, 4.4vw, 46px)/1.12 var(--titel); letter-spacing: -.02em; }

/* --- Kopf --- */
.kopf { position: sticky; top: 0; z-index: 50; padding: 13px 0 12px; border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }
.marke { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 600 19px/1 var(--titel); letter-spacing: -.01em; color: var(--tinte); text-decoration: none; white-space: nowrap; }
.marke-bild { flex: none; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--portrait); filter: grayscale(1) contrast(1.05); }
.kopf-rechts { display: flex; align-items: center; gap: 4px; }
.kopf-nav { display: flex; gap: 28px; margin-right: 16px; }
.kopf-nav a { display: inline-flex; align-items: center; min-height: 48px; font: 500 17px/1 var(--text); color: var(--tinte); text-decoration: none; white-space: nowrap; }
.kopf-nav a:hover { color: var(--mute); }
.tool { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--tinte); }
.tool:hover { color: var(--mute); }
.tool-theme { background: radial-gradient(circle, var(--linie-2) 0 18px, transparent 18.5px); }
[data-theme="dark"] .i-moon, :root:not([data-theme="dark"]) .i-sun { display: none; }
.kopf-schlicht { position: static; padding-top: 28px; border-bottom: 0; }
.kopf-schlicht .kopf-in { justify-content: center; }
.kopf-schlicht .marke { font-size: 20px; }

/* --- Anmeldung --- */
.abo { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.abo input { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 24px; border: 1px solid var(--feld-rand); border-radius: 999px; background: var(--feld); color: var(--tinte); font: 400 17px/1.3 var(--text); }
.abo input:focus { border-color: var(--tinte); }
.abo input::placeholder, .suche input::placeholder { color: var(--platzhalter); opacity: 1; }
.abo button { flex: none; height: 52px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--knopf); color: var(--knopf-tinte); font: 600 16px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; transition: background-color .3s, color .3s; }
.abo button:hover { background: var(--knopf-hover); color: var(--knopf-hover-tinte); }
.form-status { flex-basis: 100%; margin-top: 6px; font-size: 16px; line-height: 1.5; }
.abo .einwilligung { flex-basis: 100%; margin-top: 4px; font-size: 13px; line-height: 1.5; }
.abo .einwilligung a { color: inherit; text-decoration: underline; }
.held .abo .einwilligung, .magnet .abo .einwilligung { text-align: center; }
.fein { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--mute); }

/* --- Startseite --- */
.held { padding: 112px 0 64px; }
.held h1 { max-width: 26ch; margin-bottom: 24px; font: 600 clamp(34px, 3.9vw, 50px)/1.15 var(--titel); letter-spacing: -.022em; }
.held-text { margin-bottom: 32px; font-size: 18px; line-height: 1.5; color: var(--tinte-2); }

.stimmen { margin-top: 8px; }
.stimmen li + li { margin-top: 22px; }
.stimmen blockquote { font-size: 18px; line-height: 1.5; }
.stimmen p { margin-top: 2px; font-size: 15px; color: var(--mute); }

.block { margin-top: 56px; }
.held + .block, .stimmen + .block { margin-top: 24px; }
/* Kleinüberschriften: Großbuchstaben. */
.label { margin-bottom: 8px; font: 500 15px/1.5 var(--sans); letter-spacing: .38em; text-transform: uppercase; }
/* Textlinks: fett, kursiv, mit farbigem Strich. */
.mehr a, .zurueck a, .nicht-da-links a { display: inline-flex; align-items: center; min-height: 48px; font: italic 700 16px/1.3 var(--sans); color: var(--tinte); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .3s; }
.mehr a:hover, .zurueck a:hover, .nicht-da-links a:hover { text-decoration-color: var(--tinte); }

.essay-liste li { padding: 40px 0; border-bottom: 1px solid var(--linie); }
.essay-liste li:last-child { border-bottom: 0; }
.karte { display: block; color: var(--tinte); text-decoration: none; transition: transform .22s ease-out; }
.karte:hover { transform: translate(6px, -2px); }
.karte-titel { margin-bottom: 10px; font: 600 clamp(20px, 2.1vw, 25px)/1.25 var(--titel); letter-spacing: -.012em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: text-decoration-color .3s; }
.karte:hover .karte-titel { text-decoration-color: var(--akzent); }
.karte-text { max-width: 60ch; margin-bottom: 18px; font-size: 17px; line-height: 1.5; color: var(--tinte-2); }
.karte-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 400 15px/1.5 var(--sans); color: var(--mute); }

.ueber-kurz-in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 16px; }
.ueber-kurz img { width: 200px; height: 200px; border-radius: 4px; object-fit: cover; background: var(--portrait); }
.ueber-kurz-in p:not(.mehr) { max-width: 60ch; margin-bottom: 6px; line-height: 1.6; color: var(--tinte-2); }
/* Porträts in Schwarzweiß, Farbe beim Überfahren. */
.ueber-kurz img, .profil-bild { filter: grayscale(1) contrast(1.05); transition: filter .3s; }
.ueber-kurz-in:hover img, .profil-bild:hover { filter: none; }

/* --- Schlussaufruf mit einer Linie darüber --- */
.aufruf { margin-top: 56px; padding: 56px 0 16px; border-top: 1px solid var(--linie); }
.aufruf-titel { margin-bottom: 16px; font: 800 clamp(30px, 3.6vw, 44px)/1.12 var(--sans); letter-spacing: -.03em; }
.aufruf-titel em, .essay-seite-titel em { font: italic 500 1em/1 var(--text); letter-spacing: 0; }
/* Ein einzelnes betontes Wort, unterstrichen. */
.betont { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .14em; }
.aufruf-text { margin-bottom: 28px; line-height: 1.6; color: var(--tinte-2); }
.aufruf .abo { max-width: 460px; }

/* --- Fuß --- */
.fuss { display: flex; flex-direction: column; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 48px var(--rand) 56px; color: var(--mute); font: 400 15px/1.5 var(--sans); }
.fuss-oben { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.fuss-copy { white-space: nowrap; }
.fuss-links, .fuss-sozial { display: flex; flex-wrap: wrap; gap: 0 28px; }
.fuss-links { justify-content: flex-end; }
.fuss-sozial { justify-content: center; }
.fuss a { display: inline-flex; align-items: center; min-height: 48px; color: var(--mute); text-decoration: none; transition: color .3s; }
.fuss a:hover { color: var(--tinte); }

/* --- Suche --- */
.suche { width: min(calc(100% - 32px), 640px); max-height: min(80vh, 640px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); box-shadow: 0 30px 80px rgba(18, 18, 18, .25); }
.suche::backdrop { background: rgba(15, 14, 12, .45); }
.suche-kopf { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 20px; border-bottom: 1px solid var(--linie); }
.suche-kopf .i { color: var(--mute); }
.suche input { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; font: 400 19px/1.3 var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suche-esc { flex: none; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 8px; background: transparent; color: var(--mute); font-size: 15px; }
.suche-esc:hover { color: var(--tinte); border-color: var(--tinte); }
.suche-treffer { padding: 4px 20px 12px; }
.suche-treffer:empty { display: none; }
.suche-treffer a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.suche-treffer a:last-child { border-bottom: 0; }
.suche-treffer a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.suche-treffer strong { display: block; font: 600 18px/1.35 var(--titel); }
.suche-text { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--tinte-2); }
.suche-leer { padding-block: 14px; }

/* --- Essays --- */
.archiv-titel { padding: 80px 0 24px; border-bottom: 1px solid var(--linie); }
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid var(--linie); font: 500 16px/1 var(--sans); }
.blaettern-schritt { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 6px; color: var(--tinte); text-decoration: none; }
a.blaettern-schritt:hover { background: var(--linie-2); }
.blaettern-schritt.ist-aus { color: var(--mute); opacity: .45; }
.blaettern-seiten { display: flex; align-items: center; gap: 4px; }
.blaettern-seiten a, .blaettern-seiten .ist-hier, .blaettern-luecke { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 8px; border-radius: 6px; color: var(--mute); text-decoration: none; }
.blaettern-seiten a:hover { background: var(--linie-2); color: var(--tinte); }
.blaettern-seiten .ist-hier { background: var(--knopf); color: var(--knopf-tinte); }

/* --- Ein Essay --- */
.essay-raster { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; padding-top: 88px; }
.essay { max-width: 64ch; min-width: 0; }
.essay-eyebrow { margin-bottom: 8px; font: 500 15px/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: var(--mute); }
.essay-eyebrow a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.essay-eyebrow a:hover { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.essay h1 { margin-bottom: 24px; font: 600 clamp(32px, 4vw, 48px)/1.12 var(--titel); letter-spacing: -.022em; }
.essay-kicker { margin: -8px 0 24px; font: italic 400 20px/1.45 var(--text); color: var(--tinte-2); }
.byline { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--linie); font-size: 16px; color: var(--mute); }
.byline > span + span::before { content: "·"; margin: 0 12px; }
.byline-name { color: var(--tinte-2); }
.byline-name em { margin-right: 4px; color: var(--mute); }

.essay-text { font-size: 19px; line-height: 1.7; color: var(--tinte-2); }
.essay-text > p, .essay-text > ul, .essay-text > ol { margin-bottom: 18px; }
.essay-text > ul { padding-left: 24px; list-style: disc; }
.essay-text > ol:not(.schritte) { padding-left: 24px; list-style: decimal; }
.essay-text li { margin-bottom: 8px; }
.essay-text > h2 { margin: 44px 0 12px; font: 700 23px/1.3 var(--titel); letter-spacing: -.01em; color: var(--tinte); }
.erster { display: flow-root; }
.erster::first-letter { float: left; margin: 6px 12px -2px 0; font: 700 clamp(46px, 4.8vw, 56px)/.9 var(--titel); color: var(--knopf); }
.hinweis { margin-bottom: 18px; padding: 16px 20px; border-left: 3px solid var(--tinte); background: var(--karte); font-size: 17px; line-height: 1.55; }
.schritte { display: grid; gap: 24px; margin: 36px 0; }
.schritte li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin: 0; padding-top: 20px; border-top: 1px solid var(--linie); }
.schritt-nr { font: 700 34px/1 var(--titel); color: var(--knopf); }
.schritte h2 { margin-bottom: 6px; font: 700 19px/1.35 var(--titel); color: var(--tinte); }
.fragen { margin: 36px 0; padding: 24px 28px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); }
.fragen h2 { margin-bottom: 14px; font: 700 20px/1.3 var(--titel); color: var(--tinte); }
.fragen ol { padding-left: 24px; list-style: decimal; }
.fragen li + li { margin-top: 8px; }
.schluss { margin: 36px 0 18px; font: italic 400 21px/1.5 var(--text); color: var(--tinte); }
.quelle { font-size: 15px; color: var(--mute); }
.folgen { margin-top: 28px; font-size: 17px; color: var(--tinte-2); }
.folgen a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.verwandt { margin: 56px 0 24px; }
.verwandt h2 { margin-bottom: 12px; font: 700 20px/1.3 var(--titel); }
.verwandt li { border-bottom: 1px solid var(--linie); }
.verwandt li:last-child { border-bottom: 0; }
.verwandt a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; color: var(--tinte); text-decoration: none; }
.verwandt-name { display: inline-block; font: 500 17px/1.4 var(--titel); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: transform .18s, text-decoration-color .3s; }
.verwandt a:hover .verwandt-name { transform: translate(2px, -1px); text-decoration-color: var(--akzent); }
.verwandt-meta { flex-shrink: 0; font: 400 15px/1.5 var(--sans); color: var(--mute); }

.essay-seite { position: relative; }
.essay-seite-in { position: sticky; top: 104px; padding-left: 32px; border-left: 1px solid var(--linie); }
.essay-seite-eyebrow { margin-bottom: 18px; font: 500 15px/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.essay-seite-titel { margin-bottom: 16px; font: 700 22px/1.25 var(--titel); letter-spacing: -.015em; }
.essay-seite-text { margin-bottom: 22px; font-size: 16px; line-height: 1.6; color: var(--tinte-2); }
.essay-seite .abo { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.essay-seite .abo input { flex: none; height: 48px; padding: 0 18px; font-size: 16px; }
.essay-seite .abo button { width: 100%; height: 48px; padding: 0 14px; }
.essay-seite .fein { margin-top: 14px; }

/* --- Über mich --- */
.profil { max-width: 640px; margin: 0 auto; padding-top: 80px; }
.profil h1 { margin-bottom: 28px; }
.profil-bild { width: 240px; height: 240px; margin-bottom: 28px; border-radius: 4px; object-fit: cover; background: var(--portrait); }
.profil .text > p, .profil .text > ul { margin-bottom: 18px; line-height: 1.7; color: var(--tinte-2); }
.profil .text > ul { padding-left: 24px; list-style: disc; }
.profil .text li { margin-bottom: 8px; }
.profil .text > h2 { margin: 44px 0 12px; font: 700 23px/1.3 var(--titel); color: var(--tinte); }
.profil .text > .fein { margin-top: 28px; font-size: 15px; color: var(--mute); }

/* --- Ressourcen --- */
.ressourcen { max-width: 1080px; margin: 0 auto; padding: 80px 0 32px; }
.ressourcen-kopf { margin-bottom: 40px; text-align: center; }
.ressourcen-kopf h1 { margin-bottom: 14px; font: 600 clamp(32px, 4.4vw, 46px)/1.12 var(--titel); letter-spacing: -.02em; }
.ressourcen-kopf p { max-width: 56ch; margin: 0 auto; line-height: 1.7; color: var(--tinte-2); }
.reiter { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 48px; padding: 4px; border: 1px solid var(--linie); border-radius: 999px; background: var(--linie-2); }
.reiter-knopf { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--tinte-2); font: 600 15px/1 var(--sans); white-space: nowrap; transition: background-color .3s, color .3s; }
.reiter-knopf:hover { color: var(--tinte); }
.reiter-knopf.ist-an { background: var(--knopf); color: var(--knopf-tinte); }

.leitfaeden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.leitfaden-link { display: block; color: var(--tinte); text-decoration: none; }
.leitfaden-meta { padding: 18px 4px 0; }
.leitfaden-status { display: block; margin-bottom: 8px; font: 500 15px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.leitfaden-titel { margin-bottom: 8px; font: 600 19px/1.3 var(--titel); letter-spacing: -.01em; }
.leitfaden-text { margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--tinte-2); }
.leitfaden-cta { font: italic 700 15px/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .3s; }
.leitfaden-link:hover .leitfaden-cta { text-decoration-color: var(--tinte); }
.leitfaden-gross { grid-column: 1 / -1; padding: 28px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); }
.leitfaden-gross .leitfaden-link { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: center; }
.leitfaden-gross .leitfaden-meta { padding: 0; }
.leitfaden-gross .leitfaden-titel { margin-bottom: 12px; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.22; }
.leitfaden-gross .leitfaden-text { margin-bottom: 20px; font-size: 17px; }

/* Der gezeichnete Umschlag: Fläche in der Knopffarbe, gestrichelte Linien wie auf einem Kassenbon. */
.umschlag { container-type: inline-size; display: flex; flex-direction: column; aspect-ratio: 8.5 / 11; padding: 11% 11%; border-radius: 6px; background: var(--knopf); color: var(--knopf-tinte); box-shadow: 0 8px 24px rgba(18, 18, 18, .12); transition: transform .2s, box-shadow .2s; }
.leitfaden-link:hover .umschlag { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(18, 18, 18, .18); }
.umschlag > span { display: block; }
.umschlag-kopf { padding-bottom: 4cqw; border-bottom: 2px dashed currentColor; font: 700 3.6cqw/1.3 var(--titel); letter-spacing: .24em; text-transform: uppercase; }
.umschlag-titel { margin-top: 10cqw; font: 700 9cqw/1.15 var(--titel); letter-spacing: -.02em; text-wrap: balance; }
.umschlag-fuss { display: flex !important; flex-direction: column; gap: 1.2cqw; margin-top: auto; padding-top: 4cqw; border-top: 2px dashed currentColor; font: 500 3.6cqw/1.3 var(--titel); }
.umschlag-fuss span:last-child { font-size: 3.2cqw; letter-spacing: .18em; text-transform: uppercase; }

/* --- Leitfaden --- */
.magnet { max-width: 720px; margin: 0 auto; padding: 48px 0 24px; text-align: center; }
.magnet-eyebrow { margin-bottom: 18px; font: 500 15px/1.4 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: var(--mute); }
.magnet-titel { margin-bottom: 18px; font: 600 clamp(30px, 4vw, 44px)/1.15 var(--titel); letter-spacing: -.02em; }
.magnet-text { max-width: 56ch; margin: 0 auto 32px; font: italic 400 20px/1.5 var(--text); color: var(--tinte-2); }
.magnet .abo { justify-content: center; max-width: 480px; margin: 0 auto; }
.magnet .fein { max-width: 46ch; margin: 18px auto 0; }
.magnet-umschlag { max-width: 360px; margin: 56px auto 0; }
.magnet-inhalt { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--linie); text-align: left; }
.magnet-inhalt h2 { margin-bottom: 24px; font: 600 clamp(26px, 3vw, 32px)/1.25 var(--titel); text-align: center; }
.magnet-inhalt li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.magnet-nr { font: 500 15px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.magnet-name { font: 500 19px/1.35 var(--titel); }
.magnet-autor { max-width: 56ch; margin: 56px auto 0; line-height: 1.7; color: var(--tinte-2); }
.magnet-schluss { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--linie); }
.magnet-schluss h2 { margin-bottom: 24px; font: 700 clamp(26px, 3vw, 34px)/1.2 var(--titel); }

/* --- Rechtliches und 404 --- */
.recht { max-width: 680px; margin: 0 auto; padding-top: 80px; }
.recht-stand { margin: 12px 0 28px; font-size: 15px; color: var(--mute); }
.recht h2 { margin: 40px 0 10px; font: 700 22px/1.3 var(--titel); }
.recht p:not(.recht-stand) { margin-bottom: 16px; line-height: 1.7; color: var(--tinte-2); }
.nicht-da { padding: 112px 0 48px; text-align: center; }
.nicht-da-nr { margin-bottom: 18px; font: italic 400 clamp(28px, 3.2vw, 40px)/1 var(--text); letter-spacing: .02em; color: var(--mute); }
.nicht-da > p:not(.nicht-da-nr) { max-width: 46ch; margin: 20px auto 16px; color: var(--tinte-2); }
.nicht-da-links { display: flex; justify-content: center; gap: 0 28px; }

/* --- Überschriften erscheinen Zeichen für Zeichen --- */
.anim [data-animiert]:not(.an) { visibility: hidden; animation: zeigen 0s 1.2s forwards; }
@keyframes zeigen { to { visibility: visible; } }
.w { display: inline-block; white-space: nowrap; }
.z { display: inline-block; animation: zeichen .3s ease-out both; }
@keyframes zeichen { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }

/* --- Schmaler --- */
@media (max-width: 960px) {
  .leitfaeden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .essay-raster { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .essay-seite-in { position: static; max-width: 64ch; margin-top: 24px; padding: 40px 0 0; border-top: 1px solid var(--linie); border-left: 0; }
}
@media (max-width: 720px) {
  .leitfaeden { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .leitfaden-gross .leitfaden-link { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .leitfaden-gross .umschlag { max-width: 260px; margin: 0 auto; }
  .ressourcen { padding: 48px 0 24px; }
  .reiter { width: 100%; }
  .reiter-knopf { flex: 1 1 0; padding: 0 8px; }
  .magnet-inhalt li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* Der Kopf bleibt in einer Zeile: unter 760 px nur das Foto ohne Namen. */
@media (max-width: 760px) {
  .marke-lang { display: none; }
  .kopf-nav { gap: 14px; margin-right: 2px; }
  .kopf-nav a { font-size: 15px; }
  .tool { width: 44px; }
}
@media (max-width: 640px) {
  :root { --rand: 20px; }
  .kopf { padding: 8px 0 7px; }
  .kopf-in { gap: 8px; }
  .marke { gap: 10px; }
  .held { padding: 64px 0 56px; text-align: center; }
  .held h1 { max-width: none; font-size: 34px; }
  .held .abo { margin: 0 auto; }
  .abo { flex-direction: column; flex-wrap: nowrap; max-width: 460px; }
  .abo input, .abo button { flex: none; width: 100%; }
  .ueber-kurz-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ueber-kurz img { width: 160px; height: 160px; }
  .archiv-titel, .profil, .recht { padding-top: 48px; }
  .blaettern-wort { display: none; }
  .verwandt a { flex-direction: column; gap: 4px; }
  .fuss-oben { flex-direction: column; gap: 4px; }
  .fuss-links { justify-content: center; gap: 0 20px; }
}
@media (max-width: 440px) {
  :root { --rand: 16px; }
  .kopf-rechts { gap: 0; }
  .kopf-in { gap: 6px; }
  .kopf-nav { gap: 8px; margin-right: 0; }
  .tool { width: 40px; }
}
@media (max-width: 370px) {
  .kopf-nav { gap: 6px; }
  .tool { width: 36px; }
  .marke-bild { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .karte:hover, .leitfaden-link:hover .umschlag, .verwandt a:hover .verwandt-name { transform: none; }
}

/* ==== Zeitungs-Anmutung: überschreibt die Grundregeln oben ==================================================== */
body { font-optical-sizing: auto; }

/* --- Kopf als Titelzeile: Name groß und zentriert, darunter das Menü zwischen zwei Linien --- */
.kopf { position: static; padding: 0; border-bottom: 0; }
.kopf-in { position: relative; flex-direction: column; align-items: stretch; gap: 0; max-width: var(--breit); padding-top: 28px; }
.marke { justify-content: center; gap: 18px; min-height: 0; padding-bottom: 22px; font: 400 clamp(30px, 4.6vw, 58px)/1 var(--titel); letter-spacing: .06em; text-transform: uppercase; }
.marke-bild { width: 54px; height: 54px; border-radius: 0; }
.kopf-rechts { justify-content: center; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kopf-nav { gap: 0; margin: 0 auto; }
.kopf-nav a { padding: 0 16px; font: 400 16px/1 var(--titel); letter-spacing: .03em; text-transform: uppercase; }
.kopf-nav a + a { background: linear-gradient(var(--linie), var(--linie)) left center / 1px 16px no-repeat; }
.kopf-nav a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 5px; }
.kopf-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tool { position: absolute; top: 24px; width: 44px; border-radius: 0; }
.kopf-rechts .tool:not(.tool-theme) { right: calc(var(--rand) + 44px); }
.tool-theme { right: var(--rand); background: none; }
.kopf-schlicht .kopf-in { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.kopf-schlicht .marke { font-size: clamp(26px, 3.4vw, 40px); padding-bottom: 14px; }

/* --- Überschrift der Startseite wie in einer Zeitung: Dachzeile zwischen Linien, Schlagzeile, kursive Unterzeile --- */
.held { padding: 52px 0 48px; text-align: center; }
.held h1 { max-width: none; margin: 0 auto 30px; font-family: var(--titel); letter-spacing: 0; }
.held h1 .zeile { display: block; }
.held h1 .zeile:nth-child(1) {
  display: inline-block; margin-bottom: 22px; padding: 8px 4px 7px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  font: 400 16px/1.3 var(--titel); letter-spacing: .24em; text-transform: uppercase;
}
.held h1 .zeile:nth-child(2) { font: 700 clamp(46px, 7.2vw, 92px)/1.02 var(--titel); letter-spacing: -.015em; }
.held h1 .zeile:nth-child(3) { margin-top: 16px; font: italic 400 clamp(22px, 2.6vw, 32px)/1.3 var(--titel); }
.held-text { max-width: 54ch; margin: 0 auto 32px; }
.held .abo { justify-content: center; margin: 0 auto; }

/* --- Schrift: eine Serife für alles --- */
.seiten-titel, .essay h1, .ressourcen-kopf h1, .magnet-titel { font-family: var(--titel); font-weight: 400; letter-spacing: 0; }
.karte-titel { font: 400 clamp(22px, 2.4vw, 28px)/1.25 var(--titel); letter-spacing: 0; }
.karte:hover { transform: none; }
.essay-text > h2, .schritte h2, .fragen h2, .verwandt h2, .profil .text > h2, .recht h2, .magnet-inhalt h2, .magnet-schluss h2, .essay-seite-titel { font-family: var(--titel); letter-spacing: 0; }
.essay-seite-titel { font-weight: 400; font-size: 24px; }
.verwandt-name, .magnet-name, .leitfaden-titel, .suche-treffer strong { font-family: var(--titel); font-weight: 400; letter-spacing: 0; }
.erster::first-letter { font-family: var(--titel); font-weight: 400; color: var(--tinte); }
.schritt-nr { font: 400 34px/1 var(--titel); color: var(--tinte); }
.aufruf-titel { font: 400 clamp(28px, 3.4vw, 40px)/1.15 var(--titel); letter-spacing: 0; }

/* Rubriken: Großbuchstaben in der Serife, ein dicker Balken darüber */
.label, .essay-eyebrow, .essay-seite-eyebrow, .leitfaden-status, .magnet-eyebrow, .magnet-nr {
  font: 400 15px/1.4 var(--titel); letter-spacing: .04em; text-transform: uppercase;
}
.label { padding-top: 10px; border-top: 4px solid var(--linie); color: var(--tinte); }
.karte-meta, .verwandt-meta, .byline, .fuss, .blaettern { font-family: var(--titel); }
.karte-meta, .verwandt-meta { text-transform: uppercase; letter-spacing: .03em; }

/* --- Linien schwarz, Formen eckig --- */
.essay-liste li { border-bottom-color: var(--linie); }
.ueber-kurz img, .profil-bild, .reiter, .reiter-knopf, .suche, .suche-esc, .fragen, .leitfaden-gross, .blaettern-schritt,
.blaettern-seiten a, .blaettern-seiten .ist-hier, .abo input, .abo button { border-radius: 0; }

/* Knöpfe und Textlinks als eckige Schaltflächen: Helvetica, Großbuchstaben, schwarz, beim Überfahren umgekehrt */
.abo button { border: 1px solid var(--knopf); font: 700 15px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.abo input { font-family: var(--titel); }
.mehr a, .zurueck a, .nicht-da-links a {
  padding: 0 16px; border: 1px solid var(--knopf); background: var(--knopf); color: var(--knopf-tinte);
  font: 700 15px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.mehr a:hover, .zurueck a:hover, .nicht-da-links a:hover { background: var(--knopf-hover); color: var(--knopf-hover-tinte); }
.leitfaden-cta { font: 700 15px/1.4 var(--sans); letter-spacing: .03em; text-transform: uppercase; text-decoration-color: var(--linie); }

/* --- Anmeldung: der schwarze Kasten, „Jeden“ unterstrichen --- */
.aufruf {
  --tinte: #ffffff; --tinte-2: #ffffff; --mute: #e6e6e6; --linie: #ffffff;
  --feld: #ffffff; --feld-rand: #ffffff; --platzhalter: #4d4d4d;
  --knopf: #ffffff; --knopf-tinte: #000000; --knopf-hover: #000000; --knopf-hover-tinte: #ffffff; --fokus: #ffffff;
  margin-top: 56px; padding: 40px 40px 36px; border-top: 0; background: #000000; color: #ffffff;
}
.aufruf .abo input { color: #000000; }
.aufruf .fein { color: var(--mute); }
:root[data-theme="dark"] .aufruf { box-shadow: inset 0 0 0 1px #ffffff; }
.betont { text-decoration-thickness: .06em; text-underline-offset: .16em; }

/* --- Kästen weiß mit schwarzem Rand --- */
.hinweis { border-left: 4px solid var(--linie); background: var(--karte); }
.fragen, .leitfaden-gross { border: 2px solid var(--linie); background: var(--karte); }
.essay-seite-in { border-left-color: var(--linie); }

/* --- Ressourcen: Reiter als Linie, Umschlag wie eine Titelseite --- */
.reiter { padding: 0; border: 0; border-bottom: 1px solid var(--linie); background: transparent; }
.reiter-knopf { font: 400 16px/1 var(--titel); letter-spacing: .04em; text-transform: uppercase; }
.umschlag { border: 2px solid var(--linie); border-radius: 0; background: var(--papier); color: var(--tinte); box-shadow: none; }
.leitfaden-link:hover .umschlag { box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.umschlag-kopf { padding-bottom: 3cqw; border-bottom: 1px solid currentColor; font: 400 6cqw/1 var(--titel); letter-spacing: .14em; text-align: center; }
.umschlag-titel { font: 700 9cqw/1.12 var(--titel); letter-spacing: -.01em; }
.umschlag-fuss { border-top: 1px solid currentColor; font: 400 3.6cqw/1.3 var(--titel); }

/* --- Fuß: dicker Balken, Großbuchstaben --- */
.fuss { border-top: 4px solid var(--linie); }
.fuss a, .fuss-copy { letter-spacing: .03em; text-transform: uppercase; }
.fuss-oben { flex-direction: column; align-items: flex-start; gap: 0; }
.fuss-links { justify-content: flex-start; gap: 0 22px; }

/* --- Schmaler --- */
@media (max-width: 760px) {
  .marke-lang { display: inline; }
  .kopf-nav a { font-size: 15px; }
}
@media (max-width: 700px) {
  .kopf-in { padding-top: 64px; }
  .tool { top: 10px; }
}
@media (max-width: 640px) {
  .kopf { padding: 0; }
  .marke { gap: 12px; padding-bottom: 16px; font-size: 22px; letter-spacing: .04em; }
  .marke-bild { width: 40px; height: 40px; }
  .kopf-nav a { padding: 0 10px; }
  .held { padding: 40px 0 44px; }
  .held h1 .zeile:nth-child(1) { font-size: 15px; letter-spacing: .18em; }
  .held h1 .zeile:nth-child(2) { font-size: clamp(40px, 12vw, 56px); }
  .aufruf { padding: 28px 20px 24px; }
}
@media (max-width: 440px) {
  .kopf-nav a { padding: 0 8px; font-size: 14px; }
  .kopf-nav a + a { background-size: 1px 14px; }
}
@media (max-width: 370px) {
  .marke { font-size: 19px; }
  .marke-bild { width: 34px; height: 34px; }
}

/* --- Einwilligung in den Brevo Tracker (nur mit SITE.brevoTracker) --- */
.einwilligung-banner {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; padding: 22px 24px 24px;
  border: 2px solid var(--linie); background: var(--papier); color: var(--tinte); font: 400 15px/1.5 var(--sans);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.einwilligung-banner[hidden] { display: none; }
.einwilligung-banner p { margin: 0 0 8px; }
.einwilligung-banner a { color: inherit; text-decoration: underline; }
.einwilligung-titel { font: 700 15px/1.4 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.einwilligung-stand { color: var(--mute); }
.einwilligung-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.einwilligung-knoepfe button {
  flex: 1 1 140px; height: 48px; padding: 0 20px; border: 1px solid var(--knopf); border-radius: 0; background: var(--knopf); color: var(--knopf-tinte);
  font: 700 15px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s, color .2s;
}
.einwilligung-knoepfe button:hover { background: var(--knopf-hover); color: var(--knopf-hover-tinte); }