/**
 * Gestaltung des Cookie-Banners in den Werten von soulfulspace.
 * Abgeleitet von der Fassung für onlinesichtbarsein; die unverändert
 * gelieferte `klaro.min.css` (Klaro 0.7.21, BSD-3-Clause) bleibt daneben
 * unangetastet. Farben, Schriften und Maße stehen als Variablen auf `#klaro`
 * (nicht auf `:root`), alle Regeln beginnen mit `#klaro`. Keine externe
 * Quelle: Marcellus und PT Serif liegen selbst gehostet unter /fonts.
 *
 * Marke: Anthrazit #454545 als Fläche (wie der Fußbereich), Creme #f0ebe5 als
 * Schrift und für die Schaltflächen, Taupe #c7bcb8 für Nebentext, runde
 * Schaltflächen wie auf der ganzen Website.
 */

/* ---------- Marken-Werte auf Klaros Variablen ---------- */
#klaro {
  /* Schriften — dieselben wie auf der Website */
  --font-family: 'PT Serif', Georgia, serif;
  --title-font-family: 'Marcellus', 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: #454545;
  /* `dark2` zieht bei Klaro die Trennlinien im Fenster. */
  --dark2: #5e5e5e;
  /* `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: #d9d6cf;

  /* Schrift auf dunklem Grund */
  --light1: #f0ebe5;
  --light2: rgba(240, 235, 229, 0.22);
  --light3: #c7bcb8;

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

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

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

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

  /* Form. 2px ist der Radius, den auch der Knopf im Fußbereich trägt. */
  --border-radius: 14px;
  --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;

  /* (entfernt) 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. */
}

/* ---------- Banner ---------- */
#klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 14px;
  border-top: 1px solid rgba(240, 235, 229, 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: #f0ebe5;
}

#klaro .cookie-notice .cn-body p {
  margin: 0.7em 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(240, 235, 229, 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
   (`#454545`), 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, `#f0ebe5`: 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: #f0ebe5;
  text-decoration-line: underline;
  text-decoration-color: rgba(240, 235, 229, 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: #ffffff;
  text-decoration-color: #f0ebe5;
}

/* 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 #f0ebe5;
  color: #f0ebe5;
}

/* ---------- 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: #f0ebe5;
  color: #454545;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  border-radius: 300px;
  cursor: pointer;
  transition: background-color 0.15s;
}

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

#klaro .cookie-notice .cn-body .cn-buttons button.cm-btn:focus-visible,
#klaro .cookie-notice .cn-body a:focus-visible {
  outline: 2px solid #f0ebe5;
  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(69, 69, 69, 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: #f0ebe5;
}

#klaro .cookie-modal .cm-header p {
  margin-top: 0.8em;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(240, 235, 229, 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 .ss-widerruf {
  display: block;
  width: auto;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 235, 229, 0.16);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(240, 235, 229, 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: #f0ebe5;
}

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

#klaro .cookie-modal span.cm-required {
  color: rgba(240, 235, 229, 0.55);
  font-size: 0.78rem;
}

#klaro .cookie-modal .cm-caret a {
  font-size: 0.82rem;
  color: #ffffff;
  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: 300px;
  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: #f0ebe5;
  color: #454545;
}

#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: #ffffff;
}

/* „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: #f0ebe5;
  box-shadow: inset 0 0 0 1px rgba(240, 235, 229, 0.45);
}

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

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


/* ---------- Eingebettete Inhalte (YouTube) ----------
   Bis zur Zustimmung zeigt Klaro an Stelle des Videos einen Hinweis. Er liegt
   ausserhalb von #klaro, deshalb stehen die Werte hier direkt, mit genug
   Gewicht (.klaro.cm-as-context-notice), um Klaros Standard zu schlagen. */
.klaro.cm-as-context-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1.5rem;
  background: #454545;
  color: #f0ebe5;
  border-radius: 14px;
  font-family: 'PT Serif', Georgia, serif;
}

.klaro.cm-as-context-notice .context-notice {
  background: transparent;
  color: #f0ebe5;
  text-align: center;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.klaro.cm-as-context-notice .context-notice p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #f0ebe5;
}

.klaro.cm-as-context-notice .context-notice p.cm-buttons {
  margin: 0;
}

.klaro.cm-as-context-notice .context-notice button.cm-btn {
  margin: 0.25rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 300px;
  background: #f0ebe5;
  color: #454545;
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.klaro.cm-as-context-notice .context-notice button.cm-btn:hover {
  background: #ffffff;
}