/*
 * Salerno-Theme fuer Klaro (ueberschreibt public/klaro/klaro.css).
 * Projektspezifische Datei, kein Bestandteil des Klaro-Pakets (siehe VENDORED.md).
 *
 * Klaro definiert seine Farben ausschliesslich ueber CSS-Custom-Properties mit
 * Fallback-Werten (var(--dark1, #333) usw.) und keine eigenen :root-Defaults.
 * Deshalb reicht es, die Variablen auf .klaro zu setzen, um konsistent das
 * bestehende Salerno-Designsystem (Sandstein/Pinie/Wiese, Archivo/IBM Plex
 * Sans, vorhandene Radien) statt der Klaro-Standardoptik zu verwenden.
 *
 * Farbwerte gespiegelt aus tailwind.config.ts (pinie/wiese/sand/kalk/anthracite).
 */
.klaro {
  --dark1: #173324; /* pinie – Modal-/Notice-Hintergrund */
  --dark2: #2c5a3f; /* pinie-600 – "Alle ablehnen"-Button, Trennlinien */
  --dark3: #d8d0c2; /* kalk – Beschreibungstext auf dunklem Grund */
  --light1: #ece6db; /* sand – Haupttext auf dunklem Grund */
  --light2: rgba(236, 230, 219, 0.18); /* sand transparent – Trennlinien/Close-Button */
  --light3: #c7bdaa; /* kalk-dark – Metatext (Zweck, "immer erforderlich") */
  --white1: #ece6db;
  --white2: #d8d0c2; /* Schalter aus: Track */
  --white3: #ece6db; /* Schalter aus: Knopf */
  --green1: #2f7044; /* wiese – "Alle akzeptieren", aktiver Schalter */
  --green2: #285a39; /* wiese-700 – Schalter "immer aktiv" */
  --green3: #2f7044; /* wiese – Fokusring am Schalter */
  --blue1: #1a1e1e; /* anthracite-900 – "Einstellungen"-Button */
  --blue2: #77807f; /* anthracite-400 – ungenutzt (keine Kontextual-Consent-Einbettungen) */
  --border-radius: 6px; /* entspricht Tailwind rounded-md, wie .btn-primary/.card-warm */
  --border-width: 1px;
  --border-style: solid;
  --button-text-color: #ece6db;
  --font-family: var(--font-plex), "IBM Plex Sans", system-ui, sans-serif;
  --title-font-family: var(--font-archivo), Archivo, system-ui, sans-serif;
}

/* Ueberschrift/Titel in Notice und Modal in der Display-Schrift, wie im
   uebrigen Salerno-Designsystem (h1-h4 nutzen font-display). */
.klaro .cookie-modal h1,
.klaro .cookie-notice h2 {
  font-family: var(--title-font-family);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/*
 * Gleichwertige erste Ebene: "Alle akzeptieren", "Alle ablehnen" und
 * "Einstellungen" muessen gleich gross und gleich gut erreichbar sein.
 * Im Notice-Layout (noticeAsModal: false) rendert Klaro "Einstellungen" als
 * reinen Link (<a class="cn-learn-more">), nicht als <button class="cm-btn">
 * – hier optisch/funktional auf Button-Niveau angehoben, keine versteckte
 * oder abgewertete Ablehnen-Option.
 */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  justify-content: flex-start;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  margin-top: 0;
  margin-right: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.6em;
  margin-right: 0;
  border-radius: var(--border-radius);
  background-color: var(--blue1);
  color: var(--button-text-color);
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  cursor: pointer;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more:hover {
  opacity: 0.9;
}

/* Buttons generell etwas ruhiger/kraeftiger, an .btn-primary/.btn-secondary
   angelehnt (font-weight, cursor bereits per Klaro-Basis vorhanden). */
.klaro .cm-btn {
  font-weight: 600;
}

/* Sichtbarer Fokus fuer Tastaturnavigation, konsistent mit dem globalen
   :focus-visible-Ring (app/globals.css) – Klaro setzt selbst keinen
   outline: none, diese Regel ergaenzt nur einen Wiese-farbenen Ring, falls
   der globale Selektor durch spaetere Klaro-Updates ueberschrieben wuerde. */
.klaro button:focus-visible,
.klaro a:focus-visible,
.klaro .cm-list-label input:focus-visible + .slider {
  outline: 2px solid #2f7044;
  outline-offset: 2px;
}