/* ============================================================
   Sascha Montag — Fotojournalist
   Eine Schriftfamilie (Archivo, selbst gehostet), ein Akzent.
   Archivo steht unter der SIL Open Font License 1.1.
   ============================================================ */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("fonts/archivo-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("fonts/archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#F7F7F5;
  --white:#FFFFFF;
  --sunk:#EDEDE9;
  --ink:#111110;
  --ink-2:#4E4D47;
  --mute:#6E6C64;
  --line:#E2E1DB;
  --line-2:#CFCDC5;
  /* Ein einziges Rot. Frueher gab es zwei: --accent fuer die Kopfzeilen
     und ein dunkleres --accent-deep fuer die kleinen Rubrikzeilen auf den
     Kacheln. Beide standen oft nebeneinander. Dieser Ton ist dunkel genug,
     dass er auch in 11px-Versalien auf Papier traegt (5,1:1). */
  --accent:#C4321A;
  --frame:0 1px 2px rgba(17,17,16,.05), 0 14px 30px -20px rgba(17,17,16,.28);
  --w:1280px;
  --w-text:1060px;
  --pad:clamp(20px,4.5vw,60px);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Wer Bewegung abbestellt hat, bekommt keine: nicht nur das sanfte
   Scrollen, auch Ueberblendung, Zoom und Farbwechsel stehen still. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .fig:hover .ph img,.ausgabe:hover .ph img,.film:hover img{transform:none}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* Auf roter Flaeche ist ein roter Ring nicht zu sehen. Dort schwarz,
   im Vollbild hell, weil dort beides dunkel waere. */
.btn.solid:focus-visible,.top .cta:focus-visible{outline-color:var(--ink)}
dialog :focus-visible{outline-color:var(--paper)}

.wrap{width:min(100% - 2*var(--pad), var(--w)); margin-inline:auto}
.wrap.text{width:min(100% - 2*var(--pad), var(--w-text))}
/* Fuer Screenreader und Suchmaschinen vorhanden, auf der Seite nicht sichtbar. */
.unsichtbar{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.slug{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.slug b{color:var(--accent); font-weight:600}

.eyebrow{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
/* Alle Kopfzeilen stehen im Akzentrot. */
.eyebrow .k{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
/* Der Zusatz stand frueher hinter einem Schraegstrich. Auf schmalen
   Schirmen rutschte die Zeile um, und der Strich stand als erstes
   Zeichen einer neuen Zeile - das las sich wie ein Tippfehler. Die
   Luecke im Raster trennt genauso gut. */
.eyebrow .v{font-size:14px; color:var(--mute)}

h2{font-size:clamp(30px,3.6vw,50px); font-weight:600; line-height:1.06; letter-spacing:-.025em; margin:0 0 clamp(24px,3vw,40px); text-wrap:balance}

/* ---------------- Kopf ---------------- */
.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.top .in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1; padding:0}
/* Name und Beruf stehen untereinander. Frueher stand "FOTOJOURNALIST"
   daneben, gesperrt in roten Versalien - neben dem Namen las sich das wie
   ein zweites Logo. Jetzt traegt die Zeile die Werte der Navigation: normale
   Schreibung, 500, im Akzentrot. Das Padding faellt weg, damit der
   zweizeilige Block den Kopf nicht hoeher macht; an der Kopfhoehe haengen
   die scroll-margin-Werte der Sprungmarken. */
.brand .n{font-size:19px; font-weight:600; letter-spacing:-.015em}
.brand .r{font-size:13px; font-weight:500; letter-spacing:0; color:var(--accent)}
nav.main{display:flex; gap:clamp(16px,2.2vw,30px)}
nav.main a{font-size:13.5px; font-weight:500; color:var(--ink-2); padding:5px 0; border-bottom:1px solid transparent; transition:color .18s,border-color .18s}
.top .cta{padding:9px 16px; background:var(--accent); color:var(--white); font-size:13px;
  font-weight:500; transition:background .2s,color .2s; white-space:nowrap}
.burger{display:none; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:10px 0}
@media (max-width:900px){
  nav.main{display:none; position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:4px var(--pad) 14px}
  nav.main.open{display:flex}
  nav.main a{padding:13px 0; border-bottom:1px solid var(--line); font-size:15px}
  /* Bei 320 Pixeln stand der Name sonst zweizeilig: Knopf und Menue
     nahmen ihm die Breite. Enger Abstand, und der Name bricht nicht. */
  .top .in{gap:12px}
  .brand .n{white-space:nowrap}
  .burger{display:block; order:3}
  /* Der Weg zum Kontakt stand frueher in einem festen Balken am unteren
     Rand. Der nahm auf jeder Seite 50 Pixel, lag im Querformat auf jedem
     Foto und sagte auf der Kontaktseite zum dritten Mal dasselbe. Jetzt
     steht derselbe Knopf wie auf dem Schreibtisch oben im Kopf, nur
     schmaler. */
  .top .cta{order:2; padding:7px 12px; font-size:12.5px}
  /* Innenabstand haelt den Kopf auf seiner alten Hoehe (70px), an der die
     Sprungmarken eingestellt sind. */
  .brand{gap:2px; padding:4.25px 0}
  .brand .r{font-size:12px}
}

/* ---------------- Handlungsaufforderung ---------------- */

.inline-cta{margin-top:clamp(20px,2.4vw,30px); font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px;
  border-bottom:1px solid var(--accent); padding-bottom:2px}


/* ---------------- Bildraster ---------------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:clamp(20px,2.4vw,30px)}
.chips button{padding:8px 12px; font-size:12.5px; font-weight:500; border:1px solid var(--line-2); color:var(--ink-2);
  transition:border-color .18s,color .18s,background .18s}
.chips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.sheet{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:clamp(18px,2vw,28px) clamp(14px,1.5vw,20px)}
/* Die Uebersichten nehmen dasselbe Vierer-Raster wie die Startseite. Zuvor
   fuellten sie automatisch auf und ergaben auf breiten Schirmen fuenf
   Spalten, die Kacheln waren dort schmaler als auf der Startseite.
   Auf dem Telefon bleibt es bei einer Spalte: zwei waeren mit 168px zu eng
   fuer Titel und Unterzeile. */
.rubrik .sheet{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.rubrik .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rubrik .sheet{grid-template-columns:1fr}}
/* In einer Spalte steht die Kachel nicht mehr neben, sondern ueber der
   naechsten. Mit den 18px der mehrspaltigen Ansicht sass die Unterzeile
   naeher am Bild darunter als an ihrem eigenen darueber - beim Scrollen
   war nicht zu erkennen, zu welchem Foto sie gehoert. */
@media (max-width:560px){.sheet{row-gap:38px}}
/* Zwei verschiedene Abstaende, deshalb nicht ueber "gap" allein: Die
   Rubrikzeile steht in Versalien, ihre Zeilenbox hat unten mehrere
   Pixel Luft, weil keine Unterlaengen vorkommen. Mit 9px Raster stand
   sie sichtbar weiter vom Titel weg als vom Bild. Unter dem Bild
   bleiben es 9px (2 + 7), zum Titel sind es 2. */
.fig{display:grid; gap:2px; align-content:start; text-align:left}
.fig .slug{margin-top:7px}
.fig .ph{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sunk); box-shadow:var(--frame)}
.fig .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fig h3{margin:0; font-size:17.5px; font-weight:600; line-height:1.2; letter-spacing:-.015em}
.fig h3 i{display:block; font-size:14px; font-weight:400; font-style:italic; color:var(--ink-2); margin-top:1px; letter-spacing:0}
.fig .by{margin:0; font-size:13.5px; color:var(--ink-2)}

/* ---------------- Film ---------------- */

/* ---------------- Auszeichnungen ---------------- */
/* Preise und Stipendien stehen nebeneinander. Unter 900px untereinander,
   sonst wird die Spalte fuer die Zeile "mit ... - Titel" zu schmal. */
.ledger{margin-top:clamp(44px,5vw,72px); display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4vw,48px)}
@media (max-width:900px){.ledger{grid-template-columns:1fr}}
.ledger h3{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
  margin:0; padding-bottom:9px; border-bottom:1px solid var(--line)}
.ledger ol{list-style:none; margin:0; padding:0}
.ledger li{display:grid; grid-template-columns:52px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.ledger li.mehr{display:none}
.ledger li .d{font-size:11.5px; font-weight:500; color:var(--mute); padding-top:3px; font-variant-numeric:tabular-nums; letter-spacing:.03em}
.ledger li .w{font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.ledger li .s{display:block; color:var(--ink-2); font-size:13px; line-height:1.4; margin-top:1px}
.showall{margin-top:14px; padding-top:8px; font-size:13px; font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:2px}

/* ---------------- Vita ---------------- */
.vita{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(26px,4.5vw,64px); align-items:start}
@media (max-width:900px){.vita{grid-template-columns:1fr}}
.vita figure{margin:0}
/* Das Porträt ist ein Querformat und steht ungeschnitten, 4:3 wie die Datei. */
.vita figure img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 50%; box-shadow:var(--frame)}
.vita figcaption{margin-top:9px}
.vita p{font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.62; color:var(--ink-2); margin:0 0 1em; max-width:62ch}
.vita p strong{color:var(--ink); font-weight:600}
/* Vita-Seite: oben Portraet und Text nebeneinander, darunter ueber die volle
   Breite Preise und Stipendien. */
.vita-seite{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}

/* Das Portraet ist ein Querformat und steht hier ungeschnitten, 4:3 wie die
   Datei. Der Text daneben soll dieselbe Hoehe fuellen, deshalb laeuft er
   ueber die volle Spaltenbreite und waechst mit dem Fenster mit - genau wie
   das Bild. Die 1.35vw sind ausgerechnet, nicht geraten: bei jeder Breite
   ergeben sie eine Textsaeule etwa so hoch wie Bild und Bildzeile zusammen. */
.vita-seite .vitatext p{font-size:clamp(13.8px,1.35vw,18.8px); max-width:none}

/* Unter 1040px wird die Spalte zu schmal, um Text auf Bildhoehe zu bringen,
   ohne ihn unleserlich klein zu setzen. Ab da steht alles untereinander und
   der Text bekommt wieder seine normale Groesse und Zeilenbreite. */
@media (max-width:1040px){
  .vita-seite{grid-template-columns:1fr}
  .vita-seite .vitatext p{font-size:clamp(15.5px,1.2vw,17.5px); max-width:62ch}
}

/* ---------------- Kontakt ---------------- */

.cgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 30px}
.cgrid div{display:grid; gap:4px; align-content:start; font-size:14.5px}
/* Die Beschriftungen stehen im Akzentrot, wie die Rubrikzeile der Wortmarke.
   Sie ordnen die Angaben, ohne mit ihnen um Aufmerksamkeit zu ringen. */
.cgrid .k{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
/* Die Angaben sind Verweise, in Ruhe war das nicht zu sehen. */
.cgrid a{border-bottom:1px solid var(--accent); padding-bottom:1px}

footer{border-top:1px solid var(--line); padding:20px 0 34px; font-size:12.5px; color:var(--mute);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer nav{display:flex; gap:14px; flex-wrap:wrap}
/* Tippflaechen: der Text bleibt klein, der Bereich zum Treffen nicht. */
footer a{display:inline-block; padding:5px 0}

/* ---------------- Rechtstexte als eigene Seiten ---------------- */
/* Rechtstexte: kleine Zwischenueberschriften statt der grossen Rubrik-h2.
   Die Regeln hingen frueher an .page; seit die Seiten in .rubrik stehen,
   griffen sie nicht mehr und jede Zwischenueberschrift wurde riesig. */
.rubrik.rechtstext h1{font-size:clamp(30px,3.6vw,48px); font-weight:600; letter-spacing:-.03em; line-height:1.06; margin:12px 0 clamp(26px,3vw,38px)}
.rechtstext h2{font-size:clamp(16.5px,1.4vw,20px); font-weight:600; letter-spacing:-.015em; margin:30px 0 7px}
.rechtstext p{margin:0 0 11px; color:var(--ink-2); font-size:15px; line-height:1.66; max-width:68ch}
.rechtstext ul{margin:0 0 11px; padding-left:18px; color:var(--ink-2); font-size:15px; line-height:1.66; max-width:68ch}
.rechtstext li{margin-bottom:5px}
/* Wie in der Fussleiste: der Text bleibt klein, die Flaeche zum Treffen
   nicht. */
.rechtstext .body a,.rechtstext .updated a{display:inline-block;padding:4px 0;
  border-bottom:1px solid var(--accent)}
.rechtstext .updated{margin-top:34px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mute)}

/* ---------------- Lightbox ---------------- */
dialog.lb{border:0; padding:0; margin:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  background:var(--ink); color:var(--paper); overflow:hidden}
dialog.lb::backdrop{background:var(--ink)}
.lb-top .t{font-weight:600; letter-spacing:-.015em}

/* ---------------- Hilfsmittel ---------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ueberspringen{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:14px}
.ueberspringen:focus{left:0}

/* ---------------- Knoepfe ---------------- */
/* Ein Weg, den man gehen soll, muss auch wie einer aussehen. */
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:clamp(18px,2.4vw,28px)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);
  transition:border-color .18s,background .18s,color .18s}
/* Eine Regel fuer alle Knoepfe: Rot heisst, hier geht es weiter. Schwarz
   heisst, hier bist du gerade. Beim Zeigen faellt der Knopf deshalb von
   Rot auf Schwarz, nicht umgekehrt. Vorher war es genau andersherum als
   beim roten Knopf oben im Kopf und damit widerspruechlich. */
.btn.solid{background:var(--accent);color:var(--white);border-color:var(--accent)}

/* Textlink, der weiterfuehrt: mit Pfeil und Unterstrich, nicht zu verwechseln
   mit gewoehnlichem Fliesstext. */

/* ---------------- Startseite: Bühne ---------------- */
.buehne{position:relative;height:min(86vh,940px);min-height:480px;overflow:hidden;background:var(--ink)}
.folien{position:absolute;inset:0}
.folie{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.folie.an{opacity:1}
.folie img{width:100%;height:100%;object-fit:cover}
.buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(17,17,16,.82) 0%,rgba(17,17,16,.28) 38%,transparent 68%)}
.buehne-fuss{position:absolute;left:0;right:0;bottom:clamp(20px,3.5vh,44px);z-index:2;color:var(--paper);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.buehne-text .slug{color:var(--line-2);display:block;margin-bottom:8px}
.buehne-text .slug b{color:var(--accent)}
.buehne-fuss h1{font-size:clamp(30px,5vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
.buehne-steuer{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.buehne-steuer .stand{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--line-2);font-variant-numeric:tabular-nums}
/* Weiterblaettern durch Antippen: linke Haelfte zurueck, rechte vor.
   Die Flaechen sind unsichtbar - ein Pfeil im Bild lag regelmaessig auf
   einem Gesicht. Sie liegen unter der Textzeile der Buehne, damit Titel,
   Punkte und Knopf weiter erreichbar bleiben. Der Tastaturfokus macht
   sie sichtbar, sonst waere der Weg nur mit der Hand zu finden. */
.folie-zone{position:absolute;top:0;bottom:0;width:32%;z-index:1;
  cursor:pointer;background:none;border:0}
.folie-zone.l{left:0}
.folie-zone.r{right:0}
.folie-zone:focus-visible{outline-offset:-4px}
.punkte{display:flex;gap:5px}
/* Der sichtbare Strich bleibt duenn, die Tippflaeche wird ueber den
   Innenabstand auf 25px gebracht. background-clip haelt die Farbe im Strich. */
.punkte button{width:22px;height:3px;background:rgba(247,247,245,.4);transition:background .25s;
  box-sizing:content-box;padding:11px 0;background-clip:content-box}
/* background-color, nicht background: die Kurzschreibweise wuerde das
   background-clip von oben zuruecksetzen, und der aktive Punkt waere ein
   Klotz ueber die ganze Tippflaeche statt ein feiner Strich. */
.punkte button[aria-current="true"]{background-color:var(--accent)}
/* Auf dem Foto der Buehne kann Schwarz nicht die Gegenfarbe sein, es
   verschwindet im Bild. Dort faellt der Knopf von Rot auf Papier. */
.btn.hell{background:var(--accent);color:var(--white);border-color:var(--accent);font-weight:600}
/* Auf dem Telefon blieb frueher beides weg. Ohne die Punkte weiss dort
   niemand, dass die Buehne mehrere Bilder zeigt. */
/* Auf dem Telefon nimmt die Buehne die Hoehe des Bildes an, statt es in
   einen hochkanten Rahmen zu zwingen. Vorher war der Rahmen bei 390px
   Breite 726px hoch: Von einem Querformat blieben 36 Prozent der Breite
   uebrig, fast 700px wurden seitlich abgeschnitten. Der Titel steht dafuer
   unter dem Bild statt darueber, und weil der helle Grund den hellen Text
   nicht traegt, wechseln Schrift- und Punktfarben mit.
   Die zweite Bedingung fasst hochkante Fenster mit: Auf einem Tablet mit
   768 mal 1024 ist der Rahmen sonst 880px hoch bei 768px Breite, und es
   bleibt genauso beschnitten wie auf dem Telefon. */
@media (max-width:700px), (max-aspect-ratio:4/5){
  .buehne{height:auto;min-height:0;background:none}
  .folien{position:relative;aspect-ratio:3/2}
  .buehne::after{display:none}
  .buehne-fuss{position:static;bottom:auto;color:var(--ink);
    display:block;margin-top:clamp(16px,3vw,22px)}
  .buehne-text .slug{color:var(--mute)}
  .buehne-text .slug b{color:var(--accent)}
  .buehne-steuer{margin-top:14px}
  .buehne-steuer .stand{display:none}
  /* Zwoelf Punkte muessen auch auf 320 Pixel passen. Der Strich schrumpft
     mit dem Fenster, die Tippflaeche bleibt ueber den Innenabstand hoch.
     Umbrechen darf die Reihe zur Sicherheit trotzdem. */
  .punkte{gap:2px;flex-wrap:wrap}
  .punkte button{width:clamp(9px,2.6vw,13px);padding:11px 4px;
    background-color:var(--line-2)}
  .punkte button[aria-current="true"]{background-color:var(--accent)}
}

/* ---------------- Startseite: Einstieg ---------------- */
.einstieg{padding:clamp(44px,6vw,80px) 0 clamp(32px,4vw,52px)}
.einstieg .gross{font-size:clamp(19px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.28;
  max-width:26ch;margin:0 0 .7em;text-wrap:balance}
.einstieg .vorspann{font-size:16px;color:var(--ink-2);max-width:62ch;margin:0;line-height:1.6}

/* ---------------- Rubrikseiten ---------------- */
.rubrik{padding:clamp(38px,5vw,68px) 0 clamp(56px,7vw,100px)}
/* Wie beim Kopf der Geschichten: Die Ueberschrift bringt durch ihre
   Unterlaenge schon Luft mit, 30px kamen obendrauf und rissen sie vom
   Satz darunter weg. */
.rubrik h1{font-size:clamp(32px,4.6vw,62px);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  margin:0 0 clamp(10px,1.3vw,16px);text-wrap:balance}
.rubrik .lead{font-size:16.5px;color:var(--ink-2);max-width:58ch;margin:0 0 clamp(22px,3vw,36px)}
/* Ein kurzer Satz, der in eine Zeile gehoert. 58ch brachen ihn nach dem
   vorletzten Wort um, was nach einem Versehen aussah. Auf schmalen
   Bildschirmen bricht er weiter, dort geht es nicht anders. */
.rubrik .lead.breit{max-width:none}
.rubrik .sheet{margin-top:clamp(22px,3vw,34px)}

/* ---------------- Geschichtenseite ---------------- */
.eroeffnung{margin:0;background:var(--sunk)}
.eroeffnung .lupe{display:block;width:100%}
.eroeffnung img{width:100%;height:min(78vh,860px);object-fit:cover;display:block}
/* Wie bei der Buehne: Auf hochkanten Schirmen steht das ganze Bild statt
   eines Ausschnitts. Bei 390px Breite war der Rahmen 658px hoch, von einem
   Querformat blieben 40 Prozent der Breite uebrig. Ohne feste Hoehe traegt
   das Bild sein eigenes Verhaeltnis, ein Ausschnitt entfaellt - und damit
   auch die Notwendigkeit, ihn ueber "fokus" zu verschieben. */
@media (max-width:700px), (max-aspect-ratio:4/5){
  .eroeffnung img{height:auto}
}
/* Unter der Ueberschrift steht meist gleich die Quellenzeile. Die
   Unterlaenge der Ueberschrift bringt schon Luft mit, der alte Abstand
   von 34px kam obendrauf und riss die beiden auseinander. */
.g-kopf{padding:clamp(28px,4vw,52px) 0 clamp(10px,1.3vw,16px)}
.g-kopf .slug{display:block;margin-bottom:10px}
.g-kopf h1{font-size:clamp(30px,4.4vw,58px);font-weight:600;letter-spacing:-.03em;line-height:1.03;
  margin:0;text-wrap:balance}
.g-kopf .unter{font-size:clamp(17px,1.9vw,23px);font-style:italic;color:var(--ink-2);margin:.3em 0 0;font-weight:400}
.g-kopf .preis{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--accent);margin:1em 0 0}
.g-kopf .preis::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.g-kopf .vorspann{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.6;color:var(--ink-2);
  max-width:64ch;margin:1.1em 0 0}
.g-kopf .erschienen{font-size:13px;color:var(--mute);margin:1.2em 0 0;padding-top:1em;border-top:1px solid var(--line)}
.g-kopf .erschienen a{border-bottom:1px solid var(--accent)}

.g-strecke{display:grid;gap:clamp(30px,5vh,64px);padding:clamp(16px,3vw,32px) var(--pad) clamp(40px,6vw,72px);
  justify-items:center}
/* Die Breite kommt aus dem Seitenverhaeltnis, nicht aus dem Bild. Sonst
   ist ein noch nicht geladenes Foto 43 mal 27 Pixel gross und die Seite
   waechst beim Scrollen um mehrere tausend Pixel. */
.bild{margin:0;display:grid;justify-items:center;gap:9px;
  width:min(100%, calc(84vh * var(--v,1.5)), 1500px)}
/* Die Lupe ist ein Knopf und damit ein Rasterfeld ohne eigene Breite. Ohne
   width:100% schrumpft sie auf das noch nicht geladene Bild zusammen, und die
   Breite der Figur darueber nuetzt nichts. */
.lupe{display:block;cursor:zoom-in;width:100%;max-width:100%}
.bild img{width:100%;height:auto;box-shadow:var(--frame)}
.bild figcaption{font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--mute);
  font-variant-numeric:tabular-nums}
.paar{display:flex;gap:clamp(10px,1.6vw,22px);justify-content:center;align-items:flex-start;
  flex-wrap:wrap;max-width:100%}
/* Im Flex-Container kann die Breite nicht aus dem Bild kommen, sonst faellt sie
   auf null zusammen. Sie wird deshalb aus Hoehe mal Seitenverhaeltnis gerechnet. */
.paar .bild{width:calc(74vh * var(--v));max-width:calc(50% - clamp(5px,.8vw,11px))}
.paar .bild img{width:100%;height:auto}
@media (max-width:700px){
  .bild{width:100%}
  /* Die Reihe liegt in einem Raster, das seine Felder auf Inhaltsbreite
     zusammenzieht. Ohne eigene Breite fragt sie ihre Kinder, die Kinder
     fragen sie zurueck, und alles faellt auf null - die Seite wuchs beim
     Scrollen um tausend Pixel. */
  .paar{flex-direction:column;align-items:center;width:100%}
  .paar .bild{width:100%;max-width:100%}
}

/* Der feine Strich sass frueher an der Rechtezeile. Die ist weg, weil die
   Fussleiste der Seite denselben Vermerk gleich darunter noch einmal trug.
   Der Strich bleibt, er trennt die Bildstrecke von den Knoepfen. */
.g-fuss{padding:22px 0 clamp(40px,5vw,72px);border-top:1px solid var(--line)}

/* ---------------- Veröffentlichungen ---------------- */
.jahrleiste{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:clamp(20px,3vw,32px);
  border-bottom:1px solid var(--line)}
.jahrleiste a{font-size:12.5px;font-weight:500;padding:8px 12px;border:1px solid var(--line-2);color:var(--ink-2)}
.jahrgang{padding-top:clamp(26px,3.5vw,44px)}
.jahrgang h2{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;margin:0 0 clamp(14px,2vw,22px);
  font-variant-numeric:tabular-nums}
.ausgaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(16px,2vw,26px) clamp(12px,1.4vw,18px)}
.ausgabe{display:grid;gap:7px;align-content:start;text-align:left}
.ausgabe .ph{display:block;background:var(--sunk);box-shadow:var(--frame);overflow:hidden;aspect-ratio:3/2}
.ausgabe .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* Medium und Ausgabe stehen in einer Zeile, die Ausgabe kleiner und
   leiser dahinter. Darunter, wo eine Autorin eingetragen ist, ihr Name. */
.ausgabe .m{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ausgabe .a{font-size:12.5px;font-weight:400;color:var(--ink-2);margin-left:6px;
  letter-spacing:0;font-variant-numeric:tabular-nums}
/* Der Name gehoert zur Zeile darueber, nicht zum naechsten Block. Das
   Raster setzt ueberall 7 Pixel; hier zieht ein negativer Abstand die
   beiden Zeilen zusammen, und die engere Zeilenhoehe nimmt die Luft aus
   dem Textkasten. Der Abstand zum Bild bleibt. */
.ausgabe .by{font-size:12.5px;color:var(--mute);line-height:1.2;margin-top:-4px}

/* ---------------- Heft-Optik im Archiv (Entwurf 2026) ----------------
   Der flache Scan wurde auf 3:2 beschnitten, oben angesetzt. Man sah einen
   Ausschnitt, nie das Blatt. Hier steht das ganze Blatt in einem gleich
   hohen Feld, damit die Bildunterzeilen einer Reihe auf einer Linie bleiben,
   und traegt die Merkmale von Papier: Schlagschatten, eine feine Aussenkante
   und bei Doppelseiten den Bund in der Mitte. Gezeichnet wird alles mit
   Verlaeufen, es kommt kein einziges Bild dazu. */
.ausgabe .ph.blatt{display:grid;place-items:center;aspect-ratio:1;
  background:transparent;box-shadow:none;overflow:visible}
.ausgabe .ph.blatt .bl{position:relative;aspect-ratio:var(--v);
  box-shadow:0 1px 1px rgba(20,18,15,.10), 0 9px 20px -8px rgba(20,18,15,.36)}
/* Die Hoehe kommt immer aus dem Verhaeltnis, gesetzt wird nur die Breite.
   Eine Hoehe in Prozent misst hier gegen ein Feld, dessen eigene Hoehe erst
   aus aspect-ratio entsteht - der Browser laesst sie dann auf auto fallen,
   und das Blatt sprengt die Kachel. Im quadratischen Feld fuellt ein
   liegendes Blatt die Breite, ein stehendes bekommt genau sein Verhaeltnis. */
.ausgabe .ph.blatt .bl{width:min(100%, calc(var(--v) * 100% / var(--feld, 1)))}
.ausgabe .ph.blatt img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* Aussenkanten und Bund. Der Bund sitzt genau in der Mitte und ist schmal;
   breiter gezogen sieht er nach Schmutz aus, nicht nach Falz. */
.ausgabe .ph.blatt .bl::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,18,15,.09) 0, rgba(20,18,15,0) 3.5%),
    linear-gradient(270deg, rgba(20,18,15,.09) 0, rgba(20,18,15,0) 3.5%)}
.ausgabe .ph.blatt .bl.doppel::before{
  background:
    linear-gradient(90deg, rgba(20,18,15,.09) 0, rgba(20,18,15,0) 3.5%),
    linear-gradient(270deg, rgba(20,18,15,.09) 0, rgba(20,18,15,0) 3.5%),
    linear-gradient(90deg, rgba(20,18,15,0) 45.5%, rgba(20,18,15,.13) 49.2%,
      rgba(20,18,15,.22) 50%, rgba(20,18,15,.13) 50.8%, rgba(20,18,15,0) 54.5%)}
/* Die Papierkante: aussen ein Haarstrich, damit ein weisses Blatt nicht in
   den hellen Grund ausfranst. */
.ausgabe .ph.blatt .bl::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.10)}
@media (hover:hover) and (pointer:fine){
  .ausgabe:hover .ph.blatt .bl{box-shadow:0 1px 1px rgba(20,18,15,.12), 0 14px 28px -8px rgba(20,18,15,.42)}
  .ausgabe:hover .ph.blatt img{transform:none}
}
/* Einspaltig braucht es kein gleich hohes Feld mehr - daneben steht nichts,
   woran sich eine Unterzeile ausrichten muesste. Das Feld legt sich also um
   das Blatt, statt ueber und unter einer Doppelseite ein Drittel Luft stehen
   zu lassen. Das spart auf dem Telefon rund ein Viertel der Seitenlaenge. */
@media (max-width:620px){
  .ausgabe .ph.blatt{aspect-ratio:auto}
}

/* ---------------- Vollbild-Lichtkasten ---------------- */
dialog.lb{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  background:var(--ink);color:var(--paper);overflow:hidden}
dialog.lb::backdrop{background:var(--ink)}
/* Die Leiste liegt ueber dem Blatt, also bleibt sie flach: kleine Knoepfe,
   wenig Innenabstand, und der Verlauf laeuft nach unten aus. */
.lb-top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;
  align-items:center;gap:14px;padding:10px clamp(16px,3vw,38px) 22px;
  background:linear-gradient(to bottom,rgba(17,17,16,.85),rgba(17,17,16,0))}
.lb-top .t{margin:0;font-size:13px;line-height:1.3}
.lb-x{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;white-space:nowrap;border:1px solid rgba(247,247,245,.3);
  background:rgba(17,17,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,color .2s}
/* Die Blaetterflaechen waren vollstaendig durchsichtig: Sie funktionierten,
   aber niemand sah, dass man blaettern kann, und der Tastaturfokus war
   unauffindbar. Jetzt zeigen sie einen Pfeil, sobald man hinzeigt oder
   hinspringt - und auf Geraeten ohne Zeiger dauerhaft. */
.lb-seite{position:absolute;top:0;bottom:0;width:20%;z-index:2;cursor:pointer;
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:clamp(10px,3vw,26px);color:var(--paper);opacity:0;transition:opacity .2s}
.lb-seite.r{right:0;justify-content:flex-end;padding:0 clamp(10px,3vw,26px) 0 0}
.lb-seite:focus-visible{opacity:.9}
.lb-seite .pfeil{width:26px;height:26px;margin:0;opacity:1;
  filter:drop-shadow(0 1px 4px rgba(17,17,16,.7))}
@media (hover:none){.lb-seite{opacity:.55}}
/* Flex, nicht Raster. Im Raster wuchs die Zeile auf die Hoehe des Bildes,
   und max-height:100% mass sich an dieser gewachsenen Zeile - die Grenze
   griff also nie. Ein Hochformat stand dadurch 1944 Pixel hoch in einem
   900 Pixel hohen Fenster und lief unten heraus. Im Flex-Behaelter misst
   sich die Grenze an der festen Hoehe des Kastens. */
.lb-buehne{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:56px clamp(14px,5vw,80px) 64px}
.lb-buehne img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-stand{margin:0;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--line-2);
  font-variant-numeric:tabular-nums}
.lb-stand b{color:var(--paper);font-weight:600}
.lb-stand{position:absolute;inset:auto 0 0 0;z-index:3;padding:22px clamp(16px,3vw,38px) 18px;background:linear-gradient(to top,rgba(17,17,16,.9),rgba(17,17,16,0))}
/* Auf dem Telefon soll die Leiste schmal bleiben und das Blatt nicht
   verdecken. Titel und Knoepfe stehen deshalb in einer Zeile, der Titel
   einzeilig und gekuerzt, die Knoepfe klein. */
@media (max-width:700px){
  .lb-top{flex-wrap:nowrap;align-items:center;gap:10px;
    padding:8px 12px 20px}
  .lb-top .t{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb-x{font-size:9.5px;letter-spacing:.06em;padding:7px 9px}
  .esc{display:none}
  .lb-stand{white-space:nowrap;font-size:11px}
}

/* ---------------- Film ---------------- */
.filme{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(20px,3vw,34px)}
@media (max-width:820px){.filme{grid-template-columns:1fr}}
.film{position:relative;display:block;overflow:hidden;background:var(--sunk);aspect-ratio:16/10;box-shadow:var(--frame)}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
/* Der Verlauf muss den Text auch dann tragen, wenn spaeter ein helles
   Foto eingesetzt wird - deshalb oben Luft und erst danach der Text. */
.film .ov{position:absolute;inset:auto 0 0 0;color:var(--paper);display:grid;gap:6px;
  padding:clamp(46px,7vw,84px) clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px);
  background:linear-gradient(to top,rgba(17,17,16,.95) 0%,rgba(17,17,16,.88) 58%,
    rgba(17,17,16,.5) 82%,transparent 100%)}
.film .ov .k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.film .ov .t{font-size:clamp(21px,2.2vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.film .ov .b{font-size:13.5px;color:var(--line-2);max-width:46ch;line-height:1.45}
.film .fehlt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--line-2);margin-top:2px}
.film .play{position:absolute;right:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);width:44px;height:44px;
  border:1px solid rgba(247,247,245,.6);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(5px)}
.film .play::after{content:"";border-left:11px solid var(--paper);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}

/* ---------------- Kontaktseite ---------------- */
.rubrik.kontakt h1{max-width:16ch}
.rubrik.kontakt .cgrid{margin-top:clamp(30px,4vw,48px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
/* Links E-Mail, Telefon, Post; rechts Agentur, darunter Instagram und Facebook */
.rubrik.kontakt .cgrid{grid-auto-flow:column; grid-template-rows:repeat(3,auto)}
@media (max-width:520px){.rubrik.kontakt .cgrid{grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none}}

/* ---------------- Startseite als durchgehende Strecke ---------------- */

.flow{padding:clamp(48px,6.5vw,96px) 0;border-top:1px solid var(--line)}
.flow h2{font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.03;
  margin:0 0 clamp(20px,2.8vw,34px);text-wrap:balance}
.flow .lead{font-size:16.5px;color:var(--ink-2);max-width:56ch;margin:0 0 clamp(20px,2.6vw,30px)}
.flow.abschluss h2{max-width:16ch}
.sozial{display:flex; gap:22px; flex-wrap:wrap; margin:clamp(22px,2.6vw,30px) 0 0; font-size:14.5px; font-weight:600}
.sozial a{border-bottom:1px solid var(--accent); padding-bottom:2px; transition:color .2s}

.nachladen{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  flex-wrap:wrap;margin-top:clamp(28px,3.5vw,46px)}
.nachladen .btn[hidden]{display:none}
.weiterlesen{margin:clamp(24px,3vw,36px) 0 0}
.flow .sheet{margin-top:0}
.flow .vita{align-items:center}

/* ---------------- Der Text der Reportage ---------------- */
.g-text{padding:0 0 clamp(28px,4vw,52px)}
.g-text .vorspann{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--ink);
  max-width:62ch;margin:0 0 1.1em;font-weight:500}
.g-text p{font-size:clamp(16px,1.4vw,18px);line-height:1.68;color:var(--ink-2);max-width:66ch;margin:0 0 1.1em}
/* Der Name der Autorin steht eine Spur kleiner unter der Quellenangabe. */
.erschienen .autor{display:block;font-size:12px;margin-top:3px}
.g-text .erschienen{font-size:13px;color:var(--mute);margin:1.6em 0 0;padding-top:1.1em;
  border-top:1px solid var(--line);max-width:66ch}
/* Steht die Quellenzeile allein, braucht sie keinen Trennstrich - es
   ist ja nichts da, wovon sie zu trennen waere. */
.g-text .erschienen:first-child{margin-top:0;padding-top:0;border-top:0}
.g-text .acts{margin-top:clamp(18px,2.4vw,28px)}
.bildstrecke-kopf{padding:clamp(20px,3vw,34px) 0 0;border-top:1px solid var(--line)}
.bildstrecke-kopf .k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.nachladen .inline-cta,.g-text .inline-cta{margin-top:0}

/* ---------------- Volle Reihen auf der Startseite ----------------
   Feste Spaltenzahl statt auto-fill: Nur so laesst sich garantieren,
   dass die gezeigte Anzahl immer ganze Reihen ergibt. Acht Kacheln
   sind bei vier wie bei zwei Spalten restlos teilbar. */
.flow .sheet{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow .ausgaben{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow .ausgabe .ph.blatt{--feld:1.5; aspect-ratio:3/2}
/* Die drei Abschnitte der Startseite - Reportagen, Veroeffentlichungen,
   Reisegeschichten - sind gleich gebaut und sollen gleich hoch sein, damit
   der Knopf darunter nach dem Sprung aus der Leiste immer an derselben
   Stelle steht. Dafuer gilt ueberall: Bildfeld 3:2, dieselben Abstaende im
   Raster, und unter dem Bild ein Textblock so hoch wie bei den Reportagen
   (Rubrikzeile, Titel, Unterzeile). Reisegeschichten haben keine
   Unterzeile, Veroeffentlichungen nur Titel und Autor - beide bekommen die
   fehlende Hoehe als Mindesthoehe, der Text selbst steht oben wie bisher. */
.flow .ausgaben{gap:clamp(18px,2vw,28px) clamp(14px,1.5vw,20px)}
.flow .ausgabe{gap:9px}
.flow .ausgabe .txt{display:grid; align-content:start; gap:3px}
.flow .ausgabe .txt .by{margin-top:0}
/* Die Mindesthoehen nur dort, wo ein Abschnitt auf einen Bildschirm passt.
   Auf dem Telefon stuende sonst unter jeder Reisegeschichte leere Luft. */
@media (min-width:901px){
  .flow .fig h3{min-height:calc(17.5px * 1.2 + 1px + 14px * 1.2)}
  .flow .ausgabe .txt{min-height:calc(17px + 2px + 17.5px * 1.2 + 1px + 14px * 1.2)}
}
@media (max-width:1000px){
  .flow .sheet,.flow .ausgaben{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Auf dem Telefon eine Spalte, wie auf den Uebersichtsseiten. Bei zwei
   Spalten waren die Kacheln 168px breit, da passten nur rund 27 Zeichen in
   eine Zeile und die Unterzeilen brachen um. Die Ausgabenreihe bleibt
   zweispaltig: Magazintitel ohne Unterzeile vertragen die schmale Kachel. */
@media (max-width:560px){.flow .sheet{grid-template-columns:1fr}}
/* Beim Ansteuern aus der Leiste soll die Rubrikzeile nicht unter dem
   Kopf verschwinden - der klebt oben und ist rund 60 px hoch. */
.einstieg,.buehne,.jahrgang,.bild{scroll-margin-top:78px}
/* Die Abschnitte der Startseite bringen ihren eigenen Innenabstand mit.
   Zaehlt man den Scrollrand einfach dazu, steht die Ueberschrift nach
   einem Sprung aus dem Menue 105px unter der Kopfzeile. Diese Rechnung
   zieht den Innenabstand ab, sodass die Ueberschrift immer 86px vom
   oberen Rand landet - also knapp unter der Kopfzeile, gleich wie breit
   das Fenster ist. Am Schreibtisch wird der Wert negativ: Der eigene
   Innenabstand ist dort groesser als der Platz unter der Kopfzeile, und
   ein negativer Scrollrand schiebt weiter nach oben, ohne die Abstaende
   zwischen den Abschnitten anzutasten. */
.flow{scroll-margin-top:calc(86px - clamp(48px,6.5vw,96px))}
/* Die Vita ist mit 698px kuerzer als ein Bildschirm. Springt man sie an,
   schaut der Kontakt darunter ins Bild. Ihr Scrollrand richtet sich
   deshalb nach der Fensterhoehe: Sie rueckt so weit nach unten, dass vom
   Kontakt hoechstens der Trennstrich zu sehen ist, nie sein Text. Nach
   oben begrenzt, damit auf sehr hohen Fenstern keine leere Flaeche
   entsteht. Auf dem Telefon ist die Vita hoeher als das Fenster, dort
   stellt sich die Frage nicht. */
@media (min-width:901px){
  .flow#wer{scroll-margin-top:clamp(96px, calc(100vh - 792px), 300px)}
}

/* Das hidden-Attribut muss auch dann greifen, wenn eine Klasse weiter oben
   display setzt. .fig und .ausgabe sind display:grid und haetten das
   ausgehebelt - dann stuenden alle Kacheln da, obwohl sie ausgeblendet sind. */
[hidden]{display:none !important}

/* Solange ein Vollbild offen ist, soll die Seite dahinter stillstehen.
   Sonst scrollt das Mausrad im Lichtkasten die Seite darunter weg, und
   auf dem Telefon streitet die Wischgeste mit dem Seitenlauf. */
body:has(dialog[open]){overflow:hidden; overscroll-behavior-x:none}

/* Weg zurueck in die Startseite, oben auf jeder Geschichtenseite. */
/* Pfeile sind gezeichnet, nicht gesetzt. Die Pfeilzeichen fehlen im
   Archivo-Ausschnitt, und auf Telefonen sprang der Browser dafuer in die
   Emoji-Schrift - aus dem feinen Pfeil wurde ein buntes Bildchen. */
.pfeil{flex:none; margin-left:.32em; vertical-align:-.08em; opacity:.7;
  transition:opacity .18s, transform .18s}

.zurueck{display:inline-flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--mute);margin-bottom:14px;transition:color .18s,gap .18s}
a[href^="tel:"]{white-space:nowrap}
.zurueck .pfeil{margin:0}

/* Rubrikseiten: Rueckweg oben und unten */
/* Ueber der Ueberschrift stapelten sich drei Abstaende: der Streifen mit
   dem Zurueck-Verweis, dessen Innenabstand und der des Abschnitts. Auf
   den Veroeffentlichungen stand die Ueberschrift dadurch 119px unter der
   Kopfzeile. Beide Abstaende sind jetzt knapper. */
.seitenweg.oben{padding-top:clamp(12px,1.6vw,18px)}
.seitenweg.oben .zurueck{margin:0}
.seitenweg.oben + .rubrik{padding-top:clamp(8px,1.2vw,14px)}
.rubrik:has(~ .seitenweg.unten){padding-bottom:clamp(28px,3.5vw,48px)}
.seitenweg.unten{display:flex;justify-content:center;padding-bottom:clamp(56px,7vw,100px)}

/* Bildunterschriften - nur sichtbar, wenn UNTERSCHRIFTEN_ZEIGEN in bauen.py
   eingeschaltet ist. Text links, Zaehler rechts. */
.bild figcaption:has(.u){display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;width:100%;letter-spacing:0;text-align:left}
.bild figcaption .u{font-size:13.5px;font-weight:400;color:var(--ink-2);line-height:1.45;
  max-width:62ch;letter-spacing:0}
.bild figcaption .z{flex:none;font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--mute)}
.lb-unter{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:3;margin:0;
  width:min(90vw,760px);text-align:center;font-size:14px;line-height:1.45;color:var(--line-2)}

/* Telefon im Querformat. Bisher fassten die Regeln oben nur schmale und
   hochkante Fenster; bei 844 mal 390 blieb die Buehne 480 Pixel hoch, Titel
   und Knopf lagen unter der Falz, und vom Eroeffnungsbild war knapp die
   Haelfte zu sehen. Ein flaches Fenster bekommt dieselbe Behandlung. */
@media (max-height:520px) and (orientation:landscape){
  .buehne{height:auto;min-height:0;background:none}
  .folien{position:relative;aspect-ratio:3/2}
  .buehne::after{display:none}
  .buehne-fuss{position:static;bottom:auto;color:var(--ink);display:block;
    margin-top:clamp(16px,3vw,22px)}
  .buehne-text .slug{color:var(--mute)}
  .buehne-text .slug b{color:var(--accent)}
  .buehne-steuer{margin-top:14px}
  .buehne-steuer .stand{display:none}
  .eroeffnung img{height:auto}
}

/* ---------------- Nur fuer Maus und Stift ----------------
   Auf dem Telefon bleibt ein Schwebezustand nach dem Antippen haengen,
   bis man woanders hintippt. Beim Pfeil der Buehne wurde daraus ein
   weisses Quadrat, beim Knopf auf dem Foto verschwand die Flaeche ganz,
   weil sie dort Papier auf Papier gewesen waere. Diese Regeln gelten
   deshalb nur dort, wo wirklich geschwebt wird. */
@media (hover:hover){
  nav.main a:hover,nav.main a[aria-current="true"]{color:var(--ink); border-color:var(--accent)}
  .top .cta:hover{background:var(--ink); color:var(--paper)}
  .inline-cta:hover{border-color:var(--ink)}
  .chips button:hover{border-color:var(--ink); color:var(--ink)}
  .fig:hover .ph img{transform:scale(1.04)}
  .showall:hover{border-color:var(--ink)}
  .cgrid a:hover{border-color:var(--ink)}
  footer a:hover{color:var(--ink)}
  .rechtstext .body a:hover{border-color:var(--ink)}
  .btn:hover{background:var(--ink);color:var(--paper)}
  .btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
    .btn.hell:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  .g-kopf .erschienen a:hover{border-color:var(--ink)}
  .jahrleiste a:hover{border-color:var(--ink);color:var(--ink)}
  .ausgabe:hover .ph img{transform:scale(1.04)}
  .lb-x:hover{border-color:var(--paper);background:rgba(17,17,16,.92)}
  .lb-seite:hover{opacity:.9}
  .film:hover img{transform:scale(1.03)}
  .sozial a:hover{border-color:var(--ink)}
  .inline-cta:hover{gap:11px}
  a:hover .pfeil,button:hover .pfeil{opacity:1}
  .zurueck:hover{color:var(--ink);gap:11px}
}