/* revbuff: Klaro in Markenoptik.
 *
 * Nicht von fr0nt übernommen, sondern neu geschrieben. Die fr0nt-Fassung hängt an
 * Tokens aus deren styles.css (`:root`), die es hier nicht gibt — übernommen hätte
 * sie auf Rückfallwerte zurückfallen und fr0nt-farben geblieben.
 *
 * WICHTIG, sonst passiert nichts: Klaro spritzt sein eigenes CSS zur Laufzeit in den
 * <head>, also NACH dieser Datei. Bei gleicher Spezifität gewinnt der spätere Block.
 * Deshalb zwei Ebenen:
 *   1. Farben und Maße über Klaros eigene CSS-Variablen. Der vorgesehene Weg,
 *      braucht keinen Spezifitätskampf.
 *   2. Struktur-Regeln mit `html`-Präfix, damit sie Klaros Selektoren
 *      (.klaro .cookie-notice .cm-btn = 0,3,0) sicher schlagen.
 *
 * Farben sind die der Seite: Grund #12100E, Schrift #F5F1EC, Akzent #F04A00.
 * Sie stehen hier als feste Werte, weil der übernommene Seitensatz seine Farben in
 * Framer-Token-Variablen führt, die außerhalb des Seiteninhalts nicht gelten.
 */

.klaro {
  --font-family: Inter, system-ui, -apple-system, sans-serif;
  --font-size: 15px;
  --border-radius: 12px;
  --border-width: 1px;
  --border-style: solid;

  /* Flächen */
  --dark1: #12100E;                        /* Grund der Leiste */
  --dark2: #1b1815;
  --dark3: rgba(255, 255, 255, 0.12);      /* Linien */
  --light1: #F5F1EC;                       /* Schrift */
  --light2: rgba(245, 241, 236, 0.72);
  --light3: rgba(245, 241, 236, 0.5);

  /* Zustimmen-Knopf: revbuff-Orange statt Klaros Giftgrün */
  --green1: #F04A00;
  --green2: #ff5a0f;
  --green3: #d24000;
  --button-text-color: #12100E;

  /* Blau nutzt Klaro für „Auswahl speichern" — auf dieselbe Familie ziehen,
     damit nicht drei Farben in einer Leiste stehen. */
  --blue1: rgba(255, 255, 255, 0.10);
  --blue2: rgba(255, 255, 255, 0.16);

  /* Leiste: volle Breite unten statt schwebender Kasten rechts */
  --notice-position: fixed;
  --notice-max-width: 100%;
  --notice-left: 0;
  --notice-right: 0;
  --notice-bottom: 0;
}

/* ---------- Struktur ---------- */

html .klaro .cookie-notice:not(.cookie-modal-notice) {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
  padding: 18px clamp(16px, 4vw, 48px);
  background: #12100E;
}

html .klaro .cookie-notice .cn-body {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px 28px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1400px;
  margin-inline: auto;
}

html .klaro .cookie-notice .cn-body p {
  margin: 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(245, 241, 236, 0.72);
}

html .klaro .cookie-notice .cn-ok {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  flex: 0 0 auto;
}

html .klaro .cm-btn,
html .klaro .cookie-notice .cm-btn {
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* „Nur das Nötige" ist eine gleichwertige Wahl, kein Ausweg — also sichtbar,
   aber ruhiger als der Hauptknopf. Ein versteckter Ablehnen-Knopf wäre eine
   Einwilligung, die keine ist. */
html .klaro .cm-btn.cm-btn-decline,
html .klaro .cm-btn.cn-decline {
  background: rgba(255, 255, 255, 0.08);
  color: #F5F1EC;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

html .klaro .cm-btn.cm-btn-success,
html .klaro .cm-btn.cn-ok-btn {
  background: #F04A00;
  color: #12100E;
  border: 1px solid #F04A00;
}

html .klaro .cookie-notice .cn-learn-more {
  color: rgba(245, 241, 236, 0.72);
  text-decoration: underline;
  font-size: 15px;
}

/* ---------- Einstellungsdialog ---------- */

html .klaro .cookie-modal .cm-bg { background: rgba(0, 0, 0, 0.72); }

html .klaro .cookie-modal .cm-modal {
  background: #12100E;
  color: #F5F1EC;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
}

html .klaro .cookie-modal .cm-header h1,
html .klaro .cookie-modal .cm-header p { color: #F5F1EC; }
html .klaro .cookie-modal .cm-caption { color: rgba(245, 241, 236, 0.62); }
html .klaro .cookie-modal li.cm-service .cm-list-title { color: #F5F1EC; }
html .klaro .cookie-modal li.cm-service .cm-list-description { color: rgba(245, 241, 236, 0.62); }
html .klaro .cookie-modal .cm-purpose { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }

/* Schalter in Akzentfarbe statt Grün */
html .klaro .cm-list-input:checked + .cm-list-label .slider { background-color: #F04A00; }
html .klaro .cm-list-label .slider { background-color: rgba(255, 255, 255, 0.22); }

@media (max-width: 720px) {
  html .klaro .cookie-notice .cn-body { flex-direction: column; align-items: stretch; }
  html .klaro .cookie-notice .cn-ok { justify-content: flex-start; }
}

/* Nachgebessert 05.10.2026 am Bild, nicht an einer Zahl: Klaros eigene Regeln
   setzen die Dienstbeschreibungen auf ein Grau, das auf dunklem Grund kaum noch
   lesbar ist. Die Beschreibung ist aber genau der Teil, der die Einwilligung
   informiert macht — unlesbar ist sie wertlos. */
html .klaro .cookie-modal .cm-list-description,
html .klaro .cookie-modal li.cm-service .cm-list-description,
html .klaro .cookie-modal .cm-purpose .cm-list-description {
  color: rgba(245, 241, 236, 0.66);
}
html .klaro .cookie-modal .cm-services .cm-caption,
html .klaro .cookie-modal .cm-purpose-description { color: rgba(245, 241, 236, 0.66); }
html .klaro .cookie-modal a { color: #F04A00; }