/* Korrekturen fuer den Hellmodus - BAFA-Seite, 07.09.2026
 *
 * Warum diese Datei noetig ist:
 * 1. Die Ueberschriften tragen Tailwinds important-Variante "!text-white".
 *    Die im Export mitgelieferten Hellmodus-Regeln zielen auf ".text-white"
 *    ohne Ausrufezeichen und greifen deshalb nie -> weisse Schrift auf weiss.
 * 2. Tailwind legt seine Regeln in @layer utilities. Bei !important schlagen
 *    Regeln INNERHALB eines Layers jede ungeschichtete Regel - eine Korrektur
 *    ausserhalb des Layers bleibt wirkungslos. Die Textregeln unten stehen
 *    deshalb ebenfalls in @layer utilities.
 * 3. Die Kartenfarbe --brand-slate-900 war im Hellmodus exakt die
 *    Hintergrundfarbe (#f4f7f6), die Karten hatten also keine Kante.
 */

/* --- Flaechen. Normale Deklarationen, hier gewinnt ungeschichtet. --- */
html.light{
  --background:#e9efee;
  --brand-slate-900:#ffffff;
  --brand-slate-800:#dde6e4;
  --brand-cyan-500:#04726d;
  --brand-cyan-400:#05837d;
  --glass-bg:rgba(255,255,255,.94);
  --glass-border:rgba(4,104,100,.26);
}

/* --- Schriftfarben. Muessen in den Layer, siehe Punkt 2. --- */
@layer utilities{
  html.light .\!text-white,
  html.light .\!text-slate-200{color:#0b1519!important}
  html.light .\!text-slate-300{color:#33433f!important}

  /* Der Hero liegt auf dem Bild, dort bleibt die Schrift weiss. */
  html.light h1.\!text-white{color:#ffffff!important}
  html.light .\!text-slate-100{color:#eaf2f3!important}
}

/* --- Hero ---
 * Das Bild wurde zum Rand hin ausgeblendet und lief im Hellmodus ins Weisse,
 * die weisse Schrift verschwand darin. Statt der Maske liegt jetzt ein
 * Verlauf ueber dem Bild, der ins Graue statt ins Weisse laeuft.
 */
html.light div[style*="im_spotlight"]{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  width:100%!important;
  background-image:
    linear-gradient(to bottom, rgba(26,33,33,0) 0%, rgba(26,33,33,.10) 45%,
                    rgba(58,70,69,.88) 82%, rgba(74,86,84,.97) 100%),
    url('/images/im_spotlight.jpg')!important;
  background-size:cover,cover!important;
  background-position:top center,top center!important;
}
@media (min-width:1024px){
  html.light div[style*="im_spotlight"]{
    background-image:
      linear-gradient(100deg, rgba(26,33,33,0) 0%, rgba(26,33,33,.10) 38%,
                      rgba(58,70,69,.90) 74%, rgba(74,86,84,.98) 100%),
      url('/images/im_spotlight.jpg')!important;
    background-position:left center,left center!important;
  }
}