/* Die oeffentlichen Orts- und Terminseiten.
 *
 * Dieselbe Schrift, dieselben Farben, dieselben Haarlinien wie der Rest -
 * seite.css wird davor geladen. Was hier dazukommt, braucht keine andere
 * Seite: ein grosses Bild oben, ein Zustandssatz, zwei Spalten aus Programm
 * und Fakten.
 *
 * DIE SEITE IST EINE LANDEBAHN. Wer hier ankommt, kam ueber einen geteilten
 * Link und kennt Wolos nicht. Er hat genau eine Frage - "was ist das und hat
 * es offen" - und die muss ohne Scrollen beantwortet sein. Alles andere steht
 * darunter.
 */

/* ── Das Bild ───────────────────────────────────────────────────────── */
.ortsbild {
  margin: var(--size-5) 0 0;
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--linie-zart);
}
.ortsbild img {
  display: block; width: 100%; height: auto;
  /* Hoch genug, dass ein Bild wirkt, niedrig genug, dass der Name darunter
     noch auf den Schirm passt. */
  max-height: 46vh; object-fit: cover;
}
.ortsbild figcaption {
  font-size: 12.5px; color: var(--gedimmt);
  padding: 8px 12px; background: var(--flaeche);
}

/* ── Der Kopf ───────────────────────────────────────────────────────── */
.ortskopf { padding: var(--size-6) 0 var(--size-5); }
.rubrik {
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--akzent-text); margin: 0 0 var(--size-3);
}
.ortskopf h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.032em;
  margin: 0; text-wrap: balance;
}
.ortskopf .anriss { margin: var(--size-4) 0 0; max-width: 38rem; }

/* Der Satz, um den es geht. Als Plakette und nicht als Fliesstext: er ist
   eine Auskunft, kein Teil der Beschreibung. */
.zustand {
  display: inline-block; margin: var(--size-4) 0 0;
  font-size: 15px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-round);
  border: 1.5px solid currentColor;
}
.z-auf { color: var(--offen-t); }
.z-zu  { color: var(--zweite); }
/* Nichtwissen sieht aus wie Nichtwissen - nicht wie ein Zustand. */
.z-unbekannt { color: var(--gedimmt); border-style: dashed; }

/* ── Der Satz aus zwei Spalten ──────────────────────────────────────── */
.satz {
  display: grid; gap: var(--size-7);
  padding-top: var(--size-6); border-top: 1px solid var(--rahmen);
}
@media (min-width: 900px) {
  .satz { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); gap: var(--size-9); }
  .neben { position: sticky; top: var(--size-5); align-self: start; }
}
.satz section { margin-bottom: var(--size-7); }
.satz section:last-child { margin-bottom: 0; }
.satz h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedimmt); margin: 0 0 var(--size-3);
}
.fliess { color: var(--zweite); margin: 0; max-width: 36rem; white-space: pre-wrap; }
.gedimmt { color: var(--gedimmt); }
.klein { font-size: 13px; color: var(--gedimmt); margin: var(--size-3) 0 0; }
.klein code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--linie-zart); padding: 1px 5px; border-radius: 4px;
}

/* ── Zeiten und Fakten: Haarlinien statt Kaesten ────────────────────── */
.zeitenliste, .fakten dl { display: grid; margin: 0; }
.zeitenliste > div, .fakten dl > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 2px var(--size-4); padding: 9px 0;
  border-top: 1px solid var(--linie-zart);
}
.zeitenliste > div:first-child, .fakten dl > div:first-child { border-top: 0; padding-top: 0; }
.zeitenliste dt, .fakten dt { font-weight: 600; color: var(--tinte); font-size: 15px; }
.zeitenliste dd, .fakten dd {
  margin: 0; color: var(--zweite); font-size: 15px;
  /* Eine lange Adresse ohne Leerzeichen sprengte sonst die Spalte. */
  overflow-wrap: anywhere;
}
.zeitenliste dd { font-variant-numeric: tabular-nums; }

/* ── Programm ───────────────────────────────────────────────────────── */
.programm { list-style: none; margin: 0; padding: 0; }
.programm li { border-top: 1px solid var(--linie-zart); }
.programm li:first-child { border-top: 0; }
.programm a, .programm li > span:first-child {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--size-3);
  padding: 11px 0; text-decoration: none; color: inherit;
}
.programm li { display: block; padding: 0; }
.programm li > a { align-items: baseline; }
.termin-zeit {
  font-size: 14px; font-weight: 600; color: var(--zweite);
  font-variant-numeric: tabular-nums;
}
.termin-titel { font-size: 15.5px; font-weight: 500; color: var(--tinte); }
.programm a:hover .termin-titel { text-decoration: underline; }

/* ── Chips ──────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.chip {
  font-size: 13.5px; color: var(--zweite);
  border: 1px solid var(--rahmen); border-radius: var(--radius-round);
  padding: 4px 11px; background: var(--flaeche);
}

/* ── Die Einladung ──────────────────────────────────────────────────── */
/* Der einzige Ort auf dieser Seite, der etwas will. Deshalb steht er unten
   in der Nebenspalte und nicht oben: wer ueber einen geteilten Link kommt,
   sucht eine Auskunft, und wer sie bekommen hat, ist eher bereit zuzuhoeren. */
.einladung {
  background: var(--flaeche); border: 1px solid var(--rahmen);
  border-radius: var(--radius-3); padding: var(--size-5);
  margin-top: var(--size-6);
}
.einladung-frage {
  margin: 0 0 var(--size-3); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; color: var(--tinte);
}
.einladung-text { margin: 0 0 var(--size-4); font-size: 14.5px; color: var(--zweite); }

/* ── Fuss ───────────────────────────────────────────────────────────── */
.herkunftszeile {
  margin: var(--size-8) 0 0; padding-top: var(--size-5);
  border-top: 1px solid var(--rahmen);
  font-size: 13.5px; color: var(--gedimmt);
}

/* ── Nicht gefunden ─────────────────────────────────────────────────── */
.leer { padding: clamp(var(--size-8), 10vw, var(--size-12)) 0; max-width: 34rem; }
.leer h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.leer .anriss { margin: var(--size-4) 0 var(--size-6); }
.knopf-link {
  display: inline-block; border: 1.5px solid var(--tinte); color: var(--tinte);
  text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--radius-round);
}