/* Kino-Schicht für beide Entwürfe. Greift nur mit html.kino (setzt kino.js, nie bei "Bewegung reduzieren").
   Nur transform, opacity, clip-path und filter. Endzustand ohne JS = alles sichtbar.
   Loop 4 (11.09. abends): Hero-Abgang, Zitat gepinnt, Werdegang als horizontale Fahrt, Schritt-Stand,
   Bilder wachsen in die volle Breite, magnetische Knöpfe, Fuß-Vorhang, Seitenwechsel als Wischer. */

/* Zeilenmasken für Headlines: Achtung: Descender-Padding, sonst werden g, p, y beschnitten */
.kino .zm{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.kino .zm>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--kurve);will-change:transform}
.kino .zm.ist-da>span{transform:none}
/* Hero: das betonte Wort bekommt nach dem Auftritt eine Linie */
.kino .hero h1 em{position:relative}
.kino .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;background:var(--petrol);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--kurve-bild) 1.1s}
.kino .geladen .hero h1 em::after{transform:scaleX(1)}

/* Einfacher Auftritt: aus leichter Unschärfe nach oben */
.kino [data-auf]{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--kurve),transform 1.1s var(--kurve),filter .9s var(--kurve)}
.kino [data-auf].ist-da{opacity:1;transform:none;filter:blur(0)}

/* Wortweiser Auftritt (kino.js zerlegt .hero-sub und .zitat-text in Wörter) */
.kino [data-worte]{opacity:1;transform:none;filter:none}
.kino [data-worte] .w{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .55s var(--kurve),transform .7s var(--kurve);transition-delay:var(--wd,0ms)}
.kino [data-worte].ist-da .w{opacity:1;transform:none}

/* Gestaffelte Listen (Delay setzt kino.js je Kind) */
.kino [data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .75s var(--kurve),transform 1s var(--kurve)}
.kino [data-stagger].ist-da>*{opacity:1;transform:none}
/* Grundsätze: Begriff bekommt eine Linie, die sich zieht; Überschrift bleibt links stehen */
.kino .grundsaetze dt{position:relative;padding-top:.85rem;border-top-color:transparent}
.kino .grundsaetze dt::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--tinte);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--kurve-bild)}
.kino .grundsaetze dl.ist-da dt::before{transform:scaleX(1);transition-delay:var(--d,0ms)}
@media (min-width:901px){.kino .grundsaetze .links,.kino .kontakt .links{position:sticky;top:calc(var(--kopf) + 2.5rem);align-self:start}}
@media (pointer:fine){
  .kino .grundsaetze dl{position:relative}
  .kino .grundsaetze dl::after{content:"";position:absolute;inset:-2rem;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--petrol) 14%,transparent),transparent 70%);opacity:0;transition:opacity .5s}
  .kino .grundsaetze dl:hover::after{opacity:1}
}

/* Bilder: öffnen sich, dann Parallaxe */
.kino [data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--kurve-bild)}
.kino [data-clip].ist-da{clip-path:inset(0 0 0 0)}
.kino [data-clip="links"]{clip-path:inset(0 100% 0 0)}
.kino [data-clip="rechts"]{clip-path:inset(0 0 0 100%)}
.kino [data-parallax]{overflow:hidden}
.kino .parallax-box{border-radius:2px}
.kino [data-parallax]>img{will-change:transform;transform:scale(1.14)}
/* Nur-Bild: wächst beim Scrollen von Randbreite auf volle Breite (kino.js setzt --exp 0..1) */
.kino .nurbild .parallax-box{clip-path:inset(0 calc(var(--rand) * (1 - var(--exp,1))) 0 calc(var(--rand) * (1 - var(--exp,1))));transition:none}

/* Hero (C): Foto öffnet sich mit dem Vorhang; beim Scrollen geht der Text schneller als das Bild (kino.js setzt --hy) */
.kino .hero-foto{animation:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--kurve-bild)}
.kino .hero-foto img{animation:none;transition:transform .6s var(--kurve)}
.kino .geladen .hero-foto{clip-path:inset(0 0 0 0)}
.kino .geladen.gescrollt .hero-foto{transition:none}
.kino .hero-text>*{will-change:transform}
/* Hero (B): Foto atmet auf, Text folgt */
.kino .b-hero img{animation:none;opacity:0;transition:opacity 1.2s ease}
.kino .geladen .b-hero img{opacity:1}

/* Zitat (C): gepinnt, Wörter färben sich mit dem Scroll ein, der Absatz folgt */
.kino .zitat-satz i{font-style:inherit;opacity:.3;transition:opacity .3s linear}
@media (min-width:901px){
  .kino .zitat.abstand-weit{padding:0;min-height:150vh}
  .kino .zitat .pin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
  .kino .zitat .pin>.raster{width:100%}
  .kino .zitat-satz{font-size:clamp(2.4rem,4.4vw,4.25rem)}
  .kino .zitat .pin .zitat-text{opacity:0;transform:translateY(14px);filter:none;transition:opacity .7s var(--kurve),transform .9s var(--kurve)}
  .kino .zitat .pin.satz-fertig .zitat-text{opacity:1;transform:none}
}

/* Schritte (C, Startseite): links steht die Nummer des Schritts, an dem man gerade ist, und eine Linie füllt sich */
.kino .schritte-stand{grid-column:1/4;grid-row:2;position:sticky;top:calc(var(--kopf) + 2.5rem);align-self:start;display:grid;gap:1.25rem;justify-items:start;padding-top:1.75rem}
.kino .schritte-stand .stand-nr{font-size:clamp(3.5rem,7vw,6rem);line-height:.9;font-weight:300;letter-spacing:-.03em;color:var(--tinte);position:relative;display:grid}
.kino .schritte-stand .stand-nr>span{grid-area:1/1;opacity:0;transform:translateY(40%);transition:opacity .35s,transform .5s var(--kurve);font-variant-numeric:tabular-nums}
.kino .schritte-stand .stand-nr>span.an{opacity:1;transform:none}
.kino .schritte-stand .stand-nr>span.war{opacity:0;transform:translateY(-40%)}
.kino .schritte-stand .stand-linie{width:1px;height:8rem;background:var(--linie);position:relative;overflow:hidden}
.kino .schritte-stand .stand-linie i{position:absolute;inset:0;background:var(--petrol);transform-origin:top;transform:scaleY(var(--p,0))}
.kino .schritte-stand .stand-text{font-size:var(--klein);color:var(--grau);max-width:22ch}
@media (max-width:900px){.kino .schritte-stand{display:none}}
.kino .schritte li{transition:background-color .3s,padding-left .35s var(--kurve)}
.kino .schritte li.aktiv .nr,.kino .schritte li:hover .nr{color:var(--petrol)}
@media (min-width:901px){.kino .schritte:not(.lang)[data-stagger].ist-da>li:not(.aktiv):not(:hover){opacity:.42}.kino .schritte:not(.lang)>li{transition:opacity .5s var(--kurve),transform 1s var(--kurve)!important}}
.kino .schritte:not(.lang) li.aktiv h3{color:var(--petrol)}
.kino .schritte h3{transition:color .3s}

/* Werdegang (C): auf dem Desktop eine horizontale Fahrt durch die Jahre, die Fläche bleibt stehen */
/* Geisterjahr nur auf der Desktop-Fahrt; darunter stand es als nackte „1990“ über der Überschrift (Frank, 29.09.) */
.leiste-jahr{display:none}
@media (min-width:1100px){.kino .leiste-jahr{display:block}}
.kino .leiste li{transition-delay:calc(var(--i,0) * 90ms)}
@media (min-width:1100px){
  .kino .werdegang.flaeche{padding:0;min-height:300vh;clip-path:inset(0 calc(var(--rand) * (1 - var(--exp,0))) 0 calc(var(--rand) * (1 - var(--exp,0))) round calc(4px * (1 - var(--exp,0))))}
  .kino .werdegang.flaeche.voll{clip-path:none}
  .kino .werdegang .pin{transform:translateZ(0)}
  .kino .werdegang .leiste li{will-change:opacity}
  .kino .leiste-jahr{position:absolute;will-change:opacity;contain:paint;right:var(--rand);top:50%;transform:translateY(-58%);font-size:clamp(14rem,26vw,30rem);font-weight:300;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,231,225,.26);pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;transition:opacity .5s}
  .kino .leiste-jahr.wechsel{opacity:0}
  .kino .werdegang .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:var(--kopf) 0 2rem}
  .kino .werdegang .leiste-wrap{margin-top:4.5rem;width:max-content}
  .kino .werdegang .leiste{grid-template-columns:repeat(8,minmax(300px,1fr));gap:3rem;will-change:transform}
  .kino .werdegang .leiste-wrap .leiste-linie{transition:none;transform:scaleX(var(--p,0))}
  .kino .werdegang .leiste li{opacity:.35;transition:opacity .5s;padding-top:1.75rem}
  .kino .werdegang .leiste li.an{opacity:1}
  .kino .werdegang .leiste li::before{opacity:0;transition:opacity .3s,transform .5s var(--kurve);transition-delay:0s;transform:scale(.6)}
  .kino .werdegang .leiste li.an::before{opacity:1;transform:none}
  .kino .werdegang .leiste time{font-size:clamp(2.5rem,4vw,3.75rem);line-height:1;margin-bottom:.9rem;font-weight:300;letter-spacing:-.03em}
  .kino .werdegang .leiste span{max-width:26ch;font-size:.9375rem}
  .kino .werdegang .leiste b{font-size:1.0625rem}
  .kino .werdegang .leiste-link{margin-top:3rem}
  .kino .werdegang .raster{row-gap:1.5rem}
}

/* Fotopaar: Bild wächst unter der Maske, Wort rückt nach */
.kino .paar-teil img{transition:transform 1.1s var(--kurve),filter .3s;will-change:transform}
.kino .paar-teil:hover img{transform:scale(1.04)}
.kino .paar-wort{transition:transform .35s var(--kurve)}
.kino .paar-teil:hover .paar-wort{transform:translateX(6px)}

/* Presse (Über mich): Ausschnitt bekommt beim Zeigen Farbe und hebt sich */
.kino .ausschnitte img{transition:filter .5s,transform .6s var(--kurve)}
.kino .ausschnitte figure:hover img{filter:grayscale(0) contrast(1);transform:translateY(-6px)}
.kino .stationen li{transition:padding-left .35s var(--kurve)}
.kino .stationen li:hover{padding-left:.5rem}
.kino .stationen li:hover time{color:var(--petrol)}
.kino .stationen time{transition:color .3s}

/* Knöpfe füllen sich von links und ziehen leicht zum Zeiger (kino.js setzt --mx/--my) */
.kino .knopf{background-image:linear-gradient(var(--tinte),var(--tinte));background-size:0 100%;background-repeat:no-repeat;background-position:left;transition:background-size .4s var(--kurve),color .25s,border-color .25s,transform .35s var(--kurve);transform:translate(var(--mx,0px),var(--my,0px))}
.kino .knopf:hover{background-size:100% 100%;color:var(--papier)}
.kino .knopf:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97)}
.kino .knopf.voll{background-image:linear-gradient(var(--petrol),var(--petrol))}
.kino .knopf.voll:hover{background-color:var(--tinte);border-color:var(--petrol)}
.kino .flaeche .knopf,.kino .b-flaeche .knopf{border-color:var(--flaeche-text);color:var(--flaeche-text)}
.kino .pfeillink{transition:transform .35s var(--kurve);transform:translate(var(--mx,0px),var(--my,0px))}

/* Listenzeilen */
.kino .b-liste li{transition:background-color .3s,padding-left .35s var(--kurve)}
.kino .b-liste li:hover{padding-left:.5rem}
.kino .kontakt-daten a{transition:color .2s}
.kino .kontakt-daten a:hover{color:var(--petrol)}
/* Formular: Beschriftung rückt beim Fokus mit, Feld hebt sich minimal */
.kino .feld label{transition:color .2s,transform .3s var(--kurve);transform-origin:left}
.kino .feld:focus-within>label{color:var(--petrol);transform:translateX(3px)}
.kino .feld{position:relative}
.kino .feld:has(>input[type=text],>input[type=email],>input[type=tel],>select)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--petrol);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--kurve);pointer-events:none}
.kino .feld:focus-within::after{transform:scaleX(1)}

/* Kopf weicht beim Runterscrollen, kommt beim Hochscrollen */
.kino .kopf{transition:transform .4s var(--kurve),border-color .2s}
.kino .kopf.weg{transform:translateY(-100%)}
.kino .logo img{transition:transform .3s var(--kurve)}
.kino .logo:hover img{transform:translateX(2px)}

/* Fuß: liegt unter der Seite und wird beim Scrollen freigegeben */
@media (min-width:701px){
  .kino main{position:relative;z-index:1;background:var(--papier)}
  .kino .fuss{position:sticky;bottom:0;z-index:0;margin-top:0}
  .kino main{padding-bottom:var(--eng)}
}

/* Seitenwechsel: neue Seite wischt von unten herein */
@view-transition{navigation:auto}
::view-transition-old(root){animation:kinoAus .3s ease both}
::view-transition-new(root){animation:kinoEin .7s var(--kurve-bild) both}
@keyframes kinoAus{to{opacity:0;transform:translateY(-14px)}}
@keyframes kinoEin{from{clip-path:inset(100% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}
.kino body.geht{opacity:0;transition:opacity .22s ease}

/* Intro: Logo, Linie, Abgang */
.kino .intro__linie{display:block;height:1px;width:min(34vw,240px);margin-top:1.6rem;background:var(--petrol-hell);transform:scaleX(0);transform-origin:left}
.kino .intro.laeuft .intro__linie{animation:introLinie .7s var(--kurve-bild) .55s forwards}
.kino .intro.geht .intro__linie{animation:introLogoWeg .3s ease forwards}
@keyframes introLinie{to{transform:scaleX(1)}}
.intro__mitte{display:flex;flex-direction:column;align-items:center}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Mobilmenü: Einträge kommen gestaffelt */
@media (max-width:900px){
  .kino .mobilmenu a{opacity:0;transform:translateY(12px);transition:opacity .4s var(--kurve),transform .5s var(--kurve)}
  .kino body.menu-offen .mobilmenu a{opacity:1;transform:none}
  .kino body.menu-offen .mobilmenu a:nth-child(1){transition-delay:60ms}.kino body.menu-offen .mobilmenu a:nth-child(2){transition-delay:120ms}.kino body.menu-offen .mobilmenu a:nth-child(3){transition-delay:180ms}.kino body.menu-offen .mobilmenu a:nth-child(4){transition-delay:240ms}
}

/* Häufige Fragen: Antwort blendet ein */
.kino .faq details[open] p{animation:faqAuf .45s var(--kurve) both}
@keyframes faqAuf{from{opacity:0;transform:translateY(-6px)}}

/* Fotostreifen: auf dem Desktop treibt der Scroll die Bahn seitwärts (kino.js setzt transform) */
@media (min-width:901px){
  .kino .streifen-bahn{overflow:visible;will-change:transform}
}
.kino .streifen figure img{transition:transform .8s var(--kurve)}
.kino .streifen figure:hover img{transform:scale(1.03)}

.kino .tafeln[data-stagger]>*{transform:translateY(24px) scale(.985);transition:opacity .8s var(--kurve),transform 1.1s var(--kurve),flex 1s var(--kurve-bild)}
.kino .tafeln[data-stagger].ist-da>*{transform:none}
@media (max-width:900px){.kino .tafeln[data-stagger]>*{transition:opacity .8s var(--kurve),transform 1.1s var(--kurve),height .8s var(--kurve-bild)}}