/* =========================================================================
   Klaro - Korrekturen an der Lesbarkeit

   Wird NACH css/klaro.min.css geladen. Die Vendor-Datei bleibt unberuehrt,
   damit ein Update von Klaro nichts ueberschreibt, was hier steht.

   Hintergrund:
   Klaro faerbt drei Textstellen ueber die Variable --dark2 beziehungsweise
   --dark3. In unserer Zuordnung (js/klaro-config.js, Block "styling") zeigt
   --dark2 auf --rule, also auf die Linienfarbe #383b40. Als Rahmen ist das
   richtig, als Schrift auf der Modalflaeche #232528 ergibt es einen Kontrast
   von etwa 1,3:1. Der Hinweis "notwendig" war dadurch praktisch unsichtbar.

   Die Selektoren sind absichtlich so lang wie im Original und zusaetzlich mit
   "html" praefixiert. Klaro arbeitet mit sehr spezifischen Selektoren; eine
   kurze Regel wuerde verlieren, egal in welcher Reihenfolge geladen wird.
   Deshalb hier kein !important.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Badge "notwendig" und "Opt-Out"

   Bleibt eine Nebenangabe, wird aber als Label lesbar: etwas kleiner,
   in Versalien und gesperrt, in --text-dim (Kontrast rund 7:1).
   ------------------------------------------------------------------------- */
.klaro span.cm-required,
.klaro span.cm-opt-out,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required{
  color: #b3aea6;
  color: var(--text-dim, #b3aea6);
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: .55em;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   2. Beschreibungstexte unter den Diensten

   Standard ist --dark3 (#9a958d, rund 5,2:1). Lesbar, aber auf dunklem
   Grund unnoetig blass. Eine Stufe heller schadet der Hierarchie nicht,
   die Titel stehen ohnehin fett darueber.
   ------------------------------------------------------------------------- */
html .klaro .cookie-modal .cm-list-description,
html .klaro .context-notice .cm-list-description,
html .klaro .cookie-notice .cm-list-description{
  color: #b3aea6;
  color: var(--text-dim, #b3aea6);
}

/* -------------------------------------------------------------------------
   3. Fusszeile des Dialogs

   Der Hinweis auf Klaro stand ebenfalls auf --dark2 und war nicht lesbar.
   Der Link bleibt erhalten, die Lizenz liegt unter
   vendor-licenses/klaro-LICENSE.txt.
   ------------------------------------------------------------------------- */
html .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a{
  color: #9a958d;
  color: var(--muted, #9a958d);
}

/* -------------------------------------------------------------------------
   4. Hoher Kontrast

   Wer im Betriebssystem erhoehten Kontrast eingestellt hat, bekommt die
   Nebenangaben in voller Textfarbe.
   ------------------------------------------------------------------------- */
@media (prefers-contrast: more){
  .klaro span.cm-required,
  .klaro span.cm-opt-out,
  html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
  html .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
  html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
  html .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required,
  html .klaro .cookie-modal .cm-list-description,
  html .klaro .cookie-notice .cm-list-description{
    color: #ece9e4;
    color: var(--text, #ece9e4);
  }
}