/* ===========================================================================
   Einwilligungs-Banner
   ---------------------------------------------------------------------------
   Sitzt unten und deckt die Seite nicht ab. Kein dunkler Schleier, keine
   Sperre: Wer nichts anklickt, kann trotzdem lesen und buchen. Ein Banner,
   der die Seite blockiert, erzwingt Zustimmung — und eine erzwungene
   Einwilligung ist nach Art. 4 Nr. 11 DSGVO keine.

   Beide Knöpfe sind gleich groß und gleich auffällig. »Einverstanden« ist
   gefüllt, »Nein, danke« umrandet — der Unterschied liegt in der Fläche,
   nicht in der Größe. Ein winziges »Nein« neben einem großen »Ja« ist der
   Klassiker, den die Aufsichtsbehörden abmahnen.
=========================================================================== */

.ew-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 0 var(--rand, 1.25rem) max(1rem, env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform .34s var(--auf, cubic-bezier(.22, 1, .36, 1));
  pointer-events: none;
}
.ew-banner.da { transform: translateY(0); }

.ew-innen {
  pointer-events: auto;
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--creme, #FCFAF6);
  border: 1px solid var(--linie-stark, #CFC3AC);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 40px rgba(43, 38, 33, .13);
}

.ew-text { flex: 1 1 22rem; min-width: 0; }

.ew-titel {
  margin: 0 0 .3rem;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--espresso, #2B2621);
}

.ew-satz {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  /* Eine Stufe dunkler als --tinte-leise (das hielte 5,81 auf Creme und
     würde reichen). Bei .88rem ist mehr Reserve richtig: Der Satz ist der
     eigentliche Inhalt des Banners, nicht die Überschrift. 7,45 auf Creme. */
  color: #5A5148;
}
.ew-satz a { color: var(--gold-tief, #7E6431); text-underline-offset: .18em; }

.ew-knoepfe {
  flex: 0 0 auto;
  display: flex;
  gap: .6rem;
}

.ew-knopf {
  font-family: var(--grotesk, sans-serif);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1;
  padding: .78rem 1.25rem;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--weich, ease), border-color .16s var(--weich, ease);
}
.ew-knopf:focus-visible {
  outline: 2px solid var(--gold-tief, #7E6431);
  outline-offset: 2px;
}

.ew-ja {
  background: var(--espresso, #2B2621);
  color: var(--creme, #FCFAF6);
  border: 1px solid var(--espresso, #2B2621);
}
.ew-ja:hover { background: var(--nacht, #16120E); border-color: var(--nacht, #16120E); }

.ew-nein {
  background: transparent;
  color: var(--espresso, #2B2621);
  border: 1px solid var(--linie-stark, #CFC3AC);
}
.ew-nein:hover { background: var(--creme-2, #F5F0E7); border-color: var(--espresso, #2B2621); }

@media (max-width: 34rem) {
  .ew-innen { padding: 1rem 1.1rem; gap: .9rem; }
  .ew-knoepfe { width: 100%; }
  .ew-knopf { flex: 1 1 0; padding: .82rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ew-banner { transition: none; }
}