/* ==========================================================================
   MVZ Dr. med. Mahdy & Kollegen
   --------------------------------------------------------------------------
   Farbwelt : Am Logo und an den Teamfotos gemessen, nicht geraten. Das Blau
              mit Farbton 217 Grad trägt die Wortmarke, den Gebäudeumriss im
              Logo und die Dienstkleidung des Teams - es ist die Hausfarbe
              und führt als --primary. Das Grün aus Herz und Unterzeile des
              Logos ist der Akzent. Sattes #507C3C trägt dunkle Schrift nur
              mit 2,71:1 und liegt deshalb nur in --accent-line; die Fläche
              --accent ist die aufgehellte Fassung.
   Schriften: Lexend (Überschriften), Source Sans 3 (Fließtext), lokal
              eingebunden. Lexend ist auf Lesegeschwindigkeit hin entworfen,
              deshalb hier statt einer rein stilistischen Wahl.
   Radien   : Flächen 12px (--r), Bedienelemente 8px (--r-sm). Eine Regel,
              überall gleich angewendet.
   Akzent   : Blau führt (--primary), das Grün (--accent) bleibt bewusst
              knapp: Öffnungsstatus, Tagesmarkierung, Sprachenliste,
              Kennzeichen an Leistungen und die Unterstreichung beim
              Überfahren. Nie als Schriftfarbe.
              Die Warnfarbe (--alert) ist KEINE dritte Markenfarbe, sondern
              ausschließlich semantisch für Notfallinformationen reserviert.
   Aufbau   : Abschnitte 1 bis 19 stammen aus dem Blueprint (Praxis-Website),
              Abschnitt 20 sind die Ergänzungen für sechs Standorte.
   ========================================================================== */

/* -------------------------------------------------- 1. Schriften (lokal) */

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans3-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans3-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---------------------------------------------------------- 2. Farbwerte */

:root {
  color-scheme: light;   /* nur heller Modus, so gewünscht */

  /* ------------------------------------------------------------------
     Farbsystem. Blau führt, das Praxisgelb ist der Markenakzent.
     Gewichtung ungefähr 85 Prozent Blau/Anthrazit/Weiß, 15 Prozent Gelb.
     Alle Farben stehen ausschließlich hier.
     ------------------------------------------------------------------ */

  /* Primär --------------------------------------------------------- */
  --primary:        #2A5DB1;   /* Knöpfe, Verweise, Symbole, Fokus */
  --primary-hover:  #224C90;   /* Überfahren */
  --primary-soft:   #E9F0FA;   /* zarte Füllung, Symbolkacheln */
  --primary-line:   #C3D5EC;   /* Rahmen auf blaustichigem Grund */
  --on-primary:     #FFFFFF;   /* Schrift auf Blau, 7,07:1 */

  /* Akzent: das Gelb der Praxis. Bewusst knapp gehalten -------------- */
  /* Nur Wortmarke, Öffnungsstatus, Tagesmarkierung, Team-Initialen und
     die Unterstreichung beim Überfahren. Keine großen Flächen und keine
     gelbe Schrift: #F2C318 erreicht auf Weiß nur 1,67:1. */
  --accent:         #8FB87A;   /* Logogruen, aufgehellt: nur Flaeche */
  --accent-soft:    #EDF4E7;
  --accent-line:    #5E8C46;
  --on-accent:      #26313A;   /* Schrift auf Gruen, 5,88:1 */

  /* Text ------------------------------------------------------------ */
  --text:           #26313A;   /* Überschriften und Fließtext, 13,27:1 */
  --text-muted:     #5A6670;   /* 5,88:1 auf Weiß */

  /* Flächen --------------------------------------------------------- */
  --bg:             #FFFFFF;   /* Seite und Karten */
  --surface:        #F4F7FB;   /* große Abschnittsflächen */
  --surface-2:      #E9F0F8;
  --surface-dark:   #17293D;   /* Fußbereich */

  /* Rahmen ---------------------------------------------------------- */
  --border:         #DBE3EC;
  --border-strong:  #BFCDDD;

  /* Schrift auf dunklem Grund (Fußbereich) */
  --on-dark:        #FFFFFF;

  /* Nur für Notfallinhalte. Nirgendwo sonst verwenden. */
  --alert:    #9E3626;
  --alert-bg: #FAEDEA;
  --on-alert: #FFFFFF;

  --r:     12px;
  --r-sm:  8px;

  --shadow-sm: 0 1px 2px rgba(31, 42, 34, .03);
  --shadow-md: 0 2px 8px rgba(31, 42, 34, .04);

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------- 3. Basis */

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

/* Muss über allen display-Regeln stehen, sonst zeigt ein Element mit
   display:grid oder display:flex trotz hidden-Attribut weiter an. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  /* Hier stand overflow-x: clip als Notlösung gegen einen Überstand aus dem
     Hero. Das ist raus: overflow am body erzeugt in Safari einen eigenen
     Ausschnitt-Kontext und legt damit position:sticky im Kopfbereich lahm.
     Der Überstand ist stattdessen an der Wurzel behoben, der Hero ist jetzt
     ein Abschnitt über die volle Breite mit einer Inhaltsspalte darin. */
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 18px;          /* bewusst größer als üblich: Lesbarkeit vor Trend */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button, [role="tab"], summary { cursor: pointer; }

/* Mindestgröße für alles, was angetippt wird. 44 Pixel sind die Grenze,
   unter der Treffer auf dem Telefon unzuverlässig werden. Gerade die
   Notfallnummern müssen beim ersten Versuch sitzen. */
.brand,
.header__phone,
.emergency__num,
.linkarrow,
.contact-list a,
.back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

.skip-link {
  position: absolute;
  left: 0;
  top: -6rem;          /* nach oben statt nach links: erzeugt keine
                          waagerechte Bildlaufleiste */
  z-index: 200;
  background: var(--primary);
  color: var(--on-primary);
  padding: .9rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ---------------------------------------- Hilfsklassen statt Inline-Stile */
/* Die Sicherheitsregel in der .htaccess (style-src 'self') verbietet
   style="..."-Attribute im HTML. Auf dem Server werden sie sonst
   stillschweigend verworfen — lokal ohne Regel funktionieren sie, auf dem
   Server nicht. Deshalb steht hier alles, was vorher inline stand.
   Symptom war ein 150 Pixel hoher Leerraum über dem Kopfbereich, weil der
   Symbol-Vorrat sein display:none verlor. */

.ikonen-vorrat { display: none; }

.addr--normal { font-style: normal; }

.abstand-oben-1   { margin-top: 1rem; }
.abstand-oben-2   { margin-top: 1.75rem; }
.abstand-unten-2  { margin-bottom: 2.5rem; }

.bild-fuellt { width: 100%; height: 100%; object-fit: cover; }

.mittig-zentriert { text-align: center; margin-inline: auto; }

.knopfreihe-mitte {
  margin-top: 2rem;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.text-gedaempft { color: var(--text-muted); }

.text-klein-gedaempft {
  margin-top: 1rem;
  font-size: .94rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.nachweis-klein {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: -.7rem;
}

.label-zusatz { font-weight: 400; color: var(--text-muted); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------- 4. Typografie */

h1, h2, h3, h4 {
  font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
  margin: 0;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
}

/* Schriftgröße und Bildgröße sind zusammen geplant: die Überschrift muss
   im Hero auf zwei Zeilen passen, sonst schiebt sie die Schaltflächen aus
   dem sichtbaren Bereich. */
h1 { font-size: clamp(2.1rem, 3.5vw, 3.05rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; line-height: 1.35; letter-spacing: 0; }

p { margin: 0; }

.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 54ch;
}

.section-intro {
  color: var(--text-muted);
  max-width: 58ch;
  margin-top: 1rem;
  font-size: 1.05rem;
}

/* ----------------------------------------------------------- 5. Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { scroll-margin-top: 90px; }

.section { padding-block: var(--section-y); }

.section--tint { background: var(--surface); }

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

/* --------------------------------------------------------- 6. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;                 /* große Trefferfläche */
  padding: .8rem 1.5rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;              /* CTA bricht nie um */
  cursor: pointer;
  transition: background-color .18s var(--ease),
              border-color .18s var(--ease),
              transform .12s var(--ease),
              color .18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  /* Die Kante ist nicht Zierrat. Gelb gegen Weiß sind nur 1,67:1 — ohne
     Rand wäre der Knopf als Fläche kaum auszumachen. Das Gold erreicht
     4,28:1 und macht die Form eindeutig. */
  border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn--outline {
  background: var(--bg);
  color: var(--primary);
  border-color: var(--primary);
}
.btn--outline:hover {
  border-color: var(--primary-hover);
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  padding-inline: .75rem;
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--alert {
  background: var(--alert);
  color: var(--on-alert);
  border-color: var(--alert);
}
.btn--alert:hover { filter: brightness(.92); }

.btn--full { width: 100%; }

/* Nicht bedienbar. Bewusst nicht nur blasser, sondern auch ohne Zeiger und
   ohne Überfahren-Reaktion — Blässe allein liest sich sonst wie ein Fehler
   in der Darstellung statt wie ein gesperrter Knopf. Der Text bleibt über
   4,5:1, damit man auch im gesperrten Zustand lesen kann, worum es geht. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border-strong);
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.btn:disabled:active,
.btn[aria-disabled="true"]:active { transform: none; }

.btn .ico { width: 20px; height: 20px; flex: none; }

/* Textlink mit Pfeil */
.linkarrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}
/* Die Unterstreichung beim Überfahren trägt das Praxisgelb. Kleiner
   Markenakzent an einer Stelle, an der er niemandem im Weg ist — der Text
   selbst bleibt blau und damit lesbar. */
.linkarrow:hover { border-color: var(--accent); gap: .7rem; }
.linkarrow .ico { width: 18px; height: 18px; }

/* ---------------------------------------------------------- 7. Header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--bg); }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 76px;                     /* unter der 80px-Grenze */
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
}
.brand__text span {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--surface-2); }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease);
}
.header__phone:hover { background: var(--surface-2); }
.header__phone .ico { width: 19px; height: 19px; color: var(--primary); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.burger .ico { width: 24px; height: 24px; }
.burger .ico--close { display: none; }
.burger[aria-expanded="true"] .ico--open  { display: none; }
.burger[aria-expanded="true"] .ico--close { display: block; }

/* Der Termin-Knopf im Menü ersetzt auf schmalen Geräten den Knopf im
   Kopfbereich, wo er sonst das Logo aus der Zeile drückt. */
.nav__cta { display: none; }

/* Die Schwelle liegt bei 1200px, nicht niedriger: mit sechs
   Navigationspunkten braucht die Kopfzeile aus Wortmarke, Navigation,
   Telefonnummer und Termin-Knopf rund 1180px, sonst läuft der Knopf
   rechts über den Rand. */
@media (max-width: 1200px) {
  .nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 1rem;
    padding: .8rem 1.5rem;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: var(--on-primary);
    border: 1.5px solid var(--primary);
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
  }
  .nav__cta:hover { background: var(--primary-hover); }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: .5rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: .95rem .5rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 1.075rem;
  }
  .nav a:last-child { border-bottom: 0; }
  .burger { display: inline-flex; }
  .header__phone span { display: none; }
}

/* Unterhalb dieser Breite passen Logo, Telefon, CTA und Menüknopf nicht
   mehr nebeneinander. Der CTA wandert ins Menü, die Telefonnummer bleibt
   als Symbol stehen: sie ist der wichtigste Weg zur Praxis. */
@media (max-width: 780px) {
  .header__actions > .btn--primary { display: none; }
}

@media (max-width: 560px) {
  .brand__text { font-size: 1rem; }
  .brand__mark { width: 30px; height: 30px; }
  .header__inner { gap: .5rem; }
  .header__phone { padding-inline: .6rem; }
}

/* ------------------------------------------------------------- 8. Hero */

.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  isolation: isolate;
}

/* Der Empfang der Praxis liegt als Hintergrund im Hero, stark zurückgenommen.
   Zwei Schichten, in dieser Reihenfolge:
     ::before  das Foto, mit geringer Deckkraft
     ::after   ein Schleier von links, der zur Textseite hin dichter wird
   Der Schleier ist kein Zierrat, sondern das, was den Kontrast der Schrift
   garantiert. Deshalb keine Kontur an den Buchstaben: eine Umrandung würde
   die Buchstabenform zusetzen, und die Schrift ist im hellen Modus ohnehin
   dunkel, nicht weiß. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;              /* der Hero geht selbst über die volle Breite */
  pointer-events: none;
}

.hero::before {
  z-index: -2;
  background-image: url('../img/hero.jpg?v=202608171520');
  /* Nicht über die volle Breite gezerrt, sondern rechts in seinem eigenen
     Seitenverhältnis. Zwei Gründe:
       1. der Tresen ist dadurch vollständig im Bild statt oben und unten
          angeschnitten,
       2. die Vorlage ist nur 501 x 380 Punkte groß. Über die ganze Breite
          gezogen wäre das eine 2,9-fache Vergrößerung und sichtbar matschig;
          so bleibt es bei etwa dem 1,6-fachen.
     Die weiche Kante links kommt von der Maske, damit rechts kein
     aufgeklebtes Rechteck steht. */
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
  opacity: .70;
  /* Der Verlauf muss dort schon bei null sein, wo die linke Bildkante
     liegt (etwa 45 % der Breite), sonst sieht man eine senkrechte Naht. */
  -webkit-mask-image: linear-gradient(96deg, transparent 42%, #000 74%);
          mask-image: linear-gradient(96deg, transparent 42%, #000 74%);
}

/* Der Schleier deckt nur die Textspalte ab und gibt die Fläche rechts
   davon frei. Dort liegt das Bild bei voller Stärke.
   Die Kante läuft über 22 Prozentpunkte aus, damit kein sichtbarer Rand
   entsteht. */
.hero::after {
  z-index: -1;
  background: linear-gradient(
    96deg,
    var(--bg) 0%,
    var(--bg) 38%,
    color-mix(in srgb, var(--bg) 82%, transparent) 52%,
    color-mix(in srgb, var(--bg) 30%, transparent) 66%,
    transparent 78%);
}

/* Auf schmalen Geräten läuft der Text über die volle Breite, ein seitlicher
   Verlauf hilft dort nichts. Das Bild bleibt sichtbar, wird aber flächig
   gedämpft, damit die Schrift trägt. */
/* Auf schmalen Geräten gibt es keine freie Fläche neben dem Text, der Text
   läuft über die volle Breite. Das Bild füllt deshalb den Hintergrund und
   wird flächig gedämpft, damit die Schrift trägt. Maske und seitlicher
   Verlauf ergeben hier keinen Sinn und werden zurückgenommen. */
@media (max-width: 780px) {
  .hero::before {
    opacity: .55;
    background-size: cover;
    background-position: 62% 50%;   /* Tresen und gelbe Front im Ausschnitt */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero::after { background: color-mix(in srgb, var(--bg) 84%, transparent); }
}

@media print {
  .hero::before, .hero::after { display: none; }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Einspaltiger Hero. Bewusst ohne Bild: was der Besucher hier wirklich
   sucht, steht direkt darunter im Notfallstreifen und in den Sprechzeiten.
   Ein Foto an dieser Stelle beantwortet keine Frage. */
.hero__grid--single {
  grid-template-columns: minmax(0, 62ch);
}

.hero__title { max-width: 21ch; }
.hero__grid--single .hero__title { max-width: 26ch; }
.hero__grid--single .hero__lead { max-width: 58ch; }

.hero__lead { margin-top: 1.35rem; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: 100%; }
  /* Auf dem Telefon zuerst der Öffnungsstatus, die Überschrift und die
     Knöpfe. Das Bild kommt danach: es beantwortet keine Frage. */
  .hero__media { order: 2; }
  .ph--hero { aspect-ratio: 16 / 10; }
}

/* Öffnungs-Status */

.status {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.1rem .6rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .98rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.status__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
/* Geöffnet: die Hausfarbe. Das ist die eine Stelle, an der ein Blick
   genügen soll. */
.status[data-state="open"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--on-accent);
}
.status[data-state="open"] .status__dot { background: var(--accent); }
.status[data-state="closed"] .status__dot { background: var(--border-strong); }
.status strong { font-weight: 700; }

/* --------------------------------------------------- 9. Notfall-Streifen */

.emergency {
  background: var(--alert-bg);
  border-block: 1px solid color-mix(in srgb, var(--alert) 22%, transparent);
}

.emergency__inner {
  display: flex;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: .65rem;      /* bricht der Streifen um, soll die zweite Zeile
                           dicht anschließen und nicht wie ein Fehler wirken */
  padding-block: 1.35rem;
  flex-wrap: wrap;
}

.emergency__label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--alert);
  flex: none;
}
.emergency__label .ico { width: 22px; height: 22px; }

.emergency__nums {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  margin-right: auto;
}

.emergency__num {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s var(--ease);
}
.emergency__num:hover { border-color: var(--alert); }
.emergency__num b {
  font-family: 'Lexend', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;   /* eine Rufnummer bricht nie mitten in der Zahl */
}
.emergency__num span { font-size: .95rem; color: var(--text-muted); }

/* Auf schmalen Geräten steht die Beschriftung unter der Nummer, sonst
   drängt sie die Zahl in den Umbruch. */
@media (max-width: 620px) {
  .emergency__num {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding-block: .35rem;
  }
  .emergency__num span { line-height: 1.3; }
  .emergency__nums { gap: .9rem; }
}

/* ------------------------------------------------- 10. Schnellwege */

.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.quick__item {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s var(--ease),
              box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.quick__item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.quick__item:active { transform: translateY(-1px); }

.quick__ico {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: .35rem;
}
.quick__ico .ico { width: 23px; height: 23px; }

.quick__item h3 { font-size: 1.14rem; }

.quick__item p {
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.5;
  margin-top: -.1rem;
}

.quick__more {
  margin-top: auto;
  padding-top: .8rem;
  font-weight: 600;
  font-size: .98rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.quick__more .ico { width: 17px; height: 17px; }

@media (max-width: 1000px) { .quick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .quick { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ 11. Leistungen */

.services {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.services__aside { position: sticky; top: 110px; }

.services__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.svc-group h3 {
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--primary-line);
  margin-bottom: 1rem;
}

.svc-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.svc-group li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text);
  line-height: 1.5;
}
.svc-group li .ico {
  width: 19px; height: 19px;
  flex: none;
  margin-top: .28rem;
  color: var(--primary);
}

@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
  .services__aside { position: static; }
}
@media (max-width: 620px) {
  .services__groups { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- 12. Team */

.team-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.doc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Rundes Porträt statt großflächigem Bild: die vorhandenen Aufnahmen sind
   168 Pixel groß. In dieser Größe sind sie scharf, auf einer großen
   Kartenfläche wären sie matschig. Layout folgt dem Bildmaterial. */
.doc__portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  flex: none;
}

.doc__body { padding: 0; }
.doc__body h3 { margin-bottom: .3rem; }

.doc__role {
  color: var(--text);
  font-weight: 600;
  font-size: .97rem;
}

.doc__note {
  color: var(--text-muted);
  font-size: .98rem;
  margin-top: .7rem;
  line-height: 1.5;
}

.team-staff {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--border);
}

.team-staff__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.staff {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.staff__initials {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
}

.staff__name { font-weight: 600; line-height: 1.25; }
.staff__role { color: var(--text-muted); font-size: .93rem; line-height: 1.35; }

@media (max-width: 980px)  { .team-docs { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .team-staff__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .team-staff__list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- 13. Sprechzeiten */

.hours-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.hours {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.hours table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hours caption {
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
  color: var(--text);
}

.hours th, .hours td { padding: .72rem 0; text-align: left; vertical-align: top; }
.hours th { font-weight: 600; width: 8.5rem; }
.hours td { color: var(--text-muted); }

.hours tbody tr + tr { border-top: 1px solid var(--border); }

.hours tr[data-today="true"] th,
.hours tr[data-today="true"] td { color: var(--text); font-weight: 700; }

.hours tr[data-today="true"] th::after {
  content: 'heute';
  display: inline-block;
  margin-left: .55rem;
  padding: .1rem .45rem;
  border-radius: 5px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.hours__note {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .98rem;
}

.notes { display: grid; gap: 1rem; }

.note {
  display: flex;
  gap: .95rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
}
.note__ico {
  width: 24px; height: 24px;
  flex: none;
  color: var(--primary);
  margin-top: .12rem;
}
.note h3 { margin-bottom: .2rem; font-size: 1.05rem; letter-spacing: 0; }
.note p { color: var(--text-muted); font-size: .98rem; line-height: 1.5; }

@media (max-width: 860px) { .hours-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ 13b. Praxis-Bildband */
/* Randlos über die volle Breite. Setzt einen Einschnitt zwischen Team und
   Anfahrt, ohne die Tönung der Abschnitte durcheinanderzubringen. */

/* Dreierreihe statt eines breiten Bands. Die Aufnahmen der Praxis sind
   400 bis 500 Pixel breit; nebeneinander in dieser Größe sind sie sauber,
   randlos über die volle Breite gezogen wären sie unscharf. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.galerie figure { margin: 0; }

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--r);
  border: 1px solid var(--border);
}

.galerie figcaption {
  margin-top: .7rem;
  font-size: .96rem;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 780px) { .galerie { grid-template-columns: 1fr; } }

/* ------------------------------------ 13c. Aktuelle Patienteninformationen */
/* Aufklappliste. Bewusst ohne Kästen: nur Trennlinien, damit die Seite hier
   nicht noch eine Kartenfläche mehr bekommt. Ohne JavaScript funktioniert
   sie ebenfalls, <details> ist von sich aus aufklappbar. */

.hinweise { border-top: 1px solid var(--border); }

.hinweis { border-bottom: 1px solid var(--border); }

.hinweis > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  min-height: 60px;
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  letter-spacing: -.01em;
  color: var(--text);
  list-style: none;
  transition: color .18s var(--ease);
}
.hinweis > summary::-webkit-details-marker { display: none; }
.hinweis > summary::marker { content: ''; }
.hinweis > summary:hover { color: var(--primary); }

/* Plus, das sich beim Aufklappen zum Minus dreht */
.hinweis__zeichen {
  margin-left: auto;
  flex: none;
  position: relative;
  width: 24px;
  height: 24px;
}
.hinweis__zeichen::before,
.hinweis__zeichen::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--primary);
  transform: translateY(-50%);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.hinweis__zeichen::after { transform: translateY(-50%) rotate(90deg); }
.hinweis[open] .hinweis__zeichen::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.hinweis__inhalt {
  padding: 0 0 1.4rem;
  max-width: 68ch;
  color: var(--text-muted);
  line-height: 1.6;
}
.hinweis__inhalt p + p { margin-top: .8rem; }
.hinweis__inhalt strong { color: var(--text); }
.hinweis__inhalt ul { margin: .8rem 0 0; padding-left: 1.25rem; }
.hinweis__inhalt li { margin-bottom: .35rem; }

/* QR-Codes zur E-Rezept-App. Zwei Codes, weil ein einzelner immer die Hälfte
   der Leute ausschließt: die App gibt es für iPhone und für Android an
   getrennten Adressen. Die Codes liegen als SVG lokal auf dem Server, es
   wird kein fremder QR-Dienst eingebunden. */

.app-hinweis {
  margin-top: 1.5rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
}

.app-hinweis__text { color: var(--text-muted); }
.app-hinweis__text strong { color: var(--text); }

.app-codes {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.app-code { margin: 0; }

.app-code a {
  display: block;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 8px;
  border: 1px solid var(--border);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.app-code a:hover { border-color: var(--primary); transform: translateY(-2px); }

.app-code img { width: 132px; height: 132px; display: block; }

.app-code figcaption {
  margin-top: .55rem;
  font-weight: 700;
  font-size: .97rem;
  color: var(--text);
  line-height: 1.25;
}
.app-code figcaption span {
  display: block;
  font-weight: 400;
  font-size: .88rem;
  color: var(--text-muted);
}

.app-hinweis__fuss {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Auf dem Telefon nützt ein QR-Code wenig: man kann ihn nicht mit demselben
   Gerät scannen, auf dem er steht. Dort führen die Bilder deshalb als
   normale Verweise direkt in den jeweiligen Laden. */
@media (max-width: 560px) {
  .app-codes { gap: 1rem; }
  .app-code img { width: 108px; height: 108px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hinweis[open] .hinweis__inhalt { animation: hinweisAuf .28s var(--ease); }
  @keyframes hinweisAuf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------- 13d. Anruf-Knopf unten rechts */
/* Dauerhaft sichtbar, ab dem ersten Bildaufbau. Vorher blendete er sich erst
   ein, wenn der Hero durchgescrollt war — das kostete den schnellsten Weg
   zur Praxis genau in dem Moment, in dem die meisten ihn brauchen. */

.ruf {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 90;

  /* Immer ein Kreis. Die Nummer steht ohnehin im Kopfbereich, im Hero und im
     Fußbereich — hier würde sie nur Platz belegen und die Verweise darunter
     verdecken. */
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  border: 1.5px solid var(--primary);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(30, 40, 51, .18),
              0 1px 3px rgba(30, 40, 51, .12);

  transition: transform .2s var(--ease),
              background-color .18s var(--ease);
}

.ruf .ico { width: 25px; height: 25px; flex: none; }

/* Die Nummer liegt als eigene Fläche LINKS neben dem Kreis und ist absolut
   positioniert. Dadurch verändert ihr Auftauchen das Layout nicht: sie wird
   nur verschoben und eingeblendet. Eine Animation der Breite hätte den
   Browser bei jedem Einzelbild neu rechnen lassen. */
.ruf__nummer {
  position: absolute;
  right: 100%;
  margin-right: 10px;
  height: 46px;
  display: flex;
  align-items: center;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--primary-hover);
  color: var(--on-primary);
  border: 1.5px solid var(--primary-hover);
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(30, 40, 51, .18);

  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.ruf:hover .ruf__nummer,
.ruf:focus-visible .ruf__nummer {
  opacity: 1;
  transform: none;
}

.ruf:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}
.ruf:active { transform: translateY(0) scale(.97); }

/* Auf Fingergeräten gibt es kein Überfahren. Die Nummer bliebe also
   unerreichbar und wird deshalb ganz weggelassen — der Tipp wählt direkt. */
@media (hover: none) {
  .ruf__nummer { display: none; }
}

@media print { .ruf { display: none !important; } }

/* -------------------------------------------------------- 14. Anfahrt */

.location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.location__map {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 380px;
  position: relative;
}

.location__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.addr { font-style: normal; line-height: 1.55; }
.addr strong { display: block; font-size: 1.08rem; }

.transit { display: grid; gap: 1.1rem; }

.transit__row { display: flex; gap: .9rem; }
.transit__ico {
  width: 24px; height: 24px;
  flex: none;
  color: var(--primary);
  margin-top: .1rem;
}
.transit__row h3 { margin-bottom: .15rem; font-size: 1.05rem; letter-spacing: 0; }
.transit__row p { color: var(--text-muted); font-size: .97rem; line-height: 1.5; }

.lines {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}
.lines span {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .87rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@media (max-width: 900px) {
  .location { grid-template-columns: 1fr; }
  .location__map { min-height: 280px; }
}

/* -------------------------------------------------------- 15. Formular */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.tabs {
  display: flex;
  gap: .4rem;
  padding: .35rem;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  margin-bottom: 1.75rem;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .7rem 1.15rem;
  border-radius: 7px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  /* Der aktive Reiter wird zusätzlich durch einen gelben Strich markiert.
     Nicht nur durch die Fläche: eine Farbfläche allein unterscheidet sich
     hier nur um 1,1:1 vom Hintergrund und wäre schwer auszumachen. */
  border-bottom: 3px solid var(--accent);
  padding-bottom: calc(.7rem - 3px);
}

.form { display: grid; gap: 1.15rem; }

.field { display: grid; gap: .4rem; }

.field label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.field .hint {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.field input,
.field select,
.field textarea {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.0625rem;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: .8rem .95rem;
  min-height: 52px;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--primary); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.field--error input,
.field--error textarea,
.field--error select { border-color: var(--alert); }

.field .error {
  font-size: .93rem;
  font-weight: 600;
  color: var(--alert);
  display: none;
}
.field--error .error { display: block; }

.row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.check input {
  width: 24px; height: 24px;
  min-height: 0;
  flex: none;
  margin-top: .12rem;
  accent-color: var(--primary);
}
.check a { color: var(--primary); font-weight: 600; }

.formnote {
  padding: 1.05rem 1.2rem;
  /* Abgesetzt über die Fläche, nicht über eine farbige Kante links.
     Der seitliche Akzentstreifen ist ein abgenutztes Muster und trägt
     hier nichts bei, was der Hintergrund nicht schon leistet. */
  background: var(--surface);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-sm);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.formnote strong { color: var(--text); }

.formstatus {
  display: none;
  padding: 1.05rem 1.2rem;
  border-radius: var(--r-sm);
  font-weight: 500;
  line-height: 1.55;
}
.formstatus[data-type="ok"] {
  display: block;
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  color: var(--text);
}
.formstatus[data-type="error"] {
  display: block;
  background: var(--alert-bg);
  border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent);
  color: var(--alert);
}

.btn[data-loading="true"] { pointer-events: none; opacity: .72; }

.contact__side { display: grid; gap: 1rem; }

.contact-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
}
.contact-card h3 { margin-bottom: 1rem; }

.contact-list { display: grid; gap: .85rem; }
.contact-list a, .contact-list div {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}
.contact-list .ico { width: 21px; height: 21px; flex: none; color: var(--primary); }
.contact-list a:hover { color: var(--primary); }

@media (max-width: 940px) {
  .contact { grid-template-columns: 1fr; }
  .contact__side { order: -1; }
}

/* -------------------------------------------------------- 16. Footer */

.footer {
  background: var(--surface-dark);
  color: color-mix(in srgb, var(--on-dark) 78%, var(--surface-dark));
  /* Unten großzügig: der Anruf-Knopf schwebt fest über der rechten unteren
     Ecke des Fensters. Ohne diesen Freiraum liegt er genau auf Impressum
     und Datenschutz, sobald man ganz nach unten scrollt. */
  padding-block: clamp(3rem, 6vw, 4.5rem)
                 calc(6rem + env(safe-area-inset-bottom, 0px));
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.footer h2 {
  font-family: 'Lexend', sans-serif;
  color: var(--on-dark);
  font-size: 1rem;
  letter-spacing: .01em;
  margin-bottom: 1rem;
}
.footer p, .footer li, .footer address { font-size: .97rem; line-height: 1.65; }

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  color: var(--on-dark);
}
.footer__brand .brand__mark { width: 32px; height: 32px; }
.footer__brand span {
  font-family: 'Lexend', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  align-items: center;
  font-size: .93rem;
}
/* Die Rechtsverweise stehen links neben dem Urhebervermerk statt am rechten
   Rand. Am rechten Rand lägen sie in der Bahn des Anruf-Knopfes. */
.footer__bottom p { order: 2; margin-left: auto; text-align: right; }
.footer__bottom a { order: 1; }

@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- 17. Bild-Platzhalter */
/* Werden 1:1 durch echte Fotos ersetzt, Seitenverhältnis bleibt gleich.
   Siehe BILDER.md im Projektordner.                                      */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  gap: .55rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      color-mix(in srgb, var(--primary) 12%, transparent) 11px 12px
    ),
    var(--surface);
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.ph .ico { width: 34px; height: 34px; opacity: .75; }
.ph b {
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ph small {
  font-size: .87rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ph--hero   { aspect-ratio: 4 / 3.2; }
.ph--band    { aspect-ratio: 8 / 3; border-radius: 0; border-inline: 0; }
.ph--doc    { aspect-ratio: 4 / 3; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); }
.ph--map    { position: absolute; inset: 0; border-radius: 0; border: 0; }
.ph--wide   { aspect-ratio: 16 / 7; }

/* ------------------------------------------------------- 18. Bewegung */
/* MOTION_INTENSITY 3: nur Hover-/Fokus-Übergänge und ein sehr ruhiges
   Einblenden beim Scrollen. Keine Dauerschleifen, kein Parallax.         */

/* Grundzustand ist SICHTBAR. Der Inhalt darf nie davon abhängen, dass
   JavaScript läuft: ohne Skript, bei einem Fehler im Skript oder in einem
   alten Browser steht trotzdem alles da.
   Versteckt wird erst innerhalb von (scripting: enabled), und auch dann
   holt der Beobachter in main.js alles wieder hervor. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .38s var(--ease), transform .38s var(--ease);
  }
  .reveal[data-shown="true"] { opacity: 1; transform: none; }

  /* Staffelung innerhalb eines Abschnitts. Steht bewusst hier und nicht im
     JavaScript: eine per Skript gesetzte Stilangabe am Element wäre ein
     Inline-Stil und damit von der Sicherheitsregel des Servers abhängig. */
  .reveal:nth-of-type(2) { transition-delay: 70ms; }
  .reveal:nth-of-type(3) { transition-delay: 140ms; }
  .reveal:nth-of-type(4) { transition-delay: 210ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------- 18b. Druck */
/* Viele Patientinnen und Patienten drucken sich Sprechzeiten und Anfahrt
   aus. Gedruckt wird deshalb genau das: Adresse, Telefon, Sprechzeiten,
   Notfallnummern, Leistungen und Anfahrt. Alles Bedienbare fliegt raus. */

@media print {
  @page { margin: 16mm; }

  :root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --surface-dark: #FFFFFF;
    --text: #000000;
    --text-muted: #333333;
    --border: #999999;
    --border-strong: #666666;
    --primary: #000000;
    --primary-hover: #000000;
    --primary-soft: #FFFFFF;
    --primary-line: #999999;
    --on-primary: #FFFFFF;
    --accent: #FFFFFF;
    --accent-soft: #FFFFFF;
    --accent-line: #999999;
    --on-accent: #000000;
    --on-dark: #000000;
    --alert: #000000;
    --alert-bg: #FFFFFF;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11.5pt;
    line-height: 1.45;
  }

  /* Weg damit: nichts davon lässt sich auf Papier bedienen */
  .header,
  .footer,
  .hero__cta,
  .quick,
  .tabs,
  form.form,
  .formnote,
  .skip-link,
  .burger,
  .nav,
  .linkarrow,
  .back,
  .photoband,
  .ph,
  .status,
  .hero::before { display: none !important; }

  /* Der ganze Kontakt-Abschnitt schrumpft auf die reinen Kontaktdaten */
  #kontakt .section-head,
  #kontakt .contact__side + div { display: none !important; }
  .contact { grid-template-columns: 1fr !important; }

  .section, .hero { padding-block: 0 0 !important; margin-block: 0 0 !important; }
  .section + .section { margin-top: 8mm !important; }

  .emergency { border: 1.5pt solid #000000; padding: 3mm; margin-block: 6mm; }

  /* Nichts soll mitten in einer Tabelle oder Karte umbrechen */
  .hours, .location__card, .doc, .note, .emcard, .step { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Rahmen und Flächen auf Papier neutralisieren */
  .hours, .note, .doc, .staff, .contact-card, .location__card, .emcard {
    border: .5pt solid #999999 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }

  a { text-decoration: none; color: #000000; }

  /* Die Adresse hinter externen Links ausschreiben, auf Papier ist ein
     Link sonst wertlos */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .location__map { max-height: 70mm; }
  .services__aside { position: static !important; }
}

/* ------------------------------------------------- 19. Unterseiten */

.page-head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}
.page-head .lead { margin-top: 1rem; }

.back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  margin-bottom: 1.25rem;
}
.back:hover { color: var(--primary); }
.back .ico { width: 18px; height: 18px; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.75rem; margin-bottom: .9rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .6rem; }
.prose p { margin-bottom: 1rem; color: var(--text-muted); }
.prose ul { color: var(--text-muted); padding-left: 1.3rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .4rem; }
.prose a:not(.btn) { color: var(--primary); font-weight: 600; }
.prose strong { color: var(--text); }
.prose > :first-child { margin-top: 0; }

/* Notfall-Unterseite: große Nummernkacheln */

.emcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.emcard {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--r);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.emcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.emcard--critical {
  background: var(--alert-bg);
  border-color: color-mix(in srgb, var(--alert) 30%, transparent);
}

.emcard__num {
  font-family: 'Lexend', sans-serif;
  /* Kleiner angesetzt, damit auch die lange Mobilnummer auf eine Zeile
     passt. Eine zweizeilig umbrechende Telefonnummer wirkt wie ein Fehler. */
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.emcard--critical .emcard__num { color: var(--alert); }
.emcard__label { font-weight: 600; margin-top: .5rem; }
.emcard__desc { color: var(--text-muted); font-size: .96rem; line-height: 1.5; }

@media (max-width: 860px) { .emcards { grid-template-columns: 1fr; } }

/* Wenn-dann-Liste auf der Notfallseite */

.steps { display: grid; gap: 1rem; margin-bottom: 2rem; }

.step {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.step__when { font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 1.08rem; }
.step__do { color: var(--text-muted); line-height: 1.6; }
.step__do strong { color: var(--text); }

@media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: .5rem; } }

/* =========================================================================
   20. Ergänzungen für das MVZ mit sechs Standorten

   Der Blueprint ist für eine Praxis an einer Adresse gebaut. Was hier
   dazukommt, betrifft ausschließlich das, was daraus folgt: eine Übersicht
   mehrerer Standorte mit eigenem Öffnungsstatus, das echte Logo als Bild
   statt der Platzhalter-Grafik, und ein paar Bausteine für die längeren
   Inhaltsseiten (Fachbereiche, Stellenangebote, Standortübersicht).
   Keine neuen Farben, keine neuen Radien, keine neue Schrift.
   ========================================================================= */

/* ------------------------------------------------ 20a. Echtes Logo */
/* Die Bildmarke der Praxis ist breiter als hoch (Verhältnis 2,74:1), anders
   als die quadratische Platzhalter-Grafik der Vorlage. Die Wortmarke bleibt
   daneben echter Text: das skaliert besser, ist vorlesbar und bleibt
   durchsuchbar. */
.brand__logo {
  width: auto;
  height: 39px;
  flex: none;
}

.footer__brand img {
  width: auto;
  height: 35px;
  flex: none;
}

@media (max-width: 640px) {
  .brand__logo { height: 32px; }
  /* Unter 640px konkurrieren Marke, Telefonnummer und Menüknopf um die
     Breite. Die Wortmarke tritt zurück, die Bildmarke bleibt - sie ist das,
     woran die Seite erkannt wird. */
  .brand__text { display: none; }
}

/* ------------------------------------- 20b. Öffnungsstatus, Varianten */
/* Auf der Standortübersicht stehen sechs Status-Zeilen nebeneinander. In
   Kartengröße muss die Zeile kleiner und umbruchfähig sein. */
.status--klein {
  padding: .4rem .8rem .4rem .65rem;
  font-size: .88rem;
  gap: .5rem;
}

/* Im Hero der Startseite trägt die Zeile keinen Öffnungsstatus, sondern die
   Standortliste. Sie sieht gleich aus, wird aber nicht vom Skript
   angefasst - deshalb kein data-status und der Punkt in Blau statt Grün. */
.status--statisch {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--text);
}
.status--statisch .status__dot { background: var(--primary); }

/* ------------------------------------------------ 20c. Standortkarten */

.orte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ort {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.ort__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

.ort h2, .ort h3 { font-size: 1.18rem; }

/* Die Überschrift der Karte ist gleichzeitig der Verweis auf die
   Standortseite. Sie bekommt eine Trefferfläche von 44 Pixeln, weil sie der
   Hauptweg von der Übersicht in den Standort ist - nicht bloß ein Verweis
   mitten im Fließtext. */
.ort h2 a,
.ort h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.ort h2 a:hover, .ort h2 a:focus-visible,
.ort h3 a:hover, .ort h3 a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.ort .addr { font-size: .98rem; color: var(--text-muted); }

.ort__zeiten {
  list-style: none;
  margin: 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: .3rem;
  font-size: .96rem;
  color: var(--text-muted);
}

/* Zwei Spalten statt Einrückung: bei Tagen mit Mittagspause ist die
   Zeitangabe lang ("08:00 - 13:00 und 15:00 - 18:00 Uhr") und bricht um.
   Mit inline-block und min-width lief die zweite Zeile unter die
   Tagesspalte, mit dem Raster läuft sie unter die Zeitangabe. */
.ort__zeiten li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: .35rem;
  align-items: baseline;
}

.ort__zeiten b {
  color: var(--text);
  font-weight: 600;
}

.ort__fuss {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.ort__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.ort__tel:hover, .ort__tel:focus-visible { text-decoration: underline; }
.ort__tel .ico { width: 19px; height: 19px; flex: none; }

@media (max-width: 1000px) {
  .orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .orte { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- 20d. Sprachenliste */
/* Die Praxis nennt auf jeder Standortseite, welche Sprachen dort gesprochen
   werden - bei diesem MVZ ein echtes Merkmal, das die Vorlage nicht kennt.
   lang-Attribute stehen im HTML an jedem Eintrag, damit Vorleseprogramme
   Arabisch und Russisch richtig aussprechen. */
.sprachen {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.sprachen li {
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--on-accent);
  font-size: .95rem;
}

/* Arabisch läuft von rechts nach links. Ohne diese Angabe rutscht die
   Klammerung im Fließtext an die falsche Seite. */
.sprachen li[lang="ar"] { direction: rtl; }

/* ------------------------------------------------ 20e. Kontaktwege */

.kontaktwege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.kontaktwege .contact-card p { color: var(--text-muted); line-height: 1.6; }
.kontaktwege .btn { margin-top: 1rem; }

@media (max-width: 780px) {
  .kontaktwege { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- 20f. Sprungmarken */
/* Die Fachbereichsseite ist lang. Vier Marken oben ersparen das Scrollen. */
.sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.6rem;
}

.sprungmarken a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: .98rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sprungmarken a:hover,
.sprungmarken a:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

/* Ohne diesen Abstand verschwindet das Sprungziel hinter der klebenden
   Kopfzeile. */
:target { scroll-margin-top: 6rem; }

/* ------------------------------------------------- 20g. Datentabelle */
/* Die Übersicht aller sechs Anschriften ist breiter als ein Telefon.
   Sie scrollt in ihrem eigenen Kasten, nicht die ganze Seite. */
.tabelle-breit {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
}

.datentabelle {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .98rem;
}

.datentabelle caption {
  text-align: left;
  padding: 1.1rem 1.25rem .3rem;
  color: var(--text-muted);
  font-size: .95rem;
}

.datentabelle th,
.datentabelle td {
  text-align: left;
  padding: .8rem 1.25rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

.datentabelle thead th {
  border-top: 0;
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.datentabelle tbody th { font-weight: 600; white-space: nowrap; }
.datentabelle tbody td { color: var(--text-muted); }
.datentabelle a { color: var(--primary); }

/* --------------------------------------- 20h. Hinweise in Leistungen */
/* Wo die Praxis eine Leistung ausdrücklich als kostenpflichtig ausweist,
   soll das nicht im Fließtext untergehen. */
.leistung-hinweis {
  display: flex;
  gap: .75rem;
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .96rem;
  line-height: 1.55;
}
.leistung-hinweis .ico {
  width: 21px; height: 21px;
  flex: none;
  color: var(--primary);
  margin-top: .1rem;
}

/* Kennzeichen direkt in der Aufklappzeile. Es steht VOR dem Plus-Zeichen,
   das sein margin-left:auto behält und weiter rechts klebt. */
.hinweis__marker {
  flex: none;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--on-accent);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.hinweis__marker--zahlung {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

@media (max-width: 560px) {
  /* Auf schmalen Geräten passt das Kennzeichen nicht in dieselbe Zeile wie
     die Überschrift. Statt es zu kürzen, umbricht die Zeile. */
  .hinweis > summary { flex-wrap: wrap; gap: .5rem 1rem; }
  .hinweis__marker { order: 3; }
  .hinweis__zeichen { order: 2; }
}

/* ------------------------------------------ 20i. Foto auf Standortseite */
.standort__foto { margin: 1.25rem 0 0; }

.standort__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  display: block;
}

/* --------------------------------- 20j. Leistungsgruppen, ein und zwei */
/* Die Vorlage rechnet fest mit vier Gruppen in zwei Spalten. Auf den
   Standortseiten ist es eine Gruppe, im Konzeptabschnitt sind es zwei. */
.services__groups--eins { grid-template-columns: minmax(0, 1fr); }
.services__groups--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.services__groups--zwei .svc-group p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: .9rem;
}

@media (max-width: 780px) {
  .services__groups--zwei { grid-template-columns: 1fr; }
}

/* ------------------------------------------- 20k. Karte ohne Verweis */
/* Auf der Stellenseite sind die vier Karten reine Aussagen, keine Links.
   Sie dürfen deshalb nicht auf Überfahren reagieren, sonst versprechen sie
   einen Klick, den es nicht gibt. */
.quick__item--still { cursor: default; }
.quick__item--still:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

/* -------------------------------------------- 20l. Porträts und Team */
/* Wo die alte Seite nur ihr Platzhalterbild hatte, stehen Initialen. Sie
   sitzen im selben Kreis wie ein Foto, damit die Reihe ruhig bleibt. */
.doc__portrait--initialen {
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .01em;
}

.staff__foto {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
}


/* ---------------------------------------------- 20m. Zwischenüberschrift */
/* h4 innerhalb der Aufklapptexte und der Rechtstexte. Ohne eigene Regel
   sitzt sie zu dicht am Absatz darüber. */
.hinweis__inhalt h3,
.prose h4 {
  margin-top: 1.5rem;
  margin-bottom: .4rem;
  color: var(--text);
  /* Groesse wie ein h4: die Ebene ist h3, damit die Gliederung stimmt, aber
     im Aufklapptext soll die Zeile nicht wie eine Abschnittsueberschrift
     wirken. */
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ------------------------------------------------------ 20n. Druck */
@media print {
  .sprungmarken,
  .ort__fuss .linkarrow { display: none !important; }

  /* Auf Papier hilft kein Scrollkasten. */
  .tabelle-breit { overflow: visible; border: 0; }
  .datentabelle { min-width: 0; font-size: 10pt; }

  /* Die Standortkarten sind das, was aufs Papier gehört: Adresse und
     Zeiten. Drei Spalten wären zu eng, zwei passen. */
  .orte { grid-template-columns: repeat(2, 1fr) !important; }
  .ort { break-inside: avoid; }
  .status--klein, .status--statisch { display: none !important; }
}

/* ---- BOCK STUDIO Credit ---- */
.bs-credit{color:inherit;opacity:.62;text-decoration:none}
.bs-credit:hover,.bs-credit:focus-visible{opacity:1;text-decoration:underline}
.bs-credit-zeile{flex-basis:100%;width:100%;margin:.9rem 0 0;padding:0;text-align:center;font-size:.78em;line-height:1.5}

/* --------------------------------- 20o. Trefferflächen in der Fußzeile */
/* Die Verweislisten der Fußzeile sind Navigation, nicht Fließtext. Mit
   22 Pixeln Höhe waren sie für die Zielgruppe dieser Seite zu knapp - ein
   MVZ hat viele ältere Patientinnen und Patienten. Die Links bekommen
   deshalb eine eigene Zeilenhöhe von 44 Pixeln, statt nur den Text zu
   umschließen. Am Aussehen ändert das nichts Sichtbares außer etwas mehr
   Luft zwischen den Zeilen. */
.footer li a,
.footer__bottom > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer ul { gap: 0; }

/* Die Adresszeile bleibt Fließtext (Straße, Ort, Telefon, E-Mail in einem
   Block). Dort ist nur die Höhe der beiden Verweise anzuheben, ohne den
   Absatz auseinanderzuziehen. */
.footer .addr a {
  display: inline-block;
  padding-block: .6rem;
}

@media print {
  .footer li a,
  .footer__bottom > a { min-height: 0; }
}

/* ------------------------------- 20p. Gedämpfter Text im Fußbereich */
/* --text-muted (#5A6670) ist für helle Flächen gerechnet. Auf dem dunklen
   Fußbereich (#17293D) kommt er nur auf 2,51:1 und ist damit unlesbar. Im
   Fußbereich wird deshalb die Schriftfarbe des Bereichs übernommen und nur
   leicht zurückgenommen: das ergibt 6,66:1. */
.footer .text-klein-gedaempft,
.footer .text-gedaempft,
.footer .nachweis-klein {
  color: inherit;
  opacity: .8;
}