/*!
 * cover72 Cookie Consent 1.0.0 - Styles
 * Selbst gehostet, keine externen Schriften oder Bilder.
 */

:root {
  --c72-accent: #3685ab;
  --c72-bg: #ffffff;
  --c72-fg: #1c2024;
  --c72-muted: #5a636c;
  --c72-line: #dfe3e7;
  --c72-radius: 10px;
}

/* Der Dunkelmodus gilt NUR für das Banner und den Dialog. Die Platzhalter
   sitzen im Seiteninhalt - deren Farben richten sich nach der Website, sonst
   steht helle Schrift auf hellem Grund, wenn der Besucher sein Betriebssystem
   dunkel gestellt hat, die Website aber weiß ist. */
@media (prefers-color-scheme: dark) {
  .c72-root {
    --c72-bg: #191d21;
    --c72-fg: #eef1f4;
    --c72-muted: #a8b1b9;
    --c72-line: #333b42;
  }
}

.c72-root,
.c72-root *,
.c72-ph,
.c72-ph * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Grundstellung gegen Namenskollisionen

   Websites bringen eigene Klassen mit, die zufällig genauso heissen können
   wie unsere. Auf cover72.de definiert das Stylesheet der Rechtsseiten ein
   `.c72-legal` mit weißem Hintergrund und 80 Pixeln Innenabstand - und traf
   damit den Absatz mit den Rechtslinks im Banner: ein weißer Kasten mitten
   im dunklen Dialog.

   Höhere Spezifität braucht es dagegen nicht: Unser Stylesheet wird als
   letztes in den Kopf gehängt und gewinnt bei Gleichstand ohnehin. Es fehlte
   nur die Angabe - über Hintergrund und Innenabstand des Absatzes stand bei
   uns nichts, also blieb der fremde Wert stehen. Diese Grundstellung schließt
   die Lücke. Sie steht bewusst weit oben: Die Bausteine weiter unten haben
   dieselbe Spezifität und überschreiben sie der Reihe nach.

   Ebenso wichtig: Weil hier nicht mit !important oder zusätzlicher
   Spezifität gearbeitet wird, greift "Eigenes CSS" aus den Optionen
   unverändert weiter - es wird direkt hinter dieser Datei eingebunden.

   Die Selektoren zählen deshalb genau EINE Klasse. Mit zwei (etwa
   `.c72-ph > .c72-ph__box *`) würde die Grundstellung die Bausteine weiter
   unten schlagen und zum Beispiel die Akzentfarbe im Platzhalter löschen.
   -------------------------------------------------------------------------- */
.c72-root,
.c72-root *,
.c72-fab,
.c72-fab *,
.c72-ph__box,
.c72-ph__box * {
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  float: none;
  text-transform: none;
  letter-spacing: normal;
  list-style: none;
  text-indent: 0;
  max-width: none;
  min-width: 0;
  min-height: 0;
}

.c72-root {
  position: fixed;
  inset: 0;
  /* Chat- und Widget-Dienste (Elfsight, Tawk, Crisp) arbeiten mit
     siebenstelligen z-index-Werten - hier bewusst knapp unter dem Maximum. */
  z-index: 2147483646;
  display: flex;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  pointer-events: none;
}

.c72-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 18, .55);
  /* fängt jeden Klick ab, damit nichts darunter bedienbar bleibt,
     solange eine Entscheidung aussteht */
  pointer-events: auto;
  touch-action: none;
}

.c72-root--box .c72-backdrop,
.c72-root--bar .c72-backdrop {
  background: rgba(10, 14, 18, .28);
}

.c72-dialog {
  position: relative;
  pointer-events: auto;
  background: var(--c72-bg);
  color: var(--c72-fg);
  border-radius: var(--c72-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  padding: 24px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.c72-dialog--wide { width: min(620px, calc(100vw - 32px)); }

.c72-root--box { align-items: flex-end; justify-content: flex-start; padding: 16px; }
.c72-root--center { align-items: center; justify-content: center; padding: 16px; }

.c72-root--bar { align-items: flex-end; justify-content: center; padding: 0; }
.c72-root--bar .c72-dialog {
  width: 100%;
  max-width: none;
  border-radius: 0;
}
.c72-root--bar .c72-dialog--wide { width: 100%; }

html.c72-locked:has(.c72-root--center) { overflow: hidden; }

.c72-title {
  margin: 0 0 8px;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--c72-fg);
}

.c72-text {
  margin: 0 0 16px;
  color: var(--c72-muted);
}

/* --- Schaltflächen: Ablehnen und Akzeptieren gleichwertig gestaltet --- */

.c72-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c72-btn {
  flex: 1 1 auto;
  min-width: calc(50% - 4px);
  appearance: none;
  border: 1px solid var(--c72-accent);
  border-radius: 8px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: filter .15s ease, background-color .15s ease;
}

.c72-btn--primary {
  background: var(--c72-accent);
  color: var(--c72-on-accent, #fff);
}

.c72-btn--primary:hover { filter: brightness(1.08); }

.c72-btn--ghost {
  background: transparent;
  color: var(--c72-fg);
  border-color: var(--c72-line);
  font-weight: 500;
}

.c72-btn--ghost:hover { background: rgba(127, 127, 127, .12); }

.c72-btn:focus-visible,
.c72-close:focus-visible,
.c72-legal a:focus-visible {
  outline: 3px solid var(--c72-accent);
  outline-offset: 2px;
}

.c72-legal {
  margin: 14px 0 0;
  display: flex;
  gap: 16px;
  font-size: .95em;
}

.c72-legal a { color: var(--c72-muted); text-decoration: underline; }

.c72-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 1.6em;
  line-height: 1;
  color: var(--c72-muted);
  cursor: pointer;
}

/* ------------------------------- Einstellungen ------------------------ */

.c72-list {
  margin: 4px 0 18px;
  border-top: 1px solid var(--c72-line);
}

.c72-item {
  padding: 12px 2px;
  border-bottom: 1px solid var(--c72-line);
}

.c72-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c72-item__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.c72-item__name input {
  width: 18px;
  height: 18px;
  accent-color: var(--c72-accent);
  cursor: pointer;
}

.c72-item__name input:disabled { cursor: default; opacity: .6; }

.c72-item__desc {
  margin: 6px 0 0 28px;
  font-size: .88em;
  color: var(--c72-muted);
}

.c72-badge {
  font-size: .75em;
  font-weight: 600;
  color: var(--c72-muted);
  border: 1px solid var(--c72-line);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* --------------------------- Schalter am Bildschirmrand ---------------- */

.c72-fab {
  --c72-fab-offset: 20px;
  --c72-fab-size: 48px;

  position: fixed;
  bottom: var(--c72-fab-offset);
  z-index: 2147483000;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--c72-fab-size) * .19);
  width: var(--c72-fab-size);
  height: var(--c72-fab-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--c72-accent);
  color: var(--c72-on-accent, #fff);
  font-family: inherit;
  /* Fester Bezugswert statt "inherit": der Schalter sitzt außerhalb von
     .c72-root direkt im <body> und darf nicht von einer Schriftgrößen-
     Umstellung der Website (z. B. html{font-size:62.5%}) mitgeschrumpft
     werden - sonst greift .c72-fab__text weiter unten (em-basiert) ins Leere. */
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: filter .15s ease, transform .15s ease;
}

/* Seitlicher Abstand fällt auf den unteren zurück, wenn er nicht
   gesetzt ist - so verhalten sich Installationen vor 1.8.4 unverändert. */
.c72-fab--left { left: var(--c72-fab-offset-x, var(--c72-fab-offset)); }
.c72-fab--right { right: var(--c72-fab-offset-x, var(--c72-fab-offset)); }

.c72-fab--text {
  width: auto;
  height: var(--c72-fab-size);
  padding: 0 calc(var(--c72-fab-size) * .38) 0 calc(var(--c72-fab-size) * .3);
}

.c72-fab svg {
  width: calc(var(--c72-fab-size) * .46);
  height: calc(var(--c72-fab-size) * .46);
  flex: none;
  /* Eigene Icon-Farbe (Einstellungen -> Darstellung) überschreibt die
     automatische Kontrastfarbe der Beschriftung; ohne eigene Farbe
     unverändert wie bisher. */
  fill: var(--c72-fab-icon-color, currentColor);
}

.c72-fab__text {
  white-space: nowrap;
  /* wächst mit, bleibt aber in lesbaren Grenzen */
  font-size: clamp(.8em, calc(var(--c72-fab-size) * .3), 1.1em);
}

.c72-fab:hover { filter: brightness(1.1); transform: translateY(-1px); }

.c72-fab:focus-visible {
  outline: 3px solid var(--c72-accent);
  outline-offset: 3px;
}

@media print { .c72-fab { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .c72-fab { transition: none; }
  .c72-fab:hover { transform: none; }
}

/* ------------------------------- Platzhalter -------------------------- */

.c72-ph {
  position: relative;
  margin: 0 0 1em;
  /* übernimmt Schriftfarbe und Größe der Website */
  color: inherit;
}

/* Alles ausser der Platzhalter-Box bleibt verborgen, bis freigegeben wurde -
   das gilt für iFrames ebenso wie für Widget-Container. */
.c72-ph > *:not(.c72-ph__box) { display: none; }

/* Video-Einbettung: 16:9, passt sich der Spaltenbreite an */
.c72-ph--ratio {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.c72-ph--ratio > iframe,
.c72-ph--ratio > .c72-ph__box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c72-ph--ratio > iframe { border: 0; }

.c72-ph--ratio > .c72-ph__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Nach der Freigabe: Platzhalter weg, Inhalt sichtbar */
.c72-ph--on > *:not(.c72-ph__box) { display: block; }
.c72-ph--on > .c72-ph__box,
.c72-ph--on.c72-ph--ratio > .c72-ph__box { display: none; }

/* Die Box erbt bewusst NICHT die Schriftfarbe der Website. Das war anfangs
   anders und hat sich als Fehler herausgestellt (Joomla-Meldung vom
   10.09.2026): auf einem Seitenabschnitt mit dunklem Hintergrund erbte die
   Box schwarze Schrift und wurde unlesbar, während derselbe Kasten auf hellem
   Grund einwandfrei aussah. Die Box kann den tatsächlichen Hintergrund des
   Seitenabschnitts per CSS nicht zuverlässig erkennen - "inherit" trifft mal
   die eine, mal die andere Richtung nicht. Deshalb ein eigener, heller Kasten
   mit fester dunkler Schrift, der auf jedem Seitenhintergrund lesbar bleibt.
   Gerade Shop-Themes haben oft dunkle Abschnitte (Footer, Newsletter-Band). */
.c72-ph__box {
  border: 1px solid rgba(127, 127, 127, .38);
  border-radius: 10px;
  background: rgba(244, 245, 247, .96);
  padding: 22px;
  text-align: center;
  color: #1c2024;
}

.c72-ph__title {
  margin: 0 0 6px;
  font-weight: 700;
}

.c72-ph__text {
  margin: 0 auto 14px;
  max-width: 48ch;
  font-size: .92em;
  opacity: .85;
}

/* Kategorie-Beschreibung (z. B. "Zeigt eingebettete Karten an...") -
   ergänzt die Zeile oben, deshalb etwas kleiner/blasser gehalten. */
.c72-ph__cat {
  margin: -6px auto 14px;
  max-width: 48ch;
  font-size: .85em;
  opacity: .7;
}

.c72-ph__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
}

.c72-ph__actions .c72-btn {
  flex: 0 1 auto;
  min-width: 0;
}

/* Wichtig: im Platzhalter darf der Nebenschalter NICHT die Banner-Farbtoken
   verwenden - er erbt die feste dunkle Schrift der Platzhalter-Box (siehe
   .c72-ph__box), nicht die Website. */
.c72-ph .c72-btn--ghost {
  color: inherit;
  border-color: rgba(127, 127, 127, .45);
}

.c72-ph .c72-btn--ghost:hover { background: rgba(127, 127, 127, .16); }

.c72-ph__meta {
  margin: 12px 0 0;
  font-size: .8em;
}

.c72-ph__meta a { color: inherit; text-decoration: underline; opacity: .8; }

@media (max-width: 480px) {
  .c72-actions .c72-btn { min-width: 100%; }
  .c72-ph__box { padding: 18px 14px; }
}

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