/* =========================================================================
   CarloMedia Consent (Web) — Gestaltung, Version 1.0.0

   Alle Farben, Radien und Schriftgrößen stehen als CSS-Variablen oben. Eine
   neue Seite überschreibt nur diese Variablen und bekommt damit ihren eigenen
   Banner, ohne dass hier etwas angefasst wird:

     :root {
       --cmc-zusagen: #0f7b3f;
       --cmc-neutral: #123a4a;
       --cmc-radius:  999px;
     }

   Bewusst eigene Klassennamen mit Präfix `cmc-`: Der Banner soll auf einer
   Tailwind-Seite genauso funktionieren wie auf einer Seite mit handgeschriebenem
   CSS, ohne dass sich etwas gegenseitig überschreibt.
   ========================================================================= */

:root {
  --cmc-grund: #ffffff;
  --cmc-text: #1f2933;
  --cmc-text-leise: #52606d;
  --cmc-titel: #0f2b38;
  --cmc-rahmen: #d3dde3;
  --cmc-zusagen: #0f7b3f;
  --cmc-zusagen-hover: #0c6534;
  --cmc-neutral: #14435a;
  --cmc-neutral-hover: #0e3145;
  --cmc-still-text: #14435a;
  --cmc-radius: 999px;
  --cmc-radius-box: 12px;
  --cmc-schrift: inherit;
  --cmc-z: 9999;
}

.cmc {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--cmc-z);
  background: var(--cmc-grund);
  color: var(--cmc-text);
  font-family: var(--cmc-schrift);
  border-top: 1px solid var(--cmc-rahmen);
  /* Zurückhaltender Schatten: der Streifen soll sich abheben, nicht auf die
     Seite knallen. */
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
}

.cmc[hidden] {
  display: none;
}

/* Text und Knöpfe in einer Leiste. Ab 60rem nebeneinander, dadurch bleibt der
   Banner auf dem Bildschirm ein schmaler Streifen unten statt eines Kastens. */
.cmc__leiste {
  max-width: 66rem;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 60rem) {
  .cmc__leiste {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }

  .cmc__fuss {
    flex: none;
  }
}

.cmc__innen {
  /* Höhe begrenzt, damit der Banner auf kleinen Geräten nie den ganzen
     Bildschirm einnimmt: eine Einwilligung darf keine Zugangsschranke sein.
     Nur der Textteil scrollt — die Knöpfe liegen daneben oder darunter und
     bleiben immer sichtbar. */
  max-height: min(45vh, 18rem);
  overflow-y: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.cmc__titel {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--cmc-titel);
  outline: none;
}

.cmc__text {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.cmc__hinweis {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cmc-text-leise);
}

.cmc__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Kategorien und Dienste ─────────────────────────────────────────────── */

.cmc__details {
  margin-top: 1rem;
}

/* Zusammenfassung der Dienstangaben. Auf schmalen Geräten zugeklappt, damit der
   Banner nicht den halben Bildschirm einnimmt — siehe Begründung in consent.js. */
.cmc__mehr {
  margin-top: 0.4rem;
}

.cmc__mehr-kopf {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cmc-still-text);
  text-underline-offset: 3px;
}

.cmc__mehr-kopf:hover {
  text-decoration: underline;
}

.cmc__mehr-kopf:focus-visible {
  outline: 3px solid var(--cmc-titel);
  outline-offset: 2px;
}

.cmc__mehr[open] > .cmc__mehr-kopf {
  margin-bottom: 0.25rem;
}

.cmc__details[hidden] {
  display: none;
}

.cmc-kategorie + .cmc-kategorie {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cmc-rahmen);
}

.cmc-kategorie__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.cmc-schalter {
  /* Ein echtes Kontrollkästchen statt eines nachgebauten Schiebers: es ist
     mit Tastatur und Screenreader ohne Zutun bedienbar und wird von jedem
     Prüfwerkzeug als das erkannt, was es ist. */
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--cmc-zusagen);
  flex: none;
}

.cmc-kategorie__titel {
  font-weight: 700;
  color: var(--cmc-titel);
  font-size: 1rem;
}

.cmc-kategorie__text {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cmc-text-leise);
}

.cmc-dienst {
  margin: 0.6rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--cmc-rahmen);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--cmc-text-leise);
}

.cmc-dienst__name {
  font-weight: 700;
  color: var(--cmc-titel);
}

.cmc-dienst__zeile {
  margin-top: 0.15rem;
}

.cmc-dienst__label,
.cmc-dienst__wert {
  display: inline;
  margin: 0;
}

.cmc-dienst__label {
  font-weight: 600;
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */

.cmc__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 30rem) {
  .cmc__knoepfe {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.cmc__knopf {
  /* Gleiche Größe, gleiche Schrift, gleiche Machart für Annehmen und
     Ablehnen. Das ist keine Geschmacksfrage, sondern die Anforderung an
     gleichwertige Gestaltung — und der Grund, warum der Banner insgesamt
     kleiner werden darf, aber niemals nur einer der beiden Knöpfe. */
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: 2px solid transparent;
  border-radius: var(--cmc-radius);
  cursor: pointer;
  color: #fff;
  /* Bewusst KEIN white-space: nowrap. Es sah eine Spur ruhiger aus, hätte aber
     bei 200 Prozent Zoom die Beschriftung über den Rand geschoben — und
     abgeschnittener Text ist auf Carlos Seiten ein Ausschlusskriterium.
     Umbrechen darf sie, hinausragen nicht. */
  transition: background-color 0.15s ease;
}

@media (min-width: 30rem) {
  .cmc__knopf--neutral,
  .cmc__knopf--zusagen {
    min-width: 10.5rem;
  }
}

.cmc__knopf--neutral {
  background: var(--cmc-neutral);
}

.cmc__knopf--neutral:hover {
  background: var(--cmc-neutral-hover);
}

.cmc__knopf--zusagen {
  background: var(--cmc-zusagen);
}

.cmc__knopf--zusagen:hover {
  background: var(--cmc-zusagen-hover);
}

.cmc__knopf--still {
  background: transparent;
  color: var(--cmc-still-text);
  border-color: var(--cmc-rahmen);
}

.cmc__knopf--still:hover {
  background: rgba(0, 0, 0, 0.04);
}

.cmc__knopf--still[hidden] {
  display: none;
}

.cmc__knopf:focus-visible {
  outline: 3px solid var(--cmc-titel);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cmc__knopf {
    transition: none;
  }
}