/* ==========================================================================
   Haidhausen Studios, Stylesheet.
   Nachtblau über Haidhausen: dunkle Bühne, Aquarell-Lichter aus dem Logo,
   jede Kunden-Arbeit in ihrer eigenen Farbe.
   ========================================================================== */

@font-face{ font-family:'Unbounded'; src:url('../fonts/unbounded.woff2') format('woff2'); font-weight:200 900; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face{ font-family:'Instrument Serif'; src:url('../fonts/instrument-serif-italic.woff2') format('woff2'); font-style:italic; font-weight:400; font-display:swap; }

:root{
  --bg:#07061A;
  --bg-2:#0D0B24;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#F3F1FF;
  --muted:#A9A5C6;
  --dim:#6E6A8F;
  --indigo:#230871;
  --violet:#5B4BFF;
  --peri:#8E9BFF;
  --lilac:#CDBFFF;
  --ice:#9FE9FF;
  --ok:#5BE3A6;
  --lumea:#C9A98C;
  --bauwerk:#F25C05;
  --aurel:#C9A24B;
  --voltwerk:#C8FF00;
  --display:'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --body:'Manrope', ui-sans-serif, system-ui, sans-serif;
  --serif:'Instrument Serif', ui-serif, Georgia, serif;
  --maxw:1320px;
  --pad:clamp(20px,5vw,64px);
  --r:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
[id]{ scroll-margin-top:90px; }
html.is-leaving body{ opacity:0; transition:opacity .14s ease; }
html,body{ overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--violet); color:#fff; }
:focus-visible{ outline:2px solid var(--peri); outline-offset:3px; border-radius:6px; }

/* Körnung über allem, sehr leise */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{ position:absolute; left:-999px; top:10px; z-index:200; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:10px; }
.skip:focus{ left:10px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section{ position:relative; padding:clamp(90px,13vw,170px) 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--peri);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.7; }
.h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(2.1rem,5.2vw,4.4rem); margin-top:18px; text-wrap:balance;
}
.h2 em, .hero__title em, .cta__title em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--lilac); }
.lead{ color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.15rem); max-width:60ch; margin-top:22px; text-wrap:pretty; }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  --b:var(--text);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:999px; font-weight:700; font-size:.98rem; line-height:1;
  transition:transform .4s var(--ease), background .3s, color .3s, box-shadow .4s var(--ease), border-color .3s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{
  background:linear-gradient(135deg,#fff 0%,#E4E0FF 100%); color:#0B0930;
  box-shadow:0 10px 40px -10px rgba(142,155,255,.6), inset 0 -2px 0 rgba(35,8,113,.12);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 50px -12px rgba(142,155,255,.85), inset 0 -2px 0 rgba(35,8,113,.12); }
.btn--ghost{ border:1px solid var(--line-2); background:rgba(255,255,255,.03); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn--ghost:hover{ border-color:var(--peri); background:rgba(142,155,255,.08); transform:translateY(-2px); }

/* --- Navigation ---------------------------------------------------------- */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50;
  width:min(calc(100% - 24px), 1120px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 10px 10px 20px; border-radius:999px;
  background:rgba(12,10,36,.45); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:background .4s, border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.nav.is-scrolled{ background:rgba(10,8,30,.78); border-color:rgba(255,255,255,.12); box-shadow:0 20px 60px -30px rgba(0,0,0,.8); }
.nav.is-hidden{ transform:translate(-50%,-140%); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:-.02em; }
.brand__mark{
  width:28px; height:28px; border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 8%, transparent 30%),
    radial-gradient(circle at 70% 65%, var(--violet), transparent 60%),
    radial-gradient(circle at 35% 70%, var(--peri), transparent 55%),
    linear-gradient(135deg,var(--lilac),var(--indigo));
  box-shadow:0 0 18px rgba(142,155,255,.55);
  animation:morph 9s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{ border-radius:48% 52% 45% 55% / 55% 45% 55% 45%; transform:rotate(0deg); }
  50%{ border-radius:58% 42% 55% 45% / 42% 58% 42% 58%; transform:rotate(40deg); }
}
.brand b{ color:var(--peri); }
.nav__links{ display:flex; gap:4px; }
.nav__links a{ padding:9px 14px; border-radius:999px; font-size:.93rem; font-weight:600; color:var(--muted); transition:color .25s, background .25s; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--text); background:rgba(255,255,255,.06); }
.nav__cta{ padding:12px 20px; font-size:.92rem; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.06); position:relative; }
.nav__burger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--text); border-radius:2px; transition:transform .4s var(--ease), opacity .3s; }
.nav__burger span:nth-child(1){ top:17px; } .nav__burger span:nth-child(2){ top:25px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:40; background:rgba(7,6,26,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; padding:100px var(--pad) 40px; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu a{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,9vw,3rem); letter-spacing:-.03em; padding:6px 0;
  transform:translateY(20px); opacity:0; transition:transform .6s var(--ease), opacity .6s; }
.menu.is-open a{ transform:none; opacity:1; }
.menu.is-open a:nth-child(2){ transition-delay:.05s } .menu.is-open a:nth-child(3){ transition-delay:.1s }
.menu.is-open a:nth-child(4){ transition-delay:.15s } .menu.is-open a:nth-child(5){ transition-delay:.2s }
.menu__foot{ margin-top:30px; color:var(--muted); font-size:.95rem; }

@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(60% 60% at 72% 45%, rgba(91,75,255,.28), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(35,8,113,.55), transparent 70%),
    radial-gradient(40% 40% at 95% 5%, rgba(159,233,255,.08), transparent 70%),
    var(--bg);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.4s var(--ease); }
.hero__canvas.is-ready{ opacity:1; }
.hero__fallback{
  position:absolute; right:8%; top:50%; width:min(42vw,520px); aspect-ratio:1; transform:translateY(-50%);
  border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:radial-gradient(circle at 35% 30%, var(--lilac), var(--violet) 45%, var(--indigo) 80%);
  filter:blur(2px); box-shadow:0 0 120px rgba(91,75,255,.5); animation:morph 12s ease-in-out infinite;
}
.js-3d .hero__fallback{ display:none; }
.hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:30%; z-index:1; pointer-events:none; background:linear-gradient(transparent, var(--bg)); }
.hero__inner{ position:relative; z-index:2; padding-top:120px; padding-bottom:110px; pointer-events:none; }
.hero__inner a, .hero__inner button{ pointer-events:auto; }
.hero__kicker{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(91,227,166,.6); animation:ping 2.4s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(91,227,166,.55);} 70%{ box-shadow:0 0 0 10px rgba(91,227,166,0);} 100%{ box-shadow:0 0 0 0 rgba(91,227,166,0);} }
.hero__title{
  font-family:var(--display); font-weight:800; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(2.9rem,7.6vw,7.4rem); margin-top:26px; max-width:11ch;
}
.hero__title em{ font-size:1.12em; letter-spacing:-.02em; background:linear-gradient(100deg,var(--lilac),var(--peri) 40%,var(--ice)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.08em; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line > span{ display:inline-block; transform:translateY(110%); animation:rise 1.1s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span{ animation-delay:.12s; }
.hero__title .line:nth-child(3) > span{ animation-delay:.24s; }
@keyframes rise{ to{ transform:none; } }
.hero__sub{ margin-top:28px; max-width:44ch; font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--muted); opacity:0; animation:fade 1s .5s var(--ease) forwards; }
.hero__sub strong{ color:var(--text); font-weight:700; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; opacity:0; animation:fade 1s .65s var(--ease) forwards; }
@keyframes fade{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,40px); margin-top:54px; opacity:0; animation:fade 1s .8s var(--ease) forwards; }
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta b{ font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em; }
.hero__meta span{ font-size:.82rem; color:var(--dim); font-weight:600; }
.hero__hint{
  position:absolute; right:var(--pad); bottom:34px; z-index:2; font-size:.78rem; color:var(--dim); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.hero__hint i{ width:1px; height:40px; background:linear-gradient(var(--peri),transparent); animation:drop 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes drop{ 0%{ transform:scaleY(0);} 50%{ transform:scaleY(1);} 100%{ transform:scaleY(1); opacity:0; } }
.orbit-label{
  position:absolute; left:0; top:0; z-index:3; pointer-events:none; padding:8px 14px; border-radius:999px;
  background:rgba(10,8,30,.85); border:1px solid var(--line-2); font-size:.82rem; font-weight:700; white-space:nowrap;
  opacity:0; transition:opacity .25s; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.orbit-label.is-on{ opacity:1; }
.orbit-label small{ color:var(--muted); font-weight:600; margin-left:6px; }
@media (max-width:820px){
  .hero{ align-items:flex-end; }
  .hero::after{ height:62%; background:linear-gradient(transparent, rgba(7,6,26,.82) 38%, var(--bg)); }
  .hero__inner{ padding-top:48svh; padding-bottom:64px; }
  .hero__meta{ margin-top:40px; }
  .hero__title{ font-size:clamp(2.5rem,11.5vw,4.2rem); }
  .hero__hint{ display:none; }
  .hero__fallback{ top:26%; right:50%; transform:translate(50%,-50%); width:62vw; }
}

/* --- Marquee ------------------------------------------------------------- */
.marquee{ border-block:1px solid var(--line); background:rgba(255,255,255,.015); overflow:hidden; padding:20px 0; }
.marquee__track{ display:flex; gap:48px; width:max-content; animation:marq 38s linear infinite; }
.marquee__track span{ font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; color:var(--muted); display:flex; align-items:center; gap:48px; white-space:nowrap; }
.marquee__track span::after{ content:"✦"; color:var(--peri); font-size:.8rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* --- Arbeiten (3D-Laptops) ---------------------------------------------- */
.works__head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; }
.works__head .lead{ margin-top:0; }
@media (max-width:900px){ .works__head{ grid-template-columns:1fr; gap:0; } .works__head .lead{ margin-top:22px; } }
.works{ display:flex; flex-direction:column; gap:clamp(90px,12vw,160px); margin-top:clamp(70px,9vw,120px); }
.work{ position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.work:nth-child(even){ grid-template-columns:1fr 1.25fr; }
.work:nth-child(even) .work__stage{ order:2; }
.work::before{
  content:""; position:absolute; z-index:-1; width:70%; aspect-ratio:1; left:-10%; top:50%; transform:translateY(-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent);
  filter:blur(30px); opacity:.55; pointer-events:none;
}
.work:nth-child(even)::before{ left:auto; right:-10%; }
@media (max-width:900px){
  .work, .work:nth-child(even){ grid-template-columns:1fr; }
  .work:nth-child(even) .work__stage{ order:0; }
  .work::before, .work:nth-child(even)::before{ left:-20%; right:auto; width:140%; top:30%; }
}

.work__stage{ perspective:1600px; perspective-origin:50% 20%; padding:4% 8% 14% 4%; }
.device{
  --rx:0deg; --ry:0deg;
  position:relative; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .9s var(--ease);
}
.laptop{
  --lid:-86deg;
  position:relative; transform-style:preserve-3d; transform:rotateX(-16deg);
}
.is-open .laptop{ --lid:10deg; }
.laptop__lid{
  position:relative; aspect-ratio:16/10.4; transform-style:preserve-3d; transform-origin:50% 100%;
  transform:rotateX(var(--lid)); transition:transform 1.5s cubic-bezier(.2,.9,.25,1.02);
}
.laptop__face, .laptop__back{
  position:absolute; inset:0; border-radius:16px 16px 6px 6px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.laptop__face{
  background:#0B0B12; padding:2.6% 2.6% 4%;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 30px 80px -30px rgba(0,0,0,.9);
}
.laptop__face::before{ content:""; position:absolute; top:1.1%; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#222432; }
.screen{ position:relative; height:100%; overflow:hidden; background:#111; }
.laptop .screen{ border-radius:6px; }
.screen img{ width:100%; height:auto; transform:translateY(0); transition:transform 1.4s var(--ease); will-change:transform; }
.screen.is-scrolling img{ transform:translateY(calc(-1 * var(--shift, 0px))); transition:transform var(--dur, 8s) cubic-bezier(.45,.05,.55,.95); }
.screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(255,255,255,.05) 100%);
}
.laptop__back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#3A3A48,#1C1C26 60%,#121219);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  display:grid; place-items:center;
}
.laptop__back::after{ content:""; width:12%; aspect-ratio:1; border-radius:45% 55% 50% 50%; background:radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, transparent 72%); opacity:.8; }
.laptop__base{
  position:absolute; left:-7%; right:-7%; top:100%; aspect-ratio:16/8.6; transform-origin:50% 0; transform:rotateX(90deg);
  border-radius:4px 4px 18px 18px;
  background:linear-gradient(180deg,#2A2A36,#1A1A23);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.laptop__base::before{
  content:""; position:absolute; left:11%; right:11%; top:9%; height:47%; border-radius:6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(7.14% - 2px), rgba(0,0,0,.55) calc(7.14% - 2px) 7.14%),
    repeating-linear-gradient(180deg, transparent 0 calc(20% - 2px), rgba(0,0,0,.55) calc(20% - 2px) 20%),
    #25252F;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.laptop__base::after{ content:""; position:absolute; left:36%; right:36%; top:62%; height:28%; border-radius:6px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.laptop__shadow{
  position:absolute; left:-4%; right:-4%; top:100%; aspect-ratio:16/9; transform:rotateX(90deg) translateZ(-3px); transform-origin:50% 0;
  background:radial-gradient(closest-side, rgba(0,0,0,.8), transparent); filter:blur(16px);
}
.work__stage{ position:relative; }
.stage-glow{ position:absolute; inset:14% 16% 26%; background:var(--c); filter:blur(90px); opacity:0; transition:opacity 1.2s .6s; border-radius:50%; pointer-events:none; }
.is-open .stage-glow{ opacity:.26; }

/* Handy daneben, schwebt vor dem Laptop */
.phone{
  position:absolute; right:-6%; bottom:-12%; width:23%; aspect-ratio:9/19.2;
  padding:3.2% 3%; border-radius:18% / 8.5%; background:#0B0B12;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 0 0 2px #262633, 0 40px 60px -20px rgba(0,0,0,.85);
  transform:translateZ(90px) translateY(40px) rotateY(-14deg) rotateZ(2deg); opacity:0;
  transition:transform 1.3s .7s var(--ease), opacity 1s .7s;
}
.is-open .phone{ transform:translateZ(90px) rotateY(-14deg) rotateZ(2deg); opacity:1; }
.phone::before{ content:""; position:absolute; z-index:2; top:4.2%; left:50%; width:30%; height:3%; transform:translateX(-50%); border-radius:99px; background:#000; }
.phone .screen{ border-radius:14% / 6.6%; }

.work__num{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--c); letter-spacing:.04em; display:flex; align-items:center; gap:12px; }
.work__num::after{ content:""; height:1px; width:48px; background:currentColor; opacity:.6; }
.work__cat{ color:var(--muted); font-weight:600; font-size:.92rem; margin-top:18px; }
.work__name{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.2vw,3.6rem); letter-spacing:-.04em; line-height:1; margin-top:6px; }
.work__desc{ color:var(--muted); margin-top:18px; max-width:44ch; font-size:1.05rem; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tags li{ list-style:none; font-size:.82rem; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--text); background:rgba(255,255,255,.03); }
.work__link{ margin-top:30px; border:1px solid color-mix(in srgb, var(--c) 55%, transparent); background:color-mix(in srgb, var(--c) 10%, transparent); }
.work__link:hover{ background:var(--c); color:#0A0915; transform:translateY(-2px); box-shadow:0 14px 40px -12px var(--c); }
.work--lumea{ --c:var(--lumea); } .work--bauwerk{ --c:var(--bauwerk); } .work--aurel{ --c:var(--aurel); } .work--voltwerk{ --c:var(--voltwerk); }

.work__more{ display:inline-flex; margin-left:14px; margin-top:30px; font-weight:700; color:var(--muted); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .2s, border-color .2s; }
.work__more:hover{ color:var(--text); border-color:var(--c); }
.work__actions{ display:flex; flex-wrap:wrap; align-items:center; }

/* --- Fallstudien --------------------------------------------------------- */
.case-hero{ position:relative; padding:150px 0 40px; overflow:hidden; }
.case-hero::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:70vw; aspect-ratio:1; background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 28%, transparent), transparent); filter:blur(40px); pointer-events:none; }
.back{ display:inline-flex; gap:8px; color:var(--muted); font-weight:700; font-size:.92rem; }
.back:hover{ color:var(--text); }
.case-hero__title{ font-family:var(--display); font-weight:800; letter-spacing:-.05em; line-height:.92; font-size:clamp(3.2rem,11vw,9.5rem); margin-top:28px; color:var(--text); }
.case-hero__title span{ color:var(--c); }
.case-hero__intro{ font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--muted); max-width:52ch; margin-top:26px; }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:54px; border-radius:22px; overflow:hidden; background:var(--line); border:1px solid var(--line); }
.facts div{ background:var(--bg); padding:22px 24px; }
.facts small{ display:block; color:var(--dim); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.facts b{ display:block; margin-top:6px; font-weight:700; }
.facts a{ color:var(--c); }
@media (max-width:760px){ .facts{ grid-template-columns:1fr 1fr; } }
.case-stage{ max-width:940px; margin:40px auto 0; }
.story{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .story{ grid-template-columns:1fr; } }
.story article{ padding:32px 30px; border-radius:24px; background:var(--surface); border:1px solid var(--line); }
.story .num{ font-family:var(--display); font-weight:700; color:var(--c); font-size:.86rem; }
.story h2{ font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:-.03em; margin-top:14px; }
.story p{ color:var(--muted); margin-top:12px; }
.inside{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,90px); align-items:start; }
@media (max-width:900px){ .inside{ grid-template-columns:1fr; } }
.inside__head{ position:sticky; top:120px; }
@media (max-width:900px){ .inside__head{ position:static; } }
.inside__list{ list-style:none; counter-reset:s; border-top:1px solid var(--line); }
.inside__list li{ counter-increment:s; display:grid; grid-template-columns:52px 1fr; gap:6px 12px; padding:20px 0; border-bottom:1px solid var(--line); }
.inside__list li::before{ content:counter(s, decimal-leading-zero); font-family:var(--display); font-weight:700; color:var(--c); font-size:.9rem; padding-top:3px; }
.inside__list b{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:1.08rem; }
.inside__list span{ grid-column:2; color:var(--muted); font-size:.95rem; }
.scrollshot{ position:sticky; top:110px; border-radius:20px; overflow:hidden; border:1px solid var(--line-2); background:#0B0B12; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.scrollshot__bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.8rem; color:var(--dim); font-weight:600; }
.scrollshot__bar i{ width:10px; height:10px; border-radius:50%; background:#2B2A3A; }
.scrollshot__bar span{ margin-left:10px; padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.05); }
.scrollshot .screen{ height:min(62vh,560px); }
.next{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:40px 44px; border-radius:30px; border:1px solid var(--line); background:linear-gradient(120deg, color-mix(in srgb, var(--nc) 16%, transparent), transparent 60%); transition:border-color .3s, transform .5s var(--ease); }
.next:hover{ border-color:var(--nc); transform:translateY(-3px); }
.next small{ color:var(--dim); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
.next b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,5vw,3.4rem); letter-spacing:-.045em; line-height:1.05; margin-top:6px; }
.next svg{ width:48px; height:48px; color:var(--nc); flex:none; transition:transform .5s var(--ease); }
.next:hover svg{ transform:translateX(6px); }

/* --- Über mich ----------------------------------------------------------- */
.about{ background:linear-gradient(180deg, transparent, rgba(35,8,113,.18) 30%, rgba(35,8,113,.18) 70%, transparent); }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); margin-top:50px; }
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }
.statement{ font-family:var(--display); font-weight:600; font-size:clamp(1.45rem,2.6vw,2.2rem); letter-spacing:-.03em; line-height:1.28; }
.statement .w{ color:rgba(243,241,255,.16); transition:color .5s; }
.statement .w.is-lit{ color:var(--text); }
.about__text p{ color:var(--muted); font-size:1.08rem; }
.about__text p + p{ margin-top:18px; }
.about__text strong{ color:var(--text); }

.guarantee{
  position:relative; margin-top:36px; padding:30px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(145deg, rgba(91,75,255,.18), rgba(255,255,255,.02));
  border:1px solid rgba(142,155,255,.28);
}
.guarantee::before{ content:""; position:absolute; width:240px; height:240px; right:-80px; top:-80px; background:radial-gradient(closest-side, rgba(159,233,255,.25), transparent); }
.guarantee__big{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,6vw,4.6rem); letter-spacing:-.05em; line-height:1; background:linear-gradient(120deg,#fff,var(--peri)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.guarantee h3{ font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em; margin-top:12px; }
.guarantee p{ color:var(--muted); margin-top:8px; font-size:1rem; }
.link-arrow{ display:inline-flex; gap:8px; align-items:center; margin-top:26px; font-weight:700; color:var(--peri); border-bottom:1px solid currentColor; padding-bottom:3px; }
.link-arrow:hover{ color:var(--text); }
.link-arrow svg{ width:18px; height:18px; flex:none; }

/* --- Werkzeug-Ring (CSS-3D-Karussell) ----------------------------------- */
.stack{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center; margin-top:clamp(90px,12vw,150px); }
@media (max-width:900px){ .stack{ grid-template-columns:1fr; } }
.stack h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.035em; line-height:1.1; }
.stack p{ color:var(--muted); margin-top:14px; max-width:42ch; }
.ring{ position:relative; height:clamp(360px,40vw,500px); perspective:1100px; display:grid; place-items:center; }
.ring__canvas{ position:absolute; inset:0; width:100%; height:100%; display:none; }
.ring.is-3d .ring__canvas{ display:block; opacity:0; transition:opacity 1.2s var(--ease); }
.ring.is-3d .ring__canvas.is-ready{ opacity:1; }
.ring.is-3d .ring__core, .ring.is-3d .ring__spin{ display:none; }
.ring__core{
  position:absolute; width:120px; height:120px; border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:radial-gradient(circle at 35% 30%, #fff 0 5%, var(--peri) 30%, var(--violet) 60%, var(--indigo));
  box-shadow:0 0 90px rgba(91,75,255,.7); animation:morph 8s ease-in-out infinite;
}
.ring__spin{ position:relative; width:190px; height:120px; transform-style:preserve-3d; animation:spin 26s linear infinite; }
.ring:hover .ring__spin{ animation-play-state:paused; }
@keyframes spin{ from{ transform:rotateX(-12deg) rotateY(0); } to{ transform:rotateX(-12deg) rotateY(-360deg); } }
.chip{
  position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; inset:0; display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border-radius:18px;
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(clamp(190px,21vw,250px)) rotateY(var(--flip, 0deg));
  background:linear-gradient(150deg, rgba(40,34,90,.92), rgba(16,13,44,.92)); border:1px solid rgba(142,155,255,.3);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.chip--back{ --flip:180deg; opacity:.4; }
.chip svg{ width:26px; height:26px; color:var(--lc, var(--peri)); margin-bottom:8px; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--lc) 45%, transparent)); }
.chip b{ font-family:var(--display); font-size:1.02rem; letter-spacing:-.02em; }
.chip span{ font-size:.82rem; color:var(--muted); font-weight:600; }

/* --- Ablauf -------------------------------------------------------------- */
.process{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,110px); }
@media (max-width:900px){ .process{ grid-template-columns:1fr; } }
.process__sticky{ position:sticky; top:130px; align-self:start; }
.process__sticky .h2{ font-size:clamp(2rem,4vw,3.5rem); }
@media (max-width:900px){ .process__sticky{ position:static; } }
.steps{ position:relative; list-style:none; padding-left:74px; }
.steps::before, .steps__fill{ content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--line); }
.steps__fill{ background:linear-gradient(var(--ice),var(--peri),var(--violet)); transform-origin:top; transform:scaleY(var(--p,0)); box-shadow:0 0 16px var(--peri); }
.step{ position:relative; padding:4px 0 56px; }
.step:last-child{ padding-bottom:0; }
.step__n{
  position:absolute; left:-74px; top:0; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; background:var(--bg-2); border:1px solid var(--line-2); color:var(--muted);
  transition:background .5s, color .5s, border-color .5s, box-shadow .5s;
}
.step.is-active .step__n{ background:linear-gradient(135deg,var(--peri),var(--violet)); color:#fff; border-color:transparent; box-shadow:0 0 30px rgba(142,155,255,.6); }
.step h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1.9vw,1.55rem); letter-spacing:-.03em; line-height:1.2; padding-top:8px; }
.step p{ color:var(--muted); margin-top:10px; max-width:52ch; }
.step .note{ display:inline-block; margin-top:14px; font-size:.88rem; font-weight:600; color:var(--lilac); padding:8px 12px; border-radius:12px; background:rgba(142,155,255,.08); border:1px solid rgba(142,155,255,.2); }

/* --- Preise -------------------------------------------------------------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; perspective:1400px; align-items:stretch; }
@media (max-width:1000px){ .pricing{ grid-template-columns:1fr; max-width:560px; } }
.plan{
  --mx:50%; --my:0%; --rx:0deg; --ry:0deg;
  position:relative; display:flex; flex-direction:column; padding:34px 30px 30px; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .5s var(--ease), border-color .3s;
  overflow:hidden;
}
.plan::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(142,155,255,.16), transparent 45%); opacity:0; transition:opacity .4s; }
.plan:hover::before{ opacity:1; }
.plan:hover{ border-color:var(--line-2); }
.plan--featured{ background:linear-gradient(180deg, rgba(91,75,255,.22), rgba(35,8,113,.18) 50%, rgba(255,255,255,.02)); border-color:transparent; }
.plan--featured::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang,0deg), var(--peri), var(--ice), var(--lilac), var(--violet), var(--peri));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:angle 6s linear infinite;
}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes angle{ to{ --ang:360deg; } }
.plan__badge{ position:absolute; top:22px; right:22px; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:var(--text); color:#0B0930; }
.plan__name{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; }
.plan__price{ display:flex; align-items:baseline; gap:10px; margin-top:20px; }
.plan__price b{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,4vw,3.4rem); letter-spacing:-.05em; line-height:1; }
.plan__price span{ color:var(--muted); font-weight:600; }
.plan__care{ margin-top:8px; font-size:.86rem; color:var(--dim); font-weight:600; }
.plan__claim{ margin-top:22px; font-weight:700; font-size:1.05rem; line-height:1.4; padding-bottom:22px; border-bottom:1px solid var(--line); }
.plan ul{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:13px; flex:1; }
.plan li{ position:relative; padding-left:30px; color:var(--muted); font-size:.95rem; line-height:1.55; }
.plan li::before{
  content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  background:rgba(142,155,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B8C0FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.plan .btn{ margin-top:30px; justify-content:center; }
.care{ margin-top:18px; color:var(--dim); font-size:.9rem; }

/* --- FAQ ----------------------------------------------------------------- */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,7vw,110px); }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } }
.faq__list details{ border-bottom:1px solid var(--line); }
.faq__list details:first-child{ border-top:1px solid var(--line); }
.faq__list summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:24px 0; font-family:var(--display); font-weight:600; font-size:clamp(1rem,1.5vw,1.18rem); letter-spacing:-.02em;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary i{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:transform .4s var(--ease), background .3s; }
.faq__list summary i::before, .faq__list summary i::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--text); border-radius:2px; }
.faq__list summary i::after{ transform:rotate(90deg); transition:transform .4s var(--ease); }
.faq__list details[open] summary i{ background:var(--violet); border-color:transparent; }
.faq__list details[open] summary i::after{ transform:rotate(0); }
.faq__list details p{ color:var(--muted); padding:0 60px 26px 0; max-width:64ch; }

/* --- CTA ----------------------------------------------------------------- */
.cta{ position:relative; overflow:hidden; border-radius:36px; padding:clamp(50px,8vw,110px) clamp(24px,6vw,90px); text-align:center; isolation:isolate;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(142,155,255,.5), transparent 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(91,75,255,.35), transparent 70%),
    linear-gradient(160deg,#1A1250,#0C0A2A);
  border:1px solid rgba(142,155,255,.25);
}
.cta__orb{ position:absolute; z-index:-1; width:360px; height:360px; left:50%; bottom:-240px; transform:translateX(-50%); border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:radial-gradient(circle at 35% 30%, #fff 0 4%, var(--lilac) 18%, var(--peri) 40%, var(--violet) 65%, transparent 72%); filter:blur(8px); opacity:.8; animation:morph 10s ease-in-out infinite; }
.cta__title{ font-family:var(--display); font-weight:800; letter-spacing:-.045em; line-height:1; font-size:clamp(2.2rem,5.6vw,4.8rem); text-wrap:balance; }
.cta p{ color:var(--muted); max-width:52ch; margin:22px auto 0; font-size:1.1rem; }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px; }

/* --- Footer -------------------------------------------------------------- */
.footer{ padding:90px 0 36px; border-top:1px solid var(--line); margin-top:clamp(90px,12vw,150px); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.footer p, .footer a{ color:var(--muted); font-size:.96rem; }
.footer__col a{ display:block; padding:4px 0; transition:color .2s; }
.footer__col a:hover{ color:var(--text); }
.footer__big{
  font-family:var(--display); font-weight:800; letter-spacing:-.06em; line-height:.85; margin-top:80px;
  font-size:min(calc((100vw - 2 * var(--pad)) / 7.2), 166px); white-space:nowrap; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(243,241,255,.14), rgba(243,241,255,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;
}
.footer__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:26px; border-top:1px solid var(--line); color:var(--dim); font-size:.88rem; }
.footer__bar a{ color:var(--dim); } .footer__bar a:hover{ color:var(--text); }

/* --- Unterseiten --------------------------------------------------------- */
.page-hero{ position:relative; padding:170px 0 60px; overflow:hidden; }
.page-hero canvas{ position:absolute; right:-6%; top:-10%; width:50%; height:120%; opacity:0; transition:opacity 1.4s var(--ease); pointer-events:none; }
.page-hero canvas.is-ready{ opacity:1; }
.page-hero .wrap{ position:relative; }
.legal{ max-width:760px; }
.legal h2{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:1.25rem; margin:40px 0 10px; }
.legal p{ color:var(--muted); }
.legal p + p{ margin-top:12px; }
.legal a{ color:var(--peri); border-bottom:1px solid currentColor; }

.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.contact__aside{ display:flex; flex-direction:column; gap:14px; }
.contact-card{ display:flex; gap:16px; align-items:center; padding:20px 22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); transition:border-color .3s, transform .4s var(--ease), background .3s; }
a.contact-card:hover{ border-color:var(--peri); transform:translateY(-2px); background:rgba(142,155,255,.06); }
.contact-card__icon{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(142,155,255,.12); color:var(--peri); }
.contact-card__icon svg{ width:22px; height:22px; }
.contact-card small{ display:block; color:var(--dim); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.contact-card b{ font-weight:700; }
.form{
  position:relative; padding:clamp(24px,4vw,44px); border-radius:28px; display:grid; gap:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border:1px solid var(--line-2);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.88rem; font-weight:700; margin-bottom:8px; }
.field label span{ color:var(--dim); font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:14px; font:inherit; font-size:1rem; color:var(--text);
  background:rgba(7,6,26,.6); border:1px solid var(--line-2); transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ resize:vertical; min-height:140px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A9A5C6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
.field select option{ background:#15123A; }
.field input::placeholder, .field textarea::placeholder{ color:var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--peri); box-shadow:0 0 0 4px rgba(142,155,255,.18); background:rgba(7,6,26,.85); }
.form__hp{ position:absolute; left:-9999px; opacity:0; }
.form__note{ min-height:1.4em; font-size:.95rem; font-weight:600; }
.form__note.is-err{ color:#FF8A8A; } .form__note.is-ok{ color:var(--ok); }
.form__paket{ display:none; padding:12px 16px; border-radius:14px; background:rgba(142,155,255,.1); border:1px solid rgba(142,155,255,.25); font-weight:600; font-size:.95rem; }
.form__paket.is-on{ display:block; }
.form .btn{ justify-self:start; }
.form small{ color:var(--dim); font-size:.85rem; }

/* --- Scroll-Reveal ------------------------------------------------------- */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* ==========================================================================
   Mehrseitig: Übergänge, Seitenköpfe, neue 3D-Bausteine
   ========================================================================== */

/* Weiche Seitenübergänge (Chrome, Edge, Safari 18+) */
@view-transition{ navigation:auto; }
.nav{ view-transition-name:nav; }
::view-transition-old(root){ animation:vt-out .35s var(--ease) both; }
::view-transition-new(root){ animation:vt-in .6s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-14px) scale(.99); filter:blur(4px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(24px) scale(1.01); filter:blur(6px); } }

/* Seitenkopf mit 3D */
.page-hero{ min-height:min(78svh,760px); display:flex; align-items:center; }
.page-hero .lead{ max-width:52ch; }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
@media (max-width:820px){
  .page-hero{ min-height:auto; padding-top:140px; }
  .page-hero canvas{ position:relative; display:block; right:auto; top:auto; width:100%; height:300px; margin:-20px 0 0; order:-1; }
  .page-hero{ flex-direction:column; align-items:stretch; }
}
.crumbs{ display:flex; gap:8px; font-size:.86rem; color:var(--dim); font-weight:600; margin-bottom:22px; }
.crumbs a:hover{ color:var(--text); }

/* --- 3D-Galerie (Startseite) -------------------------------------------- */
.gallery{ position:relative; }
.gallery__sticky{ position:relative; }
.gallery__canvas{ display:none; }
.gallery__fallback{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:50px; }
@media (max-width:760px){ .gallery__fallback{ grid-template-columns:1fr; } }
.gcard{ display:block; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .5s var(--ease), border-color .3s; }
.gcard:hover{ transform:translateY(-4px); border-color:var(--c); }
.gcard img{ aspect-ratio:16/10; object-fit:cover; object-position:top; width:100%; }
.gcard div{ padding:18px 22px; }
.gcard small{ color:var(--c); font-weight:700; }
.gcard b{ display:block; font-family:var(--display); font-size:1.3rem; letter-spacing:-.03em; }
.gallery.is-3d{ height:calc(100svh + 3 * 75svh); }
.gallery.is-3d .gallery__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.gallery.is-3d .gallery__canvas{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.gallery.is-3d .gallery__fallback{ display:none; }
.gallery__head{ position:relative; z-index:2; padding-top:110px; pointer-events:none; }
.gallery__head .h2{ font-size:clamp(1.9rem,4vw,3.4rem); }
.gallery__caption, .gallery__dots{ display:none; }
.gallery.is-3d .gallery__caption{
  display:block; position:absolute; z-index:2; left:var(--pad); bottom:clamp(28px,6vh,64px); max-width:420px;
  padding:22px 24px; border-radius:22px; background:rgba(10,8,30,.62); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gallery.is-3d .gallery__caption.is-in{ opacity:1; transform:none; }
.gallery__caption [data-num]{ font-family:var(--display); font-weight:700; font-size:.8rem; color:var(--c); letter-spacing:.06em; }
.gallery__caption [data-cat]{ display:block; color:var(--muted); font-size:.88rem; font-weight:600; margin-top:8px; }
.gallery__caption [data-name]{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.04em; line-height:1.05; }
.gallery__caption [data-desc]{ display:block; color:var(--muted); font-size:.95rem; margin-top:8px; }
.gallery__caption .row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.gallery__caption .btn{ padding:11px 16px; font-size:.88rem; }
.gallery.is-3d .gallery__dots{ display:flex; flex-direction:column; gap:10px; position:absolute; z-index:2; right:var(--pad); top:50%; transform:translateY(-50%); }
.gallery__dots button{ width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line-2); transition:background .3s, transform .3s, border-color .3s; }
.gallery__dots button[aria-current="true"]{ background:var(--peri); border-color:var(--peri); transform:scale(1.3); }
.gallery__hint{ position:absolute; z-index:2; right:var(--pad); bottom:clamp(28px,6vh,64px); color:var(--dim); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:760px){
  .gallery.is-3d .gallery__caption{ left:12px; right:12px; bottom:16px; max-width:none; padding:16px 18px; }
  .gallery__caption [data-desc]{ display:none; }
  .gallery.is-3d .gallery__dots{ top:auto; bottom:auto; right:14px; top:140px; transform:none; }
  .gallery__hint{ display:none; }
}

/* --- Branchen: 3D-Wendekarten ------------------------------------------- */
.flips{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; }
@media (max-width:1000px){ .flips{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .flips{ grid-template-columns:1fr; } }
.flip{ perspective:1200px; height:340px; cursor:pointer; outline:none; }
.flip__in{ position:relative; height:100%; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.flip:hover .flip__in, .flip:focus-visible .flip__in, .flip.is-flipped .flip__in{ transform:rotateY(180deg); }
.flip__face{
  position:absolute; inset:0; border-radius:24px; padding:28px; display:flex; flex-direction:column; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); overflow:hidden;
}
.flip__front{ background:linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #0E0C26), #0B0A20 70%); }
.flip__front::before{ content:""; position:absolute; width:220px; height:220px; right:-60px; bottom:-60px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent); }
.flip__front span{ font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--c); }
.flip__front h3{ font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.04em; line-height:1.05; margin-top:auto; }
.flip__front p{ color:var(--muted); font-size:.92rem; margin-top:8px; }
.flip__front i{ position:absolute; top:24px; right:24px; font-style:normal; font-size:.75rem; font-weight:700; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }
.flip__back{ transform:rotateY(180deg); background:linear-gradient(160deg,#16133A,#0C0A26); border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.flip__back h4{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.02em; }
.flip__back ul{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.flip__back li{ color:var(--muted); font-size:.9rem; padding-left:18px; position:relative; }
.flip__back li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--c); }
.flip__back a{ margin-top:auto; font-weight:700; color:var(--c); }


/* --- Leistungs-Kacheln --------------------------------------------------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:row dense; gap:18px; margin-top:56px; perspective:1400px; }
@media (max-width:1000px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feature{ --rx:0deg; --ry:0deg; position:relative; padding:28px; border-radius:24px; background:var(--surface); border:1px solid var(--line); transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .5s var(--ease), border-color .3s; }
.feature--wide{ grid-column:span 2; }
@media (max-width:560px){ .feature--wide{ grid-column:auto; } }
.feature:hover{ border-color:var(--line-2); }
.feature__icon{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; transform:translateZ(40px);
  background:linear-gradient(135deg,var(--peri),var(--violet)); box-shadow:0 12px 30px -10px rgba(91,75,255,.8); }
.feature__icon svg{ width:26px; height:26px; }
.feature h3{ font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; margin-top:22px; transform:translateZ(24px); }
.feature p{ color:var(--muted); font-size:.95rem; margin-top:8px; transform:translateZ(12px); }
.feature .from{ display:inline-block; margin-top:14px; font-size:.78rem; font-weight:700; color:var(--lilac); padding:5px 10px; border-radius:99px; background:rgba(142,155,255,.1); }

/* --- Vergleichstabelle --------------------------------------------------- */
.compare-wrap{ margin-top:60px; overflow-x:auto; border-radius:24px; border:1px solid var(--line); }
.compare{ width:100%; min-width:640px; border-collapse:collapse; font-size:.95rem; }
.compare th, .compare td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); }
.compare thead th{ font-family:var(--display); font-weight:700; font-size:1rem; background:rgba(255,255,255,.03); }
.compare thead th.is-featured{ color:var(--peri); }
.compare td{ color:var(--muted); }
.compare td:not(:first-child){ text-align:center; }
.compare thead th:not(:first-child){ text-align:center; }
.compare tr:last-child td{ border-bottom:0; }
.compare .yes{ color:var(--ok); font-weight:800; }
.compare .no{ color:var(--dim); }
.compare td.is-featured{ background:rgba(91,75,255,.08); color:var(--text); }

/* --- Teaser auf der Startseite ------------------------------------------- */
.mini-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; counter-reset:m; }
@media (max-width:900px){ .mini-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mini-steps{ grid-template-columns:1fr; } }
.mini-steps li{ list-style:none; position:relative; padding:26px 24px; border-radius:22px; background:var(--surface); border:1px solid var(--line); counter-increment:m; }
.mini-steps li::before{ content:counter(m); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font-family:var(--display); font-weight:700;
  background:linear-gradient(135deg,var(--peri),var(--violet)); color:#fff; box-shadow:0 0 24px rgba(142,155,255,.5); }
.mini-steps b{ display:block; font-family:var(--display); font-size:1.02rem; letter-spacing:-.02em; margin-top:18px; line-height:1.25; }
.mini-steps span{ display:block; color:var(--muted); font-size:.92rem; margin-top:6px; }
.price-teaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
@media (max-width:800px){ .price-teaser{ grid-template-columns:1fr; } }
.price-teaser a{ display:block; padding:28px; border-radius:24px; border:1px solid var(--line); background:var(--surface); transition:transform .5s var(--ease), border-color .3s, background .3s; }
.price-teaser a:hover{ transform:translateY(-4px); border-color:var(--peri); background:rgba(142,155,255,.06); }
.price-teaser a.is-featured{ border-color:rgba(142,155,255,.45); background:linear-gradient(180deg, rgba(91,75,255,.2), rgba(255,255,255,.02)); }
.price-teaser small{ color:var(--dim); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.76rem; }
.price-teaser b{ display:block; font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.05em; margin-top:8px; }
.price-teaser span{ display:block; color:var(--muted); margin-top:6px; font-size:.95rem; }
.price-teaser .per{ display:block; color:var(--lilac); font-weight:700; font-size:.82rem; letter-spacing:0; text-transform:none; margin-top:2px; }
.section-foot{ display:flex; justify-content:center; margin-top:40px; }

/* --- Über: Partikel ------------------------------------------------------ */
.particles-hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-bottom:70px;
  background:radial-gradient(60% 50% at 50% 40%, rgba(91,75,255,.22), transparent 70%), var(--bg); }
.particles-hero canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; opacity:0; transition:opacity 1.4s var(--ease); }
.particles-hero canvas.is-ready{ opacity:1; }
.particles-hero .wrap{ position:relative; z-index:2; pointer-events:none; }
.particles-hero .wrap a{ pointer-events:auto; }
.particles-hero canvas{ bottom:auto; height:100%; }
.particles-hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,5.2rem); letter-spacing:-.045em; line-height:1; max-width:14ch; }
.particles-hero h1 em{ font-family:var(--serif); font-weight:400; font-style:italic; color:var(--lilac); letter-spacing:-.01em; }
.particles-hero__word{ position:absolute; top:108px; right:var(--pad); z-index:2; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--lilac); min-height:1.4em; }
.particles-hero__tip{ margin-top:18px; color:var(--dim); font-size:.85rem; font-weight:600; }
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:56px; }
@media (max-width:900px){ .values{ grid-template-columns:1fr; } }
.value{ padding:30px; border-radius:24px; background:var(--surface); border:1px solid var(--line); }
.value b{ font-family:var(--display); font-weight:800; font-size:2.6rem; letter-spacing:-.05em; background:linear-gradient(120deg,#fff,var(--peri)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.value h3{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; margin-top:8px; }
.value p{ color:var(--muted); margin-top:8px; font-size:.97rem; }

/* Magnetische Buttons */
.btn[data-magnet]{ transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .4s var(--ease), border-color .3s; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}