/* ═══════════════════════════════════════════════════════════════════════
   SEKTIONSGRUPPE „LIVESTREAM + LEGAL" — Kontrast-Rhythmus
   · [tp_livestream]  (.tp-ls, .tp-ls-onair)  → TON: DUNKEL (Bühnen-Kapitel)
   · [tp_impressum] / [tp_datenschutz] via tp_legal_layout (.tp-legal)
                                             → TON: HELL (Papier + Tinte)
   Ersetzt die Inline-<style>-Blöcke in treckerparty-design.php
   (tp_legal_layout + tp_livestream_shortcode inkl. On-Air-Block).
   !important nur dort, wo der Audit-Fix-Block (wp_head, prio 5) dieselben
   Properties mit !important setzt — diese Datei lädt später und gewinnt.
   Stand: 2026-08-07
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ LIVESTREAM — dunkles Screen-Kapitel ═══════════
   Section-Klassen „tp-sec tp-sec--dark tp-ls": Grundfläche, Grain und
   Kapitelkopf kommen komplett aus neuaufbau.css (tp-sec--dark). */

/* Kapitelkopf-Sonderfall: __num enthält „●" (Live-Punkt, keine Nummer).
   Das „Kapitel …"-Präfix des Fundaments wird hier unterdrückt. */
.tp-ls .tp-sec-head__num::before{ content: none; }
.tp-ls .tp-sec-head__num{
  color: var(--tp-red-lift);
  font-size: var(--tp-fs-mono);
  animation: tpRecBlink 2.4s ease-in-out infinite;
}

/* Badges im Kopf: Chips, kein Pillen-Radius, Rot nur als Signal */
.tp-ls__live-badge,
.tp-ls__archive-badge{
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 14px 8px;
  border-radius: var(--nb-r-ui);
  background: transparent;
  box-shadow: none;
  animation: none;
}
.tp-ls__live-badge{
  color: var(--tp-red-lift);
  border: 1px solid rgba(227,6,19,.55);
}
.tp-ls__archive-badge{
  color: var(--nb-ondark-2);
  border: 1px solid var(--nb-hair-d);
}
.tp-ls__live-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nb-red);
  animation: tpRecBlink 1.6s ease-in-out infinite;
}

/* Lead: zentriert unter dem zentrierten Kopf (ein Anker, eine Achse) */
.tp-ls__lead{
  font-family: var(--nb-font-text);
  font-size: var(--nb-fs-lead);
  line-height: 1.6;
  color: var(--nb-ondark-2) !important;   /* Audit-Block kontert */
  max-width: 36em !important;             /* Audit-Block kontert */
  text-align: center;
  margin: -34px auto 56px;
}

/* ── Player: 12px-Radius, dunkle Karte, kein Glow ── */
.tp-ls__player{
  margin: 0 0 18px;
  background: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  overflow: hidden;
  box-shadow: none;
}
.tp-ls__player .tp-embed--twitch{ aspect-ratio: 16 / 9; }
/* Consent-Button im Player: Systembutton statt Alt-Audit-Werte */
.tp-ls .tp-ls__player .tp-btn--primary{
  font-family: var(--nb-font-text) !important;
  font-weight: 600 !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  border-radius: var(--nb-r-ui) !important;
}

/* ── Kanal-Zeile unter dem Player ── */
.tp-ls__channel-info{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 28px;
  margin-bottom: 56px;
}
.tp-ls__channel-link,
.tp-ls__channel-link:link, .tp-ls__channel-link:visited{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1;
  color: var(--nb-ondark) !important;
  text-decoration: none;
  padding: 13px 22px;
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--nb-r-ui);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-ls__channel-link:hover{
  background: rgba(243,239,232,.07);
  border-color: var(--nb-ondark);
  color: var(--nb-ondark) !important;
  transform: translateY(-2px);
}
.tp-ls__channel-link svg{ width: 18px; height: 18px; flex: none; }

/* ── Hinweistext (Stream-Produktion ehrenamtlich …): Inter, lesbar, ruhig ── */
.tp-ls__hint{
  display: block !important;              /* Audit-Block kontert (inline-flex) */
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body) !important;             /* Audit-Block kontert */
  font-style: normal !important;
  line-height: var(--tp-lh-body) !important;
  color: var(--nb-ink-2) !important;      /* Audit-Block kontert; --nb-ink-2
                                             schaltet je Material selbst um */
  max-width: 68ch;
  margin: var(--tp-s5) 0 0;
}
.tp-ls__hint::before{ content: none !important; }  /* altes „i"-Icon des Audit-Blocks aus */
.tp-ls__channel-info .tp-ls__hint{
  margin: 0;
  flex: 1 1 320px;
  max-width: 44em;
}

/* ── Archiv leer: ruhige dunkle Karte, Mono-Label statt Emoji ── */
.tp-ls__offline{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 28px;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%) !important;  /* Audit-Block kontert */
  border: 1px solid var(--nb-hair-d) !important;                                   /* Audit-Block kontert */
  border-radius: var(--nb-r-fl);
  text-align: center;
  margin-bottom: 56px;
}
/* Emoji nicht ausblenden (Hausregel), sondern zurücknehmen: kleines,
   stilles Zeichen über dem Mono-Label. */
.tp-ls__offline-icon{
  display: block;
  font-size: 26px; line-height: 1;
  opacity: .45;
  filter: grayscale(1);
  order: -1;
}
.tp-ls__offline::before{
  content: "Archiv";
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nb-ondark-3);
}
.tp-ls__offline p{
  font-size: var(--nb-fs-body);
  line-height: 1.65;
  color: var(--nb-ondark-2);
  max-width: 44ch;
  margin: 0;
}

/* ── Replays: dunkle Karten im nb-card-Ton ── */
.tp-ls__replays{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nb-gap);
  margin: 0 0 56px;
}
@media (min-width: 900px){
  .tp-ls__replays{ grid-template-columns: 1fr 1fr; }
}
.tp-ls__replay{
  display: flex;
  flex-direction: column;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  padding: 24px 24px 22px;
  overflow: hidden;
}
.tp-ls__replay-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--nb-hair-d);
}
.tp-ls__replay-head h3{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-s);
  line-height: 1.14;
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0;
}
.tp-ls__replay-head time{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ondark-3);
  white-space: nowrap;
}

/* ── Off-Air-Zustand (scheduled): ruhige dunkle Karte, kein Radar-Theater ── */
/* Die Off-Air-Karte lief über die volle Satzspiegelbreite (1236 px) und
   hatte darin nur vier kurze Zeilen — viel Fläche, wenig Inhalt. Auf
   840 px zentriert wirkt sie wie ein Gerät, nicht wie eine leere Bühne.
   (Nur diese Karte; der Player in .tp-ls__player bleibt volle Breite.) */
.tp-ls-onair{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  max-width: 840px;
  margin-inline: auto;
  padding: var(--tp-s7) var(--tp-s4);
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  text-align: center;
}
/* ── Radar: WIEDER SICHTBAR ────────────────────────────────────────────────
   Stand vorher auf display:none. Das verstößt gegen die Hausregel (keine
   bestehenden Klassen ausblenden) und hat der Seite ihr einziges Bildmotiv
   genommen — im scheduled-Zustand steht sonst nichts als Text auf der Seite.
   Jetzt: eine Schüssel, drei auslaufende Ringe. Ruhig, langsam, rot nur als
   Signalpunkt. Markup unverändert (__radar > __dish + 3× __wave). */
.tp-ls-onair__radar{
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  margin: var(--tp-s1) 0 var(--tp-s2);
  /* Feste Skalenringe: die Schüssel steht auch zwischen zwei Impulsen als
     Gerät da. Ohne sie wäre die Fläche in der Animationspause leer. */
  border: 1px solid rgba(243,239,232,.16);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 43px, rgba(243,239,232,.11) 43px 44px, transparent 44px),
    radial-gradient(circle, transparent 0 21px, rgba(243,239,232,.08) 21px 22px, transparent 22px);
}
.tp-ls-onair__dish{
  position: relative; z-index: 2;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tp-red);
}
.tp-ls-onair__wave{
  position: absolute; top: 50%; left: 50%;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border: 1px solid rgba(255,110,118,.55);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.12);
}
html.tp-anim .tp-ls.is-live .tp-ls-onair__wave{
  animation: tpLsRadar 3.6s var(--nb-ease) infinite;
}
html.tp-anim .tp-ls.is-live .tp-ls-onair__wave:nth-child(3){ animation-delay: 1.2s; }
html.tp-anim .tp-ls.is-live .tp-ls-onair__wave:nth-child(4){ animation-delay: 2.4s; }
/* Ohne Animation (oder solange die Sektion nicht „live" ist) stehen die
   Ringe als stille konzentrische Kreise da — kein leeres Loch. */
html:not(.tp-anim) .tp-ls-onair__wave,
html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair__wave{ opacity: .5; }
html:not(.tp-anim) .tp-ls-onair__wave:nth-child(2),
html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair__wave:nth-child(2){ transform: scale(.34); }
html:not(.tp-anim) .tp-ls-onair__wave:nth-child(3),
html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair__wave:nth-child(3){ transform: scale(.67); }
html:not(.tp-anim) .tp-ls-onair__wave:nth-child(4),
html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair__wave:nth-child(4){ transform: scale(1); }
@keyframes tpLsRadar{
  0%  { opacity: 0;   transform: scale(.12); }
  12% { opacity: .75; }
  100%{ opacity: 0;   transform: scale(1); }
}
.tp-ls-onair__sign{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 9px;
  background: transparent;
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-ui);
  box-shadow: none;
}
.tp-ls-onair__word{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nb-ondark-2);
  text-shadow: none;
}
.tp-ls-onair__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nb-red);
  box-shadow: none;
}
.tp-ls-onair__msg{
  margin: 0;
  font-size: var(--nb-fs-body);
  line-height: 1.65;
  color: var(--nb-ondark-2);
  max-width: 44ch;
}
.tp-ls-onair__status{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ondark-3);
}
.tp-ls-onair__status-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nb-ondark-3);
  animation: none;
}

/* Entrance (Script im Shortcode setzt .is-live auf .tp-ls) */
html.tp-anim .tp-ls-onair{
  transition: opacity .6s var(--nb-ease), transform .6s var(--nb-ease);
}
html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair{ opacity: 0; transform: translateY(22px); }
html.tp-anim .tp-ls.is-live .tp-ls-onair__dot{ animation: tpRecBlink 2.2s ease-in-out infinite; }

/* ── Sendeplan: eigenes Kapitel auf Sand ──────────────────────────────────
   Der Plan ist eine Programmtafel: eine linke Achse für Kopf und alle
   Zeilen. Deshalb steht er nicht mehr unter dem mittigen Kapitelkopf des
   dunklen Kapitels, sondern in einer eigenen hellen Sektion. Alle Farben
   laufen jetzt über --nb-ink*/--tp-red-ink und stimmen damit auf hellem
   Grund automatisch. */
.tp-ls__schedule{ margin-top: 0; }
.tp-ls__schedule-head{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.14;
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0 0 var(--tp-s3);
}
.tp-ls__schedule-head::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: 0 0 var(--tp-s3);
}
.tp-ls__sched-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  border-top: 1px solid var(--nb-hair-l);
}
/* Kadence: `.single-content ol` setzt padding-left:2em und schlägt eine
   einklassige Regel — sonst stünde die Liste 34 px neben ihrem Kopf. */
.tp-ls .tp-ls__sched-list{ padding-left: 0; padding-inline-start: 0; }
.tp-ls__sched-item{
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  gap: 6px 28px;
  align-items: baseline;
  padding: var(--tp-s3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nb-hair-l);
  border-radius: 0;
}
.tp-ls__sched-when{
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
}
.tp-ls__sched-day{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-lead);
  line-height: 1.1;
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ink);
}
.tp-ls__sched-date{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono) !important;    /* Audit-Block kontert */
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ink-3) !important;          /* Audit-Block kontert */
}
.tp-ls__sched-time{
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--tp-red-ink);   /* auf Sand 4.7:1; im Dunkeln automatisch --red-lift */
}
.tp-ls__sched-what{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--nb-ink-2);
}

@media (max-width: 640px){
  .tp-ls__sched-item{ grid-template-columns: 1fr; gap: 4px; }
  .tp-ls__channel-info{ flex-direction: column; }
  .tp-ls__channel-info .tp-ls__hint{ max-width: none; }
  /* Die Statuszeile bricht auf schmalen Schirmen auf zwei Zeilen. Als
     Flex-Zeile saß der Signalpunkt dann ganz links neben einem mittig
     gesetzten Text und sah aus wie ein verirrter Punkt. Gestapelt steht
     er mittig über der Zeile — eine Achse. */
  .tp-ls-onair__status{ flex-direction: column; gap: var(--tp-s1); text-align: center; }
}

/* ═══════════ LEGAL (Impressum + Datenschutz) — Papier & Tinte ═══════════
   Markup: section.tp-sec(.tp-sec--light).tp-legal > .tp-c.tp-legal__inner
   Ausrichtung: EIN Block, alles linksbündig. Keine zentrierten Köpfe. */

.tp-legal{
  background: var(--nb-paper);
  color: var(--nb-ink) !important;   /* kontert „.tp-sec--light{color:--tp-schwarz!important}" im Audit-Block */
}
.tp-legal__inner{
  max-width: 68ch;
  margin: 0 auto;
}
.tp-legal [id]{ scroll-margin-top: 96px; }   /* Anker wie #foto */

/* Überschriften: Anton, linksbündig, Hairline als einziges Trennmittel */
.tp-legal :is(h1, h2, h3, h4){ color: var(--nb-ink); }
.tp-legal h2{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: left;
  color: var(--nb-ink);
  margin: 64px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nb-hair-l);
}
.tp-legal h2:first-child{ margin-top: 0; }
.tp-legal h3{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-s);
  line-height: 1.14;
  letter-spacing: .014em;
  text-transform: uppercase;
  text-align: left;
  color: var(--nb-ink);
  margin: 36px 0 12px;
  padding: 0;
  border: 0;
}

/* Fließtext: Inter 17px, Tinte-2, lange URLs brechen sauber */
.tp-legal p,
.tp-legal li{
  font-family: var(--nb-font-text);
  font-size: var(--nb-fs-body);
  line-height: 1.65;
  color: var(--nb-ink-2);
  margin: 0 0 14px;
  overflow-wrap: break-word;
}
.tp-legal p strong,
.tp-legal li strong{ color: var(--nb-ink); font-weight: 600; }

/* Links: Tinte mit rotem Unterstrich (Rot = Signal) */
.tp-legal a{
  color: var(--nb-ink);
  text-decoration: underline;
  text-decoration-color: var(--nb-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: 0;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.tp-legal a:hover{
  color: var(--nb-red-dark);
  text-decoration-color: var(--nb-red-dark);
  border-bottom: 0;
}

/* Listen: Hairline-Zeilen mit roter Raute */
.tp-legal ul,
.tp-legal ol{ margin: 4px 0 22px; padding: 0; }
.tp-legal ul{
  list-style: none;
  border-top: 1px solid var(--nb-hair-l);
}
.tp-legal ul li{
  position: relative;
  padding: 10px 0 10px 22px;
  margin: 0;
  border-bottom: 1px solid var(--nb-hair-l);
}
.tp-legal ul li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 7px; height: 7px;
  background: var(--nb-red);
  transform: rotate(45deg);
}
.tp-legal ol{
  list-style: decimal;
  margin-left: 1.3em;
}
.tp-legal ol li{ margin: 0 0 8px; padding-left: 6px; }

/* Inline-Code (burst_uid, tp_consent_proxy …) */
.tp-legal code{
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: .02em;
  color: var(--nb-ink);
  background: var(--nb-paper-deep);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-ui);
  padding: 2px 7px;
}

.tp-legal hr{
  margin: 56px 0 22px;
  border: 0;
  border-top: 1px solid var(--nb-hair-l);
}

/* TODO-Marker: Mono-Chip, Rot als Signal (kein Orange mehr) */
.tp-legal-todo{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-red-dark);
  background: rgba(227,6,19,.07);
  border: 1px solid rgba(227,6,19,.32);
  border-radius: var(--nb-r-ui);
  padding: 3px 9px 2px;
}

/* Meta-Karte (Webdesign-Credit): helle Karte, Inter */
.tp-legal-meta{
  margin-top: 56px;
  padding: 20px 24px;
  background: var(--nb-surface);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-fl);
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body);
  line-height: 1.6;
  color: var(--nb-ink-2);
}
.tp-legal-meta strong{
  color: var(--nb-ink);
  font-weight: 600;
  margin-right: .35rem;
}

/* „Stand: Mai 2026"-Zeile (Inline-Style im Markup) → Mono-Etikett
   !important nötig, weil font-size/opacity inline gesetzt sind */
.tp-legal hr + p[style]{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ink-3);
  opacity: 1 !important;
  margin: 0;
}

@media (max-width: 640px){
  .tp-legal h2{ margin-top: 48px; }
}

/* ═══════════ Reduced Motion: alles still ═══════════ */
@media (prefers-reduced-motion: reduce){
  .tp-ls .tp-sec-head__num,
  .tp-ls__live-dot,
  .tp-ls-onair__dot,
  html.tp-anim .tp-ls.is-live .tp-ls-onair__dot{ animation: none; }
  html.tp-anim .tp-ls:not(.is-live) .tp-ls-onair{ opacity: 1; transform: none; transition: none; }
}