/* =========================================================================
   Hellmodus: dieselbe Richtung, weißer statt schwarzer Grund.
   Wird ZUSÄTZLICH zu base.css + richtung-*.css geladen.
   Zweck: den Modus isoliert vergleichbar machen. Layout, Typografie und
   Inhalt bleiben identisch, nur der Grund kippt.

   Grundregel (aus base.css): Gelb ist hier FLÄCHE, nie Schriftfarbe.
   ========================================================================= */

body.modus-hell { background: var(--hell-grund); color: var(--hell-text); }

/* Sektionen: das Wechselspiel dunkel/hell dreht sich um */
.modus-hell .section--alt { background: var(--hell-karte); }
/* Eine bewusst dunkle Sektion bleibt als "Bühne" erhalten (§7) */
.modus-hell .section--buehne {
  --grund: var(--schwarz);
  --karte: var(--dunkelgrau);
  --rahmen: var(--mittelgrau);
  --linie: var(--hellgrau);
  --text: var(--weiss);
  --text-sek: var(--textgrau-hell);
  --text-leise: var(--textgrau);
  --akzent-text: var(--gelb);
  --akzent-klein: var(--gelb);
  background: var(--schwarz);
  color: var(--weiss);
}
.modus-hell .section--buehne .akzent { background: none; padding-inline: 0; color: var(--gelb); }
.modus-hell .section--buehne .sektionslabel { color: var(--gelb); }
.modus-hell .section--buehne .sektionslabel::before { display: none; }
.modus-hell .section--buehne .karte__kicker {
  background: none; color: var(--gelb); padding: 0;
}
.modus-hell .section--buehne .kennzahl__wert { color: var(--gelb); }

/* Header: heller Grund, dunkle Schrift */
.modus-hell .site-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--hell-rahmen);
}
.modus-hell .wortmarke { color: var(--hell-text); }
/* Gelb auf Weiss ist keine Schriftfarbe: die Zusatzzeile wird dunkel */
.modus-hell .marke__zeile { color: #5a5a5a; }
.modus-hell .wortmarke__punkt {
  color: #000; background: var(--gelb);
  padding-inline: 3px; border-radius: 3px; margin-left: 2px;
}
.modus-hell .hauptnav > a,
.modus-hell .leistungen-nav__link,
.modus-hell .leistungen-nav__knopf { color: #4a4a4a; }
.modus-hell .hauptnav > a:hover,
.modus-hell .leistungen-nav__link:hover,
.modus-hell .leistungen-nav:hover .leistungen-nav__link,
.modus-hell .leistungen-nav__knopf:hover,
.modus-hell .leistungen-nav__link[aria-current='page'] { color: #000; }
.modus-hell .nav-toggle { color: var(--hell-text); }

/* Sprachwahl im Hell-Modus. Fehlte bis zum 24.09.2026 ganz: der Umschalter
   behielt seine Dunkel-Farben auf weissem Grund, #bbbbbb auf #ffffff sind
   1,92:1 und damit weit unter den geforderten 4,5:1. Gefunden von Dennis. */
.modus-hell .sprachwahl > * + * { border-left-color: var(--hell-rahmen); }
.modus-hell .sprachwahl__aktiv { color: var(--hell-text); }
.modus-hell .sprachwahl__link { color: #6a6a6a; }
.modus-hell .sprachwahl__link:hover,
.modus-hell .sprachwahl__link:focus-visible { color: #000; }
@media (max-width: 1060px) {
  .modus-hell .site-header--offen .hauptnav {
    background: var(--hell-karte);
    border-bottom-color: var(--hell-rahmen);
  }
}
.modus-hell .leistungen-nav__liste {
  background: #fff;
  border-color: var(--hell-rahmen);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
.modus-hell .leistungen-nav__liste a { color: #333; }
.modus-hell .leistungen-nav__liste a:hover { background: var(--hell-karte); color: #000; }
.modus-hell .leistungen-nav__liste strong { color: var(--hell-text); }
.modus-hell .leistungen-nav__liste span { color: #5a5a5a; }
@media (max-width: 1060px) {
  /* Audit 08.10.2026 (B3): mobil keine weiße Schwebekarte, Liste liegt im Menü. */
  .modus-hell .leistungen-nav__liste { background: transparent; box-shadow: none; }
}

/* Footer: heller Grund */
.modus-hell .site-footer {
  background: var(--hell-karte);
  border-top-color: var(--hell-rahmen);
  color: var(--hell-text);
}
.modus-hell .site-footer h3 { color: var(--hell-text); }
.modus-hell .site-footer h3::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; margin-right: 8px;
  background: var(--gelb); border-radius: 2px;
}
.modus-hell .site-footer a { color: #4a4a4a; }
.modus-hell .site-footer a:hover { color: #000; }
.modus-hell .site-footer__unten {
  border-top-color: var(--hell-rahmen);
  color: #5a5a5a;
}

/* Karten und Trennlinien */
.modus-hell .karte { background: var(--hell-karte); border-color: var(--hell-rahmen); }
.modus-hell .karte--link:hover {
  border-color: var(--gelb);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}
.modus-hell .leistung { border-color: var(--hell-rahmen); }
.modus-hell .faq, .modus-hell .faq__item { border-color: var(--hell-rahmen); }

/* Hero Richtung A im Hellmodus */
.modus-hell .hero-beweis::before {
  background: radial-gradient(circle, rgba(254, 213, 38, 0.22) 0%, transparent 62%);
}
.modus-hell .hero-beweis__fussnote { color: #5a5a5a; }
/* Das Beweispanel bleibt bewusst DUNKEL: es ist die Bühne im Dokument
   und trägt die Marke durch die helle Seite (§7 "Gelb als Brücke"). */
.modus-hell .beweispanel {
  background: var(--schwarz);
  border-color: var(--schwarz);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}
.modus-hell .beweispanel__kopf { color: var(--textgrau); border-bottom-color: var(--mittelgrau); }
.modus-hell .beweispanel__frage { color: var(--textgrau-hell); }
.modus-hell .beweispanel__frage strong { color: #fff; }
.modus-hell .beweispanel__box { background: var(--dunkelgrau); border-color: var(--mittelgrau); }
.modus-hell .beweispanel__box p { color: var(--textgrau-hell); }
.modus-hell .beweispanel__box strong { color: #fff; }
.modus-hell .verlauf__titel { color: var(--textgrau); }

/* Kennzahlband: gelber Balken links bleibt, Ziffern werden schwarz */
.modus-hell .kennzahlband li { border-left-color: var(--gelb); }
.modus-hell .fallkarte__wert { color: var(--hell-text); }
/* Damit die Zahl trotzdem sticht: gelber Balken darunter */
.modus-hell .fallkarte__wert::after {
  content: ''; display: block;
  width: 46px; height: 5px; margin-top: 10px;
  background: var(--gelb); border-radius: 2px;
}

/* Logowand */
.modus-hell .logowand__item { color: #6a6a6a; }
.modus-hell .logowand__item:hover { color: #000; }
.modus-hell .logosektion__titel,
.modus-hell .logosektion__hinweis { color: #5a5a5a; }

/* Preisbox bleibt dunkel: der harte Kontrast ist hier gewollt */
.modus-hell .preisbox { background: var(--schwarz); color: #fff; }
.modus-hell .preisbox__label { color: var(--gelb); }
.modus-hell .preisbox__wert { color: #fff; }
.modus-hell .preisbox__wert strong { color: var(--gelb); }
.modus-hell .preisbox__text { color: var(--textgrau-hell); }
.modus-hell .preisbox__hinweis { color: var(--textgrau); }

/* Buttons */
.modus-hell .btn--sekundaer { color: var(--hell-text); border-color: var(--rahmen-ui); }
.modus-hell .btn--sekundaer:hover { border-color: #000; }

/* Platzhalterflächen hell */
.modus-hell .platzhalter {
  background: repeating-linear-gradient(45deg, #eceae4 0 12px, #f5f3ee 12px 24px);
  border-color: var(--hell-rahmen);
  color: #6d6a60;
}

/* CTA-Band */
.modus-hell .cta-band:not(.section--buehne) {
  background: var(--hell-karte); border-top-color: var(--hell-rahmen);
}
.modus-hell .section--buehne.cta-band { border-top-color: var(--schwarz); }
.modus-hell .cta-band:not(.section--buehne) .cta-band__zweitpfad { color: #5a5a5a; }
.modus-hell .cta-band:not(.section--buehne) .cta-band__zweitpfad a { color: #000; }
.modus-hell .section--buehne .cta-band__zweitpfad { color: var(--textgrau); }
.modus-hell .section--buehne .cta-band__zweitpfad a { color: var(--gelb); }
.modus-hell .section--buehne .prosa { color: var(--textgrau-hell); }
.modus-hell .section--buehne .lead { color: var(--textgrau-hell); }


/* =========================================================================
   Feinschliff aus design/css/arbeitsvariante.css (Zeilen 108-144).
   Querschnittsregeln, keine Blocksache.
   ========================================================================= */

/* ---------- Logowand an neuer Stelle ------------------------------------ */
.logosektion { padding-block: clamp(40px, 5vw, 68px); }
.logosektion__titel { color: #5a5a5a; }

/* ---------- Erhebung staffeln statt überall gleich ----------------------
   Gegen den Vorwurf "überall derselbe Radius und derselbe Schatten":
   flache Elemente bleiben flach, nur echte Bühnen bekommen Tiefe. --------- */
.modus-hell .karte { box-shadow: none; border-radius: 10px; }
.modus-hell .karte--link:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.09); }
.modus-hell .preisbox { border-radius: 16px; box-shadow: 0 24px 56px rgba(0,0,0,0.20); }
.hero-split .beweispanel { border-radius: 16px; }
.trust-item__icon { border-radius: 50%; }

/* ---------- Marker sparsam einsetzen -------------------------------------
   Der gelbe Marker ist ein Stilmittel, kein Layoutraster. Einmal wirkt er,
   siebenmal wirkt er wie ein Tic (und wie eine generierte Seite).
   Deshalb: nur im Hero. In Sektionsköpfen trägt die Fettung allein. -------- */
.modus-hell .section .akzent,
.modus-hell .cta-band .akzent {
  background: none;
  padding-inline: 0;
}
/* Stattdessen bekommt der Sektionskopf einen ruhigen gelben Strich darunter */
.modus-hell .sektionskopf .h-sektion::after {
  content: '';
  display: block;
  width: 54px; height: 4px;
  margin-top: 20px;
  background: var(--gelb);
  border-radius: 2px;
}
.modus-hell .section--buehne .sektionskopf .h-sektion::after { background: var(--gelb); }

/* =========================================================================
   Hero-Varianten 2 und 3
   ========================================================================= */