@charset "UTF-8";

/* =====================================================================
   GALERIE – youngstudy
   =====================================================================
   Zuständig (Agent B2): Hero-Fächer (Spezifikation 5.2, «Fächer»),
   Abschnitt «Beispielarbeiten» (5.3) und Galerie mit Bücherstapel,
   Rahmen, Seiten-Track, Steuerzeile, Download und Vollbild (7).

   Nutzt die Tokens aus style.css (Farben, Raster, Abstände, Radien,
   Striche, Bewegung) und window.YS aus script.js.
   Schriften nur über  --schriftrolle: var(--schrift-…);  (schriftsatz.css).
   Schnittstellen: scratchpad/build-schnittstellen.md

   Aufbau
     1. Hero-Fächer (≥ 760 px)
     2. Abschnitt: Kopf und Anordnung
     3. Bücherstapel (Tabliste)
     4. Rahmen (Tabpanel) mit Kopf, Steuerzeile, Satz, Download
     5. Seiten-Track
     6. Akzent «Blätter mal durch.» und Aufmerksamkeitsstriche
     7. Vollbild-Dialog
     8. Ohne JavaScript (noscript-Liste)
     9. Forced Colors und Druck
   ===================================================================== */


/* =====================================================================
   1. HERO-FÄCHER (5.2) – nur ≥ 760 px sichtbar (style.css blendet
   .hero__faecher darunter aus, die Bilder laden dort also nicht).
   Masse in cqi = Prozent der Fächerbreite, damit der Fächer bei
   1024 (≈ 380 px) und 1440 (≈ 520 px) gleich aussieht.
   ===================================================================== */
.faecher {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 100 / 134;          /* 760–1023: zwei Seiten */
}

.faecher__seite {
  --f-drehung: 0deg;
  position: absolute;
  display: block;
  padding: 0;
  border: 1px solid rgb(0 16 33 / .14);
  background: var(--weiss);
  rotate: var(--f-drehung);
  transition: translate var(--dauer-kurz) var(--kurve-aus),
              rotate var(--dauer-kurz) var(--kurve-aus);
  -webkit-tap-highlight-color: transparent;
}
.faecher__seite img { width: 100%; height: auto; }

/* 760–1023: Fallstudie S. 1 oben, Präsentation Folie 3 überlappend darunter */
.faecher__seite--fallstudie   { --f-drehung: -5deg; top: 5cqi;  left: 4cqi;  width: 62cqi; z-index: 1; }
.faecher__seite--praesentation { --f-drehung: 3deg; top: 80cqi; left: 10cqi; width: 90cqi; z-index: 2; }
.faecher__seite--lektorat { display: none; }

.faecher .klebeband--1 { top: -11px; left: calc(50% - 36px); }

@media (hover: hover) and (pointer: fine) {
  .faecher__seite:hover {
    z-index: 4;
    translate: 0 -6px;
    rotate: 0deg;
  }
}
.faecher__seite:focus-visible { z-index: 4; }

@media (min-width: 1024px) {
  .faecher { aspect-ratio: 100 / 95; }   /* ≈ 520 × 490 bei 1440 */
  .faecher__seite--fallstudie   { --f-drehung: -5deg;   top: 5cqi;  left: 2cqi;  width: 48cqi; }
  .faecher__seite--lektorat     { --f-drehung: -1.5deg; top: 1cqi;  left: 54cqi; width: 44cqi; display: block; z-index: 1; }
  .faecher__seite--praesentation { --f-drehung: 3deg;   top: 60cqi; left: 22cqi; width: 58cqi; z-index: 3; }
  .faecher .klebeband--1 { top: -14px; left: calc(50% - 48px); }
}


/* =====================================================================
   2. ABSCHNITT «BEISPIELARBEITEN» (5.3): KOPF UND ANORDNUNG
   Hintergrund und padding-block setzt style.css (.beispiele).
   ===================================================================== */
.beispiele__raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  column-gap: var(--gap);
}
.beispiele__raster > * { grid-column: 1 / -1; min-width: 0; }
.beispiele__hinweis { margin-top: var(--abstand-16); }

.galerie { margin-top: var(--abstand-h2); }

/* Ohne JavaScript: kein Stapel, kein Rahmen – nur die noscript-Liste */
.no-js .galerie__app { display: none; }

.galerie__app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.galerie__hinweise { display: none; }

/* Abstand Stapel → Rahmen: 48 px, darin sitzen Akzent und Striche */
.galerie__buehne {
  position: relative;
  min-width: 0;
  margin-top: var(--abstand-48);
}

@media (min-width: 760px) {
  .beispiele__kopf { grid-column: 1 / span 7; }
}

@media (min-width: 1024px) {
  .beispiele__kopf { grid-column: 1 / span 8; }
  /* Der Hinweis «fiktive Inhalte» steht auf Desktop unter dem Stapel
     (Kopie in .galerie__hinweise); ohne JS bleibt er im Kopf. */
  html.js .beispiele__kopf .beispiele__hinweis { display: none; }

  .galerie__app {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .galerie__auswahl {
    grid-column: 1 / span 4;
    position: sticky;
    top: 96px;
  }
  .galerie__buehne {
    grid-column: 5 / -1;
    margin-top: 0;
  }
  .galerie__hinweise {
    display: grid;
    gap: var(--abstand-12);
    margin-top: var(--abstand-24);
  }
}


/* =====================================================================
   3. BÜCHERSTAPEL (7.2)
   Werte für Breite, Versatz und Drehung sind fest (nicht zufällig).
   Sicherheitsregel: Breite + Versatz + Herausziehen ≤ 100 %.
   ===================================================================== */
.stapel {
  --ruecken-hoehe: 44px;
  --ruecken-abstand: 4px;
  --ruecken-zug: 12px;
  container-type: inline-size;
  display: grid;
  gap: var(--ruecken-abstand);
  /* Platz reservieren, bevor galerie.js die Rücken einsetzt (CLS) */
  min-height: calc(5 * var(--ruecken-hoehe) + 4 * var(--ruecken-abstand));
}
@media (min-width: 760px) {
  .stapel { --ruecken-hoehe: 52px; max-width: 520px; }
}
@media (min-width: 1024px) {
  .stapel { --ruecken-hoehe: 56px; --ruecken-abstand: 5px; --ruecken-zug: 20px; max-width: none; }
}

.ruecken {
  --r-grund: var(--buch-blau);
  --r-farbe: var(--weiss);
  --r-breite: 90%;
  --r-versatz: 0px;
  --r-drehung: 0deg;
  --r-raus: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  width: var(--r-breite);
  height: var(--ruecken-hoehe);
  margin: 0;
  padding: 0 22px 0 14px;          /* rechts: 10 px Buchschnitt + 12 px */
  border: 0;
  border-radius: var(--radius-ruecken);
  background: var(--r-grund);
  color: var(--r-farbe);
  text-align: left;
  translate: calc(var(--r-versatz) + var(--r-raus)) 0;
  rotate: var(--r-drehung);
  transition: translate var(--dauer-kurz) var(--kurve-aus),
              rotate var(--dauer-kurz) var(--kurve-aus);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Buchschnitt: Papierkanten rechts */
.ruecken::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  border-left: 1px solid rgb(0 0 0 / .18);
  border-radius: 0 var(--radius-ruecken) var(--radius-ruecken) 0;
  background: repeating-linear-gradient(to bottom, #F4EEE9 0 2px, #DCCFC6 2px 3px);
}

/* Reihenfolge von oben nach unten (7.2) */
.ruecken:nth-child(1) { --r-breite: 90%; --r-versatz: 6px;  --r-drehung: -.5deg; }
.ruecken:nth-child(2) { --r-breite: 93%; --r-versatz: 0px;  --r-drehung: .4deg; }
.ruecken:nth-child(3) { --r-breite: 89%; --r-versatz: 10px; --r-drehung: -.3deg; }
.ruecken:nth-child(4) { --r-breite: 92%; --r-versatz: 2px;  --r-drehung: .5deg; }
.ruecken:nth-child(5) { --r-breite: 87%; --r-versatz: 4px;  --r-drehung: 0deg; }

/* Farben aus einstellungen.js (farbe) */
.ruecken--blau   { --r-grund: var(--buch-blau);  --r-farbe: var(--weiss); }
.ruecken--rot    { --r-grund: var(--buch-rot);   --r-farbe: var(--weiss); }
.ruecken--gruen  { --r-grund: var(--buch-gruen); --r-farbe: var(--weiss); }
.ruecken--beige  { --r-grund: var(--buch-beige); --r-farbe: var(--navy); }
.ruecken--papier { --r-grund: var(--weiss);      --r-farbe: var(--navy); border: var(--strich-knopf) solid var(--navy); padding-left: 12px; }
.ruecken--papier::after { top: -1px; bottom: -1px; }

.ruecken__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;                       /* das Wort nie stauchen – eher wird die Meta gekürzt */
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-label);
  font-weight: var(--label-gewicht);
  font-size: .9375rem;              /* 15 px */
  line-height: 1;
  letter-spacing: var(--label-laufweite);
  text-transform: uppercase;
  white-space: nowrap;
}
.ruecken__keil {
  width: 13px;
  height: 13px;
  margin-top: -3px;
  color: var(--rot);
  stroke-width: 2.5px;
}
.ruecken__meta {
  margin-left: auto;
  min-width: 0;
  overflow-x: clip;                 /* Sicherheitsnetz: nie über das Wort laufen */
  text-overflow: ellipsis;
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-label);
  font-weight: var(--label-gewicht);
  font-size: .75rem;                /* 12 px */
  line-height: 1;
  letter-spacing: var(--label-laufweite);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ruecken__meta-kurz { display: none; }
/* unter 360 px (7.2): nur der Stil («APA 7») */
@media (max-width: 359.98px) {
  .ruecken__meta-lang { display: none; }
  .ruecken__meta-kurz { display: inline; }
}

@media (min-width: 760px) {
  .ruecken__label { font-size: 1.0625rem; }   /* 17 px */
  .ruecken__meta { font-size: .8125rem; }      /* 13 px */
}
/* schmaler Stapel auf Desktop (1024–1100 px, Spalten 1–4): Schrift wie am
   Handy, damit auch dort die volle Meta mit Seitenzahl neben das Wort passt */
@container (max-width: 329.98px) {
  .ruecken__label { font-size: .9375rem; }
  .ruecken__meta { font-size: .75rem; }
}

/* Lesezeichenband: hängt am aktiven Rücken 12 px unter der Kante hervor */
.ruecken__band {
  position: absolute;
  left: 66%;
  top: calc(100% - 6px);
  width: 10px;
  height: 18px;
  color: var(--rot);
  opacity: 0;
  pointer-events: none;
}

/* Aktiv: herausgezogen, gerade, mit Band (erkennbar ohne Farbe) */
.ruecken[aria-selected="true"] {
  --r-raus: var(--ruecken-zug);
  --r-drehung: 0deg;
  z-index: 2;
}
.ruecken[aria-selected="true"] .ruecken__band { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ruecken[aria-selected="false"]:hover { --r-raus: 6px; }
}
.ruecken:focus-visible { z-index: 3; }


/* =====================================================================
   4. RAHMEN (7.3) – wie das QR-Feld
   Raster: Kopf / Track / Steuerzeile / Vorschau-Hinweis / Satz / Download.
   Die Steuerzeile liegt direkt im Raster, damit die Pfeil-Buttons ab
   1024 px ohne zweites Markup auf die Rahmenkante wandern können.
   (overflow bleibt sichtbar – der Track schneidet seine Seiten selbst.)
   ===================================================================== */
.rahmen {
  --rahmen-innen: 16px;
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  column-gap: var(--abstand-8);
  min-height: 640px;
  border: var(--strich-rahmen) solid var(--navy);
  border-radius: var(--radius-rahmen);
  background: var(--karton);
  color: var(--navy);
}
@media (min-width: 760px)  { .rahmen { --rahmen-innen: 20px; } }
@media (min-width: 1024px) { .rahmen { --rahmen-innen: 24px; min-height: 720px; } }

.rahmen__kopf {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: var(--rahmen-innen) var(--rahmen-innen) 4px;
}
.rahmen__titel {
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-gross);
  line-height: 1.25;
  text-wrap: balance;
}
.rahmen__meta {
  margin-top: 6px;
  color: var(--grau);
}

/* Steuerzeile */
.zaehler {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  max-width: none;
  margin: 12px 0 12px var(--rahmen-innen);
  line-height: 1.3;
}
.zaehler__kopf {                    /* «2 / 5 · vorher» bricht nie auseinander */
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.zaehler__ziffern {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--ziffern-breite);
  font-weight: var(--ziffern-gewicht);
  font-size: var(--groesse-klein);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--navy);
}
.zaehler__aktuell { color: var(--rot-tief); }
.zaehler__fassung {
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-klein);
  white-space: nowrap;
}
.zaehler__seite {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font-size: var(--groesse-klein);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--grau);
}
/* Seitenbezeichnung steht inline hinter dem Zähler und wird mit … gekürzt
   (7.5). Nur in sehr schmalen Rahmen (Fenster unter ca. 370 px) bekommt sie
   eine eigene Zeile, sonst bliebe von ihr nur «…» übrig. */
@container (max-width: 319.98px) {
  .zaehler__seite { flex-basis: 100%; font-size: .875rem; }
  .zaehler__seite-trenner { display: none; }
}

.rahmen__vollbild {
  --knopf-hoehe: 44px;
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  padding: 0 14px;
  gap: 8px;
  font-size: 1rem;
}
/* schmaler Rahmen (Handy): «Vollbild» nur als Icon (aria-label bleibt),
   damit «2 / 5 · vorher» neben den Knöpfen Platz hat */
@container (max-width: 399.98px) {
  .rahmen__vollbild { width: 44px; padding: 0; }
  .rahmen__vollbild > span { display: none; }
}

.rahmen__pfeil {
  grid-row: 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: var(--strich-knopf) solid var(--navy);
  border-radius: var(--radius-knopf);
  background: transparent;
  color: var(--navy);
  touch-action: manipulation;
  transition: background-color var(--dauer-kurz) var(--kurve-aus);
}
.rahmen__pfeil--zurueck { grid-column: 3; }
.rahmen__pfeil--vor     { grid-column: 4; margin-right: var(--rahmen-innen); }
.rahmen__pfeil:hover:not(:disabled) { background: var(--papier-tief); }
.rahmen__pfeil:active:not(:disabled) { transform: translateY(1px); }
.rahmen__pfeil:disabled { opacity: .35; cursor: default; }

.rahmen__vorschau {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: -4px var(--rahmen-innen) 4px;
}
.rahmen__vorschau:empty { display: none; }

.rahmen__satz {
  grid-column: 1 / -1;
  grid-row: 5;
  margin: 4px var(--rahmen-innen) 0;
  font-size: var(--groesse-klein);
  line-height: 1.5;
  color: var(--grau);
}

.rahmen__download {
  --knopf-hoehe: 52px;
  grid-column: 1 / -1;
  grid-row: 6;
  margin: var(--abstand-16) var(--rahmen-innen) var(--rahmen-innen);
  white-space: normal;
}
.rahmen__download .icon { width: 20px; height: 20px; }

/* Desktop: Pfeile 56 × 56, rund, auf der Rahmenkante, halbe Track-Höhe */
@media (min-width: 1024px) {
  .rahmen { grid-template-columns: minmax(0, 1fr) auto; }
  .rahmen__vollbild { margin-right: var(--rahmen-innen); }
  .rahmen__pfeil {
    grid-row: 2;
    grid-column: 1 / -1;
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--papier);
  }
  .rahmen__pfeil .icon { width: 24px; height: 24px; }
  .rahmen__pfeil--zurueck {
    justify-self: start;
    margin-left: calc(-1 * (var(--strich-rahmen) / 2 + 28px));
  }
  .rahmen__pfeil--vor {
    justify-self: end;
    margin-right: calc(-1 * (var(--strich-rahmen) / 2 + 28px));
  }
  .rahmen__pfeil:hover:not(:disabled) { background: var(--papier-tief); }
  .rahmen__pfeil:disabled { opacity: 1; color: rgb(0 16 33 / .3); border-color: rgb(0 16 33 / .3); }
  .rahmen__download { justify-self: start; }
}


/* =====================================================================
   5. SEITEN-TRACK (7.4)
   Slide-Breiten in cqi (= Prozent der Rahmen-Innenbreite), damit Breite
   und Track-Padding dieselbe Bezugsgrösse haben.
   ===================================================================== */
.seiten {
  --seite-breite: 80cqi;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px 16px;
  padding-inline: calc((100cqi - var(--seite-breite)) / 2);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.seiten::-webkit-scrollbar { display: none; }
.seiten[data-format="16:9"] { --seite-breite: 88cqi; }
.seiten:focus-visible { outline-offset: -4px; }

.seite {
  position: relative;
  flex: 0 0 var(--seite-breite);
  scroll-snap-align: center;
}

@media (min-width: 760px) {
  .seiten {
    --seite-breite: 46cqi;
    gap: 20px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .seiten[data-format="16:9"] { --seite-breite: 88cqi; }
  .seite { scroll-snap-align: start; }
}
/* Desktop: Seitenhöhe an die Fensterhöhe koppeln, damit Kopf, Seiten und
   Steuerzeile bei 1440 × 900 zusammen im Bild sind (A4: Breite = Höhe × 0,706).
   Untergrenze 220 px, damit die Seiten auch in sehr niedrigen Fenstern lesbar bleiben.
   Sind die Seiten dadurch schmaler als 46 %, wird der Track mit ihnen schmaler
   und steht mittig im Rahmen: So sind immer genau zwei Seiten im Bild, keine
   halb sichtbare dritte Seite mit «Lädt …», und die letzte Doppelseite liegt
   genau am Scroll-Ende (Zähler und →-Pfeil stimmen, galerie.js rechnet in Paaren). */
@media (min-width: 1024px) {
  .seiten { --seite-breite: min(46cqi, max(220px, (100svh - 400px) * .7063)); }
  .seiten:not([data-format="16:9"]) {
    justify-self: center;
    width: min(100%, calc(2 * var(--seite-breite) + 20px + 48px));
  }
}

.seite__knopf {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--verhaeltnis, 1200 / 1699);
  margin: 0;
  padding: 0;
  border: 1px solid var(--haarlinie);
  border-radius: 0;
  background: var(--weiss);
  cursor: zoom-in;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.seite__knopf img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: transparent;               /* kein Alt-Text-Flackern beim Laden */
  -webkit-user-drag: none;
  user-select: none;
}
.seite__knopf:focus-visible { outline-offset: -3px; }
/* noch nicht angefordert: kein «kaputtes Bild»-Symbol, nur «Lädt …» */
.seite__knopf img:not([src]),
.vollbild__bild img:not([src]) { visibility: hidden; }

/* Ladezustand: «Lädt …» mittig, Fehler mit Hinweis aufs PDF */
.seite__status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: var(--groesse-klein);
  line-height: 1.4;
  color: var(--grau);
  pointer-events: none;
}
.ist-geladen > .seite__status,
.ist-geladen .seite__status { display: none; }

/* Lektorat: «vorher» / «nachher» als Etikett oben links. Es sitzt über
   der Seitenkante (mehr Track-Padding oben), damit es das farbige
   VORHER/NACHHER-Band der Seite selbst nicht verdeckt. */
.seiten[data-fassungen] { padding-top: 30px; }
.seite__etikett {
  position: absolute;
  top: -25px;
  left: -4px;
  z-index: 2;
  rotate: -3deg;
  pointer-events: none;
}


/* =====================================================================
   6. AKZENT «BLÄTTER MAL DURCH.» UND AUFMERKSAMKEITSSTRICHE
   ===================================================================== */
.galerie__akzent {
  position: absolute;
  right: 34px;
  bottom: calc(100% + 12px);
  z-index: 3;
  margin: 0;
  font-size: 1.5rem;                /* 24 px, Rot erlaubt ab 24 px */
  line-height: 1;
  white-space: nowrap;
  rotate: -3deg;
  transition: opacity var(--dauer-mittel) var(--kurve-aus),
              visibility 0s linear var(--dauer-mittel);
}
.galerie__akzent-pfeil {
  position: absolute;
  left: calc(100% + 2px);
  top: 55%;
  width: 21px;
  height: 28px;
  color: var(--rot);
}
.galerie__akzent.ist-weg {
  opacity: 0;
  visibility: hidden;
}
/* Erst einsetzen, wenn die Galerie in die Nähe kommt (galerie.js): Die
   Handschrift Caveat wird so nicht schon beim ersten Bild geladen */
html.js .galerie__akzent:not(.ist-nah) { display: none; }

.galerie__striche { z-index: 3; }
.galerie__striche--a {
  --striche-drehung: 45deg;          /* links oben, diagonal */
  top: -38px;
  left: 2px;
}
.galerie__striche--b {
  --striche-drehung: 225deg;         /* rechts unten, diagonal */
  bottom: -38px;
  right: 2px;
}
@media (min-width: 1024px) {
  .galerie__akzent { right: 44px; bottom: calc(100% + 14px); }
  .galerie__striche--a { top: -30px; left: -30px; }
  .galerie__striche--b { bottom: -30px; right: -30px; }
}


/* =====================================================================
   7. VOLLBILD (7.7)
   ===================================================================== */
html.ist-vollbild { overflow: hidden; }

.vollbild {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--navy);
  color: var(--papier);
}
.vollbild[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* nie breiter als der Bildschirm */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.vollbild::backdrop { background: var(--navy); }

.vollbild__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-16);
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--rand), env(safe-area-inset-right, 0px)) 0 max(var(--rand), env(safe-area-inset-left, 0px));
}
.vollbild__zaehler {
  flex: none;
  max-width: none;
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--ziffern-breite);
  font-weight: var(--ziffern-gewicht);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--papier);
}
.vollbild__nr { color: var(--rot-hell); }
.vollbild__titel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: 1rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--papier);
}
.vollbild__schliessen {
  flex: none;
  padding: 0 16px 0 12px;
  gap: 8px;
  font-size: 1rem;
}

.vollbild__seiten {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x pinch-zoom;
}
.vollbild__seiten::-webkit-scrollbar { display: none; }
.vollbild__seiten:focus-visible { outline-offset: -6px; }

.vollbild__seite {
  --vb-seitenverhaeltnis: .7063;      /* Breite / Höhe, setzt galerie.js */
  position: relative;
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  container-type: size;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.vollbild__bild {
  position: relative;
  width: min(100cqw - 32px, (100cqh - 24px) * var(--vb-seitenverhaeltnis));
  aspect-ratio: var(--vb-verhaeltnis, 1200 / 1699);
  background: var(--weiss);
}
.vollbild__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: transparent;
  -webkit-user-drag: none;
}
.vollbild__bild .seite__status { color: var(--grau); }

.vollbild__tipp {
  display: none;
  margin: 0 auto;
  padding: 0 var(--rand) 4px;
  font-size: var(--groesse-klein);
  line-height: 1.3;
  color: var(--grau-hell);
  text-align: center;
}
@media (orientation: portrait) and (max-width: 759.98px) {
  .vollbild[data-format="16:9"] .vollbild__tipp { display: block; }
}

.vollbild__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: 0 max(var(--rand), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--rand), env(safe-area-inset-left, 0px));
}
.vollbild__pfeil {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: var(--strich-knopf) solid var(--papier);
  border-radius: var(--radius-knopf);
  background: transparent;
  color: var(--papier);
  touch-action: manipulation;
  transition: background-color var(--dauer-kurz) var(--kurve-aus);
}
.vollbild__pfeil:hover:not(:disabled) { background: var(--navy-hover); }
.vollbild__pfeil:active:not(:disabled) { transform: translateY(1px); }
.vollbild__pfeil:disabled { opacity: .35; cursor: default; }
.vollbild__pdf {
  min-width: 0;
  padding: 0 16px;
  gap: 8px;
  font-size: 1rem;
}
.vollbild__pdf > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vollbild__pdf-kurz { display: none; }
/* Handy: Fusszeile knapper, damit ←, PDF-Knopf und → nebeneinander passen */
@media (max-width: 759.98px) {
  .vollbild__kopf { gap: var(--abstand-12); }
  .vollbild__fuss {
    gap: var(--abstand-8);
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 419.98px) {
  .vollbild__pdf { padding: 0 12px; font-size: .9375rem; }
  .vollbild__pdf .icon { display: none; }
}
/* «PDF (140 KB)» schon unter 380 px (Spezifikation: 360) – sonst reicht
   die Breite bei 375 px (iPhone mini/SE) nicht für beide Pfeile */
@media (max-width: 379.98px) {
  .vollbild__pdf-lang { display: none; }
  .vollbild__pdf-kurz { display: inline; }
}

/* Handy quer: Kopf und Fuss etwas knapper, Tippflächen bleiben ≥ 44 px */
@media (max-height: 480px) {
  .vollbild__kopf { height: calc(52px + env(safe-area-inset-top, 0px)); }
  .vollbild__fuss { height: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .vollbild__schliessen,
  .vollbild__pdf { --knopf-hoehe: 44px; }
  .vollbild__pfeil { width: 44px; height: 44px; }
}


/* =====================================================================
   8. OHNE JAVASCRIPT (7.8)
   ===================================================================== */
.galerie-ohne-js__hinweis { margin-bottom: var(--abstand-24); color: var(--grau); }
.galerie-ohne-js {
  display: grid;
  gap: var(--abstand-48) var(--gap);
}
.galerie-ohne-js > li {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--abstand-8);
}
.galerie-ohne-js__titel {
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-gross);
  line-height: 1.25;
}
.galerie-ohne-js .label { color: var(--grau); }
.galerie-ohne-js img {
  width: 100%;
  max-width: 320px;
  margin-block: var(--abstand-8);
  border: 1px solid var(--haarlinie);
  background: var(--weiss);
}
@media (min-width: 760px) {
  .galerie-ohne-js { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .galerie-ohne-js { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* =====================================================================
   9. FORCED COLORS UND DRUCK
   ===================================================================== */
@media (forced-colors: active) {
  .ruecken { border: 2px solid ButtonText; }
  .ruecken[aria-selected="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
  .ruecken::after { forced-color-adjust: none; }
  .rahmen__pfeil,
  .vollbild__pfeil { border-color: ButtonText; }
  .faecher__seite { border-color: CanvasText; }
}

@media print {
  .galerie__akzent,
  .galerie__striche,
  .galerie__hinweise,
  .rahmen__vollbild,
  .rahmen__pfeil,
  .stapel { display: none !important; }
  .rahmen { min-height: 0; break-inside: avoid; }
  .seiten { overflow: hidden; }
}