/* Kleine Bildschauen auf der Startseite (16.10.2026, Michael: "baue hier auch eine Slideshow ein"): das naechste Bild blendet ueber dem
   aktuellen ein (Deckkraft, 1,6 s), sonst nichts. Gilt fuer jede Figur mit data-schau (bildschau-einbauen.py setzt sie). */
.bs-kasten { position: relative; overflow: hidden; isolation: isolate; z-index: 0; width: 100%; aspect-ratio: var(--bs-ar, 1 / 1); }  /* isolation: die Bild-z-Werte (steigen je Wechsel) duerfen nie ueber die Buchungsleiste (z 30) */
html.js .bs-kasten > img.bs-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--bs-pos, 50% 50%);
  opacity: 0; filter: none !important; transform: none !important; scale: none; translate: none; animation: none !important;
  transition: opacity 1300ms ease-in-out !important;
}
html.js .bs-kasten > img.bs-bild.an { opacity: 1; }
figure[data-schau] figcaption { transition: opacity 500ms ease; }
figure[data-schau] figcaption.bs-weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js .bs-kasten > img.bs-bild { transition: none !important; } }

/* Beschriftung auf Figuren (Schrift wie im Kopf: DM Mono 13 px, 500, gesperrt .32 em, Versalien) */
/* 11.11.2026, Michael: "Die Schrift ist im Bild. Kontrolliere das bei jedem Breakpoint". Die Zeile hing absolut in einem 52-px-Streifen;
   zweizeilig wuchs sie nach oben ins Bild, und das Bild (scale 1.07 beim Scrollen) ragt bis 14 px unter seine Kante. Jetzt steht die Zeile
   im Fluss UNTER dem Bild und deckt den Ueberstand mit dem Seitengrund ab. Zurueck: bildschau.css.vor-fluss-11112026 */
figure[data-satz] { position: relative; }
/* Bildunterschrift wie im Heft (Cereal, 29.10.2026, Michael: "A in schoen und elegant"): die Zeile steht UNTER dem Bild, links auf der
   Bildkante, Serife kursiv, davor ein feiner Pfeil nach oben, der auf das Bild zeigt. Das Bild bleibt frei. */
body { counter-reset: bsn; }
.bs-satz {
  position: relative; display: block; z-index: 20; margin: 0; padding-top: 14px; background: #F3EEE7; transform: none;
  width: auto; max-width: none; text-align: left; line-height: 1.3;
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz', Georgia, serif; font-size: 21px; font-style: normal; font-weight: 500; letter-spacing: .01em; text-transform: none;
  color: #3D3733 !important; pointer-events: none;
}
.bs-satz::before {
  counter-increment: bsn; content: counter(bsn, decimal-leading-zero); display: inline-block; margin-right: 14px; transform: translateY(-2px);
  font-family: 'DM Mono', ui-monospace, monospace; font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: .14em; color: #8B847C; /* 29.10.2026 Michael: Heftnummer statt Pfeil (Variante D), zaehlt je Seite 01, 02 ... in allen Sprachen. Zurueck: .vor-heftnummer-29102026 */
}
.bs-satz .wt { display: inline-block; white-space: nowrap; }
.bs-satz .bst { display: inline-block; opacity: 0; transform: translate3d(0, .8em, 0); transition: opacity 400ms ease, transform 400ms ease; }
.bs-satz.sichtbar .bst { opacity: 1; transform: none; transition: opacity 800ms ease, transform 1000ms cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i) * 40ms); }
/* Wechsel: beim Abgang steigen die Buchstaben leise nach oben weg (schneller Versatz), beim Aufbau von unten wie am Anfang */
.bs-satz.geht .bst { opacity: 0; transform: translate3d(0, -.8em, 0); transition: opacity 500ms ease, transform 700ms cubic-bezier(.4, 0, 1, 1); transition-delay: calc(var(--i) * 18ms); }
@media (prefers-reduced-motion: reduce) { .bs-satz .bst { opacity: 1; transform: none; transition: none; } }

/* Kinderkarte: 1,35fach und an das SCROLLEN gebunden (Michael 16.10.2026: "kein Bildeffekt, ein Scroll-Effekt, in der Geschwindigkeit, in der ich
   scrolle"). Die Karte wandert von links nach rechts, waehrend die Figur durch das Fenster laeuft: Fahrt +13 % bis -13 % (bei Faktor 1,35
   stehen je 17,5 % ueber, der Rand bleibt gedeckt). Zeitachse am RAHMEN (view-timeline), nicht am Bild: der Rahmen schneidet mit overflow:hidden
   (Vorbild leben.css). Wo es das nicht gibt, uebernimmt bildschau.js. */
.pan-kasten { position: relative; overflow: hidden; isolation: isolate; z-index: 0; width: 100%; aspect-ratio: var(--bs-ar, 1 / 1); }
html.js .pan-kasten > img.pan-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 1 !important; filter: none !important; scale: none; translate: none; transition: none !important;
  transform: translate3d(0, 0, 0) scale(1.35); will-change: transform;
}
@supports (animation-timeline: view()) {
  html.js .pan-kasten { view-timeline: --pan block; }
  html.js .pan-kasten > img.pan-bild { animation: pan-fahrt linear both; animation-timeline: --pan; animation-range: cover 0% cover 100%; }
}
@keyframes pan-fahrt { from { transform: translate3d(13%, 0, 0) scale(1.35); } to { transform: translate3d(-13%, 0, 0) scale(1.35); } }
@media (prefers-reduced-motion: reduce) { html.js .pan-kasten > img.pan-bild { animation: none !important; transform: scale(1.35); } }