/* ============================================================
   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 entschaerfen ---------- */
/* Jonas 04.08.: "die Buttons scheinen etwas zu intensiv, weniger machen
   ueberall". site.css stapelt auf .btn--primary vier Schatten, davon zwei
   reine Glows (0 0 26px + 0 0 60px), im Hover noch verstaerkt — das ist der
   Lila-Hof um Nav-CTA, Hero-CTA, Formular- und Consent-Buttons.
   Jetzt: nur noch ein weicher Abhebe-Schatten, kein Hof. */
.btn--primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px -8px rgba(155,77,255,.35);
}
.btn--primary:hover{
  background:#dca2fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 18px -8px rgba(155,77,255,.45);
}

/* Play-Knopf trug denselben Hof (8px-Ring + 30px-Glow) */
.video-play__btn{box-shadow:0 0 0 4px rgba(209,141,251,.12)}
.video-play:hover .video-play__btn{transform:scale(1.05);box-shadow:0 0 0 6px rgba(209,141,251,.16)}

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