/* Kino-Aussehen der Kursseite (freigegeben als Entwurf A, 11.11.2026).
   Alles hängt an #s-videokurse .kino, damit die App-eigenen Klassen
   (.balken, .zurueck, .btn) unberührt bleiben. Die Datei wird nach dem
   <style> in index.html geladen; Regeln gegen die Shell brauchen deshalb
   !important nur dort, wo index.html selbst Breiten setzt. */

/* Variablen im eigenen Namensraum, nie --petrol-hell überschreiben */
#s-videokurse{
  --k-bg:#0b1011; --k-bg-2:#121a1b; --k-flaeche:#182224;
  --k-text:#f3f6f6; --k-leise:rgba(243,246,246,.66); --k-sehr-leise:rgba(243,246,246,.42);
  --k-linie:rgba(255,255,255,.10);
  --k-petrol:#0A7266; --k-hell:#2cc1ae; --k-tief:#05403a; --k-gruen:#58CC02;
  --k-rand:clamp(16px,4.2vw,56px);
  --poster-b:clamp(140px,15.4vw,208px);
  --breit-b:clamp(232px,24vw,320px);
  --k-schrift:"Avenir Next","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#0b1011; color:#f3f6f6;
}
#s-videokurse .blattinhalt{max-width:none !important; padding:24px var(--k-rand) !important;}
#s-videokurse .blattinhalt:has(#vk-liste > .kino){padding:0 !important;}

/* Wurzel */
#s-videokurse .kino{position:relative; min-width:0; max-width:100%; overflow-x:clip; padding-bottom:48px;
  color:var(--k-text); font-family:var(--k-schrift); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; color-scheme:dark;}
#s-videokurse .kino *,#s-videokurse .kino *::before,#s-videokurse .kino *::after{box-sizing:border-box;}
#s-videokurse .kino a{color:inherit; text-decoration:none;}
#s-videokurse .kino img{display:block;}

/* Karten sind <button>. Der Reset trifft nie .vk-merk und .vk-haken,
   damit deren .an-Farben aus der App bleiben. */
:where(#s-videokurse .kino) button:not(.vk-merk):not(.vk-haken){all:unset; box-sizing:border-box; display:block;
  font:inherit; color:inherit; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent;}
#s-videokurse .kino button:focus-visible,#s-videokurse .kino a:focus-visible{outline:2px solid #2cc1ae; outline-offset:3px; border-radius:10px;}
#s-videokurse .kino .karte:focus-visible{border-radius:14px;}

/* Fortschritt (eigener Name, die App hat .balken) */
#s-videokurse .kino .k-balken{display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden;}
#s-videokurse .kino .k-balken>i{display:block; height:100%; background:var(--k-gruen); border-radius:inherit;}

/* Hero */
#s-videokurse .kino .hero{position:relative; min-height:min(72vh,640px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;}
#s-videokurse .kino .hero-bild{position:absolute; inset:0; z-index:-2; overflow:hidden;}
#s-videokurse .kino .hero-bild>img{width:100%; height:100%; object-fit:cover; object-position:center 40%;}
#s-videokurse .kino .hero-bild .cover{--gx:78%; --gy:30%;}
#s-videokurse .kino .hero-bild .cover .zeichen{width:min(520px,44%); right:6%; top:12%; opacity:.38;}
#s-videokurse .kino .hero-bild .cover::before{-webkit-mask-image:none; mask-image:none; opacity:.5;}
#s-videokurse .kino .hero-wand{position:absolute; left:28%; top:-18%; width:96%; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  transform:rotate(-7deg); opacity:.9;}
#s-videokurse .kino .hero-wand img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; filter:saturate(.75) brightness(.62);
  box-shadow:0 18px 40px rgba(0,0,0,.45);}
#s-videokurse .kino .hero-wand img:nth-child(4n+2),#s-videokurse .kino .hero-wand img:nth-child(4n+4){transform:translateY(34%);}
#s-videokurse .kino .hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
   linear-gradient(90deg,var(--k-bg) 0%,rgba(11,16,17,.97) 30%,rgba(11,16,17,.7) 52%,rgba(11,16,17,.2) 100%),
   linear-gradient(0deg,var(--k-bg) 0%,rgba(11,16,17,0) 42%),
   radial-gradient(120% 90% at 0% 100%,rgba(10,114,102,.35),transparent 60%);}
#s-videokurse .kino .hero-inhalt{width:100%; max-width:640px; padding:48px var(--k-rand) clamp(40px,6vh,64px);}
#s-videokurse .kino .hero-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; font-size:13px; color:var(--k-leise); font-weight:500;}
#s-videokurse .kino .hero-meta{display:inline-flex; align-items:center; gap:10px; white-space:nowrap;}
#s-videokurse .kino .punkt{width:3px; height:3px; border-radius:50%; background:var(--k-sehr-leise);}
#s-videokurse .kino .hero-titel{margin:0; padding-bottom:.08em; font-size:clamp(34px,5.2vw,62px); line-height:1.06; font-weight:800; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere; hyphens:auto;}
#s-videokurse .kino .hero-satz{margin:16px 0 0; font-size:clamp(15px,1.35vw,18px); line-height:1.5; color:var(--k-leise); max-width:520px; text-wrap:pretty;}
#s-videokurse .kino .hero-fort{display:flex; align-items:center; gap:12px; margin-top:22px; max-width:420px; font-size:13px; color:var(--k-leise); font-weight:500;}
#s-videokurse .kino .hero-fort .k-balken{flex:1; height:4px;}

/* Marker */
#s-videokurse .kino .marker{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; background:rgba(10,114,102,.28); color:#7fe3d5; box-shadow:inset 0 0 0 1px rgba(44,193,174,.38);}
#s-videokurse .kino .marker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--k-hell); box-shadow:0 0 10px var(--k-hell);}

/* Knöpfe */
#s-videokurse .kino .knoepfe{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
#s-videokurse .kino .knopf{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 26px; border-radius:12px;
  font-size:16px; font-weight:700; cursor:pointer; transition:transform .15s,background .15s;}
#s-videokurse .kino .knopf:active{transform:scale(.97);}
#s-videokurse .kino .knopf.haupt{background:#fff; color:#0b1011;}
#s-videokurse .kino .knopf.haupt:hover{background:#dff5f1;}
#s-videokurse .kino .knopf.neben{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
#s-videokurse .kino .knopf.neben:hover{background:rgba(255,255,255,.22);}
#s-videokurse .kino .knopf svg{width:18px; height:18px; flex:none;}

/* Reihen */
#s-videokurse .kino .reihe{margin-top:clamp(26px,3.4vw,42px); scroll-margin-top:24px;}
#s-videokurse .kino .reihe-kopf{display:flex; align-items:baseline; gap:12px; padding:0 var(--k-rand); margin-bottom:14px;}
#s-videokurse .kino .reihe-kopf h2{margin:0; font-size:clamp(19px,1.7vw,23px); font-weight:700; letter-spacing:-.01em; color:var(--k-text);}
#s-videokurse .kino .reihe-kopf .zahl{font-size:13px; color:var(--k-sehr-leise); font-weight:500;}
#s-videokurse .kino .reihe-kopf .pfeile{margin-left:auto; display:flex; gap:8px;}
#s-videokurse .kino .pfeil{width:34px; height:34px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.08); transition:background .15s,opacity .15s;}
#s-videokurse .kino .pfeil:hover{background:rgba(255,255,255,.18);}
#s-videokurse .kino .pfeil:disabled{opacity:.28; cursor:default; background:rgba(255,255,255,.05);}
#s-videokurse .kino .pfeil svg{width:16px; height:16px;}
#s-videokurse .kino .reihe-spur{display:flex; gap:clamp(10px,1.1vw,16px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--k-rand); padding:6px var(--k-rand) 14px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;}
#s-videokurse .kino .reihe-spur::-webkit-scrollbar{display:none;}
#s-videokurse .kino .reihe-spur>*{scroll-snap-align:start; flex:none;}

/* Poster-Karte 2:3 */
#s-videokurse .kino .karte{position:relative; display:block; width:var(--poster-b); aspect-ratio:2/3; border-radius:14px; overflow:hidden; background:var(--k-flaeche);
  box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s; isolation:isolate;}
@media (hover:hover){
  #s-videokurse .kino .karte:hover,#s-videokurse .kino .karte-breit:hover .bildrahmen{transform:translateY(-4px) scale(1.03);
    box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 0 2px var(--k-hell);}
}
#s-videokurse .kino .karte::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,.08) 40%,rgba(5,9,10,.86) 70%,rgba(5,9,10,.97) 100%);}
#s-videokurse .kino .karte .etikett{position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px; background:rgba(8,12,13,.62); color:var(--akzent,rgba(255,255,255,.88));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
#s-videokurse .kino .karte .unten{position:absolute; left:0; right:0; bottom:0; padding:12px 12px 13px;}
#s-videokurse .kino .karte-titel{margin:0; font-size:clamp(14px,1.28vw,17px); line-height:1.2; font-weight:700; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance;}
#s-videokurse .kino .karte .meta{margin-top:6px; font-size:12px; color:var(--k-leise); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s-videokurse .kino .karte .k-balken{margin-top:9px;}

/* Einheitliches Titelbild (Cover) */
#s-videokurse .kino .cover{position:absolute; inset:0; overflow:hidden; isolation:isolate;
  background:radial-gradient(110% 80% at var(--gx,80%) var(--gy,8%),color-mix(in srgb,var(--akzent,#2cc1ae) 62%,transparent) 0%,color-mix(in srgb,var(--akzent,#2cc1ae) 14%,transparent) 45%,transparent 72%),
    linear-gradient(165deg,#172224 0%,#0c1213 100%);}
#s-videokurse .kino .cover::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.7;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 22px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%); mask-image:linear-gradient(180deg,#000 0%,transparent 70%);}
#s-videokurse .kino .cover .cbild{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:var(--bx,50%) 30%;
  filter:grayscale(1) contrast(1.2) brightness(.85) blur(2.6px); mix-blend-mode:luminosity; opacity:.38;}
#s-videokurse .kino .cover .cbild.yt{transform:scale(1.36);}
#s-videokurse .kino .cover.mitbild::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,12,13,.15) 0%,rgba(8,12,13,0) 30%,rgba(8,12,13,.55) 70%,rgba(8,12,13,.9) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--akzent,#2cc1ae) 38%,transparent),transparent 65%);}
#s-videokurse .kino .cover .zeichen{position:absolute; width:var(--zg,74%); right:var(--zr,-14%); top:var(--zt,-4%); color:var(--akzent,#2cc1ae); opacity:.30; transform:rotate(var(--dreh,0deg));}
#s-videokurse .kino .cover.mitbild .zeichen{opacity:.16;}
#s-videokurse .kino .cover .zeichen svg{width:100%; height:auto; display:block;}
#s-videokurse .kino .cover .ctext{position:absolute; left:14px; right:14px; bottom:14px;}
#s-videokurse .kino .cover .clabel{display:block; font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--akzent,#2cc1ae); margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s-videokurse .kino .cover .ctitel{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:clamp(15px,1.45vw,19px); line-height:1.16;
  font-weight:800; letter-spacing:-.01em; color:#fff; text-wrap:balance;}
#s-videokurse .kino .cover .ctitel.ganz{-webkit-line-clamp:4;}

/* Breite Karte 16:9 (Weiterschauen, Lektionen) */
#s-videokurse .kino .karte-breit{display:block; width:var(--breit-b); min-width:0;}
#s-videokurse .kino .karte-breit .bildrahmen{display:block; width:100%; padding:0; border:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--k-flaeche);
  box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;}
#s-videokurse .kino .karte-breit .bildrahmen>img{width:100%; height:100%; object-fit:cover;}
#s-videokurse .kino .karte-breit .bildrahmen .ctext{left:62px; right:74px; bottom:13px;}
#s-videokurse .kino .karte-breit .bildrahmen .ctitel{font-size:clamp(14px,1.25vw,17px); -webkit-line-clamp:3;}
#s-videokurse .kino .karte-breit .spiel{position:absolute; left:12px; bottom:12px; z-index:1; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:#0b1011; box-shadow:0 4px 14px rgba(0,0,0,.4);}
#s-videokurse .kino .karte-breit .spiel svg{width:15px; height:15px; margin-left:2px;}
#s-videokurse .kino .karte-breit .dauer{position:absolute; right:10px; bottom:10px; z-index:1; font-size:12px; font-weight:700; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.66); color:#fff;}
#s-videokurse .kino .karte-breit .bildrahmen .k-balken{position:absolute; left:0; right:0; bottom:0; z-index:1; border-radius:0; height:4px;}
#s-videokurse .kino .karte-breit .nummer{position:absolute; top:10px; left:10px; z-index:1; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px; background:rgba(10,114,102,.9); color:#fff;}
#s-videokurse .kino .karte-breit h3{margin:11px 2px 0; font-size:15px; line-height:1.3; font-weight:700; color:var(--k-text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
#s-videokurse .kino .karte-breit .ort{margin:4px 2px 0; font-size:12.5px; color:var(--k-sehr-leise); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Zeile unter einer Lektionskarte: Dauer links, Merken und Erledigt rechts.
   .vk-merk und .vk-haken behalten ihr App-Aussehen, hier nur Anordnung. */
#s-videokurse .kino .k-zeile{display:flex; align-items:center; gap:6px; min-width:0; min-height:34px; margin:8px 2px 0;
  font-size:12.5px; color:var(--k-sehr-leise); font-weight:500;}
#s-videokurse .kino .k-zeile>:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#s-videokurse .kino .k-zeile .vk-merk,#s-videokurse .kino .k-zeile .vk-haken{height:34px; flex:none;}
#s-videokurse .kino .k-zeile .vk-merk{margin-left:auto;}

/* Modulseite */
#s-videokurse .kino .modulseite{padding:24px var(--k-rand) 40px;}
#s-videokurse .kino .modulseite h1{margin:6px 0 6px; font-size:clamp(28px,3.6vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.02em; color:var(--k-text); overflow-wrap:anywhere; hyphens:auto;}
#s-videokurse .kino .modulseite .unter{color:var(--k-leise); margin:0 0 6px; max-width:640px;}
#s-videokurse .kino .abschnitt{margin-top:34px;}
#s-videokurse .kino .abschnitt h2{margin:0 0 4px; font-size:19px; font-weight:700; color:var(--k-text);}
#s-videokurse .kino .abschnitt p{margin:0 0 14px; color:var(--k-sehr-leise); font-size:13.5px;}
#s-videokurse .kino .raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--breit-b)),1fr)); gap:22px 16px;}
#s-videokurse .kino .raster .karte-breit{width:auto;}
#s-videokurse .kino .raster:has(> .karte){grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--poster-b)),1fr));}
#s-videokurse .kino .raster > .karte{width:auto;}

/* Ab 1024px: Kursseite volle Breite, rechte Spalte weg (Muster wie beim Player) */
@media (min-width:1024px){
  #shell:has(#s-videokurse.aktiv) #rail{display:none !important;}
  #shell:has(#s-videokurse.aktiv) #app{max-width:none !important; width:auto !important; flex:1 1 auto !important;
    min-width:0 !important; margin-left:0 !important; margin-right:0 !important;}
}

/* Handy */
@media (max-width:640px){
  #s-videokurse .kino .hero{min-height:0; display:block;}
  #s-videokurse .kino .hero-bild{position:relative; inset:auto; height:62vw; min-height:230px; max-height:340px;}
  #s-videokurse .kino .hero-bild .cover .zeichen{width:46%; right:8%; top:14%;}
  #s-videokurse .kino .hero-wand{left:-12%; top:-30%; width:150%; grid-template-columns:repeat(3,1fr); gap:8px; transform:rotate(-7deg);}
  #s-videokurse .kino .hero-wand img{border-radius:7px;}
  #s-videokurse .kino .hero-wand img:nth-child(4n+2),#s-videokurse .kino .hero-wand img:nth-child(4n+4){transform:none;}
  #s-videokurse .kino .hero-wand img:nth-child(3n+2){transform:translateY(30%);}
  #s-videokurse .kino .hero::before{background:linear-gradient(0deg,var(--k-bg) 0%,var(--k-bg) calc(100% - 62vw + 40px),rgba(11,16,17,.35) calc(100% - 62vw + 140px),rgba(11,16,17,.55) 100%);}
  #s-videokurse .kino .hero-inhalt{padding:0 var(--k-rand) 8px; margin-top:-56px; position:relative;}
  #s-videokurse .kino .hero-zeile{margin-bottom:12px; row-gap:12px;}
  #s-videokurse .kino .hero-satz{margin-top:12px;}
  #s-videokurse .kino .knoepfe{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;}
  #s-videokurse .kino .knopf{height:48px; padding:0 14px; font-size:15px; min-width:0;}
  #s-videokurse .kino .karte .unten{padding:10px 10px 11px;}
  #s-videokurse .kino .karte .etikett{top:8px; left:8px; font-size:9.5px; padding:3px 6px; letter-spacing:.05em; white-space:nowrap; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis;}
  #s-videokurse .kino .karte .meta{font-size:11px;}
  #s-videokurse .kino .reihe-kopf .pfeile{display:none;}
  #s-videokurse .kino .reihe-kopf{margin-bottom:10px;}
}
@media (prefers-reduced-motion:reduce){
  #s-videokurse .kino *{transition:none !important; animation:none !important;}
}