/* ============================================================
   CareVergleich24 · Einwilligungsbanner (18.08.2026)
   ------------------------------------------------------------
   Erscheint nur, solange keine Entscheidung im Cookie steht.
   Farben und Maße kommen aus design-tokens.css — hier steht
   nichts, was nicht mit dem übrigen Portal zusammenpasst.

   Gewichtung auf Dennis' ausdrückliche Anweisung (18.08.2026):
   „Alle akzeptieren" ist ein großer Knopf in der Signalfarbe,
   „Nur essenzielle" darunter eine kleine unterstrichene Zeile.
   Beide Wege stehen auf derselben Ebene und sind mit Maus wie
   Tastatur bedienbar; die Ablehnung ist aber bewusst deutlich
   zurückgenommen.

   Vermerk dazu, damit es später niemand für ein Versehen hält:
   Genau diese Gewichtung greifen Aufsichtsbehörden und Abmahner
   zuerst auf (§ 25 TDDDG, Leitlinien zu irreführender
   Gestaltung). Liegt beim Anwalt als eigene Frage (D-8e).
   Zurückbauen heißt: .cv24-consent-essenziell wieder wie einen
   Knopf gestalten — die Logik dahinter bleibt unberührt.
   ============================================================ */

/* Seit 22.09.2026 liegt der Schleier über der GANZEN Seite und die
   Karte sitzt mittig darin. Das ist nicht nur Optik: Der Schleier ist
   das, was Mausklicks auf den Hintergrund abfängt. Tastatur, Scrollen
   und Screenreader sperrt cookie-banner.js (Fokus-Käfig, inert,
   .cv24-consent-gesperrt) — CSS allein genügt dafür nicht. */
.cv24-consent {
  position: fixed;
  inset: 0;
  z-index: 9000;
  padding: 16px;
  display: flex;
  justify-content: center;
  /* Passt die Karte nicht ins Fenster, scrollt der Schleier selbst.
     `contain` hält dieses Scrollen im Banner, statt es am Ende auf die
     gesperrte Seite dahinter durchschlagen zu lassen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(34, 50, 43, 0.55);
}
.cv24-consent[hidden] { display: none; }

/* Sperrt das Scrollen des Hintergrunds, solange das Banner steht.
   Auf <html>, nicht auf <body>: nur so hält es auch auf iOS. */
.cv24-consent-gesperrt,
.cv24-consent-gesperrt body { overflow: hidden; }

.cv24-consent-karte {
  /* Senkrecht mittig — aber über `margin: auto` statt `align-items: center`.
     Der Unterschied zählt genau dann, wenn die Karte höher ist als das
     Fenster (kleines Gerät, Querformat, große Systemschrift): `center`
     schiebt den Überhang nach OBEN aus dem Bild, und dorthin lässt sich
     nicht scrollen — die Überschrift wäre abgeschnitten und unerreichbar.
     `margin: auto` klemmt in dem Fall auf 0, die Karte beginnt oben und
     der Schleier scrollt (gefunden am 22.09. auf 320×568). */
  margin: auto;
  background: var(--pw-flaeche);
  border: 1px solid var(--pw-linie);
  border-radius: var(--pw-radius-m);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 22px 24px;
  max-width: 760px;
  width: 100%;
}

.cv24-consent-titel {
  font-family: var(--pw-schrift-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--pw-gruen-700);
  margin: 0 0 6px;
}

.cv24-consent-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--pw-text);
  margin: 0 0 16px;
}
.cv24-consent-text a { color: var(--pw-link); }

.cv24-consent-knoepfe {
  display: block;
  text-align: center;
}

/* Der Weg, den die Seite empfiehlt: volle Breite, große Schrift,
   Signalfarbe, eigener Schatten. */
.cv24-consent-alle {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--pw-radius-s);
  background: var(--pw-cta);
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(176, 81, 31, 0.35);
}
.cv24-consent-alle:hover {
  background: var(--pw-cta-hover);
  box-shadow: 0 6px 18px rgba(176, 81, 31, 0.42);
}

/* Die Ablehnung: kleine unterstrichene Zeile darunter.
   Klein, aber nicht unlesbar — die Farbe hält den Kontrast von
   5,8:1, und die Zeile hat eine Tippfläche von 44px Höhe. Die
   Zielgruppe ist älter; unleserlich wäre auch für den, der sie
   sucht, ein Ärgernis. */
.cv24-consent-essenziell {
  display: block;
  margin: 10px auto 0;
  padding: 12px 8px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--pw-text-mild);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.cv24-consent-essenziell:hover { color: var(--pw-text); }

.cv24-consent-alle:focus-visible,
.cv24-consent-essenziell:focus-visible {
  outline: 3px solid var(--pw-fokus);
  outline-offset: 2px;
}

/* Der Widerrufs-Knopf im Fuß sieht aus wie die übrigen Fußlinks. */
.cv24-consent-widerruf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.cv24-consent-widerruf:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cv24-consent { padding: 10px; }
  .cv24-consent-karte { padding: 18px 16px; }
  .cv24-consent-titel { font-size: 18px; }
  .cv24-consent-text { font-size: 15.5px; }
  .cv24-consent-alle { font-size: 18px; min-height: 54px; }
}