/* =========================================================================
   WALYSER — LAYOUT-FEINSCHLIFF (Startseite)
   Wird als LETZTES Stylesheet geladen und korrigiert nur Rhythmus,
   Typo-Hierarchie und Kartenwirkung. Kein Inhalt wird verändert.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · VERTIKALER RHYTHMUS
   Die Abschnitte trugen Polster aus vier verschiedenen Stylesheets
   (78/64/56/96 px) und liefen dadurch auseinander. Jetzt eine Skala:
   große Abschnitte 84 px, angehängte Bänder 44 px.
   ------------------------------------------------------------------------- */
#hero,.hero{padding:88px 0 68px!important}
#chainStripSection,.chainStripSection{padding:26px 0 30px!important}
#nur-bei-walyser{padding:64px 0 16px!important}
#opportunities{padding:56px 0 28px!important}
#wie-es-geht{padding:64px 0 56px!important}
#statsBento,.statsBento{padding:36px 0 0!important}
#live-demo{padding:64px 0 64px!important}
#arsenal{padding:48px 0 0!important}
#cheat-codes{padding:60px 0 60px!important}
#screens{padding:60px 0 60px!important}
#stimmen{padding:60px 0 64px!important}
.cta{padding:68px 0 72px!important}

/* Trennlinien zwischen den Abschnitten: dezenter, dafür durchgehend */
.sectionDivider,.divider,.hrGlow{opacity:.5}

/* -------------------------------------------------------------------------
   2 · TYPOGRAFISCHE HIERARCHIE
   Die Abschnittstitel waren mit 30–38 px zu leise gegenüber der 60-px-
   Headline im Hero. Eine Stufe größer, enger gesetzt, mit ruhigerem Kicker.
   ------------------------------------------------------------------------- */
.head h2,
#nur-bei-walyser .onlyHead h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.035em;line-height:1.1;margin:12px 0 14px}
.head p,.onlyHead p{font-size:15.5px;line-height:1.7;color:#a4abbd}
.kicker,.onlyHead .kicker{font-size:11px!important;letter-spacing:.16em!important;
  font-weight:800!important;text-transform:uppercase}
.head{margin-bottom:30px}

/* -------------------------------------------------------------------------
   3 · ZAHLEN-BAND
   Vier lose Karten wirkten beliebig. Als zusammenhängendes Band mit
   gemeinsamer Fassung lesen sie sich als eine Aussage.
   ------------------------------------------------------------------------- */
.statsBento .wrap > div,
.sbGrid{gap:0!important;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#ffffff05,transparent 60%),#0b0e16}
.sbCard{border:0!important;border-radius:0!important;background:none!important;
  padding:22px 22px 24px!important;position:relative}
.sbCard + .sbCard:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;
  background:var(--line)}
.sbNum{font-size:34px!important;letter-spacing:-.035em;line-height:1;margin:10px 0 7px!important}
.sbLabel{font-size:12.5px!important;color:#8e96ab!important;line-height:1.55}
.sbIcon{font-size:15px!important;opacity:.85}
@media(max-width:900px){
  .sbCard + .sbCard:before{left:18px;right:18px;top:0;bottom:auto;width:auto;height:1px}
}

/* -------------------------------------------------------------------------
   4 · KARTEN-TIEFE
   Einheitliche Kantenführung: eine feine Lichtkante oben, weicher Schatten
   unten. Das gibt Ordnung, ohne dass eine Karte lauter wird als die andere.
   ------------------------------------------------------------------------- */
.onlyCard,.cheatCard,.killerCard,.stepCard,.testiCard{
  box-shadow:inset 0 1px 0 #ffffff0d, 0 18px 40px -26px #000c}
.stepCard{border-radius:16px}

/* Die Alleinstellungs-Karten sind das Herzstück — kompakter, damit die Übersicht stimmt */
.onlyCard{padding:17px 18px}
.onlyCard > b{font-size:17px;letter-spacing:-.025em}   /* nur der Titel, nicht jedes <b> im Fließtext */
.onlyCard:hover{box-shadow:inset 0 1px 0 #ffffff14, 0 26px 60px -28px #7c5cff4d}

/* -------------------------------------------------------------------------
   5 · LESBARKEIT LANGER TEXTE
   ------------------------------------------------------------------------- */
.stepCard p,.cheatCard p{font-size:13px;line-height:1.65;color:#a4abbd}
.stepCard h3{font-size:17px;letter-spacing:-.02em;margin-bottom:8px}

@media(max-width:820px){
  body > main > section,body > section{padding-top:58px;padding-bottom:58px}
  .hero{padding-top:64px!important;padding-bottom:52px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* -------------------------------------------------------------------------
   6 · KOPFZEILE AUF SCHMALEN GERÄTEN
   Das Suchfeld wurde von einem später geladenen Stylesheet wieder auf
   display:flex gesetzt. Hier mit höherer Spezifität endgültig ausblenden —
   die Suche ist über das Klappmenü und ⌘K weiterhin erreichbar.
   ------------------------------------------------------------------------- */
@media(max-width:620px){
  header nav .cmdkTrigger{display:none!important}
  header nav.wrap{gap:8px}
}

/* -------------------------------------------------------------------------
   7 · "ALLES KOSTENLOS"
   Der Abschnitt wurde durch die freeCtaBox in css/wallet-cta.css ersetzt
   (gleiche Bauweise wie der Abschluss-CTA auf portfolio.html), damit der
   Seitenabschluss auf beiden Seiten konsistent wirkt.
   ------------------------------------------------------------------------- */