/* ===========================================================================
   Ergänzende Styles für Termine und Kartenvorverkauf
   Wird zusätzlich zu styles.css geladen. Nutzt deren Farbvariablen.
   =========================================================================== */

/* --- Band "Nächster Termin" (Startseite, Vortragsseite) ------------------- */
.termin-band-wrap { padding: 0 0 1rem; }

.termin-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 1.5rem;
  border: 1px solid rgba(216, 182, 117, .42);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(25, 69, 86, .55), rgba(8, 27, 38, .7));
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.termin-band:hover { transform: translateY(-2px); border-color: var(--gold-strong); }
.termin-band-label {
  color: var(--gold-strong);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.termin-band-text { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.termin-band-text strong {
  display: block;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.termin-band-cta {
  color: var(--night);
  background: var(--gold);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-weight: 750;
  font-size: .92rem;
  white-space: nowrap;
}

/* --- Terminliste --------------------------------------------------------- */
.termin-card { grid-template-columns: 5.4rem 1fr auto; align-items: center; }
.termin-card.ist-abgesagt { opacity: .55; }
.termin-card.ist-abgesagt h3 { text-decoration: line-through; }

.termin-datum {
  display: grid;
  justify-items: center;
  padding: .7rem .4rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4, 16, 24, .5);
  line-height: 1.1;
}
.termin-tag { font-family: Georgia, serif; font-size: 2rem; color: var(--gold-strong); }
.termin-monat {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.termin-jahr { margin-top: .2rem; font-size: .7rem; color: var(--muted); }

.termin-info h3 { margin: .45rem 0 .5rem; }
.termin-info p { margin: 0 0 .25rem; color: var(--muted); font-size: .95rem; }
.termin-hinweis { color: var(--gold-strong) !important; font-weight: 700; }

.termin-aktion { display: grid; gap: .7rem; justify-items: end; text-align: right; }
.termin-preis {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  color: var(--ink);
}
.termin-preis small {
  display: block;
  margin-top: .2rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .76rem;
  color: var(--muted);
}

/* --- Kopf der Terminseite ------------------------------------------------ */
.termin-hero { padding: 6rem 0 3rem; }
.termin-hero .eyebrow { margin-bottom: .9rem; }
.termin-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); max-width: 18ch; }
.termin-hero .termin-hero-meta {
  margin: 1.8rem 0 0;
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: #e4e1d8;
}
.termin-hero .termin-hero-meta > span { display: block; }
.termin-hero .termin-hero-meta .ort { color: var(--muted); font-size: 1.05rem; font-family: Inter, system-ui, sans-serif; margin-top: .5rem; }
.termin-hero .termin-hero-meta .ort span { display: inline; }
.termin-hero .actions { justify-content: center; }

/* --- Faktenkacheln ------------------------------------------------------- */
.termin-fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 0;
}
.termin-fakten div {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(4, 16, 24, .42);
}
.termin-fakten dt {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.termin-fakten dd {
  margin: .45rem 0 0;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
}

/* --- Ticketbox ----------------------------------------------------------- */
.ticket-box {
  margin: 3rem 0;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid rgba(216, 182, 117, .34);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(25, 69, 86, .45), rgba(7, 24, 34, .78));
  box-shadow: var(--shadow);
}
.ticket-box > h2 { margin-top: 0 !important; font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important; }
.ticket-optionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
.ticket-option {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(4, 16, 24, .45);
}
.ticket-option.empfohlen { border-color: var(--gold); background: rgba(216, 182, 117, .07); }
.ticket-option h3 { margin: .6rem 0 .3rem; font-size: 1.35rem; }
.ticket-option .preis {
  font-family: Georgia, serif;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--gold-strong);
}
.ticket-option p { color: var(--muted); font-size: .93rem; margin: .5rem 0 1.4rem; }
.ticket-option .button { margin-top: auto; }
.ticket-option .button.ist-gesperrt {
  opacity: .5;
  cursor: default;
  pointer-events: none;
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  border-color: var(--line);
}
.ticket-fussnote { margin: 1.6rem 0 0 !important; font-size: .85rem !important; color: var(--muted) !important; }

/* --- Anfahrt ------------------------------------------------------------- */
.anfahrt-karte {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
}
.anfahrt-karte p { margin: 0; }
.anfahrt-karte strong { display: block; color: var(--ink); font-size: 1.1rem; }

@media (max-width: 1060px) {
  .termin-fakten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .termin-band {
    grid-template-columns: 1fr;
    gap: .8rem;
    border-radius: 22px;
    text-align: left;
  }
  .termin-band-cta { justify-self: start; }
  .termin-card { grid-template-columns: 1fr; gap: .9rem; }
  .termin-datum {
    grid-auto-flow: column;
    justify-content: start;
    gap: .5rem;
    align-items: baseline;
    width: fit-content;
    padding: .5rem .9rem;
  }
  .termin-tag { font-size: 1.5rem; }
  .termin-aktion { justify-items: start; text-align: left; }
  .ticket-optionen { grid-template-columns: 1fr; }
  .anfahrt-karte { grid-template-columns: 1fr; }
}