/* ==========================================================================
   LIGHT EDITION 2026 — Apple / OpenAI Design-Richtung
   --------------------------------------------------------------------------
   Konvertiert die dunklen Sektionen (stage--ink, smc, page-dark, Footer)
   in ein helles, ruhiges Apple/OpenAI-Feeling:
   weiss + #f5f5f7 Flächen, #1d1d1f Text, weiche Schatten, roter Akzent sparsam.

   Lädt bewusst ALS LETZTES im <head>. !important nur dort, wo Inline-Styles
   (HTML style="…" oder das von main.js injizierte FOOTER/NAV-<style>) sonst
   gewinnen würden.
   ========================================================================== */

:root {
  --le-bg: #ffffff;
  --le-bg-2: #f5f5f7;          /* Apple-Grau */
  --le-text: #1d1d1f;          /* Apple-Textschwarz */
  --le-text-2: #6e6e73;        /* Apple-Sekundärtext */
  --le-text-3: #86868b;        /* Apple-Tertiärtext */
  --le-line: rgba(0, 0, 0, 0.08);
  --le-card: #ffffff;
  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --le-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 20px 50px rgba(0, 0, 0, 0.08);
  --le-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 32px 80px rgba(0, 0, 0, 0.10);
  --le-red: #DC0018;
  --le-red-soft: rgba(220, 0, 24, 0.08);
  --le-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. GRUNDFLÄCHE — dunkler Body & dunkle Seiten werden hell
   ========================================================================== */
body.page-dark { background: var(--le-bg) !important; }
body.page-dark #footer-mount { background: var(--le-bg-2); }

/* ==========================================================================
   2. STAGE--INK — dunkle Sektionen werden helle Apple-Flächen
   ========================================================================== */
.stage--ink {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
  color: var(--le-text) !important;
}
/* rote Hairline oben: dezent behalten */
.stage--ink::before {
  background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.22), transparent) !important;
}
.stage--ink .stage__title { color: var(--le-text) !important; }
.stage--ink .stage__title .red,
.stage--ink .stage__title .hd-accent { text-shadow: none !important; }
.stage--ink .stage__sub { color: var(--le-text-2) !important; }
.stage--ink .stage__sub strong { color: var(--le-text) !important; }
.stage--ink .stage__eyebrow { color: var(--le-red) !important; }
.stage--ink .stage__eyebrow::before {
  background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.55)) !important;
}
/* Inline-Weiss-Text in dunklen Sektionen (z. B. #network, #cta Koepfe) */
.stage--ink [style*="color: white"],
.stage--ink [style*="color:white"] { color: var(--le-text) !important; }
.stage--ink [style*="rgba(255,255,255,0.7"] { color: var(--le-text-2) !important; }
.stage--ink [style*="rgba(255, 255, 255, 0.7"] { color: var(--le-text-2) !important; }
.stage--ink [style*="rgba(255,255,255,0.4"],
.stage--ink [style*="rgba(255, 255, 255, 0.4"] { color: var(--le-text-3) !important; }

/* Dunkle Deko-Blobs auf hellen Flächen stark abschwächen */
.stage--ink .stage__blob { opacity: 0.10 !important; }

/* ==========================================================================
   3. SMC-KONZEPTSEKTIONEN (Homepage #platform, SM TECH-Teaser, Suite-Seiten)
   ========================================================================== */
.smc,
.smc.smc--light {
  color: var(--le-text) !important;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(220, 0, 24, 0.04), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
}
.smc__grid-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px) !important;
}
.smc .stage__sub, .smc .stage__eyebrow { color: var(--le-text-2) !important; }
.smc.smc--light .smc-h { color: var(--le-text) !important; }
.smc.smc--light .smc-lead { color: var(--le-text-2) !important; }
.smc.smc--light .smc-lead strong { color: var(--le-text) !important; }
/* War auf .smc--light gescoped; .smc.stage--ink-Sektionen (z. B. crm.html) sind
   inzwischen ebenfalls hell konvertiert und brauchen dieselbe Eyebrow-Farbe. */
/* sm-concept.css hat sein eigenes ".smc.smc--light .smc-eyebrow" (3 Klassen,
   0,3,0) — das muessen wir hier EXPLIZIT mit-matchen, sonst verliert unser
   einfacheres ".smc .smc-eyebrow" (0,2,0) trotz !important gegen die höhere
   Spezifität, sobald smc--light vorhanden ist (z. B. Homepage-Teaser). */
.smc .smc-eyebrow,
.smc.smc--light .smc-eyebrow {
  color: var(--le-red) !important;
  background: var(--le-red-soft) !important;
}
.smc.smc--light .smc-node { color: var(--le-text) !important; }
.smc.smc--light .smc-node__step { color: var(--le-text-3) !important; }
.smc.smc--light .smc-node__metric { color: var(--le-red) !important; }
.smc.smc--light .smc-disclaimer { color: var(--le-text-3) !important; }
.smc-h .grad { text-shadow: none !important; }

/* SMC-Karten & Nodes: dunkles Glas → weisse Apple-Karten */
.smc-node,
.smc-card,
.smc-flow__core {
  background: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  color: var(--le-text) !important;
}
a.smc-node:hover,
.smc-card:hover {
  border-color: rgba(220, 0, 24, 0.28) !important;
  box-shadow: var(--le-shadow-md) !important;
}
.smc-node__step { color: var(--le-text-3) !important; }
.smc-node__title { color: var(--le-text) !important; }
.smc-node__desc { color: var(--le-text-2) !important; }
.smc-node__metric { color: var(--le-red) !important; }
.smc-card__title { color: var(--le-text) !important; }
.smc-card__tag, .smc-card__body { color: var(--le-text-2) !important; }
.smc-card__go { color: var(--le-red) !important; }
/* Inline-Darkstyles auf SMC-Karten (z. B. SM TECH-Teaser auf der Homepage) */
.smc-card[style*="linear-gradient(160deg,#0f1019"],
.smc-card[style*="linear-gradient(160deg, #0f1019"] {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
}
.smc-card[style*="linear-gradient(160deg,#0f1019"] .smc-card__title,
.smc-card[style*="linear-gradient(160deg, #0f1019"] .smc-card__title { color: var(--le-text) !important; }
.smc-card[style*="linear-gradient(160deg,#0f1019"] .smc-card__tag,
.smc-card[style*="linear-gradient(160deg, #0f1019"] .smc-card__tag,
.smc-card[style*="linear-gradient(160deg,#0f1019"] .smc-card__body,
.smc-card[style*="linear-gradient(160deg, #0f1019"] .smc-card__body { color: var(--le-text-2) !important; }
.smc-flow__core-badge { color: var(--le-red) !important; }
.smc-flow__core-text { color: var(--le-text-2) !important; }
.smc-flow__core-text strong { color: var(--le-text) !important; }
.smc-btn--ghost {
  background: var(--le-bg) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
}
.smc-btn--ghost:hover { border-color: rgba(220, 0, 24, 0.4) !important; color: var(--le-red) !important; }
/* Verbindungspfeile im Flow */
.smc-flow__track .smc-node:not(:last-child)::after { color: rgba(220, 0, 24, 0.45) !important; }

/* ==========================================================================
   4. PHASE-CARDS (#network — 6 Stationen)
   ========================================================================== */
.phase-card {
  background: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  color: var(--le-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.phase-card:hover { box-shadow: var(--le-shadow-md) !important; border-color: rgba(220, 0, 24, 0.25) !important; }
.phase-card__head { color: var(--le-text) !important; }
.phase-card h3, .phase-card__title { color: var(--le-text) !important; }
.phase-card p, .phase-card li, .phase-card__desc { color: var(--le-text-2) !important; }
.phase-card [class*="tag"], .phase-card [class*="chip"], .phase-card [class*="metric"] { color: var(--le-red) !important; }

/* ==========================================================================
   5. FUNNEL (#funnel)
   ========================================================================== */
.funnel-premium__viz,
.funnel-premium__viz-inner,
.funnel-premium__backdrop {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.funnel-premium [style*="color: #fff"],
.funnel-premium [style*="color:#fff"],
.funnel-premium [style*="color: white"] { color: var(--le-text) !important; }
.funnel-premium [style*="rgba(255,255,255"] { color: var(--le-text-2) !important; }
.funnel-premium__status { color: var(--le-text-2) !important; }

/* ==========================================================================
   6. REFERENZEN (#referenzen — Case-Cards)
   ========================================================================== */
.ref-card {
  background: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  color: var(--le-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ref-card::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important; }
.ref-card:hover { box-shadow: var(--le-shadow-md) !important; border-color: rgba(220, 0, 24, 0.22) !important; }
.ref-card h3, .ref-card__title { color: var(--le-text) !important; }
.ref-card p, .ref-card__desc, .ref-card__meta { color: var(--le-text-2) !important; }
.ref-card [style*="color: #fff"], .ref-card [style*="color:white"] { color: var(--le-text) !important; }
.ref-card [style*="rgba(255,255,255"] { color: var(--le-text-2) !important; }

/* ==========================================================================
   7. CTA-ABSCHNITT (#cta)
   ========================================================================== */
#cta .stage__title { color: var(--le-text) !important; }
#cta p[style*="rgba(255,255,255,0.7"], #cta p[style*="rgba(255, 255, 255, 0.7"] { color: var(--le-text-2) !important; }
#cta p[style*="rgba(255,255,255,0.4"], #cta p[style*="rgba(255, 255, 255, 0.4"] { color: var(--le-text-3) !important; }

/* ==========================================================================
   8. FOOTER — dunkel → Apple-Grau (schlägt das main.js-<style> via !important)
   ========================================================================== */
.ftr2 {
  background:
    radial-gradient(900px 420px at 50% -180px, rgba(220, 0, 24, 0.05), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
  color: var(--le-text) !important;
}
.ftr2::before {
  background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.30), transparent) !important;
}
.ftr2 .navbar__name { color: var(--le-text) !important; -webkit-text-fill-color: var(--le-text) !important; }
/* CTA-Band: sauberer, edler Kasten mit Tiefe */
.ftr2__cta {
  background: linear-gradient(135deg, rgba(220, 0, 24, 0.06), rgba(220, 0, 24, 0.02)) !important;
  border-color: rgba(220, 0, 24, 0.14) !important;
  box-shadow: var(--le-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
}
.ftr2__cta-eyebrow { color: var(--le-red) !important; }
.ftr2__cta-title { color: var(--le-text) !important; text-shadow: none !important; }
.ftr2__cta-title .serif { color: var(--le-text-2) !important; }
/* Primary-CTA-Button: rot, konsistent mit Site */
.ftr2__btn--primary {
  background: linear-gradient(135deg, #ff4d5e, #d40018) !important;
  border-color: rgba(220, 0, 24, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(220, 0, 24, 0.30) !important;
}
.ftr2__btn--primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(220, 0, 24, 0.36) !important; }
/* Ghost-Button: hell, sauberer Rand */
.ftr2__btn--ghost {
  background: #ffffff !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ftr2__btn--ghost:hover { background: var(--le-bg-2) !important; color: var(--le-red) !important; border-color: rgba(220, 0, 24, 0.30) !important; }
/* Brand-Block */
.ftr2__tag { color: var(--le-text-2) !important; }
.ftr2__trust li { color: var(--le-text-2) !important; }
.ftr2__social a {
  background: #ffffff !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-xs) !important;
}
.ftr2__social a:hover { border-color: rgba(220, 0, 24, 0.4) !important; background: var(--le-red-soft) !important; color: var(--le-red) !important; transform: translateY(-2px) !important; }
/* Link-Spalten */
.ftr2__col h4 { color: var(--le-text) !important; font-weight: 700 !important; }
.ftr2__col a { color: var(--le-text-2) !important; }
.ftr2__col a:hover { color: var(--le-text) !important; }
.ftr2__new {
  background: var(--le-red-soft) !important;
  border-color: rgba(220, 0, 24, 0.25) !important;
  color: var(--le-red) !important;
}
/* Kontakt-Strip: saubere Karten */
.ftr2__ct {
  background: #ffffff !important;
  border-color: var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  border-radius: 14px !important;
}
a.ftr2__ct:hover { border-color: rgba(220, 0, 24, 0.30) !important; box-shadow: var(--le-shadow-md) !important; transform: translateY(-2px) !important; }
.ftr2__ct-ico { background: var(--le-red-soft) !important; color: var(--le-red) !important; }
.ftr2__ct-label { color: var(--le-text-3) !important; }
.ftr2__ct-value { color: var(--le-text) !important; }
/* Riesen-Wordmark: dezent, edel */
.ftr2__wordmark {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.08) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.ftr2__wordmark::after {
  background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.30), transparent) !important;
}
/* Bottom-Bar */
.ftr2__bot { border-top-color: var(--le-line) !important; color: var(--le-text-3) !important; }
.ftr2__bot a { color: var(--le-text-3) !important; }
.ftr2__bot a:hover { color: var(--le-text) !important; }
.ftr2__top-btn {
  background: #ffffff !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-xs) !important;
}
.ftr2__top-btn:hover { border-color: rgba(220, 0, 24, 0.4) !important; background: var(--le-red-soft) !important; color: var(--le-red) !important; }
/* Motto-Zeile */
.ftr2 .mp-motto__text { color: var(--le-text-2) !important; }
.ftr2 .mp-motto__text b { color: var(--le-text) !important; }
.ftr2 .mp-motto__lines i { background: var(--le-red) !important; }
/* Showcase-Disclaimer unter den Referenzen */
.showcase-disclaimer { color: var(--le-text-3) !important; }
.showcase-disclaimer::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.10), transparent) !important; }

/* ==========================================================================
   9. MOBILE-MENÜ
   --------------------------------------------------------------------------
   Farben/Hintergrund von #mobile-menu leben AUSSCHLIESSLICH im <style>-Block
   von NAV_HTML (main.js). Hier standen sie doppelt und mit !important, was den
   Kaskaden-Patt erzeugt hat: main.js gewann den Hintergrund (später im
   Dokument, gleiche Spezifität), light-2026.css gewann die Textfarbe
   (!important gegen ein normales `color`) — Ergebnis war dunkler Text auf
   dunklem Panel. Nicht wieder hinzufügen.
   ========================================================================== */

/* ==========================================================================
   10. STICKY MOBILE CTA bleibt rot (Akzent), keine dunklen Flaechen noetig
   ========================================================================== */
.sticky-mobile-cta {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-color: var(--le-line) !important;
}
/* Primary-CTA-Button: roter Gradient MUSS erhalten bleiben (Cascade-Konflikt
   zwischen modernize-2026 #0f1019 und highend-2026 Gradient führte zu
   transparentem/unsichtbarem Button). Light-Edition gewinnt als letztes
   Stylesheet — hier explizit gesetzt. */
.sticky-mobile-cta .sticky-mobile-cta__btn--primary {
  background: linear-gradient(135deg, #ff2c40, #c00015) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(220, 0, 24, 0.38) !important;
}
/* Chat-Kreis im Light-Theme: dezent dunkel statt grellem Weiss-Kontrast */
.sticky-mobile-cta .sticky-mobile-cta__btn--chat {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
}
/* Reserviere ausreichend Platz unten, damit die fixierte CTA-Bar den Footer
   beim Scrollen nach ganz unten nie überdeckt (auch zwischen 640-900px). */
@media (max-width: 900px) {
  body { padding-bottom: 108px; }
}

/* ==========================================================================
   11. REDUCED MOTION — nichts zu tun (Light-Edition aendert nur Farben)
   ========================================================================== */

/* ==========================================================================
   12. SHOWCASE-CARDS (#referenzen) — dunkles Glas → weisse Apple-Karten
   --------------------------------------------------------------------------
   Die Karten nutzen --brand-fg (#fff) fuer Text; wir drehen die Variable um
   und geben der Karte eine weisse Flaeche. Der Browser-Mock oben bleibt
   bewusst dunkel (das ist ein Screenshot-Rahmen, wirkt wie ein Fenster).
   ========================================================================== */
.showcase-card {
  --brand-fg: var(--le-text);
  background: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-md) !important;
  color: var(--le-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.showcase-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
}
.showcase-card::after { opacity: 0.18 !important; }
.showcase-card:hover { box-shadow: var(--le-shadow-lg) !important; border-color: rgba(220, 0, 24, 0.22) !important; }
.showcase-card__brand { color: var(--le-text) !important; }
.showcase-card__desc { color: var(--le-text-2) !important; }
.showcase-card__tag { color: var(--le-text) !important; }
.showcase-card__kpi {
  color: var(--le-text-2) !important;
  background: color-mix(in srgb, var(--brand-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 26%, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: none !important;
}
.showcase-card__kpi strong { color: var(--brand-accent) !important; text-shadow: none !important; }
.showcase-card__modules { color: var(--le-text-3) !important; }
.showcase-card__sep { color: color-mix(in srgb, var(--brand-accent) 40%, rgba(0, 0, 0, 0.25)) !important; }
.showcase-card__cta {
  color: var(--le-text) !important;
  background: color-mix(in srgb, var(--brand-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 30%, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: none !important;
}
.showcase-card__cta:hover { border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent) !important; }

/* ==========================================================================
   13. ORGANIC-CARD (Bonus/Blog-Teaser, z. B. unter #network)
   ========================================================================== */
.organic-card {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.05) 0%,
    rgba(220, 0, 24, 0.05) 100%) !important;
  background-color: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  color: var(--le-text) !important;
}
.organic-card:hover { box-shadow: var(--le-shadow-md) !important; border-color: rgba(16, 185, 129, 0.35) !important; }
.organic-card::before { opacity: 0.5 !important; }
.organic-card__title { color: var(--le-text) !important; }
.organic-card__desc,
.organic-card__body,
.organic-card__body p { color: var(--le-text-2) !important; }
.organic-card [class*="stat"], .organic-card [class*="metric"], .organic-card strong { color: var(--le-text) !important; }
.organic-card [style*="color: #fff"], .organic-card [style*="color:white"] { color: var(--le-text) !important; }
.organic-card [style*="rgba(255,255,255"], .organic-card [style*="rgba(255, 255, 255"] { color: var(--le-text-2) !important; }

/* ==========================================================================
   14. FUNNEL-STAGE-CARDS + LABELS (#funnel)
   ========================================================================== */
.funnel-premium__stage {
  background: var(--le-card) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.funnel-premium__stage:hover { box-shadow: var(--le-shadow-md) !important; border-color: rgba(220, 0, 24, 0.22) !important; }
.funnel-premium__stage-num { color: var(--le-text-3) !important; }
.funnel-premium__stage-title { color: var(--le-text) !important; }
.funnel-premium__stage-desc { color: var(--le-text-2) !important; }
.funnel-premium__stage-chip { color: var(--le-red) !important; background: var(--le-red-soft) !important; border-color: rgba(220, 0, 24, 0.18) !important; }
/* Labels auf dem Funnel: weisse Pillen statt schwarzer */
.funnel-premium__label {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--le-line) !important;
  box-shadow: var(--le-shadow-sm) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.funnel-premium__label-num { color: var(--le-text-3) !important; }
.funnel-premium__label-text { color: var(--le-text) !important; }
/* Funnel-Status / sonstiger Weiss-Text im SVG-Umfeld */
.funnel-premium__status { color: var(--le-text-2) !important; }

/* ==========================================================================
   15. FOOTER-BRAND — hoehere Spezifitaet als das main.js-<style>
   (das setzt .ftr2 .navbar__name mit !important auf weiss)
   ========================================================================== */
footer.ftr2 .ftr2__brand .navbar__brand .navbar__name,
footer.ftr2 .navbar__brand .navbar__name {
  color: var(--le-text) !important;
  -webkit-text-fill-color: var(--le-text) !important;
  background: none !important;
}

/* ==========================================================================
   16. UEBERGREIFEND: Inline-Weiss-Text in umgewandelten Sektionen
   (letzte Sicherheitsnetze, damit nichts Unlesbares uebrig bleibt)
   ========================================================================== */
.stage--ink [style*="color: #fff"], .stage--ink [style*="color:#fff"] { color: var(--le-text) !important; }
.smc [style*="color: #fff"], .smc [style*="color:#fff"],
.smc [style*="color: white"], .smc [style*="color:white"] { color: var(--le-text) !important; }
.smc [style*="rgba(255,255,255"], .smc [style*="rgba(255, 255, 255"] { color: var(--le-text-2) !important; }

/* ==========================================================================
   17. KI SUITE (ki-suite.css) — komplette Light-Konvertierung
   --------------------------------------------------------------------------
   ki-suite.css laedt VOR dieser Datei → gleiche Spezifitaet gewinnt die
   spaetere Regel hier. Attribut-Familienselektoren ([class*=ksu-][class*=__title])
   treffen alle ~180 Komponenten ohne Einzelauflistung.
   ========================================================================== */

/* -- Hero: dunkle Buehne → helle Apple-Buehne -- */
.ksu-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  color: var(--le-text);
}
.ksu-hero::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}
.ksu-aurora { opacity: 0.35; }
.ksu-hero__title { color: var(--le-text); }
.ksu-hero__title .grad { text-shadow: none; }
.ksu-hero__lead { color: var(--le-text-2); }
.ksu-hero__lead strong { color: var(--le-text); }
.ksu-hero__pill {
  background: var(--le-red-soft);
  border-color: rgba(220, 0, 24, 0.2);
  color: var(--le-red);
}
.ksu-btn--ghost {
  background: var(--le-card);
  border-color: var(--le-line);
  color: var(--le-text);
}
.ksu-btn--ghost:hover { border-color: rgba(220, 0, 24, 0.4); color: var(--le-red); }

/* -- Schwebende Hero-Chips (Lead Research, Document Engine, ...) -- */
.ksu-hero__chips [class*="chip"], .ksu-fchip {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-sm) !important;
}

/* -- Grosse Karten & Panels → weiss -- */
.ksu-card, .ksu-ui, .ksu-strip, .ksu-cta, .ksu-report, .ksu-segment,
.ksu-qr, .ksu-workflow__card, .ksu-workflow__panel, .ksu-orbit__core,
.ksu-industries__core, .ksu-industries__panel, .ksu-integrations__tile,
.ksu-marquee__item, .ksu-industries__node {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ksu-card:hover { border-color: rgba(220, 0, 24, 0.3) !important; box-shadow: var(--le-shadow-md) !important; }
.ksu-card::before { opacity: 0.4; }
.ksu-ui__bar { background: var(--le-bg-2) !important; border-bottom-color: var(--le-line) !important; }

/* -- Kleine interaktive Elemente → weiss mit dunklem Text -- */
.ksu-pipe, .ksu-call, .ksu-quote, .ksu-slot, .ksu-doc, .ksu-plan,
.ksu-file, .ksu-linkpill, .ksu-msg, .ksu-seq__step, .ksu-flowviz__node,
.ksu-row, .ksu-feats > *, .ksu-portal-files .ksu-file {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
}

/* -- Text-Familien via Attribut-Muster (schlaegt Einzelklassen der Datei) -- */
[class*="ksu-"][class*="__title"],
[class*="ksu-"][class*="__name"],
[class*="ksu-"][class*="__count"],
[class*="ksu-"][class*="__sum"],
[class*="ksu-"][class*="__amount"] { color: var(--le-text) !important; }

[class*="ksu-"][class*="__sub"],
[class*="ksu-"][class*="__desc"],
[class*="ksu-"][class*="__lead"],
[class*="ksu-"][class*="__note"],
[class*="ksu-"][class*="__label"],
[class*="ksu-"][class*="__info"],
[class*="ksu-"][class*="__main"],
[class*="ksu-"][class*="__trend"] { color: var(--le-text-2) !important; }

.ksu .stage__sub { color: var(--le-text-2) !important; }
.ksu .stage__eyebrow { color: var(--le-red) !important; }
.ksu-disclaimer { color: var(--le-text-3) !important; }
.ksu-strip__note strong { color: var(--le-text) !important; }
.ksu-card__tag { color: var(--le-text-3) !important; }

/* -- Chips: helle Akzent-Tints, dunklere Schrift fuer Kontrast -- */
.ksu-chip { background: var(--le-bg-2) !important; border-color: var(--le-line) !important; color: var(--le-text-2) !important; }
.ksu-chip--ok   { background: rgba(22, 163, 74, 0.10) !important; border-color: rgba(22, 163, 74, 0.3) !important; color: #15803d !important; }
.ksu-chip--hot  { background: var(--le-red-soft) !important; border-color: rgba(220, 0, 24, 0.3) !important; color: var(--le-red) !important; }
.ksu-chip--info { background: rgba(37, 99, 235, 0.08) !important; border-color: rgba(37, 99, 235, 0.25) !important; color: #1d4ed8 !important; }

/* -- Aktive/hervorgehobene Zustaende bleiben rot, aber hell -- */
.ksu-doc--active, .ksu-plan--hl, .ksu-seq__step--active {
  background: var(--le-red-soft) !important;
  border-color: rgba(220, 0, 24, 0.35) !important;
  color: var(--le-red) !important;
}
.ksu-slot--booked { background: var(--le-bg-2) !important; color: var(--le-text-3) !important; }
.ksu-pipe--won { background: rgba(22, 163, 74, 0.07) !important; border-color: rgba(22, 163, 74, 0.28) !important; }

/* -- Workflow / Orbit / Flow-Linien & Dots → hell -- */
.ksu-workflow__dot {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-3) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ksu-workflow__step--active .ksu-workflow__dot {
  background: linear-gradient(135deg, #ff2c40, #c00015) !important;
  border-color: rgba(255, 150, 160, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(220, 0, 24, 0.35) !important;
}
.ksu-workflow__line, .ksu-seq__line, .ksu-orbit__path { background: rgba(0, 0, 0, 0.08) !important; }
.ksu-orbit__path--2 { border-color: rgba(0, 0, 0, 0.08) !important; }
.ksu-orbit__node {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ksu-orbit__core { color: #fff !important; }
.ksu-orbit__core-k, .ksu-orbit__core-l { color: #fff !important; }
.ksu-orbit__nico { color: rgba(255, 255, 255, 0.85) !important; }
.ksu-flowviz__wire { stroke: rgba(0, 0, 0, 0.15) !important; }
.ksu-docflow__arrow { color: var(--le-text-3) !important; }

/* -- Marquee / Integrations / Industries -- */
.ksu-marquee__item { color: var(--le-text-2) !important; }
.ksu-integrations__tile { color: var(--le-text-2) !important; }
.ksu-integrations__count { color: var(--le-text) !important; }
.ksu-industries__tab {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
}
.ksu-industries__tab--active {
  background: var(--le-red-soft) !important;
  border-color: rgba(220, 0, 24, 0.35) !important;
  color: var(--le-red) !important;
}
.ksu-industries__lead { color: var(--le-text-2) !important; }
.ksu-industries__result { color: var(--le-text-2) !important; }
/* Branchen-Orbit: Core-Label braucht roten Hintergrund, damit der weisse Text
   nach dem Weiss-Flip oben (Zeile ~477) nicht weiss-auf-weiss verschwindet. */
.ksu-industries__core {
  background: linear-gradient(135deg, #ff2c40, #c00015) !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(220, 0, 24, 0.35) !important;
}
/* Node-Icons: pink-auf-weiss ist zu blass — roter Akzent für Kontrast. */
.ksu-industries__node svg { color: var(--le-red) !important; }
.ksu-industries__node i[data-lucide] svg { color: var(--le-red) !important; }
.ksu-segment__quote { color: var(--le-text-2) !important; }
.ksu-segment__badge { background: var(--le-red-soft) !important; color: var(--le-red) !important; border-color: rgba(220, 0, 24, 0.2) !important; }
.ksu-report__metric small { color: var(--le-text-3) !important; }
.ksu-cta__stat-label { color: var(--le-text-3) !important; }
.ksu-cta__stat-val { color: var(--le-text) !important; }
.ksu-row__sub { color: var(--le-text-3) !important; }
.ksu-msg--user { background: var(--le-red-soft) !important; color: var(--le-text) !important; }
.ksu-msg--ai { background: var(--le-bg-2) !important; color: var(--le-text) !important; }
.ksu-progress { background: rgba(0, 0, 0, 0.06) !important; }
.ksu-ui__live { background: var(--le-red-soft) !important; color: var(--le-red) !important; }
.ksu-ui__coltitle { color: var(--le-text-3) !important; }
.ksu-call__eq span, .ksu-call__eq i { background: var(--le-red) !important; }
.ksu-agentic__orb { box-shadow: 0 20px 60px rgba(220, 0, 24, 0.25) !important; }
.ksu-agentic__sat { background: var(--le-card) !important; border-color: var(--le-line) !important; color: var(--le-text-2) !important; }
.ksu-seam { background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.25), transparent) !important; }

/* -- Workflow-Steps & Panels: Text hell→dunkel -- */
.ksu-workflow__card svg { color: var(--le-red) !important; }
.ksu-workflow__card b { color: var(--le-text) !important; }
.ksu-workflow__card small { color: var(--le-text-3) !important; }
.ksu-workflow__step:hover .ksu-workflow__card,
.ksu-workflow__step--active .ksu-workflow__card {
  background: var(--le-card) !important;
  border-color: rgba(220, 0, 24, 0.3) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ksu-workflow__panel h4 { color: var(--le-red) !important; }
.ksu-workflow__panel p { color: var(--le-text-2) !important; }
.ksu-workflow__detail { color: var(--le-text-2) !important; }
.ksu-workflow__detail [class*="card"], .ksu-workflow__detail [class*="ui"] { color: inherit; }
.ksu-workflow__detail .ksu-ui { color: var(--le-text-2) !important; }
.ksu-workflow__detail .ksu-ui b, .ksu-workflow__detail .ksu-ui strong { color: var(--le-text) !important; }
.ksu-workflow__detail .ksu-ui small { color: var(--le-text-3) !important; }

/* ==========================================================================
   18. CRM-VARIABLEN (crm-premium.css) — zentrale Umschaltung
   --------------------------------------------------------------------------
   crm-premium.css definiert seine Farben als --crm-* in :root. Da diese Datei
   spaeter laedt, gewinnt unsere :root-Redefinition → die gesamte CRM-Seite
   (Board, Compare-Tabelle, Kosten, Module, Sicherheit) kippt auf hell um.
   ========================================================================== */
:root {
  --crm-bg: #f5f5f7;
  --crm-surf: #ffffff;
  --crm-surf-2: #f5f5f7;
  --crm-line: rgba(0, 0, 0, 0.08);
  --crm-line-2: rgba(0, 0, 0, 0.12);
  --crm-txt: #1d1d1f;
  --crm-txt-2: rgba(29, 29, 31, 0.68);
  --crm-txt-3: rgba(29, 29, 31, 0.45);
}
/* Compare-Tabelle: „Nein“-Icons waren weiss-grau → auf hell unischtbar */
.crm-cmp .crm-no { color: rgba(0, 0, 0, 0.18) !important; }
.crm-cmp__sm { background: rgba(220, 0, 24, 0.05) !important; }
.crm-costcard { box-shadow: var(--le-shadow-sm) !important; }

/* ==========================================================================
   19. SMC-HERO (SM TECH, CRM, Unterseiten) — dunkle Buehne → hell
   ========================================================================== */
.smc-hero {
  color: var(--le-text) !important;
  background:
    radial-gradient(700px 340px at 82% -8%, rgba(220, 0, 24, 0.06), transparent 60%),
    radial-gradient(520px 300px at 6% 108%, rgba(220, 0, 24, 0.04), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
}
.smc-hero__title { color: var(--le-text) !important; }
.smc-hero__lead { color: var(--le-text-2) !important; }
.smc-hero__lead strong { color: var(--le-text) !important; }
.smc-hero .smc__grid-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
}
.smc-crumbs, .smc-crumbs a { color: var(--le-text-3) !important; }
.smc-crumbs a:hover { color: var(--le-red) !important; }
.smc-crumbs .sep { color: var(--le-text-3) !important; }
.smc-hero__chips > *, .smc-hero [class*="chip"] {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-sm) !important;
}

/* ==========================================================================
   20. GRADIENT-TEXTE — helle Verlaeufe (#ff8291→#ffd3d8) sind auf weiss
   unlesbar → sattes Rot
   ========================================================================== */
.smc .smc-h .grad,
.smc.smc--light .smc-h .grad,
.smc-hero__title .grad,
.stage--ink .stage__title .grad,
.stage--ink .smc-h .grad {
  background: linear-gradient(115deg, #dc0018, #ff5d6e) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   21. SM TECH DEEP (smtech-deep.css) — std-* Komponenten hell
   ========================================================================== */
.std-stat, .std-hop, .std-spec__row, .std-code {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.std-hop--core { background: var(--le-red-soft) !important; border-color: rgba(220, 0, 24, 0.3) !important; }
.std-stat__v { color: var(--le-text) !important; }
.std-stat__l { color: var(--le-text-3) !important; }
.std-hop__n { color: var(--le-text-3) !important; }
.std-hop__t { color: var(--le-text) !important; }
.std-hop__d { color: var(--le-text-2) !important; }
.std-hop__ms { color: var(--le-red) !important; }
.std-spec__title { color: var(--le-text) !important; }
.std-spec__badge { background: var(--le-red-soft) !important; color: var(--le-red) !important; border-color: rgba(220, 0, 24, 0.2) !important; }
.std-code-tag { background: var(--le-bg-2) !important; color: var(--le-text-2) !important; border-color: var(--le-line) !important; }

/* ==========================================================================
   22. SMT 6.0 (smt6.css) — Variablen-Umschaltung wie CRM
   --------------------------------------------------------------------------
   smt6.css scopt alle Farben als --s6-* auf .smt6. Redefinition hier gewinnt
   (gleiche Spezifitaet, spaetere Position) → ganze Seite kippt auf hell.
   ========================================================================== */
.smt6 {
  --s6-ink: #ffffff;
  --s6-ink2: #f5f5f7;
  --s6-glass: rgba(255, 255, 255, 0.92);
  --s6-glass2: rgba(255, 255, 255, 0.66);
  --s6-line: rgba(0, 0, 0, 0.08);
  --s6-txt: #1d1d1f;
  --s6-dim: rgba(29, 29, 31, 0.66);
  --s6-faint: rgba(29, 29, 31, 0.45);
  --s6-rose: #c00015;
}
.smt6-grid::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
}
.smt6-h1 .grad, .smt6-h2 .grad {
  background: linear-gradient(115deg, #dc0018, #ff5d6e) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Glas-Karten bekommen Apple-Schatten statt dunkler Tiefe (in Ruhe); Hover
   bekommt die rot-getönte Lift-Tiefe zurück, die die alte !important-Regel
   sonst platt gemacht hätte (gleiche Spezifität, spätere Position gewinnt). */
.smt6 [class*="card"], .smt6 [class*="glass"], .smt6-core, .smt6-cluster__stage {
  box-shadow: var(--le-shadow-sm) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
}
.smt6-card:hover, .smt6-step:hover, .smt6-mode:hover, .smt6-doctabs__panel:hover {
  box-shadow: 0 28px 58px -20px rgba(220, 0, 24, 0.24), var(--le-shadow-sm) !important;
}
.smt6-pill { color: var(--le-text-2) !important; background: var(--le-card) !important; }
.smt6-pill--hot { color: var(--le-red) !important; background: var(--le-red-soft) !important; }
.smt6-core__label, .smt6-core__sub { color: var(--le-text-3) !important; }

/* ==========================================================================
   23. CATCH-ALL — alle restlichen dunklen Komponenten lesbar machen
   ========================================================================== */

/* -- 23a. smc-Unterkomponenten in dunklen Sektionen (Homepage #platform,
   SM TECH, GEO, CRM, KI Suite): Text hell→dunkel, Karten glas→weiss -- */
.smc .smc-lead, .stage--ink .smc-lead { color: var(--le-text-2) !important; }
.smc .smc-lead strong, .stage--ink .smc-lead strong { color: var(--le-text) !important; }
.smc-disclaimer { color: var(--le-text-3) !important; }
.smc-kpi, .smc-layer, .smc-hop, .smc-techcard, .smc-auth, .smc-inttile,
.smc-stat, .smc-power, .smc-module, .smc-flowchart, .smc-rail, .smc-edge,
.smc-monitor, .smc-compare, .smc-security {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
[class*="smc-"][class*="__desc"],
[class*="smc-"][class*="__label"],
[class*="smc-"][class*="__legend"],
[class*="smc-"][class*="__note"],
[class*="smc-"][class*="__ex"],
[class*="smc-"][class*="__sub"] { color: var(--le-text-2) !important; }
[class*="smc-"][class*="__title"],
[class*="smc-"][class*="__val"],
[class*="smc-"][class*="__value"],
[class*="smc-"][class*="__name"],
[class*="smc-"][class*="__big"] { color: var(--le-text) !important; }
.smc-chip {
  background: var(--le-bg-2) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
}
.smc-techcard__go, .smc-techviz__core { color: var(--le-red) !important; }
.smc-techviz__core { background: var(--le-red-soft) !important; border-color: rgba(220,0,24,0.2) !important; }
.smc-power__legend { color: var(--le-text-2) !important; }
.smc-inttile__ex { color: var(--le-text-3) !important; }

/* -- 23b. KI Suite: Innereien der UI-Mock-Panels (Chat, Transkript, Pipes) --
   Die Panels sind jetzt weiss → jeder Text darin muss dunkel werden -- */
.ksu-ui, .ksu-ui *:not(svg):not(path):not([class*="chip"]):not([class*="live"]) { color: var(--le-text-2) !important; }
.ksu-ui b, .ksu-ui strong, .ksu-ui [class*="title"], .ksu-ui [class*="name"],
.ksu-ui [class*="val"], .ksu-ui [class*="sum"], .ksu-ui [class*="count"] { color: var(--le-text) !important; }
.ksu-ui small, .ksu-ui [class*="sub"], .ksu-ui [class*="label"], .ksu-ui [class*="time"] { color: var(--le-text-3) !important; }
.ksu-ui__bar, .ksu-ui__bar * { color: var(--le-text-3) !important; }
/* Orbit-Core: war rot mit weissem Text — wurde faelschlich weiss → wieder rot */
.ksu-orbit__core {
  background: linear-gradient(135deg, #ff2c40, #c00015) !important;
  border-color: rgba(220, 0, 24, 0.4) !important;
  box-shadow: 0 18px 50px rgba(220, 0, 24, 0.3) !important;
}
.ksu-orbit__core, .ksu-orbit__core *:not(svg) { color: #fff !important; }

/* -- 23c. SMT 6.0 Reste -- */
.smt6-badge {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
}
.smt6-spec__title, .smt6-mode__t, .smt6-step__t, .smt6-doctabs__btn { color: var(--le-text) !important; }
.smt6-doctabs__btn.is-active, .smt6-doctabs__btn:hover { color: var(--le-red) !important; }
.smt6-band__item { color: var(--le-text) !important; }
.smt6-step__num { color: #fff !important; }
.smt6-cmp th, .smt6-cmp td { color: var(--le-text-2) !important; }
.smt6-cmp th.is-smt, .smt6-cmp td.is-smt { color: var(--le-text) !important; }
.smt6-cmp .n { color: var(--le-text-3) !important; }
.smt6-agent-orbit__node {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.smt6-agent-orbit__label { color: var(--le-text-3) !important; }
.smt6-agent-orbit__name { color: var(--le-text) !important; }
.smt6-wait__lbl { color: #fff !important; }

/* -- 23d. Tools-Seite (tools-2026.css): dunkler Hero + Tool-Karten -- */
.tp-hero { background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important; color: var(--le-text) !important; }
.tp-hero__title { color: var(--le-text) !important; }
.tp-hero__title .red { color: var(--le-red) !important; }
.tp-crumbs, .tp-crumbs a { color: var(--le-text-3) !important; }
.tp-hero__lead { color: var(--le-text-2) !important; }
.tp-trust, .tp-trust span { color: var(--le-text-2) !important; }
.tool-lab, .tool-lab__panel, .tool-lab__visual, .tool-lab__recommend,
.tg-card, .tg-flag, .tool-lab__mode {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
[class*="tool-lab"][class*="__cta"] { color: var(--le-red) !important; }
[class*="tool-lab"][class*="__bar"], [class*="tool-lab"][class*="__label"] { color: var(--le-text-2) !important; }
.tool-lab__mode.is-active { color: var(--le-text) !important; }
.tg-card__title { color: var(--le-text) !important; }
.tg-card__text { color: var(--le-text-2) !important; }
.tg-card__meta, .tg-card__top { color: var(--le-text-3) !important; }
.tg-card__badge { background: var(--le-red-soft) !important; color: var(--le-red) !important; }
.tg-card__go { color: var(--le-red) !important; }
.tg-flag__stat-val { color: var(--le-text) !important; }
.tg-flag__stat-label { color: var(--le-text-3) !important; }

/* -- 23e. GEO-Seite (geo-premium.css) -- */
.geo-chat, .geo-chat__head, .geo-m__card, .geo-effect, .geo-of__card,
.geo-audit, .geo-faq__item, .geo-proof, .geo-method {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.geo-chat__who { color: var(--le-text) !important; }
.geo-chat__sub, .geo-chat__foot { color: var(--le-text-3) !important; }
.geo-chat__input { color: var(--le-text-2) !important; }
.geo-faq__a, .geo-faq__q { color: var(--le-text-2) !important; }
.geo-effect__big { color: var(--le-text) !important; }
[class*="geo-"][class*="__dur"], [class*="geo-"][class*="__proof"],
[class*="geo-"][class*="__no"], [class*="geo-"][class*="__price"] { color: var(--le-text-3) !important; }
.geo-page p, .geo-page li, main p, main li { /* nur innerhalb dunkler geo-Seiten */ }
.stage--ink p, .stage--ink li, .stage--ink dd, .stage--ink dt,
.stage--ink span, .stage--ink b, .stage--ink strong { color: inherit; }

/* -- 23f. Branchen-Seiten (branchen-premium.css) -- */
.branch-hero-stage__badge {
  background: var(--le-red-soft) !important;
  border-color: rgba(220,0,24,0.25) !important;
  color: var(--le-red) !important;
}
.flow-step, .br-pstep, .br-plan, .compliance-card, .cta-card-premium,
.case-detail, .br-plan--featured, .compliance-card--dark {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.br-plan--featured { border-color: rgba(220, 0, 24, 0.35) !important; box-shadow: var(--le-shadow-md) !important; }
/* HINWEIS: .flow-step__num braucht KEINE globale Regel hier — ".flow-step__num"
   wird auf verschiedenen Seiten von unterschiedlichen CSS-Dateien mit
   unterschiedlichem Look gestylt (solide rote Kachel via branchen-premium.css
   auf Branchen-Seiten vs. helle Pille mit rotem Text via viz.css auf
   ki-automation.html/bewerber-gewinnung.html). Eine pauschale "immer weiss"-Regel
   hier hätte die zweite Variante (weiss auf hellrosa) unlesbar gemacht. Der Fix
   sitzt darum gezielt in branchen-premium.css selbst (color:#fff!important an
   der Original-Regel), betrifft also nur die Seiten, die diese Datei laden. */
.flow-step__title, .br-pstep__title { color: var(--le-text) !important; }
.flow-step__desc, .br-pstep__desc { color: var(--le-text-2) !important; }
.br-plan__tag { background: var(--le-red) !important; color: #fff !important; }
.br-plan__price { color: var(--le-text) !important; }
.br-plan__sub, .br-plan__foot, .br-plan__feat li { color: var(--le-text-2) !important; }
.cta-card-premium__title, .cta-card-premium__title .serif { color: var(--le-text) !important; }
.cta-card-premium__lead { color: var(--le-text-2) !important; }
.compliance-list li, .compliance-card__head { color: var(--le-text) !important; }
.case-detail__label { color: var(--le-text-3) !important; }
.case-detail__value { color: var(--le-text-2) !important; }

/* -- 23g. Blog-Callout + CRM-Disclaimer --
   KORRIGIERT: Jeder Blogpost definiert .post-callout SELBST per Inline-<style>
   im Artikel (immer dunkler Verlauf #0f1019→#1a1d28, color:white — es gibt
   keine ".post-callout--dark"-Modifier-Klasse, das war eine falsche Annahme).
   Diese Regel hier NICHT mehr anfassen — sonst wieder dunkelgrauer Text auf
   dunklem Kasten in allen 47 Blogposts. */
.post-callout__label { color: var(--le-red) !important; }
main p[style*="rgba(233"], main p[style*="rgba(238"] { color: var(--le-text-3) !important; }

/* -- 23h. Sicherheitsnetz: jeglicher Inline-Weiss-Text auf den jetzt
   hellen Seiten (page-dark wurde auf hell umgestellt) -- */
body.page-dark [style*="color: #fff"], body.page-dark [style*="color:#fff"],
body.page-dark [style*="color: white"], body.page-dark [style*="color:white"] { color: var(--le-text) !important; }
body.page-dark [style*="rgba(255,255,255"], body.page-dark [style*="rgba(255, 255, 255"] { color: var(--le-text-2) !important; }

/* ==========================================================================
   24. FEINSCHLIFF RUNDE 2 — lokalisierte Reststellen
   ========================================================================== */

/* -- KI Suite: Orbit-Node-Labels + Industries-Liste -- */
.ksu-orbit__node small { color: var(--le-text-3) !important; }
.ksu-industries__list li { color: var(--le-text-2) !important; }
.ksu-industries__list li strong { color: var(--le-text) !important; }

/* -- Homepage: Organic-Card (Bonus) Stats + CTA -- */
.organic-card__stat { color: var(--le-text) !important; }
.organic-card__stat span, .organic-card__stat-label { color: var(--le-text-3) !important; }
.organic-card__stat b, .organic-card__stat strong { color: var(--le-text) !important; }
.organic-card__cta { color: var(--le-red) !important; }

/* -- SMT 6.0: Listen + Compare-Tabelle -- */
.smt6-list li { color: var(--le-text-2) !important; }
.smt6-list li strong { color: var(--le-text) !important; }
.smt6-cmp thead th { color: var(--le-text) !important; background: var(--le-bg-2) !important; }
.smt6-cmp thead th:nth-child(3) { background: var(--le-red-soft) !important; }
.smt6-cmp thead th small { color: var(--le-text-3) !important; }
.smt6-cmp tbody th[scope="row"] { color: var(--le-text) !important; background: var(--le-bg-2) !important; }
.smt6-cmp tbody td, .smt6-cmp tbody td:last-child { color: var(--le-text-2) !important; }
.smt6-cmp td .n, .smt6-cmp .n { color: var(--le-text-3) !important; }

/* -- Tools: aktiver Modus-Button bleibt Akzent (rot), inaktive hell -- */
.tool-lab__mode small { color: var(--le-text-3) !important; }
.tool-lab__mode.is-active {
  background: linear-gradient(145deg, #ff2c40, #c00015) !important;
  color: #fff !important;
}
.tool-lab__mode.is-active small { color: rgba(255, 255, 255, 0.8) !important; }
.tool-lab__bar { color: var(--le-text-2) !important; }
.tool-lab__bar strong { color: var(--le-text) !important; }

/* -- GEO: Hero-Stat -- */
.geo-hero__stat, .geo-hero__stat span { color: var(--le-text-2) !important; }
.geo-hero__stat strong, .geo-hero__stat b { color: var(--le-text) !important; }

/* ==========================================================================
   25. DESCENDANT-FIX — ALLE Texte innerhalb der hell gewordenen Karten
   --------------------------------------------------------------------------
   Die Komponenten (smc/std/geo/smt6/ksu/tool-lab) haben dutzende einzelne
   Weiss-Text-Regeln. Statt jede einzeln zu jagen: alle Nachkommen der hellen
   Karten auf die dunkle Palette zwingen (Icons + Akzente ausgenommen).
   ========================================================================== */
.smc-layer :not(svg):not(path), .smc-hop :not(svg):not(path),
.smc-techcard :not(svg):not(path), .smc-auth :not(svg):not(path),
.smc-inttile :not(svg):not(path), .smc-power :not(svg):not(path),
.smc-module :not(svg):not(path), .smc-flowchart :not(svg):not(path),
.std-hop :not(svg):not(path), .std-stat :not(svg):not(path),
.std-spec :not(svg):not(path), .std-code :not(svg):not(path),
.geo-chat :not(svg):not(path), .geo-m__card :not(svg):not(path),
.geo-effect :not(svg):not(path), .geo-of__card :not(svg):not(path),
.geo-audit :not(svg):not(path), .geo-proof :not(svg):not(path),
.geo-method :not(svg):not(path), .geo-faq__item :not(svg):not(path),
.smt6-card :not(svg):not(path), .smt6-step :not(svg):not(path),
.smt6-spec :not(svg):not(path), .smt6-doctabs :not(svg):not(path),
.smt6-cluster__stage :not(svg):not(path),
.tool-lab__visual :not(svg):not(path), .tool-lab__recommend :not(svg):not(path),
.flow-step :not(svg):not(path), .br-pstep :not(svg):not(path),
.case-detail :not(svg):not(path) {
  color: var(--le-text-2) !important;
}
/* Ueberschriften + Betaetigungen innerhalb dieser Karten wieder dunkler */
.smc-layer h1, .smc-layer h2, .smc-layer h3, .smc-layer h4, .smc-layer strong, .smc-layer b,
.smc-hop h1, .smc-hop h2, .smc-hop h3, .smc-hop h4, .smc-hop strong, .smc-hop b,
.smc-techcard h1, .smc-techcard h2, .smc-techcard h3, .smc-techcard h4, .smc-techcard strong, .smc-techcard b,
.smc-auth h3, .smc-auth h4, .smc-auth strong, .smc-auth b,
.smc-inttile h3, .smc-inttile h4, .smc-inttile strong, .smc-inttile b,
.smc-power h3, .smc-power h4, .smc-power strong, .smc-power b,
.std-hop h1, .std-hop h2, .std-hop h3, .std-hop h4, .std-hop strong, .std-hop b,
.std-stat strong, .std-stat b, .std-spec h3, .std-spec h4, .std-spec strong, .std-spec b,
.geo-chat h3, .geo-chat h4, .geo-chat strong, .geo-chat b,
.geo-m__card h1, .geo-m__card h2, .geo-m__card h3, .geo-m__card h4, .geo-m__card strong, .geo-m__card b,
.geo-effect h1, .geo-effect h2, .geo-effect h3, .geo-effect h4, .geo-effect strong, .geo-effect b,
.geo-of__card h3, .geo-of__card h4, .geo-of__card strong, .geo-of__card b,
.geo-audit h3, .geo-audit h4, .geo-audit strong, .geo-audit b,
.geo-method h1, .geo-method h2, .geo-method h3, .geo-method h4, .geo-method strong, .geo-method b,
.geo-faq__item h3, .geo-faq__item h4, .geo-faq__item strong, .geo-faq__item b,
.smt6-card h1, .smt6-card h2, .smt6-card h3, .smt6-card h4, .smt6-card strong, .smt6-card b,
.smt6-step h1, .smt6-step h2, .smt6-step h3, .smt6-step h4, .smt6-step strong, .smt6-step b,
.smt6-spec h3, .smt6-spec h4, .smt6-spec strong, .smt6-spec b,
.smt6-doctabs h1, .smt6-doctabs h2, .smt6-doctabs h3, .smt6-doctabs h4, .smt6-doctabs strong, .smt6-doctabs b,
.tool-lab__visual strong, .tool-lab__visual b, .tool-lab__recommend strong, .tool-lab__recommend b,
.flow-step h3, .flow-step h4, .flow-step strong, .flow-step b,
.br-pstep h3, .br-pstep h4, .br-pstep strong, .br-pstep b,
.case-detail h3, .case-detail h4, .case-detail strong, .case-detail b {
  color: var(--le-text) !important;
}
/* Akzent-Texte (rot) innerhalb der Karten erhalten */
.smc-layer .red, .smc-hop .red, .smc-techcard .red, .geo-m__card .red, .geo-effect .red,
.smt6-card .red, .smt6-step .red, .flow-step .red, .br-pstep .red { color: var(--le-red) !important; }
/* ==========================================================================
   25b. ICON-KACHELN SITE-WEIT — weiss auf ihrem eigenen farbigen Tile
   --------------------------------------------------------------------------
   Ohne diese Regel greift z. B. ".stage--ink span { color: inherit }" (oben)
   auch auf Icon-Spans mit rotem Gradient-Hintergrund durch → dunkles Icon auf
   dunkelrotem Grund (kaum sichtbar). Icons/SVGs sollen IMMER weiss bleiben,
   unabhaengig davon, welche Sektion/Theme sie umgibt.
   ========================================================================== */
.smc-node__icon, .smc-node__icon svg,
.smc-card__icon, .smc-card__icon svg,
.smc-techcard__ico, .smc-techcard__ico svg,
.smt6-card__ico, .smt6-card__ico svg,
.smt6-arch__ico, .smt6-arch__ico svg {
  color: #fff !important;
}

/* -- KI Suite: Floating-Chip-Labels im Hero -- */
.ksu-fchip small { color: var(--le-text-3) !important; }
.ksu-fchip b, .ksu-fchip strong { color: var(--le-text) !important; }

/* ==========================================================================
   26. LETZTE RESTSTELLEN (Runde 3)
   ========================================================================== */

/* -- SMT 6.0: zweite Vergleichstabelle (smt6-mm, Modell-Matrix) -- */
.smt6-mm { color: var(--le-text) !important; }
.smt6-mm thead th {
  color: var(--le-text) !important;
  background: var(--le-bg-2) !important;
  border-bottom-color: var(--le-line) !important;
}
.smt6-mm thead th.is-smt {
  background: var(--le-red-soft) !important;
  color: var(--le-text) !important;
}
.smt6-mm tbody th[scope="row"] { color: var(--le-text) !important; background: var(--le-bg-2) !important; }
.smt6-mm tbody td { color: var(--le-text-2) !important; }
.smt6-mm tbody td.is-smt {
  background: var(--le-red-soft) !important;
  color: var(--le-text) !important;
}

/* -- Chat-Trigger (dunkle Variante in hell gewordenen Sektionen) -- */
.sm-chat-trigger--dark {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.stage--ink .sm-chat-trigger:hover,
.sm-chat-trigger--dark:hover {
  background: var(--le-bg-2) !important;
  color: var(--le-red) !important;
}

/* -- KI Suite: Integrations-Tile-Labels -- */
.ksu-integrations__tile small { color: var(--le-text-3) !important; }
.ksu-integrations__tile span { color: var(--le-text) !important; }
.ksu-integrations__tile svg { color: var(--le-red) !important; }

/* ==========================================================================
   27. GEO-KARTEN (geo-m, geo-lp, geo-loop) + Chat-Trigger in hellen Sektionen
   ========================================================================== */
.geo-m, .geo-lp, .geo-loop, .geo-methods article {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.geo-m :not(svg):not(path), .geo-lp :not(svg):not(path), .geo-loop :not(svg):not(path) {
  color: var(--le-text-2) !important;
}
.geo-m h1, .geo-m h2, .geo-m h3, .geo-m h4, .geo-m strong, .geo-m b,
.geo-lp h1, .geo-lp h2, .geo-lp h3, .geo-lp h4, .geo-lp strong, .geo-lp b,
.geo-loop h1, .geo-loop h2, .geo-loop h3, .geo-loop h4, .geo-loop strong, .geo-loop b {
  color: var(--le-text) !important;
}
/* Chat-Trigger in hellen stage--ink-Sektionen lesbar halten */
.stage--ink .sm-chat-trigger,
.smc .sm-chat-trigger {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.stage--ink .sm-chat-trigger:hover,
.smc .sm-chat-trigger:hover { color: var(--le-red) !important; }

/* -- SMT 6.0: Rest-„.n"-Spans in Tabellen -- */
.smt6 .n, .smt6 span.n { color: var(--le-text-3) !important; }

/* -- Integrationen: Suche + Filter-Chips im Light-Theme lesbar -- */
.ksu-integrations__search input {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text) !important;
  box-shadow: var(--le-shadow-sm) !important;
}
.ksu-integrations__search input::placeholder { color: var(--le-text-3) !important; }
.ksu-integrations__search i[data-lucide] { color: var(--le-text-3) !important; }
.ksu-integrations__chip {
  background: var(--le-card) !important;
  border-color: var(--le-line) !important;
  color: var(--le-text-2) !important;
  box-shadow: var(--le-shadow-xs, none) !important;
}
.ksu-integrations__chip:hover { color: var(--le-red) !important; border-color: rgba(220,0,24,0.3) !important; }
.ksu-integrations__chip--active {
  background: var(--le-red-soft) !important;
  border-color: rgba(220,0,24,0.35) !important;
  color: var(--le-red) !important;
}
.ksu-integrations__empty { color: var(--le-text-3) !important; }

/* ==========================================================================
   28. HOMEPAGE-KARTEN — Restfälle nach dem breiten Umbau (2026-07-22)
   --------------------------------------------------------------------------
   Alle Fälle hier: eine Karten-KOMPONENTE wurde korrekt umgestellt (Hintergrund
   hell, Haupttext dunkel), aber EIN Detail blieb auf seiner ursprünglichen
   Dunkel-Theme-Farbe stehen und ist jetzt zu blass/zu dunkel für den neuen
   Kontext. Jede Regel hier ist gezielt auf genau dieses Detail gescoped.
   ========================================================================== */

/* #network-Eyebrow: pipeline.css setzt "#network .stage__eyebrow { color:#ff8a98 !important }"
   (ID-Selektor, schlägt die generische .stage--ink-Regel oben) — hell zu blass auf jetzt hellem Chip. */
#network .stage__eyebrow { color: var(--le-red) !important; }

/* Showcase-Card-KPI: color-mix(...,#ffffff) macht den Akzent pastellblass — auf der jetzt
   weissen Karte braucht es die dunklere Mischung, sonst bei hellen Marken (Gold/Cyan/Gelb) unlesbar. */
.showcase-card__kpi strong { color: color-mix(in srgb, var(--brand-accent) 62%, #000000) !important; }

/* Showcase-Card-Browser-Leiste bleibt bewusst dunkel (Screenshot-Rahmen) — ".showcase-card{color:var(--le-text)!important}"
   vererbt sich sonst hinein und macht den URL-Text dunkel-auf-dunkel. */
.showcase-card__browser, .showcase-card__browser * { color: rgba(255, 255, 255, 0.86) !important; }
.showcase-card__url { color: rgba(255, 255, 255, 0.55) !important; }

/* Organic-Card: grünes Label etwas dunkler (war fürs dunkle Original getunt), Stat-Suffix-Spans
   sitzen auf dem halbtransparent-dunklen Stat-Chip und brauchen mehr Kontrast als --le-text-3. */
.organic-card__label { color: #047857 !important; }
.organic-card__stat span, .organic-card__stat-label { color: var(--le-text-2) !important; }

/* ==========================================================================
   ICON-EINHEITLICHKEIT (2026-07-23, User-Direktive "Icons komplett weiss").
   Das Zwei-Ton-System (blassrote/graue Kacheln mit roten/dunklen Icons) wird
   site-weit auf EINE Sprache vereinheitlicht: rotes Gradient-Tile, rein
   weisses Icon. !important schlaegt auch die Inline-Styles der Nav-Kacheln.
   Bewusst hier (laedt auf allen Seiten zuletzt) statt in den Seiten-CSS.
   ========================================================================== */
.navbar__mega-icon,
#mobile-menu .mm-leaf-tile,
#mobile-menu .mm-leaf-tile--sub,
#mobile-menu .mm-contact__ico,
.ftr2__ct-ico,
.smt6 .smt6-node .smt6-node__chip,
.smt6-agent-orbit__ico,
.smt6 .smt6-card__ico,
.ksu-industries__node,
.ksu-card__icon,
.tg-card__icon {
  background: linear-gradient(135deg, #ff2030 0%, #DC0018 55%, #b30014 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(220, 0, 24, 0.28) !important;
}
.navbar__mega-icon svg,
#mobile-menu .mm-leaf-tile svg,
#mobile-menu .mm-leaf-tile--sub svg,
#mobile-menu .mm-contact__ico svg,
.ftr2__ct-ico svg,
.smt6 .smt6-node .smt6-node__chip svg,
.smt6-agent-orbit__ico svg,
.smt6 .smt6-card__ico svg,
.ksu-industries__node svg,
.ksu-industries__node i[data-lucide] svg,
.ksu-card__icon svg,
.tg-card__icon svg {
  color: #ffffff !important;
}

/* Gloss-Schleier auf Icon-Kacheln entschaerfen: 32% Weiss-Overlay + dunkler
   Inset liessen die roten Tiles graeulich/milchig wirken ("Icons grau weiss").
   Dezenter Glanz bleibt, das Rot traegt. */
.navbar__mega-icon::before,
.smc-card__icon::before, .smc-node__icon::before, .smc-techcard__ico::before,
.smt6-card__ico::before, .smt6-arch__ico::before, .smt6-case__ico::before,
.ksu-card__icon::before,
.smt-card__icon::before, .smt-layer__icon::before, .smt-inttile__icon::before {
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%) !important;
}

/* Stat-Zahlen (262'144 / 6 / 5 / 24-7): trugen noch den Dark-Theme-Textverlauf
   weiss->rose mit background-clip:text -> auf heller Seite unlesbar weiss.
   Jetzt roter Marken-Verlauf. */
.smt6 .smt6-stat__v {
  background: linear-gradient(120deg, #dc0018, #ff4458) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #dc0018 !important;
}

/* Advanced Protection (#protection): 10 Karten standen in 5 zu engen Spalten,
   Titel brachen mitten im Wort ("EU-Hos-ting"). 4 Spalten + keine Silbentrennung
   in Kartentiteln. */
#protection .smt6-grid5 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.smt6 .smt6-card__t { hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: normal !important; word-break: normal !important; }

/* ==========================================================================
   SM-TECH (.smt-* Namespace) — Light-Konvertierung
   --------------------------------------------------------------------------
   smtech-2026.css ist light-first gebaut (--le-* vars), ABER die dunklen
   ".smt-section--ink" Sections (#power-law, #security, #cta) und die
   .smt-band KPI-Leiste nutzen --smt-ink (#0f1019) + weissen Text — die im
   Light-Theme zu dunklen Inseln mit unlesbarem Text werden. Hier konvertiert.
   ========================================================================== */
/* --smt-ink auf Light umschalten → .smt-section--ink + .smt-band hell */
.smt-wrap { --smt-ink: #f5f5f7; }
.smt-section--ink {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
}
.smt-section--ink::before { background: linear-gradient(90deg, transparent, rgba(220, 0, 24, 0.22), transparent) !important; }
/* Weisser Text in ink-Sections → dunkel (Apple-Text) */
.smt-section--ink .smt-title,
.smt-section--ink .smt-lead strong,
.smt-section--ink .smt-disclaimer a { color: var(--le-text) !important; }
.smt-section--ink .smt-lead,
.smt-section--ink .smt-disclaimer { color: var(--le-text-2) !important; }
.smt-section--ink .smt-eyebrow { color: var(--le-red) !important; }
.smt-section--ink .smt-eyebrow::before { background: var(--le-red) !important; }
.smt-section--ink .smt-title .grad {
  background: linear-gradient(115deg, #dc0018, #ff5d6e) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Chips in ink-Sections */
.smt-section--ink .smt-chip { background: var(--le-bg-2) !important; color: var(--le-text-2) !important; border-color: var(--le-line) !important; }
.smt-section--ink .smt-chip--ok { background: rgba(22, 163, 74, 0.10) !important; color: #15803d !important; border-color: rgba(22, 163, 74, 0.30) !important; }
.smt-section--ink .smt-chip--red { background: var(--le-red-soft) !important; color: var(--le-red) !important; border-color: rgba(220, 0, 24, 0.30) !important; }
/* Ghost-Button in ink-Sections */
.smt-section--ink .smt-btn--ghost { background: var(--le-card) !important; border-color: var(--le-line) !important; color: var(--le-text) !important; box-shadow: var(--le-shadow-sm) !important; }
.smt-section--ink .smt-btn--ghost:hover { color: var(--le-red) !important; border-color: rgba(220, 0, 24, 0.40) !important; }
/* Power-Law-Legende + Loopsteps: hardcodiert weiss im Basis-CSS → dunkel */
.smt-section--ink .smt-power__legend,
.smt-section--ink .smt-bet-legend .lg-kill,
.smt-section--ink .smt-bet-legend .lg-win,
.smt-section--ink .smt-bet-legend .lg-big { color: var(--le-text-2) !important; }
.smt-section--ink .smt-chartlabels .lab-tail { color: var(--le-red) !important; }
.smt-section--ink .smt-chartlabels .lab-head { color: #15803d !important; }
.smt-section--ink .smt-power__panel,
.smt-section--ink .smt-power__side { background: var(--le-card) !important; border-color: var(--le-line) !important; box-shadow: var(--le-shadow-sm) !important; }
.smt-section--ink .smt-power__panel h3,
.smt-section--ink .smt-power__side h3 { color: var(--le-text) !important; }
.smt-section--ink .smt-power__panel p,
.smt-section--ink .smt-power__side p { color: var(--le-text-2) !important; }
.smt-section--ink .smt-power__panel strong { color: var(--le-text) !important; }
/* Loopstep-Nummern: hatten weiss, bekommen kräftiges Rot (gleiche Logik wie SMT-6-Steps) */
.smt-section--ink .smt-loopstep__num { color: #fff !important; background: linear-gradient(150deg, rgba(220, 0, 24, 0.9), rgba(140, 0, 15, 0.95)) !important; box-shadow: 0 10px 26px rgba(220, 0, 24, 0.3) !important; }

/* --- 3D POWER-LAW ARENA (.pl-*) — im Light-Theme als helle Premium-Arena --- */
.smt-section--ink .pl-arena {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220, 0, 24, 0.08), transparent 60%),
    linear-gradient(180deg, var(--le-card) 0%, var(--le-bg-2) 100%) !important;
  border-color: var(--le-line) !important;
  box-shadow: var(--le-shadow-md) !important;
}
.smt-section--ink .pl-floor__grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px) !important;
  opacity: 0.7 !important;
}
.smt-section--ink .pl-bar { background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)) !important; border-color: var(--le-line) !important; }
.smt-section--ink .pl-bar--win { background: linear-gradient(180deg, rgba(74, 222, 128, 0.85), rgba(22, 163, 74, 0.4)) !important; border-color: rgba(74, 222, 128, 0.5) !important; }
.smt-section--ink .pl-bar--big { background: linear-gradient(180deg, #4ade80, #15803d) !important; border-color: rgba(74, 222, 128, 0.7) !important; }
.smt-section--ink .pl-bar--kill { background: linear-gradient(180deg, rgba(220, 0, 24, 0.5), rgba(180, 0, 20, 0.25)) !important; border-color: rgba(220, 0, 24, 0.3) !important; }
.smt-section--ink .pl-bar__val { color: #fff !important; }
.smt-section--ink .pl-bar__tag { color: var(--le-text-3) !important; }
.smt-section--ink .pl-bar--win .pl-bar__tag, .smt-section--ink .pl-bar--big .pl-bar__tag { color: #15803d !important; }
.smt-section--ink .pl-bar--kill .pl-bar__tag { color: var(--le-red) !important; }
.smt-section--ink .pl-core i[data-lucide] { color: var(--le-red) !important; }
.smt-section--ink .pl-core__pulse { background: radial-gradient(circle, rgba(220, 0, 24, 0.4), transparent 65%) !important; }
.smt-section--ink .pl-core__ring { border-color: rgba(220, 0, 24, 0.4) !important; }
.smt-section--ink .pl-ticker__item--win { background: rgba(22, 163, 74, 0.1) !important; border-color: rgba(22, 163, 74, 0.3) !important; color: #15803d !important; }
.smt-section--ink .pl-ticker__item--kill { background: var(--le-red-soft) !important; border-color: rgba(220, 0, 24, 0.3) !important; color: var(--le-red) !important; }
.smt-section--ink .pl-scale { color: var(--le-text-3) !important; }
.smt-section--ink .pl-scale span:first-child { color: #15803d !important; }
.smt-section--ink .pl-leg { background: var(--le-bg-2) !important; border-color: var(--le-line) !important; color: var(--le-text-2) !important; }
.smt-section--ink .pl-leg--big { background: rgba(22, 163, 74, 0.1) !important; border-color: rgba(22, 163, 74, 0.3) !important; color: #15803d !important; }
.smt-section--ink .pl-leg--win { background: rgba(22, 163, 74, 0.08) !important; border-color: rgba(22, 163, 74, 0.25) !important; color: #15803d !important; }
.smt-section--ink .pl-leg--kill { background: var(--le-red-soft) !important; border-color: rgba(220, 0, 24, 0.3) !important; color: var(--le-red) !important; }
.smt-section--ink .pl-claim { color: var(--le-text-2) !important; }
.smt-section--ink .pl-claim strong { color: var(--le-text) !important; }
.smt-section--ink .smt-loopstep__t { color: var(--le-text) !important; }
.smt-section--ink .smt-loopstep__desc { color: var(--le-text-2) !important; }
.smt-section--ink .smt-loopstep { background: var(--le-card) !important; border-color: var(--le-line) !important; box-shadow: var(--le-shadow-sm) !important; }
/* .smt-band KPI-Leiste (im Hero, dunkler Streifen) → hell */
.smt-band { background: var(--le-bg-2) !important; color: var(--le-text) !important; }
.smt-band__val { color: var(--le-text) !important; }
.smt-band__label, .smt-band__note { color: var(--le-text-3) !important; }
.smt-band__item { border-left-color: var(--le-line) !important; }
/* Security-Rail (#security): weisse Texte + Borders */
.smt-rail__item { border-bottom-color: var(--le-line) !important; }
.smt-rail__name { color: var(--le-text) !important; }
.smt-rail__desc { color: var(--le-text-2) !important; }
.smt-spec2__row { border-bottom-color: var(--le-line) !important; }
.smt-spec2__l, .smt-spec2__l strong { color: var(--le-text-2) !important; }
.smt-spec2__l strong { color: var(--le-text) !important; }
.smt-guard__row { border-bottom-color: var(--le-line) !important; }
.smt-guard__intro, .smt-guard__p { color: var(--le-text-2) !important; }
.smt-guard__t { color: var(--le-text) !important; }
/* Power-Law-Section (#power-law): weisse Panel/Side-Texte */
.smt-power__panel h3, .smt-power__side h3 { color: var(--le-text) !important; }
.smt-power__panel p, .smt-power__side p { color: var(--le-text-2) !important; }
.smt-loopstep__name { color: var(--le-text) !important; }
.smt-loopstep__desc { color: var(--le-text-2) !important; }

/* ==========================================================================
   SMT-6 — verbliebene Einzelelemente (Audit Prio 2/4)
   ========================================================================== */
/* API-Formular: .smt6-field__i dunkler Background + dunkler Text → unlesbar */
.smt6-field__i { background: var(--le-card) !important; border-color: var(--le-line) !important; color: var(--le-text) !important; }
.smt6-field__i::placeholder { color: var(--le-text-3) !important; }
.smt6-field__i:focus { background: #ffffff !important; border-color: rgba(220, 0, 24, 0.4) !important; }
/* Waitlist-Erfolgs-State: weisser Text auf hellem Container */
.smt6-wait__done h3 { color: var(--le-text) !important; }
.smt6-wait__err { color: var(--le-red) !important; }
/* Modell-Matrix: unsichtbare Striche (.smt6-mm .n war nicht in Fix-Liste) */
.smt6-mm .n, .smt6-cmp .n { color: var(--le-text-3) !important; }

/* ==========================================================================
   KI-SUITE — .ksu-segment weisse Descendant-Texte (Audit Prio 5)
   ========================================================================== */
.ksu-segment p { color: var(--le-text-2) !important; }
.ksu-segment__list li { color: var(--le-text-2) !important; }
.ksu-segment__bridge span { color: var(--le-text-3) !important; }
.ksu-segment__bridge strong { color: var(--le-red) !important; }

/* --- PRICING (.ksu-tier-*): neue Foundation/Suite/Command-Cards, Light-Theme --- */
.ksu-tier { background: var(--le-card) !important; border-color: var(--le-line) !important; box-shadow: var(--le-shadow-sm) !important; }
.ksu-tier:hover { border-color: rgba(220,0,24,0.3) !important; box-shadow: var(--le-shadow-md) !important; }
.ksu-tier--featured { background: linear-gradient(160deg, rgba(220,0,24,0.05), #ffffff) !important; border-color: rgba(220,0,24,0.3) !important; box-shadow: var(--le-shadow-md) !important; }
.ksu-tier__flag { background: linear-gradient(135deg, #ff2c40, #c00015) !important; color: #fff !important; }
.ksu-tier__step { color: var(--le-red) !important; }
.ksu-tier__name { color: var(--le-text) !important; }
.ksu-tier__size { color: var(--le-text-3) !important; }
.ksu-tier__outcome { color: var(--le-text) !important; }
.ksu-tier__price { border-top-color: var(--le-line) !important; border-bottom-color: var(--le-line) !important; }
.ksu-tier__price-val { color: var(--le-text) !important; }
.ksu-tier__price-lbl { color: var(--le-text-3) !important; }
.ksu-tier__section-lbl { color: var(--le-text-3) !important; }
.ksu-tier__list li { color: var(--le-text-2) !important; }
.ksu-tier__list li::before { color: #15803d !important; }
.ksu-pricing__note { background: var(--le-bg-2) !important; border-color: var(--le-line) !important; color: var(--le-text-2) !important; }

/* ==========================================================================
   DARK EDITORIAL EXCEPTIONS
   Diese drei Kernflaechen bleiben bewusst dunkel und kontrastreich.
   ========================================================================== */
#einfach.ksu-editorial,
#cta.ksu-closing,
#power-law.smt-section {
  scroll-margin-top: 96px;
}

/* KI Business Suite: kompakter Factsheet-Vergleich */
#einfach.ksu-editorial {
  background:
    radial-gradient(760px 440px at 88% 5%, rgba(220, 0, 24, 0.16), transparent 66%),
    radial-gradient(620px 420px at 4% 94%, rgba(255, 255, 255, 0.045), transparent 70%),
    #111214 !important;
  color: #f7f5f2 !important;
}
#einfach .ksu-editorial__topline { color: rgba(255, 255, 255, 0.55) !important; }
#einfach .ksu-editorial__topline span:last-child { color: #ff6b7b !important; }
#einfach .ksu-editorial__intro h2,
#einfach .ksu-compare__head h3,
#einfach .ksu-compare__list strong,
#einfach .ksu-compare__decision strong,
#einfach .ksu-principles h3 { color: #fff !important; }
#einfach .ksu-editorial__intro h2 span { color: #ef263b !important; }
#einfach .ksu-editorial__intro p { color: rgba(255, 255, 255, 0.66) !important; }
#einfach .ksu-compare__panel {
  background: rgba(255, 255, 255, 0.018) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#einfach .ksu-compare__panel--suite {
  background:
    linear-gradient(145deg, rgba(220, 0, 24, 0.14), rgba(220, 0, 24, 0.025) 56%),
    rgba(255, 255, 255, 0.02) !important;
}
#einfach .ksu-compare__index { color: rgba(255, 255, 255, 0.46) !important; }
#einfach .ksu-compare__panel--suite .ksu-compare__index,
#einfach .ksu-compare__panel--suite .ksu-compare__list li > span,
#einfach .ksu-compare__decision span { color: #ff6677 !important; }
#einfach .ksu-compare__count { color: rgba(255, 255, 255, 0.66) !important; }
#einfach .ksu-compare__panel--manual .ksu-compare__list li > span { color: rgba(255, 255, 255, 0.34) !important; }
#einfach .ksu-compare__list p { color: rgba(255, 255, 255, 0.54) !important; }
#einfach .ksu-compare__foot { color: rgba(255, 255, 255, 0.45) !important; }
#einfach .ksu-principles article > span { color: #f12b40 !important; }
#einfach .ksu-principles p { color: rgba(255, 255, 255, 0.52) !important; }

/* KI Business Suite: finaler CTA ohne weisse Kartenflaeche */
#cta.ksu-closing {
  background:
    radial-gradient(820px 420px at 82% 34%, rgba(220, 0, 24, 0.2), transparent 66%),
    linear-gradient(150deg, #090a0c 0%, #141518 58%, #0b0c0f 100%) !important;
  color: #fff !important;
}
#cta .ksu-final {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#cta .ksu-final__value { color: #ff5063 !important; }
#cta .ksu-final__stats span { color: rgba(255, 255, 255, 0.48) !important; }
#cta .ksu-final__eyebrow { color: #ff7c8a !important; }
#cta .ksu-final__copy h2 { color: #fff !important; }
#cta .ksu-final__copy h2 span { color: #ef263b !important; }
#cta .ksu-final__copy p { color: rgba(255, 255, 255, 0.62) !important; }
#cta .ksu-final__link { color: rgba(255, 255, 255, 0.82) !important; }
#cta .ksu-final__link:hover { color: #fff !important; }
#cta .ksu-final__actions small { color: rgba(255, 255, 255, 0.4) !important; }

/* SM Tech Power Law: eine zusammenhaengende dunkle Zwei-Spalten-Buehne */
#power-law.smt-section--ink {
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(220, 0, 24, 0.16), transparent 68%),
    radial-gradient(720px 460px at 94% 86%, rgba(74, 222, 128, 0.055), transparent 72%),
    linear-gradient(155deg, #090a0d 0%, #121318 55%, #090a0d 100%) !important;
  color: #fff !important;
}
#power-law.smt-section--ink::before {
  background: linear-gradient(90deg, transparent, rgba(255, 72, 92, 0.55), transparent) !important;
}
#power-law .smt-eyebrow { color: #ff7c8a !important; }
#power-law .smt-eyebrow::before { background: #dc0018 !important; }
#power-law .smt-title,
#power-law .smt-title .grad,
#power-law .smt-lead strong,
#power-law .smt-power__side h3,
#power-law .smt-loopstep__name,
#power-law .pl-claim strong { color: #fff !important; }
#power-law .smt-title .grad {
  background: linear-gradient(112deg, #ff3349, #ff9aa5) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#power-law .smt-lead,
#power-law .smt-power__side > p,
#power-law .smt-loopstep__desc,
#power-law .pl-claim,
#power-law .smt-disclaimer { color: rgba(255, 255, 255, 0.64) !important; }
#power-law .smt-power {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: clamp(30px, 4vw, 58px);
}
#power-law .smt-power__side {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#power-law .smt-loopstep {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#power-law .smt-loopstep__num {
  color: #fff !important;
  background: linear-gradient(145deg, #f12b40, #a90013) !important;
  box-shadow: 0 9px 24px rgba(220, 0, 24, 0.3) !important;
}
#power-law .pl-arena {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220, 0, 24, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(10, 11, 18, 0.82), rgba(10, 11, 18, 0.35)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 72px rgba(0, 0, 0, 0.46) !important;
}
#power-law .pl-floor__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
  opacity: 0.55 !important;
}
#power-law .pl-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
#power-law .pl-bar--win {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.88), rgba(22, 163, 74, 0.42)) !important;
  border-color: rgba(74, 222, 128, 0.55) !important;
}
#power-law .pl-bar--big {
  background: linear-gradient(180deg, #4ade80, #15803d) !important;
  border-color: rgba(74, 222, 128, 0.72) !important;
}
#power-law .pl-bar--kill {
  background: linear-gradient(180deg, rgba(255, 143, 155, 0.45), rgba(120, 20, 30, 0.3)) !important;
  border-color: rgba(255, 143, 155, 0.3) !important;
}
#power-law .pl-bar__val { color: #fff !important; }
#power-law .pl-bar__tag,
#power-law .pl-scale { color: rgba(255, 255, 255, 0.48) !important; }
#power-law .pl-bar--win .pl-bar__tag,
#power-law .pl-bar--big .pl-bar__tag,
#power-law .pl-scale span:first-child { color: #4ade80 !important; }
#power-law .pl-bar--kill .pl-bar__tag { color: #ff8f9b !important; }
#power-law .pl-core i[data-lucide] { color: #fff !important; }
#power-law .pl-core__pulse { background: radial-gradient(circle, rgba(255, 93, 110, 0.55), transparent 65%) !important; }
#power-law .pl-core__ring { border-color: rgba(255, 93, 110, 0.5) !important; }
#power-law .pl-ticker__item--win {
  background: rgba(74, 222, 128, 0.14) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
  color: #4ade80 !important;
}
#power-law .pl-ticker__item--kill {
  background: rgba(255, 143, 155, 0.12) !important;
  border-color: rgba(255, 143, 155, 0.32) !important;
  color: #ff8f9b !important;
}
#power-law .pl-leg {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
#power-law .pl-leg--big {
  background: rgba(74, 222, 128, 0.12) !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
  color: #4ade80 !important;
}
#power-law .pl-leg--win {
  background: rgba(74, 222, 128, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.22) !important;
  color: #4ade80 !important;
}
#power-law .pl-leg--kill {
  background: rgba(255, 143, 155, 0.1) !important;
  border-color: rgba(255, 143, 155, 0.28) !important;
  color: #ff8f9b !important;
}
#power-law .smt-disclaimer strong { color: #fff !important; }

@media (max-width: 900px) {
  #power-law .smt-power { grid-template-columns: 1fr; }
  #power-law .smt-power__side {
    border-top-color: rgba(255, 255, 255, 0.16) !important;
    border-left: 0 !important;
  }
}
@media (max-width: 768px) {
  #einfach.ksu-editorial,
  #cta.ksu-closing,
  #power-law.smt-section {
    scroll-margin-top: 76px;
  }
}
@media (max-width: 380px) {
  .navbar.navbar--enterprise .navbar__name { display: none !important; }
}
/* Contact form headings remain visually identical while using a single page H1. */
.lead-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.lead-hero__title .red {
  color: var(--swiss-red);
}

.lead-hero__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 640px) {
  .lead-hero__title {
    letter-spacing: -0.035em;
    line-height: 1.02;
  }
}

/* ==========================================================================
   KI BUSINESS SUITE · INDIVIDUAL FIT + COMPACT MODULE EXPLORER
   ========================================================================== */
.ksu-hero__fit {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin: -16px auto 24px;
}

.ksu-hero__fit span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--le-text-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}

.ksu-hero__fit span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--le-red);
  box-shadow: 0 0 0 4px rgba(220, 0, 24, 0.08);
}

@media (max-width: 1500px) {
  .ksu-hero__chips {
    display: none;
  }
}

#module {
  overflow: clip;
  background:
    radial-gradient(820px 460px at 88% 8%, rgba(220, 0, 24, 0.07), transparent 68%),
    linear-gradient(180deg, #f7f7f8 0%, #ffffff 42%, #f4f4f6 100%) !important;
}

#module .ksm-intro {
  max-width: 880px;
  margin-inline: 0;
  text-align: left !important;
}

#module .ksm-intro .stage__eyebrow {
  justify-content: flex-start !important;
}

#module .ksm-intro .stage__title {
  max-width: 760px;
  color: var(--le-text) !important;
}

#module .ksm-intro .stage__sub {
  max-width: 72ch;
  margin-inline: 0 !important;
  color: var(--le-text-2) !important;
}

#module .ksm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 13px 0;
  border-top: 1px solid var(--le-line);
  border-bottom: 1px solid var(--le-line);
}

#module .ksm-toolbar__copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

#module .ksm-toolbar__copy strong {
  color: var(--le-text);
  font-size: 13px;
  letter-spacing: -0.01em;
}

#module .ksm-toolbar__copy span {
  color: var(--le-text-3);
  font-size: 12px;
}

#module .ksm-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

#module .ksm-toolbar__count {
  min-width: 66px;
  color: var(--le-text-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

#module .ksm-toolbar__button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--le-line);
  border-radius: 50%;
  background: #fff;
  color: var(--le-text);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#module .ksm-toolbar__button:hover:not(:disabled) {
  border-color: var(--le-red);
  background: var(--le-red);
  color: #fff;
  transform: translateY(-1px);
}

#module .ksm-toolbar__button:disabled {
  cursor: default;
  opacity: 0.28;
  box-shadow: none;
}

#module .ksm-layout {
  display: block !important;
  margin-top: 16px;
}

#module .ksm-rail {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  overflow-x: auto;
  margin: 0 0 10px;
  padding: 2px 1px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#module .ksm-rail::-webkit-scrollbar {
  display: none;
}

#module .ksm-rail__item {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px !important;
  border: 1px solid var(--le-line);
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72);
  color: var(--le-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  scroll-snap-align: start;
  white-space: nowrap;
}

#module .ksm-rail__item:hover {
  border-color: rgba(220, 0, 24, 0.22);
  background: #fff !important;
  color: var(--le-text) !important;
}

#module .ksm-rail__item.is-active {
  border-color: rgba(220, 0, 24, 0.28);
  background: var(--le-red-soft) !important;
  color: var(--le-red) !important;
}

#module .ksm-rail__dot {
  width: 5px !important;
  height: 5px !important;
  background: currentColor !important;
  box-shadow: none !important;
}

#module .ksm-flow {
  position: relative;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: clamp(380px, 34vw, 450px);
  align-items: stretch;
  gap: 16px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 2px 22px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 0, 24, 0.58) rgba(17, 24, 39, 0.08);
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#module .ksm-flow::-webkit-scrollbar {
  height: 5px;
}

#module .ksm-flow::-webkit-scrollbar-track {
  border-radius: 99px;
  background: rgba(17, 24, 39, 0.08);
}

#module .ksm-flow::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: linear-gradient(90deg, #ef233c, #a90013);
}

#module .ksm-flow:focus-visible {
  outline: 2px solid rgba(220, 0, 24, 0.5);
  outline-offset: 5px;
}

#module .ksm-stage {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 226px auto;
  align-content: start;
  align-items: stretch;
  gap: 14px !important;
  min-width: 0;
  min-height: 520px;
  padding: 13px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 250, 0.92)) !important;
  box-shadow: 0 20px 52px rgba(17, 24, 39, 0.08);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

#module .ksm-stage:hover {
  border-color: rgba(220, 0, 24, 0.28);
  box-shadow: 0 24px 64px rgba(17, 24, 39, 0.12), 0 10px 32px rgba(220, 0, 24, 0.06);
}

#module .ksm-stage__scene {
  order: 0 !important;
  height: 226px;
  min-width: 0;
  overflow: hidden;
  padding: 9px;
  border-radius: 15px;
  transform: none !important;
  background:
    radial-gradient(420px 180px at 85% 0%, rgba(220, 0, 24, 0.08), transparent 68%),
    #f2f2f4 !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06) !important;
}

#module .ksm-stage__scene:hover {
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08) !important;
}

#module .ksm-stage__scene .ksu-ui {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px !important;
  font-size: 10.5px;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1) !important;
}

#module .ksm-stage__scene .ksu-ui__body {
  overflow: hidden;
}

#module .ksm-stage__glow {
  display: none;
}

#module .ksm-stage__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px 7px 8px;
}

#module .ksm-stage__meta {
  margin-bottom: 8px;
}

#module .ksm-stage__num {
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

#module .ksm-stage__head {
  gap: 10px;
  margin-bottom: 8px;
}

#module .ksm-stage__head .ksu-card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
}

#module .ksm-stage__title {
  color: var(--le-text) !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  line-height: 1.08;
}

#module .ksm-stage__lead {
  margin: 0 0 13px !important;
  color: var(--le-text-2) !important;
  font-size: 13.5px !important;
  line-height: 1.52 !important;
}

#module .ksm-stage .ksu-feats {
  gap: 7px;
  margin-top: auto;
}

#module .ksm-stage .ksu-feats li {
  gap: 8px;
  color: var(--le-text-2) !important;
  font-size: 12.2px !important;
  line-height: 1.4;
}

#module .ksm-stage .ksu-feats li::before {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  font-size: 9px;
}

@media (max-width: 700px) {
  .ksu-hero__fit {
    gap: 6px;
    margin-top: -18px;
  }

  .ksu-hero__fit span {
    padding: 6px 9px;
    font-size: 8.5px;
  }

  #module .ksm-intro .stage__title {
    font-size: clamp(34px, 11vw, 48px);
  }

  #module .ksm-toolbar {
    gap: 10px;
    margin-top: 24px;
  }

  #module .ksm-toolbar__copy span {
    display: none;
  }

  #module .ksm-toolbar__count {
    min-width: 58px;
    font-size: 9px;
  }

  #module .ksm-toolbar__button {
    width: 36px;
    height: 36px;
  }

  #module .ksm-flow {
    grid-auto-columns: min(86vw, 340px);
    gap: 11px !important;
  }

  #module .ksm-stage {
    grid-template-rows: 204px auto;
    min-height: 495px;
    padding: 10px;
    border-radius: 18px;
  }

  #module .ksm-stage__scene {
    height: 204px;
    padding: 7px;
    border-radius: 12px;
  }

  #module .ksm-stage__copy {
    padding-inline: 5px;
  }
}

/* ==========================================================================
   KI BUSINESS SUITE · FIVE CONNECTED BUSINESS AREAS
   ========================================================================== */
.ksu-areas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 8% 12%, rgba(220, 0, 24, 0.18), transparent 68%),
    radial-gradient(720px 460px at 94% 88%, rgba(255, 91, 111, 0.08), transparent 72%),
    linear-gradient(155deg, #08090c 0%, #121318 54%, #090a0d 100%) !important;
  color: #fff !important;
}

.ksu-areas::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(1180px, 88vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 79, 99, 0.72), transparent);
}

.ksu-areas__grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.ksu-areas .stage__inner {
  position: relative;
  z-index: 1;
}

.ksu-areas__head {
  max-width: 900px;
}

.ksu-areas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #ff8190;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ksu-areas__eyebrow > span {
  width: 28px;
  height: 1px;
  background: #ef233c;
  box-shadow: 0 0 12px rgba(239, 35, 60, 0.7);
}

.ksu-areas__head h2 {
  max-width: 820px;
  margin: 0;
  color: #fff !important;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 74px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.ksu-areas__head h2 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 450;
}

.ksu-areas__head h2 .grad {
  background: linear-gradient(112deg, #ff2f46 0%, #ff8391 58%, #ffd0d5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ksu-areas__head p {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.65;
}

.ksu-areas__fit {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: clamp(34px, 5vw, 54px);
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ksu-areas__fit-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ksu-areas__fit-copy span {
  color: #ff6e7f;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ksu-areas__fit-copy strong {
  color: #fff;
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: -0.012em;
}

.ksu-areas__fit-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.ksu-areas__fit-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ksu-areas__system {
  margin-top: clamp(26px, 4vw, 42px);
}

.ksu-areas__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.ksu-areas__track::before,
.ksu-areas__track::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 72px;
  left: 2%;
  height: 1px;
  pointer-events: none;
}

.ksu-areas__track::before {
  right: 2%;
  background: linear-gradient(90deg, transparent, rgba(255, 91, 111, 0.42) 10%, rgba(255, 91, 111, 0.42) 90%, transparent);
}

.ksu-areas__track::after {
  width: 16%;
  background: linear-gradient(90deg, transparent, #ff5266, transparent);
  filter: drop-shadow(0 0 8px rgba(255, 82, 102, 0.9));
  animation: ksu-area-signal 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes ksu-area-signal {
  0% { transform: translateX(-120%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(620%); opacity: 0; }
}

.ksu-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 306px;
  padding: 18px 17px 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018) 64%),
    rgba(7, 8, 12, 0.74);
  color: #fff !important;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px rgba(0, 0, 0, 0.2);
  transition: border-color 260ms ease, background 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.ksu-area::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 6%, #ef233c 48%, transparent 94%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.ksu-area__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
}

.ksu-area__step {
  color: rgba(255, 255, 255, 0.43);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ksu-area__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255, 93, 110, 0.26);
  border-radius: 50%;
  background: rgba(220, 0, 24, 0.13);
  color: #ff7484;
  box-shadow: 0 0 0 6px rgba(220, 0, 24, 0.035);
}

.ksu-area__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255, 93, 110, 0.42);
  border-radius: inherit;
  animation: ksu-area-pulse 3.6s ease-out infinite;
}

.ksu-area:nth-child(2) .ksu-area__icon::after { animation-delay: -0.7s; }
.ksu-area:nth-child(3) .ksu-area__icon::after { animation-delay: -1.4s; }
.ksu-area:nth-child(4) .ksu-area__icon::after { animation-delay: -2.1s; }
.ksu-area:nth-child(5) .ksu-area__icon::after { animation-delay: -2.8s; }

@keyframes ksu-area-pulse {
  0%, 42% { transform: scale(1); opacity: 0; }
  55% { opacity: 0.5; }
  88%, 100% { transform: scale(1.38); opacity: 0; }
}

.ksu-area__icon svg {
  width: 16px;
  height: 16px;
}

.ksu-areas .ksu-area__title {
  margin-top: 22px;
  color: #fff !important;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
}

.ksu-areas .ksu-area__desc {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.57) !important;
  font-size: 12.5px;
  line-height: 1.55;
}

.ksu-area__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  color: #7ee6a1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ksu-area__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.08), 0 0 10px rgba(74, 222, 128, 0.5);
}

.ksu-area__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.ksu-area__cta > span {
  color: #ff6577;
  font-size: 14px;
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .ksu-area:hover {
    z-index: 2;
    border-color: rgba(255, 93, 110, 0.42);
    background:
      linear-gradient(155deg, rgba(220, 0, 24, 0.13), rgba(255, 255, 255, 0.026) 68%),
      rgba(7, 8, 12, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 68px rgba(0, 0, 0, 0.36);
    transform: translateY(-6px);
  }

  .ksu-area:hover::before {
    opacity: 1;
  }

  .ksu-area:hover .ksu-area__cta {
    color: #fff;
  }

  .ksu-area:hover .ksu-area__cta > span {
    transform: translate(2px, -2px);
  }
}

.ksu-core {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  margin-top: 10px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(255, 93, 110, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(480px 180px at 6% 50%, rgba(220, 0, 24, 0.2), transparent 70%),
    linear-gradient(120deg, rgba(220, 0, 24, 0.1), rgba(255, 255, 255, 0.025) 56%),
    rgba(8, 9, 13, 0.88);
}

.ksu-core__mark {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.ksu-core__mark strong {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 93, 110, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5368, #b90016 62%, #65000c);
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 8px rgba(220, 0, 24, 0.06), 0 0 38px rgba(220, 0, 24, 0.28);
}

.ksu-core__copy {
  min-width: 0;
}

.ksu-core__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff7182;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ksu-core__badge svg {
  width: 13px;
  height: 13px;
}

.ksu-core__copy h3 {
  margin: 7px 0 5px;
  color: #fff !important;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.025em;
}

.ksu-core__copy p {
  max-width: 740px;
  margin: 0;
  color: rgba(255, 255, 255, 0.57) !important;
  font-size: 12.5px;
  line-height: 1.6;
}

.ksu-core__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 19px;
  border: 1px solid rgba(255, 93, 110, 0.38);
  border-radius: 999px;
  background: rgba(220, 0, 24, 0.12);
  color: #fff !important;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.ksu-core__cta:hover {
  border-color: #ef233c;
  background: #dc0018;
  transform: translateY(-2px);
}

@media (max-width: 1080px) {
  .ksu-areas__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 30vw);
    overflow-x: auto;
    padding: 6px 1px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 93, 110, 0.58) rgba(255, 255, 255, 0.08);
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ksu-area {
    scroll-snap-align: start;
  }

  .ksu-areas__track::before,
  .ksu-areas__track::after {
    display: none;
  }
}

@media (max-width: 820px) {
  .ksu-areas__fit {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .ksu-areas__fit-tags {
    justify-content: flex-start;
  }

  .ksu-core {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .ksu-core__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ksu-core__mark strong {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 560px) {
  .ksu-areas__head h2 {
    font-size: clamp(38px, 12.5vw, 54px);
    line-height: 1;
  }

  .ksu-areas__head p {
    margin-top: 18px;
    font-size: 14px;
  }

  .ksu-areas__fit {
    margin-top: 28px;
    padding-block: 15px;
  }

  .ksu-areas__fit-tags {
    gap: 5px;
  }

  .ksu-areas__fit-tags span {
    padding: 6px 8px;
    font-size: 8px;
  }

  .ksu-areas__track {
    grid-auto-columns: min(78vw, 285px);
    gap: 8px;
  }

  .ksu-area {
    min-height: 292px;
    padding: 16px;
  }

  .ksu-core {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 17px;
  }

  .ksu-core__mark {
    width: 128px;
  }

  .ksu-core__cta {
    grid-column: auto;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksu-areas__track::after,
  .ksu-area__icon::after {
    animation: none !important;
  }

  .ksu-area,
  .ksu-core__cta,
  #module .ksm-toolbar__button {
    transition: none !important;
  }
}

/* Tablet: beide Kontakt-Launcher als kompakte Orbs, damit Inhalte frei bleiben. */
@media (min-width: 641px) and (max-width: 900px) {
  .sm-chat-launcher,
  .sm-wa-launcher {
    gap: 0 !important;
    padding: 8px !important;
  }

  .sm-chat-launcher__label,
  .sm-wa-launcher__label {
    display: none !important;
  }
}
