@charset "utf-8";
/* PraxisZentrum Reinach, Reinach BL - Entwurf.
   Mobile first.

   Farbe: Die Praxis hat eine eigene Wortmarke in #3058A6. Dieses Blau ist
   die Marke und bleibt es - es wird nicht durch ein "schoeneres" ersetzt.
   Damit die Seite trotzdem nicht nach dem ueblichen kuehlen Praxisblau
   aussieht, ist die WAERME nicht im Akzent, sondern im Grund: die Flaechen
   sind ein warmes Papierweiss (#fbfaf7) und ein sandfarbener Ton
   (#f2efe8). Blau auf warmem Papier statt Blau auf Kaltweiss.

   Rot ist auf einer Arztseite kein Akzent, sondern ein Signal. Es steht
   nur dort, wo wirklich gewarnt wird (Notfallband, 144) - sonst nirgends.

   Der Akzent ist in zwei Kanaele getrennt:
     --marke        Dekoration (Flaechen, Symbole neben Text, Linien)
     --marke-text   Information (Verweise, Beschriftungen) - immer >= 4.5:1
   Eine einzige Akzentfarbe fuer beides geraet an einer der beiden Stellen
   unter die Grenze, ohne dass ein Werkzeug das meldet. */

/* Die @font-face-Regeln stehen NICHT hier, sondern in der erzeugten
   Datei schriften.css (tools/build_site.py). Grund: die Adresse der
   Schriftdatei braucht einen Inhaltsstempel, und dieser Stempel muss
   zeichengenau derselbe sein wie im <link rel="preload"> im Seitenkopf.
   Steht an der einen Stelle ein Stempel und an der anderen nicht, laedt
   der Browser jede Schrift ZWEIMAL - und meldet in der Konsole nur, das
   Vorgeladene sei ungenutzt geblieben. */

/* --- Grundwerte --------------------------------------------------------- */
:root {
  --grund: #fbfaf7;
  --grund-2: #f2efe8;
  --flaeche: #ffffff;
  --tinte: #1b1f27;
  --tinte-2: #3f4552;   /* 9.2:1 auf --grund */
  --tinte-3: #565d6b;   /* 6.3:1 auf --grund, 5.8:1 auf --grund-2 */
  --linie: #e6e1d6;
  --linie-2: #cdc7b8;

  --marke: #3058A6;         /* die Wortmarke der Praxis, unveraendert */
  --marke-text: #24447f;    /* Information - 9.5:1 auf weiss */
  --marke-dunkel: #173060;
  --marke-hell: #e9eefa;
  --marke-hell-2: #d7e1f4;

  --rot: #d0342c;           /* Signal, nicht Akzent */
  --rot-text: #b3121b;      /* 7.0:1 auf weiss - fuer Schrift */
  --rot-hell: #fdecec;
  --rot-dunkel: #8e1218;

  --dunkel: #16233a;
  --dunkel-2: #1e2d46;
  --auf-dunkel: #eef1f6;
  --auf-dunkel-2: #b8c3d4;
  --marke-auf-dunkel: #a8c5f2;   /* Symbole im dunklen Fuss, 8.8:1 */

  --r: 10px;
  --r-klein: 6px;
  --schatten: 0 1px 2px rgba(22, 35, 58, .05), 0 8px 24px rgba(22, 35, 58, .07);
  --schatten-klein: 0 1px 2px rgba(22, 35, 58, .06), 0 3px 10px rgba(22, 35, 58, .05);
  --breite: 1220px;
  --luft: clamp(2.6rem, 6vw, 5.2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* rem rechnet gegen html, nicht gegen body. 16px bleibt die Basis. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die klebende Kopfzeile wuerde beim Sprung auf einen Anker den Anfang
     des Ziels verdecken. */
  scroll-padding-top: 84px;
  /* overflow-x NICHT auf clip: das verschluckt waagrechtes Scrollen und
     versteckt damit echte Layoutfehler, statt sie zu zeigen. */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: 'SourceSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'SourceSerif', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinte);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.42rem, 3.3vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.28rem); }
h4 { font-size: 1.03rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke-text); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--marke-dunkel); }
strong { font-weight: 600; }
em { font-style: italic; }
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

/* Symbole brauchen immer ein Grundmass. Ohne eigene Groesse wird ein SVG
   mit max-width:100% so breit wie sein Kasten - aus einem Icon wird ein
   300px hoher Block. */
svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
p svg, li svg, h2 svg, h3 svg, summary svg { width: 1.15em; height: 1.15em; }

:focus-visible {
  outline: 3px solid var(--marke-text);
  outline-offset: 2px;
  border-radius: 3px;
}

.vb {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marke-dunkel); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-klein) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.15rem; }
.klein { font-size: .875rem; color: var(--tinte-2); line-height: 1.55; }
.lead { font-size: 1.09rem; color: var(--tinte-2); max-width: 62ch; }

/* --- Schaltflaechen ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .78rem 1.25rem;
  border: 1px solid var(--marke-dunkel);
  border-radius: var(--r-klein);
  background: var(--marke-dunkel);
  color: #fff;
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  /* Kein white-space:nowrap hier! Eine lange Beschriftung erhielte damit
     eine Mindestbreite und sprengt bei 320px das Raster. Nur dort setzen,
     wo der Text kurz und fest ist (.kopf__tel, .rufleiste a). */
}
.btn:hover { background: #12294f; border-color: #12294f; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn--geist {
  background: transparent; color: var(--marke-text); border-color: var(--linie-2);
}
.btn--geist:hover { background: var(--marke-hell); border-color: var(--marke); color: var(--marke-dunkel); }
.btn--klein { padding: .58rem 1rem; font-size: .95rem; }
/* Kurzer, fester Text: hier ist nowrap richtig. Ohne dies bricht
   "Termin vereinbaren" im Kopf auf drei Zeilen und macht ihn 71px hoch. */
.kopf .btn, .schub__tat .btn { white-space: nowrap; }

.tatreihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.tatreihe--mitte { justify-content: center; margin-top: 2rem; }

/* inline, nicht inline-flex: bei umbrechendem Text waere der Pfeil ein
   eigenes Flex-Element und landete am Zeilenende statt beim letzten Wort.
   Das geschuetzte Leerzeichen haelt ihn am Wort. */
.link-pfeil { display: inline; font-weight: 600; text-decoration: none; }
.link-pfeil::after {
  content: '\00a0→'; display: inline-block;
  transition: transform .18s ease;
}
.link-pfeil:hover::after { transform: translateX(3px); }
.link-stark {
  display: inline-flex; align-items: flex-start; gap: .45rem;
  font-weight: 600; text-decoration: none;
}
/* Symbol an der ERSTEN Zeile ausrichten. Mittig stand es bei einer
   umgebrochenen Adresse zwischen den Zeilen. */
.link-stark svg { margin-top: .18em; }
.link-stark:hover { text-decoration: underline; }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 250, 245, .96);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(1.3) blur(8px);
}
.kopf__in {
  display: flex; align-items: center; gap: .8rem;
  min-height: 68px; padding-top: .5rem; padding-bottom: .5rem;
}
/* Wortmarke: die Originaldatei der Praxis, nur mit currentColor statt
   festem Blau. Die Buchstaben nehmen damit die Textfarbe an - im hellen
   Kopf dunkelblau, im dunklen Fuss weiss, aus EINER Datei. Der Bestand
   hatte dafuer zwei Dateien, die auseinanderlaufen konnten. */
.marke {
  flex: none; display: flex; align-items: center;
  text-decoration: none; color: var(--tinte);
  min-width: 0;
}
.marke__wort {
  flex: none; display: block;
  width: 154px; height: auto;
  transition: opacity .2s ease;
}
.marke:hover .marke__wort { opacity: .82; }

.nav { display: none; }
.kopf__tat { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.kopf__tel {
  display: none; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--tinte);
  white-space: nowrap;      /* kurz und fest - hier richtig */
  font-variant-numeric: tabular-nums;
}
.kopf__tel:hover { color: var(--marke-text); }
.kopf__tel svg { color: var(--marke); }
.kopf__tat .btn--klein { display: none; }

.lupe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--linie-2);
  border-radius: var(--r-klein); color: var(--tinte); cursor: pointer;
}
.lupe svg { width: 1.5rem; height: 1.5rem; }
.lupe:hover { background: var(--grund-2); }

/* Die Schublade haengt nur am hidden-Attribut. Eine eigene display-Regel
   (etwa .schub{display:block}) wuerde [hidden]{display:none} des Browsers
   ueberstimmen und das Menue dauerhaft offen stehen lassen - darum die
   ausdrueckliche Regel hier. */
.schub {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: .9rem 1.15rem 1.15rem;
  max-height: 78vh; overflow-y: auto;
}
.schub[hidden] { display: none; }
.schub__nav { display: flex; flex-direction: column; }
.schub__nav a {
  padding: .78rem .2rem; border-bottom: 1px solid var(--linie);
  color: var(--tinte); text-decoration: none; font-weight: 600;
}
.schub__nav a:hover, .schub__nav a[aria-current='page'] { color: var(--marke-text); }
.schub__tat { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.schub__tat .btn { width: 100%; }

/* --- Notfallband --------------------------------------------------------
   Die einzige Stelle, an der Rot auf dieser Seite als Signal auftritt.
   Sie steht direkt unter dem Kopf, weil im Notfall niemand scrollt. */
.notfallband {
  background: var(--rot-hell);
  border-bottom: 1px solid #f3cccd;
}
.notfallband__in {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Die Angaben sind eigene Flex-Elemente und werden durch den Abstand
     getrennt, nicht durch Trennpunkte im Text. Bricht die Zeile um, haengt
     sonst ein "·" allein am Zeilenende. */
  gap: .15rem 1.1rem; padding-top: .55rem; padding-bottom: .55rem;
  font-size: .9rem;
}
.notfallband__t {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--rot-dunkel);   /* 8.1:1 auf --rot-hell */
  text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
}
.notfallband__t svg { width: 1.05rem; height: 1.05rem; color: var(--rot-text); }
.notfallband p { margin: 0; color: #4a2022; }
.notfallband a {
  color: var(--rot-dunkel); font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.notfallband a:hover { text-decoration: underline; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__folie {
  position: absolute; inset: 0; z-index: -1;
  /* Zwei Schichten, die Werte sind GEMESSEN (tools/kontrast_hero.py) und
     nicht geschaetzt: im Empfangsfoto gibt es grosse fast weisse Flaechen
     (Decke, Leuchten, Tresen). Schmal deckt der Text die ganze Breite ab,
     darum dort ein kraeftigerer Schleier. */
  background: linear-gradient(180deg, rgba(22, 26, 17, .84) 0%,
    rgba(22, 26, 17, .74) 45%, rgba(22, 26, 17, .90) 100%);
}
@media (min-width: 760px) {
  .hero__folie {
    background:
      linear-gradient(90deg, rgba(22, 26, 17, .50) 0%, rgba(22, 26, 17, .38) 48%, rgba(22, 26, 17, 0) 82%),
      linear-gradient(180deg, rgba(22, 26, 17, .70) 0%, rgba(22, 26, 17, .54) 45%, rgba(22, 26, 17, .86) 100%);
  }
}
.hero__in { padding: clamp(2.8rem, 10vw, 6rem) 1.15rem clamp(2.4rem, 7vw, 4.2rem); }
.augenbraue {
  display: inline-block;
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase;
  color: #eef3fc;
  background: rgba(24, 52, 100, .92);
  border-radius: 100px; padding: .3rem .85rem;
  margin: 0 0 1rem;
}
.hero__t { color: #fff; max-width: 20ch; margin-bottom: .7rem; }
.hero__lead { color: #e7ecf5; font-size: 1.11rem; max-width: 50ch; margin-bottom: 1.6rem; }
.hero__klein { color: #cbd5e6; font-size: .875rem; margin-top: 1rem; }
/* Die zweite Schaltflaeche steht direkt auf dem Foto. Ohne eigene Flaeche
   haengt ihr Kontrast allein am Verlauf. Die getoente Flaeche macht sie vom
   Bild unabhaengig. */
.hero .btn--geist {
  color: #fff; border-color: rgba(255, 255, 255, .58);
  background: rgba(14, 24, 42, .5);
  backdrop-filter: blur(2px);
}
.hero .btn--geist:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; width: 100%;
  font-size: .92rem; color: #dde4f0;
}
.status__punkt {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--auf-dunkel-2); flex: none;
}
.status--offen .status__punkt { background: #7fd08a; }
.status--zu .status__punkt { background: #e8bd6d; }

/* --- Hero, ruhige Fassung ------------------------------------------------
   Fuer die Unterseiten. Heller Grund, dunkle Schrift, Bild daneben.
   Alle Farben hier ausdruecklich setzen: die Regeln der dunklen Fassung
   gelten weiter fuer .hero, und ohne eigene Angabe bliebe weisse Schrift
   auf hellem Grund stehen. */
.hero--ruhig { background: var(--grund-2); border-bottom: 1px solid var(--linie); }
.hero--ruhig .hero__in {
  display: grid; gap: 1.7rem; align-items: center;
  padding-top: clamp(1.9rem, 5.5vw, 3.4rem);
  padding-bottom: clamp(1.9rem, 5.5vw, 3.4rem);
}
.hero--ruhig .hero__t { color: var(--tinte); max-width: 24ch; }
.hero--ruhig .hero__lead { color: var(--tinte-2); }
.hero--ruhig .hero__klein { color: var(--tinte-3); }
.hero--ruhig .augenbraue { color: var(--marke-dunkel); background: var(--marke-hell); }
.hero--ruhig .btn--geist { color: var(--marke-text); border-color: var(--linie-2); }
.hero--ruhig .btn--geist:hover {
  background: var(--flaeche); border-color: var(--marke); color: var(--marke-dunkel);
}
.hero--ruhig .status { color: var(--tinte-2); }
.hero--ruhig .status__punkt { background: var(--tinte-3); }
.hero--ruhig.status--offen .status__punkt { background: var(--marke); }
.hero--ruhig .hero__nebenbild {
  /* Einspaltig nicht auf die ganze Inhaltsbreite ziehen - mehrere
     Bestandsaufnahmen sind schmal und wuerden sonst hochskaliert.
     Ab zwei Spalten hebt die Regel unten die Grenze wieder auf. */
  max-width: 620px; margin-inline: auto; width: 100%;
}
.hero--ruhig .hero__nebenbild img {
  width: 100%; border-radius: var(--r); box-shadow: var(--schatten);
  aspect-ratio: 3 / 2; object-fit: cover;
}
@media (min-width: 820px) {
  .hero--ruhig .hero__in { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .hero--ruhig .hero__nebenbild { max-width: none; }
}

/* --- Abschnitte --------------------------------------------------------- */
.ab { padding: var(--luft) 0; }
.ab--ton { background: var(--grund-2); }
.ab--marke { background: var(--marke-hell); }
.ab--schmal > .wrap { max-width: 820px; }
.ab--eng { padding: 2rem 0; }

.ab--dunkel { background: var(--dunkel); }
/* Dunkelregeln fuer ALLE Elemente schreiben, nicht nur fuer h2/p - sonst
   bleibt eine Adresse oder eine Tabellenzelle auf 1.9:1 stehen. */
.ab--dunkel, .ab--dunkel p, .ab--dunkel li, .ab--dunkel dt, .ab--dunkel dd,
.ab--dunkel address, .ab--dunkel td, .ab--dunkel th, .ab--dunkel caption,
.ab--dunkel figcaption, .ab--dunkel span, .ab--dunkel .klein,
.ab--dunkel .lead { color: var(--auf-dunkel); }
.ab--dunkel h1, .ab--dunkel h2, .ab--dunkel h3 { color: #fff; }
.ab--dunkel .klein, .ab--dunkel .lead { color: var(--auf-dunkel-2); }
.ab--dunkel a { color: var(--marke-auf-dunkel); }
.ab--dunkel .btn {
  background: #fff; color: var(--marke-dunkel); border-color: #fff;
}
.ab--dunkel a.btn:hover { background: var(--grund-2); color: var(--marke-dunkel); border-color: var(--grund-2); }
.ab--dunkel .btn--geist { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.ab--dunkel a.btn--geist:hover { background: rgba(255, 255, 255, .13); border-color: #fff; color: #fff; }

.kopfzeile { margin-bottom: 2rem; max-width: 62ch; }
.kopfzeile--zeile {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .6rem; max-width: none;
}
.kopfzeile--zeile h2 { margin-bottom: 0; }
.kopfzeile--zeile p { margin: 0; }

/* --- Schnellfinder ------------------------------------------------------
   Die vier Fragen, mit denen Menschen auf eine Praxisseite kommen:
   Wann offen? Wie Termin? Wo? Und was, wenn es dringend ist?
   Steht darum unmittelbar unter dem Hero, nicht am Seitenende. */
.finder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.finder li { margin: 0; }
.finder__k {
  display: flex; flex-direction: column; gap: .45rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.15rem 1.2rem;
  box-shadow: var(--schatten-klein);
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.finder__k:hover {
  box-shadow: var(--schatten); transform: translateY(-2px);
  border-color: var(--linie-2); color: inherit;
}
.finder__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--marke-hell); color: var(--marke-text); flex: none;
}
.finder__i svg { width: 1.25rem; height: 1.25rem; }
.finder__h {
  font-family: 'SourceSerif', Georgia, serif; font-size: 1.14rem;
  font-weight: 600; line-height: 1.25;
}
.finder__b { font-size: .92rem; color: var(--tinte-2); flex: 1; margin: 0; }
.finder__z {
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: var(--marke-text);
}
/* Die Notfallkarte traegt Rot - hier ist es die richtige Farbe. */
.finder__k--notfall { border-color: #f0c9ca; background: var(--rot-hell); }
.finder__k--notfall .finder__i { background: #fbdcdd; color: var(--rot-dunkel); }
.finder__k--notfall .finder__z, .finder__k--notfall a { color: var(--rot-dunkel); }
.finder__k--notfall .finder__b { color: #4a2022; }

/* Die drei Arztkacheln auf der Startseite. Feste 150px fuer das Bild -
   das Portraet von Dr. Frei liegt im Bestand nur mit 195px vor, und drei
   verschieden breite Bilder nebeneinander lesen sich als Darstellungsfehler. */
.finder--team .finder__k { align-items: flex-start; }
.finder--team picture { display: block; }
.finder--team img {
  width: 150px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-klein); background: var(--grund-2);
  margin-bottom: .3rem;
}

/* --- Leistungen --------------------------------------------------------- */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.leistungen > li { margin: 0; }
.leistung {
  height: 100%; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem;
  box-shadow: var(--schatten-klein);
}
.leistung__kopf { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .6rem; }
.leistung__i {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-klein);
  background: var(--marke-hell); color: var(--marke-text);
}
.leistung__i svg { width: 1.35rem; height: 1.35rem; }
.leistung h3 { margin: .15rem 0 0; }
.leistung > p { font-size: .95rem; color: var(--tinte-2); margin-bottom: .9rem; }
.leistung ul { list-style: none; padding: 0; margin: 0; }
.leistung ul li {
  position: relative; padding-left: 1.35rem; margin-bottom: .38rem;
  font-size: .94rem;
}
.leistung ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--marke);
}

/* --- Ausstattung -------------------------------------------------------- */
.geraete { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.geraete li {
  margin: 0; padding: .85rem 1rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein);
}
.geraete strong { display: block; font-size: .98rem; }
.geraete span { font-size: .88rem; color: var(--tinte-2); }

/* --- Ablauf (nummerierte Schritte) -------------------------------------- */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ablauf > li { margin: 0; display: flex; gap: 1rem; align-items: flex-start; }
.ablauf__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--marke-dunkel); color: #fff;
  font-family: 'SourceSerif', Georgia, serif; font-weight: 600; font-size: 1.1rem;
  line-height: 1;
}
.ablauf__t { min-width: 0; }
.ablauf__t h3 { margin-bottom: .25rem; font-size: 1.1rem; }
.ablauf__t p { margin: 0; font-size: .96rem; color: var(--tinte-2); }

/* --- Kacheln ------------------------------------------------------------ */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.kacheln li { margin: 0; }
.kachel a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--schatten-klein);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kachel a:hover {
  box-shadow: var(--schatten); transform: translateY(-2px);
  border-color: var(--linie-2);
}
.kachel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kachel__in { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem; flex: 1; }
.kachel__h {
  font-family: 'SourceSerif', Georgia, serif; font-size: 1.2rem; font-weight: 600;
  line-height: 1.25;
}
.kachel__b { font-size: .92rem; color: var(--tinte-2); flex: 1; }
.kachel a .link-pfeil { color: var(--marke-text); font-size: .92rem; }

/* --- Bildgitter --------------------------------------------------------- */
.gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gitter li { margin: 0; }
.figur { margin: 0; }
.figur img { width: 100%; border-radius: var(--r-klein); }
.figur img { aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--schatten-klein); }
.figur figcaption {
  font-size: .82rem; color: var(--tinte-3); margin-top: .5rem; line-height: 1.45;
}

/* --- Paar (Text + Bild) ------------------------------------------------- */
.paar { display: grid; gap: 1.6rem; align-items: center; }
/* Einspaltig nicht auf die ganze Inhaltsbreite ziehen. Ab zwei Spalten hebt
   die Regel weiter unten die Grenze wieder auf. */
.paar__bild { max-width: 580px; margin-inline: auto; width: 100%; }
.paar__text > :last-child { margin-bottom: 0; }
.paar__text h2 { margin-bottom: .7rem; }

/* --- Fliesstext --------------------------------------------------------- */
.fliesstext { max-width: 70ch; }
.fliesstext h2 { margin-top: 2rem; }
.fliesstext h2:first-child, .fliesstext h1 + h2 { margin-top: 0; }
.fliesstext h3 { margin-top: 1.6rem; }
.fliesstext ul { padding-left: 1.15rem; }

/* --- Aerztekarte --------------------------------------------------------
   Die drei Portraets stammen aus drei verschiedenen Aufnahmen - Studio,
   Aussenaufnahme, Strasse. Nebeneinander in einem Raster waere der Bruch
   der Hintergruende das Erste, was auffaellt. Untereinander, jedes mit
   seinem eigenen Text daneben, faellt er nicht ins Gewicht - und der
   Werdegang hat Platz. */
.aerzte { display: grid; gap: 1.6rem; }
.arzt {
  display: grid; gap: 1.2rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.3rem;
  box-shadow: var(--schatten-klein);
}
/* Namenszeichen statt Portraet. Der Bestand hat kein einziges Foto der
   Aerztinnen und Aerzte - und ein gekauftes Stockportraet waere eine
   Luege ueber die Person, die einem gegenuebersitzt. Statt dessen die
   Initialen in der Schriftfarbe der Marke, in derselben Flaeche, die
   spaeter ein echtes Portraet einnehmen wird (4:5). Kommen Fotos, tritt
   das Bild an dieselbe Stelle, ohne dass sich das Layout aendert. */
.arzt__bild { max-width: 260px; width: 100%; }
.arzt__bild img {
  width: 100%; border-radius: var(--r-klein);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.zeichen {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-klein);
  display: grid; place-items: center;
  background: var(--marke-hell);
  border: 1px solid var(--marke-hell-2);
  color: var(--marke-text);
  font-family: 'SourceSerif', Georgia, serif;
  font-weight: 600; letter-spacing: .02em;
  font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1;
  /* Ohne das liest ein Bildschirmleser "T G" als zwei Woerter vor. Der
     Text steht darum aria-hidden, der Name daneben ist die Beschriftung. */
  user-select: none;
}
.arzt__text { min-width: 0; }
.arzt__text h2, .arzt__text h3 { margin-bottom: .2rem; }
.arzt__rolle {
  font-size: .95rem; color: var(--marke-text); font-weight: 600;
  margin: 0 0 .1rem;
}
.arzt__meta { font-size: .9rem; color: var(--tinte-3); margin: 0 0 .9rem; }
.arzt__wd { margin-top: 1rem; }
.arzt__wd summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--marke-text); list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.arzt__wd summary::-webkit-details-marker { display: none; }
.arzt__wd summary::after { content: '▾'; font-size: .8em; }
.arzt__wd[open] summary::after { content: '▴'; }
.arzt__wd summary:hover { text-decoration: underline; }
.werdegang { margin: .9rem 0 0; display: grid; gap: .5rem; }
.werdegang > div {
  display: grid; gap: .05rem .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.werdegang > div:last-child { border-bottom: 0; padding-bottom: 0; }
.werdegang dt {
  font-weight: 600; font-size: .85rem; color: var(--marke-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.werdegang dd { margin: 0; font-size: .93rem; color: var(--tinte-2); }
@media (min-width: 480px) {
  .werdegang > div { grid-template-columns: 8.5rem 1fr; }
}
.arzt__bild { max-width: 210px; }
@media (min-width: 640px) {
  .arzt { grid-template-columns: 210px 1fr; gap: 1.8rem; align-items: start; }
}

/* --- Teamgitter (MPA) --------------------------------------------------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr); }
.team li { margin: 0; }
.team img, .team .zeichen {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r); background: var(--marke-hell);
}
.team .zeichen { font-size: clamp(1.5rem, 5vw, 2rem); }
.team__n { font-weight: 600; margin: .6rem 0 0; font-size: .98rem; }
.team__r { font-size: .85rem; color: var(--tinte-3); margin: 0; }
@media (min-width: 620px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .team { grid-template-columns: repeat(5, 1fr); } }

/* --- Infokarten --------------------------------------------------------- */
.infokarten, .dreispalt { display: grid; gap: 1.15rem; }
.infokarte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem;
  box-shadow: var(--schatten-klein);
}
.infokarte h2, .infokarte h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.16rem; margin-bottom: .8rem;
}
.infokarte h2 svg, .infokarte h3 svg { color: var(--marke); }
.infokarte address { margin-bottom: .8rem; }
.infokarte__z { display: flex; flex-direction: column; gap: .35rem; }
.schritte { padding-left: 1.3rem; margin-bottom: 0; }
.schritte li { margin-bottom: .6rem; font-size: .96rem; }

.zeiten {
  margin: 0;
  /* Die Liste steht an mehreren Orten mit sehr verschiedener Breite
     (Infokarte und Fussspalte). Sie fragt darum ihre eigene Breite ab,
     nicht die des Fensters. */
  container-type: inline-size;
}
.zeiten .zeile {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  justify-content: space-between; align-items: baseline;
  /* Waagrechter Innenabstand mit negativem Aussenabstand: die Zeilen bleiben
     am Text ausgerichtet, die Markierung des heutigen Tages darf aber ueber
     den Rand hinausgehen und wirkt dadurch wie ein Band. */
  padding: .48rem .6rem; margin-inline: -.6rem;
  border-bottom: 1px solid var(--linie);
  border-radius: var(--r-klein);
}
.zeiten .zeile:last-child { border-bottom: 0; }
.zeiten dt { font-weight: 600; font-size: .95rem; }
/* margin-left: auto, nicht nur align-items: bricht die Zeile um, ist das
   dd das einzige Element seiner Zeile und "space-between" setzt es an den
   Anfang - die Uhrzeit stand dann links unter dem Tagesnamen. */
.zeiten dd {
  margin: 0 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; text-align: right;
}
.zeit { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--tinte-2); }

/* Der heutige Tag: farbig hinterlegt. Die Farbe allein traegt die Aussage
   nicht - der Zusatz "heute" bleibt stehen. */
.zeiten .zeile[data-heute] { background: var(--marke-hell); border-bottom-color: transparent; }
.zeiten .zeile[data-heute] dt,
.zeiten .zeile[data-heute] .zeit { color: var(--marke-dunkel); font-weight: 600; }
.zeiten .zeile[data-heute] dt::after {
  content: ' · heute'; font-size: .72rem; letter-spacing: .04em; font-weight: 600;
}

/* Unter 258px passen Tagesname und Uhrzeiten nicht nebeneinander. Dann
   stapeln ALLE Zeilen gleich - sonst bricht nur die markierte um und faellt
   aus der Reihe. */
@container (max-width: 258px) {
  .zeiten .zeile { display: block; }
  .zeiten dt { margin-bottom: .1rem; }
  .zeiten dd {
    margin: 0; align-items: flex-start; text-align: left;
    flex-direction: row; flex-wrap: wrap; gap: .1rem .7rem;
  }
}

/* --- Notfallliste ------------------------------------------------------- */
.notruf { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.notruf > li { margin: 0; }
.notruf__k {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--marke); border-radius: var(--r-klein);
  padding: 1rem 1.1rem;
}
.notruf__k--rot { border-left-color: var(--rot); background: var(--rot-hell); border-color: #f0c9ca; }
.notruf__k--rot .notruf__b { color: #4a2022; }
.notruf__n {
  font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; color: var(--tinte); line-height: 1.15;
}
.notruf__k--rot .notruf__n { color: var(--rot-dunkel); }
.notruf__n:hover { text-decoration: underline; }
.notruf__h { font-weight: 600; font-size: .96rem; }
.notruf__b { font-size: .9rem; color: var(--tinte-2); margin: 0; }

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweiskasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.5rem;
  max-width: 74ch;
}
.hinweiskasten h2, .hinweiskasten h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.hinweiskasten--warnung { background: #fdf6e8; border-color: #eedcb4; }
.hinweiskasten--marke { background: var(--marke-hell); border-color: #d7e1f4; }

/* --- CTA-Band ----------------------------------------------------------- */
.ctaband { display: grid; gap: 1.2rem; align-items: center; }
.ctaband h2 { margin-bottom: .3rem; }
.ctaband p { margin: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faqs { display: grid; gap: .6rem; max-width: 820px; }
.faq {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein); padding: 0;
}
.faq summary {
  cursor: pointer; padding: .9rem 1.1rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  align-items: center; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--marke-text); font-size: 1.4rem; line-height: 1;
  flex: none; font-weight: 400;
}
.faq[open] summary::after { content: '−'; }
.faq[open] summary { padding-bottom: .3rem; }
.faq p { padding: 0 1.1rem 1rem; margin: 0; color: var(--tinte-2); font-size: .96rem; }

/* --- Stellen ------------------------------------------------------------ */
.stelle {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem; margin-bottom: 1.15rem;
}
.stelle h3 { margin-bottom: .5rem; }
.stelle ul { margin-bottom: 0; padding-left: 1.15rem; }
.merkliste {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.merkliste li {
  margin: 0; font-size: .88rem; background: var(--grund-2);
  border: 1px solid var(--linie); border-radius: 100px;
  padding: .24rem .75rem; color: var(--tinte-2);
}
.ab--dunkel .merkliste li {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22);
  color: var(--auf-dunkel);
}

/* --- Fuss --------------------------------------------------------------- */
.fuss { background: var(--dunkel); color: var(--auf-dunkel); padding: var(--luft) 0 0; }
/* Der Fuss ist ebenso dunkel wie .ab--dunkel, traegt die Klasse aber nicht.
   Darum hier alle Farben noch einmal ausdruecklich. */
.fuss p, .fuss li, .fuss dt, .fuss dd, .fuss address, .fuss span { color: var(--auf-dunkel); }
.fuss .klein { color: var(--auf-dunkel-2); }
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__in { display: grid; gap: 2rem; padding-bottom: 2.4rem; }
.fuss__marke {
  display: block; width: 176px; height: auto; color: #fff;
  margin-bottom: .8rem;
}
.fuss__h {
  font-family: 'SourceSans', sans-serif; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--auf-dunkel-2) !important; margin-bottom: .8rem; font-weight: 600;
}
.fuss address { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; }
.fuss address svg { color: var(--marke-auf-dunkel); margin-top: .25rem; }
.fuss__kontakt { display: flex; flex-direction: column; gap: .35rem; }
.fuss__kontakt a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.fuss__kontakt svg { color: var(--marke-auf-dunkel); }
.fuss__liste { list-style: none; padding: 0; margin: 0 0 .8rem; }
.fuss__liste li { font-size: .92rem; margin-bottom: .3rem; }
.fuss__liste--nav li { margin-bottom: .45rem; }
.zeiten--fuss .zeile { border-color: rgba(238, 241, 246, .16); }
.zeiten--fuss .zeit { color: var(--auf-dunkel-2); }
/* Im dunklen Fuss hebt sich das helle Markengruen nicht ab - hier wird die
   Flaeche selbst dunkelgruen und die Schrift weiss. */
.zeiten--fuss .zeile[data-heute] { background: #2b4f8f; border-bottom-color: transparent; }
.zeiten--fuss .zeile[data-heute] dt,
.zeiten--fuss .zeile[data-heute] .zeit,
.zeiten--fuss .zeile[data-heute] dd { color: #fff; }
.fuss__notfall {
  border: 1px solid rgba(228, 29, 34, .5); border-radius: var(--r-klein);
  padding: .8rem .95rem; margin-top: .9rem;
  background: rgba(228, 29, 34, .12);
}
.fuss__notfall p { margin: 0; font-size: .88rem; }
.fuss__notfall a { font-weight: 700; font-variant-numeric: tabular-nums; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  justify-content: space-between;
  border-top: 1px solid rgba(238, 241, 246, .16);
  padding-top: 1.2rem; padding-bottom: 1.4rem;
}
.fuss__unten p { margin: 0; font-size: .85rem; color: var(--auf-dunkel-2) !important; }
.fuss__unten a { margin-right: 1rem; font-size: .85rem; }

/* --- Rufleiste (nur schmal) --------------------------------------------- */
.rufleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  display: flex; background: var(--flaeche);
  border-top: 1px solid var(--linie-2);
  box-shadow: 0 -2px 12px rgba(35, 38, 29, .1);
  padding-bottom: env(safe-area-inset-bottom);
}
.rufleiste a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: .1rem; padding: .55rem .3rem; text-decoration: none;
  color: var(--tinte); font-size: .75rem; font-weight: 600;
  white-space: nowrap;      /* kurz und fest - hier richtig */
  border-right: 1px solid var(--linie);
}
.rufleiste a:last-child { border-right: 0; }
.rufleiste svg { width: 1.25rem; height: 1.25rem; color: var(--marke); }
.rufleiste a:hover { background: var(--marke-hell); }
.rufleiste a.rufleiste--notfall { color: var(--rot-dunkel); }
.rufleiste a.rufleiste--notfall svg { color: var(--rot-text); }
.rufleiste a.rufleiste--notfall:hover { background: var(--rot-hell); }
body { padding-bottom: 68px; }   /* Platz fuer die Rufleiste - gemessen,
                                    nicht geschaetzt */

/* --- Breiten ------------------------------------------------------------ */
@media (min-width: 560px) {
  .finder { grid-template-columns: repeat(2, 1fr); }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  /* Bei genau drei Kacheln spannt die letzte ueber beide Spalten - eine
     halb leere Rasterzeile wird als Darstellungsfehler gelesen. */
  .kacheln--drei > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .kacheln--drei > :last-child:nth-child(3) .kachel__bild img { aspect-ratio: 21 / 9; }
  .gitter--drei { grid-template-columns: repeat(2, 1fr); }
  /* Zweispaltig bleibt bei ungerader Anzahl die letzte Zeile halb leer -
     das liest sich als Darstellungsfehler. */
  .gitter--drei > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gitter--drei > :last-child:nth-child(odd) img { aspect-ratio: 21 / 9; }
  .infokarten { grid-template-columns: repeat(2, 1fr); }
  .geraete { grid-template-columns: repeat(2, 1fr); }
  .notruf { grid-template-columns: repeat(2, 1fr); }
  .leistungen { grid-template-columns: repeat(2, 1fr); }
}

/* Die Telefonnummer im Kopf ist die wichtigste Handlung - sie erscheint,
   sobald ueberhaupt Platz dafuer ist. */
@media (min-width: 620px) {
  .kopf__tel { display: inline-flex; }
}

/* Ab hier traegt der Kopf Nummer UND Schaltflaeche; die feste Rufleiste am
   unteren Rand wird damit ueberfluessig. */
@media (min-width: 800px) {
  body { padding-bottom: 0; }
  .rufleiste { display: none; }
  .kopf__tat .btn--klein { display: inline-flex; }
}

@media (min-width: 760px) {
  body { font-size: 1.09375rem; }
  .marke__wort { width: 178px; }
  /* Gleich breite Spalten. Mit 1.05fr/.95fr staende das Bild bei
     .paar--gedreht in der breiteren Spalte, waehrend die sizes-Angabe die
     schmalere nennt - der Browser waehlte eine zu kleine Datei. */
  .paar { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .paar__bild { max-width: none; }
  .paar--gedreht .paar__text { order: 2; }
  .ctaband { grid-template-columns: 1.4fr auto; gap: 2rem; }
  .ctaband .tatreihe { justify-content: flex-end; }
  .dreispalt { grid-template-columns: repeat(3, 1fr); }
  .gitter--drei { grid-template-columns: repeat(3, 1fr); }
  .gitter--drei > :last-child:nth-child(odd) { grid-column: auto; }
  .gitter--drei > :last-child:nth-child(odd) img { aspect-ratio: 3 / 2; }
  /* Dreispaltig bleibt bei 7 Bildern die letzte Zeile zu einem Drittel
     belegt - dieselbe Luecke wie zweispaltig bei ungerader Anzahl, nur an
     anderer Stelle. Das letzte Bild spannt dann ueber alle drei Spalten und
     bekommt ein flacheres Verhaeltnis, damit es kein Plakat wird. */
  .gitter--drei > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .gitter--drei > :last-child:nth-child(3n + 1) img { aspect-ratio: 21 / 9; }
  .notruf { grid-template-columns: repeat(3, 1fr); }
  .fuss__in { grid-template-columns: 1.4fr 1.2fr 1fr; }
}

@media (min-width: 1000px) {
  .finder { grid-template-columns: repeat(4, 1fr); }
  .kacheln--drei { grid-template-columns: repeat(3, 1fr); }
  .kacheln--drei > :last-child:nth-child(3) { grid-column: auto; }
  .kacheln--drei > :last-child:nth-child(3) .kachel__bild img { aspect-ratio: 3 / 2; }
  .geraete { grid-template-columns: repeat(3, 1fr); }
  .leistungen { grid-template-columns: repeat(3, 1fr); }
  .fuss__in { grid-template-columns: 1.45fr 1.25fr .85fr .9fr; }
  .hero__in { padding-top: 6.4rem; padding-bottom: 4.6rem; }
  .marke__wort { width: 198px; }
}

/* Erst hier ist wirklich Platz fuer die Hauptnavigation. Frueher
   eingeblendet laeuft der Kopf waagrecht ueber; mit flex-wrap braeche sie
   stattdessen auf zwei Zeilen. Beides sieht nach Panne aus - bis hierher
   fuehrt darum die Schublade. "Startseite" fehlt in der Leiste bewusst:
   die Wortmarke fuehrt dorthin und traegt ein aria-label. */
@media (min-width: 1080px) {
  .nav { display: flex; gap: .1rem; margin-left: .6rem; flex-wrap: nowrap; }
  .nav a {
    padding: .5rem .55rem; border-radius: var(--r-klein);
    color: var(--tinte-2); text-decoration: none;
    font-size: .95rem; font-weight: 500; white-space: nowrap;
  }
  .nav a:hover { background: var(--grund-2); color: var(--tinte); }
  .nav a[aria-current='page'] { color: var(--marke-text); font-weight: 600; }
  .lupe { display: none; }
}

/* --- Einblenden beim Scrollen ------------------------------------------- */
.kein-js .auftritt { opacity: 1; transform: none; }
.auftritt {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.auftritt--da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .kopf, .rufleiste, .hero__bild, .hero__folie, .ctaband, .gross { display: none; }
  body { background: #fff; font-size: 11pt; padding: 0; }
  .hero__in { padding: 0 0 1rem; }
  .hero__t, .hero__lead, .augenbraue { color: #000; background: none; }
  .ab { padding: .6rem 0; }
  .arzt, .leistung, .infokarte { break-inside: avoid; }
  .arzt__wd[open] .werdegang { display: grid; }
  .fuss { background: #fff; color: #000; }
  .fuss p, .fuss li, .fuss dt, .fuss dd, .fuss address, .fuss span, .fuss a { color: #000; }
}

/* --- Grossansicht ---------------------------------------------------------
   <dialog> mit showModal(): Fokusfalle, Escape und die Abdunklung
   (::backdrop) kommen vom Browser, und der Fokus springt beim Schliessen von
   selbst auf das angeklickte Bild zurueck. Kein Fremdcode, kein Konflikt mit
   der Content-Security-Policy.

   Wichtig: die eigene display-Regel NUR an [open] haengen. Ein
   ".gross { display:flex }" schluege das eingebaute Verhalten und der Rahmen
   stuende dauerhaft offen - dieselbe Falle wie beim Schubladenmenue. */
.zoom {
  display: block; position: relative; line-height: 0;
  border-radius: var(--r-klein); overflow: hidden;
  color: inherit; text-decoration: none;
}
.zoom__lupe {
  position: absolute; right: .55rem; bottom: .55rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 26, 17, .66); color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.zoom__lupe svg { width: 1.1rem; height: 1.1rem; }
.zoom:hover .zoom__lupe,
.zoom:focus-visible .zoom__lupe { opacity: 1; transform: none; }
/* Ohne Zeigegeraet gibt es kein :hover - dort steht die Lupe dauerhaft,
   sonst sieht man dem Bild nicht an, dass es sich anklicken laesst. */
@media (hover: none) { .zoom__lupe { opacity: 1; transform: none; } }
.zoom img { transition: transform .3s ease; }
.zoom:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .zoom img, .zoom:hover img { transform: none; }
}

.gross {
  position: fixed; inset: 0; margin: 0;
  width: 100vw; max-width: 100vw;
  height: 100%; max-height: 100%;
  padding: 0; border: 0; background: transparent; overflow: hidden;
}
.gross[open] { display: flex; align-items: center; justify-content: center; }
.gross::backdrop { background: rgba(15, 18, 11, .94); }
.gross__buehne {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  max-width: min(94vw, 1400px);
}
.gross__bild {
  display: block; width: auto; height: auto;
  /* 8.5rem bleiben links und rechts frei - genau so viel, dass die beiden
     Pfeile nie auf dem Bild liegen. */
  max-width: min(calc(100vw - 8.5rem), 1400px); max-height: 76vh;
  border-radius: var(--r-klein);
  background: var(--dunkel-2);
}
.gross__bu { margin: 0; color: #eef1f6; font-size: .92rem; text-align: center; max-width: 46rem; }
.gross__zaehler { color: var(--auf-dunkel-2); margin-left: .6rem; white-space: nowrap; }
.gross__knopf {
  position: absolute;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(51, 58, 41, .78); color: #fff;
  border-radius: 999px; cursor: pointer;
}
.gross__knopf svg { width: 22px; height: 22px; fill: currentColor; }
.gross__knopf:hover { background: var(--marke); border-color: transparent; }
.gross__zu { top: 1rem; right: 1rem; }
.gross__pfeil { top: 50%; margin-top: -24px; }
.gross__pfeil--zurueck { left: 1rem; }
.gross__pfeil--weiter { right: 1rem; }
@media (max-width: 620px) {
  .gross__buehne { max-width: 96vw; }
  .gross__bild { max-width: 96vw; max-height: 66vh; }
  /* Nicht ganz nach unten: dort liegt die feste Rufleiste - die Pfeile
     saessen genau darauf. */
  .gross__pfeil { top: auto; margin-top: 0; bottom: 4.75rem; }
}
/* Solange die Grossansicht offen ist, soll die Seite dahinter nicht
   mitscrollen. Die Klasse setzt das Skript. */
.gross-offen, .gross-offen body { overflow: hidden; }

/* --- Abstandsklassen ----------------------------------------------------
   Statt style="margin-top:…". Ein style-Attribut wird von der
   Content-Security-Policy (style-src 'self') blockiert - und das faellt nur
   auf, wenn man gegen die echte Domain prueft, nicht gegen den lokalen
   Server ohne Kopfzeilen. */
.oben-1 { margin-top: .85rem; }
.oben-2 { margin-top: 1.1rem; }
.oben-3 { margin-top: 1.4rem; }
.oben-4 { margin-top: 2.1rem; }
.oben-5 { margin-top: 2.4rem; }

/* --- Organbereiche ------------------------------------------------------ */
/* Die acht Symbole stammen aus dem Bestand (800 x 800, einfarbig). Sie
   liegen als <symbol> einmal in der Seite und werden per <use> geholt -
   nicht als externe Datei mit <use href="datei.svg#id">: das laedt in
   manchen Browsern still nichts, und dann sind acht Kacheln leer. */
.organe {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr);
}
.organe li { margin: 0; }
.organe__k {
  height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: .95rem .9rem;
}
.organe__i {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--marke-hell); color: var(--marke);
}
.organe__i svg { width: 1.6rem; height: 1.6rem; }
.organe__n { font-weight: 600; font-size: .95rem; line-height: 1.35; }
@media (min-width: 560px) { .organe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .organe { grid-template-columns: repeat(4, 1fr); } }

/* --- Partner und Mitgliedschaften --------------------------------------- */
.partner { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.partner li { margin: 0; }
.partner__k {
  height: 100%; display: flex; flex-direction: column; gap: .7rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.2rem;
  box-shadow: var(--schatten-klein);
}
/* Eigene Hoehe fuer den Bildkasten: ohne sie faellt das <picture> auf die
   Hoehe seines Inhalts zurueck und die drei Logos stehen auf drei
   verschiedenen Grundlinien. */
.partner__bild {
  height: 74px; display: flex; align-items: center;
}
.partner__bild img { max-height: 74px; width: auto; }
.partner__h { font-weight: 600; font-size: 1rem; margin: 0; }
.partner__b { font-size: .93rem; color: var(--tinte-2); margin: 0; flex: 1; }
@media (min-width: 720px) { .partner { grid-template-columns: repeat(3, 1fr); } }

/* --- Bedingungen zur Online-Anfrage ------------------------------------- */
/* Sie stehen unmittelbar neben jeder Buchungsschaltflaeche. Im Bestand
   standen sie weit unten im Fliesstext - und genau darum schickten
   Menschen Anfragen, die nicht beantwortet wurden. */
.bedingungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bedingungen li {
  margin: 0; padding-left: 1.6rem; position: relative;
  font-size: .93rem; color: var(--tinte-2);
}
.bedingungen li::before {
  content: ''; position: absolute; left: .35rem; top: .62em;
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--marke);
}

/* --- Terminkategorien --------------------------------------------------- */
.kategorien { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kategorien li {
  margin: 0; padding: .8rem .95rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  display: grid; gap: .1rem;
}
.kategorien b { font-size: .98rem; }
.kategorien .dauer {
  font-size: .82rem; color: var(--marke-text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kategorien span:last-child { font-size: .9rem; color: var(--tinte-2); }
@media (min-width: 700px) { .kategorien { grid-template-columns: repeat(2, 1fr); } }

/* --- Ratgeber ----------------------------------------------------------- */
.ratgeber { display: grid; gap: 1.3rem; }
.ratgeber__g {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.2rem 1.3rem;
}
.ratgeber__g h3 { margin-bottom: .5rem; }
.ratgeber__g > p { font-size: .93rem; color: var(--tinte-2); }
.linkliste { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .1rem; }
.linkliste li { margin: 0; }
.linkliste a {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .42rem 0; font-size: .95rem;
  border-bottom: 1px solid var(--linie);
}
.linkliste li:last-child a { border-bottom: 0; }
.linkliste a::before {
  content: '↗'; color: var(--marke); font-size: .85em; flex: none;
  text-decoration: none;
}
.linkliste .pdf::before { content: 'PDF'; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; background: var(--marke-hell); color: var(--marke-text);
  padding: .15em .35em; border-radius: 3px; }
@media (min-width: 900px) { .ratgeber { grid-template-columns: repeat(2, 1fr); }
  .ratgeber__g--breit { grid-column: 1 / -1; } }

/* --- Sprungmarken im Ratgeber ------------------------------------------- */
.sprungmarken { list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem; }
.sprungmarken li { margin: 0; }
.sprungmarken a {
  display: inline-block; padding: .35rem .7rem; font-size: .88rem;
  background: var(--flaeche); border: 1px solid var(--linie-2);
  border-radius: 999px; text-decoration: none; color: var(--tinte-2);
}
.sprungmarken a:hover { border-color: var(--marke); color: var(--marke-text); }

/* --- Formular (baut eine E-Mail, sendet nichts an unseren Server) ------- */
.formular { display: grid; gap: .9rem; }
.feld { display: grid; gap: .3rem; }
.feld label { font-size: .9rem; font-weight: 600; }
.feld .pflicht { color: var(--rot-text); }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 1rem;
  padding: .6rem .7rem; border: 1px solid var(--linie-2);
  border-radius: var(--r-klein); background: var(--flaeche); color: var(--tinte);
  width: 100%;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--marke-text); outline-offset: 1px;
}
.feld .hilfe { font-size: .84rem; color: var(--tinte-3); }
@media (min-width: 640px) { .formular--zwei { grid-template-columns: repeat(2, 1fr); }
  .formular--zwei .feld--breit, .formular--zwei .tatreihe { grid-column: 1 / -1; } }

/* --- Karte, erst auf Klick ---------------------------------------------- */
/* Google Maps setzt Cookies und uebertraegt die IP-Adresse. Bei einer
   Arztpraxis ist schon der Aufruf der Kontaktseite eine Angabe zur
   Gesundheit - das ohne Einwilligung weiterzugeben, ist nach revDSG
   heikel. Darum ein Platzhalter, der erst auf Klick laedt.
   Das iframe braucht eine EIGENE Hoehe, sonst faellt es auf 150px. */
.karte { position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linie); background: var(--grund-2); }
.karte__platz {
  min-height: 300px; display: grid; place-items: center; gap: .8rem;
  padding: 2rem 1.2rem; text-align: center;
}
.karte__platz p { max-width: 34rem; font-size: .93rem; color: var(--tinte-2); }
.karte iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --- Nachtraege fuer diese Praxis --------------------------------------- */

/* Hero ohne Bild. Es gibt nur EIN Foto; auf den uebrigen Seiten stuende
   sonst rechts ein leerer Halbkasten. Die Regel muss NACH der
   Zweispalten-Regel von .hero--ruhig stehen, sonst gewinnt diese. */
.hero--textnur .hero__in { display: block; }
.hero--textnur .hero__text { max-width: 40rem; }

/* Zwei Aerzte statt drei oder vier: das Vierergitter von .finder liesse
   zwei Karten schmal am linken Rand kleben. */
@media (min-width: 560px) { .finder--zwei { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .finder--zwei { grid-template-columns: repeat(2, 1fr);
  max-width: 46rem; margin-inline: auto; } }
.finder--team .zeichen { width: 110px; aspect-ratio: 1 / 1; border-radius: var(--r-klein); }
.zeichen--klein { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }

/* Hakenliste: die vollstaendige Angebotsliste des Bestands, lesbar
   gemacht. Zweispaltig erst, wenn wirklich Platz ist - sonst reisst der
   Blick zwischen den Spalten hin und her. */
.hakenliste { list-style: none; margin: 0 0 1em; padding: 0;
  display: grid; gap: .35rem; }
.hakenliste li {
  margin: 0; padding-left: 1.7rem; position: relative; font-size: .97rem;
}
.hakenliste li::before {
  content: ''; position: absolute; left: .1rem; top: .52em;
  width: .62rem; height: .34rem;
  border-left: 2px solid var(--marke); border-bottom: 2px solid var(--marke);
  transform: rotate(-45deg);
}
.hakenliste--eng li { font-size: .93rem; color: var(--tinte-2); }
@media (min-width: 720px) {
  .fliesstext .hakenliste:not(.hakenliste--eng) {
    grid-template-columns: repeat(2, 1fr); gap: .35rem 1.6rem;
  }
}

/* Die Bedingungen im dunklen Schlussband brauchen ihre eigenen Farben -
   die Grundfassung von .bedingungen rechnet mit hellem Grund. */
.ctaband__bed { margin-top: .9rem; }
.ctaband__bed li { color: var(--auf-dunkel-2); font-size: .89rem; }
.ctaband__bed li::before { background: var(--marke-auf-dunkel); }

/* Lange, unteilbare Zeichenketten (E-Mail-Adressen, Registeradressen) sind
   bei 320px breiter als die Spalte. overflow-wrap:anywhere greift NUR bei
   solchen Woertern und laesst den uebrigen Umbruch in Ruhe - im Gegensatz
   zu word-break:break-all, das mitten in gewoehnlichen Woertern trennt.
   Gefunden bei 320px auf /datenschutz: 10px Ueberlauf durch
   praxiszentrum-reinach@hin.ch. */
.fliesstext a, .infokarte a, address, .linkliste a { overflow-wrap: anywhere; }

/* Sicherheitsnetz fuer Ueberschriften: ein einzelnes langes Wort
   ("Datenschutzerklärung") ist bei 320px breiter als die Spalte und
   schiebt die ganze Seite waagrecht. Die weichen Trennstellen aus
   build_site.py greifen zuerst; das hier faengt ab, was dort fehlt.
   Wichtig: break-word, nicht break-all - break-all trennt auch mitten in
   Woertern, die noch gepasst haetten. */
h1, h2, h3, .hero__t { overflow-wrap: break-word; }

/* Der Symbolvorrat (acht <symbol>) liegt einmal pro Seite im Dokument und
   wird per <use> geholt. Er darf nichts einnehmen - aber NICHT ueber ein
   style-Attribut: die Content-Security-Policy (style-src 'self') blockiert
   inline styles wortlos, und das faellt nur bei einer Pruefung gegen die
   echte Domain auf. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Vier Notfallnummern, nicht drei: im Dreierraster stuende die letzte
   Karte allein in der zweiten Zeile. Zwei mal zwei, ab 1000px vier
   nebeneinander - dann ist die Reihenfolge (144 zuerst) auch die
   Lesereihenfolge. */
@media (min-width: 620px) { .notruf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .notruf { grid-template-columns: repeat(4, 1fr); } }

/* Im zweispaltigen Formular sind die Zeilen unterschiedlich hoch (nicht
   jedes Feld hat einen Hilfstext). Ohne align-content dehnt sich das
   Eingabefeld auf die Zeilenhoehe - dann steht neben einem normalen Feld
   ein doppelt hohes, und das sieht nach Fehler aus. */
.feld { align-content: start; }

/* --- Kopfbereich der Startseite, helle Fassung -------------------------- */
/* Kein Foto als Hintergrund, keine Abdunklung: der Text steht auf hellem
   Grund bei 12:1 statt auf einer Folie, deren Deckkraft man gegen ein
   Foto ausmessen muss. Das Foto steht als eigene Karte daneben - dort
   leistet es das Einzige, was es leisten kann: zeigen, welches Haus
   gemeint ist. */
.hero--start {
  background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund-2) 100%);
  border-bottom: 1px solid var(--linie);
  overflow: visible;            /* .hero setzt hidden - hier unnoetig */
}
.hero--start .hero__in {
  display: grid; gap: 2rem; align-items: center;
  padding-top: clamp(2.2rem, 6vw, 4rem);
  padding-bottom: clamp(2.2rem, 6vw, 4rem);
}
.hero--start .hero__text { min-width: 0; }
.hero--start .augenbraue {
  color: var(--marke-dunkel); background: var(--marke-hell);
}
.hero--start .hero__t {
  color: var(--tinte); max-width: 17ch;
  font-size: clamp(2rem, 5.4vw, 3.1rem);
}
.hero--start .hero__lead {
  color: var(--tinte-2); max-width: 46ch; margin-bottom: 1.5rem;
}
/* .btn--geist steht hier NICHT auf einem Foto - die getoente Flaeche und
   der weisse Rand aus .hero .btn--geist waeren auf hellem Grund unsichtbar.
   Diese Regel muss darum nach jener stehen. */
.hero--start .btn--geist {
  color: var(--marke-text); border-color: var(--linie-2);
  background: var(--flaeche); backdrop-filter: none;
}
.hero--start .btn--geist:hover {
  border-color: var(--marke); color: var(--marke-dunkel);
  background: var(--flaeche);
}
.hero--start .status { color: var(--tinte-2); margin-top: 1.1rem; }
.hero--start .status__punkt { background: var(--tinte-3); }
.hero--start .status.status--offen .status__punkt { background: #2f8a4a; }
.hero--start .status.status--zu .status__punkt { background: #b07514; }

/* Drei Zahlen statt einer vierten Kachelreihe: der Schnellfinder mit vier
   Kacheln folgt unmittelbar darunter, zweimal dieselbe Form waere eine
   Wiederholung. */
.hero__zahlen {
  list-style: none; margin: 2rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--linie);
  display: grid; gap: .9rem;
}
.hero__zahlen li {
  margin: 0; display: flex; align-items: baseline; gap: .7rem;
  font-size: .93rem; color: var(--tinte-2);
}
.hero__zahlen b {
  font-family: 'SourceSerif', Georgia, serif;
  font-size: 1.55rem; line-height: 1; color: var(--marke-text);
  font-variant-numeric: tabular-nums;
  min-width: 1.2em; flex: none;
}

/* Die Bildkarte. Eigene Hoehe ueber aspect-ratio, sonst faellt das
   <picture> auf die Hoehe seines Inhalts zurueck und object-fit greift
   nicht. */
.hero__karte { margin: 0; }
.hero__karte picture { display: block; }
.hero__karte img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--schatten);
  border: 1px solid var(--linie);
}
.hero__karte figcaption {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .8rem; font-size: .9rem; color: var(--tinte-2);
}
.hero__karte figcaption svg {
  width: 1.05rem; height: 1.05rem; color: var(--marke); flex: none;
  margin-top: .15em;
}
.hero__karte figcaption strong { color: var(--tinte); }

@media (min-width: 900px) {
  .hero--start .hero__in {
    grid-template-columns: 1.05fr 0.95fr; gap: 2.6rem 2.6rem;
  }
  /* Das Zahlenband liegt in derselben Rasterspur wie die beiden Spalten
     und muss darum ausdruecklich ueber beide spannen - sonst steht es in
     der linken und die rechte Spalte bekommt eine leere Zeile. */
  .hero__zahlen {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr); gap: 1.4rem 2.6rem;
    margin-top: .6rem;
  }
  .hero__zahlen li { align-items: baseline; }
}