/* =============================================================
   ERIC EGGER WEB STUDIO — MASTER STYLESHEET v3
   Coverflow-Slider · 21 Mini-Masterpieces · Consent-Center
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,sans-serif;background:#080810;color:#fff;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
ul,ol{list-style:none}
::selection{background:rgba(108,99,255,.3);color:#fff}

:root{
  --bg:#080810;--bg1:#0c0c1a;--bg2:#10101e;--bg3:#16162c;
  --v:#6c63ff;--v2:#9b94ff;--o:#ff6b35;--o2:#ff9a6c;
  --w:#fff;--g:#b0b0c8;--g2:#606078;--g3:#303048;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --glass:rgba(255,255,255,.04);--glass2:rgba(255,255,255,.07);
  --ease:cubic-bezier(.16,1,.3,1)
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--g3);border-radius:3px}

#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;background:linear-gradient(90deg,var(--v),var(--o));pointer-events:none;transition:width .12s linear}

/* =============================================================
   CONSENT CENTER — zentriert, Hintergrund geblurrt + gesperrt
   ============================================================= */
#consent{
  position:fixed;inset:0;z-index:9500;
  display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,6,14,.55);
  backdrop-filter:blur(26px) saturate(1.3);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  opacity:0;transition:opacity .45s
}
#consent.show{display:flex;opacity:1}
.cs-box{
  width:min(680px,100%);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(13,13,26,.97);
  border:1px solid var(--border2);border-radius:24px;
  padding:38px 38px 30px;
  box-shadow:0 50px 140px rgba(0,0,0,.7);
  animation:csin .55s var(--ease)
}
@keyframes csin{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.cs-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.cs-dot{width:8px;height:8px;border-radius:50%;background:var(--v);animation:pulser 2s infinite;flex-shrink:0}
@keyframes pulser{0%,100%{box-shadow:0 0 0 0 rgba(108,99,255,.5)}50%{box-shadow:0 0 0 6px rgba(108,99,255,0)}}
.cs-head h2{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.cs-intro{font-size:.82rem;font-weight:300;color:var(--g);line-height:1.7;margin-bottom:20px}
.cs-intro a{color:var(--v2)}
/* Intro-Klapper: nur Mobile — Desktop zeigt den Text wie gehabt voll */
.cs-intro-more{display:none}
@media(max-width:768px){
  .cs-intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
  .cs-intro.expanded{display:block;-webkit-line-clamp:unset;overflow:visible}
  .cs-intro-more{display:inline-block;background:none;border:none;padding:0 0 2px;margin-bottom:12px;
    font-size:.74rem;font-weight:500;color:var(--v2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
}

/* Nur Intro + Gruppen scrollen — Buttons bleiben immer im Blick */
.cs-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;margin:0 -12px 4px;padding:0 12px;overscroll-behavior:contain;scrollbar-width:thin}
.cs-scroll::-webkit-scrollbar{width:5px}
.cs-scroll::-webkit-scrollbar-thumb{background:var(--g3);border-radius:3px}
.cs-groups{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.cs-g{border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.025);overflow:hidden}
.cs-g-row{display:flex;align-items:center;gap:12px;padding-right:16px;transition:background .2s}
.cs-g-row:hover{background:rgba(255,255,255,.025)}
.cs-g-head{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  padding:14px 0 14px 16px;cursor:pointer;text-align:left;color:var(--w)
}
.cs-chevron{
  width:20px;height:20px;flex-shrink:0;border-radius:6px;
  background:var(--glass2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--g);transition:transform .3s var(--ease)
}
.cs-g.open .cs-chevron{transform:rotate(90deg)}
.cs-g-title{flex:1;font-size:.86rem;font-weight:600;letter-spacing:-.01em}
.cs-g-count{font-size:.7rem;color:var(--g2);font-weight:300;margin-right:4px}
.cs-switch{position:relative;width:40px;height:22px;flex-shrink:0}
.cs-switch input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2;margin:0}
.cs-track{
  position:absolute;inset:0;border-radius:100px;
  background:rgba(255,255,255,.1);transition:background .25s
}
.cs-thumb{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .25s var(--ease)
}
.cs-switch input:checked ~ .cs-track{background:var(--v)}
.cs-switch input:checked ~ .cs-thumb{transform:translateX(18px)}
.cs-switch input:disabled ~ .cs-track{background:rgba(108,99,255,.45)}
.cs-switch input:disabled{cursor:not-allowed}
.cs-g-body{
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease)
}
/* Öffnungshöhe setzt das JS exakt auf die gemessene Inhaltshöhe
   (scrollHeight) — nichts wird mehr abgeschnitten, egal wie lang
   die Pflichtangaben nach § 25 TDDDG sind. */
.cs-g-inner{padding:0 16px 16px;border-top:1px solid var(--border)}
.cs-g-desc{font-size:.78rem;font-weight:300;color:var(--g);line-height:1.7;padding-top:13px}
.cs-detail{
  margin-top:11px;border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;background:rgba(255,255,255,.02)
}
.cs-detail-row{display:flex;gap:8px;font-size:.73rem;line-height:1.6;margin-bottom:4px}
.cs-detail-row:last-child{margin-bottom:0}
.cs-dl{color:var(--g2);min-width:118px;flex-shrink:0;font-weight:300}
.cs-dv{color:var(--g);font-weight:300}
.cs-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
/* Alle drei Consent-Aktionen: EIN identischer Button-Style —
   gleiche Farbe, gleicher Umriss, gleiches Padding. Keine optische
   Hierarchie, kein Nudging (DSGVO/TDDDG-konform). */
.cs-accept,.cs-save,.cs-deny{
  flex:1;min-width:170px;background:var(--glass2);color:var(--w);
  border:1px solid var(--border2);padding:13px 22px;border-radius:11px;
  font-size:.88rem;font-weight:600;text-align:center;
  transition:background .2s,border-color .2s,transform .2s
}
.cs-accept:hover,.cs-save:hover,.cs-deny:hover{
  background:var(--glass);border-color:rgba(255,255,255,.3);transform:translateY(-1px)
}
.cs-foot{
  display:flex;justify-content:center;gap:18px;margin-top:14px;
  font-size:.72rem;color:var(--g2)
}
.cs-foot a{color:var(--g2);text-decoration:underline}
.cs-foot a:hover{color:var(--g)}

/* =============================================================
   NAVIGATION
   ============================================================= */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:2000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:72px;
  transition:background .4s,border-color .4s
}
#nav.stuck{
  background:rgba(8,8,16,.9);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border-bottom:1px solid var(--border)
}
.nav-logo{font-size:1rem;font-weight:600;letter-spacing:-.03em}
.nav-logo b{color:var(--v);font-weight:600}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:.85rem;color:var(--g);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--v);transform:scaleX(0);transition:transform .25s var(--ease);transform-origin:left}
.nav-links a:hover{color:var(--w)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{
  display:flex;align-items:center;gap:7px;background:var(--v);color:#fff;
  padding:10px 22px;border-radius:10px;font-size:.85rem;font-weight:600;
  transition:background .2s,transform .2s,box-shadow .2s
}
.nav-cta:hover{background:var(--v2);transform:translateY(-1px);box-shadow:0 8px 28px rgba(108,99,255,.4)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:2010;position:relative;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.burger.open{opacity:0;pointer-events:none;transform:scale(.4)}
.burger span{display:block;width:22px;height:1.5px;background:var(--w);border-radius:2px;transition:all .35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile menu — geblurrter Hintergrund statt schwarz */
#mob-menu{
  position:fixed;inset:0;z-index:2005;
  background:rgba(10,10,22,.42);
  backdrop-filter:blur(36px) saturate(1.5);
  -webkit-backdrop-filter:blur(36px) saturate(1.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transform:translateX(100%);transition:transform .5s var(--ease)
}
#mob-menu.open{transform:translateX(0)}
#mob-menu a{font-size:1.9rem;font-weight:600;letter-spacing:-.04em;transition:color .2s;opacity:0;transform:translateY(14px)}
#mob-menu.open a{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
#mob-menu.open a:nth-child(1){transition-delay:.08s}
#mob-menu.open a:nth-child(2){transition-delay:.14s}
#mob-menu.open a:nth-child(3){transition-delay:.2s}
#mob-menu.open a:nth-child(4){transition-delay:.26s}
#mob-menu.open a:nth-child(5){transition-delay:.32s}
#mob-menu a:hover{color:var(--v2)}
#mob-menu .m-cta{background:var(--v);color:#fff;padding:16px 44px;border-radius:14px;font-size:1.05rem;font-weight:600;margin-top:6px}
#mob-menu .m-cta:hover{background:var(--v2);color:#fff}
/* Schließen-X oben rechts: gleiche Designsprache wie die Glass-Buttons,
   dreht sich beim Einblenden ein, Position entspricht dem Burger */
.mm-close{
  position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass2);border:1px solid var(--border2);color:var(--g);
  -webkit-tap-highlight-color:transparent;
  opacity:0;transform:rotate(-90deg) scale(.55);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s,border-color .2s,background .2s,box-shadow .2s;
  transition-delay:0s
}
#mob-menu.open .mm-close{opacity:1;transform:none;transition-delay:.34s,.34s,0s,0s,0s,0s}
.mm-close:hover,.mm-close:active{
  color:var(--w);border-color:rgba(108,99,255,.65);
  background:rgba(108,99,255,.16);box-shadow:0 0 24px rgba(108,99,255,.35)
}
.mm-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* =============================================================
   HERO
   ============================================================= */
#hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  position:relative;overflow:hidden;padding:130px 24px 70px
}
.hbg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hbg-g1{position:absolute;top:-15%;left:50%;transform:translateX(-50%);width:1000px;height:700px;background:radial-gradient(ellipse,rgba(108,99,255,.22) 0%,transparent 65%);animation:gd1 14s ease-in-out infinite alternate}
.hbg-g2{position:absolute;bottom:-25%;right:-10%;width:600px;height:500px;background:radial-gradient(ellipse,rgba(255,107,53,.12) 0%,transparent 65%);animation:gd2 18s ease-in-out infinite alternate}
.hbg-g3{position:absolute;top:35%;left:-10%;width:500px;height:400px;background:radial-gradient(ellipse,rgba(108,99,255,.07) 0%,transparent 65%);animation:gd2 12s ease-in-out infinite alternate-reverse}
@keyframes gd1{to{transform:translateX(-50%) scale(1.15) translateY(-50px)}}
@keyframes gd2{to{transform:scale(1.2) translateY(-60px)}}
.hbg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)
}
.hcon{position:relative;z-index:10;text-align:center;max-width:1000px;width:100%}
.h-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);
  border-radius:100px;padding:8px 20px;
  font-size:.72rem;font-weight:500;color:var(--v2);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:34px;
  animation:fadeUp .8s var(--ease) .15s both
}
.h-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--v);animation:pulser 2s infinite}
.h1{
  font-size:clamp(3rem,7.6vw,6.6rem);font-weight:600;
  line-height:1.01;letter-spacing:-.05em;margin-bottom:26px;
  animation:fadeUp .9s var(--ease) .3s both
}
.h1 .grad{
  background:linear-gradient(135deg,var(--v) 0%,var(--v2) 45%,var(--o) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;animation:gshift 6s ease infinite
}
@keyframes gshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.h-sub{
  font-size:clamp(1rem,1.8vw,1.2rem);font-weight:300;color:var(--g);
  line-height:1.8;max-width:600px;margin:0 auto 44px;
  animation:fadeUp 1s var(--ease) .45s both
}
.h-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp 1s var(--ease) .6s both;margin-bottom:56px}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}

/* =============================================================
   COVERFLOW CAROUSEL
   ============================================================= */
.car-outer{position:relative;z-index:10;width:100%;max-width:1500px;animation:fadeUp 1s var(--ease) .8s both}
.car-hint{
  text-align:center;font-size:.72rem;color:var(--g2);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:10px
}
.car-hint::before,.car-hint::after{content:'';width:36px;height:1px;background:var(--g3)}
.car-wrap{
  position:relative;height:560px;
  perspective:1700px;perspective-origin:50% 42%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:grab
}
.car-wrap.dragging{cursor:grabbing}
.ccard{
  position:absolute;left:50%;top:50%;
  width:min(480px,86vw);height:510px;
  border-radius:14px;overflow:hidden;background:#0c0c16;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 110px rgba(0,0,0,.65);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  transform-style:preserve-3d
}
.ccard.active{box-shadow:0 0 0 1px rgba(108,99,255,.35),0 60px 130px rgba(0,0,0,.75)}
.bchrome{
  height:40px;background:rgba(18,18,32,.98);
  display:flex;align-items:center;padding:0 12px;gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.bdots{display:flex;gap:5px}
.bd{width:12px;height:12px;border-radius:50%}
.bd-r{background:#ff5f57}.bd-y{background:#febc2e}.bd-g{background:#28c840}
.burl{
  flex:1;height:22px;background:rgba(255,255,255,.05);border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:.62rem;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden
}
.bshare{width:26px;height:22px;background:rgba(255,255,255,.04);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.65rem;opacity:.45}
.car-glow{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:720px;height:120px;
  background:radial-gradient(ellipse,rgba(108,99,255,.2) 0%,transparent 70%);
  filter:blur(26px);pointer-events:none
}
.car-arrows{
  position:absolute;top:50%;left:0;right:0;
  display:flex;justify-content:space-between;
  pointer-events:none;z-index:300;
  transform:translateY(-50%);padding:0 8px
}
.car-arr{
  pointer-events:auto;width:46px;height:46px;border-radius:50%;
  background:rgba(13,13,26,.85);border:1px solid var(--border2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--g);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s,transform .2s
}
.car-arr:hover{color:var(--w);border-color:rgba(108,99,255,.5);transform:scale(1.08)}
.car-dots{display:flex;justify-content:center;gap:5px;margin-top:16px;flex-wrap:wrap;max-width:420px;margin-left:auto;margin-right:auto}
.car-dot{width:6px;height:6px;border-radius:50%;background:var(--g3);cursor:pointer;transition:background .25s,transform .25s;border:none;padding:0}
.car-dot.on{background:var(--v);transform:scale(1.35)}

/* =============================================================
   SHOWROOM v4 — 21 Mini-Masterpieces
   Jede Branche: eigenes Layout, eigene Formsprache, eigene Magie.
   Alle Animationen laufen NUR auf .ccard.is-active (Performance).
   ============================================================= */

.fsite{height:470px;overflow:hidden;position:relative;user-select:none;-webkit-user-select:none}
.fsite::-webkit-scrollbar{display:none}

/* Ruhezustand: inaktive Slides zeigen den fertigen Endzustand,
   .is-active spielt die Intro-Sequenz neu ab + Ambient-Loops.   */


/* ════════════════ 00 DIGITAL-STUDIO · The Aurora Grid (Opener) ════════════════
   Bewusst in der Designsprache der Hauptseite: #080810, Violett/Orange,
   Glas, Grid — das erste Fenster wirkt wie „aus einem Guss“.            */
.s-lum{background:#080810;color:#fff;font-family:'Inter',system-ui,sans-serif}
.lum-aurora i{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55}
.lum-aurora i:nth-child(1){width:300px;height:220px;left:-80px;top:-60px;background:radial-gradient(ellipse,rgba(108,99,255,.55),transparent 65%)}
.lum-aurora i:nth-child(2){width:260px;height:200px;right:-90px;top:120px;background:radial-gradient(ellipse,rgba(255,107,53,.4),transparent 65%)}
.lum-aurora i:nth-child(3){width:240px;height:200px;left:60px;bottom:-90px;background:radial-gradient(ellipse,rgba(155,148,255,.4),transparent 65%)}
.is-active .lum-aurora i:nth-child(1){animation:lumAur1 9s ease-in-out infinite alternate}
.is-active .lum-aurora i:nth-child(2){animation:lumAur2 11s ease-in-out infinite alternate}
.is-active .lum-aurora i:nth-child(3){animation:lumAur3 10s ease-in-out infinite alternate}
@keyframes lumAur1{to{transform:translate(60px,40px) scale(1.2)}}
@keyframes lumAur2{to{transform:translate(-50px,-30px) scale(.85)}}
@keyframes lumAur3{to{transform:translate(40px,-40px) scale(1.15)}}
.lum-grid{position:absolute;left:-30%;right:-30%;bottom:-14%;height:62%;
  background:linear-gradient(rgba(108,99,255,.28) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(108,99,255,.28) 1.5px,transparent 1.5px);
  background-size:42px 42px;transform:perspective(440px) rotateX(63deg);
  mask-image:linear-gradient(180deg,transparent,black 32%);-webkit-mask-image:linear-gradient(180deg,transparent,black 32%)}
.is-active .lum-grid{animation:lumGrid 1.6s linear infinite}
@keyframes lumGrid{to{background-position:0 42px,0 0}}
.lum-stars b{position:absolute;width:3px;height:3px;border-radius:50%;background:#9b94ff;opacity:0}
.is-active .lum-stars b{animation:lumStar 7s linear infinite}
.lum-stars b:nth-child(1){left:8%;top:80%}.lum-stars b:nth-child(2){left:18%;top:88%;animation-delay:.8s}.lum-stars b:nth-child(3){left:30%;top:84%;animation-delay:1.6s}.lum-stars b:nth-child(4){left:44%;top:90%;animation-delay:2.4s}.lum-stars b:nth-child(5){left:58%;top:86%;animation-delay:3.2s}.lum-stars b:nth-child(6){left:70%;top:90%;animation-delay:4s}.lum-stars b:nth-child(7){left:82%;top:84%;animation-delay:4.8s}.lum-stars b:nth-child(8){left:92%;top:88%;animation-delay:5.6s}.lum-stars b:nth-child(9){left:38%;top:92%;animation-delay:6.2s}.lum-stars b:nth-child(10){left:64%;top:94%;animation-delay:6.8s}
@keyframes lumStar{0%{opacity:0;transform:translateY(0) scale(.6)}12%{opacity:.95}70%{opacity:.5}100%{opacity:0;transform:translateY(-300px) scale(1.3)}}
.lum-comet{position:absolute;top:34%;left:-40%;width:180%;height:2px;opacity:0;transform:rotate(-22deg);
  background:linear-gradient(90deg,transparent,#9b94ff 42%,#fff 50%,#ff9a6c 58%,transparent);
  box-shadow:0 0 18px rgba(155,148,255,.9),0 0 48px rgba(255,107,53,.5)}
.is-active .lum-comet{animation:lumComet 7s cubic-bezier(.6,0,.3,1) infinite}
@keyframes lumComet{0%,54%{transform:rotate(-22deg) translateX(-104%);opacity:0}56%{opacity:1}68%{transform:rotate(-22deg) translateX(104%);opacity:1}70%,100%{transform:rotate(-22deg) translateX(104%);opacity:0}}
.lum-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;position:relative;z-index:4}
.lum-logo{font-size:.6rem;font-weight:600;letter-spacing:.34em}
.lum-logo i{font-style:normal;color:#ff6b35;font-size:.4rem;vertical-align:2px}
.lum-nav{display:flex;gap:11px;font-size:.32rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.lum-hero{position:absolute;left:18px;right:18px;top:74px;z-index:4}
.lum-eyebrow{display:flex;align-items:center;gap:6px;font-size:.32rem;letter-spacing:.26em;text-transform:uppercase;color:#9b94ff;font-weight:600;margin-bottom:10px}
.lum-eyebrow i{width:5px;height:5px;border-radius:50%;background:#6c63ff;box-shadow:0 0 10px #6c63ff}
.is-active .lum-eyebrow i{animation:lumPing 1.8s ease-in-out infinite}
@keyframes lumPing{50%{opacity:.3}}
.lum-h{font-size:1.62rem;font-weight:600;line-height:1.04;letter-spacing:-.045em}
.lum-w{display:inline-block;margin-right:.22em}
.is-active .lum-w{animation:lumWIn .9s var(--ease) calc(.15s + var(--lw)*.14s) both}
@keyframes lumWIn{from{opacity:0;transform:translateY(26px) rotateX(70deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.lum-grad{background:linear-gradient(120deg,#6c63ff,#9b94ff 40%,#ff6b35 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(108,99,255,.55))}
.is-active .lum-grad{animation:lumWIn .9s var(--ease) calc(.15s + var(--lw)*.14s) both,lumShift 4s ease-in-out 1.2s infinite alternate}
@keyframes lumShift{to{background-position:100% 0}}
.lum-sub{font-size:.4rem;font-weight:300;color:rgba(255,255,255,.55);line-height:1.7;max-width:230px;margin:9px 0 13px}
.is-active .lum-sub{animation:lumFade 1s var(--ease) .8s both}
@keyframes lumFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lum-cta{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:.38rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#6c63ff,#5a52e0);padding:9px 16px;border-radius:9px;box-shadow:0 10px 30px rgba(108,99,255,.45)}
.lum-cta i{font-style:normal}
.lum-cta::after{content:'';position:absolute;inset:0;border-radius:9px;border:1px solid rgba(155,148,255,.8);opacity:0}
.is-active .lum-cta{animation:lumFade 1s var(--ease) 1s both}
.is-active .lum-cta::after{animation:lumRing 2.6s ease-out 1.6s infinite}
@keyframes lumRing{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.55)}100%{opacity:0}}
.lum-cards{position:absolute;right:16px;top:236px;display:flex;flex-direction:column;gap:8px;z-index:4}
.lum-card{display:flex;align-items:baseline;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:11px;padding:8px 12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.4)}
.lum-card b{font-size:.62rem;font-weight:600;background:linear-gradient(135deg,#fff,#9b94ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lum-card span{font-size:.32rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500}
.is-active .lum-card{animation:lumCardIn .9s cubic-bezier(.3,1.4,.5,1) calc(1.1s + var(--lc)*.16s) both,lumHover 5s ease-in-out calc(2s + var(--lc)*.7s) infinite alternate}
@keyframes lumCardIn{from{opacity:0;transform:translateX(40px) rotateY(-24deg)}to{opacity:1;transform:none}}
@keyframes lumHover{from{transform:translateY(0) rotateY(0)}to{transform:translateY(-6px) rotateY(-7deg)}}
.lum-marquee{position:absolute;left:0;right:0;bottom:0;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;z-index:4;background:rgba(8,8,16,.6)}
.lum-track{display:flex;white-space:nowrap;width:max-content}
.lum-track span{font-size:.34rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:500}
.is-active .lum-track{animation:lumMarq 16s linear infinite}
@keyframes lumMarq{to{transform:translateX(-50%)}}

/* ════════════════ 01 FRISEUR · The Liquid Mirror ════════════════ */
.s-fri{background:#f5efe6;color:#241c12;font-family:Georgia,'Times New Roman',serif}
.fri-goo{position:absolute;left:0;right:0;bottom:17%;height:58%;z-index:1;opacity:.92}
.fri-strand,.fri-blob{transform-box:fill-box;transform-origin:center}
.is-active .fri-f1{animation:friFlow1 6.5s ease-in-out infinite alternate}
.is-active .fri-f2{animation:friFlow2 7.5s ease-in-out infinite alternate}
.is-active .fri-b1{animation:friBob1 5s ease-in-out infinite alternate}
.is-active .fri-b2{animation:friBob2 6s ease-in-out infinite alternate}
.is-active .fri-b3{animation:friBob1 7s ease-in-out infinite alternate-reverse}
@keyframes friFlow1{to{transform:translate(30px,-16px) rotate(2.5deg)}}
@keyframes friFlow2{to{transform:translate(-26px,12px) rotate(-2deg)}}
@keyframes friBob1{to{transform:translate(38px,-22px) scale(1.18)}}
@keyframes friBob2{to{transform:translate(-44px,18px) scale(.82)}}
.fri-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;z-index:5}
.fri-logo{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;line-height:1.35}
.fri-logo i{display:block;font-style:italic;text-transform:none;letter-spacing:.1em;font-size:.74rem;color:#b08d57}
.fri-nav{display:flex;gap:11px;font-size:.32rem;letter-spacing:.24em;text-transform:uppercase;opacity:.55;padding-top:5px;font-family:system-ui,sans-serif;font-weight:600}
.fri-copy{position:absolute;left:18px;top:62px;z-index:4;max-width:64%}
.fri-eyebrow{font-size:.34rem;letter-spacing:.3em;text-transform:uppercase;color:#b08d57;margin-bottom:9px;font-family:system-ui,sans-serif;font-weight:600}
.fri-h{font-size:1.62rem;font-weight:400;line-height:1.05;letter-spacing:-.01em}
.fri-h em{font-style:italic;color:#b08d57}
.is-active .fri-h{animation:friHIn 1.3s var(--ease) both}
@keyframes friHIn{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.fri-cta{display:inline-block;margin-top:13px;padding:7px 17px;border:1px solid #241c12;border-radius:100px;font-size:.36rem;letter-spacing:.28em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:600}
.fri-razor{position:absolute;top:50%;left:-32%;width:164%;height:2px;z-index:6;opacity:0;transform:rotate(-15.6deg);background:linear-gradient(90deg,transparent,#fff 38%,#fffef6 50%,#fff 62%,transparent);box-shadow:0 0 16px rgba(255,255,255,.95),0 0 44px rgba(255,214,170,.65)}
.is-active .fri-razor{animation:friRazor 12s linear infinite}
@keyframes friRazor{0%,24%{transform:rotate(-15.6deg) translateX(-104%);opacity:0}26%{opacity:1}38%{transform:rotate(-15.6deg) translateX(104%);opacity:1}40%,100%{transform:rotate(-15.6deg) translateX(104%);opacity:0}}
.fri-reveal{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px 18px;background:linear-gradient(118deg,#f6d3e6,#d9cdf6 32%,#c8ece0 66%,#fbe3c4);clip-path:polygon(0 64%,100% 36%,100% 100%,0 100%)}
.is-active .fri-reveal{animation:friReveal 12s var(--ease) infinite}
@keyframes friReveal{0%,36%{clip-path:polygon(0 64%,100% 36%,100% 36%,0 64%)}50%,94%{clip-path:polygon(0 64%,100% 36%,100% 100%,0 100%)}100%{clip-path:polygon(0 64%,100% 36%,100% 36%,0 64%)}}
.fri-reveal p{font-size:.58rem;font-style:italic;color:#5d4a63;margin-bottom:3px}
.fri-reveal span{font-size:.36rem;color:rgba(70,55,75,.65);font-family:system-ui,sans-serif;letter-spacing:.06em}

/* ════════════════ 02 IT · The Matrix Compile ════════════════ */
.s-it{background:radial-gradient(120% 90% at 72% -10%,#081320,#04070d 62%);color:#cfe7ff;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.it-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid rgba(0,229,255,.14)}
.it-logo{font-size:.5rem;color:#00e5ff;letter-spacing:.12em}
.it-logo::before{content:'> '}
.it-stat{display:flex;align-items:center;gap:5px;font-size:.3rem;letter-spacing:.18em;color:#3ef2a5}
.it-stat i{width:5px;height:5px;border-radius:50%;background:#3ef2a5;box-shadow:0 0 8px #3ef2a5}
.is-active .it-stat i{animation:itPing 1.6s ease-in-out infinite}
@keyframes itPing{50%{opacity:.3}}
.it-h{font-size:.86rem;font-weight:600;letter-spacing:-.02em;color:#fff;padding:13px 15px 0}
.it-h em{font-style:normal;color:#00e5ff;text-shadow:0 0 14px rgba(0,229,255,.5)}
.it-stage{position:absolute;left:14px;right:14px;top:96px;bottom:58px;perspective:820px}
.it-term{position:absolute;left:7%;right:7%;top:4%;bottom:4%;background:rgba(2,9,17,.94);border:1px solid rgba(0,229,255,.22);border-radius:9px;padding:9px 11px;transform:rotateX(7deg) rotateY(-11deg);box-shadow:0 28px 56px rgba(0,0,0,.55),0 0 38px rgba(0,229,255,.07);transition:opacity .45s,transform .7s var(--ease),filter .5s;overflow:hidden}
.compiled .it-term{opacity:0;transform:rotateX(42deg) rotateY(-11deg) scale(.5);filter:blur(7px)}
.it-term-bar{display:flex;align-items:center;gap:4px;margin-bottom:7px}
.it-term-bar i{width:6px;height:6px;border-radius:50%;background:rgba(0,229,255,.3)}
.it-term-bar span{font-size:.3rem;color:rgba(207,231,255,.4);margin-left:5px;letter-spacing:.08em}
.it-code{font-size:.4rem;line-height:1.75;color:#8df0c8;white-space:pre-wrap;word-break:break-all;margin:0;font-family:inherit}
.it-caret{display:inline-block;width:5px;height:9px;background:#00e5ff;vertical-align:-1px}
.is-active .it-caret{animation:itCaret .7s steps(1) infinite}
@keyframes itCaret{50%{opacity:0}}
.it-grid3d{position:absolute;inset:0;opacity:0;transition:opacity .55s .12s;pointer-events:none}
.compiled .it-grid3d{opacity:1}
.it-plane{position:absolute;left:50%;top:52%;width:230px;height:230px;transform:translate(-50%,-50%) rotateX(57deg) rotateZ(45deg);display:grid;grid-template-columns:repeat(5,1fr);gap:17px}
.it-plane i{width:9px;height:9px;border-radius:50%;background:#00e5ff;box-shadow:0 0 10px #00e5ff,0 0 26px rgba(0,229,255,.5);place-self:center;opacity:.85}
.compiled.is-active .it-plane i{animation:itNode 1.7s ease-in-out infinite}
.it-plane i:nth-child(5n+2){animation-delay:.18s}
.it-plane i:nth-child(5n+3){animation-delay:.36s}
.it-plane i:nth-child(5n+4){animation-delay:.54s}
.it-plane i:nth-child(5n+5){animation-delay:.72s}
@keyframes itNode{50%{transform:scale(1.65);opacity:1}}
.it-streams{position:absolute;inset:-14px}
.it-streams path{stroke:#7df9ff;stroke-width:2.2;stroke-dasharray:14 300;stroke-dashoffset:314;filter:drop-shadow(0 0 5px rgba(125,249,255,.9))}
.compiled.is-active .it-streams path{animation:itStream 1.5s linear infinite}
.it-streams .it-s2{animation-delay:.3s}.it-streams .it-s3{animation-delay:.6s}.it-streams .it-s4{animation-delay:.9s}
@keyframes itStream{to{stroke-dashoffset:0}}
.it-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:12px 15px;font-size:.34rem;color:rgba(207,231,255,.5);border-top:1px solid rgba(0,229,255,.12);letter-spacing:.06em}
.it-cta{color:#04070d;background:#00e5ff;border-radius:3px;padding:5px 11px;font-size:.36rem;font-weight:700;letter-spacing:.1em;box-shadow:0 0 18px rgba(0,229,255,.35)}

/* ════════════════ 03 TASCHEN · Luxury 3D Morph ════════════════ */
.s-bag{background:linear-gradient(175deg,#f7f4ee,#efe9df);color:#171310;font-family:'Didot','Bodoni MT',Georgia,serif;text-align:center}
.bag-head{display:flex;justify-content:space-between;align-items:baseline;padding:17px 20px 0}
.bag-head span{font-size:.32rem;letter-spacing:.3em;text-transform:uppercase;opacity:.5;font-family:system-ui,sans-serif;font-weight:600}
.bag-logo{font-size:.84rem;font-weight:400;letter-spacing:.42em;margin-left:.42em}
.bag-stage{position:absolute;left:0;right:0;top:60px;height:204px;display:flex;justify-content:center}
.bag-svg{height:100%;overflow:visible}
.bag-shadow{transform-box:fill-box;transform-origin:center}
.is-active .bag-shadow{animation:bagShadow 7s ease-in-out infinite alternate}
@keyframes bagShadow{from{transform:translateX(-16px) scaleX(.82);opacity:.85}to{transform:translateX(16px) scaleX(1.14);opacity:.6}}
.bag-skin{opacity:1}
.is-active .bag-skin{animation:bagSkin 10s var(--ease) infinite}
@keyframes bagSkin{0%,26%{opacity:0}44%,100%{opacity:1}}
.bag-wire path,.bag-wire circle{stroke-dasharray:560;stroke-dashoffset:0;opacity:.5}
.is-active .bag-wire path,.is-active .bag-wire circle{animation:bagWire 10s var(--ease) infinite}
@keyframes bagWire{0%{stroke-dashoffset:560;opacity:1}22%{stroke-dashoffset:0;opacity:1}46%{opacity:.45}100%{stroke-dashoffset:0;opacity:.45}}
.bag-sheen-bar{opacity:0}
.is-active .bag-sheen-bar{animation:bagSheen 10s ease-in-out infinite}
@keyframes bagSheen{0%,48%{transform:translateX(0) skewX(-18deg);opacity:0}52%{opacity:1}64%{transform:translateX(300px) skewX(-18deg);opacity:1}66%,100%{transform:translateX(300px) skewX(-18deg);opacity:0}}
.bag-copy{position:absolute;left:0;right:0;bottom:0;padding:0 22px 20px}
.bag-h{font-size:1.28rem;font-weight:400;letter-spacing:-.015em}
.bag-h em{font-style:italic;color:#8a4a26}
.is-active .bag-h{animation:bagHIn 1.2s var(--ease) .2s both}
@keyframes bagHIn{from{opacity:0;letter-spacing:.12em}to{opacity:1;letter-spacing:-.015em}}
.bag-p{font-size:.34rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,19,16,.5);margin:7px 0 12px;font-family:system-ui,sans-serif;font-weight:500}
.bag-cta{display:inline-block;font-size:.36rem;letter-spacing:.3em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;padding-bottom:3px;border-bottom:1px solid #171310}

/* ════════════════ 04 BETTEN · Neumorphic Eclipse ════════════════ */
.s-bed{background:#ffd9a3;font-family:ui-rounded,'SF Pro Rounded','Trebuchet MS',system-ui,sans-serif;color:#3c4a66}
.bed-sky{position:absolute;inset:0;background:linear-gradient(180deg,#ffe3b0,#ff9e76 52%,#ffd0b4)}
.bed-sun{position:absolute;left:50%;top:38%;width:84px;height:84px;margin:-42px;border-radius:50%;background:radial-gradient(circle,#fff7d6 18%,#ffcf6e 52%,rgba(255,160,80,0) 72%);box-shadow:0 0 70px 30px rgba(255,190,110,.55)}
.is-active .bed-sun{animation:bedSun 16s ease-in-out infinite alternate}
@keyframes bedSun{0%{transform:translateY(34px) scale(1.06);opacity:1}45%{opacity:1}70%{opacity:0;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-34px) scale(.78)}}
.bed-night{position:absolute;inset:0;background:linear-gradient(180deg,#0a1030,#1b2150 58%,#33304f);opacity:0}
.is-active .bed-night{animation:bedNight 16s ease-in-out infinite alternate}
@keyframes bedNight{0%,38%{opacity:0}72%,100%{opacity:1}}
.bed-moon{position:absolute;right:18%;top:14%;width:34px;height:34px;border-radius:50%;background:#f2ecda;box-shadow:inset -7px -5px 0 rgba(160,150,120,.4),0 0 26px rgba(242,236,218,.5)}
.bs{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff}
.is-active .bs{animation:bedStar 2.6s ease-in-out infinite}
.bs1{left:8%;top:12%}.bs2{left:22%;top:26%;animation-delay:.4s}.bs3{left:35%;top:9%;animation-delay:.9s}.bs4{left:48%;top:22%;animation-delay:1.3s}.bs5{left:62%;top:7%;animation-delay:.2s}.bs6{left:74%;top:30%;animation-delay:1.7s}.bs7{left:88%;top:18%;animation-delay:.7s}.bs8{left:15%;top:42%;animation-delay:1.1s}.bs9{left:55%;top:38%;animation-delay:1.9s}.bs10{left:80%;top:44%;animation-delay:.5s}.bs11{left:30%;top:36%;animation-delay:2.1s}.bs12{left:93%;top:36%;animation-delay:1.5s}
@keyframes bedStar{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
.bed-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;z-index:4}
.bed-logo{font-size:.56rem;font-weight:700;letter-spacing:.06em;color:#fff;text-shadow:0 1px 8px rgba(60,40,20,.3)}
.bed-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600;text-shadow:0 1px 6px rgba(60,40,20,.3)}
.bed-card{position:absolute;left:16px;right:16px;bottom:16px;z-index:4;background:#e9eef7;border-radius:24px;padding:18px 20px 16px;box-shadow:10px 10px 24px rgba(90,80,120,.32),-8px -8px 20px rgba(255,255,255,.65),inset 0 0 0 1px rgba(255,255,255,.5)}
.bed-eyebrow{font-size:.32rem;letter-spacing:.24em;text-transform:uppercase;color:#7c89ab;font-weight:700;margin-bottom:6px}
.bed-h{font-size:.98rem;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#33415f}
.bed-sub{font-size:.36rem;color:#7c89ab;margin:6px 0 11px;font-weight:500}
.bed-pills{display:flex;gap:8px;margin-bottom:12px}
.bed-pill{flex:1;text-align:center;font-size:.34rem;font-weight:700;color:#5a6b91;background:#e9eef7;border-radius:100px;padding:8px 0;box-shadow:inset 4px 4px 8px rgba(140,150,180,.35),inset -4px -4px 8px rgba(255,255,255,.85)}
.is-active .bed-pill{animation:bedBreath 4s ease-in-out infinite}
.is-active .bed-pill:nth-child(2){animation-delay:.6s}
.is-active .bed-pill:nth-child(3){animation-delay:1.2s}
@keyframes bedBreath{50%{box-shadow:inset 2px 2px 4px rgba(140,150,180,.25),inset -2px -2px 4px rgba(255,255,255,.7);transform:scale(1.025)}}
.bed-cta{display:inline-block;font-size:.36rem;font-weight:800;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#6f86c4,#4d639e);border-radius:100px;padding:8px 18px;box-shadow:5px 5px 12px rgba(90,80,120,.4),-3px -3px 8px rgba(255,255,255,.5)}

/* ════════════════ 05 DACHDECKER · The Blueprint Physics ════════════════ */
.s-dach{background:#0a2a52;color:#dcebff;font-family:'Futura','Century Gothic','Trebuchet MS',sans-serif;
  background-image:linear-gradient(rgba(188,215,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(188,215,255,.07) 1px,transparent 1px),radial-gradient(120% 100% at 50% 0,rgba(30,80,150,.5),transparent 70%);
  background-size:28px 28px,28px 28px,100% 100%}
.dach-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.dach-logo{font-size:.56rem;font-weight:700;letter-spacing:.18em}
.dach-logo i{display:block;font-style:normal;font-size:.3rem;letter-spacing:.42em;opacity:.55}
.dach-not{font-size:.32rem;letter-spacing:.12em;border:1px dashed rgba(255,196,87,.6);color:#ffc457;padding:4px 9px;border-radius:4px}
.is-active .dach-not{animation:dachNot 2.2s steps(2) infinite}
@keyframes dachNot{50%{opacity:.45}}
.dach-scene{position:relative;width:320px;height:200px;margin:2px auto 0}
.dach-bp{position:absolute;inset:0}
.dd{stroke-dasharray:620;stroke-dashoffset:0}
.is-active .dd1{animation:ddDraw 1.1s ease .1s both}
.is-active .dd2{animation:ddDraw 1s ease .6s both}
.is-active .dd3{animation:ddDraw .8s ease 1.05s both}
.is-active .dd4{animation:ddDraw 1s ease 1.3s both}
@keyframes ddDraw{from{stroke-dashoffset:620}to{stroke-dashoffset:0}}
.dach-dim{opacity:.8}
.is-active .dach-dim{animation:dachDim 1s ease 1.8s both}
@keyframes dachDim{from{opacity:0}to{opacity:.8}}
.dach-meas{font-size:7px;fill:rgba(188,215,255,.75);letter-spacing:.2em;font-family:ui-monospace,monospace}
.dach-tiles b{position:absolute;width:26px;height:13px;border-radius:0 0 5px 5px;opacity:1;transform:rotate(var(--dzr));background:linear-gradient(180deg,#93a9cc,#5d7396 70%,#46587a);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.4)}
.is-active .dach-tiles b{animation:dzFall .9s cubic-bezier(.3,1.45,.55,1) var(--dzd) both}
@keyframes dzFall{0%{opacity:0;transform:translateY(-360px) rotate(calc(var(--dzr) + 26deg))}50%{opacity:1}66%{transform:translateY(6px) rotate(var(--dzr))}84%{transform:translateY(-3px) rotate(var(--dzr))}100%{opacity:1;transform:translateY(0) rotate(var(--dzr))}}
.dach-copy{position:absolute;left:16px;right:16px;bottom:14px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:end}
.dach-h{font-size:1.06rem;font-weight:700;letter-spacing:.06em;line-height:1.1}
.dach-p{grid-column:1;font-size:.34rem;letter-spacing:.1em;color:rgba(220,235,255,.6)}
.dach-cta{grid-column:2;grid-row:1/3;font-size:.36rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:#ffc457;color:#0a2a52;padding:9px 13px;border-radius:4px;box-shadow:0 6px 18px rgba(255,196,87,.35)}

/* ════════════════ 06 SCHREINEREI · Boolean Wood Carving ════════════════ */
.s-holz{color:#2e1c0c;font-family:'Copperplate','Trajan Pro',Georgia,serif;
  background:linear-gradient(90deg,rgba(70,38,14,.22) 0 2px,transparent 2px 7px,rgba(255,222,170,.07) 7px 9px,transparent 9px 18px),linear-gradient(88deg,rgba(56,30,10,.16) 0 5px,transparent 5px 23px),linear-gradient(175deg,#9a6537,#7c4d24 55%,#8a5a2e)}
.holz-fiber{position:absolute;inset:0;width:100%;height:100%;opacity:.5;mix-blend-mode:multiply}
.holz-knot{position:absolute;border-radius:50%;background:radial-gradient(circle at 42% 42%,#5a3414 8%,rgba(90,52,20,.55) 22%,rgba(122,76,36,.25) 45%,transparent 70%)}
.holz-k1{width:90px;height:70px;left:-24px;top:88px}
.holz-k2{width:70px;height:56px;right:-14px;bottom:120px}
.holz-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;position:relative;z-index:3}
.holz-logo{font-size:.54rem;letter-spacing:.32em;color:#f3dcb8;text-shadow:0 1px 2px rgba(40,20,5,.6)}
.holz-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,220,184,.65);font-family:system-ui,sans-serif;font-weight:600}
.holz-copy{position:absolute;left:0;right:0;top:108px;text-align:center;z-index:3;padding:0 16px}
.holz-eyebrow{font-size:.34rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(243,220,184,.7);margin-bottom:14px;font-family:system-ui,sans-serif;font-weight:600}
.holz-h{line-height:1.3}
.holz-line{display:block;font-size:1.5rem;letter-spacing:.1em}
.holz-h b{font-weight:400;display:inline-block;color:rgba(30,14,2,.52);text-shadow:0 1px 0 rgba(255,228,180,.4),0 -1px 1px rgba(20,8,0,.55)}
.is-active .holz-h b{animation:holzCarve .5s cubic-bezier(.5,0,.3,1) calc(.35s + var(--hi)*.085s) both}
@keyframes holzCarve{0%{opacity:0;transform:translateY(-5px) scale(1.18);color:rgba(30,14,2,0);text-shadow:none}55%{opacity:1;color:rgba(255,236,200,.95);text-shadow:0 0 14px rgba(255,220,160,.8)}100%{opacity:1;transform:none;color:rgba(30,14,2,.52);text-shadow:0 1px 0 rgba(255,228,180,.4),0 -1px 1px rgba(20,8,0,.55)}}
.holz-chisel{position:absolute;left:8%;top:46px;width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#ffe9c2,#fff);box-shadow:0 0 12px rgba(255,233,194,.9);opacity:0}
.is-active .holz-chisel{animation:holzChisel 2.2s linear .3s both}
@keyframes holzChisel{0%{opacity:1;transform:translate(0,0)}48%{transform:translate(290px,8px)}50%{transform:translate(10px,58px)}96%{opacity:1;transform:translate(300px,66px)}100%{opacity:0;transform:translate(300px,66px)}}
.holz-p{font-size:.36rem;letter-spacing:.12em;color:rgba(243,220,184,.8);margin:16px 0 13px;font-family:system-ui,sans-serif}
.holz-cta{display:inline-block;font-size:.36rem;letter-spacing:.26em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;color:#f3dcb8;border:1px solid rgba(243,220,184,.55);padding:8px 16px;background:rgba(40,20,5,.25)}
.holz-chips{position:absolute;inset:0;z-index:4;pointer-events:none}
.holz-chip path{stroke-dasharray:160;stroke-dashoffset:0}
.holz-chip{transform-box:fill-box;transform-origin:center;opacity:0}
.is-active .hc1{animation:holzChip 2.6s ease-in 1.1s both}
.is-active .hc2{animation:holzChip 2.6s ease-in 1.5s both}
.is-active .hc3{animation:holzChip 2.6s ease-in 1.9s both}
.is-active .holz-chip path{animation:holzUnroll 1.2s ease both}
.is-active .hc2 path{animation-delay:.4s}
.is-active .hc3 path{animation-delay:.8s}
@keyframes holzUnroll{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes holzChip{0%{opacity:0;transform:none}18%{opacity:1}55%{opacity:1;transform:translate(30px,40px) rotate(40deg) scale(1.6)}100%{opacity:0;transform:translate(70px,120px) rotate(110deg) scale(3.1)}}

/* ════════════════ 07 KFZ · Wind Tunnel Overdrive ════════════════ */
.s-kfz{background:linear-gradient(180deg,#07080d,#0b0e16 60%,#07080d);color:#e8ecf5;font-family:'Arial Narrow','Helvetica Neue',sans-serif}
.kfz-streaks{position:absolute;inset:0;overflow:hidden}
.kfz-streaks i{position:absolute;height:1.5px;border-radius:2px;opacity:0;background:linear-gradient(90deg,transparent,rgba(0,229,255,.85),transparent)}
.is-active .kfz-streaks i{animation:kfzStreak 1.05s linear infinite}
.kfz-streaks i:nth-child(1){top:14%;width:42%;animation-delay:0s}
.kfz-streaks i:nth-child(2){top:28%;width:60%;animation-delay:.35s;background:linear-gradient(90deg,transparent,rgba(255,45,120,.7),transparent)}
.kfz-streaks i:nth-child(3){top:44%;width:34%;animation-delay:.6s}
.kfz-streaks i:nth-child(4){top:58%;width:55%;animation-delay:.2s}
.kfz-streaks i:nth-child(5){top:74%;width:46%;animation-delay:.8s;background:linear-gradient(90deg,transparent,rgba(255,45,120,.7),transparent)}
.kfz-streaks i:nth-child(6){top:88%;width:38%;animation-delay:.5s}
@keyframes kfzStreak{0%{transform:translateX(-110%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(520px);opacity:0}}
.kfz-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;position:relative;z-index:3}
.kfz-logo{font-size:.6rem;font-weight:700;font-style:italic;letter-spacing:.08em}
.kfz-logo b{color:#00e5ff}
.kfz-rpm{font-size:.32rem;letter-spacing:.22em;color:rgba(232,236,245,.5);font-family:ui-monospace,monospace}
.is-active .kfz-rpm{animation:kfzRpm 1.4s steps(2) infinite}
@keyframes kfzRpm{50%{color:rgba(0,229,255,.85)}}
.kfz-tunnel{position:absolute;left:0;right:0;top:84px;height:190px;z-index:2}
.kfz-car{position:absolute;left:50%;top:50%;width:84%;transform:translate(-50%,-50%)}
.kfz-neon{filter:drop-shadow(0 0 6px rgba(0,229,255,.8))}
.kn{stroke-dasharray:46 460;stroke-dashoffset:506}
.is-active .kn1{animation:knRun 1.5s linear infinite}
.is-active .kn2{animation:knRun 1.5s linear .4s infinite}
.is-active .kn3{animation:knRun 1.5s linear .8s infinite}
@keyframes knRun{to{stroke-dashoffset:0}}
.kfz-blur{position:absolute;top:0;bottom:0;width:17%;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.kfz-bl{left:0;mask-image:linear-gradient(90deg,black,transparent);-webkit-mask-image:linear-gradient(90deg,black,transparent)}
.kfz-br{right:0;mask-image:linear-gradient(270deg,black,transparent);-webkit-mask-image:linear-gradient(270deg,black,transparent)}
.kfz-copy{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;z-index:3}
.kfz-h{font-size:1.5rem;font-weight:700;font-style:italic;letter-spacing:-.01em;line-height:.96;transform:skewX(-6deg)}
.is-active .kfz-h{animation:kfzHIn .8s var(--ease) both}
@keyframes kfzHIn{from{opacity:0;transform:skewX(-6deg) translateX(-46px);filter:blur(6px)}to{opacity:1;transform:skewX(-6deg);filter:none}}
.kfz-p{display:none}
.kfz-cta{font-size:.38rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#00e5ff;border:1px solid rgba(0,229,255,.6);padding:9px 14px;border-radius:3px;box-shadow:0 0 18px rgba(0,229,255,.2),inset 0 0 12px rgba(0,229,255,.08);white-space:nowrap}

/* ════════════════ 08 GÄRTNEREI · Fractal Bloom ════════════════ */
.s-gar{background:radial-gradient(110% 120% at 86% 10%,#143626,#0b2014 64%);color:#eaf3e7;font-family:'Cormorant Garamond',Georgia,serif}
.gar-pollen i{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffe9a8,rgba(255,233,168,0) 70%);opacity:0}
.is-active .gar-pollen i{animation:garPollen 9s ease-in-out infinite}
.gar-pollen i:nth-child(1){left:12%;top:70%}.gar-pollen i:nth-child(2){left:28%;top:55%;animation-delay:1.2s}.gar-pollen i:nth-child(3){left:45%;top:78%;animation-delay:2.4s}.gar-pollen i:nth-child(4){left:60%;top:48%;animation-delay:3.6s}.gar-pollen i:nth-child(5){left:72%;top:66%;animation-delay:4.8s}.gar-pollen i:nth-child(6){left:84%;top:40%;animation-delay:6s}.gar-pollen i:nth-child(7){left:36%;top:34%;animation-delay:7.2s}.gar-pollen i:nth-child(8){left:90%;top:74%;animation-delay:8.4s}
@keyframes garPollen{0%,100%{opacity:0;transform:translate(0,0) scale(.7)}18%{opacity:.95}50%{opacity:.7;transform:translate(-22px,-46px) scale(1.25)}82%{opacity:0;transform:translate(10px,-84px) scale(.8)}}
.gar-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;position:relative;z-index:3}
.gar-logo{font-size:.66rem;font-style:italic;letter-spacing:.06em;color:#cfe6c4}
.gar-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;font-family:system-ui,sans-serif;font-weight:600}
.gar-copy{position:absolute;left:18px;top:104px;max-width:52%;z-index:3}
.gar-eyebrow{font-size:.33rem;letter-spacing:.3em;text-transform:uppercase;color:#9fc78a;margin-bottom:10px;font-family:system-ui,sans-serif;font-weight:600}
.gar-h{font-size:1.5rem;font-weight:500;line-height:1.08;letter-spacing:-.01em}
.gar-h em{font-style:italic;color:#ffd98a}
.is-active .gar-h{animation:garHIn 1.4s var(--ease) .3s both}
@keyframes garHIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gar-p{font-size:.4rem;line-height:1.7;color:rgba(234,243,231,.65);margin:9px 0 13px;font-family:system-ui,sans-serif;font-weight:300}
.gar-cta{display:inline-block;font-size:.35rem;letter-spacing:.24em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;color:#10240f;background:#cfe6c4;border-radius:100px;padding:8px 16px}
.gar-tree{position:absolute;right:-6px;bottom:0;height:88%;z-index:2}
.gt{stroke-dasharray:340;stroke-dashoffset:0}
.is-active .gt1{animation:garGrow 1.3s ease-out .1s both}
.is-active .gt2{animation:garGrow 1s ease-out .8s both}
.is-active .gt3{animation:garGrow 1s ease-out 1s both}
.is-active .gt4{animation:garGrow .9s ease-out 1.2s both}
.is-active .gt5{animation:garGrow .9s ease-out 1.35s both}
.is-active .gt6{animation:garGrow .7s ease-out 1.6s both}
.is-active .gt7{animation:garGrow .7s ease-out 1.7s both}
@keyframes garGrow{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
.gar-bloom ellipse{fill:#f5c8d8;opacity:.92}
.gar-bloom .gar-core{fill:#ffd98a}
.gar-petals{transform-box:fill-box;transform-origin:center}
.is-active .gb1 .gar-petals{animation:garBloom 1s cubic-bezier(.3,1.5,.5,1) 1.9s both,garSpin 26s linear 2.9s infinite}
.is-active .gb2 .gar-petals{animation:garBloom 1s cubic-bezier(.3,1.5,.5,1) 2.1s both,garSpin 22s linear 3.1s infinite}
.is-active .gb3 .gar-petals{animation:garBloom .9s cubic-bezier(.3,1.5,.5,1) 2.3s both,garSpin 30s linear 3.2s infinite reverse}
.is-active .gb4 .gar-petals{animation:garBloom .9s cubic-bezier(.3,1.5,.5,1) 2.45s both,garSpin 28s linear 3.35s infinite}
.is-active .gb5 .gar-petals{animation:garBloom 1s cubic-bezier(.3,1.5,.5,1) 2.6s both,garSpin 24s linear 3.6s infinite reverse}
@keyframes garBloom{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}
@keyframes garSpin{to{transform:rotate(360deg)}}
.gb2 ellipse{fill:#f3a7c0}.gb3 ellipse,.gb4 ellipse{fill:#e8d3f2}.gb5 ellipse{fill:#fbe3c4}

/* ════════════════ 09 BÜCHEREI · Zero-Gravity Pages ════════════════ */
.s-buch{background:linear-gradient(180deg,#f6efdf,#efe3cc);color:#2c2218;font-family:'Baskerville','Iowan Old Style',Georgia,serif}
.buch-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px}
.buch-logo{font-size:.62rem;font-weight:600;letter-spacing:.04em;border-bottom:2px solid #b3422e;padding-bottom:2px}
.buch-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;font-family:system-ui,sans-serif;font-weight:600}
.buch-copy{padding:8px 18px 0;max-width:70%}
.buch-h{font-size:1.34rem;font-weight:500;line-height:1.06;letter-spacing:-.01em}
.buch-h em{font-style:italic;color:#b3422e}
.is-active .buch-h{animation:buchHIn 1.2s var(--ease) both}
@keyframes buchHIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.buch-p{font-size:.4rem;line-height:1.65;color:rgba(44,34,24,.6);margin:8px 0 10px;font-family:system-ui,sans-serif;font-weight:300}
.buch-cta{display:inline-block;font-size:.35rem;letter-spacing:.22em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;color:#f6efdf;background:#2c2218;padding:8px 15px;border-radius:2px}
.buch-stage{position:absolute;left:0;right:0;bottom:0;height:218px;perspective:640px}
.buch-letters{position:absolute;left:50%;top:6px;z-index:4}
.buch-letters b{position:absolute;left:0;top:0;font-size:1.45rem;font-weight:500;color:#2c2218;transform:translateX(var(--bx));text-shadow:0 10px 18px rgba(44,34,24,.25)}
.buch-letters .buch-dot{color:#b3422e}
.is-active .buch-letters b{animation:buchRise 1.5s var(--ease) var(--bd) both,buchHover 4.2s ease-in-out calc(1.5s + var(--bd)) infinite alternate}
@keyframes buchRise{0%{opacity:0;transform:translateX(calc(var(--bx)*.2)) translateY(128px) rotate(24deg) scale(.5)}55%{opacity:1;transform:translateX(var(--bx)) translateY(-14px) rotate(-7deg)}100%{opacity:1;transform:translateX(var(--bx)) translateY(0) rotate(0)}}
@keyframes buchHover{from{transform:translateX(var(--bx)) translateY(0) rotate(0)}to{transform:translateX(var(--bx)) translateY(-7px) rotate(-2.5deg)}}
.buch-book{position:absolute;left:50%;bottom:26px;width:200px;height:120px;transform:translateX(-50%);transform-style:preserve-3d}
.buch-spine{position:absolute;left:50%;bottom:0;width:10px;height:14px;margin-left:-5px;background:#7a2e1f;border-radius:0 0 4px 4px}
.buch-page{position:absolute;bottom:6px;width:96px;height:112px;background:linear-gradient(90deg,#fffdf6,#f4ecd8);border:1px solid rgba(44,34,24,.18);box-shadow:0 16px 26px rgba(44,34,24,.18);background-image:repeating-linear-gradient(180deg,transparent 0 11px,rgba(44,34,24,.14) 11px 12px);background-size:78% auto;background-repeat:no-repeat;background-position:50% 14px}
.buch-pl{left:50%;transform-origin:left center;transform:translateX(-100%) rotateY(-34deg) translateX(100%) rotateY(0);transform:rotateY(34deg);transform-origin:right center;right:50%;left:auto}
.buch-pr{left:50%;transform-origin:left center;transform:rotateY(-34deg)}
.buch-pf{left:50%;transform-origin:left center;transform:rotateY(-58deg);opacity:.92}
.is-active .buch-pl{animation:buchOpenL 1.6s var(--ease) both}
.is-active .buch-pr{animation:buchOpenR 1.6s var(--ease) both}
.is-active .buch-pf{animation:buchFlut 5s ease-in-out 1.6s infinite alternate,buchOpenF 1.6s var(--ease) both}
@keyframes buchOpenL{from{transform:rotateY(86deg)}to{transform:rotateY(34deg)}}
@keyframes buchOpenR{from{transform:rotateY(-86deg)}to{transform:rotateY(-34deg)}}
@keyframes buchOpenF{from{transform:rotateY(-86deg)}to{transform:rotateY(-58deg)}}
@keyframes buchFlut{from{transform:rotateY(-58deg)}to{transform:rotateY(-30deg)}}

/* ════════════════ 10 LUXUS-AUTO · Glassmorphism Tunnel ════════════════ */
.s-aur{background:#08080d;color:#f2ead8;font-family:'Optima','Avenir Next',system-ui,sans-serif}
.aur-tunnel{position:absolute;inset:0;overflow:hidden}
.aur-road{position:absolute;left:-25%;right:-25%;bottom:-12%;height:64%;background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(217,178,97,.32) 30px 32px);transform:perspective(420px) rotateX(64deg);opacity:.75}
.is-active .aur-road{animation:aurRush .4s linear infinite}
@keyframes aurRush{to{background-position:0 64px}}
.aur-wall{position:absolute;top:0;bottom:38%;width:34%;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(217,178,97,.16) 44px 46px);opacity:.6}
.aur-wl{left:-4%;transform:skewY(16deg)}
.aur-wr{right:-4%;transform:skewY(-16deg)}
.is-active .aur-wl{animation:aurWallL .5s linear infinite}
.is-active .aur-wr{animation:aurWallR .5s linear infinite}
@keyframes aurWallL{to{background-position:-92px 0}}
@keyframes aurWallR{to{background-position:92px 0}}
.aur-horizon{position:absolute;left:0;right:0;top:56%;height:2px;background:linear-gradient(90deg,transparent,rgba(217,178,97,.85),transparent);box-shadow:0 0 26px 4px rgba(217,178,97,.35)}
.aur-head{position:relative;z-index:3;text-align:center;padding-top:16px}
.aur-logo{display:block;font-size:.92rem;font-weight:600;letter-spacing:.5em;margin-left:.5em;color:#e8d3a0}
.aur-sub{display:block;font-size:.28rem;letter-spacing:.42em;color:rgba(242,234,216,.45);margin-top:3px}
.aur-glass{position:absolute;left:26px;right:26px;top:96px;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.is-active .aur-glass{animation:aurGlassIn 1.1s var(--ease) both}
@keyframes aurGlassIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.aur-wheel-wrap{perspective:420px}
.aur-wheel{position:relative;width:94px;height:94px;border-radius:50%;background:repeating-conic-gradient(#15151d 0 47deg,#caa14f 47deg 60deg);box-shadow:inset 0 0 0 7px #0e1016,inset 0 0 0 9px #d9b261,0 16px 30px rgba(0,0,0,.6);transform:rotateX(12deg) rotateY(-14deg)}
.is-active .aur-wheel{animation:aurSpin 3.6s linear infinite}
@keyframes aurSpin{to{transform:rotateX(12deg) rotateY(-14deg) rotate(360deg)}}
.aur-hub{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#f4e3b2,#a8812e)}
.aur-h{font-size:1.02rem;font-weight:500;letter-spacing:.02em;line-height:1.12}
.aur-h em{font-style:italic;color:#d9b261}
.aur-specs{display:flex;gap:14px;margin:9px 0 11px}
.aur-specs span{font-size:.3rem;letter-spacing:.16em;color:rgba(242,234,216,.5);text-transform:uppercase}
.aur-specs b{display:block;font-size:.62rem;font-weight:600;color:#e8d3a0;letter-spacing:.04em}
.aur-cta{display:inline-block;font-size:.34rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#08080d;background:linear-gradient(135deg,#e8d3a0,#c89b3c);padding:8px 15px;border-radius:3px}
.aur-foot{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:.32rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,234,216,.35);z-index:3}

/* ════════════════ 11 RESTAURANT · The Culinary Splash ════════════════ */
.s-rest{background:#fcfbf7;color:#191510;font-family:'Didot','Bodoni MT',Georgia,serif;text-align:center}
.rest-head{display:flex;justify-content:space-between;align-items:baseline;padding:17px 20px}
.rest-logo{font-size:.66rem;font-style:italic;letter-spacing:.1em}
.rest-nav{display:flex;gap:11px;font-size:.31rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5;font-family:system-ui,sans-serif;font-weight:600}
.rest-stage{position:absolute;left:50%;top:48px;width:218px;height:218px;transform:translateX(-50%)}
.rest-svg{position:absolute;inset:0;overflow:visible}
.rest-drop{opacity:0}
.is-active .rest-drop{animation:restDrop 8s cubic-bezier(.5,0,.9,.4) infinite}
@keyframes restDrop{0%,3%{opacity:1;transform:translateY(0)}11%{opacity:1;transform:translateY(158px)}12%,100%{opacity:0;transform:translateY(158px)}}
.rest-pool{transform-box:fill-box;transform-origin:center;transform:scale(1)}
.is-active .rest-pool{animation:restPool 8s ease-out infinite}
@keyframes restPool{0%,10%{transform:scale(0)}13%{transform:scale(1.5)}17%{transform:scale(.9)}22%,86%{transform:scale(1)}94%,100%{transform:scale(0)}}
.rest-sp{transform-box:fill-box;transform-origin:center;opacity:0}
.is-active .rest-sp{animation:restSp 8s cubic-bezier(.2,.7,.4,1) infinite}
.rsp1{--sx:-44px;--sy:-30px}.rsp2{--sx:42px;--sy:-36px}.rsp3{--sx:-26px;--sy:-52px;animation-delay:.06s}.rsp4{--sx:30px;--sy:-58px;animation-delay:.06s}.rsp5{--sx:-58px;--sy:-8px;animation-delay:.1s}.rsp6{--sx:56px;--sy:-12px;animation-delay:.1s}
@keyframes restSp{0%,11%{opacity:0;transform:translate(0,0) scale(.6)}13%{opacity:1}19%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}30%{opacity:0;transform:translate(calc(var(--sx)*.8),calc(var(--sy)*-.2 + 26px)) scale(.4)}100%{opacity:0}}
.rest-ring{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.is-active .rest-ring{animation:restRing 8s ease-out infinite}
@keyframes restRing{0%,11%{transform:scale(0);opacity:0}13%{opacity:.85}30%{transform:scale(2.3);opacity:0}100%{opacity:0}}
.rest-star{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 4px 14px rgba(200,155,60,.45))}
.is-active .rest-star{animation:restStar 8s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes restStar{0%,13%{transform:scale(0) rotate(-42deg);opacity:0}24%{transform:scale(1.12) rotate(4deg);opacity:1}30%,88%{transform:scale(1) rotate(0);opacity:1}96%,100%{transform:scale(0);opacity:0}}
.rest-steam{position:absolute;left:50%;top:-6px;width:80px;height:74px;transform:translateX(-50%)}
.rest-steam i{position:absolute;bottom:0;width:14px;height:64px;border-radius:50%;background:radial-gradient(ellipse 40% 60% at 50% 60%,rgba(25,21,16,.1),transparent 75%);filter:blur(3px);opacity:0}
.rest-steam i:nth-child(1){left:6px}.rest-steam i:nth-child(2){left:32px}.rest-steam i:nth-child(3){left:56px}
.is-active .rest-steam i{animation:restSteam 4.4s ease-in-out infinite}
.is-active .rest-steam i:nth-child(2){animation-delay:1.4s}
.is-active .rest-steam i:nth-child(3){animation-delay:2.6s}
@keyframes restSteam{0%{opacity:0;transform:translateY(16px) scaleY(.7) skewX(0)}30%{opacity:.85}60%{transform:translateY(-18px) scaleY(1.1) skewX(7deg)}100%{opacity:0;transform:translateY(-40px) scaleY(1.25) skewX(-6deg)}}
.rest-copy{position:absolute;left:0;right:0;bottom:18px;padding:0 24px}
.rest-h{font-size:1.3rem;font-weight:400;line-height:1.04;letter-spacing:-.01em}
.rest-h em{font-style:italic;color:#c89b3c}
.rest-p{font-size:.32rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(25,21,16,.45);margin:8px 0 11px;font-family:system-ui,sans-serif;font-weight:600}
.rest-cta{display:inline-block;font-size:.34rem;letter-spacing:.3em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;border:1px solid #191510;padding:8px 18px}

/* ════════════════ 12 SUSHI · The Katana Split ════════════════ */
.s-sushi{background:#0d0a0f;color:#f3ecdf;font-family:'Hiragino Mincho ProN','Yu Mincho',Georgia,serif}
.sushi-void{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sushi-menu{text-align:center;position:relative;z-index:2}
.sushi-h{font-size:1.5rem;font-weight:500;letter-spacing:.12em}
.sushi-sub{font-size:.36rem;letter-spacing:.2em;color:rgba(243,236,223,.55);margin:8px 0 13px}
.sushi-cta{display:inline-block;font-size:.36rem;letter-spacing:.26em;border:1px solid rgba(243,236,223,.5);padding:8px 18px}
.sr{position:absolute;border-radius:50%}
.sr1{width:56px;height:56px;left:13%;top:18%;background:radial-gradient(circle at 50% 44%,#e7634a 0 27%,#f6f3ea 27% 62%,#222b1c 62%)}
.sr2{width:44px;height:44px;right:12%;top:24%;background:radial-gradient(circle at 50% 44%,#9fc46b 0 25%,#f6f3ea 25% 60%,#222b1c 60%)}
.sr3{width:38px;height:38px;left:18%;bottom:16%;background:radial-gradient(circle at 50% 44%,#f0a04e 0 26%,#f6f3ea 26% 61%,#222b1c 61%)}
.sr4{width:62px;height:62px;right:15%;bottom:13%;background:radial-gradient(circle at 50% 44%,#e7634a 0 24%,#f6f3ea 24% 58%,#222b1c 58%)}
.is-active .sr{animation:srFloat 7s ease-in-out infinite alternate}
.is-active .sr2{animation-delay:1.2s}.is-active .sr3{animation-delay:2.4s}.is-active .sr4{animation-delay:3.4s}
@keyframes srFloat{from{transform:translateY(-7px) rotate(-8deg)}to{transform:translateY(9px) rotate(10deg)}}
.sushi-stick{position:absolute;width:120px;height:3px;border-radius:2px;background:linear-gradient(90deg,#caa37a,#8a6a48)}
.ss1{right:-16px;top:44%;transform:rotate(-32deg)}
.ss2{right:-22px;top:50%;transform:rotate(-28deg)}
.sushi-half{position:absolute;inset:0;background:radial-gradient(130% 130% at 18% 0,#a91a28,#7e0f1c 58%,#660a16);z-index:3}
.sushi-ht{clip-path:polygon(0 0,100% 0,100% 36%,0 64%)}
.sushi-hb{clip-path:polygon(0 64%,100% 36%,100% 100%,0 100%)}
.is-active .sushi-ht{animation:sushiHt 12s var(--ease) infinite}
.is-active .sushi-hb{animation:sushiHb 12s var(--ease) infinite}
@keyframes sushiHt{0%,33%{transform:none;opacity:1}46%,88%{transform:translate(-4%,-13%);opacity:1}97%,100%{transform:none;opacity:1}}
@keyframes sushiHb{0%,33%{transform:none;opacity:1}46%,88%{transform:translate(4%,13%);opacity:1}97%,100%{transform:none;opacity:1}}
.sushi-brand{position:absolute;left:9%;top:9%;font-size:1.2rem;letter-spacing:.3em;writing-mode:vertical-rl;color:#f3ecdf;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.sushi-tag{position:absolute;right:8%;bottom:9%;font-size:.34rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,236,223,.7);font-family:system-ui,sans-serif;font-weight:600}
.sushi-slash{position:absolute;top:50%;left:-32%;width:164%;height:2.5px;z-index:4;opacity:0;transform:rotate(-15.6deg);background:linear-gradient(90deg,transparent,#fff 40%,#fff 60%,transparent);box-shadow:0 0 18px rgba(255,255,255,1),0 0 50px rgba(255,210,210,.8)}
.is-active .sushi-slash{animation:sushiSlash 12s cubic-bezier(.7,0,.2,1) infinite}
@keyframes sushiSlash{0%,29%{transform:rotate(-15.6deg) translateX(-104%);opacity:0}30%{opacity:1}35%{transform:rotate(-15.6deg) translateX(104%);opacity:1}36%,100%{transform:rotate(-15.6deg) translateX(104%);opacity:0}}

/* ════════════════ 13 OPTIKER · Chromatic Refraction ════════════════ */
.s-opt{background:#f2f1ed;color:#131312;font-family:'Avenir Next','Century Gothic',system-ui,sans-serif}
.opt-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;position:relative;z-index:5}
.opt-logo{font-size:.6rem;font-weight:700;letter-spacing:-.01em}
.opt-logo i{font-style:normal;color:#ff4d2e}
.opt-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;font-weight:600}
.opt-field{position:absolute;left:0;right:0;top:64px;bottom:96px}
.opt-layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.opt-big{font-size:2.55rem;font-weight:800;letter-spacing:.04em}
.opt-mid{font-size:.66rem;font-style:italic;font-family:Georgia,serif}
.opt-blurry{filter:blur(6px);opacity:.6}
.opt-ab1{color:#ff2050;filter:blur(3px);opacity:.42;transform:translate(-5px,-2px);mix-blend-mode:multiply}
.opt-ab2{color:#00b8d4;filter:blur(3px);opacity:.42;transform:translate(5px,2px);mix-blend-mode:multiply}
.is-active .opt-ab1{animation:optAb1 3.4s ease-in-out infinite alternate}
.is-active .opt-ab2{animation:optAb2 3.8s ease-in-out infinite alternate}
@keyframes optAb1{to{transform:translate(-8px,-4px)}}
@keyframes optAb2{to{transform:translate(8px,4px)}}
.opt-sharp{color:#131312;transform:scale(1.1);clip-path:circle(70px at 50% 46%)}
.is-active .opt-sharp{animation:optLensClip 10s ease-in-out infinite}
@keyframes optLensClip{0%,100%{clip-path:circle(70px at 26% 40%)}33%{clip-path:circle(70px at 74% 34%)}66%{clip-path:circle(70px at 52% 66%)}}
.opt-lens{position:absolute;left:50%;top:46%;width:154px;height:154px;margin:-77px;border-radius:50%;border:3px solid rgba(19,19,18,.88);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset -18px -22px 36px rgba(255,255,255,.5),0 18px 40px rgba(19,19,18,.18)}
.opt-lens::after{content:'';position:absolute;right:-34px;bottom:-26px;width:46px;height:5px;border-radius:3px;background:#131312;transform:rotate(38deg)}
.is-active .opt-lens{animation:optLensMove 10s ease-in-out infinite}
@keyframes optLensMove{0%,100%{left:26%;top:40%}33%{left:74%;top:34%}66%{left:52%;top:66%}}
.opt-copy{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:0 18px 18px;gap:12px;z-index:5}
.opt-p{font-size:.34rem;letter-spacing:.08em;color:rgba(19,19,18,.55);max-width:55%;line-height:1.6}
.opt-cta{font-size:.36rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#f2f1ed;background:#131312;padding:9px 16px;border-radius:100px;white-space:nowrap}

/* ════════════════ 14 FORSTBETRIEB · Volumetric God Rays ════════════════ */
.s-forst{background:linear-gradient(180deg,#27473c,#16302a 46%,#0c201a);color:#eaf2ec;font-family:'Iowan Old Style','Palatino',Georgia,serif}
.forst-rays{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen}
.forst-rays i{position:absolute;top:-12%;height:90%;transform:rotate(17deg);transform-origin:top center;background:linear-gradient(180deg,rgba(224,244,226,.3),rgba(224,244,226,0) 78%);filter:blur(3px)}
.forst-rays i:nth-child(1){left:12%;width:64px}
.forst-rays i:nth-child(2){left:38%;width:110px}
.forst-rays i:nth-child(3){left:66%;width:54px}
.is-active .forst-rays i{animation:forstRay 7s ease-in-out infinite}
.is-active .forst-rays i:nth-child(2){animation-delay:2.2s;animation-duration:8.5s}
.is-active .forst-rays i:nth-child(3){animation-delay:4s;animation-duration:6.5s}
@keyframes forstRay{0%,100%{opacity:.35}50%{opacity:.95}}
.forst-birds{position:absolute;left:0;top:14%;width:130px;opacity:0;z-index:2}
.is-active .forst-birds{animation:forstBirds 15s linear infinite}
@keyframes forstBirds{0%{opacity:0;transform:translate(-120px,34px) scale(.55)}10%{opacity:.9}82%{opacity:.9}100%{opacity:0;transform:translate(500px,-40px) scale(1.2)}}
.forst-line{position:absolute;left:-3%;width:106%}
.fl5{bottom:37%;height:62px}.fl5 path{fill:#3a604f;opacity:.55}
.fl4{bottom:28%;height:74px}.fl4 path{fill:#2f5244;opacity:.7}
.fl3{bottom:18%;height:84px}.fl3 path{fill:#24443a;opacity:.85}
.fl2{bottom:7%;height:96px}.fl2 path{fill:#19352c}
.fl1{bottom:-2px;height:104px}.fl1 path{fill:#0c211a}
.is-active .fl1{animation:forstDrift 22s ease-in-out infinite alternate}
.is-active .fl2{animation:forstDrift 30s ease-in-out infinite alternate-reverse}
.is-active .fl3{animation:forstDrift 38s ease-in-out infinite alternate}
.is-active .fl4{animation:forstDrift 48s ease-in-out infinite alternate-reverse}
.is-active .fl5{animation:forstDrift 58s ease-in-out infinite alternate}
@keyframes forstDrift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
.forst-fog{position:absolute;left:-10%;width:120%;height:46px;background:radial-gradient(60% 100% at 50% 50%,rgba(214,232,220,.16),transparent 75%);filter:blur(7px)}
.forst-fog1{bottom:34%}.forst-fog2{bottom:23%}.forst-fog3{bottom:11%}
.is-active .forst-fog1{animation:forstFog 26s ease-in-out infinite alternate}
.is-active .forst-fog2{animation:forstFog 34s ease-in-out infinite alternate-reverse}
.is-active .forst-fog3{animation:forstFog 42s ease-in-out infinite alternate}
@keyframes forstFog{from{transform:translateX(-36px)}to{transform:translateX(36px)}}
.forst-head{position:relative;z-index:3;padding:16px 18px}
.forst-logo{font-size:.62rem;font-weight:600;letter-spacing:.3em}
.forst-logo i{font-style:italic;color:#b8d4a8;margin:0 2px}
.forst-copy{position:absolute;left:18px;top:78px;z-index:3;max-width:62%}
.forst-h{font-size:1.42rem;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.is-active .forst-h{animation:forstHIn 1.4s var(--ease) .2s both}
@keyframes forstHIn{from{opacity:0;transform:translateY(18px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.forst-p{font-size:.36rem;letter-spacing:.14em;color:rgba(234,242,236,.65);margin:9px 0 13px;font-family:system-ui,sans-serif}
.forst-cta{display:inline-block;font-size:.35rem;letter-spacing:.22em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;color:#0c211a;background:#b8d4a8;padding:8px 16px;border-radius:3px}

/* ════════════════ 15 BURGER · Anti-Gravity Stack ════════════════ */
.s-brg{background:radial-gradient(120% 100% at 50% 0,#ffd45e,#ffc93c 60%);color:#181208;font-family:'Arial Black','Avenir Next Heavy',system-ui,sans-serif}
.brg-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;position:relative;z-index:4}
.brg-logo{font-size:.62rem;font-weight:900;letter-spacing:.04em;background:#181208;color:#ffc93c;padding:5px 9px;border-radius:6px;transform:rotate(-2deg)}
.brg-badge{font-size:.3rem;font-weight:900;letter-spacing:.22em;border:2px solid #181208;border-radius:100px;padding:4px 10px}
.brg-stage{position:absolute;left:50%;top:178px;width:0;height:0;z-index:2}
.brg-wave{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;border:4px solid rgba(24,18,8,.5);opacity:0}
.is-active .brg-wave{animation:brgWave 9s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes brgWave{0%,49%{opacity:0;transform:scale(.15)}51%{opacity:.85}68%{opacity:0;transform:scale(2.7)}100%{opacity:0}}
.brg-part{position:absolute;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}
.is-active .brg-part{animation:brgFloat 9s ease-in-out infinite}
@keyframes brgFloat{0%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}24%{transform:translate(calc(var(--fx)*.82),calc(var(--fy)*1.12)) rotate(calc(var(--fr)*-.6))}42%{transform:translate(calc(var(--fx)*.92),calc(var(--fy)*.9)) rotate(var(--fr))}50%{transform:translate(0,calc(var(--sy) - 6px)) rotate(0)}53%{transform:translate(0,calc(var(--sy) + 3px)) rotate(0)}56%,86%{transform:translate(0,var(--sy)) rotate(0)}96%,100%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}
.brg-bun-t{--sy:-47px;width:118px;height:42px;margin:-21px 0 0 -59px;border-radius:60px 60px 12px 12px;background:linear-gradient(180deg,#f2a64e,#d97f2a 80%);box-shadow:inset 0 -5px 0 rgba(120,60,10,.25)}
.brg-bun-t i{position:absolute;width:9px;height:5px;border-radius:50%;background:#ffeccd}
.brg-bun-t i:nth-child(1){left:24px;top:12px;transform:rotate(-18deg)}
.brg-bun-t i:nth-child(2){left:56px;top:8px;transform:rotate(10deg)}
.brg-bun-t i:nth-child(3){left:84px;top:15px;transform:rotate(24deg)}
.brg-salad{--sy:-22px;width:132px;height:14px;margin:-7px 0 0 -66px;border-radius:7px;background:radial-gradient(circle at 8px -4px,#7fbf3f 9px,transparent 10px),radial-gradient(circle at 30px -2px,#8fd04c 10px,transparent 11px),radial-gradient(circle at 54px -5px,#76b53a 9px,transparent 10px),radial-gradient(circle at 78px -2px,#8fd04c 10px,transparent 11px),radial-gradient(circle at 102px -4px,#7fbf3f 9px,transparent 10px),radial-gradient(circle at 124px -2px,#8fd04c 9px,transparent 10px),linear-gradient(180deg,#86c545,#6da834)}
.brg-tomato{--sy:-9px;width:108px;height:11px;margin:-5px 0 0 -54px;border-radius:6px;background:linear-gradient(180deg,#e8503c,#c93a28);box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.brg-cheese{--sy:2px;width:118px;height:12px;margin:-6px 0 0 -59px;background:linear-gradient(180deg,#ffd34e,#f5b81e);clip-path:polygon(0 0,100% 0,100% 55%,88% 55%,84% 100%,78% 55%,52% 55%,48% 100%,42% 55%,14% 55%,10% 100%,5% 55%,0 55%)}
.brg-patty{--sy:16px;width:124px;height:22px;margin:-11px 0 0 -62px;border-radius:12px;background:linear-gradient(180deg,#7a4426,#54290f);box-shadow:inset 0 3px 0 rgba(255,190,120,.18),inset 0 -4px 0 rgba(20,8,0,.3)}
.brg-bun-b{--sy:34px;width:118px;height:20px;margin:-10px 0 0 -59px;border-radius:10px 10px 26px 26px;background:linear-gradient(180deg,#eda04a,#cf7724);box-shadow:inset 0 -4px 0 rgba(120,60,10,.3)}
.brg-copy{position:absolute;left:16px;bottom:14px;right:16px;display:flex;align-items:flex-end;justify-content:space-between;z-index:4}
.brg-h{font-size:1.42rem;font-weight:900;line-height:.94;letter-spacing:-.01em}
.is-active .brg-h{animation:brgHIn .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes brgHIn{from{opacity:0;transform:scale(.7) rotate(-4deg)}to{opacity:1;transform:none}}
.brg-price{position:absolute;right:18px;top:-176px;background:#fff;border:3px solid #181208;border-radius:100px;padding:9px 11px;font-size:.46rem;font-weight:900;transform:rotate(9deg);box-shadow:4px 4px 0 #181208;z-index:4}
.is-active .brg-price{animation:brgPrice 2.4s ease-in-out infinite alternate}
@keyframes brgPrice{from{transform:rotate(6deg) translateY(0)}to{transform:rotate(11deg) translateY(-5px)}}
.brg-cta{font-size:.4rem;font-weight:900;letter-spacing:.1em;background:#181208;color:#ffc93c;padding:11px 16px;border-radius:10px;box-shadow:4px 4px 0 rgba(24,18,8,.25);white-space:nowrap}

/* ════════════════ 16 COACHING · Fluid Harmony ════════════════ */
.s-coach{background:#ece9f4;color:#3a3550;font-family:'Optima','Gill Sans','Segoe UI',sans-serif}
.coach-mesh i{position:absolute;border-radius:50%;filter:blur(34px);opacity:.75}
.coach-mesh i:nth-child(1){width:240px;height:240px;left:-60px;top:-40px;background:#c3b4f2}
.coach-mesh i:nth-child(2){width:220px;height:220px;right:-70px;top:90px;background:#ffd2b8}
.coach-mesh i:nth-child(3){width:200px;height:200px;left:90px;bottom:-80px;background:#b4e3d6}
.is-active .coach-mesh i:nth-child(1){animation:coachMesh1 11s ease-in-out infinite alternate}
.is-active .coach-mesh i:nth-child(2){animation:coachMesh2 13s ease-in-out infinite alternate}
.is-active .coach-mesh i:nth-child(3){animation:coachMesh3 12s ease-in-out infinite alternate}
@keyframes coachMesh1{to{transform:translate(46px,30px) scale(1.12)}}
@keyframes coachMesh2{to{transform:translate(-40px,-26px) scale(.92)}}
@keyframes coachMesh3{to{transform:translate(-30px,-36px) scale(1.15)}}
.coach-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;position:relative;z-index:3}
.coach-logo{font-size:.58rem;font-weight:600;letter-spacing:.18em}
.coach-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;font-weight:600}
.coach-stage{position:absolute;left:50%;top:148px;width:0;height:0;z-index:2}
.coach-drop{position:absolute;left:-4px;top:-130px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);opacity:0}
.is-active .coach-drop{animation:coachDrop 10s cubic-bezier(.55,0,.85,.45) infinite}
@keyframes coachDrop{0%,2%{opacity:1;transform:translateY(0) scale(1)}9%{opacity:1;transform:translateY(126px) scale(.8)}10%,100%{opacity:0;transform:translateY(126px)}}
.coach-rip{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);opacity:0}
.is-active .coach-rip{animation:coachRip 10s ease-out infinite}
.is-active .cr2{animation-delay:.5s}.is-active .cr3{animation-delay:1s}.is-active .cr4{animation-delay:1.5s}
@keyframes coachRip{0%,9%{opacity:0;transform:scale(.4)}11%{opacity:.95}34%{opacity:0;transform:scale(13)}100%{opacity:0}}
.coach-mandala{position:absolute;left:-105px;top:-105px;width:210px;height:210px}
.coach-spin1,.coach-spin2{transform-box:fill-box;transform-origin:center}
.is-active .coach-spin1{animation:coachBloom 10s cubic-bezier(.3,1.3,.5,1) infinite,coachSpin 40s linear infinite}
.is-active .coach-spin2{animation:coachBloom2 10s cubic-bezier(.3,1.3,.5,1) infinite,coachSpin 52s linear infinite reverse}
@keyframes coachBloom{0%,11%{opacity:0;transform:scale(.2) rotate(-30deg)}22%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.92)}}
@keyframes coachBloom2{0%,14%{opacity:0;transform:scale(.15) rotate(40deg)}26%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.9)}}
@keyframes coachSpin{to{rotate:360deg}}
.coach-copy{position:absolute;left:18px;bottom:18px;max-width:62%;z-index:3}
.coach-h{font-size:1.3rem;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.is-active .coach-h{animation:coachHIn 1.6s var(--ease) both}
@keyframes coachHIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.coach-p{font-size:.4rem;line-height:1.7;color:rgba(58,53,80,.65);margin:8px 0 12px}
.coach-cta{display:inline-block;font-size:.35rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;background:linear-gradient(135deg,#8f7fd9,#6a5bb8);border-radius:100px;padding:9px 18px;box-shadow:0 10px 24px rgba(106,91,184,.35)}

/* ════════════════ 17 REISEBÜRO · The Parallax Window ════════════════ */
.s-reise{background:linear-gradient(165deg,#f0ede8,#dfd9d0);color:#2e2c28;font-family:'Avenir Next','Segoe UI',system-ui,sans-serif}
.reise-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;position:relative;z-index:3}
.reise-logo{font-size:.6rem;font-weight:700;letter-spacing:.12em;color:#d97742}
.reise-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;font-weight:600}
.reise-window{position:absolute;right:20px;top:70px;width:186px;height:300px;border-radius:93px;background:#cfd8e2;border:13px solid #f8f6f2;box-shadow:0 24px 50px rgba(46,44,40,.28),inset 0 0 0 5px #d9d2c6,inset 0 10px 26px rgba(0,0,0,.18);overflow:hidden;z-index:2}
.reise-sky{position:absolute;inset:5px;border-radius:80px;overflow:hidden;background:linear-gradient(180deg,#92b8d9 0,#e9b9c6 36%,#f8cda1 62%,#ec9c6a 100%)}
.reise-sun{position:absolute;left:50%;bottom:26%;width:54px;height:54px;margin-left:-27px;border-radius:50%;background:radial-gradient(circle,#fff3cf 24%,#ffc878 58%,rgba(255,170,90,0) 78%)}
.is-active .reise-sun{animation:reiseSun 9s ease-in-out infinite alternate}
@keyframes reiseSun{from{transform:translateY(0);opacity:.95}to{transform:translateY(8px);opacity:.8}}
.reise-clouds{position:absolute;left:0;top:0;width:200%;height:100%}
.reise-clouds b{position:absolute;background:#fff;border-radius:100px;filter:blur(1.5px);box-shadow:18px -8px 0 -2px #fff,-16px -6px 0 -4px #fff}
.rcl1 b{width:64px;height:20px;opacity:.95}
.rcl1 b:nth-child(1){left:8%;top:64%}.rcl1 b:nth-child(2){left:58%;top:70%}
.rcl2 b{width:46px;height:14px;opacity:.8}
.rcl2 b:nth-child(1){left:4%;top:42%}.rcl2 b:nth-child(2){left:54%;top:38%}.rcl2 b:nth-child(3){left:30%;top:52%}
.rcl3 b{width:30px;height:9px;opacity:.6;filter:blur(2.5px)}
.rcl3 b:nth-child(1){left:14%;top:20%}.rcl3 b:nth-child(2){left:64%;top:16%}
.is-active .rcl1{animation:reiseDrift 14s linear infinite}
.is-active .rcl2{animation:reiseDrift 26s linear infinite}
.is-active .rcl3{animation:reiseDrift 44s linear infinite}
@keyframes reiseDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reise-glass{position:absolute;inset:5px;border-radius:80px;background:linear-gradient(125deg,rgba(255,255,255,.34) 0 18%,transparent 30% 64%,rgba(255,255,255,.14) 78%);pointer-events:none}
.reise-glare{position:absolute;inset:5px;border-radius:80px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 46%,transparent 60%);opacity:.6;pointer-events:none}
.is-active .reise-glare{animation:reiseGlare 11s ease-in-out infinite alternate}
@keyframes reiseGlare{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
.reise-copy{position:absolute;left:18px;top:118px;max-width:46%;z-index:3}
.reise-script{font-family:'Snell Roundhand','Savoye LET','Segoe Script',cursive;font-size:1.1rem;color:#d97742;margin-bottom:2px}
.is-active .reise-script{animation:reiseScriptIn 1.2s var(--ease) both}
@keyframes reiseScriptIn{from{opacity:0;transform:translateY(12px) rotate(-3deg)}to{opacity:1;transform:none}}
.reise-h{font-size:1.32rem;font-weight:700;line-height:1.04;letter-spacing:-.025em}
.reise-p{font-size:.38rem;line-height:1.7;color:rgba(46,44,40,.6);margin:9px 0 13px}
.reise-cta{display:inline-block;font-size:.35rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#fff;background:#d97742;border-radius:100px;padding:9px 16px;box-shadow:0 10px 22px rgba(217,119,66,.35)}

/* ════════════════ 18 MUSIKSTUDIO · The Sub-Bass Pulse ════════════════ */
.s-mus{background:#0a0a10;color:#e8e8f2;font-family:'Arial Black',system-ui,sans-serif}
.mus-inner{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px)}
.is-active .mus-inner{animation:musShake 7s linear infinite}
@keyframes musShake{0%,40%{transform:none}42%{transform:translate(1.5px,-1px)}45%{transform:translate(-1.5px,1px)}48%{transform:translate(1px,1.5px)}51%{transform:translate(-1px,-1.5px)}54%{transform:translate(1.5px,0)}57%{transform:translate(-1px,1px)}60%{transform:translate(1px,-1px)}64%{transform:translate(-1.5px,0)}68%{transform:translate(1px,1px)}72%{transform:translate(-.5px,-.5px)}76%,100%{transform:none}}
.mus-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.mus-logo{font-size:.6rem;font-weight:900;letter-spacing:.32em}
.mus-rec{display:flex;align-items:center;gap:5px;font-size:.32rem;letter-spacing:.14em;color:rgba(232,232,242,.55);font-family:ui-monospace,monospace}
.mus-rec i{width:6px;height:6px;border-radius:50%;background:#ff2d55}
.is-active .mus-rec i{animation:musRec 1.2s steps(1) infinite}
@keyframes musRec{50%{opacity:.25}}
.mus-stage{position:absolute;left:0;right:0;top:108px;height:170px}
.mus-wave{position:absolute;inset:0}
.mus-calm,.mus-drop{transform-box:fill-box;transform-origin:center}
.mus-calm{opacity:1;filter:drop-shadow(0 0 6px rgba(25,240,200,.7))}
.is-active .mus-calm{animation:musCalm 7s linear infinite}
@keyframes musCalm{0%,38%{opacity:1}41%,76%{opacity:0}80%,100%{opacity:1}}
.mus-drop{opacity:0;filter:drop-shadow(0 0 8px rgba(255,45,155,.9)) drop-shadow(0 0 22px rgba(255,45,155,.5))}
.is-active .mus-drop{animation:musDrop 7s linear infinite}
@keyframes musDrop{0%,39%{opacity:0;transform:scaleY(.2);transform-origin:50% 50%}41%{opacity:1;transform:scaleY(1.18)}44%{transform:scaleY(.94)}48%{transform:scaleY(1.08)}52%{transform:scaleY(1)}74%{opacity:1}78%,100%{opacity:0;transform:scaleY(.2)}}
.mus-eq{position:absolute;left:50%;bottom:-34px;display:flex;gap:5px;transform:translateX(-50%)}
.mus-eq i{width:7px;height:26px;border-radius:2px;background:linear-gradient(180deg,#ff2d9b,#19f0c8);transform:scaleY(.2);transform-origin:bottom}
.is-active .mus-eq i{animation:musEq .62s ease-in-out infinite alternate}
.mus-eq i:nth-child(2){animation-delay:.08s}.mus-eq i:nth-child(3){animation-delay:.16s}.mus-eq i:nth-child(4){animation-delay:.24s}.mus-eq i:nth-child(5){animation-delay:.32s}.mus-eq i:nth-child(6){animation-delay:.4s}.mus-eq i:nth-child(7){animation-delay:.46s}.mus-eq i:nth-child(8){animation-delay:.38s}.mus-eq i:nth-child(9){animation-delay:.28s}.mus-eq i:nth-child(10){animation-delay:.18s}.mus-eq i:nth-child(11){animation-delay:.1s}.mus-eq i:nth-child(12){animation-delay:.02s}
@keyframes musEq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.mus-copy{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end}
.mus-h{font-size:1.06rem;font-weight:900;line-height:1;letter-spacing:.01em}
.is-active .mus-h{animation:musHIn .9s var(--ease) both}
@keyframes musHIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mus-p{display:none}
.mus-cta{font-size:.36rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#0a0a10;background:linear-gradient(90deg,#19f0c8,#7df9ff);padding:9px 14px;border-radius:4px;box-shadow:0 0 22px rgba(25,240,200,.4);white-space:nowrap}

/* ════════════════ 19 KINDERGARTEN · The Physics Sandbox ════════════════ */
.s-kiga{background:#fdf6ec;color:#3f3a35;font-family:'Marker Felt','Comic Sans MS','Segoe Print',cursive}
.kiga-head{display:flex;justify-content:space-between;align-items:center;padding:13px 17px}
.kiga-logo b{font-size:.74rem;font-weight:700;display:inline-block}
.kiga-logo b:nth-child(6n+1){color:#e8503c;transform:rotate(-6deg)}
.kiga-logo b:nth-child(6n+2){color:#f5a623;transform:rotate(4deg)}
.kiga-logo b:nth-child(6n+3){color:#7fbf3f;transform:rotate(-3deg)}
.kiga-logo b:nth-child(6n+4){color:#38a6d9;transform:rotate(5deg)}
.kiga-logo b:nth-child(6n+5){color:#9b59b6;transform:rotate(-5deg)}
.kiga-logo b:nth-child(6n+6){color:#e8627f;transform:rotate(3deg)}
.kiga-sun{font-size:.85rem;color:#f5a623}
.is-active .kiga-sun{animation:kigaSun 9s linear infinite}
@keyframes kigaSun{to{transform:rotate(360deg)}}
.kiga-canvas{position:absolute;left:14px;right:14px;top:52px;bottom:108px;border-bottom:3px dashed rgba(63,58,53,.25)}
.kg-block{position:absolute;left:0;top:0;width:24px;height:24px;will-change:transform}
.kg-sq{border-radius:5px}
.kg-ci{border-radius:50%}
.kg-tri{clip-path:polygon(50% 0,100% 100%,0 100%)}
.kg-c1{background:#e8503c}.kg-c2{background:#f5a623}.kg-c3{background:#7fbf3f}.kg-c4{background:#38a6d9}.kg-c5{background:#9b59b6}.kg-c6{background:#e8627f}
.kiga-copy{position:absolute;left:0;right:0;bottom:14px;text-align:center;padding:0 20px}
.kiga-h{font-size:1.02rem;font-weight:700;line-height:1.1}
.kiga-h br + *{color:#38a6d9}
.kiga-p{font-size:.4rem;color:rgba(63,58,53,.65);margin:6px 0 10px;font-family:'Trebuchet MS',system-ui,sans-serif}
.kiga-cta{display:inline-block;font-size:.42rem;font-weight:700;color:#fff;background:#e8503c;border-radius:100px;padding:8px 18px;box-shadow:0 6px 0 #b53a2a;transform:rotate(-1.5deg)}

/* ════════════════ 20 WOHNEN · The Isometric Pop-Up ════════════════ */
.s-wohn{background:linear-gradient(170deg,#f3ede3,#e9e1d3);color:#33302c;font-family:'Avenir Next','Futura','Segoe UI',system-ui,sans-serif}
.wohn-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;position:relative;z-index:4}
.wohn-logo{font-size:.56rem;font-weight:600;letter-spacing:.38em;color:#a8743c}
.wohn-nav{display:flex;gap:10px;font-size:.32rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;font-weight:600}
.wohn-scene{position:absolute;right:0;top:64px;width:260px;height:270px;perspective:950px;z-index:2}
.wohn-iso{position:absolute;inset:0;transform:rotateX(57deg) rotateZ(-42deg);transform-style:preserve-3d}
.wohn-floor{position:absolute;left:48px;top:52px;width:168px;height:168px;background:linear-gradient(135deg,#efe7d8,#e3d7c2);border:1.5px solid rgba(120,100,70,.4);background-image:linear-gradient(rgba(120,100,70,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(120,100,70,.16) 1px,transparent 1px);background-size:28px 28px;box-shadow:0 0 40px rgba(120,100,70,.25)}
.is-active .wohn-floor{animation:wohnFloor 1s var(--ease) both}
@keyframes wohnFloor{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.wohn-wall{position:absolute;background:rgba(173,196,210,.2);border:1.5px solid rgba(110,135,150,.55);box-shadow:inset 0 0 22px rgba(255,255,255,.25)}
.ww1{left:48px;top:52px;width:168px;height:62px;transform-origin:50% 0;transform:rotateX(90deg)}
.ww2{left:48px;top:52px;width:62px;height:168px;transform-origin:0 50%;transform:rotateY(-90deg)}
.is-active .ww1{animation:wohnWall1 1.1s cubic-bezier(.3,1.3,.5,1) .8s both}
.is-active .ww2{animation:wohnWall2 1.1s cubic-bezier(.3,1.3,.5,1) 1.05s both}
@keyframes wohnWall1{from{transform:rotateX(0);background:#ddd2bf;border-color:rgba(120,100,70,.5)}60%{transform:rotateX(96deg)}to{transform:rotateX(90deg);background:rgba(173,196,210,.2);border-color:rgba(110,135,150,.55)}}
@keyframes wohnWall2{from{transform:rotateY(0);background:#ddd2bf;border-color:rgba(120,100,70,.5)}60%{transform:rotateY(-96deg)}to{transform:rotateY(-90deg);background:rgba(173,196,210,.2);border-color:rgba(110,135,150,.55)}}
.wohn-mob{position:absolute;border-radius:4px}
.wm1{left:70px;top:120px;width:52px;height:78px;background:#c4937a;box-shadow:inset 0 0 0 2px rgba(90,55,35,.35),inset 0 12px 0 rgba(255,255,255,.3)}
.wm2{left:150px;top:80px;width:44px;height:44px;background:#8fae9a;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(50,80,60,.3)}
.wm3{left:142px;top:150px;width:58px;height:34px;background:#a8b8c4;box-shadow:inset 0 0 0 2px rgba(60,80,95,.3)}
.is-active .wohn-mob{animation:wohnMob .8s cubic-bezier(.3,1.4,.5,1) both}
.is-active .wm1{animation-delay:1.7s}.is-active .wm2{animation-delay:1.85s}.is-active .wm3{animation-delay:2s}
@keyframes wohnMob{from{opacity:0;transform:translateZ(0) scale(.4)}to{opacity:1;transform:translateZ(16px) scale(1)}}
.wohn-mob{transform:translateZ(16px)}
.wohn-light{position:absolute;left:88px;top:90px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,179,92,.6),rgba(255,179,92,0) 70%)}
.is-active .wohn-light{animation:wohnLight 1.2s ease 2.3s both,wohnGlow 5s ease-in-out 3.5s infinite alternate}
@keyframes wohnLight{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes wohnGlow{to{opacity:.7;transform:scale(1.12)}}
.wohn-shadow{position:absolute;background:linear-gradient(135deg,rgba(60,50,40,.3),rgba(60,50,40,0) 80%)}
.wsh1{left:48px;top:114px;width:150px;height:90px;clip-path:polygon(0 0,22% 0,100% 100%,0 100%);transform-origin:0 0}
.wsh2{left:110px;top:52px;width:106px;height:140px;clip-path:polygon(0 0,100% 64%,100% 100%,0 22%);transform-origin:0 0}
.is-active .wohn-shadow{animation:wohnShadow 1.4s var(--ease) 2.5s both}
@keyframes wohnShadow{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.wohn-copy{position:absolute;left:18px;bottom:20px;max-width:46%;z-index:4}
.wohn-h{font-size:1.3rem;font-weight:600;line-height:1.06;letter-spacing:-.02em}
.wohn-h em{font-style:normal;color:#a8743c}
.is-active .wohn-h{animation:wohnHIn 1.2s var(--ease) both}
@keyframes wohnHIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.wohn-p{font-size:.38rem;line-height:1.7;color:rgba(51,48,44,.6);margin:8px 0 12px}
.wohn-cta{display:inline-block;font-size:.35rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;background:#a8743c;border-radius:3px;padding:9px 16px}

/* ════════════════ 21 BARBERSHOP · Neon Brick (NEU) ════════════════ */
.s-barber{background:#1c100c;color:#efe3d0;font-family:'Rockwell','Courier New',serif}
.barber-wall{position:absolute;inset:0;width:100%;height:100%}
.barber-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(8,3,2,.82) 100%)}
.barber-head{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:15px 17px}
.barber-logo{font-size:.52rem;font-weight:700;letter-spacing:.3em}
.barber-est{font-size:.32rem;letter-spacing:.3em;opacity:.5}
.barber-sign{position:absolute;left:50%;top:118px;transform:translateX(-50%);text-align:center;z-index:3;border:3px solid rgba(255,176,61,.9);border-radius:18px;padding:20px 30px 16px;box-shadow:0 0 22px rgba(255,156,31,.45),inset 0 0 26px rgba(255,156,31,.22)}
.barber-neon{display:block;font-size:2.1rem;font-weight:700;letter-spacing:.16em;color:#ffd9a0;text-shadow:0 0 7px #ffae3c,0 0 20px #ff9d1f,0 0 48px rgba(255,140,20,.85)}
.barber-neon-sub{display:block;margin-top:7px;font-size:.36rem;letter-spacing:.42em;color:#ffe9cd;text-shadow:0 0 6px #ffae3c,0 0 16px rgba(255,140,20,.7)}
.is-active .barber-sign{animation:barberFlick 2.6s steps(1) both,barberBuzz 4s ease-in-out 2.6s infinite}
@keyframes barberFlick{0%{opacity:.06}7%{opacity:.9}9%{opacity:.12}13%{opacity:.85}16%{opacity:.1}24%{opacity:1}29%{opacity:.25}34%{opacity:1}43%{opacity:.4}48%,100%{opacity:1}}
@keyframes barberBuzz{0%,100%{opacity:1}50%{opacity:.93}}
.barber-blade{position:absolute;top:55%;left:-40%;width:180%;height:9px;z-index:5;opacity:0;transform:rotate(-13deg);background:linear-gradient(90deg,transparent,#aab3bd 28%,#f8fbff 50%,#8a93a0 72%,transparent);box-shadow:0 0 16px rgba(240,248,255,.75)}
.is-active .barber-blade{animation:barberBlade 12s cubic-bezier(.75,0,.2,1) infinite}
@keyframes barberBlade{0%,42%{transform:rotate(-13deg) translateX(-102%);opacity:0}43%{opacity:1}50%{transform:rotate(-13deg) translateX(102%);opacity:1}51%,100%{transform:rotate(-13deg) translateX(102%);opacity:0}}
.barber-seam{position:absolute;top:55%;left:-10%;width:120%;height:2px;z-index:2;transform:rotate(-13deg);transform-origin:left center;background:linear-gradient(90deg,transparent,#ffb03d 18%,#ff8c14 50%,#ffb03d 82%,transparent);box-shadow:0 0 14px rgba(255,140,20,.9),0 0 34px rgba(255,140,20,.5)}
.is-active .barber-seam{animation:barberSeam 12s linear infinite}
@keyframes barberSeam{0%,43%{transform:rotate(-13deg) scaleX(0);opacity:0}44%{opacity:1}52%{transform:rotate(-13deg) scaleX(1)}78%{opacity:1}88%,100%{transform:rotate(-13deg) scaleX(1);opacity:0}}
.barber-copy{position:absolute;left:0;right:0;bottom:16px;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 17px}
.barber-p{font-size:.36rem;letter-spacing:.08em;color:rgba(239,227,208,.65);max-width:55%;line-height:1.6}
.barber-cta{font-size:.38rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#1c100c;background:linear-gradient(135deg,#ffc36a,#ff9d1f);padding:10px 15px;border-radius:4px;box-shadow:0 0 22px rgba(255,156,31,.4);white-space:nowrap}


/* ════════════════ CONTENT- & EFFEKT-AUSBAU (v5) ════════════════ */

/* 01 Friseur: Preiszeilen in der Enthüllung + rotierender Stempel */
.fri-rows{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.fri-rows span{display:flex;align-items:baseline;gap:7px;font-size:.38rem;color:#4a3a50;font-family:system-ui,sans-serif}
.fri-rows i{flex:1;border-bottom:1px dotted rgba(70,55,75,.4)}
.fri-rows b{font-weight:700}
.is-active .fri-rows span{animation:friRowIn 12s var(--ease) infinite}
.is-active .fri-rows span:nth-child(2){animation-name:friRowIn2}
.is-active .fri-rows span:nth-child(3){animation-name:friRowIn3}
@keyframes friRowIn{0%,40%{opacity:0;transform:translateY(8px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes friRowIn2{0%,44%{opacity:0;transform:translateY(8px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes friRowIn3{0%,48%{opacity:0;transform:translateY(8px)}54%,92%{opacity:1;transform:none}100%{opacity:0}}
.fri-stamp{position:absolute;top:60px;right:18px;width:44px;height:44px;border-radius:50%;border:1.5px dashed #b08d57;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-style:normal;color:#b08d57;z-index:5}
.is-active .fri-stamp{animation:friStamp 24s linear infinite}
@keyframes friStamp{to{transform:rotate(360deg)}}

/* 02 IT: Radar-Ping + KPI-Zeile */
.it-radar{position:absolute;left:50%;top:52%;width:16px;height:16px;margin:-8px;border-radius:50%;border:1.5px solid rgba(0,229,255,.9);opacity:0}
.compiled.is-active .it-radar{animation:itRadar 2.2s ease-out infinite}
@keyframes itRadar{0%{opacity:.9;transform:scale(.4)}80%{opacity:0;transform:scale(11)}100%{opacity:0}}
.it-kpi{font-size:.32rem;letter-spacing:.05em}
.it-kpi b{color:#00e5ff;font-weight:700}

/* 03 Taschen: Mini-Kollektion */
.bag-strip{display:flex;justify-content:center;gap:10px;margin-top:11px}
.bag-mini{display:flex;align-items:center;gap:5px;font-size:.32rem;letter-spacing:.1em;font-family:system-ui,sans-serif;font-weight:600;color:rgba(23,19,16,.65)}
.bag-mini i{display:block;width:15px;height:13px;clip-path:polygon(12% 28%,88% 28%,100% 100%,0 100%);position:relative}
.bm1 i{background:linear-gradient(180deg,#8a4a26,#5d2c12)}
.bm2 i{background:linear-gradient(180deg,#3a3a40,#1c1c20)}
.bm3 i{background:linear-gradient(180deg,#b58a52,#8a5f2e)}
.is-active .bag-mini{animation:bagMiniIn .8s var(--ease) both}
.is-active .bag-mini:nth-child(2){animation-delay:.15s}
.is-active .bag-mini:nth-child(3){animation-delay:.3s}
@keyframes bagMiniIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 04 Betten: Sternschnuppe + Siegel */
.bed-shoot{position:absolute;left:18%;top:18%;width:54px;height:1.5px;opacity:0;transform:rotate(24deg);background:linear-gradient(90deg,#fff,transparent);box-shadow:0 0 8px rgba(255,255,255,.8)}
.is-active .bed-shoot{animation:bedShoot 16s linear infinite}
@keyframes bedShoot{0%,73%{opacity:0;transform:rotate(24deg) translateX(0)}75%{opacity:1}79%{opacity:0;transform:rotate(24deg) translateX(150px)}100%{opacity:0}}
.bed-seal{position:absolute;top:-20px;right:14px;width:58px;height:58px;border-radius:50%;background:#f3c969;color:#6b4a12;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.28rem;font-weight:800;letter-spacing:.06em;line-height:1.25;text-align:center;box-shadow:0 8px 18px rgba(120,80,20,.35),inset 0 0 0 2px rgba(255,255,255,.5),inset 0 0 0 4px rgba(140,95,25,.35)}
.bed-seal b{font-size:.52rem;letter-spacing:0}
.is-active .bed-seal{animation:bedSeal 4s ease-in-out infinite}
@keyframes bedSeal{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.06)}}

/* 05 Dachdecker: Regen prallt ab + Chips */
.dach-rain{position:absolute;left:0;right:0;top:40px;height:230px;pointer-events:none}
.dach-rain i{position:absolute;top:-20px;width:1.5px;height:16px;background:linear-gradient(180deg,transparent,#9fc3f0);opacity:0}
.is-active .dach-rain i{animation:dachRain 5s linear infinite}
.dach-rain i:nth-child(1){left:18%;animation-delay:3.2s}.dach-rain i:nth-child(2){left:28%;animation-delay:3.5s}.dach-rain i:nth-child(3){left:38%;animation-delay:3.9s}.dach-rain i:nth-child(4){left:48%;animation-delay:3.3s}.dach-rain i:nth-child(5){left:58%;animation-delay:3.7s}.dach-rain i:nth-child(6){left:68%;animation-delay:4.1s}.dach-rain i:nth-child(7){left:78%;animation-delay:3.4s}.dach-rain i:nth-child(8){left:33%;animation-delay:4.3s}
@keyframes dachRain{0%{opacity:0;transform:translateY(0)}6%{opacity:.9}13%{opacity:.9;transform:translateY(120px)}16%{opacity:0;transform:translateY(132px) translateX(8px) rotate(40deg)}100%{opacity:0}}
.dach-chips{display:flex;gap:6px;margin-top:7px}
.dach-chips span{font-size:.3rem;letter-spacing:.08em;color:#bcd7ff;border:1px solid rgba(188,215,255,.35);border-radius:4px;padding:3px 7px}
.is-active .dach-chips span{animation:dachChip .7s var(--ease) both}
.is-active .dach-chips span:nth-child(2){animation-delay:.15s}
.is-active .dach-chips span:nth-child(3){animation-delay:.3s}
@keyframes dachChip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 06 Schreinerei: Staub + geschnitzte Chips */
.holz-dust b{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(243,220,184,.7);opacity:0}
.is-active .holz-dust b{animation:holzDust 8s ease-in-out infinite}
.holz-dust b:nth-child(1){left:20%;top:60%}.holz-dust b:nth-child(2){left:38%;top:70%;animation-delay:1.6s}.holz-dust b:nth-child(3){left:55%;top:64%;animation-delay:3.2s}.holz-dust b:nth-child(4){left:70%;top:72%;animation-delay:4.8s}.holz-dust b:nth-child(5){left:84%;top:58%;animation-delay:6.4s}
@keyframes holzDust{0%,100%{opacity:0;transform:translate(0,0)}15%{opacity:.85}60%{opacity:.4;transform:translate(-14px,-30px)}90%{opacity:0;transform:translate(-20px,-52px)}}
.holz-cards{display:flex;justify-content:center;gap:8px;margin-top:13px}
.holz-cards span{display:flex;align-items:center;gap:5px;font-size:.34rem;letter-spacing:.12em;text-transform:uppercase;font-family:system-ui,sans-serif;font-weight:700;color:#f3dcb8;background:rgba(40,20,5,.35);box-shadow:inset 0 2px 5px rgba(20,8,0,.5),inset 0 -1px 0 rgba(255,228,180,.2);border-radius:6px;padding:7px 10px}
.holz-cards i{font-style:normal;font-size:.5rem}
.is-active .holz-cards span{animation:holzCardIn .8s var(--ease) 2.2s both}
.is-active .holz-cards span:nth-child(2){animation-delay:2.4s}
.is-active .holz-cards span:nth-child(3){animation-delay:2.6s}
@keyframes holzCardIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}

/* 07 KFZ: Rundinstrumente */
.kfz-gauges{position:absolute;right:16px;top:54px;display:flex;gap:9px;z-index:3}
.kfz-g{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#10141d 62%,#1d2330 63%);box-shadow:inset 0 0 0 2px #232a38,0 6px 16px rgba(0,0,0,.5)}
.kfz-g i{position:absolute;left:50%;bottom:50%;width:2px;height:16px;margin-left:-1px;border-radius:2px;background:#00e5ff;transform-origin:bottom center;transform:rotate(-100deg);box-shadow:0 0 6px rgba(0,229,255,.9)}
.kfz-g2 i{background:#ff2d78;box-shadow:0 0 6px rgba(255,45,120,.9)}
.kfz-g span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:.26rem;letter-spacing:.18em;color:rgba(232,236,245,.55)}
.is-active .kfz-g i{animation:kfzNeedle 3.4s cubic-bezier(.3,1.3,.5,1) infinite}
.is-active .kfz-g2 i{animation-delay:.4s}
@keyframes kfzNeedle{0%{transform:rotate(-100deg)}22%{transform:rotate(82deg)}34%{transform:rotate(58deg)}52%{transform:rotate(74deg)}74%{transform:rotate(66deg)}100%{transform:rotate(-100deg)}}

/* 08 Gärtnerei: Schmetterling + Chips */
.gar-fly{position:absolute;width:30px;z-index:4;opacity:0;left:0;top:0}
.is-active .gar-fly{animation:garFlight 14s ease-in-out infinite}
@keyframes garFlight{0%{opacity:0;transform:translate(40px,330px) rotate(-12deg)}6%{opacity:1}28%{transform:translate(150px,160px) rotate(8deg)}52%{transform:translate(290px,250px) rotate(-10deg)}78%{transform:translate(400px,110px) rotate(6deg)}92%{opacity:1}100%{opacity:0;transform:translate(470px,60px) rotate(0)}}
.gw1,.gw2{transform-box:fill-box;transform-origin:right center}
.gw2{transform-origin:left center}
.is-active .gw1{animation:garFlapL .26s ease-in-out infinite alternate}
.is-active .gw2{animation:garFlapR .26s ease-in-out infinite alternate}
@keyframes garFlapL{to{transform:scaleX(.45)}}
@keyframes garFlapR{to{transform:scaleX(.45)}}
.gar-chips{display:flex;gap:6px;margin-top:11px}
.gar-chips span{font-size:.31rem;letter-spacing:.1em;color:#cfe6c4;border:1px solid rgba(207,230,196,.35);border-radius:100px;padding:4px 9px;font-family:system-ui,sans-serif;font-weight:600}
.is-active .gar-chips span{animation:dachChip .8s var(--ease) 1s both}
.is-active .gar-chips span:nth-child(2){animation-delay:1.15s}
.is-active .gar-chips span:nth-child(3){animation-delay:1.3s}

/* 09 Bücherei: Empfehlung */
.buch-tipp{display:flex;align-items:center;gap:9px;margin-top:12px;background:rgba(179,66,46,.08);border:1px solid rgba(179,66,46,.25);border-radius:9px;padding:8px 11px;max-width:240px}
.buch-tipp i{width:18px;height:26px;border-radius:2px 4px 4px 2px;background:linear-gradient(105deg,#b3422e 70%,#8a2f20);box-shadow:2px 2px 6px rgba(44,34,24,.3);flex-shrink:0}
.buch-tipp b{display:block;font-size:.36rem;letter-spacing:.1em;text-transform:uppercase;color:#b3422e;font-family:system-ui,sans-serif}
.buch-tipp span{font-size:.36rem;font-style:italic;color:rgba(44,34,24,.7)}
.is-active .buch-tipp{animation:buchTipp 1s var(--ease) 1.4s both}
@keyframes buchTipp{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.is-active .buch-tipp i{animation:buchTippBook 5s ease-in-out 2.4s infinite alternate}
@keyframes buchTippBook{to{transform:rotate(-7deg) translateY(-2px)}}

/* 10 Aurum: Funken + Pill */
.aur-sparks b{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:#e8d3a0;box-shadow:0 0 6px rgba(232,211,160,.9);opacity:0;bottom:18%}
.is-active .aur-sparks b{animation:aurSpark 4.5s linear infinite}
.aur-sparks b:nth-child(1){left:12%}.aur-sparks b:nth-child(2){left:28%;animation-delay:.7s}.aur-sparks b:nth-child(3){left:46%;animation-delay:1.5s}.aur-sparks b:nth-child(4){left:62%;animation-delay:2.2s}.aur-sparks b:nth-child(5){left:78%;animation-delay:3s}.aur-sparks b:nth-child(6){left:90%;animation-delay:3.7s}
@keyframes aurSpark{0%{opacity:0;transform:translateY(0)}10%{opacity:1}70%{opacity:.5}100%{opacity:0;transform:translateY(-130px) translateX(10px)}}
.aur-pill{display:inline-block;margin-left:8px;font-size:.3rem;letter-spacing:.2em;text-transform:uppercase;color:#e8d3a0;border:1px solid rgba(232,211,160,.4);border-radius:100px;padding:6px 10px;background:linear-gradient(110deg,transparent 30%,rgba(232,211,160,.14) 50%,transparent 70%) no-repeat;background-size:220% 100%}
.is-active .aur-pill{animation:aurPillShine 3.5s ease-in-out infinite}
@keyframes aurPillShine{0%{background-position:120% 0}55%,100%{background-position:-120% 0}}

/* 11 Restaurant: Menü-Gänge */
.rest-menu{display:flex;flex-direction:column;gap:4px;max-width:250px;margin:0 auto 9px}
.rest-menu span{display:flex;align-items:baseline;gap:7px;font-size:.38rem;color:rgba(25,21,16,.75)}
.rest-menu em{font-style:italic;color:#c89b3c;width:14px;flex-shrink:0;text-align:right}
.rest-menu i{flex:1;border-bottom:1px dotted rgba(25,21,16,.3)}
.is-active .rest-menu span{animation:restMenuIn .9s var(--ease) both}
.is-active .rest-menu span:nth-child(1){animation-delay:.5s}
.is-active .rest-menu span:nth-child(2){animation-delay:.7s}
.is-active .rest-menu span:nth-child(3){animation-delay:.9s}
@keyframes restMenuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 12 Sushi: Sakura + Nigiri */
.sushi-petals b{position:absolute;top:-14px;width:7px;height:7px;border-radius:60% 0 60% 0;background:#f3a7c0;opacity:0;z-index:1}
.is-active .sushi-petals b{animation:sushiPetal 9s linear infinite}
.sushi-petals b:nth-child(1){left:14%;animation-delay:0s}.sushi-petals b:nth-child(2){left:30%;animation-delay:1.5s}.sushi-petals b:nth-child(3){left:46%;animation-delay:3s}.sushi-petals b:nth-child(4){left:60%;animation-delay:4.5s}.sushi-petals b:nth-child(5){left:74%;animation-delay:6s}.sushi-petals b:nth-child(6){left:88%;animation-delay:7.5s}
@keyframes sushiPetal{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:.9}50%{transform:translate(-22px,240px) rotate(200deg)}100%{opacity:0;transform:translate(10px,500px) rotate(420deg)}}
.sushi-nigiri{display:flex;justify-content:center;gap:12px;margin-top:14px}
.sushi-nigiri i{width:34px;height:13px;border-radius:7px;background:linear-gradient(180deg,#f6f3ea 55%,#e8e2d2);position:relative;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.sushi-nigiri i::before{content:'';position:absolute;left:2px;right:2px;top:-6px;height:9px;border-radius:6px}
.sn1::before{background:linear-gradient(180deg,#ff8a66,#e7634a)}
.sn2::before{background:linear-gradient(180deg,#ffb066,#f0904e)}
.sn3::before{background:linear-gradient(180deg,#ff8a66,#e7634a);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.sn3::after{content:'';position:absolute;left:42%;top:-7px;width:5px;height:11px;background:#222b1c;border-radius:2px}
.is-active .sushi-nigiri i{animation:srFloat 6s ease-in-out infinite alternate}
.is-active .sushi-nigiri i:nth-child(2){animation-delay:.8s}
.is-active .sushi-nigiri i:nth-child(3){animation-delay:1.6s}

/* 13 Optiker: Fassungs-Reihe */
.opt-frames{position:absolute;left:0;right:0;bottom:104px;display:flex;justify-content:center;gap:22px;z-index:4}
.opt-frames i{position:relative;width:46px;height:18px;background:linear-gradient(#131312,#131312) 50% 4px/10px 2px no-repeat}
.opt-frames i::before,.opt-frames i::after{content:'';position:absolute;top:1px;width:17px;height:15px;border:2px solid #131312;border-radius:7px}
.opt-frames i::before{left:0}
.opt-frames i::after{right:0}
.opt-frames i:nth-child(2)::before,.opt-frames i:nth-child(2)::after{border-radius:50%;border-color:#ff4d2e}
.opt-frames i:nth-child(2){background:linear-gradient(#ff4d2e,#ff4d2e) 50% 4px/10px 2px no-repeat}
.opt-frames i:nth-child(3)::before,.opt-frames i:nth-child(3)::after{border-radius:2px}
.is-active .opt-frames i{animation:optFrameIn .8s var(--ease) both,optFrameFloat 4s ease-in-out 1s infinite alternate}
.is-active .opt-frames i:nth-child(2){animation-delay:.18s,1.4s}
.is-active .opt-frames i:nth-child(3){animation-delay:.36s,1.8s}
@keyframes optFrameIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes optFrameFloat{to{transform:translateY(-5px)}}

/* 14 Forst: Samen + Chips */
.forst-seeds b{position:absolute;top:-12px;width:5px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#b8d4a8;opacity:0}
.is-active .forst-seeds b{animation:forstSeed 11s linear infinite}
.forst-seeds b:nth-child(1){left:12%}.forst-seeds b:nth-child(2){left:30%;animation-delay:1.8s}.forst-seeds b:nth-child(3){left:48%;animation-delay:3.6s}.forst-seeds b:nth-child(4){left:64%;animation-delay:5.4s}.forst-seeds b:nth-child(5){left:78%;animation-delay:7.2s}.forst-seeds b:nth-child(6){left:90%;animation-delay:9s}
@keyframes forstSeed{0%{opacity:0;transform:translate(0,0) rotate(0)}7%{opacity:.85}50%{transform:translate(-26px,230px) rotate(300deg)}100%{opacity:0;transform:translate(6px,480px) rotate(680deg)}}
.forst-chips{display:flex;gap:6px;margin-top:9px}
.forst-chips span{font-size:.3rem;letter-spacing:.12em;color:#b8d4a8;border:1px solid rgba(184,212,168,.4);border-radius:3px;padding:4px 8px;font-family:system-ui,sans-serif;font-weight:600;text-transform:uppercase}
.is-active .forst-chips span{animation:dachChip .8s var(--ease) 1.2s both}
.is-active .forst-chips span:nth-child(2){animation-delay:1.4s}

/* 15 Burger: Dampf + Sticker */
.brg-steam i{position:absolute;left:-6px;top:-90px;width:12px;height:46px;border-radius:50%;background:radial-gradient(ellipse 40% 60% at 50% 60%,rgba(24,18,8,.18),transparent 75%);filter:blur(2px);opacity:0}
.brg-steam i:nth-child(2){left:-26px}.brg-steam i:nth-child(3){left:16px}
.is-active .brg-steam i{animation:brgSteam 3.6s ease-in-out infinite}
.is-active .brg-steam i:nth-child(2){animation-delay:1.2s}
.is-active .brg-steam i:nth-child(3){animation-delay:2.4s}
@keyframes brgSteam{0%{opacity:0;transform:translateY(14px) scaleY(.7)}30%{opacity:.8}100%{opacity:0;transform:translateY(-34px) scaleY(1.25) skewX(7deg)}}
.brg-flag{position:absolute;right:14px;top:96px;z-index:4;background:#fff;border:3px solid #181208;border-radius:8px;padding:6px 9px;font-size:.34rem;font-weight:900;letter-spacing:.06em;transform:rotate(7deg);box-shadow:3px 3px 0 #181208}
.is-active .brg-flag{animation:brgFlag 3s ease-in-out infinite alternate}
@keyframes brgFlag{from{transform:rotate(5deg)}to{transform:rotate(10deg) translateY(-4px)}}

/* 16 Coaching: Atem-Cue (synchron zur Mandala-Atmung) */
.coach-breath{position:absolute;left:0;right:0;top:288px;text-align:center;z-index:3;height:16px}
.coach-breath em{position:absolute;left:0;right:0;font-size:.4rem;font-style:italic;letter-spacing:.34em;color:rgba(58,53,80,.65);opacity:0}
.is-active .coach-breath em:nth-child(1){animation:coachIn 8s ease-in-out 2s infinite}
.is-active .coach-breath em:nth-child(2){animation:coachOut 8s ease-in-out 2s infinite}
@keyframes coachIn{0%,8%{opacity:0}18%,40%{opacity:1}50%,100%{opacity:0}}
@keyframes coachOut{0%,55%{opacity:0}65%,88%{opacity:1}96%,100%{opacity:0}}

/* 17 Reise: Flugzeug + Boarding-Pass */
.reise-plane{position:absolute;width:26px;left:-30px;top:24%;opacity:0}
.is-active .reise-plane{animation:reisePlane 17s linear infinite}
@keyframes reisePlane{0%,8%{opacity:0;transform:translateX(0) translateY(0) scale(.7)}14%{opacity:.95}46%{opacity:.95;transform:translateX(150px) translateY(-16px) scale(1)}54%,100%{opacity:0;transform:translateX(200px) translateY(-22px) scale(1.05)}}
.reise-pass{position:absolute;left:18px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.72);border:1px solid rgba(46,44,40,.14);border-radius:12px;padding:10px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 30px rgba(46,44,40,.18)}
.rp-route{display:flex;align-items:center;gap:8px;font-size:.5rem;font-weight:700;letter-spacing:.08em}
.rp-route i{position:relative;width:64px;border-bottom:1.5px dashed rgba(46,44,40,.4)}
.rp-route i::after{content:'\2708';position:absolute;left:0;top:-7px;font-size:.4rem;color:#d97742}
.is-active .rp-route i::after{animation:rpFly 5s ease-in-out infinite}
@keyframes rpFly{0%{left:0}50%{left:52px}100%{left:0}}
.rp-info{font-size:.3rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(46,44,40,.55);font-weight:600}
.is-active .reise-pass{animation:reisePassIn 1s var(--ease) .7s both}
@keyframes reisePassIn{from{opacity:0;transform:translateY(18px) rotate(-2deg)}to{opacity:1;transform:none}}

/* 18 Musik: Vinyl + LED-Kette */
.mus-vinyl{position:absolute;left:16px;top:64px;width:54px;height:54px;border-radius:50%;background:repeating-radial-gradient(circle,#101016 0 2px,#1a1a22 2px 4px);box-shadow:0 0 0 2px #16161e,0 10px 24px rgba(0,0,0,.6)}
.mus-vinyl i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle,#ff2d9b 58%,#0a0a10 60%)}
.is-active .mus-vinyl{animation:musVinyl 2.4s linear infinite}
@keyframes musVinyl{to{transform:rotate(360deg)}}
.mus-led{position:absolute;right:18px;top:58px;display:flex;flex-direction:column-reverse;gap:4px}
.mus-led b{width:9px;height:6px;border-radius:2px;background:#19f0c8;opacity:.16}
.mus-led b:nth-child(5),.mus-led b:nth-child(6){background:#ff2d9b}
.is-active .mus-led b{animation:musLed 1.1s ease-in-out infinite}
.mus-led b:nth-child(2){animation-delay:.09s}.mus-led b:nth-child(3){animation-delay:.18s}.mus-led b:nth-child(4){animation-delay:.27s}.mus-led b:nth-child(5){animation-delay:.36s}.mus-led b:nth-child(6){animation-delay:.45s}
@keyframes musLed{0%,100%{opacity:.16}45%,55%{opacity:1}}

/* 19 Kindergarten: Luftballons */
.kiga-balloons i{position:absolute;bottom:-70px;width:26px;height:32px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;opacity:0}
.kiga-balloons i::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:26px;background:rgba(63,58,53,.4)}
.kiga-balloons i:nth-child(1){left:12%;background:#e8503c}
.kiga-balloons i:nth-child(2){left:50%;background:#38a6d9}
.kiga-balloons i:nth-child(3){left:82%;background:#f5a623}
.is-active .kiga-balloons i{animation:kigaBalloon 12s ease-in-out infinite}
.is-active .kiga-balloons i:nth-child(2){animation-delay:4s}
.is-active .kiga-balloons i:nth-child(3){animation-delay:8s}
@keyframes kigaBalloon{0%{opacity:0;transform:translateY(0) translateX(0) rotate(-3deg)}6%{opacity:.95}50%{transform:translateY(-260px) translateX(18px) rotate(4deg)}96%{opacity:.9}100%{opacity:0;transform:translateY(-540px) translateX(-6px) rotate(-3deg)}}

/* 20 Wohnen: Pflanze + m²-Label */
.wm4{left:78px;top:64px;width:20px;height:20px;background:radial-gradient(circle at 40% 40%,#7fae6b,#557a45);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(40,70,30,.35)}
.is-active .wm4{animation-delay:2.15s}
.wohn-dim{position:absolute;left:150px;top:230px;font-size:9px;letter-spacing:.18em;color:rgba(51,48,44,.6);font-family:ui-monospace,monospace}
.is-active .wohn-dim{animation:wohnDim 1s ease 2.9s both}
@keyframes wohnDim{from{opacity:0}to{opacity:1}}

/* 21 Barber: Pole + Preisliste */
.barber-pole{position:absolute;left:17px;top:56px;width:13px;height:44px;border-radius:7px;z-index:3;
  background:repeating-linear-gradient(135deg,#c0392b 0 6px,#f5f0e8 6px 12px,#2c5f8a 12px 18px,#f5f0e8 18px 24px);
  box-shadow:inset 0 0 4px rgba(0,0,0,.5),0 0 0 2px #3a2a22,0 4px 10px rgba(0,0,0,.5)}
.barber-pole::before,.barber-pole::after{content:'';position:absolute;left:-2px;right:-2px;height:5px;border-radius:3px;background:linear-gradient(180deg,#d8d2c8,#8a8478)}
.barber-pole::before{top:-5px}
.barber-pole::after{bottom:-5px}
.is-active .barber-pole{animation:barberPole 1.6s linear infinite}
@keyframes barberPole{to{background-position:0 24px}}
.barber-prices{position:absolute;left:17px;bottom:84px;z-index:3;display:flex;flex-direction:column;gap:5px;width:180px}
.barber-prices span{display:flex;align-items:baseline;gap:7px;font-size:.4rem;letter-spacing:.1em;color:rgba(239,227,208,.85);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.barber-prices i{flex:1;border-bottom:1px dotted rgba(239,227,208,.35)}
.is-active .barber-prices span{animation:barberPrice 12s linear infinite}
.is-active .barber-prices span:nth-child(2){animation-name:barberPrice2}
.is-active .barber-prices span:nth-child(3){animation-name:barberPrice3}
@keyframes barberPrice{0%,52%{opacity:0;transform:translateX(-10px)}56%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes barberPrice2{0%,55%{opacity:0;transform:translateX(-10px)}59%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes barberPrice3{0%,58%{opacity:0;transform:translateX(-10px)}62%,94%{opacity:1;transform:none}100%{opacity:0}}

/* ── Responsive Feinschliff der Mini-Sites ── */
@media(max-width:768px){
  .dach-scene{transform:scale(.82);transform-origin:top center}
  .opt-big{font-size:2rem}
  .aur-glass{left:16px;right:16px;gap:12px;padding:14px}
  .reise-window{right:10px;width:150px;height:252px;border-width:10px}
  .reise-copy{max-width:50%}
  .wohn-scene{transform:scale(.82);transform-origin:top right}
  .kfz-h{font-size:1.2rem}
  .fri-h{font-size:1.35rem}
  .opt-field{bottom:110px}
  .barber-sign{padding:16px 20px 12px}
  .barber-neon{font-size:1.7rem}
  .lum-h{font-size:1.34rem}
  .lum-cards{top:auto;bottom:52px;right:14px}
  .kfz-gauges{top:50px;right:12px}
  .opt-frames{bottom:112px;gap:14px}
  .reise-pass{left:12px;bottom:14px;padding:8px 10px}
  .barber-prices{bottom:78px}
}

/* ── Floating Consent-Button: immer erreichbar, Desktop & Mobil ── */
#consent-fab{
  position:fixed;left:18px;bottom:18px;z-index:9000;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,26,.88);border:1px solid var(--border2);color:var(--g);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);cursor:pointer;
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s
}
#consent-fab:hover,#consent-fab:focus-visible{
  color:#3ef2a5;border-color:rgba(62,242,165,.65);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(62,242,165,.35);
  transform:translateY(-2px)
}
#consent-fab svg{width:22px;height:22px}
@media(max-width:768px){
  #consent-fab{left:12px;bottom:12px;width:42px;height:42px}
}

/* ── Senden-Button: gesperrt, bis die Datenschutz-Checkbox gesetzt ist ── */
#f-submit{transition:background .35s var(--ease),color .35s,opacity .35s,transform .25s,box-shadow .25s}
.btn[disabled]{background:var(--g3);color:var(--g2);cursor:not-allowed;opacity:.65}
.btn[disabled]:hover{background:var(--g3);transform:none;box-shadow:none}
.btn[disabled]:active{transform:none}
.btn[disabled]::after{opacity:.45}

/* ── Formular-Übergang + Erfolgsmeldung ── */
#contact-form{transition:opacity .45s var(--ease),transform .45s var(--ease)}
#contact-form.form-out{opacity:0;transform:translateY(-16px) scale(.985);pointer-events:none}
#form-success.on{animation:fsucIn .8s var(--ease) .3s both}
@keyframes fsucIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* ── Papierflieger: Vollbild-3D-Flug bei erfolgreichem Versand ──
   Startpunkt (--sx/--sy) setzt JS auf den Senden-Button; danach
   zieht er eine Kurve durchs Viewport und fliegt am Nutzer vorbei
   aus dem Bild (translate3d + scale = räumliche Tiefe).          */
#plane-fx{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;perspective:900px}
#plane-fx.fly{display:block}
.plane-css{position:absolute;left:0;top:0;width:92px;height:92px;opacity:0;will-change:transform;
  filter:drop-shadow(0 14px 24px rgba(8,16,12,.5))}
#plane-fx.fly .plane-css{animation:planeFly 2.7s cubic-bezier(.45,.05,.25,1) forwards;
  /* Neon-Grün-Glow im Flug — passend zum grünen Herz/Status-Grün (#3ef2a5) */
  filter:drop-shadow(0 14px 24px rgba(8,16,12,.5)) drop-shadow(0 0 18px rgba(62,242,165,.75)) drop-shadow(0 0 44px rgba(62,242,165,.4))}
.plane-inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#plane-fx.fly .plane-inner{animation:planeBank 2.7s cubic-bezier(.45,.05,.25,1) forwards}
/* Die Faltflächen: Koordinaten = SVG-Form von vorher, in % übersetzt */
.pw{position:absolute;inset:0}
.pw-top{clip-path:polygon(96.9% 7.8%,4.7% 46.9%,45.3% 56.3%);background:linear-gradient(135deg,#ffffff,#e8eaef 72%)}
.pw-bottom{clip-path:polygon(96.9% 7.8%,45.3% 56.3%,64.1% 93.8%);background:linear-gradient(180deg,#e0e3ea,#c2c7d3)}
.pw-fold{clip-path:polygon(45.3% 56.3%,42.2% 78.1%,54.7% 71.9%);background:#99a0b0}
/* Leuchtende Falzkante entlang der Mittelfalte */
.pw-crease{clip-path:polygon(96.2% 6.9%,98.2% 9%,65.4% 94.6%,62.9% 92.6%);background:linear-gradient(160deg,rgba(62,242,165,.95),rgba(62,242,165,.35));opacity:.85}
@keyframes planeFly{
  0%{transform:translate3d(var(--sx,42vw),var(--sy,72vh),0) rotate(8deg) scale(.38);opacity:0}
  8%{opacity:1}
  28%{transform:translate3d(18vw,48vh,0) rotate(-15deg) scale(.85)}
  58%{transform:translate3d(52vw,20vh,40px) rotate(5deg) scale(1.6)}
  86%{opacity:1}
  100%{transform:translate3d(112vw,-24vh,120px) rotate(18deg) scale(3.6);opacity:0}
}
@keyframes planeBank{
  0%{transform:rotateY(52deg) rotateX(10deg)}
  38%{transform:rotateY(-20deg) rotateX(-7deg)}
  72%{transform:rotateY(12deg) rotateX(2deg)}
  100%{transform:rotateY(26deg) rotateX(6deg)}
}
@media(prefers-reduced-motion:reduce){#plane-fx{display:none!important}}

/* ── Performance-Architektur ──
   1) contain: Layout & Paint jeder Karte bleiben in der Karte
   2) .moving (während Drag/Snap): ALLE Slide-Animationen pausieren,
      teure backdrop-filter & Schatten temporär aus → 60 fps Sliden
   3) Schwere SVG-Filter-Layer existieren nur near/active            */
.ccard{contain:layout paint style}
.fsite{pointer-events:none}
.car-wrap.moving .fsite *{animation-play-state:paused!important}
.car-wrap.moving .ccard{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.car-wrap.moving .kfz-blur,.car-wrap.moving .aur-glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.ccard:not(.is-active):not(.near) .fri-goo,
.ccard:not(.is-active):not(.near) .holz-fiber,
.ccard:not(.is-active):not(.near) .barber-wall,
.ccard:not(.is-active):not(.near) .bag-svg,
.ccard:not(.is-active):not(.near) .rest-svg,
.ccard:not(.is-active):not(.near) .kfz-blur{visibility:hidden}

/* ── Reduced Motion: alles statisch ── */
@media(prefers-reduced-motion:reduce){
  .fsite,.fsite *{animation:none!important;transition:none!important}
}


/* =============================================================
   STATS / SECTIONS / PROCESS / WHY / TICKER  (wie v2)
   ============================================================= */
.stats-bar{background:var(--bg1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:52px 48px}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-card{text-align:center;padding:28px 20px;border-right:1px solid var(--border)}
.stat-card:last-child{border-right:none}
.stat-num{font-size:3rem;font-weight:600;letter-spacing:-.06em;line-height:1;background:linear-gradient(135deg,#fff,rgba(255,255,255,.6));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.stat-label{font-size:.82rem;font-weight:300;color:var(--g2);line-height:1.55}

.sec{padding:120px 48px}
.con{max-width:1100px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--v2);margin-bottom:22px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--v);flex-shrink:0}
.sec-h{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.06;margin-bottom:20px}
.sec-h em{font-style:normal;background:linear-gradient(135deg,var(--v),var(--v2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-sub{font-size:1.05rem;font-weight:300;color:var(--g);line-height:1.8;max-width:580px}

.rv{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
.rvl{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rvl.on{opacity:1;transform:none}
.rvr{opacity:0;transform:translateX(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rvr.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

.proc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ps{display:flex;gap:26px;padding:30px 0;border-bottom:1px solid var(--border);position:relative}
.ps:last-child{border-bottom:none}
.ps-left{position:relative;flex-shrink:0}
.ps-num{width:50px;height:50px;border-radius:50%;border:1px solid var(--border2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--v2);position:relative;z-index:1;transition:background .3s,border-color .3s}
.ps:hover .ps-num{background:rgba(108,99,255,.15);border-color:rgba(108,99,255,.5)}
.ps-line{position:absolute;left:24px;top:50px;bottom:-30px;width:1px;background:linear-gradient(to bottom,var(--border2),transparent)}
.ps:last-child .ps-line{display:none}
.ps-body h3{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;transition:color .2s}
.ps:hover .ps-body h3{color:var(--v2)}
.ps-body p{font-size:.87rem;font-weight:300;color:var(--g);line-height:1.75}
.ps-tag{display:inline-block;margin-top:10px;background:rgba(108,99,255,.07);border:1px solid rgba(108,99,255,.2);color:var(--v2);font-size:.7rem;font-weight:500;padding:3px 11px;border-radius:100px}
.proc-vis{position:sticky;top:110px;background:var(--bg2);border:1px solid var(--border);border-radius:22px;padding:36px}
.pv-icon{font-size:2.8rem;margin-bottom:16px}
.proc-vis h4{font-size:1rem;font-weight:600;margin-bottom:10px}
.proc-vis p{font-size:.85rem;font-weight:300;color:var(--g);line-height:1.7}
.pv-list{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.pv-item{display:flex;align-items:center;gap:11px;background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.pv-icon2{font-size:.95rem;flex-shrink:0}
.pv-text{font-size:.82rem;color:var(--g);font-weight:300}
.pv-text strong{color:var(--w);font-weight:500}
.pv-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.pv-fact{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:14px;text-align:center}
.pv-fnum{font-size:1.5rem;font-weight:600;letter-spacing:-.04em;background:linear-gradient(135deg,var(--v),var(--v2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:3px}
.pv-flabel{font-size:.72rem;color:var(--g2);font-weight:300}
.hl-box{background:rgba(108,99,255,.07);border:1px solid rgba(108,99,255,.18);border-radius:15px;padding:26px 28px;margin-top:36px}
.hl-box p{font-size:.92rem;font-weight:300;color:var(--g);line-height:1.75}
.hl-box strong{color:var(--w);font-weight:500}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}
.wc{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:34px 26px;position:relative;overflow:hidden;transition:border-color .3s,transform .4s var(--ease),background .3s}
.wc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--v),transparent);opacity:0;transition:opacity .3s}
.wc:hover{border-color:rgba(108,99,255,.28);transform:translateY(-7px);background:rgba(108,99,255,.04)}
.wc:hover::before{opacity:1}
.wi{width:50px;height:50px;border-radius:13px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:20px;transition:all .3s}
.wc:hover .wi{background:rgba(108,99,255,.2);border-color:rgba(108,99,255,.45);transform:scale(1.1) rotate(-5deg)}
.wc h3{font-size:1rem;font-weight:600;margin-bottom:9px}
.wc p{font-size:.85rem;font-weight:300;color:var(--g);line-height:1.72}

.sec-ticker{background:var(--bg);overflow:hidden;padding:80px 0}
.ticker-head{padding:0 48px 48px;text-align:center}
.ticker-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.ticker-row{display:flex;gap:12px;width:max-content}
.tr1{animation:tick1 32s linear infinite}
.tr2{animation:tick2 38s linear infinite;margin-top:12px}
.ticker-row:hover{animation-play-state:paused}
@keyframes tick1{to{transform:translateX(-50%)}}
@keyframes tick2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tpill{background:var(--glass);border:1px solid var(--border);border-radius:100px;padding:11px 22px;white-space:nowrap;font-size:.84rem;font-weight:300;color:var(--g);flex-shrink:0;cursor:default;transition:all .25s}
.tpill:hover{background:rgba(108,99,255,.1);border-color:rgba(108,99,255,.3);color:var(--w);transform:translateY(-2px)}

/* =============================================================
   PRICING
   ============================================================= */
.price-grid{display:grid;grid-template-columns:5fr 4fr;gap:24px;margin-top:64px;align-items:start}
.pc{background:var(--glass);border:1px solid var(--border);border-radius:24px;padding:44px;position:relative;overflow:hidden;transition:border-color .3s}
.pc:hover{border-color:rgba(108,99,255,.22)}
.pc.feat{background:linear-gradient(145deg,rgba(108,99,255,.13),rgba(108,99,255,.05));border-color:rgba(108,99,255,.38)}
.pc.feat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--v) 40%,var(--v2) 60%,transparent)}
.feat-badge{position:absolute;top:20px;right:20px;background:var(--v);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:100px}
.pc-label{font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--g2);margin-bottom:20px}
.pc-amount{display:flex;align-items:baseline;gap:3px;margin-bottom:6px}
.pc-cur{font-size:1.4rem;font-weight:300;color:var(--g);align-self:flex-start;margin-top:10px}
.pc-num{font-size:5rem;font-weight:600;letter-spacing:-.07em;line-height:1;color:var(--w)}
.pc-period{font-size:.83rem;font-weight:300;color:var(--g2);margin-bottom:36px}
.pc-feats{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.pc-feat{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;font-weight:300;color:var(--g)}
.pc-check{width:19px;height:19px;border-radius:50%;flex-shrink:0;margin-top:1px;background:rgba(108,99,255,.14);border:1px solid rgba(108,99,255,.3);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--v2)}
.price-right{display:flex;flex-direction:column;gap:18px}
.pc-sm{padding:30px}
.pc-sm .pc-num{font-size:3.6rem}
.save-badge{display:inline-block;margin-left:8px;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.22);color:var(--o2);font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:100px}
.price-note{text-align:center;font-size:.78rem;font-weight:300;color:var(--g2);margin-top:12px}
.price-guar{display:flex;align-items:center;gap:12px;background:rgba(40,200,64,.05);border:1px solid rgba(40,200,64,.14);border-radius:12px;padding:15px 18px;margin-top:18px;font-size:.85rem;color:var(--g);font-weight:300}
.price-guar strong{color:#7ae898;font-weight:600}
.price-must{
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.2);
  border-radius:13px;padding:16px 18px;
  font-size:.85rem;color:var(--g);font-weight:300;line-height:1.65
}
.price-must strong{color:var(--v2);font-weight:600}

/* =============================================================
   ABOUT — Foto + Layer-Parallax
   ============================================================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:60px}
.about-img-wrap{position:relative}
.about-img{
  width:100%;aspect-ratio:4/5;border-radius:24px;
  background:linear-gradient(160deg,var(--bg2),var(--bg3) 50%,var(--bg1));
  border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding-bottom:18px;
  position:relative;overflow:hidden
}
.about-img::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse 50% 40% at 50% 50%,rgba(108,99,255,.12),transparent 70%)}
.about-fx{position:absolute;inset:-6%;width:112%;height:112%;opacity:.8;will-change:transform}
.afx-nodes circle{animation:afxPulse 3.2s ease-in-out infinite}
.afx-nodes circle:nth-child(2){animation-delay:.8s}
.afx-nodes circle:nth-child(3){animation-delay:1.6s}
.afx-nodes circle:nth-child(4){animation-delay:2.4s}
@keyframes afxPulse{0%,100%{opacity:.35}50%{opacity:1}}
.about-glow{position:absolute;left:50%;top:44%;width:min(360px,92%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(108,99,255,.34),rgba(108,99,255,0) 70%);animation:aboutGlow 5.5s ease-in-out infinite alternate;pointer-events:none}
@keyframes aboutGlow{from{opacity:.55;scale:.92}to{opacity:1;scale:1.06}}
.about-photo{position:relative;z-index:2;width:min(320px,84%);margin-top:auto;filter:drop-shadow(0 26px 38px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(108,99,255,.22));will-change:transform}
.about-tag{background:var(--glass2);border:1px solid var(--border2);border-radius:10px;padding:10px 18px;text-align:center;position:relative;z-index:1}
.about-tag strong{display:block;font-size:.9rem;font-weight:600;margin-bottom:2px}
.about-tag span{font-size:.75rem;color:var(--g2);font-weight:300}
.about-badge-wrap{position:absolute;bottom:-14px;right:-14px;background:var(--v);border-radius:14px;padding:14px 16px;text-align:center;box-shadow:0 16px 40px rgba(108,99,255,.38)}
.about-badge-num{font-size:1.5rem;font-weight:600;letter-spacing:-.04em;display:block}
.about-badge-label{font-size:.62rem;font-weight:500;opacity:.8}
.about-txt p{font-size:.95rem;font-weight:300;color:var(--g);line-height:1.82;margin-bottom:16px}
.about-txt p:last-of-type{margin-bottom:0}
.about-skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ask{background:var(--glass);border:1px solid var(--border);border-radius:100px;padding:7px 15px;font-size:.8rem;color:var(--g);font-weight:300}
.about-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}

/* =============================================================
   CONTACT — einfaches Formular
   ============================================================= */
.form-wrap{
  background:var(--glass);border:1px solid var(--border);border-radius:28px;
  padding:56px;margin-top:64px;position:relative;overflow:hidden;
  max-width:760px
}
.form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--v) 30%,var(--v2) 70%,transparent)}
.unverb-banner{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.18);
  border-radius:11px;padding:13px 18px;margin-bottom:34px;
  font-size:.87rem;color:var(--o2)
}
.ub-ico{color:var(--o);flex-shrink:0;line-height:1.55}
.ub-txt{margin:0;line-height:1.55}
.unverb-banner strong{font-weight:600;color:var(--o)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fcol-full{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:6px}
.fl{font-size:.77rem;font-weight:500;color:var(--g)}
.fl .req{color:var(--v);margin-left:2px}
.fi,.fta{
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:13px 15px;font-size:.9rem;color:var(--w);outline:none;width:100%;
  transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none
}
.fi::placeholder,.fta::placeholder{color:var(--g3)}
.fi:focus,.fta:focus{border-color:rgba(108,99,255,.5);background:rgba(108,99,255,.04);box-shadow:0 0 0 3px rgba(108,99,255,.08)}
.fi.err,.fta.err{border-color:rgba(255,80,80,.5)}
.fta{resize:vertical;min-height:150px}
.fcon{display:flex;align-items:flex-start;gap:12px;font-size:.83rem;color:var(--g);line-height:1.65;font-weight:300;margin-top:8px}
.fcon input{accent-color:var(--v);flex-shrink:0;margin-top:3px;width:16px;height:16px;cursor:pointer}
.fcon a{color:var(--v2)}
.ferr{display:none;background:rgba(255,80,80,.07);border:1px solid rgba(255,80,80,.2);border-radius:9px;padding:13px 17px;font-size:.87rem;color:#ff8c8c;margin-top:12px}
.fsubrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:28px;padding-top:28px;border-top:1px solid var(--border)}
.fnote{font-size:.78rem;color:var(--g2);font-weight:300}
.fnote span{color:var(--g)}
.fsuccess{display:none;text-align:center;padding:60px 20px}
.fsuccess-icon{font-size:3.5rem;margin-bottom:18px}
.fsuccess h3{font-size:1.8rem;font-weight:600;letter-spacing:-.04em;margin-bottom:10px}
.fsuccess p{font-size:1rem;color:var(--g);font-weight:300;line-height:1.75}
.hp-trap{position:absolute;left:-9999px;height:0;overflow:hidden}
.contact-alt{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:24px
}
.contact-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--border);border-radius:100px;
  padding:10px 18px;font-size:.84rem;color:var(--g);transition:all .25s
}
.contact-chip:hover{color:var(--w);border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.07)}

/* =============================================================
   BUTTONS / FOOTER / MODALS
   ============================================================= */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:12px;font-size:.95rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;transition:all .25s}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--v);color:#fff}
.btn-p:hover{background:var(--v2);transform:translateY(-2px);box-shadow:0 12px 36px rgba(108,99,255,.4)}
.btn-s{background:transparent;color:var(--w);border:1px solid var(--border2)}
.btn-s:hover{border-color:rgba(255,255,255,.28);background:var(--glass2);transform:translateY(-2px)}
.btn-full{width:100%;justify-content:center}
.btn-lg{padding:18px 36px;font-size:1rem;border-radius:14px}
.btn-arr::after{content:'→';transition:transform .2s}
.btn-arr:hover::after{transform:translateX(4px)}

footer{background:var(--bg1);border-top:1px solid var(--border);padding:72px 48px 40px}
.foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--border)}
.foot-name{font-size:1rem;font-weight:600;letter-spacing:-.03em;margin-bottom:13px}
.foot-name b{color:var(--v)}
.foot-desc{font-size:.85rem;font-weight:300;color:var(--g);line-height:1.72;margin-bottom:22px}
.foot-contact a{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--g2);margin-bottom:7px;transition:color .2s}
.foot-contact a:hover{color:var(--w)}
.foot-col-t{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g2);margin-bottom:16px}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a,.foot-links button{font-size:.86rem;color:var(--g);font-weight:300;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:color .2s}
.foot-links a:hover,.foot-links button:hover{color:var(--w)}
.foot-bottom{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.76rem;color:var(--g2);font-weight:300}

.mo{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.mo.open{display:flex;opacity:1}
.mbox{background:var(--bg1);border:1px solid var(--border2);border-radius:24px;max-width:700px;width:100%;max-height:85vh;overflow-y:auto;padding:54px;position:relative;animation:min .4s var(--ease)}
@keyframes min{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.mclose{position:absolute;top:18px;right:18px;width:34px;height:34px;background:var(--glass2);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--g);cursor:pointer;transition:all .2s}
.mclose:hover{color:var(--w);background:var(--glass)}
.mbox h2{font-size:1.7rem;font-weight:600;letter-spacing:-.04em;margin-bottom:6px}
.mdate{font-size:.77rem;color:var(--g2);font-weight:300;margin-bottom:28px}
.mbox h3{font-size:.95rem;font-weight:600;margin-top:26px;margin-bottom:7px}
.mbox p{font-size:.86rem;color:var(--g);line-height:1.78;font-weight:300;margin-bottom:4px}
.mbox a{color:var(--v2)}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:1024px){
  .sec{padding:88px 32px}
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-card:nth-child(2){border-right:none}
  .stat-card:nth-child(3){border-right:1px solid var(--border);border-top:1px solid var(--border)}
  .stat-card:nth-child(4){border-top:1px solid var(--border)}
  .proc-wrap{grid-template-columns:1fr}
  .proc-vis{position:static}
  .why-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
  .price-right{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .about-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  #nav{padding:0 20px}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  #hero{padding:108px 14px 56px}
  .h-actions{flex-direction:column;align-items:center}
  .h-actions .btn{width:100%;max-width:300px;justify-content:center}
  .car-wrap{height:520px}
  .ccard{height:480px}
  .fsite{height:440px}
  .car-arrows{display:none}
  .car-dots{display:none}
  .car-glow{display:none}
  .about-badge-wrap{bottom:auto;top:-12px;right:-12px;padding:11px 13px}
  .about-badge-num{font-size:1.25rem}
  .sec{padding:72px 20px}
  .stats-bar{padding:36px 20px}
  .why-grid{grid-template-columns:1fr}
  .price-right{grid-template-columns:1fr}
  .form-wrap{padding:28px 18px}
  .fgrid{grid-template-columns:1fr}
  .fsubrow{flex-direction:column;align-items:stretch}
  .fsubrow .btn{justify-content:center}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  footer{padding:48px 20px 32px}
  .foot-bottom{flex-direction:column;text-align:center;gap:8px}
  .ticker-head{padding:0 20px 36px}
  .mbox{padding:28px 20px}
  .cs-box{padding:26px 20px 22px}
  .cs-actions{flex-direction:column}
  .cs-accept,.cs-save,.cs-deny{width:100%}
}
@media(max-width:480px){
  .h1{font-size:2.5rem}
  .sec-h{font-size:2rem}
  .pc-num{font-size:3.5rem}
  .pc{padding:26px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =============================================================
   v3.1 — UTILITIES (statt Inline-Styles)
   ============================================================= */
.sec--alt{background:var(--bg1)}
.eyebrow--center{justify-content:center}
.sec-h--center{text-align:center}
.about-h{margin-bottom:24px}
.btn--sm{font-size:.84rem;padding:11px 20px}
.cv{content-visibility:auto;contain-intrinsic-size:1px 700px}
.fxquote{padding:14px 18px;text-align:center;font-size:.44rem;line-height:1.7;font-style:italic;opacity:.65;font-weight:300}
.fxquote b{display:block;font-style:normal;font-size:.36rem;margin-top:5px;opacity:.75;letter-spacing:.08em;text-transform:uppercase}

/* Performance: Animationen in entfernten Karten pausieren */
.ccard:not(.near) .fsite *{animation-play-state:paused!important}

/* Scroll-Hinweis in aktiver Karte */
.ccard::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to top,rgba(8,8,14,.45),transparent);
  opacity:0;transition:opacity .4s;pointer-events:none
}
.ccard.active::after{opacity:1}

/* =============================================================
   v3.1 — FAIR & PARTNERSCHAFT (ersetzt Preise)
   ============================================================= */
.fair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}
.fair-card{
  background:var(--glass);border:1px solid var(--border);border-radius:22px;
  padding:38px 30px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease),background .3s
}
.fair-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--v),transparent);
  opacity:0;transition:opacity .3s
}
.fair-card:hover{border-color:rgba(108,99,255,.28);transform:translateY(-7px);background:rgba(108,99,255,.04)}
.fair-card:hover::before{opacity:1}
.fair-card.lead{
  background:linear-gradient(145deg,rgba(108,99,255,.13),rgba(108,99,255,.05));
  border-color:rgba(108,99,255,.38)
}
.fair-icon{
  width:54px;height:54px;border-radius:14px;
  background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:22px;transition:all .3s
}
.fair-card:hover .fair-icon{background:rgba(108,99,255,.2);transform:scale(1.08) rotate(-4deg)}
.fair-card h3{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.fair-card p{font-size:.88rem;font-weight:300;color:var(--g);line-height:1.75}
.fair-list{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.fair-li{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;font-weight:300;color:var(--g)}
.fair-check{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:rgba(108,99,255,.14);border:1px solid rgba(108,99,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;color:var(--v2)
}
.fair-quote{
  margin-top:36px;text-align:center;
  background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.18);
  border-radius:18px;padding:32px 36px
}
.fair-quote p{
  font-size:1.05rem;font-weight:300;color:var(--g);line-height:1.85;
  max-width:720px;margin:0 auto;font-style:italic
}
.fair-quote strong{color:var(--w);font-weight:500;font-style:normal}
.fair-sign{
  margin-top:16px;font-size:.82rem;color:var(--g2);font-weight:300;
  display:flex;align-items:center;justify-content:center;gap:10px
}
.fair-sign::before{content:'';width:24px;height:1px;background:var(--g3)}

/* =============================================================
   v3.1 — SEO / REGIONAL-SEKTION (vor dem Footer)
   ============================================================= */
.seo-sec{position:relative;overflow:hidden;background:var(--bg)}
.seo-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:800px;height:500px;
  background:radial-gradient(ellipse,rgba(108,99,255,.1) 0%,transparent 65%);
  pointer-events:none
}
.seo-box{max-width:860px;margin:0 auto;text-align:center;position:relative}
.seo-line{width:1px;height:52px;margin:0 auto 28px;background:linear-gradient(to bottom,transparent,var(--v))}
.seo-h{
  font-size:clamp(1.9rem,3.8vw,3rem);font-weight:600;
  letter-spacing:-.04em;line-height:1.12;margin-bottom:24px
}
.seo-h em{
  font-style:normal;
  background:linear-gradient(135deg,var(--v),var(--v2) 60%,var(--o));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.seo-p{
  font-size:1rem;font-weight:300;color:var(--g);line-height:1.95;
  max-width:700px;margin:0 auto 34px
}
.seo-p strong{color:var(--w);font-weight:500}
.seo-cities{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:30px}
.seo-chip{
  border:1px solid var(--border);border-radius:100px;padding:8px 17px;
  font-size:.79rem;color:var(--g2);background:var(--glass);font-weight:300;
  transition:color .25s,border-color .25s,transform .25s;cursor:default
}
.seo-chip:hover{color:var(--g);border-color:rgba(108,99,255,.32);transform:translateY(-2px)}
.seo-chip--de{
  border-color:rgba(108,99,255,.35);color:var(--v2);
  background:rgba(108,99,255,.08);font-weight:500
}

/* =============================================================
   v3.1 — RESPONSIVE ERGÄNZUNGEN
   ============================================================= */
@media(max-width:1024px){
  .fair-grid{grid-template-columns:1fr 1fr}
  .fair-card.lead{grid-column:1/-1}
}
@media(max-width:768px){
  .fair-grid{grid-template-columns:1fr}
  .fair-quote{padding:24px 20px}
}

/* =============================================================
   v3.2 — KLEINE ERGÄNZUNGEN
   ============================================================= */
.fl-opt{font-weight:300;color:var(--g2);text-transform:none;letter-spacing:0;font-size:.74rem}
.foot-cta-wrap{margin-top:18px}
.proc-steps{margin-top:46px}