/* ============================================================
   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}