/* ==========================================================================
   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.35rem 1.15rem;
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
    max-height: 90dvh;
  }
}

/* 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;
}

@media (max-width: 640px) {
  .wm-ew__knoepfe { grid-template-columns: 1fr; }
}

.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);
}

/* 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; }
}