/* Teil film (Hülle section#film baut die Seite), Leiste und Endbild baut js/film.js. Tippziele mindestens 44 px */

.k-film,.k-film *,.k-film *::before,.k-film *::after{box-sizing:border-box}
.k-film{--film-k:clamp(14px,1.8vw,26px);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--luft-3);color:var(--grau)}
.k-film__kicker{display:flex;align-items:center;gap:12px;margin:0 0 var(--luft-3);font-family:var(--f-kicker);font-weight:600;font-size:var(--t-kicker);line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.k-film__kicker::before{content:"";flex:0 0 auto;width:26px;height:12px;background:currentColor;clip-path:polygon(0 0,calc(100% - 9.2px) 0,100% 100%,9.2px 100%)}
.k-film__titel{margin:0;font-family:var(--f-marke);font-weight:400;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.003em;text-wrap:balance;max-width:24ch;color:var(--deep)}

.k-film__rahmen{position:relative;margin:0;aspect-ratio:16/9;width:100%;align-self:start;background:var(--deep);overflow:hidden;clip-path:polygon(0 0,calc(100% - var(--film-k) * var(--steigung)) 0,100% var(--film-k),100% 100%,calc(var(--film-k) * var(--steigung)) 100%,0 calc(100% - var(--film-k)))}
.k-film--vollbild .k-film__rahmen{clip-path:none}
.k-film--ruhig .k-film__rahmen{cursor:none}
.k-film__video{display:block;width:100%;height:100%;object-fit:cover;background:var(--deep)}
.k-film--laeuft .k-film__video{object-fit:contain}
/* Untertitel nur in der eigenen Zeile */
.k-film__video::-webkit-media-text-track-container{display:none}
.k-film__video::cue{color:transparent;background:transparent;text-shadow:none}
.k-film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-film--laeuft .k-film__poster,.k-film--laeuft .k-film__start{display:none}

.k-film__start,.k-film__k,.k-film__kap,.k-film__ek,.k-film__video{touch-action:manipulation}
.k-film__start{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 16px clamp(14px,8%,40px);border:0;margin:0;background:none;cursor:pointer;color:#fff;font:inherit}
.k-film__knopf,.k-film__ek{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-text);font-weight:700;line-height:1.2}
.k-film__knopf{min-height:clamp(46px,2.2rem + 1vw,60px);padding:0 22px 0 16px;font-size:clamp(.9375rem,.88rem + .2vw,1.0625rem);letter-spacing:.01em;white-space:nowrap}
.k-film__knopf::before,.k-film__ek::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);transition:background-color .2s;clip-path:polygon(0 0,calc(100% - 12.3px) 0,100% 16px,100% 100%,12.3px 100%,0 calc(100% - 16px))}
.k-film__knopf svg{width:1.5em;height:1.5em;flex:0 0 auto;fill:currentColor}
.k-film__dauer{font-weight:500;color:var(--signal-hell)}
.k-film__start:focus-visible{outline:none}
.k-film__start:focus-visible .k-film__knopf,.k-film__ek:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}

/* Leiste: aus über opacity, Grund unter der Bahn deckend (Spur ab 4,6:1), im Vollbild sichere Ränder */
.k-film--vollbild{--st:env(safe-area-inset-top);--sr:env(safe-area-inset-right);--sb:env(safe-area-inset-bottom);--sl:env(safe-area-inset-left)}
.k-film__leiste{--lx:clamp(8px,2vw,22px);position:absolute;inset:auto 0 0;z-index:3;display:none;padding:0 calc(var(--lx) + var(--sr,0px)) calc(clamp(6px,1.2vw,14px) + var(--sb,0px)) calc(var(--lx) + var(--sl,0px));color:#fff;background:linear-gradient(transparent,rgba(3,25,38,.9) 16px);transition:opacity .3s,transform .3s}
.k-film--laeuft .k-film__leiste{display:block}
.k-film--ruhig .k-film__leiste,.k-film--ende .k-film__leiste{opacity:0;transform:translateY(8px);pointer-events:none}
.k-film__spur{position:relative;height:44px;margin:0 6px;cursor:pointer;touch-action:none}
.k-film__bahn{position:absolute;left:0;right:0;top:20px;height:4px;background:rgba(255,255,255,.5);transition:height .15s,top .15s}
.k-film__spur:hover .k-film__bahn,.k-film__spur:focus-visible .k-film__bahn{top:19px;height:6px}
.k-film__voll{position:absolute;inset:0;background:var(--signal-hell);transform:scaleX(0);transform-origin:0 50%}
.k-film__marke{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--deep)}
.k-film__griff{position:absolute;top:14px;left:0;width:13px;height:16px;margin-left:-6px;background:#fff;pointer-events:none;clip-path:polygon(0 0,calc(100% - 3.7px) 0,100% 4.8px,100% 100%,3.7px 100%,0 calc(100% - 4.8px))}
.k-film__spur:focus-visible{outline:3px solid var(--signal-hell);outline-offset:2px}
.k-film__knoepfe{display:flex;align-items:center;gap:2px}
.k-film__frei{flex:1 1 auto}
.k-film__k{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;margin:0;background:none;color:#fff;cursor:pointer}
.k-film__k svg,.k-film__ek svg{width:24px;height:24px;fill:currentColor}
.k-film svg .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.k-film__k:focus-visible{outline:3px solid var(--signal-hell);outline-offset:-3px}
.k-film__k[aria-pressed="true"]{color:var(--signal-hell)}
.k-film__k--ut[aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--signal-hell)}
.k-film__zeit{min-width:0;overflow:hidden;margin-left:6px;font-family:var(--f-text);font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.k-film__ut{position:absolute;left:50%;bottom:calc(clamp(80px,6vw + 66px,92px) + var(--sb,0px));z-index:2;width:max-content;max-width:88%;transform:translateX(-50%);text-align:center;transition:bottom .3s;pointer-events:none}
.k-film--ruhig .k-film__ut{bottom:calc(clamp(10px,5%,32px) + var(--sb,0px))}
.k-film [hidden]{display:none}
.k-film__ut span{padding:3px 10px;font-family:var(--f-text);font-weight:600;font-size:clamp(.8125rem,.7rem + .55vw,1.25rem);line-height:1.75;white-space:pre-line;color:#fff;background:var(--deep-80);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k-film--vollbild .k-film__ut span{font-size:clamp(1.125rem,.8rem + 1.4vw,2rem)}

.k-film__ende{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,24px);padding:16px;margin:var(--st,0) var(--sr,0) var(--sb,0) var(--sl,0);text-align:center;color:#fff;background:rgba(3,25,38,.86)}
.k-film__ende-satz{margin:0;max-width:30ch;font-family:var(--f-marke);font-size:clamp(1rem,.8rem + 1.1vw,1.75rem);line-height:1.2}
.k-film__ende-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:0}
.k-film__ek{gap:8px;min-height:44px;padding:0 18px;border:0;font-size:.9375rem;color:#fff;text-decoration:none;cursor:pointer;background:none}
.k-film__termin::before{background:var(--signal)}
.k-film__nochmal::before{background:rgba(255,255,255,.16)}
@media (hover:hover){
  .k-film__k:hover{color:var(--signal-hell)}
  .k-film__start:hover .k-film__knopf::before,.k-film__termin:hover::before{background:var(--signal-dunkel)}
  .k-film__start:hover .k-film__dauer{color:var(--weiss)}
  .k-film__nochmal:hover::before{background:rgba(255,255,255,.28)}
  .k-film__kap:hover{background:var(--signal-10)}
}

@media (max-width:479px){
  .k-film__ut{max-width:96%}.k-film__ut span{font-size:.75rem}.k-film__ende{gap:6px;padding:6px 16px}.k-film__ende-satz{font-size:.8125rem;line-height:1.15}.k-film__ek{padding:0 12px;font-size:.875rem}.k-film__ek svg{display:none}
}

/* Kapitel: 360 bis 1023 px drei gleich große Felder (Knopf füllt die Zelle), sonst Zeilen */
.k-film__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.k-film__liste > li{display:flex;min-width:0}
.k-film__kap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:64px;padding:10px 12px 12px;border:0;margin:0;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--signal-20);font:inherit;text-align:left;color:var(--deep);cursor:pointer;transition:background-color .2s}
.k-film__kap-zeit{font-family:var(--f-kicker);font-weight:600;font-size:.9375rem;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--signal)}
.k-film__kap-titel{font-family:var(--f-text);font-weight:700;font-size:clamp(.9375rem,.85rem + .35vw,1.25rem);line-height:1.25}
.k-film__kap-lauf{position:absolute;inset:auto 0 0;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%}
.k-film__kap--an{background:var(--signal-10);box-shadow:inset 0 0 0 1px var(--signal)}
.k-film__kap--an .k-film__kap-titel{color:var(--signal-dunkel)}
.k-film__kap:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
@media (max-width:359px),(min-width:1024px){
  .k-film__liste{grid-template-columns:minmax(0,1fr)}.k-film__kap{flex-direction:row;align-items:center;gap:16px;min-height:52px}.k-film__kap-zeit{flex:0 0 3.2em}
}
@media (max-width:359px){.k-film__zeit{font-size:.75rem;margin-left:2px}}
@media (min-width:1024px){
  .k-film{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"film kopf" "film kapitel";column-gap:clamp(32px,3vw,48px)}
  .k-film__rahmen{grid-area:film}
  .k-film__kopf{grid-area:kopf}
  .k-film__kapitel{grid-area:kapitel;align-self:end}
  .k-film__liste{gap:0;border-top:1px solid var(--signal-20)}
  .k-film__kap{gap:20px;min-height:60px;padding:12px 16px;background:none;box-shadow:inset 0 -1px 0 var(--signal-20)}
  .k-film__kap-zeit{font-size:1rem}
  .k-film__kap--an{background:var(--signal-10);box-shadow:inset 3px 0 0 var(--signal),inset 0 -1px 0 var(--signal-20)}
}

/* Einblendung nur mit Bewegung */
.k-film--bewegt :is(.k-film__kopf,.k-film__rahmen,.k-film__kapitel){opacity:0;transform:translateY(20px);transition:opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.k-film--bewegt .k-film__rahmen{transition-delay:.08s}
.k-film--bewegt .k-film__kapitel{transition-delay:.16s}
.k-film--sichtbar :is(.k-film__kopf,.k-film__rahmen,.k-film__kapitel){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .k-film--bewegt :is(.k-film__kopf,.k-film__rahmen,.k-film__kapitel){opacity:1;transform:none}
  .k-film *,.k-film *::before{transition:none!important}
}