/* ==========================================================================
   Augenpartner Praxis-Sites (Dietikon, Berikon, Spreitenbach) — Hauptdesign
   Kopie von altstetten/assets/css/stil.css (Stand 2026-09-04), unveraendert.
   Aufbau: 1 Design-Tokens · 2 Grundlagen · 3 Layout · 4 Kopf/Navigation
           5 Hero · 6 Bausteine · 7 Formular · 8 Fuss · 9 Hilfsklassen
   Keine externen Assets, System-Font-Stack, mobile-first.
   ========================================================================== */

/* 1 — Design-Tokens ------------------------------------------------------
   Die Tokens stehen jetzt im Design-Kit: design-kit/tokens.css, gemeinsam
   fuer alle fuenf Auftritte. Diese Datei baut darauf auf und setzt nur noch,
   was fuer Altstetten allein gilt. Aendern immer im Hub, dann neu kopieren.
   ------------------------------------------------------------------------ */

/* 2 — Grundlagen -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Schriftfamilie, Gewicht und Laufweite der Ueberschriften kommen aus dem
   Design-Kit (System-Schrift, 650). Hier bleibt nur, was das Kit nicht setzt. */
h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  line-height: 1.18;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--tief);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--tempo);
}
a:hover { color: var(--himmel-dunkel); }

img, svg { max-width: 100%; }
svg { display: block; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.25rem; }
li + li { margin-top: var(--s2); }

hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s6) 0; }

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

::selection { background: var(--himmel-hell); color: var(--text); }

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

/* 3 — Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.sektion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sektion--flaeche { background: var(--flaeche); }
.sektion--schmal { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.sektion__kopf {
  max-width: 40rem; /* ca. 70 Zeichen */
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sektion__kopf--zentriert { margin-inline: auto; text-align: center; }
.sektion__intro {
  font-size: 1.125rem;
  color: var(--text-leise);
  margin-bottom: 0;
}

/* Auszeichnung ueber Titeln */
.marker {
  display: inline-block;
  margin-bottom: var(--s3);
  /* Die Marker-Zeile setzt die Familie ausdruecklich selbst: das Design-Kit
     legt die Anzeigeschrift auf h1-h4, und auf der Startseite ist diese
     kleine Grossbuchstaben-Zeile das <h1>. Seit dem 05.09. ist die
     Anzeigeschrift ohnehin die System-Schrift, die Zeile bleibt als
     Absicherung stehen. */
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tief);
  /* Auf der Startseite traegt die Marker-Zeile das <h1>. Zeilenhoehe und
     Umbruch deshalb hier festschreiben, sonst greifen die h1-Regeln. */
  line-height: 1.65;
  text-wrap: wrap;
}

.raster { display: grid; gap: var(--s5); }
@media (min-width: 620px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Zweispaltiges Textlayout (Inhalt + Seitenspalte) */
.split { display: grid; gap: var(--s6); }
.split p { max-width: 68ch; }
@media (min-width: 920px) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
}

/* 4 — Kopf und Navigation ----------------------------------------------- */
.skip {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--tief);
  color: var(--weiss);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
  transition: top var(--tempo);
}
.skip:focus { top: 0; color: var(--weiss); }

.leiste {
  background: var(--tief);
  color: rgba(255, 255, 255, .92);
  font-size: .9375rem;
}
.leiste__inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  min-height: 44px;
  padding-block: var(--s1);
}
.leiste__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.leiste__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px; /* Touch-Ziel */
  color: inherit;
  text-decoration: none;
}
.leiste__eintrag svg { width: 17px; height: 17px; opacity: .85; flex: none; }
.leiste a.leiste__eintrag:hover { color: var(--weiss); text-decoration: underline; }
.leiste__adresse { display: none; }
@media (min-width: 780px) { .leiste__adresse { display: inline-flex; } }
/* Kleine Schirme: Adresse als EINE ruhige Zeile mittig zwischen Telefon und
   Sprachwahl, springt zum Adressblock der Kontaktseite. Der Ort kommt erst
   ab 560px dazu — darunter traegt die Strasse allein (Ort steht ohnehin
   gross im Hero-Marker und in der Schnellinfo). */
.leiste__adresse-kurz { display: none; }
@media (max-width: 779px) {
  .leiste__adresse-kurz {
    display: flex;
    flex: 1; /* nimmt die Mitte ein und zentriert dort */
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: .3em;
    min-height: 44px; /* Touch-Ziel */
    color: inherit;
    font-size: .8125rem;
    white-space: nowrap;
    text-decoration: none;
  }
  .leiste__adresse-kurz:hover { color: var(--weiss); text-decoration: underline; }
  /* Enger Raum: Abstaende der Leiste reduzieren, sonst bricht es bei 360px um. */
  .leiste__inhalt { gap: var(--s1) var(--s2); }
}
@media (max-width: 559px) { .leiste__ort { display: none; } }
/* Sprungziel liegt sonst unter dem klebenden Kopf. */
#adresse, #weg, #karte { scroll-margin-top: 96px; }

/* Sprachumschalter: in der Infoleiste erst ab Tablet, darunter im Mobilmenue */
.sprachen { display: flex; align-items: center; gap: var(--s1); }
.leiste .sprachen { display: none; }
/* Link-Reihe erst ab der vollen Desktop-Navigation (gleiche Schwelle wie der
   Burger, 980px) — darunter wuerde sie mit 8 Sprachen in die zweite Zeile
   umbrechen; dort uebernimmt die kompakte Sprachwahl. */
@media (min-width: 980px) { .leiste .sprachen { display: flex; } }
.sprachen__label {
  margin-right: var(--s2);
  opacity: .75;
  font-size: .8125rem;
}
/* Auf kleinen Schirmen entfaellt das Wort „Sprache" zugunsten der Kuerzel. */
@media (max-width: 599px) { .sprachen__label { display: none; } }
.sprachen__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 2px var(--s2);
  border-radius: 999px;
  color: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--tempo), color var(--tempo);
}
.sprachen__link:hover { background: rgba(255, 255, 255, .16); color: var(--weiss); }
.sprachen__link[aria-current="true"] { background: var(--weiss); color: var(--tief); }

/* Kompakte Sprachwahl (kleine Schirme): Knopf mit aktivem Kuerzel, darunter
   aufklappbar die vollen Sprachnamen — skaliert auf beliebig viele Sprachen. */
.sprachwahl { position: relative; display: none; }
@media (max-width: 979px) { .sprachwahl { display: block; } }
.sprachwahl__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px; /* Touch-Ziel */
  padding: 2px var(--s2);
  color: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}
.sprachwahl__knopf::-webkit-details-marker { display: none; }
.sprachwahl__knopf::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--tempo);
}
.sprachwahl[open] .sprachwahl__knopf::after { transform: rotate(225deg) translateY(-2px); }
.sprachwahl__liste {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 80; /* ueber dem klebenden Kopf (z-index 50) */
  min-width: 11rem;
  margin: 0;
  padding: var(--s1);
  list-style: none;
  background: var(--weiss);
  color: var(--tief);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(12, 30, 33, .18);
}
.sprachwahl__link {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.sprachwahl__link:hover { background: var(--himmel-hell); }
.sprachwahl__link[aria-current="true"] { font-weight: 700; background: var(--himmel-hell); }

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px;
  padding-block: var(--s3);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text);
}
.marke__zeichen { width: 38px; height: 38px; flex: none; color: var(--signet); }
.marke__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.marke__claim {
  display: none;
  font-size: .8125rem;
  color: var(--text-leise);
  line-height: 1.3;
}
@media (min-width: 520px) { .marke__claim { display: block; } }
@media (min-width: 1000px) { .marke__name { font-size: 1.1875rem; } }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.burger:hover { border-color: var(--himmel); }
.burger svg { width: 22px; height: 22px; }
.burger__auf, .burger__zu { display: flex; }
.burger__zu { display: none; }
.burger[aria-expanded="true"] .burger__auf { display: none; }
.burger[aria-expanded="true"] .burger__zu { display: block; }

.nav { display: flex; align-items: center; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste li + li { margin-top: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tempo), color var(--tempo);
}
.nav__link:hover { background: var(--himmel-hell); color: var(--tief); }
.nav__link[aria-current="page"] { color: var(--tief); box-shadow: inset 0 -2px 0 var(--himmel); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.nav__link--notfall { color: var(--warn); }
.nav__link--notfall:hover { background: var(--warn-hell); color: var(--warn); }

/* Klappmenue — Umbruchpunkt 1180px, nicht 980px: der Terminknopf traegt je
   nach Schalter einen langen Text («Terminbuchung demnaechst»), und daneben
   passen die fuenf Menuepunkte erst ab 1180px in eine Zeile. Gemessen ueber
   alle acht Sprachen, Spanisch und Portugiesisch brauchen am meisten Platz.
   Darunter klappt das Menue ein — dort steht der Knopf ueber die volle Breite. */
@media (max-width: 1179px) {
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: var(--s4) var(--s5) var(--s6);
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-hoch);
    max-height: calc(100dvh - 148px); /* Kopf oben, Aktionsleiste unten */
    overflow-y: auto;
  }
  /* stretch: volle Zeilenbreite als Tippfläche statt zentrierter Text */
  .nav.ist-offen { display: flex; flex-direction: column; align-items: stretch; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: var(--s1); order: 2; }
  .nav__link { min-height: 48px; padding-inline: var(--s4); font-size: 1.0625rem; }
  .nav__link[aria-current="page"] { background: var(--himmel-hell); box-shadow: none; border-radius: var(--radius-s); }
  /* Termin-Button steht im Mobilmenue zuoberst */
  .nav__cta { order: 1; margin-bottom: var(--s4); }
  .nav__cta .btn { width: 100%; min-height: 52px; font-size: 1.0625rem; }
  /* Sprachwahl am Ende des Mobilmenues, mit grossen Schaltflaechen */
  .nav__sprachen {
    order: 3;
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--linie);
  }
  .nav__sprachen .sprachen { flex-wrap: wrap; gap: var(--s2); }
  .nav__sprachen .sprachen__label {
    display: block;
    width: 100%;
    margin: 0 0 var(--s3);
    opacity: 1;
    color: var(--text-leise);
    font-weight: 600;
  }
  .nav__sprachen .sprachen__link {
    min-width: 56px;
    min-height: 48px;
    border: 1px solid var(--linie);
    color: var(--text);
    font-size: .9375rem;
  }
  .nav__sprachen .sprachen__link:hover { background: var(--himmel-hell); color: var(--tief); }
  .nav__sprachen .sprachen__link[aria-current="true"] { background: var(--tief); border-color: var(--tief); color: var(--weiss); }
}
@media (min-width: 1180px) {
  .burger { display: none; }
  .nav { display: flex !important; }
  .nav__cta { margin-left: var(--s3); }
  /* Der Terminknopf traegt je nach Schalter einen langen Text
     («Terminbuchung demnaechst»). Einzeilig halten, sonst waechst die
     ganze Kopfzeile mit. */
  .nav__cta .btn { white-space: nowrap; }
  .nav__sprachen { display: none; }
}

/* Aktionsleiste und Knoepfe stehen im Design-Kit: design-kit/bausteine.css.
   Dort auch die Drei-Knopf-Fassung und der Notfall-Knopf. ------------------ */

/* 5 — Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(24rem, 58svh, 38rem);
  /* Bleibt als Rueckfall, falls kein Foto hinterlegt ist. */
  background:
    radial-gradient(60rem 30rem at 82% -12%, rgba(35, 130, 195, .17), transparent 62%),
    linear-gradient(168deg, #eef6fc 0%, #f7fbfd 46%, var(--weiss) 100%);
  border-bottom: 1px solid var(--linie);
}
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img {
  width: 100%; height: 100%; object-fit: cover;
  /* Etwas nach rechts: links im Foto steht nur eine leere Wand. */
  object-position: 62% 45%;
}
/* Heller Schleier statt eines dunklen: die Praxisfotos sind durchweg hell,
   ein dunkler muesste sie fast zudecken. Links dicht, wo der Text steht,
   nach rechts klar — dort darf das Foto ungestoert stehen. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .93) 40%,
    rgba(255, 255, 255, .62) 63%,
    rgba(255, 255, 255, .18) 84%,
    rgba(255, 255, 255, 0) 100%);
}
/* Schmale Fenster: dort laeuft der Text ueber die ganze Breite, also muss es
   der Schleier auch. Sonst steht das Zeilenende auf dunklen Bildstellen. */
@media (max-width: 60rem) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .90) 55%,
      rgba(255, 255, 255, .82) 100%);
  }
}
.hero__inhalt {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding-block: clamp(3rem, 8vw, 6rem);
}
/* Tablet im Hochformat (768–960px): der Block ist auf 40rem begrenzt, hing
   aber links im Container — das Signet-Fenster stand dadurch sichtbar links
   der Mitte und rechts blieb ein breiter weisser Rand. Mittig gesetzt ist der
   Weissraum auf beiden Seiten gleich und wirkt gewollt. */
@media (min-width: 48rem) and (max-width: 60rem) {
  .hero__inhalt { margin-inline: auto; }
}
/* Der Claim ist kein <h1> mehr (das traegt die Marker-Zeile darueber), soll
   aber unveraendert aussehen — darum hier dieselbe Typografie wie h1. */
.hero__titel {
  margin: 0 0 var(--s4);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
  line-height: 1.18;
  color: var(--text);
  text-wrap: balance;
}
.hero__text {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--text-leise);
  margin-bottom: var(--s6);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__hinweis {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: .9375rem;
  color: var(--text-leise);
}
.hero__hinweis svg { width: 18px; height: 18px; flex: none; color: var(--himmel-dunkel); }

/* Kompakter Seitenkopf der Unterseiten */
.seitenkopf {
  background: linear-gradient(168deg, #eef6fc 0%, #f7fbfd 60%, var(--weiss) 100%);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
.seitenkopf__text {
  max-width: 40rem; /* ca. 70 Zeichen */
  font-size: 1.125rem;
  color: var(--text-leise);
  margin-bottom: 0;
}
.seitenkopf h1 { margin-bottom: var(--s3); }

/* Brotkrumen */
.krumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s4);
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--text-leise);
}
.krumen li + li { margin-top: 0; }
.krumen li + li::before { content: "›"; margin-right: var(--s2); color: var(--himmel); }

/* 6 — Bausteine --------------------------------------------------------- */

/* Schnellinfo-Leiste */
.schnellinfo { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); position: relative; z-index: 2; }
.schnellinfo__raster {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
@media (min-width: 640px) { .schnellinfo__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .schnellinfo__raster { grid-template-columns: repeat(4, 1fr); } }
.schnellinfo__feld {
  display: flex;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--weiss);
  text-decoration: none;
  color: inherit;
  transition: background var(--tempo);
}
a.schnellinfo__feld:hover { background: var(--himmel-hell); }
.schnellinfo__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--himmel-hell);
  color: var(--tief);
}
.schnellinfo__icon svg { width: 22px; height: 22px; }
.schnellinfo__titel {
  margin: 0 0 var(--s1);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.schnellinfo__wert { margin: 0; font-weight: 600; line-height: 1.45; }

/* Öffnungszeiten als zwei Spalten: Tage links, Uhrzeiten rechts.
   Markup liefert zeiten_liste() in inhalte.php. Auf dem Handy ist jedes Paar
   eine gewöhnliche Zeile — genau wie früher der Absatz mit <br>. */
/* Handy: Tage und Uhrzeiten stehen untereinander statt in einer Zeile.
   Vorher lief «Mo, Mi, Fr 07:30 – 12:00 / 13:00 – 18:00» als ein Fliesstext
   durch und brach dort um, wo gerade Platz war — mitten in der Spanne, nach
   dem Schrägstrich, überall. Jetzt trägt jede Zeile ihre Tage in der leisen
   Farbe und darunter die Zeiten; gebrochen wird nur noch zwischen den beiden
   Spannen (siehe zeiten_liste() in inhalte.php). Gleich hohe Ziffern, damit
   die Zeitgruppen untereinander stehen. */
.zeiten { margin: 0; }
.zeiten > div { display: block; }
.zeiten > div + div { margin-top: .35rem; }
.zeiten dt {
  display: block;
  margin: 0;
  font-weight: 600;
  color: var(--text-leise);
}
.zeiten dd {
  display: block;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
/* Eine Spanne bricht nie in sich: «07:30 – 12:00» bleibt zusammen. */
.zeiten__spanne { white-space: nowrap; }
.zeiten__trenner {
  padding-inline: .3em;
  color: var(--text-leise);
}

/* Wo das Zeitenfeld breit ist, wird das Paar durchsichtig und dt/dd werden
   Zellen des Rasters. Gleich breite Ziffern, damit die Tagesgruppen exakt
   untereinander stehen.
   Ab 48rem ist das Feld überall breit genug: auf dem Tablet läuft es über die
   ganze Breite, danach steht die Leiste zweispaltig, ab 1180px bekommt das
   Feld die breiteste der vier Spalten. Darunter, auf dem Handy, bleiben es
   gewöhnliche Zeilen — dort ist für zwei Spalten kein Platz. */
@media (min-width: 48rem) {
  .zeiten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px .85rem;
  }
  .zeiten > div { display: contents; }
  .zeiten > div + div { margin-top: 0; }
  .zeiten dt {
    display: block;
    color: var(--text-leise);
    font-weight: 600;
    white-space: nowrap;
  }
  .zeiten dd {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* Zeilen ohne Uhrzeit («Samstags und abends nach Vereinbarung»). */
  .zeiten .zeiten__breit {
    grid-column: 1 / -1;
    color: var(--text-leise);
    font-weight: 600;
    white-space: normal;
  }
}
.schnellinfo__feld--notfall .schnellinfo__icon { background: var(--warn-hell); color: var(--warn); }

/* 6b — Bühne 1: das Bild füllt den ersten Bildschirm ---------------------
   Entscheid Peter 2026-09-07 nach der Sichtabnahme mit drei Fassungen: das
   Foto nimmt den ganzen ersten Bildschirm ein, die Schnellinfo-Leiste schwebt
   darauf und lässt es darunter noch auslaufen. Gilt für alle vier
   Praxis-Auftritte, NICHT fürs Portal.

   Drei Fassungen nach Breite:
     unter 48rem   Signet-Fenster (Design-Kit, bausteine.css Abschnitt 4)
     48–60rem      Fotoband oben, Text darunter auf Weiss
     ab 60rem      Vollbild, Leiste schwebend

   Höhe des Kopfbereichs, aus denselben Werten gerechnet, mit denen
   .leiste__inhalt und .kopf__inhalt gesetzt sind: Infoleiste 44px plus ihr
   Innenabstand, Kopf 72px, dazu seine Trennlinie. Nachgemessen am 2026-09-07:
   125px — gleich auf allen Breiten ab 960px und in allen acht Sprachen.
   Bewusst gerechnet statt gemessen: die erste Fassung liess ein Skript die
   Höhen messen und kam dabei zu wechselnden Ergebnissen. */
:root { --kopf-hoehe: calc(44px + 2 * var(--s1) + 72px + 1px); }

@media (min-width: 60rem) {
  /* Bühne und Leiste zusammen füllen den ersten Bildschirm; die Bühne nimmt,
     was die Leiste übrig lässt. Schwebt die Leiste, ist das alles. */
  .erster-schirm {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--kopf-hoehe));
  }
  .erster-schirm .hero { flex: 1; }

  /* Kein Schleier über die halbe Breite mehr: aufgehellt wird nur dort, wo
     wirklich Text steht. Der Wisch sitzt am Textblock selbst, wandert also
     mit ihm und läuft nach allen Seiten weich aus. So bleibt vom Foto
     deutlich mehr stehen. */
  .hero::after { content: none; }
  .hero__bild img { object-position: 50% 58%; }
  .hero__inhalt {
    /* 34rem Text + 2×5rem Auslauf. border-box: der Innenabstand zählt mit,
       sonst bricht die Überschrift dreizeilig um. */
    max-width: 44rem;
    /* Radien exakt 50 % / 50 %: die Ellipse berührt alle vier Kanten der
       Fläche und ist dort schon auf null. Ohne das bricht der Verlauf an der
       Elementkante ab und der Wisch liest sich als Kasten. */
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255, 255, 255, .985) 0%,
      rgba(255, 255, 255, .96) 52%,
      rgba(255, 255, 255, .74) 68%,
      rgba(255, 255, 255, .30) 84%,
      rgba(255, 255, 255, 0) 100%);
    /* Auslauf über den Textblock hinaus, ohne den Text zu verschieben:
       Innenabstand plus gleich grosser Aussenabzug. .hero hat overflow:
       hidden, links steht also nichts über. */
    padding-inline: 5rem;
    margin-inline: -5rem;
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

}

/* Schwebende Leiste und die ungleichen Spalten erst ab 1180px — derselbe
   Punkt, an dem auch die Navigation aufklappt.
   Nachgemessen am 2026-09-07: darunter reicht die Breite nicht. Bei 1024px
   bricht die Adresse in der schmalen Spalte auf vier Zeilen; bei 960px
   fällt die Leiste auf zwei Reihen zurück, wird doppelt so hoch und läge
   schwebend über den beiden Knöpfen der Bühne.
   Darunter steht die Leiste bündig UNTER der Bühne — dieselbe Fassung wie
   bei niedrigen Bildschirmen. Der erste Bildschirm ist trotzdem gefüllt: die
   Bühne nimmt, was die Leiste übrig lässt. */
/* Das Stylesheet stellt sonst schon ab 1000px auf vier gleiche Spalten um.
   Für diese vier Felder ist das zu früh: bei 1024px bricht entweder die
   Adresse vierzeilig um oder die Öffnungszeiten sechszeilig, und die Leiste
   wird höher als die Bühne übrig lässt. Zwei Spalten tragen den Inhalt dort
   ruhig — vier werden es erst, wenn sie auch passen. */
@media (min-width: 1000px) and (max-width: 1179.98px) {
  .schnellinfo__raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1180px) {
  /* Die Bühne hält den Platz der schwebenden Leiste frei, damit der Text
     darüber zentriert wird statt über die ganze Höhe. Ohne das lag die
     Leiste bei 1280x800 auf den beiden Knöpfen — der Text rutschte ihr
     entgegen, weil er die Leiste nicht kennt.
     14rem ist die Leiste (rund 150px) plus ihr Abstand nach unten (2rem) plus
     Luft: die Leiste wird in längeren Sprachen höher, und zu viel Reserve
     kostet hier nur etwas Weissraum, zu wenig verdeckt einen Knopf. */
  .erster-schirm .hero { padding-bottom: 14rem; }

  /* Die Leiste liegt auf dem Bild und lässt es darunter auslaufen. */
  .erster-schirm .schnellinfo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2rem;
    margin: 0;
    z-index: 3;
  }
  /* Auf hellem Foto trägt der zarte Schatten nicht — die Kante braucht mehr. */
  .erster-schirm .schnellinfo__raster {
    box-shadow: 0 18px 40px rgba(12, 30, 33, .22), 0 2px 6px rgba(12, 30, 33, .10);
    border-color: rgba(255, 255, 255, .7);
  }
  /* Vier gleiche Spalten gaben jedem Feld gleich viel — gebraucht wird sehr
     ungleich viel. Die Öffnungszeiten brachen viermal um, neben der
     Telefonnummer blieb die halbe Spalte leer. */
  .schnellinfo__raster { grid-template-columns: 1.8fr 1fr .95fr 1.25fr; }
  .schnellinfo__feld { padding: var(--s4) 1.1rem; gap: var(--s3); }
}

/* Laptops mit 1366×768 und Tablets im Querformat haben quer viel Platz und
   hoch wenig. Weniger Luft um den Text heisst: mehr von der Leiste ist ohne
   Blättern zu sehen. */
@media (min-width: 60rem) and (max-height: 820px) {
  .hero__inhalt { padding-block: clamp(1.5rem, 4vh, 3rem); }
  .erster-schirm .schnellinfo { bottom: 1.25rem; }
}

/* Unter 780px Fensterhöhe passen Text, Knöpfe und Leiste nicht zusammen auf
   den ersten Bildschirm. Dann steht die Leiste bündig UNTER der Bühne statt
   auf ihr — schwebend läge sie auf den beiden Knöpfen. Die Grenze steht
   bewusst im Stylesheet: die erste Fassung liess sie ein Skript messen und
   kam dabei mehrmals nacheinander zu anderen Ergebnissen. */
@media (min-width: 1180px) and (max-height: 780px) {
  .erster-schirm .schnellinfo { position: static; margin-top: 0; }
  /* Steht die Leiste in der Reihe, braucht die Bühne den Platz nicht mehr. */
  .erster-schirm .hero { padding-bottom: 0; }
}

/* 960–1180 px — Tablet quer und kleine Laptops. Hier schwebt die Leiste noch
   nicht, sie steht in der Reihe — aber mit ihrem negativen Abstand von Haus aus
   halb über der Kante der Bühne (Zeile 573). Seit die Bühne den ganzen ersten
   Bildschirm füllt, enden die beiden Knöpfe genau an dieser Kante: auf dem iPad
   quer (1024×768) lag die Leiste auf ihnen. Die Bühne hält jetzt genau den
   Betrag frei, um den die Leiste hochrückt. */
@media (min-width: 60rem) and (max-width: 73.749rem) {
  .erster-schirm .hero { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
}

/* Tablet hochkant (768–960px). Bis zum 07.09.2026 sprang die Seite hier schon
   auf die Handy-Fassung: das Signet stand allein auf hellem Grund, das grosse
   Foto war weg. Der Wechsel aufs Auge gehört aufs Handy, nicht aufs Tablet.
   Text ÜBER dem Bild geht auf dieser Breite nicht — der Wisch müsste fast die
   ganze Breite aufhellen und deckte das Foto zu. Darum gestapelt: Fotoband
   oben, Text darunter auf Weiss. Das Foto steht unverdeckt, der Text hat
   vollen Kontrast, und die Reihenfolge stimmt mit der Leserichtung überein. */
@media (min-width: 48rem) and (max-width: 59.999rem) {
  .hero {
    background: var(--weiss);
    padding-top: 24svh;
  }
  /* Der Schleier gehört zum Text über dem Bild. Hier steht der Text unter dem
     Bild — bliebe er stehen, hellte er allein das Fotoband auf. */
  .hero::after { display: none; }
  /* Aus dem Hintergrundbild wird ein Band am oberen Rand. */
  .hero__bild {
    inset: 0 0 auto 0;
    height: 24svh;
  }
  .hero__bild img { object-position: 50% 54%; }
  .hero__inhalt {
    max-width: 40rem;
    margin-inline: auto;
    background: none;
    padding-inline: 0;
    padding-block: clamp(1.25rem, 3vh, 2rem);
  }
  .hero__titel { margin-bottom: var(--s3); }
  .hero__text { margin-bottom: var(--s5); }
  .schnellinfo { margin-top: 0; }

  /* Die Leiste soll komplett auf den ersten Bildschirm. Die Öffnungszeiten
     laufen über die ganze Breite — dann stehen die Uhrzeiten einzeilig und
     die Tage untereinander. Adresse, Telefon und Notfall teilen sich die
     Reihe darunter. Zwei flache Reihen statt zwei hohen: das spart rund 70px,
     ohne dass das Foto kürzer werden muss. */
  .schnellinfo__raster { grid-template-columns: repeat(3, 1fr); }
  .schnellinfo__feld:nth-child(1) { grid-column: 1 / -1; }
  .schnellinfo__feld { padding: var(--s4) 1rem; gap: var(--s3); }
  .schnellinfo__icon { width: 34px; height: 34px; border-radius: 10px; }
  .schnellinfo__icon svg { width: 19px; height: 19px; }
}

/* Der Einleitungstext steht ab hier über dem Foto oder auf Weiss und darf
   fester stehen als das gedeckte Grau. Nicht so dunkel wie die Überschrift —
   die bleibt durch Grösse und Gewicht die erste Stimme. Nachgemessen: 16.9
   statt 7.1 Kontrast. */
@media (min-width: 48rem) {
  .hero__text { color: var(--text); }
}

/* Karten */
.karte {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
a.karte { text-decoration: none; color: inherit; }
a.karte:hover, a.karte:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: #cfe0ee;
}
.karte__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s4);
  border-radius: 14px;
  background: var(--himmel-hell);
  color: var(--tief);
  transition: background var(--tempo), color var(--tempo);
}
.karte__icon svg { width: 26px; height: 26px; }
a.karte:hover .karte__icon { background: var(--tief); color: var(--weiss); }
.karte__titel { margin-bottom: var(--s2); font-size: 1.0625rem; }
.karte__text { margin: 0; color: var(--text-leise); font-size: .9375rem; }
/* Die Leistungsseite gibt die Beschreibung in echten Absaetzen aus; auf
   Start- und Praxisseite steht dort weiterhin ein einzeiliger Kurztext. */
.karte__text p { margin: 0 0 .7em; }
.karte__text p:last-child { margin-bottom: 0; }
.karte--flach { box-shadow: none; }

/* Standort-Zeilen auf der Terminseite: kompakte Reihen unter der Buchungsbox
   (Name/Adresse/Zeiten links, Buchungsknopf rechts; schmal gestapelt). */
.standorte-titel { font-size: 1.25rem; margin-bottom: var(--s2); }
.standort-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  padding: var(--s4);
}
.standort-zeile__info { min-width: 16rem; flex: 1; }
.standort-zeile__name { font-size: 1rem; margin-bottom: var(--s2); }
.standort-zeile__detail {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  margin: 0 0 4px;
  color: var(--text-leise);
  font-size: .9375rem;
}
.standort-zeile__detail:last-child { margin-bottom: 0; }
.standort-zeile__detail svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--himmel-dunkel); }
.standort-zeile__zeiten { font-size: .875rem; }
.standort-zeile .btn { flex: none; }

/* Weitere Praxen auf der Notfallseite: eine Box, drei Zeilen, durch Linien
   getrennt. Die Nummer ist das groesste Element der Zeile — im Notfall sucht
   das Auge zuerst danach. Auf schmalen Schirmen rutscht sie unter die Adresse. */
.praxis-liste { list-style: none; margin: 0; padding: 0; }
.praxis-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--linie);
}
.praxis-zeile:first-child { border-top: 0; padding-top: 0; }
.praxis-zeile:last-child { padding-bottom: 0; }
.praxis-zeile__info { min-width: 13rem; flex: 1; }
.praxis-zeile__name { font-size: 1rem; margin: 0 0 2px; }
.praxis-zeile__adresse { margin: 0 0 2px; color: var(--text-leise); font-size: .9375rem; }
.praxis-zeile__web { font-size: .875rem; }
.praxis-zeile__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.praxis-zeile__tel svg { width: 20px; height: 20px; flex: none; }
.praxis-zeile__tel:hover, .praxis-zeile__tel:focus-visible { text-decoration: underline; }

/* Info-Box (Adresse, Zeiten, Hinweise) */
.box {
  padding: var(--s5);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.box--flaeche { background: var(--flaeche); box-shadow: none; }
.box--schmal { max-width: 40rem; }
.box--akzent { background: var(--himmel-hell); border-color: #cfe0ee; box-shadow: none; }
/* Rot ist der Notfallseite vorbehalten; sonst nur das Icon als Signal. */
.box--warn { background: var(--warn-hell); border-color: #f3cdca; box-shadow: none; }
.box--notfall { box-shadow: none; }
.box--notfall .box__titel svg { color: var(--warn); }
.box__titel {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: 1.0625rem;
  font-weight: 650;
}
.box__titel svg { width: 22px; height: 22px; color: var(--tief); flex: none; }
.box + .box { margin-top: var(--s4); }

/* Merkmalsliste mit Haken */
.haken { list-style: none; margin: 0; padding: 0; }
.haken li {
  position: relative;
  padding-left: 2rem;
  margin-top: var(--s3);
}
.haken li:first-child { margin-top: 0; }
.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167a51' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Team */
.person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s5);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
a.person:hover, a.person:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: #cfe0ee;
}
.person__avatar {
  width: 84px;
  height: 84px;
  margin-bottom: var(--s4);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--himmel-hell);
}
.person__avatar img, .person__avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__name { margin: 0 0 var(--s1); font-size: 1.0625rem; font-weight: 650; }
/* Farbe bewusst dunkler als --himmel: AA-Kontrast bei kleiner Schrift */
.person__funktion { margin: 0 0 var(--s3); font-size: .9375rem; color: var(--himmel-dunkel); font-weight: 600; }
.person__text { margin: 0; font-size: .9375rem; color: var(--text-leise); }
.person__mehr {
  /* auto: haelt den Link in allen Karten einer Reihe auf gleicher Hoehe */
  margin-top: auto;
  padding-top: var(--s4);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tief);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.person__mehr svg { width: 16px; height: 16px; transition: transform var(--tempo); }
a.person:hover .person__mehr svg { transform: translateX(3px); }

/* Arztprofil */
.profil { display: grid; gap: var(--s6); }
@media (min-width: 860px) { .profil { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; } }
.profil__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--himmel-hell);
  box-shadow: var(--schatten);
}
.profil__avatar img, .profil__avatar svg { width: 100%; height: 100%; object-fit: cover; }
.profil__funktion {
  margin: 0 0 var(--s5);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--himmel-dunkel);
}
.cv { margin-top: var(--s6); }
.cv__block + .cv__block { margin-top: var(--s5); }
.cv__titel {
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--himmel-hell);
  font-size: 1.125rem;
}
.cv__liste { list-style: none; margin: 0; padding: 0; }
.cv__liste li {
  position: relative;
  padding-left: 1.375rem;
  margin-top: var(--s2);
  color: var(--text-leise);
}
.cv__liste li:first-child { margin-top: 0; }
.cv__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--himmel);
}

/* Karten-Schnipsel: statisches Kartenbild (eigenes Asset), Klick = Route */
.karte { margin: 0; }
.karte img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.karte a:has(img):hover img { filter: saturate(1.08); }
.karte__zeile {
  display: flex;
  flex-wrap: wrap; /* auf schmalen Schirmen rutscht der Vermerk als Block darunter */
  justify-content: space-between;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
  font-size: .8125rem;
}
/* nowrap: «© OpenStreetMap» bricht als Ganzes um, nie zwischen © und Name */
.karte__vermerk { color: var(--text-leise); text-decoration: none; white-space: nowrap; }
/* Vermerk-Link nur ab 560px neben der Route — auf schmalen Schirmen traegt
   die eingebackene Bildecke im Kartenbild den Pflichtvermerk allein. */
.karte__zeile .karte__vermerk { display: none; }
@media (min-width: 560px) {
  .karte__zeile .karte__vermerk { display: inline; }
}
.karte__vermerk:hover { text-decoration: underline; }
/* Zwei-Klick-Google-Karte: Knopf als leiser Textlink; das iframe uebernimmt
   nach dem Klick die Optik des statischen Kartenbilds. */
.karte__google-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin: var(--s1) 0 0;
  font-size: .8125rem;
}
.karte__google {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.karte__hinweis { color: var(--text-leise); }
.karte iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* Kontaktliste: Telefon/Fax mit buendigen Beschriftungen und Nummern.
   Ueberall gleich aufgebaut (Fusszeile, Kontaktkasten, Impressum). */
.kontaktliste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--s3);
  margin: 0 0 var(--s4);
}
.kontaktliste dt { margin: 0; opacity: .75; }
.kontaktliste dd { margin: 0; font-variant-numeric: tabular-nums; }
.kontaktliste:last-child { margin-bottom: 0; }

/* CTA-Band */
.band {
  background: linear-gradient(140deg, var(--tief) 0%, #0a5ca8 55%, var(--himmel) 130%);
  color: var(--weiss);
}
.band h2, .band h3 { color: var(--weiss); }
.band p { color: rgba(255, 255, 255, .9); }
.band__inhalt {
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 860px) {
  .band__inhalt { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s7); }
}
.band__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Fliesstext-Seiten (Impressum/Datenschutz) */
.prosa { max-width: 40rem; } /* ca. 70 Zeichen */
.prosa h2 { margin-top: var(--s7); font-size: 1.5rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: var(--s5); }
.prosa ul { padding-left: 1.15rem; color: var(--text-leise); }
.prosa p { color: var(--text-leise); }

/* 7 — Formular ---------------------------------------------------------- */
.formular { display: grid; gap: var(--s4); }
.formular p { margin: 0; }
@media (min-width: 700px) {
  .formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
}
.feld { display: flex; flex-direction: column; gap: var(--s2); }
.feld__label { font-size: .9375rem; font-weight: 600; }
.feld__pflicht { color: var(--warn); }
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid #cfd9e0;
  border-radius: var(--radius-s);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.feld input:hover, .feld textarea:hover { border-color: #a9c3d6; }
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--himmel);
  box-shadow: 0 0 0 4px rgba(35, 130, 195, .18);
}
.feld--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s3);
  font-size: .9375rem;
  color: var(--text-leise);
}
.feld--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tief); flex: none; }
.feld--check label { cursor: pointer; }

/* Zusatzfeld im Kontaktformular: aus dem Sichtfeld geschoben. Absicht und
   Zweck stehen in kontakt.php — diese Datei liefert der Server an jeden
   Besucher aus, ein sprechender Kommentar waere hier eine Anleitung. */
.feld--zusatz {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hinweis {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: .9375rem;
}
.hinweis svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.hinweis p { margin: 0; }
.hinweis--erfolg { background: var(--gruen-hell); border-color: #b9e6d2; color: #12603f; }
.hinweis--erfolg svg { color: #167a51; }
.hinweis--fehler { background: var(--warn-hell); border-color: #f3cdca; color: #8f1e18; }
.hinweis--fehler svg { color: var(--warn); }
.hinweis ul { margin: var(--s2) 0 0; }

/* 8 — Fuss -------------------------------------------------------------- */
.fuss {
  margin-top: auto;
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--s5);
  background: #06263f;
  color: rgba(255, 255, 255, .78);
  font-size: .9375rem;
}
.fuss h2, .fuss h3 { color: var(--weiss); }
.fuss__titel {
  margin-bottom: var(--s4);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  /* Gleiche Zeilenbox wie .fuss__marke, damit Markenname und Spaltentitel
     in der ersten Fusszeile auf einer Linie sitzen (Kundenfeedback 08/2026). */
  line-height: 1.5rem;
}
/* Basislinien-Ausgleich: die kleinen Spaltentitel sitzen in der 1.5rem-Box
   7px höher als der grosse Markenname daneben — am Screenshot gemessen. */
.fuss__raster .fuss__titel { padding-top: 7px; }
.fuss__raster { display: grid; gap: var(--s6); }
@media (min-width: 640px) { .fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--s7); } }
.fuss__marke { font-size: 1.1875rem; font-weight: 700; color: var(--weiss); margin-bottom: var(--s2); line-height: 1.5rem; }
.fuss a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__formular a { display: inline-flex; align-items: center; gap: .45em; }
.fuss__formular svg { width: 18px; height: 18px; flex: none; }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li + li { margin-top: var(--s2); }
.fuss__liste a { display: inline-flex; align-items: center; min-height: 32px; }
/* Weitere Standorte der Gruppe: ruhiges Band zwischen Spalten und Schlusszeile. */
.fuss__standorte {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.fuss__standorte-raster { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .fuss__standorte-raster { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.fuss__standort { font-size: .875rem; }
.fuss__standort .kontaktliste { margin-bottom: var(--s2); }
.fuss__standort-name { font-weight: 600; }
.fuss__standort-name a { color: var(--weiss); }
.fuss__standort-zeiten { color: rgba(255, 255, 255, .6); }

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .6);
}
.fuss__zeile ul { display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.fuss__zeile li + li { margin-top: 0; }

/* 9 — Hilfsklassen ------------------------------------------------------ */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.seite { display: flex; flex-direction: column; min-height: 100dvh; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.zentriert { text-align: center; }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.mb-0 { margin-bottom: 0; }
.leise { color: var(--text-leise); }
.tel-link { font-weight: 600; white-space: nowrap; }

@media print {
  .leiste, .kopf, .fuss__zeile, .band, .skip { display: none !important; }
  body { font-size: 11pt; }
  .karte, .box, .person { box-shadow: none; }
}

/* ---- Fotos und Praxisgalerie ---- */
.foto { margin: 0; }
.foto img,
.galerie__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 14px);
  box-shadow: 0 8px 24px rgba(12, 30, 33, 0.10);
}
.galerie {
  display: grid;
  gap: var(--s5, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie__bild { margin: 0; }
.galerie__bild figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--leise, #5b6b78);
}

/* ---- Abstand von Knöpfen zum vorangehenden Text ---- */
/* Jeder Absatz, der mit einem Knopf beginnt, bekommt deutlich Luft nach oben. */
p:has(> .btn:first-child) { margin-top: var(--s6); }
/* In kompakten Boxen (Randspalten, Notfall) genügt etwas weniger. */
.box p:has(> .btn:first-child) { margin-top: var(--s5); }

/* Dezente Urheberzeile in der Fusszeile */
.fuss__credit { opacity: .6; font-size: .85rem; }