/* ============================================================
   advent.zentonic.org — Festlook (Theme-Schicht, Tenant #4)
   ------------------------------------------------------------
   Autor: holm / Christian Müller - https://mueller.network
   unter Zuhilfenahme von Claude (Anthropic)

   Nach theme/tokens.css geladen. Selektoren aus der style.css des
   Publishers (.zt-*) sind keine zugesagte Schnittstelle — nach
   Updates prüfen. Eigene Klassen: .th-* (aus theme/blocks/).
   Deko-Grafiken: theme/assets/deko/ (erzeugt von theme/src/bauen.sh).

   Abschnitte: Grund · Header · Hero · Gruppen · Türchen ·
   Folgenseite · Player · Footer · Schnee · Bewegung
   ============================================================ */

/* ---------- GRUND: Tapete / Sternenhimmel ---------------------------- */
body { background: var(--th-wall); }

/* Pixel-Grafiken nie weichzeichnen */
.th-hero__cover img,
.th-zweig, .th-hero__bow, .th-door__bow { image-rendering: pixelated; }

/* Stern vor dem Logo-Namen (Span ist aria-hidden) */
.zt-logo__name::before {
  content: "\2605\00a0";
  color: var(--th-star);
  font-weight: 400;
}

/* ---------- HEADER --------------------------------------------------- */
.zt-header {
  border-bottom: 0;
  box-shadow: 0 3px 0 0 var(--th-gold), 0 4px 0 0 var(--th-gold-deep), 0 10px 18px -12px rgba(0,0,0,.4);
}
.th-snow-toggle {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  color: var(--fg-2);
  width: 2.1em;
  height: 2.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  flex-shrink: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.th-snow-toggle[hidden] { display: none; }
.th-snow-toggle::before { content: "\2744\FE0E"; }
.th-snow-toggle[aria-pressed="true"] { color: var(--amber); border-color: var(--th-gold); }
.th-snow-toggle[aria-pressed="false"] { opacity: .7; }
.th-snow-toggle:hover,
.th-snow-toggle:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
  outline: none;
}

/* ---------- HERO: festliche Bühne ------------------------------------ */
.th-hero { padding-bottom: 18px; }
/* Holzleiste unten wie die Bodendielen im Cover (statt Scanline) */
.th-hero::after {
  inset: auto 0 0 0;
  height: 18px;
  background: var(--th-floor);
  opacity: 1;
  box-shadow: 0 -2px 0 var(--th-wood-dark) inset, 0 2px 0 var(--th-wood-dark);
}
.th-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 92px 22px 64px;
}
.th-hero__text { min-width: 0; }

/* Wortmarke: Gold-Schimmer über „Zentonic", Crimson mit Pixel-Relief */
.th-wordmark {
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: none;
}
.th-wordmark__a {
  display: block;
  width: fit-content;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 6px 18px 6px 20px;
  color: var(--th-ribbon-fg);
  background: var(--th-ribbon);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  box-shadow: inset 0 -3px 0 var(--th-ribbon-edge);
}
.th-wordmark__a::before,
.th-wordmark__a::after { content: "\2605"; color: var(--th-gold-hi); font-size: .7em; vertical-align: .15em; }
.th-wordmark__a::before { margin-right: .5em; }
.th-wordmark__a::after  { margin-left: .2em; }
.th-wordmark__b {
  display: block;
  font-size: clamp(34px, 4.7vw, 66px);
  font-weight: 900;
  color: var(--blue);
  text-shadow: var(--th-wordmark-3d);
}
[data-theme="dark"] .th-wordmark__b {
  color: #FFE6A3;
  background: linear-gradient(100deg, #E8A568 0%, #FFE6A3 22%, #F2C14E 40%, #FFF6D8 50%, #F2C14E 60%, #E8A568 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #8A2416) drop-shadow(2px 2px 0 #4A140E) drop-shadow(0 0 18px rgba(242,193,78,.35));
  text-shadow: none;
  animation: th-shimmer 6s linear infinite;
}
.th-hero__sub {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--green);
  margin: 26px 0 14px;
}
.th-hero__sub::before { content: "\2726\00a0\00a0"; color: var(--th-star); }
.th-hero__desc { font-size: 15.5px; color: var(--fg-2); max-width: 560px; }
.th-hero__desc p { margin: 0; }
.th-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.th-hero__count {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}

/* Knöpfe: Gold-Geschenk und Creme */
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--green);
  background: var(--bg-panel);
  border: 2px solid var(--green);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.th-btn--gold {
  color: var(--th-btn-gold-fg);
  background: var(--th-btn-bg);
  border: 2px solid var(--th-gold-deep);
  box-shadow: 0 3px 0 var(--th-gold-deep);
}
.th-btn:hover, .th-btn:focus-visible {
  box-shadow: var(--th-glow);
  transform: translateY(-1px);
  outline: none;
  text-shadow: none;
}
.th-btn:hover { color: inherit; }
.th-btn--gold:hover, .th-btn--gold:focus-visible { color: var(--th-btn-gold-fg); }

/* Show-Cover groß im Goldrahmen, Pixel bleiben Pixel (128 px × 3) */
.th-hero__cover { position: relative; margin: 0; transform: rotate(2deg); }
.th-hero__frame {
  display: block;
  padding: 12px;
  background: var(--th-frame);
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--th-wood-dark), 0 22px 40px -14px rgba(0,0,0,.55), 0 0 60px 6px var(--amber-glow);
}
.th-hero__frame img {
  display: block;
  width: 384px;
  height: 384px;
  box-shadow: 0 0 0 3px var(--th-wood-dark);
}
.th-hero__bow {
  position: absolute;
  top: -26px;
  right: -22px;
  width: 85px;
  height: 65px;
  background: url("../deko/schleife.svg") center / contain no-repeat;
  transform: rotate(14deg);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
}

/* Lichterkette quer über den Kopf */
.th-lights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}
.th-lights__wire {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 34px;
  fill: none;
  stroke: var(--green-bright);
  stroke-width: 2.5px;
}
[data-theme="dark"] .th-lights__wire { stroke: #2E6B45; }
.th-lights i {
  --c: #E8253F;
  position: absolute;
  top: 26px;
  left: calc((var(--i) + .5) * 100% / 16);
  width: 14px;
  height: 20px;
  margin-left: -7px;
  border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 40%);
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent), 0 0 24px 6px color-mix(in srgb, var(--c) 35%, transparent);
  animation: th-blink 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.37s);
}
.th-lights i::before {           /* Fassung */
  content: "";
  position: absolute;
  top: -5px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: var(--th-gold-deep);
  border-radius: 1px;
}
.th-lights i:nth-child(5n+2) { --c: #F2C14E; animation-duration: 3.1s; }
.th-lights i:nth-child(5n+3) { --c: #2FBF5B; animation-duration: 2.7s; }
.th-lights i:nth-child(5n+4) { --c: #3D7BFF; animation-duration: 3.5s; }
.th-lights i:nth-child(5n+5) { --c: #B05CFF; animation-duration: 2.2s; }
.th-lights i:nth-child(5n+1) { --c: #FF3355; }

/* Tannenzweig-Ecken mit Kugeln (Pixel-SVG, 4× skaliert) */
.th-zweig {
  position: absolute;
  top: 0;
  width: 252px;
  height: 154px;
  z-index: 1;
  background: url("../deko/zweig.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.25));
}
.th-zweig--l { left: -8px; }
.th-zweig--r { right: -8px; transform: scaleX(-1); }

/* Funkelnde Sterne im Hero */
.th-funkeln i {
  position: absolute;
  width: 21px;
  height: 21px;
  background: url("../deko/funkeln.svg") center / contain no-repeat;
  animation: th-twinkle 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.7s);
  pointer-events: none;
}
.th-funkeln i:nth-child(1) { top: 70px;  left: 46%; }
.th-funkeln i:nth-child(2) { top: 170px; left: 3%;  transform: scale(.7); }
.th-funkeln i:nth-child(3) { top: 64%;   left: 49%; transform: scale(.8); }
.th-funkeln i:nth-child(4) { top: 84%;   left: 8%;  }
.th-funkeln i:nth-child(5) { top: 30%;   right: 3%; transform: scale(.7); }
.th-funkeln i:nth-child(6) { top: 76%;   right: 4%; }
.th-funkeln i:nth-child(7) { top: 22%;   left: 60%; transform: scale(.6); }
.th-funkeln i:nth-child(8) { top: 88%;   left: 56%; transform: scale(.7); }
.th-funkeln i:nth-child(9) { top: 50%;   left: 1.5%; transform: scale(.6); }

/* ---------- GRUPPEN: Kalender 2024 / Trailer / Kalender 2023 --------- */
/* Die Index-Schleife ist Publisher-Sache (eine flache .zt-grid, neueste
   zuerst; der Trailer steht dort zwischen 2024 und 2023). Die Überschrift
   steckt deshalb in jeder Karte (card_top: span.th-group) und ist nur an der
   ersten Tür einer Gruppe sichtbar. Die erste Tür beginnt eine neue Zeile;
   ab ihr rücken alle Zellen per translate nach unten — das Grid selbst
   (gleich hohe Reihen, #113) bleibt unberührt.
   Gruppenwechsel (data-season/data-type aus card_cover):
     T   = 2024 → Trailer          (1 Band Abstand)
     K0  = 2024 → 2023 ohne Trailer (1 Band)
     K   = Trailer → 2023           (2 Bänder)
   Neue Staffel (2025): eine Zeile je Regel ergänzen. */
.zt-list-bar {                    /* „ls ./episodes" → nur für Screenreader */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.zt-grid {
  --th-gap: 84px;
  container-type: inline-size;
  margin-top: var(--th-gap);
  margin-bottom: calc(var(--th-gap) * 2);
  gap: 22px;
}
.th-group { display: none; }
.zt-ep-cell:first-child .th-group,
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-type="trailer"]) .th-group,
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]) .th-group,
.zt-ep-cell:has([data-type="trailer"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]) .th-group {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: calc(var(--th-gap) * -1 + 8px);
  width: 100cqw;
  height: 52px;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--th-ribbon-fg);
  isolation: isolate;
}
/* Band hinter dem Text (Fläche, damit die Schrift nie auf Tapete steht) */
.zt-ep-cell .th-group::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  height: 100%;
  width: min(460px, 92cqw);
  transform: translateX(-50%);
  background: var(--th-ribbon);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  box-shadow: inset 0 -4px 0 var(--th-ribbon-edge), inset 0 4px 0 rgba(255,255,255,.15);
}
/* Goldfäden links/rechts des Bandes */
.zt-ep-cell .th-group::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0; right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--th-gold) 0 10px, transparent 10px 16px);
}
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-type="trailer"]),
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]),
.zt-ep-cell:has([data-type="trailer"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]) {
  grid-column-start: 1;
}
/* T, K0: ab hier ein Band tiefer */
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-type="trailer"]),
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-type="trailer"]) ~ .zt-ep-cell,
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]),
.zt-ep-cell:has([data-season="2024"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]) ~ .zt-ep-cell {
  translate: 0 var(--th-gap);
}
/* K: ab hier zwei Bänder tiefer (steht später, gewinnt) */
.zt-ep-cell:has([data-type="trailer"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]),
.zt-ep-cell:has([data-type="trailer"]) + .zt-ep-cell:has([data-season="2023"][data-type="full"]) ~ .zt-ep-cell {
  translate: 0 calc(var(--th-gap) * 2);
}

/* ---------- TÜRCHEN -------------------------------------------------- */
.zt-ep-card {
  position: static;                         /* Gruppen-Band bezieht sich auf die Zelle */
  background: var(--th-card-bg);
  border: 0;
  border-radius: 8px;
  padding: 10px;
  box-shadow:
    0 0 0 3px var(--th-gold),
    0 0 0 5px var(--th-gold-deep),
    0 16px 26px -14px rgba(0,0,0,.55);
  overflow: visible;
}
.zt-ep-card:hover,
.zt-ep-cell:focus-within .zt-ep-card {
  background: var(--th-card-bg);
  border-color: transparent;
  box-shadow:
    0 0 0 3px var(--th-gold-hi),
    0 0 0 5px var(--th-gold-deep),
    0 0 26px 6px var(--amber-glow),
    0 18px 30px -14px rgba(0,0,0,.6);
  animation: th-sparkle-border 1.6s ease-in-out infinite;
}
/* Play-Knopf liegt über dem Cover: Overlay an den Türrahmen anpassen */
.zt-ep-cell__overlay { top: 10px; left: 10px; right: 10px; z-index: 3; }
.zt-ep-card__play {
  background: radial-gradient(circle at 35% 30%, #FFF3C4 0 10%, #F2C14E 38%, #A8692A 100%);
  color: var(--th-wood-dark);
  box-shadow: 0 0 0 3px var(--th-wood-dark), 0 6px 12px rgba(0,0,0,.4);
}
.zt-ep-card__play:hover,
.zt-ep-card__play:focus-visible {
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, #FFD66B 38%, #C9933F 100%);
  box-shadow: 0 0 0 3px var(--th-wood-dark), 0 0 20px 6px rgba(242,193,78,.7);
}

/* Cover = Raum hinter der Tür */
.th-door {
  border-radius: 4px;
  perspective: 900px;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--th-wood-dark);
  background: radial-gradient(circle at 50% 45%, #FFE6A3, #E8A568 60%, #A8692A);
}
.th-door img { position: relative; z-index: 0; }
/* Türflügel */
.th-door__leaf {
  --door: #B3122F;
  --door-dk: #7E0C21;
  --door-hi: #E5385A;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 0 50%;
  transform: rotateY(4deg);
  transition: transform .8s cubic-bezier(.3,1.4,.5,1);
  background:
    /* Rauten-Ornament (Pixel), sehr dezent */
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.07) 14px 16px),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.08) 14px 16px),
    var(--door);
  box-shadow:
    inset 0 0 0 4px var(--door-dk),
    inset 0 0 0 14px var(--door),
    inset 0 0 0 16px var(--door-dk),
    inset 2px 2px 0 18px var(--door-hi),
    4px 0 10px rgba(0,0,0,.35);
  backface-visibility: hidden;
}
/* Türknauf */
.th-door__leaf::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #F2C14E 45%, #8A5A22);
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
.th-door--v1 .th-door__leaf { --door: #145A31; --door-dk: #0B3D20; --door-hi: #2E8A4E; }
.th-door--v2 .th-door__leaf { --door: #6B2A20; --door-dk: #45160F; --door-hi: #8E4632; }
.th-door--v3 .th-door__leaf { --door: #1E3F7A; --door-dk: #12274D; --door-hi: #3561A8; }
.th-door--vt .th-door__leaf { --door: #A8692A; --door-dk: #6E4114; --door-hi: #D7A048; }

/* Nummern-Plakette: Gold-Medaillon */
.th-door__plate {
  display: grid;
  place-items: center;
  min-width: 42%;
  aspect-ratio: 1;
  padding: 0 .2em;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 8cqw, 68px);
  line-height: 1;
  color: var(--th-wood-dark);
  background: radial-gradient(circle at 35% 28%, #FFF6D8 0 8%, #F7D88A 22%, #F2C14E 50%, #C9933F 80%, #A8692A);
  box-shadow:
    0 0 0 3px var(--th-wood-dark),
    0 0 0 6px #F2C14E,
    0 0 0 8px var(--th-wood-dark),
    0 8px 14px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
/* Geschenkband-Ecke mit Schleife */
.th-door__bow {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -6px;
  width: 92px;
  height: 92px;
  pointer-events: none;
  background:
    url("../deko/schleife.svg") 48px 4px / 40px 31px no-repeat,
    linear-gradient(45deg, transparent 0 calc(50% - 8px), #F2C14E calc(50% - 8px) calc(50% - 5px), #D7193A calc(50% - 5px) calc(50% + 5px), #F2C14E calc(50% + 5px) calc(50% + 8px), transparent calc(50% + 8px)) 0 0 / 100% 100% no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: transform .5s var(--ease);
}
.th-door--v0 .th-door__bow, .th-door--vt .th-door__bow {
  background:
    url("../deko/schleife.svg") 48px 4px / 40px 31px no-repeat,
    linear-gradient(45deg, transparent 0 calc(50% - 8px), #F2C14E calc(50% - 8px) calc(50% - 5px), #12522C calc(50% - 5px) calc(50% + 5px), #F2C14E calc(50% + 5px) calc(50% + 8px), transparent calc(50% + 8px)) 0 0 / 100% 100% no-repeat;
}
/* Öffnen: Hover/Fokus (Maus), auf Touch-Geräten halb offen */
.zt-ep-cell:hover .th-door__leaf,
.zt-ep-cell:focus-within .th-door__leaf { transform: rotateY(68deg); }
.zt-ep-cell:hover .th-door__bow,
.zt-ep-cell:focus-within .th-door__bow { transform: translate(6px, -6px) rotate(8deg); }
@media (hover: none) and (pointer: coarse) {
  .th-door__leaf { transform: rotateY(52deg); }
}

/* Karten-Text */
.zt-ep-card__body { padding: 14px 6px 4px; gap: 8px; }
.zt-ep-card__top .th-nr,
.zt-ep-head__top .th-nr {
  color: var(--th-ribbon-fg);
  background: var(--th-ribbon);
  border-color: var(--th-ribbon-edge);
  letter-spacing: .06em;
}
.zt-ep-card__title { font-size: 21px; line-height: 1.12; }
.zt-ep-card:hover .zt-ep-card__title { color: var(--blue); }
.zt-ep-card__meta::before { content: "\2726\00a0"; color: var(--th-star); }

/* ---------- FOLGENSEITE ---------------------------------------------- */
.zt-ep-head__cover {
  border: 0;
  overflow: visible;
  border-radius: 6px;
  padding: 7px;
  width: 162px;
  height: 162px;
  background: var(--th-frame);
  box-shadow: 0 0 0 3px var(--th-wood-dark), 0 12px 24px -10px rgba(0,0,0,.5), 0 0 30px 2px var(--amber-glow);
}
.zt-ep-head__cover .zt-cover-zoom,
.zt-ep-head__cover img { display: block; width: 100%; height: 100%; border-radius: 2px; }
.zt-ep-head__cover::after {      /* Schleife am Rahmen */
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 51px;
  height: 39px;
  background: url("../deko/schleife.svg") center / contain no-repeat;
  transform: rotate(14deg);
  image-rendering: pixelated;
  pointer-events: none;
}
.zt-ep-head__path { color: var(--green); font-weight: 700; }
.zt-ep-head__title { text-shadow: none; }
.zt-btn-play {
  color: var(--th-btn-gold-fg);
  background: var(--th-btn-bg);
  border: 2px solid var(--th-gold-deep);
  box-shadow: 0 3px 0 var(--th-gold-deep);
  border-radius: var(--r-2);
}
.zt-btn-play:hover, .zt-btn-play:focus-visible { box-shadow: var(--th-glow); }
.zt-btn-dl { background: var(--bg-panel); border: 2px solid var(--green); color: var(--green); border-radius: var(--r-2); }

/* Abschnittsköpfe: Stern statt „//" */
.zt-sect { font-weight: 700; font-size: 12px; color: var(--green); }
.zt-sect::before { content: "\2605"; color: var(--th-star); font-size: 1.2em; }
.zt-sect__rule { height: 2px; background: repeating-linear-gradient(90deg, var(--th-gold) 0 8px, transparent 8px 13px); }

/* Fenster (Kapitel, Shownotes-Kästen): Goldrahmen statt Terminal */
.zt-term-win {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--th-gold), 0 0 0 4px var(--th-gold-deep), var(--shadow-panel);
}
.zt-term-bar { background: var(--th-ribbon); border-bottom: 2px solid var(--th-gold); }
.zt-term-bar__title { color: var(--th-ribbon-fg); }
.zt-term-dot { background: var(--th-gold) !important; border-color: transparent !important; }

/* ---------- PLAYER + SHOWNOTES-PANEL ---------------------------------- */
.zt-sticky-player {
  border-top: 0;
  background: var(--th-card-bg);
  box-shadow: 0 -3px 0 var(--th-gold), 0 -5px 0 var(--th-gold-deep), var(--shadow-pop);
}
.zt-sticky-player__playbtn {
  border-radius: 50%;
  border: 2px solid var(--th-wood-dark);
  color: var(--th-wood-dark);
  background: radial-gradient(circle at 35% 30%, #FFF3C4 0 10%, #F2C14E 38%, #A8692A 100%);
}
.zt-sticky-player__playbtn:hover,
.zt-sticky-player__playbtn:focus-visible {
  color: var(--th-wood-dark);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, #FFD66B 38%, #C9933F 100%);
  box-shadow: 0 0 16px 4px rgba(242,193,78,.6);
}
.zt-sticky-player__seek { accent-color: var(--blue); }
.zt-np-panel,
.zt-chat-panel,
.zt-share {
  border-top: 0;
  background: var(--th-card-bg);
  box-shadow: 0 -3px 0 var(--th-gold), 0 -5px 0 var(--th-gold-deep), var(--shadow-pop);
}
.zt-np-panel__head { border-bottom: 2px solid var(--th-gold); }

/* ---------- FOOTER: Holzboden ----------------------------------------- */
.zt-footer {
  --fg-1: #FFF4DC;
  --fg-2: #F1E2C6;
  --fg-3: #DCC8A6;
  --fg-4: #CDB592;
  --blue: #FFB4C0;
  --green: #A9E3BD;
  --line-1: #5A2E22;
  --line-2: #6E3A2A;
  position: relative;
  border-top: 0;
  margin-top: 40px;
  background: var(--th-wood-dark);
  color: var(--fg-2);
  padding-top: 24px;
}
.zt-footer::before {               /* Dielen wie im Cover */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -28px;
  height: 28px;
  background: var(--th-floor);
  box-shadow: inset 0 3px 0 rgba(0,0,0,.25);
}
.zt-footer a { color: var(--blue); }
.zt-footer__col-head { color: var(--th-gold); }
.zt-footer__bullet { color: var(--th-gold); }

/* ---------- SCHNEE (deko/schnee.js) ---------------------------------- */
.th-snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 900;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ---------- BEWEGUNG -------------------------------------------------- */
@keyframes th-blink {
  0%, 100% { opacity: 1; filter: brightness(1.15); }
  45%      { opacity: .6; filter: brightness(.75); box-shadow: 0 0 4px 1px color-mix(in srgb, var(--c) 50%, transparent); }
}
@keyframes th-twinkle {
  0%, 100% { opacity: .15; scale: .6; }
  50%      { opacity: 1;   scale: 1.1; }
}
@keyframes th-shimmer {
  from { background-position: 125% 0; }
  to   { background-position: -125% 0; }
}
@keyframes th-sparkle-border {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.06) saturate(1.1); }
}
@keyframes th-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: .82; } 55% { opacity: .95; } 70% { opacity: .78; }
}
/* Kerzenschein im Cover-Rahmen flackert dezent */
.th-hero__frame { animation: th-candle 4s ease-in-out infinite; }
@keyframes th-candle {
  0%, 100% { box-shadow: 0 0 0 3px var(--th-wood-dark), 0 22px 40px -14px rgba(0,0,0,.55), 0 0 60px 6px var(--amber-glow); }
  37%      { box-shadow: 0 0 0 3px var(--th-wood-dark), 0 22px 40px -14px rgba(0,0,0,.55), 0 0 44px 2px var(--amber-glow); }
  61%      { box-shadow: 0 0 0 3px var(--th-wood-dark), 0 22px 40px -14px rgba(0,0,0,.55), 0 0 70px 10px var(--amber-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .th-lights i, .th-funkeln i, .th-hero__frame, .zt-ep-card:hover,
  .zt-ep-cell:focus-within .zt-ep-card,
  [data-theme="dark"] .th-wordmark__b { animation: none; }
  .th-funkeln i { opacity: .8; }
  .th-door__leaf, .th-door__bow { transition: none; }
}

/* ---------- RESPONSIVE ------------------------------------------------ */
@media (max-width: 900px) {
  .th-hero__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 84px; }
  .th-hero__cover { justify-self: center; order: -1; }
  .th-hero__frame img { width: 256px; height: 256px; }
  .th-zweig { width: 180px; height: 110px; }
}
@media (max-width: 479px) {
  .th-hero__inner { padding: 72px 18px 48px; }
  .th-hero__frame { padding: 9px; }
  .th-zweig { width: 144px; height: 88px; }
  .th-lights i:nth-child(odd of i) { display: none; }
  .th-wordmark__a { font-size: 17px; letter-spacing: .2em; }
  .th-wordmark__b { font-size: 32px; }
  .th-hero__sub { font-size: 14px; letter-spacing: .2em; }
  .zt-ep-cell .th-group { font-size: 19px; }
  .th-funkeln i:nth-child(n+5) { display: none; }
}

/* ---------- FOLGENSEITE: Papierbogen ---------------------------------- */
/* Shownotes stehen nie direkt auf Tapete/Sternenhimmel: Rücksprung, Kopf und
   Körper bilden zusammen einen Bogen mit Goldkante. */
main[data-page-kind="episode"] { padding: 26px 0 40px; }
main[data-page-kind="episode"] > .zt-ep-back,
main[data-page-kind="episode"] > .zt-ep-head,
main[data-page-kind="episode"] > .zt-ep-body {
  background: var(--bg-panel);
  box-shadow: -3px 0 0 var(--th-gold), 3px 0 0 var(--th-gold), -5px 0 0 var(--th-gold-deep), 5px 0 0 var(--th-gold-deep);
}
main[data-page-kind="episode"] > .zt-ep-back {
  display: flex;
  border-radius: 8px 8px 0 0;
  box-shadow: -3px 0 0 var(--th-gold), 3px 0 0 var(--th-gold), 0 -3px 0 var(--th-gold),
              -5px 0 0 var(--th-gold-deep), 5px 0 0 var(--th-gold-deep), 0 -5px 0 var(--th-gold-deep);
}
main[data-page-kind="episode"] > .zt-ep-body {
  border-radius: 0 0 8px 8px;
  box-shadow: -3px 0 0 var(--th-gold), 3px 0 0 var(--th-gold), 0 3px 0 var(--th-gold),
              -5px 0 0 var(--th-gold-deep), 5px 0 0 var(--th-gold-deep), 0 5px 0 var(--th-gold-deep),
              0 24px 40px -20px rgba(0,0,0,.5);
}
@media (max-width: 1144px) {
  main[data-page-kind="episode"] > .zt-ep-back,
  main[data-page-kind="episode"] > .zt-ep-head,
  main[data-page-kind="episode"] > .zt-ep-body { width: calc(100% - 20px); }
}

/* Trailer-Tür: Pixel-Stern statt Nummer */
.th-door--vt .th-door__plate {
  font-size: 0;
  background:
    url("../deko/stern.svg") center / 56% no-repeat,
    radial-gradient(circle at 35% 28%, #FFF6D8 0 8%, #F7D88A 22%, #F2C14E 50%, #C9933F 80%, #A8692A);
  image-rendering: pixelated;
}
.th-door--vt .th-door__plate {
  background:
    url("../deko/stern.svg") center / 56% no-repeat,
    radial-gradient(circle at 35% 28%, #FF9AAC 0 8%, #E5385A 30%, #B3122F 65%, #7E0C21);
}