/*
 * Der Einwilligungsbanner.
 *
 * Eigenes CSS und kein Tailwind, weil layout/landing.php bewusst kein
 * Tailwind lädt - 441 KB JIT auf der Seite, nach der ein Fremder entscheidet,
 * ob er bleibt. Dieselbe Datei läuft in den drei Tailwind-Layouts mit; das
 * Präfix einwilligung__ hält sie voneinander frei.
 */

.einwilligung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px;
  background: rgba(15, 23, 42, 0.35);
}

.einwilligung[hidden] {
  display: none;
}

.einwilligung__kasten {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

.einwilligung__text {
  margin: 0 0 14px;
}

.einwilligung__text a {
  color: #047857;
}

.einwilligung__mehr {
  margin-bottom: 14px;
}

.einwilligung__mehr > summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
  list-style: none;
}

.einwilligung__mehr > summary::-webkit-details-marker {
  display: none;
}

.einwilligung__mehr > summary::after {
  content: " ▾";
}

.einwilligung__mehr[open] > summary::after {
  content: " ▴";
}

.einwilligung__zwecke {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.einwilligung__zweck {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  cursor: pointer;
}

.einwilligung__zweck input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #047857;
}

.einwilligung__knoepfe {
  display: flex;
  gap: 10px;
}

.einwilligung__knopf {
  font: inherit;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #fff;
  cursor: pointer;
}

/*
 * Beide Knöpfe der ersten Ebene teilen sich die Breite zu gleichen Teilen.
 * Seit dem 09.09.2026 ist die Fläche nicht mehr das Einzige, was gleich ist:
 * „Alle akzeptieren" und „Alle ablehnen" tragen dieselben Klassen und sehen
 * damit identisch aus. Unterschiedlich ist nur noch die Reihenfolge, und die
 * steht im Quelltext von _einwilligung.php, nicht hier.
 */
.einwilligung__knopf--haelfte {
  flex: 1 1 0;
}

/*
 * Weiß mit Rahmen - **nur noch für „Auswahl speichern" auf der zweiten
 * Ebene.** Dort ist der zurückhaltende Knopf richtig, weil die Entscheidung
 * schon in den Schaltern darüber steckt.
 *
 * Bis zum 09.09.2026 trug auch „Alle ablehnen" auf der ERSTEN Ebene diese
 * Klasse. Das war eine bewusste Entscheidung des Betreibers vom 06.08.2026,
 * getroffen ohne Werbedruck, und sie stand als offene Frage in
 * docs/rechtstexte-pruefpunkte.md Abschnitt 2.14. Zurückgenommen vor dem
 * Werbestart: Die Orientierungshilfe der Aufsichtsbehörden verlangt
 * Gleichwertigkeit auch in der Gestaltung, „gefüllt gegen umrandet" ist der
 * am häufigsten abgemahnte Fall, und der Banner ist die erste Seite, die
 * jeder bezahlte Klick sieht.
 *
 * WER DIESE KLASSE WIEDER AN EINEN DER BEIDEN ERSTE-EBENE-KNÖPFE HÄNGT,
 * macht die Rücknahme rückgängig. Eine Zusage in test_57_einwilligung.php
 * verbietet jeden Klassenunterschied zwischen ihnen.
 */
.einwilligung__knopf--rand {
  background: #fff;
  color: #0f172a;
}

@media (max-width: 420px) {
  .einwilligung__knoepfe {
    flex-direction: column;
  }
}