/* ============================================================================ Coffee Festival Europe — REGIE · die Choreografie der Abschnitte je Thema (Stand 05.09.2026) Die Sprache bleibt ueberall dieselbe: derselbe Kopf, dieselbe Trennlinie, dieselben Farben und Kurven. Was sich unterscheidet, ist die REGIE, mit der ein Abschnitt seinen Inhalt hereinbringt — und die folgt dem Thema der Seite, genau wie das Motiv-Band: plan Aussteller: Karten bauen sich wie Kojen auf, eine Suchlinie faehrt ueber das Raster, die Reihenfolge laeuft in Zeilen chart Fakten: Kennzahlen zaehlen hoch, Balken wachsen, Karten steigen tiers Sponsoring: Stufen von unten, jede eine Stufe hoeher check Informationen: Zeilen setzen sich und bekommen einen Haken route Anfahrt, Stadt: von links entlang einer Linie, die sich zieht clock Programm, Besuch: in Zeitfolge von links, mit laufender Marke grounds Gelaende: wie Nadeln auf einer Karte, mit Ring access Barrierefreiheit: die Rampe hinauf, schraeg von unten links cycle Nachhaltigkeit: aus einer Drehung heraus, im Kreis gestaffelt bubble Fragen, Kontakt: wie Sprechblasen, aus der Ecke, mit Punkten rings Festival, Erlebnisse: als Welle aus der Mitte growth Ueber uns, Team, Updates: wachsend von unten, links nach rechts ticker Journal, Presse, Medien: zeilenweise aufgedeckt wie gesetzt film Rueckblick: als Bilder von rechts, Frame fuer Frame letters Lexikon: umgeklappt wie Karteikarten bean Spiel: federnd Der Schluessel steht als data-regie am (gesetzt von motive.js). Das Ende jeder Bewegung ist immer derselbe Ruhezustand aus page.css und thememotion.css; hier werden nur Anfang, Kurve und Staffelung ausgetauscht. Staffelung: regie.js gibt jedem Kind --rg-d (Rasterordnung, Kreis, Zeit). Bewegt werden transform, opacity und clip-path; nichts, was Layout kostet. ========================================================================== */ @media (prefers-reduced-motion:no-preference){ /* ---- Grundlage: eigener Ruhezustand mit Gewicht, eigene Staffelung -------- */ /* :nth-child(n) nur des Gewichts wegen: thememotion.css staffelt mit `…:nth-child(2)` (0,4,1), und die Regie-Staffelung muss darueber liegen. */ html body[data-regie] [data-reveal] > :nth-child(n){transition-delay:0s} html body[data-regie] [data-reveal].is-in > :nth-child(n){ opacity:1;transform:none;clip-path:none;filter:none; transition-delay:var(--rg-d,0ms)} /* ---- plan · Aufbau in Zeilen, Suchlinie ueber dem Raster ------------------- */ html body[data-regie="plan"] [data-reveal] > :nth-child(n){transform:translate3d(0,10px,0) scale(.96);clip-path:inset(0 100% 0 0 round 18px)} html body[data-regie="plan"] [data-reveal].is-in > :nth-child(n){ transition:opacity .5s var(--e-out-cubic),transform .9s var(--e-out-expo),clip-path .8s var(--e-out-expo)} html body[data-regie="plan"] [data-reveal]{position:relative} html body[data-regie="plan"] [data-reveal]::after{content:'';position:absolute;top:-4%;bottom:-4%;left:0;width:2px; background:linear-gradient(180deg,transparent,var(--ember),transparent);opacity:0;pointer-events:none; box-shadow:0 0 18px 2px rgba(226,85,30,.35)} html body[data-regie="plan"] [data-reveal].is-in::after{animation:rgSweep 1.6s var(--e-out-cubic) .05s both} @keyframes rgSweep{0%{opacity:0;left:0}10%{opacity:1}90%{opacity:1}100%{opacity:0;left:100%}} html body[data-regie="plan"] .card__ico{position:relative} html body[data-regie="plan"] .card__ico::after{content:'';position:absolute;inset:-4px;border:1px solid var(--ember);border-radius:inherit; opacity:0;transform:scale(1.3);transition:opacity .5s,transform .7s var(--e-out-expo);transition-delay:calc(var(--rg-d,0ms) + .5s)} html body[data-regie="plan"] [data-reveal].is-in .card__ico::after{opacity:.6;transform:none} /* ---- chart · steigen, Balken unter dem Titel waechst ---------------------- */ html body[data-regie="chart"] [data-reveal] > :nth-child(n){transform:translate3d(0,28px,0) scaleY(.92);transform-origin:bottom} html body[data-regie="chart"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1s var(--e-out-expo)} html body[data-regie="chart"] .kpi{position:relative;overflow:hidden} html body[data-regie="chart"] .kpi::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%; background:linear-gradient(90deg,var(--pt),transparent);transform:scaleX(0);transform-origin:left; transition:transform 1.4s var(--e-out-expo) calc(var(--rg-d,0ms) + .3s)} html body[data-regie="chart"] [data-reveal].is-in .kpi::after{transform:scaleX(1)} /* ---- tiers · jede Karte eine Stufe hoeher ---------------------------------- */ html body[data-regie="tiers"] [data-reveal] > :nth-child(n){transform:translate3d(0,calc(24px + var(--rg-i,0) * 14px),0)} html body[data-regie="tiers"] [data-reveal].is-in > :nth-child(n){transition:opacity .7s var(--e-out-cubic),transform 1.1s var(--e-out-expo)} /* ---- check · Zeile setzt sich, Haken kommt nach --------------------------- */ html body[data-regie="check"] [data-reveal] > :nth-child(n){transform:translate3d(-16px,0,0)} html body[data-regie="check"] [data-reveal].is-in > :nth-child(n){transition:opacity .45s var(--e-out-cubic),transform .7s var(--e-out-expo)} html body[data-regie="check"] .card,html body[data-regie="check"] .rule,html body[data-regie="check"] .faq__item{position:relative} html body[data-regie="check"] .rg-tick{position:absolute;top:14px;right:14px;width:18px;height:18px;pointer-events:none} html body[data-regie="check"] .rg-tick path{fill:none;stroke:var(--ember);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--e-out-cubic) calc(var(--rg-d,0ms) + .55s)} html body[data-regie="check"] [data-reveal].is-in .rg-tick path{stroke-dashoffset:0} /* ---- route · von links entlang einer Linie -------------------------------- */ html body[data-regie="route"] [data-reveal] > :nth-child(n){transform:translate3d(-40px,0,0)} html body[data-regie="route"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1s var(--e-out-expo)} html body[data-regie="route"] [data-reveal]{position:relative} html body[data-regie="route"] [data-reveal]::before{content:'';position:absolute;left:0;right:0;top:-14px;height:1px; background:repeating-linear-gradient(90deg,var(--pt) 0 8px,transparent 8px 16px);opacity:.5; transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e-out-expo)} html body[data-regie="route"] [data-reveal].is-in::before{transform:scaleX(1)} /* ---- clock · in Zeitfolge, eine Marke laeuft mit -------------------------- */ html body[data-regie="clock"] [data-reveal] > :nth-child(n){transform:translate3d(-22px,0,0);clip-path:inset(0 100% 0 0 round 18px)} html body[data-regie="clock"] [data-reveal].is-in > :nth-child(n){transition:opacity .4s var(--e-out-cubic),transform .8s var(--e-out-expo),clip-path .9s var(--e-out-expo)} html body[data-regie="clock"] [data-reveal]{position:relative} html body[data-regie="clock"] [data-reveal]::after{content:'';position:absolute;top:-6%;bottom:-6%;left:0;width:1px; background:var(--ember);opacity:0;pointer-events:none} html body[data-regie="clock"] [data-reveal].is-in::after{animation:rgSweep 2.2s linear .05s both} /* ---- grounds · wie Nadeln, mit Ring ---------------------------------------- */ html body[data-regie="grounds"] [data-reveal] > :nth-child(n){transform:translate3d(0,-18px,0) scale(.85);transform-origin:50% 100%} html body[data-regie="grounds"] [data-reveal].is-in > :nth-child(n){transition:opacity .45s var(--e-out-cubic),transform .9s cubic-bezier(.34,1.4,.64,1)} html body[data-regie="grounds"] .card,html body[data-regie="grounds"] .rule{position:relative} html body[data-regie="grounds"] .rg-ring{position:absolute;left:50%;bottom:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%; border:1.5px solid var(--pt);opacity:0;pointer-events:none;transform:scale(.3)} html body[data-regie="grounds"] [data-reveal].is-in .rg-ring{animation:rgRing 1.4s ease-out calc(var(--rg-d,0ms) + .4s) both} @keyframes rgRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(3)}} /* ---- access · die Rampe hinauf --------------------------------------------- */ html body[data-regie="access"] [data-reveal] > :nth-child(n){transform:translate3d(-30px,30px,0)} html body[data-regie="access"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1.1s var(--e-out-expo)} /* ---- cycle · aus der Drehung ---------------------------------------------- */ html body[data-regie="cycle"] [data-reveal] > :nth-child(n){transform:rotate(-6deg) scale(.92) translate3d(0,16px,0);transform-origin:50% 120%} html body[data-regie="cycle"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1.2s var(--e-out-expo)} /* ---- bubble · Sprechblasen, mit tippenden Punkten ------------------------- */ html body[data-regie="bubble"] [data-reveal] > :nth-child(n){transform:scale(.82) translate3d(-10px,8px,0);transform-origin:0 100%} html body[data-regie="bubble"] [data-reveal].is-in > :nth-child(n){transition:opacity .35s var(--e-out-cubic),transform .8s cubic-bezier(.34,1.45,.64,1)} html body[data-regie="bubble"] .faq__item summary{position:relative} html body[data-regie="bubble"] .rg-dots{position:absolute;left:-2px;top:50%;display:flex;gap:4px;transform:translateY(-50%);pointer-events:none;opacity:0} html body[data-regie="bubble"] .rg-dots i{width:5px;height:5px;border-radius:50%;background:var(--pt)} html body[data-regie="bubble"] [data-reveal].is-in .rg-dots{animation:rgDots 1.1s ease-out var(--rg-d,0ms) both} html body[data-regie="bubble"] [data-reveal].is-in .rg-dots i{animation:rgDot .5s ease-in-out infinite alternate} html body[data-regie="bubble"] .rg-dots i:nth-child(2){animation-delay:.15s} html body[data-regie="bubble"] .rg-dots i:nth-child(3){animation-delay:.3s} @keyframes rgDots{0%{opacity:0;transform:translate(-14px,-50%)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-22px,-50%)}} @keyframes rgDot{to{transform:translateY(-3px);opacity:.5}} /* ---- rings · Welle aus der Mitte ------------------------------------------- */ html body[data-regie="rings"] [data-reveal] > :nth-child(n){transform:scale(.9);filter:blur(4px)} html body[data-regie="rings"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1s var(--e-out-expo),filter .8s var(--e-out-cubic)} /* ---- growth · von unten wachsend ------------------------------------------- */ html body[data-regie="growth"] [data-reveal] > :nth-child(n){transform:translate3d(0,26px,0) scaleY(.9);transform-origin:bottom} html body[data-regie="growth"] [data-reveal].is-in > :nth-child(n){transition:opacity .6s var(--e-out-cubic),transform 1.1s var(--e-out-expo)} html body[data-regie="growth"] .card__t,html body[data-regie="growth"] .rule__t{position:relative} html body[data-regie="growth"] .card__t::after,html body[data-regie="growth"] .rule__t::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:36px; background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out-expo) calc(var(--rg-d,0ms) + .5s)} html body[data-regie="growth"] [data-reveal].is-in .card__t::after,html body[data-regie="growth"] [data-reveal].is-in .rule__t::after{transform:scaleX(1)} /* ---- ticker · zeilenweise gesetzt ------------------------------------------ */ html body[data-regie="ticker"] [data-reveal] > :nth-child(n){transform:none;clip-path:inset(0 100% 0 0)} html body[data-regie="ticker"] [data-reveal].is-in > :nth-child(n){transition:opacity .2s linear,clip-path .9s cubic-bezier(.2,.8,.2,1)} /* ---- film · Bilder von rechts, mit Flackern -------------------------------- */ html body[data-regie="film"] [data-reveal] > :nth-child(n){transform:translate3d(60px,0,0)} html body[data-regie="film"] [data-reveal].is-in > :nth-child(n){transition:transform .9s var(--e-out-expo);animation:rgFlicker .7s steps(3) var(--rg-d,0ms) both} @keyframes rgFlicker{0%{opacity:0}40%{opacity:.35}70%{opacity:.75}100%{opacity:1}} /* ---- letters · Karteikarten umgeklappt ------------------------------------- */ html body[data-regie="letters"] [data-reveal]{perspective:1200px} html body[data-regie="letters"] [data-reveal] > :nth-child(n){transform:rotateX(-28deg) translate3d(0,14px,0);transform-origin:50% 0} html body[data-regie="letters"] [data-reveal].is-in > :nth-child(n){transition:opacity .5s var(--e-out-cubic),transform 1s var(--e-out-expo)} /* ---- bean · federnd --------------------------------------------------------- */ html body[data-regie="bean"] [data-reveal] > :nth-child(n){transform:translate3d(0,40px,0) scale(.9,1.1)} html body[data-regie="bean"] [data-reveal].is-in > :nth-child(n){transition:opacity .4s var(--e-out-cubic),transform 1s cubic-bezier(.34,1.56,.64,1)} /* ---- Zahlen, die hochzaehlen (regie.js) ----------------------------------- */ .rg-count{font-variant-numeric:tabular-nums} } /* Ende: prefers-reduced-motion: no-preference */ /* Ohne Bewegung steht alles da, wie page.css es setzt. Die kleinen Zusaetze (Haken, Ringe, Punkte, Unterstriche) sind dann still oder unsichtbar. */ @media (prefers-reduced-motion:reduce){ .rg-tick path{stroke-dasharray:none} .rg-ring,.rg-dots{display:none} }