/* ------------------------------------------------------------------
   live.css  ·  Nur fuer /live/. Ergaenzt legal.css, ueberschreibt nichts.
   Eigene Datei, weil die Content-Security-Policy style-src 'self' setzt:
   ein <style>-Block in der Seite wuerde geblockt, ohne Fehlermeldung.
   ------------------------------------------------------------------ */

/* Ohne JavaScript blieben die Textbloecke unsichtbar, weil legal.css
   .block auf opacity:0 setzt und erst legal.js sie sichtbar schaltet.
   Der frühere <noscript><style>-Behelf wird von der CSP verworfen.
   Deshalb: das HTML traegt die Klasse, live.js nimmt sie weg. Laeuft
   kein JavaScript, bleibt sie stehen und die Bloecke sind sichtbar. */
.kein-js .block { opacity: 1; transform: none; }

/* ---------------------------------------------------- Terminkarte im Kopf */
.termin {
  display: block;
  margin-top: 30px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(212, 179, 71, 0.45);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.termin:hover,
.termin:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}
.termin:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.termin-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.termin-datum {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #fff;
}

.termin-zeit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--on-dark);
}

.termin-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.termin-fakt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(212, 179, 71, 0.15);
  border: 1px solid rgba(212, 179, 71, 0.4);
  color: var(--gold-light);
  white-space: nowrap;
}

/* Der Preis ist das eine, was sofort sitzen muss. Deshalb gefuellt. */
.termin-fakt.frei {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 600;
}

.termin-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-light);
}
.termin-pfeil { transition: transform 0.2s ease; }
.termin:hover .termin-pfeil { transform: translateY(3px); }

@media (max-width: 640px) {
  .termin { padding: 20px; margin-top: 24px; }
  .termin-fakt { font-size: 10px; padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .termin,
  .termin-pfeil { transition: none; }
  .termin:hover,
  .termin:focus-visible { transform: none; }
  .termin:hover .termin-pfeil { transform: none; }
}

@media print {
  .termin {
    background: none;
    border: 1pt solid #000;
    border-left: 3pt solid #000;
    transform: none;
  }
  .termin-label,
  .termin-zeit,
  .termin-cta { color: #333; }
  .termin-datum { color: #000; font-size: 16pt; }
  .termin-fakt {
    background: none;
    border: 0.5pt solid #666;
    color: #333;
  }
  .termin-fakt.frei { background: none; color: #000; }
  .termin-pfeil { display: none; }
}