/* ============================================================
   Cookie-Banner  ·  Optionaler Drop-in-Baustein
   ------------------------------------------------------------
   Dezente Karte unten links. Nutzt dieselben Token-Fallbacks wie
   barrierefreiheit.css. Auf schmalen Schirmen wird das Banner breit
   und die schwebenden Knöpfe (falls vorhanden) werden solange
   ausgeblendet, damit sich nichts überlappt.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1300;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--a11y-surface, #fff);
  border: 1px solid var(--a11y-line, var(--line, #d9e3dc));
  border-radius: var(--a11y-radius, var(--r-lg, 1rem));
  box-shadow: 0 24px 60px -20px rgba(20, 40, 30, 0.45);
  padding: 1.5rem;
  font-family: var(--a11y-font, var(--font-body, system-ui, sans-serif));
  color: var(--a11y-ink, var(--ink, #16201b));
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.cookie-banner[data-open] { opacity: 1; transform: none; pointer-events: auto; }
.cookie-title {
  font-family: var(--a11y-font-display, var(--font-display, inherit));
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.cookie-text {
  font-size: 0.9375rem;
  color: var(--a11y-ink-soft, var(--ink-soft, #45514a));
  line-height: 1.6;
  margin: 0 0 1rem;
}
.cookie-text a { color: var(--a11y-accent, var(--accent, #166e4b)); text-decoration: underline; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* Fallback-Buttons, falls das Projekt keine eigene .btn-Klasse hat.
   Nutzt das Projekt .btn / .btn-primary, überschreiben dessen Regeln
   diese hier problemlos (gleiche Elemente, projektseitige Spezifität). */
.cookie-actions .cookie-btn {
  font: inherit;
  padding: 0.6rem 1rem;
  border-radius: var(--a11y-radius-sm, var(--r-sm, 0.5rem));
  border: 1px solid var(--a11y-line, #d9e3dc);
  background: var(--a11y-bg, #fafcfa);
  color: var(--a11y-ink, #16201b);
  cursor: pointer;
}
.cookie-actions .cookie-btn--primary {
  background: var(--a11y-accent, #166e4b);
  border-color: var(--a11y-accent, #166e4b);
  color: #fff;
}

/* Wiederaufruf-Link (z. B. im Footer): sieht aus wie ein Textlink. */
.cookie-settings-link {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.cookie-settings-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .cookie-banner { left: 1rem; right: 1rem; width: auto; }
  html.cookie-open .a11y-to-top,
  html.cookie-open .a11y-fab { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity .2s ease; }
}