/* ==========================================================================
   Cookie-Hinweis.
   Schwebt unten mittig und lässt links (A11y-Widget) sowie rechts
   (Termin-Badge) Platz.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 960;
  /* Seitlich bleiben mindestens 6rem je Seite frei -- so viel brauchen
     die eingeklappten runden Knoepfe links und rechts. Dadurch muss
     keiner von beiden ausweichen. */
  width: min(42rem, calc(100vw - 12rem));

  /* Der farbige Streifen ist eine Hintergrundebene, kein eigenes
     Element. Dadurch folgt er dem border-radius von selbst -- als
     ::before lag er entweder über der Rundung oder es blieb an den
     Ecken ein heller Rand daneben stehen. */
  background:
    linear-gradient(90deg, var(--color-orange), var(--color-red))
      top left / 100% 3px no-repeat,
    var(--color-white);

  /* Weder border noch Kontur-Ring: beide liegen über bzw. um den
     Kasten herum und damit auch über dem farbigen Streifen -- genau
     der helle Rand, der dort zu sehen war. Die Abgrenzung übernimmt
     allein der weiche Schatten. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);

  opacity: 0;
  transform: translate(-50%, 1.5rem);
  transition: opacity .3s ease, transform .3s ease;
}

.cookie-banner.ist-sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Nach dem Bestätigen bleibt der Banner im DOM, damit ihn der Knopf im
   Footer wieder öffnen kann -- [hidden] nimmt ihn so lange komplett aus
   dem Bild. */
.cookie-banner[hidden] { display: none; }

.cookie-banner-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  /* Etwas mehr Abstand oben, damit der Text nicht am Streifen klebt. */
  padding: 1.1rem 1.25rem 1rem;
}

.cookie-banner-text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: var(--color-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cookie-banner-knopf {
  flex: 0 0 auto;
  padding: .7em 1.5em;
  font-size: .9rem;
}

/* Der Knopf im Footer sieht aus wie die Links daneben -- er steht in
   derselben Reihe und soll dort nicht als Schaltfläche herausfallen.
   Schrift, Farbe und Rahmen nimmt ihm schon der globale button-Reset in
   styles.css ab; hier bleibt nur die Innenabstand-Vorgabe des Browsers. */
.cookie-einstellungen { padding: 0; }
.cookie-einstellungen:hover { color: var(--color-orange); }

/* Die Knöpfe links und rechts weichen NICHT aus – sie legen
   stattdessen ihren Text ab und werden rund, sobald es eng wird
   (siehe styles.css und a11y-widget.css, Schwelle 1250px). Damit
   bleiben sie immer an derselben Stelle stehen.

   Einzige Ausnahme ist ganz schmal, siehe unten. */

@media (max-width: 620px) {
  .cookie-banner {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
    transform: translateY(1.5rem);
  }
  .cookie-banner.ist-sichtbar { transform: translateY(0); }
  .cookie-banner-knopf { width: 100%; }

  /* Unter 620px nimmt der Hinweis fast die volle Breite ein, da ist
     auch für runde Knöpfe kein Platz mehr. Sie treten für den einen
     Moment zurück und sind wieder da, sobald der Hinweis bestätigt
     ist. Verschieben würde sie nur mitten in den Inhalt setzen. */
  body.hat-cookie-banner .termin-badge,
  body.hat-cookie-banner .a11y-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity .3s ease; }
}