/* Jede Sprechfolie ist eine einzige Szene. Weitere Bilder liegen deckungsgleich darüber. */
.buehne > .seg:has(.bildfolie) {
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
  background: #101d25;
}

.bildfolie {
  position: relative;
  isolation: isolate;
  display: block;
  flex: 1 1 auto;
  inline-size: 100%;
  min-block-size: 100%;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #101d25;
}

.bildfolie__buehne,
.bildfolie__bild,
.bildfolie__schatten { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.bildfolie__buehne { z-index: 0; overflow: hidden; }
.bildfolie__bild {
  display: block;
  object-fit: cover;
  object-position: 68% center;
  pointer-events: none;
}
.bildfolie__bild[hidden] { display: none; }
.bildfolie__bild--basis { z-index: 0; }
.bildfolie__bild--lage { opacity: 0; transition: opacity 800ms ease-out; }
.bildfolie__bild--lage[data-sichtbar="ja"] { opacity: 1; }
.bildfolie__bild--lage:nth-child(2) { z-index: 1; }
.bildfolie__bild--lage:nth-child(3) { z-index: 2; }
.bildfolie__bild--lage:nth-child(4) { z-index: 3; }
.bildfolie__schatten {
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(4 12 17 / 48%), transparent 62%),
              linear-gradient(0deg, rgb(4 12 17 / 84%), transparent 43%);
}

.bildfolie__kopf,
.bildfolie__beschriftung {
  position: absolute;
  z-index: 5;
  inset-inline-start: clamp(1.4rem, 4.4vw, 4.2rem);
  inset-inline-end: clamp(1.4rem, 4.4vw, 4.2rem);
  text-shadow: 0 2px 14px rgb(0 0 0 / 72%);
}
.bildfolie {
  --rand-oben: clamp(1.5rem, 4vw, 3.5rem);
  --rand-unten: clamp(1.5rem, 5vw, 4rem);
}
/* Harte Grenze: Der Kopf endet immer über der Karte. Was nicht passt, wird vorher
   in sprechfolie.js (passeAn) weggelassen, notfalls hier abgeschnitten — nie überlagert. */
.bildfolie__kopf {
  inset-block-start: var(--rand-oben);
  max-block-size: calc(100% - var(--rand-oben) - var(--rand-unten) - var(--karte-h, 0px) - var(--chipszeile, 0px) - 1rem);
  overflow: hidden;
  padding-block-end: .3rem;
}
.bildfolie__kicker {
  display: block;
  color: #ffaea6;
  font: 700 clamp(.68rem, .55rem + .3vw, .85rem)/1.35 var(--font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bildfolie__titel {
  max-inline-size: 16ch;
  margin: .45rem 0 0;
  color: #fff;
  font: 700 clamp(1.8rem, 1rem + 2.6vw, 3.2rem)/1.08 var(--font-display);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.bildfolie[data-phase="intro"] .bildfolie__titel { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.5rem); }
.bildfolie__beschriftung { inset-block-end: var(--rand-unten); max-inline-size: min(66ch, 70%); }
.bildfolie .folie__tor { z-index: 7; }
.bildfolie .folie__ersatz { z-index: 7; }

@media (max-width: 900px) {
  .bildfolie__bild { object-position: var(--bildfokus, 72%) center; transition: object-position 1100ms ease; }
  .bildfolie__bild--lage { transition: opacity 800ms ease-out, object-position 1100ms ease; }
  .bildfolie__schatten {
    background: linear-gradient(180deg, rgb(3 10 15 / 55%), transparent 37%),
                linear-gradient(0deg, rgb(3 10 15 / 94%), transparent 57%);
  }
  .bildfolie__titel { max-inline-size: 18ch; font-size: clamp(1.7rem, 5vw, 2.5rem); }
  .bildfolie[data-phase="intro"] .bildfolie__titel { font-size: clamp(2rem, 6vw, 3rem); }
  .bildfolie__beschriftung { max-inline-size: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bildfolie__bild { transition: none; }
}

/* ---------------------------------------------------------------------------
   Lebendige Sprechfolie. Alles bleibt im linken Drittel und im
   unteren Band; die rechte Bildhälfte gehört den Bildebenen. Nur Weiß und
   HRI-Rot, keine Kästen. Um jeden Bildwechsel ruht der Text (sprechfolie.js).
   ------------------------------------------------------------------------ */
.bildfolie .bildfolie__schatten {
  background: linear-gradient(90deg, rgb(4 12 17 / 62%), rgb(4 12 17 / 22%) 40%, transparent 62%),
              linear-gradient(0deg, rgb(4 12 17 / 86%), transparent 45%);
}
.bildfolie .bildfolie__titel,
.bildfolie[data-phase="intro"] .bildfolie__titel { font-size: clamp(1.6rem, .8rem + 1.8vw, 2.5rem); }

/* 3: Kapitelspur */
.lspur {
  display: grid;
  gap: .15rem;
  max-inline-size: min(24rem, 38%);
  margin: clamp(1rem, 2.4vw, 1.8rem) 0 0;
  padding: 0;
  list-style: none;
}
.lspur__punkt {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  column-gap: .7rem;
  padding-block: .32rem;
  color: rgb(255 255 255 / 42%);
  transition: color 320ms ease-out 350ms;
}
.lspur__punkt:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 1.75rem -.25rem;
  inset-inline-start: calc(.75rem - 1px);
  inline-size: 2px;
  background: rgb(255 255 255 / 22%);
}
/* Ikone statt Punkt: kommend blass, aktuell rot und etwas größer, vergangen weiß. */
.lspur__marke {
  grid-row: 1 / span 2;
  place-self: start center;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  transition: color 320ms ease-out 350ms, transform 320ms ease-out 350ms;
}
.lspur__marke svg { inline-size: 1.3rem; block-size: 1.3rem; }
.lspur__wort {
  font: 700 clamp(.72rem, .6rem + .3vw, .88rem)/1.35 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lspur__unter {
  grid-column: 2;
  max-block-size: 0;
  overflow: hidden;
  font: 500 clamp(.8rem, .7rem + .3vw, .95rem)/1.35 var(--font-ui);
  opacity: 0;
  transition: max-block-size 380ms ease-out 350ms, opacity 380ms ease-out 350ms;
}
.lspur__punkt[data-stand="vorbei"] { color: rgb(255 255 255 / 70%); }
.lspur__punkt[data-stand="jetzt"] { color: #fff; }
.lspur__punkt[data-stand="jetzt"] .lspur__marke { color: #ff5b4d; transform: scale(1.18); }
.lspur__punkt[data-stand="jetzt"] .lspur__unter,
.lspur__punkt[data-stand="vorbei"] .lspur__unter { max-block-size: 3em; opacity: .82; }
/* Spur mit Wortzeiten (F08): Aufleuchten ohne Verzögerung, genau zur gesprochenen Silbe. */
.bildfolie--spurgenau .lspur__punkt { transition: color 180ms ease-out; }
.bildfolie--spurgenau .lspur__marke { transition: color 180ms ease-out, transform 260ms cubic-bezier(.22, .9, .24, 1); }
.bildfolie--spurgenau .lspur__unter { transition: max-block-size 420ms cubic-bezier(.22, .9, .24, 1), opacity 300ms ease-out 80ms; }
/* Ausblendende Kopie eines Spurworts beim Wechsel Liste ↔ Ikonenzeile (sprechfolie.js, geist). */
.bildfolie__kopf.bildfolie__kopf--flip { overflow: visible; }
.lspur__geist { position: absolute; z-index: 6; margin: 0; pointer-events: none; text-shadow: 0 2px 14px rgb(0 0 0 / 72%); }

/* 4: Begriffsleiste */
.lbegriffe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .4rem;
  max-inline-size: min(30rem, 42%);
  margin: clamp(.9rem, 2vw, 1.4rem) 0 0;
  padding: 0;
  list-style: none;
}
.lbegriffe__chip {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  gap: .4rem;
  padding: .3rem .65rem .3rem .5rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 999px;
  color: #fff;
  background: rgb(4 12 17 / 38%);
  font: 600 clamp(.72rem, .64rem + .25vw, .86rem)/1.2 var(--font-ui);
  text-shadow: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease-out 450ms, transform 300ms ease-out 450ms;
}
.lbegriffe__chip span { min-inline-size: 0; }
.lbegriffe__chip svg { inline-size: 1rem; block-size: 1rem; flex: none; color: #ffaea6; }
.lbegriffe__chip[data-sichtbar="nein"],
.lbegriffe__chip[data-platz="nein"] { display: none; }
/* Enge Bühne (sprechfolie.js passeAn): Stufe 1 ohne Unterzeilen, ab Stufe 2 Spur als Ikonenzeile,
   ab Stufe 3 rückt die Spur an die Stelle der Kickerzeile (die steht ohnehin in der Kopfleiste) und die Karte
   wird breiter. Erst Notstufe 4 blendet die Spur aus. Titel und Kartenschrift ändern sich auf keiner Stufe
   (Kundenfeedback 09.10.2026: Titel sprang bei 0:03 kleiner, Spur verschwand nach wenigen Sekunden). */
.bildfolie:not([data-enge="0"]) .lspur__unter { display: none; }
.bildfolie:is([data-enge="3"], [data-enge="4"]) .bildfolie__beschriftung { max-inline-size: min(40rem, 62%); }
.bildfolie:is([data-enge="3"], [data-enge="4"]) .bildfolie__kicker { display: none; }
.bildfolie:is([data-enge="2"], [data-enge="3"]) .lspur { inline-size: fit-content; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; max-inline-size: none; margin-block-start: .7rem; }
.bildfolie[data-enge="3"] .bildfolie__kopf { display: flex; flex-direction: column; align-items: flex-start; }
.bildfolie[data-enge="3"] .lspur { order: -1; margin-block: 0 .35rem; }
.bildfolie[data-enge="4"] .lspur { display: none; }
/* Handy quer (Bühne unter 500 px hoch): dort reicht der Platz nicht einmal ohne Spur. Nur hier darf
   Notstufe 4 Titel und Kartenschrift wie früher verkleinern, sonst würde der Titel abgeschnitten. */
@media (max-height: 500px) {
  .bildfolie[data-enge="4"] .bildfolie__titel { font-size: clamp(1.1rem, .8rem + 1vw, 1.5rem); }
  .bildfolie[data-enge="4"] :is(.lk__text, .lk__zitat, .lk__merk) { font-size: clamp(.85rem, .75rem + .4vw, 1.05rem); }
}
/* Notstufe 4: untere Chips kleiner, damit Titel und Karte Platz behalten. */
.bildfolie.bildfolie[data-enge="4"] .lbegriffe.lbegriffe--unten[data-anzahl] .lbegriffe__chip { font-size: 13px; }
/* Nur lange Karten (über 65 Zeichen, sprechfolie.js data-lang) setzen ab Stufe 3 kleiner; kurze Zitate bleiben groß. */
.bildfolie:is([data-enge="3"], [data-enge="4"]) .lk[data-lang="ja"] :is(.lk__text, .lk__zitat, .lk__merk) { font-size: clamp(.95rem, .8rem + .45vw, 1.15rem); }
.bildfolie:is([data-enge="2"], [data-enge="3"]) .lspur__punkt { display: flex; align-items: center; gap: .45rem; padding: 0; }
.bildfolie:is([data-enge="2"], [data-enge="3"]) .lspur__punkt::after { display: none; }
.bildfolie:is([data-enge="2"], [data-enge="3"]) .lspur__punkt:not([data-stand="jetzt"]) .lspur__wort { display: none; }
/* F01: Die drei Stichworte bleiben die ganze Folie über lesbar, auch wenn die Zitatkarte die Spur zur Zeile verdichtet. */
.bildfolie--f01:is([data-enge="2"], [data-enge="3"]) .lspur__punkt:not([data-stand="jetzt"]) .lspur__wort { display: inline; }
.lbegriffe__chip[data-sichtbar="ja"] { animation: lchip-ein 300ms ease-out 450ms both; }
@keyframes lchip-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lbegriffe--kette .lbegriffe__chip:not(:first-child)::before {
  content: "→";
  margin-inline-end: .2rem;
  color: #ff8a80;
}

/* Untere Begriffsleisten behalten reservierte Chip-Plätze, damit Einblendungen nichts verschieben. */
.bildfolie--chipsunten { --chipszeile: 3.1rem; }
.bildfolie--chipsunten .bildfolie__beschriftung { inset-block-end: calc(var(--rand-unten) + var(--chipszeile)); }
.lbegriffe--unten {
  position: absolute; z-index: 5;
  inset-inline: clamp(1.4rem, 4.4vw, 4.2rem);
  inset-block-end: var(--rand-unten);
  display: flex; flex-wrap: nowrap; gap: .4rem; margin: 0; max-inline-size: none;
}
.lbegriffe--unten .lbegriffe__chip { flex: 0 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbegriffe--unten .lbegriffe__chip[data-sichtbar="nein"] { display: inline-flex; visibility: hidden; }

/* Untere Reihe mit Umbruch: bricht auf jeder Breite um, kein Chip wird gekürzt. Die Höhe der Reihe
   misst sprechfolie.js und reserviert sie als --chipszeile. Auf Collage-Folien bleibt die Reihe in der
   Textspalte, damit kein Chip ins Motiv oder an den Bildriss ragt. */
.lbegriffe--umbruch { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .5rem; }
.lbegriffe--umbruch .lbegriffe__chip { flex: 0 0 calc(50% - .25rem); min-inline-size: 0; justify-content: flex-start; overflow: visible; text-overflow: clip; white-space: normal; }
.lbegriffe--umbruch .lbegriffe__chip { padding-block: .08rem; }
.lbegriffe--umbruch[data-anzahl="5"],
.lbegriffe--umbruch[data-anzahl="6"],
.lbegriffe--umbruch[data-anzahl="9"] { justify-content: center; }
.lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip,
.lbegriffe--umbruch[data-anzahl="6"] .lbegriffe__chip,
.lbegriffe--umbruch[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(33.333% - .34rem); }
.lbegriffe--umbruch .lbegriffe__chip span { min-inline-size: 0; overflow: visible; overflow-wrap: normal; word-break: normal; text-overflow: clip; white-space: normal; }
@media (min-width: 901px) {
  .bildfolie--collage .lbegriffe--umbruch { inset-inline-end: auto; inline-size: min(25rem, 40%); max-inline-size: min(25rem, 40%); }
  .bildfolie--f04 .lbegriffe--umbruch { flex-wrap: nowrap; inline-size: min(30rem, 40%); max-inline-size: none; }
  .bildfolie--f04 .lbegriffe--umbruch .lbegriffe__chip { flex: 0 1 calc(25% - .3rem); gap: .2rem; padding: 0 .3rem; font-size: .72rem; white-space: normal; }
  .bildfolie--f04 .lbegriffe--umbruch .lbegriffe__chip svg { display: none; }
  .bildfolie--f04 .lbegriffe--umbruch .lbegriffe__chip span { white-space: normal; hyphens: auto; overflow-wrap: normal; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip,
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="6"] .lbegriffe__chip,
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(50% - .25rem); }
}
@media (min-width: 1501px) {
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip,
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="6"] .lbegriffe__chip,
  .bildfolie--collage .lbegriffe--umbruch[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(50% - .25rem); }
}
@media (min-width: 901px) {
  .bildfolie--f06 .lbegriffe--umbruch {
    inline-size: min(30rem, 34.5%); max-inline-size: min(30rem, 34.5%); gap: .2rem .25rem;
  }
  .bildfolie--f06 .lbegriffe--umbruch .lbegriffe__chip {
    flex: 0 0 calc(33.333% - .17rem); padding: .12rem .05rem; font-size: 11px; line-height: 1.05;
  }
  .bildfolie--f06 .lbegriffe--umbruch .lbegriffe__chip { padding-inline: 0; }
  .bildfolie--f06 .lbegriffe--umbruch .lbegriffe__chip svg,
  .bildfolie--f08 .lbegriffe--umbruch .lbegriffe__chip svg { display: none; }
}
@media (min-width: 1351px) and (max-width: 1700px) {
  .bildfolie--f06 .lbegriffe--umbruch { inline-size: min(30rem, 30%); max-inline-size: min(30rem, 30%); }
}
@media (min-width: 1701px) {
  .bildfolie--f06 .lbegriffe--umbruch { inline-size: min(30rem, 29.4%); max-inline-size: min(30rem, 29.4%); }
}
@media (min-width: 901px) and (max-width: 1350px) {
  .bildfolie--f03 .lbegriffe--umbruch { inline-size: min(22.75rem, 38%); max-inline-size: min(22.75rem, 38%); }
  .bildfolie--f07 .lbegriffe--umbruch { inline-size: min(23rem, 38%); max-inline-size: min(23rem, 38%); }
  .bildfolie--f08 .lbegriffe--umbruch { inline-size: min(21rem, 34.3%); max-inline-size: min(21rem, 34.3%); }
}
@media (min-width: 1351px) and (max-width: 1700px) {
  .bildfolie--f03 .lbegriffe--umbruch { inline-size: min(23rem, 33%); max-inline-size: min(23rem, 33%); }
  .bildfolie--f07 .lbegriffe--umbruch { inline-size: min(25rem, 35.5%); max-inline-size: min(25rem, 35.5%); }
  .bildfolie--f08 .lbegriffe--umbruch { inline-size: min(27rem, 38.6%); max-inline-size: min(27rem, 38.6%); }
}
@media (min-width: 1701px) {
  .bildfolie--f03 .lbegriffe--umbruch { inline-size: min(30rem, 30%); max-inline-size: min(30rem, 30%); }
  .bildfolie--f03 .lbegriffe--umbruch[data-anzahl="5"] { transform: translateY(1.5rem); }
  .bildfolie--f07 .lbegriffe--umbruch { inline-size: min(28rem, 28%); max-inline-size: min(28rem, 28%); }
  .bildfolie--f08 .lbegriffe--umbruch { inline-size: min(27rem, 27%); max-inline-size: min(27rem, 27%); }
}
@media (min-width: 901px) {
  .bildfolie--f03 .lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip { flex-basis: calc(33.333% - .55rem); }
  .bildfolie--f03 .lbegriffe--umbruch .lbegriffe__chip { padding-block: 0; }
  .bildfolie--f03 .lbegriffe--umbruch .lbegriffe__chip { padding-inline: 0; }
  .bildfolie--f03 .lbegriffe--umbruch .lbegriffe__chip { font-size: 12px; }
  .bildfolie--f03 .lbegriffe--umbruch .lbegriffe__chip svg { display: none; }
  .bildfolie--f06 .lbegriffe--umbruch .lbegriffe__chip { flex-basis: calc(33.333% - .17rem); } /* cyber9a: F06 hat 7 statt 9 Chips */
}
@media (min-width: 1701px) {
  .bildfolie--f03 .lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip { flex-basis: calc(50% - .25rem); }
}

/* Große Begriffsblöcke (F04): drei Kästen untereinander, linksbündig — großes Bild links, Stichwort und
   Kurzdefinition rechts daneben. Nur solange über einen Begriff gesprochen wird, leuchtet sein Kasten. */
.lbg { list-style: none; margin: clamp(.6rem, 1.6vh, 1.2rem) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.4rem, 1.2vh, .8rem); max-inline-size: min(36rem, 100%); }
.lbg__block {
  display: flex; flex-direction: row; align-items: center; text-align: start; gap: clamp(.7rem, 1.4vw, 1.2rem);
  padding: clamp(.3rem, .9vh, .55rem); padding-inline-end: clamp(.6rem, 1.2vw, 1rem); border-radius: 1rem; min-inline-size: 0;
  border: 1px solid rgb(255 255 255 / 22%); background: rgb(4 12 17 / 84%);
  opacity: .62; transition: opacity 260ms ease, border-color 260ms ease, background-color 260ms ease;
}
.lbg__block[data-aktiv="ja"] { opacity: 1; border-color: #ff5b4d; background: rgb(120 10 20 / 62%); }
.lbg__bild { display: grid; place-items: center; flex: none; block-size: clamp(3rem, 33vh - 10.75rem, 9.5rem); aspect-ratio: 3 / 2; border-radius: .7rem; background: rgb(255 255 255 / 12%); color: #ffaea6; }
.lbg__block[data-aktiv="ja"] .lbg__bild { background: #e6261f; color: #fff; }
.lbg__bild svg { inline-size: 55%; block-size: 55%; }
.lbg__bild--motiv { position: relative; overflow: hidden; background: rgb(255 255 255 / 10%); }
.lbg__block[data-aktiv="ja"] .lbg__bild--motiv { background: rgb(255 255 255 / 14%); }
.lbg__motiv { position: absolute; max-inline-size: none; block-size: auto; object-fit: fill; opacity: .8; transition: opacity 260ms ease; }
.lbg__motiv--voll { inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lbg__block[data-aktiv="ja"] .lbg__motiv { opacity: 1; }
.lbg__text { display: grid; gap: .2rem; min-inline-size: 0; }
.lbg__wort { font: 700 clamp(.95rem, .55rem + .75vw, 1.6rem)/1.15 var(--font-display); color: #fff; letter-spacing: -.02em; overflow-wrap: normal; }
.lbg__kurz { font: 500 clamp(.8rem, .68rem + .34vw, 1.1rem)/1.3 var(--font-ui); color: rgb(255 255 255 / 88%); }
/* Schmale Desktopbreiten: der Titel bricht zweizeilig um, die Bilder geben die Zeile wieder ab. */
@media (min-width: 901px) and (max-width: 1150px) { .lbg__bild { block-size: clamp(3rem, 33vh - 12.5rem, 9.5rem); } }
/* Niedrige Bühnen (Laptop mit Browserleiste): Kästen enger, damit der Kopf in Stufe 0 bleibt. */
@media (min-width: 901px) and (max-height: 700px) {
  .lbg { gap: .3rem; margin-block-start: .5rem; }
  .lbg__block { padding: .2rem; padding-inline-end: .7rem; }
  .lbg__bild { block-size: max(2.6rem, 33vh - 10rem); }
  .lbg__text { gap: 0; }
  .lbg__wort { font-size: clamp(.9rem, .5rem + .55vw, 1.15rem); }
  .lbg__kurz { font-size: clamp(.75rem, .6rem + .25vw, .9rem); }
}
@media (min-width: 901px) and (max-width: 1150px) and (max-height: 700px) { .lbg__bild { block-size: max(2.6rem, 33vh - 12.5rem); } }
/* Mobil: Chips bleiben lesbar und bilden dasselbe geordnete Raster. */
@media (max-width: 900px) {
  .lbegriffe.lbegriffe--unten { display: flex; flex-wrap: wrap; justify-content: center; gap: .22rem .3rem; }
  .lbegriffe--unten .lbegriffe__chip { flex: 0 0 calc(50% - .15rem); justify-content: flex-start; padding: .08rem .18rem; font-size: .7rem; line-height: 1.05; white-space: normal; }
  .lbegriffe--unten.lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip,
  .lbegriffe--unten.lbegriffe--umbruch[data-anzahl="6"] .lbegriffe__chip,
  .lbegriffe--unten.lbegriffe--umbruch[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(33.333% - .2rem); }
  .lbegriffe--unten .lbegriffe__chip span { min-inline-size: 0; overflow: visible; text-overflow: clip; white-space: normal; }
  .lbegriffe--unten .lbegriffe__chip svg { display: none; }
  .bildfolie--chipsunten:not(.bildfolie--chipsumbruch) .lbegriffe--unten { flex-wrap: wrap; gap: .12rem .2rem; }
  .bildfolie--chipsunten:not(.bildfolie--chipsumbruch) .lbegriffe--unten .lbegriffe__chip { flex: 0 1 auto; justify-content: flex-start; padding: .06rem .12rem; font-size: .7rem; line-height: 1.05; white-space: nowrap; }
  .bildfolie--chipsunten:not(.bildfolie--chipsumbruch) .lbegriffe--unten .lbegriffe__chip span { overflow: visible; text-overflow: clip; white-space: nowrap; }
  .bildfolie--chipsunten { --chipszeile: 2.4rem; }
  .bildfolie--f01 .lbegriffe--unten { transform: translateY(12px); }
  /* F04: Begriffe mobil vollständig lesbar – Reihe darf umbrechen, nichts wird gekürzt. */
  .lbegriffe--umbruch .lbegriffe__chip { padding: .25rem .5rem; }
  .lbegriffe--umbruch[data-anzahl="5"] .lbegriffe__chip,
  .lbegriffe--umbruch[data-anzahl="6"] .lbegriffe__chip,
  .lbegriffe--umbruch[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(50% - .25rem); }
  .lbegriffe--umbruch .lbegriffe__chip span { overflow: visible; overflow-wrap: normal; word-break: normal; hyphens: none; text-overflow: clip; white-space: normal; }
  .bildfolie--chipsumbruch { --chipszeile: 4.4rem; }
  .bildfolie--chipsumbruch .lbegriffe--unten[data-anzahl="5"] .lbegriffe__chip,
  .bildfolie--chipsumbruch .lbegriffe--unten[data-anzahl="6"] .lbegriffe__chip,
  .bildfolie--chipsumbruch .lbegriffe--unten[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(33.333% - .2rem); padding: .06rem .1rem; font-size: .7rem; line-height: 1.05; }
  .bildfolie--f03 .lbegriffe--unten { max-inline-size: 18.25rem; }
  /* cyber9a: F03 hat fünf andere, unterschiedlich lange Begriffe; ein festes Raster setzte „Scanner“ an den rechten Rand. */
  .bildfolie--f03 .lbegriffe--unten[data-anzahl="5"] { display: flex; flex-wrap: wrap; justify-content: center; gap: .22rem .3rem; }
  .bildfolie--f03 .lbegriffe--unten[data-anzahl="5"] .lbegriffe__chip { flex: none; inline-size: max-content; white-space: nowrap; }
  .bildfolie--f03 .lbegriffe--unten[data-anzahl="5"]:has(> .lbegriffe__chip:nth-child(5)[data-sichtbar="nein"]) { grid-template-columns: repeat(2, max-content); }
  .bildfolie--f03 .lbegriffe--unten[data-anzahl="5"] > .lbegriffe__chip:nth-child(5)[data-sichtbar="nein"] { display: none; }
  .bildfolie--f04 .lbegriffe--unten { max-inline-size: 18.4375rem; }
  .bildfolie--f06 .lbegriffe--unten { max-inline-size: min(19.4rem, 100%); }
  .bildfolie--f07 .lbegriffe--unten { max-inline-size: min(calc(110vw - 8rem), 100%); }
  .bildfolie--f08 .lbegriffe--unten { max-inline-size: 17.06rem; }
  .bildfolie--f06 .lbegriffe--unten[data-anzahl="9"] .lbegriffe__chip { flex-basis: calc(50% - .15rem); }
  .bildfolie--f07 .lbegriffe--unten[data-anzahl="6"] .lbegriffe__chip { flex-basis: calc(50% - .15rem); }
}
@media (max-width: 375px) {
  .bildfolie--chipsunten:not(.bildfolie--chipsumbruch) .lbegriffe--unten .lbegriffe__chip { padding-inline: .12rem; }
  .bildfolie--f06 .lbegriffe--unten { max-inline-size: 13.5rem; }
  .bildfolie--f03 .lbegriffe--unten .lbegriffe__chip { padding-inline: 0; }
  .bildfolie--f06 .lbegriffe--unten[data-anzahl="9"] .lbegriffe__chip { font-size: 11px; }
}
@media (max-width: 900px) {
  .lbg { gap: .4rem; max-inline-size: none; }
  .lbg__block { gap: .6rem; padding: .3rem .6rem .3rem .3rem; }
  .lbg__bild { block-size: 4.4rem; }
  .lbg__text { gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .lbg__block { transition: none; } }

/* 1: Kartenformen je Elementart */
.bildfolie .bildfolie__beschriftung { max-inline-size: min(40rem, 50%); }
.lk { position: relative; animation: lk-ein 380ms cubic-bezier(.2, .7, .2, 1) 80ms both; }
.lk--weg { position: absolute; inset-inline: 0; inset-block-end: 0; animation: lk-aus 180ms ease-in both; }
@keyframes lk-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lk-aus { to { opacity: 0; transform: translateY(-6px); } }
.lk__kopf {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #ffaea6;
  font: 700 clamp(.68rem, .55rem + .3vw, .85rem)/1.35 var(--font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lk__kopf svg { inline-size: 1.15em; block-size: 1.15em; }
.lk__text,
.lk__zitat,
.lk__merk {
  margin: .45rem 0 0;
  color: #fff;
  font: 600 clamp(1.05rem, .74rem + 1.15vw, 1.55rem)/1.3 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* Definition: Lexikoneintrag */
.lk__begriff {
  display: block;
  margin-block-start: .3rem;
  color: #fff;
  font: 700 clamp(1.6rem, 1rem + 1.9vw, 2.5rem)/1.05 var(--font-display);
  letter-spacing: -.035em;
}
.lk--definition .lk__text {
  color: rgb(255 255 255 / 86%);
  font-weight: 500;
  font-size: clamp(.98rem, .78rem + .7vw, 1.25rem);
  animation: lk-ein 380ms cubic-bezier(.2, .7, .2, 1) 260ms both;
}
/* Beispiel: dünne Linie links */
.lk--beispiel { padding-inline-start: 1rem; border-inline-start: 2px solid rgb(255 255 255 / 45%); }
/* Warnung: roter Balken, Ikone zuckt einmal */
.lk--warnung { padding-inline-start: 1rem; border-inline-start: 4px solid #ff4a3d; }
.lk--warnung .lk__kopf svg { animation: lk-zucken 520ms ease-in-out 420ms both; }
@keyframes lk-zucken { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
/* Merke: Unterstrich zeichnet sich */
.lk--merke .lk__text span {
  padding-block-end: .12em;
  background: linear-gradient(#ff4a3d, #ff4a3d) 0 100% / 0 3px no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: lk-strich 600ms ease-out 450ms forwards;
}
@keyframes lk-strich { to { background-size: 100% 3px; } }
/* Eselsbrücke: Textmarker fährt über den Satz */
.lk__merk mark {
  padding: .05em .25em;
  color: #fff;
  background: linear-gradient(rgb(200 0 0 / 78%), rgb(200 0 0 / 78%)) 0 0 / 0 100% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: lk-marker 700ms ease-out 350ms forwards;
}
@keyframes lk-marker { to { background-size: 100% 100%; } }
.lk__unter { margin: .5rem 0 0; color: rgb(255 255 255 / 80%); font: 500 clamp(.88rem, .74rem + .45vw, 1.08rem)/1.4 var(--font-ui); }
/* Frage: großes Fragezeichen */
.lk--frage { padding-inline-start: 2.4rem; }
.lk--frage::before {
  content: "?";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -.2rem;
  color: #ff5b4d;
  font: 800 2.6rem/1 var(--font-display);
}
/* 2: Wörtlicher Sprechtext ohne dekorative Anführungszeichen. */
.lk__zitat { font-style: italic; }
.lk__wort { color: rgb(255 255 255 / 36%); transition: color 160ms linear; }
.lk__wort[data-an="ja"] { color: #fff; }

@media (max-width: 900px) {
  /* Handy: nur Punkte, ausgeschrieben ist allein das aktuelle Stichwort. */
  .lspur { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; max-inline-size: none; margin-block-start: .8rem; }
  .lspur__punkt { display: flex; align-items: center; gap: .45rem; padding: 0; }
  .lspur__punkt:not(:last-child)::after { display: none; }
  .lspur__marke { inline-size: 1.25rem; block-size: 1.25rem; }
  .lspur__marke svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .lspur__punkt:not([data-stand="jetzt"]) .lspur__wort { display: none; }
  .lspur__wort { font-size: .7rem; white-space: nowrap; }
  .lspur__unter { display: none; }
  .lbegriffe { display: none; }
  .bildfolie .bildfolie__beschriftung { max-inline-size: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lk, .lk--definition .lk__text, .lk--warnung .lk__kopf svg, .lbegriffe__chip[data-sichtbar="ja"] { animation: none; opacity: 1; transform: none; }
  .lk--merke .lk__text span { animation: none; background-size: 100% 3px; }
  .lk--weg { display: none; }
  .lk__merk mark { animation: none; background-size: 100% 100%; }
  .lspur__punkt, .lspur__marke, .lspur__unter, .lk__wort { transition: none; }
}

/* F01: Bildteile der ImageGen-Collage fliegen passend zum Text ein und rasten ein. */
.collage { position: absolute; inset: 0; transition: scale 220ms cubic-bezier(.2,.8,.3,1.2); animation: collage-drift 22s ease-in-out infinite alternate; }
@keyframes collage-drift { from { translate: 0 0; } to { translate: -.8% -.5%; } }
.bildfolie[data-stoss="1"] .collage { scale: 1.012; }
.bildfolie[data-stoss="2"] .collage { scale: 1.024; }
.bildfolie[data-stoss="3"] .collage { scale: 1.036; }
.collage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #101d25;
  clip-path: polygon(44% 0, 100% 0, 100% 100%, 28% 100%);
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(.65,0,.35,1);
  pointer-events: none;
}
.bildfolie[data-aufriss="ja"] .collage::after { transform: translateX(100%); }
.bildfolie[data-vorhang="aus"] .collage::after { display: none; }
.collage__teil { opacity: 0; transform: var(--von); filter: drop-shadow(0 1.2rem 1.6rem rgb(0 0 0 / 55%)); transition: opacity 180ms ease-out, transform 550ms cubic-bezier(.2,.9,.25,1.18), filter 550ms ease-out; }
.collage__teil[data-gross="ja"][data-sichtbar="ja"] { transform: scale(var(--gross-skala, 1)); transform-origin: var(--gross-ursprung, 50% 0); }
.collage__teil[data-gross] { transition: opacity 180ms ease-out, transform 900ms cubic-bezier(.3,.7,.2,1), filter 550ms ease-out; }
.collage__teil[data-sichtbar="ja"] { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%)); }
.bildfolie--collage .bildfolie__buehne::after { content: ''; position: absolute; inset: 0 0 0 54%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgb(244 15 31 / 24%) 55%, transparent 73%); }
.bildfolie[data-akzent="ja"] .bildfolie__buehne::after { opacity: 1; animation: collage-akzent 450ms ease-out both; }
@keyframes collage-akzent { from { opacity: .9; translate: -8% 0; } to { opacity: 0; translate: 8% 0; } }
.bildfolie--collage .bildfolie__schatten {
  background: linear-gradient(90deg, rgb(4 12 17 / 28%), transparent 40%),
              linear-gradient(0deg, rgb(4 12 17 / 80%), transparent 35%);
}
.bildfolie--kap4 .bildfolie__schatten,
.bildfolie--kap7 .bildfolie__schatten,
.bildfolie--kap10 .bildfolie__schatten,
.bildfolie--kap12 .bildfolie__schatten,
.bildfolie--kap13 .bildfolie__schatten {
  background: linear-gradient(90deg, #04101bf5, #04101bea 25%, #04101bdc 43%, transparent 68%),
              linear-gradient(0deg, rgb(4 12 17 / 80%), transparent 35%);
}
.bildfolie--collage .bildfolie__beschriftung { max-inline-size: min(30rem, 40%); }
.bildfolie--collage .lspur { max-inline-size: min(20rem, 30%); }
.bildfolie--collage .bildfolie__titel { max-inline-size: 13ch; }
.bildfolie--collage .lk__begriff {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bildfolie--diorama .collage { animation: none; }
.bildfolie--diorama .collage::after { display: none; }
.bildfolie--diorama .collage__platte { clip-path: inset(0); transition: none; }
.bildfolie--diorama .collage__teil {
  filter: drop-shadow(0 1rem 1.3rem rgb(0 0 0 / 40%));
  transition: opacity 220ms ease-out, transform 650ms cubic-bezier(.2,.9,.25,1.12), filter 650ms ease-out;
}
.bildfolie--diorama .collage__teil[data-sichtbar="ja"] { filter: none; }
.bildfolie--diorama .bildfolie__buehne::after { display: none; }
.bildfolie--diorama .bildfolie__schatten {
  background: linear-gradient(90deg, rgb(4 12 20 / 42%), transparent 42%),
              linear-gradient(0deg, rgb(4 12 20 / 72%), transparent 32%);
}
.bildfolie--kap5 .bildfolie__schatten,
.bildfolie--kap11 .bildfolie__schatten,
.bildfolie--kap8 .bildfolie__schatten {
  background: linear-gradient(90deg, #04101bf5, #04101bea 25%, #04101bd4 40%, transparent 64%),
              linear-gradient(0deg, rgb(4 12 20 / 76%), transparent 32%);
}
.bildfolie--buehne .collage { animation: none; }
.bildfolie--buehne .collage::after { display: none; }
.bildfolie--buehne .collage__platte { clip-path: inset(0); transition: none; }
.bildfolie--buehne .collage__teil {
  transform: none;
  filter: brightness(.45);
  transition: none;
}
.bildfolie--buehne .collage__teil[data-sichtbar="ja"] {
  filter: none;
  animation: buehnenlicht 850ms ease-out both;
}
@keyframes buehnenlicht {
  0% { opacity: 0; filter: brightness(.4); }
  18% { opacity: .72; filter: brightness(1.35); }
  28% { opacity: .22; filter: brightness(.65); }
  45% { opacity: .92; filter: brightness(1.15); }
  100% { opacity: 1; filter: none; }
}
.bildfolie--buehne .bildfolie__buehne::after { display: none; }
.bildfolie--buehne .bildfolie__schatten {
  background: linear-gradient(90deg, #04101bf2, #04101bc7 32%, transparent 67%),
              linear-gradient(0deg, rgb(4 12 20 / 76%), transparent 38%);
}
.bildfolie--kap6 .bildfolie__schatten,
.bildfolie--kap9 .bildfolie__schatten {
  background: linear-gradient(90deg, #04101bf5, #04101bea 25%, #04101bd4 40%, transparent 64%),
              linear-gradient(0deg, rgb(4 12 20 / 76%), transparent 32%);
}
@media (min-width: 901px) {
  /* Die Karte bleibt auf jeder Engstufe in der Textspalte; die enge-3-Breite (62 %) lief sonst über das Bild. */
  .bildfolie--collage[data-enge] .bildfolie__beschriftung { max-inline-size: min(30rem, 40%); }
  .bildfolie--collage .bildfolie__bild { object-position: 63% center; }
  .bildfolie--kap7 .bildfolie__titel,
  :is(.bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13) .bildfolie__titel { max-inline-size: 14ch; }
}
@media (max-width: 900px) {
  .bildfolie--collage .bildfolie__schatten {
    background: linear-gradient(180deg, rgb(3 10 15 / 80%), rgb(3 10 15 / 35%) 28%, transparent 42%),
                linear-gradient(0deg, rgb(3 10 15 / 94%), transparent 57%);
  }
  .bildfolie--collage .bildfolie__beschriftung,
  .bildfolie--collage .lspur { max-inline-size: none; }
  .bildfolie--diorama .bildfolie__schatten {
    background: linear-gradient(180deg, rgb(3 10 18 / 78%), transparent 34%),
                linear-gradient(0deg, rgb(3 10 18 / 93%), transparent 60%);
  }
  .bildfolie--buehne .bildfolie__schatten {
    background: linear-gradient(180deg, rgb(3 10 18 / 83%), transparent 38%),
                linear-gradient(0deg, rgb(3 10 18 / 94%), transparent 60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .collage, .collage::after, .collage__platte, .collage__teil, .bildfolie[data-akzent="ja"] .bildfolie__buehne::after { animation: none; transition: none; }
  .bildfolie--diorama .collage__teil { transition: none; }
  .bildfolie--buehne .collage__teil[data-sichtbar="ja"] { animation: none; opacity: 1; filter: none; }
  .bildfolie[data-akzent="ja"] .bildfolie__buehne::after { opacity: 0; }
}

/* Chip-Finalstil: Inhalt statt gestreckter Rasterzellen, mittig und ohne Textumbruch. */
.lbegriffe__chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: .35em .9em;
  min-block-size: 1.9em;
  font-size: 17.26725px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.lbegriffe__chip span { flex: 0 0 auto; min-inline-size: max-content; white-space: nowrap; }
.lbegriffe__chip svg { display: none; }
.bildfolie .lbegriffe--unten[data-anzahl] .lbegriffe__chip,
.bildfolie .lbegriffe--umbruch[data-anzahl] .lbegriffe__chip {
  flex: 0 0 auto;
  inline-size: max-content;
  max-inline-size: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.lbegriffe--unten,
.lbegriffe--umbruch { gap: .5em; }
@media (min-width: 901px) {
  /* F01: alle fünf Chips in einer Reihe (Kundenfeedback 09.10.2026); die Schrift folgt der Bühnenbreite. */
  .bildfolie--f01 { container-type: inline-size; }
  .bildfolie--f01 .lbegriffe--unten {
    flex-wrap: wrap;
    justify-content: center;
    max-inline-size: none;
    transform: translateY(50px);
  }
  .bildfolie--f01 .lbegriffe--unten .lbegriffe__chip { font-size: clamp(12px, 1.5cqi, 17.26725px); }
  .bildfolie--f03 .lbegriffe--umbruch .lbegriffe__chip { padding: .35em .9em; font-size: 15.6px; line-height: 1.15; }
  /* F04: Reihe so breit wie die Begriffsblöcke darüber, mittig, bricht bei Bedarf um statt seitlich abgeschnitten zu werden. */
  .bildfolie--f04 .lbegriffe--umbruch {
    inset-inline-end: clamp(1.4rem, 4.4vw, 4.2rem);
    inline-size: auto;
    max-inline-size: none;
    flex-wrap: wrap;
    justify-content: center;
    transform: translateY(6px);
  }
  .bildfolie--f04 .lbegriffe--umbruch .lbegriffe__chip { flex: 0 0 auto; padding: .35em .9em; font-size: 17.49px; line-height: 1.15; }
  .bildfolie--f04 .lbegriffe--umbruch .lbegriffe__chip span { white-space: nowrap; }
  .bildfolie.bildfolie--f06 .lbegriffe--umbruch .lbegriffe__chip { padding: .35em .9em; font-size: 14.3px; line-height: 1.15; } /* cyber9a: unabhängig von der Chipzahl */
}
/* Chips im Kopf: nie schmaler als ihr Begriff. Die Leiste hält Zeilen auf Textspaltenbreite, ein einzelner
   langer Begriff (F16 „Cyber-Luftsicherheitsbeauftragter“) darf aber über sie hinausragen statt über den Chiprand. */
.lbegriffe:not(.lbegriffe--unten) .lbegriffe__chip { flex-shrink: 0; }
/* Untere Leisten mit begrenzter Breite stehen mittig in der Bühne, nicht links verankert.
   Collage-Folien auf Desktop setzen inset-inline-end: auto und bleiben damit in der Textspalte. */
.lbegriffe.lbegriffe--unten { margin-inline: auto; }
/* Collage-Folien Desktop: die Chipreihe steht in der Textspalte unter der Karte und beginnt bündig mit ihr.
   Zentrierte Reihen unterschiedlicher Länge wirkten wie Puzzleteile (Kundenfeedback 09.10.2026, F06). */
@media (min-width: 901px) {
  .bildfolie--collage:not(.bildfolie--f04) .lbegriffe--umbruch { justify-content: flex-start; }
}
/* Collage-Titel nutzen die Textspalte voll: zwei statt drei Zeilen lassen Spur und Karte Platz,
   ohne dass der Titel je kleiner wird. */
@media (min-width: 901px) {
  .bildfolie--collage:not(.bildfolie--kap7, .bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13) .bildfolie__titel { max-inline-size: min(20ch, 44%); }
}

/* Einstieg: die drei Themen bleiben auch in den kompakten Kopfstufen vollständig lesbar. */
.bildfolie.bildfolie--f01 .lspur__wort { display: block; }
.bildfolie.bildfolie--f01[data-enge="4"] .lspur {
  display: flex;
  flex-wrap: wrap;
  max-inline-size: none;
  gap: .45rem;
}
.bildfolie.bildfolie--f01[data-enge="4"] .lspur__punkt {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
}
.bildfolie.bildfolie--f01[data-enge="4"] .lspur__punkt::after { display: none; }
@media (prefers-reduced-motion: reduce) { .bildfolie--spurgenau :is(.lspur__punkt, .lspur__marke, .lspur__unter) { transition: none; } }

/* cyber9a: HRI-Folientext (unverändert, Originalreihenfolge) */
.hri-folientext {
  list-style: none; margin: .9rem 0 0; padding: .7rem .9rem; max-inline-size: min(46ch, 100%);
  display: grid; gap: .3rem; background: rgb(12 14 18 / .72); border-inline-start: 3px solid var(--brand, #e30613);
  border-radius: 10px; color: #fff; font: var(--fw-medium, 500) var(--fs-sm, .95rem)/1.4 var(--font-ui, system-ui);
  overflow-wrap: anywhere; backdrop-filter: blur(4px);
}
.hri-folientext li { margin: 0; }
@media (max-width: 720px) { .hri-folientext { font-size: .85rem; padding: .55rem .7rem; max-block-size: 38vh; overflow-y: auto; } }

/* ---------------------------------------------------------------------------
   Feste 16:9-Bühne für Einstieg, Kapitel 1 und die verbundenen Dioramen in Kapitel 2
   (sprechfolie.js: bildfolie--raster, data-raster="an").
   Die Folie wird in 1280 × 720 gesetzt und als Ganzes skaliert (--skala). Sie sieht deshalb auf dem
   MacBook, im Vollbild und auf großen Monitoren gleich aus; nur der Rand um die Bühne wächst.
   Aufbau auf jeder Folie: links die Infospalte (x 64 bis 584), oben Kicker, Titel und Spur, unten die
   Karte und darunter die Bubbles. Rechts ab x 640 das Collagebild; alle Bildteile liegen dort.
   Die Regeln stehen bewusst am Dateiende und mit hoher Spezifität: Die Breiten- und Höhenregeln weiter
   oben gelten für das bewegliche Layout und dürfen die feste Bühne nicht verändern.
   ------------------------------------------------------------------------ */
.buehne > .seg:has(> .bildfolie--raster[data-raster="an"]) { position: relative; display: block; background: #0b141a; }
.bildfolie.bildfolie--raster[data-raster="an"] {
  --spalte-x: 64px;
  --spalte-b: 520px;
  --oben: 58px;
  --unten: 50px;
  position: absolute;
  inset-block-start: calc((100% - 720px * var(--skala, 1)) / 2);
  inset-inline-start: calc((100% - 1280px * var(--skala, 1)) / 2);
  inline-size: 1280px;
  block-size: 720px;
  min-block-size: 0;
  flex: none;
  transform: scale(var(--skala, 1));
  transform-origin: 0 0;
  background: #0b141a;
}
/* Bild: deckt die rechte Hälfte genau ab. Etwas Übermaß, damit die Drift nie den Rand freilegt. */
.bildfolie.bildfolie--raster[data-raster="an"] .collage { inset: -.6% -1.2% -.6% 0; }
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__bild { object-fit: cover; object-position: 0% 50%; transition: none; }
/* Kapitel 2: dieselbe registrierte Welt ohne Overscan; die harte Mitte gilt auch im Einflug. */
.bildfolie--verbunden .bildfolie__buehne {
  background: url('../img/collage/F11-kap2-platte.webp') 0 50% / cover no-repeat;
}
.bildfolie.bildfolie--raster.bildfolie--verbunden[data-raster="an"] .collage {
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
/* Neue Lichtbühne: dieselbe feste Halbierung, ohne die Kapitel-2-Hintergrundplatte. */
.bildfolie.bildfolie--raster.bildfolie--halbsplit[data-raster="an"] .collage {
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
/* Kapitel 4: registrierter Collage-Aufbau wie Kapitel 1. Der äußere Clip
   hält auch gedrehte/einfliegende Teile rechts; die Endlage bleibt pixelgleich. */
.bildfolie.bildfolie--kap4[data-raster="an"] .bildfolie__buehne {
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.bildfolie.bildfolie--kap4[data-raster="an"] .collage {
  animation: none;
  translate: none;
  scale: 1;
}
.bildfolie.bildfolie--raster.bildfolie--kap4[data-raster="an"] .collage__teil {
  transition: opacity 180ms ease-out, transform 550ms cubic-bezier(.2,.9,.25,1.18), filter 550ms ease-out;
}
/* Kapitel 7 übernimmt die abgenommene Kapitel-4-Collage im festen Halbraster. */
.bildfolie:is(.bildfolie--kap7, .bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .bildfolie__buehne {
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.bildfolie:is(.bildfolie--kap7, .bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .collage {
  animation: none;
  translate: none;
  scale: 1;
}
.bildfolie.bildfolie--raster:is(.bildfolie--kap7, .bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .collage__teil {
  transition: opacity 180ms ease-out, transform 550ms cubic-bezier(.2,.9,.25,1.18), filter 550ms ease-out;
}
/* Kapitel 5: das frühere frontale Regal, sanftes Aufsetzen der neuen Motive.
   Der äußere Halbierungsclip bleibt auch während des Einflugs wirksam. */
.bildfolie.bildfolie--raster:is(.bildfolie--kap5, .bildfolie--kap11)[data-raster="an"] .collage__teil {
  transition: opacity 240ms ease-out, transform 540ms cubic-bezier(.2,.8,.2,1);
}
/* Kapitel 8: drei feste Transporter als Motivräume, ohne Drift der Grundszene. */
.bildfolie.bildfolie--kap8[data-raster="an"] .bildfolie__buehne {
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.bildfolie.bildfolie--kap8[data-raster="an"] .collage {
  animation: none;
  translate: none;
  scale: 1;
}
.bildfolie.bildfolie--raster.bildfolie--kap8[data-raster="an"] .collage__teil {
  transition: opacity 240ms ease-out, transform 540ms cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .bildfolie.bildfolie--raster.bildfolie--kap4[data-raster="an"] .collage__teil { transition: none; }
  .bildfolie.bildfolie--raster:is(.bildfolie--kap7, .bildfolie--kap10, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .collage__teil { transition: none; }
  .bildfolie.bildfolie--raster:is(.bildfolie--kap5, .bildfolie--kap11)[data-raster="an"] .collage__teil { transition: none; }
  .bildfolie.bildfolie--raster.bildfolie--kap8[data-raster="an"] .collage__teil { transition: none; }
}
.bildfolie.bildfolie--kap3[data-raster="an"] .bildfolie__buehne {
  background: url('../img/collage/F20-kap3-raum-20261019.webp') 0 50% / cover no-repeat;
}
/* Kapitel 6 folgt der bestätigten Lichtbühne: derselbe Raum über beide
   Hälften, Motive zunächst dunkel, am Wort in 600ms ruhig beleuchtet. */
.bildfolie.bildfolie--kap6[data-raster="an"] .bildfolie__buehne,
.bildfolie.bildfolie--kap9[data-raster="an"] .bildfolie__buehne {
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.bildfolie--kap6 .collage__teil[data-sichtbar="ja"],
.bildfolie--kap9 .collage__teil[data-sichtbar="ja"] {
  animation: f20-licht-an 600ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .bildfolie--kap6 .collage__teil[data-sichtbar="ja"],
  .bildfolie--kap9 .collage__teil[data-sichtbar="ja"] { animation: none; }
}
.bildfolie.bildfolie--kap3.bildfolie--f20[data-raster="an"] .bildfolie__buehne {
  background-image: url('../img/collage/F20-lichtnah-dunkel-20261020.webp');
}
/* Die Maske beginnt innerhalb der rechten Hälfte; der harte 50%-Clip bleibt bestehen. */
.bildfolie.bildfolie--kap3[data-raster="an"] .collage {
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / 35%) 51%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / 35%) 51%, #000 52%);
}
/* F20: schmaler Raumübergang vor dem vollständigen linken Tischende. */
.bildfolie.bildfolie--kap3.bildfolie--f20[data-raster="an"] .collage {
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / 35%) 51%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / 35%) 51%, #000 52%);
}
/* Die dunkle Szene bleibt stehen; nur das Licht kommt dazu, ohne Ortswechsel. */
.bildfolie--kap3 .collage__teil[data-sichtbar="ja"] {
  animation: f20-licht-an 600ms ease-out both;
}
@keyframes f20-licht-an {
  from { opacity: 0; filter: none; }
  to { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bildfolie--kap3 .collage__teil[data-sichtbar="ja"] { animation: none; }
}
.bildfolie--verbunden .collage__teil {
  filter: none;
  transition: opacity 240ms ease-out, transform 540ms cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .bildfolie--verbunden .collage__teil { transition: none; }
}
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__schatten {
  background: linear-gradient(90deg, rgb(6 12 17 / 58%), rgb(6 12 17 / 34%) 36%, rgb(6 12 17 / 8%) 50%, transparent 58%),
              linear-gradient(0deg, rgb(6 12 17 / 50%), transparent 24%);
}
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__buehne::after { inset: 0 0 0 50%; }

/* Kopf: Kicker, Titel, Spur (oder Begriffsblöcke). */
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__kopf {
  display: block;
  inset-block-start: var(--oben);
  inset-inline: var(--spalte-x) auto;
  inline-size: var(--spalte-b);
  max-block-size: none;
  overflow: visible;
  padding: 0;
}
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__kicker {
  display: block;
  color: #ff9d94;
  font: 700 12px/1.3 var(--font-ui);
  letter-spacing: .14em;
}
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__titel,
.bildfolie.bildfolie--raster[data-raster="an"][data-phase="intro"] .bildfolie__titel {
  max-inline-size: none;
  margin: 12px 0 0;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* Spur: immer eine senkrechte Liste mit allen Einträgen, nie verdichtet (Jakob: nicht verschwinden lassen). */
.bildfolie.bildfolie--raster[data-raster="an"] .lspur {
  order: 0;
  display: grid;
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
  margin: 26px 0 0;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__punkt {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 6px 0;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__punkt:not(:last-child)::after {
  display: block;
  inset-block: 30px -5px;
  inset-inline-start: 10px;
  inline-size: 2px;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__marke { inline-size: 22px; block-size: 22px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__marke svg { inline-size: 19px; block-size: 19px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__punkt .lspur__wort {
  display: block;
  font: 700 13px/1.3 var(--font-ui);
  letter-spacing: .11em;
  white-space: nowrap;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lspur__unter { display: block; font: 500 14px/1.35 var(--font-ui); }

/* Begriffsblöcke (F04): kleiner, in voller Spaltenbreite. */
.bildfolie.bildfolie--raster[data-raster="an"] .lbg { inline-size: 100%; max-inline-size: none; gap: 10px; margin: 26px 0 0; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbg__block { gap: 18px; padding: 7px; padding-inline-end: 18px; border-radius: 14px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbg__bild { block-size: 70px; border-radius: 9px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbg__text { gap: 3px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbg__wort { font-size: 21px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbg__kurz { font-size: 14px; }

/* Karte: eine ruhige Fläche, immer an derselben Stelle über den Bubbles. */
.bildfolie.bildfolie--raster[data-raster="an"] .bildfolie__beschriftung {
  inset-inline: var(--spalte-x) auto;
  inline-size: var(--spalte-b);
  max-inline-size: none;
  inset-block-end: calc(var(--unten) + var(--chipszeile, 0px));
  text-shadow: none;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lk {
  padding: 18px 24px 20px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 16px;
  background: linear-gradient(160deg, rgb(17 28 37 / 88%), rgb(8 15 21 / 92%));
  box-shadow: 0 18px 40px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 6%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bildfolie.bildfolie--raster[data-raster="an"] .lk--weg { inset-inline: 0; inset-block-end: 0; }
.bildfolie.bildfolie--raster[data-raster="an"] .lk__kopf { font: 700 12px/1.3 var(--font-ui); letter-spacing: .14em; }
.bildfolie.bildfolie--raster[data-raster="an"] :is(.lk__text, .lk__zitat, .lk__merk) {
  margin-block-start: 8px;
  font-size: 21px;
  line-height: 1.34;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lk__begriff { margin-block-start: 6px; font-size: 30px; line-height: 1.08; }
.bildfolie.bildfolie--raster[data-raster="an"] .lk--definition .lk__text { font-size: 18px; line-height: 1.42; }

/* F38: sichtbare Geräteverbindung im freien Bereich neben der Kapitelspur. */
.netzbild { position: absolute; z-index: 4; inset-inline-end: 54%; inset-block-start: 27%; inline-size: 140px; color: #ff9d94; }
.netzbild > svg { display: block; inline-size: 100%; block-size: auto; }
.bildfolie.bildfolie--raster[data-raster="an"] .netzbild { inset-inline: 430px auto; inset-block-start: 158px; inline-size: 140px; }

/* Bubbles: eine linksbündige Reihe in der Infospalte, bricht um statt ins Bild zu ragen. */
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe.lbegriffe--unten {
  position: absolute;
  inset-inline: var(--spalte-x) auto;
  inset-block-end: var(--unten);
  inline-size: var(--spalte-b);
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 7px;
  margin: 0;
  transform: none;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip {
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: auto;
  max-inline-size: none;
  min-block-size: 0;
  padding: 7px 13px;
  border-color: rgb(255 255 255 / 30%);
  background: rgb(8 15 21 / 72%);
  font: 600 13.5px/1.2 var(--font-ui);
  white-space: nowrap;
}
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip[data-sichtbar="nein"] { display: inline-flex; visibility: hidden; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip span { white-space: nowrap; }
/* Kapitel 2: feste Zweierreihen; eine einzelne letzte Bubble steht mittig. */
.bildfolie.bildfolie--raster:is(.bildfolie--kap2, .bildfolie--kap3, .bildfolie--kap5, .bildfolie--kap6, .bildfolie--kap8, .bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .lbegriffe.lbegriffe--unten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bildfolie.bildfolie--raster:is(.bildfolie--kap2, .bildfolie--kap3, .bildfolie--kap5, .bildfolie--kap6, .bildfolie--kap8, .bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip {
  inline-size: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  white-space: normal;
}
.bildfolie.bildfolie--raster:is(.bildfolie--kap2, .bildfolie--kap3, .bildfolie--kap5, .bildfolie--kap6, .bildfolie--kap8, .bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip span { white-space: normal; }
/* Die globale Chip-Animation hält Text zunächst unflexibel. Im neuen Regal
   müssen lange Beschriftungen innerhalb der Polsterung umbrechen können. */
.bildfolie.bildfolie--raster:is(.bildfolie--kap5, .bildfolie--kap6, .bildfolie--kap8, .bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip span {
  flex: 0 1 auto;
  min-inline-size: 0;
}
.bildfolie.bildfolie--raster:is(.bildfolie--kap2, .bildfolie--kap3, .bildfolie--kap5, .bildfolie--kap6, .bildfolie--kap8, .bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13)[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  inline-size: calc((100% - 8px) / 2);
  justify-self: center;
}
/* F04: die vier Bubbles passen in eine Reihe unter die Begriffsblöcke. */
.bildfolie--kap3 .lbegriffe__chip,
:is(.bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13) .lbegriffe__chip { transform: none; transition: opacity 160ms ease-out; }
.bildfolie--kap3 .lbegriffe__chip[data-sichtbar="ja"],
:is(.bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13) .lbegriffe__chip[data-sichtbar="ja"] { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bildfolie--kap3 .lbegriffe__chip,
:is(.bildfolie--kap9, .bildfolie--kap10, .bildfolie--kap11, .bildfolie--kap12, .bildfolie--kap13) .lbegriffe__chip { transition: none; }
}
.bildfolie.bildfolie--raster.bildfolie--f04[data-raster="an"] .lbegriffe.lbegriffe--unten { gap: 6px; }
.bildfolie.bildfolie--raster.bildfolie--f04[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip { padding-inline: 10px; font-size: 12.5px; }

/* F58: native Beschriftung über dem geschützten Tunnel, mit dessen Wortcue. */
.collage__vpn {
  position: absolute; z-index: 2; inset-inline-start: 67.95%; inset-block-start: 75.25%;
  color: #b5eaff; font-size: 24px; font-weight: 700; letter-spacing: .08em;
  text-shadow: 0 1px 3px #174e7d, 0 0 10px #239fff;
  pointer-events: none; opacity: 0; transform: translate(-50%, calc(-50% - 9px));
  transition: opacity .7s ease, transform .7s ease;
}
.collage__vpn[data-sichtbar="ja"] { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .collage__vpn { transition: none; } }

/* EN: freigegebene deutsche Zeilen, gleiche Schrift und linke Informationsspalte. */
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe.lbegriffe--referenzzeilen {
  flex-direction: column;
  flex-wrap: nowrap;
}
.lbegriffe--referenzzeilen > .lbegriffe__gruppe { inline-size: 100%; min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.lbegriffe--referenzzeilen .lbegriffe__reihe { display: flex; flex-wrap: nowrap; gap: 7px; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.bildfolie--f04 .lbegriffe--referenzzeilen .lbegriffe__reihe { gap: 6px; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe--referenzzeilen .lbegriffe__chip { flex: 0 1 auto; min-inline-size: 0; }
.bildfolie.bildfolie--raster[data-raster="an"] .lbegriffe--referenzzeilen .lbegriffe__chip span { flex: 0 1 auto; min-inline-size: 0; white-space: normal; }
/* Dichte englische Folien: Abstände verdichten, Inhalte/Schriftgröße beibehalten. */
.bildfolie.bildfolie--raster.bildfolie--kompakt[data-raster="an"] .lspur { margin-block-start: 16px; }
.bildfolie.bildfolie--raster.bildfolie--kompakt[data-raster="an"] .lspur__punkt { padding-block: 4px; }
.bildfolie.bildfolie--raster.bildfolie--kompakt[data-raster="an"] .lbegriffe.lbegriffe--unten { row-gap: 6px; }
.bildfolie.bildfolie--raster.bildfolie--kompakt[data-raster="an"] .lbegriffe.lbegriffe--unten .lbegriffe__chip { padding-block: 6px; }