/* Einwilligungsbanner. Bewusst zurueckhaltend: unten links als Karte, kein
   bildschirmfuellender Vorhang. Wer nichts anklickt, bekommt trotzdem nichts
   gesetzt - der Zwang zur Entscheidung ist also unnoetig. */
.ew {
  position: fixed; z-index: 200; left: 20px; bottom: 20px; right: 20px;
  max-width: 480px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.ew.ew-da { opacity: 1; transform: none; }
.ew-karte {
  background: #FAF8F4; color: #0E0B16;
  border: 1px solid rgba(14,11,22,.14); border-radius: 20px;
  padding: 24px 24px 18px;
  box-shadow: 0 24px 60px rgba(14,11,22,.24);
  font: 15px/1.6 'Inter', system-ui, sans-serif;
}
.ew-karte h2 {
  font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 8px;
}
.ew-karte p { margin: 0; color: rgba(14,11,22,.72); font-size: .93rem; }

.ew-details { display: grid; gap: 4px; margin: 18px 0 4px;
  border-top: 1px solid rgba(14,11,22,.12); padding-top: 14px; }
/* Ohne diese Zeile setzt sich display:grid gegen das hidden-Attribut durch
   und der Detailbereich stuende von Anfang an offen. */
.ew-details[hidden] { display: none; }
.ew-zweck { display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; padding: 9px 0; cursor: pointer; }
.ew-zweck.ew-fest { cursor: default; opacity: .72; }
.ew-zweck input { width: 19px; height: 19px; margin-top: 2px; accent-color: #06A19C; }
.ew-zweck b { display: block; font-weight: 600; font-size: .92rem; }
.ew-zweck b i { font-style: normal; font-weight: 400; font-size: .78rem;
  color: rgba(14,11,22,.5); }
.ew-zweck small { display: block; color: rgba(14,11,22,.62); font-size: .84rem;
  line-height: 1.5; margin-top: 2px; }

/* Beide Entscheidungen gleich gross und gleich auffaellig. Das ist keine
   Geschmacksfrage - eine hervorgehobene Zustimmung neben einem blassen
   Ablehnen gilt als unwirksame Einwilligung. */
.ew-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 18px; align-items: center; }
.ew-btn {
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  padding: 13px 16px; border-radius: 999px;
  border: 1px solid #0E0B16; background: #FAF8F4; color: #0E0B16;
  transition: background .2s, color .2s;
}
.ew-btn[data-tun="alles"], .ew-btn[data-tun="auswahl"] { background: #0E0B16; color: #FAF8F4; }
.ew-btn:hover { background: #0E0B16; color: #FAF8F4; }
.ew-btn[data-tun="alles"]:hover, .ew-btn[data-tun="auswahl"]:hover { opacity: .88; }
.ew-btn:focus-visible, .ew-mehr:focus-visible { outline: 2px solid #06A19C; outline-offset: 3px; }
.ew-mehr {
  grid-column: 1 / -1; justify-self: start;
  font: inherit; font-size: .86rem; cursor: pointer;
  background: none; border: 0; padding: 4px 0; color: rgba(14,11,22,.62);
  border-bottom: 1px solid rgba(14,11,22,.28);
}
.ew-mehr:hover { color: #0E0B16; border-bottom-color: #0E0B16; }

.ew-fuss { margin-top: 14px !important; font-size: .8rem !important;
  color: rgba(14,11,22,.5) !important; }
.ew-fuss a { color: inherit; }

@media (max-width: 560px) {
  .ew { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ew-karte { padding: 20px 18px 16px; border-radius: 18px; }
  .ew-knoepfe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ew { transition: none; } }