/* ==========================================================================
   Förderkonzepte FX-Layer — Scroll-Storytelling, Tilt, Marquee, Orbs
   Wird zusätzlich zu den Seiten-Styles geladen; greift über eigene Klassen
   und von fx.js injizierte Elemente. Alles respektiert reduced motion.
   ========================================================================== */

/* --- Wort-für-Wort-Reveal in Überschriften -------------------------------- */
.fx-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.55em) rotate(2deg);
transition:opacity .7s cubic-bezier(.16,.84,.44,1),filter .7s cubic-bezier(.16,.84,.44,1),
transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--fxd,0s);will-change:opacity,transform,filter}
.fx-on .fx-w{opacity:1;filter:blur(0);transform:none}
/* Wörter innerhalb von Gradient-Text brauchen den Verlauf selbst,
   weil background-clip:text nicht auf inline-block-Kinder durchschlägt */
.verlauf-text .fx-w{background:var(--verlauf);background-size:200% auto;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:verlaufWandern 9s ease infinite}

/* --- Gradient-Unterstrich, der sich selbst zeichnet ----------------------- */
.fx-strich{position:relative;white-space:nowrap}
.fx-strich svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.fx-strich path{fill:none;stroke:url(#fxGrad);stroke-width:5;stroke-linecap:round;
stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
transition:stroke-dashoffset 1.1s cubic-bezier(.6,.05,.25,1) .35s}
.fx-on .fx-strich path{stroke-dashoffset:0}

/* --- Aurora: fixer Farbnebel hinter der GANZEN Seite ----------------------- */
.fx-aurora-fix{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fx-aurora{position:absolute;inset:0;width:100%;height:100%;display:block;
filter:blur(24px) saturate(1.15);transform:scale(1.12)}
/* Schleier ueber dem Nebel: ueberall dasselbe zarte Rosé */
.fx-aurora-schleier{position:absolute;inset:0;background:rgba(253,241,247,.64)}
@media (min-width:1024px){
  .fx-aurora{filter:blur(28px) saturate(1)}
}
/* CSS-Fallback ohne WebGL: wandernder Verlauf */
.fx-aurora-cssfallback{background:linear-gradient(120deg,#9ec9f0,#b79ed1,#eba7c6,#9ec9f0);
background-size:300% 300%;animation:verlaufWandern 14s ease infinite}

/* Sektionen lassen den Nebel durchschimmern — mobil deutlich, Desktop dezent */
@media (max-width:1023px){
  .grund{background:rgba(255,255,255,.72)}
  .flaeche{background:rgba(244,247,250,.68)}
  .band-ab{background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(244,247,250,.68))}
  .band-auf{background:linear-gradient(to bottom,rgba(244,247,250,.68),rgba(255,255,255,.72))}
  footer.flaeche{background:rgba(244,247,250,.86)}
  .fx-marquee{background:rgba(255,255,255,.82)}
}
@media (min-width:1024px){
  .grund{background:rgba(255,255,255,.72)}
  .flaeche{background:rgba(244,247,250,.68)}
  .band-ab{background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(244,247,250,.68))}
  .band-auf{background:linear-gradient(to bottom,rgba(244,247,250,.68),rgba(255,255,255,.72))}
  footer.flaeche{background:rgba(244,247,250,.88)}
}
@media (prefers-reduced-motion:reduce){
  .fx-aurora{filter:blur(24px)}
  .fx-aurora-cssfallback{animation:none}
}

/* --- Weisses Glas hinter dem Hero-Text ------------------------------------- */
main > section:first-of-type .h-intro{position:relative;z-index:1;
padding:1.9rem;margin:-1.9rem;border-radius:1.75rem;
background:rgba(255,255,255,.52);
backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
border:1px solid rgba(255,255,255,.7);
box-shadow:0 24px 60px -30px rgba(12,96,168,.3)}
@media (max-width:640px){
  main > section:first-of-type .h-intro{padding:1.25rem;margin:-.5rem;border-radius:1.4rem}
}

/* --- Schwebende Farb-Orbs hinter dem Hero --------------------------------- */
.fx-orbs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.fx-orb-1{width:34rem;height:34rem;right:-8rem;top:-10rem;
background:radial-gradient(circle,rgba(12,96,168,.35),transparent 65%);
animation:fxOrbA 16s ease-in-out infinite alternate}
.fx-orb-2{width:26rem;height:26rem;left:-9rem;top:35%;
background:radial-gradient(circle,rgba(216,48,120,.24),transparent 65%);
animation:fxOrbB 20s ease-in-out infinite alternate}
.fx-orb-3{width:20rem;height:20rem;right:22%;bottom:-8rem;
background:radial-gradient(circle,rgba(138,74,150,.26),transparent 65%);
animation:fxOrbA 24s ease-in-out infinite alternate-reverse}
@keyframes fxOrbA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4rem,3rem,0) scale(1.15)}}
@keyframes fxOrbB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3rem,-4rem,0) scale(1.12)}}

/* Feines Grain darüber, damit die Verläufe nicht "billig" wirken */
.fx-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

/* --- Marquee-Vertrauensband ----------------------------------------------- */
.fx-marquee{overflow:hidden;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
background:var(--papier);padding:.9rem 0;position:relative;z-index:1}
.fx-marquee-spur{display:flex;width:max-content;animation:fxLauf 32s linear infinite;will-change:transform}
.fx-marquee:hover .fx-marquee-spur{animation-play-state:paused}
.fx-marquee-teil{display:flex;align-items:center;gap:.6rem;padding:0 1.6rem;white-space:nowrap;
font-size:.85rem;font-weight:600;letter-spacing:.06em;color:var(--grau)}
.fx-marquee-teil b{color:var(--tinte)}
.fx-marquee-punkt{width:.45rem;height:.45rem;border-radius:50%;background:var(--verlauf);flex-shrink:0}
@keyframes fxLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- 3D-Tilt + Glanzlicht auf Karten -------------------------------------- */
.fx-tilt{transform-style:preserve-3d;
transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(var(--fx-ty,0))}
.fx-tilt.karte:hover,.fx-tilt.weg:hover,.fx-tilt.person:hover{--fx-ty:-6px}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
background:radial-gradient(420px circle at var(--fx-gx,50%) var(--fx-gy,50%),rgba(255,255,255,.55),transparent 45%);
transition:opacity .35s;z-index:2;mix-blend-mode:soft-light}
.fx-tilt:hover .fx-glare{opacity:1}

/* --- Cursor-Aura (nur Desktop, nur feine Zeiger) --------------------------- */
.fx-aura{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s;
background:radial-gradient(circle,rgba(12,96,168,.07),rgba(138,74,150,.04) 40%,transparent 70%);
will-change:transform}
body:hover .fx-aura{opacity:1}
@media (pointer:coarse){.fx-aura{display:none}}

/* --- Bilder, die sich beim Scrollen enthüllen ------------------------------ */
.fx-img{clip-path:inset(12% 12% 12% 12% round 22px);transform:scale(1.12);
transition:clip-path 1.1s cubic-bezier(.6,.05,.25,1),transform 1.4s cubic-bezier(.16,.84,.44,1)}
.fx-img.fx-on{clip-path:inset(0 0 0 0 round 0);transform:scale(1)}

/* --- Riesige Outline-Laufschrift im Hintergrund --------------------------- */
.fx-riese{overflow:hidden;pointer-events:none;user-select:none;line-height:1;padding:1rem 0}
.fx-riese span{display:inline-block;white-space:nowrap;font-weight:700;
font-size:clamp(4.5rem,13vw,11rem);letter-spacing:-.02em;color:transparent;
-webkit-text-stroke:1.5px rgba(12,96,168,.16);will-change:transform}

/* --- Video-Telefonkarten --------------------------------------------------- */
.fx-phone{position:relative;border-radius:2rem;overflow:hidden;background:#0b1622;
border:1px solid var(--linie);box-shadow:0 30px 70px -30px rgba(12,96,168,.45);aspect-ratio:9/16}
.fx-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;
box-shadow:inset 0 0 0 6px rgba(255,255,255,.06),inset 0 0 40px rgba(0,0,0,.25);pointer-events:none}
.fx-phone-etikett{position:absolute;left:.9rem;bottom:.9rem;z-index:2;max-width:calc(100% - 1.8rem);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:999px;
padding:.45rem 1rem;font-size:.8rem;font-weight:600;color:var(--tinte)}
@media (max-width:480px){.fx-phone-etikett{font-size:.66rem;padding:.35rem .7rem;left:.55rem;bottom:.55rem;max-width:calc(100% - 1.1rem)}}
.fx-ton{position:absolute;right:.9rem;top:.9rem;z-index:3;width:2.4rem;height:2.4rem;border-radius:50%;
border:none;cursor:pointer;background:rgba(255,255,255,.92);color:var(--tinte);
display:flex;align-items:center;justify-content:center;font-size:1rem;
box-shadow:0 6px 18px -6px rgba(0,0,0,.4);transition:transform .25s}
.fx-ton:hover{transform:scale(1.1)}

/* --- Hero-Video: grosses Hochkant-Video als Buehne ------------------------- */
.fx-phone-hero{position:relative;max-width:min(80vw,330px);margin:0 auto;
transform:rotate(1.8deg);transition:transform .5s cubic-bezier(.16,.84,.44,1);
box-shadow:0 46px 100px -32px rgba(12,96,168,.6)}
.fx-phone-hero:hover{transform:rotate(0deg) scale(1.015)}
@media (min-width:1024px){.fx-phone-hero{max-width:370px}}
.fx-phone-hero::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
background:radial-gradient(circle,rgba(138,74,150,.22),rgba(12,96,168,.12) 50%,transparent 72%);
filter:blur(30px);pointer-events:none}
@media (max-width:1023px){.fx-phone-hero{margin-top:1.5rem}}

/* --- Schwebender Chat-CTA (STEG-Stil) -------------------------------------- */
.fx-bubble{position:fixed;right:1.25rem;bottom:1.25rem;z-index:55;display:flex;align-items:center;gap:.65rem;
padding:.8rem 1.35rem;border-radius:999px;background:var(--verlauf);background-size:200% auto;
color:#fff;font-weight:600;font-size:.92rem;text-decoration:none;
box-shadow:0 18px 40px -14px rgba(216,48,120,.55);
animation:verlaufWandern 8s ease infinite;transform:translateY(120px);opacity:0;
transition:transform .6s cubic-bezier(.16,.84,.44,1),opacity .6s}
.fx-bubble.fx-da{transform:none;opacity:1}
.fx-bubble:hover{box-shadow:0 22px 48px -14px rgba(216,48,120,.7)}
.fx-bubble-puls{position:relative;width:.65rem;height:.65rem;flex-shrink:0}
.fx-bubble-puls::before,.fx-bubble-puls::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff}
.fx-bubble-puls::after{animation:fxPuls 2s ease-out infinite}
@keyframes fxPuls{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
@media (max-width:1023px){.fx-bubble{bottom:4.4rem;right:1rem;padding:.7rem 1.1rem;font-size:.85rem}}

/* --- Sanfter Hero-Einstieg für Badges -------------------------------------- */
.fx-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.05rem;border-radius:999px;
background:#fff;border:1px solid var(--linie);box-shadow:0 8px 24px -12px rgba(12,96,168,.25);
font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--grau)}
.fx-badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--verlauf);
background-size:200% auto;animation:verlaufWandern 6s ease infinite}

/* ==========================================================================
   ERKLÄR-DIAGRAMME — SVGs, die sich beim Scrollen selbst zeichnen (STEG-Stil)
   ========================================================================== */
.fx-diagramm svg{width:100%;height:auto;display:block;overflow:visible}
/* Pfade zeichnen sich (pathLength=1 macht die Länge einheitenlos) */
.fx-zeichnen{fill:none;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset var(--dauer,1.8s) cubic-bezier(.55,.06,.28,.99) var(--warte,0s)}
.fx-diagramm.fx-on .fx-zeichnen{stroke-dashoffset:0}
/* Knoten ploppen nacheinander auf */
.fx-punkt{opacity:0;transform:scale(.2);transform-origin:center;transform-box:fill-box;
transition:opacity .5s var(--warte,0s),transform .6s cubic-bezier(.34,1.56,.64,1) var(--warte,0s)}
.fx-diagramm.fx-on .fx-punkt{opacity:1;transform:none}
/* Beschriftungen blenden weich ein */
.fx-beschriftung{opacity:0;transition:opacity .7s ease var(--warte,0s)}
.fx-diagramm.fx-on .fx-beschriftung{opacity:1}
/* Pulsring am Lotsen-Punkt */
.fx-puls-ring{transform-origin:center;transform-box:fill-box;opacity:0}
.fx-diagramm.fx-on .fx-puls-ring{animation:fxPunktPuls 2.4s ease-out var(--warte,0s) infinite}
@keyframes fxPunktPuls{0%{transform:scale(.6);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
/* Langsam drehende Deko-Ringe */
.fx-rotieren{transform-origin:center;transform-box:fill-box;animation:fxDrehen 26s linear infinite}
@keyframes fxDrehen{to{transform:rotate(360deg)}}
/* SVG-Beschriftung */
.fx-text-fein{fill:var(--tinte);font-size:22px;font-weight:600;font-family:'Instrument Sans','Inter',system-ui,sans-serif;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:6px;stroke-linejoin:round}
.fx-text-stark{fill:var(--tinte);font-weight:700}

/* --- Donut-Ringe: Förderquoten als sich füllende Kreise -------------------- */
.fx-donut{position:relative;width:9.5rem;height:9.5rem;max-width:100%}
.fx-donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.fx-donut-spur{fill:none;stroke:var(--linie);stroke-width:10}
.fx-donut-wert{fill:none;stroke:url(#fxGrad);stroke-width:10;stroke-linecap:round;
stroke-dasharray:0 100;transition:stroke-dasharray 1.7s cubic-bezier(.6,.05,.25,1) .35s}
.fx-diagramm.fx-on .fx-donut-wert{stroke-dasharray:var(--wert) 100}
.fx-donut-deko{fill:none;stroke:rgba(12,96,168,.28);stroke-width:1.5;stroke-dasharray:3 8;
transform-origin:center;transform-box:fill-box;animation:fxDrehen 22s linear infinite}
.fx-donut-zahl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:1.75rem;background:var(--verlauf);background-size:200% auto;
-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Ablaufplan: vertikale Prozess-Zeitleiste mit Dauer-Puls --------------- */
.fx-ablauf{position:relative;max-width:44rem}
.fx-ablauf ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.6rem}
.fx-schritt{position:relative;padding-left:4.8rem;min-height:3.4rem}
.fx-ablauf-spur{position:absolute;left:1.5rem;top:.6rem;bottom:.6rem;width:3px;
border-radius:99px;background:var(--linie)}
.fx-ablauf-fuellung{position:absolute;inset:0;border-radius:inherit;background:var(--verlauf);
transform:scaleY(0);transform-origin:top;transition:transform 1.7s cubic-bezier(.6,.05,.25,1) .25s}
.fx-diagramm.fx-on .fx-ablauf-fuellung{transform:scaleY(1)}
/* Puls-Punkt wandert die Linie entlang — dauerhaft */
.fx-ablauf-puls{position:absolute;left:50%;top:0;width:13px;height:13px;margin-left:-6.5px;
border-radius:50%;background:#fff;border:3px solid var(--magenta);
box-shadow:0 0 14px rgba(216,48,120,.85);opacity:0}
.fx-diagramm.fx-on .fx-ablauf-puls{animation:fxAblaufWandern 5s cubic-bezier(.45,.05,.55,.95) .8s infinite}
@keyframes fxAblaufWandern{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 13px);opacity:0}}
.fx-schritt-nr{position:absolute;left:0;top:0;width:3.1rem;height:3.1rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;color:#fff;
background:var(--verlauf);background-size:200% auto;animation:verlaufWandern 8s ease infinite;
box-shadow:0 10px 24px -8px rgba(12,96,168,.5);
opacity:0;transform:scale(.4);
transition:opacity .5s var(--warte,0s),transform .6s cubic-bezier(.34,1.56,.64,1) var(--warte,0s)}
.fx-diagramm.fx-on .fx-schritt-nr{opacity:1;transform:none}
.fx-schritt-nr::after{content:"";position:absolute;inset:-3px;border-radius:50%;
border:2px solid rgba(216,48,120,.55);opacity:0}
.fx-diagramm.fx-on .fx-schritt-nr::after{animation:fxRingPuls 2.8s ease-out var(--warte,0s) infinite}
@keyframes fxRingPuls{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .fx-ablauf-fuellung{transform:scaleY(1);transition:none}
  .fx-ablauf-puls,.fx-schritt-nr::after{animation:none!important;opacity:0}
  .fx-schritt-nr{opacity:1;transform:none;transition:none;animation:none}
}

/* Mobil: vertikale Diagramm-Variante (oben nach unten), Desktop: horizontal */
.fx-nur-mobil,.fx-diagramm .fx-nur-mobil{display:none}
@media (max-width:767px){
  .fx-diagramm .fx-nur-desktop{display:none}
  .fx-diagramm .fx-nur-mobil{display:block;max-width:420px;margin:0 auto}
}

@media (prefers-reduced-motion:reduce){
  .fx-zeichnen{stroke-dashoffset:0;transition:none}
  .fx-punkt,.fx-beschriftung{opacity:1;transform:none;transition:none}
  .fx-rotieren,.fx-donut-deko{animation:none}
  .fx-puls-ring{animation:none;opacity:0}
  .fx-donut-wert{stroke-dasharray:var(--wert) 100;transition:none}
  .fx-wisch{animation:none}
}

/* ==========================================================================
   KINO-BÄNDER — full-bleed Bildbänder mit Parallax und Brand-Wash
   ========================================================================== */
.fx-band{position:relative;min-height:clamp(420px,56vh,620px);display:flex;align-items:center;
overflow:hidden;isolation:isolate;color:#fff}
.fx-band-bild{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;
background-position:center;will-change:transform}
.fx-band::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(105deg,rgba(6,26,46,.93) 0%,rgba(8,50,90,.78) 42%,rgba(12,96,168,.42) 74%,rgba(216,48,120,.30) 100%)}
.fx-band-inhalt{position:relative;width:100%;max-width:80rem;margin:0 auto;padding:5.5rem 1.5rem}
.fx-band-kicker{font-size:.72rem;letter-spacing:.26em;font-weight:700;color:rgba(255,255,255,.72)}
.fx-band h2{color:#fff;font-weight:600;line-height:1.08;
font-size:clamp(2rem,5vw,3.6rem);margin-top:1.1rem;max-width:52rem}
.fx-band h2 em{font-style:normal;background:linear-gradient(100deg,#7cc0ff,#f39bc6);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* Wort-Spans im em brauchen den Verlauf selbst (background-clip erreicht
   keine inline-block-Kinder) */
.fx-band h2 em .fx-w{background:linear-gradient(100deg,#7cc0ff,#f39bc6);
-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-band p{margin-top:1.4rem;max-width:36rem;color:rgba(255,255,255,.82);
font-size:1.06rem;line-height:1.7}
.fx-band .fx-band-cta{margin-top:2.2rem;display:inline-flex}
/* Gradient-Wörter im Band brauchen die helle Variante */
.fx-band .verlauf-text .fx-w,.fx-band .verlauf-text{background:linear-gradient(100deg,#7cc0ff,#f39bc6);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* --- Stadt-Bühne: heller Karten-Look mit freigestellter Skyline ------------
   (Referenz: Regionen-Sektion leipzig-makler — Name gross, Modell unten) */
.fx-ort-buehne{position:relative;border-radius:1.75rem;overflow:hidden;
background:linear-gradient(to bottom,#fdfdfc 0%,#f4f2ee 100%);
border:1px solid var(--linie);min-height:clamp(420px,52vh,560px);
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:3.5rem 1.5rem 0;isolation:isolate}
.fx-ort-buehne-kicker{font-size:.72rem;letter-spacing:.26em;font-weight:700;color:var(--grau)}
.fx-ort-buehne-name{margin-top:.6rem;font-weight:600;letter-spacing:-.03em;
line-height:1;font-size:clamp(2.8rem,8vw,6rem);color:var(--tinte);position:relative;z-index:2}
.fx-ort-buehne-cta{margin-top:1.4rem;position:relative;z-index:2}
.fx-ort-buehne-bild{position:absolute;left:0;right:0;bottom:-2px;z-index:1;pointer-events:none}
.fx-ort-buehne-bild img{width:100%;height:clamp(220px,34vh,340px);object-fit:cover;object-position:center bottom;display:block;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 26%)}
@media (max-width:640px){
  .fx-ort-buehne{min-height:380px;padding-top:2.6rem;border-radius:1.4rem}
  .fx-ort-buehne-bild img{height:200px}
}

/* --- Helle Band-Variante: Stadtbild unter Hellblau, Übergang ins Weiß ------ */
.fx-band-hell{color:var(--tinte)}
.fx-band-hell::after{background:linear-gradient(105deg,
 rgba(255,255,255,.96) 0%,rgba(238,246,252,.88) 30%,
 rgba(213,232,247,.6) 58%,rgba(224,238,250,.34) 100%)}
.fx-band-hell::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(to bottom,var(--papier) 0%,transparent 16%,transparent 84%,var(--papier) 100%)}
.fx-band-hell .fx-band-inhalt{position:relative;z-index:1}
.fx-band-hell h2{color:var(--tinte)}
.fx-band-hell h2 em,.fx-band-hell h2 em .fx-w,
.fx-band-hell .verlauf-text,.fx-band-hell .verlauf-text .fx-w{
background:var(--verlauf);background-size:200% auto;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:verlaufWandern 6s ease infinite}
.fx-band-hell p{color:var(--grau)}
.fx-band-hell .fx-band-kicker{color:var(--blau)}
.fx-band-hell .fx-band-zahl{-webkit-text-stroke:1.5px rgba(12,96,168,.25);z-index:1}
@media (max-width:640px){
  .fx-band-hell::after{background:linear-gradient(160deg,
   rgba(255,255,255,.95) 0%,rgba(238,246,252,.86) 34%,
   rgba(215,233,248,.55) 68%,rgba(226,239,250,.38) 100%)}
}

/* grosse Kontur-Zahl rechts im Band */
.fx-band-zahl{position:absolute;right:2rem;bottom:1.2rem;font-weight:700;line-height:1;
font-size:clamp(5rem,14vw,11rem);color:transparent;
-webkit-text-stroke:1.5px rgba(255,255,255,.28);pointer-events:none;user-select:none}
@media (max-width:640px){
  .fx-band{min-height:400px}
  .fx-band-inhalt{padding:4rem 1.5rem}
  .fx-band-zahl{font-size:4.6rem;right:1rem;bottom:.8rem;-webkit-text-stroke-width:1px}
}

/* --- Hintergrund-Scrolling: Sektionsbilder laufen beim Scrollen mit -------- */
.bg-bild::before{background-position:center calc(50% + var(--bgp,0px))!important;
transition:none;will-change:background-position}

/* --- Sektions-Hintergründe: echte Bilder statt weißer Wände ---------------- */
.bg-licht::before{background-image:url('band-buero.jpg')!important;opacity:.5!important}
.bg-panele::before{background-image:url('band-team.jpg')!important;opacity:.44!important}
.bg-werkstatt::before{opacity:.42!important}
.bg-schreibtisch::before{background-image:url('band-architektur.jpg')!important;opacity:.46!important}
.bg-bild::after{background:linear-gradient(to bottom,var(--papier) 0%,rgba(255,255,255,.52) 16%,rgba(255,255,255,.52) 84%,var(--papier) 100%)!important}
.bg-bild-flaeche::after{background:linear-gradient(to bottom,var(--flaeche) 0%,rgba(244,247,250,.52) 16%,rgba(244,247,250,.52) 84%,var(--flaeche) 100%)!important}

/* ==========================================================================
   MOBILE-PREMIUM — Tab-Bar, Karussell, Touch-Feedback, Safe-Area
   ========================================================================== */

/* --- Schwebende Icon-Tab-Bar ---------------------------------------------- */
.fx-tabbar{position:fixed;left:.6rem;right:.6rem;z-index:50;
bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
display:flex;justify-content:space-around;align-items:stretch;
background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid var(--linie);border-radius:1.4rem;
box-shadow:0 18px 44px -18px rgba(12,96,168,.35);
padding:.45rem .3rem;
animation:fxTabAuf .7s cubic-bezier(.16,.84,.44,1) .2s both}
@keyframes fxTabAuf{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.fx-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:.18rem;
flex:1;padding:.35rem .2rem .3rem;border-radius:1rem;text-decoration:none;
color:var(--grau);-webkit-tap-highlight-color:transparent;transition:color .25s}
.fx-tab svg{width:1.35rem;height:1.35rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fx-tab span{font-size:.6rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.fx-tab:active svg{transform:scale(.82)}
.fx-tab-aktiv{color:var(--blau)}
.fx-tab-aktiv svg{transform:translateY(-1px)}
.fx-tab-aktiv::after{content:"";position:absolute;top:.1rem;right:22%;width:.32rem;height:.32rem;
border-radius:50%;background:var(--verlauf)}

/* Platz für die Tab-Bar (überschreibt das alte padding-bottom der Seiten) */
@media (max-width:1023px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  .fx-bubble{bottom:calc(4.9rem + env(safe-area-inset-bottom,0px))}
}
@media (min-width:1024px){.fx-tabbar{display:none}}

/* --- Kopfzeile blendet beim Runterscrollen aus (nur Mobile) ---------------- */
@media (max-width:1023px){
  header{transition:transform .45s cubic-bezier(.16,.84,.44,1)}
  header.fx-versteckt{transform:translateY(-130%)}
}

/* --- Video-Karussell mit Snap statt Mini-Grid ------------------------------ */
@media (max-width:767px){
  .fx-filme{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:1rem;margin:0 -1.5rem;padding:0 1.5rem .8rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fx-filme::-webkit-scrollbar{display:none}
  .fx-filme .fx-phone{flex:0 0 68vw;max-width:300px;margin-top:0!important;
  scroll-snap-align:center}
}

/* --- Touch-Feedback statt Hover auf Geräten ohne Maus ---------------------- */
@media (hover:none){
  .btn-verlauf:active,.btn-voll:active,.btn-rand:active{transform:scale(.96);transition:transform .12s}
  .karte:active,.weg:active{transform:scale(.985);transition:transform .15s}
  .fx-bubble:active{transform:scale(.94)}
}

/* --- Lange Komposita sauber trennen statt hart umbrechen -------------------
   Die Seiten-Styles setzen mobil overflow-wrap:anywhere auf h1-h3 — das
   erzeugt Brüche wie "Qualifizierungschancengeset|z". Echte Silbentrennung
   (lang="de") bricht stattdessen mit Trennstrich an sinnvollen Stellen. */
@media (max-width:1023px){
  h1,h2,h3{overflow-wrap:break-word!important;word-break:normal!important;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 6 4}
}

/* --- Farbverläufe: überall in sichtbarer Bewegung --------------------------- */
.fx-band h2 em,.fx-band h2 em .fx-w,
.fx-band .verlauf-text,.fx-band .verlauf-text .fx-w{
background-size:200% auto;animation:verlaufWandern 6s ease infinite}
.fx-donut-zahl{animation:verlaufWandern 6s ease infinite}
/* Mobil: schnellere Zyklen, damit die Bewegung sofort auffällt */
@media (max-width:767px){
  .verlauf-text,.verlauf-text .fx-w{animation-duration:3.5s}
  .fx-band h2 em,.fx-band h2 em .fx-w{animation-duration:3.5s}
  .btn-verlauf{animation-duration:3.5s}
  .grosszahl,.fx-donut-zahl{animation-duration:4s}
  .fx-schritt-nr,.person-kreis{animation-duration:4.5s}
  .fx-bubble{animation-duration:4.5s}
}
@media (prefers-reduced-motion:reduce){
  .fx-band h2 em,.fx-band h2 em .fx-w,.fx-band .verlauf-text,
  .fx-band .verlauf-text .fx-w,.fx-donut-zahl{animation:none}
}

/* --- Mobile Feinschliff: Typo, Zahlen, Riese, Marquee ---------------------- */
@media (max-width:640px){
  .grosszahl{font-size:2.3rem}
  .fx-riese span{font-size:clamp(3rem,16vw,4.5rem);-webkit-text-stroke-width:1px}
  .fx-marquee-teil{font-size:.74rem;padding:0 1.1rem}
  .fx-orb{filter:blur(50px)}
  .fx-strich svg{bottom:-.16em}
}

/* --- Reduced Motion: alles aus --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fx-w{opacity:1;filter:none;transform:none;transition:none}
  .fx-strich path{stroke-dashoffset:0;transition:none}
  .fx-orb,.fx-marquee-spur,.fx-bubble,.fx-badge::before{animation:none!important}
  .fx-img{clip-path:none;transform:none;transition:none}
  .fx-tilt{transform:none!important}
  .fx-aura{display:none}
  .fx-bubble{transform:none;opacity:1}
  .fx-riese span{transform:none!important}
  .fx-tabbar{animation:none}
  header.fx-versteckt{transform:none}
}

/* ==========================================================================
   ÜBERGANGS-FIX: Jeder Sektionswechsel läuft durch einen weichen Weiß-Kern
   ========================================================================== */
.band-ab,.band-auf{height:5.5rem!important;
background:linear-gradient(to bottom,transparent 0%,var(--papier) 42%,var(--papier) 58%,transparent 100%)!important}
/* Dunkle Kino-Bänder faden oben und unten ins Weiß */
.fx-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(to bottom,var(--papier) 0%,transparent 16%,transparent 84%,var(--papier) 100%)}
.fx-band .fx-band-inhalt{position:relative;z-index:1}
.fx-band .fx-band-zahl{z-index:1}
/* Bild-Sektionen: weiße Enden verstärken */
.bg-bild::after{background:linear-gradient(to bottom,var(--papier) 0%,rgba(255,255,255,.52) 22%,rgba(255,255,255,.52) 78%,var(--papier) 100%)!important}
.bg-bild-flaeche::after{background:linear-gradient(to bottom,var(--papier) 0%,rgba(244,247,250,.52) 22%,rgba(244,247,250,.52) 78%,var(--papier) 100%)!important}

/* Feinschliff: Sektionen faden an den Raendern selbst zu OPAKEM Weiss,
   die Aurora schimmert nur in der Sektionsmitte — alle Kanten sind weiss. */
.grund{background:linear-gradient(to bottom,var(--papier) 0%,rgba(255,255,255,.7) 16%,rgba(255,255,255,.7) 84%,var(--papier) 100%)!important}
.flaeche{background:linear-gradient(to bottom,var(--papier) 0%,rgba(244,247,250,.66) 16%,rgba(244,247,250,.66) 84%,var(--papier) 100%)!important}
footer.flaeche{background:linear-gradient(to bottom,var(--papier) 0%,rgba(244,247,250,.9) 20%,rgba(244,247,250,.95) 100%)!important}
.band-ab,.band-auf{height:2.5rem!important;background:var(--papier)!important}
/* Hero (transparent) laeuft unten ins Weiss aus */
main > section:first-of-type{position:relative}
main > section:first-of-type::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5rem;
pointer-events:none;background:linear-gradient(to bottom,transparent,var(--papier))}

/* Mobil: Modell-Skylines komplett zeigen statt seitlich beschneiden */
@media (max-width:640px){
  .fx-ort-buehne-bild img{object-fit:contain;height:190px}
}

/* --- Stadtbild im Geo-Hero: gross, weich ins Weiss auslaufend -------------- */
main > section:first-of-type{position:relative;isolation:isolate}
.fx-hero-stadt{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-hero-stadt img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.55;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 55%,transparent 96%);
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 55%,transparent 96%)}
@media (max-width:640px){
  .fx-hero-stadt img{opacity:.45;object-position:center 22%}
}