/* Hausarztpraxis Brenndorf, Schkeuditz · Musterseite Runde 2 (29.09.2026)
   Grundordnung wie alle neun Musterseiten: Musterleiste, Kopf in einer Zeile (klebt), erster Bildschirm
   mit Foto und dem Kasten „Was heute gilt“ (Signatur), Sprechzeiten, Leistungen, Termin (Hauptfunktion),
   Über uns, Kontakt, Fuß.
   Flächen: heller Grund, Salbei hell als einzige Wechselfläche, dunkler Fuß (Petrol tief).
   Radius (R106): Auswahlfelder und Eingaben 8px · Knöpfe 10px · Karten, Kasten, Bilder 14px · Punkte 50 %.
   Ein Rahmen: 1240px, gleicher Seitenrand überall. Eine Schrift: Atkinson Hyperlegible Next, Ziffern tabellarisch.
   Kein Verlauf, kein Milchglas. */

/* Brenndorf Next = Atkinson Hyperlegible Next (OFL 1.1) mit Null ohne Schrägstrich, umbenannt wie die Lizenz es verlangt */
@font-face {
  font-family: "Brenndorf Next";
  src: url("schriften/brenndorf-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: optional;
}

:root {
  --grund: #FAFBF8;
  --wechsel: #E4EDE1;
  --weiss: #FFFFFF;
  --linie: #CCD8C8;
  --linie-stark: #9DB2A9;
  --petrol: #0A5963;
  --petrol-tief: #06363C;
  --petrol-hell: #D6EBE7;
  --tinte: #16252A;
  --grau: #48585C;
  --rost: #9A3412;
  --gruen: #1E6B3A;
  --bernstein: #7A4E00;
  --fokus: #F2C230;
  --schrift: "Brenndorf Next", "Verdana", "Segoe UI", sans-serif;
  --r-feld: 8px;
  --r-knopf: 10px;
  --r-karte: 14px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --rahmen: 62rem;           /* 1240 px bei 20 px Grundgröße */
  --kopf-h: 64px;
  --schatten: 0 1px 2px rgba(6, 54, 60, .06), 0 14px 36px -12px rgba(6, 54, 60, .22);
}
@media (min-width: 64em) { :root { --kopf-h: 71px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
@media (min-width: 64em) { html { font-size: 125%; } }
html.gross { font-size: 131.25%; }
@media (min-width: 64em) { html.gross { font-size: 145%; } }
@view-transition { navigation: auto; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); font-size: 1rem; line-height: 1.55;
  font-variant-numeric: tabular-nums; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--petrol-tief); text-decoration-thickness: .12em; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.012em; }
h1 { hyphens: manual; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem); overflow-wrap: break-word; hyphens: auto; }
h3 { font-size: 1.1rem; overflow-wrap: break-word; hyphens: auto; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.mitte { width: min(100% - 2 * var(--rand), var(--rahmen)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.nr { white-space: nowrap; }

.sprung { position: absolute; left: 1rem; top: -5rem; z-index: 90; background: var(--tinte); color: #fff; padding: .6rem 1rem; border-radius: var(--r-knopf); }
.sprung:focus { top: .5rem; color: #fff; }

/* ---------- Musterleiste (R109, R60): oben, nicht klebend ---------- */
.nw-musterleiste { background: var(--tinte); color: #fff; font-size: .72rem; line-height: 1.35; }
.nw-musterleiste .mitte { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
.nw-musterleiste a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; border-radius: var(--r-feld); text-decoration: none; }
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nw-musterleiste a.nw-cta { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.nw-musterleiste .nw-ki { color: var(--fokus); font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }
@media (max-width: 47.99em) { .nw-musterleiste .mitte { gap: 0 .4rem; } .nw-musterleiste a { padding: 0 .45rem; } }
@media print { .nw-musterleiste { display: none; } }

/* ---------- KI-Kennzeichen, eines je Bildgruppe ---------- */
.ki-bild { position: relative; }
.ki-zeichen {
  position: absolute; top: .6rem; left: .6rem; z-index: 3; pointer-events: none;
  background: rgba(22, 37, 42, .82); color: #fff; font-size: 12px; line-height: 1; font-weight: 700;
  padding: .32rem .5rem; border-radius: 6px; letter-spacing: .02em;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.3rem; border: 2px solid var(--petrol); border-radius: var(--r-knopf);
  background: var(--petrol); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.knopf:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); color: #fff; }
.knopf-gross { min-height: 56px; padding: 0 1.7rem; font-size: 1rem; }
.knopf-linie { background: var(--weiss); color: var(--petrol); }
.knopf-linie:hover { background: var(--petrol-hell); color: var(--petrol-tief); }

/* ---------- Kopf (die einzige klebende Leiste) ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(250, 251, 248, .97); border-bottom: 1px solid var(--linie); }
.kopf-zeile { display: flex; align-items: center; gap: 1.2rem; height: var(--kopf-h); }
.menue a, .kopf-tel, .sprache-knopf, .kopf-knopf { white-space: nowrap; }
@media (min-width: 64em) { .marke-name { white-space: nowrap; } .marke { flex-shrink: 0; } }
.marke { min-width: 0; display: inline-flex; align-items: center; gap: .6rem; color: var(--tinte); text-decoration: none; min-height: 44px; margin-right: auto; }
.marke img { width: 24px; height: 38px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name { font-weight: 700; font-size: .95rem; }
.marke-ort { font-size: .7rem; color: var(--grau); }
.menue ul { display: flex; gap: .2rem; }
.menue a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .85rem; border-radius: var(--r-feld); }
.menue a:hover { background: var(--wechsel); color: var(--tinte); }
.menue-extra { display: none; }
.kopf-rechts { display: flex; align-items: center; gap: .6rem; }
.kopf-tel { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 .5rem; color: var(--tinte); font-weight: 700; font-size: .85rem; text-decoration: none; border-radius: var(--r-feld); }
.kopf-tel svg { width: 20px; height: 20px; color: var(--petrol); flex: none; }
.kopf-tel:hover { background: var(--wechsel); color: var(--tinte); }
.kopf-knopf { min-height: 46px; font-size: .85rem; padding: 0 1.1rem; }
.sprache { position: relative; }
.sprache-knopf, .menue-knopf {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 .6rem;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--tinte); background: none; border: 1px solid var(--linie); border-radius: var(--r-feld); cursor: pointer;
}
.sprache-knopf svg, .menue-knopf svg { width: 20px; height: 20px; flex: none; }
.sprache-knopf:hover, .menue-knopf:hover { background: var(--wechsel); }
.sprache-feld {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; width: 15rem; padding: .6rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten);
}
.sprachwahl { display: grid; gap: .3rem; }
.sprachwahl button, .schrift-knopf {
  font: inherit; font-size: .85rem; text-align: left; min-height: 44px; padding: 0 .8rem; width: 100%;
  border: 1px solid transparent; border-radius: var(--r-feld); background: none; color: var(--tinte); cursor: pointer;
}
.sprachwahl button:hover, .schrift-knopf:hover { background: var(--wechsel); }
.sprachwahl button[aria-pressed="true"] { background: var(--petrol-hell); border-color: var(--petrol); font-weight: 700; }
.schrift-knopf { margin-top: .4rem; border-top: 1px solid var(--linie); border-radius: 0 0 var(--r-feld) var(--r-feld); }
.schrift-knopf span[aria-hidden] { font-weight: 800; color: var(--petrol); margin-right: .3rem; }
.schrift-knopf[aria-pressed="true"] { font-weight: 700; background: var(--petrol-hell); }
html:not(.js) .sprache, html:not(.js) .menue-knopf { display: none; }

/* Kopf am Handy und Tablet: Name, Anruf-Symbol, Menüknopf */
@media (max-width: 63.99em) {
  .kopf-zeile { gap: .5rem; }
  .sprache, .kopf-knopf, .kopf-tel-nr, .marke-ort { display: none; }
  .kopf-tel { border: 1px solid var(--linie); }
  .marke-name { font-size: .9rem; }
  .js .menue {
    display: none; position: fixed; left: 0; right: 0; top: var(--menue-oben, var(--kopf-h)); bottom: 0; z-index: 55;
    overflow-y: auto; background: var(--grund); padding: 1rem var(--rand) 2rem; border-top: 1px solid var(--linie);
  }
  .js .menue.offen { display: block; }
  .menue ul { flex-direction: column; gap: 0; }
  .menue a { display: flex; width: 100%; min-height: 56px; font-size: 1.1rem; border-bottom: 1px solid var(--linie); border-radius: 0; padding: 0 .2rem; }
  .menue-extra { display: block; margin-top: 1.5rem; }
  .menue-titel { font-size: .85rem; font-weight: 700; color: var(--grau); margin-bottom: .5rem; }
  .menue .sprachwahl button, .menue .schrift-knopf { font-size: 1rem; border: 1px solid var(--linie); }
  .menue .schrift-knopf { border-radius: var(--r-feld); }
  html:not(.js) .menue { display: none; }
}
@media (max-width: 22.49em) { .menue-knopf [data-t] { display: none; } .marke-name { font-size: .85rem; } }
@media (min-width: 64em) {
  .menue-knopf { display: none; }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .kopf-tel-nr, .marke-ort { display: none; }
  .kopf-zeile { gap: .6rem; }
  .menue a { padding: 0 .45rem; }
  #sprache-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 1. Erster Bildschirm ---------- */
.held { position: relative; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.held-raster { position: relative; z-index: 2; }
.held-text { padding-block: 1.6rem 1.4rem; }
.held h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.35rem); margin-bottom: .45em; }
.held-satz { font-size: 1.05rem; color: var(--tinte); max-width: 34em; margin-bottom: 1.3rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem; }
.tel-gross { display: inline-flex; align-items: baseline; gap: .45rem; min-height: 48px; align-items: center; color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.tel-gross .tel-wort { font-weight: 400; color: var(--grau); }
.tel-gross .nr { color: var(--petrol); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; }

/* Kasten „Was heute gilt“ */
.heute { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); }
.heute-status { padding: 1.1rem 1.2rem 1rem; }
.heute-kopf { font-size: .8rem; font-weight: 700; color: var(--grau); margin: 0 0 .35rem; letter-spacing: 0; line-height: 1.3; }
.heute-datum { font-weight: 400; }
.heute-datum::before { content: "· "; }
.status { display: flex; align-items: center; gap: .55rem; font-size: 1.45rem; font-weight: 700; line-height: 1.15; margin: 0 0 .3rem; }
.punkt { width: .7em; height: .7em; border-radius: 50%; background: var(--gruen); flex: none; box-shadow: 0 0 0 4px rgba(30, 107, 58, .16); }
.heute.offen .status { color: var(--gruen); }
.heute.bald .status, .heute.pause .status { color: var(--bernstein); }
.heute.bald .punkt, .heute.pause .punkt { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(122, 78, 0, .16); }
.heute.zu .status { color: var(--rost); }
.heute.zu .punkt { background: var(--rost); box-shadow: 0 0 0 4px rgba(154, 52, 18, .16); }
.status-zusatz { font-size: .85rem; color: var(--grau); margin: 0; }
.heute-zeilen { margin: 0; }
.heute-zeile { padding: .8rem 1.2rem; border-top: 1px solid var(--linie); }
.heute-zeile dt { font-size: .75rem; font-weight: 700; color: var(--grau); margin-bottom: .15rem; }
.heute-zeile dd { margin: 0; font-size: .9rem; line-height: 1.4; }
.heute-zeile dd .nr { font-weight: 700; font-size: 1rem; }
.heute-zeile dd .zusatz { display: block; color: var(--grau); font-size: .85rem; }
.heute.zu #z-da dd a { font-weight: 700; }

/* Handy und Tablet (Hugos Wahl 01.10.2026, Variante C): Foto oben, die Überschrift liegt in Weiß auf einem dunklen
   Verlauf am unteren Bildrand, darunter Einführung, Knöpfe und der Kasten „Was heute gilt“. Die Reihenfolge im
   Quelltext bleibt; .held-raster und .held-text lösen sich dafür auf (display: contents). */
@media (max-width: 63.99em) {
  .held { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 1.5rem; }
  .held-raster, .held-text { display: contents; }
  .held-bild { grid-row: 1; grid-column: 1; aspect-ratio: 4 / 3; width: 100%; }
  .held-bild img { object-position: 78% 20%; } /* Stockfoto-Entwurf 04.10.2026: vorher 78% 50%, Kopf der Ärztin sonst angeschnitten */
  .held-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6, 32, 36, .86) 0%, rgba(6, 32, 36, .5) 42%, rgba(6, 32, 36, 0) 72%); }
  .held-bild .ki-zeichen { z-index: 3; }
  .held h1 { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2; color: #fff; margin: 0; padding: 0 var(--rand) 1.1rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
  .held-satz { grid-row: 2; margin: 0; padding: 1.2rem var(--rand) 1rem; }
  .held-knoepfe { grid-row: 3; padding: 0 var(--rand); }
  .heute { grid-row: 4; margin: 1.4rem var(--rand) 1rem; }
}
/* Kurze, schmale Handys (320×640, 375×667): ohne den Einführungssatz steht der Status im ersten Bildschirm.
   Die Namen der Ärzte stehen im Kasten unter „Heute in der Praxis“ (Prüfung 01.10.2026, Runde 4). */
@media (max-width: 29.99em) and (max-height: 45em) { .held-satz { display: none; } .held-knoepfe { padding-top: 1.2rem; } }
@media (min-width: 40em) and (max-width: 63.99em) {
  .held-bild { aspect-ratio: 2 / 1; }
  .heute-zeilen { display: grid; grid-template-columns: repeat(3, 1fr); }
  .heute-zeile + .heute-zeile { border-left: 1px solid var(--linie); }
}
/* Rechner (Hugos Wahl 01.10.2026: Einstieg C auch hier): Foto über die volle Breite, dunkler Verlauf von links,
   Überschrift, Satz und Knöpfe in Weiß darauf; der Kasten „Was heute gilt“ liegt über der Unterkante des Fotos. */
@media (min-width: 64em) {
  .held { --oben: 116px; }
  .held-bild { position: absolute; top: 0; left: 0; right: 0; bottom: 3.4rem; width: auto; }
  .held-bild img { object-position: 78% 6%; } /* Stockfoto-Entwurf 04.10.2026: vorher 78% 45%, Kopf der Ärztin sonst angeschnitten */
  .held-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 32, 36, .9) 0%, rgba(6, 32, 36, .74) 32%, rgba(6, 32, 36, .22) 56%, rgba(6, 32, 36, 0) 70%); }
  .held-bild .ki-zeichen { z-index: 3; }
  .held-text { position: relative; z-index: 2; }
  .held h1 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
  .held-satz { color: rgba(255, 255, 255, .92); }
  .held-text .knopf { background: #fff; border-color: #fff; color: var(--petrol-tief); }
  .held-text .knopf:hover { background: var(--petrol-hell); border-color: var(--petrol-hell); }
  .held-text .tel-gross, .held-text .tel-gross .nr, .held-text .tel-wort { color: #fff; }
  .held-text :focus-visible { outline-color: #fff; }
  .heute { position: relative; z-index: 2; }
  .held-raster {
    display: grid; grid-template-rows: 1fr auto;
    min-height: clamp(26rem, calc(100svh - var(--oben) - 2.4rem), 42rem);
  }
  .held-text { align-self: center; width: calc(47vw - max(var(--rand), (100vw - var(--rahmen)) / 2) - 2.5rem); padding-block: 1.4rem 1.8rem; }
  .held h1 { font-size: clamp(2.2rem, .9rem + 2vw, 2.6rem); }
  .held-satz { margin-bottom: 1.1rem; }
  .heute { display: grid; grid-template-columns: 1.55fr 3fr; margin-bottom: 0; }
  .status { font-size: 1.35rem; }
  .heute-status { padding: 1.2rem 1.4rem; border-right: 1px solid var(--linie); }
  .heute-zeilen { display: grid; grid-template-columns: repeat(3, 1fr); }
  .heute-zeile { border-top: 0; padding: 1.2rem 1.3rem; }
  .heute-zeile + .heute-zeile { border-left: 1px solid var(--linie); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(2.4rem, 3.6vw, 2.9rem); }
.wechsel { background: var(--wechsel); }
.abschnitt > .mitte > h2, .einleitung { max-width: 40rem; }
.hinweise li { padding: .25rem 0; font-size: .95rem; }
.hinweise b { font-weight: 700; }

/* 2. Sprechzeiten und Aushänge */
.zwei-spalten { display: grid; gap: 2.2rem; }
@media (min-width: 64em) { .zwei-spalten { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; } }
.zeiten { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; margin-bottom: 1.1rem; }
.zeiten th, .zeiten td { text-align: left; padding: .6rem 1rem; border-bottom: 1px solid var(--linie); font-size: .95rem; white-space: nowrap; }
/* Schmale Handys (Prüfung 01.10.2026): bei 320–375 px ragte die Nachmittags-Spalte rechts hinaus.
   Der Tag darf umbrechen, das „heute“-Schild rückt unter den Tag, die Zeiten selbst bleiben ganz. */
@media (max-width: 29.99em) {
  .zeiten th, .zeiten td { padding: .5rem .4rem; font-size: .82rem; }
  .zeiten tbody th { white-space: normal; }
  .zeiten tr.ist-heute th::after { display: table; margin: .2rem 0 0; }
}
.zeiten thead th { font-size: .75rem; color: var(--grau); font-weight: 700; padding-block: .55rem; background: var(--grund); }
.zeiten tbody tr:last-child > * { border-bottom: 0; }
.zeiten tbody th { font-weight: 700; }
.zeiten td.frei { color: var(--grau); }
.zeiten tr.ist-heute > * { background: var(--petrol-hell); }
.zeiten tr.ist-heute th::after { content: attr(data-heute-text); display: inline-block; margin-left: .5rem; padding: .1rem .45rem; font-size: .65rem; font-weight: 700; color: #fff; background: var(--petrol); border-radius: 6px; vertical-align: .15em; }
.aushaenge h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.meldungen { display: grid; gap: .8rem; }
.meldung { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 1rem 1.2rem; }
.meldung time { display: block; font-size: .75rem; font-weight: 700; color: var(--grau); margin-bottom: .2rem; }
.meldung h4 { margin: 0 0 .3rem; font-size: 1rem; }
.meldung p { margin: 0; font-size: .9rem; }
.meldung-neu time::after { content: attr(data-neu); margin-left: .5rem; padding: .05rem .4rem; border-radius: 6px; background: var(--petrol); color: #fff; font-size: .65rem; }
.meldung.abgelaufen { opacity: .75; }
.weitere { margin-top: .8rem; }
.weitere summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--petrol); cursor: pointer; font-size: .9rem; }
.weitere .meldungen { margin-top: .4rem; }

/* 3. Leistungen */
.lei-raster { display: grid; gap: 2rem; }
.lei-kopf p { max-width: 26rem; }
.lei-bild { margin: 1.3rem 0 0; border-radius: var(--r-karte); overflow: hidden; }
.lei-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lei-liste { display: grid; gap: 0 2rem; }
.lei-liste li { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--linie-stark); }
.lei-liste h3 { margin-bottom: .3rem; }
.lei-liste p { margin: 0 0 .4rem; font-size: .95rem; }
.lei-liste .fakt { margin: 0; font-size: .8rem; font-weight: 700; color: var(--petrol); }
.lei-notiz { font-size: .85rem; color: var(--grau); margin: 0; }
@media (min-width: 40em) { .lei-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) {
  .lei-raster { grid-template-columns: 4fr 8fr; gap: 1.2rem 3.5rem; }
  .lei-kopf { grid-row: span 2; }
  .lei-bild img { aspect-ratio: 4 / 4.2; }
  .lei-liste li:nth-child(-n+2) { padding-top: .3rem; border-top: 0; }
}

/* 4. Termin */
.termin-raster { display: grid; gap: 2rem; }
@media (min-width: 64em) { .termin-raster { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; } }
.wartezeit { width: 100%; border-collapse: collapse; margin: .2rem 0 1.5rem; }
.wartezeit th, .wartezeit td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--linie-stark); font-size: .95rem; vertical-align: top; }
.wartezeit th { font-weight: 400; padding-right: 1rem; }
.wartezeit td { font-weight: 700; white-space: nowrap; text-align: right; }
.rezept-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 1.2rem 1.3rem 1.3rem; }
.rezept-karte h3 { margin-bottom: .3rem; }
.rezept-karte p { font-size: .95rem; }

/* Externer Buchungsdienst (Attrappe): eigene, fremde Anmutung, Systemschrift */
.dienst {
  --d-akzent: #2F5D8A; --d-akzent-tief: #1F4468;
  background: #fff; color: #1D2327; border: 1px solid #C9D1D6; border-radius: var(--r-karte); box-shadow: var(--schatten);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: .9rem; overflow: clip;
}
.dienst-leiste { display: flex; align-items: center; gap: .7rem; min-height: 40px; padding: .3rem .8rem; background: #EEF1F3; border-bottom: 1px solid #D5DBDF; color: #56616A; font-size: .72rem; }
.dienst-punkte { display: inline-flex; gap: 5px; }
.dienst-punkte i { width: 9px; height: 9px; border-radius: 50%; background: #C3CBD1; }
.dienst-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dienst-vorher { display: grid; justify-items: start; gap: .2rem; padding: 2rem 1.6rem 1.8rem; min-height: 22rem; align-content: center; }
.dienst-symbol { width: 44px; height: 44px; color: var(--d-akzent); margin-bottom: .4rem; }
.dienst-vorher h3, .dienst-vorher h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.dienst-vorher p { max-width: 30rem; margin-bottom: .6rem; }
.dienst-muster { background: #FFF4CE; color: #3D3000; border-radius: var(--r-feld); padding: .5rem .75rem; font-size: .8rem; }
.dienst .knopf { background: var(--d-akzent); border-color: var(--d-akzent); font-size: .9rem; }
.dienst .knopf:hover { background: var(--d-akzent-tief); border-color: var(--d-akzent-tief); }
.dienst-klein { font-size: .78rem; color: #4A545B; margin: .6rem 0 0; }
.dienst-klein a { color: var(--d-akzent); font-weight: 700; }
.dienst-form { display: flex; flex-direction: column; }
.dienst-schritt { padding: 1.1rem 1.3rem .4rem; }
.dienst fieldset { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.dienst legend { font-weight: 700; font-size: .85rem; margin-bottom: .4rem; padding: 0; }
.wahl { display: grid; gap: .45rem; min-width: 0; }
.wahl > * { min-width: 0; }
.wahl.zwei { grid-template-columns: repeat(2, 1fr); }
.wahl.drei { grid-template-columns: repeat(3, 1fr); }
.wahl.tage { grid-template-columns: repeat(3, 1fr); }
.wahl.zeiten-wahl { grid-template-columns: repeat(4, 1fr); }
.wahl.nummern { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 40em) {
  .wahl.tage { grid-template-columns: repeat(6, 1fr); }
  .wahl.nummern { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 64em) { .termin-raster .wahl.zwei.arten { grid-template-columns: repeat(4, 1fr); } }
.wahl label { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wahl label > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: .3rem .5rem; border: 1px solid #B7C2C9; border-radius: var(--r-feld); background: #fff;
  font-size: .82rem; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto;
}
.wahl label > span small { font-size: .72rem; color: #5A646C; }
.wahl input:checked + span { background: var(--d-akzent); border-color: var(--d-akzent); color: #fff; font-weight: 700; }
.wahl input:checked + span small { color: #E3ECF5; }
.wahl input:focus-visible + span { outline: 3px solid var(--d-akzent); outline-offset: 2px; }
.wahl label:hover > span { border-color: var(--d-akzent); }
.tage label > span { min-height: 52px; }
.dienst-summe { position: sticky; bottom: 0; background: #F6F8F9; border-top: 1px solid #D5DBDF; padding: .8rem 1.3rem 1rem; }
.summe-text { margin: 0 0 .6rem; font-size: .85rem; min-height: 2.5em; }
.dienst-los { width: 100%; }
.rueckmeldung { margin: .5rem 0 0; font-size: .82rem; font-weight: 600; }
.rueckmeldung:empty { display: none; }
.rueckmeldung.ok { color: #14532D; background: #E3F2E8; border-radius: var(--r-feld); padding: .55rem .7rem; }
.rueckmeldung.nein { color: #8A1C1C; }
.dienst-zurueck { font: inherit; font-weight: 700; color: var(--d-akzent); background: none; border: 0; min-height: 44px; padding: 0; cursor: pointer; margin-bottom: .4rem; }
.dienst-zurueck::before { content: "← "; }

/* Formularfelder (Dienst und Rückruf) */
.feld { margin-bottom: .75rem; }
.feld label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .25rem; }
.feld input, .feld select {
  width: 100%; min-height: 48px; padding: .5rem .7rem; font: inherit; font-size: .95rem; color: inherit;
  background: #fff; border: 1.5px solid #8E9FA7; border-radius: var(--r-feld);
}
.feld input:focus-visible, .feld select:focus-visible { outline: 3px solid var(--petrol); outline-offset: 1px; }
.feld input[aria-invalid="true"] { border-color: #B42318; }
.fehler { color: #8A1C1C; font-size: .8rem; margin: .2rem 0 0; }
.fehler:empty { display: none; }
.feld-paar { display: grid; gap: 0 .8rem; }
@media (min-width: 40em) { .feld-paar { grid-template-columns: 1.4fr 1fr; } }

/* Rezept-Dialog */
dialog.dienst-dialog { width: min(40rem, 100% - 2rem); max-height: calc(100dvh - 2rem); padding: 0; }
dialog.dienst-dialog[open] { display: flex; flex-direction: column; }
dialog.dienst-dialog::backdrop { background: rgba(10, 25, 28, .55); }
.dienst-dialog .dienst-form { overflow-y: auto; }
.dienst-dialog .dienst-vorher { min-height: 0; }
.dienst-h { font-size: 1.15rem; margin: 0 0 .8rem; }
.dienst-zu { font: inherit; font-weight: 700; font-size: .78rem; color: #1D2327; background: #fff; border: 1px solid #C3CBD1; border-radius: var(--r-feld); min-height: 44px; padding: 0 .9rem; cursor: pointer; }
.plan-hilfe { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.plan-hilfe svg { width: 100%; height: auto; }
.plan-hilfe .dienst-klein { margin: 0; }
@media (max-width: 47.99em) {
  dialog.dienst-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.dienst-dialog[open] { animation: auf .18s ease-out; }
  @keyframes auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* 5. Über uns */
.team-raster { display: grid; gap: 1.8rem; }
.team-bild { margin: 0; border-radius: var(--r-karte); overflow: hidden; }
.team-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.personen { margin: 1rem 0 0; }
.personen div { padding: .75rem 0; border-top: 1px solid var(--linie); }
.personen dt { font-weight: 700; }
.personen dd { margin: .1rem 0 0; font-size: .95rem; color: var(--grau); }
.raeume { display: grid; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 47.99em) { .raum-klein { display: none; } }
.raeume figure { margin: 0; }
.raeume img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-karte); }
.raeume figcaption { font-size: .85rem; color: var(--grau); margin-top: .5rem; }
.stimmen { margin-top: 2.4rem; }
.stimmen h3 { font-size: 1.25rem; margin-bottom: .9rem; }
.stimmen ul { display: grid; gap: 1.2rem 2rem; }
.stimmen li { border-top: 2px solid var(--petrol); padding-top: .9rem; }
.stimmen blockquote { margin: 0; }
.stimmen blockquote p { font-size: 1.05rem; line-height: 1.45; margin: 0 0 .5rem; }
.stimmen .wer { font-size: .85rem; color: var(--grau); margin: 0; font-weight: 700; }
@media (min-width: 48em) { .stimmen ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) {
  .team-raster { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: center; }
  .raeume { grid-template-columns: 7fr 5fr; }
  .raeume img { aspect-ratio: auto; height: clamp(13rem, 18vw, 17rem); }
}

/* 6. Kontakt */
.kontakt-raster { display: grid; gap: 2.2rem; margin-top: 1.4rem; }
@media (min-width: 48em) { .kontakt-raster { grid-template-columns: 1fr 1fr; } .rueckruf { grid-column: span 2; } }
@media (min-width: 64em) { .kontakt-raster { grid-template-columns: 4fr 4fr 4.4fr; gap: 2.5rem; } .rueckruf { grid-column: auto; } }
.kontakt-daten address { font-style: normal; font-size: 1.05rem; margin-bottom: 1rem; line-height: 1.5; }
.kurz div { padding: .6rem 0; border-top: 1px solid var(--linie-stark); }
.kurz dt { font-size: .75rem; font-weight: 700; color: var(--grau); }
.kurz dd { margin: .1rem 0 0; font-size: .95rem; }
.kurz dd .nr { font-weight: 700; font-size: 1.05rem; }
.kurz dd span { color: var(--grau); font-size: .85rem; }
.mail { overflow-wrap: anywhere; }
.anfahrt figure { margin: 0 0 1rem; border-radius: var(--r-karte); overflow: hidden; }
.anfahrt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.anfahrt h3 { margin-bottom: .4rem; }
.rueckruf { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 1.3rem 1.3rem 1.2rem; align-self: start; }
.rueckruf h3 { margin-bottom: .3rem; }
.rueckruf .klein { font-size: .85rem; color: var(--grau); }
.rueckruf .knopf { width: 100%; margin-top: .3rem; }
.rueckruf .rueckmeldung.ok { color: #14532D; }

/* ---------- Fuß ---------- */
.fuss { background: var(--petrol-tief); color: #E4EFED; padding-block: 2.2rem 1.6rem; font-size: .9rem; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--petrol-hell); }
.fuss :focus-visible { outline-color: var(--fokus); }
.notruf { padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: 1.4rem; }
.notruf h2 { font-size: 1.2rem; margin-bottom: .9rem; color: #fff; }
.notruf ul { display: grid; gap: 1rem 2rem; }
.notruf li { display: grid; gap: .1rem; }
.notruf a { font-size: 1.6rem; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.notruf a:hover { text-decoration: underline; }
.notruf span { font-size: .85rem; color: #C6DAD6; }
@media (min-width: 48em) { .notruf ul { grid-template-columns: repeat(3, 1fr); } }
.fuss-raster { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr 1fr; align-items: start; }
.fuss-raster > :first-child { grid-column: 1 / -1; }
@media (min-width: 48em) { .fuss-raster { grid-template-columns: 1.3fr 2fr 1fr; } .fuss-raster > :first-child { grid-column: auto; } }
.fuss-marke { font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 .3rem; }
.fuss address { font-style: normal; line-height: 1.6; }
.fuss-raster ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.fuss-raster ul a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss address a { display: inline-flex; align-items: center; min-height: 44px; }
.musterhinweis { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .78rem; color: #C6DAD6; max-width: 60rem; }

/* ---------- Impressum und Datenschutz ---------- */
.rechtstext { padding-block: 2.5rem 3.5rem; }
.rechtstext .blatt { max-width: 44rem; }
.rechtstext h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); overflow-wrap: break-word; }
.rechtstext h2 { font-size: 1.2rem; margin-top: 1.8rem; }
.rechtstext .grau { color: var(--grau); font-size: .9rem; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 1rem; font-weight: 700; }
.zurueck::before { content: "← "; margin-right: .2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media print { .kopf, .dienst, .rueckruf, .sprache { display: none; } }