/* ==========================================================================
   Einwilligung (Cookie-Banner)
   Aufbau nach dem Vorbild von webseitenupgrade.de: breite Karte am unteren
   Rand, drei gleichwertige Schaltflächen, Detailansicht mit vier Kategorien
   als eigene Kästen samt Rechtsgrundlage.
   Eigenständige Datei mit eigenen Farbwerten, damit sie unverändert auf der
   Hauptseite und auf der Landingpage läuft.
   ========================================================================== */

.wm-ew {
  --ew-navy: #16325c;
  --ew-navy-dunkel: #102138;
  --ew-gold: #d3a04a;
  --ew-gold-dunkel: #b8842f;
  --ew-tinte: #101828;
  --ew-text: #475467;
  --ew-leise: #667085;
  --ew-linie: #e4e7ec;
  --ew-flaeche: #ffffff;
  --ew-flaeche-alt: #f6f8fb;
  --ew-radius: 12px;
  --ew-schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  position: fixed;
  z-index: 2147483000;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 680px;

  box-sizing: border-box;
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--ew-flaeche);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.24),
    0 2px 6px rgba(16, 24, 40, 0.08);

  font-family: var(--ew-schrift);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ew-text);

  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wm-ew *,
.wm-ew *::before,
.wm-ew *::after { box-sizing: border-box; }

/* Auf dem Handy als Blatt von unten, volle Breite, oben abgerundet */
@media (max-width: 720px) {
  .wm-ew {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding: 1.05rem 1.05rem;
    padding-bottom: calc(0.95rem + env(safe-area-inset-bottom));
    max-height: 90dvh;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .wm-ew__titel { font-size: 1.05rem; margin-bottom: 0.35rem; }
  .wm-ew__text { margin-bottom: 0.9rem; }
}

/* Auf dem Handy die knappe Fassung des Hinweistextes, ab Tablet die lange. */
.wm-ew__kurz { display: none; }
@media (max-width: 720px) {
  .wm-ew__kurz { display: inline; }
  .wm-ew__lang { display: none; }
}

/* Solange gefragt wird, tritt die untere Kontaktleiste zurück */
body.wm-ew-offen .mobile-bar,
body.wm-ew-offen .mobilebar,
body.wm-ew-offen .sticky-cta { display: none !important; }

.wm-ew__titel {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ew-tinte);
  letter-spacing: -0.01em;
}

.wm-ew__text { margin: 0 0 1.25rem; }

.wm-ew__text a {
  color: var(--ew-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wm-ew__text a:hover { color: var(--ew-gold-dunkel); }

/* --- Kategorien ---------------------------------------------------------- */

.wm-ew__zwecke {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.wm-ew__zweck {
  padding: 0.9rem 1rem;
  border-radius: var(--ew-radius);
  background: var(--ew-flaeche-alt);
  border: 1px solid var(--ew-linie);
}

.wm-ew__zweck-kopf {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.wm-ew__zweck-name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ew-tinte);
  min-width: 0;
}

.wm-ew__zweck-info {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ew-text);
}

.wm-ew__zweck-recht {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ew-leise);
}

/* --- Schalter ------------------------------------------------------------- */

.wm-ew__schalter {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 27px;
}

.wm-ew__schalter input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wm-ew__spur {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #cbd2dc;
  transition: background-color 0.18s ease;
  pointer-events: none;
}

.wm-ew__spur::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  transition: transform 0.18s ease;
}

.wm-ew__schalter input:checked ~ .wm-ew__spur { background: var(--ew-navy); }
.wm-ew__schalter input:checked ~ .wm-ew__spur::after { transform: translateX(19px); }

.wm-ew__schalter input:focus-visible ~ .wm-ew__spur {
  outline: 2px solid var(--ew-navy);
  outline-offset: 3px;
}

.wm-ew__schalter input:disabled { cursor: default; }

.wm-ew__schalter input:disabled ~ .wm-ew__spur {
  background: var(--ew-navy);
  opacity: 0.4;
}

/* --- Schaltflächen -------------------------------------------------------- */

.wm-ew__knoepfe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.wm-ew__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--ew-radius);
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(22, 50, 92, 0.12);
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.wm-ew__btn:hover { transform: translateY(-1px); }
.wm-ew__btn:active { transform: translateY(0); }

.wm-ew__btn:focus-visible {
  outline: 2px solid var(--ew-navy);
  outline-offset: 3px;
}

/* Annehmen und Ablehnen sind bewusst gleich groß und gleich kräftig:
   eine Ablehnung darf nicht schwerer zu finden sein als eine Zustimmung. */
.wm-ew__btn--ja { background: var(--ew-gold); color: #1c1205; }
.wm-ew__btn--ja:hover { background: var(--ew-gold-dunkel); color: #ffffff; }

.wm-ew__btn--haupt { background: var(--ew-navy); color: #ffffff; }
.wm-ew__btn--haupt:hover { background: var(--ew-navy-dunkel); }

.wm-ew__btn--still {
  background: transparent;
  border-color: var(--ew-linie);
  color: var(--ew-text);
}

.wm-ew__btn--still:hover {
  background: var(--ew-flaeche-alt);
  border-color: #cbd2dc;
  color: var(--ew-tinte);
}

/* Handy: Knopfreihe kompakt. Steht bewusst hinter den Grundregeln,
   sonst ueberschreiben diese die Anpassung wieder. */
@media (max-width: 640px) {
  .wm-ew__knoepfe { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .wm-ew__btn { min-height: 48px; font-size: 0.9rem; padding: 0.6rem 0.5rem; }

  /* Die beiden gleichwertigen Knoepfe teilen sich die Zeile, die Feinauswahl
     steht als ruhige Zeile darunter und kostet kaum Hoehe. */
  .wm-ew__btn--still {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0.4rem;
    border: 0;
    background: none;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ew-leise);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .wm-ew__btn--still:hover { background: none; color: var(--ew-tinte); }

  /* In der Detailansicht bleibt es bei einer Spalte: dort zaehlt Klarheit
     mehr als Hoehe, der Kasten ist ohnehin scrollbar. */
  .wm-ew__knoepfe--detail { grid-template-columns: 1fr; }
}

/* Auslöser im Seitenfuß, damit die Wahl jederzeit änderbar bleibt.
   Beide Seitenfüße sind dunkel, deshalb dieselbe gedämpfte Schrift wie
   bei den Links daneben. */
.wm-ew-ausloeser {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.wm-ew-ausloeser:hover { color: #ffffff; }

.wm-ew-ausloeser:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wm-ew__btn,
  .wm-ew__spur,
  .wm-ew__spur::after { transition: none; }
  .wm-ew__btn:hover { transform: none; }
}