/* Klaro an das Portal angeglichen.
   Eigene Datei, damit ein Versionswechsel von Klaro sie nicht ueberschreibt --
   klaro.css wird beim Aktualisieren ersetzt, diese hier bleibt.

   ACHTUNG bei Klaros Variablen: Die Namen beschreiben Klaros Vorgabe, nicht
   die Rolle. --dark1 ist die *Flaeche* des Fensters, --light1 die Schrift
   darauf -- Klaro liefert ein dunkles Fenster mit heller Schrift. --dark2 und
   --dark3 sind dagegen wirklich Textfarben (Nebentext, Beschreibungen).
   Wer das verwechselt, faerbt den Dienstnamen in seine eigene
   Hintergrundfarbe. Hier: helle Flaeche, dunkle Schrift, wie im Portal. */

.klaro {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --title-font-family: var(--font-family);
  --font-size: 15px;

  /* ACHTUNG, die Namen taeuschen: --dark1 ist die *Flaeche* des Fensters und
     --light1 die Schrift darauf. Klaros Vorgabe ist ein dunkles Fenster mit
     heller Schrift; fuer ein helles Fenster gehoeren beide vertauscht. */
  --dark1: #fff;      /* Flaeche des Fensters */
  --light1: #172b55;  /* Schrift darauf */

  /* Nebentext und Rahmen -- liegen auf der hellen Flaeche. */
  --dark2: #5c6d89;
  --dark3: #5c6d89;
  --light2: #dfe8f3;
  --light3: #edf5ff;
  --white2: #fff;
  --white3: #f7faff;

  /* Zustimmen-Knopf und aktive Schalter */
  --green1: #075bd8;
  --green2: #0b70f0;
  --green3: #062d63;
  --blue1: #075bd8;
  --blue2: #0b70f0;

  --border-radius: 12px;
  --border-style: solid;
  --border-width: 1px;
  --box-shadow-color: rgba(7, 43, 99, .18);

  --notice-max-width: 420px;
  --notice-position: fixed;
  --notice-bottom: 20px;
  --notice-left: 20px;
  --notice-right: auto;
  --notice-top: auto;
}

/* --- Flaechen und Schrift ------------------------------------------------ */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-notice {
  background: var(--vtc-white, #fff);
  color: var(--vtc-text, #172b55);
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-footer {
  background: transparent;
  color: var(--vtc-text, #172b55);
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2,
.klaro .cookie-notice .cn-body h1,
.klaro .cookie-notice .cn-body h2 {
  color: var(--vtc-navy, #0b2853);
  font-weight: 800;
}

.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-notice .cn-body p {
  color: var(--vtc-text, #172b55);
  line-height: 1.6;
}

/* Trennlinien in der Farbe des Portals statt in einer Textfarbe. */
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: var(--vtc-line, #dfe8f3);
}

/* --- Die Dienstliste ----------------------------------------------------- */
/* Genau hier war der Fehler: Titel in Hintergrundfarbe, Beschreibung zu blass. */
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-notice .cm-list-title {
  color: var(--vtc-navy, #0b2853);
  font-weight: 700;
  font-size: .95em;
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: var(--vtc-muted, #5c6d89);
  font-size: .88em;
  line-height: 1.55;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
  color: var(--vtc-muted, #5c6d89);
  font-size: .78em;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li {
  border-color: var(--vtc-line, #dfe8f3);
}

/* Die Zweckzeile ("Zweck: Fuer den Betrieb noetig") holt ihre Farbe aus
   --light3 -- auf Klaros dunklem Fenster hell und richtig, auf unserem hellen
   fast unsichtbar. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
  color: var(--vtc-muted, #5c6d89);
  font-size: .82em;
}

/* Das Schliesskreuz muss auf hellem Grund dunkel sein. */
.klaro .cookie-modal .cm-modal .hide svg {
  stroke: var(--vtc-navy, #0b2853);
}

/* --- Knoepfe ------------------------------------------------------------- */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  border-radius: 12px;
  font-weight: 800;
  padding: 10px 20px;
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  box-shadow: 0 14px 28px rgba(7, 91, 216, .18);
}

/* Der Ablehnen-Knopf darf nicht wie die Hauptaktion aussehen, aber auch nicht
   verschwinden -- er ist die gleichwertige Wahl. */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline {
  background: var(--vtc-white, #fff);
  color: var(--vtc-blue, #075bd8);
  border: 1px solid #bcd6f6;
  box-shadow: none;
}

/* --- Kleinigkeiten ------------------------------------------------------- */
.klaro .cookie-modal .cm-modal .cm-header h1 { font-weight: 800; }
.klaro .cookie-modal a,
.klaro .cookie-notice a { color: var(--vtc-blue, #075bd8); }

@media (max-width: 640px) {
  .klaro { --notice-max-width: none; --notice-left: 12px; --notice-right: 12px; --notice-bottom: 12px; }
}