@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/roboto-slab-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
  Gestaltungsregeln
  - Schriftgrößen: klein, text, gross, h2, h1 – keine weiteren.
  - Schriften: Manrope nur für Fließtext; Roboto Slab (wie im Logo) für alles andere
    (Überschriften, Menü, Knöpfe, Links außerhalb von Sätzen, Beschriftungen, Namen, Zeiten, Fußzeile).
  - Vorspann (.einleitung) wie in der Zeitung: gleiche Schrift, Größe und Farbe wie der Text, nur fett.
  - Textfarben: --text, --leise, --indigo. Rot nur für den Notruf.
  - Flächen: ein einziges Glasmaterial (--glas, --glas-filter, --schatten) auf einem zarten, festen Hintergrundverlauf.
*/
:root {
  --text: #1c1a2e;
  --leise: #65637a;
  --indigo: #312783;
  --rot: #b61615;

  --klein: .875rem;
  --normal: 1.0625rem;
  --gross: 1.25rem;
  --h2: clamp(1.75rem, 1.35rem + 1.3vw, 2.25rem);
  --h1: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem);

  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --slab: "Roboto Slab", Georgia, serif;

  --glas: rgba(255, 255, 255, .56);
  --glas-filter: blur(24px) saturate(1.6);
  --schatten: 0 12px 40px rgba(28, 26, 46, .08);

  --rahmen: 1160px;
  --spalte: 720px;
  --rand: 320px;
  --abstand: clamp(.75rem, 2.5vw, 1.75rem);
  --luft: clamp(2.5rem, 5vw, 4rem);
  --radius: 24px;
  --linie: rgba(28, 26, 46, .09);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: rgba(255, 255, 255, .9); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-tap-highlight-color: rgba(49, 39, 131, .14); -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }

body {
  margin: 0; color: var(--text);
  font: 450 var(--normal)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(55rem 40rem at 0% -10%, rgba(49, 39, 131, .13), transparent 65%),
    radial-gradient(45rem 35rem at 100% 35%, rgba(182, 22, 21, .06), transparent 65%),
    radial-gradient(60rem 40rem at 30% 110%, rgba(49, 39, 131, .09), transparent 65%),
    #f3f2f8;
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

h1, h2 { font-family: var(--slab); font-weight: 500; color: var(--indigo); letter-spacing: -.015em; overflow-wrap: break-word; }
h1 { font-size: var(--h1); line-height: 1.06; margin: 0; }
h2 { font-size: var(--h2); line-height: 1.2; margin: 2.5rem 0 .9rem; }
h3 { font: 600 var(--gross)/1.4 var(--slab); color: var(--text); margin: 1.75rem 0 .5rem; }

/* Akzentschrift (Logoschrift) für alles, was kein Fließtext ist */
.hinweisleiste a, .dachzeile, .datum, .abschnitt-kopf a, .zeiten, .rand-nav, .urlaub-liste .zeitraum,
.urlaub-liste .bezeichnung, .urlaub-liste .vertretung > strong, .downloads a, .dienstfinder label, .dienstfinder select,
.dienstfinder-ergebnis strong, .fuss, .notruf span, .direkt span, .stichpunkte span, .person figcaption, .mehr,
.einwilligung-knoepfe {
  font-family: var(--slab);
}
p, ul, ol { margin: 0 0 1em; }
/* Überschriften werden nie getrennt, Fließtext darf */
h1, h2, h3, h4, h5, h6, .urlaub-titel, summary { hyphens: none; -webkit-hyphens: none; }
/* Überschrift mit sehr langem Wort: schrumpft mit der Bildschirmbreite, statt das Wort zu brechen */
.langes-wort { font-size: clamp(1.05rem, 5.2vw, var(--h2)); }
p, li { text-align: justify; hyphens: auto; }
ul { padding-left: 1.2em; }
li { margin-bottom: .35em; }
li::marker { color: var(--leise); }
strong { font-weight: 700; }

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--indigo); color: #fff; padding: .6rem 1rem; }
.sprungmarke:focus { left: 1rem; top: 1rem; }

.dachzeile { font-size: var(--klein); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 0 0 .3rem; }
.einleitung { font-weight: 700; }
.mehr a { font-weight: 500; }

/* ---------- Glas: überall dasselbe Material ---------- */

.glas, .hinweis, .meldung, .urlaub-liste, .downloads, .einwilligung, .dienstfinder, .notruf a, .einbettung, .person {
  background: var(--glas);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
}
.karte { padding: clamp(1.5rem, 3vw, 2.25rem); }
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

/* ---------- Rahmen, Kopfzeile, Navigation ---------- */

.rahmen { max-width: var(--rahmen); margin: 0 auto; padding: 0 var(--abstand); }

.hinweisleiste { margin: .9rem 0 0; text-align: center; }
.hinweisleiste a {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem;
  padding: .45rem 1.1rem; border: 2px solid var(--rot); border-radius: var(--radius); font-size: var(--klein); color: var(--text); text-decoration: none;
}
.hinweisleiste strong { color: var(--indigo); }
.hinweisleiste span { color: var(--leise); }
.hinweisleiste a:hover span { color: var(--indigo); }

/* Während eines Praxisurlaubs: große rote Karte über der Kopfzeile */
.urlaub-jetzt {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 33vh; margin: .9rem 0 0; padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  background: var(--glas); color: var(--text); border: 2px solid var(--rot); border-radius: var(--radius); box-shadow: var(--schatten);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); text-align: center;
}
.urlaub-jetzt p { max-width: var(--spalte); margin: 0 0 .75em; text-align: center; }
.urlaub-jetzt > :last-child { margin-bottom: 0; }
.urlaub-jetzt .urlaub-titel { font: 500 var(--h2)/1.2 var(--slab); letter-spacing: -.015em; margin-bottom: .4rem; color: var(--rot); }
.urlaub-jetzt .zeitraum { font: 600 var(--gross)/1.4 var(--slab); margin-bottom: 1.5rem; }
.urlaub-jetzt .vertretung { max-width: var(--spalte); margin-bottom: 1.25rem; }
.urlaub-jetzt h2 { font-size: var(--normal); color: var(--rot); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .12em; }

/* Hinweisfenster: Seite dahinter lässt sich nicht scrollen */
html.urlaub-offen { overflow: hidden; }


.urlaub-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(28, 26, 46, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: einblenden .3s;
  overscroll-behavior: contain; touch-action: none;
}
.urlaub-overlay > * { touch-action: pan-y; overscroll-behavior: contain; }
.urlaub-overlay :is(.urlaub-jetzt, .urlaub-bald) { background: #fff; margin: 0; min-height: 0; width: min(100%, 44rem); max-height: 100%; overflow: auto; }
/* Vorwarnung eine Woche vor dem Urlaub: gleiche Karte, ruhiger in Indigo */
.urlaub-bald {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  border: 2px solid var(--indigo); border-radius: var(--radius); box-shadow: var(--schatten);
}
.urlaub-bald p { max-width: var(--spalte); margin: 0 0 .75em; }
.urlaub-bald .urlaub-titel { font: 500 var(--h2)/1.2 var(--slab); letter-spacing: -.015em; margin-bottom: .4rem; color: var(--indigo); }
.urlaub-bald .zeitraum { font: 600 var(--gross)/1.4 var(--slab); margin-bottom: 1.5rem; }
.urlaub-overlay .knopf { margin-top: 1.5rem; }
@keyframes einblenden { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .urlaub-overlay { animation: none; } }

/* Das Glas der Kopfzeile liegt auf einer eigenen Ebene (::before). Läge der Weichzeichner auf
   der Kopfzeile selbst, könnten die Aufklappmenüs darin nicht mehr durch die Seite hindurch
   weichzeichnen – so haben Kopfzeile und Menüs genau dasselbe Material. */
.kopf {
  position: sticky; top: .9rem; z-index: 50; margin-top: .9rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 70px; padding: 0 .7rem 0 1.4rem; border-radius: var(--radius);
}
.kopf::before, .nav-gruppe ul {
  background: var(--glas); border-radius: var(--radius); box-shadow: var(--schatten);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
}
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.logo img { height: 48px; width: auto; }

.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation li { margin: 0; }
.navigation a, .nav-gruppe summary { color: var(--text); text-decoration: none; font: 500 var(--normal)/1.4 var(--slab); }
.navigation a:hover, .nav-gruppe summary:hover,
.navigation a[aria-current="page"], .nav-gruppe:has([aria-current="page"]) > summary { color: var(--indigo); }

.nav-gruppe summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; user-select: none; }
.nav-gruppe summary::-webkit-details-marker { display: none; }
.nav-gruppe summary::after {
  content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.nav-gruppe[open] summary::after { transform: translateY(1px) rotate(-135deg); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo); color: #fff; border: 1px solid var(--indigo); border-radius: 999px;
  font: 600 var(--normal)/1.2 var(--slab); padding: .8rem 1.4rem; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.knopf:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(49, 39, 131, .28); }
/* Die Menü-Regeln (Hover, aktuelle Seite) färben Links indigo – der Knopf bleibt weiß beschriftet */
.navigation .knopf, .navigation .knopf:hover, .navigation .knopf[aria-current="page"] { color: #fff; }
.navigation .knopf { padding: .65rem 1.25rem; font: 600 var(--normal)/1.2 var(--slab); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }

.menue-knopf { display: none; }

@media (min-width: 1080px) {
  .navigation { display: flex; align-items: center; gap: 2rem; }
  .nav-liste { display: flex; align-items: center; gap: 1.75rem; }
  .nav-gruppe { position: relative; }
  /* Das Menü beginnt dicht unter dem Schlagwort und überlappt die Kopfzeile bewusst etwas */
  .nav-gruppe ul { position: absolute; top: calc(100% + .3rem); left: -1.1rem; min-width: 260px; padding: .5rem; }
  .nav-gruppe ul a { display: block; padding: .55rem .85rem; border-radius: 14px; }
  .nav-gruppe ul a:hover, .nav-gruppe ul a[aria-current="page"] { background: rgba(49, 39, 131, .07); }
}

@media (max-width: 1079px) {
  .kopf { height: 64px; padding: 0 .55rem 0 1rem; }
  .logo img { height: 42px; }
  .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border: 0; border-radius: 50%; background: rgba(49, 39, 131, .07); color: var(--text); cursor: pointer;
  }
  .menue-knopf { -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
  .menue-knopf:active, .menue-knopf[aria-expanded="true"] { background: rgba(49, 39, 131, .16); }
  .menue-knopf:focus-visible { border-radius: 50%; }
  .menue-symbol, .menue-symbol::before, .menue-symbol::after {
    display: block; width: 18px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .2s, background-color .2s;
  }
  .menue-symbol { position: relative; }
  .menue-symbol::before, .menue-symbol::after { content: ""; position: absolute; left: 0; }
  .menue-symbol::before { top: -6px; }
  .menue-symbol::after { top: 6px; }
  .menue-knopf[aria-expanded="true"] .menue-symbol { background: transparent; }
  .menue-knopf[aria-expanded="true"] .menue-symbol::before { transform: translateY(6px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-symbol::after { transform: translateY(-6px) rotate(-45deg); }

  /* Ausklappbares Menü unter der Kopfzeile */
  .js .navigation {
    display: none; position: absolute; top: calc(100% + .6rem); left: 0; right: 0;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .5rem 1.25rem 1.25rem;
    background: var(--glas); border-radius: var(--radius); box-shadow: var(--schatten);
    -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  }
  .js .navigation.offen { display: block; }
  .no-js .kopf { height: auto; flex-wrap: wrap; padding: 1rem; position: static; }
  .nav-liste > li { border-bottom: 1px solid var(--linie); }
  .nav-liste > li > a, .nav-gruppe summary { display: flex; justify-content: space-between; padding: .95rem .25rem; font-size: var(--gross); }
  /* Im Handy-Menü liegen die Unterpunkte in der Glasfläche des Menüs, nicht in einer eigenen */
  .nav-gruppe ul { padding: 0 .25rem .9rem; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-gruppe ul a { display: block; padding: .4rem 0; color: var(--leise); }
  .nav-termin { width: 100%; margin-top: 1.25rem; }
  /* Bei offenem Menü liegt die Seite dahinter unter einer Milchglasscheibe */
  html.menue-offen body::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: rgba(238, 236, 248, .82); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    animation: einblenden .2s;
  }
}

/* ---------- Fotos mit Parallaxe ---------- */

.foto { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 6px); background: #e7e5f0; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-parallax] img { transform: scale(1.12); will-change: transform; }
}

/* ---------- Seitenkopf ---------- */

.seitenkopf { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.seitenkopf-text { max-width: 760px; }
.seitenkopf.mit-bild { position: relative; padding-top: 1.5rem; }
.seitenkopf.mit-bild .foto { aspect-ratio: 21 / 9; }
.seitenkopf.mit-bild .seitenkopf-text { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: 1.3rem 1.8rem 1.4rem; max-width: min(640px, calc(100% - 3rem)); }
@media (max-width: 760px) {
  .seitenkopf.mit-bild .foto { aspect-ratio: 4 / 3; }
  .seitenkopf.mit-bild .seitenkopf-text { position: relative; left: auto; bottom: auto; margin: -3rem .75rem 0; }
}

/* Inhalt: Text in lesbarer Spaltenbreite. Daneben steht rechts der Seitenrand (.rand) mit
   Glaskarten, sodass der Inhalt die volle Breite der Kopfzeile füllt, ohne dass die Zeilen
   zu lang werden. Breite Elemente (Bildreihen, Kartenpaare …) laufen über die ganze Breite. */
/* flow-root: Der Inhalt umschließt den schwebenden Seitenrand, auch wenn der länger ist als der Text –
   sonst ragt er unter die Fußzeile. */
.inhalt { display: flow-root; padding: var(--luft) 0 clamp(3rem, 6vw, 5rem); }
.inhalt > :first-child, .inhalt > :first-child > :first-child,
.inhalt > .rand + *, .inhalt > .rand + * > :first-child { margin-top: 0; }
.inhalt > * { max-width: var(--spalte); }
.inhalt > :is(.breit, .abschnitt, .zwei-karten, .galerie, .team-raster, .bild-text, .bild-breit, .einbettung) { max-width: none; clear: both; }
.inhalt > :is(.breit, .zwei-karten, .galerie, .bild-text) { margin-top: var(--luft); margin-bottom: 0; }

/* Inhaltskarten: build.py fasst lose Absätze, Listen und Tabellen je Zwischenüberschrift zu
   einer Glaskarte zusammen. Auf Seiten ohne Seitenrand gehen sie über die ganze Breite. */
.inhalt > :is(.inhalt-karte, .einwilligung, .einbettung, .dienstfinder, .notruf, .meldung, .hinweis) { margin: 0 0 1.25rem; }
.inhalt:not(:has(> .rand)) > .inhalt-karte { max-width: none; }
.inhalt:not(:has(> .rand)) > .inhalt-karte > * { max-width: var(--spalte); }
.inhalt > h2 { margin: var(--luft) 0 1rem; }
.inhalt-karte .hinweis {
  margin: 1.25rem 0; padding: 1.1rem 1.35rem; border-radius: 16px;
  background: rgba(49, 39, 131, .06); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.inhalt-karte :is(.urlaub-liste, .downloads) {
  margin: .5rem 0 1rem; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.inhalt-karte > :is(.urlaub-liste, .downloads):last-child { margin-bottom: -.5rem; }

.rand { display: grid; gap: 1rem; align-content: start; }
.rand .karte { padding: 1.5rem 1.6rem; }
.rand h2 { font-size: var(--gross); margin: 0 0 .6rem; }
.rand .extern { list-style: none; margin: 0 0 .75rem; padding: 0; }
.rand .extern li { margin: 0 0 .4rem; text-align: left; }
.rand .extern a::after { content: " ↗"; }
.rand .klein { font-size: var(--klein); color: var(--leise); margin: 0; }
.rand-nav ul { list-style: none; margin: 0 -.6rem; padding: 0; }
.rand-nav li { margin: 0; }
.rand-nav ul a { display: block; padding: .4rem .6rem; border-radius: 12px; color: var(--text); text-decoration: none; }
.rand-nav ul a:hover { color: var(--indigo); }
.rand-nav ul a[aria-current="page"] { background: rgba(49, 39, 131, .07); color: var(--indigo); font-weight: 700; }
.rand-nav .rand-telefon { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--leise); }
.rand-telefon a { display: block; font: 500 var(--gross)/1.3 var(--slab); text-decoration: none; }

@media (min-width: 1000px) {
  .rand { float: right; width: var(--rand); margin: 0 0 1.5rem 2rem; }
  /* Eigener Formatierungskontext: Karten neben dem Rand werden schmaler, statt unter ihn zu rutschen
     (sonst überlappen sie bei 1000–1110 px Fensterbreite). Raster/Flex-Elemente können das schon. */
  .inhalt > :is(.inhalt-karte, .meldung, .einwilligung, .dienstfinder, .hinweis) { display: flow-root; }
}
@media (max-width: 999px) {
  /* Am Handy gibt es keinen Rand: Eigene Karten der Seite (z. B. HZV) folgen als normale
     Inhaltskarten direkt auf den ersten Textblock, die Menükarte steht ganz am Ende. */
  .inhalt:has(> .rand) { display: flex; flex-direction: column; }
  .inhalt:has(> .rand) > * { order: 2; }
  .inhalt > .rand { display: contents; }
  .inhalt > .rand + * { order: 0; }
  .rand > .karte { order: 1; margin: 0 0 1.25rem; }
  .inhalt > .rand > .rand-nav { order: 3; margin: var(--luft) 0 0; }
  .rand h2 { font-size: var(--h2); margin-bottom: .9rem; }
}

/* ---------- Startseite ---------- */

/* Bühne: das Logo groß auf einer hellen Fläche mit zwei weichen Farbwolken (Indigo und Rot aus
   dem Logo), damit der Titelkasten davor als Glas sichtbar wird. */
.buehne { position: relative; margin-top: 1.5rem; }
.buehne-flaeche {
  position: relative; overflow: hidden; aspect-ratio: 16 / 8.5; border-radius: calc(var(--radius) + 6px);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 5% 3.5rem;
  background:
    radial-gradient(30rem 24rem at 16% 82%, rgba(49, 39, 131, .30), transparent 70%),
    radial-gradient(24rem 20rem at 72% 18%, rgba(182, 22, 21, .12), transparent 70%),
    var(--glas);
  box-shadow: var(--schatten);
}

/* Logo als Vektor nachgebaut: Stethoskop als SVG, Schriftzug als Text in der Logoschrift.
   Die Maße stammen aus dem Original-Logo (650 × 319) und skalieren mit der Breite (cqw);
   als Teil des Logos gelten hier die Schriftgrößen-Regeln nicht. */
.logo-gross { position: relative; width: min(44%, 500px); aspect-ratio: 650 / 319; container-type: inline-size; }
.logo-gross img { position: absolute; left: 4.15cqw; top: 2cqw; width: 23.4cqw; height: auto; }
.logo-gross p {
  position: absolute; left: 25.1cqw; top: 24.6cqw; margin: 0; white-space: nowrap;
  font: 300 12.13cqw/1.015 var(--slab); letter-spacing: -.028em; word-spacing: .07em; text-transform: uppercase; color: var(--indigo);
}
.logo-gross b { font-weight: 700; }
.logo-gross b:first-child { display: block; }
.buehne-titel { position: absolute; left: 1.75rem; bottom: 9rem; max-width: min(540px, calc(51% - 20px)); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); }
.buehne-titel h1, .buehne-titel p { hyphens: none; }
.buehne-titel h1 { font-size: clamp(2rem, 4.6vw, var(--h1)); }
.buehne-titel p { text-align: left; margin: .6rem 0 0; font: 500 var(--gross)/1.4 var(--slab); }

.direkt {
  position: relative; z-index: 2; list-style: none; margin: -3.75rem 1.75rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem;
}
.direkt li { margin: 0; }
.direkt a { display: block; height: 100%; padding: 1.15rem 1.35rem; text-decoration: none; color: var(--text); transition: transform .25s, box-shadow .25s; }
.direkt a:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(28, 26, 46, .13); color: var(--text); }
.direkt strong { display: flex; justify-content: space-between; font: 500 var(--gross)/1.3 var(--slab); color: var(--indigo); }
.direkt strong::after { content: "→"; font-family: var(--sans); transition: transform .25s; }
.direkt a:hover strong::after { transform: translateX(4px); }
.nobr { white-space: nowrap; }
.direkt span { display: block; text-align: left; hyphens: manual; font-size: var(--klein); color: var(--leise); margin-top: .2rem; }

@media (max-width: 900px) {
  .buehne-flaeche { aspect-ratio: auto; justify-content: center; padding: 2.5rem 1.5rem 6.5rem; }
  .logo-gross { width: min(88%, 420px); }
  .buehne-titel { position: relative; left: auto; bottom: auto; margin: -4.5rem .75rem 0; max-width: none; }
  .direkt { margin: .9rem 0 0; grid-template-columns: 1fr 1fr; }
  .direkt a { padding: 1rem 1.1rem; }
  .direkt strong { font-size: var(--normal); }
  .direkt strong::after { display: none; }
}
/* Tablet: Kasten nicht über die ganze Breite, sondern mittig unter dem Logo */
@media (min-width: 601px) and (max-width: 900px) {
  .buehne-titel { margin: -4.5rem auto 0; width: calc(100% - 1.5rem); max-width: 640px; }
}

.abschnitt { margin-top: var(--luft); }
.abschnitt > h2:first-child { margin-top: 0; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf a { font-weight: 700; text-decoration: none; }
.abschnitt > .glas + .zwei-karten { margin-top: 1.25rem; }

.zwei-karten { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .zwei-karten { grid-template-columns: 1fr 1fr; } }
.zwei-karten h2 { margin-top: 0; }

/* Foto mit überlappender Glaskarte; .bild-text.gespiegelt setzt das Foto nach rechts */
.bild-text { display: grid; align-items: center; }
.bild-text .foto { aspect-ratio: 4 / 3; }
.bild-text .karte { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .bild-text { grid-template-columns: 1.15fr 1fr; }
  .bild-text .karte { margin-left: -5rem; }
  .bild-text.gespiegelt { grid-template-columns: 1fr 1.15fr; }
  .bild-text.gespiegelt .foto { grid-column: 2; grid-row: 1; }
  .bild-text.gespiegelt .karte { grid-column: 1; grid-row: 1; margin: 0 -5rem 0 0; }
}
@media (max-width: 899px) { .bild-text .karte { margin: -3rem .75rem 0; } }

/* Ruhige Liste mit feinen Trennlinien, z. B. Ärztinnen und Ärzte oder Leistungen */
.stichpunkte { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.stichpunkte li { margin: 0; padding: .6rem 0; text-align: left; border-bottom: 1px solid var(--linie); }
.stichpunkte li:last-child { border-bottom: 0; }
.stichpunkte strong, .stichpunkte a { font: 500 var(--normal)/1.4 var(--slab); color: var(--indigo); text-decoration: none; }
.stichpunkte a:hover { color: var(--text); }
.stichpunkte span { display: block; font-size: var(--klein); color: var(--leise); }

/* Leistungsliste mit feinem Haken statt Aufzählungspunkt */
.leistungen { list-style: none; margin: 0; padding: 0; }
.leistungen li { position: relative; margin: 0; padding: .55rem 0 .55rem 1.75rem; border-bottom: 1px solid var(--linie); line-height: 1.4; text-align: left; }
.leistungen li:last-child { border-bottom: 0; }
.leistungen li::before {
  content: ""; position: absolute; left: .2rem; top: 1rem; width: .7rem; height: .38rem;
  border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg);
}

/* ---------- Bausteine ---------- */

.hinweis { padding: 1.4rem 1.75rem; margin: 2rem 0; }
.hinweis > :first-child { margin-top: 0; }
.hinweis > :last-child { margin-bottom: 0; }

.zwei-spalten { display: grid; gap: 1rem 4rem; }
@media (min-width: 800px) { .zwei-spalten { grid-template-columns: 1fr 1fr; } }
.zwei-spalten h2:first-child { margin-top: 0; }

.zeiten { width: 100%; border-collapse: collapse; margin: 0 0 1.25em; }
.zeiten th, .zeiten td { text-align: left; font-weight: 450; padding: .65rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten th { width: 40%; color: var(--leise); }

.bild-breit { width: 100%; border-radius: var(--radius); margin: 2rem 0; }

/* Listen in einer Glasfläche mit feinen Trennlinien */
.meldungen-kurz, .urlaub-liste, .downloads { list-style: none; margin: 0; padding: .25rem clamp(1.25rem, 3vw, 2rem); }
.urlaub-liste, .downloads { margin: 1.5rem 0 2rem; }
.meldungen-kurz > li, .urlaub-liste > li, .downloads > li { margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.meldungen-kurz > li:last-child, .urlaub-liste > li:last-child, .downloads > li:last-child { border-bottom: 0; }
.glas > .meldungen-kurz { padding: 0; }
.karte:has(> .meldungen-kurz) { padding-block: .25rem; }

.meldung-karte a { display: grid; grid-template-columns: 10rem 1fr auto; gap: .2rem 1.5rem; text-decoration: none; color: var(--text); }
.meldung-karte .datum { grid-column: 1; grid-row: 1; }
.meldung-karte h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: var(--normal); }
.meldung-karte p { grid-column: 2; margin: 0; color: var(--leise); }
.meldung-karte a::after { content: "→"; grid-column: 3; grid-row: 1; color: var(--indigo); transition: transform .25s; }
.meldung-karte a:hover h3 { color: var(--indigo); }
.meldung-karte a:hover::after { transform: translateX(4px); }
.meldung-karte.wichtig h3::before, .meldung.wichtig h2::before { content: "Wichtig · "; color: var(--rot); }
@media (max-width: 700px) {
  .meldung-karte a { grid-template-columns: 1fr auto; column-gap: 1rem; }
  .meldung-karte .datum { grid-column: 1 / -1; }
  .meldung-karte h3 { grid-column: 1; grid-row: 2; }
  .meldung-karte p { grid-column: 1; grid-row: 3; }
  .meldung-karte a::after { grid-column: 2; grid-row: 2; }
}
.datum { font-size: var(--klein); color: var(--leise); }

.meldung { padding: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1.25rem; }
.meldung h2 { margin: .25rem 0 1rem; }
.meldung > :last-child { margin-bottom: 0; }

.urlaub-liste .bezeichnung { display: block; font-size: var(--klein); color: var(--leise); }
.urlaub-liste .zeitraum { display: block; font-size: var(--gross); font-weight: 700; color: var(--indigo); margin: .1rem 0 .4rem; }
.urlaub-liste .vertretung > strong { display: block; font-size: var(--klein); color: var(--leise); font-weight: 450; }
.urlaub-liste .vertretung p { margin: 0; }

.downloads a { font-weight: 700; text-decoration: none; }
.downloads a:hover { text-decoration: underline; }
.downloads a.datei::after { content: "PDF"; margin-left: .5rem; font-size: var(--klein); font-weight: 700; color: var(--leise); }
.downloads p { margin: .25rem 0 0; }

/* Team */
.team-raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 1.5rem 0 1rem; }
@media (min-width: 860px) { .team-raster { grid-template-columns: repeat(4, 1fr); } }
/* Zwei Porträts mittig in der Textspalte (nicht über die volle Breite wie die Teamseite) */
.inhalt > .team-raster.paar { max-width: var(--spalte); clear: none; grid-template-columns: repeat(2, minmax(0, 17rem)); justify-content: center; }
.person:not(:has(figcaption)) { padding-bottom: .6rem; }
.person { margin: 0; padding: .6rem .6rem 1rem; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 18px; background: #e7e5f0; }
.person figcaption { padding: .9rem .6rem 0; font-size: var(--klein); line-height: 1.45; color: var(--leise); }
.person figcaption strong { display: block; font: 500 var(--gross)/1.3 var(--slab); color: var(--indigo); margin-bottom: .2rem; }

.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin: 2.5rem 0 1rem; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
@media (max-width: 700px) { .galerie { grid-template-columns: 1fr 1fr; } .galerie img:first-child { grid-column: 1 / -1; } }

.app-badges { display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1.25rem 0 1.75rem; }
.app-badges img { height: 46px; width: auto; }
.app-badges a:first-child img { height: 68px; margin: -11px -10px; }

.einbettung { position: relative; width: 100%; min-height: 900px; overflow: hidden; }
.einbettung iframe { display: block; width: 100%; height: 900px; border: 0; }
/* Am Desktop steht die Einbettung in der Textspalte links neben dem Seitenrand statt darunter
   über die ganze Breite (sonst große leere Flächen). */
@media (min-width: 1000px) {
  .inhalt > .einbettung:not(.einbettung-voll) { max-width: var(--spalte); clear: none; }
}
.einbettung-voll { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; min-height: 0; margin: 0; border-radius: 0; background: #fff; }
.einbettung-voll iframe { flex: 1; min-height: 0; height: auto; }
.einbettung-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--linie); font-family: var(--slab); color: var(--indigo); }
.einbettung-leiste .knopf { padding: .5rem 1.1rem; }
.einbettung-offen { overflow: hidden; }
.einbettung-hinweis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.5rem; pointer-events: none; }
.einbettung-hinweis p { margin: 0; text-align: center; font-size: var(--klein); color: var(--leise); }
.einwilligung { padding: clamp(1.5rem, 3vw, 2.25rem); margin: 2rem 0; }
.einwilligung h2 { margin-top: 0; }
.einwilligung .einwilligung-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: center; margin: 1.25rem 0 0; }
.no-js .einwilligung [data-laden] { display: none; }

/* Notdienst */
.notruf { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 1rem; }
.notruf a { display: block; padding: 1.5rem 1.6rem; text-decoration: none; color: var(--text); transition: transform .25s; }
.notruf a:hover { transform: translateY(-3px); color: var(--text); }
.notruf a.lebensgefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.notruf strong { display: block; font: 500 var(--h2)/1.2 var(--slab); margin-bottom: .3rem; }
.notruf span { font-size: var(--klein); opacity: .85; }

.dienstfinder { padding: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0; }
.dienstfinder h2 { margin-top: 0; }
.dienstfinder-felder { display: flex; flex-wrap: wrap; gap: 1rem; }
.dienstfinder label { display: block; font-size: var(--klein); color: var(--leise); margin-bottom: .3rem; }
.dienstfinder select { font-size: inherit; color: var(--text); padding: .65rem 2.2rem .65rem .9rem; min-width: 12rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--glas); }
.dienstfinder-ergebnis { margin: 1.5rem 0 0; }
.dienstfinder-ergebnis strong { display: block; font-size: var(--gross); color: var(--indigo); margin-top: .2rem; }
/* Unter der Auswahl: die Dienste im Einzelnen, durch feine Linien abgesetzt */
.dienstfinder h3 { margin: 1.75rem 0 .5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.dienstfinder > :last-child { margin-bottom: 0; }
.dienstfinder > h3:first-of-type { margin-top: 1.5rem; padding-top: 0; border-top: 0; }
.no-js .dienstfinder-felder, .no-js .dienstfinder-ergebnis, .no-js .dienstfinder > h3:first-of-type { display: none; }
.dienst { margin-top: 1rem; }
.js .dienst > h3 { display: none; } /* Mit JavaScript nennt die Ergebniszeile darüber den Dienst */
.dienst > :last-child { margin-bottom: 0; }

/* ---------- Fußzeile ---------- */

.fuss { margin: 1rem 0 1.5rem; padding: 2rem clamp(1.5rem, 3vw, 2.5rem) 1.25rem; font-size: var(--klein); color: var(--leise); }
.fuss-spalten { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fuss p { margin: 0; }
.fuss-titel { display: block; margin-bottom: .35rem; font: 500 var(--gross)/1.3 var(--slab); color: var(--indigo); }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a.fuss-titel { color: var(--indigo); }
.fuss a:hover { color: var(--indigo); }
.fuss-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem !important; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.fuss-unten a { margin-left: 1.25rem; }

/* ---------- Entwurfsmarkierungen (nur bis zur rechtlichen Prüfung) ---------- */

.entwurf-hinweis { background: #fff1c2; border: 2px solid #c99a00; border-radius: 16px; padding: 1rem 1.25rem; margin: 0 0 2rem; }
.entwurf-hinweis p { margin: 0; }
div.entwurf { background: #fff8dc; border-left: 4px solid #c99a00; border-radius: 0 10px 10px 0; padding: .75rem 1.1rem; margin: 1rem 0; }
div.entwurf::before { content: "ENTWURF – geändert"; display: block; font-size: var(--klein); font-weight: 700; color: #8a6500; }
div.entwurf-neu::before { content: "ENTWURF – neu"; }
div.entwurf h2, div.entwurf h3 { margin-top: .4rem; }
div.entwurf > :last-child { margin-bottom: 0; }
mark.entwurf { background: #ffe58a; color: inherit; }
.entwurf-frage { color: var(--rot); font-weight: 700; }
.entwurf-alt { margin-top: .75rem; font-size: var(--klein); color: var(--leise); }
.entwurf-alt summary { cursor: pointer; font-weight: 700; }
.entwurf-alt p { text-decoration: line-through; text-decoration-color: rgba(182, 22, 21, .5); }

@media print {
  body { background: #fff; }
  .kopf, .fuss, .hinweisleiste, .sprungmarke, .foto, .rand-nav { display: none; }
  .glas, .hinweis, .meldung, .urlaub-liste, .downloads { box-shadow: none; backdrop-filter: none; }
  .seitenkopf.mit-bild .seitenkopf-text { position: static; padding: 0; }
}

/* Textfarben aus der Praxis-App */
.text-rot { color: var(--rot); }
.text-blau { color: var(--indigo); }

/* Bild zu einer Meldung (Praxis-App) */
.meldung-bild { display: block; width: 100%; max-height: 28rem; object-fit: cover; border-radius: calc(var(--radius) / 2); margin: .75rem 0 1rem; }

/* Vorschau aus der Praxis-App (?vorschau=…) */
.vorschau-leiste { position: sticky; top: 0; z-index: 50; margin: 0; padding: .6rem 1rem; text-align: center; background: #312783; color: #fff; font-weight: 600; }
.vorschau-leiste a { color: #fff; margin-left: .75rem; }