/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — HELLE KÄSTEN (Schalter „Dunkel | Hell“)
   ═══════════════════════════════════════════════════════════════════════
   Hintergrund und Kopf bleiben im dunklen Stil, nur die Text-Kästen der
   Unterseiten werden hell mit dunkler Schrift — als WAHL für den
   Besucher, Standard ist dunkel. Was AUSSERHALB der Kästen steht
   (Seitentitel, „Informationen nach …“, Fußzeile), bleibt hell auf dunkel.

   GESCHALTET wird diese Datei, nicht ihr Inhalt: includes/kopf.php bindet
   sie auf jeder Unterseite mit `media="not all"` ein (geladen, aber
   unwirksam), assets/js/modus.js setzt bei „Hell“ `media="all"`. Der
   Schalter selbst: modus_schalter() in includes/config.php, Gestaltung in
   rechtstext.css. Die Startseite hat keine helle Fassung und keinen
   Schalter.

   WIE die Datei wirkt — sie ist die LETZTE Vorlage der Seite und
     1. setzt in den Kästen die Farbvariablen um (--tx, --tx-dim …,
        --feldfarbe) — alles, was im Kasten über Variablen färbt, wird
        dadurch von selbst dunkel, außerhalb ändert sich nichts;
     2. überschreibt die festen Farbwerte im Kasten (Titel in #fff, dunkle
        Innenflächen) mit demselben Selektor — gleiche Spezifität, spätere
        Vorlage gewinnt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Variablen im Kasten ─────────────────────────────────────────── */
.ls-hero, .ls-abschnitt, .erstgespraech, .imp-block {
  --tx: #0f172a;
  --tx-dim: #475569;
  --tx-dim2: #334155;
  --grey: #334155;
  --green-h: #15803d;
  --orange: #c2410c;
  /* Mittleres Graublau bei 80 % Deckkraft — das Hintergrundbild scheint
     leicht durch; die Innenflächen bleiben eine Spur heller als der Kasten. */
  --kasten: rgba(220, 226, 233, .80);      /* Kastengrund, hell-graublau */
  --innen:  rgba(255, 255, 255, .30);      /* Innenflächen eine Spur heller */
  --linie:  rgba(71, 85, 105, .22);
}
/* Feldfarben dunkler, sonst auf Hell zu schwach (Text, Linien, Punkte). */
.leistungsseite--blau   :is(.ls-hero, .ls-abschnitt, .erstgespraech, .imp-block) { --feldfarbe:  2, 132, 199; }
.leistungsseite--orange :is(.ls-hero, .ls-abschnitt, .erstgespraech, .imp-block) { --feldfarbe: 234,  88,  12; }
.leistungsseite--gruen  :is(.ls-hero, .ls-abschnitt, .erstgespraech, .imp-block) { --feldfarbe:  22, 163,  74; }

/* ── 2. Die Kästen selbst ───────────────────────────────────────────── */
.ls-hero, .ls-abschnitt {
  background: linear-gradient(to right, rgba(var(--feldfarbe), .09), rgba(var(--feldfarbe), 0) 240px), var(--kasten);
}
.ls-hero {
  background: linear-gradient(to right, rgba(var(--feldfarbe), .10), rgba(var(--feldfarbe), 0) 300px), var(--kasten);
}
.erstgespraech.ls-abschluss,
.erstgespraech {
  background: linear-gradient(to right, rgba(34, 197, 94, .14), rgba(34, 197, 94, .05)), var(--kasten);
}
/* Impressum, Datenschutz, Kurs */
.imp-block {
  border-color: rgba(71, 85, 105, .22);
  background: linear-gradient(to right, rgba(34, 197, 94, .13), rgba(34, 197, 94, 0) 180px), var(--kasten);
}
#datenschutz .imp-block { background: linear-gradient(to right, rgba(34, 197, 94, .13), rgba(34, 197, 94, 0) 180px), var(--kasten); }
.leistungsseite .imp-block {
  background: linear-gradient(to right, rgba(var(--feldfarbe), .10), rgba(var(--feldfarbe), 0) 200px), var(--kasten);
}

/* ── 3. Titel und Hervorhebungen (fest #fff in den Seitenvorlagen) ──── */
.ls-titel, .ls-hero-titel, .ls-kachel-titel,
.ls-vergleich-marke, .ls-paket-name,
.ls-enthalten-liste strong, .ls-referenz-name, .ls-wegfeld-titel,
.ls-frage summary, .imp-name { color: #0f172a; }
.ls-fragen, .ls-frage { border-color: var(--linie); }
.lg-t { fill: #0f172a; }

/* ── 4. Innenflächen ────────────────────────────────────────────────── */
.ls-kachel { background: var(--innen); }
.ls-fusszeile, .ls-vergleich-feld, .ls-enthalten { border: 1px solid var(--linie); background: var(--innen); }
.ls-vergleich-feld--agent {
  background: linear-gradient(180deg, rgba(var(--feldfarbe), .10), rgba(var(--feldfarbe), .02)), var(--innen);
}
.ls-preis {
  border: 1px solid rgba(22, 163, 74, .36);
  background: linear-gradient(180deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .04)), var(--innen);
}
.ls-fakten li::before { box-shadow: 0 0 0 4px rgba(var(--feldfarbe), .16), 0 0 14px rgba(var(--feldfarbe), .3); }
.ls-paket {
  border: 1px solid rgba(22, 163, 74, .30);
  background: linear-gradient(180deg, rgba(34, 197, 94, .10), rgba(34, 197, 94, .03)), var(--innen);
}
.ls-paket:hover { border-color: rgba(22, 163, 74, .5); box-shadow: 0 18px 40px rgba(15, 23, 42, .12); }
.ls-paket--betont {
  border-color: rgba(22, 163, 74, .6);
  background: linear-gradient(180deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, .04)), var(--innen);
  box-shadow: 0 0 30px rgba(22, 163, 74, .14);
}
.ls-referenz a { background: var(--innen); }
.ls-referenz img { border: 1px solid var(--linie); }
.ls-wegfeld {
  border-color: rgba(var(--feldfarbe), .35);
  background: linear-gradient(180deg, rgba(var(--feldfarbe), .09), rgba(var(--feldfarbe), .02)), var(--innen);
}
.lg-schicht { fill: rgba(15, 23, 42, .05); }
/* Ablaufgrafiken Chat ↔ Agent der KI-Seite: die festen dunklen Flächen
   hell, sonst färbt alles über Variablen von selbst. */
.vg-flaeche { fill: rgba(15, 23, 42, .04); }
.vg-blase { fill: rgba(71, 85, 105, .22); }
.vg-blatt, .vg-station { fill: #ffffff; }
.ls-video video { box-shadow: 0 18px 44px rgba(15, 23, 42, .22), 0 0 34px rgba(var(--feldfarbe), .16); }

/* ── 5. Knöpfe im Kasten ────────────────────────────────────────────── */
:is(.ls-hero, .ls-abschnitt, .erstgespraech, .imp-block) .btn-ghost { border-color: rgba(71, 85, 105, .42); }
/* Pfeil „nach oben“ (grund.css): Sein heller Kreis verschwände auf dem
   hellen Kasten — hier dunkler. Die Pfeilfarbe kommt weiter vom Kicker. */
:is(.ls-abschnitt, .imp-block) .zum-anfang { border-color: rgba(71, 85, 105, .45); }

/* ── 6. Kursanfrage: Felder im Kasten ──────────────────────────────────
   Nur im Kasten der Kursseite — das Kontaktfenster (Popup) bleibt dunkel.
   Die Rechenaufgabe bleibt bewusst auf dunklem Grund: Ihre Zeichnung
   (kursanfrage.js) ist hell auf dunkel angelegt. */
.imp-block .kf-form input, .imp-block .kf-form textarea {
  background: #ffffff; border: 1px solid rgba(71, 85, 105, .35); color: #0f172a;
}
.imp-block .kf-form input:focus, .imp-block .kf-form textarea:focus { background: #ffffff; }
.imp-block .kf-meldung--fehler { color: #b91c1c; }