/* ============================================================
   FlowState — Redesign v4
   Kobalt auf kuehlem Weiss. Eine Farbe, konsequent.
   Signature: die fliessende Linie (Canvas-Flowfield im Hero,
   Flow-Linien in Ablauf & Footer).
   ============================================================ */

/* Schriften lokal (kein Google-Fonts-CDN, keine IP-Uebertragung an Google).
   Encode Sans + Encode Sans Semi Condensed, latin-Subset, SIL Open Font License. */
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/encode-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/encode-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/encode-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/encode-sans-semi-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/encode-sans-semi-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/encode-sans-semi-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/encode-sans-semi-condensed-latin-800-normal.woff2') format('woff2')}

:root{
  /* FlowState-CI: Petrol als Vertrauensfarbe, Amber als Handlungsakzent,
     Weiss + kuehles Mint-Grau als Flaechen. SR-System, eigene Toene. */
  --bg:        #FFFFFF;
  --bg-2:      #F3F8F7;
  --white:     #FFFFFF;
  --ink:       #1B2733;
  --ink-soft:  #46566A;
  --ink-mute:  #5D6E82;
  --blue:      #0B7C74;
  --blue-hot:  #12968C;
  --blue-deep: #075E58;
  --accent:    #F2871C;
  --accent-dk: #D06F0F;
  --tint:      #E2F0EE;
  --tint-2:    #CBE4E0;
  --line:      #E2EAEA;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --snap: cubic-bezier(0.87, 0, 0.13, 1);
  --wrap: 1240px;
  --wide: 1560px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 10vh, 7.5rem);

  --f-display: "Encode Sans Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Encode Sans", system-ui, -apple-system, sans-serif;
  --f-ui: "Encode Sans Semi Condensed", "Arial Narrow", system-ui, sans-serif;
}

@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vt-out .26s var(--ease) both; }
::view-transition-new(root){ animation: vt-in .46s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-14px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(18px) } }
.nav{ view-transition-name: sitenav; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.58; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:800; margin:0;
  line-height:.98; letter-spacing:-.024em; text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,4.6rem)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.12}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-wide{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:var(--sec); position:relative}
.sec-tint{background:var(--bg-2)}
.eyebrow{
  font-family:var(--f-display); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:30px; height:2px; background:var(--blue); flex:none}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.28rem); color:var(--ink-soft); max-width:56ch}

/* --- Wort-Reveal (JS zerlegt data-split in Woerter) ---------- */
[data-split] .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
[data-split] .wi{display:inline-block; will-change:transform}
.js [data-split] .wi{transform:translateY(112%); transition:transform .8s var(--ease); transition-delay:calc(var(--wd,0) * 55ms)}
.js [data-split].in .wi{transform:translateY(0)}

/* --- Wellen-Trenner ----------------------------------------- */
.wave{display:block; width:100%; height:clamp(42px,7vw,90px); margin-block:-1px}
.wave svg{display:block; width:100%; height:100%}
.wave .fill{fill:var(--bg-2)}
.wave.to-white .fill{fill:var(--bg)}
.wave.to-petrol .fill{fill:var(--blue)}
.wave{background:var(--bg)}
.wave.on-tint{background:var(--bg-2)}

/* --- Reveals ------------------------------------------------ */
.rv{opacity:1; transform:none}
.js .rv{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv[data-i]{transition-delay:calc(var(--i,0) * 80ms)}

/* --- Entwurfs-Pill ------------------------------------------ */
.draftpill{
  position:fixed; left:.9rem; bottom:.9rem; z-index:85;
  font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-deep); background:var(--tint);
  border:1px solid var(--tint-2); border-radius:999px; padding:.38rem .8rem;
  pointer-events:none; opacity:.92;
}


/* --- Buttons: Flow-Form statt Standard-Pille ------------------
   Systemregel: Aktionen tragen die asymmetrische Flow-Form,
   Labels (Chips, Tabs, Tags) bleiben Pillen.               ---- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  --btn-hov:var(--ink); --btn-fg-h:#fff; --btn-bd-h:transparent;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family:var(--f-display); font-weight:700; font-size:.88rem;
  letter-spacing:.075em; text-transform:uppercase; line-height:1.06;
  padding:.95rem 1.55rem; border-radius:16px 6px 16px 6px;
  border:1.5px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; cursor:pointer; text-align:center;
  transition:color .28s var(--ease), border-color .28s var(--ease),
             transform .28s var(--ease), box-shadow .28s var(--ease);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:-2px; z-index:-1; background:var(--btn-hov);
  transform:translateX(-101%) skewX(-12deg); transform-origin:left center;
  transition:transform .48s var(--snap);
}
/* Pfeilspitze aus zwei Kanten — folgt der Textfarbe */
.btn::after{
  content:""; width:.5em; height:.5em; flex:none; opacity:.75;
  border-right:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .35s var(--ease), opacity .28s var(--ease);
}
.btn:hover{transform:translateY(-2px); color:var(--btn-fg-h); border-color:var(--btn-bd-h)}
.btn:hover::before{transform:translateX(0) skewX(0)}
.btn:hover::after{transform:translateX(3px) rotate(45deg); opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn-noarrow::after{display:none}

.btn-primary{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-hov:var(--blue-deep); --btn-fg-h:#fff;
  box-shadow:0 12px 26px -16px rgba(7,94,88,.9), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{box-shadow:0 18px 34px -18px rgba(7,94,88,.95), inset 0 1px 0 rgba(255,255,255,.24)}
.btn-accent{
  --btn-bg:var(--accent); --btn-fg:#fff; --btn-hov:var(--accent-dk); --btn-fg-h:#fff;
  box-shadow:0 12px 26px -14px rgba(208,111,15,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-accent:hover{box-shadow:0 18px 34px -16px rgba(208,111,15,.9), inset 0 1px 0 rgba(255,255,255,.32)}
.btn-ghost{
  --btn-fg:var(--ink); --btn-bd:rgba(27,39,51,.3);
  --btn-hov:var(--ink); --btn-fg-h:#fff; --btn-bd-h:var(--ink);
}
.btn-light{
  --btn-bg:#fff; --btn-fg:var(--blue-deep); --btn-hov:var(--accent); --btn-fg-h:#fff;
  box-shadow:0 16px 32px -20px rgba(0,0,0,.75);
}
.btn-light:hover{box-shadow:0 22px 40px -22px rgba(0,0,0,.8)}
.btn-ghost-light{
  --btn-fg:#EAF6F4; --btn-bd:rgba(255,255,255,.42);
  --btn-hov:#fff; --btn-fg-h:var(--blue-deep); --btn-bd-h:#fff;
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue-hot); outline-offset:3px; border-radius:4px;
}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:130}
.skip:focus{left:.5rem; top:.5rem}

/* --- Flow-Linie (Leitmotiv) --------------------------------- */
.flowline{display:flex; align-items:center; height:2px; width:100%}
.flowline i{flex:1; height:2px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease)}
.flowline b{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; opacity:0; transition:opacity .4s var(--ease) .8s}
.in .flowline i,.flowline.in i{transform:scaleX(1)}
.in .flowline b,.flowline.in b{opacity:1}

/* --- Nav ---------------------------------------------------- */
.nav{position:sticky; top:0; z-index:70; background:rgba(250,251,253,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:1.4rem; min-height:68px}
.logo{
  font-family:var(--f-display); font-weight:800; font-size:1.45rem; letter-spacing:-.03em;
  text-decoration:none; display:flex; align-items:center; gap:.6rem; color:var(--ink);
}
.logo span{width:9px; height:9px; background:var(--blue); border-radius:50%}
.nav-links{display:none; gap:1.6rem; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav-links a{
  font-family:var(--f-display); font-weight:700; font-size:1rem; text-decoration:none;
  color:var(--ink-soft); position:relative; padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-tel{
  margin-left:auto; font-family:var(--f-display); font-weight:800; font-size:1.05rem;
  text-decoration:none; display:flex; align-items:center; gap:.4rem; white-space:nowrap; color:var(--ink);
}
.nav-tel svg{width:17px; height:17px; fill:var(--blue); flex:none}
.nav-tel:hover{color:var(--blue)}
.nav .btn{display:none; padding:.66rem 1.2rem; font-size:.79rem; border-radius:12px 5px 12px 5px}
@media(min-width:920px){
  .nav-links{display:flex}
  .nav-tel{margin-left:0}
  .nav .btn{display:inline-flex}
}

/* --- Hero: SR-Split ----------------------------------------- */
.hero{position:relative; padding-block:clamp(2.2rem,5vh,3.6rem) clamp(3rem,7vh,4.5rem); overflow:hidden; background:var(--bg)}
.hero::before{
  content:""; position:absolute; right:-12%; top:-18%; width:min(52vw,640px); aspect-ratio:1;
  border-radius:50%; background:var(--tint); filter:blur(4px); z-index:0;
}
.hero-in{position:relative; z-index:1; display:grid; gap:clamp(2.2rem,5vw,3.6rem); align-items:center}
@media(min-width:940px){.hero-in{grid-template-columns:1.02fr .98fr}}
.hero-illu{position:relative}
.hero-illu img{
  width:100%; height:auto;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
  animation:illuFloat 7s ease-in-out infinite;
}
@keyframes illuFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* Mehrschichtiger Hero: 6 Ebenen, Maus-Parallax */
.hero-stack{
  position:relative; aspect-ratio:1/1; width:100%; max-width:760px; margin-inline:auto;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
}
@media(min-width:940px){.hero-stack{margin-right:0}}
.hero-stack .layer{
  position:absolute; height:auto;
  will-change:transform; pointer-events:none;
}
.hero-stack .l3{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
}
/* Position + Groesse je Element (Prozent der 1:1-Buehne) */
.hero-stack .l1{left:-2%;  top:32%; width:42%}   /* kleines Fenster hinten  */
.hero-stack .l2{left:22%;  top:3%;  width:76%}   /* grosses Fenster         */
.hero-stack .l3{left:-7%;  top:54%; width:114%}  /* Flow-Welle              */
.hero-stack .l4{left:49%;  top:27%; width:28%}   /* Smartphone vorn         */
.hero-stack .l5{left:0%;   top:-2%; width:100%}  /* Badge + Orange (SVG)    */
.hero-stack .l6{left:0%;   top:0%;  width:100%}  /* Funken (SVG)            */
@media (prefers-reduced-motion: reduce){
  .hero-stack .layer{translate:0 0 !important; transition:none}
}
.hero-price{
  margin-top:1.15rem; font-family:var(--f-display); font-weight:600; font-size:1.02rem;
  color:var(--ink-soft);
}
.hero-price b{color:var(--accent-dk); font-weight:800}
.hero-price s{color:var(--ink-mute)}

.trustline{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.5rem}
.stars{color:#F4B400; letter-spacing:.1em; font-size:1.05rem; line-height:1}
.trustline small{font-family:var(--f-display); font-weight:700; font-size:.95rem; color:var(--ink-soft); letter-spacing:.02em}
.trustline a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--tint-2); transition:border-color .25s var(--ease)}
.trustline a:hover{border-color:var(--blue)}
.dotsep{width:4px; height:4px; border-radius:50%; background:var(--line)}

h1 .tw-line{display:block; color:var(--blue)}
.tw{border-right:3px solid var(--accent); padding-right:3px}
.tw.blink{animation:blink .9s step-end infinite}
@keyframes blink{50%{border-color:transparent}}

.hero .lede{margin-top:1.4rem; max-width:44ch}
.hero .lede strong{color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem}

/* Kurhaus: gross, gekippt, 3D-Tilt, Parallax */
.kurhaus{position:relative; margin-inline:calc(var(--pad) * -0.3)}
@media(min-width:940px){.kurhaus{margin-right:calc(var(--pad) * -1.1); margin-left:0}}
.kurhaus-frame{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 44px 90px -38px rgba(11,27,51,.6);
  transform:perspective(1100px) rotate(1.1deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease); will-change:transform;
}
.kurhaus-frame img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transform:translate3d(0,var(--py,0px),0) scale(1.12); will-change:transform;
}
@media(min-width:940px){.kurhaus-frame img{aspect-ratio:5/6}}
.kurhaus::before{
  content:""; position:absolute; inset:auto -18px -18px auto; width:62%; height:62%;
  border:2px solid var(--blue); border-radius:6px; z-index:-1; transform:rotate(1.1deg);
}
.kurhaus-cap{
  margin-top:.95rem; font-size:.84rem; color:var(--ink-mute);
  display:flex; align-items:center; gap:.5rem; padding-inline:.35rem;
}
.kurhaus-cap b{
  font-family:var(--f-display); font-weight:700; color:var(--blue);
  letter-spacing:.1em; text-transform:uppercase; font-size:.74rem;
}

/* --- Warum: Icons mit Draw + Dauerloop ---------------------- */
.reasons{display:grid; gap:1.7rem; margin-top:3rem}
@media(min-width:700px){.reasons{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.reasons{grid-template-columns:repeat(4,1fr); gap:1.4rem}}
.reason{text-align:center; padding-inline:.4rem}
.reason h3{margin-bottom:.6rem; color:var(--blue); font-size:1.22rem}
.reason p{font-size:.99rem; color:var(--ink-soft); max-width:30ch; margin-inline:auto}

.ico{width:76px; height:76px; margin:0 auto 1.15rem; overflow:visible; display:block}
.ico *{
  fill:none; stroke:var(--blue); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:center;
}
.ico .vb{transform-box:view-box}          /* Rotation um viewBox-Koordinaten (Uhrzeiger) */
.ico .soft{stroke:var(--tint-2)}
.ico .fillt{fill:var(--tint); stroke:none}
.ico .accent{stroke:var(--accent); stroke-width:2.4}
.ico .dot{fill:var(--blue); stroke:none}

/* Einzeichnen: nur Elemente mit .s / .s2 / .s3 */
.ico.drawn .s,.ico.drawn .s2,.ico.drawn .s3{animation:draw .8s var(--ease) both}
.ico.drawn .s2{animation-delay:.12s}
.ico.drawn .s3{animation-delay:.24s}
@keyframes draw{to{stroke-dashoffset:0}}
.ico .fillt,.ico .dot{opacity:0}
.ico.drawn .fillt{animation:icoFade .5s var(--ease) .45s both}
.ico.drawn .dot{animation:icoFade .35s var(--ease) .4s both}
@keyframes icoFade{to{opacity:1}}

/* ---- Icon 1 · Schild: Haken schlaegt ein, Ring pulst als Echo ---- */
.ico.drawn .i-ring{
  stroke:var(--tint-2);
  animation:draw .8s var(--ease) both, ringPulse 3.2s var(--ease) 1.3s infinite;
}
@keyframes ringPulse{0%,58%,100%{transform:scale(1); opacity:1}72%{transform:scale(1.18); opacity:.15}86%{transform:scale(1); opacity:1}}
.ico.drawn .i-check{
  animation:draw .45s var(--ease) .5s both, checkPop 3.2s var(--ease) 1.3s infinite;
}
@keyframes checkPop{0%,58%,100%{transform:scale(1) rotate(0)}66%{transform:scale(1.35) rotate(-6deg)}76%{transform:scale(.96)}84%{transform:scale(1)}}

/* ---- Icon 2 · Uhr: Minutenzeiger tickt, Sekunde laeuft, Deckel klingelt ---- */
.ico.drawn .i-min{
  animation:draw .4s var(--ease) .35s both, tick 12s steps(12,end) 1.1s infinite;
}
@keyframes tick{to{transform:rotate(360deg)}}
.ico.drawn .i-sec{
  animation:draw .35s var(--ease) .45s both, sweep 5s linear 1.1s infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.ico.drawn .i-bell{
  animation:draw .45s var(--ease) .5s both, bellRing 4.4s var(--ease) 1.9s infinite;
}
@keyframes bellRing{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-16deg)}86%{transform:rotate(12deg)}90%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-2deg)}}

/* ---- Icon 3 · Pin: springt und landet, Bodenwellen laufen raus ---- */
.ico.drawn .i-pin{
  animation:pinHop 3.8s var(--ease) 1.2s infinite;
}
.ico.drawn .i-pin .s,.ico.drawn .i-pin .s2{animation:draw .8s var(--ease) both}
.ico.drawn .i-pin .s2{animation-delay:.12s}
@keyframes pinHop{0%,62%,100%{transform:translateY(0)}70%{transform:translateY(-10px)}78%{transform:translateY(0)}83%{transform:translateY(-4px)}88%{transform:translateY(0)}}
.ico.drawn .i-wave1{
  stroke:var(--tint-2);
  animation:draw .5s var(--ease) .45s both, ripple 3.8s var(--ease) 1.55s infinite;
}
.ico.drawn .i-wave2{
  stroke:var(--tint-2);
  animation:draw .5s var(--ease) .55s both, ripple 3.8s var(--ease) 1.7s infinite;
}
@keyframes ripple{0%,74%{transform:scaleX(1); opacity:1}86%{transform:scaleX(1.45); opacity:.15}96%,100%{transform:scaleX(1); opacity:1}}

/* ---- Icon 4 · Chat: Tipp-Punkte wie im Messenger, Funke zuendet ---- */
.ico.drawn .i-dots .dot{animation:none; opacity:.25}
.ico.drawn .i-dots .d1{animation:typing 1.5s ease-in-out 1s infinite}
.ico.drawn .i-dots .d2{animation:typing 1.5s ease-in-out 1.18s infinite}
.ico.drawn .i-dots .d3{animation:typing 1.5s ease-in-out 1.36s infinite}
@keyframes typing{0%,55%,100%{opacity:.25; transform:translateY(0)}25%{opacity:1; transform:translateY(-3.5px)}}
.ico.drawn .i-spark{
  animation:draw .45s var(--ease) .5s both, sparkFlash 3.4s var(--ease) 1.4s infinite;
}
@keyframes sparkFlash{0%,60%,100%{transform:rotate(0) scale(1); opacity:1}68%{transform:rotate(28deg) scale(1.35); opacity:1}76%{transform:rotate(0) scale(.9); opacity:.6}84%{transform:rotate(0) scale(1); opacity:1}}

.reason:hover .ico{animation:icoNudge .5s var(--ease)}
@keyframes icoNudge{50%{transform:translateY(-5px)}}

/* --- Ablauf: Videos ----------------------------------------- */
.steps{display:grid; gap:clamp(3.2rem,7vw,5.8rem); margin-top:3.2rem}
.step{display:grid; gap:1.9rem; align-items:center}
@media(min-width:860px){
  .step{grid-template-columns:1fr 1.08fr; gap:clamp(2rem,5vw,4.5rem)}
  .step:nth-child(even) .step-art{order:-1}
}
.step-art{position:relative; max-width:560px; justify-self:center; width:100%}
@media(min-width:860px){.step-art{justify-self:stretch; max-width:none}}
.step-art video,.step-art img{
  width:100%; height:auto; aspect-ratio:1116/824; object-fit:cover;
  background:var(--bg-2);
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
}
.step-mark{display:flex; align-items:center; gap:.95rem; margin-bottom:1.05rem}
.step-no{
  width:50px; height:50px; border-radius:50%; background:var(--ink); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:1.4rem;
  display:grid; place-items:center; flex:none;
}
.step:first-child .step-no{background:var(--blue)}
.step-mark .flowline{flex:1}
.step h3{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem); margin-bottom:.65rem}
.step p{color:var(--ink-soft); max-width:46ch}

/* --- Projekte: grosse Buehnen (Exovia-Bauart) --------------- */
.projects{display:grid; gap:clamp(1.6rem,3.5vw,3rem); margin-top:clamp(2rem,5vw,3.2rem)}
.pj{
  display:block; text-decoration:none; border-radius:18px; overflow:hidden;
  position:relative; isolation:isolate;
}
.pj-inner{
  display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center;
  padding:clamp(1.8rem,4.5vw,4rem);
}
@media(min-width:900px){
  .pj-inner{grid-template-columns:.85fr 1.15fr; min-height:520px}
  .pj:nth-child(even) .pj-media{order:-1}
}
.pj-ghost{
  position:absolute; z-index:0; right:clamp(.5rem,3vw,2.5rem); top:-.15em;
  font-family:var(--f-display); font-weight:800; font-size:clamp(7rem,18vw,17rem);
  line-height:1; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.14);
  pointer-events:none; user-select:none;
}
.pj-light .pj-ghost{-webkit-text-stroke:2px rgba(11,27,51,.1)}
.pj-info{position:relative; z-index:2}
.pj-no{
  font-family:var(--f-display); font-weight:700; font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:.8rem;
}
.pj h2,.pj .pj-title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem); margin-bottom:.7rem}
.pj-desc{max-width:44ch; font-size:1.02rem}
.pj-tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem}
.tag{
  font-family:var(--f-display); font-weight:700; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.32rem .7rem; border-radius:999px;
}
.pj-go{
  font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.6rem;
}
.pj-go svg{width:16px; height:16px; fill:currentColor; transition:transform .35s var(--ease)}
.pj:hover .pj-go svg{transform:translate(5px,-5px)}
.pj-media{position:relative; z-index:1}
.pj-shotcard{
  border-radius:10px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  transform:perspective(1200px) rotate(-1.6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--py,0px),0);
  transition:transform .5s var(--ease); will-change:transform;
}
.pj:hover .pj-shotcard{transform:perspective(1200px) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--py,0px),0) scale(1.02)}
.pj-bar{display:flex; align-items:center; gap:.45rem; padding:.6rem .85rem; background:#F4F6FA; border-bottom:1px solid #E4E8F0}
.pj-bar i{width:9px; height:9px; border-radius:50%; background:#D6DCE8; flex:none}
.pj-bar span{
  margin-left:.5rem; background:#fff; border:1px solid #E4E8F0; border-radius:4px;
  padding:.22rem .8rem; font-size:.78rem; color:#69788F; font-family:var(--f-body);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pj-shotcard img{width:100%; height:auto; display:block}

/* Buehnen-Farbwelten pro Projekt */
.pj-benjamin{background:#0D0B08; color:#F4EDDF}
.pj-benjamin .pj-no{color:#C9A227}
.pj-benjamin .pj-desc{color:#C9BFA8}
.pj-benjamin .tag{background:rgba(201,162,39,.14); color:#DDBB55}
.pj-benjamin .pj-go{color:#DDBB55}
.pj-mehlhorn{background:#EDEEF2; color:var(--ink)}
.pj-mehlhorn .pj-no{color:#7A5EA8}
.pj-mehlhorn .pj-desc{color:var(--ink-soft)}
.pj-mehlhorn .tag{background:rgba(122,94,168,.12); color:#5F4787}
.pj-mehlhorn .pj-go{color:#5F4787}
.pj-palmberry{background:#F7EFE3; color:var(--ink)}
.pj-palmberry .pj-no{color:#A81A55}
.pj-palmberry .pj-desc{color:var(--ink-soft)}
.pj-palmberry .tag{background:rgba(45,74,28,.10); color:#2D4A1C}
.pj-palmberry .pj-go{color:#2D4A1C}
.pj-cta{background:var(--blue); color:#fff}
.pj-cta .pj-no{color:#B9CCFF}
.pj-cta .pj-desc{color:#D6E0FF}
.pj-cta .tag{background:rgba(255,255,255,.14); color:#fff}
.pj-cta .pj-go{color:#fff}
.pj-cta .pj-shotcard{box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}

/* Teaser-Variante auf der Startseite */
.works-teaser{display:grid; gap:1.6rem; margin-top:3rem}
@media(min-width:900px){.works-teaser{grid-template-columns:1fr 1fr}}
.wt{
  display:block; text-decoration:none; border-radius:14px; overflow:hidden; position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  box-shadow:0 24px 54px -30px rgba(11,27,51,.45);
}
.wt:hover{transform:translateY(-8px); box-shadow:0 34px 68px -30px rgba(11,27,51,.55)}
.wt img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; transition:transform .6s var(--ease)}
.wt:hover img{transform:scale(1.04)}
.wt-cap{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; padding:1.1rem 1.2rem;
  background:linear-gradient(to top, rgba(6,10,18,.82), rgba(6,10,18,0));
  color:#fff;
}
.wt-cap h3{font-size:1.25rem}
.wt-cap em{font-style:normal; font-size:.85rem; opacity:.8; display:block; margin-top:.15rem}
.wt-cap svg{width:18px; height:18px; fill:#fff; flex:none; margin-bottom:.2rem; transition:transform .35s var(--ease)}
.wt:hover .wt-cap svg{transform:translate(4px,-4px)}

/* --- Bewertungen: dunkles Schaustueck ----------------------- */
.reviews{background:var(--bg-2); color:var(--ink); overflow:hidden; position:relative}
.reviews .eyebrow{color:var(--blue)}
.reviews .eyebrow::before{background:var(--blue)}
.reviews h2{color:var(--ink)}

/* Kopfzeile: Bewertung links, 3D-Buehne rechts */
.rev-top{display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media(min-width:980px){.rev-top{grid-template-columns:1.12fr .88fr}}
.reviews h2{font-size:clamp(1.9rem,1.35rem + 2.1vw,2.9rem); max-width:17ch}
.rev-art{
  position:relative; justify-self:center; align-self:center; margin-inline:auto;
  width:min(100%,530px); aspect-ratio:1120/932;
}
.rev-glow{
  position:absolute; inset:-14% -10% -20% -10%; z-index:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(closest-side at 58% 46%, rgba(242,135,28,.20), transparent 70%),
    radial-gradient(closest-side at 34% 58%, rgba(11,124,116,.20), transparent 72%);
  filter:blur(10px);
}
.rev-layer{position:absolute; display:block; transform:translateY(var(--py,0))}
.rev-layer img{display:block; width:100%; height:auto}
.rev-layer-1{inset:0; z-index:1}
.rev-layer-1 img{filter:drop-shadow(0 30px 38px rgba(16,48,45,.22))}
.rev-layer-2{z-index:2; width:23%; left:-3%; bottom:4%}
.rev-layer-2 img{filter:drop-shadow(0 16px 22px rgba(16,48,45,.3))}
@keyframes revFloatA{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-15px,0) rotate(-1.2deg)}}
@keyframes revFloatB{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,13px,0) rotate(4deg)}}
.js .rev-layer-1 img{animation:revFloatA 7.5s ease-in-out infinite}
.js .rev-layer-2 img{animation:revFloatB 5.6s ease-in-out infinite .7s}
@media(prefers-reduced-motion:reduce){
  .js .rev-layer-1 img,.js .rev-layer-2 img{animation:none}
}

.score{display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; margin-top:2.6rem}
.score-num{
  font-family:var(--f-display); font-weight:800; line-height:.9;
  font-size:clamp(4.5rem,3rem + 8vw,9rem); color:var(--blue); font-variant-numeric:tabular-nums;
}
.score-meta{display:grid; gap:.35rem; padding-bottom:.7rem}
.score-stars{position:relative; font-size:1.6rem; letter-spacing:.14em; line-height:1; color:var(--tint-2); width:max-content}
.score-stars .fill{
  position:absolute; inset:0; overflow:hidden; white-space:nowrap; color:#F4B400;
  width:calc(var(--fill,100) * 1%);
  transition:width 1.4s var(--ease) .3s;
}
.score-meta small{color:var(--ink-mute); font-size:.95rem}
.qwrap{position:relative; margin-top:2.8rem}
.qtrack{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(86%,420px);
  gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
  scrollbar-width:none; cursor:grab;
}
.qtrack::-webkit-scrollbar{display:none}
.qtrack.drag{cursor:grabbing; scroll-snap-type:none}
.quote{
  scroll-snap-align:start; background:var(--white);
  border:1px solid var(--line); border-radius:20px 6px 20px 6px; padding:1.8rem 1.6rem;
  box-shadow:0 16px 38px -26px rgba(27,39,51,.35);
  display:flex; flex-direction:column; gap:1rem; position:relative;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.quote:hover{border-color:var(--tint-2); transform:translateY(-5px); box-shadow:0 24px 48px -26px rgba(27,39,51,.4)}
.quote::before{
  content:"\201E"; font-family:var(--f-display); font-weight:800; font-size:4.2rem; line-height:0;
  color:var(--tint-2); position:absolute; top:2.1rem; right:1.2rem; opacity:1;
}
.quote .qstars{color:#F4B400; letter-spacing:.12em; font-size:.95rem}
.quote blockquote{margin:0; font-size:1.02rem; line-height:1.6; color:var(--ink-soft)}
.quote.big blockquote{font-size:clamp(1.06rem,1rem + .4vw,1.22rem); color:var(--ink)}
.quote figcaption{font-family:var(--f-display); font-weight:700; font-size:1rem; color:var(--ink); margin-top:auto}
.quote figcaption em{display:block; font-style:normal; font-weight:500; font-size:.82rem; color:var(--ink-mute); font-family:var(--f-body); margin-top:.2rem}
.qnav{display:flex; gap:.6rem; margin-top:1.2rem}
.qbtn{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--tint-2);
  background:var(--white); color:var(--blue); cursor:pointer; display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
}
.qbtn:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.qbtn:active{transform:scale(.94)}
.qbtn svg{width:18px; height:18px; fill:currentColor}

/* --- Unterschied: zwei Lager, zeilenweise aufgedeckt --------- */
.cmp{position:relative; overflow:hidden}
.cmp-grid{display:grid; gap:1.4rem; margin-top:3rem; align-items:stretch}
@media(min-width:900px){.cmp-grid{grid-template-columns:1fr auto 1fr; gap:1.2rem}}
.cmp-col{border-radius:22px 8px 22px 8px; padding:1.9rem 1.7rem; position:relative}
.cmp-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem}
.cmp-head h3{font-size:1.32rem}
.cmp-tag{
  font-family:var(--f-display); font-weight:700; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; border-radius:999px; padding:.32rem .7rem; white-space:nowrap;
}
.cmp-col ul{list-style:none; padding:0; margin:0; display:grid; gap:.95rem}
.cmp-col li{
  display:flex; gap:.75rem; align-items:flex-start; line-height:1.45;
  opacity:1; transform:none;
}
.js .cmp-col li{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .cmp-col li.in{opacity:1; transform:none}
.cmp-col i{width:22px; height:22px; flex:none; margin-top:.08rem; position:relative; border-radius:50%}
.cmp-x{background:rgba(154,168,190,.18)}
.cmp-x::before,.cmp-x::after{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; border-radius:2px;
  background:#98A7B8; transform:translate(-50%,-50%) rotate(45deg);
}
.cmp-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.cmp-c{background:rgba(255,255,255,.16)}
.cmp-c::before{
  content:""; position:absolute; left:52%; top:47%; width:10px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; border-radius:1px;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.js .cmp-c::before{clip-path:inset(0 100% 0 0); transition:clip-path .45s var(--ease) .1s}
.js li.in .cmp-c::before{clip-path:inset(0 0 0 0)}

.cmp-them{background:var(--bg-2); border:1px solid var(--line); color:var(--ink-mute)}
.cmp-them h3{color:var(--ink-soft)}
.cmp-them .cmp-tag{background:#fff; border:1px solid var(--line); color:var(--ink-mute)}

.cmp-us{
  background:linear-gradient(150deg, var(--blue-hot), var(--blue) 42%, var(--blue-deep));
  color:#EAF6F4; box-shadow:0 34px 64px -32px rgba(7,94,88,.7);
  padding:0; overflow:visible;
}
.cmp-inner{
  position:relative; height:100%; padding:1.9rem 1.7rem; border-radius:inherit; overflow:hidden;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease);
}
.cmp-inner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 70%);
  transition:opacity .4s var(--ease);
}
.cmp-us.lit .cmp-inner::before{opacity:1}
.cmp-us h3{color:#fff}
.cmp-us .cmp-tag{background:rgba(255,255,255,.16); color:#fff}
.cmp-badge{
  position:absolute; z-index:3; width:80px; height:auto; right:-16px; bottom:-26px;
  filter:drop-shadow(0 16px 22px rgba(3,40,37,.5));
  pointer-events:none;
}
.js .cmp-badge{animation:cmpFloat 6s ease-in-out infinite}
@keyframes cmpFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@media(min-width:900px){.cmp-badge{width:100px; right:-26px; bottom:-34px}}

.cmp-split{display:flex; align-items:center; justify-content:center; gap:.8rem}
@media(min-width:900px){.cmp-split{flex-direction:column}}
.cmp-line{flex:1; background:linear-gradient(90deg,transparent,var(--tint-2),transparent); height:2px; min-width:40px}
@media(min-width:900px){.cmp-line{width:2px; height:auto; min-height:40px; background:linear-gradient(180deg,transparent,var(--tint-2),transparent)}}
.cmp-vs{
  font-family:var(--f-display); font-weight:800; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); background:var(--white);
  border:1px solid var(--tint-2); border-radius:999px; padding:.42rem .8rem;
}

/* --- KI & Sichtbarkeit: 3D-Karten mit Spotlight -------------- */
.ki{position:relative; overflow:hidden}
.ki-aurora{
  position:absolute; inset:auto -10% -30% -10%; height:70%; pointer-events:none; z-index:0;
  background:
    radial-gradient(closest-side at 22% 40%, rgba(11,124,116,.16), transparent 70%),
    radial-gradient(closest-side at 78% 60%, rgba(242,135,28,.14), transparent 72%);
  filter:blur(16px);
}
.ki .wrap{position:relative; z-index:1}
.ki-grid{display:grid; gap:1.4rem; margin-top:3.4rem}
@media(min-width:860px){.ki-grid{grid-template-columns:repeat(3,1fr); gap:1.5rem}}
.ki-card{opacity:1; transform:none}
.js .ki-card{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .ki-card.in{opacity:1; transform:none}
.ki-inner{
  position:relative; height:100%; isolation:isolate;
  background:var(--white); border:1px solid var(--line);
  border-radius:24px 8px 24px 8px; padding:1.1rem 1.6rem 1.8rem;
  box-shadow:0 18px 40px -30px rgba(16,48,45,.4);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ki-card.lit .ki-inner{box-shadow:0 34px 66px -34px rgba(16,48,45,.5); border-color:var(--tint-2)}
.ki-inner::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(11,124,116,.10), transparent 68%);
  transition:opacity .4s var(--ease);
}
.ki-card.lit .ki-inner::before{opacity:1}
.ki-ico{
  display:grid; place-items:center; width:100%; height:132px; margin-bottom:.4rem;
  position:relative;
}
.ki-ico::after{
  content:""; position:absolute; left:50%; bottom:6px; width:96px; height:14px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(16,48,45,.22), transparent 75%);
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.ki-ico img{
  width:auto; height:112px; object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(16,48,45,.18));
  transition:transform .55s var(--ease);
}
.js .ki-ico img{animation:kiFloat 6.5s ease-in-out infinite}
.js .ki-card:nth-child(2) .ki-ico img{animation-duration:7.4s; animation-delay:-1.2s}
.js .ki-card:nth-child(3) .ki-ico img{animation-duration:5.9s; animation-delay:-2.4s}
@keyframes kiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}
.ki-card.lit .ki-ico::after{transform:translateX(-50%) scaleX(.82); opacity:.75}
.ki-inner .num{
  font-family:var(--f-display); font-weight:800; font-size:.74rem; letter-spacing:.16em;
  color:var(--blue); display:block; margin-bottom:.7rem; text-transform:uppercase;
}
.ki-inner h3{font-size:1.16rem; margin-bottom:.6rem; line-height:1.18}
.ki-inner p{font-size:.97rem; color:var(--ink-soft); margin:0}
@media(prefers-reduced-motion:reduce){
  .js .ki-ico img,.js .cmp-badge{animation:none}
}

/* --- Standort-Band: 3D-Insel bis zur Einwilligung ------------ */
.locband{position:relative; overflow:hidden}
.locband-in{display:grid; gap:clamp(2.2rem,4vw,3.6rem); align-items:center}
@media(min-width:1000px){.locband-in{grid-template-columns:.92fr 1.08fr}}
.locband-copy .lede{margin-top:1.1rem}
.locband-rows{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.55rem; max-width:420px}
.locband-rows li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--line);
}
.js .locband-rows li{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.js .locband-rows li.in{opacity:1; transform:none}
.locband-rows span{
  font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute);
}
.locband-rows b{font-weight:600; font-size:.98rem}
.locband-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.6rem}
.locband-chips span{
  font-family:var(--f-display); font-weight:700; font-size:.71rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-deep); background:var(--tint);
  border-radius:999px; padding:.36rem .74rem;
}
.locband-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem}

.locband-stage{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:28px 10px 28px 10px; aspect-ratio:4/3;
  background:radial-gradient(120% 90% at 30% 15%, #12968C 0%, #0B7C74 42%, #05433F 100%);
  box-shadow:0 46px 90px -44px rgba(3,40,37,.85);
}
@media(min-width:1000px){.locband-stage{aspect-ratio:16/12}}
.lb-grid{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  transparent 0 43px, rgba(255,255,255,.10) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(255,255,255,.10) 43px 44px);
  mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%);
}
.lb-radar{
  position:absolute; left:50%; top:52%; z-index:1; width:min(56%,320px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(255,255,255,.28);
}
.js .lb-radar{animation:lbPing 4.6s ease-out infinite}
.lb-radar-2{width:min(78%,440px)}
.js .lb-radar-2{animation-delay:1.6s}
@keyframes lbPing{
  0%{transform:translate(-50%,-50%) scale(.55); opacity:0}
  22%{opacity:.75}
  100%{transform:translate(-50%,-50%) scale(1.25); opacity:0}
}
.lb-isle{
  position:absolute; left:50%; top:46%; z-index:2; width:min(62%,360px);
  transform:translate(-50%,-50%) translateY(var(--py,0)); display:block; pointer-events:none;
}
.lb-isle img{width:100%; height:auto; display:block; filter:drop-shadow(0 30px 34px rgba(3,30,28,.55))}
.js .lb-isle img{animation:lbFloat 7.2s ease-in-out infinite}
@keyframes lbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.lb-gate{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:grid; justify-items:center; gap:.9rem; text-align:center;
  padding:1.4rem clamp(1.1rem,4vw,2.4rem) clamp(1.4rem,3vw,2rem);
  background:linear-gradient(180deg, transparent, rgba(3,40,37,.62) 45%);
}
.lb-gate p{margin:0; max-width:44ch; font-size:.88rem; line-height:1.5; color:#D6ECE9}
.lb-gate p b{color:#fff; font-weight:600}
.lb-veil{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:linear-gradient(150deg, rgba(11,124,116,.42), rgba(5,67,63,.28));
  mix-blend-mode:multiply; transition:opacity .8s var(--ease);
}
.locband-stage iframe{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; border:0;
  opacity:0; transition:opacity .9s var(--ease);
  filter:grayscale(.55) contrast(1.04) brightness(1.02) saturate(.85);
}
.locband-stage.is-live .lb-gate,
.locband-stage.is-live .lb-isle,
.locband-stage.is-live .lb-radar,
.locband-stage.is-live .lb-grid{opacity:0; transition:opacity .5s var(--ease); pointer-events:none}
.locband-stage.is-shown iframe{opacity:1}
.locband-stage.is-shown .lb-veil{opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .lb-radar,.js .lb-isle img{animation:none}
}

/* --- Team (Damian klein) ------------------------------------ */
.team{display:grid; gap:1.8rem; margin-top:3rem}
@media(min-width:640px){.team{grid-template-columns:1fr 1fr; max-width:760px}}
.person{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:1.7rem 1.5rem}
.avatar{
  width:86px; height:86px; border-radius:50%; background:var(--tint);
  border:2px solid var(--tint-2); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:1.7rem; color:var(--blue); margin-bottom:1.05rem;
}
.person h3{font-size:1.25rem; margin-bottom:.25rem}
.person p{font-size:.94rem; color:var(--ink-mute)}
.team-note{margin-top:1.4rem; font-size:.92rem; color:var(--ink-mute)}
.team-note b{font-family:var(--f-display); font-weight:700; color:var(--ink-soft)}

/* --- FAQ: Papke-Bauart (Karten + Chevron-Chip + weiche Hoehe) ---- */
.faq{margin-top:2.8rem; display:grid; gap:.9rem; max-width:860px; margin-inline:auto}
#faq .eyebrow{justify-content:center}
#faq h2{text-align:center; margin-inline:auto}
/* Papke-Scroll-Engine steuert das Kippen pro Frame (JS Block 18).
   Items sind IMMER sichtbar (wie bei Papke) — die Groesse/Kippung
   aus der Tiefe ist der Auftritt. transform ohne Transition. */
.js .faq details{
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
  backface-visibility:hidden;
}
.faq details{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 22px -16px rgba(27,39,51,.35); overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq details.is-open,
html:not(.js) .faq details[open]{
  box-shadow:0 18px 40px -20px rgba(27,39,51,.4);
  border-color:var(--tint-2);
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.05rem,1rem + .3vw,1.22rem);
  transition:color .2s var(--ease);
}
.faq summary:hover{color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:none}
.faq-chevron{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--tint); position:relative;
  transition:background-color .25s var(--ease), transform .35s var(--ease);
}
.faq-chevron::before{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px;
  border-right:2.4px solid var(--blue-deep); border-bottom:2.4px solid var(--blue-deep);
  transform:translate(-50%,-65%) rotate(45deg);
  transition:border-color .25s var(--ease);
}
.faq details.is-open .faq-chevron,
html:not(.js) .faq details[open] .faq-chevron{
  background:var(--blue); transform:rotate(180deg);
}
.faq details.is-open .faq-chevron::before,
html:not(.js) .faq details[open] .faq-chevron::before{
  border-color:#fff;
}
.faq .answer{color:var(--ink-soft); max-width:none}
.faq .answer-in{padding:0 1.4rem 1.3rem; max-width:70ch}
/* Weiche Hoehen-Animation nur mit JS (Klasse steuert, Grid-Rows animieren) */
.js .faq details .answer{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.js .faq details .answer > .answer-in{overflow:hidden; min-height:0}
.js .faq details.is-open .answer{grid-template-rows:1fr}
.js .faq details .answer-in{
  opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease) .08s, transform .35s var(--ease) .08s;
}
.js .faq details.is-open .answer-in{opacity:1; transform:none}

/* --- Angebot-Popup (mit Higgsfield-Art) --------------------- */
.modal{border:none; padding:0; background:transparent; max-width:min(94vw,480px); width:100%; margin:auto; overflow:visible}
.modal::backdrop{background:rgba(11,27,51,.66); backdrop-filter:blur(3px)}
.modal-card{
  background:#fff; color:var(--ink); border-radius:16px; overflow:hidden;
  position:relative; box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.js .modal[open] .modal-card{animation:pop .42s var(--ease) both}
@keyframes pop{from{opacity:0; transform:translateY(22px) scale(.96)}}
.modal-art{position:relative; background:#fff; border-bottom:1px solid var(--line)}
.modal-art img{filter:hue-rotate(-42deg) saturate(.92)}
.modal-art img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.modal-flag{
  position:absolute; left:1.4rem; bottom:-13px; background:var(--accent); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.4rem .9rem; border-radius:999px; z-index:2;
}
.modal-x{
  position:absolute; top:.8rem; right:.8rem; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  font-size:1.35rem; line-height:1; display:grid; place-items:center; z-index:3;
  transition:background .25s var(--ease), transform .3s var(--ease);
}
.modal-x:hover{background:var(--blue); transform:rotate(90deg)}
.modal-body{padding:1.9rem 1.7rem 1.7rem}
.modal-body h3{font-size:1.45rem; color:var(--ink); margin-bottom:.9rem}
.price{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; font-variant-numeric:tabular-nums}
.price .now{font-family:var(--f-display); font-weight:800; font-size:clamp(2.7rem,2rem + 2.6vw,3.6rem); line-height:1; color:var(--blue)}
.price .was{font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--ink-mute); text-decoration:line-through}
.price-sub{font-size:.9rem; color:var(--ink-mute); margin-top:.5rem}
.modal-body ul{list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.6rem}
.modal-body li{display:flex; gap:.6rem; align-items:flex-start; font-size:.99rem; color:var(--ink-soft)}
.modal-body li svg{width:17px; height:17px; fill:var(--blue); flex:none; margin-top:.28rem}
.modal-body .btn{width:100%; margin-top:1.5rem}

/* --- Sonderangebot (SR-Preiskarte) -------------------------- */
.offer-sec{position:relative}
.offer-card{
  position:relative; max-width:900px; margin:2.8rem auto 0; background:#fff;
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 40px 80px -40px rgba(27,39,51,.35);
  padding:clamp(1.8rem,5vw,3.2rem);
}
.offer-flag{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-family:var(--f-display); font-weight:800;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem 1.1rem; border-radius:999px; white-space:nowrap;
}
.offer-head{text-align:center}
.offer-head h3{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem)}
.offer-price{display:flex; align-items:baseline; justify-content:center; gap:.8rem; margin-top:1rem; font-variant-numeric:tabular-nums}
.offer-price .now{font-family:var(--f-display); font-weight:800; font-size:clamp(3rem,2.2rem + 3.4vw,4.6rem); line-height:1; color:var(--blue)}
.offer-price .was{font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--ink-mute); text-decoration:line-through}
.offer-sub{text-align:center; color:var(--ink-mute); font-size:.92rem; margin-top:.5rem}
.offer-feats{
  display:grid; gap:.85rem 2rem; margin:2rem 0 0; padding:0; list-style:none;
}
@media(min-width:720px){.offer-feats{grid-template-columns:1fr 1fr}}
.offer-feats li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft)}
.offer-feats svg{width:22px; height:22px; flex:none; margin-top:.1rem}
.offer-feats circle{fill:var(--tint)}
.offer-feats path{fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.offer-cta{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.2rem}
.offer-note{text-align:center; font-size:.85rem; color:var(--ink-mute); margin-top:1rem}

/* --- Kontakt ------------------------------------------------ */
.contactgrid{display:grid; gap:clamp(2rem,5vw,3.5rem); margin-top:2.8rem}
@media(min-width:900px){.contactgrid{grid-template-columns:1.05fr .95fr}}
.form{display:grid; gap:1.1rem}
.field{display:grid; gap:.4rem}
.field label{font-family:var(--f-display); font-weight:700; font-size:.95rem}
.field input,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink); background:var(--white);
  border:1.5px solid var(--line); border-radius:8px; padding:.85rem .95rem; width:100%;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--tint)}
.field textarea{min-height:150px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft)}
.consent input{width:18px; height:18px; flex:none; margin-top:.2rem; accent-color:var(--blue)}
.contactcard{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:1.8rem 1.6rem; display:grid; gap:1.6rem; align-content:start}
.contactcard h3{font-size:1.15rem; margin-bottom:.7rem}
.contactcard a{font-family:var(--f-display); font-weight:700; text-decoration:none; color:var(--blue)}
.contactcard a:hover{color:var(--blue-deep)}
.hours{display:grid; gap:.45rem; font-size:.97rem}
.hours div{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.hours span:last-child{font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.hours .dots{flex:1; border-bottom:2px dotted var(--line); margin-inline:.4rem}

/* --- Karte (laedt erst nach Einwilligung) -------------------- */
.mapbox{
  position:relative; margin-top:2.8rem; border-radius:18px 6px 18px 6px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2); aspect-ratio:16/9;
}
@media(max-width:640px){.mapbox{aspect-ratio:4/3}}
.mapbox iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.22) contrast(1.04) saturate(.92)}
.map-gate{
  position:absolute; inset:0; display:grid; place-content:center; gap:.85rem; text-align:center;
  padding:2rem 1.4rem; background-color:var(--tint);
  background-image:
    radial-gradient(circle at 50% 42%, rgba(226,240,238,.62), rgba(226,240,238,.94) 60%),
    repeating-linear-gradient(0deg,  transparent 0 33px, rgba(11,124,116,.3) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(11,124,116,.3) 33px 34px);
}
.map-gate-pin{
  width:44px; height:44px; margin-inline:auto; display:grid; place-items:center;
  border-radius:50%; background:var(--blue); box-shadow:0 10px 22px -10px rgba(7,94,88,.9);
}
.map-gate-pin svg{width:22px; height:22px; fill:#fff}
.map-gate h3{font-size:1.18rem}
.map-gate p{font-size:.92rem; color:var(--ink-soft); max-width:44ch; margin:0 auto}
.map-gate .btn{justify-self:center}

/* --- Finale + Footer ---------------------------------------- */
.finale{background:var(--blue); color:#EAF6F4; text-align:center; overflow:hidden; position:relative}
.finale::before{
  content:""; position:absolute; width:720px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.09), transparent 65%);
  top:-260px; left:-180px; pointer-events:none;
}
.finale::after{
  content:""; position:absolute; width:340px; aspect-ratio:1; border-radius:50%;
  background:var(--accent); opacity:.16; right:-120px; bottom:-140px; pointer-events:none;
}
.finale-flow{position:absolute; inset:auto 0 -2px 0; width:100%; height:44%; pointer-events:none; opacity:.55}
.finale-flow path{fill:none; stroke-linecap:round}
.finale .wrap,.finale .wrap-wide{position:relative; z-index:2}
.finale-chips{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.9rem}
.chip{
  font-family:var(--f-ui); font-weight:700; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:#EAF6F4; border:1px solid rgba(255,255,255,.32);
  border-radius:999px; padding:.5rem 1rem;
}
.chip b{color:#FFD9AE}
.finale .eyebrow{justify-content:center; color:#BFE3DF}
.finale .eyebrow::before{background:#BFE3DF}
.finale h2{color:#FFFFFF}
.finale .lede{margin-inline:auto; margin-top:1.2rem; color:#CFE9E6}
.finale-cta{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.4rem}

/* Zweispaltige Variante: Kontakt links, Standortkarte rechts */
.finale-in{display:grid; gap:clamp(2.6rem,5vw,4.5rem); align-items:center}
@media(min-width:1000px){.finale-in{grid-template-columns:1.02fr .98fr}}
.finale-split{text-align:left}
.finale-split .eyebrow{justify-content:flex-start}
.finale-split .lede{margin-inline:0}
.finale-split .finale-cta,.finale-split .finale-chips{justify-content:flex-start}
.finale-split .bigtel{margin-top:2rem}

.bigtel{
  display:inline-flex; align-items:center; gap:1rem; margin-top:2.2rem;
  font-family:var(--f-ui); font-weight:800;
  font-size:clamp(1.5rem,1.05rem + 1.8vw,2.35rem); text-decoration:none; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  border-radius:24px 8px 24px 8px; padding:.8rem 1.9rem .8rem .8rem;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.bigtel:hover{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.42); transform:translateY(-3px)}
.bigtel i{
  width:52px; height:52px; border-radius:16px 6px 16px 6px; background:var(--accent); flex:none;
  display:grid; place-items:center; font-style:normal;
  box-shadow:0 12px 24px -12px rgba(208,111,15,.9);
}
.bigtel svg{width:24px; height:24px; fill:#fff}

/* Standortkarte im Finale */
.locard{
  position:relative; z-index:2; text-align:left;
  background:var(--white); color:var(--ink);
  border-radius:26px 8px 26px 8px; overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 48px 90px -46px rgba(3,28,26,.9), inset 0 2px 0 rgba(255,255,255,.5);
}
.locard-head{display:flex; align-items:center; gap:.95rem; padding:1.3rem 1.4rem 1.15rem}
.locard-pin{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:14px 5px 14px 5px; background:var(--tint);
}
.locard-pin svg{width:22px; height:22px; fill:var(--blue)}
.locard-head h3{font-size:1.1rem; letter-spacing:-.012em}
.locard-head p{margin:.28rem 0 0; font-size:.85rem; color:var(--ink-mute)}
.locard .mapbox{
  margin:0; border-radius:0; border-inline:0;
  border-block:1px solid var(--line); aspect-ratio:16/10;
}
@media(max-width:640px){.locard .mapbox{aspect-ratio:4/3}}
.locard .map-gate{padding:1.4rem 1.1rem; gap:.7rem}
.locard .map-gate h3{font-size:1rem}
.locard .map-gate p{font-size:.82rem; max-width:38ch; line-height:1.5}
.locard .map-gate .btn{font-size:.78rem; padding:.7rem 1.2rem}
.locard .map-gate-pin{width:38px; height:38px}
.locard .map-gate-pin svg{width:19px; height:19px}
.locard-foot{padding:1.2rem 1.4rem 1.4rem}
.locard-rows{display:grid; gap:.5rem}
.locard-rows > div{display:flex; align-items:baseline; gap:.8rem; justify-content:space-between}
.locard-rows > div > span:first-child{
  font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute); flex:none;
}
.locard-rows b{font-weight:600; font-size:.95rem; text-align:right}
.locard-rows a{color:var(--blue-deep); font-weight:600; font-size:.95rem; text-decoration:none; text-align:right}
.locard-rows a:hover{text-decoration:underline}
.locard-areas{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:1.1rem; padding-top:1.05rem; border-top:1px solid var(--line);
}
.locard-areas span{
  font-family:var(--f-display); font-weight:700; font-size:.71rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-deep); background:var(--tint);
  border-radius:999px; padding:.34rem .72rem;
}
.locard-foot > .btn{width:100%; margin-top:1.15rem}
.ph-tag{
  display:inline-block; font-family:var(--f-display); font-weight:700; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep);
  background:var(--tint); border-radius:999px; padding:.24rem .6rem;
}

footer{background:#152029; color:#9FB0BE; padding-block:3.6rem 1.8rem; position:relative}
footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; pointer-events:none;
  background:linear-gradient(90deg, var(--blue-deep), #5FCFC5 40%, var(--accent) 78%, var(--blue-deep));
  opacity:.9;
}
.foot-grid{display:grid; gap:2.4rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1fr 1fr; gap:2.8rem}}
@media(min-width:1080px){.foot-grid{grid-template-columns:1.3fr .7fr 1fr .95fr; gap:3rem}}
.foot-brand p{font-size:.95rem; max-width:34ch; margin-top:.9rem; line-height:1.6}
.foot-stars{margin-top:1rem; font-size:.85rem; color:#C9D4DE}
.foot-stars b{color:#F4B400; letter-spacing:.12em; font-weight:600; margin-right:.45rem}
.foot-grid h4{
  font-family:var(--f-display); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:#7E90A1; margin:0 0 1.05rem;
}
.foot-grid a:not(.logo){
  display:block; color:#B7C4D0; text-decoration:none; font-size:.95rem;
  padding-block:.34rem; width:max-content;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.foot-grid a:not(.logo):hover{color:#fff; transform:translateX(3px)}
.foot-contact svg,.foot-area a svg{display:inline-block; width:15px; height:15px; fill:#5FCFC5; margin-right:.5rem; vertical-align:-2px}
.foot-area p{font-size:.93rem; color:#B7C4D0; margin:0 0 .6rem; line-height:1.55}
.foot-area .tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem}
.foot-area .tags span{
  font-family:var(--f-display); font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:#9FE4DC; border:1px solid rgba(95,207,197,.28);
  border-radius:999px; padding:.28rem .62rem;
}
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem; color:#67788A;
}
.foot-bottom a{color:#8899AA; text-decoration:none}
.foot-bottom a:hover{color:#fff}
.foot-up{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display);
  font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#8899AA; text-decoration:none; border:1px solid rgba(255,255,255,.14);
  border-radius:12px 4px 12px 4px; padding:.5rem .9rem;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.foot-up:hover{color:#fff; border-color:rgba(95,207,197,.5); background:rgba(95,207,197,.1)}
.foot-up i{
  width:.5em; height:.5em; border-left:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(45deg); display:block; margin-top:.15em;
}
.credits{margin-top:.9rem; font-size:.75rem; color:#8A99A8; max-width:78ch}
.credits a{text-decoration:underline; color:inherit}


.pagehead{padding-block:clamp(2.6rem,7vh,4.6rem) clamp(1.5rem,4vh,2.5rem)}
.pagehead h1{margin-block:.9rem 1rem}

/* --- Referenz-Showcase: Tabs + gefaecherte Screenshots ------ */
.showcase{margin-top:2.8rem}
.tabs{
  display:flex; flex-wrap:wrap; gap:.4rem; padding:.45rem;
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  width:max-content; max-width:100%;
}
.tab{
  font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.01em;
  color:var(--ink-soft); background:transparent; border:none; cursor:pointer;
  padding:.62rem 1.3rem; border-radius:999px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--blue); color:#fff}
.panel{margin-top:2.4rem}
.js .panel{display:none}
.js .panel.is-on{display:grid}
.panel{display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center}
@media(min-width:900px){.panel{grid-template-columns:.9fr 1.1fr}}
@keyframes panelIn{from{opacity:0; transform:translateY(16px)}}
.js .panel.is-on{animation:panelIn .5s var(--ease) both}
.panel-copy h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin-bottom:.8rem; color:var(--blue)}
.panel-copy > p{color:var(--ink-soft); max-width:46ch}
.panel-copy > p + p{margin-top:.9rem}
.gbadge{display:flex; align-items:center; gap:.7rem; margin-top:1.5rem}
.gword{font-family:var(--f-body); font-weight:600; font-size:1.35rem; letter-spacing:-.02em}
.gword b{font-weight:600}
.gw-b{color:#4285F4}.gw-r{color:#EA4335}.gw-y{color:#FBBC05}.gw-g{color:#34A853}
.gstars{color:#F4B400; letter-spacing:.1em; font-size:1.05rem}
.panel-copy blockquote{
  margin:.9rem 0 0; font-style:italic; color:var(--ink-soft); line-height:1.55;
  border-left:3px solid var(--tint-2); padding-left:1rem; max-width:52ch;
}
.gname{font-family:var(--f-display); font-weight:700; margin-top:.7rem}
.gdomain{
  display:inline-block; margin-top:.4rem; font-family:var(--f-display); font-weight:700;
  color:var(--blue); text-decoration:none; border-bottom:2px solid var(--tint-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
a.gdomain:hover{color:var(--blue-deep); border-color:var(--blue)}
span.gdomain{color:var(--ink-mute); border-color:transparent}
.devstage{
  position:relative; aspect-ratio:4/3; perspective:1400px;
  --mxp:0px; --myp:0px;
}
.dev{
  position:absolute; display:block;
  transform:translate3d(calc(var(--mxp) * var(--d,1)), calc(var(--myp) * var(--d,1) + var(--py,0px)), 0)
            rotate(var(--rot,0deg));
  transition:filter .5s var(--ease);
}
.dev-screen{position:absolute; z-index:1; overflow:hidden; background:#0C1416}
.dev-screen img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.dev-frame{position:relative; z-index:2; width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 30px rgba(12,40,38,.32))}

.dev-pc{left:0; top:1%; width:76%; --d:.5; --rot:-1.2deg; z-index:1}
.dev-pc .dev-screen{left:1.989%; top:2.36%; width:96.203%; height:72.62%}
.dev-tab{right:9%; top:20%; width:29%; --d:1.1; --rot:3.5deg; z-index:2}
.dev-tab .dev-screen{left:7.136%; top:4.781%; width:86.747%; height:90.915%; border-radius:9px}
.dev-phone{right:0; bottom:2%; width:17.5%; --d:1.9; --rot:-4.5deg; z-index:3}
.dev-phone .dev-screen{left:5.779%; top:2.672%; width:88.693%; height:94.593%; border-radius:12px}
@media(max-width:560px){
  .dev-pc{width:82%}
  .dev-tab{width:32%; right:5%}
  .dev-phone{width:20%}
}
.devstage::after{
  content:""; position:absolute; z-index:0; inset:14% 6% 4% 6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(11,124,116,.16), transparent 72%);
  filter:blur(12px);
}
@keyframes devIn{from{opacity:0; translate:0 34px}}
.js .panel.is-on .dev{animation:devIn .7s var(--ease) both}
.js .panel.is-on .dev-tab{animation-delay:.09s}
.js .panel.is-on .dev-phone{animation-delay:.18s}



@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .rv{opacity:1; transform:none}
  .js [data-split] .wi{transform:none}
  .ico *{stroke-dasharray:none !important; stroke-dashoffset:0 !important}
  .kurhaus-frame,.kurhaus-frame img,.step-art video,.step-art img,.pj-shotcard{transform:none !important}
  .dev{transform:translateY(var(--py,0px)) rotate(var(--rot,0deg)) !important}
  .flowline i{transform:scaleX(1)} .flowline b{opacity:1}
  @view-transition{ navigation: none; }
}

/* --- Logo-Marke (Flow-Figur) -------------------------------- */
.logomark{width:auto; height:24px; flex:none; display:block}
.logo:hover .logomark{animation:lmFlow .9s var(--ease)}
@keyframes lmFlow{35%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.logo b{font-family:var(--f-display); font-weight:800; letter-spacing:-.02em}

/* --- Wiesbaden-Band (Kurhaus bei Nacht) --------------------- */
.wiesbaden{
  position:relative; min-height:min(72svh,620px); display:flex; align-items:center;
  overflow:hidden; background:#0A1016; color:#F0F3F2;
}
.wiesbaden-bg{position:absolute; inset:0}
.wiesbaden-bg img{
  width:100%; height:120%; object-fit:cover; object-position:center 62%;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
}
.wiesbaden-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(92deg, rgba(6,12,16,.86) 0%, rgba(6,12,16,.55) 46%, rgba(7,94,88,.18) 100%),
    linear-gradient(to top, rgba(6,12,16,.55), rgba(6,12,16,0) 45%);
}
.wiesbaden-in{position:relative; z-index:2; padding-block:clamp(4rem,10vh,6rem)}
.wiesbaden .eyebrow{color:#9FD8D2}
.wiesbaden .eyebrow::before{background:var(--accent)}
.wiesbaden h2{color:#fff; max-width:16ch}
.wiesbaden .lede{color:#C9D4D2; margin-top:1.2rem; max-width:46ch}
.wiesbaden .lede strong{color:#fff}
.wiesbaden-credit{
  position:absolute; right:1rem; bottom:.7rem; z-index:2;
  font-size:.68rem; color:rgba(240,243,242,.5); letter-spacing:.04em;
}

/* --- Referenz-Viewer (Kundenseite + FlowState-Leiste) -------- */
.viewer-body{overflow:hidden}
.viewer{position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg-2)}
.viewer-frame{flex:1; width:100%; border:0; background:#fff}
.viewer-empty{
  flex:1; display:grid; place-items:center; text-align:center; padding:2rem;
  background:var(--bg-2);
}
.viewer-empty h1{margin-block:.7rem 1rem}
.viewer-bar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem clamp(.9rem,3vw,1.6rem);
  background:var(--ink); color:#EAF1F0;
  box-shadow:0 -14px 34px -18px rgba(10,16,22,.6);
}
.viewer-brand{
  display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#fff;
  font-size:1.15rem;
}
.viewer-brand .lm-a{stroke:#5FCFC5}
.viewer-note{font-size:.98rem; color:#B9C6C4; margin-right:auto}
.viewer-note strong{color:#fff}
.viewer-actions{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.viewer-actions .btn{padding:.62rem 1.15rem; font-size:.8rem}
.viewer-ext{
  color:#9FD8D2; text-decoration:none; font-family:var(--f-ui); font-weight:700; font-size:.85rem;
}
.viewer-ext:hover{color:#fff}
.viewer-x{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:#EAF1F0; text-decoration:none; font-size:1.5rem; line-height:1;
  border:1px solid rgba(255,255,255,.25); transition:background .25s var(--ease), transform .3s var(--ease);
}
.viewer-x:hover{background:var(--accent); border-color:var(--accent); transform:rotate(90deg)}
@media(max-width:760px){
  .viewer-note{flex-basis:100%; order:3; margin:0; font-size:.88rem}
  .viewer-bar{gap:.6rem}
}

@media (prefers-reduced-motion: reduce){
  .wiesbaden-bg img{transform:none !important}
}

/* --- Rechtsseiten (Impressum, Datenschutz) ------------------- */
.legal{background:var(--bg-2)}
.legal-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:26px 8px 26px 8px; padding:clamp(1.6rem,4vw,3.2rem);
  max-width:80ch; margin-inline:auto;
  box-shadow:0 30px 64px -44px rgba(16,48,45,.45);
}
.legal-card h1{font-size:clamp(2.1rem,1.6rem + 2vw,3rem); margin:.6rem 0 0}
.legal-card h2{
  font-size:clamp(1.12rem,1.05rem + .35vw,1.32rem); line-height:1.2;
  margin:2.4rem 0 .7rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.legal-card h2:first-of-type{margin-top:2rem}
.legal-lede{
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem); color:var(--ink-soft);
  margin:1rem 0 0; max-width:60ch;
}
.legal-card p{margin:0 0 .9rem; line-height:1.65; color:var(--ink-soft)}
.legal-card strong{color:var(--ink); font-weight:600}
.legal-card a{color:var(--blue-deep); text-underline-offset:3px}
.legal-card a:hover{color:var(--blue-hot)}
.legal-card ul{margin:0 0 1rem; padding-left:1.15rem; display:grid; gap:.45rem; color:var(--ink-soft)}
.legal-card li{line-height:1.55}
.legal-card code{
  font-size:.9em; background:var(--tint); color:var(--blue-deep);
  border-radius:5px; padding:.1em .38em;
}
.legal-foot{
  margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-mute);
}


/* ============================================================
   Mobile-Feinschliff (31.08. Nacht): Bewertungen nie angeschnitten,
   Team mittig, zwei Rufnummern im Finale.
   ============================================================ */

/* Bewertungs-Slider: Karten fuellen exakt — nie ein Anschnitt.
   1 Karte mobil, 2 ab Tablet, 3 ab Desktop; Snap sitzt buendig. */
.qtrack{grid-auto-columns:100%; gap:1rem; scroll-padding-inline:0}
.qtrack .quote{scroll-snap-align:start; width:100%; max-width:none; min-width:0}
@media(min-width:700px){.qtrack{grid-auto-columns:calc((100% - 1rem) / 2)}}
@media(min-width:1080px){.qtrack{grid-auto-columns:calc((100% - 2rem) / 3)}}

/* Team: komplett mittig */
#team .eyebrow{justify-content:center}
#team h2{text-align:center; margin-inline:auto}
#team .team{margin-inline:auto; justify-items:stretch}
#team .person{text-align:center}
#team .person .avatar{margin-inline:auto}
#team .team-note{text-align:center}

/* Finale: zwei Rufnummern nebeneinander */
.finale-tels{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  align-items:center; margin-top:2.2rem;
}
.finale-tels .bigtel{margin-top:0; font-size:clamp(1.25rem,1rem + 1.3vw,1.9rem); padding:.7rem 1.5rem .7rem .8rem}
.finale-tels .bigtel i{width:44px; height:44px}


/* Kontakt: 'Zwei Dinge' mittig */
#wissen .eyebrow{justify-content:center}
#wissen h2{text-align:center; margin-inline:auto}
#wissen .reason{text-align:center}
#wissen .reason .ico{margin-inline:auto}
#wissen .reason p{margin-inline:auto}

/* Karte: kompakt statt prominent */
.mapbox{max-width:620px; margin-inline:auto; aspect-ratio:21/10}
@media(max-width:640px){.mapbox{aspect-ratio:16/10}}
.map-gate{padding:1.4rem 1.2rem; gap:.7rem}
.map-gate h3{font-size:1.02rem}
.map-gate p{font-size:.85rem; max-width:40ch}
.map-gate .btn{padding:.65rem 1.2rem; font-size:.8rem}


/* Bewertungen: leichter statt grosse Boxen */
.quote{padding:1.05rem 1.1rem; gap:.6rem; border-radius:10px}
.quote::before{font-size:2.4rem; top:1.4rem; right:.9rem}
.quote .qstars{font-size:.8rem}
.quote blockquote{font-size:.9rem; line-height:1.5}
.quote.big blockquote{font-size:.98rem}
.quote figcaption{font-size:.88rem}
.quote figcaption em{font-size:.76rem}
.qtrack{gap:.8rem}
@media(min-width:700px){.qtrack{grid-auto-columns:calc((100% - .8rem) / 2)}}
@media(min-width:1080px){.qtrack{grid-auto-columns:calc((100% - 1.6rem) / 3)}}

/* hidden darf nie von display-Regeln ueberstimmt werden */
.viewer-empty[hidden]{display:none !important}
[hidden]{display:none}


/* Angebots-Popup: passt IMMER in den Viewport, Inhalt scrollt */
.modal{max-height:min(92dvh,760px); overflow:visible}
.modal-card{display:flex; flex-direction:column; max-height:min(92dvh,760px)}
.modal-art{flex:none}
.modal-art img{max-height:min(30dvh,240px); object-fit:cover; width:100%}
.modal-body{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.modal-body .btn{flex:none}
.modal-cta-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.modal-cta-row .btn{flex:1 1 auto; width:auto; margin-top:0}
@media(max-height:640px){.modal-art img{max-height:22dvh}}

/* Viewer: Vorschau-Stapel fuer Referenzen ohne Live-URL */
.viewer-previews{
  display:grid; gap:1rem; max-width:760px; margin:1.6rem auto 0;
}
.viewer-previews img{
  width:100%; height:auto; border-radius:10px; border:1px solid var(--line);
  box-shadow:0 14px 34px -22px rgba(27,39,51,.4);
}
.viewer-empty{overflow-y:auto; place-items:start center; padding-block:3rem}
.viewer-empty > div{max-width:820px}


/* Logo-Wortmarke (aus dem Original) statt Systemschrift */
.logotype{height:11px; width:auto; display:block; flex:none}
.foot-brand .logotype{height:11px}
.viewer-brand .logotype{height:10px}
@media(max-width:640px){.nav .logotype{display:none}.logomark{height:26px}}


/* =============== Logo-Reveal (Intro-Overlay, s/w) =============== */
html.lr-lock{overflow:hidden}
#logoreveal{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:#070709; overflow:hidden; transition:opacity .3s ease;
}
#logoreveal.lr-out{opacity:0; pointer-events:none}
/* Weiss-Blitz: radialer Wipe vom Logo aus */
#logoreveal::before{
  content:""; position:absolute; inset:0; background:#FFFFFF;
  clip-path:circle(0% at 50% 46%);
}
#logoreveal.lr-flip::before{animation:lrWipe .5s cubic-bezier(0.4,0,0.2,1) both}
@keyframes lrWipe{to{clip-path:circle(142% at 50% 46%)}}
.lr-stage{
  position:relative; display:grid; justify-items:center;
  gap:clamp(.7rem,2.2vh,1.3rem); will-change:transform;
}
/* Der Falke ist ein Tempo-Motiv (lange Schleppe -> Kopf) — er wird nicht aus
   Teilen zusammengesetzt, sondern faehrt als EIN Stueck von der Schwanzspitze
   bis zum Schnabel ins Bild: Wisch-Reveal + Schaerfe-Einrasten, kein Aufbau-Puzzle. */
.lr-mark{position:relative; width:min(50vw,292px); aspect-ratio:1000/249; will-change:clip-path,transform,filter}
.lr-word{position:relative; width:min(70vw,410px); aspect-ratio:1400/90; will-change:clip-path,transform,filter}
.lr-p{width:100%; height:auto; display:block; transition:filter .3s ease}
/* Farb-Flip: weisse Teile werden Ink */
#logoreveal.lr-flip .lr-p{filter:brightness(0.12)}

.lr-mark{clip-path:inset(0 100% 0 0); animation:lrSweep .6s var(--ease) .08s both}
.lr-word{clip-path:inset(0 100% 0 0); animation:lrSweep .46s var(--ease) .42s both}
@keyframes lrSweep{
  0%{clip-path:inset(0 100% 0 0); transform:translateX(-3%) skewX(-9deg); filter:blur(10px)}
  60%{filter:blur(0)}
  100%{clip-path:inset(0 0% 0 0); transform:translateX(0) skewX(0); filter:blur(0)}
}


/* Tabs mobil: kein Umriss-Ei, saubere grosse Tap-Ziele */
@media(max-width:700px){
  .tabs{
    background:transparent; border:0; border-radius:0; padding:0;
    width:100%; gap:.45rem;
  }
  .tab{
    flex:1 1 calc(50% - .45rem); text-align:center;
    padding:.8rem .5rem; min-height:48px;
    background:var(--bg-2); border-radius:12px; font-size:.98rem;
  }
  .tab.is-on{background:var(--blue); color:#fff}
}

/* ============================================================
   WALLET — eigenes Produkt (Querverweis auf flowstatewallet.com)
   Helle Sektion, dunkle Produkt-Buehne: der Pass fuellt sich
   beim Scrollen mit Stempeln.
   ============================================================ */
.wl{position:relative; overflow:hidden}
.wl-in{display:grid; gap:clamp(2.4rem,5vw,4rem); align-items:center}
@media(min-width:1000px){.wl-in{grid-template-columns:1.02fr .98fr}}

.wl-copy .lede{margin-top:1.1rem}
.wl-rows{list-style:none; padding:0; margin:2.2rem 0 0; display:grid; gap:.9rem; max-width:46ch}
.wl-rows li{
  display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; row-gap:.15rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line);
}
.js .wl-rows li{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.js .wl-rows li.in{opacity:1; transform:none}
.wl-rows span{
  grid-row:span 2; font-family:var(--f-display); font-weight:800; font-size:.78rem;
  letter-spacing:.1em; color:var(--blue); background:var(--tint);
  border-radius:12px 4px 12px 4px; padding:.42rem .58rem; align-self:start;
  font-variant-numeric:tabular-nums;
}
.wl-rows b{font-family:var(--f-display); font-weight:700; font-size:1.04rem; line-height:1.2}
.wl-rows i{font-style:normal; color:var(--ink-soft); font-size:.95rem; line-height:1.5}

.wl-cta{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2rem}
.wl-dom{
  font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* --- Buehne ------------------------------------------------- */
.wl-stage{
  position:relative; isolation:isolate; border-radius:30px 10px 30px 10px;
  padding:clamp(6rem,10vw,7.4rem) clamp(1.6rem,4vw,2.8rem) clamp(1.6rem,4vw,2.8rem); overflow:hidden;
  background:linear-gradient(158deg,#173038 0%,#0F2027 58%,#0B181D 100%);
  box-shadow:0 40px 80px -46px rgba(7,94,88,.9), inset 0 1px 0 rgba(255,255,255,.07);
}
.wl-glow{
  position:absolute; z-index:-1; width:420px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(18,150,140,.42), transparent 68%);
  top:-140px; right:-120px; pointer-events:none;
}
.wl-stage::after{
  content:""; position:absolute; z-index:-1; width:260px; aspect-ratio:1; border-radius:50%;
  background:var(--accent); opacity:.14; filter:blur(8px);
  left:-90px; bottom:-110px; pointer-events:none;
}

.wl-pass{
  position:relative; max-width:420px; margin-inline:auto; border-radius:18px; overflow:hidden;
  background:linear-gradient(168deg,#FFFBF0,#FCF4DF); color:#2A1620;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .5s var(--ease);
}
.wl-pass.ready{box-shadow:0 26px 50px -22px rgba(0,0,0,.72), 0 0 0 2px rgba(252,244,223,.62), 0 0 44px -6px rgba(252,244,223,.5)}
.wl-pass.stamped{animation:wlPop .45s var(--ease)}
@keyframes wlPop{0%{transform:scale(1)}38%{transform:scale(1.022)}100%{transform:scale(1)}}

.wl-pass-head{display:flex; align-items:center; gap:.6rem; padding:.9rem 1.05rem .8rem}
.wl-pass-head img{width:28px; height:28px; border-radius:8px}
.wl-pass-head b{
  font-family:var(--f-display); font-size:.8rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#7E1233;
}
.wl-pass-head span{
  margin-left:auto; font-family:var(--f-display); font-size:.62rem;
  letter-spacing:.15em; text-transform:uppercase; color:#8B6B74;
}

.wl-strip{position:relative; width:100%; aspect-ratio:700/269; background:#FCF4DF}
.wl-strip>img{width:100%; height:100%; object-fit:cover}
.wl-checks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.wl-chk{opacity:0; transform-box:fill-box; transform-origin:50% 50%; transform:scale(.2) rotate(-16deg)}
.js .wl-chk{transition:opacity .16s linear, transform .42s cubic-bezier(.34,1.7,.5,1)}
.wl-chk.on{opacity:1; transform:none}
.wl-confetti{position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:0; transition:opacity .3s linear}
.wl-confetti.on{opacity:1}

.wl-pass-mid{display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.05rem 1.15rem}
.wl-pass-mid small{
  display:block; font-family:var(--f-display); font-size:.6rem; letter-spacing:.17em;
  text-transform:uppercase; color:#8B6B74; margin-bottom:.22rem;
}
.wl-pass-mid b{font-family:var(--f-display); font-weight:800; font-size:.98rem; color:#7E1233; font-variant-numeric:tabular-nums}
.wl-r{text-align:right}

.wl-toast{
  position:absolute; z-index:3; left:clamp(1.6rem,4vw,2.8rem); right:clamp(1.6rem,4vw,2.8rem);
  top:clamp(1.5rem,3vw,2rem); max-width:380px; margin-inline:auto;
  display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem;
  border-radius:14px; background:rgba(14,26,31,.94); border:1px solid rgba(255,255,255,.14);
  color:#EAF6F4; box-shadow:0 18px 34px -18px rgba(0,0,0,.9);
  transform:translateY(-96px); opacity:0;
  transition:transform .5s var(--ease), opacity .34s var(--ease);
  pointer-events:none;
}
.wl-toast.show{transform:none; opacity:1}
.wl-toast img{width:30px; height:30px; border-radius:9px; flex:none}
.wl-toast b{display:block; font-family:var(--f-display); font-weight:700; font-size:.82rem}
.wl-toast span{font-size:.76rem; color:#9FBDBA}

.wl-cap{
  margin-top:1.3rem; text-align:center; font-family:var(--f-display); font-weight:600;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,246,244,.52);
}

@media(max-width:640px){
  .wl-stage{border-radius:24px 8px 24px 8px}
  .wl-rows li{column-gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .wl-pass.stamped{animation:none}
  .wl-toast{display:none}
}

/* ============================================================
   FIX: Bewertungs-Slider mobil
   Karten wurden auf die Hoehe der laengsten gestreckt — kurze
   Bewertungen zeigten eine grosse Leerflaeche. Auf einer Karte
   pro Bild traegt jede Karte jetzt nur ihre eigene Hoehe.
   Pfeile am Rand werden deaktiviert statt still ins Leere zu klicken.
   ============================================================ */
@media(max-width:699px){
  .qtrack{align-items:start; transition:height .34s var(--ease)}
  .quote figcaption{margin-top:1.1rem}
}
.qbtn[disabled]{opacity:.34; cursor:default; pointer-events:none}
.qbtn[disabled]:hover{background:var(--white); border-color:var(--tint-2); color:var(--blue)}

/* Referenz fotostudio9: helles Studio-Papier, Signalorange als Akzent */
.pj-fotostudio9{background:#F4F2EF; color:var(--ink)}
.pj-fotostudio9 .pj-no{color:#D93400}
.pj-fotostudio9 .pj-desc{color:var(--ink-soft)}
.pj-fotostudio9 .tag{background:rgba(255,59,0,.10); color:#C43000}
.pj-fotostudio9 .pj-go{color:#C43000}

/* ============================================================
   MOBIL-NAVIGATION
   Unter 920px waren alle Menuepunkte ausgeblendet, es gab nur
   Logo und Rufnummer. Burger oeffnet eine dunkle Schublade mit
   allen Zielen inklusive der Wallet-Sektion.
   ============================================================ */
.navburger{
  margin-left:.2rem; width:46px; height:46px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:14px 5px 14px 5px; background:var(--white);
  cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.navburger span{display:block; width:20px}
.navburger i{
  display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .34s var(--snap), opacity .2s linear;
}
.navburger i + i{margin-top:5px}
.navburger:hover{border-color:var(--tint-2)}
.navburger[aria-expanded="true"]{background:var(--tint); border-color:var(--tint-2)}
.navburger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger[aria-expanded="true"] i:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:920px){ .navburger{display:none} }

.navdrawer{
  position:fixed; inset:68px 0 0 0; z-index:69;
  background:linear-gradient(168deg,#17323A 0%,#0F2027 62%,#0B181D 100%);
  color:#EAF6F4; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .38s var(--ease);
}
.navdrawer.open{opacity:1; transform:none}
.navdrawer-in{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1.6rem,6vw,2.6rem) var(--pad) 3rem;
  min-height:100%; display:flex; flex-direction:column; gap:2rem;
}
.nd-links{list-style:none; margin:0; padding:0; display:grid; gap:.2rem}
.nd-links li{opacity:0; transform:translateY(14px)}
.navdrawer.open .nd-links li{
  opacity:1; transform:none;
  transition:opacity .4s var(--ease) calc(var(--i) * 42ms), transform .5s var(--ease) calc(var(--i) * 42ms);
}
.nd-links a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem,1.1rem + 2.4vw,2.1rem);
  letter-spacing:-.02em; text-decoration:none; color:#fff;
  padding-block:.62rem; border-bottom:1px solid rgba(234,246,244,.12);
}
.nd-links a::after{
  content:""; width:.44em; height:.44em; flex:none; opacity:.5;
  border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nd-links a:hover::after,.nd-links a:focus-visible::after{transform:translateX(4px) rotate(45deg); opacity:1}
.nd-links a[aria-current="page"]{color:#8FE3DA}
.nd-foot{
  margin-top:auto; display:grid; gap:.9rem; justify-items:start;
  opacity:0; transform:translateY(14px);
}
.navdrawer.open .nd-foot{
  opacity:1; transform:none;
  transition:opacity .4s var(--ease) calc(var(--i) * 42ms), transform .5s var(--ease) calc(var(--i) * 42ms);
}
.nd-foot .btn{width:100%; max-width:340px}
.nd-tel{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; color:#BFE3DF;
}
.nd-tel svg{width:18px; height:18px; fill:#8FE3DA; flex:none}
.nd-tel:hover{color:#fff}
body.nav-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .navdrawer{transition:none; transform:none}
  .navdrawer .nd-links li,.navdrawer .nd-foot{opacity:1; transform:none; transition:none}
  .navburger i{transition:none}
}

/* Referenz-Viewer: Seiten, die das Einbetten verbieten
   (X-Frame-Options), bekommen Vorschau + Direktlink statt leerer Flaeche */
.viewer-extern{
  flex:1; min-height:0; overflow-y:auto; background:var(--bg-2);
  display:grid; place-items:center; padding:clamp(1.4rem,5vw,3rem) var(--pad);
}
.viewer-extern[hidden]{display:none !important}
.ve-in{max-width:760px; text-align:center; display:grid; gap:1.1rem; justify-items:center}
.ve-in h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
.ve-shot{
  display:block; margin-top:.6rem; border-radius:18px 6px 18px 6px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -34px rgba(27,39,51,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ve-shot:hover{transform:translateY(-4px); box-shadow:0 38px 70px -34px rgba(27,39,51,.6)}
.ve-shot img{display:block; width:100%; height:auto}