/* ============================================================
   stepX v4 — das v2-Design mit Typografie, Ausrichtung, Breite
   und Farben der Live-Seite stepx-network.de.
   Alle Werte am Original bei 1400px Viewport gemessen (Sonde im
   DOM, computed styles), nicht geschaetzt.
   Bewusst erhalten: Karten, Gradients auf Elementen, Eyebrow-Pillen,
   Shimmer, Reveal, Glow auf Buttons — das bleibt v2.
   ============================================================ */

/* ---------- 1. Breite: die Regel des Originals ---------- */
/* Original bei 1920px: Inhalt 192..1728 = 80% der Fensterbreite,
   Deckel 1660px. .nav__row MUSS mit, sie dupliziert die .wrap-Regel
   (site.css:131) statt sie zu benutzen. */
.wrap,.nav__row{width:min(100% - 40px,1660px)}
@media(min-width:961px){
  .wrap,.nav__row{width:min(80%,1660px)}
}

/* ---------- 2. Farben ---------- */
/* Gemessen: BODY-BG #181818, BODY-COLOR #ffffff. Fliesstext im
   Original ist reines Weiss, kein Grauton — nur Kleinlabels sind grau. */
:root{
  --bg:#181818;
  --bg-2:#181818;
  --surface:#1c1c1c;
  --surface-2:#232323;
  --line:#333;
  --line-soft:rgba(255,255,255,.10);
  --text:#fff;
  --muted:#fff;
  --muted-2:#a5a5a5;
  --accent:#d18dfb;
}
/* Das fixe Violett-Glowfeld faerbt die ganze Flaeche ein und macht den
   Hintergrund messbar zu einem anderen Ton als #181818 — daher aus. */
body::before{display:none}
.mission::before{display:none}
/* Hero-Verlauf auf die neue Grundflaeche ziehen */
.hero-photo__bg::after{
  background:linear-gradient(180deg,rgba(24,24,24,.62),rgba(24,24,24,.78) 70%,var(--bg));
}
.footer{background:var(--bg);border-top:1px solid var(--line-soft)}
.formcard,.cta-band,.cta-clean{background:var(--surface)}

/* ---------- 3. Typografie ---------- */
/* Original nutzt DM Sans fuer ALLES: Headlines, Fliesstext, Navigation,
   Buttons. Inter kommt dort nur im Kit-Default vor, nicht im Einsatz. */
body,
.btn,.nav__links a,.nav__menu a,.mobile-menu a,
.eyebrow,.kicker,.role,.card .role,.member__body .role,
.msform__q,.msform__count,.contact-item h4,.footer__col h4,
.tile__label,.tile__sub,.tile__num,.step2__n,.formcard__title,
.compare th,.compare td,.sx-consent__title{
  font-family:'DM Sans',sans-serif;
}

/* Fliesstext: 17px / lh28 / ls-0.5px bei 1400 */
body{
  font-size:clamp(1rem,1.2vw,1.3rem);
  line-height:1.65;
  letter-spacing:-.03em;
}

/* Headlines: LH exakt 1.0, LS -0.03em */
h1,h2,h3,h4,.display{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.03em;
}
/* Hero ist im Original das einzige Headline-Gewicht ueber 400 */
.hero-split__text h1,.hero h1,.team-hero h1{font-weight:500}

/* Grosse Headlines (Hero + Sektion): clamp(1.8rem,3vw,3rem) */
.hero-split__text h1,.hero h1,.team-hero h1,
.sec-head h2,.steps-wrap h2,.split h2,.split--form h2,
.cta-band h2,.cta-clean h2,.team-sec__head h2{
  font-size:clamp(1.8rem,3vw,3rem);
  /* line-height muss hier mit: site.css:195 setzt .hero-split__text h1
     auf 1.16 und schlaegt die allgemeine h1-Regel per Spezifitaet */
  line-height:1.0;
}
/* Unter-Headlines (Karten, Schritte, Team, Tools): clamp(1.5rem,2vw,2rem) */
.card h3,.step2 h3,.member__body h3,.tool h3,.formcard__title,.tile__label{
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:400;
  line-height:1.0;
}
.tile__label{font-size:clamp(1.1rem,1.4vw,1.35rem)}

/* Fliesstext-Groessen der Sektionen auf das Original ziehen */
.sec-head p,.card p,.step2 p,.split p,.cta-band p,.cta-clean p,
.member__body p,.tool p,.hero__sub,.check li,.compare th,.compare td{
  font-size:clamp(1rem,1.2vw,1.3rem);
  line-height:1.65;
  letter-spacing:-.03em;
}
.compare th,.compare td{font-size:clamp(.95rem,1.05vw,1.1rem)}
.check li{font-size:clamp(1rem,1.2vw,1.3rem)}

/* Navigation: 19px / 400 / weiss */
.nav__links a{font-size:clamp(1rem,1.35vw,1.2rem);font-weight:400;color:var(--text)}
/* Buttons: 20px / 700 */
.btn{font-weight:700;font-size:clamp(1rem,1.35vw,1.25rem);letter-spacing:-.03em}

/* das X in "stepX" erbt die Schrift, sonst steht in jeder DM-Sans-
   Headline ein Inter-X mit abweichendem Gewicht */
.xmark{font-family:inherit;font-weight:inherit}

/* Schritt-Ziffern. Gemessen am Original bei 1400px: 113px, Gewicht 400,
   LH 1.0, FLACHES #d18dfb mit weichem Text-Glow — kein Gradient.
   v2 hatte 70px, Gewicht 700, Gradient per background-clip und drop-shadow. */
.step2__n{
  font-size:clamp(3.4rem,8vw,7.05rem);
  font-weight:400;
  line-height:1.0;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--accent);
  filter:none;
  text-shadow:0 0 10px rgba(209,141,251,.75);
}
.step2:hover .step2__n{filter:none;transform:none;text-shadow:0 0 16px rgba(209,141,251,.9)}

/* Button-Text ist im Original weiss, nicht dunkel.
   ACHTUNG: #fff auf #d18dfb sind nur ~1,9:1 Kontrast (WCAG will 4,5:1).
   Bewusst dem Original nachgezogen, nicht weil es gut ist. */
.btn--primary{color:#fff}
.btn--primary:hover{color:#fff}

/* ---------- 4. Ausrichtung ---------- */
/* Gemessen: Hero zentriert, "Fuer wen" linksbuendig, Vergleich +
   Mission + Stimmen zentriert, "So wirst du Teil" linksbuendig. */
.hero-split__text{text-align:center}
.hero-split__text .hero__sub{margin-inline:auto}
.hero-split__text .hero__cta{justify-content:center}
[data-cs="home.forwen"] .sec-head.center{text-align:left;margin-inline:0;max-width:none}
[data-cs="home.forwen"] .sec-head.center .eyebrow{margin-inline:0}
[data-cs="home.forwen"] .sec-head.center p{margin-inline:0}

/* ---------- 5. Animierte Icons (Lottie) ---------- */
/* Uebernommen von der Live-Seite stepx-network.de (Lordicon wired-outline),
   selbst gehostet, Steuerfarben im JSON auf #ffffff / #d18dfb gesetzt.
   Ali im Call: "die Symbole finde ich cool, das macht das Thema greifbarer". */
.lottie-icon{display:block;line-height:0}
.lottie-icon svg{display:block;width:100%;height:100%}

/* Startseite "Fuer wen": ersetzt die statischen SVG in der Icon-Kachel */
.card__icon.lottie-icon{
  width:64px;height:64px;padding:0;border:0;background:none;
  place-items:stretch;margin-bottom:16px;
}

/* Vorteile-Kacheln: Icon ueber dem Label, zentriert wie der Kachelinhalt */
.tile__ic{width:72px;height:72px;margin:0 auto 10px}

@media(max-width:720px){
  .card__icon.lottie-icon{width:56px;height:56px}
  .tile__ic{width:60px;height:60px}
}

/* ---------- 6. Buttons: Glow dosiert, nicht abgeschafft ---------- */
/* Erst zu heftig (site.css stapelt VIER Schatten, davon zwei Glows mit 26px
   und 60px Radius, im Hover verstaerkt), dann von mir zu flach gemacht.
   Jetzt genau EIN weicher Hof plus Abhebe-Schatten. */
.btn--primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 6px 18px -8px rgba(155,77,255,.50),
    0 0 22px -6px rgba(209,141,251,.45);
}
.btn--primary:hover{
  background:#dca2fc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 10px 24px -10px rgba(155,77,255,.60),
    0 0 30px -6px rgba(209,141,251,.60);
}

/* Play-Knopf auf den Community-Videos. Ali 04.08.: "nur noch die Video
   Buttons bei den Feedbacks dezenter gestalten". Vorher ein 66-px-Vollkreis
   in Lavendel mit Ring und Glow — der lag als lila Flaeche mitten im
   Gesicht. Jetzt: schlanke helle Kontur auf leicht abgedunkeltem Grund,
   Dreieck weiss. Der 1-px-Dunkelrand ist kein Glow, sondern die Trennkante
   fuer helle Videobilder (weisse Kontur kam dort sonst nur auf ~1,8:1). */
.video-play__btn{
  width:54px;height:54px;
  background:rgba(0,0,0,.28);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.3);
  backdrop-filter:blur(2px);
}
.video-play__btn svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.video-play:hover .video-play__btn{
  transform:scale(1.06);
  background:rgba(0,0,0,.18);
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.3);
}
.video-play__hint{font-weight:500;letter-spacing:.02em}

/* Consent-Leiste: "Ablehnen" hatte deutlich weniger Gewicht als
   "Alle akzeptieren". Gleiche Hoehe, gleiche Form, gleicher Kontrast. */
.sx-consent__ghost{border-color:var(--muted-2);color:var(--text)}

/* ---------- 7. Kopfleiste: mehr Luft ---------- */
/* Jonas 04.08.: "die Headerleiste ist zu eng". 76/64px waren zu knapp fuer
   die groessere DM-Sans-Navigation. --nav-h steuert zugleich den oberen
   Hero-Abstand, der Hero rutscht also sauber mit. */
:root{--nav-h:92px}
.nav.scrolled{height:74px;border-bottom-color:rgba(255,255,255,.07)}
.nav__logo img{height:34px}
.nav__links{gap:10px}
.nav__links a{padding:11px 18px}
.nav__links a.active{background:rgba(209,141,251,.09)}
.nav__cta{margin-left:14px}
.nav__cta .btn{padding:13px 26px}
@media(max-width:960px){
  :root{--nav-h:78px}
  .nav.scrolled{height:66px}
}