/* ==========================================================================
   Wir sind Theater — Theatergruppe des Heimat- und Verkehrsvereins Elsen e.V.
   Farben aus dem Vereinslogo: Wappenrot, Schwarz, Weiss.
   ========================================================================== */

:root {
  --rot:         #e20816;
  --rot-hell:    #fd0018;
  --rot-dunkel:  #b00512;
  /* Rosatoene aus dem Farbverlauf des Programmhefts 2026, aus dem PDF
     gerechnet und ueber dessen ICC-Profil (Coated FOGRA39) nach sRGB
     gewandelt — nicht aus einem Bildschirmfoto geschaetzt. */
  --rosa:        #e73a88;
  --rosa-licht:  #f2a3c7;
  --rosa-hell:   #ffd3e4;
  --schwarz:     #121212;
  --grau-text:   #55504e;
  --grau-linie:  #ddd8d6;
  --grau-flaeche:#f6f3f2;
  --weiss:       #ffffff;

  --font-display: "Georgia", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 60rem;
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
img { max-width: 100%; display: block; height: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { flex: 1 0 auto; }

/* --- Sprungmarke für Tastatur- und Screenreader-Nutzung ------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--schwarz);
  color: var(--weiss);
  padding: .75rem 1.25rem;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
}

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: .4rem; }

/* Keine eigene Zeilenbreite fuer Absaetze: sonst enden sie bei 65 Zeichen,
   waehrend die Bilder die volle Spaltenbreite nutzen, und die rechte Kante
   springt. Begrenzt wird die Breite allein durch .wrap. */
p { text-wrap: pretty; }
p + p, p + ul, ul + p { margin-top: 1rem; }

a { color: var(--rot-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--rot); }

/* Durchgehend sichtbarer Fokus — zentral für Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
  border-radius: 2px;
}

.lead { font-size: 1.15rem; color: var(--grau-text); }

/* --- Kopfbereich ---------------------------------------------------------- */

.site-header {
  position: relative;
  border-bottom: 3px solid var(--schwarz);
  background: var(--weiss);
  /* Bezugspunkt fuer das aufgeklappte Menue und zugleich die Ebene, auf
     der der Kopf ueber dem Seiteninhalt liegt. */
  z-index: 50;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .5rem;
}
/* Schiebt Logo und Menueknopf gemeinsam an den rechten Rand; mit
   space-between stuende das Logo sonst allein in der Mitte. */
.logo-link { margin-left: auto; }

/* Links der Vereinsbezug, rechts das Logo (laut Spezifikation) */
.header-claim {
  font-family: var(--font-display);
  font-size: .85rem;
  line-height: 1.3;
  color: var(--grau-text);
  margin: 0;
  max-width: 30ch;
}
.header-claim strong {
  display: block;
  color: var(--schwarz);
  font-size: 1rem;
  letter-spacing: .01em;
}

@media (max-width: 30rem) {
  .header-claim { font-size: .76rem; }
  .header-claim strong { font-size: .9rem; }
  .logo-link img { width: 41px; }
}

/* Ticket-Schaltflaeche (nur noch im Seiteninhalt, nicht mehr im Kopf) */
.ticket-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--rot);
  color: var(--weiss);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: .7rem 1.15rem;
  border: 2px solid var(--rot);
  border-radius: 3px;
  transition: background-color .15s ease;
}
.ticket-link:hover,
.ticket-link:focus {
  background: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
  color: var(--weiss);
}
.ticket-link svg { flex-shrink: 0; }

.logo-link { display: block; flex-shrink: 0; }
.logo-link img { width: 55px; }

/* --- Navigation ----------------------------------------------------------- */

/* Die Schaltflaeche steht im HTML auf hidden und wird erst von menue.js
   eingeblendet — ohne JavaScript waere sie wirkungslos. */
.menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Quadratisch und zugleich gross genug als Ziel fuer den Finger:
     44 Pixel sind das in den WCAG genannte Mindestmass. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 2px solid var(--grau-linie);
  border-radius: 3px;
  color: var(--schwarz);
  cursor: pointer;
}
.menue-knopf:hover { border-color: var(--rot); color: var(--rot); }

/* Drei Balken, die beim Oeffnen zum Kreuz werden. Die mittlere Linie
   blendet aus, die aeusseren wandern zur Mitte und drehen sich. */
.menue-balken {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background-color .15s ease;
}
.menue-balken::before,
.menue-balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .15s ease;
}
.menue-balken::before { top: -7px; }
.menue-balken::after  { top: 7px; }

.menue-knopf[aria-expanded="true"] .menue-balken { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-balken::before {
  transform: translateY(7px) rotate(45deg);
}
.menue-knopf[aria-expanded="true"] .menue-balken::after {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  border-top: 1px solid var(--grau-linie);
  background: var(--grau-flaeche);
}

/* Erst wenn menue.js laeuft, legt sich das Menue ueber den Seiteninhalt,
   statt ihn nach unten zu schieben. Ohne das Skript bleibt es sichtbar im
   Fluss — schwebend wuerde es den Inhalt dauerhaft verdecken, denn dann
   kann es ja niemand zuklappen. */
.js-menue .site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--grau-linie);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
}
.site-nav ul {
  list-style: none;
  padding-block: .35rem;
}
.site-nav li + li { border-top: 1px solid var(--grau-linie); }
.site-nav a {
  display: block;
  padding: .85rem 0 .85rem .75rem;
  color: var(--schwarz);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  /* Der Streifen liegt auch bei den uebrigen Punkten an, nur durchsichtig,
     damit die Beschriftungen auf einer Linie bleiben. */
  border-left: 4px solid transparent;
}
.site-nav a:hover { color: var(--rot); }
.site-nav a[aria-current="page"] {
  border-left-color: var(--rot);
  color: var(--rot);
}

/* --- Titelbereich --------------------------------------------------------- */

.hero {
  background: var(--schwarz);
  color: var(--weiss);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.hero h1 { color: var(--weiss); }
.hero h1 em {
  color: var(--rot-hell);
  font-style: normal;
}
.hero p { color: #d8d2d0; margin-top: 1rem; }
.hero .kicker {
  color: var(--rot-hell);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .75rem;
}

/* Der Farbverlauf des Programmhefts statt der schwarzen Flaeche — nur auf
   der Seite zum aktuellen Stueck, die Startseite behaelt ihren Titelbereich.
   Die Stopps sind die Verlaufsfunktion aus dem PDF, abgetastet von Rot bis
   zu dem hellen Rosa, auf dem Bernie und Sigrid im Heft stehen. Rechts
   schliesst das Foto an, nach links laeuft der Verlauf ins Rot weiter. */
.hero-verlauf {
  background: linear-gradient(107deg,
    #e02126  0%, #e22a45 12%, #e63368 25%, #e73a88 38%, #e84a93 50%,
    #eb66a1 62%, #ef84b3 75%, #f2a3c7 88%, #f6c3dc 100%);
}
.hero-verlauf h1 em { color: var(--rosa-hell); }
.hero-verlauf .kicker,
.hero-verlauf p { color: var(--weiss); }
/* Der Fliesstext liegt ueber dem Rosa, wo Weiss nur rund 3,9:1 traegt.
   Groesser und halbfett zaehlt er als grosse Schrift, fuer die WCAG AA
   3:1 genuegen — kleiner und normal waeren 4,5:1 noetig. */
.hero-verlauf .lead { font-size: 1.2rem; font-weight: 600; }

/* --- Inhaltsabschnitte ---------------------------------------------------- */

section { padding-block: clamp(2.25rem, 6vw, 3.5rem); }
section + section { border-top: 1px solid var(--grau-linie); }

.stage-note {
  border-left: 5px solid var(--rot);
  background: var(--grau-flaeche);
  padding: 1.15rem 1.35rem;
  margin-top: 1.5rem;
}
.stage-note p { margin: 0; }

/* --- Terminliste ---------------------------------------------------------- */

.termine { list-style: none; display: grid; gap: .85rem; margin-top: 1.5rem; }

.termin {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--grau-linie);
  border-left: 5px solid var(--rot);
  padding: 1rem 1.25rem;
  background: var(--weiss);
}

.termin-datum {
  font-family: var(--font-display);
  line-height: 1.1;
  text-align: center;
}
.termin-datum .tag {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
}
.termin-datum .monat {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grau-text);
}

.termin-info .wochentag { font-weight: 700; }
.termin-info p { font-size: .93rem; color: var(--grau-text); margin: .15rem 0 0; }

.status {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .6rem;
  border-radius: 3px;
  white-space: nowrap;
}
.status-rest { background: #fff3cd; color: #7a5c00; border: 1px solid #e0c766; }
.status-aus  { background: #f1eeed; color: var(--grau-text); border: 1px solid var(--grau-linie); }

.termin.ist-ausverkauft { border-left-color: var(--grau-linie); }

@media (max-width: 36rem) {
  .termin { grid-template-columns: 1fr; gap: .5rem; text-align: left; }
  .termin-datum { text-align: left; }
  .termin-datum .tag { display: inline; font-size: 1.3rem; }
  .termin-datum .monat { display: inline; font-size: .95rem; letter-spacing: 0; text-transform: none; }
  .status { justify-self: start; }
}

/* --- Infotabelle ---------------------------------------------------------- */

dl.fakten { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 40rem) {
  dl.fakten { grid-template-columns: max-content 1fr; gap: .85rem 2rem; }
}
dl.fakten dt {
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grau-text);
}
dl.fakten dd { margin: 0; }

/* --- Ensemble-Tabelle ----------------------------------------------------- */

.ensemble {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.25rem;
  text-align: left;
  /* Feste Spaltenbreiten, damit Ensemble- und Team-Tabelle gleich aussehen.
     Ohne dies richtet sich die Trennung nach dem laengsten Inhalt und
     sitzt in beiden Tabellen woanders. */
  table-layout: fixed;
}
.ensemble th:first-child { width: 42%; }
.ensemble caption {
  text-align: left;
  color: var(--grau-text);
  font-size: .95rem;
  padding-bottom: .75rem;
}
.ensemble th,
.ensemble td {
  padding: .55rem 1rem .55rem 0;
  border-bottom: 1px solid var(--grau-linie);
  vertical-align: top;
}
.ensemble thead th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grau-text);
  border-bottom: 2px solid var(--schwarz);
}
.ensemble tbody th {
  font-weight: 400;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.ensemble tbody td { font-weight: 600; }

/* Auch auf schmalen Bildschirmen bleiben Rolle und Besetzung nebeneinander;
   gestapelt wuerde die Tabelle doppelt so lang. Stattdessen werden die
   Abstaende und die Schrift kleiner und lange Namen duerfen umbrechen. */
@media (max-width: 34rem) {
  .ensemble th:first-child { width: 48%; }
  .ensemble th,
  .ensemble td {
    padding: .5rem .6rem .5rem 0;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ensemble tbody th { font-size: .95rem; }
  .ensemble tbody td { font-size: .95rem; }
  .ensemble thead th { font-size: .72rem; letter-spacing: .05em; }
}

/* --- Dank-Liste ----------------------------------------------------------- */

ul.dank {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: .6rem;
}
ul.dank li { padding-left: 0; }

/* --- Bilder --------------------------------------------------------------- */

.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
img.hero-bild { width: 100%; }

/* Das Motiv des Programmhefts liegt als Wasserzeichen hinter der
   Inhaltsangabe. Rein dekorativ, daher als Hintergrund und nicht als
   <img> mit alt-Text. */
.handlung { position: relative; }
.handlung::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/herz-band-schere.svg") no-repeat center top;
  background-size: min(30rem, 88%) auto;
  opacity: .6;
  pointer-events: none;
}
.handlung > * { position: relative; }

figure.bild { margin: 2rem 0 0; }
figure.bild img { width: 100%; }
figure.bild figcaption {
  margin-top: .7rem;
  font-size: .92rem;
  color: var(--grau-text);
  border-left: 5px solid var(--rot);
  padding-left: .8rem;
}

ul.sponsoren {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
  align-items: center;
}
ul.sponsoren img {
  width: 100%;
  max-width: 14rem;
  height: auto;
}

p.veranstalter {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--grau-text);
}
p.veranstalter img { width: 2.75rem; height: auto; flex: none; }

/* --- Schaltflächen -------------------------------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--rot);
  background: var(--rot);
  color: var(--weiss);
  border-radius: 3px;
  transition: background-color .15s ease;
}
.btn:hover, .btn:focus { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--weiss); }

.btn-outline { background: transparent; color: var(--rot-dunkel); }
.btn-outline:hover, .btn-outline:focus { background: var(--rot); color: var(--weiss); }

/* --- Fußbereich ----------------------------------------------------------- */

.site-footer {
  background: var(--schwarz);
  color: #c9c3c1;
  padding-block: 2rem;
  margin-top: 2rem;
  font-size: .93rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer a { color: var(--weiss); text-decoration: underline; }
.site-footer a:hover { color: var(--rot-hell); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }
.footer-verein { font-size: .88rem; color: #9b9391; }

/* --- Hinweis auf externe Links (barrierefrei kenntlich) ------------------- */

.extern::after {
  content: "";
  display: inline-block;
  width: .65em; height: .65em;
  margin-left: .35em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ticket-link.extern::after { display: none; }

/* --- Nur für Screenreader ------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Hoher Kontrast / Druck ---------------------------------------------- */

@media (prefers-contrast: more) {
  :root { --grau-text: #332f2e; --grau-linie: #999; }
}

@media print {
  .site-nav, .menue-knopf, .ticket-link, .btn-row, .site-footer { display: none; }
  .hero { background: none; color: #000; }
  .hero h1, .hero p { color: #000; }
  body { font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}