/* Live player for "Ein Erklärvideo über Erklärvideos" (ten styles, owner 23.10.2026). The voice is the clock; scenes are
   drawn in SVG/HTML with CSS animations that the player holds paused and sets to the right moment (player.js). */
@font-face { font-family: 'Caveat Brush'; font-weight: 400; font-display: swap; src: url('/fonts/ginger/CaveatBrush-400-latin.woff2') format('woff2'); }
.evs { --navy: #0a1430; --cyan: #46BFBA; --gelb: #F2B705; position: relative; width: 100%; }
.evs-buehne { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; corner-shape: superellipse(2); background: #0a1430; isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(10,20,48,.55); container-type: inline-size; user-select: none; }
.evs-szenen { position: absolute; inset: 0; background: #0a1430 url('/erklaervideo-stile/schreibtisch.webp') center / cover; }
.evs.bereit .evs-szenen { background: #0a1430; }
.evs.spielt .evs-szenen { cursor: pointer; }
.evs-szene { position: absolute; inset: 0; visibility: hidden; }
.evs-szene.an { visibility: visible; }
.evs-szene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.evs-szene, .evs-szene * { animation-play-state: paused !important; }
.evs-szene video, .evs-szene .evs-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the switch between two styles: a slanted band sweeps across and hides the cut */
.evs-wisch { position: absolute; z-index: 5; top: -10%; bottom: -10%; left: -12cqw; width: 12cqw; visibility: hidden; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, #0a1430 0 50%, #46BFBA 50% 86%, #F2B705 86% 100%); }

/* caption card top left: which style is on screen */
.evs-karte { position: absolute; z-index: 6; left: 2.2cqw; top: 2.2cqw; display: flex; flex-direction: column; gap: .2cqw; padding: 1cqw 1.4cqw 1.05cqw; border-radius: 1.2cqw;
  background: rgba(255,255,255,.9); box-shadow: 0 .6cqw 1.6cqw -.6cqw rgba(10,20,48,.35); color: #0a1430; transition: opacity .25s ease; }
.evs-karte small { font-size: 1.05cqw; font-weight: 700; letter-spacing: .02em; color: #0b7470; }
.evs-karte b { font-size: 1.7cqw; font-weight: 800; line-height: 1.1; }
.evs-logo { position: absolute; z-index: 6; right: 2.2cqw; top: 2.4cqw; width: 13cqw; opacity: .9; transition: opacity .25s ease; }

/* subtitles */
.evs-ut { position: absolute; z-index: 6; left: 0; right: 0; bottom: 3.2cqw; width: fit-content; max-width: 82%; margin: 0 auto; padding: .7cqw 1.4cqw; border-radius: .9cqw;
  background: rgba(10,20,48,.82); color: #ffffff; font-size: 1.9cqw; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
.evs-ut:empty, .evs.ohne-ut .evs-ut { display: none; }
.evs:not([data-gestartet]) .evs-ut, .evs:not([data-gestartet]) .evs-karte { visibility: hidden; }

/* start screen and end screen */
.evs-start { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: #ffffff; font: inherit;
  background: radial-gradient(60% 70% at 50% 45%, rgba(10,20,48,.25), rgba(10,20,48,.7)); }
.evs-start-innen { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.evs-start i { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #46BFBA; box-shadow: 0 0 0 1.4cqw rgba(70,191,186,.25); transition: transform .25s ease; }
.evs-start:hover i { transform: scale(1.06); }
.evs-start i svg { width: 3.4cqw; height: 3.4cqw; margin-left: .5cqw; fill: #0a1430; }
.evs-start b { font-size: 2.4cqw; font-weight: 800; text-shadow: 0 .2cqw 1cqw rgba(0,0,0,.4); }
.evs-start small { font-size: 1.4cqw; font-weight: 600; opacity: .85; }
.evs-start[hidden] { display: none; }
.evs-start:focus-visible { outline: 3px solid #46BFBA; outline-offset: -6px; }

/* control bar */
.evs-leiste { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 10px; border-radius: 16px; corner-shape: superellipse(2); background: #F2F4F7; }
.evs-k { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; corner-shape: superellipse(2); cursor: pointer; background: #ffffff; color: #0a1430;
  box-shadow: 0 0 0 1px rgba(10,20,48,.08); transition: background .2s ease; }
.evs-k:hover { background: #e7f6f5; }
.evs-k:focus-visible, .evs-zeitleiste:focus-visible { outline: 2px solid #007398; outline-offset: 2px; }
.evs-k svg { width: 18px; height: 18px; fill: currentColor; }
.evs-k.ut-an { background: #0a1430; color: #ffffff; }
.evs-k .ton-aus, .evs-k.aus .ton-an { display: none; }
.evs-k.aus .ton-aus { display: block; }
.evs-k[hidden] { display: none; }
.evs-karte:empty { display: none; }
.evs.fertig .evs-start { background: none; place-items: end end; padding: 0 2.2cqw 2.2cqw 0; }
.evs.fertig .evs-start i { width: 3.4cqw; height: 3.4cqw; min-width: 30px; min-height: 30px; box-shadow: none; }
.evs.fertig .evs-start i svg { width: 1.8cqw; height: 1.8cqw; min-width: 16px; min-height: 16px; margin: 0; }
.evs.fertig .evs-start b { font-size: max(13px, 1.5cqw); text-shadow: none; }
.evs.fertig .evs-start-innen { flex-direction: row; gap: .9cqw; padding: .6cqw 1.6cqw .6cqw .6cqw; border-radius: 1.6cqw; background: rgba(10,20,48,.88); }
.evs.fertig .evs-start small { display: none; }

/* full screen: stage and control bar centred on black */
.evs:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; background: #000; }
.evs:fullscreen .evs-buehne, .evs:fullscreen .evs-leiste { width: min(100%, calc((100dvh - 100px) * 16 / 9)); }
.evs:fullscreen .evs-buehne { border-radius: 0; }
.evs-zeit { flex: none; min-width: 84px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #4a5a70; }
.evs-zeitleiste { flex: 1; min-width: 60px; accent-color: #0b7470; }
@media (max-width: 560px) { .evs-leiste { gap: 8px; } .evs-zeit { min-width: 0; font-size: 12px; } .evs-k { width: 36px; height: 36px; } }

/* ── shared motion (held paused; the player sets the time) ── */
.evs-fb { transform-box: fill-box; transform-origin: center; }
@keyframes evs-pop { from { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes evs-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes evs-weg { from { opacity: 1; } to { opacity: 0; } }
@keyframes evs-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes evs-rein { from { opacity: 0; transform: translate(var(--vx, 0), var(--vy, 30px)); } to { opacity: 1; transform: none; } }
@keyframes evs-fallen { from { transform: none; opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@keyframes evs-hin { from { transform: none; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg)) scale(var(--s, 1)); } }
@keyframes evs-wackeln { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes evs-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--p, 1.12)); } }
@keyframes evs-zoom { from { transform: scale(var(--z0, 1)); } to { transform: scale(var(--z1, 1.08)); } }
@keyframes evs-stempel { from { opacity: 0; transform: scale(2.2) rotate(var(--rot, -10deg)); } 70% { opacity: 1; transform: scale(.94) rotate(var(--rot, -10deg)); } to { opacity: 1; transform: rotate(var(--rot, -10deg)); } }
@keyframes evs-schweben { from { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(var(--dy, -120px)); opacity: 0; } }
@keyframes evs-rollen { from { transform: translateX(var(--x0, -300px)) rotate(0deg); } to { transform: translateX(var(--x1, 1900px)) rotate(var(--rot, 720deg)); } }
@keyframes evs-blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* small screens: captions and subtitles keep a readable size */
.evs-karte small { font-size: max(8px, 1.05cqw); }
.evs-karte b { font-size: max(11px, 1.7cqw); }
.evs-ut { font-size: max(12px, 1.9cqw); }
@container (max-width: 620px) {
  .evs-karte { left: 8px; top: 8px; padding: 5px 8px 6px; border-radius: 8px; }
  .evs-ut { bottom: 6px; max-width: 94%; padding: 3px 8px; border-radius: 6px; line-height: 1.3; }
  .evs-start b { font-size: 15px; }
  .evs-start small { font-size: 11px; }
  .evs-start i { width: 52px; height: 52px; }
  .evs-start i svg { width: 20px; height: 20px; }
}

/* note on AI use and transcript under the player */
.evs-hinweis { margin: 10px 4px 0; font-size: 12.5px; line-height: 1.5; color: #6b7a90; }
.evs-text { margin-top: 6px; font-size: 15px; line-height: 1.65; }
.evs-text summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; cursor: pointer; font-weight: 700; list-style: none; }
.evs-text summary::-webkit-details-marker { display: none; }
.evs-text summary::before { content: '›'; font-size: 20px; line-height: 1; transition: rotate .2s ease; }
.evs-text[open] summary::before { rotate: 90deg; }
.evs-text summary:focus-visible { outline: 2px solid #46BFBA; outline-offset: 2px; border-radius: 6px; }
.evs-text p { max-width: 70ch; margin: 6px 4px 0; }