/**
 * Gestaltung des Consent-Banners in den Marken-Werten.
 * Sitzung 18, Teil 1. Eigene Datei; die unverändert gelieferte
 * `klaro.min.css` (Klaro 0.7.21) bleibt daneben unangetastet.
 *
 * ZWEI Techniken, beide bewusst gewählt:
 *
 * 1. Farben, Schriften und Maße stehen als CSS-Variablen. Klaros CSS
 *    schreibt jede Farbe als `var(--name, Vorgabewert)`, es genügt also,
 *    dieselben Namen zu setzen. Sie stehen hier auf `#klaro` und NICHT auf
 *    `:root`, damit allgemeine Namen wie `--dark1` oder `--font-size`
 *    niemals in die übrige Website hineinwirken. Aus demselben Grund ist
 *    in `klaro-config.js` der Schlüssel `styling` nicht benutzt — Klaro
 *    schriebe diese Variablen sonst selbst an `:root`.
 *
 * 2. Alle Regeln beginnen mit `#klaro`, der ID des Behälters, den Klaro
 *    anlegt. Klaros eigene Regeln arbeiten mit bis zu sieben Klassen
 *    (`.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose
 *    span.cm-required`). Eine ID schlägt jede Zahl von Klassen, damit
 *    genügt hier je eine kurze, lesbare Zeile statt einer Nachbildung
 *    dieser Ketten. Der Name `klaro` ist Klaros Vorgabe für `elementID`
 *    und in `klaro-config.js` nicht verändert.
 *
 * Keine externe Quelle: keine Schriftdatei von fremden Rechnern, kein
 * Symbol-Paket, kein `url()` auf eine fremde Adresse. Lora und DM Sans
 * liegen bereits selbst gehostet vor und werden hier nur benannt.
 */

/* ---------- Marken-Werte auf Klaros Variablen ---------- */
#klaro {
  /* Schriften — dieselben wie auf der Website */
  --font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  --title-font-family: 'Lora', Georgia, 'Times New Roman', serif;
  --font-size: 15px;

  /* Flächen. `dark1` ist der Hintergrund von Banner und Fenster —
     „Tiefes Stahlblau", dieselbe Farbe wie der Fußbereich. */
  --dark1: #1f2a31;
  /* `dark2` zieht bei Klaro die Trennlinien im Fenster. */
  --dark2: #43535d;
  /* `dark3` ist die Farbe der Beschreibungstexte. Auf dunklem Grund muss
     das ein HELLER Ton sein, sonst steht der Text unlesbar auf der Fläche. */
  --dark3: #cfc9bd;

  /* Schrift auf dunklem Grund */
  --light1: #edeae3;
  --light2: rgba(237, 234, 227, 0.22);
  --light3: #b3bcc2;

  /* Akzent. Bei Klaro heißt der „grüne" Kanal `green1` — er färbt Links,
     eingeschaltete Schalter und die Zustimmen-Schaltfläche. Hier: Ocker. */
  --green1: #b89066;
  --green2: #8a6f4f;
  --green3: #a87f55;

  /* Nebenschaltflächen, hier auf die Sekundärfarbe der Palette gesetzt. */
  --blue1: #6b7a84;
  --red1: #6b7a84;

  /* Ausgeschalteter Schalter: Bahn und Knopf */
  --white1: #edeae3;
  --white2: #55636c;
  --white3: #edeae3;

  /* Schrift auf den Schaltflächen */
  --button-text-color: #1f2a31;

  /* Form. 2px ist der Radius, den auch der Knopf im Fußbereich trägt. */
  --border-radius: 2px;
  --border-width: 1px;
  --border-style: solid;

  /* Lage des Banners: unten rechts, klein, kein Vollbild, keine
     Verdunkelung der Seite. Gilt ab 1024px; darunter liefert Klaro den
     Banner über die volle Breite am unteren Rand aus. */
  --notice-max-width: 420px;
  --notice-position: fixed;
  --notice-right: 24px;
  --notice-left: auto;
  --notice-bottom: 24px;
  --notice-top: auto;

  /* Höhe der unten festsitzenden Leisten (`StickyCta`, `WarteBanner`),
     um die der Banner auf den Produktseiten nach oben rückt. Siehe ganz
     unten in dieser Datei. */
  --osb-leiste: 84px;
}

/* ---------- Banner ---------- */
#klaro .cookie-notice:not(.cookie-modal-notice) {
  border-top: 1px solid rgba(184, 144, 102, 0.45);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  /* Kein Einblende-Effekt, keine Bewegung — der Banner ist einfach da. */
  animation: none;
  transition: none;
}

#klaro .cookie-notice .cn-body {
  padding: 20px 22px 22px;
}

#klaro .cookie-notice .cn-body h2 {
  margin: 0;
  font-family: var(--title-font-family);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #edeae3;
}

#klaro .cookie-notice .cn-body p {
  margin: 0.7em 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(237, 234, 227, 0.86);
}

/* ---------- Links im Banner ----------
   Der Verweis auf die Datenschutzerklärung im Beschreibungstext trägt den
   projektweiten Fließtext-Link-Stil aus `global.css` (`.link-fliesstext`,
   Framer-Preset): Unterstreichung, 1px stark, 3px Abstand, dieselbe
   Übergangskurve, Unterstrich im Ocker bei 55 Prozent.

   Ein Wert weicht ab, und zwar bewusst: die Schriftfarbe. `global.css`
   setzt dafür `#966F45` und begründet die Wahl ausdrücklich mit dem
   Kontrast — auf hellem Grund erreicht dieser Ton 4,51:1 und liegt damit
   knapp über der 4,5:1-Schwelle. Der Banner steht auf dunklem Grund
   (`#1F2A31`), dort fällt derselbe Ton auf 3,0:1 und verfehlt genau die
   Schwelle, für die er ausgesucht wurde. Hier steht deshalb der Akzent
   der Palette selbst, `#B89066`: 5,03:1 auf dieser Fläche — dieselbe
   Absicht, an die dunkle Fläche gedreht. Es ist zudem exakt der Ton, aus
   dem der Unterstrich des Presets besteht.

   „Einstellungen" trägt denselben Stil, damit es im Banner genau eine
   Link-Optik gibt und nicht zwei. */
#klaro .cookie-notice .cn-body a,
#klaro .cookie-notice .cn-body .cn-ok a.cn-learn-more {
  color: #b89066;
  text-decoration-line: underline;
  text-decoration-color: rgba(184, 144, 102, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color 0.25s cubic-bezier(0.44, 0, 0.56, 1),
    text-decoration-color 0.25s cubic-bezier(0.44, 0, 0.56, 1);
}

/* Der Hover-Ton geht auf hellem Grund nach unten (`#7A5832`), auf dunklem
   Grund muss er nach oben gehen, sonst verschwindet er. */
#klaro .cookie-notice .cn-body a:hover,
#klaro .cookie-notice .cn-body .cn-ok a.cn-learn-more:hover {
  color: #d8b98f;
  text-decoration-color: #b89066;
}

/* Der Hinweis bei geänderter Dienste-Liste. Klaro unterstreicht diesen
   Absatz von Haus aus — auf einer Fläche, auf der Unterstreichung Links
   bedeutet, liest sich das falsch. Stattdessen hebt ihn ein Ocker-Strich
   an der Seite heraus. */
#klaro .cookie-notice .cn-body p.cn-changes {
  text-decoration: none;
  margin-top: 0.9em;
  padding-left: 12px;
  border-left: 2px solid #b89066;
  color: #edeae3;
}

/* ---------- Die drei Schaltflächen ----------
   Vorgabe aus dem Auftrag: Ablehnen ist gleichwertig sichtbar wie
   Zustimmen. Beide tragen dieselbe Farbe, dieselbe Schriftstärke,
   dieselbe Polsterung — und über `flex: 1 1 0` auch exakt dieselbe Breite.
   Unterschieden werden sie allein durch ihre Beschriftung.
   „Einstellungen" steht als dritte, ruhigere Stufe daneben: sie trifft
   keine Entscheidung, sie öffnet nur das Fenster. */
#klaro .cookie-notice .cn-body .cn-ok {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

#klaro .cookie-notice .cn-body .cn-buttons {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  margin: 0;
  width: auto;
}

#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn,
#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn.cm-btn-success,
#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn.cm-btn-danger {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
  background-color: #b89066;
  color: #1f2a31;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s;
}

#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn:hover {
  background-color: #a87f55;
}

#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn:focus-visible,
#klaro .cookie-notice .cn-body a:focus-visible {
  outline: 2px solid #edeae3;
  outline-offset: 2px;
}

/* Maße und Lage von „Einstellungen"; Farbe und Unterstreichung kommen
   weiter oben aus der gemeinsamen Link-Regel. */
#klaro .cookie-notice .cn-body .cn-ok a.cn-learn-more {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}

/* Schmale Fenster: „Einstellungen" bekommt eine eigene Zeile über den
   beiden Schaltflächen, diese bleiben nebeneinander und gleich breit. */
@media (max-width: 480px) {
  #klaro .cookie-notice .cn-body .cn-ok {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  #klaro .cookie-notice .cn-body .cn-buttons {
    width: 100%;
  }
}

/* ---------- Einstellungsfenster ---------- */
#klaro .cookie-modal .cm-bg {
  background: rgba(31, 42, 49, 0.62);
}

#klaro .cookie-modal .cm-modal.cm-klaro {
  max-width: 560px;
}

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

#klaro .cookie-modal .cm-header h1.title {
  font-family: var(--title-font-family);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #edeae3;
}

#klaro .cookie-modal .cm-header p {
  margin-top: 0.8em;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(237, 234, 227, 0.86);
}

/* Der Widerrufs-Hinweis aus dem Auftrag. Klaro kennt im Fenster nur eine
   Textstelle, deshalb hängt er als eigener Absatz am Einleitungssatz. */
#klaro .cookie-modal .cm-header .osb-widerruf {
  display: block;
  width: auto;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(237, 234, 227, 0.16);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(237, 234, 227, 0.68);
}

#klaro .cookie-modal .cm-body {
  padding: 6px 24px 10px;
}

#klaro .cookie-modal .cm-list-title {
  font-family: var(--title-font-family);
  font-weight: 600;
  font-size: 1rem;
  color: #edeae3;
}

#klaro .cookie-modal .cm-list-description {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #cfc9bd;
}

#klaro .cookie-modal span.cm-required {
  color: rgba(237, 234, 227, 0.55);
  font-size: 0.78rem;
}

#klaro .cookie-modal .cm-caret a {
  font-size: 0.82rem;
  color: #d8b98f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#klaro .cookie-modal .cm-footer {
  padding: 18px 24px 22px;
}

#klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 10px;
}

#klaro .cookie-modal .cm-footer-buttons button.cm-btn {
  flex: 1 1 0;
  min-width: 150px;
  margin: 0;
  padding: 11px 14px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s;
}

/* Auch hier: Ablehnen und Zustimmen in gleicher Farbe und gleicher Größe. */
#klaro .cookie-modal .cm-footer-buttons button.cm-btn-danger,
#klaro .cookie-modal .cm-footer-buttons button.cm-btn-accept-all {
  background-color: #b89066;
  color: #1f2a31;
}

#klaro .cookie-modal .cm-footer-buttons button.cm-btn-danger:hover,
#klaro .cookie-modal .cm-footer-buttons button.cm-btn-accept-all:hover {
  background-color: #a87f55;
}

/* „Ausgewählte akzeptieren" bzw. „Speichern" — die Schaltfläche, die die
   Schalterstellung übernimmt. Ruhiger, weil sie keine der beiden
   Grundentscheidungen ist, sondern das Ergebnis der Schalter. */
#klaro .cookie-modal .cm-footer-buttons button.cm-btn-accept {
  background-color: transparent;
  color: #edeae3;
  box-shadow: inset 0 0 0 1px rgba(237, 234, 227, 0.45);
}

#klaro .cookie-modal .cm-footer-buttons button.cm-btn-accept:hover {
  background-color: rgba(237, 234, 227, 0.1);
}

#klaro .cookie-modal .cm-footer-buttons button.cm-btn:focus-visible,
#klaro .cookie-modal button.hide:focus-visible {
  outline: 2px solid #edeae3;
  outline-offset: 2px;
}

/* ---------- Zusammentreffen mit den festsitzenden Leisten unten ----------
   Auf den drei kaufbaren Produktseiten sitzt `StickyCta` unten fest, auf
   den vier Warteseiten `WarteBanner`. Beide laufen über die volle Breite
   und liegen mit sehr hohem z-index über Klaros Banner (999). Ohne
   Ausgleich verdeckte die Leiste den unteren Rand des Banners dauerhaft.
   Gelöst wird das ausschließlich hier, in der Datei des Banners: er rückt
   auf genau diesen sieben Seiten um die Höhe der Leiste nach oben.
   An `StickyCta.astro` und `WarteBanner.astro` ist nichts geändert. */
body:has(.osb-cta) #klaro .cookie-notice:not(.cookie-modal-notice),
body:has(.osb-wb) #klaro .cookie-notice:not(.cookie-modal-notice) {
  bottom: var(--osb-leiste);
}

/* Browser ohne `:has()` (vor Chrome 105, Safari 15.4, Firefox 121) lassen
   den Banner an seiner normalen Stelle. Dann deckt die Leiste den unteren
   Rand des Banners ab. Kein Fehlerfall: der Banner ist deutlich höher als
   die Leiste, Text und Schaltflächen bleiben erreichbar. */