/* Aussehen der Erklärvideos: Player, Zeichnungen und Animationen. Hier musst du nichts ändern. */

/* ---------- Player ---------- */
.video { display: flex; flex-direction: column; gap: 8px; }
.buehne {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--v-himmel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; user-select: none;
}
.leinwand, .leinwand svg { width: 100%; height: 100%; }
.leinwand svg { display: block; }
.v-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.16); border: 0; padding: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.buehne.pause .v-overlay, .buehne.ende .v-overlay { opacity: 1; pointer-events: auto; }
.v-overlay span {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.v-overlay svg { width: 26px; height: 26px; fill: currentColor; }
.v-overlay .nochmal { display: none; }
.buehne.ende .v-overlay .nochmal { display: block; }
.buehne.ende .v-overlay .abspielen { display: none; }
.untertitel { min-height: 3.3em; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.untertitel strong { display: block; color: var(--ink); }
.v-leiste { display: flex; align-items: center; gap: 10px; }
.v-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0;
}
.v-btn:hover { border-color: var(--accent); }
.v-btn svg { width: 16px; height: 16px; fill: currentColor; }
.v-play .pause-icon { display: none; }
.v-play.laeuft .pause-icon { display: block; }
.v-play.laeuft .play-icon { display: none; }
.v-segmente { flex: 1; display: flex; gap: 4px; min-width: 0; }
.v-seg { flex: 1; position: relative; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; min-width: 0; }
.v-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--line); }
.v-seg span { position: absolute; left: 0; top: 9px; height: 4px; width: 0; border-radius: 2px; background: var(--accent); }
.v-seg.fertig span { width: 100%; }
.v-seg:hover::before { background: var(--muted); }
.v-zaehler { flex: none; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Zeichnungen ---------- */
.buehne svg { font-family: var(--font-body); }
.buehne .v-pop, .buehne .v-dreh, .buehne .v-wackel, .buehne .v-funkel, .buehne .v-takt, .buehne .v-schnapp,
.buehne .v-schrumpf, .buehne .v-flug, .buehne .v-tipp, .buehne .v-spur, .buehne .v-spritz { transform-box: fill-box; transform-origin: center; }
.buehne .v-spur { transform-origin: 0 50%; } .buehne .v-spur.von-rechts { transform-origin: 100% 50%; }
.buehne .v-fuell { transform-box: fill-box; transform-origin: 50% 100%; }
.buehne text { fill: var(--ink); font-size: 10px; }
.t-mini { font-size: 8px; } .t-klein { font-size: 10px; } .t-mittel { font-size: 12px; }
.t-gross { font-size: 18px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.fett { font-weight: 700; } .buehne .leise { fill: var(--muted); } .buehne .hell { fill: var(--band-ink); }
.buehne .raum { font-size: 7px; fill: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }
.figur { fill: var(--ink); }
.figur-strich { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.figur-strich.dick { stroke-width: 12; }
.boden { fill: var(--v-boden); }
.wand { fill: none; stroke: var(--muted); stroke-width: 3; }
.tuerbogen { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.dock { fill: var(--muted); }
.robo { fill: var(--accent); } .robo-licht { fill: var(--accent-ink); opacity: 0.8; }
.staub { fill: var(--v-staub); }
.spur { fill: var(--v-wasser); opacity: 0.22; }
.uhr { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.zeiger { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.zeiger-nabe { fill: var(--ink); }
.blase { fill: var(--surface); stroke: var(--line); }
.blase-akzent { fill: var(--accent); }
.phone { fill: var(--ink); } .screen { fill: var(--surface); }
.schalter { fill: var(--accent); } .knopf { fill: var(--surface); stroke: var(--line); }
.station { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.tank { fill: var(--tile); } .wasser { fill: var(--v-wasser); opacity: 0.6; } .schmutz { fill: var(--v-staub); } .beutel { fill: var(--tile); }
.haken-kreis { fill: var(--accent); }
.haken { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.funkel { fill: var(--marker); }
.geraet { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.leiste { fill: var(--tile); } .knopf2 { fill: var(--muted); } .display { fill: var(--ink); }
.fenster { fill: var(--ink); opacity: 0.85; } .glut { fill: var(--v-warm); opacity: 0.4; } .blech { fill: var(--muted); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.ring { fill: none; stroke: var(--v-warm); stroke-width: 5; stroke-dasharray: 1; stroke-linecap: round; }
.innen { fill: var(--tile); }
.spirale { fill: none; stroke: var(--v-warm); stroke-width: 3; stroke-linejoin: round; }
.fluegel { fill: var(--muted); } .nabe { fill: var(--ink); }
.luft { fill: none; stroke: var(--v-warm); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.85; }
.korb { fill: var(--surface); stroke: var(--ink); stroke-width: 2; } .griff { fill: var(--ink); }
.pommes { fill: var(--v-gold); }
.kanne { fill: var(--surface); stroke: var(--muted); stroke-width: 2; } .oel { fill: var(--v-gold); opacity: 0.85; }
.stiel { fill: var(--muted); } .loeffel { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.gitter { stroke: var(--muted); stroke-width: 1; }
.balken-bg { fill: var(--line); } .balken { fill: var(--accent); } .leise-balken { fill: var(--muted); }
.fliese { fill: var(--v-fliese); stroke: var(--v-fuge); stroke-width: 1; }
.bad-wand { fill: var(--v-bad-wand, #e9e4da); } .bad-nische { fill: var(--v-fuge); }
.bad-boden { fill: var(--v-bad-boden, #cdd4d7); } .bad-fuge { stroke: var(--v-staub); stroke-width: .8; opacity: .55; }
.dreck { fill: var(--v-dreck); opacity: 0.8; }
.schwamm { fill: var(--v-gold); } .schweiss { fill: var(--v-wasser); }
.stiel-linie { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.buerste { fill: var(--accent); } .borste { stroke: var(--accent-ink); stroke-width: 1.5; opacity: 0.7; }
.scheibe { fill: var(--muted); } .griffstueck { fill: var(--ink); }
.rolle { fill: var(--muted); } .rolle-innen { fill: var(--v-folie); }
.folie { fill: var(--v-folie); stroke: var(--muted); stroke-width: 1; }
.folie-falte { fill: none; stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.eimer { fill: var(--muted); } .eimer-deckel { fill: var(--ink); }
.gefaess { fill: var(--tile); stroke: var(--muted); stroke-width: 1.5; }
.deckel, .deckel-klein { fill: var(--v-deckel); stroke: var(--ink); stroke-width: 1.5; }
.pfeil { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.melone { fill: var(--v-gruen); } .melone-innen { fill: var(--v-warm); }
.kreis-pfad { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 4; }
.welle { fill: none; stroke: var(--v-wasser); stroke-width: 2; }
.schrank { fill: var(--tile); stroke: var(--muted); stroke-width: 1.5; } .schrank-tuer { stroke: var(--muted); }
.koffer { fill: var(--tile); } .koffer-rahmen { fill: none; stroke: var(--muted); stroke-width: 2; }
.buch { stroke: var(--ink); stroke-width: 1; } .buch-rand { stroke: var(--ink); opacity: 0.5; }
.b0 { fill: var(--accent); } .b1 { fill: var(--marker); } .b2 { fill: var(--v-warm); } .b3 { fill: var(--v-deckel); }
.reader { fill: var(--ink); } .reader-screen { fill: var(--surface); } .zeile { fill: var(--muted); }
.tipp { fill: none; stroke: var(--accent); stroke-width: 3; }
.nacht { fill: var(--band); } .glow { fill: var(--marker); opacity: 0.16; } .mond { fill: var(--marker); }
.akku-rahmen { fill: none; stroke: var(--band-ink); stroke-width: 2; } .akku-pol { fill: var(--band-ink); } .akku-fuell { fill: var(--accent); }

/* ---------- Animationen ----------
   Regel: Der normale Zustand ist das Ende der Animation. Die Animation läuft vom Start dorthin.
   --d = Verzögerung in Sekunden, --len = Dauer. */
.v-ein { animation: v-ein .5s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-ein { from { opacity: 0; } }
.v-weg { opacity: 0; animation: v-weg .45s ease backwards; animation-delay: var(--d, 2s); }
@keyframes v-weg { from { opacity: 1; } }
.v-hoch { animation: v-hoch .6s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-hoch { from { opacity: 0; transform: translateY(8px); } }
.v-pop { animation: v-pop .55s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: var(--d, 0s); }
@keyframes v-pop { from { opacity: 0; transform: scale(.5); } }
.v-takt { opacity: 0; animation: v-takt var(--len, 2s) ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-takt { 0% { opacity: 0; transform: scale(.85); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.95); } }
.v-geh { transform: translate(var(--dx, 0px), var(--dy, 0px)); animation: v-geh var(--len, 2s) ease-in-out backwards; animation-delay: var(--d, 0s); }
@keyframes v-geh { from { transform: translate(0, 0); } }
.v-dreh { animation: v-dreh 1.2s linear infinite; }
.v-dreh.schnell { animation-duration: .35s; }
@keyframes v-dreh { to { transform: rotate(360deg); } }
.v-wackel { animation: v-wackel .5s ease-in-out infinite alternate; }
@keyframes v-wackel { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.v-funkel { opacity: 0; animation: v-funkel 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes v-funkel { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
.v-fliess { animation: v-fliess .8s linear infinite; }
@keyframes v-fliess { to { stroke-dashoffset: -10; } }
.v-zeichne { stroke-dashoffset: 0; animation: v-zeichne var(--len, .4s) ease-out backwards; animation-delay: var(--d, 0s); }
@keyframes v-zeichne { from { stroke-dashoffset: 1; } }
.v-spur { animation: v-spur var(--len, 1s) linear backwards; animation-delay: var(--d, 0s); transform-origin: 0 50%; }
.v-spur.von-rechts { transform-origin: 100% 50%; }
@keyframes v-spur { from { transform: scaleX(0); } }
.v-fall { animation: v-fall .7s cubic-bezier(.3, .7, .4, 1.2) backwards; animation-delay: var(--d, 0s); }
@keyframes v-fall { from { opacity: 0; transform: translateY(-90px); } 30% { opacity: 1; } }
.v-flug { opacity: 0; transform: scale(.15); animation: v-flug .9s ease-in backwards; animation-delay: var(--d, 0s); }
@keyframes v-flug { from { opacity: 1; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(1); } 80% { opacity: 1; } }
.v-saug { opacity: 0; transform: translateY(-70px); animation: v-saug 1.3s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes v-saug { from { opacity: 1; transform: translateY(0); } }
.v-tropf { opacity: 0; transform: translateY(12px); animation: v-tropf 1s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes v-tropf { from { opacity: 1; transform: translateY(0); } }
.v-gluehen { animation: v-gluehen 1.6s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-gluehen { from { stroke: var(--muted); } }
.v-gold { animation: v-gold 1.4s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-gold { from { fill: var(--v-blass); } }
.v-glut { animation: v-glut 2s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-glut { from { opacity: 0; } }
.v-schrumpf { transform: scale(.8); opacity: .45; animation: v-schrumpf .8s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-schrumpf { from { transform: none; opacity: 1; } }
.v-schnapp { animation: v-schnapp .7s cubic-bezier(.2, .9, .3, 1.25) backwards; animation-delay: var(--d, 0s); }
@keyframes v-schnapp { from { transform: scale(.45); opacity: 0; } 40% { opacity: 1; } }
.v-knopf { animation: v-knopf .4s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-knopf { from { transform: translateX(-12px); } }
.v-faerb { animation: v-faerb .4s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-faerb { from { fill: var(--line); } }
.v-tipp { opacity: 0; transform: scale(2); animation: v-tipp .8s ease-out backwards; animation-delay: var(--d, 0s); }
@keyframes v-tipp { from { opacity: .9; transform: scale(.3); } }
.v-nacht { animation: v-nacht 1s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-nacht { from { opacity: 0; } }
.v-dampf { opacity: 0; transform: translateY(-26px); animation: v-dampf 2.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes v-dampf { from { opacity: .55; transform: translateY(0); } }
.v-spritz { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); animation: v-spritz .7s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes v-spritz { from { opacity: .9; transform: translate(0, 0); } }
.v-gluehen-weich { opacity: .8; animation: v-gluehen-weich 1.6s ease backwards; animation-delay: var(--d, 0s); }
@keyframes v-gluehen-weich { from { opacity: 0; } }
.v-fuell { animation: v-fuell var(--len, 1s) ease-out backwards; animation-delay: var(--d, 0s); }
@keyframes v-fuell { from { transform: scaleY(0); } }
.luftpartikel { fill: #ffb060; }
.dampf { fill: #fff; }
.dampf.ueber-hell { fill: var(--v-dampf, #fff); } /* Dampf vor hellem Hintergrund: im hellen Design grau, sonst sieht man ihn nicht */
.tropfen { fill: #7cc8ff; }

.buehne.pause svg * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .buehne svg * { animation: none !important; }
  .v-takt.v-letzter, .v-funkel { opacity: 1; }
  .v-takt:not(.v-letzter) { opacity: 0; }
}