/* sanitaetshaus.css — die Vorstellungsseite von Ortavis und das Impressum.
   Nimmt die Tokens aus base.css (Farben, Schrift) und setzt eine eigene, ruhige Seite darauf:
   ein Raster von 8 px, eine Spalte von 960 px, Fließtext auf 64 Zeichen. Kein Blog-Layout. */

.vorstellung {
  max-inline-size: 960px;
  margin-inline: auto;
  padding: 64px 24px 64px;
  display: grid;
  /* ⚠ `minmax(0, 1fr)` statt der Vorgabe `auto`: eine automatische Spur ist mindestens
     so breit wie der MIN-CONTENT ihres breitesten Kindes. Am 2026-09-11 auf dem iPhone SE
     gemessen — eine fuenfspaltige Tabelle in einem Beitrag machte die ganze Spalte 464 px
     breit, und damit rollte die SEITE quer statt der Tabelle. Die Null ist die Erlaubnis
     zu schrumpfen; erst dann greift `overflow-x` am Kasten darum. */
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  font-size: 16px;
  line-height: 1.55;
}

.vorstellung h1,
.vorstellung h2,
.vorstellung h3 { font-weight: 600; letter-spacing: -0.015em; }
.vorstellung h2 { font-size: 1.5rem; margin-block-end: 8px; }
.vorstellung h3 { font-size: 1rem; margin-block: 24px 8px; }
.vorstellung h3 small { color: var(--dim); font-weight: 400; margin-inline-start: 8px; }
.vorstellung p { max-inline-size: 64ch; }
.vorstellung p + p { margin-block-start: 16px; }
.vorstellung .klein { font-size: 0.88rem; color: var(--dim); }

/* ── Das Versprechen ── */
.versprechen .ueber {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-block-end: 16px;
}
.versprechen h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin-block-end: 24px;
}
.versprechen h1 em { font-style: normal; color: var(--accent); }
.versprechen .satz { font-size: 1.15rem; color: var(--text); }
.versprechen .satz + .satz { margin-block-start: 16px; }

/* ── Griffe: die Knöpfe aus base.css, am Telefon 44 px hoch ── */
.griffe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-block-start: 32px;
}
.vorstellung .btn {
  min-block-size: 44px;
  padding-inline: 24px;
  font-size: 0.95rem;
}
.griffe + .klein { margin-block-start: 16px; }

/* ── Der Film ── */
.film .unter { color: var(--dim); margin-block-end: 24px; }
.film video {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kapitel { margin-block-start: 24px; }
.kapitel-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.kapitel-liste button {
  display: flex;
  gap: 16px;
  align-items: baseline;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 8px 16px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 120ms, background 120ms;
}
.kapitel-liste button:hover { border-color: var(--accent); background: var(--surface-2); }
.kapitel-liste time {
  flex: none;
  inline-size: 3.2em;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Das laufende Kapitel trägt Rand UND Balken — Farbe allein sieht ein farbenblindes Auge nicht. */
.kapitel-liste button[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--surface-2);
}

/* ── Drei Blicke ── */
.bilder-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block-start: 24px;
}
.bilder-reihe figure {
  display: grid;
  gap: 8px;
  align-content: start;
}
.bilder-reihe img {
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.bilder-reihe figcaption { font-size: 0.92rem; color: var(--dim); }
.bilder-reihe figcaption b { color: var(--text); font-weight: 600; }

/* ── Erprobt, was fehlt ── */
.fehlt {
  display: grid;
  gap: 8px;
  max-inline-size: 64ch;
}
.fehlt li {
  padding: 8px 16px;
  border-inline-start: 3px solid var(--amber);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--dim);
}

/* ── Kontakt, Impressum ── */
.kontakt {
  border-block-start: 1px solid var(--border);
  padding-block-start: 24px;
  font-size: 0.92rem;
  color: var(--dim);
}
.angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  max-inline-size: 64ch;
}
.angaben dt { color: var(--dim); }
.folgt {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-style: italic;
}

/* ── Telefon ── */
@media (max-width: 720px) {
  .vorstellung { padding: 40px 16px 48px; gap: 48px; }
  .bilder-reihe { grid-template-columns: 1fr; }
  .angaben { grid-template-columns: 1fr; gap: 0 }
  .angaben dd { margin: 0 0 16px; }
  .griffe .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Blog: die Liste und der einzelne Beitrag ───────────────────────────────────
   Kein zweites Layout: `.vorstellung` gibt schon Spalte, Raster und Fließtextbreite.
   Hier steht nur, was ein Beitrag mehr braucht als eine Vorstellungsseite — die Liste,
   der Kopf mit Datum, der Merksatz und die Quellen darunter. */
.artikel-liste {
  display: grid;
  gap: 24px;
  max-inline-size: 64ch;
}
.artikel-liste li {
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--border-strong);
}
.artikel-liste a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.artikel-liste a:hover { color: var(--accent); }
.artikel-liste p { color: var(--dim); margin-block-start: 8px; }
.artikel-liste time {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
  margin-block-end: 8px;
  font-variant-numeric: tabular-nums;
}

/* Der Kopf eines Beitrags: Datum und Lesezeit stehen VOR der Überschrift, damit die
   erste Zeile nach dem Titel schon der Text ist. */
.beitrag-kopf {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
  letter-spacing: 0.02em;
  margin-block-end: 16px;
}
.beitrag h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin-block-end: 24px;
  max-inline-size: 26ch;
  /* Ohne `balance` brach „… — ab / dem ersten Januar." mitten durch die Hervorhebung
     (gemessen 2026-09-11, 1440 px). Der Browser verteilt die Zeilen jetzt selbst; wo er
     es nicht kann, bleibt es beim normalen Umbruch. */
  text-wrap: balance;
}
.beitrag .lead { font-size: 1.15rem; color: var(--text); }
.beitrag h2 { margin-block-start: 8px; }
.beitrag ul:not(.fehlt):not(.artikel-liste) {
  max-inline-size: 64ch;
  padding-inline-start: 24px;
  list-style: disc;
  color: var(--text);
}
.beitrag ul:not(.fehlt):not(.artikel-liste) li + li { margin-block-start: 8px; }
.beitrag ul:not(.fehlt):not(.artikel-liste) li::marker { color: var(--faint); }
/* Ein Absatz nach einer Liste steht sonst auf ihr — `p + p` greift da nicht. */
.beitrag ul + p { margin-block-start: 16px; }
.beitrag .tabelle-schlank + p,
.beitrag .merksatz + p { margin-block-start: 16px; }

/* Der Satz, der bleiben soll, wenn alles andere vergessen ist. Rand UND Fläche —
   Farbe allein trägt die Betonung nicht durch einen Schwarzweißdruck. */
.merksatz {
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-dim);
  padding: 16px 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-inline-size: 64ch;
}
.merksatz p { font-size: 1.05rem; margin: 0; }

/* Eine Tabelle, die auf dem Telefon IN SICH rollt statt die Seite breit zu machen.
   ⚠ `min-inline-size: 0` ist die ganze Zeile, an der es haengt: ein Raster-Kind hat als
   automatische Mindestbreite seine INHALTSBREITE, also wuchs der Kasten mit der Tabelle
   mit und `overflow-x` bekam nie etwas zu tun. Gemessen am 2026-09-11 auf dem iPhone SE:
   die Beitragsseite rollte quer, die anderen nicht — der Unterschied war die
   fuenfspaltige Tabelle. */
.tabelle-schlank {
  overflow-x: auto;
  /* ⚠ NICHT 64ch: das ist die Breite fuer Fliesstext. Mit ihr war die dreispaltige Tabelle
     auf dem Rechner rechts ABGESCHNITTEN (gemessen 2026-09-11) — sie rollte zwar, aber die
     Spalte daneben war frei. Eine Tabelle darf die ganze Spalte nehmen; nur der Text nicht. */
  max-inline-size: 100%;
  min-inline-size: 0;
}
/* Ein Roller, den man nur mit der Maus bewegen kann, ist fuer eine Tastatur eine Sackgasse.
   `tabindex=0` macht ihn fokussierbar, `role=region` mit Namen sagt dem Screenreader, was
   da rollt. Der sichtbare Fokusring kommt vom Browser und bleibt. */
.tabelle-schlank:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tabelle-schlank table { border-collapse: collapse; inline-size: 100%; font-size: 0.95rem; }
.tabelle-schlank th,
.tabelle-schlank td {
  text-align: start;
  padding: 8px 16px 8px 0;
  border-block-end: 1px solid var(--border);
  vertical-align: top;
}
.tabelle-schlank th { color: var(--dim); font-weight: 500; white-space: nowrap; }
/* ⚠ HIER stand eine Stunde lang `white-space: nowrap` auf drei Spaltenpositionen, gegen
   „14,00" ueber „€". Es hat die naechste Tabelle zerlegt: deren letzte Spalte ist ein
   Fliesstext, und der konnte damit nicht mehr umbrechen — 1219 px in einem 912er Kasten.
   Eine Regel nach POSITION weiss nicht, was in der Zelle steht. Der Zusammenhalt gehoert
   deshalb an den Inhalt: ` ` zwischen Zahl und Waehrung, im HTML. */
.tabelle-schlank td b { font-variant-numeric: tabular-nums; }

/* Jede Tatsache trägt ihre Fundstelle — dieselbe Regel wie im Fristen-Radar der
   Anwendung: wo es keine belastbare gibt, sagt die Zeile genau das. */
.quellen {
  border-block-start: 1px solid var(--border);
  padding-block-start: 24px;
  font-size: 0.88rem;
  color: var(--dim);
}
.quellen h2 { font-size: 1rem; margin-block-end: 16px; }
/* ⚠ `list-style: decimal` muss hier stehen: tokens.css nimmt jeder Liste den Punkt
   (`:where(ul, ol) { list-style: none }`). Ohne die Zeile stand die Quellenliste als
   Absatzfolge da — und eine Fundstelle ohne Nummer ist nicht zitierbar. */
.quellen ol { list-style: decimal; padding-inline-start: 24px; max-inline-size: 64ch; }
.quellen li + li { margin-block-start: 8px; }
.quellen li::marker { color: var(--faint); }
.zurueck { margin-block-start: 24px; font-size: 0.88rem; }