/* Effekte über dem bestehenden Layout: Liquid Glass, Einstieg, Licht, Tilt, Linien.
   Alles ist Zusatz: ohne diese Datei sieht die Seite aus wie vorher. */

:root{
  --glass-bg:rgba(255,255,255,.58);
  --glass-border:rgba(255,255,255,.75);
  --glass-edge:rgba(17,28,49,.08);
  --glass-shine:rgba(255,255,255,.9);
  --glass-shadow:0 10px 36px -12px rgba(13,25,48,.28);
  --glass-dark-bg:rgba(255,255,255,.09);
  --glass-dark-border:rgba(255,255,255,.26);
  --glass-dark-shine:rgba(255,255,255,.35);
  --fx-ease:cubic-bezier(.2,.75,.15,1);
}
:root[data-theme=dark]{
  --glass-bg:rgba(23,36,59,.58);
  --glass-border:rgba(255,255,255,.14);
  --glass-edge:rgba(0,0,0,.3);
  --glass-shine:rgba(255,255,255,.22);
  --glass-shadow:0 12px 40px -12px rgba(0,0,0,.6);
}

/* ---------- Liquid Glass: Grundmaterial ---------- */
.glass,
.nav,
.iconbutton,
.hero-photo-caption,
.marketing-stage,
.page-intro .btn-secondary,
.hero-home .btn-secondary,
.marketing-hero .btn-secondary{
  -webkit-backdrop-filter:blur(16px) saturate(1.8);
  backdrop-filter:blur(16px) saturate(1.8);
}

/* Navigation als schwebende Glas-Pille */
.nav{
  top:10px;
  width:min(1240px,calc(100% - 24px));
  margin:10px auto 0;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-shine),inset 0 -1px 0 var(--glass-edge),var(--glass-shadow);
  transition:background .3s,box-shadow .3s;
}
.nav .wrap{width:calc(100% - 44px)}
.nav-inner{min-height:60px;padding:8px 0}
.nav.is-scrolled{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.lg-refract .nav{
  -webkit-backdrop-filter:blur(16px) saturate(1.8);
  backdrop-filter:url(#lg-refract) blur(10px) saturate(1.9);
}
@media (max-width:820px){.nav{border-radius:24px}.nav .wrap{width:calc(100% - 28px)}}

/* Runder Glas-Schalter */
.iconbutton{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-shine),0 4px 14px -6px rgba(13,25,48,.25);
}

/* Glas-Buttons auf dunklen Flächen */
.hero-home .btn-secondary,
.page-intro .btn-secondary,
.marketing-hero .btn-secondary{
  background:var(--glass-dark-bg);
  border-color:var(--glass-dark-border);
  box-shadow:inset 0 1px 0 var(--glass-dark-shine);
}
.hero-home .btn-secondary:hover,
.page-intro .btn-secondary:hover,
.marketing-hero .btn-secondary:hover{background:rgba(255,255,255,.18);color:#fff}

/* Porträt: Glas-Beschriftung und gläsernes Etikett */
.hero-photo-caption{
  left:16px;right:16px;bottom:16px;
  padding:16px 20px;
  border-radius:14px;
  background:rgba(13,25,48,.34);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px -10px rgba(0,0,0,.5);
}
.visual-note{
  background:rgba(230,101,60,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);
  backdrop-filter:blur(10px) saturate(1.6);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 35px rgba(0,0,0,.35);
}

/* Marketing: "Mein Ansatz" als Glas auf Navy */
.marketing-stage{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),22px 28px 65px rgba(0,0,0,.35);
}
.marketing-stage .stage-label{color:#FF9877}
.stage-flow>span{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#FF9877;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:background .3s,transform .4s var(--fx-ease);
}
.stage-flow>span:hover{background:rgba(255,255,255,.13);transform:translateX(4px)}
.stage-flow strong{color:#fff}
.stage-flow small{color:#C9D4E3}

/* ---------- Einstieg ---------- */
.fx-words .w{display:inline-block;will-change:transform}
.fx-ready .fx-words .w{animation:fx-word .8s var(--fx-ease) both;animation-delay:calc(var(--i) * 55ms + 80ms)}
@keyframes fx-word{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.fx-ready .hero-home .hero-kicker,
.fx-ready .hero-home .lead,
.fx-ready .hero-home .actions,
.fx-ready .hero-home .hero-foot{animation:fx-fade .8s var(--fx-ease) both}
.fx-ready .hero-home .hero-kicker{animation-delay:0s}
.fx-ready .hero-home .lead{animation-delay:.45s}
.fx-ready .hero-home .actions{animation-delay:.6s}
.fx-ready .hero-home .hero-foot{animation-delay:.75s}
.fx-ready .hero-visual{animation:fx-portrait 1.1s var(--fx-ease) .15s both}
@keyframes fx-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fx-portrait{from{opacity:0;transform:translateY(40px) rotateX(10deg) rotateY(-16deg) scale(.94)}to{opacity:1;transform:none}}
.fx-ready .page-intro h1,.fx-ready .marketing-hero h1{animation:fx-fade .9s var(--fx-ease) both}
.fx-ready .marketing-stage{animation:fx-stage 1s var(--fx-ease) .2s backwards}
@keyframes fx-stage{from{opacity:0;transform:translateY(30px) rotate(6deg)}to{opacity:1;transform:rotate(3deg)}}

/* ---------- Licht folgt der Maus (dunkle Flächen) ---------- */
.fx-light{position:relative;isolation:isolate}
.fx-light::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(255,145,107,.16),rgba(255,145,107,.05) 40%,transparent 65%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s;
}
.fx-light.is-lit::after{opacity:1}
.fx-light>.wrap{position:relative;z-index:2}

/* ---------- 3D-Kacheln mit Glanzlicht ---------- */
.fx-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--fx-ease),box-shadow .4s}
.fx-tilt.is-tilting{transition:transform .08s linear,box-shadow .4s}
.fx-tilt::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 55%);
  opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
}
.fx-tilt.is-tilting::after{opacity:1}
.service-tile,.card{position:relative}

/* ---------- Magnetische Buttons ---------- */
.btn-primary.fx-magnet{transition:transform .35s var(--fx-ease),background .2s,box-shadow .2s}
.btn-primary.fx-magnet.is-pulling{transition:transform .1s linear,background .2s,box-shadow .2s}

/* ---------- Schritte: orange Linie zeichnet sich durch ---------- */
.process-step,.marketing-step{position:relative;border-top-color:var(--line)}
.process-step::before,.marketing-step::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--fx-ease);
  transition-delay:calc(var(--i,0) * 180ms);
}
.marketing-step::before{top:-3px;height:3px;left:-1px;right:-1px;border-radius:9px 9px 0 0}
.process-step.visible::before,.marketing-step.visible::before{transform:scaleX(1)}
html:not(.js) .process-step::before,html:not(.js) .marketing-step::before{transform:none}

/* ---------- Laufband ---------- */
.signal-inner{overflow:hidden}
.signal-track{display:flex;gap:20px;align-items:center;min-width:max-content;animation:fx-marquee 38s linear infinite}
.signal-track .signal-flow{min-width:max-content}
.signal:hover .signal-track{animation-play-state:paused}
@keyframes fx-marquee{to{transform:translateX(calc(-50% - 10px))}}
@media (max-width:560px){.signal-track{gap:12px}@keyframes fx-marquee{to{transform:translateX(calc(-50% - 6px))}}}

/* ---------- Ruhige Fassung ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-ready .fx-words .w,.fx-ready .hero-home *,.fx-ready .hero-visual,.fx-ready .marketing-stage,.fx-ready .page-intro h1,.fx-ready .marketing-hero h1{animation:none!important}
  .signal-track{animation:none}
  .process-step::before,.marketing-step::before{transform:none;transition:none}
  .fx-light::after,.fx-tilt::after{display:none}
}
@media (hover:none),(pointer:coarse){.fx-light::after,.fx-tilt::after{display:none}}

/* Browser ohne Glas-Unterstützung: klare, halbtransparente Flächen */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:color-mix(in srgb,var(--panel) 94%,transparent)}
  .hero-photo-caption{background:rgba(13,25,48,.72)}
  .marketing-stage{background:rgba(21,37,64,.92)}
}
.signal-label{position:relative;z-index:2;flex:none;box-shadow:8px 0 14px -4px #15223B}
:root[data-theme=dark] .signal-label{box-shadow:8px 0 14px -4px #0B1426}