/* =========================================================
   SWIN – Startseite „Special"
   Helle Flächen, Messgitter, Partikel-Morph (Canvas 2D, ohne Bibliothek),
   Wort-Aufhellen, Kennzahlen. Nur index.html.
   ========================================================= */

/* ---------- Helle Fläche: Variablen lokal umdrehen ---------- */
.surface-light {
  --white: #0C1D4F;            /* Überschriften */
  --mist: #45517A;             /* Fließtext */
  --mist-2: #5E6A90;
  --halo-hi: #2C56D8;          /* Akzent als Text (Kontrast auf Hell) */
  --line: rgb(12 29 79 / .09);
  --line-2: rgb(12 29 79 / .16);
  background: #F5F7FD; color: var(--mist);
}
.surface-light--white { background: #FFFFFF; }
.surface-light--tint { background: #EAF0FE; }
.surface-light .acc { color: #2C56D8; }
.surface-light .hero-title .acc { color: #2C56D8; }
.surface-light .btn-ghost { color: #0C1D4F; border-color: rgb(12 29 79 / .22); }
.surface-light .btn-ghost:hover { background: rgb(12 29 79 / .05); border-color: rgb(12 29 79 / .45); }
.surface-light .btn-ghost:active { background: rgb(12 29 79 / .09); }
.surface-light .svc-row:hover { background: rgb(79 125 255 / .06); }
.surface-light .tl-node { background: #fff; }
.surface-light .tl-fill { box-shadow: 0 0 10px rgb(79 125 255 / .45); }
.surface-light .faq-item[open] .faq-icon { color: #fff; }
.surface-light .kicker-num::after { color: var(--mist-2); }
.surface-light ::selection { color: #fff; }

/* Messgitter mit Plus-Markern statt Film-Grain */
.surface-light.has-grid::after {
  opacity: 1;
  background-image:
    radial-gradient(circle, rgb(12 29 79 / .13) 1px, transparent 1.4px),
    linear-gradient(rgb(12 29 79 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(12 29 79 / .045) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px;
  background-position: 0 0, -1px -1px, -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
}

/* Heller Start-Hero: weicher Halo statt dunkler Wolke */
.surface-light.hero--home::before {
  background:
    radial-gradient(38% 42% at 28% 36%, rgb(79 125 255 / .16), transparent 70%),
    radial-gradient(30% 36% at 76% 24%, rgb(115 151 255 / .18), transparent 70%),
    radial-gradient(26% 30% at 60% 76%, rgb(79 125 255 / .08), transparent 70%);
}

/* ---------- Header hell (nur Startseite) ---------- */
.page-light .site-header::before { background: rgb(245 247 253 / .9); border-bottom-color: rgb(12 29 79 / .08); }
.page-light .site-header { --white: #0C1D4F; --mist: #45517A; --mist-2: #5E6A90; --halo-hi: #2C56D8; --line: rgb(12 29 79 / .09); --line-2: rgb(12 29 79 / .16); }
.page-light .nav a:hover, .page-light .nav-dd-btn:hover, .page-light .nav-dd.is-open .nav-dd-btn { background: rgb(12 29 79 / .05); }
.page-light .nav-dd-panel { background: #FFFFFF; border-color: rgb(12 29 79 / .1); box-shadow: 0 30px 80px -24px rgb(12 29 79 / .28); }
.page-light .nav .dd-col a:hover { background: rgb(79 125 255 / .08); }
.page-light .menu-toggle { background: rgb(255 255 255 / .7); }
.page-light .menu-toggle:hover { background: rgb(12 29 79 / .06); }
.page-light .mobile-menu { --white: #0C1D4F; --mist: #45517A; --mist-2: #5E6A90; --halo-hi: #2C56D8; --line: rgb(12 29 79 / .09); --line-2: rgb(12 29 79 / .16); background: #F5F7FD; }
.page-light .mobile-menu .btn-ghost { color: #0C1D4F; border-color: rgb(12 29 79 / .22); }

/* ---------- Hero-Kennzahlen (Mono-HUD) ---------- */
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 32px; border-top: 1px solid var(--line-2); }
.hero-stats div { position: relative; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-2); }
.hero-stats div:nth-child(odd) { border-right: 1px solid var(--line-2); }
.hero-stats div:nth-child(even) { padding-left: 16px; }
.hero-stats div::before { content: "+"; position: absolute; left: -4px; top: -9px; font: 500 12px/1 var(--f-mono); color: #4F7DFF; }
.hero-stats div:nth-child(even)::before { left: -4px; }
.hero-stats dt { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist-2); }
.hero-stats dd { margin: 4px 0 0; font-weight: 800; font-size: clamp(22px, 1.2vw + 14px, 30px); line-height: 1; letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.hero-stats dd small { font-size: .55em; font-weight: 600; letter-spacing: -.01em; margin-left: 3px; color: var(--mist); }

/* ---------- Leistungen: Partikel-Bühne ---------- */
.svc-stage { display: grid; gap: 28px; margin-top: clamp(32px, 4vw, 56px); }
.svc-stage .svc-groups { margin-top: 0; grid-template-columns: 1fr; gap: 40px; }
.morph {
  position: sticky; top: calc(var(--header-h) - 16px); z-index: 2;
  height: clamp(220px, 34vh, 300px); margin-inline: calc(-1 * var(--gutter));
  background: #FFFFFF; box-shadow: 0 1px 0 rgb(12 29 79 / .08);
}
.morph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.morph-cap { position: absolute; left: var(--gutter); bottom: 22px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.morph-num { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #2C56D8; }
.morph-name { font-weight: 800; font-size: clamp(18px, 1vw + 14px, 26px); letter-spacing: -.025em; color: #0C1D4F; }
.morph-from { font: 500 12px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--mist-2); }
.morph-hud { position: absolute; right: var(--gutter); top: 16px; display: flex; gap: 5px; pointer-events: none; }
.morph-hud i { width: 18px; height: 3px; border-radius: 2px; background: rgb(12 29 79 / .14); transition: background-color .3s, width .4s var(--ease); }
.morph-hud i.is-on { width: 30px; background: #4F7DFF; }
.morph-fallback { position: absolute; inset: 0; display: none; place-items: center; }
.morph-fallback svg { width: 120px; height: 120px; color: #4F7DFF; stroke-width: 1.4; }
.no-canvas .morph-fallback { display: grid; }
.svc-index li.is-active .svc-row { background: rgb(79 125 255 / .07); padding-left: 8px; }
.svc-index li.is-active .svc-ico { border-color: #4F7DFF; background: #4F7DFF; color: #fff; }
.svc-ico { transition: background-color .3s, border-color .3s, color .3s; }

@media (min-width: 1000px) {
  .svc-stage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .svc-stage .svc-groups { order: 1; }
  .morph {
    order: 2; top: calc(var(--header-h) + 24px); height: min(560px, calc(100vh - var(--header-h) - 64px));
    margin: 0; border-radius: 20px; background: #F5F7FD;
    box-shadow: inset 0 0 0 1px rgb(12 29 79 / .07);
  }
  .morph::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background-image: radial-gradient(circle, rgb(12 29 79 / .12) 1px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent); }
  .morph-cap { left: 28px; bottom: 26px; }
  .morph-hud { right: 28px; top: 26px; }
}

/* ---------- Ablauf: Tageszähler klappt um ---------- */
.day-num { display: inline-block; transform-origin: 50% 55%; }
.day-num.is-flip { animation: day-flip .38s var(--ease); }
@keyframes day-flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(88deg); opacity: .3; } 100% { transform: rotateX(0); } }
.day-counter { perspective: 600px; }

/* ---------- Über uns: Wort-für-Wort aufhellen ---------- */
.lead.is-words .w { color: rgb(12 29 79 / .22); transition: color .25s linear; }
.lead.is-words .w.is-lit { color: #0C1D4F; }
.lead.is-words .w.is-lit.is-key { color: #2C56D8; }

@media (prefers-reduced-motion: reduce) {
  .day-num.is-flip { animation: none; }
  .lead.is-words .w { color: #0C1D4F; transition: none; }
}

/* ---------- Vorher/Nachher: „Nachher" in Hausfarben (Porzellan & Halo) ---------- */
.ba-clip { border-color: rgb(12 29 79 / .14); box-shadow: 0 40px 80px -40px rgb(12 29 79 / .35); }
.new { background: #F5F7FD; color: #0C1D4F; }
.new-nav { border-bottom-color: rgb(12 29 79 / .09); background: #FFFFFF; }
.new-logo small { color: #2C56D8; }
.new-btn { background: #0C1D4F; color: #FFFFFF; }
.new-btn--ghost { background: transparent; color: #0C1D4F; box-shadow: inset 0 0 0 1px rgb(12 29 79 / .28); }
.new-burger i { background: #0C1D4F; }
.new-kicker { color: #2C56D8; }
.new-h em { color: #2C56D8; }
.new-sub { color: #45517A; }
.new-photo { box-shadow: 0 1.6cqw 3.2cqw -1.2cqw rgb(12 29 79 / .4); }
.new-card { background: #0C1D4F; color: #F5F7FD; box-shadow: 0 1.4cqw 2.8cqw -1cqw rgb(12 29 79 / .5); }
.new-card-k, .new-card span { color: #9DB5FF; }
.new-card-btn { background: #4F7DFF; color: #0B1433; }
.new-trust { color: #45517A; }
.new-trust i { background: #4F7DFF; box-shadow: 0 0 0 .4cqw rgb(79 125 255 / .2); }
.new-strip { border-top-color: rgb(12 29 79 / .09); color: #45517A; background: #FFFFFF; }
.bbar--new { background: #FFFFFF; border-bottom-color: rgb(12 29 79 / .08); }
.bbar--new .bbar-url { background: #EEF2FB; }
.bbar-lock rect { fill: #2C56D8; }
.bbar-lock .ln { stroke: #2C56D8; }
.bbar--new .bbar-host { color: #0C1D4F; }
.ba-tag--after { background: #0C1D4F; }
.surface-light .ba-handle { background: #FFFFFF; color: #0C1D4F; box-shadow: 0 0 0 6px rgb(79 125 255 / .28), 0 10px 28px rgb(12 29 79 / .3); }
.surface-light .ba-hint { color: #FFFFFF; background: rgb(12 29 79 / .88); }