/* =========================================================================
   folie.css — Erweiterung der Sprechfolie (Neufassung 2026-09-28).

   Zwei Anordnungen:
   · ohne Szene, bis vier Karten: das bekannte Raster aus kurs.css
   · mit Szene oder mehr Karten: STAPEL links, Szene rechts. Ältere Karten
     treten zurück (data-alt), sehr alte verschwinden (data-weg).
   ========================================================================= */

.folie[data-szene] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(1rem, 3vw, 2.5rem); }
.folie[data-szene] .folie__kopf { grid-column: 1; padding-inline-end: 0; }
.folie[data-szene] .folie__raster { grid-column: 1; }
.folie[data-szene] .folie__motiv { display: none; }
.folie__szene { grid-column: 2; grid-row: 1 / -1; min-block-size: 0; display: grid; place-items: center; position: relative;
  border-radius: var(--r-2xl); padding: clamp(.75rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--bg-canvas) 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line-subtle); animation: folie-szene-rein 700ms var(--ease-enter) both; }
.folie__szene::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
  background-image: radial-gradient(var(--line-default) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); }
@keyframes folie-szene-rein { from { opacity: 0; transform: translateX(24px) scale(.98); } }
.folie[data-szene][data-phase="intro"] .folie__kopf { grid-row: 1 / span 2; }
.folie[data-szene][data-phase="intro"] .folie__titel { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); max-inline-size: 14ch; }
/* Die Segment-Illustration tritt hinter die Szene zurück. */
.seg:has(.folie[data-szene]) { background-image: linear-gradient(rgb(255 255 255 / 55%), rgb(255 255 255 / 55%)), var(--segment-bg); }
:root[data-theme="dark"] .seg:has(.folie[data-szene]) { background-image: linear-gradient(rgb(23 25 28 / 60%), rgb(23 25 28 / 60%)), var(--segment-bg-dark); }

/* ---- Stapel ---- */
.folie__raster[data-stapel="ja"] { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(.5rem, 1vw, .75rem);
  max-block-size: none; block-size: 100%; align-self: stretch; overflow: hidden; }
.folie__raster[data-stapel="ja"] .folie__el { flex: 0 0 auto; font-size: clamp(1.02rem, .85rem + .75vw, 1.45rem); min-block-size: 0; }
.folie__raster[data-stapel="ja"] .folie__el[data-sichtbar="nein"] { display: none; }
.folie__raster[data-stapel="ja"] .folie__el[data-weg="ja"] { display: none; }
.folie__raster[data-stapel="ja"] .folie__el[data-alt="ja"] { padding-block: .55rem; font-size: clamp(.82rem, .75rem + .3vw, .98rem); opacity: .62; box-shadow: none; }
.folie__raster[data-stapel="ja"] .folie__el[data-alt="ja"] .folie__nr,
.folie__raster[data-stapel="ja"] .folie__el[data-alt="ja"] .folie__unter,
.folie__raster[data-stapel="ja"] .folie__el[data-alt="ja"] .folie__sichten { display: none; }
.folie__raster[data-stapel="ja"] .folie__el[data-sichtbar="ja"] { animation: folie-karte-rein 520ms var(--ease-enter) both; }
@keyframes folie-karte-rein { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* ---- Kartenkopf mit Ikone ---- */
.folie__nr svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.folie__el:has(.folie__nr svg) .folie__nr::before { display: none; }
.folie__unter { display: block; font: var(--fw-medium) var(--fs-sm)/1.45 var(--font-ui); letter-spacing: 0; color: var(--fg-muted); }

/* ---- Definition: Begriff groß, Erklärung darunter, roter Balken ---- */
.folie__el[data-art="definition"] { background: var(--bg-canvas); color: var(--fg-default); box-shadow: var(--sh-2); gap: .45rem; }
.folie__el[data-art="definition"]::before { content: ""; position: absolute; inset-block: 1rem; inset-inline-start: 0; inline-size: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.folie__el[data-art="definition"][data-alt="ja"]::before { inset-block: .6rem; }
.folie__begriff { display: block; font: var(--fw-bold) clamp(1.35rem, 1rem + 1.4vw, 2.2rem)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--fg-strong); }
.folie__el[data-art="definition"] .folie__text { font: var(--fw-medium) clamp(.95rem, .82rem + .5vw, 1.2rem)/1.45 var(--font-ui); letter-spacing: -.005em; }
.folie__el[data-art="definition"] .folie__nr { color: var(--brand-fg); }
.folie__el[data-art="definition"][data-alt="ja"] .folie__begriff { font-size: 1.05rem; }
.folie__el[data-art="definition"][data-alt="ja"] .folie__text { display: none; }

/* ---- Zitat: exakt der gesprochene Satz, Wort für Wort mitleuchtend ---- */
.folie__el[data-art="zitat"] { background: var(--bg-canvas); box-shadow: var(--sh-2); color: var(--fg-strong); }
.folie__zitat { position: relative; display: block; padding-inline-start: 2.1rem; font: var(--fw-bold) clamp(1.05rem, .85rem + .9vw, 1.6rem)/1.3 var(--font-display); letter-spacing: -.02em; }
.folie__zitat::before { content: "„"; position: absolute; inset-inline-start: 0; inset-block-start: -.95em; font: 700 2.6em/1 var(--font-display); color: var(--brand); }
.folie__zw { color: var(--line-strong); transition: color 180ms linear; }
.folie__zw[data-an="ja"] { color: var(--fg-strong); }
.folie__el[data-art="zitat"][data-aktiv="ja"] .folie__zw[data-an="ja"]:has(+ .folie__zw:not([data-an="ja"])),
.folie__el[data-art="zitat"][data-aktiv="ja"] .folie__zw[data-an="ja"]:last-child { color: var(--brand-fg); }
.folie__el[data-art="zitat"][data-alt="ja"] .folie__zw { color: var(--fg-muted); }
.folie__el[data-art="zitat"][data-alt="ja"] .folie__zitat { font-size: 1em; padding-inline-start: 0; }
.folie__el[data-art="zitat"][data-alt="ja"] .folie__zitat::before { display: none; }

/* ---- Eselsbrücke: die dunkle Sonderkarte ---- */
.folie__el[data-art="eselsbruecke"] { background: var(--bg-inverse); color: #fff; box-shadow: var(--sh-3); }
:root[data-theme="dark"] .folie__el[data-art="eselsbruecke"] { background: #2b2f35; }
.folie__el[data-art="eselsbruecke"] .folie__nr { color: #ffd166; }
.folie__el[data-art="eselsbruecke"] .folie__nr svg { animation: folie-gluehen 2.4s ease-in-out infinite; }
@keyframes folie-gluehen { 50% { filter: drop-shadow(0 0 6px #ffd166); } }
.folie__el[data-art="eselsbruecke"] .folie__text { font-size: 1.12em; font-weight: var(--fw-bold); }
.folie__el[data-art="eselsbruecke"] .folie__unter { color: rgba(255, 255, 255, .72); }

/* ---- Merksatz: rot, ruhig, groß ---- */
.folie__el[data-art="merke"] { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 12px 32px color-mix(in srgb, var(--brand) 32%, transparent); }
.folie__el[data-art="merke"] .folie__nr { color: rgba(255, 255, 255, .85); }
.folie__el[data-art="merke"] .folie__text { font-weight: var(--fw-bold); }
.folie__el[data-art="merke"][data-alt="ja"] { background: var(--brand-soft); color: var(--brand-fg); }

/* ---- Warnung ---- */
.folie__el[data-art="warnung"] { background: var(--brand-soft); color: var(--brand-fg); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.folie__el[data-art="warnung"] .folie__nr { color: var(--brand-fg); }

/* ---- Beispiel aus dem Arbeitsalltag ---- */
.folie__el[data-art="beispiel"] { background: var(--bg-canvas); border: 1px dashed var(--line-strong); }
.folie__el[data-art="beispiel"] .folie__nr { color: var(--fg-default); }

/* ---- Blickwinkel: dieselbe Sache aus drei Arbeitsbereichen ---- */
.folie__el[data-art="blickwinkel"] { background: var(--bg-canvas); box-shadow: var(--sh-2); color: var(--fg-strong); gap: .6rem; }
.folie__text--klein { font: var(--fw-bold) clamp(.95rem, .85rem + .4vw, 1.15rem)/1.3 var(--font-display); }
.folie__sichten { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.folie__sicht { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .5rem .7rem; border-radius: var(--r-md); background: var(--bg-sunken);
  opacity: 0; transform: translateX(-10px); animation: folie-sicht 480ms var(--ease-enter) forwards; }
.folie__sicht:nth-child(2) { animation-delay: 450ms; }
.folie__sicht:nth-child(3) { animation-delay: 900ms; }
@keyframes folie-sicht { to { opacity: 1; transform: none; } }
.folie__sicht-kopf { display: flex; align-items: center; gap: .4rem; color: var(--fg-muted); }
.folie__sicht-kopf svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.folie__sicht-kopf b { font: var(--fw-bold) var(--fs-micro)/1.15 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: inherit; }
.folie__sicht p { margin: 0; font: var(--fw-medium) clamp(.74rem, .68rem + .22vw, .88rem)/1.35 var(--font-ui); letter-spacing: 0; color: var(--fg-default); }
.folie__sicht[data-eigene="ja"] { background: var(--bg-inverse); }
.folie__sicht[data-eigene="ja"] .folie__sicht-kopf { color: #ff8b85; }
.folie__sicht[data-eigene="ja"] p { color: #fff; }
.folie__sicht[data-eigene="ja"] .folie__sicht-kopf b::after { content: " · Ihr Bereich"; display: block; color: rgba(255,255,255,.6); }

/* ---- Ruhige Folie (Rechtsthemen): keine Szene, keine Bewegung außer Karten ---- */
.folie[data-ruhig="ja"] .folie__motiv { opacity: .5; }

/* ---- Schmale Bildschirme: Szene unter die Karten ---- */
@media (max-width: 900px) {
  .folie[data-szene] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .folie__szene { grid-column: 1; grid-row: 3; min-block-size: 18rem; }
  .folie[data-szene][data-phase="intro"] .folie__kopf { grid-row: 1; }
  .folie__raster[data-stapel="ja"] { block-size: auto; }
  .folie__sichten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .folie__szene, .folie__raster[data-stapel="ja"] .folie__el[data-sichtbar="ja"], .folie__sicht { animation: none; opacity: 1; transform: none; }
}

/* Filmische Sprechfolie: das Bild ist der Ort der Handlung. Nur die gerade
   gesprochene Aussage steht davor; die Sachgrafik folgt weiter den Wortzeiten. */
.buehne > .seg:has(.folie) {
  padding: 0;
  overflow: hidden;
  background: #0a1015;
}
.folie,
.folie[data-szene] {
  --bg-canvas: #12191f;
  --bg-sunken: #1a232b;
  --bg-fill: #243039;
  --bg-inverse: #111820;
  --fg-strong: #f7f8f7;
  --fg-default: #e6e9e8;
  --fg-muted: #c5ced0;
  --fg-subtle: #aab8bc;
  --line-strong: #6f7e83;
  --line-default: #4d5a60;
  --line-subtle: #36444a;
  --brand-fg: #ffaaa2;
  box-sizing: border-box;
  min-block-size: 100%;
  inline-size: 100%;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  overflow: hidden;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  column-gap: clamp(1rem, 3vw, 3rem);
  color: #f7f8f7;
  isolation: isolate;
}
.folie__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  animation: folie-bildfahrt 38s ease-in-out both;
  animation-play-state: paused;
}
.folie[data-pause="nein"] .folie__bild { animation-play-state: running; }
@keyframes folie-bildfahrt {
  from { transform: scale(1.01); }
  to { transform: scale(1.065) translateX(-.6%); }
}
.folie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(5 10 14 / 93%) 0%, rgb(6 12 17 / 80%) 33%, rgb(8 14 18 / 34%) 64%, rgb(8 14 18 / 15%) 100%),
              linear-gradient(0deg, rgb(5 10 14 / 43%), transparent 43%);
}
.folie__motiv { display: none; }
.folie__kopf,
.folie[data-szene] .folie__kopf {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding: 0;
  text-shadow: 0 2px 18px rgb(0 0 0 / 45%);
}
.folie__kicker { color: #c5ced0; }
.folie__kicker b { color: #ffaaa2; }
.folie__kicker span::before { color: #aab8bc; }
.folie__titel { color: #f7f8f7; }
.folie[data-phase="intro"] .folie__kopf,
.folie[data-szene][data-phase="intro"] .folie__kopf {
  grid-row: 1 / -1;
  align-self: center;
  padding: 0;
}
.folie[data-phase="intro"] .folie__titel,
.folie[data-szene][data-phase="intro"] .folie__titel {
  font-size: clamp(2.8rem, 4.4vw, 5.8rem);
  max-inline-size: 12ch;
  line-height: .99;
}
.folie__raster,
.folie__raster[data-stapel="ja"] {
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: grid;
  inline-size: 100%;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
  --spalten: 1;
}
.folie__raster .folie__el,
.folie__raster[data-stapel="ja"] .folie__el {
  display: none;
  min-block-size: 0;
  overflow: visible;
  padding: 0 0 0 clamp(1rem, 1.4vw, 1.4rem);
  border: 0;
  border-inline-start: 3px solid #e33a2e;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #f7f8f7;
  text-align: start;
  font-size: clamp(1.25rem, 1.7vw, 1.85rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 16px rgb(0 0 0 / 65%);
}
.folie__raster .folie__el[data-aktiv="ja"],
.folie__raster[data-stapel="ja"] .folie__el[data-aktiv="ja"] {
  display: flex;
  animation: folie-aussage-rein 460ms var(--ease-enter) both;
}
@keyframes folie-aussage-rein { from { opacity: 0; transform: translateY(14px); } }
.folie__raster .folie__el[data-aktiv="ja"] .folie__nr { color: #ffaaa2; }
.folie__raster .folie__el[data-aktiv="ja"] .folie__unter { color: #dbe1e2; }
.folie__raster .folie__el[data-art="definition"]::before { display: none; }
.folie__raster .folie__el[data-art="definition"] .folie__begriff {
  color: #fff;
  font-size: clamp(1.45rem, 1.85vw, 2.1rem);
  hyphens: auto;
  overflow-wrap: anywhere;
}
.folie__raster .folie__el[data-art="definition"] .folie__text { color: #e6e9e8; }
.folie__raster .folie__el[data-art="zitat"] .folie__zitat { padding-inline-start: 1.5rem; }
.folie__raster .folie__el[data-art="blickwinkel"] .folie__sicht { background: rgb(11 20 26 / 82%); }
.folie__raster .folie__el[data-art="blickwinkel"] .folie__sicht p { color: #f7f8f7; }
.folie__raster .folie__el[data-art="blickwinkel"] .folie__sicht-kopf { color: #c5ced0; }
.folie__raster .folie__el[data-art="merke"] { border-color: #e33a2e; }
.folie__raster .folie__el[data-art="warnung"] { border-color: #ff956d; }
.folie__raster .folie__el[data-art="hinweis"] { grid-column: 1; }
.folie__szene {
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / -1;
  min-block-size: 0;
  padding: clamp(.3rem, 1vw, 1rem);
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgb(5 12 17 / 42%));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  animation: none;
  opacity: 1;
  transition: opacity 600ms ease, transform 600ms var(--ease-enter);
}
.folie__szene::before { display: none; }
.folie[data-phase="intro"] .folie__szene { opacity: 0; transform: translateX(18px); }
.folie .sz-fenster,
.folie .sz-kachel,
.folie .sz-liste__zeile { background: rgb(13 22 29 / 88%); box-shadow: 0 14px 30px rgb(0 0 0 / 25%); }
.folie .sz-mail[data-markabsender="ja"] .sz-mail__adresse,
.folie .sz-mail[data-markbetreff="ja"] .sz-mail__betreff,
.folie .sz-mail[data-marktext="ja"] .sz-mail__text,
.folie .sz-mail[data-markanrede="ja"] .sz-mail__text,
.folie .sz-mail[data-marklink="ja"] .sz-mail__link,
.folie .sz-mail[data-markanhang="ja"] .sz-mail__anhang {
  background: rgb(150 35 33 / 56%);
  color: #fff;
}
.folie .sz-wlan__netz[data-status="echt"][data-an="ja"] {
  background: #174c3c;
  color: #fff;
}
.folie .sz-wlan__netz[data-status="echt"] small { color: #d8eee2; }
.folie[data-pause="ja"] .folie__bild { animation-play-state: paused; }

@media (max-width: 900px) {
  .buehne > .seg:has(.folie) { overflow-y: auto; }
  .folie,
  .folie[data-szene] {
    min-block-size: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(15rem, 1fr);
    padding: clamp(1.25rem, 5vw, 2.5rem);
  }
  .folie__kopf,
  .folie[data-szene] .folie__kopf { grid-column: 1; grid-row: 1; }
  .folie__raster,
  .folie__raster[data-stapel="ja"] { grid-column: 1; grid-row: 2; align-self: start; }
  .folie__szene { grid-column: 1; grid-row: 3; min-block-size: 15rem; }
  .folie::before { background: linear-gradient(90deg, rgb(5 10 14 / 91%), rgb(5 10 14 / 45%)), linear-gradient(0deg, rgb(5 10 14 / 60%), transparent); }
  .folie[data-phase="intro"] .folie__titel,
  .folie[data-szene][data-phase="intro"] .folie__titel {
    max-inline-size: 100%;
    font-size: clamp(2.1rem, 8vw, 3.2rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .folie__kicker { flex-wrap: wrap; line-height: 1.2; }
  .folie__kicker b { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .folie__bild,
  .folie__raster .folie__el[data-aktiv="ja"] { animation: none; }
  .folie__szene { transition: none; }
}