/* ============================================================
   stepX v3 — Eleganz-Pass (nur Startseite)
   Overlay über site.css. Referenz: stepx-network.de
   Brief: Reference/brief-v3.md — ruhig · editorial · unaufdringlich
   ============================================================ */

/* ---------- 1. Fläche: neutral statt violettstichig ---------- */
:root{
  --bg:#181818;
  --bg-2:#181818;
  --surface:#1c1c1c;
  --surface-2:#232323;
  --line:#333;
  --line-soft:rgba(255,255,255,.10);
  --text:#f2f2f2;
  --muted:#a5a5a5;        /* 6.9:1 auf #181818 */
  --muted-2:#8f8f8f;      /* 5.0:1 — #7c7c7c lag bei 4.0:1 und riss AA */
  --radius:24px;          /* Original: Medienrahmen 24px */
  --radius-lg:24px;
  --shadow:0 19px 26px 1px rgba(0,0,0,.6);
}
/* ---------- 1a. Breite: die Regel des Originals ---------- */
/* Gemessen am Original bei 1920px Viewport: Inhalts-Container 192..1728,
   also exakt 80% der Fensterbreite (10% Rand je Seite), gedeckelt bei
   1660px (--container-max-width). Unser fester 1180px-Container fiel bei
   1440 kaum auf (1152 vs 1180), liess aber ab 1600px Fenster sichtbar
   Breite liegen — bei 1920 fehlten 356px. */
/* .nav__row MUSS mit: es dupliziert die .wrap-Regel und liefe sonst weiter
   auf den alten 1180px, waehrend der Inhalt darunter breiter ist. */
.wrap,.nav__row{width:min(100% - 40px,1660px)}
@media(min-width:961px){
  .wrap,.nav__row{width:min(80%,1660px)}
}
/* Tabelle folgt dem Container statt eigenem Deckel */
.compare{max-width:none}

body::before{display:none}
.mission::before,.mission::after{display:none}
.cta-clean::before{display:none}
.footer::before{display:none}

/* Chrome- und Overlay-Flächen liegen in site.css noch auf der alten,
   violettstichigen Palette und werden sonst bei jedem Scroll sichtbar. */
.nav.scrolled{background:rgba(24,24,24,.86)}
/* backdrop-filter ist bei 96/98% Deckkraft ohnehin unsichtbar — toter Code
   auf der Glaskachel-Raus-Liste */
.nav__menu{background:rgba(28,28,28,.96);backdrop-filter:none}
.mobile-menu{background:rgba(24,24,24,.98);backdrop-filter:none}
.cta-clean--photo .cta-photo-layer::after{background:linear-gradient(180deg,rgba(24,24,24,.55),rgba(24,24,24,.85))}

/* Hero-Verlauf auf die neue Grundfläche ziehen */
.hero-photo__bg::after{
  background:linear-gradient(180deg,rgba(24,24,24,.60),rgba(24,24,24,.80) 70%,var(--bg));
}

/* ---------- 2. Typo: DM Sans 400, LH 1.0 — DER Hebel ---------- */
h1,h2,h3,h4,.display{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.03em;
}
h3,h4,.card h3,.step2 h3,.formcard__title{font-weight:500;line-height:1.15}
/* Original: Body 19px Desktop / 15px Tablet / 14px Mobil */
body{font-size:17px;line-height:1.65;letter-spacing:0}
@media(max-width:720px){body{font-size:16px}}

/* Größen nur um ~8% angehoben: 400er wirkt bei gleicher Größe kleiner.
   Kein echter Größensprung, sonst brechen die gesetzten Umbrüche. */
.hero-split__text h1{font-size:clamp(1.95rem,3.5vw,2.95rem);line-height:1.04}
.sec-head h2{font-size:clamp(1.85rem,4vw,2.9rem)}
.steps-wrap h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.split--form h2,.split h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.cta-band h2{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.08}
.card h3{font-size:1.38rem}
.step2 h3{font-size:1.26rem}
.hero__sub{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.65}
.sec-head p{font-size:1.02rem;line-height:1.65;margin-top:16px}

/* ---------- 3. Eyebrow: Pille → Haarlinie ---------- */
.eyebrow{
  display:block;
  padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;
  color:var(--muted);font-weight:500;font-size:.72rem;letter-spacing:.12em;
}
.eyebrow::before{
  display:block;width:56px;height:1px;border-radius:0;
  background:var(--muted-2);box-shadow:none;margin:0 0 18px;
}
/* zentrierte Sektionsköpfe: Linie steht mittig über der Headline */
.sec-head.center .eyebrow::before,
.cta-band .eyebrow::before,
.cta-clean .eyebrow::before{margin-inline:auto}

/* Das Original setzt die Haarlinie GENAU EINMAL (über "Für wen ist step X?")
   und lässt alle anderen Headlines nackt stehen. Sechs identische Eyebrows
   sind hinzugefügter Auszeichnungsapparat, kein weggelassener — genau das
   macht die Seite systematischer als die Vorlage. Also: nur die erste bleibt.
   Abweichung von der v2-Regel "Eyebrow über JEDER Sektions-Headline",
   bewusst und nur in v3. */
.eyebrow{display:none}
[data-cs="home.forwen"] .eyebrow{display:block}

/* ---------- 4. Entkasten: "Für wen" steht frei auf der Fläche ---------- */
/* 44px statt 64: bei 3 Spalten auf 1180px kostet jeder Gap-Pixel Zeilenlänge */
[data-cs="home.forwen"] .grid-3{gap:clamp(28px,3vw,44px)}
[data-cs="home.forwen"] .card{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;overflow:visible;
}
[data-cs="home.forwen"] .card::before{display:none}
[data-cs="home.forwen"] .card:hover{transform:none;box-shadow:none}
[data-cs="home.forwen"] .card__icon{
  width:auto;height:44px;border:0;border-radius:0;background:none;
  place-items:center start;margin-bottom:22px;
}
[data-cs="home.forwen"] .card__icon svg{width:40px;height:40px}

/* Checkliste: getönte Box → schlichter Haken */
.check{gap:13px;margin-top:20px}
.check li::before{
  width:16px;height:16px;margin-top:4px;border:0;border-radius:0;
  background:none;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d18dfb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

/* Kontakt- und Formular-Icons: Glaskachel → freies Icon */
.contact-item__ic,.choice__ic{
  background:none;border:0;border-radius:0;width:26px;height:26px;
  place-items:center start;
}
.contact-item__ic svg,.choice__ic svg{width:22px;height:22px}
/* Auswahl behält den Rahmen (Klick-Affordanz), verliert aber die Füllung —
   sonst Kasten im Kasten innerhalb der Formcard */
.choice{gap:16px;border-radius:12px;background:none}

/* ---------- 5. Farbe: flach statt Gradient und Glow ---------- */
.grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent)}
/* xmark erbt die Schrift, sonst steht in jeder DM-Sans-Headline ein Inter-X */
.xmark{text-shadow:none;font-weight:inherit;font-family:inherit}

.step2__n{
  font-family:'DM Sans',sans-serif;font-weight:400;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--accent);filter:none;line-height:.9;
  font-size:clamp(3.2rem,6vw,5rem);
}
.step2:hover .step2__n{filter:none;transform:none}
.step2:hover h3{color:var(--text)}

/* Vergleich: Häkchen bleiben (besser als x/– im Original), aber ohne Leuchten.
   Wettbewerber-Haken neutral — im gleichen Lavendel las die Tabelle sich als
   "Makler ist fast so gut wie stepX". Das Original färbt auch nur stepX. */
/* Breite steuert der .wrap-Container (siehe oben), kein eigener Deckel */
.compare .yes{background:none;color:var(--muted)}
.compare .col-x .yes{color:var(--accent)}
.compare .col-x{
  color:var(--text);font-weight:500;
  background:rgba(209,141,251,.05);border-inline:1px solid rgba(209,141,251,.22);
}
/* stepX-Spalte als EINE durchgehende Fläche, nicht als fünf Streifen.
   thead muss mit — sonst schneidet die graue Kopfzeilen-Unterkante den
   Kasten weiterhin in "Kopfkachel plus Korpus". */
.compare tbody .col-x,
.compare thead .col-x{border-bottom-color:transparent}
.compare thead .col-x{
  background:rgba(209,141,251,.07);
  border-top:1px solid rgba(209,141,251,.22);border-radius:14px 14px 0 0;
}
.compare tbody tr:last-child .col-x{border-radius:0 0 14px 14px;border-bottom:1px solid rgba(209,141,251,.22)}
.compare .col-x .yes{background:none;color:var(--accent);box-shadow:none}
.compare tbody tr:hover .yes{transform:none}
.compare tbody tr:hover .col-x{background:rgba(209,141,251,.09)}
.compare thead th,.compare tbody th{font-weight:400}

/* ---------- 6. Buttons: Vollpille, flach ---------- */
.btn{border-radius:100px;padding:16px 32px;font-weight:500;letter-spacing:0}
.btn--lg{border-radius:100px;padding:18px 36px}
.nav__cta .btn{padding:12px 24px}
.msform__nav .btn{padding:14px 32px}
.btn--primary{
  background:var(--accent);color:#1a1020;
  box-shadow:none;
}
.btn--primary::after{display:none}
.btn--primary:hover{transform:none;background:#dca2fc;box-shadow:none}
/* Nav-CTA: im Original ein reiner Textlink in der Reihe. Eine Kontur-Pille
   waere immer noch eine Pille — und #333 auf dem Hero-Foto kam ohnehin nur
   auf 1,1:1, war also als Rahmen gar nicht lesbar. */
.nav__cta .btn--primary{
  background:none;color:var(--text);border:0;box-shadow:none;padding:11px 4px;
}
.nav__cta .btn--primary:hover{background:none;color:var(--accent)}
.btn--primary:active{transform:scale(.97)}
.btn--ghost{border-radius:100px}
.btn--ghost:hover{transform:none}
.sx-consent__ghost{border-radius:100px}
.nav__links a.active{background:none;color:var(--accent)}

/* ---------- 7. Rhythmus und Bewegung ---------- */
.section{padding:clamp(96px,13vw,180px) 0}
.section--tight{padding:clamp(72px,9vw,120px) 0}
.sec-head{margin-bottom:clamp(52px,6vw,88px)}

/* Der Bogen entsteht NICHT aus alternierenden Paddings: an jeder Fuge treffen
   sich dann ein grosser und ein kleiner Wert, und alle Fugen landen bei
   derselben Summe (gemessen: 4 von 5 exakt 300px). Also die Fugen direkt
   setzen. Ziel: leise Sektionen ruecken zusammen, die Mission bekommt als
   einziger Ruhepunkt den grossen Abstand, der Schluss zieht an. */
[data-cs="home.forwen"]{padding-bottom:clamp(64px,7.5vw,110px)}
[data-cs="home.vergleich"]{padding-top:clamp(56px,6.5vw,96px)}
[data-cs="home.mission"]{padding:clamp(130px,15vw,220px) 0}
[data-cs="home.community"]{padding-top:clamp(72px,9vw,120px)}
[data-cs="home.steps"]{padding-bottom:clamp(80px,9vw,130px)}
[data-cs="home.bewerben"]{padding-top:clamp(80px,9vw,130px)}

/* Reveal: reines Opacity-Fade, kein Y-Versatz, kein Scale */
.reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1)}
html.reveal-ready .reveal:not(.in){opacity:0;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}
.card.reveal,.tile.reveal,.tool.reveal,.post-card.reveal,
.member.reveal,.step2.reveal,.video-frame.reveal{
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .6s cubic-bezier(.16,1,.3,1);
}

.marquee__track{animation-duration:45s}
.marquee__group img{opacity:.7}
.marquee__group img:hover{opacity:1;transform:none;filter:none}

/* Medien behalten den tiefen Schatten (Original-Premium-Signal),
   verlieren aber den violetten Hover-Schein */
.stimmen .video-frame:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
}
/* Play-Knopf: Kontur statt Vollkreis mit Halo — der Halo war wieder Glow.
   Der 1px-Dunkelrand ist kein Glow, sondern die Trennkante: auf dem hellen
   dritten Video kam der weisse Ring sonst nur auf 1,8:1 (WCAG 1.4.11 will 3:1). */
.video-play__btn{width:56px;height:56px;background:none;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.video-play__btn svg{fill:#fff}
.video-play:hover .video-play__btn{transform:scale(1.05);border-color:#fff}
/* kraeftigerer Fuss, damit auch das Label auf hellem Videobild traegt */
.video-play{background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.55))}
.video-play:hover{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.45))}
.video-play__hint{font-weight:500;letter-spacing:.02em}

/* Mission: im Original steht das Zitat frei auf der Fläche, ohne jeden Rahmen */
.cta-band.mission{background:none;border:0;border-radius:0;padding-inline:0}
.cta-band.mission h2{max-width:22ch;font-weight:400}

/* ---------- Umbruch-Disziplin ---------- */
/* Desktop-Umbrüche bleiben wie im Original (Hero 3-zeilig). Auf Mobil greifen
   die br-d-Breaks nicht, deshalb dort ausbalancieren statt frei brechen. */
/* verhindert Ein-Wort-Schlusszeilen im Fließtext */
.hero__sub,.sec-head p,.card p,.step2 p,.split p{text-wrap:pretty}
@media(max-width:720px){
  .hero-split__text h1{font-size:1.68rem;text-wrap:balance}
  .cta-band.mission h2{max-width:30ch;text-wrap:balance}
  .split--form h2,.sec-head h2,.steps-wrap h2{text-wrap:balance}
  /* .hero__cta ist flex-column; width:auto allein reicht nicht, der Button
     wird sonst über align-items:stretch trotzdem auf volle Breite gezogen */
  .hero__cta{align-items:flex-start}
  .hero__cta .btn{width:auto}
}

/* CTA-Blöcke: flach statt Radial-Wolke */
.cta-band{background:var(--surface);border:1px solid var(--line)}
.cta-clean{background:var(--surface);border:1px solid var(--line)}
.cta-clean:hover{border-color:var(--line)}
.cta-clean--photo:hover .cta-photo-layer{transform:none;opacity:.14}

/* Formular- und Consent-Flächen an die neue Fläche angleichen */
.formcard{background:var(--surface);border:1px solid var(--line)}
.msform__progress i{background:var(--accent)}
.msform__count{color:var(--muted-2);font-weight:500}
.msform__q{font-family:'DM Sans',sans-serif;font-weight:500;font-size:1.24rem}
.sx-consent__box{background:var(--surface)}
.sx-consent__title{font-weight:500}
.footer{background:var(--bg);border-top:1px solid var(--line-soft)}

/* ---------- Sachfix: Vergleichstabelle auf Mobil ---------- */
/* Bisher zeigte die Tabelle auf 390px nur "Bank" und "Vertreter" — die
   stepX-Spalte, also der Zweck der Section, lag ohne jeden Hinweis ausserhalb
   des Bildes. Loesung: Kriterien-Spalte links und stepX-Spalte rechts
   festkleben, die Wettbewerber scrollen dazwischen durch. */
.compare-hint{display:none}
@media(max-width:720px){
  .compare-scroll{
    position:relative;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .compare table{min-width:520px}
  .compare th,.compare td{padding:14px 10px}
  .compare thead th:first-child,
  .compare tbody th{
    position:sticky;left:0;z-index:3;background:var(--bg);
    max-width:140px;font-size:.84rem;padding-right:12px;
  }
  /* Deckend, sonst scrollen die Wettbewerber-Spalten sichtbar durch:
     #181818 + 5% Akzent flachgerechnet. */
  .compare thead .col-x,
  .compare tbody .col-x{
    position:sticky;right:0;z-index:2;background:#211e23;
    box-shadow:-14px 0 16px -12px rgba(0,0,0,.9);
  }
  .compare thead .col-x{background:#241f27}
  .compare tbody tr:hover .col-x{background:#211e23}
  .compare thead th,.compare tbody td{scroll-snap-align:end}
  /* steht ÜBER der Tabelle — darunter kommt der Hinweis zu spät */
  .compare-hint{
    display:block;text-align:center;
    margin:0 0 16px;color:var(--muted-2);font-size:.8rem;letter-spacing:.02em;
  }
  .compare-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
}

/* ---------- A11y ---------- */
@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .btn--primary:active{transform:none}
}