/* Cookie-Banner + Consent-Platzhalter für externe Medien (YouTube).
   Farben aus der Kadence-Palette: palette1 #ffb424 (Akzent), palette3 #19333f. */

.kl-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.kl-cookie-banner-inner {
  pointer-events: auto;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  color: var(--global-palette3, #19333f);
  border: 1px solid var(--global-gray-400, #cbd5e0);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(25, 51, 63, 0.25);
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-height: min(80vh, 640px);
  overflow-y: auto;
}

.kl-cookie-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.kl-cookie-text {
  margin: 0 0 1rem;
}

.kl-cookie-text a,
.kl-cookie-category a {
  color: var(--global-palette3, #19333f);
  text-decoration: underline;
}

.kl-cookie-category {
  border-top: 1px solid var(--global-gray-400, #cbd5e0);
  padding: 0.75rem 0;
}

.kl-cookie-category label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  cursor: pointer;
}

.kl-cookie-category input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--global-palette1, #ffb424);
}

.kl-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Buttons — Akzeptieren und Ablehnen bewusst gleich gewichtet (DSGVO) */
.kl-btn {
  font: inherit;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  border: 2px solid var(--global-palette3, #19333f);
  background: transparent;
  color: var(--global-palette3, #19333f);
}

.kl-btn-primary {
  background: var(--global-palette3, #19333f);
  color: #fff;
}

.kl-btn-primary:hover {
  background: #0f2129;
}

.kl-btn-primary-outline:hover {
  background: rgba(25, 51, 63, 0.08);
}

.kl-btn-link {
  border-color: transparent;
  text-decoration: underline;
  font-weight: 600;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* Platzhalter für blockierte YouTube-Embeds im Content */
.entry-content-html .kl-embed-consent,
.kl-embed-consent {
  background: var(--global-palette7, #edf2f7);
  border: 1px solid var(--global-gray-400, #cbd5e0);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5em 0;
  max-width: 560px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.kl-embed-consent p {
  margin: 0 0 0.75rem;
}

.kl-embed-consent p:last-child {
  margin-bottom: 0;
}

.kl-embed-consent-title {
  font-size: 1rem;
}

.kl-embed-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Nach Consent eingesetzte iframes (EmbedConsentGate) */
.kl-embed-iframe {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Videos im migrierten Content stecken im WordPress-Wrapper .video-container
   (height: 0 + padding-bottom: 56.25%). Der würde den Platzhalter komplett
   verschlucken, solange keine Einwilligung vorliegt. Deshalb setzt
   gateYouTubeEmbeds() dort die Klasse kl-video-gated, die den Höhentrick
   abschaltet; EmbedConsentGate nimmt sie beim Einsetzen des iframes weg. */
.video-container.kl-video-gated {
  position: static;
  padding-bottom: 0;
  height: auto;
  overflow: visible;
}

/* Der Wrapper trägt inline text-align: center (aus WordPress); das gilt für das
   Video, nicht für den Textblock des Platzhalters. */
.video-container.kl-video-gated > .kl-embed-consent {
  text-align: left;
}

/* Der Rahmen um den Platzhalter reicht, der Schatten des Wrappers doppelt ihn. */
.entry-content-html > .video-container.kl-video-gated {
  box-shadow: none;
}

/* Im Wrapper füllt das iframe die volle Breite (absolut positioniert, 100 %).
   Die 560px-Grenze oben gilt nur für freistehende Embeds. */
.video-container .kl-embed-iframe {
  max-width: none;
  aspect-ratio: auto;
}

@media (max-width: 600px) {
  .kl-cookie-banner {
    padding: 0 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  .kl-cookie-actions .kl-btn {
    flex: 1 1 100%;
  }
}