/* =====================================================================
   Cookie-Banner · Gestaltung
   ---------------------------------------------------------------------
   Farben laufen über Variablen mit Rückfallwert. In einem anderen
   Projekt nur die vier --cookie-*-Werte überschreiben, der Rest passt.
   ===================================================================== */
.cookie {
  --cookie-bg:     var(--paper, #FBF8F4);
  --cookie-ink:    var(--cocoa, #5C4A3D);
  --cookie-accent: var(--petrol, #2E4A4F);
  --cookie-line:   var(--rule, rgba(31, 27, 23, 0.10));

  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vw, 28px);
  z-index: 200;
  width: min(620px, calc(100% - 32px));

  /* Der Weg nach unten muss auch den groesseren Abstand aus der
     780px-Regel raeumen (dort haelt der Banner Platz fuer die
     Anruf-Leiste). visibility und pointer-events sind der Riegel
     davor, dass ein weggeklickter Banner noch Klicks abfaengt. */
  transform: translateX(-50%) translateY(calc(100% + 160px));
  transition: transform .55s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear .55s;
  visibility: hidden;
  pointer-events: none;

  background: var(--cookie-bg);
  border: 1px solid var(--cookie-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(31, 27, 23, 0.16);
  padding: clamp(18px, 2.5vw, 24px);
}
.cookie.is-in {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1),
              visibility 0s;
}

.cookie__text {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--cookie-ink);
  margin: 0 0 16px;
}
.cookie__text a {
  color: var(--cookie-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.cookie__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* Beide Optionen sind gleich gut erreichbar. Ein versteckter oder
   ausgegrauter Ablehnen-Button ist nach DSGVO angreifbar. */
.cookie__btn--ghost {
  background: transparent;
  color: var(--cookie-ink);
  border-color: var(--cookie-line);
}
.cookie__btn--ghost:hover { border-color: var(--cookie-accent); color: var(--cookie-accent); }

.cookie__btn--solid {
  background: var(--cookie-accent);
  color: var(--cookie-bg);
}
.cookie__btn--solid:hover { filter: brightness(1.15); }

@media (max-width: 520px) {
  .cookie__actions { flex-direction: column-reverse; }
  .cookie__btn { width: 100%; }
}
/* Auf Mobil sitzt bei Timo unten die Anruf-Leiste, das Banner muss darüber */
@media (max-width: 780px) {
  .cookie { bottom: calc(84px + 16px + env(safe-area-inset-bottom)); }
}

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