/* ============================================================
   COOKIE-BANNER – GESAMTSTIL
   Enthält:
   - Position & Layout des Banners
   - Checkbox- und Button-Styling
   - YouTube-Platzhalter-Styling
   - Einblend-Animation (von unten)
   ============================================================ */


/* --- Position + Breite: Fixiert am unteren Rand, volle Breite --- */
#cookie-bar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 2147483647; /* immer ganz oben */
  transform: translateY(0);
  opacity: 1;
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform, opacity;
}

/* iOS Safe Area (z. B. iPhone mit Notch) */
#cookie-bar-wrap .safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Banner bei Zustimmung komplett ausblenden */
.js-cookie-hide #cookie-bar-wrap {
  display: none;
}

/* Ohne JS → Banner sofort sichtbar
   Mit JS → initial "unten geparkt" (ausserhalb des Sichtbereichs) */
.cc-js #cookie-bar-wrap {
  transform: translateY(100%);
  opacity: 0;
}

/* Banner sichtbar mit Animation (wird per JS gesetzt) */
#cookie-bar-wrap.cc-show {
  transform: translateY(0);
  opacity: 1;
}


/* ============================================================
   CHECKBOX-BEREICH
   ============================================================ */

/* Ausrichtung: mobil mittig, ab md links */
#cookie-bar .cc-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 1rem 0;
}

/* Einzelne Checkbox + Label */
#cookie-bar .cc-options .cc-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem; /* text-sm */
  color: var(--color-gray-700, #374151);
  margin-left: 1rem;   /* horizontaler Abstand */
  margin-bottom: 0.5rem; /* vertikaler Abstand bei Umbruch */
}

/* Dunkelmodus-Farbe */
.dark #cookie-bar .cc-options .cc-item {
  color: var(--color-gray-300, #d1d5db);
}

/* Checkbox selbst */
#cookie-bar .cc-options .cc-item input {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

/* Feste Checkbox ("Notwendig") ausgegraut */
#cookie-bar .cc-options .cc-item.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ab md: linksbündig, erste Checkbox ohne linken Abstand */
@media (min-width: 768px) {
  #cookie-bar .cc-options { justify-content: flex-start; }
  #cookie-bar .cc-options .cc-item:first-child { margin-left: 0; }
}


/* ============================================================
   BUTTON-BEREICH (im Banner)
   ============================================================ */

/* Ausrichtung: mobil mittig, ab md rechts */
#cookie-bar .cc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  #cookie-bar .cc-actions { justify-content: flex-end; }
}

/* Basis-Button-Design */
#cookie-bar .cc-actions .cc-btn {
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  margin-left: 0.75rem;
  border: 1px solid transparent;
  transition: opacity .15s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease;
}

/* Primär-Button hell/dunkel */
#cookie-bar .cc-actions .cc-btn--primary {
  background: #111827; /* gray-900 */
  color: #fff;
}
.dark #cookie-bar .cc-actions .cc-btn--primary {
  background: #fff;
  color: #111827;
}

/* Sekundär-Button hell/dunkel */
#cookie-bar .cc-actions .cc-btn--secondary {
  color: #111827;
  border-color: #d1d5db; /* gray-300 */
  background: transparent;
}
.dark #cookie-bar .cc-actions .cc-btn--secondary {
  color: #f9fafb;        /* gray-50 */
  border-color: #4b5563; /* gray-600 */
}

#cookie-bar .cc-actions .cc-btn:hover {
  opacity: .9;
}


/* ============================================================
   YOUTUBE-/VIMEO-EINBINDUNG & PLATZHALTER
   ============================================================ */

/* Wrapper: kein Platz reservieren, bis aktiv */
.yt-embed,
.vimeo-embed { /* NEU: Vimeo mit abdecken */
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;             /* wichtig fürs Abrunden */
  border-radius: 0.5rem;          /* NEU: Eckenradius */
}

/* Aktiv: Platz im 16:9-Format */
.yt-embed.is-active,
.vimeo-embed.is-active {        /* NEU: Vimeo mit abdecken */
  aspect-ratio: 16 / 9;         /* moderne Browser */
  height: auto;                 /* Fallback */
}

/* iframe füllt den Wrapper, Ecken werden durch overflow:hidden geclippt */
.yt-embed.is-active iframe,
.vimeo-embed.is-active iframe { /* NEU: Vimeo mit abdecken */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;                    /* NEU: saubere Kante */
  border-radius: 0.5rem;          /* optional: rundes iframe (zusätzlich zum Wrapper) */
}

/* Stelle sicher, dass Player-IFRAMES bedienbar bleiben */
.yt-embed.is-active iframe,
.vimeo-box iframe {
  pointer-events: auto !important;
}


.vimeo-box {
  border-radius: 0.5rem;   /* = 8px */
  overflow: hidden;      /* sorgt dafür, dass iframe-Inhalt abgerundet wird */
  position: relative; 
  height: 0; 
  padding-bottom: 56.25%;   
}

.vimeo-box iframe { 
  position: absolute; 
  inset: 0; width: 100%; 
  height: 100%; 
}


/* Wenn unser JS .is-hidden setzt, darf der Platzhalter NICHT mehr klicken/blocken */
.yt-consent-placeholder.is-hidden,
.vimeo-consent-placeholder.is-hidden,
.cc-consent-placeholder.is-hidden {
  display: none !important;
  pointer-events: none !important;
}



/* Standardmäßig Platzhalter ausblenden */
.yt-consent-placeholder {
  display: none;
  border-radius: 0.5rem;          /* NEU: runde Ecken im Placeholder */
  overflow: hidden;             /* NEU: damit innere Inhalte den Radius respektieren */
}

/* Ohne Zustimmung → Platzhalter sichtbar */
html.no-consent .yt-consent-placeholder {
  display: block;
}

/* Buttons im Platzhalter (mobil mittig, ab md rechts) */
.yt-consent-placeholder .cc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}
@media (min-width: 768px) {
  .yt-consent-placeholder .cc-actions { justify-content: flex-end; }
}

/* Buttons im Platzhalter wie im Banner */
.yt-consent-placeholder .cc-actions .cc-btn {
  border-radius: 0.25rem; /* etwas runder */
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  margin-left: 0.75rem;
  border: 1px solid transparent;
  transition: opacity .15s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease;
}

/* Primär-Button im Platzhalter */
.yt-consent-placeholder .cc-actions .cc-btn--primary {
  background: #111827;
  color: #fff;
}
.dark .yt-consent-placeholder .cc-actions .cc-btn--primary {
  background: #fff;
  color: #111827;
}

/* Sekundär-Button im Platzhalter */
.yt-consent-placeholder .cc-actions .cc-btn--secondary {
  color: #111827;
  border-color: #d1d5db;
  background: transparent;
}
.dark .yt-consent-placeholder .cc-actions .cc-btn--secondary {
  color: #f9fafb;
  border-color: #4b5563;
}

.yt-consent-placeholder .cc-actions .cc-btn:hover {
  opacity: .9;
}