/* ═══════════════════════════════════════════════════════════════════════════
   DER HELLE MODUS AUSSERHALB DES PARTNERPORTALS            04.09.2026

   Ivos Frage: "wenn ich einmal auf hellen modus umschalte und dann zum
   beispiel in den shop gehe kommt immer wieder dunkel - kann man das so
   einstellen dass es bleibt?"

   Gemerkt hat sich das System die Wahl schon immer (localStorage pp_light,
   gilt fuer alle Seiten derselben Adresse). Es fehlte daran, dass NUR das
   Partnerportal ueberhaupt einen hellen Modus hatte. Diese Datei ruestet ihn
   fuer die uebrigen Seiten nach.

   Entwurf: "Marine auf Sand" - Ivos Wahl aus drei Vorschlaegen. Das
   Spiegelbild des dunklen Modus: dort Kupfer auf Marine, hier Marine auf
   Sand. 🔴 KUPFER BLEIBT DEM GEFUELLTEN KNOPF VORBEHALTEN und wirkt genau
   dadurch als Akzent - deshalb wird --verlauf und --goldgrad hier NICHT
   ueberschrieben.

   ⚠️ Die Startseite bekommt bewusst keinen hellen Modus: sie hat keine
   einzige Farbvariable (133 fest eingetippte Werte) und ist das verpackte
   Dokument. Ivos Entscheidung vom 04.09.2026.

   🔴 DIE WERTE STEHEN AN ZWEI STELLEN: hier und im body.lightmode-Block von
   partner/index.html. Sie muessen gleich bleiben.
   test/pp-hell.test.js vergleicht sie und schlaegt Alarm, wenn sie
   auseinanderlaufen. Wer hier etwas aendert, aendert es dort mit.

   Gegenstueck: assets/pp-hell.js (merkt und schaltet).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die Toene. Ein Name je Seite kann anders heissen, der Wert ist derselbe. ── */
body.lightmode{
  /* Portal, Shop, Unternehmensbereich, Webinar */
  --bg:#f2eee5; --panel:#fbf9f5; --panel2:#f5f1e9;
  --border:rgba(18,48,71,.55);
  --line:rgba(18,48,71,.16);          /* Webinar nennt den Rand so */
  --gold:#1c4258; --gold2:#123047; --gold-tief:#123047;
  --text:#1b2229; --text2:#5c6874;
  --muted:#5c6874;                    /* Webinar und Rechner nennen text2 so */
  /* Rot und Gruen tragen eine Bedeutung, deshalb behalten sie ihren Farbton -
     aber die dunklen Toene (#e0857a / #4ade80) kaemen auf Sand nur auf
     2,3 bzw. 1,5:1. Hier die abgedunkelten Fassungen: 5,3 und 5,5:1. */
  --red:#a83f31; --green:#2c6b3a;
  /* Beide Rechner benutzen eigene Namen */
  --card:#fbf9f5; --brand:#1c4258; --accent:#1c4258; --accent-dark:#123047;
  background:#f2eee5 !important;
  /* Ein Schnitt mehr als im dunklen Modus: dunkle Schrift auf hellem Grund
     wirkt duenner als helle auf dunklem. Gilt unabhaengig von der Farbe. */
  font-weight:500;
}

/* Das Hintergrundbild muss weg - sonst stuende das abgedunkelte Foto in
   jedem Zwischenraum zwischen den hellen Feldern. */
body.lightmode #grund{ display:none !important; }

/* ── Schriftstaerke: ueberall ein Schnitt mehr ───────────────────────────── */
body.lightmode th, body.lightmode label, body.lightmode .lbl,
body.lightmode .kpi-label, body.lightmode .chip, body.lightmode .pill,
body.lightmode .navr a, body.lightmode .langbar button,
body.lightmode .btn.ghost{ font-weight:600 !important; }
body.lightmode .btn, body.lightmode .chip.on, body.lightmode .back,
body.lightmode .cartbtn{ font-weight:700 !important; }
body.lightmode p, body.lightmode td, body.lightmode li,
body.lightmode input, body.lightmode select, body.lightmode textarea{ font-weight:500; }

/* ── Flaechen, Raender, Eingabefelder (ueber alle Seiten) ────────────────── */
body.lightmode input, body.lightmode select, body.lightmode textarea{
  background:#ffffff !important; color:#1b2229 !important; }
body.lightmode table td, body.lightmode table tr, body.lightmode table th{
  border-color:rgba(18,48,71,.16) !important; }
body.lightmode .goldtext, body.lightmode .wm{
  -webkit-text-fill-color:#123047; color:#123047 !important; background:none !important; }

/* ═══ SHOP ═══════════════════════════════════════════════════════════════ */
body.lightmode header{ background:rgba(251,249,245,.92) !important;
  border-bottom-color:rgba(18,48,71,.20) !important; }
body.lightmode .vip{ background:linear-gradient(135deg,#fbf9f5,#f2eee5) !important; }
body.lightmode .card .ph{ background:#eee9df !important; color:#c3bcae !important; }
body.lightmode .toast{ background:#ffffff !important; color:#1b2229 !important; }
body.lightmode .thanks{ background:#eef4ee !important; color:#1b2229 !important; }
body.lightmode footer{ border-top-color:rgba(18,48,71,.20) !important; }

/* ═══ WEBINAR ════════════════════════════════════════════════════════════ */
body.lightmode .card{ background:#fbf9f5 !important; }
body.lightmode .ok{ background:rgba(60,130,70,.10) !important;
  border-color:rgba(60,130,70,.45) !important; color:#2c5a34 !important; }
body.lightmode .err{ background:rgba(170,60,60,.10) !important;
  border-color:rgba(170,60,60,.45) !important; color:#8a2f2f !important; }

/* ═══ BEIDE RECHNER ══════════════════════════════════════════════════════ */
/* Sie tragen ihre eigenen Namen (--card, --accent, --brand) und dazu eine
   Reihe fest eingetippter Werte - die brauchen einzelne Regeln. */
body.lightmode header{ background:#fbf9f5 !important; color:#1b2229 !important;
  box-shadow:0 4px 20px rgba(18,48,71,.10) !important; }
body.lightmode header::after{
  background:linear-gradient(90deg, transparent, rgba(18,48,71,.35), transparent) !important; }
body.lightmode header h1, body.lightmode .card-title, body.lightmode .kpi-value,
body.lightmode .amort-display .big, body.lightmode .slider-labels{
  background:none !important; -webkit-text-fill-color:#123047; color:#123047 !important; }
body.lightmode header p, body.lightmode .amort-display p{ color:#5c6874 !important; }
body.lightmode .pp-wordmark, body.lightmode label,
body.lightmode .kpi-label, body.lightmode .profit-bar-labels{ color:#1c4258 !important; }
body.lightmode .card{ background:linear-gradient(160deg,#ffffff 0%,#fbf9f5 60%,#f7f4ec 100%) !important;
  border-color:rgba(18,48,71,.20) !important; }
body.lightmode .card::before{
  background:linear-gradient(90deg, transparent, rgba(18,48,71,.30), transparent) !important; }
body.lightmode input[type="number"]{ background:#ffffff !important; }
body.lightmode input[type="number"]:focus{ background:#ffffff !important;
  border-color:#1c4258 !important; }
body.lightmode input[type="range"]::-webkit-slider-thumb{ border-color:#ffffff !important; }
body.lightmode input[type="range"]::-moz-range-thumb{ border-color:#ffffff !important; }
body.lightmode .kpi, body.lightmode .profit-bar-track{ background:#f2eee5 !important; }
body.lightmode .kpi.full, body.lightmode .slider-value,
body.lightmode .amort-display{ background:#ffffff !important;
  border-color:rgba(18,48,71,.30) !important; color:#1b2229 !important;
  box-shadow:0 4px 16px rgba(18,48,71,.10) !important; }

/* ═══ RECHTSSEITEN (Impressum, AGB, Datenschutz, Widerruf) ═══════════════ */
/* Alle vier teilen dieselben Klassen, deshalb genuegt ein Block. */
body.lightmode a{ color:#1c4258 !important; }
body.lightmode h1, body.lightmode h2, body.lightmode h3{ color:#123047 !important; }
body.lightmode h2{ border-top-color:rgba(18,48,71,.20) !important; }
body.lightmode .addr{ color:#1b2229 !important; }
body.lightmode .langbar button{ border-color:rgba(18,48,71,.35) !important;
  color:#1b2229 !important; }
body.lightmode .langbar button.active{ border-color:#1c4258 !important;
  background:rgba(18,48,71,.10) !important; }
body.lightmode .note{ background:#ffffff !important;
  border-color:rgba(18,48,71,.30) !important; color:#5c6874 !important; }
/* Der Zurueck-Knopf bleibt KUPFER - er ist hier der gefuellte Knopf. */