/* ==========================================================================
   Festspiel-Countdown – Stylesheet
   Mobile first. Ab 720px zweispaltig, ab 1100px volles Layout.
   ========================================================================== */

:root {
  --bg:        #0f0d0c;
  --bg-2:      #17130f;
  --panel:     rgba(255, 252, 245, 0.045);
  --panel-2:   rgba(255, 252, 245, 0.075);
  --line:      rgba(212, 175, 55, 0.18);
  --line-soft: rgba(255, 252, 245, 0.09);

  --gold:      #d4af37;
  --gold-soft: #e8cf86;
  --rot:       #e2001a;
  --rot-soft:  #ff5a4d;
  --gruen:     #4d7c5a;

  --text:      #f5f0e6;
  --text-dim:  #b9b0a0;
  --text-mute: #8b8274;

  --r:   16px;
  --r-s: 10px;

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Warmer Lichtschein über der ganzen Seite */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(212, 175, 55, .10), transparent 62%),
    radial-gradient(90% 55% at 85% 100%, rgba(226, 0, 26, .07), transparent 60%);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; margin: 0; }

a { color: var(--gold-soft); }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ============================== Kopfzeile ============================== */

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.brk-mark {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
}
.brk-mark svg { width: 30px; height: 30px; }

.topbar .who { line-height: 1.25; min-width: 0; }
.topbar .who b { display: block; font-size: .95rem; letter-spacing: .02em; }
.topbar .who span { display: block; font-size: .72rem; color: var(--text-mute); letter-spacing: .09em; text-transform: uppercase; }

.jubilaeum {
  margin-left: auto;
  flex: none;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* ================================ Hero ================================= */

.hero {
  position: relative;
  padding: 8px 0 0;
  overflow: hidden;
}

/* Das gezeichnete Festspielhaus */
.haus-szene {
  position: relative;
  width: 100%;
  display: block;
  margin-top: -6px;
}
.haus-szene svg { display: block; width: 100%; height: auto; }

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 26px 18px 4px;
}

.hero .kicker {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.hero h1 {
  font-size: clamp(1.85rem, 8.5vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fff8e8 10%, var(--gold) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .sub {
  color: var(--text-dim);
  font-size: clamp(.9rem, 3.6vw, 1.05rem);
  max-width: 42ch;
  margin: 0 auto;
}

.hero-ziel {
  margin-top: 16px;
  font-size: .82rem;
  color: var(--text-mute);
}

.hero[hidden] { display: none; }
.hero-ziel b { color: var(--text-dim); font-weight: 600; }

/* ================================ Reiter =============================== */

/* Kopfzeile und Reiter kleben als ein Block oben – auf jedem Reiter */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 13, 12, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;          /* Notausgang, falls die Beschriftung mal wächst */
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* Die kleine Form von Haus und Countdown – sitzt fest im Kopfblock und
   bleibt damit beim Scrollen und auf jedem Reiter oben stehen. */
.kopf-mini {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 auto;              /* mittig zwischen Team-Name und Jubiläums-Chip */
  min-width: 0;
}
body.kompakt .kopf-mini { display: flex; }

.mini-haus { flex: none; width: 44px; height: auto; }

.mini-text {
  font-family: var(--serif);
  font-size: clamp(.88rem, 3.7vw, 1.08rem);
  line-height: 1.15;
  color: var(--gold-soft);
  white-space: nowrap;
}

/* Auf schmalen Displays weicht der Jubiläums-Chip dem Countdown */
body.kompakt .jubilaeum { display: none; }
@media (min-width: 620px) {
  body.kompakt .jubilaeum { display: inline-block; }
}

/* Beim Scrollen wird die Kopfzeile schmaler */
.topbar, .brk-mark { transition: padding .25s ease, width .25s ease, height .25s ease; }
body.kompakt .topbar { padding-top: 8px; padding-bottom: 4px; }
body.kompakt .topbar .who span { display: none; }
body.kompakt .brk-mark { width: 24px; height: 24px; }
body.kompakt .brk-mark svg { width: 24px; height: 24px; }

.tab {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: clamp(.71rem, 3.05vw, .86rem);
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 4px;
  min-height: 42px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s, background .18s, border-color .18s;
}
/* Startseiten-Reiter: nur das Haus-Symbol, spart Platz für die vier Wörter */
.tab-icon {
  flex: 0 0 auto;
  width: 48px;
  padding: 8px 0;
}
.tab-icon svg {
  display: block;
  width: 21px;
  height: auto;
  margin: 0 auto;
}

.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tab[aria-selected="true"] {
  color: var(--bg);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(212, 175, 55, .3);
}

/* ============================== Abschnitte ============================= */

section { padding: 34px 0 0; }
.panel[hidden] { display: none; }

.sec-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sec-kopf h2 { font-size: clamp(1.15rem, 4.6vw, 1.55rem); }
.sec-kopf .note { font-size: .78rem; color: var(--text-mute); }

/* ================================ Karten =============================== */

.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow);
}

.grid-2 { display: grid; gap: 14px; }

/* ---------- Live-Status ---------- */

.live {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
}

.live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 130% at 8% 0%, var(--akzent, transparent), transparent 58%);
  opacity: .2;
}

.live-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.puls {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-mute);
  flex: none;
}
.puls.an {
  background: var(--rot-soft);
  box-shadow: 0 0 0 0 rgba(255, 90, 77, .65);
  animation: puls 2.1s infinite;
}
@keyframes puls {
  70%  { box-shadow: 0 0 0 13px rgba(255, 90, 77, 0); }
  100% { box-shadow: 0 0 0 0  rgba(255, 90, 77, 0); }
}

.live-phase {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 6.2vw, 2.05rem);
  line-height: 1.15;
  color: var(--akzent, var(--gold-soft));
  position: relative;
  z-index: 1;
}
.live-detail { color: var(--text-dim); margin-top: 6px; position: relative; z-index: 1; font-size: .95rem; }

.next-up {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.next-up .lbl { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.next-up .val {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  color: var(--text);
}

/* Handlungsempfehlung */
.aktion {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(226, 0, 26, .09);
  border: 1px solid rgba(226, 0, 26, .28);
  border-radius: var(--r-s);
  padding: 11px 13px;
  font-size: .9rem;
  position: relative;
  z-index: 1;
}
.aktion .ic { flex: none; font-size: 1.05rem; line-height: 1.35; }

/* ---------- Nächster Dienst / Timeline ---------- */

.dienst-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.dienst-datum {
  flex: none;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 7px 11px;
  min-width: 62px;
  background: rgba(212,175,55,.06);
}
.dienst-datum .tag { font-family: var(--serif); font-size: 1.55rem; line-height: 1; color: var(--gold-soft); }
.dienst-datum .mon { font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; }
.dienst-datum .wt  { font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); }

.dienst-titel { min-width: 0; flex: 1 1 190px; }
.dienst-titel h3 { font-size: clamp(1.1rem, 4.8vw, 1.4rem); line-height: 1.2; }
.dienst-titel p { margin: 3px 0 0; color: var(--text-mute); font-size: .84rem; }

.hinweis-box {
  margin-top: 14px;
  font-size: .87rem;
  color: var(--text-dim);
  background: var(--panel-2);
  border-left: 3px solid var(--akzent, var(--gold));
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 10px 13px;
}

/* Timeline */
.tl { list-style: none; margin: 18px 0 0; padding: 0; position: relative; }
.tl::before {
  content: "";
  position: absolute;
  left: 55px; top: 10px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--line), var(--line-soft));
}

.tl li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 0;
}

.tl .zeit {
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  color: var(--text-dim);
  text-align: right;
  padding-top: 1px;
}

.tl .dot {
  position: relative;
  justify-self: center;
  margin-top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line);
  z-index: 1;
}
.tl li.akt   .dot { border-color: var(--gold); background: var(--gold); }
.tl li.pause .dot { border-color: var(--rot);  background: var(--rot); }
.tl li.ende  .dot { border-color: var(--gruen); background: var(--gruen); }

.tl .was { min-width: 0; }
.tl .was b { display: block; font-weight: 600; font-size: .95rem; }
.tl .was small { display: block; color: var(--text-mute); font-size: .78rem; line-height: 1.45; }

.tl li.vorbei { opacity: .38; }
.tl li.jetzt .was b { color: var(--gold-soft); }
.tl li.jetzt::after {
  content: "jetzt";
  position: absolute;
  right: 0; top: 8px;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
}

/* ---------- Hinweis "ohne Gewähr" (nur im Seitenfuß) ---------- */

.gewaehr-fuss {
  display: inline-block;
  margin: 10px auto 0;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 13px;
}

/* ---------- Abreißkalender ---------- */

/* Namensabfrage */
.kal-anmeldung {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 18px;
  text-align: center;
  max-width: 470px;
  margin: 0 auto;
}
.kal-anmeldung[hidden] { display: none; }
.kal-frage {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.8vw, 1.4rem);
  margin: 0 0 6px;
  color: var(--gold-soft);
}
.kal-hinweis {
  margin: 0 0 16px;
  font-size: .82rem;
  color: var(--text-mute);
  line-height: 1.5;
}
.kal-eingabe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.kal-eingabe input {
  flex: 1 1 160px;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(255,252,245,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
}
.kal-eingabe input::placeholder { color: var(--text-mute); }
.kal-eingabe input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,252,245,.1);
}
.kal-eingabe .btn { flex: 0 0 auto; }

.kal-wer {
  text-align: center;
  font-size: .8rem;
  color: var(--text-mute);
  margin: 18px 0 0;            /* unter den Knöpfen – oben zählt der Platz */
}
.kal-wer b { color: var(--gold-soft); font-weight: 600; }
.kal-wer .chip { margin-left: 8px; padding: 4px 11px; min-height: 30px; font-size: .72rem; }

.kal-buehne {
  position: relative;
  perspective: 1400px;
  padding-top: 12px;
}

/* Der Papierstapel: ein Blatt pro verbleibendem Tag.
   Der Block wird sichtbar dünner, je näher das Festspielende rückt. */
.kal-stapel {
  position: absolute;
  inset: 12px 0 0;
  z-index: 0;
  pointer-events: none;
}
.kal-stapel i {
  position: absolute;
  display: block;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #efe7d4 0%, #cec4aa 100%);
  border-bottom: 1px solid rgba(75, 60, 35, .34);
}

.kal-blatt {
  position: relative;
  z-index: 1;
  transform-origin: 50% 0%;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.016) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, #fbf7ec 0%, #f1e9d6 100%);
  color: #241d14;
  border-radius: 4px 4px 12px 12px;
  padding: 20px 16px 12px;
  box-shadow: 0 22px 45px rgba(0,0,0,.6), inset 0 -14px 22px rgba(120,100,60,.08);
  text-align: center;
}

/* Perforation oben */
.kal-blatt::before {
  content: "";
  position: absolute;
  top: 11px; left: 16px; right: 16px;
  height: 6px;
  background-image: radial-gradient(circle at 3px 3px, rgba(60,45,25,.4) 1.7px, transparent 2.1px);
  background-size: 13px 6px;
}
/* Bindung / Metallklammern */
.kal-blatt::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 7px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #b9ac8e, #8d8168);
}

.kal-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a7a5c;
  border-bottom: 1px solid rgba(90,72,40,.22);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.kal-tag {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 14vw, 4.2rem);
  line-height: .95;
  color: #241d14;
  letter-spacing: -.02em;
}
.kal-blatt.sonntag .kal-tag,
.kal-blatt.sonntag .kal-wt { color: #b3121b; }

.kal-wt {
  font-family: var(--serif);
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6b5a3c;
  margin-top: 2px;
}

.kal-werk {
  margin: 9px 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: #4a3d28;
  background: rgba(120,95,45,.09);
  border-radius: 8px;
  padding: 7px 10px;
}
.kal-werk b { color: #241d14; }
.kal-werk.frei { font-style: italic; color: #7b6a4c; }

.kal-spruch {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(90,72,40,.3);
}
.kal-kat {
  display: inline-block;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a7a5c;
  margin-bottom: 5px;
}
.kal-spruch p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(.95rem, 4vw, 1.1rem);
  line-height: 1.5;
  color: #2e2519;
}
.kal-spruch small {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  font-style: italic;
  color: #8a7a5c;
}

.kal-fuss {
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(90,72,40,.18);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9a8a6c;
}

.kal-steuerung {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 860px) {
  .kal-buehne { max-width: 470px; margin: 0 auto; }
}

/* ---------- Inhalte-Karussell ---------- */

.spruch {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(212,175,55,.055), transparent 42%),
    var(--panel);
}

.spruch-kat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kat, var(--gold));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}

.spruch-text {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 4.7vw, 1.45rem);
  line-height: 1.48;
  flex: 1;
}
.spruch-quelle {
  margin-top: 12px;
  font-size: .82rem;
  color: var(--text-mute);
  font-style: italic;
}

.spruch-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  min-height: 42px;
}
.btn:hover { background: linear-gradient(180deg, rgba(212,175,55,.3), rgba(212,175,55,.12)); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.zaehler { font-size: .74rem; color: var(--text-mute); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Schlichter Nebenknopf (z. B. "zurück zu heute") */
.chip {
  flex: none;
  appearance: none;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: .78rem;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: .18s;
  min-height: 36px;
}
.chip:hover { color: var(--text); border-color: var(--line); }

/* ---------- Spielplan ---------- */

.plan { display: grid; gap: 8px; }

.plan-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--akzent, var(--line));
  border-radius: var(--r-s);
  transition: .18s;
}
.plan-row:hover { background: var(--panel-2); }

.plan-row.vorbei { opacity: .4; }
.plan-row.heute {
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(212,175,55,.09);
  box-shadow: 0 0 0 1px rgba(212,175,55,.2);
}
.plan-row.finale { border-left-color: var(--rot); }

.plan-dat { text-align: center; line-height: 1.15; }
.plan-dat b { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--text); }
.plan-dat span { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

.plan-werk { min-width: 0; }
.plan-werk b { display: block; font-size: .97rem; font-weight: 600; }
.plan-werk small { display: block; color: var(--text-mute); font-size: .76rem; }

.plan-zeit {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.plan-zeit span { display: block; font-size: .68rem; color: var(--text-mute); }

.plan-badge {
  display: inline-block;
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 3px;
}
.plan-badge.heute-b { background: var(--gold); color: var(--bg); }
.plan-badge.finale-b { background: var(--rot); color: #fff; }

/* Wochen-Zwischenüberschrift im Spielplan */
.wochen-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 3px;
  padding: 0 4px 7px;
  border-bottom: 1px solid var(--line);
}
.wochen-kopf:first-child { margin-top: 0; }
.wochen-kopf b {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-soft);
}
.wochen-kopf span {
  flex: none;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.ruhetag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 13px 5px 56px;
  font-size: .76rem;
  color: var(--text-mute);
  font-style: italic;
}
.ruhetag::before {
  content: "";
  flex: none;
  width: 18px; height: 1px;
  background: var(--line-soft);
}

/* ================================ Fuß ================================== */

footer {
  margin-top: 46px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-mute);
  font-size: .78rem;
  text-align: center;
}
footer .dank {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}
footer .quelle { font-size: .7rem; opacity: .75; margin-top: 8px; }

/* ============================= Größere Displays ======================== */

@media (min-width: 620px) {
  .tl li { grid-template-columns: 58px 24px 1fr; }
  .tl::before { left: 68px; }
}

@media (min-width: 860px) {
  .wrap { padding: 0 28px; }
  .topbar { padding: 18px 28px; }
  section { padding: 46px 0 0; }
  .card { padding: 24px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .hero-inner { padding: 40px 18px 10px; }
  .plan { grid-template-columns: 1fr 1fr; gap: 9px; }
  .plan-abschnitt { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .spruch { min-height: 280px; }
}

/* Das Haus ist nur beleuchtet, solange Dienst ist – also ab einer Stunde
   vor dem ersten Akt bis zum Schlussvorhang. Danach gehen die Lichter aus.
   Während der Vorstellung glimmen sie zusätzlich, bewusst sehr langsam und
   mit kleinem Hub: Es soll atmen, nicht flackern. */
.haus-szene .fenster { transition: opacity 3s ease; }

body:not(.laeuft) .haus-szene .fenster { opacity: .12; }

body.laeuft .haus-szene .fenster {
  animation: schimmer 5s ease-in-out infinite alternate;
}
@keyframes schimmer {
  from { opacity: .42; }   /* kräftiger Hub bei 5 s je Richtung – */
  to   { opacity: 1; }     /* deutlich sichtbares Pulsieren       */
}

/* Solange Dienst ist, gehen hinter den Pavillonfenstern Leute hin und her.
   Vier Figuren mit unterschiedlicher Dauer und Startversatz – dadurch
   ergibt sich kein erkennbarer Gleichtakt. */
.leute { display: none; }
body.laeuft .leute { display: block; }
.leute .person { fill: #2e1a0c; }

body.laeuft .leute.l1 .person { animation: gehen 11s ease-in-out  -1s infinite; }
body.laeuft .leute.l2 .person { animation: gehen 15s ease-in-out  -6s infinite; }
body.laeuft .leute.r1 .person { animation: gehen 13s ease-in-out -10s infinite; }
body.laeuft .leute.r2 .person { animation: gehen 17s ease-in-out  -3s infinite; }

@keyframes gehen {
  0%   { transform: translateX(-13px); }
  42%  { transform: translateX(27px); }
  50%  { transform: translateX(27px); }   /* kurz stehenbleiben */
  92%  { transform: translateX(-13px); }
  100% { transform: translateX(-13px); }
}

/* Der warme Lichtschein über dem Hügel verschwindet mit */
.haus-szene .schein-gruppe { transition: opacity 3s ease; }
body:not(.laeuft) .haus-szene .schein-gruppe { opacity: .25; }

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}