/* ============================================================================
   Coffee Festival Europe — KINO · die filmische Ausarbeitung aller Abschnitte
   (Stand 10.09.2026, Fassung 9 — Embleme der Festival-Karten)
   Fassung 9: @keyframes knGlow gab es zweimal (Glutschein der Kennzahl und ein
   Deckkraft-Puls); die zweite Definition gewann, und jede Kennzahl stand mit
   35 bis 90 Prozent Deckkraft grau da. Der Puls heisst jetzt knGlowPuls.

   Kinetik gibt den Rahmen (Kopf, Trennlinie, Bilder), Motive das Bild zum
   Thema, Regie die Choreografie der Karten. Was bisher fehlte, war die
   Ausarbeitung der uebrigen Abschnitte: die Kinobahnen, die Signaturbaender,
   die Klebesaetze, die Fliesstexte, die Formulare, die Tagesplaene, das
   Lexikon, die Laufbaender, die Bildstrecke, der Fuss. Hier bekommt jeder
   dieser Abschnitte seine eigene filmische Behandlung — mit derselben
   Sprache (Elfenbein-Strich, Ember als Akzent, dieselben Kurven) und ohne
   dass Kopf oder Trennlinie sich aendern.

   Die Bilder im Kopf:
     Kinobahn (.cine)    Blende oeffnet sich als Schlitz, Bildfenster mit
                         Eckmarken und laufendem Timecode, Text kommt in
                         drei Schlaegen, das Bild zieht langsam heran
     Signatur (.sig)     Haarlinien ziehen sich von beiden Seiten, der Film
                         faehrt heran
     Klebesatz (.stick)  Fortschrittsschiene neben den Schritten, der
                         aktive Schritt tritt hervor, das Bild bekommt eine
                         langsame Kamerafahrt (Ken Burns) und Eckmarken
     Fliesstext (.prose) Lesezeichen wandert im Inhaltsverzeichnis, jede
                         Ueberschrift zieht sich ihre Linie
     Formular (.form)    Felder setzen sich nacheinander, Auswahlknoepfe
                         springen auf
     Aufruf (.kapply)    Rahmen zeichnet sich, ein Lichtstreif zieht durch
     Kuerze (.soonpanel) Zeilen bekommen ihre Marke, die Nummer rueckt vor
     Tagesplan (.tt)     Zeitachse zwischen Uhrzeit und Text, Zeilen kommen
                         beim Tageswechsel nacheinander
     Lexikon (.lex)      Eintraege gestaffelt, Anfangsbuchstabe zieht Linie
     Laufband (.mq)      weiche Raender, atmende Punkte
     Bildstrecke (.rail) Laufleiste unter den Bildern, Hinweis winkt
     Chronik (.hist)     Jahreszahlen ziehen sich zusammen
     Kennzahlen, Zuege, Messer, Vergleiche, Zeitleiste: kleine Nachschlaege
     Fuss (.footer)      weiche Laufbandkanten, Kontakt gestaffelt
   Dazu ein feines Filmkorn ueber der ganzen Seite (nicht auf Touchgeraeten,
   der Akku dankt).

   Alle Anfangszustaende haengen an html.kn, das kino.js setzt. Ohne Skript
   oder mit prefers-reduced-motion steht alles sofort im Endzustand.
   Bewegt werden nur transform, opacity, clip-path und filter.
   ========================================================================== */

:root{--kn-out:cubic-bezier(.16,1,.3,1);--kn-io:cubic-bezier(.76,0,.24,1);--kn-cam:cubic-bezier(.2,.6,.2,1);
  --kn-bar:clamp(10px,2.4vh,26px)}

@media (prefers-reduced-motion:no-preference){

/* ---- 0 · Filmkorn ------------------------------------------------------------
   Ein gekacheltes Rauschen (SVG-Turbulenz) auf einer zu grossen Flaeche, die
   in Schritten verschoben wird — der Compositor macht das allein. */
html.kn .kn-grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0/220px 220px repeat;
  animation:knGrain .9s steps(6) infinite}
@keyframes knGrain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}34%{transform:translate(2%,-4%)}
  51%{transform:translate(-4%,-1%)}68%{transform:translate(3%,3%)}85%{transform:translate(-1%,-3%)}100%{transform:translate(0,0)}}
@media (pointer:coarse),(max-width:760px){html.kn .kn-grain{display:none}}

/* ---- 1 · Kinobahn -------------------------------------------------------------- */
/* die Blende: der Abschnitt oeffnet sich als waagerechter Schlitz */
html.kn body .cine{clip-path:inset(50% 0 50% 0);transition:clip-path 1.5s var(--kn-io)}
html.kn body .cine.kn-in{clip-path:inset(0 0 0 0)}
/* Bildfenster: zwei Balken fahren nach der Blende ein */
html.kn body .cine::before,html.kn body .cine::after{content:'';position:absolute;left:0;right:0;height:var(--kn-bar);
  background:var(--ink);z-index:4;pointer-events:none;transform:scaleY(0);transition:transform 1s var(--kn-out) 1s}
html.kn body .cine::before{top:0;transform-origin:top}
html.kn body .cine::after{bottom:0;transform-origin:bottom}
html.kn body .cine.kn-in::before,html.kn body .cine.kn-in::after{transform:none}
/* Eckmarken und Timecode (von kino.js eingesetzt) */
html.kn .kn-gate{position:absolute;z-index:4;pointer-events:none;
  inset:calc(var(--kn-bar) + 16px) var(--gutter,clamp(18px,4vw,64px))}
html.kn .kn-gate i{position:absolute;width:16px;height:16px;border:1px solid rgba(244,238,228,.55);
  opacity:0;transition:opacity .6s 1.15s,transform 1s var(--kn-out) 1.15s}
html.kn .kn-gate i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;transform:translate(12px,12px)}
html.kn .kn-gate i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;transform:translate(-12px,12px)}
html.kn .kn-gate i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;transform:translate(12px,-12px)}
html.kn .kn-gate i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;transform:translate(-12px,-12px)}
/* unten rechts: oben saesse er unter der Navigation, unten links steht die Meta-Zeile */
html.kn .kn-gate b{position:absolute;bottom:2px;right:30px;display:flex;align-items:center;gap:9px;
  font:500 .66rem/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.14em;color:rgba(244,238,228,.6);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .7s 1.5s}
html.kn .kn-gate b::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 8px rgba(226,85,30,.7)}
html.kn .kn-gate small{font-size:inherit;letter-spacing:inherit;opacity:.55;margin-left:6px}
html.kn body .cine.kn-in .kn-gate i{opacity:1;transform:none}
html.kn body .cine.kn-in .kn-gate b{opacity:1}
@media (max-width:760px){html.kn .kn-gate b{display:none}}
/* das Bild faehrt heran */
html.kn body .cine__media video,html.kn body .cine__media img{transform:scale(1.12);transition:transform 8s var(--kn-cam)}
html.kn body .cine.kn-in .cine__media video,html.kn body .cine.kn-in .cine__media img{transform:none}
/* der Text in drei Schlaegen: Zeile, Titel, Satz — dann die Kennzeichen */
html.kn body .cine__k,html.kn body .cine__inner > .label{opacity:0;transform:translate3d(-14px,0,0);letter-spacing:.42em;
  transition:opacity .8s .55s,transform 1s var(--kn-out) .55s,letter-spacing 1.5s var(--kn-out) .55s}
html.kn body .cine__h{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,30px,0);filter:blur(8px);
  transition:opacity .7s .75s,clip-path 1.2s var(--kn-out) .75s,transform 1.2s var(--kn-out) .75s,filter 1s .8s}
html.kn body .cine__b{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s 1.05s,transform 1.1s var(--kn-out) 1.05s}
html.kn body .cine__meta span{position:relative;padding-left:16px;opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .6s,transform .8s var(--kn-out)}
html.kn body .cine__meta span::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--kn-out)}
html.kn body .cine.kn-in .cine__k,html.kn body .cine.kn-in .cine__inner > .label{opacity:1;transform:none;letter-spacing:.16em}
html.kn body .cine.kn-in .cine__h{opacity:1;clip-path:inset(-10% -2% -24% -2%);transform:none;filter:none}
html.kn body .cine.kn-in .cine__b{opacity:1;transform:none}
html.kn body .cine.kn-in .cine__meta span{opacity:1;transform:none}
html.kn body .cine.kn-in .cine__meta span::before{transform:none}
html.kn body .cine.kn-in .cine__meta span:nth-child(1){transition-delay:1.3s}
html.kn body .cine.kn-in .cine__meta span:nth-child(2){transition-delay:1.42s}
html.kn body .cine.kn-in .cine__meta span:nth-child(3){transition-delay:1.54s}
html.kn body .cine.kn-in .cine__meta span:nth-child(4){transition-delay:1.66s}
html.kn body .cine.kn-in .cine__meta span:nth-child(5){transition-delay:1.78s}
html.kn body .cine.kn-in .cine__meta span:nth-child(6){transition-delay:1.9s}
html.kn body .cine.kn-in .cine__meta span::before{transition-delay:inherit}

/* ---- 2 · Signaturband --------------------------------------------------------- */
html.kn body .sig::before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--kn-out)}
html.kn body .sig::after{transform:scaleX(0);transform-origin:right;transition:transform 1.8s var(--kn-out) .15s}
html.kn body .sig.kn-in::before,html.kn body .sig.kn-in::after{transform:none}
html.kn body .sig__film{transform:scale(1.08);transition:transform 7s var(--kn-cam)}
html.kn body .sig.kn-in .sig__film{transform:none}

/* ---- 3 · Klebesatz ------------------------------------------------------------- */
html.kn body .stick__steps{position:relative}
/* die Schiene: eine Haarlinie links, auf der der Fortschritt hochlaeuft */
html.kn .kn-rail{position:absolute;left:-18px;top:clamp(20px,6vh,80px);bottom:clamp(20px,6vh,80px);width:1px;
  background:rgba(11,8,6,.12);pointer-events:none;opacity:0;transition:opacity .8s .3s}
html.kn body .stick--dark .kn-rail{background:rgba(244,238,228,.12)}
html.kn body .stick.kn-in .kn-rail{opacity:1}
html.kn .kn-rail i{position:absolute;left:0;top:0;width:100%;height:calc(var(--kn-p,0) * 100%);
  background:linear-gradient(180deg,rgba(226,85,30,.2),var(--ember));transition:height .35s var(--kn-out)}
html.kn .kn-rail i::after{content:'';position:absolute;left:50%;bottom:0;width:7px;height:7px;border-radius:50%;
  background:var(--ember);transform:translate(-50%,50%);box-shadow:0 0 0 4px rgba(226,85,30,.18),0 0 14px rgba(226,85,30,.55)}
@media (max-width:860px){html.kn .kn-rail{display:none}}
/* der aktive Schritt tritt hervor, die anderen treten zurueck */
html.kn body .stick__step{transition:opacity .7s var(--kn-out),transform .9s var(--kn-out)}
html.kn body .stick__steps:has([aria-current="true"]) .stick__step:not([aria-current="true"]){opacity:.42;transform:translate3d(-6px,0,0)}
html.kn body .stick__n{display:flex;align-items:center;gap:10px}
html.kn body .stick__n::after{content:'';height:1px;width:0;background:var(--ember);transition:width .9s var(--kn-out)}
html.kn body .stick__step[aria-current="true"] .stick__n::after{width:44px}
html.kn body .stick__step .stick__t{transition:letter-spacing 1s var(--kn-out)}
html.kn body .stick__steps:has([aria-current="true"]) .stick__step:not([aria-current="true"]) .stick__t{letter-spacing:.01em}
/* das Bild: langsame Kamerafahrt, jedes Mal wenn es dran ist */
html.kn body .stick__media figure.is-on img,html.kn body .stick__media figure.is-on video{animation:knKen 11s var(--kn-cam) both}
@keyframes knKen{from{transform:scale(1)}to{transform:scale(1.1)}}
html.kn body .stick__media .kn-gate{inset:14px}
html.kn body .stick__media .kn-gate i{opacity:1;transform:none;transition:none}
html.kn body .stick:not(.stick--dark) .stick__media .kn-gate i{border-color:rgba(244,238,228,.7)}

/* ---- 4 · Fliesstext ------------------------------------------------------------ */
/* die Ueberschrift zieht sich ihre Linie, sobald sie im Bild steht */
html.kn body .prose__body h2{position:relative}
html.kn body .prose__body h2::after{content:'';position:absolute;left:0;bottom:-.3em;width:52px;height:1px;
  background:linear-gradient(90deg,var(--ember),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--kn-out) .25s}
html.kn body .prose__body h2.kn-seen::after{transform:none}
/* das Lesezeichen: eine Schiene links vom Inhaltsverzeichnis */
html.kn .kn-toc{position:absolute;left:-16px;top:.2em;bottom:.2em;width:1px;background:rgba(244,238,228,.1);pointer-events:none}
html.kn .kn-toc i{position:absolute;left:0;top:0;width:100%;height:calc(var(--kn-p,0) * 100%);
  background:linear-gradient(180deg,rgba(226,85,30,.25),var(--ember));transition:height .4s var(--kn-out)}
html.kn .kn-toc i::after{content:'';position:absolute;left:50%;bottom:0;width:5px;height:5px;border-radius:50%;
  background:var(--ember);transform:translate(-50%,50%);box-shadow:0 0 10px rgba(226,85,30,.6)}
@media (max-width:900px){html.kn .kn-toc{display:none}}
/* Fliesstext, der nicht ueber [data-reveal] kommt, setzt sich zeilenweise */
html.kn body .prose__body dl dt{transition:color .5s}
html.kn body .prose__body dt::before{content:'';display:inline-block;width:8px;height:1px;background:var(--ember);
  margin-right:8px;vertical-align:middle;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--kn-out) .3s}
html.kn body .prose.kn-in .prose__body dt::before{transform:none}

/* ---- 5 · Formular --------------------------------------------------------------- */
html.kn body .form > *{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s,transform 1s var(--kn-out)}
html.kn body .form.kn-in > *{opacity:1;transform:none}
html.kn body .form.kn-in > :nth-child(1){transition-delay:.05s}
html.kn body .form.kn-in > :nth-child(2){transition-delay:.15s}
html.kn body .form.kn-in > :nth-child(3){transition-delay:.25s}
html.kn body .form.kn-in > :nth-child(4){transition-delay:.35s}
html.kn body .form.kn-in > :nth-child(5){transition-delay:.45s}
html.kn body .form.kn-in > :nth-child(6){transition-delay:.55s}
html.kn body .form.kn-in > :nth-child(7){transition-delay:.65s}
html.kn body .form.kn-in > :nth-child(n+8){transition-delay:.75s}
/* die Auswahlknoepfe springen nacheinander auf */
html.kn body .form .seg__opt span{opacity:0;transform:scale(.8);transition:opacity .5s,transform .7s cubic-bezier(.34,1.5,.64,1),
  border-color .3s,color .3s,background-color .3s}
html.kn body .form.kn-in .seg__opt span{opacity:1;transform:none}
html.kn body .form.kn-in .seg__opt:nth-child(1) span{transition-delay:.35s}
html.kn body .form.kn-in .seg__opt:nth-child(2) span{transition-delay:.45s}
html.kn body .form.kn-in .seg__opt:nth-child(3) span{transition-delay:.55s}
html.kn body .form.kn-in .seg__opt:nth-child(n+4) span{transition-delay:.65s}
/* die Grundlinie der Felder zeichnet sich (die Ember-Linie beim Fokus bleibt unberuehrt) */
html.kn body .form .field{position:relative}
html.kn body .form .field::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(244,238,228,.22);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--kn-out) .5s;pointer-events:none}
html.kn body .form.kn-in .field::after{transform:none}
html.kn body .form.kn-in .form__row .field:nth-child(2)::after{transition-delay:.7s}

/* ---- 6 · Aufruf (Bewerbungskasten) -------------------------------------------- */
html.kn body .kapply__box{position:relative;overflow:hidden}
html.kn body .kapply__box::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid var(--ember);
  pointer-events:none;opacity:.7;clip-path:inset(0 100% 0 0 round clamp(18px,2vw,28px));transition:clip-path 1.6s var(--kn-out) .2s,opacity 1s 1.6s}
html.kn body .kapply__box.is-in::before{clip-path:inset(0 0 0 0 round clamp(18px,2vw,28px));opacity:.35}
html.kn body .kapply__box::after{content:'';position:absolute;top:-40%;bottom:-40%;left:-45%;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(244,238,228,.07) 44%,rgba(226,85,30,.14) 50%,transparent 56%);transform:skewX(-14deg)}
@keyframes knGlint{to{left:125%}}
html.kn body .kapply__box .btn{transition:transform .8s var(--kn-out),opacity .6s}

/* ---- 7 · Kuerze (Kommt-bald-Zeilen) -------------------------------------------- */
html.kn body .soonpanel__row{position:relative}
html.kn body .soonpanel__row::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:2px;
  background:var(--ember);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--kn-out) calc(var(--rg-d,0ms) + .4s)}
html.kn body .soonpanel__list.is-in .soonpanel__row::before{transform:none}
html.kn body .soonpanel__n{transition:transform .8s var(--kn-out) calc(var(--rg-d,0ms) + .4s)}
html.kn body .soonpanel__list.is-in .soonpanel__n{transform:translate3d(4px,0,0)}

/* ---- 8 · Tagesplan ---------------------------------------------------------------- */
/* die Zeitachse zwischen Uhrzeit und Text; beim Tageswechsel kommen die
   Zeilen nacheinander (Animation statt Uebergang, weil die Klasse springt) */
html.kn body .tt__row{position:relative}
html.kn body .tt__row::before{content:'';position:absolute;top:0;bottom:0;left:calc(92px + clamp(12px,2vw,28px) / 2);width:1px;
  background:rgba(226,85,30,.32);transform:scaleY(0);transform-origin:top}
html.kn body .tt__row::after{content:'';position:absolute;top:calc(clamp(14px,1.8vw,22px) + .5em);left:calc(92px + clamp(12px,2vw,28px) / 2);
  width:5px;height:5px;border-radius:50%;background:var(--ember);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 0 3px rgba(226,85,30,.16)}
html.kn body .tt__day.is-on .tt__row{animation:knRow .8s var(--kn-out) both;animation-delay:calc(var(--kn-i,0) * 80ms)}
html.kn body .tt__day.is-on .tt__row::before{animation:knGrowY .9s var(--kn-out) both;animation-delay:calc(var(--kn-i,0) * 80ms + .15s)}
html.kn body .tt__day.is-on .tt__row::after{animation:knDotIn .6s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--kn-i,0) * 80ms + .35s)}
html.kn body .tt__day.is-on .tt__time{animation:knTime .9s var(--kn-out) both;animation-delay:calc(var(--kn-i,0) * 80ms + .05s)}
html.kn body .tt__row:nth-child(1){--kn-i:0}html.kn body .tt__row:nth-child(2){--kn-i:1}html.kn body .tt__row:nth-child(3){--kn-i:2}
html.kn body .tt__row:nth-child(4){--kn-i:3}html.kn body .tt__row:nth-child(5){--kn-i:4}html.kn body .tt__row:nth-child(6){--kn-i:5}
html.kn body .tt__row:nth-child(7){--kn-i:6}html.kn body .tt__row:nth-child(8){--kn-i:7}html.kn body .tt__row:nth-child(n+9){--kn-i:8}
@keyframes knRow{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes knTime{from{opacity:0;transform:translate3d(-10px,0,0)}}
@keyframes knGrowY{from{transform:scaleY(0)}to{transform:none}}
@keyframes knDotIn{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
html.kn body .tt__tab[aria-selected="true"]{animation:knTab .9s ease-out}
@keyframes knTab{from{box-shadow:0 0 0 0 rgba(226,85,30,.55)}to{box-shadow:0 0 0 14px rgba(226,85,30,0)}}
@media (max-width:560px){html.kn body .tt__row::before,html.kn body .tt__row::after{display:none}}

/* ---- 9 · Lexikon ------------------------------------------------------------------ */
html.kn body .lex__item.is-in{transition-delay:calc(var(--kn-i,0) * 45ms)}
html.kn body .lex__item:nth-child(2){--kn-i:1}html.kn body .lex__item:nth-child(3){--kn-i:2}html.kn body .lex__item:nth-child(4){--kn-i:3}
html.kn body .lex__item:nth-child(5){--kn-i:4}html.kn body .lex__item:nth-child(6){--kn-i:5}html.kn body .lex__item:nth-child(7){--kn-i:6}
html.kn body .lex__item:nth-child(8){--kn-i:7}html.kn body .lex__item:nth-child(9){--kn-i:8}html.kn body .lex__item:nth-child(n+10){--kn-i:9}
html.kn body .lex__item::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--ember);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--kn-out);pointer-events:none}
html.kn body .lex__item.is-open::before,html.kn body .lex__item:hover::before{transform:none}
html.kn body .lex__letter{position:relative}
html.kn body .lex__letter::after{content:'';position:absolute;left:0;bottom:-1px;width:64px;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--kn-out) .3s}
html.kn body .lex__letter.is-in::after{transform:none}

/* ---- 10 · Laufband ----------------------------------------------------------------- */
html.kn body .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
html.kn body .mq__d{animation:knBreath 2.6s ease-in-out infinite;animation-delay:calc(var(--kn-i,0) * .32s)}
/* die Punkte stehen an den geraden Stellen (Wort, Punkt, Wort, Punkt ...) */
html.kn body .mq__d:nth-child(4){--kn-i:1}html.kn body .mq__d:nth-child(6){--kn-i:2}html.kn body .mq__d:nth-child(8){--kn-i:3}
html.kn body .mq__d:nth-child(10){--kn-i:4}html.kn body .mq__d:nth-child(12){--kn-i:5}
@keyframes knBreath{50%{transform:scale(1.6);opacity:.55}}

/* ---- 11 · Bildstrecke --------------------------------------------------------------- */
html.kn .kn-prog{position:relative;display:block;height:1px;margin-top:clamp(14px,1.6vw,22px);background:rgba(244,238,228,.1);
  opacity:0;transition:opacity .8s .4s}
html.kn body .rail.kn-in .kn-prog{opacity:1}
html.kn .kn-prog i{position:absolute;left:0;top:0;height:100%;width:calc(12% + var(--kn-x,0) * 88%);
  background:linear-gradient(90deg,rgba(226,85,30,.3),var(--ember));transition:width .3s var(--kn-out)}
html.kn .kn-prog i::after{content:'';position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ember);
  transform:translate(50%,-50%);box-shadow:0 0 10px rgba(226,85,30,.6)}
html.kn body .rail__hint{display:inline-flex;align-items:center;gap:8px;transition:opacity .6s}
html.kn body .rail__hint::after{content:'';width:22px;height:1px;background:var(--ember);animation:knWave 1.7s ease-in-out infinite}
@keyframes knWave{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(8px);opacity:1}}
html.kn body .rail.kn-used .rail__hint{opacity:.45}
html.kn body .rail.kn-used .rail__hint::after{animation:none}

/* ---- 12 · Chronik ------------------------------------------------------------------ */
html.kn body .hist__y{display:inline-block;transition:letter-spacing 1.2s var(--kn-out) calc(var(--kx-d,0ms) + .3s),color 1s calc(var(--kx-d,0ms) + .3s)}
html.kn body .hist:not(.kx-in) .hist__y{letter-spacing:.3em;color:var(--ember)}

/* ---- 13 · Kennzahlen, Zuege, Messer, Vergleiche, Zeitleiste ------------------------ */
html.kn body .kpis.is-in .kpi__n{animation:knGlow 1.8s ease-out calc(var(--rg-d,0ms) + .4s) both}
@keyframes knGlow{0%{text-shadow:0 0 0 rgba(226,85,30,0)}35%{text-shadow:0 0 22px rgba(226,85,30,.55)}100%{text-shadow:0 0 0 rgba(226,85,30,0)}}
html.kn body .zug.is-in .zug__s i{animation:knPing 1.3s ease-out calc(var(--rg-d,0ms) + .6s) both}
@keyframes knPing{0%{box-shadow:0 0 0 0 rgba(226,85,30,.5)}100%{box-shadow:0 0 0 12px rgba(226,85,30,0)}}
html.kn body .mtr__fill::after{content:'';position:absolute;right:0;top:-1px;bottom:-1px;width:6px;border-radius:3px;
  background:rgba(255,255,255,.75);filter:blur(1px);opacity:0;transition:opacity .6s 1.2s}
html.kn body .mtr.is-in .mtr__fill::after{opacity:.9}
html.kn body .mtr__n{transition:color .6s calc(var(--rg-d,0ms) + .6s)}
html.kn body .mtr.is-in .mtr__n{color:var(--ember)}
html.kn body .cmp__badge{overflow:hidden}
html.kn body .cmp__badge::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-40%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);
  animation:knBadge 4.5s var(--kn-io) infinite;animation-delay:1.2s}
@keyframes knBadge{0%{left:-40%}30%{left:130%}100%{left:130%}}
html.kn body .cmp__c--hi{animation:knHalo 5s ease-in-out infinite}
@keyframes knHalo{0%,100%{box-shadow:0 0 0 0 rgba(226,85,30,0)}50%{box-shadow:0 0 34px 0 rgba(226,85,30,.14)}}
html.kn body .cmp.is-in .cmp__l li{animation:knLi .6s var(--kn-out) both;animation-delay:calc(var(--rg-d,0ms) + .5s + var(--kn-i,0) * 70ms)}
html.kn body .cmp__l li:nth-child(2){--kn-i:1}html.kn body .cmp__l li:nth-child(3){--kn-i:2}html.kn body .cmp__l li:nth-child(4){--kn-i:3}
html.kn body .cmp__l li:nth-child(5){--kn-i:4}html.kn body .cmp__l li:nth-child(n+6){--kn-i:5}
@keyframes knLi{from{opacity:0;transform:translate3d(-8px,0,0)}}
html.kn body .tl.is-in .tl__dot{animation:knPing 1.4s ease-out calc(var(--rg-d,0ms) + .5s) both}
/* Karten-Marke „hier bist du" in der Unternavigation (kino.js setzt das <i>,
   weil ::after der Karte und des Titels schon vergeben sind) */
html.kn .kn-here{position:absolute;top:16px;right:16px;width:6px;height:6px;border-radius:50%;background:var(--ember);
  animation:knPing 2.2s ease-out infinite;pointer-events:none}
/* Fragen: die Antwort gleitet herein */
/* 10.09.2026: die Antwort kam als Animation mit fill both — blieb sie stehen (angehaltene
   Bewegung, ein Beobachter, der das versteckte Element pausiert), stand die Antwort mit
   Deckkraft 0 im Kasten. Jetzt ein Uebergang aus @starting-style: ohne Unterstuetzung
   steht die Antwort einfach sofort da, haengen bleiben kann sie nicht mehr. */
html.kn body .faq__item[open] > :not(summary){animation:none;transition:opacity .55s var(--kn-out),transform .55s var(--kn-out)}
@starting-style{html.kn body .faq__item[open] > :not(summary){opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes knFaq{from{opacity:0;transform:translate3d(0,-6px,0)}}

/* ---- 14 · Fuss ----------------------------------------------------------------------- */
html.kn body .footer__marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html.kn body .footer__contact > *{opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s,transform 1s var(--kn-out)}
html.kn body .footer.kn-in .footer__contact > *{opacity:1;transform:none}
html.kn body .footer.kn-in .footer__contact > :nth-child(2){transition-delay:.15s}
html.kn body .footer.kn-in .footer__contact > :nth-child(3){transition-delay:.3s}
html.kn body .footer.kn-in .footer__contact > :nth-child(n+4){transition-delay:.45s}
html.kn body .footer__mail-addr{position:relative}
html.kn body .footer__mail-addr::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--ember),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--kn-out) .5s}
html.kn body .footer.kn-in .footer__mail-addr::after{transform:none}

/* ---- 15 · Nachschlaege (Fassung 2) ----------------------------------------------- */
/* Kinobahn: der Text steht eine Ebene ueber dem Bild und wandert beim Scrollen
   langsam gegen es — Tiefe; ein weicher Lichtschein zieht durch die Szene */
html.kn body .cine__inner{z-index:3;transform:translate3d(0,calc((.5 - var(--kn-p,.5)) * 36px),0)}
html.kn .kn-flare{position:absolute;z-index:2;pointer-events:none;width:60vw;height:60vw;max-width:900px;max-height:900px;
  left:42%;top:-24%;border-radius:50%;mix-blend-mode:screen;opacity:0;filter:blur(18px);transition:opacity 2.4s 1.2s;
  background:radial-gradient(circle,rgba(244,238,228,.15),rgba(226,85,30,.06) 36%,transparent 70%)}
html.kn body .cine.kn-in .kn-flare{opacity:0}
@keyframes knFlare{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-18%,16%,0) scale(1.14)}}
/* der Filmlauf: eine Linie auf der Oberkante des unteren Balkens, die mit dem
   Scrollen durch die Bahn laeuft */
html.kn .kn-film{position:absolute;left:0;right:0;bottom:-16px;height:1px;background:rgba(244,238,228,.14)}
html.kn .kn-film i{position:absolute;left:0;top:0;height:100%;width:calc(var(--kn-p,0) * 100%);background:var(--ember);
  box-shadow:0 0 8px rgba(226,85,30,.6)}
/* die Szenennummer oben links (die Nummer des Abschnitts auf der Seite) */
html.kn .kn-sc{position:absolute;top:2px;left:30px;font:500 .66rem/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.14em;
  color:rgba(244,238,228,.6);opacity:0;transition:opacity .7s 1.5s}
html.kn body .cine.kn-in .kn-sc{opacity:1}
@media (max-width:760px){html.kn .kn-sc{display:none}}
/* Klebesatz: Bildzaehler „02 / 06" im Bildfenster */
html.kn body .stick__media .kn-gate b{opacity:1;transition:none}
/* Signaturband: ein Lichtstreif zieht in Ruhe ueber den Film */
html.kn .kn-scan{position:absolute;top:-10%;bottom:-10%;left:-30%;width:22%;z-index:2;pointer-events:none;transform:skewX(-12deg);
  opacity:0;background:linear-gradient(90deg,transparent,rgba(244,238,228,.07) 50%,transparent);transition:opacity 1s 1.4s}
html.kn body .sig.kn-in .kn-scan{opacity:1;animation:knScan 11s cubic-bezier(.45,0,.55,1) infinite;animation-delay:1.4s}
@keyframes knScan{to{left:130%}}
/* Karten, Regeln, Kennzahlen, Vergleiche, Rollen: ein Lichtkegel folgt dem Zeiger
   (kino.js setzt den Kasten und die Position; ohne Zeiger passiert nichts) */
html.kn .kn-host{position:relative;isolation:isolate}
html.kn .kn-spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .55s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(226,85,30,.17),rgba(244,238,228,.04) 42%,transparent 72%)}
html.kn .kn-host:hover .kn-spot{opacity:1}
/* Chronik: das Jahr in der Mitte der Bahn ist das lebende */
html.kn body .hist__i.kn-live .hist__y{color:var(--ember)}
html.kn body .hist__i.kn-live::after{animation:knPing 1.8s ease-out infinite}
/* Fliesstext: das lebende Kapitel im Verzeichnis leuchtet */
html.kn body .prose__toc a.is-live::before{box-shadow:0 0 8px rgba(226,85,30,.8)}
/* Kinobahn: Kennzeichen zaehlen hoch (Ziffern tabellarisch, damit nichts zittert) */
html.kn body .cine__meta span{font-variant-numeric:tabular-nums}

/* ---- 16 · Fassung 3: Schaerfe, Licht, Beruehrung ---------------------------------- */
/* Schaerfe ziehen: jeder Abschnittstitel kommt unscharf und stellt sich scharf —
   als Animation, damit die Regie-Uebergaenge (Weg, Deckkraft) unberuehrt bleiben */
html.kn body #main .psec__head.is-in .psec__title,html.kn body #main .psec__head.mk-in .psec__title,
html.kn body #main .rail__head.is-in .psec__title,html.kn body #main .rail__head.mk-in .psec__title,
html.kn body #main [data-reveal].is-in > .psec__title{animation:knSharp 1.1s var(--kn-out) backwards;animation-delay:min(var(--rg-d,0ms),400ms)}
/* backwards statt both: nach dem Lauf gilt wieder der normale Stil (scharf) — der Titel
   kann so nie unscharf stehen bleiben, was immer den Lauf unterbricht */
@keyframes knSharp{0%{filter:blur(9px)}100%{filter:blur(0px)}}
/* Bilder stellen sich scharf, waehrend der Vorhang faellt (kinetik.css) */
html.kn .kx-img > img,html.kn .kx-img > video,html.kn .kx-img > picture > img{filter:blur(10px) saturate(.75);
  transition:filter 1.5s var(--kn-out) calc(var(--kx-d,0ms) + .1s),transform 2.4s var(--kn-cam) var(--kx-d,0ms)}
html.kn .kx-img.kx-in > img,html.kn .kx-img.kx-in > video,html.kn .kx-img.kx-in > picture > img{filter:none}
/* Hauptknoepfe: ein Lichtstreif laeuft einmal beim Erscheinen und bei jeder Beruehrung */
html.kn .kn-glint{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%) no-repeat;
  background-size:250% 100%;background-position:200% 0}
html.kn body .btn--primary:hover .kn-glint,html.kn body .btn--primary:focus-visible .kn-glint{animation:knGlintB .8s var(--kn-io) both}
@keyframes knGlintB{from{background-position:200% 0}to{background-position:-100% 0}}
/* Fragen: die offene Frage traegt ihre Linie */
html.kn body .faq__item summary{position:relative}
html.kn body .faq__item summary::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--ember),transparent 60%);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--kn-out)}
html.kn body .faq__item[open] summary::after{transform:none}

/* ---- 17 · Mobil: dieselbe Sprache, kuerzere Wege ----------------------------------- */
@media (max-width:860px){
  /* der Klebesatz ist hier gestapelt: die Schiene liegt waagerecht ueber den Schritten */
  html.kn .kn-rail{display:block;left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  html.kn .kn-rail i{width:calc(var(--kn-p,0) * 100%);height:100%;background:linear-gradient(90deg,rgba(226,85,30,.2),var(--ember))}
  html.kn .kn-rail i::after{left:auto;right:0;bottom:50%;transform:translate(50%,50%);width:6px;height:6px}
  html.kn body .stick__steps:has([aria-current="true"]) .stick__step:not([aria-current="true"]){opacity:.58;transform:none}
  html.kn body .stick__media .kn-gate{inset:10px}
  html.kn body .stick__media .kn-gate i{width:12px;height:12px}
}
@media (max-width:760px){
  html.kn body .cine{transition-duration:1.1s}
  html.kn body .cine::before,html.kn body .cine::after{transition-delay:.7s}
  html.kn .kn-gate{inset:calc(var(--kn-bar) + 10px) var(--gutter,18px)}
  html.kn .kn-gate i{width:12px;height:12px}
  /* unten stehen die Kennzeichen, oft umgebrochen — die unteren Ecken weichen */
  html.kn body .cine .kn-gate i:nth-child(3),html.kn body .cine .kn-gate i:nth-child(4){display:none}
  html.kn .kn-flare{width:110vw;height:110vw;left:20%;top:-30%}
  html.kn body .cine__inner{transform:translate3d(0,calc((.5 - var(--kn-p,.5)) * 18px),0)}
  html.kn body .cine__h{transform:translate3d(0,18px,0);filter:blur(5px)}
  html.kn body .cine__k,html.kn body .cine__inner > .label{letter-spacing:.3em}
  html.kn body .cine__meta span{padding-left:14px}
  html.kn body .form > *{transform:translate3d(0,12px,0)}
  html.kn body .prose__body h2::after{width:40px}
  html.kn .kn-prog{margin-top:12px}
  html.kn body .soonpanel__row::before{top:26%;bottom:26%}
  html.kn body .kapply__box::after{display:none}
}
/* Beruehrung statt Zeiger: Karten geben beim Druecken nach */
@media (hover:none){
  html.kn body .card:active,html.kn body .rule:active,html.kn body .rfolder:active,html.kn body .soonpanel__row:active,
  html.kn body .lex__item:active,html.kn body .tt__tab:active{transform:scale(.985);transition:transform .15s var(--kn-out)}
  html.kn body .btn--primary:active .kn-glint{animation:knGlintB .7s var(--kn-io) both}
}

/* ---- 18 · Fassung 4: Klappe, Umgebungslicht, Tiefe ----------------------------- */
/* Klappe: die Kicker-Zeile jedes Abschnittskopfs wird getippt (Schritte statt Kurve).
   Die Maske hat oben und unten Luft, damit die Linie unter dem Label (mobile.css,
   layouts.css) nicht mit abgeschnitten wird. */
html.kn body #main .psec__head .label,html.kn body #main .rail__head .label{clip-path:inset(-1.2em 100% -1.2em 0)}
html.kn body #main .psec__head.is-in .label,html.kn body #main .psec__head.mk-in .label,
html.kn body #main .rail__head.is-in .label,html.kn body #main .rail__head.mk-in .label{clip-path:inset(-1.2em 0 -1.2em 0);
  transition:clip-path 1.1s steps(22) .15s,opacity .5s,transform .8s var(--kn-out)}
/* Umgebungslicht (Fassung 4) wieder entfernt — Fassung 6: die Farbverlaeufe zwischen den
   Abschnitten brachen den einheitlichen Grundton (Wunsch des Kunden) */
html.kn .kn-amb{display:none!important}
/* Tiefe: der Abschnittskopf wandert beim Scrollen etwas langsamer als der Inhalt */
html.kn body #main > section > .shell > .psec__head,html.kn body #main > section > .shell > .rail__head{
  transform:translate3d(0,calc((.5 - var(--kn-p,.5)) * 44px),0)}
@media (max-width:760px){
  html.kn body #main > section > .shell > .psec__head,html.kn body #main > section > .shell > .rail__head{
    transform:translate3d(0,calc((.5 - var(--kn-p,.5)) * 18px),0)}
  html.kn body #main .psec__head.is-in .label,html.kn body #main .psec__head.mk-in .label{transition-duration:.8s}
}

/* ---- 19 · Fassung 7: Mobil-Regie mit Grafikbudget ------------------------------------
   Safari auf iOS gibt bei zu vielen grossen Grafikflaechen auf (die Seite wird weiss).
   Auf dem Telefon gilt darum ein Budget: keine Weichzeichner auf Bildern, keine
   Kamerafahrt je Bild, kein Schnitt auf ganzen Abschnitten, kein Staub (kino2/3).
   Dafuer bekommt der Klebesatz seine eigentliche Idee zurueck: das Bild klebt unter
   der Navigation und wechselt beim Lesen — bisher sah man auf dem Telefon nur das
   erste Foto. */
@media (max-width:860px){
  html.kn .kx-img > img,html.kn .kx-img > video,html.kn .kx-img > picture > img{filter:none;transition:transform 1.6s var(--kn-cam)}
  html.kn body .cine__media video,html.kn body .cine__media img{transform:none;transition:none}
  html.kn body .stick__media{position:sticky;top:calc(var(--nav-h,64px) + 10px);z-index:2;aspect-ratio:auto;height:min(40svh,340px);
    box-shadow:0 18px 40px -20px rgba(11,8,6,.7)}
  html.kn body .stick__media figure{transition:opacity .6s ease,clip-path .8s cubic-bezier(.76,0,.24,1);transform:none}
  html.kn body .stick__media figure.is-on img,html.kn body .stick__media figure.is-on video{animation:none}
  html.kn body .stick__steps{padding-top:14px}
  html.kn body .stick__step{min-height:44svh;justify-content:flex-start;padding-top:8px}
  html.kn body .stick__step:last-child{min-height:30svh}
  html.kn body .stick__steps:has([aria-current="true"]) .stick__step:not([aria-current="true"]){opacity:.5}
}

} /* Ende no-preference */

/* ---- Wortmasken (motion.css) schneiden bei Zeilenhoehe .94 die Unterlaengen ab:
   die Maske bekommt unten Luft, der negative Rand haelt die Zeile gleich hoch */
html.kn .mw{padding-bottom:.2em;margin-bottom:-.2em}

/* ---- Ruhe: ohne Bewegung steht alles im Endzustand ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .kn-grain,.kn-gate,.kn-rail,.kn-toc,.kn-prog,.kn-flare,.kn-scan,.kn-spot,.kn-glint,.kn-amb{display:none!important}
}


/* ---- 17 · Fassung 8: Embleme der Festival-Karten ---------------------------------
   Die sechs Zeichen der Karten (Kaffee, Talks, Musik, Workshops, Food, Tuete) sassen
   auf dem Telefon in einem blassen, verwaschenen Kasten — 18 px klein, halb im Fluss,
   halb absolut. Jetzt ein Emblem: schwarze Scheibe mit Innenlicht, ein Ember-Bogen,
   der langsam um den Rand laeuft, ein Glutschein, der atmet, und darin das Zeichen
   in Elfenbein mit Ember-Akzenten. Jedes Zeichen bewegt sich weiter: Dampf steigt,
   Punkte tippen, Pegel atmen, der Tropfen faellt, der Deckel hebt sich, der
   Lichtstreif wandert. Alles kleine Transformationen auf 56 px — kein Speicher.  */
@keyframes knOrbit{to{transform:rotate(360deg)}}
@keyframes knGlowPuls{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes eSteam{0%{opacity:0;transform:translateY(2.5px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-4px)}}
@keyframes eDots{0%,55%,100%{opacity:.35;transform:translateY(0)}25%{opacity:1;transform:translateY(-1.8px)}}
@keyframes eEq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
@keyframes eDrop{0%{opacity:0;transform:translateY(0)}12%{opacity:1}62%{opacity:1;transform:translateY(9px)}72%,100%{opacity:0;transform:translateY(9px)}}
@keyframes eRing{0%,60%{opacity:0;transform:scale(.3)}68%{opacity:.95}100%{opacity:0;transform:scale(1.9)}}
@keyframes eLid{0%,58%,100%{transform:translateY(0)}22%,40%{transform:translateY(-3.4px)}}
@keyframes eSteam2{0%,58%,100%{opacity:0;transform:translateY(1px)}26%,40%{opacity:.85;transform:translateY(-1.5px)}}
@keyframes eShine{0%,60%{transform:translateX(-18px);opacity:0}70%{opacity:.75}100%{transform:translateX(20px);opacity:0}}

html.kn .xp__i{position:relative;display:grid;place-items:center;width:56px;height:56px;margin:0 0 1rem;
  border-radius:50%;color:var(--ivory);isolation:isolate;filter:none;
  background:radial-gradient(circle at 34% 28%,rgba(244,238,228,.17),rgba(11,8,6,.84) 62%);
  box-shadow:inset 0 0 0 1px rgba(244,238,228,.16),0 12px 28px -16px rgba(0,0,0,.85)}
html.kn .xp__i::before{content:'';position:absolute;inset:-1.5px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(226,85,30,0) 0 66%,var(--ember-fest,#E2551E) 84%,rgba(226,85,30,0) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 1.6px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 1.6px));
  animation:knOrbit 7.5s linear infinite}
html.kn .xp__i::after{content:'';position:absolute;inset:0;border-radius:50%;z-index:-2;
  box-shadow:0 0 28px -4px rgba(226,85,30,.8);animation:knGlowPuls 4.4s ease-in-out infinite}
html.kn .xp__i svg{width:30px;height:30px;overflow:visible}
html.kn .xp__i .e-acc,html.kn .xp__i .e-acc *{stroke:var(--ember-fest,#E2551E)}
html.kn .xp__i .e-drop,html.kn .xp__i .e-dots{fill:var(--ember-fest,#E2551E)}
html.kn .xp__i .e-drop{stroke:none}

/* Bewegung der Zeichen — gilt auch in der Hero-Leiste, wo Tasse und Musik sitzen */
.e-dim{opacity:.45}
.e-crema{opacity:.2}
.e-steam path{opacity:0;animation:eSteam 3.2s ease-out infinite}
.e-steam path:nth-child(2){animation-delay:.55s}
.e-steam path:nth-child(3){animation-delay:1.1s}
.e-dots circle{animation:eDots 1.5s ease-in-out infinite}
.e-dots circle:nth-child(2){animation-delay:.22s}
.e-dots circle:nth-child(3){animation-delay:.44s}
.e-eq rect{transform-box:fill-box;transform-origin:50% 100%;animation:eEq 1.3s ease-in-out infinite}
.e-eq rect:nth-child(2){animation-duration:1.05s;animation-delay:.2s}
.e-eq rect:nth-child(3){animation-duration:1.5s;animation-delay:.1s}
.e-eq rect:nth-child(4){animation-duration:1.15s;animation-delay:.35s}
.e-eq rect:nth-child(5){animation-duration:1.4s;animation-delay:.05s}
.e-drop{animation:eDrop 2.3s cubic-bezier(.45,0,.85,.55) infinite}
.e-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:eRing 2.3s ease-out infinite}
.e-lid{animation:eLid 4.2s cubic-bezier(.3,.9,.3,1) infinite}
.e-steam2 path{opacity:0;animation:eSteam2 4.2s ease-in-out infinite}
.e-shine{opacity:0;stroke:rgba(244,238,228,.85);stroke-width:2.4;animation:eShine 5.2s ease-in-out infinite}

/* Telefon: das Emblem sitzt oben rechts in der Karte, gegenueber der Ziffer */
@media (max-width:860px){
  html.kn .xp__cell .xp__i{position:absolute;top:clamp(12px,3.4vw,16px);right:clamp(12px,3.4vw,16px);z-index:2;
    width:46px;height:46px;margin:0;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.kn .xp__cell .xp__i svg{width:25px;height:25px}
}
@media (prefers-reduced-motion:reduce){
  html.kn .xp__i::before,html.kn .xp__i::after,.e-steam path,.e-dots circle,.e-eq rect,.e-drop,.e-ring,.e-lid,.e-steam2 path,.e-shine{animation:none!important}
  .e-steam path,.e-steam2 path{opacity:.7}
  .e-dots circle{opacity:.8}
  .e-ring,.e-shine{opacity:0}
}