/* ============================================================================
   Coffee Festival Europe — KINO V · Schnitt und Sucher
   (Stand 10.09.2026, Fassung 1; Skript: assets/js/kino5.js)

   Die Abschnitte, die nach KINO IV noch reine Typografie waren, bekommen
   ihre Ausarbeitung:
     Fliesstext (.prose)   Kapitelziffern vor jeder Ueberschrift, Stillbild
                           unter dem Verzeichnis (kino5.js), Lesekante am
                           ersten Absatz
     Fragen (.faq)         Nummern vor den Fragen, geoeffnete Frage mit
                           Ember-Kante und Glutschein, Antwort mit Linie
     Kennzahlen (.kpi)     Messlinie unter der Zahl, die beim Eintreffen
                           auf ihren Wert laeuft
     Laufband (.mq)        Perforation oben und unten wie ein Filmstreifen,
                           laeuft mit
     Helle Abschnitte      Papierkorn, Filmkante oben und unten, Eckmarken
     Sucher (.k5-vf)       REC-Punkt und Timecode auf Klebesatz-Bild und
                           Bildband
     Aufruf (.kapply)      Kulisse hinter dem Kasten
     Bildstrecke, Mosaik   Bildnummer beim Zeigen
   Anfangszustaende haengen an html.k5; ohne Skript steht alles sofort da.
   Bewegt werden nur transform, opacity und background-position.
   Telefon: Perforation und Kennzahlenlinie bleiben (billig), alles andere
   hier ist dort aus — Sucher, Stillbild, Papierkorn.
   ========================================================================== */

:root{--k5-out:cubic-bezier(.16,1,.3,1)}

/* ---- 1 · Fliesstext ------------------------------------------------------------ */
.prose__body{counter-reset:k5kap}
html.k5 .prose__body h2{counter-increment:k5kap}
html.k5 .prose__body h2::before{content:counter(k5kap,decimal-leading-zero) " —";display:block;margin-bottom:.45em;
  font-family:var(--f-mono);font-weight:400;font-size:.66rem;letter-spacing:.18em;color:var(--ember);
  opacity:0;transform:translate3d(-8px,0,0);transition:opacity .7s var(--k5-out),transform .9s var(--k5-out)}
html.k5 .prose__body h2.kn-seen::before,html.k5 .prose.kn-in .prose__body h2::before,html.k5 .prose__body.is-in h2::before{opacity:1;transform:none}
/* Lesekante: der erste Absatz traegt links eine haarfeine Ember-Linie */
html.k5 .prose__body > h2:first-child + p{position:relative;padding-left:clamp(14px,1.4vw,20px)}
html.k5 .prose__body > h2:first-child + p::before{content:'';position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:1px;
  background:linear-gradient(180deg,var(--ember),rgba(226,85,30,0));transform:scaleY(0);transform-origin:0 0;transition:transform 1.2s var(--k5-out) .4s}
html.k5 .prose.kn-in .prose__body > h2:first-child + p::before,html.k5 .prose__body.is-in > h2:first-child + p::before{transform:scaleY(1)}

/* Stillbild unter dem Verzeichnis */
html.k5 .k5-still{position:relative;margin:clamp(18px,2.4vw,30px) 0 0;border-radius:12px;overflow:hidden;
  background:rgba(244,238,228,.03);border:1px solid rgba(244,238,228,.1);
  opacity:0;transform:translate3d(0,10px,0);transition:opacity 1s var(--k5-out) .3s,transform 1.1s var(--k5-out) .3s}
html.k5 .prose.kn-in .k5-still,html.k5 .k5-still.is-in{opacity:1;transform:none}
html.k5 .k5-still__im{display:block;aspect-ratio:4/3;overflow:hidden}
html.k5 .k5-still__im img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block;
  filter:saturate(.9);transform:scale(1.04);transition:transform 1.6s var(--k5-out)}
html.k5 .k5-still:hover .k5-still__im img{transform:scale(1)}
html.k5 .k5-still > i{position:absolute;width:11px;height:11px;border:1px solid rgba(226,85,30,.7);pointer-events:none}
html.k5 .k5-still > i:nth-of-type(1){left:9px;top:9px;border-right:0;border-bottom:0}
html.k5 .k5-still > i:nth-of-type(2){right:9px;top:9px;border-left:0;border-bottom:0}
html.k5 .k5-still > i:nth-of-type(3){left:9px;bottom:calc(2.1em + 9px);border-right:0;border-top:0}
html.k5 .k5-still > i:nth-of-type(4){right:9px;bottom:calc(2.1em + 9px);border-left:0;border-top:0}
html.k5 .k5-still figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:.55em .75em;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html.k5 .k5-still figcaption b{font-weight:400;color:var(--ember-lo)}
html.k5 .k5-still figcaption b::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ember);margin-right:7px;vertical-align:1px;
  animation:k5Blink 1.6s steps(2) infinite}
@keyframes k5Blink{50%{opacity:.25}}

/* ---- 2 · Fragen ------------------------------------------------------------------ */
.faq{counter-reset:k5faq}
html.k5 .faq__item summary{counter-increment:k5faq}
html.k5 .faq__item summary::before{content:counter(k5faq,decimal-leading-zero);flex:none;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:var(--muted);min-width:1.9em;
  transition:color .5s}
html.k5 .faq__item[open] summary::before,html.k5 .faq__item:hover summary::before{color:var(--ember)}
html.k5 .faq__item{position:relative;transition:border-color .5s var(--k5-out),background-color .5s var(--k5-out),box-shadow .6s var(--k5-out)}
html.k5 .faq__item[open]{box-shadow:inset 3px 0 0 var(--ember),0 0 0 1px rgba(226,85,30,.12),0 18px 40px -24px rgba(226,85,30,.45)}
html.k5 .faq__item > :not(summary){position:relative}
html.k5 .faq__item > p{padding-left:calc(1.9em + 1rem)}
html.k5 .faq__item > p::before{content:'';position:absolute;left:calc(.95em + .2rem);top:.4em;bottom:.4em;width:1px;background:rgba(226,85,30,.4)}
:is(.section--light,.psec--light) html.k5 .faq__item summary::before{color:var(--muted-2)}

/* ---- 3 · Kennzahlen ------------------------------------------------------------- */
html.k5 .kpi__n{position:relative}
html.k5 .kpi__n::after{content:'';display:block;height:2px;margin-top:.32em;border-radius:1px;
  background:linear-gradient(90deg,var(--ember),rgba(226,85,30,.15));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--k5-out) calc(var(--kn-i,0) * 110ms + .35s)}
html.k5 .kpis.is-in .kpi__n::after,html.k5 .kpis.kn-in .kpi__n::after,html.k5 .kn-in .kpis .kpi__n::after{transform:scaleX(var(--k5-w,.68))}
html.k5 .kpi:nth-child(6n+1){--k5-w:.82;--kn-i:0}html.k5 .kpi:nth-child(6n+2){--k5-w:.58;--kn-i:1}
html.k5 .kpi:nth-child(6n+3){--k5-w:.72;--kn-i:2}html.k5 .kpi:nth-child(6n+4){--k5-w:.46;--kn-i:3}
html.k5 .kpi:nth-child(6n+5){--k5-w:.9;--kn-i:4}html.k5 .kpi:nth-child(6n+6){--k5-w:.64;--kn-i:5}

/* ---- 4 · Laufband: Perforation --------------------------------------------------- */
html.k5 .mq{position:relative}
html.k5 .mq::before,html.k5 .mq::after{content:'';position:absolute;left:0;right:0;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,238,228,.14) 0 9px,transparent 9px 20px);
  animation:k5Perf 3.2s linear infinite}
html.k5 .mq::before{top:8px}
html.k5 .mq::after{bottom:8px}
@keyframes k5Perf{to{background-position:-20px 0}}
html.k5 :is(.section--light,.psec--light) .mq::before,html.k5 :is(.section--light,.psec--light) .mq::after{
  background:repeating-linear-gradient(90deg,rgba(11,8,6,.16) 0 9px,transparent 9px 20px)}

/* ---- 5 · Helle Abschnitte --------------------------------------------------------- */
html.k5 :is(.psec--light,.section--light,.stick:not(.stick--dark)){position:relative;isolation:isolate}
/* Filmkante oben und unten: Perforation in Tinte */
html.k5 :is(.psec--light,.section--light)::before,html.k5 :is(.psec--light,.section--light)::after{content:'';position:absolute;left:0;right:0;height:5px;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(11,8,6,.14) 0 9px,transparent 9px 20px)}
html.k5 :is(.psec--light,.section--light)::before{top:10px}
html.k5 :is(.psec--light,.section--light)::after{bottom:10px}
/* Papierkorn: dieselbe SVG-Turbulenz wie das Filmkorn, still, multipliziert */
html.k5 :is(.psec--light,.section--light) > .shell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>") repeat}
html.k5 :is(.psec--light,.section--light) > .shell{position:relative}
/* Eckmarken des Abschnitts */
html.k5 :is(.psec--light,.section--light) > .shell::after{content:'';position:absolute;left:0;top:0;width:14px;height:14px;pointer-events:none;
  border-left:1px solid rgba(11,8,6,.4);border-top:1px solid rgba(11,8,6,.4)}

/* ---- 6 · Sucher ------------------------------------------------------------------- */
html.k5 .k5-vf{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;color:rgba(244,238,228,.85)}
html.k5 .k5-vf b{position:absolute;font-weight:400;text-shadow:0 1px 2px rgba(11,8,6,.7)}
html.k5 .k5-rec{left:30px;top:26px;display:flex;align-items:center;gap:6px}
html.k5 .k5-rec i{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px rgba(226,85,30,.9);animation:k5Blink 1.2s steps(2) infinite}
html.k5 .k5-tc{left:30px;bottom:26px;font-variant-numeric:tabular-nums}
html.k5 .k5-sc{right:30px;top:26px;opacity:.7}
html.k5 .stick__media .k5-vf b{opacity:0;transition:opacity .8s var(--k5-out) .6s}
html.k5 .stick.kn-in .k5-vf b,html.k5 .stick.kx-in .k5-vf b,html.k5 .stick.is-in .k5-vf b{opacity:1}
/* Bildband: Rahmen um jedes Bild, Eckmarken wie in der Kinobahn */
html.k5 .k5-frame{position:relative;display:block;overflow:hidden;border-radius:inherit}
html.k5 .k5-frame > img,html.k5 .k5-frame > video,html.k5 .k5-frame > picture{display:block;width:100%;height:100%}
html.k5 .k5-gate i{position:absolute;width:14px;height:14px;border:1px solid rgba(244,238,228,.6);pointer-events:none;z-index:4;opacity:0;transition:opacity .8s var(--k5-out) .4s,transform 1s var(--k5-out) .4s}
html.k5 .k5-gate i:nth-child(1){left:12px;top:12px;border-right:0;border-bottom:0;transform:translate3d(8px,8px,0)}
html.k5 .k5-gate i:nth-child(2){right:12px;top:12px;border-left:0;border-bottom:0;transform:translate3d(-8px,8px,0)}
html.k5 .k5-gate i:nth-child(3){left:12px;bottom:12px;border-right:0;border-top:0;transform:translate3d(8px,-8px,0)}
html.k5 .k5-gate i:nth-child(4){right:12px;bottom:12px;border-left:0;border-top:0;transform:translate3d(-8px,-8px,0)}
html.k5 .kn-in .k5-gate i,html.k5 .is-in .k5-gate i,html.k5 [data-reveal].is-in .k5-gate i{opacity:1;transform:none}
html.k5 .figband .k5-vf b{opacity:0;transition:opacity .8s var(--k5-out) .7s}
html.k5 .figband.is-in .k5-vf b,html.k5 .kn-in .figband .k5-vf b,html.k5 [data-reveal].is-in .k5-vf b{opacity:1}

/* ---- 7 · Aufruf: Kulisse ------------------------------------------------------------ */
html.k5 .kapply__box.k5-hat-bg{position:relative;overflow:hidden;isolation:isolate}
html.k5 .kapply__box > .k5-bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;
  opacity:0;transition:opacity 1.6s var(--k5-out) .2s}
html.k5 .kapply__box.is-in > .k5-bg,html.k5 .kn-in .kapply__box > .k5-bg{opacity:1}
html.k5 .kapply__box > .k5-bg img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:80% 50%;opacity:.38;
  -webkit-mask-image:linear-gradient(100deg,transparent 34%,#000 78%);mask-image:linear-gradient(100deg,transparent 34%,#000 78%);
  transition:opacity 1.2s var(--k5-out),transform 6s var(--k5-out)}
html.k5 .kapply__box > .k5-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.1),rgba(11,8,6,.5))}
html.k5 .kapply__box:hover > .k5-bg img{opacity:.55;transform:scale(1.03)}
html.k5 .kapply__box > *{position:relative;z-index:1}

/* ---- 8 · Bildnummern --------------------------------------------------------------- */
html.k5 .k5-nr{position:absolute;left:12px;top:12px;z-index:3;padding:.3em .55em;border-radius:6px;pointer-events:none;
  font-family:var(--f-mono);font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--ivory);
  background:rgba(11,8,6,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transform:translate3d(0,-6px,0);transition:opacity .5s var(--k5-out),transform .6s var(--k5-out)}
html.k5 .k5-nr small{font-size:inherit;opacity:.55}
html.k5 .rail__i:hover .k5-nr,html.k5 .mos figure:hover .k5-nr{opacity:1;transform:none}
html.k5 .rail__i,html.k5 .mos figure{position:relative}

/* ---- 9 · Telefon -------------------------------------------------------------------- */
@media (max-width:820px),(pointer:coarse){
  html.k5 .k5-vf,html.k5 .k5-still,html.k5 .k5-nr{display:none}
  html.k5 :is(.psec--light,.section--light) > .shell::before{display:none}
  html.k5 .kapply__box > .k5-bg img{opacity:.3;-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 85%);mask-image:linear-gradient(100deg,transparent 40%,#000 85%)}
  html.k5 .prose__body > h2:first-child + p{padding-left:12px}
  html.k5 .faq__item > p{padding-left:calc(1.9em + .6rem)}
}

/* ---- 10 · Ohne Bewegung -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.k5 .prose__body h2::before,html.k5 .k5-still,html.k5 .k5-gate i,html.k5 .k5-vf b,html.k5 .kapply__box > .k5-bg{opacity:1;transform:none;transition:none}
  html.k5 .kpi__n::after{transform:scaleX(var(--k5-w,.68));transition:none}
  html.k5 .mq::before,html.k5 .mq::after,html.k5 .k5-rec i,html.k5 .k5-still figcaption b::before{animation:none}
}

/* ---- 11 · Clip im Aufruf (Fassung 2) --------------------------------------------- */
html.k5 .kapply__box > .k5-bg video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:75% 50%;opacity:.42;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 74%);mask-image:linear-gradient(100deg,transparent 30%,#000 74%);
  transition:opacity 1.2s var(--k5-out)}
html.k5 .kapply__box:hover > .k5-bg video{opacity:.6}