/* BBI-Design fuer die Einwilligungs-Verwaltung
 *
 * Grundlage: marke/ci/bbi/00-BBI-CI-REFERENZ.md und plan/DESIGN-STANDARD.md.
 * Hauptfarbe #113250, Schrift Source Sans Pro mit den Systemschriften als Rueckfall.
 * Keine Farbverlaeufe, keine Emojis, keine Schatten-Spielereien.
 *
 * RECHTLICHER GESTALTUNGSGRUNDSATZ, der hier in CSS gegossen ist:
 * "Alle ablehnen" und "Alle akzeptieren" sind GLEICHWERTIG gestaltet. Gleiche
 * Groesse, gleiche Schriftstaerke, gleiche Flaeche, nebeneinander. Der einzige
 * Unterschied ist die Farbe, und auch die ist nicht als Lenkung gemeint: Ablehnen
 * traegt einen sichtbaren Rahmen statt einer Flaeche, wie es fuer sekundaere
 * Bedienelemente im BBI-Design ueblich ist. Wer hier nachtraeglich das Ablehnen
 * kleiner, blasser oder tiefer verschachtelt, macht die Einwilligung angreifbar
 * (Art. 7 Abs. 3 S. 4 DSGVO, Freiwilligkeit nach Abs. 4).
 */

.klaro .cookie-notice,
.klaro .cookie-modal {
  --bbi-blau: #113250;
  --bbi-blau-hell: #1d4a72;
  --bbi-rahmen: #cfd8e0;
  font-family: "Source Sans Pro", "Segoe UI", "Liberation Sans", Arial, sans-serif;
}

/* --- Die Farbvariablen der Bibliothek auf BBI umlegen ----------------------
 * BEFUND 21.08.2026, gemessen im Browser bei 1280 px: Die Datei klaro-0.7.22.js
 * spritzt zur Laufzeit ein eigenes Stylesheet in den Kopf. Es steht damit HINTER
 * dieser Datei und seine Knopfregeln tragen eine Klasse mehr
 * (".klaro .cookie-notice .cm-btn.cm-btn-success", also 0-4-0 gegen unsere
 * 0-3-0). Ergebnis vor dem Fix: "Alle akzeptieren" erschien in Klaro-Gruen
 * #1a936f, "Alle ablehnen" in Grau #5c5c5c. Beides sind Fremdfarben, und die
 * Kombination gruen/grau ist genau die Lenkung, die der Gestaltungsgrundsatz
 * oben ausschliesst.
 *
 * Zwei Schichten, damit es haelt:
 *   (a) die Variablen, aus denen die Bibliothek ihre Farben zieht (sauber und
 *       update-fest, weil kein Selektorkampf),
 *   (b) darunter Regeln mit einer Klasse mehr als die Bibliothek (Sicherheitsnetz,
 *       falls eine kuenftige Fassung die Variablen umbenennt).
 * Wer die Bibliothek austauscht, prueft beides erneut am gerenderten Banner.
 */
.klaro .cookie-notice,
.klaro .cookie-modal,
.klaro .context-notice {
  --green1: #113250;          /* "Alle akzeptieren" + Schalter "an" im Dialog */
  --green2: #1d4a72;
  --dark2: #113250;           /* Grundfarbe aller Knoepfe */
  --dark3: #1d4a72;
  --blue1: #113250;
  --blue2: #1d4a72;
  --button-text-color: #ffffff;
  --border-radius: 0;         /* nur die Leiste; die Knoepfe holen ihre 3px unten */

  /* Lage und Grundfarbe der Hinweisleiste.
   * BEFUND 21.08.2026 (erster Blick auf das gerenderte Banner): Ab 1024 px Breite
   * legt die Bibliothek die Leiste als 400 px schmale Box mit abgerundeten Ecken
   * und hartem Schlagschatten UNTEN RECHTS ab. Sie verdeckte dort das
   * Bewertungsformular der Startseite. Der Hintergrund kam aus --dark1 (#333).
   * Die Bibliothek zieht Lage und Farbe aus diesen Variablen, deshalb genuegt es,
   * sie hier zu setzen; ein Selektorkampf ist nicht noetig. Gewollt ist eine
   * Leiste ueber die volle Breite am unteren Rand, weisser Grund, dunkler Text. */
  --notice-position: fixed;
  --notice-left: 0;
  --notice-right: 0;
  --notice-bottom: 0;
  --notice-top: auto;
  --notice-max-width: none;
  --dark1: #ffffff;
}

/* Sicherheitsnetz mit einer Klasse mehr als die Bibliothek (0-4-0 gegen 0-3-0),
   damit Lage, Grund und Schatten auch dann stimmen, wenn eine kuenftige Fassung
   die Variablen umbenennt. Gilt in jeder Bildschirmbreite. */
.klaro .cookie-notice.cookie-notice:not(.cookie-modal-notice) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: none;
  border-radius: 0;
  background-color: #ffffff;
  color: #1a1a1a;
  border-top: 3px solid var(--bbi-blau);
  box-shadow: 0 -2px 12px rgba(17, 50, 80, 0.12);
}

/* --- Hinweisleiste am unteren Rand ---------------------------------------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #ffffff;
  color: #1a1a1a;
  border-top: 3px solid var(--bbi-blau);
  box-shadow: 0 -2px 12px rgba(17, 50, 80, 0.12);
  padding: 20px 24px;
}

.klaro .cookie-notice .cn-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

.klaro .cookie-notice .cn-body p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 14px 0;
  color: #1a1a1a;
}

.klaro .cookie-notice .cn-body p.cn-changes {
  font-weight: 600;
}

/* --- Der Banner darf nichts dauerhaft verdecken --------------------------- *
 * BEFUND 21.08.2026, gemessen auf der Preis-Strategie-Seite bei 1280 px: Die Leiste
 * liegt "position: fixed" ueber dem Seitenende. Auf kurzen Seiten verdeckte sie
 * dauerhaft Inhalt -- gemessen waren das die Ueberschrift "Ihre Situation", das
 * Telefon-Hinweisfeld und Teile des Pflichtangaben-Fusses. Wer nicht zustimmt und
 * nicht ablehnt, sieht diesen Bereich nie. Bei den Pflichtangaben nach Paragraph 5
 * DDG ist das keine Kleinigkeit: Sie muessen leicht erkennbar und unmittelbar
 * erreichbar sein.
 *
 * Loesung: Solange die Leiste im Dokument steht, bekommt der Seitenkoerper unten
 * Platz in ihrer Groessenordnung. Sobald der Besucher entschieden hat, entfernt
 * Klaro die Leiste, der Selektor greift nicht mehr und der Platz verschwindet.
 * ":has()" beherrschen alle aktuellen Browser; wo nicht, bleibt es beim alten
 * Verhalten, also kein Rueckschritt. Die Werte sind grosszuegig gewaehlt: gemessen
 * sind 163 px bei 1280 und 305 px bei 390 Pixeln Breite. */
body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) {
  padding-bottom: 200px;
}
@media (max-width: 620px) {
  /* Welle 4, 15.09.2026: Seit dem kompakten Hinweis (bbi-site.css) ist die Leiste bei
     320 bis 400 px nur noch 199 bis 217 px hoch; 340 px liessen einen leeren Streifen. */
  body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) {
    padding-bottom: 240px;
  }
}

/* Das Telefon-Hinweisfeld liegt ebenfalls fest am unteren Rand (bottom: 18px,
 * z-index 60) und damit unter der Einwilligungsleiste (z-index 1000). Gemessen am
 * 21.08.2026: Beide ueberlappen sich, das Hinweisfeld verschwindet visuell, bleibt
 * aber im Dokument und wird von Screenreadern weiter vorgelesen. Solange die
 * Einwilligung offen ist, wird es deshalb ganz ausgeblendet. Nach der Entscheidung
 * entfernt Klaro die Leiste, der Selektor greift nicht mehr, und das Hinweisfeld
 * erscheint wie gewohnt. Betrifft 64 der 75 Seiten. */
body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) .tel-banner {
  display: none;
}

/* --- Die Knopfreihe: Gleichwertigkeit ist hier entscheidend ---------------- */
.klaro .cookie-notice .cn-buttons,
.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-modal .cm-footer-buttons button {
  /* Identische Grundmasse fuer ALLE Knoepfe. Nicht aendern, ohne die
     Gleichwertigkeit zu pruefen. */
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 20px;
  min-width: 168px;
  border-radius: 3px;
  border: 2px solid var(--bbi-blau);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Zustimmen: gefuellte Flaeche.
   Selektor traegt bewusst ".cm-btn.cm-btn-success" (0-4-0) und zusaetzlich die
   Knopfreihe (0-5-0), damit er die Bibliotheksregel schlaegt. */
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success {
  background-color: var(--bbi-blau);
  color: #ffffff;
  border-color: var(--bbi-blau);
}
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover {
  background-color: var(--bbi-blau-hell);
}

/* Ablehnen: gleiche Groesse, gleiche Schriftstaerke, Rahmen statt Flaeche.
   KEINE Verkleinerung, KEIN Graustich, KEIN Textlink.
   Klaro vergibt fuer diesen Knopf die Klasse "cm-btn-danger cn-decline". */
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cn-buttons .cm-btn.cn-decline,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background-color: #ffffff;
  color: var(--bbi-blau);
  border-color: var(--bbi-blau);
}
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cn-buttons .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
  background-color: #f2f5f8;
}

/* "Einzeln auswaehlen": ebenfalls sichtbar, nicht versteckt */
.klaro .cookie-notice .cn-learn-more {
  background: transparent;
  color: var(--bbi-blau);
  border-color: transparent;
  text-decoration: underline;
  min-width: auto;
  padding: 11px 8px;
}

/* --- Der Auswahldialog ---------------------------------------------------- */
.klaro .cookie-modal .cm-bg {
  background: rgba(17, 50, 80, 0.55);
}

.klaro .cookie-modal .cm-modal {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 4px;
  max-width: 680px;
}

.klaro .cookie-modal .cm-header {
  border-bottom: 1px solid var(--bbi-rahmen);
  padding: 22px 24px 16px;
}

.klaro .cookie-modal .cm-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--bbi-blau);
  margin: 0 0 10px 0;
}

.klaro .cookie-modal .cm-body {
  padding: 18px 24px;
}

.klaro .cookie-modal .cm-footer {
  border-top: 1px solid var(--bbi-rahmen);
  padding: 16px 24px 20px;
}

.klaro .cookie-modal li.cm-purpose {
  border-bottom: 1px solid var(--bbi-rahmen);
  padding: 14px 0;
}
.klaro .cookie-modal li.cm-purpose:last-child {
  border-bottom: none;
}

.klaro .cookie-modal .cm-purpose .cm-list-title {
  font-weight: 700;
  color: var(--bbi-blau);
  font-size: 16px;
}

.klaro .cookie-modal .cm-purpose .cm-list-description {
  font-size: 14px;
  line-height: 1.5;
  color: #3a3a3a;
}

/* Schalter in der Markenfarbe */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--bbi-blau);
}

/* Pflicht-Eintraege erkennbar, aber nicht ausgegraut versteckt */
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider {
  background-color: #7a8a99;
  cursor: not-allowed;
}

/* Klaro-Eigenwerbung aus: sie gehoert nicht in einen Kundentext */
.klaro .cookie-notice .cn-ok a.cm-powered-by,
.klaro .cookie-modal .cm-powered-by {
  display: none;
}

/* --- Kleine Bildschirme --------------------------------------------------- */
@media (max-width: 620px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    padding: 16px;
  }
  .klaro .cookie-notice .cn-buttons,
  .klaro .cookie-modal .cm-footer-buttons {
    flex-direction: column;
  }
  /* Auch hier: gleiche Breite fuer beide Knoepfe. Auf schmalen Geraeten ist die
     Versuchung gross, Ablehnen nach unten zu schieben. Die Reihenfolge bleibt
     wie im Markup, und beide fuellen die volle Breite. */
  .klaro .cookie-notice .cn-buttons button,
  .klaro .cookie-modal .cm-footer-buttons button {
    width: 100%;
    min-width: 0;
  }
}

/* --- Widerrufs-Link im Fussbereich ---------------------------------------- */
.bbi-consent-widerruf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}