/* ==========================================================================
   Praxis Gundheim – öffentliche Website, Gestaltung „Kupferstich“
   Eine Druckfarbe (Tinte/Petrol) auf kühlem Papier, ein Akzent (Spätburgunder).
   Ergänzt um: Handy-Reihenfolge und Daumenleiste (Entwurf „Klartext“), Notfall-Zeile,
   „Wenn die Praxis geschlossen ist“ und Routen-Weiche (Entwurf „Wintergarten“).
   Regeln: keine externen Ressourcen, keine Inline-Stile (CSP), logische Eigenschaften (RTL),
   Größen in rem, Tippziele ≥ 3 rem (48 px), sichtbarer Fokus, Dunkelmodus, Druck.
   ========================================================================== */

/* ---------- 1. Schriften (selbst gehostet, OFL – siehe fonts/LIZENZEN.md) ---------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.9ef356ea553a.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3-latin-wght-normal.9ef356ea553a.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/source-sans-3-latin-wght-italic.cd60e3b13ca1.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3-latin-wght-italic.cd60e3b13ca1.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; 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/source-sans-3-latin-ext-wght-normal.c6ba61588d7d.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3-latin-ext-wght-normal.c6ba61588d7d.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-cyrillic-wght-normal.d4a5d3021882.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3-cyrillic-wght-normal.d4a5d3021882.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Source Serif 4 mit optischer Größe: große Grade bekommen die feine Display-Optik (wie ein Stich) */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-opsz-normal.e9192c2fe0a3.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-opsz-normal.e9192c2fe0a3.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 Serif 4";
  src: url("../fonts/source-serif-4-latin-ext-opsz-normal.33ba75072ebc.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-ext-opsz-normal.33ba75072ebc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-cyrillic-opsz-normal.98b50dcfe9a5.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-cyrillic-opsz-normal.98b50dcfe9a5.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Arabisch: wird nur auf der arabischen Fassung verwendet (html[lang="ar"]) */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-wdth-wght.6a261d2313ba.woff2") format("woff2-variations"),
       url("../fonts/noto-sans-arabic-wdth-wght.6a261d2313ba.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- 2. Tokens ---------- */
:root {
  --papier: #f2f5f5;      /* Seitengrund, kühles Papierweiß */
  --bogen: #ffffff;       /* Flächen zum Lesen und Schreiben: Tafel, Felder */
  --tinte: #0e3b43;       /* Überschriften, Stiche, Bänder */
  --petrol: #17606b;      /* alles, was man antippen kann */
  --petrol-tief: #114d57;
  --hauch: #dde9eb;       /* leise Flächen: heute, gewählt, Hauptaufgabe */
  --wein: #8a1d36;        /* der eine Akzent: Stern „heute/jetzt“, Fokus, Fehler */
  --text: #1d2629;
  --grau: #4b5b60;
  --linie: #c8d5d7;       /* nur Schmuck/Trennung */
  --feldrand: #5d7075;    /* Kanten von Bedienelementen, ≥ 3 : 1 */
  --band: #0e3b43;
  --band-text: #eef4f4;
  --band-grau: #bcd2d5;
  --band-linie: #2d5a62;
  --band-fokus: #f2a7b8;
  --knopf-text: #ffffff;
  --fokus: #8a1d36;
  --stich-filter: none;   /* Kupferstiche: im Dunkeln zu heller Tinte */
  --marke-filter: none;   /* Bildmarke dezent zu Tinte umgefärbt (#203a3d, img/marke-tinte-*.png; von der Praxis bestätigt 11.11.2026); im Dunkeln hell */
  --foto-filter: brightness(1); /* Fotos: im Dunkeln etwas gedämpft (brightness, damit kombinierbar) */
  --schatten-feld: 0 14px 36px rgb(14 59 67 / 0.18);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif;
  --arabisch: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;

  --breite: 75rem;
  --rand: 1rem;
  --abstand: clamp(3rem, 2rem + 4vw, 6rem);
  --radius: 0.375rem;
  --daumen: 0rem;          /* Höhe der Daumenleiste (nur Handy) */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0f1c1f;
    --bogen: #152629;
    --tinte: #d6e8ea;
    --petrol: #7cc6d0;
    --petrol-tief: #a2dae1;
    --hauch: #1d373b;
    --wein: #f2a7b8;
    --text: #e4eced;
    --grau: #a6b8bb;
    --linie: #2c464b;
    --feldrand: #86a0a5;
    --band: #17363c;        /* deutlich heller als die Seite (sonst 1,1 : 1), dazu Haarlinien */
    --band-text: #eef5f6;
    --band-grau: #b3cbce;
    --band-linie: #3a6168;
    --knopf-text: #08262b;
    --fokus: #f2a7b8;
    --stich-filter: invert(1) hue-rotate(180deg) brightness(0.92);
    --marke-filter: invert(1) hue-rotate(180deg) brightness(0.95);
    --foto-filter: brightness(0.85);
    --schatten-feld: 0 14px 36px rgb(0 0 0 / 0.5);
  }
}

@media (min-width: 48rem) { :root { --rand: 2rem; } }
@media (max-width: 47.99rem) { :root { --daumen: 4.5rem; } }

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
  scroll-padding-bottom: calc(var(--daumen) + 1rem); /* fokussierte Felder nicht unter der Daumenleiste */
}
html[lang="ar"] {
  /* arabische Zeichen aus Noto Sans Arabic (unicode-range), lateinische weiter aus Source Sans/Serif */
  --sans: "Noto Sans Arabic", "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  --serif: "Noto Sans Arabic", "Source Serif 4", Georgia, serif;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-kerning: normal;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
@media (min-width: 64rem) { body { font-size: 1.25rem; } }

img, svg, picture { max-width: 100%; }
img { height: auto; }
picture { display: contents; }

p, ul, ol, dl, table, address, figure { margin-block: 0 1rem; margin-inline: 0; }
p { text-wrap: pretty; }
address { font-style: normal; }
[dir="rtl"] address[dir="ltr"] { text-align: end; } /* LTR-Block rechtsbündig wie der Text drumherum */

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
  color: var(--tinte);
  margin-block: 0 0.75rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: manual;
}
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 3.2vw, 4.25rem); line-height: 1.04; margin-block-end: 1rem; }
h2 { font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3rem); line-height: 1.1; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1.25; margin-block-end: 0.5rem; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 3px; }
main:focus { outline: none; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
@media (max-width: 39.99rem) { .nur-breit { display: none !important; } }
@media (min-width: 40rem) { .nur-schmal { display: none !important; } }
@media (max-width: 47.99rem) { .nicht-handy { display: none !important; } }
@media (min-width: 48rem) { .nur-handy { display: none !important; } }
a[href^="mailto:"] { overflow-wrap: anywhere; }
[dir="ltr"] { unicode-bidi: isolate; }

.unsichtbar, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  inset-inline-start: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--tinte);
  color: var(--papier);
  font-weight: 600;
  border-radius: var(--radius);
}
.sprunglink:focus { top: 1rem; }

.ikon {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikon--mittel { width: 2rem; height: 2rem; stroke-width: 1.6; }
.ikon--gross { width: 2.75rem; height: 2.75rem; stroke-width: 1.5; }
.stern { width: 1.15em; height: 1.15em; flex: none; fill: var(--wein); vertical-align: -0.15em; }

/* ---------- 4. Bausteine ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--petrol);
  color: var(--knopf-text);
  font: 600 1.125rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); color: var(--knopf-text); }
.knopf--gross { min-height: 3.5rem; padding-inline: 1.5rem; font-size: 1.1875rem; }
.knopf--hell, .knopf.zweit { background: transparent; color: var(--petrol); }
.knopf--hell:hover, .knopf.zweit:hover { background: var(--hauch); color: var(--petrol); border-color: var(--petrol); }

.einleitung { max-width: 52ch; color: var(--grau); font-size: 1.25rem; line-height: 1.45; margin-block-end: 2rem; }
.lede { font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem); line-height: 1.45; max-width: 38ch; }
.klein { font-size: 1rem; color: var(--grau); }

.kasten {
  margin-block: 0 1.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--bogen);
  border: 1px solid var(--linie);
  border-inline-start: 4px solid var(--tinte);
  border-radius: var(--radius);
}
.kasten > :last-child { margin-block-end: 0; }
.kasten h2 { font-size: 1.5rem; }
.kasten.hinweis { background: var(--hauch); border-color: var(--hauch); border-inline-start-color: var(--petrol); }
.kasten.notfall { border-inline-start-color: var(--wein); }
.kasten.notfall strong { color: var(--wein); }
.kasten__titel { display: flex; align-items: center; gap: 0.5rem; }
.kasten__titel .ikon { color: currentColor; }
.kasten.notfall .kasten__titel { color: var(--wein); }

.foto { margin: 0; }
.foto img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: var(--hauch);
  filter: var(--foto-filter);
}
/* Praxisansichten als Kupferstich (nach eigenen Fotos, 12.11.2026): Tinte auf durchsichtigem Grund wie die übrigen
   Stiche – kein Kasten dahinter, im Dunkeln helle Tinte */
.foto--stich img { background: none; border-radius: 0; filter: var(--stich-filter); }
/* Kleine Kupferstich-Vignetten (Online-Aufgaben, Stellenhinweis): nur Schmuck, alt="" */
.vignette { display: block; width: 4rem; height: 4rem; filter: var(--stich-filter); }
.vignette--gross { width: 5rem; height: 5rem; }
@media (min-width: 48rem) { .vignette--gross { width: 6rem; height: 6rem; } }
.foto figcaption { margin-block-start: 0.5rem; color: var(--grau); font-size: 1rem; line-height: 1.4; }

/* ---------- 5. Rahmen der Seite ---------- */

/* Notfall-Zeile ganz oben, auf jeder Seite */
.notfallzeile {
  --fokus: var(--band-fokus);
  background: var(--band);
  color: var(--band-text);
  font-size: 1rem;
  line-height: 1.25;
  border-block-end: 1px solid var(--band-linie);
}
.notfallzeile__innen { display: flex; align-items: center; gap: 0 1rem; flex-wrap: wrap; }
.notfallzeile__titel { margin: 0; font-weight: 700; }
.notfallzeile__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.notfallzeile a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  gap: 0 0.4rem;
  min-height: 3rem;
  color: var(--band-text);
  text-decoration: none;
}
.notfallzeile a:hover { text-decoration: underline; }
.notfallzeile__nummer { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; font-variant-numeric: lining-nums; }
.notfallzeile__mehr a { color: var(--band-grau); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 39.99rem) {
  .notfallzeile__titel, .notfallzeile__mehr { display: none; }
  .notfallzeile__liste { gap: 0 1.25rem; }
}

.banner { background: var(--hauch); color: var(--tinte); font-weight: 600; border-block-end: 1px solid var(--linie); }
.banner .innen { display: flex; align-items: flex-start; gap: 0.625rem; padding-block: 0.75rem; }
.banner p { margin: 0; }
.banner .ikon { margin-block-start: 0.1rem; color: var(--petrol); }

/* Kopf: Bildmarke + Schriftzug; bricht bei großer Schrift in zwei Zeilen um */
.kopf { position: relative; z-index: 10; }
.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.75rem;
  padding-block: 0.75rem;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  margin-inline-end: auto;
  color: var(--tinte);
  text-decoration: none;
}
.marke__bild { width: 3.5rem; height: 3.5rem; filter: var(--marke-filter); }
.marke__name { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.marke__praxis { font-size: 1rem; color: var(--grau); margin-block-end: 0.2rem; }
html[lang="ar"] .marke__name { font-family: "Source Serif 4", Georgia, serif; }

.kopf__telefon {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding-inline: 0.5rem;
  color: var(--tinte);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.kopf__telefon .ikon { color: var(--petrol); }
.kopf__telefon:hover { text-decoration: underline; }

/* Aufklapper (Sprachwahl, Menü) – details/summary, funktioniert ohne JavaScript */
.ausklapp { position: relative; }
.ausklapp__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--feldrand);
  border-radius: var(--radius);
  background: var(--bogen);
  color: var(--text);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ausklapp__knopf::-webkit-details-marker { display: none; }
.ausklapp__knopf .ikon { color: var(--petrol); }
.ausklapp__knopf:hover { border-color: var(--petrol); }
.ausklapp[open] > .ausklapp__knopf { background: var(--hauch); border-color: var(--petrol); }
.sprachwahl__code { display: none; }
@media (max-width: 47.99rem) {
  .kopf__innen { gap: 0.5rem; padding-block: 0.625rem; }
  .marke { gap: 0.5rem; }
  .marke__bild { width: 2.75rem; height: 2.75rem; }
  .marke__name { font-size: 1.375rem; }
  .ausklapp__knopf { flex-direction: column; justify-content: center; gap: 0; min-width: 3.25rem; min-height: 3.5rem; padding: 0.25rem 0.375rem; font-size: 1rem; line-height: 1.15; }
  .sprachwahl__code { display: inline; }
  .sprachwahl__name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
.ausklapp__feld {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  width: min(22rem, calc(100vw - 2 * var(--rand)));
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bogen);
  border: 1px solid var(--tinte);
  border-radius: var(--radius);
  box-shadow: var(--schatten-feld);
}
/* Am Handy steht neben der Sprachwahl noch der Menü-Knopf: Ein am Knopf ausgerichtetes Feld liefe links
   (bei Arabisch rechts) aus dem Bild. Darum richten sich beide Felder dort an der ganzen Kopfzeile aus
   (.kopf__innen ist als Container ohnehin Bezugsrahmen für absolut positionierte Kinder). */
@media (max-width: 47.99rem) {
  .kopf__innen { position: relative; }
  .ausklapp { position: static; }
  .ausklapp__feld { inset-inline: 0; width: auto; }
}
.ausklapp__titel { margin: 0 0 0.5rem; padding-inline-start: 0.75rem; font-weight: 600; color: var(--grau); font-size: 1rem; }
.sprachliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.sprachliste a, .menue .navliste a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}
.sprachliste a:hover, .menue .navliste a:hover { background: var(--hauch); }
.sprachliste a[aria-current], .menue .navliste a[aria-current] { background: var(--hauch); color: var(--tinte); font-weight: 700; }
.sprachliste a[lang="ar"] { font-family: var(--arabisch); }
html:not([lang="ar"]) .sprachliste a[lang="ar"] { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", sans-serif; }
.menue .navliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.menue .navliste a { font-weight: 600; }

.hauptnav { display: none; }

@media (min-width: 48rem) {
  .kopf__telefon { display: inline-flex; }
}
@media (min-width: 64rem) {
  .kopf__innen { padding-block: 1rem 0.5rem; }
  .marke__bild { width: 4rem; height: 4rem; }
  .marke__name { font-size: 1.75rem; }
  .menue { display: none; }
  .hauptnav { display: block; border-block-end: 1px solid var(--linie); }
  .hauptnav .navliste { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin: 0; padding: 0; list-style: none; }
  .hauptnav a {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    border-block-end: 3px solid transparent;
  }
  .hauptnav li:first-child a { padding-inline-start: 0; }
  .hauptnav a:hover { color: var(--petrol); border-block-end-color: var(--linie); }
  .hauptnav a[aria-current="page"] { color: var(--tinte); border-block-end-color: var(--wein); }
}

/* Brotkrumen */
.brotkrumen { padding-block: 0.75rem 0; font-size: 1rem; color: var(--grau); }
/* Fremdsprachige Fassung: Hinweis, dass Deutsch verbindlich ist (maschinelle Übersetzung) */
.uebersetzt { margin-block: 0.75rem 0; padding-inline-start: 0.75rem; border-inline-start: 3px solid var(--linie); font-size: 1rem; color: var(--grau); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin: 0; padding: 0; list-style: none; }
.brotkrumen li { display: inline-flex; align-items: center; gap: 0.5rem; }
.brotkrumen li + li::before { content: "/"; color: var(--linie); }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 3rem; }
.brotkrumen [aria-current] { color: var(--text); }

/* Inhaltsseiten */
.seite { padding-block: clamp(1.25rem, 0.75rem + 2vw, 2.5rem) var(--abstand); }
.seite > h1:first-child, .seite__kopf h1 { max-width: 22ch; }
.seite__kopf { position: relative; margin-block-end: 2rem; }
.seite__kopf .einleitung { margin-block-end: 0; }
.seite h2 { margin-block-start: 2.5rem; }
.seite h2:first-child, .seite .kasten h2, .seite .tafel h2, .seite .geschlossen h2 { margin-block-start: 0; }
.seite > p, .seite > ul, .seite > ol { max-width: 68ch; }
.seite > .dienste, .seite > .aerzte, .seite > .sprachfilter { max-width: none; }
.abschnitt { padding-block: var(--abstand) 0; }
.abschnitt + .abschnitt { border-block-start: 1px solid var(--linie); margin-block-start: var(--abstand); }

/* Fußzeile */
.fuss {
  --fokus: var(--band-fokus);
  margin-block-start: var(--abstand);
  background: var(--band);
  color: var(--band-text);
  padding-block: 3rem calc(3.5rem + var(--daumen));
  font-size: 1.0625rem;
}
.fuss a { color: var(--band-text); }
.fuss p, .fuss address { margin: 0 0 0.75rem; color: var(--band-grau); }
.fuss__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.fuss__praxis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.fuss__logo { width: 6rem; height: auto; filter: brightness(0) invert(0.93); }
.fuss__name { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; color: var(--band-text) !important; }
.fuss__titel { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; color: var(--band-text); margin-block-end: 0.5rem; letter-spacing: 0; }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste a, .fuss__text { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; }
.fuss__text { color: var(--band-grau); }
.fuss__liste .ikon { width: 1.25rem; height: 1.25rem; color: var(--band-grau); }
.fuss__zeiten { margin: 0 0 0.5rem; }
.fuss__zeiten div { display: flex; flex-direction: column; padding-block: 0.375rem; border-block-end: 1px solid var(--band-linie); } /* Tage ausgeschrieben: Tag über der Zeit */
.fuss__zeiten dt { font-weight: 700; }
.fuss__zeiten dd { margin: 0; color: var(--band-grau); font-variant-numeric: tabular-nums; }
.fuss__klein { font-size: 1rem; }
.fuss__mehr { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 600; }
@media (min-width: 48rem) {
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
@media (min-width: 72rem) {
  .fuss__innen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  .fuss__logo { width: 8.5rem; }
}

/* Daumenleiste (nur Handy): Anrufen / Rezept / Notfall */
.daumenleiste { display: none; }
@media (max-width: 47.99rem) {
  .daumenleiste {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--papier);
    border-block-start: 2px solid var(--tinte);
    font-size: 1rem;
    container-type: inline-size; /* Abfragen in em: reagieren auf die Systemschrift (150–200 %) */
  }
  /* Beim Tippen in ein Formularfeld (Tastatur offen) stört die Leiste – dann ausblenden */
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="submit"]), textarea, select):focus) .daumenleiste { display: none; }
}
.daumenleiste__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3.25rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--bogen);
  color: var(--petrol);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.daumenleiste__knopf--anruf { background: var(--petrol); color: var(--knopf-text); }
.daumenleiste__knopf--notfall { border-color: var(--wein); color: var(--wein); }
.daumenleiste__knopf .ikon { width: 1.375rem; height: 1.375rem; }
/* Schmal oder große Schrift: Symbol über dem Wort; sehr große Schrift: nur das Wort – nichts wird abgeschnitten */
@container (max-width: 22em) {
  .daumenleiste__knopf { flex-direction: column; gap: 0.125rem; padding-inline: 0.25rem; font-size: 0.9375rem; }
  .daumenleiste__knopf .ikon { width: 1.25rem; height: 1.25rem; }
}
@container (max-width: 15em) {
  /* Zielgröße bleibt über 48 px, ohne dass die feste Leiste ein Sechstel des Bildschirms belegt */
  .daumenleiste__knopf { min-height: 52px; padding-block: 0.125rem; font-size: 0.875rem; }
  .daumenleiste__knopf .ikon { display: none; }
}

/* ---------- 6. Statustafel (Plattenrand wie im Logo) ---------- */
.tafel {
  margin: 8px;
  padding: 1.25rem 1.25rem 1.125rem;
  background: var(--bogen);
  border: 1px solid var(--tinte);
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--bogen), 0 0 0 7px var(--tinte);
  min-width: 0;
}
@media (min-width: 62rem) { .tafel { padding: 1.75rem 2rem 1.5rem; } }
.tafel p { margin-block-end: 0.5rem; }
.tafel__tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--grau);
}
.tafel__status {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0 0 0.25rem !important;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.1;
  color: var(--tinte);
  overflow-wrap: anywhere;
}
/* gefüllt = geöffnet, leerer Ring = geschlossen */
.tafel__punkt {
  flex: none;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  border: 3px solid var(--grau);
  transform: translateY(-0.02em);
}
.tafel--offen .tafel__punkt { background: var(--petrol); border-color: var(--petrol); box-shadow: 0 0 0 0.14em var(--hauch); }
.tafel__grund { font-weight: 700; color: var(--wein); }
.tafel__vertretung { color: var(--text); }
.tafel__danach { color: var(--text); font-size: 1.1875rem; }
.tafel__dringend { padding-block-start: 0.5rem; border-block-start: 1px solid var(--linie); color: var(--grau); font-size: 1.0625rem; line-height: 1.45; }
.tafel__dringend a { font-weight: 700; white-space: nowrap; }
@media (max-width: 47.99rem) { .tafel__dringend { padding-block-start: 0.375rem; font-size: 1rem; line-height: 1.35; } }
.tafel__hinweis { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.75rem; background: var(--hauch); border-radius: var(--radius); font-size: 1.0625rem; }
.tafel__hinweis .ikon { color: var(--petrol); margin-block-start: 0.1rem; }
.tafel__anruf { width: 100%; margin-block-start: 0.5rem; font-size: 1.375rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.tafel__adresse { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; margin-block-start: 0.5rem; color: var(--petrol); }
@media (max-width: 47.99rem) { .tafel__adresse { display: none; } } /* am Handy: Aufgaben zuerst, Adresse steht bei „Anfahrt“ */

/* ---------- 7. Startseite ---------- */
.start__oben { display: flex; flex-direction: column; }
.buehne { padding-block-start: clamp(1rem, 0.5rem + 2.5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.buehne h1 { margin-block-end: 0.5rem; }
.buehne .lede { margin-block-end: 0; }
/* Handy: Die Unterzeile weicht, damit das Dauerrezept früh im Bild ist (Inhaberin und Fächer stehen im Team und unten) */
@media (max-width: 47.99rem) { .buehne .lede { display: none; } .buehne h1 { margin-block-end: 0; } }
.buehne__mehr { display: none; }
.sprachen-zeile { color: var(--grau); margin: 0; max-width: 40ch; }
.sprachen-zeile a { font-weight: 600; white-space: nowrap; }
.buehne__rezept { margin: 1.5rem 0 0; }
/* Am Handy: Sprachen in eigener Schrift gleich nach den Aufgaben (am PC steht die Zeile neben der Tafel) */
.sprachen-kurz { display: flex; align-items: flex-start; gap: 0.75rem; margin-block: 1.75rem 0; color: var(--grau); }
.sprachen-kurz > span { min-width: 0; }
.sprachen-kurz .ikon { color: var(--petrol); margin-block-start: 0.15rem; }
.sprachen-kurz a { font-weight: 600; }
/* Stellenhinweis: ein ruhiger Aushang auf Papier, mit Petrol-Kante – kein zweites Notfallband, kein Banner-Geschrei */
.stellenhinweis {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-areas: "bild kopf" "stelle stelle" "weiter weiter";
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block-start: 1.75rem;
  padding: 1rem 1.25rem 1.125rem;
  background: var(--bogen);
  border: 1px solid var(--linie);
  border-inline-start: 0.375rem solid var(--petrol);
  border-radius: var(--radius);
}
.stellenhinweis__bild { grid-area: bild; width: 3.5rem; height: 3.5rem; }
/* Handy: Bild neben der Überschrift, Titel und Knopf darunter über die volle Breite */
.stellenhinweis__text { display: contents; }
.stellenhinweis h2 { grid-area: kopf; margin: 0; font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); color: var(--tinte); }
.stellenhinweis__stelle { grid-area: stelle; margin: 0; padding: 0; list-style: none; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.4; }
.stellenhinweis__stelle li + li { margin-block-start: 0.25rem; }
.stellenhinweis__weiter { grid-area: weiter; margin: 0; }
@media (max-width: 35.99rem) { .stellenhinweis__weiter .knopf { width: 100%; } }
@media (min-width: 48rem) {
  .stellenhinweis { grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "bild text weiter"; column-gap: 1.75rem; }
  .stellenhinweis__bild { width: 5rem; height: 5rem; }
  .stellenhinweis__text { display: block; grid-area: text; min-width: 0; }
  .stellenhinweis h2 { margin-block-end: 0.25rem; }
}
@media (min-width: 62rem) { .stellenhinweis { margin-block-start: 2.25rem; padding: 1.25rem 1.75rem; } }

.aufgaben { padding-block: 2.5rem 0; }
.aufgaben h2 { margin-block-end: 0.25rem; }
.aufgaben .einleitung { margin-block-end: 1.25rem; }
.aufgaben--seite { padding-block: 0; margin-block-end: 2.5rem; }
@media (max-width: 47.99rem) {
  .aufgaben { padding-block-start: 1.75rem; }
  .aufgaben .einleitung { font-size: 1.1875rem; margin-block-end: 1rem; }
  .aufgaben--seite { padding-block-start: 0; }
}
.aufgaben__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.haupt { position: relative; overflow: hidden; padding: 1.25rem 1.25rem 1.5rem; background: var(--hauch); border-radius: var(--radius); }
.haupt > :not(picture, .haupt__bild) { position: relative; }
.haupt .ikon--gross { color: var(--petrol); }
.haupt__bild { display: none; }
.haupt__titel { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.08; margin-block: 0.5rem; }
.haupt p { max-width: 36ch; }
.haupt__link { width: 100%; }
.neben { list-style: none; margin: 0; padding: 0; }
.neben__eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--linie);
}
.neben__eintrag:first-child { padding-block-start: 0.25rem; }
.neben__eintrag:last-child { border-block-end: 0; }
.neben__eintrag > .ikon { color: var(--petrol); margin-block-start: 0.15rem; }
.neben__eintrag > .vignette { margin-block-start: -0.25rem; }
/* Sehr schmal (große Systemschrift am Handy): kleinere Vignette, Telefonnummer darf umbrechen */
@container (max-width: 18em) {
  .neben__eintrag { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.75rem; }
  .neben__eintrag > .vignette { width: 2.75rem; height: 2.75rem; margin-block-start: 0; }
  .neben__eintrag .nowrap { white-space: normal; }
  .stellenhinweis { padding-inline: 0.875rem; }
}
.neben__eintrag h3 { font-size: 1.375rem; margin-block-end: 0.25rem; }
.neben__eintrag p { margin: 0; color: var(--grau); }
.neben__eintrag p + p { margin-block-start: 0.75rem; }
.neben__link::after { content: ""; position: absolute; inset: 0; }
.neben__eintrag:has(.knopf) .neben__link::after { content: none; }
.neben__eintrag:hover .neben__link { text-decoration-thickness: 2px; }
.nicht-online { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 64ch; margin: 2rem 0 0; color: var(--grau); }
.nicht-online .ikon { margin-block-start: 0.15rem; }

/* Notfallband: Handy kompakt (Nummern bündig in einer Spalte), PC drei Spalten mit Beispielen – das ersetzt auf
   der Startseite den Kasten „Wenn die Praxis geschlossen ist“ (der steht auf „Sprechzeiten & Anfahrt“). */
.notfallband {
  --fokus: var(--band-fokus);
  margin-block-start: 2.5rem;
  background: var(--band);
  color: var(--band-text);
  padding-block: 1.25rem;
  border-block: 1px solid var(--band-linie);
}
@media (prefers-color-scheme: dark) { .notfallband { box-shadow: inset 0 2px 0 var(--wein); } }
.notfallband__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 2rem; }
.notfallband h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); color: var(--band-text); margin-block-end: 0.25rem; }
.notfallband__kopf p { color: var(--band-grau); margin: 0; max-width: 34ch; font-size: 1.0625rem; }
.notfallband__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; }
.notfallband__liste li { grid-column: 1 / -1; display: grid; grid-template-columns: 9rem minmax(0, 1fr); grid-template-columns: subgrid; }
.notfallband__liste li + li { border-block-start: 1px solid var(--band-linie); }
.notfallband__liste a {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  min-height: 3rem;
  padding-block: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.notfallband__beispiel { display: none; }
.notfallband__mehr { margin: 0.25rem 0 0; font-size: 1.0625rem; }
.notfallband__mehr a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--band-text); font-weight: 600; }
.notfallband__nummer {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.375rem);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--band-linie);
}
.notfallband__liste a:hover .notfallband__nummer { text-decoration-color: currentColor; }
.notfallband__was { color: var(--band-grau); font-size: 1.0625rem; line-height: 1.35; min-width: 0; }

/* Der Stich: randlos, Ränder weich ausgeblendet */
.vedute { width: 100%; max-width: 100rem; margin-inline: auto; overflow: hidden; }
.vedute img {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(10rem, 5rem + 22vw, 20rem);
  object-fit: cover;
  object-position: 62% 100%;
  filter: var(--stich-filter);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .vedute img { animation: andruck 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  @keyframes andruck { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  [dir="rtl"] .vedute img { animation-name: andruck-rtl; }
  @keyframes andruck-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
}

@media (min-width: 62rem) {
  .buehne {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "text tafel" "mehr tafel";
    align-items: end;
    column-gap: 4rem;
    row-gap: 1.5rem;
  }
  .buehne__text { grid-area: text; }
  .buehne .tafel { grid-area: tafel; align-self: end; }
  .buehne__mehr { display: block; grid-area: mehr; align-self: start; }
  .sprachen-kurz { display: none; }
  .vedute { order: 1; margin-block-start: 2.5rem; }
  .aufgaben, .notfallband { order: 2; }
  .aufgaben { padding-block-start: 1rem; }
  .aufgaben__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; }
  .haupt { padding: 2.5rem 2.75rem 2.75rem; min-height: 100%; }
  .haupt p { max-width: 30ch; }
  .haupt__link { width: auto; }
  .notfallband { padding-block: 2.5rem; }
  .notfallband__innen {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    grid-template-areas: "kopf liste" "mehr liste";
    grid-template-rows: auto 1fr;
    gap: 0.75rem 3rem;
    align-items: start;
  }
  .notfallband__kopf { grid-area: kopf; }
  .notfallband__liste { grid-area: liste; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .notfallband__liste li { grid-column: auto; display: block; }
  .notfallband__liste li + li { border-block-start: 0; border-inline-start: 1px solid var(--band-linie); padding-inline-start: 2rem; }
  .notfallband__liste a { display: flex; flex-direction: column; gap: 0.25rem; }
  .notfallband__beispiel { display: block; margin: 0.375rem 0 0; color: var(--band-grau); font-size: 1rem; line-height: 1.45; }
  .notfallband__mehr { grid-area: mehr; margin: 0; }
}
/* Kamille erst, wenn neben dem Text genug Platz ist (bei 1024 px stieße sie an den Text) */
@media (min-width: 72rem) {
  .haupt__bild {
    display: block;
    position: absolute;
    bottom: -1.5rem;
    inset-inline-end: 0.5rem;
    width: 13rem;
    filter: var(--stich-filter);
    pointer-events: none;
  }
}
@media (max-width: 61.99rem) {
  /* Handy: kompakte Notfall-Zeile statt großem Band */
  .notfallband { padding-block: 1rem 0.75rem; }
  .notfallband h2 { font-size: 1.375rem; margin: 0; }
  .notfallband__kopf p { display: none; }
  .notfallband__liste a { padding-block: 0.25rem; align-items: center; }
  .notfallband__nummer { font-size: 1.5rem; }
  .notfallband__was { font-size: 1rem; }
  .vedute { margin-block-start: 0; }
}

/* Anfahrt */
.anfahrt__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 62rem) { .anfahrt__innen { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: center; } }
.anfahrt__text > p { max-width: 46ch; }
.anfahrt__adresse { margin-block-end: 1rem; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.35; color: var(--tinte); }
.barrierefrei { display: flex; align-items: center; gap: 0.875rem; max-width: 34rem !important; padding: 0.75rem 1rem; background: var(--hauch); border-radius: var(--radius); }
.barrierefrei .ikon { color: var(--petrol); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem 1rem; }
@media (max-width: 35.99rem) { .knopfreihe .knopf { flex: 1 1 100%; } }

/* ---------- 8. Sprechzeiten ---------- */
.zeiten__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 62rem) { .zeiten__innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } }
.zeiten__fuss { color: var(--grau); margin-block-start: 1rem; }

.woche { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.woche th, .woche td { overflow-wrap: break-word; }
.woche th, .woche td {
  padding: 0.875rem 0.75rem;
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--linie);
}
.woche thead th, .woche thead td {
  padding-block: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--grau);
  border-block-end: 2px solid var(--tinte);
}
.woche tbody th { font-weight: 400; }
.woche__tag { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--tinte); }
.woche__zu { color: var(--grau); }
.woche .zeit { white-space: nowrap; }
/* Am Handy darf der Zeitblock umbrechen: „godz.“, „orele“, „saat“, „الساعة“ vor die Ziffern (sonst war die Tabelle
   in pl, ro, tr und ar auf 375–430 px breiter als der Bildschirm, die breiteste – pl – braucht rund 22,4em). Die
   Ziffernspanne selbst hält span.nowrap zusammen. Breiter bleibt alles in einer Zeile wie bisher. */
@container (max-width: 24em) { .woche .zeit { white-space: normal; } }
/* Beschriftung der Spalte nur im gestapelten Layout (dort ist die Kopfzeile ausgeblendet) */
.woche__spalte { display: none; }
.woche tr.heute > * { background: var(--hauch); }
.heute-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wein);
  vertical-align: 0.1em;
}
.woche__heute-zu { display: block; font-size: 1rem; font-weight: 700; color: var(--wein); }

/* Balken: Raster 7–20 Uhr in Viertelstunden (52 Spalten), gefüllt = geöffnet */
.woche__achse, .woche__balken { width: 40%; }
.spur, .achse { display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); position: relative; }
.spur {
  height: 1.25rem;
  background:
    linear-gradient(var(--linie), var(--linie)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(to right, transparent 0 calc(100% / 13), var(--linie) calc(100% / 13) calc(100% / 13 + 1px), transparent calc(100% / 13 + 1px) calc(200% / 13));
}
.spur > * { grid-row: 1; }
.achse { height: 1.4rem; font-size: 1rem; font-weight: 400; }
.achse > span { grid-row: 1; white-space: nowrap; transform: translateX(-50%); }
[dir="rtl"] .achse > span { transform: translateX(50%); }
/* gefüllt = geöffnet, an jedem Tag in Petrol; „heute“ zeigen Zeilenfläche, Stern und der Jetzt-Strich */
.b { border-radius: 2px; background: var(--petrol); }
.jetzt { width: 3px; margin-block: -0.35rem; margin-inline-start: -1.5px; background: var(--wein); border-radius: 2px; }
@media (max-width: 47.99rem) {
  .woche__achse, .woche__balken { display: none; }
  .woche th, .woche td { padding: 0.75rem 0.5rem; }
  .woche th:first-child { padding-inline-start: 0.375rem; }
  .woche__tag { font-size: 1.125rem; }
  .heute-marke { display: flex; margin: 0.125rem 0 0; }
  /* „Samstag, Sonntag“ zweizeilig, sonst beansprucht die Tag-Spalte zu viel Breite (320 px, Textabstände) */
  .woche__wochenende .woche__tag { display: inline-block; max-width: 5em; }
  .woche td { overflow-wrap: anywhere; }
}

.zeiten__innen--seite { margin-block-end: 1rem; }
@media (min-width: 62rem) { .zeiten__innen--seite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.zeiten__innen--seite h2 { margin-block-start: 0; }

/* Kasten „Wenn die Praxis geschlossen ist“ */
.geschlossen {
  padding: 1.5rem;
  background: var(--bogen);
  border: 1px solid var(--linie);
  border-block-start: 4px solid var(--tinte);
  border-radius: var(--radius);
}
.geschlossen h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.geschlossen > p { color: var(--grau); }
.nummern { margin: 0 0 1rem; }
@media (min-width: 62rem) {
  .geschlossen--breit .nummern { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
}
.nummern > div { padding-block: 0.75rem; border-block-end: 1px solid var(--linie); }
.nummern dt { font-weight: 700; }
.nummern dd { margin: 0; }
.nummern dd + dd { color: var(--grau); font-size: 1.0625rem; line-height: 1.45; }
.nummern__nr {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.nummern--112 .nummern__nr { color: var(--wein); }

/* ---------- 9. Team ---------- */
.sprachfilter { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sprachfilter a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.75rem;
  min-width: 8rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--feldrand);
  border-radius: var(--radius);
  background: var(--bogen);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.sprachfilter__text { display: flex; flex-direction: column; min-width: 0; }
.sprachfilter a small { font-size: 1rem; font-weight: 400; color: var(--grau); }
.sprachfilter a:hover { border-color: var(--petrol); }
/* gewählt: leise Fläche, Haken, fett – kein dunkler Block, der wie der Hauptknopf aussieht */
.sprachfilter a[aria-current] { background: var(--hauch); border-color: var(--petrol); color: var(--tinte); font-weight: 700; }
.sprachfilter a[aria-current] .ikon { color: var(--petrol); stroke-width: 2.4; }
.filter-alle { margin-inline-start: 0.5rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 39.99rem) {
  .sprachfilter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sprachfilter li { display: flex; }
  .sprachfilter a { flex: 1; min-width: 0; }
  .sprachfilter li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.filter-ergebnis { font-weight: 600; color: var(--tinte); }

.aerzte { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; }
@media (min-width: 40rem) { .aerzte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .aerzte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arzt { padding-block: 1.25rem 1.5rem; border-block-start: 1px solid var(--linie); min-width: 0; }
.arzt__name { font-size: 1.375rem; margin-block-end: 0.25rem; }
.arzt__rolle { margin: 0 0 0.125rem; font-weight: 700; color: var(--tinte); }
.arzt__bezeichnung { margin: 0 0 0.5rem; color: var(--grau); line-height: 1.4; }
.arzt__sprachen { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.arzt__sprachen li { padding: 0.125rem 0.75rem; border-radius: var(--radius); background: var(--hauch); color: var(--text); font-size: 1rem; }
.aerzte--kompakt .arzt { padding-block: 0.875rem 1rem; }
.arzt__sprachzeile { margin: 0.25rem 0 0; color: var(--grau); }
.arzt__sprachen li.treffer { background: var(--petrol); color: var(--knopf-text); font-weight: 700; }
.arzt__sprache-de { color: var(--grau); }
.treffer .arzt__sprache-de { color: inherit; }

.fotos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block: 1.5rem 0; }
@media (min-width: 48rem) { .fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fotos .foto img { aspect-ratio: 3 / 2; object-fit: cover; }

.praxisteam { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) { .praxisteam { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } }
.merkmale { list-style: none; margin: 0; padding: 0; }
.merkmale li { display: flex; gap: 0.75rem; align-items: flex-start; padding-block: 0.625rem; border-block-end: 1px solid var(--linie); }
.merkmale li:last-child { border-block-end: 0; }
.merkmale .ikon { color: var(--petrol); margin-block-start: 0.1rem; }

/* ---------- 10. Leistungen ---------- */
.leistungen__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.leistungen__bild { display: none; }
@media (min-width: 62rem) {
  .leistungen__innen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; align-items: center; }
  .leistungen__bild { display: block; }
  .leistungen__bild img { display: block; width: 100%; max-width: 19rem; margin-inline: auto; filter: var(--stich-filter); }
}
.leistungen__gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 3rem; }
@media (min-width: 40rem) { .leistungen__gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gruppe { min-width: 0; }
.gruppe h3 { font-size: 1.25rem; }
.gruppe ul, .leistung-liste { list-style: none; margin: 0; padding: 0; }
.gruppe li, .leistung-liste > li { position: relative; padding-inline-start: 1.125rem; margin-block-end: 0.375rem; }
.gruppe li::before, .leistung-liste > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.78em;
  width: 0.5rem; height: 2px;
  background: var(--petrol);
}
.leistung-gruppe { padding-block: 1.75rem; border-block-start: 1px solid var(--linie); }
.leistung-gruppe:first-of-type { border-block-start: 0; padding-block-start: 0; }
.leistung-gruppe h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-block: 0 0.5rem !important; }
.leistung-gruppe > p { color: var(--grau); }
.leistung-liste > li { margin-block-end: 0.875rem; }
.leistung-liste strong { display: block; color: var(--text); }
.leistung-liste span { color: var(--grau); }
@media (min-width: 62rem) {
  .leistungen-seite { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3.5rem; align-items: start; }
  .leistungen-seite__bild { position: sticky; top: 1.5rem; }
  .leistungen-seite__bild img { display: block; width: 100%; max-width: 18rem; margin-inline: auto; filter: var(--stich-filter); }
}
.leistungen-seite__bild { display: none; }
@media (min-width: 62rem) { .leistungen-seite__bild { display: block; } }

/* ---------- 11. Online-Service ----------
   Die Dienste stehen in derselben Rangfolge wie auf der Startseite (.aufgaben__raster, _aufgaben.html). */
.notfall-hinweis { max-width: 68ch; margin-block: 0 2.5rem; padding-block: 1rem; border-block: 1px solid var(--linie); }
.notfall-hinweis__titel { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; color: var(--wein); }
.notfall-hinweis > p:last-child { margin: 0; }
.notfall-hinweis__nr { font-family: var(--serif); font-weight: 700; font-size: 1.15em; line-height: 1; white-space: nowrap; }
.notfall-hinweis__nr--112 { color: var(--wein); }

.schritte { list-style: none; counter-reset: schritt; margin: 0 0 2rem; padding: 0; max-width: 60ch; }
.schritte li { counter-increment: schritt; position: relative; padding-block: 0.75rem; padding-inline-start: 3.25rem; border-block-end: 1px solid var(--linie); }
.schritte li:last-child { border-block-end: 0; }
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  inset-inline-start: 0;
  top: 0.45rem;
  width: 2.25rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--petrol);
  text-align: center;
}
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 62rem) { .zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; align-items: start; } }
.nicht-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.nicht-liste li { display: flex; gap: 0.625rem; align-items: flex-start; padding-block: 0.5rem; border-block-end: 1px solid var(--linie); }
.nicht-liste .ikon { color: var(--wein); margin-block-start: 0.15rem; }
/* Textkinder in Flex-Zeilen dürfen schrumpfen und lange Wörter umbrechen (320 px, große Schrift) */
.nicht-liste li > span, .barrierefrei > span, .merkmale li > span, .nicht-online > span, .fuss__liste a > span,
.kasten__titel > span, .notfall-hinweis__titel > strong { min-width: 0; overflow-wrap: anywhere; }
.termin-kasten .knopf { margin-block-start: 0.5rem; }

/* ---------- 12. Notfall-Seite ----------
   Wie das Notfallband: große Serifenziffern, Haarlinien, 112 in Spätburgunder – keine Kästen. */
.notrufe { margin-block: 0 2rem; border-block-end: 1px solid var(--linie); }
.notruf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 2.5rem;
  padding-block: 1.5rem 1.25rem;
  border-block-start: 1px solid var(--linie);
}
.notruf h2 { margin: 0 0 0.5rem !important; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.notruf p { margin: 0 0 0.5rem; max-width: 60ch; }
.notruf__text > :last-child { margin-block-end: 0; }
.notruf__nummer {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}
.notruf--112 .notruf__nummer { color: var(--wein); }
@media (min-width: 62rem) {
  .notruf { grid-template-columns: 24rem minmax(0, 1fr); align-items: baseline; padding-block: 2rem 1.75rem; }
}
.notfall-praxis { max-width: 68ch; }

/* ---------- 13. Karriere ---------- */
.stelle { margin-block: 0 2rem; padding: 1.5rem; background: var(--bogen); border: 1px solid var(--linie); border-block-start: 4px solid var(--tinte); border-radius: var(--radius); }
.stelle h2 { margin-block-start: 0 !important; }
.stelle__eckdaten { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.stelle__eckdaten li { padding: 0.125rem 0.75rem; border-radius: var(--radius); background: var(--hauch); font-size: 1rem; font-weight: 600; }
.stelle__teile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
@media (min-width: 62rem) { .stelle__teile { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stelle h3 { margin-block-start: 1rem; }

/* ---------- 14. Rechtstexte (Impressum, Datenschutz, Barrierefreiheit) ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h1 { margin-block-end: 1.5rem; }
.rechtstext h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-block: 2.5rem 0.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--linie); scroll-margin-top: 1rem; }
.rechtstext .kasten h2, .rechtstext nav h2 { border: 0; padding: 0; margin-block-start: 0; }
/* Gliederung deutlich: h3 wie das allgemeine h3 und mit mehr Abstand davor; h4 fett in Textgröße (1em) */
.rechtstext h3 { font-size: 1.375rem; margin-block: 2.25rem 0.5rem; scroll-margin-top: 1rem; }
.rechtstext .kasten h3 { margin-block-start: 0; }
.rechtstext h4 { font-size: 1em; font-weight: 700; line-height: 1.35; color: var(--tinte); margin-block: 1.25rem 0.375rem; overflow-wrap: anywhere; }
.rechtstext p, .rechtstext li { max-width: 68ch; }
.rechtstext ul, .rechtstext ol { padding-inline-start: 1.5rem; }
.rechtstext li { margin-block-end: 0.375rem; }
.rechtstext li::marker { color: var(--petrol); }
.rechtstext address { padding: 1rem 1.25rem; background: var(--bogen); border-inline-start: 4px solid var(--linie); border-radius: var(--radius); line-height: 1.6; }
.rechtstext nav { margin-block: 1.5rem 2rem; padding: 1.25rem 1.375rem; background: var(--bogen); border: 1px solid var(--linie); border-radius: var(--radius); }
.rechtstext nav h2 { font-size: 1.25rem; font-family: var(--sans); font-weight: 700; }
.rechtstext nav ol { margin: 0; }
.rechtstext nav a { display: inline-block; max-width: 100%; padding-block: 0.625rem; overflow-wrap: anywhere; }
.rechtstext table { width: 100%; border-collapse: collapse; margin-block: 1rem 1.5rem; font-size: 1.0625rem; }
.rechtstext caption { text-align: start; font-weight: 700; padding-block-end: 0.5rem; }
.rechtstext th, .rechtstext td { padding: 0.625rem 0.75rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--linie); }
.rechtstext thead th { border-block-end: 2px solid var(--tinte); color: var(--grau); font-size: 1rem; }
.rechtstext code { font-size: 0.95em; overflow-wrap: anywhere; }
.rechtstext dl dt { font-weight: 700; margin-block-start: 0.75rem; }
.rechtstext dl dd { margin: 0; }
.tabelle-rollen { overflow-x: auto; }

/* ---------- 15. Sitemap, Danke, Fehler ---------- */
.sitemap-liste, .sitemap-liste ul { list-style: none; margin: 0; padding: 0; }
.sitemap-liste ul { padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--linie); margin-block: 0.25rem 0.5rem; }
.sitemap-liste a { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 600; }
.sitemap-liste ul a { font-weight: 400; }
.bestaetigung { margin: 8px 8px 2rem; padding: 1.75rem; background: var(--bogen); border: 1px solid var(--tinte); border-radius: 2px; box-shadow: 0 0 0 5px var(--bogen), 0 0 0 7px var(--tinte); max-width: 46rem; }
.bestaetigung h1 { display: flex; align-items: center; gap: 0.75rem; }
.bestaetigung h1 .ikon { width: 2.5rem; height: 2.5rem; color: var(--petrol); stroke-width: 2.4; }
.fehlerseite { max-width: 46rem; }

/* ---------- 16. Formulare (Grundstil; formular.html baut darauf auf) ---------- */
form fieldset { min-width: 0; margin: 0 0 2rem; padding: 0; border: 0; }
form legend { padding: 0; margin-block-end: 1rem; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); color: var(--tinte); }
form fieldset fieldset legend { font-family: var(--sans); font-size: 1.1875rem; font-weight: 600; color: var(--text); margin-block-end: 0.25rem; }
.feld, form > div, form fieldset > div { margin-block: 0 1.375rem; }
label { display: block; margin-block-end: 0.25rem; font-weight: 600; color: var(--text); }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="file"], select, textarea {
  display: block;
  width: 100%;
  max-width: 36rem;
  min-height: 3.25rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--feldrand);
  border-radius: var(--radius);
  background: var(--bogen);
  color: var(--text);
  font: inherit;
  line-height: 1.3;
}
input[type="number"] { max-width: 10rem; }
textarea { min-height: 7.5rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--petrol); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--petrol); }
input[type="radio"], input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; margin-inline-end: 0.75rem; flex: none; accent-color: var(--petrol); }
form fieldset fieldset label { display: flex; align-items: flex-start; min-height: 3rem; padding-block: 0.625rem; font-weight: 400; margin: 0; }
.feld-haken { display: flex; align-items: flex-start; }
.feld-haken label { font-weight: 400; }
.helptext, form [id$="_helptext"] { display: block; color: var(--grau); font-size: 1.0625rem; line-height: 1.45; }
.errorlist { list-style: none; margin: 0.25rem 0; padding: 0; color: var(--wein); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--wein) !important; border-width: 3px !important; }
.fehlerliste { margin: 0 0 2rem; padding: 1.25rem 1.5rem; border: 3px solid var(--wein); border-radius: var(--radius); background: var(--bogen); }
.fehlerliste h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--wein); margin-block-end: 0.5rem; }
.fehlerliste ul { margin: 0; padding-inline-start: 1.25rem; }
.fehlerliste a { color: var(--wein); font-weight: 600; }
.feld-hinweis { display: flex; gap: 0.5rem; margin: 0.25rem 0 0.5rem; color: var(--wein); font-weight: 600; line-height: 1.4; }
.feld-hinweis[hidden] { display: none; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.js-meldung:empty { display: none; }
button.knopf { font-family: var(--sans); }

/* ---------- 17. Große Systemschrift (150–200 %) ----------
   Container-Abfragen in em beziehen sich auf die Schriftgröße: Ist der Inhaltsbereich schmaler als
   ca. 15 Zeichen-Breiten (große Schrift auf dem Handy), werden Überschriften kleiner, die Fußzeile
   einspaltig und die Sprechzeiten-Tabelle zeilenweise gestapelt – nichts läuft über den Rand. */
.innen { container-type: inline-size; }
@container (max-width: 15em) {
  h1 { font-size: 1.75rem; }
  h2, .haupt__titel { font-size: 1.5rem; }
  h3, .neben__eintrag h3, .arzt__name { font-size: 1.25rem; }
  /* Silbentrennung statt Bruch mitten im Wort; lange Wörter tragen zusätzlich ­ in den Vorlagen */
  h1, h2, h3, .tafel__status, .haupt__titel { hyphens: auto; -webkit-hyphens: auto; }
  .tafel__status { font-size: 1.125rem; }
  /* Nummer bleibt in einer Zeile: kleiner, ohne Symbol */
  .tafel__anruf { font-size: 1rem; letter-spacing: 0; padding-inline: 0.5rem; }
  .tafel__anruf .ikon { display: none; }
  .fuss__praxis { grid-template-columns: minmax(0, 1fr); }
  .notfallband__nummer, .nummern__nr, .notruf__nummer { font-size: 1.5rem; }
  .notfallband__liste, .notfallband__liste li, .notfallband__liste a { grid-template-columns: minmax(0, 1fr); }
  .geschlossen, .kasten, .haupt, .stelle { padding-inline: 1rem; }
  .tafel { padding-inline: 0.875rem; }
  /* Danke-Seite, Online-Service, Formular-Vorab: Die Ziffer steht über dem Schritt statt daneben – sonst blieben bei
     200 % am Handy rund 90 px für den Text und die Wörter zerbrächen alle paar Buchstaben. */
  .bestaetigung { padding: 1rem; }
  .schritte li { padding-inline-start: 0; padding-block-start: 2.75rem; }
  .schritte li::before { text-align: start; }
}
/* Sprechzeiten-Tabelle zeilenweise, sobald sie nicht mehr sicher hineinpasst (320 px, große Schrift) */
@container (max-width: 17.5em) {
  .woche thead { display: none; }
  .woche__spalte { display: block; font-size: 1rem; color: var(--grau); }
  .woche tbody tr { display: flex; flex-wrap: wrap; column-gap: 1rem; padding-block: 0.5rem; border-block-end: 1px solid var(--linie); }
  .woche tbody th { flex: 1 1 100%; }
  .woche tbody th, .woche tbody td { padding: 0.125rem 0.375rem; border: 0; }
  .woche .zeit { white-space: normal; }
  .woche tr.heute { background: var(--hauch); }
  .woche tr.heute > * { background: none; }
}

/* ---------- 18. Barrierefreiheit und Druck ---------- */
@media (forced-colors: active) {
  .tafel, .bestaetigung { border: 3px double CanvasText; box-shadow: none; }
  .tafel__punkt { border-color: CanvasText; }
  .tafel--offen .tafel__punkt { background: CanvasText; }
  .b, .jetzt { background: CanvasText; forced-color-adjust: none; }
  .stern { fill: CanvasText; }
  .knopf, .ausklapp__knopf, .daumenleiste__knopf, .sprachfilter a { border: 2px solid ButtonText; }
  .marke__bild, .foto img, .vignette { filter: none; }
  .vedute img, .haupt__bild, .leistungen__bild img { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  :root {
    --papier: #fff; --bogen: #fff; --tinte: #000; --petrol: #000; --hauch: #f0f0f0; --text: #000; --grau: #333;
    --linie: #999; --band: #fff; --band-text: #000; --band-grau: #333; --wein: #000;
    --stich-filter: none; --marke-filter: none;
  }
  body { font-size: 11pt; background: #fff; }
  .sprunglink, .ausklapp, .hauptnav, .daumenleiste, .brotkrumen, .vedute, .haupt__bild, .leistungen__bild, .vignette,
  .knopfreihe, .sprachen-zeile, .notfallzeile__mehr, .fuss__logo, .fuss nav { display: none !important; }
  .notfallzeile, .notfallband, .fuss { border: 1px solid #000; }
  .notfallzeile a, .notfallband a { min-height: 0; }
  .tafel { box-shadow: none; border: 2px solid #000; }
  .knopf { border: 1px solid #000; background: none; color: #000; min-height: 0; padding: 0.25rem 0.5rem; }
  .woche__achse, .woche__balken { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; }
  .abschnitt, .arzt, .geschlossen, .kasten, .notruf { break-inside: avoid; }
  .notfallband__beispiel { display: block; }
  .fuss { padding: 1rem 0; margin-top: 1rem; }
}

/* Rasterlinien der Sprechzeiten-Balken (website_tags.balken/jetzt_linie): 1 = 7:00, 53 = 20:00 */
.ab-1 { grid-column-start: 1; } .bis-1 { grid-column-end: 1; }
.ab-2 { grid-column-start: 2; } .bis-2 { grid-column-end: 2; }
.ab-3 { grid-column-start: 3; } .bis-3 { grid-column-end: 3; }
.ab-4 { grid-column-start: 4; } .bis-4 { grid-column-end: 4; }
.ab-5 { grid-column-start: 5; } .bis-5 { grid-column-end: 5; }
.ab-6 { grid-column-start: 6; } .bis-6 { grid-column-end: 6; }
.ab-7 { grid-column-start: 7; } .bis-7 { grid-column-end: 7; }
.ab-8 { grid-column-start: 8; } .bis-8 { grid-column-end: 8; }
.ab-9 { grid-column-start: 9; } .bis-9 { grid-column-end: 9; }
.ab-10 { grid-column-start: 10; } .bis-10 { grid-column-end: 10; }
.ab-11 { grid-column-start: 11; } .bis-11 { grid-column-end: 11; }
.ab-12 { grid-column-start: 12; } .bis-12 { grid-column-end: 12; }
.ab-13 { grid-column-start: 13; } .bis-13 { grid-column-end: 13; }
.ab-14 { grid-column-start: 14; } .bis-14 { grid-column-end: 14; }
.ab-15 { grid-column-start: 15; } .bis-15 { grid-column-end: 15; }
.ab-16 { grid-column-start: 16; } .bis-16 { grid-column-end: 16; }
.ab-17 { grid-column-start: 17; } .bis-17 { grid-column-end: 17; }
.ab-18 { grid-column-start: 18; } .bis-18 { grid-column-end: 18; }
.ab-19 { grid-column-start: 19; } .bis-19 { grid-column-end: 19; }
.ab-20 { grid-column-start: 20; } .bis-20 { grid-column-end: 20; }
.ab-21 { grid-column-start: 21; } .bis-21 { grid-column-end: 21; }
.ab-22 { grid-column-start: 22; } .bis-22 { grid-column-end: 22; }
.ab-23 { grid-column-start: 23; } .bis-23 { grid-column-end: 23; }
.ab-24 { grid-column-start: 24; } .bis-24 { grid-column-end: 24; }
.ab-25 { grid-column-start: 25; } .bis-25 { grid-column-end: 25; }
.ab-26 { grid-column-start: 26; } .bis-26 { grid-column-end: 26; }
.ab-27 { grid-column-start: 27; } .bis-27 { grid-column-end: 27; }
.ab-28 { grid-column-start: 28; } .bis-28 { grid-column-end: 28; }
.ab-29 { grid-column-start: 29; } .bis-29 { grid-column-end: 29; }
.ab-30 { grid-column-start: 30; } .bis-30 { grid-column-end: 30; }
.ab-31 { grid-column-start: 31; } .bis-31 { grid-column-end: 31; }
.ab-32 { grid-column-start: 32; } .bis-32 { grid-column-end: 32; }
.ab-33 { grid-column-start: 33; } .bis-33 { grid-column-end: 33; }
.ab-34 { grid-column-start: 34; } .bis-34 { grid-column-end: 34; }
.ab-35 { grid-column-start: 35; } .bis-35 { grid-column-end: 35; }
.ab-36 { grid-column-start: 36; } .bis-36 { grid-column-end: 36; }
.ab-37 { grid-column-start: 37; } .bis-37 { grid-column-end: 37; }
.ab-38 { grid-column-start: 38; } .bis-38 { grid-column-end: 38; }
.ab-39 { grid-column-start: 39; } .bis-39 { grid-column-end: 39; }
.ab-40 { grid-column-start: 40; } .bis-40 { grid-column-end: 40; }
.ab-41 { grid-column-start: 41; } .bis-41 { grid-column-end: 41; }
.ab-42 { grid-column-start: 42; } .bis-42 { grid-column-end: 42; }
.ab-43 { grid-column-start: 43; } .bis-43 { grid-column-end: 43; }
.ab-44 { grid-column-start: 44; } .bis-44 { grid-column-end: 44; }
.ab-45 { grid-column-start: 45; } .bis-45 { grid-column-end: 45; }
.ab-46 { grid-column-start: 46; } .bis-46 { grid-column-end: 46; }
.ab-47 { grid-column-start: 47; } .bis-47 { grid-column-end: 47; }
.ab-48 { grid-column-start: 48; } .bis-48 { grid-column-end: 48; }
.ab-49 { grid-column-start: 49; } .bis-49 { grid-column-end: 49; }
.ab-50 { grid-column-start: 50; } .bis-50 { grid-column-end: 50; }
.ab-51 { grid-column-start: 51; } .bis-51 { grid-column-end: 51; }
.ab-52 { grid-column-start: 52; } .bis-52 { grid-column-end: 52; }
.ab-53 { grid-column-start: 53; } .bis-53 { grid-column-end: 53; }