/* ══════════════════════════════════════════════════════════════
   VELVET MANAGEMENT — black marble & champagne gold

   Icons: Lucide (lucide.dev) — ISC License, Copyright (c) for portions
   of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT).
   All other copyright (c) for Lucide are held by Lucide Contributors 2022.
   Inline eingebettet, kein CDN.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#040303;
  --ink-1:#080605;
  --ink-2:#0D0A08;
  --ink-3:#141010;
  --line:rgba(201,162,74,.22);
  --line-soft:rgba(201,162,74,.11);

  --g-1:#FFF6DF;
  --g-2:#EBD5A5;
  --g-3:#C9A24A;
  --g-4:#8A6A2E;
  --g-5:#5A4520;
  --copper:#B98A5E;

  --tx:#E9E2D6;
  --tx-2:#B0A697;
  --tx-3:#877D6D;

  --gold-grad:linear-gradient(110deg,#D9B368 0%,#F2E1B4 26%,#FFF6DF 50%,#EBD5A5 74%,#D9B368 100%);
  --sheen:linear-gradient(100deg,transparent 20%,rgba(255,246,223,.55) 45%,transparent 70%);

  --f-d:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-b:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(84px,11vw,160px);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink);color-scheme:dark}
/* Bildflächen dunkel unterlegen, damit vor dem Laden nichts aufblitzt */
/* .orb bewusst NICHT: das Globusbild ist rund maskiert, ein Kasten würde durchscheinen */
.frame,.mo,.hero__bg,.support__bg,.band,.file,.quote footer img{background-color:var(--ink-2)}
body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--f-b);font-weight:300;font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.72;letter-spacing:.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(201,162,74,.3);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:fixed;left:-999px;top:12px;z-index:999;background:var(--g-3);color:#000;padding:10px 18px}
.skip:focus{left:12px}
:focus-visible{outline:1px solid var(--g-3);outline-offset:3px}

/* ── Type ─────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-d);font-weight:300;letter-spacing:.005em;line-height:1.08;margin:0;text-wrap:balance}
/* verhindert einzelne Wörter in der letzten Zeile */
p,.lead,li,figcaption span{text-wrap:pretty}
.sec__head .lead,.band .lead{text-wrap:balance}
/* Cormorant setzt standardmäßig Mediävalziffern — für Zahlen Versalziffern erzwingen */
.stat b,.calc__num,.step__dot span,.card__num,.fs-steps li b,.mono text,.live b,.quote footer span,.foot__bot{
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1
}
h2{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h3{font-size:1.32rem;line-height:1.25;letter-spacing:.01em}
p{margin:0 0 1.05em}
.gold{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.kicker{
  font-family:var(--f-b);font-size:.66rem;font-weight:400;letter-spacing:.42em;
  text-transform:uppercase;color:var(--g-3);margin:0 0 1.1rem
}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--tx-2);line-height:1.78}
.lead em{font-style:normal;color:var(--g-2)}
.center{text-align:center;margin-inline:auto;max-width:62ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.9rem;font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--tx-2);margin:0 0 1.6rem
}
.eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--g-3);box-shadow:0 0 9px var(--g-3)}

.ornament{display:flex;align-items:center;gap:14px;margin:1.5rem 0 1.7rem}
.ornament i{height:1px;flex:1;max-width:150px;background:linear-gradient(90deg,transparent,var(--line))}
.ornament i:last-child{background:linear-gradient(270deg,transparent,var(--line))}
.ornament b{
  width:5px;height:5px;transform:rotate(45deg);background:var(--g-2);
  box-shadow:0 0 12px 2px rgba(235,213,165,.55)
}
.sec__head .ornament{justify-content:center}
.sec__head .ornament i{max-width:210px}

.link-gold{
  display:inline-flex;align-items:center;gap:.55em;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g-2);padding-bottom:5px;
  border-bottom:1px solid var(--line);transition:color .3s,border-color .3s
}
.link-gold i{font-style:normal;transition:transform .35s var(--ease)}
.link-gold:hover{color:var(--g-1);border-color:var(--g-3)}
.link-gold:hover i{transform:translateX(6px)}

/* ── Monogram ─────────────────────────────────────────── */
.mono{width:52px;height:auto;overflow:visible}
.mono text{font-family:var(--f-d);font-size:74px;font-weight:400}
.mono__a{opacity:.97}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15em;padding:1.05em 2.2em;font-size:.76rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;border-radius:var(--r);isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s
}
.btn em{font-size:.58rem;letter-spacing:.16em;opacity:.62;font-style:normal;text-transform:none}
.btn svg{width:15px;height:15px;fill:currentColor;margin-bottom:2px}
.btn--sm{padding:.85em 1.55em;font-size:.68rem;letter-spacing:.2em}
.btn--gold{background:var(--gold-grad);color:#120C04;box-shadow:0 8px 34px -14px rgba(201,162,74,.75)}
.btn--gold::after{
  content:"";position:absolute;inset:0;background:var(--sheen);
  transform:translateX(-130%);transition:transform .75s var(--ease);z-index:-1
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 44px -12px rgba(201,162,74,.9)}
.btn--gold:hover::after{transform:translateX(130%)}
.btn--ghost{color:var(--g-2);border:1px solid var(--line);background:rgba(255,255,255,.012)}
.btn--ghost::after{
  content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 50% 120%,rgba(201,162,74,.2),transparent 60%);
  opacity:0;transition:opacity .4s;z-index:-1
}
.btn--ghost:hover{color:var(--g-1);border-color:rgba(201,162,74,.5);transform:translateY(-2px)}
.btn--ghost:hover::after{opacity:1}

/* ── Chrome: scrollbar, grain, cursor ─────────────────── */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:var(--gold-grad);box-shadow:0 0 14px rgba(201,162,74,.8)}
.grain{
  position:fixed;inset:-150%;z-index:1100;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}
}
.cursor{position:fixed;top:0;left:0;z-index:1150;pointer-events:none;display:none;mix-blend-mode:screen}
.cursor__dot{
  position:absolute;width:5px;height:5px;border-radius:50%;background:var(--g-1);
  transform:translate(-50%,-50%);box-shadow:0 0 12px 2px rgba(235,213,165,.75)
}
.cursor__ring{
  position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,162,74,.45);
  transform:translate(-50%,-50%) scale(1);transition:width .3s,height .3s,border-color .3s,opacity .3s
}
.cursor.is-hot .cursor__ring{width:56px;height:56px;border-color:rgba(235,213,165,.85)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ── Preloader ────────────────────────────────────────── */
.preloader{
  position:fixed;inset:0;z-index:1300;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s
}
.preloader.is-out{opacity:0;visibility:hidden}
.preloader__inner{text-align:center}
.mono--pre{width:110px;margin:0 auto}
.mono--pre text{
  fill:none;stroke:url(#gPre);stroke-width:.9;
  stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.5s var(--ease) forwards
}
.mono--pre .mono__a{animation-delay:.22s}
@keyframes draw{to{stroke-dashoffset:0;fill:url(#gPre)}}
.preloader__word{
  font-family:var(--f-d);font-size:1.15rem;letter-spacing:.85em;text-indent:.85em;
  color:var(--g-2);margin-top:1.1rem;opacity:0;animation:fadeUp .8s .9s var(--ease) forwards
}
.preloader__bar{width:150px;height:1px;background:rgba(201,162,74,.16);margin:1.6rem auto 0;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--gold-grad);animation:load 1.7s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Nav ──────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(6,5,4,.82);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line-soft)}
.nav.is-hidden{transform:translateY(-100%)}
.nav{transition:transform .45s var(--ease),background .5s,backdrop-filter .5s,border-color .5s}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(12px,1.6vw,20px) var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px)
}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand .mono{width:auto;height:26px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--f-d);font-weight:400;font-size:1.02rem;letter-spacing:.34em;color:var(--tx)}
.brand__txt i{font-size:.5rem;letter-spacing:.5em;text-transform:uppercase;color:var(--g-3);font-style:normal;margin-top:4px}
.nav__links{display:flex;gap:clamp(14px,2.1vw,30px);margin-left:auto}
.nav__links a{
  position:relative;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-2);padding:6px 0;transition:color .3s
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold-grad);transition:right .4s var(--ease)
}
.nav__links a:hover,.nav__links a.is-on{color:var(--g-1)}
.nav__links a:hover::after,.nav__links a.is-on::after{right:0}
.nav__act{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);margin-left:auto}
.nav__links+.nav__act{margin-left:0}
/* Über dem Hero würde der CTA auf dem Kopf des Motivs liegen — er kommt erst,
   sobald die Navigation ihren dunklen Glas-Hintergrund hat. */
.nav__act .btn{transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .35s}
.nav:not(.is-stuck) .nav__act .btn{opacity:0;transform:translateY(-8px);pointer-events:none}
.lang{display:flex;align-items:center;gap:2px;font-size:.78rem;letter-spacing:.16em;color:var(--tx-3)}
/* Die Knöpfe waren 25×20 px — als Klickfläche zu wenig und auf dem Handy kaum
   zu treffen. Die Fläche wächst über das Innenabstandsmaß, die Schrift bleibt
   zurückhaltend; ein größerer Schriftgrad hätte die Kopfzeile dominiert. */
.lang button{transition:color .3s,background .3s;padding:.5rem .6rem;border-radius:6px;
  min-width:44px;min-height:36px;line-height:1}
.lang button.is-on{color:var(--g-2);background:rgba(200,164,100,.1)}
.lang button:hover{color:var(--g-1);background:rgba(200,164,100,.07)}
.lang span[aria-hidden]{opacity:.4}
.burger{display:none;width:34px;height:24px;flex-direction:column;justify-content:space-between;padding:4px 0}
.burger i{display:block;height:1px;background:var(--g-2);transition:transform .4s var(--ease),opacity .3s}
.burger.is-on i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-on i:nth-child(2){opacity:0}
.burger.is-on i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:flex}
  /* `.nav__links + .nav__act` setzt oben `margin-left:0`, damit die Aktionen
     am Desktop direkt an die Navigation anschließen. Auf dem Telefon liegt
     die Navigation als Vollbild-Ebene über der Seite und ist damit aus dem
     Fluss — ohne die Rückgabe des automatischen Abstands klebten Sprachwahl
     und Burger unmittelbar am Logo statt am rechten Rand. */
  .nav__links + .nav__act{margin-left:auto}
  .nav__links{
    position:fixed;inset:0;background:rgba(4,3,3,.97);backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
    opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s
  }
  .nav__links.is-open{opacity:1;visibility:visible}
  /* Solange das Menü offen ist, darf die Leiste **weder** verschoben sein
     **noch** einen Hintergrundfilter tragen. Beides erzeugt für Nachfahren
     einen eigenen Bezugsrahmen, und `position:fixed` bezieht sich dann nicht
     mehr aufs Fenster, sondern auf die 60 Pixel hohe Leiste: kein
     abdeckender Hintergrund, und von sieben Menüpunkten waren nur noch drei
     zu sehen. Der Filter fehlt in dem Moment nicht — die Ebene deckt die
     Seite ohnehin vollständig ab. */
  .nav:has(.nav__links.is-open),
  .nav.menu-offen{transform:none;backdrop-filter:none;background:transparent}
  .nav__links a{font-size:1.05rem;letter-spacing:.3em}
  .nav__act .btn{display:none}
}
@media (max-width:520px){.brand__txt{display:none}}

/* ── Hero ─────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 90px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:72% center;opacity:.92;will-change:transform}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ink) 4%,rgba(4,3,3,.9) 32%,rgba(4,3,3,.35) 62%,rgba(4,3,3,.55) 100%),
    linear-gradient(0deg,var(--ink) 2%,transparent 42%),
    linear-gradient(180deg,rgba(4,3,3,.85) 0,rgba(4,3,3,.35) 90px,transparent 170px),
    radial-gradient(70% 60% at 74% 42%,rgba(201,162,74,.14),transparent 65%)
}
/* canvas ist ein ersetztes Element: bei width:auto gewinnt die intrinsische
   Größe (300x150) und right/bottom werden ignoriert — daher explizit 100%. */
.hero__dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero__in{position:relative;z-index:2;width:100%}
.hero__h1{
  font-size:clamp(2.7rem,7.4vw,6.1rem);line-height:1.02;letter-spacing:-.005em;margin:0 0 1.5rem;max-width:15ch
}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__h1 .shine{
  background:var(--gold-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:shine 7s linear infinite
}
@keyframes shine{0%{background-position:180% 0}100%{background-position:-80% 0}}
.hero__h1 .ch{display:inline-block;transform:translateY(110%);opacity:0}
.hero__h1 .ch.in{transform:none;opacity:1;transition:transform .95s var(--ease-out),opacity .7s ease}
.hero__sub{max-width:52ch;font-size:clamp(1rem,1.45vw,1.14rem);color:var(--tx-2);margin-bottom:2.3rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:2.2rem}
.hero__chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.hero__chips li{
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2);
  border:1px solid var(--line-soft);border-radius:100px;padding:.55em 1.2em;
  background:rgba(255,255,255,.02);backdrop-filter:blur(6px)
}
.hero__chips li::before{content:"◆";color:var(--g-3);margin-right:.6em;font-size:.6em;vertical-align:1px}
.hero__scroll{
  position:absolute;bottom:76px;right:var(--pad);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--tx-3)
}
.hero__scroll i{width:1px;height:52px;background:linear-gradient(180deg,var(--g-3),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{
  content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;
  background:linear-gradient(180deg,transparent,var(--g-1));animation:scrolldot 2.4s var(--ease) infinite
}
@keyframes scrolldot{0%{top:-52px}70%,100%{top:52px}}
@media (max-width:800px){.hero__scroll{display:none}.hero__bg img{object-position:66% center}}
@media (max-width:620px){
  .eyebrow{flex-wrap:wrap;gap:.5rem .8rem;font-size:.66rem;letter-spacing:.2em}
  /* Der Punkt trennt zwei Aussagen. Ausgeblendet stand da
     „CREATOR-MANAGEMENT24/7 ERREICHBAR" in einem Wort — die Lücke zwischen
     zwei anonymen Flex-Elementen trägt nicht. Er bleibt, nur kleiner. */
  .eyebrow .dot{width:3px;height:3px}
}

.ticker{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:rgba(4,3,3,.55);backdrop-filter:blur(8px);overflow:hidden;padding:.85rem 0
}
.ticker__row{display:flex;gap:2.4rem;width:max-content;animation:tick 34s linear infinite;align-items:center}
.ticker__row span{font-family:var(--f-d);font-size:1.02rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-2)}
.ticker__row b{color:var(--g-3);font-size:.5rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── Sections ─────────────────────────────────────────── */
.sec{position:relative;padding:var(--sec-y) 0}
.sec--alt{background:linear-gradient(180deg,var(--ink),var(--ink-2) 45%,var(--ink))}
.sec--alt::before,.sec--alt::after{
  content:"";position:absolute;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-soft),transparent)
}
.sec--alt::before{top:0}.sec--alt::after{bottom:0}
/* Die Versprechen-Kacheln enden bereits mit einer eigenen Kante — eine zweite
   Linie direkt darunter wirkt wie ein Doppelstrich. */
#leistungen::before{display:none}
.sec__head{text-align:center;max-width:820px;margin:0 auto clamp(48px,6vw,80px)}
.sec__head h2{margin-bottom:0}

/* ── Stats ────────────────────────────────────────────── */
.stats{padding:clamp(48px,6vw,76px) 0;border-bottom:1px solid var(--line-soft);background:var(--ink-1)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.stat{text-align:center;position:relative}
.stat+.stat::before{
  content:"";position:absolute;left:calc(-1 * clamp(9px,1.5vw,20px));top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-soft),transparent)
}
.stat b{
  display:block;font-family:var(--f-d);font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:400;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.stat span{display:block;margin-top:.6rem;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-3)}
@media (max-width:700px){.stats__grid{grid-template-columns:repeat(2,1fr);gap:32px 18px}.stat:nth-child(3)::before{display:none}}

/* ── Split ────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(36px,6vw,88px);align-items:center}
.split__media{position:relative}
.frame{position:relative;overflow:hidden;border:1px solid var(--line-soft)}
.frame img{width:100%;aspect-ratio:4/3.4;object-fit:cover;will-change:transform;transform:scale(1.035)}
.frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(4,3,3,.55)),radial-gradient(80% 60% at 50% 0,rgba(201,162,74,.1),transparent)
}
.frame__corner{position:absolute;width:26px;height:26px;border:1px solid var(--g-3);opacity:.75;z-index:2}
.frame__corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.frame__corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.frame__corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.frame__corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.badge-quote{
  position:absolute;right:-14px;bottom:-26px;z-index:3;
  font-family:var(--f-d);font-size:clamp(1.1rem,2.1vw,1.55rem);color:var(--g-1);
  background:rgba(8,6,5,.9);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:1rem 1.5rem;box-shadow:0 20px 50px -22px rgba(0,0,0,.95)
}
/* Versprechen-Band unter dem Split */
.pledges{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:none;
  margin-top:clamp(52px,7vw,88px)
}
.pledge{
  background:var(--ink-1);padding:clamp(24px,2.6vw,32px);position:relative;
  box-shadow:0 0 0 1px var(--line-soft);transition:background .4s
}
.pledge::before{
  content:"";position:absolute;top:clamp(24px,2.6vw,32px);left:clamp(24px,2.6vw,32px);
  width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--g-3);background:rgba(201,162,74,.16)
}
.pledge:hover{background:var(--ink-3)}
.pledge b{
  display:block;font-family:var(--f-d);font-size:20px;line-height:normal;font-weight:400;color:var(--g-2);
  margin:1.9rem 0 .45rem
}
.pledge span{display:block;font-size:1.1rem;line-height:1.6;color:var(--tx-3)}
@media (max-width:900px){.pledges{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pledges{grid-template-columns:1fr}}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:56px}
  .badge-quote{right:16px;bottom:-20px}
}

/* ── Mosaic ───────────────────────────────────────────── */
/* Etwas breiter als der übrige Satzspiegel, aber nicht randlos: die Breite
   ist zusätzlich am Viewport gedeckelt, damit auf schmalen Fenstern nichts
   seitlich herausragt. */
.mosaic__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  /* Eine 1-Pixel-Fuge reichte nicht: die Motive sind alle hell und
     mediterran, dadurch liefen sie optisch ineinander. */
  gap:clamp(12px,1.6vw,26px);background:none;
  width:min(1560px,calc(100vw - 2 * var(--pad)));
  position:relative;left:50%;transform:translateX(-50%)
}
.mo{
  position:relative;margin:0;overflow:hidden;background:var(--ink-1);isolation:isolate;
  box-shadow:0 0 0 1px var(--line-soft)
}
.mo img{width:100%;aspect-ratio:3/4.1;object-fit:cover;opacity:.74;transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.mo::after{
  content:"";position:absolute;inset:0;z-index:1;transition:background .5s;
  background:linear-gradient(0deg,rgba(4,3,3,.96) 12%,rgba(4,3,3,.55) 48%,rgba(4,3,3,.25))
}
.mo:hover img{opacity:.95;transform:scale(1.06)}
.mo:hover::after{background:linear-gradient(0deg,rgba(4,3,3,.94) 10%,rgba(4,3,3,.4) 55%,rgba(201,162,74,.12))}
.mo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,28px)}
.mo b{
  display:block;font-family:var(--f-d);font-size:1.28rem;font-weight:400;color:var(--g-1);margin-bottom:.35rem;
  transition:transform .5s var(--ease)
}
/* `min-height` über drei Zeilen: vier verschiedene Sätze brechen bei jeder
   Fensterbreite anders um, und dann steht eine Kachel sichtbar kürzer da als
   ihre Nachbarn. Die Mindesthöhe reserviert überall denselben Platz, statt die
   Texte auf gut Glück auf gleiche Wortzahl zu trimmen. */
.mo span{display:block;font-size:1.1rem;line-height:1.55;color:var(--tx-2);opacity:.72;
  min-height:calc(3 * 1.55em);transition:opacity .5s var(--ease)}
.mo:hover span{opacity:1}
.mo:hover b{transform:translateY(-2px)}
/* Zwischen rund 900 und 1380 px sind die Kacheln so schmal, dass die längeren
   Texte auf vier Zeilen gehen, die kürzeren aber noch mit drei auskommen. In
   diesem Band reserviert die Mindesthöhe deshalb eine Zeile mehr. */
@media (min-width:901px) and (max-width:1380px){.mo span{min-height:calc(4 * 1.55em)}}
@media (max-width:900px){.mosaic__grid{grid-template-columns:1fr 1fr}.mo img{aspect-ratio:3/3.4}}
@media (max-width:520px){.mosaic__grid{grid-template-columns:1fr}.mo img{aspect-ratio:3/2.2}}

/* ── Band ─────────────────────────────────────────────── */
.band{position:relative;min-height:clamp(360px,46vw,520px);display:grid;place-items:center;overflow:hidden;text-align:center}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:.72;will-change:transform}
.band::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,3,3,.55) 0,rgba(4,3,3,.06) 26%,rgba(4,3,3,.5) 62%,var(--ink) 100%),
    radial-gradient(60% 60% at 50% 50%,rgba(201,162,74,.08),transparent 70%)
}
.band__in{position:relative;z-index:2;isolation:isolate}
/* enger Schleier direkt hinter der Zeile — die Gesichter bleiben frei */
.band__in::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(760px,90%);height:250px;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(4,3,3,.7),rgba(4,3,3,.3) 58%,transparent 76%)
}
.band h2{margin:.6rem 0 0}
.band .lead{max-width:46ch;margin:0 auto;color:var(--tx-2)}
.band .ornament{justify-content:center;margin-top:1.6rem}

/* ── Cards ────────────────────────────────────────────── */
/* Trennlinien gehören zur Kachel, nicht zum Raster: sonst leuchtet der
   Container-Hintergrund als heller Block durch, solange die Kacheln noch
   per Scroll-Animation auf opacity:0 stehen. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:none}
.card{
  position:relative;padding:clamp(22px,2.4vw,28px) clamp(20px,2.2vw,26px) clamp(24px,2.6vw,30px);
  background:var(--ink-1);overflow:hidden;box-shadow:0 0 0 1px var(--line-soft);
  transition:background .45s var(--ease),transform .45s var(--ease);
  transform-style:preserve-3d
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(110% 90% at 50% 110%,rgba(201,162,74,.13),transparent 65%)
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:var(--gold-grad);transition:transform .55s var(--ease)
}
/* Lupe statt 3D-Kippen: das Kippen sah zwar edel aus, verzerrte den Text aber
   genau dann, wenn man ihn lesen will. Die ganze Kachel wächst, hebt sich über
   ihre Nachbarn und bekommt einen Schatten, damit klar ist, was oben liegt. */
.card:hover{background:var(--ink-3);transform:scale(1.1);z-index:3;
  box-shadow:0 0 0 1px var(--line),0 26px 60px -26px rgba(0,0,0,.95)}
.card{will-change:transform}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card__ico{width:40px;height:40px;margin-bottom:1rem;position:relative}
.card__ico svg{
  width:100%;height:100%;fill:none;stroke:var(--g-3);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s;
  overflow:visible   /* SVG clippt sonst am Viewport — Skalier-/Hüpf-Animationen würden oben abgeschnitten */
}
.card:hover .card__ico svg{stroke:var(--g-1)}
.card h3{margin-bottom:.5rem;color:var(--tx);font-size:1.18rem}
.card p{
  margin:0;font-size:.87rem;color:var(--tx-3);line-height:1.62;
  min-height:calc(3 * 1.62em)   /* alle Kacheln gleich hoch, egal wie der Text bricht */
}
/* Folgeabsätze brauchen die Mindesthöhe nicht — sonst wächst eine Kachel mit
   drei Absätzen auf die neunfache Zeilenhöhe, obwohl der Text kürzer ist. */
.card p + p{min-height:0;margin-top:.62rem}
.card>*{position:relative;z-index:1}
#leistungen .sec__head{margin-bottom:clamp(32px,3.6vw,48px)}

/* ── Icons: Lucide (ISC), je Icon eine eigene Hover-Animation ──────
   Technik wie bei den animierten Lucide-Sets: transform-box:fill-box,
   eigener transform-origin je Pfad, Nachzeichnen über pathLength="1". */
.card__ico svg *{transform-box:fill-box;transform-origin:50% 50%}
.card__ico [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}

/* Häkchen zeichnen sich beim Hover */
.card:hover [pathLength]{animation:icoDraw .5s .12s var(--ease) backwards}
@keyframes icoDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* 1 Persönliche Betreuung — Kopf nickt, Häkchen zeichnet */
.card[data-icon="user-round-check"]:hover .p2{animation:icoNod .7s var(--ease)}

/* 2 Chatting — Punkte blinken nacheinander, Blase atmet */
.card[data-icon="message-circle-more"]:hover .p1{animation:icoBreathe .9s var(--ease)}
.card[data-icon="message-circle-more"]:hover .p2{animation:icoBlink .95s ease-in-out infinite}
.card[data-icon="message-circle-more"]:hover .p3{animation:icoBlink .95s .16s ease-in-out infinite}
.card[data-icon="message-circle-more"]:hover .p4{animation:icoBlink .95s .32s ease-in-out infinite}

/* 3 Kostenübernahme — Münzen springen versetzt, Hand hebt sich */
.card[data-icon="hand-coins"]:hover .p1,
.card[data-icon="hand-coins"]:hover .p2,
.card[data-icon="hand-coins"]:hover .p3{animation:icoLift .7s var(--ease)}
.card[data-icon="hand-coins"]:hover .p4{animation:icoCoin .75s .05s var(--ease)}
.card[data-icon="hand-coins"]:hover .p5{animation:icoCoin .75s .2s var(--ease)}

/* 4 Steuern & Recht — die Waage wiegt sich ein */
.card[data-icon="scale"]:hover .p3{animation:icoTip 1.1s var(--ease)}
.card[data-icon="scale"]:hover .p2{animation:icoPanA 1.1s var(--ease)}
.card[data-icon="scale"]:hover .p4{animation:icoPanB 1.1s var(--ease)}

/* 5 Alltag — Blatt atmet, Häkchen zeichnet */
.card[data-icon="calendar-check"]:hover .p3{animation:icoBreathe .8s var(--ease)}
.card[data-icon="calendar-check"]:hover .p1{animation:icoNudge .6s var(--ease)}
.card[data-icon="calendar-check"]:hover .p2{animation:icoNudge .6s .08s var(--ease)}

/* 6 Strategie — Ringe pulsen nach außen, Mitte trifft */
.card[data-icon="target"]:hover .p1{animation:icoRing 1.25s var(--ease) infinite}
.card[data-icon="target"]:hover .p2{animation:icoRing 1.25s .24s var(--ease) infinite}
.card[data-icon="target"]:hover .p3{animation:icoPop .55s var(--ease)}

/* 7 Markenaufbau — Stern dreht, Funken blitzen */
.card[data-icon="sparkles"]:hover .p1{animation:icoSpin .9s var(--ease)}
.card[data-icon="sparkles"]:hover .p2{animation:icoTwinkle 1s .1s ease-in-out infinite}
.card[data-icon="sparkles"]:hover .p3{animation:icoTwinkle 1s .3s ease-in-out infinite}
.card[data-icon="sparkles"]:hover .p4{animation:icoPop .6s .15s var(--ease) backwards}

/* 8 Content — Auslöser klickt */
.card[data-icon="camera"]:hover .p2{animation:icoShutter .65s var(--ease)}
.card[data-icon="camera"]:hover .p1{animation:icoShake .55s var(--ease)}

/* 9 Produktion — die Klappe schlägt zu */
.card[data-icon="clapperboard"]:hover .p2{animation:icoClap .75s var(--ease);transform-origin:8% 100%}
.card[data-icon="clapperboard"]:hover .p1{animation:icoClap .75s var(--ease);transform-origin:0% 100%}
.card[data-icon="clapperboard"]:hover .p4{animation:icoClap .75s var(--ease);transform-origin:0% 100%}

/* 10 Netzwerk — der Meridian dreht sich */
.card[data-icon="globe"]:hover .p2{animation:icoMeridian 2.2s linear infinite}
.card[data-icon="globe"]:hover .p1{animation:icoBreathe 1s var(--ease)}

/* 11 Diskretion — Schild atmet, Häkchen zeichnet */
.card[data-icon="shield-check"]:hover .p1{animation:icoBreathe .8s var(--ease)}

/* 12 Exklusive Chancen — der Schliff funkelt */
.card[data-icon="gem"]:hover .p2{animation:icoBreathe .85s var(--ease)}
.card[data-icon="gem"]:hover .p1{animation:icoFacet .9s var(--ease)}
.card[data-icon="gem"]:hover .p3{animation:icoSweep .8s var(--ease)}

@keyframes icoNod{0%,100%{transform:none}30%{transform:translateY(-1.5px) rotate(-8deg)}65%{transform:rotate(5deg)}}
@keyframes icoBlink{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.5);opacity:1}}
@keyframes icoBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes icoLift{0%,100%{transform:none}45%{transform:translateY(-1.5px)}}
@keyframes icoCoin{0%{transform:translateY(4px) scale(.4);opacity:0}60%{transform:translateY(-1.5px) scale(1.12);opacity:1}100%{transform:none;opacity:1}}
@keyframes icoTip{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}65%{transform:rotate(-4deg)}}
@keyframes icoPanA{0%,100%{transform:translateY(0)}30%{transform:translateY(1.6px)}65%{transform:translateY(-1.1px)}}
@keyframes icoPanB{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.6px)}65%{transform:translateY(1.1px)}}
@keyframes icoNudge{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}}
@keyframes icoRing{0%{transform:scale(.84);opacity:.3}70%{transform:scale(1.14);opacity:1}100%{transform:scale(1.26);opacity:0}}
@keyframes icoPop{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes icoSpin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(200deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
@keyframes icoTwinkle{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.35);opacity:1}}
@keyframes icoShutter{0%,100%{transform:scale(1)}40%{transform:scale(.32)}72%{transform:scale(1.13)}}
@keyframes icoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.4px)}75%{transform:translateX(1.4px)}}
@keyframes icoClap{0%,100%{transform:rotate(0)}40%{transform:rotate(-16deg)}}
@keyframes icoMeridian{0%{transform:scaleX(1)}25%{transform:scaleX(.1)}50%{transform:scaleX(1)}75%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
@keyframes icoFacet{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.9)}}
@keyframes icoSweep{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.5);opacity:.4}}

/* ── Netzwerk ─────────────────────────────────────────── */
.net{overflow:hidden}
.net__glow{
  position:absolute;top:20%;left:50%;transform:translateX(-50%);width:min(900px,110%);height:600px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,74,.09),transparent 70%);pointer-events:none
}
.net__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.net__globe{position:relative}
.orb{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orb img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%)
}
.orb__ring{
  position:absolute;border:1px solid var(--line-soft);border-radius:50%;
  animation:spin 26s linear infinite
}
.orb__ring.r1{inset:6%;border-top-color:rgba(235,213,165,.5)}
.orb__ring.r2{inset:-3%;border-left-color:rgba(201,162,74,.45);animation-duration:38s;animation-direction:reverse}
.orb__ring.r3{inset:-13%;border-bottom-color:rgba(185,138,94,.4);animation-duration:52s}
@keyframes spin{to{transform:rotate(360deg)}}
.cities{position:absolute;inset:0;pointer-events:none}
.city{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap;
  opacity:0;animation:cityIn .9s var(--ease) forwards
}
.city::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--g-1);
  box-shadow:0 0 0 0 rgba(235,213,165,.6);animation:pulse 2.6s ease-out infinite
}
@keyframes cityIn{to{opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(235,213,165,.55)}70%,100%{box-shadow:0 0 0 12px rgba(235,213,165,0)}}
.roles{list-style:none;padding:0;margin:0 0 2.2rem;display:grid;gap:1px;background:none}
.roles li{
  background:var(--ink-1);padding:1.35rem 1.5rem;transition:background .4s;
  box-shadow:0 0 0 1px var(--line-soft)
}
.roles li:hover{background:var(--ink-3)}
.roles b{display:block;font-family:var(--f-d);font-size:1.22rem;font-weight:400;color:var(--g-2);margin-bottom:.25rem}
.roles span{font-size:1rem;color:var(--tx-3)}
.net__cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.net__cta p{margin:0;font-family:var(--f-d);font-size:1.3rem;color:var(--tx-2)}
@media (max-width:900px){.net__grid{grid-template-columns:1fr;gap:56px}.orb{max-width:420px;margin-inline:auto}}
@media (max-width:620px){.city{font-size:.52rem;letter-spacing:.14em}.city::before{width:5px;height:5px}}

/* ── Steps ────────────────────────────────────────────── */
/* Boxen wechseln die Seite, dürfen sich also vertikal überlappen —
   das drückt die Section spürbar zusammen. */
.steps{position:relative;max-width:940px;margin-inline:auto;display:grid;gap:0}
.step + .step{margin-top:clamp(-38px,-2.6vw,-14px)}
.steps__path{position:absolute;left:50%;top:0;bottom:0;width:4px;height:100%;transform:translateX(-50%);overflow:visible}
.steps__track{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.steps__fill{
  stroke:url(#gPre);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 4px rgba(201,162,74,.8))
}
.step{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(18px,3vw,38px)}
.step__dot{
  grid-column:2;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--ink);position:relative;z-index:2;transition:border-color .5s,box-shadow .5s
}
.step__dot span{font-family:var(--f-d);font-size:1.02rem;color:var(--g-3);transition:color .5s}
.step.is-lit .step__dot{border-color:var(--g-3);box-shadow:0 0 0 5px rgba(201,162,74,.09),0 0 26px -4px rgba(201,162,74,.6)}
.step.is-lit .step__dot span{color:var(--g-1)}
.step__box{
  grid-column:3;background:var(--ink-1);border:1px solid var(--line-soft);padding:clamp(18px,2vw,24px);
  position:relative;transition:border-color .5s,transform .5s var(--ease)
}
.step__box--r{grid-column:1;text-align:right}
/* Querstrich vom Punkt zum Kasten */
.step__box::before{
  content:"";position:absolute;top:50%;height:1px;width:clamp(18px,3vw,38px);
  left:calc(-1 * clamp(18px,3vw,38px));background:var(--line-soft);
  opacity:0;transform:scaleX(.2);transform-origin:left center;
  transition:opacity .5s var(--ease),transform .6s var(--ease),background .5s
}
.step__box--r::before{
  left:auto;right:calc(-1 * clamp(18px,3vw,38px));transform-origin:right center
}
.step.is-lit .step__box::before{opacity:1;transform:scaleX(1);background:var(--line)}
.step.is-lit .step__box{border-color:var(--line)}
.step__box h3{color:var(--g-2);margin-bottom:.4rem;font-size:1.22rem}
.step__box p{margin:0 0 .6rem;font-size:1rem;line-height:1.6;color:var(--tx-3)}
/* Die Punkte A) bis E) der Bewerbung stehen je auf einer Zeile, wie vorgegeben. */
.step__box ol.schritte{margin:.2rem 0 .7rem;padding:0;list-style:none;display:grid;gap:.28rem}
.step__box ol.schritte li{font-size:.95rem;line-height:1.5;color:var(--tx-3)}
.step__box ol.schritte li b{color:var(--g-2);font-weight:400;margin-right:.45em}
.step__box p.merke{color:var(--g-2);letter-spacing:.04em}
.step__box em{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-4);font-style:normal}
@media (max-width:820px){
  .steps{gap:18px}
  .step + .step{margin-top:0}   /* einspaltig — hier würde Überlappung kollidieren */
  /* einspaltig sitzt der Punkt immer links, also auch der Querstrich */
  .step__box--r::before{left:calc(-1 * 20px);right:auto;transform-origin:left center}
  .steps__path{left:27px;transform:none}
  .step{grid-template-columns:56px 1fr;gap:20px}
  .step__dot{grid-column:1}
  .step__box,.step__box--r{grid-column:2;text-align:left}
  .step__box--r{order:2}
}

/* ── Support 24/7 ─────────────────────────────────────── */
.support{overflow:hidden}
.support__bg{position:absolute;inset:0;z-index:0}
.support__bg img{width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:.5;will-change:transform}
.support__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 8%,rgba(4,3,3,.86) 45%,rgba(4,3,3,.4)),linear-gradient(0deg,var(--ink),transparent 45%)
}
.support__in{position:relative;z-index:1}
.support__card{max-width:600px}
.support__card h2{margin:.7rem 0 1.2rem}
.support__card p{color:var(--tx-2);max-width:50ch;font-size:1.1rem;line-height:1.65}
.live{
  display:inline-flex;align-items:center;gap:.7rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-2);border:1px solid var(--line-soft);border-radius:100px;padding:.5em 1.1em;background:rgba(255,255,255,.02)
}
.live b{color:var(--g-2);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.live__dot{width:7px;height:7px;border-radius:50%;background:#6ee39b;box-shadow:0 0 0 0 rgba(110,227,155,.6);animation:pulse2 2.4s ease-out infinite}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(110,227,155,.5)}70%,100%{box-shadow:0 0 0 10px rgba(110,227,155,0)}}
.support__cta{display:flex;flex-wrap:wrap;gap:14px;margin:1.9rem 0 1.6rem}
.support__pills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
/* `flex:0 0 auto` ist hier keine Formsache: Flex-Elemente schrumpfen von sich
   aus unter ihre Inhaltsbreite, sobald die Zeile eng wird. Mit der größeren
   Schrift passten die vier Sprachen nicht mehr nebeneinander — die Pillen
   wurden gestaucht und der Text lief oben über den Rand hinaus. Jetzt behalten
   sie ihre Breite und brechen stattdessen um. */
.support__pills li{
  flex:0 0 auto;white-space:nowrap;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);
  border:1px solid var(--line);padding:.62em 1.5em;border-radius:100px;background:rgba(255,255,255,.02);
  /* Der Buchstabenabstand hängt hinter dem letzten Zeichen nach und schöbe
     den Text sonst sichtbar aus der Mitte. */
  text-indent:.1em
}

/* ── Rechner ──────────────────────────────────────────── */
.calc__box{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,4vw,64px);
  border:1px solid var(--line-soft);background:var(--ink-1);padding:clamp(28px,4vw,52px)
}
.ctl{display:block;margin-bottom:2.1rem}
.ctl:last-child{margin-bottom:0}
.ctl__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.ctl__top b{font-weight:400;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-2)}
.ctl__top i{font-style:normal;font-family:var(--f-d);font-size:1.06rem;color:var(--g-2)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(201,162,74,.2);
  outline:none;cursor:pointer
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--g-2);
  border:1px solid var(--g-1);box-shadow:0 0 14px rgba(201,162,74,.75);transition:transform .2s
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.22)}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--g-2);border:1px solid var(--g-1);
  box-shadow:0 0 14px rgba(201,162,74,.75)
}
.calc__out{text-align:center;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line-soft);padding-left:clamp(20px,3vw,44px)}
.calc__label{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-3);margin-bottom:.9rem}
.calc__num{
  display:flex;align-items:baseline;justify-content:center;gap:.3rem;
  font-family:var(--f-d);font-size:clamp(2rem,4.2vw,3rem);line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums
}
.calc__num i{
  font-style:normal;font-size:.62em;color:var(--g-3);-webkit-text-fill-color:var(--g-3);
  padding:0 .12em;position:relative;top:-.08em
}
.calc__num b{font-weight:400;font-size:.55em}
.calc__sub{font-size:.72rem;letter-spacing:.14em;color:var(--tx-3);margin:.6rem 0 1.4rem}
.calc__bar{height:2px;background:rgba(201,162,74,.16);overflow:hidden;margin-bottom:1.4rem}
.calc__bar i{display:block;height:100%;width:20%;background:var(--gold-grad);transition:width .6s var(--ease);box-shadow:0 0 12px rgba(201,162,74,.7)}
.calc__note{font-size:.72rem;line-height:1.65;color:var(--tx-3);margin:0;opacity:.8}
@media (max-width:840px){
  .calc__box{grid-template-columns:1fr}
  .calc__out{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;padding-top:32px}
}

/* ── Stimmen ──────────────────────────────────────────── */
.slider{max-width:900px;margin-inline:auto}
.slider__view{overflow:hidden;cursor:grab}
.slider__view.is-drag{cursor:grabbing}
.slider__track{display:flex;transition:transform .8s var(--ease-out)}
.quote{flex:0 0 100%;padding:0 clamp(6px,2vw,26px);text-align:center;position:relative}
.quote__mark{
  font-family:var(--f-d);font-size:6rem;line-height:.6;color:rgba(201,162,74,.3);margin-bottom:.4rem;user-select:none
}
.quote p{font-family:var(--f-d);font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.55;color:var(--tx);max-width:44ch;margin:0 auto 2rem}
.quote footer{display:flex;align-items:center;justify-content:center;gap:1rem}
.quote footer img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line);filter:saturate(.85)}
.quote footer div{text-align:left}
.quote footer b{display:block;font-weight:400;font-size:.9rem;color:var(--g-2);letter-spacing:.06em}
.quote footer span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.slider__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:2.6rem}
.slider__nav button{
  width:42px;height:42px;border:1px solid var(--line-soft);border-radius:50%;color:var(--g-3);
  display:grid;place-items:center;transition:all .35s var(--ease)
}
.slider__nav button:hover{border-color:var(--g-3);color:var(--g-1);transform:translateY(-2px)}
.slider__dots{display:flex;gap:9px}
.slider__dots button{width:7px;height:7px;border-radius:50%;background:rgba(201,162,74,.28);transition:all .35s}
.slider__dots button.is-on{background:var(--g-2);box-shadow:0 0 10px rgba(235,213,165,.7);width:22px;border-radius:100px}

/* ── FAQ ──────────────────────────────────────────────── */
.faq__wrap{max-width:900px}
.faq__col{min-width:0}
@media (min-width:960px){
  .faq__wrap{max-width:1160px}
  .faq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--f-d);font-size:clamp(1.1rem,1.9vw,1.4rem);color:var(--tx);transition:color .3s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--g-2)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:6px;top:50%;background:var(--g-3);transition:transform .4s var(--ease),background .3s
}
.faq summary::after{width:15px;height:1px;transform:translateY(-50%)}
.faq summary::before{width:1px;height:15px;right:13px;transform:translateY(-50%)}
.faq details[open] summary{color:var(--g-1)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details>div{overflow:hidden}
.faq details>div p{margin:0;padding:0 3rem 1.7rem 0;color:var(--tx-3);font-size:.95rem;max-width:70ch}

/* ── Bewerbung ────────────────────────────────────────── */
.apply{overflow:hidden}
.apply__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0,rgba(201,162,74,.1),transparent 60%)
}
.apply__bg{position:absolute;top:0;right:0;bottom:0;width:min(46%,620px);pointer-events:none;overflow:hidden}
.apply__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.3;will-change:transform;
  mask-image:linear-gradient(270deg,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(270deg,#000,transparent 82%)
}
@media (max-width:1100px){.apply__bg{display:none}}
.form-shell{
  position:relative;display:grid;grid-template-columns:290px 1fr;
  border:1px solid var(--line);background:var(--ink-1);
  box-shadow:0 50px 120px -60px rgba(0,0,0,1),0 0 0 1px rgba(201,162,74,.05) inset
}
.form-shell__side{
  padding:clamp(28px,3.4vw,42px);border-right:1px solid var(--line-soft);
  background:linear-gradient(160deg,rgba(201,162,74,.05),transparent 55%);
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem
}
.fs-progress__bar{height:2px;background:rgba(201,162,74,.16);margin-bottom:2rem;overflow:hidden}
.fs-progress__bar i{display:block;height:100%;width:20%;background:var(--gold-grad);transition:width .6s var(--ease);box-shadow:0 0 12px rgba(201,162,74,.75)}
.fs-steps{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem;counter-reset:s}
.fs-steps li{display:flex;align-items:center;gap:.85rem;color:var(--tx-3);transition:color .4s}
.fs-steps li b{
  width:28px;height:28px;flex:0 0 28px;border:1px solid var(--line-soft);border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-d);font-size:.82rem;font-weight:400;
  transition:all .4s var(--ease)
}
.fs-steps li span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.fs-steps li.is-on{color:var(--g-1)}
.fs-steps li.is-on b{border-color:var(--g-3);background:rgba(201,162,74,.1);box-shadow:0 0 20px -6px rgba(201,162,74,.8)}
.fs-steps li.is-done{color:var(--g-4)}
.fs-steps li.is-done b{border-color:var(--g-4);background:var(--g-4);color:#0b0805}
.fs-side__foot{display:grid;gap:.6rem}
.fs-secure{display:flex;gap:.6rem;align-items:flex-start;font-size:.68rem;line-height:1.5;color:var(--tx-3);margin:0}
.fs-secure svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--g-3);stroke-width:1.3;margin-top:2px}
.fs-draft{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g-4);margin:0;min-height:1em;opacity:0;transition:opacity .4s}
.fs-draft.is-on{opacity:1}

.form{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;min-height:560px}
.fstep{display:none;border:0;padding:0;margin:0;min-width:0;animation:stepIn .55s var(--ease-out)}
.fstep.is-active{display:block}
.fstep.is-back{animation:stepInBack .55s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.fstep legend{
  font-family:var(--f-d);font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--tx);
  display:block;width:100%;padding:0;margin-bottom:1.7rem
}
.fhint{font-size:.82rem;color:var(--tx-3);margin:-.6rem 0 1.5rem}
.row{display:grid;gap:1.15rem}
.row--2{grid-template-columns:1fr 1fr}
.f{display:block;margin-bottom:1.35rem;position:relative}
.f>span{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin-bottom:.6rem}
.f .opt{font-style:normal;text-transform:none;letter-spacing:.04em;color:var(--tx-3);font-size:.92em;margin-left:.5em}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=url],.f input[type=date],.f textarea{
  width:100%;background:rgba(255,255,255,.022);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:.95rem 1.05rem;color:var(--tx);font-size:.95rem;font-weight:300;
  transition:border-color .35s,background .35s,box-shadow .35s
}
.f textarea{resize:vertical;min-height:110px;line-height:1.65}
.f input::placeholder,.f textarea::placeholder{color:rgba(126,116,102,.7)}
.f input:focus,.f textarea:focus{
  outline:none;border-color:var(--g-3);background:rgba(201,162,74,.05);
  box-shadow:0 0 0 3px rgba(201,162,74,.08)
}
.f input[type=date]{color-scheme:dark}
.f--pre .pre{display:flex;align-items:center;border:1px solid var(--line-soft);border-radius:var(--r);background:rgba(255,255,255,.022);transition:border-color .35s,background .35s}
.f--pre .pre:focus-within{border-color:var(--g-3);background:rgba(201,162,74,.05)}
.f--pre .pre i{font-style:normal;padding:0 .2rem 0 1.05rem;color:var(--g-4);font-size:.95rem}
.f--pre .pre input{border:0!important;background:none!important;box-shadow:none!important;padding-left:.2rem}
.f .err{
  display:block;font-style:normal;font-size:.7rem;color:#e08585;letter-spacing:.06em;
  margin-top:.4rem;min-height:0;opacity:0;transition:opacity .3s
}
.f.is-bad input,.f.is-bad textarea,.f.is-bad .pre{border-color:rgba(224,133,133,.55)}
.f.is-bad .err{opacity:1}
.f .count{
  position:absolute;right:2px;bottom:-1.2rem;font-style:normal;font-size:.66rem;color:var(--tx-3);letter-spacing:.1em
}
.f .hint{
  display:block;font-style:normal;font-size:.72rem;letter-spacing:.04em;margin-top:.45rem;
  color:var(--g-2);opacity:0;transition:opacity .3s
}
.f .hint.is-on{opacity:1}
.f .hint.is-bad{color:#e08585}
#refcode{text-transform:uppercase;letter-spacing:.18em}
.f:has(.count){margin-bottom:2.2rem}
.range{margin-top:.4rem}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-size:.72rem;letter-spacing:.1em;color:var(--tx-2);border:1px solid var(--line-soft);
  border-radius:100px;padding:.62em 1.15em;background:rgba(255,255,255,.02);
  transition:all .32s var(--ease);position:relative;overflow:hidden
}
.chip:hover{border-color:rgba(201,162,74,.45);color:var(--g-1);transform:translateY(-1px)}
.chip.is-on{
  border-color:var(--g-3);color:var(--g-1);background:rgba(201,162,74,.13);
  box-shadow:0 0 18px -6px rgba(201,162,74,.85)
}
.chip.is-on::before{content:"✓";margin-right:.5em;font-size:.85em;color:var(--g-2)}

.drop{
  position:relative;border:1px dashed rgba(201,162,74,.32);border-radius:var(--r);
  padding:clamp(30px,4vw,48px) 24px;text-align:center;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.014);transition:border-color .4s,background .4s,transform .4s var(--ease)
}
.drop:hover,.drop:focus-visible{border-color:var(--g-3);background:rgba(201,162,74,.05)}
.drop.is-over{border-color:var(--g-1);background:rgba(201,162,74,.1);transform:scale(1.012)}
.drop__ico{width:40px;height:40px;margin:0 auto .9rem}
.drop__ico svg{width:100%;height:100%;fill:none;stroke:var(--g-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-family:var(--f-d);font-size:1.2rem;font-weight:400;color:var(--tx);margin-bottom:.4rem}
.drop span{font-size:.74rem;letter-spacing:.06em;color:var(--tx-3)}
.drop u{color:var(--g-2);text-underline-offset:3px}
.drop__beam{
  position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(235,213,165,.16),transparent 70%);
  transform:translateX(-100%)
}
.drop.is-over .drop__beam{opacity:1;animation:beam 1.1s linear infinite}
@keyframes beam{to{transform:translateX(100%)}}

.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:1.1rem}
.files:empty{margin:0}
.file{
  position:relative;aspect-ratio:1;border:1px solid var(--line-soft);overflow:hidden;background:var(--ink-2);
  animation:popIn .45s var(--ease-out)
}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.file img,.file video{width:100%;height:100%;object-fit:cover}
.file__meta{
  position:absolute;left:0;right:0;bottom:0;padding:.5rem .55rem;font-size:.58rem;letter-spacing:.05em;
  color:var(--tx-2);background:linear-gradient(0deg,rgba(4,3,3,.94),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.file__x{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(4,3,3,.8);border:1px solid var(--line-soft);color:var(--g-2);
  display:grid;place-items:center;font-size:.8rem;line-height:1;transition:all .3s
}
.file__x:hover{background:var(--g-3);color:#000;border-color:var(--g-3)}
.file--doc{display:grid;place-items:center;color:var(--g-4);font-size:.7rem;text-align:center;padding:1rem}

.check{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.15rem;cursor:pointer;font-size:.84rem;color:var(--tx-2);line-height:1.6}
.check input{position:absolute;opacity:0;width:0;height:0}
.check i{
  width:19px;height:19px;flex:0 0 19px;border:1px solid var(--line);border-radius:2px;margin-top:2px;
  position:relative;transition:all .3s var(--ease)
}
.check i::after{
  content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid #120C04;
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);transition:transform .28s var(--ease)
}
.check input:checked+i{background:var(--gold-grad);border-color:var(--g-2)}
.check input:checked+i::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible+i{outline:1px solid var(--g-3);outline-offset:3px}
.check.is-bad i{border-color:rgba(224,133,133,.7)}
.check a{color:var(--g-2);text-decoration:underline;text-underline-offset:3px}
#finalErr{color:#e08585;margin:1rem 0 0;min-height:1.2em}

.form__nav{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:2.2rem;border-top:1px solid var(--line-soft)}
.form__spacer{flex:1}
.form__count{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
.btn.is-busy{pointer-events:none;opacity:.7}
.btn.is-busy span::after{content:"";display:inline-block;width:.8em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (max-width:860px){
  .form-shell{grid-template-columns:1fr}
  .form-shell__side{border-right:0;border-bottom:1px solid var(--line-soft);flex-direction:row;align-items:center;flex-wrap:wrap}
  .fs-progress{flex:1;min-width:230px}
  .fs-steps{grid-template-columns:repeat(5,auto);display:flex;gap:.6rem;flex-wrap:wrap}
  .fs-steps li span{display:none}
  .fs-side__foot{flex:1;min-width:200px}
  .form{min-height:0}
}
@media (max-width:560px){.row--2{grid-template-columns:1fr}.form__count{display:none}}

/* ── Success takeover ─────────────────────────────────── */
.done{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:24px}
.done[hidden]{display:none}
.done::before{content:"";position:absolute;inset:0;background:rgba(3,2,2,.93);backdrop-filter:blur(14px);animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.done__fx{position:absolute;inset:0;width:100%;height:100%}
.done__card{
  position:relative;text-align:center;max-width:560px;padding:clamp(32px,5vw,56px);
  border:1px solid var(--line);background:rgba(9,7,6,.85);
  box-shadow:0 60px 140px -60px #000,0 0 90px -40px rgba(201,162,74,.4);
  animation:doneIn .9s var(--ease-out)
}
@keyframes doneIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.done__seal{width:88px;height:88px;margin:0 auto 1.4rem}
.seal__ring{
  fill:none;stroke:var(--g-3);stroke-width:1.4;stroke-dasharray:327;stroke-dashoffset:327;
  animation:draw2 1.1s .2s var(--ease) forwards
}
.seal__check{
  fill:none;stroke:var(--g-1);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:70;stroke-dashoffset:70;animation:draw2 .6s .9s var(--ease) forwards;
  filter:drop-shadow(0 0 6px rgba(235,213,165,.8))
}
@keyframes draw2{to{stroke-dashoffset:0}}
.done__card h2{margin:.4rem 0 1.1rem}
.done__txt{color:var(--tx-2);max-width:44ch;margin-inline:auto}
.done__txt b{color:var(--g-2);font-weight:400}
.done__ref{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1.9rem}
.done__ref b{color:var(--g-2);font-weight:400}
.done__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Footer ───────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-soft);background:var(--ink-1);padding:clamp(56px,7vw,88px) 0 2rem}
.foot__top{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(36px,5vw,72px);padding-bottom:clamp(36px,5vw,60px)}
.foot__brand .mono{width:64px;margin-bottom:1.2rem}
.foot__claim{font-family:var(--f-d);font-size:.92rem;letter-spacing:.28em;text-transform:uppercase;color:var(--tx-3);margin:0}
.foot__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.foot__nav h4{font-family:var(--f-b);font-size:.64rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--g-3);margin-bottom:1.1rem}
.foot__nav a{display:block;font-size:.86rem;color:var(--tx-3);padding:.32rem 0;transition:color .3s}
.foot__nav a:hover{color:var(--g-2)}
.foot__note{display:block;font-size:.7rem;color:var(--g-4);margin-top:.6rem;letter-spacing:.1em}
.foot__bot{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  padding-top:1.8rem;border-top:1px solid var(--line-soft);font-size:.72rem;color:var(--tx-3)
}
.foot__bot p{margin:0}
.foot__bot nav{display:flex;gap:1.4rem}
.foot__bot a{transition:color .3s}
.foot__bot a:hover{color:var(--g-2)}
.foot__age{letter-spacing:.1em;color:var(--g-4)}
@media (max-width:760px){.foot__top{grid-template-columns:1fr}.foot__nav{grid-template-columns:1fr 1fr}}

/* ── Reveal ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .95s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero__h1 .ch{opacity:1;transform:none}
  .cursor{display:none}
  /* Ausnahme fürs Laufband. Die Pauschalregel darüber hielt es komplett an —
     die Seite wirkte dann kaputt, obwohl nur eine Systemeinstellung aktiv war.
     Ein langsamer, gleichförmiger Textlauf ohne Richtungswechsel ist nicht das,
     wovor die Einstellung schützen soll; „reduziert" heißt hier deshalb
     dreimal langsamer statt angehalten. */
  .ticker__row{animation-duration:100s!important;animation-iteration-count:infinite!important}
}

/* ══ VERGLEICH ═══════════════════════════════════════════════
   Bewusst keine echte <table>: die Zeilen brechen auf dem Handy
   untereinander um, und dafür braucht es freie Anordnung. Die Spalte
   bleibt trotzdem lesbar, weil jede Zelle über data-l ihre Überschrift
   mitbringt. */
.vgl__tab{
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)
}
.vgl__kopf,.vgl__zeile{
  display:grid;grid-template-columns:minmax(150px,1fr) 1.25fr 1.25fr;
  align-items:stretch;gap:0
}
.vgl__kopf{border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.vgl__spalte{
  padding:1.1rem 1.4rem;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-2);align-self:center
}
.vgl__spalte--wir{position:relative}
.vgl__spalte--wir b{letter-spacing:.22em;font-weight:400}
/* Die Velvet-Spalte durchgehend hervorheben, damit das Auge sie als Einheit
   liest statt als sieben einzelne Zellen. */
.vgl__spalte--wir::before,.vgl__zelle--wir::before{
  content:'';position:absolute;inset:0;background:rgba(201,162,74,.045);
  border-left:1px solid rgba(201,162,74,.22);border-right:1px solid rgba(201,162,74,.22);pointer-events:none
}
.vgl__zeile{border-top:1px solid var(--line-soft)}
.vgl__zeile:first-of-type{border-top:0}
.vgl__was{
  padding:1.15rem 1.4rem;font-size:1.02rem;font-weight:500;color:var(--tx);align-self:center;
  border-right:1px solid var(--line-soft)
}
.vgl__zelle{
  position:relative;display:flex;align-items:flex-start;gap:.85rem;
  padding:1.15rem 1.4rem;font-size:.86rem;color:var(--tx-3);line-height:1.5
}
.vgl__zelle--wir{color:var(--tx);z-index:0}
.vgl__zelle--wir > *{position:relative;z-index:1}

.vgl__ico{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;margin-top:.05rem;
  display:grid;place-items:center;position:relative;z-index:1
}
.vgl__ico::before,.vgl__ico::after{content:'';position:absolute;border-radius:2px}
/* Graues Kreuz */
.vgl__ico--nein{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.vgl__ico--nein::before,.vgl__ico--nein::after{
  width:10px;height:1.4px;background:var(--tx-3)
}
.vgl__ico--nein::before{transform:rotate(45deg)}
.vgl__ico--nein::after{transform:rotate(-45deg)}
/* Goldener Haken */
.vgl__ico--ja{background:var(--gold-grad);box-shadow:0 0 0 1px rgba(201,162,74,.35),0 6px 18px -8px rgba(201,162,74,.75)}
.vgl__ico--ja::before{
  width:4px;height:9px;border:solid #14100a;border-width:0 1.7px 1.7px 0;
  transform:rotate(42deg) translate(-1px,-1px);border-radius:0
}
.vgl__ico--ja::after{display:none}

.vgl__fuss{
  text-align:center;margin-top:2rem;font-size:.86rem;color:var(--tx-3);
  max-width:52ch;margin-left:auto;margin-right:auto;text-wrap:pretty
}

@media (max-width:820px){
  .vgl__kopf{display:none}
  .vgl__zeile{grid-template-columns:1fr;padding:.4rem 0 1rem}
  .vgl__was{
    border-right:0;padding:1.1rem 1.2rem .3rem;font-size:.74rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--g-3);font-weight:500
  }
  /* Ohne Kopfzeile muss jede Zelle sagen, wovon sie spricht.
     Das Etikett saß mit `bottom:-.1rem` **unterhalb** der eigenen Zelle — und
     weil zwei Zellen einer Zeile direkt aneinanderstoßen, lag es damit über
     der ersten Textzeile der nächsten. Es gehört in den unteren Innenabstand,
     nicht darunter. */
  .vgl__zelle{padding:.5rem 1.2rem 1.5rem}
  .vgl__zelle::after{
    content:attr(data-l);position:absolute;left:1.2rem;bottom:.35rem;
    font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);opacity:.55
  }
  /* Und etwas Luft zwischen den beiden Zellen einer Zeile, damit Etikett und
     folgender Text nicht aneinanderkleben. */
  .vgl__zelle + .vgl__zelle{margin-top:.35rem}
  .vgl__zelle--wir::before{border-left:0;border-right:0;border-top:1px solid rgba(201,162,74,.18)}
}

/* ══ LEBEN — Bilderband über dem Footer ══════════════════════
   Die Bilder dürfen leuchten: sie zeigen das Ziel, nicht die Kulisse.
   Ein erster Versuch mit `grayscale(.28) brightness(.72)` machte sie grau
   und müde — das Gegenteil dessen, was hier stehen soll. Geblieben ist nur
   ein Hauch Abdunklung, damit der Übergang in den Footer nicht hart bricht,
   und beim Überfahren geht auch der weg. */
.leben{padding-bottom:0}
.leben__band{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  margin-top:clamp(36px,5vw,64px);background:var(--line-soft)
}
.leben__band figure{position:relative;margin:0;overflow:hidden;background:var(--ink-1);aspect-ratio:3/4}
.leben__band img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.96) saturate(1.04);
  transform:scale(1.03);
  transition:filter .7s var(--ease),transform 1.1s var(--ease)
}
.leben__band figure:hover img{filter:brightness(1.06) saturate(1.1);transform:scale(1.08)}
/* Weicher Übergang in den Footer, damit das Band nicht abgeschnitten wirkt */
.leben__band::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink))
}
.leben__band{position:relative}

@media (max-width:1100px){ .leben__band{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){
  .leben__band{grid-template-columns:repeat(2,1fr)}
  .leben__band figure{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  .leben__band img{transition:none;transform:none}
  .leben__band figure:hover img{transform:none}
}

/* ══ UNTERSEITEN ═════════════════════════════════════════════
   Die Startseite beginnt mit einem Vollbild-Hero, der die feste
   Navigationsleiste selbst unterlegt. Auf den Unterseiten fehlt er,
   deshalb braucht der Inhalt oben Platz — sonst läge die erste
   Überschrift unter der Leiste. */
.unterseite{padding-top:clamp(88px,11vh,132px)}
.unterseite > .sec:first-child{padding-top:clamp(24px,4vw,56px)}

/* Aktueller Punkt in der Hauptnavigation */
.nav__links a.is-hier{color:var(--g-1)}
.nav__links a.is-hier::after{transform:scaleX(1)}

/* ── Aufruf zur Bewerbung (Startseite) ──────────────────── */
.ruf__cta{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.btn--gross{padding:1.15em 2.6em;font-size:.78rem}
.ruf__note{
  text-align:center;margin:1.8rem auto 0;max-width:46ch;
  font-size:.84rem;color:var(--tx-3);text-wrap:pretty
}

/* ── Verweis auf den Rechner (Startseite) ───────────────── */
.teaser{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3.4vw,44px);background:var(--ink-1);box-shadow:0 0 0 1px var(--line-soft)
}
.teaser h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.35rem 0 .7rem}
.teaser p:last-of-type{margin:0;color:var(--tx-3);font-size:1rem;line-height:1.6;max-width:56ch}
@media (max-width:760px){.teaser{grid-template-columns:1fr}.teaser .btn{justify-self:start}}

/* ── Warnhinweis im Rechner ─────────────────────────────── */
.warnung{
  display:flex;gap:1.1rem;align-items:flex-start;
  margin:0 0 clamp(28px,3.4vw,44px);padding:clamp(18px,2.4vw,26px);
  border:1px solid rgba(224,168,91,.35);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(224,168,91,.07),rgba(224,168,91,.02))
}
.warnung__ico{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(224,168,91,.5);color:#E0A85B;font-size:1.1rem;font-family:var(--f-d)
}
.warnung b{display:block;font-size:1.05rem;font-weight:500;color:#E0A85B;margin-bottom:.4rem;letter-spacing:.01em}
.warnung p{margin:0;font-size:1rem;line-height:1.6;color:var(--tx-2);text-wrap:pretty}

/* ══ SCOUT-REGISTRIERUNG ═════════════════════════════════════ */
.scout__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:none;margin-bottom:clamp(30px,4vw,52px)}
.scout__punkt{display:flex;gap:1rem;align-items:flex-start;padding:clamp(20px,2.4vw,28px);
  background:var(--ink-1);box-shadow:0 0 0 1px var(--line-soft)}
.scout__punkt b{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);color:#14100a;font-family:var(--f-d);font-size:.95rem}
.scout__punkt span{font-size:.98rem;line-height:1.55;color:var(--tx-2)}
@media (max-width:820px){.scout__raster{grid-template-columns:1fr}}

.scout__box{max-width:660px;margin-inline:auto}
.scout__hinweis{margin:1.1rem 0 0;font-size:.86rem;color:var(--tx-3);text-wrap:pretty}
.scout__ok b{display:block;font-family:var(--f-d);font-size:1.5rem;color:var(--g-2);margin-bottom:.7rem}
.scout__ok p{margin:0 0 .7rem;color:var(--tx-2);line-height:1.6}
.scout__ok code{font-family:var(--f-b);letter-spacing:.16em;color:var(--g-1);
  border:1px solid var(--line);border-radius:var(--r);padding:.15em .6em;font-size:.95em}
.scout__klein{font-size:.85rem;color:var(--tx-3)}

/* Honigtopf: für Menschen unerreichbar, für Formular-Ausfüller sichtbar.
   Bewusst NICHT `display:none` — darauf prüfen die besseren Skripte. */
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.ruf__scout{text-align:center;margin:1.4rem 0 0;font-size:.92rem;color:var(--tx-3)}
.ruf__scout a{color:var(--g-2);border-bottom:1px solid rgba(201,162,74,.35);padding-bottom:1px}
.ruf__scout a:hover{color:var(--g-1);border-bottom-color:var(--g-2)}

/* ── Bestätigung nach dem Absenden ─────────────────────
   Tritt an die Stelle des Formulars. Sie muss allein tragen: das
   Bestätigungsfenster darüber lässt sich wegklicken, dieser Kasten nicht. */
.eingereicht{
  /* Die Kopfzeile liegt fest über der Seite — ohne diesen Abstand endet die
     Überschrift beim Anspringen hinter dem Logo. */
  scroll-margin-top:96px;
  text-align:center;padding:clamp(2.4rem,6vw,4.2rem) clamp(1.4rem,4vw,3rem);
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(201,162,74,.05),transparent 60%)
}
.eingereicht__haken{width:56px;height:56px;margin-bottom:1.4rem;fill:none;
  stroke:var(--g-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eingereicht h2{font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 .8rem}
.eingereicht p{color:var(--tx-2);max-width:46ch;margin:0 auto .8rem;line-height:1.65}
.eingereicht__ref b{color:var(--g-2);font-family:var(--f-d);letter-spacing:.06em}
.eingereicht__wege{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.8rem}

/* Kennzeichnet einzelne Angaben, die noch bestätigt werden müssen — sichtbar,
   aber ohne den Fließtext zu zerreißen. */
.pruefen{font-style:normal;font-size:.82em;color:var(--g-3);opacity:.85}

/* Laufende Rückmeldung, wie viele Bilder noch fehlen. */
.drop__pflicht{display:block;margin-top:.5rem;font-size:.82rem;color:var(--g-2)}
.drop__pflicht.is-gut{color:#8FC9A6}
.drop.is-bad{border-color:rgba(214,96,77,.6);background:rgba(214,96,77,.05)}

/* ══ TOUCHGERÄTE ═════════════════════════════════════════════
   Ganz ans Ende: die Regeln hier heben Maße aus den Bausteinen darüber auf,
   und bei gleicher Spezifität gewinnt die spätere. */
@media (pointer:coarse){
  /* Safari malt einen animierten Verlauf nicht zuverlässig durch
     `background-clip:text`, sobald der Text in einzelne Zeichen zerlegt ist —
     und genau das macht die Anlauf-Animation der Überschrift. Ergebnis auf
     dem Telefon: „Du erschaffst." stand da, die beiden goldenen Zeilen
     darunter waren unsichtbar, weil ihre Füllfarbe durchsichtig ist.
     Auf Touchgeräten deshalb volles Gold statt Verlauf — der Schimmer ist
     Zierde, die Lesbarkeit nicht. */
  .hero__h1 .shine{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;
    color:#E6CC8E;-webkit-text-fill-color:#E6CC8E;animation:none
  }

  /* Unter 16 px zoomt iOS Safari beim Fokussieren in das Feld hinein. Das
     betraf das gesamte Bewerbungsformular, die Scout-Anmeldung und die
     Regler des Rechners. */
  .f input,.f textarea,.f select,input[type=text],input[type=email],
  input[type=tel],input[type=url],input[type=date],input[type=number],
  textarea,select{font-size:16px}

  /* Der Burger war 34×24 — das kleinste Ziel der ganzen Seite, und
     ausgerechnet das Hauptmenü. */
  .burger{width:44px;height:44px;padding:10px 5px;justify-content:space-evenly}

  /* Sprachknöpfe: 36 px reichten nicht ganz. */
  .lang button{min-height:40px}

  /* Auswahlkacheln im Bewerbungsformular („Model / Creator" …). */
  .chip{min-height:44px}

  /* Der Regler war als Fläche 2 px hoch. Die Bahn bleibt optisch dünn, der
     Griff wird groß genug, und ein durchsichtiger Rahmen gibt dem Finger
     Platz — sonst trifft man auf dem Telefon nur daneben. */
  input[type=range]{height:44px;background:transparent;padding:0}
  input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-12px}

  /* Kleinstschrift der Kennzahlen und Rubriken. */
  .kicker{font-size:.74rem}
  .zahl__label,.stat span,.calc__label{font-size:.72rem}
}