/* einwilligung.css — eigener Einwilligungsbanner
   Gehoert zu src/js/einwilligung.js.

   Zwei Ansichten. Beim Aufschlagen nur die Frage und zwei Knoepfe — mehr
   braucht niemand, um zu entscheiden. Wer "Einstellungen" antippt, bekommt
   die Kategorien; die Cookie-Listen sitzen darin nochmal hinter einer
   Klapp-Zeile. Sie muessen auffindbar sein, nicht ausgebreitet.

   Eigene Farben stehen hier keine — alles kommt aus den Tokens in
   style.css: weisser Grund, schwarze Kontur, Pastellfuellung auf dem
   zustimmenden Knopf, Prompt fuer die Ueberschrift, Open Sans fuer den Text. */


/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne diese Zeile
   steht der Speichern-Knopf schon da, bevor es etwas zu speichern gibt —
   genau das ist hier zweimal passiert. */
.ew [hidden] { display: none !important; }

/* Der Banner haengt im body und erbt sonst die Abstandsregeln der Seite —
   section bekommt dort 70px Polsterung, p einen eigenen Aussenabstand.
   Beides muss hier ausgeschaltet sein, sonst reisst es den Kasten auf.
   :where() zaehlt nicht in die Spezifitaet, deshalb schlagen die eigenen
   Klassen weiter unten diese Regel trotzdem. */
.ew :where(section, p, table, details, h2) { margin: 0; padding: 0; }

/* Kein Vorhang ueber der Seite. Der Banner sitzt unten, die Seite bleibt
   sichtbar, scrollbar und anklickbar — auch fuer Screenreader und fuer
   Agenten, die die Seite lesen. pointer-events wandert deshalb erst im
   Kasten wieder an; der Rest dieser Flaeche laesst Klicks durch. */
.ew {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
@media (min-width: 40rem) {
  .ew { padding: var(--padding-24, 1.5rem); }
}
@keyframes ew-kasten {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.ew__kasten {
  pointer-events: auto;
  width: 100%;
  max-width: 48rem;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  background: var(--white-main, #fff);
  color: var(--black-main, #000);
  border: 1px solid var(--black-main, #000);
  border-radius: 14px 14px 0 0;
  padding: 1.5rem 1.375rem 1.25rem;
  box-shadow: 0 -8px 40px -12px rgba(12, 14, 18, 0.45);
  font-family: var(--font-base, "Open Sans", sans-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  animation: ew-kasten 0.22s ease-out;
  transition: max-width 0.2s ease;
}
@media (min-width: 40rem) {
  .ew__kasten {
    border-radius: 14px;
    padding: 1.875rem 1.875rem 1.5rem;
    max-height: calc(100dvh - 3rem);
    box-shadow: 0 24px 64px -20px rgba(12, 14, 18, 0.5);
  }
}

/* Geschlossen nutzt der Kasten die Breite: Text links, Knoepfe rechts.
   Aufgeklappt faellt er in die gestapelte Fassung zurueck, weil die
   Kategorien sonst quer ueber die ganze Breite laufen wuerden. */
@media (min-width: 52rem) {
  .ew__kasten:not(.ew__kasten--auf) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titel knoepfe"
      "text  knoepfe"
      "fuss  fuss";
    column-gap: 2.5rem;
    align-items: center;
  }
  .ew__kasten:not(.ew__kasten--auf) .ew__titel { grid-area: titel; align-self: end; }
  .ew__kasten:not(.ew__kasten--auf) .ew__text { grid-area: text; margin-bottom: 0; align-self: start; }
  .ew__kasten:not(.ew__kasten--auf) .ew__knoepfe { grid-area: knoepfe; }
  .ew__kasten:not(.ew__kasten--auf) .ew__fuss { grid-area: fuss; }
}

.ew__titel {
  font-family: var(--font-headline, "Prompt", sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.ew__text {
  margin: 0 0 1.25rem;
  color: #333;
  max-width: 44ch;
}

/* ---- Auswahl ----
   display kommt erst mit .ew__wahl--auf. Stuende hier display:grid, wuerde
   es das hidden-Attribut ueberstimmen und die Auswahl waere immer offen. */
.ew__wahl { display: none; }
.ew__wahl--auf {
  display: grid;
  max-width: 44rem;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #e8eaec;
}

/* Die Bloecke sind <section>. Die Seite gibt jedem section 70px Polsterung
   oben und unten mit — das reisst hier Loecher zwischen die Kategorien.
   Deshalb die Polsterung vollstaendig setzen, nicht nur oben. */
.ew__block {
  padding: 0.875rem 0 0;
  margin: 0;
  border-top: 1px solid #e8eaec;
}
.ew__block:first-child { border-top: 0; padding-top: 0.5rem; }

.ew__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-headline, "Prompt", sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
}
/* #6b7075 statt #767b80: gemessen 5,00:1 gegen Weiss. Der alte Wert lag bei
   4,27:1 und verfehlte damit den WCAG-AA-Wert von 4,5:1 fuer kleinen Text. */
.ew__immer {
  font-family: var(--font-base, "Open Sans", sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7075;
  white-space: nowrap;
}
.ew__schalter { display: inline-flex; align-items: center; gap: 0.5625rem; cursor: pointer; }
.ew__schalter input {
  width: 1rem; height: 1rem;
  accent-color: var(--black-main, #000);
  cursor: pointer;
}
.ew__klein {
  margin: 0.3125rem 0 0.4375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #55595e;
  max-width: 52ch;
}

/* ---- Cookie-Liste, eingeklappt ---- */
.ew__liste { margin-bottom: 0.125rem; }
.ew__liste summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: #6b7075;
  padding: 0.125rem 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
}
.ew__liste summary::-webkit-details-marker { display: none; }
.ew__liste summary::before {
  content: "›";
  display: inline-block;
  margin-right: 0.4375rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.ew__liste[open] summary::before { transform: rotate(90deg); }
.ew__liste summary:hover { color: var(--black-main, #000); }
.ew__liste summary:focus-visible { outline: 2px solid var(--black-main, #000); outline-offset: 3px; border-radius: 2px; }

.ew__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-top: 0.4375rem;
}
.ew__tabelle th {
  text-align: left;
  font-weight: 600;
  color: #6b7075;
  padding: 0.25rem 0.625rem 0.25rem 0;
  border-bottom: 1px solid #e8eaec;
}
.ew__tabelle td {
  padding: 0.3125rem 0.625rem 0.3125rem 0;
  vertical-align: top;
  color: #55595e;
  border-bottom: 1px solid #f1f2f4;
}
.ew__tabelle tr:last-child td { border-bottom: 0; }
.ew__tabelle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.71875rem;
  color: var(--black-main, #000);
  white-space: nowrap;
}

/* ---- Knoepfe ----
   Ablehnen und Annehmen sind gleich gross, gleich hoch, gleich umrandet.
   Nur die Fuellung unterscheidet sie. Eine hervorgehobene Zustimmung neben
   einer versteckten Ablehnung gilt als unwirksame Einwilligung. */
.ew__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.ew__knopf {
  flex: 1 1 8.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base, "Open Sans", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8125rem 1rem;
  border: 1px solid var(--black-main, #000);
  border-radius: 8px;
  background: var(--white-main, #fff);
  color: var(--black-main, #000);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, transform 0.16s ease;
}
.ew__knopf[data-tun="ablehnen"]:hover { background: var(--grey-light, #f4f5f6); }
.ew__knopf[data-tun="alle"] { background: var(--blue-main, #9adcf7); }
.ew__knopf[data-tun="alle"]:hover { background: var(--blue-hover, #b8ecff); }
.ew__knopf--voll { width: 100%; margin-top: 0.625rem; }
.ew__knopf--voll:hover { background: var(--grey-light, #f4f5f6); }
.ew__knopf:active { transform: translateY(1px); }
.ew__knopf:focus-visible { outline: 2px solid var(--black-main, #000); outline-offset: 3px; }

/* ---- Fuss: die leisen Wege ---- */
.ew__fuss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
}
.ew__punkt { color: #b9bdc2; }
.ew__link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: #55595e;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: #c3c7cc;
}
.ew__fuss a {
  color: #55595e;
  text-underline-offset: 0.22em;
  text-decoration-color: #c3c7cc;
}
.ew__link:hover,
.ew__fuss a:hover { color: var(--black-main, #000); text-decoration-color: currentColor; }
.ew__link:focus-visible,
.ew__fuss a:focus-visible { outline: 2px solid var(--black-main, #000); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ew__kasten { animation: none; }
  .ew__kasten, .ew__knopf, .ew__liste summary::before { transition: none; }
}

/* ---- Widerruf im Fussbereich ----
   Art. 7 Abs. 3 DSGVO: der Widerruf muss so einfach sein wie die Zustimmung.
   Der Knopf sieht deshalb genauso aus wie die Links daneben — Schriftart,
   Groesse, Farbe und Verhalten kommen aus .footer-legal a. */
.footer-legal__einwilligung {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white-main, #fff);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-legal__einwilligung:hover { opacity: 0.6; }
.footer-legal__einwilligung:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }