/* ============================================================================
   Coffee Festival Europe — KINO IV · Kulissen
   (Stand 10.09.2026, Fassung 1; Skript: assets/js/kino4.js)

   Die Karten der Unterseiten bekommen ihre Kulisse: ein dunkles, warm
   ausgeleuchtetes Motiv rechts hinter dem Text (kino4.js setzt es ein),
   Eckmarken, einen Lichtstreif beim Eintreffen, eine leichte Kamerafahrt
   beim Scrollen und eine gezogene Linie unter der Ueberschrift. Die Ziffer
   der Regelkarten kommt von unten und atmet danach in Ember. Das Team
   bekommt den Ring um das Bildzeichen und ein Punktraster, das Abzeichen
   „Folgt bald" einen Glutschein.

   Regeln, die fuer alles hier gelten:
   - Anfangszustaende nur unter html.k4 (setzt kino4.js). Ohne Skript oder
     mit prefers-reduced-motion steht alles sofort da, und es gibt keine
     Kulisse (das Bild wird gar nicht erst eingesetzt).
   - Text bleibt links frei: die Kulisse ist nach links weich ausmaskiert
     und zusaetzlich nach unten abgedunkelt. Sie liegt unter dem Text
     (z-index 0), page.css hebt jedes Kind der Karte auf z-index 1.
   - Bewegt werden nur transform, opacity und clip-path.
   - Telefon (≤820px oder grober Zeiger): Kulisse still, kein Lichtstreif,
     keine Kamerafahrt, keine Eckmarken — dafuer ein Bild je Karte in der
     kleinen Stufe (640px, um 5 KB), damit die Karten nicht leer bleiben.
   - Helle Abschnitte bekommen keine Kulisse (kino4.js laesst sie aus).
   ========================================================================== */

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

/* ---- 0 · Sperre: Besucher und Aussteller vorerst geschlossen ------------------
   Die Verweise im Menue und im Fuss haben kein href mehr (data-zu), damit sie
   nicht anklickbar sind; Wort und Abzeichen „Bald" bleiben stehen. */
a[data-zu]{cursor:default}
a[data-zu]:hover .menu__word,a[data-zu]:hover .sub__t{opacity:.72}

/* ---- 1 · Kulisse ------------------------------------------------------------- */
html.k4 .k4-karte{position:relative;overflow:hidden;isolation:isolate}
html.k4 .k4-karte > .k4-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity 1.6s var(--k4-out) var(--k4-d,0ms)}
html.k4 .k4-karte.k4-in > .k4-bg{opacity:1}
html.k4 .k4-bg img{position:absolute;left:-4%;top:-6%;width:108%;height:112%;object-fit:cover;object-position:82% 50%;
  opacity:.44;filter:saturate(.86) contrast(1.04);
  -webkit-mask-image:linear-gradient(100deg,transparent 26%,#000 74%);mask-image:linear-gradient(100deg,transparent 26%,#000 74%);
  transform:translate3d(0,calc((var(--k4-p,.5) - .5) * -5%),0) scale(1.02);
  transition:opacity 1.2s var(--k4-out),filter 1.2s var(--k4-out)}
/* Abdunkelung: nach unten dichter, oben rechts ein Glutschein */
html.k4 .k4-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,8,6,.12),rgba(11,8,6,.58)),
             radial-gradient(60% 70% at 88% 22%,rgba(226,85,30,.16),rgba(226,85,30,0) 70%)}
@media (hover:hover){
  html.k4 .k4-karte:hover .k4-bg img{opacity:.66;filter:saturate(1) contrast(1.08)}
}
/* die Verzeichnis-Regeln (breite Zeilen): Kulisse liegt weiter rechts und flacher */
html.k4 .rules--stack .k4-bg img{-webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 80%);mask-image:linear-gradient(90deg,transparent 42%,#000 80%);opacity:.36}
html.k4 .rules--stack .k4-karte{border-radius:14px}
/* die hairline-Regeln (about.css, ohne Kasten): etwas Rundung fuer die Kulisse */
html.k4 .rules:not(.rules--tiles):not(.rules--stack) .k4-bg{border-radius:0}
html.k4 .rules:not(.rules--tiles):not(.rules--stack) .k4-bg img{opacity:.3}

/* die Listen-Karten (cards--list, hairline-Zeilen): Kulisse flacher, keine Eckmarken —
   sechs Zeilen mit Rahmenmarken saehen nach Formular aus */
html.k4 .cards--list .k4-bg img{opacity:.26;-webkit-mask-image:linear-gradient(90deg,transparent 48%,#000 84%);mask-image:linear-gradient(90deg,transparent 48%,#000 84%)}
html.k4 .cards--list .k4-marks{display:none}
/* das Kachelraster der Formate (erlebnisse, cards--kino): Kulisse traegt die Karte,
   Bild kraeftiger, Karte hoeher, Nummer als Marke oben links, Meta als Zeile unten */
html.k4 .cards--kino .card{min-height:clamp(200px,22vw,290px);justify-content:flex-end;padding-top:clamp(54px,5.4vw,72px)}
html.k4 .cards--kino .k4-bg img{opacity:.6;object-position:70% 50%;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.35) 100%)}
html.k4 .cards--kino .k4-bg::after{background:linear-gradient(180deg,rgba(11,8,6,.05) 20%,rgba(11,8,6,.82) 72%)}
.cards--kino .card__k{position:absolute;left:clamp(18px,2.2vw,30px);top:clamp(18px,2.2vw,30px);margin:0}
.cards--kino .card__t{font-size:clamp(1.2rem,1.7vw,1.5rem);font-family:var(--f-display);font-weight:700;font-stretch:104%;letter-spacing:-.02em}
.cards--kino .card__meta{color:var(--ember-lo)}
@media (max-width:820px){.cards--kino .card{min-height:170px}}

/* ---- 2 · Eckmarken und Lichtstreif -------------------------------------------- */
html.k4 .k4-marks{position:absolute;inset:11px;z-index:2;pointer-events:none}
html.k4 .k4-marks::before,html.k4 .k4-marks::after{content:'';position:absolute;width:13px;height:13px;
  border:1px solid rgba(226,85,30,.62);opacity:0;
  transition:opacity .9s var(--k4-out) calc(var(--k4-d,0ms) + .2s),transform 1.1s var(--k4-out) calc(var(--k4-d,0ms) + .2s)}
html.k4 .k4-marks::before{left:0;top:0;border-right:0;border-bottom:0;transform:translate3d(8px,8px,0)}
html.k4 .k4-marks::after{right:0;bottom:0;border-left:0;border-top:0;transform:translate3d(-8px,-8px,0)}
html.k4 .k4-in > .k4-marks::before,html.k4 .k4-in > .k4-marks::after{opacity:1;transform:none}

html.k4 .k4-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
html.k4 .k4-sweep::before{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:24%;
  background:linear-gradient(100deg,rgba(244,238,228,0),rgba(244,238,228,.06) 42%,rgba(226,85,30,.13) 56%,rgba(244,238,228,0));
  transform:translate3d(-140%,0,0) skewX(-16deg)}
html.k4 .k4-in > .k4-sweep::before{animation:k4Sweep 1.7s var(--k4-out) calc(var(--k4-d,0ms) + .35s) both}
@keyframes k4Sweep{to{transform:translate3d(560%,0,0) skewX(-16deg)}}
@media (hover:hover){
  html.k4 .k4-karte:hover > .k4-sweep::before{animation:k4SweepH 1.1s var(--k4-out) both}
  @keyframes k4SweepH{from{transform:translate3d(-140%,0,0) skewX(-16deg)}to{transform:translate3d(560%,0,0) skewX(-16deg)}}
}

/* ---- 3 · Ziffer und Ueberschrift ---------------------------------------------- */
html.k4 .rule__n{transition:transform .9s var(--k4-out) var(--k4-d,0ms),
  -webkit-text-stroke-color .8s var(--k4-out) var(--k4-d,0ms),color .8s var(--k4-out),opacity .9s var(--k4-out) var(--k4-d,0ms)}
html.k4 .rule.k4-karte:not(.k4-in) .rule__n{transform:translate3d(0,22px,0);opacity:0}
html.k4 .rules--tiles .rule.k4-in .rule__n{animation:k4Zahl 7s ease-in-out calc(var(--k4-d,0ms) + 1.2s) infinite}
@keyframes k4Zahl{0%,100%{-webkit-text-stroke-color:rgba(244,238,228,.17)}50%{-webkit-text-stroke-color:rgba(226,85,30,.42)}}
html.k4 .rules--tiles .rule:hover .rule__n{animation:none}

html.k4 .rules--tiles .rule__t::after,html.k4 .cards .card__t::after,html.k4 .cmp__t::after{content:'';display:block;
  width:36px;height:2px;margin-top:.5em;border-radius:1px;
  background:linear-gradient(90deg,var(--ember),rgba(226,85,30,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--k4-out) calc(var(--k4-d,0ms) + .45s)}
html.k4 .k4-in .rule__t::after,html.k4 .k4-in .card__t::after,html.k4 .k4-in .cmp__t::after{transform:scaleX(1)}
html.k4 .subnav__cards .card__t::after{display:none}

/* ---- 4 · Kennzahlen: Glutschein oben rechts ------------------------------------ */
html.k4 .kpi{overflow:hidden}
html.k4 .kpi::after{content:'';position:absolute;right:-28%;top:-40%;width:72%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,85,30,.15),rgba(226,85,30,0) 68%);opacity:0;transition:opacity 1.4s var(--k4-out) .4s}
html.k4 .kpis.is-in .kpi::after,html.k4 .kpis.kn-in .kpi::after,html.k4 .kn-in .kpi::after{opacity:1}

/* ---- 5 · Team ------------------------------------------------------------------ */
html.k4 .person{position:relative;overflow:hidden;isolation:isolate}
html.k4 .person::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(244,238,228,.13) 1px,transparent 1.3px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(72% 62% at 100% 0%,#000,transparent 72%);mask-image:radial-gradient(72% 62% at 100% 0%,#000,transparent 72%)}
html.k4 .person > *{position:relative;z-index:1}
html.k4 .k4-av{position:relative;display:inline-block;border-radius:50%;vertical-align:top}
html.k4 .k4-av::after{content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(226,85,30,0) 0 58%,rgba(226,85,30,.95) 78%,rgba(226,85,30,0) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:k4Ring 7s linear infinite}
html.k4 .person:nth-child(even) .k4-av::after{animation-duration:9s;animation-direction:reverse}
@keyframes k4Ring{to{transform:rotate(360deg)}}
html.k4 .person__name .tbd{animation:k4Bald 3.4s ease-in-out infinite}
@keyframes k4Bald{0%,100%{box-shadow:0 0 0 0 rgba(226,85,30,0)}50%{box-shadow:0 0 0 4px rgba(226,85,30,.14),0 0 18px rgba(226,85,30,.22)}}

/* ---- 6 · Telefon --------------------------------------------------------------- */
@media (max-width:820px),(pointer:coarse){
  html.k4 .k4-bg img{transform:none;opacity:.36;
    -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 78%);mask-image:linear-gradient(100deg,transparent 30%,#000 78%)}
  html.k4 .rules--stack .k4-bg img{-webkit-mask-image:linear-gradient(90deg,transparent 50%,#000 88%);mask-image:linear-gradient(90deg,transparent 50%,#000 88%)}
  html.k4 .k4-sweep,html.k4 .k4-marks{display:none}
  html.k4 .rules--tiles .rule.k4-in .rule__n{animation:none}
  html.k4 .k4-av::after{inset:-4px}
}

/* ---- 7 · Ohne Bewegung ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.k4 .k4-bg,html.k4 .k4-sweep,html.k4 .k4-marks{display:none}
  html.k4 .rule__n,html.k4 .rule__t::after,html.k4 .card__t::after,html.k4 .cmp__t::after{transition:none;transform:none;opacity:1}
  html.k4 .k4-av::after,html.k4 .person__name .tbd{animation:none}
}

/* ---- 8 · Clips in Karten (Fassung 3) -------------------------------------------- */
html.k4 .k4-bg video{position:absolute;left:-4%;top:-6%;width:108%;height:112%;object-fit:cover;object-position:60% 50%;opacity:.5;
  -webkit-mask-image:linear-gradient(100deg,transparent 22%,#000 66%);mask-image:linear-gradient(100deg,transparent 22%,#000 66%);
  filter:saturate(.9);transition:opacity 1.2s var(--k4-out)}
@media (hover:hover){html.k4 .k4-karte:hover .k4-bg video{opacity:.7}}
html.k4 .cards--kino .k4-bg video{opacity:.62;object-position:70% 50%;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.35) 100%)}

/* ---- 9 · Vergleichskarten (10.09.2026) ------------------------------------------
   Das Abzeichen „Empfohlen" sitzt ueber der Oberkante und wurde von overflow:hidden
   abgeschnitten; der Text laeuft ueber die ganze Breite, also liegt die Kulisse
   hier unten statt rechts und blasser. */
html.k4 .cmp__c.k4-karte{overflow:visible}
html.k4 .cmp__c .k4-bg,html.k4 .cmp__c .k4-sweep{border-radius:16px}
html.k4 .cmp__c .k4-bg img,html.k4 .cmp__c .k4-bg video{opacity:.28;object-position:60% 70%;
  -webkit-mask-image:linear-gradient(180deg,transparent 28%,#000 78%);mask-image:linear-gradient(180deg,transparent 28%,#000 78%)}
@media (hover:hover){html.k4 .cmp__c:hover .k4-bg img{opacity:.42}}
html.k4 .cmp__c .cmp__badge{z-index:3}