/* cookie-banner.css 
   Angepasst an das Musikverein-Theme:
   - Theme-Spacing-Scale (--value-*) statt nicht existenter --xl/--s
   - Markenfarben: --blue-dark / --beige / --blue / --coral
   - Banner dunkelblau/beige, Buttons als beige Pills, Settings als Textlink

   ÄNDERUNG 2026-08-17 – Barrierefreiheit B2, Befund C1/G14:
   Der geschlossene Einstellungsdialog blieb in der Tab-Reihenfolge. Grund war
   die bewusste Ausnahme in `#ccp-modal.ccp-hidden` (display:flex statt none,
   damit das Fade funktioniert) – `opacity:0` nimmt ein Element aber weder aus
   der Tab-Reihenfolge noch aus dem Accessibility-Baum. Gemessen: 5 Bedien-
   elemente auf Tab-Position 83–87, Fokus verschwand in einen unsichtbaren
   Dialog, Screenreader lasen den Inhalt mit.
   Lösung: `visibility` mitschalten und in die Transition aufnehmen. Damit
   bleibt das Fade erhalten (visibility springt diskret am Ende), das Element
   ist im geschlossenen Zustand aber vollständig entkoppelt.
   Dasselbe für den Banner, dort als Härtung – siehe Kommentar unten.
*/

/* ---------------------------
   BANNER
   --------------------------- */
#ccp-banner {
  position: fixed;
  bottom: 0;
  right: var(--value-xl);
  left: auto;
  z-index: 9999;
  color: var(--beige);
  background-color: var(--blue-dark);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  max-width: 450px;
  padding: var(--value-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  transform: translateY(0);
  /* visibility mit Verzögerung statt Dauer – gleiche Begründung wie beim Modal:
     beim Ausblenden erst nach dem Fade auf hidden, beim Einblenden sofort. */
  transition: transform 0.6s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
  opacity: 0;
  pointer-events: none;
  /* HÄRTUNG: `#ccp-banner` hat display:flex !important mit ID-Spezifität und
     gewinnt damit gegen `.ccp-hidden { display:none !important }`. Der Banner
     ist also nie über diese Klasse ausgeblendet – zwischen Seitenaufbau und
     dem Zeitpunkt, an dem cookie-banner.js `.is-ready` setzt bzw. das Element
     entfernt, waren seine drei Schaltflächen unsichtbar fokussierbar.
     visibility schließt dieses Fenster. */
  visibility: hidden;
}

#ccp-banner button {
  box-shadow: unset;
  border: unset;
}
#ccp-banner button:hover {
  cursor: pointer;
}

#ccp-banner.is-ready {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.6s ease, opacity 0.4s ease, visibility 0s linear 0s;
}

#ccp-banner.slide-out {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#ccp-banner h3 {
  font-size: var(--value-r);
  text-align: center;
  color: var(--beige);
}

#ccp-banner p,
p.ccp-modal__text {
  hyphens: unset;
  margin-bottom: var(--value-m);
  line-height: 1.4;
  font-size: var(--value-s);
}

#ccp-banner p {
  text-align: center;
  color: var(--beige);
}

/* ---------------------------
   BUTTONS
   --------------------------- */
.ccp-buttons {
  display: flex;
  gap: var(--value-xs);
  justify-content: center;
  margin-top: var(--value-l);
  flex-wrap: wrap;
}

/* Banner-Buttons (Ablehnen / Akzeptieren / Einstellungen) nutzen die
   Theme-Utility-Klassen (button-big, bg-beige, t-blue, w-100, bg-blue-dark …),
   die cookie-banner.js setzt — identisches Aussehen UND Responsive-Verhalten
   wie das Live-Banner. Bewusst KEIN #id-Styling hier, damit die Theme-Klassen
   greifen. */

/* Modal-Save hat kein Theme-Pendant — als blauer Pill auf beigem Panel. */
#ccp-save-settings {
  background-color: var(--blue) !important;
  color: var(--beige) !important;
  font-family: "Founder-condensed-semibold", sans-serif;
  font-weight: 500;
  font-size: var(--value-s);
  padding: var(--value-xs) var(--value-xl);
  border: none;
  border-radius: 48px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  text-transform:uppercase;
}

#ccp-save-settings:hover {
  background-color: var(--coral) !important;
  color: var(--beige) !important;
}

/* Global hidden helper */
.ccp-hidden {
  display: none !important;
}

@media (max-width: 576px) {
  #ccp-banner {
    left: 0;
    right: 0;
    max-width: 100%;
  }
}

/* ---------------------------
   MODAL (FIXED + FADE)
   --------------------------- */
#ccp-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 11 73 / 70%); /* blue-dark tint */
  z-index: 10000;

  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* KRITISCH – visibility mit Verzögerung, nicht mit Dauer.
     `visibility 250ms` (erste Fassung) kippt erst bei ~50 % der Transition auf
     visible. cookie-banner.js setzt den Fokus aber schon im nächsten Frame
     (~16 ms, requestAnimationFrame in openModal), und ein Element mit
     visibility:hidden kann keinen Fokus annehmen – .focus() schlug still fehl,
     der Fokus blieb auf <body>.
     Richtig ist die Delay-Variante:
       geschlossen (hier): Wechsel nach 250 ms → bleibt während des Ausblendens
                           sichtbar, das Fade ist vollständig zu sehen
       offen (.is-open):   Wechsel mit 0 s Delay → sofort sichtbar, Fokus greift */
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

/* CRITICAL:
   override .ccp-hidden display:none for the modal ONLY,
   so it can fade (still not clickable / not visible).

   2026-08-17: `visibility: hidden` ergänzt. Ohne das blieb der geschlossene
   Dialog trotz opacity:0 fokussierbar und für Screenreader lesbar (Befund
   C1/G14). visibility nimmt ihn aus Tab-Reihenfolge UND Accessibility-Baum,
   ohne das Fade zu zerstören – anders als display:none. */
#ccp-modal.ccp-hidden {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* KEIN Delay hier – und das ist wichtig.
     cookie-banner.js setzt .ccp-hidden erst NACH dem Ausblenden (setTimeout
     FADE_MS in closeModal). Zu diesem Zeitpunkt ist das Fade vorbei, die
     Verzögerung wäre also nicht nur unnötig, sondern schädlich: sie würde das
     Entfernen aus Tab-Reihenfolge und Accessibility-Baum an das Durchlaufen
     einer Transition koppeln. Läuft die nicht – Hintergrund-Tab, deaktivierte
     Animationen, Druckansicht – bliebe der geschlossene Dialog fokussierbar,
     also genau der Befund C1 wieder.
     Mit `transition: none` greift visibility:hidden sofort und unabhängig
     von jeder Animation. Das weiche Ausblenden liefert die Basisregel. */
  transition: none;
}

#ccp-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  /* Delay 0 s: beim Öffnen sofort sichtbar, damit der Fokus im nächsten
     Frame greifen kann (siehe Kommentar an der Basisregel). */
  transition: opacity 250ms ease, visibility 0s linear 0s;
}

.ccp-modal__panel {
  background: var(--beige);
  color: var(--blue);
  padding: var(--value-xl);
  max-width: 600px;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin: var(--value-xl);
}

.ccp-modal__panel h3 {
  font-size: var(--value-r);
  color: var(--blue);
  margin-bottom: var(--value-s);
}

.ccp-modal__text {
  color: var(--blue);
  text-align: left;
}

/* ---------------------------
   REOPEN-BUTTON (Cookie-Einstellungen erneut öffnen)
   --------------------------- */
.ccp-reopen {
  position: fixed;
  bottom: var(--value-xxl);
  left: var(--value-xxl);
  z-index: 9998;
  width: 3rem;
  height: 3rem;
  /* Hidden until consent has been set; JS adds .is-visible. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--value-r);
  line-height: 1;
  color: var(--beige);
  background-color: var(--blue-dark);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.ccp-reopen.is-visible {
  display: flex;
}

/* Cookie-Trigger als dritter Eintrag im Language-Switcher.
   Form/Größe/Farbe kommen aus `.language-switcher li a` des Themes: helles
   Pill (var(--beige)) wie die Sprach- und Spielplan-Pills, volle Deckkraft.
   Hover wird vom gemeinsamen `.language-switcher li a:hover` (Coral) gesteuert.
   Breite gleicht das JS an (Padding). Cursor, da der <a> bewusst kein href hat. */
.language-switcher a.ccp-reopen-link {
  background-color: var(--beige);
  opacity: 1;
  cursor: pointer;
}

.ccp-reopen:hover {
  transform: scale(1.05);
  background-color: var(--blue-dark);
}

/* Fokus-Ring: seit T2 (2026-08-17) liefert der zentrale
   `:where(...):focus-visible`-Block in mv-a11y-nav.css den Ring für ALLE
   Bedienelemente, auch für die Banner- und Modal-Schaltflächen, die hier
   nie eigene Fokus-Stile hatten. Diese Einzelregel bleibt als bewusster
   Sonderfall stehen (Beige auf Dunkelblau, 2 px) – sie ist spezifischer und
   gewinnt gegen den :where()-Block. */
.ccp-reopen:focus-visible {
  outline: 2px solid var(--beige);
  outline-offset: 2px;
}

.ccp-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--value-xs);
  margin: var(--value-m) 0;
}

.ccp-toggle {
  display: flex;
  align-items: center;
  gap: var(--value-xs);
  font-size: var(--value-s);
  color: var(--blue);
}

.ccp-toggle input[type="checkbox"] {
  width: var(--value-s);
  height: var(--value-s);
  cursor: pointer;
  accent-color: var(--blue);
}

.ccp-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modal-buttons {
  justify-content: flex-start;
}

/* Close = Textlink */
.ccp-close {
  flex: 0 0 auto;
  background: transparent !important;
  color: var(--blue);
  border: none;
  font-size: var(--value-s);
  cursor: pointer;
  text-decoration: none;
}

.ccp-close:hover {
  color: var(--coral);
  text-decoration: underline;
}