/* ===========================================================
   wp.css: WordPress-Ergänzungen zum Kernel (U1)
   Der Kernel (style.css) bleibt unverändert. Hier steht nur, was WordPress
   zusätzlich braucht: Admin-Leiste, Cookie-Banner, Leerzustände, Video-Vorschau.
   Regeln: Größen nur als Token oder clamp(), Radien nur über Tokens,
   Hover nur in (hover:hover) and (pointer:fine), keine neuen Hex-Werte.
   =========================================================== */

/* -----------------------------------------------------------
   1. Admin-Leiste von WordPress verschiebt die feste Navbar
   ----------------------------------------------------------- */
.admin-bar .navbar { top: 32px; }
.admin-bar .mobile-menu { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .navbar { top: 46px; }
  .admin-bar .mobile-menu { top: 46px; }
}

/* -----------------------------------------------------------
   2. Cookie-Banner (Skript cookie-consent.js, Gestaltung Oh Darling)
   Das Skript hängt seine eigenen Styles ans Ende des Heads. Deshalb
   höhere Spezifität (html body ... bzw. .cc-banner .cc-card ...).
   Ausnahme von der Größenregel: keine, alles über Tokens.
   ----------------------------------------------------------- */
.cc-banner,
.cc-settings-link {
  --surface: var(--white);
  --ink: var(--navy);
  --muted: var(--navy-70);
  --line: var(--line-2);
  --radius: var(--radius-card);
  --btn-bg: var(--navy);
  --on-primary: var(--ivory);
}

/* Ebene: über dem Seiteninhalt und dem WhatsApp-Knopf, unter Navbar und Mobile-Menü */
html body .cc-banner {
  z-index: calc(var(--z-nav) - 5);
  padding: 12px;
  justify-content: center;
}
@media (min-width: 760px) {
  /* links unten: der WhatsApp-Knopf bleibt rechts frei */
  html body .cc-banner { left: 0; right: auto; padding: 24px; justify-content: flex-start; }
}
html body .cc-banner .cc-card {
  max-width: 640px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: clamp(18px, 3vw, 24px);
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}
@media (min-width: 760px) {
  html body .cc-banner .cc-card { max-width: 400px; }
}
@media (max-width: 480px) {
  html body .cc-banner .cc-card { padding: 16px; }
  .cc-banner .cc-card p { margin-bottom: 10px; }
}
.cc-banner .cc-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
  color: var(--navy);
}
/* Der Titel wird beim Öffnen per Skript fokussiert (Tastaturnutzung), bekommt aber keinen Rahmen. */
.cc-banner .cc-card h2:focus,
.cc-banner .cc-card h2:focus-visible { outline: none; }
.cc-banner .cc-card p {
  margin: 0 0 12px;
  font-size: var(--fs-body-sm);
  color: var(--navy-70);
}
.cc-banner .cc-card .cc-cats {
  gap: 0;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
}
/* Jede Zeile ist ein Label: ganze Zeile klickbar, mindestens 44 px hoch */
.cc-banner .cc-card .cc-cat {
  min-height: 44px;
  padding: 8px 0;
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.cc-banner .cc-card .cc-cat + .cc-cat { border-top: 1px solid var(--line-1); }
.cc-banner .cc-card .cc-cat small {
  font-size: var(--fs-caption);
  color: var(--navy-ink-2);
}
.cc-banner .cc-card .cc-cat input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.cc-banner .cc-card .cc-cat input[type="checkbox"]:disabled { cursor: default; opacity: .6; }
.cc-banner .cc-card .cc-actions { gap: 10px; }
.cc-banner .cc-card .cc-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  transition: background-color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift), color var(--dur-fast) var(--ease-swift);
}
.cc-banner .cc-card .cc-btn.cc-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
}
@media (hover: hover) and (pointer: fine) {
  .cc-banner .cc-card .cc-btn:hover { background: var(--navy-06); border-color: var(--navy); }
  .cc-banner .cc-card .cc-btn.cc-primary:hover { background: var(--navy-light); border-color: var(--navy-light); }
}
.cc-banner .cc-card .cc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin: 4px 0 0;
  font-size: var(--fs-caption);
}
.cc-banner .cc-card .cc-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
}

/* Link "Cookie-Einstellungen" unten links; der WhatsApp-Knopf liegt unten rechts.
   Solange das Banner offen ist, verbirgt sich der Link (er läge sonst darauf). */
html body .cc-settings-link {
  z-index: var(--z-wa);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  box-shadow: var(--shadow-pop);
  text-decoration: none;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.cc-banner ~ .cc-settings-link { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .cc-settings-link:hover { background: var(--ivory); }
}
@media print { .cc-banner, .cc-settings-link { display: none; } }

/* -----------------------------------------------------------
   3. Leerzustände: Hinweiskarte, wenn es noch nichts zu zeigen gibt
   ----------------------------------------------------------- */
.leer-hinweis {
  max-width: 640px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-card);
  color: var(--navy);
}
.leer-hinweis h3 {
  margin: 0 0 var(--gap-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
  color: var(--navy);
}
.leer-hinweis p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--navy-70);
}
.leer-hinweis .btn { margin-top: var(--gap-md); }

/* -----------------------------------------------------------
   4. Klick-zum-Laden-Video (YouTube, erst nach Klick, ohne Abruf vorher)
   Aufbau: .video-consent > button.video-consent__start (Vorschau mit Play-Kreis)
           + p.video-consent__hinweis darunter. Nach dem Klick ersetzt das
           Skript den Button durch den iframe.
   ----------------------------------------------------------- */
.video-consent { width: 100%; }
.video-consent__rahmen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--navy);
}
.video-consent__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--navy);
  cursor: pointer;
}
/* Vorschaubild (Runde 15.10.2026, Punkt 8): liegt in der eigenen Mediathek, vor dem Klick geht nichts an YouTube.
   Füllt den Rahmen 16:9, der Abspiel-Knopf (deckende Fläche, kein Text) steht mittig darüber. */
.video-consent__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-consent__play {
  position: relative;
  display: grid;
  place-items: center;
  --play: clamp(64px, 6vw, 88px);   /* Fix-Runde 1: wächst mit dem Rahmen, mindestens 64 px (Tap-Fläche über 44 px) */
  width: var(--play);
  height: var(--play);
  border-radius: var(--radius-full);
  background: var(--ivory);
  color: var(--navy);
  transition: transform var(--dur-fast) var(--ease-swift);
}
.video-consent__play::before {
  content: "";
  display: block;
  margin-left: calc(var(--play) * .0625);
  border-style: solid;
  border-width: calc(var(--play) * .156) 0 calc(var(--play) * .156) calc(var(--play) * .25);
  border-color: transparent transparent transparent currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .video-consent__start:hover .video-consent__play { transform: scale(1.06); }
}
.video-consent__rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-consent__hinweis {
  margin: var(--gap-sm) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--navy-ink-2);
}

/* -----------------------------------------------------------
   Bühne als letzte Sektion vor dem Footer (Nicholas, 13.10.2026)
   Ohne Abstand stößt z. B. die Navy-Bühne „Verfügbarkeit“ (Sedcard ohne
   „Weitere Darlinge“) an den Navy-Footer, und die hellen Seitenränder der
   Bühne enden unten im Nichts. Gleicher Abstand wie zwischen zwei Bühnen.
   ----------------------------------------------------------- */
main > .stage:last-child { margin-bottom: var(--stage-inset); }

/* -----------------------------------------------------------
   Kategorie-Badge auf der Sedcard-Karte (Runde 15.10.2026, Punkt 9)
   Unten links auf dem Foto: Der Stapel "Neu" und Status oben links liegt im oberen Drittel, wo laut Fotovorgabe das
   Gesicht sitzt, ein dritter Badge dort würde aufs Gesicht ragen. Unten links liegt er auf dem vorhandenen dunklen
   Verlauf der Karte. Weiße Fläche mit Navy-Schrift (14:1), neben dem navy gefüllten "Neu".
   Auf schmalen Karten (Handy bis 400 px, Karte bis 200 px) sitzt er enger am Rand wie die Badge-Reihe.
   ----------------------------------------------------------- */
.sedcard-kategorie { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.badge--kategorie { background: var(--white); color: var(--navy); border-color: var(--white); }
@media (max-width: 400px) {
  .sedcard-kategorie { left: 8px; bottom: 8px; padding: 0 8px; letter-spacing: .06em; }
}
@container sedcard-media (max-width: 200px) {
  .sedcard-kategorie { left: 8px; bottom: 8px; padding: 0 8px; letter-spacing: .06em; }
}