/* ASB-Branding fuer das Klaro-Consent-Banner (AP-KLARO-3, Bauanleitung Abschnitt 12 + 13).
   Runde 3: Klaro ist ueber EIGENE CSS-Variablen dunkel gestaltet. Statt Flaechen
   elementweise auf Weiss zu ziehen (liess Luecken: schwarzer Streifen mobil,
   unlesbares Modal), werden hier Klaros Variablen umgesetzt. Die elementweisen
   Regeln darunter bleiben als Netz erhalten.
   Regel: NIE eine Schriftfarbe ohne den Hintergrund am selben Element setzen. */

/* ---- Klaro-Variablen umsetzen (Werte aus Abschnitt 13) ---- */
.klaro {
  --dark1: #ffffff;   /* Hauptflaeche (war #333) -> weiss */
  --dark2: #ededed;
  --dark3: #4a4a5e;
  --light1: #2d2d46;  /* Hauptschrift (war #fafafa) -> ASB-Dunkelblau */
  --light2: #ededed;
  --light3: #4a4a5e;
  --white2: #ffffff;
  --white3: #f8f9fa;
  --green1: #d40612;
  --green2: #d40612;
  --green3: #b30510;
  --blue1: #d40612;
  --blue2: #d40612;
  --button-text-color: #ffffff;
  --font-family: Arial, Helvetica, sans-serif;
  --title-font-family: Arial, Helvetica, sans-serif;
  --border-radius: 6px;
  --box-shadow-color: transparent;
}

/* ---- Netz: Restunschaerfe --dark2 (Rahmen UND 2x color). Textstellen lesbar halten. ---- */
.klaro .cookie-notice,
.klaro .cookie-notice .cn-body,
.klaro .cookie-notice .cn-body *,
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-body * { color: #2d2d46 !important; }
.klaro .cookie-notice a,
.klaro .cookie-modal a { color: #d40612 !important; }

/* Banner + Modal ueber der Navigation (Theme nutzt bis 999) */
.klaro .cookie-notice,
.klaro .cookie-modal { z-index: 1100 !important; }

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #ffffff !important;
  border-top: 3px solid #d40612 !important;
  box-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.klaro .cookie-modal .cm-modal { background: #ffffff !important; box-shadow: none !important; }
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer { background: #ffffff !important; border-color: #ededed !important; }
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-body h2,
.klaro .cookie-modal .cm-body .cm-list-title { color: #2d2d46 !important; }
.klaro .cookie-modal .cm-body .cm-list-description,
.klaro .cookie-notice .cn-ok .cn-always { color: #4a4a5e !important; }

/* --- Buttons: gemeinsame Basis, gleiche Masse fuer akzeptieren + ablehnen --- */
.klaro .cm-btn,
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-modal .cm-footer-buttons button {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 12px 20px !important;
  min-width: 160px !important;
  border-radius: 6px !important;
  border: 2px solid #d40612 !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: none !important;
  cursor: pointer !important;
}
/* Akzeptieren – rote Flaeche, weisse Schrift */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept {
  background: #d40612 !important;
  color: #ffffff !important;
}
/* Ablehnen – weisse Flaeche, roter Umriss + Schrift, IDENTISCHE Masse */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-danger {
  background: #ffffff !important;
  color: #d40612 !important;
}
.klaro .cm-btn:hover { opacity: .92 !important; }

/* „Einstellungen“ / Mehr erfahren – tertiaerer Textlink, kein Button */
.klaro .cookie-notice .cn-learn-more,
.klaro .cm-btn.cm-btn-info {
  background: transparent !important;
  border: 0 !important;
  color: #2d2d46 !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
  min-width: 0 !important;
  padding: 8px 4px !important;
}

/* Schalter (Toggles) im Modal in ASB-Rot */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required + .cm-list-label .slider { background-color: #d40612 !important; }
.klaro .cm-list-label .slider { background-color: #ededed !important; }
.klaro .cm-list-label .slider::before { box-shadow: none !important; }

/* Trennlinien */
.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal li.cm-purpose,
.klaro .cookie-modal .cm-services { border-color: #ededed !important; }

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung nicht entfernen */
.klaro .cm-btn:focus-visible,
.klaro .cookie-notice a:focus-visible,
.klaro .cookie-modal a:focus-visible { outline: 3px solid #2d2d46 !important; outline-offset: 2px !important; }

/* --- Mobil: volle Breite, Buttons gestapelt, gleich gross, min. 44px --- */
@media (max-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    max-width: 100% !important; border-radius: 0 !important;
  }
  .klaro .cookie-notice .cn-buttons {
    display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important;
  }
  .klaro .cm-btn { width: 100% !important; min-height: 44px !important; }
}