/* ===== semco ONE — zwei helle Design-Optionen (nur Light-Mode) =====
   .calm.tc = Option C „Structured Product" (kühles Grau, Raster, Navy+Blau)
   .calm.tb = Option B „Warm Soft" (Creme, Orange, rund, weich)
   Dark-Mode bleibt unberührt. */

/* ---------------- Option C: Structured Product ---------------- */
:root.calm.tc:not([data-theme="dark"]){--orange:#E07E2E;--rot:#D0463A;--gruen:#29A47C;--blau:#2f74cf;--surface-1:#e8eef6;--surface-2:#dee6f1;--line:#dde4ef}
.calm.tc:not([data-theme="dark"]) body{background:#eef2f8;background-image:none}
.calm.tc:not([data-theme="dark"]) .hero-grid{background-color:transparent;
  background-image:linear-gradient(rgba(18,21,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,21,45,.05) 1px,transparent 1px),radial-gradient(56% 46% at 50% 16%,rgba(47,116,207,.11),transparent 66%);
  background-size:34px 34px,34px 34px,cover;background-position:0 0,0 0,center;
  -webkit-mask:radial-gradient(74% 66% at 50% 34%,#000,transparent);mask:radial-gradient(74% 66% at 50% 34%,#000,transparent)}
.calm.tc:not([data-theme="dark"]) .brand-gradient,.calm.tc:not([data-theme="dark"]) .cockpit{background:linear-gradient(100deg,#12152D 0%,#2f74cf 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.calm.tc:not([data-theme="dark"]) .num-value,.calm.tc:not([data-theme="dark"]) .ps-num{background:linear-gradient(120deg,#12152D 0%,#2f74cf 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.calm.tc:not([data-theme="dark"]) .num-value .count,.calm.tc:not([data-theme="dark"]) .num-value .unit,.calm.tc:not([data-theme="dark"]) .ps-num .count{-webkit-text-fill-color:transparent!important;color:transparent!important;background:none!important}
.calm.tc:not([data-theme="dark"]) .dot-row i{background:#9aa3bd!important}
.calm.tc:not([data-theme="dark"]) .hero-eyebrow{background:#fff!important;border:1px solid #e2e7f1!important;box-shadow:0 2px 10px rgba(18,21,45,.05)!important}
.calm.tc:not([data-theme="dark"]) .btn-primary{background:#0D71EA!important;background-image:none!important;border-radius:10px!important;box-shadow:0 12px 26px -14px rgba(13,113,234,.55)!important}
.calm.tc:not([data-theme="dark"]) .btn-secondary{background:#fff!important;border:1px solid #dbe1ee!important;border-radius:10px!important}
.calm.tc:not([data-theme="dark"]) :is(.feat,.num-card,.step-card,.aud-card,.price-card,.group-card,.crosscard,.whub-card,.wiki-cta,.chat-box,.sel-pain){background:#fff!important;border:1px solid #e3e9f3!important;box-shadow:0 1px 2px rgba(18,21,45,.04),0 14px 32px -22px rgba(18,21,45,.14)!important}
.calm.tc:not([data-theme="dark"]) .appcard{background:#fff!important;border:1px solid #e3e9f3!important;border-top:3px solid var(--c)!important;box-shadow:0 1px 2px rgba(18,21,45,.04),0 14px 32px -22px rgba(18,21,45,.14)!important}
.calm.tc:not([data-theme="dark"]) .site-header{background:rgba(255,255,255,.92)!important;border-bottom:1px solid #e3e9f3}
.calm.tc:not([data-theme="dark"]) .solex{background:linear-gradient(135deg,#1f4a83 0%,#2c62b4 46%,#152a4d 100%)!important}

/* ---------------- Option B: Warm Soft ---------------- */
:root.calm.tb:not([data-theme="dark"]){--orange:#FF7A00;--rot:#E8571E;--gruen:#2AA579;--blau:#3b7ad0;--surface-1:#f6efe4;--surface-2:#efe5d5;--line:#efe7db}
.calm.tb:not([data-theme="dark"]) body{background:#faf6f0;background-image:radial-gradient(60rem 30rem at 12% -6%,rgba(255,122,0,.06),transparent 60%),radial-gradient(52rem 26rem at 92% 2%,rgba(255,150,60,.05),transparent 62%)}
.calm.tb:not([data-theme="dark"]) .hero-grid{background-color:transparent;background-image:radial-gradient(72% 56% at 50% -4%,rgba(255,140,40,.15),transparent 60%),radial-gradient(40% 40% at 88% 30%,rgba(255,170,70,.08),transparent 70%);-webkit-mask:none;mask:none}
.calm.tb:not([data-theme="dark"]) .brand-gradient,.calm.tb:not([data-theme="dark"]) .cockpit{background:linear-gradient(90deg,#FF7A00 0%,#E8571E 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.calm.tb:not([data-theme="dark"]) .num-value,.calm.tb:not([data-theme="dark"]) .ps-num{background:linear-gradient(120deg,#12152D 0%,#E8571E 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.calm.tb:not([data-theme="dark"]) .num-value .count,.calm.tb:not([data-theme="dark"]) .num-value .unit,.calm.tb:not([data-theme="dark"]) .ps-num .count{-webkit-text-fill-color:transparent!important;color:transparent!important;background:none!important}
.calm.tb:not([data-theme="dark"]) .dot-row i{background:#e59b4d!important}
.calm.tb:not([data-theme="dark"]) .hero-sub{color:#6b5d4e!important}
.calm.tb:not([data-theme="dark"]) .hero-eyebrow{background:#fff!important;border:1px solid #efe6d8!important;box-shadow:0 4px 16px rgba(180,120,40,.1)!important}
.calm.tb:not([data-theme="dark"]) .btn-primary{background:#FF7A00!important;background-image:none!important;border-radius:999px!important;box-shadow:0 14px 28px -10px rgba(255,122,0,.5)!important}
.calm.tb:not([data-theme="dark"]) .btn-secondary{background:#fff!important;border:1px solid #ecdfce!important;border-radius:999px!important}
.calm.tb:not([data-theme="dark"]) :is(.feat,.num-card,.step-card,.aud-card,.price-card,.group-card,.crosscard,.whub-card,.wiki-cta,.chat-box,.sel-pain){background:#fffdf9!important;border:1px solid #efe7db!important;border-radius:20px!important;box-shadow:0 20px 44px -26px rgba(120,80,30,.2)!important}
.calm.tb:not([data-theme="dark"]) .appcard{background:#fffdf9!important;border:1px solid #efe7db!important;border-top:3px solid var(--c)!important;border-radius:22px!important;box-shadow:0 20px 44px -26px rgba(120,80,30,.2)!important}
.calm.tb:not([data-theme="dark"]) .site-header{background:rgba(255,252,247,.92)!important;border-bottom:1px solid #efe7db}
.calm.tb:not([data-theme="dark"]) .solex{background:linear-gradient(135deg,#243a5e 0%,#2f5488 46%,#1a2740 100%)!important}

/* ---------------- Sanfte Übergänge hell <-> dunkel (beide Optionen) ---------------- */
.calm.tc:not([data-theme="dark"]){--page-bg:#eef2f8}
.calm.tb:not([data-theme="dark"]){--page-bg:#faf6f0}
/* Volle dunkle Sektionen: oben + unten in den Seiten-Grund ausblenden */
.calm.tc:not([data-theme="dark"]){--page-bg-0:rgba(238,242,248,0)}
.calm.tb:not([data-theme="dark"]){--page-bg-0:rgba(250,246,240,0)}
/* Volle dunkle Sektionen: weicher Einlauf aus dem Seiten-Grund.
   Wichtig: NICHT nach `transparent` verlaufen — das ist durchsichtiges Schwarz
   und erzeugt in der Mitte ein schmutziges Grau plus eine sichtbare Kante.
   Stattdessen zur selben Farbe mit Alpha 0, in mehreren Stufen weich ausgeblendet. */
.calm:not([data-theme="dark"]) section.tone-dark{
  background-image:linear-gradient(180deg,
      var(--page-bg) 0,
      color-mix(in srgb,var(--page-bg) 78%,var(--page-bg-0)) 16%,
      color-mix(in srgb,var(--page-bg) 50%,var(--page-bg-0)) 34%,
      color-mix(in srgb,var(--page-bg) 26%,var(--page-bg-0)) 55%,
      color-mix(in srgb,var(--page-bg) 9%,var(--page-bg-0)) 76%,
      var(--page-bg-0) 100%),
    linear-gradient(0deg,
      var(--page-bg) 0,
      color-mix(in srgb,var(--page-bg) 78%,var(--page-bg-0)) 16%,
      color-mix(in srgb,var(--page-bg) 50%,var(--page-bg-0)) 34%,
      color-mix(in srgb,var(--page-bg) 26%,var(--page-bg-0)) 55%,
      color-mix(in srgb,var(--page-bg) 9%,var(--page-bg-0)) 76%,
      var(--page-bg-0) 100%)!important;
  background-size:100% 132px,100% 132px!important;
  background-position:top,bottom!important;
  background-repeat:no-repeat!important}
/* Abschluss-CTA grenzt unten an den dunklen Footer — dort nur oben ausblenden,
   sonst entsteht ein helles Band direkt ueber dem Footer. */
.calm:not([data-theme="dark"]) section.close-cta.tone-dark{
  background-image:linear-gradient(180deg,
      var(--page-bg) 0,
      color-mix(in srgb,var(--page-bg) 78%,var(--page-bg-0)) 16%,
      color-mix(in srgb,var(--page-bg) 50%,var(--page-bg-0)) 34%,
      color-mix(in srgb,var(--page-bg) 26%,var(--page-bg-0)) 55%,
      color-mix(in srgb,var(--page-bg) 9%,var(--page-bg-0)) 76%,
      var(--page-bg-0) 100%)!important;
  background-size:100% 150px!important;
  background-position:top!important;
  box-shadow:none!important}
/* Analyse-Bahn: nur oben ausblenden (unten schließt bündig ans blaue Band an) */
.calm:not([data-theme="dark"]) .app-analyse.tone-dark{
  background-image:linear-gradient(180deg,var(--page-bg),transparent 96px)!important;background-repeat:no-repeat!important}
/* Solex-Band: nur unten ausblenden (oben schließt bündig an die Analyse-Bahn an) */
.calm.tc:not([data-theme="dark"]) .solex{background:linear-gradient(0deg,var(--page-bg),transparent 120px),linear-gradient(135deg,#1f4a83 0%,#2c62b4 46%,#152a4d 100%)!important}
.calm.tb:not([data-theme="dark"]) .solex{background:linear-gradient(0deg,var(--page-bg),transparent 120px),linear-gradient(135deg,#243a5e 0%,#2f5488 46%,#1a2740 100%)!important}

/* ============================================================
   CTA-KASTEN IM HELLEN MODUS (2026-09-02)
   Regel oben macht .wiki-cta im hellen Modus zur weissen Karte,
   waehrend site.css (~Z. 3563) die Schrift auf #fff festnagelt —
   weisse Schrift auf weisser Karte, der Text war unsichtbar.
   Hier die Textfarben fuer hell zurueck auf dunkel. Spezifitaet
   und Position schlagen site.css. Im Dark Mode bleibt alles wie
   bisher (dunkler Verlauf + weisse Schrift).
   ============================================================ */
.calm:not([data-theme="dark"]) .wiki-cta{color:var(--text)!important}
.calm:not([data-theme="dark"]) .wiki-cta h3{color:var(--navy)!important}
.calm:not([data-theme="dark"]) .wiki-cta p{color:var(--text-soft)!important}
.calm:not([data-theme="dark"]) .wiki-cta .wc-k{color:var(--mute)!important}