/* ═══════════ SCHRIFTEN, SELBST GEHOSTET ═══════════

   Bewusst nicht ueber fonts.googleapis.com: Der Abruf uebertraegt die IP des
   Besuchers an Google, und bei einer Arztpraxis ist das der Datenschutzfall, den
   man sich nicht einhandelt. Das Build-Gate hat es gemeldet, weil die Erklaerung
   den Dienst nicht nannte. Selbst gehostet entfaellt die Frage, und der Aufbau
   ist schneller: kein zweiter Verbindungsaufbau, kein Umweg ueber zwei Domains.

   Nur die Subsets latin und latin-ext, mehr braucht Deutsch nicht.
   Erneuern: das css2-Stylesheet mit Browser-User-Agent abrufen und die woff2
   danebenlegen, Verfahren siehe HANDOFF-STAND.md. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/figtree-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/figtree-400-latin.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/figtree-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/figtree-500-latin.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/figtree-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/figtree-600-latin.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/figtree-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/figtree-700-latin.woff2') format('woff2');
  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: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-600-latin.woff2') format('woff2');
  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: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-700-latin.woff2') format('woff2');
  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: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-800-latin.woff2') format('woff2');
  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;
}

/* ═══════════ MODERN CSS RESET ═══════════ */

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

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal, 1.6);
}

/* Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt keine
   Animationen. Betrifft Vestibularstörungen und ist ein Lighthouse-/BFSG-Punkt.
   Nicht auf 0 setzen, sondern auf 0.01ms: sonst feuern onTransitionEnd-Handler
   nicht mehr und JS, das darauf wartet, bleibt hängen. */
@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;
  }
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

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

input, button, textarea, select {
  font: inherit;
}

textarea {
  white-space: revert;
}

/* ═══════════ CUSTOM PROPERTIES ═══════════ */

/* Zwei Ebenen, bewusst getrennt:
   1. BASIS  — Rohwerte und Skalen. Was es überhaupt gibt.
   2. SEMANTIK — wofür ein Wert steht (--color-on-primary, --color-surface).
   Komponenten greifen auf die semantische Ebene zu, nie auf Literale. Ein
   Projekt überschreibt in seiner eigenen CSS nur die wenigen Basiswerte
   (Primärfarbe, Fonts, Container-Breite), der Rest zieht automatisch mit. */

:root {
  /* ─── BASIS: Farbe ─── */
  /* Aus dem Logo abgeleitet: gruenes Herz als offener Bogen, dunkelgruene Pfote.
     --color-primary ist eine FLAECHENFARBE und nie Textfarbe: #30AB51 auf Weiss
     erreicht nur 2,6:1. Fuer Text und Knoepfe stehen -text und -hover bereit. */
  /* ⚠️ --color-primary traegt in dieser Engine Text UND Flaeche: Links, Knopf-
     hintergrund und Fokus-Ring greifen alle darauf zu. Deshalb steht hier das
     dunklere #26803F (4,95:1 auf Weiss) und nicht das helle Logo-Gruen.
     Das helle #30AB51 waere als Textfarbe unlesbar (2,93:1) und lebt deshalb
     unter --color-primary-flaeche, ausschliesslich fuer Flaechen und Icons. */
  --color-primary: #26803F;
  --color-primary-hover: #1A5C2C;
  --color-primary-flaeche: #30AB51;   /* das Gruen aus dem Logo, NIE fuer Text */
  --color-accent: #1F6B35;            /* kraeftige Knoepfe mit weisser Schrift, 6,54:1 */
  --color-text: #14291B;              /* sehr dunkles Gruen statt Schwarz */
  --color-text-muted: #55705E;
  --color-bg: #FFFDFA;                /* warmes Weiss, kein reines #fff */
  --color-bg-alt: #F4FAF6;            /* Nebenflaechen mit minimalem Gruenstich */
  --color-bg-tint: #F1F8F3;           /* getoente Sektion */
  --color-bg-warm: #FDF2EC;           /* Notfall, das einzige farbige Signal im Raster */
  /* Zweiter Pastellton neben dem Gruen. Die Seite lief auf drei Gruenabstufungen
     hinaus und wirkte dadurch eintoenig. Sand traegt dieselbe Waerme wie das
     Rostrot des Notfalls, ohne mit dem Markengruen zu konkurrieren. */
  --color-bg-sand: #FBF5EC;

  /* Flaechen mit Farbe: Vertrauensband unter dem Hero und das Terminfeld am
     Seitenschluss. Beide tragen das DUNKLE GRUEN AUS DEM LOGO (Ansage Alex,
     04.09.2026: "nimm entweder das dunkle oder das helle gruen aus dem logo").
     Es ist derselbe Wert wie --color-accent, und das ist kein Versehen, sondern
     der Punkt: Vorher lag die Flaeche mit #1B4A2C knapp NEBEN der Knopffarbe, und
     zwei fast gleiche Gruens lesen sich als Fehler. Identisch lesen sie sich als
     ein System. Ein tiefes Petrol (#12403A) loeste den Konflikt auch, brachte aber
     einen Farbton, der in keiner Vorgabe steht.
     ⚠️ Auf dieser Flaeche traegt Text mindestens #D6E8DC (5,1:1). Das hellere
     #8FDDA6 aus der Zeit der dunkleren Flaeche reicht hier nicht mehr.
     Das Rostrot bleibt dem Notfall vorbehalten: Es ist das einzige Signal dieser
     Art auf der Seite, ein zweiter Ort dafuer nimmt ihm die Bedeutung. */
  /* ⚠️ Das HELLE Logogruen (#30AB51) war einen Durchgang lang drin und ist verworfen:
     Als Flaeche ueber die volle Breite ist es zu laut, und es zwingt die Schrift ins
     Dunkle, weil Weiss darauf nur 2,97:1 erreicht. Wer es zurueckholen will, muss die
     drei Textfarben hier mitdrehen, sonst steht heller Text auf heller Flaeche. */
  /* Direkt an die Knopffarbe gehaengt statt den Wert zu wiederholen (Ansage Alex:
     "mach es button farbe"). --color-accent IST das dunkle Logogruen, beide Werte
     waren ohnehin identisch. So koennen sie auch spaeter nicht auseinanderlaufen. */
  --color-dunkel: var(--color-accent);
  --color-dunkel-text: #D6E8DC;   /* Fliesstext darauf, 5,1:1 */
  --color-dunkel-akzent: #B7E9C7; /* Eyebrow und Icons darauf, 4,8:1 */
  /* Der Footer bleibt das dunkelste Gruen und damit der Anker am Seitenende.
     In der Logofarbe waere er eine zweite grosse Flaeche und wuerde mit dem
     Terminfeld direkt darueber zu einem Block verschmelzen. */
  --color-footer: #14291B;
  --color-warm-text: #6B2A11;
  --color-border: #DFE9E1;
  --color-success: #15803d;   /* 5.02:1 auf Weiss, #16a34a schaffte nur 3.30:1 */
  --color-warning: #b45309;   /* 5.02:1 auf Weiss, #d97706 schaffte nur 3.19:1 */
  --color-error: #dc2626;

  /* ─── SEMANTIK: Farbe ─── */
  /* Die abgeleiteten Werte nutzen color-mix, damit ein Projekt nur
     --color-primary setzen muss und Tönung/Kontrastfarbe mitziehen. */
  --color-on-primary: #fff;             /* Text auf Primärflächen (Buttons, Skip-Link) */
  --color-surface: var(--color-bg);     /* erhöhte Fläche (Karte) — auch auf getönten Sektionen weiß */
  --color-surface-alt: var(--color-bg-alt);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 8%, #fff);   /* getönter Primär-Hintergrund */
  --color-primary-border: color-mix(in srgb, var(--color-primary) 25%, #fff);
  --color-focus: var(--color-primary);  /* Fokus-Ring */
  --color-overlay: rgb(0 0 0 / 0.5);    /* Abdunkelung hinter Modals */

  /* ─── BASIS: Typografie ─── */
  /* Figtree fuer alles Gelesene, Nunito Sans fuer Ueberschriften. Vierter Anlauf:
     Outfit war zu kantig, Nunito zu rund, Plus Jakarta immer noch zu kantig.
     Nunito Sans ist Nunito ohne das Ballonhafte. Begruendung in design-richtung.md. */
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Zwei Reihen, weil sie zwei verschiedene Jobs haben:
     --text-*   feste Stufen für UI-Text (Labels, Meta, Buttons, Logo)
     --text-h*  fluide Rollen für Überschriften, skalieren mit dem Viewport
     Die clamp-Maxima entsprechen exakt den bisherigen Desktop-Werten: am
     Desktop ändert sich nichts, mobil skalieren Headlines herunter statt
     umzubrechen. */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;   /* 17 px Fliesstext, Zielgruppe 45+ */
  --text-lg: 1.15625rem;    /* 18,5 px Lead */
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Maxima exakt aus der Design-Canvas (Artboard Main, 1200 px): H1 58, die
     grosse H2 42, die uebrigen H2 38, Karten-H3 22. Nicht frei aufrunden. */
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);        /* 19 → 22 px */
  --text-h2: clamp(1.375rem, 1.15rem + 1.1vw, 2.125rem);        /* 22 → 34 px */
  --text-h2-gross: clamp(1.5rem, 1.2rem + 1.4vw, 2.3125rem);    /* 24 → 37 px */
  --text-h1: clamp(1.875rem, 1.35rem + 2.4vw, 3.1875rem);       /* 30 → 51 px */
  --text-display: var(--text-h1);

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── BASIS: Abstand ─── */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Vertikaler Rhythmus der Sektionen. Der Padding-Kollaps zwischen
     aneinandergrenzenden Sektionen rechnet mit diesem Wert (siehe CLAUDE.md). */
  --section-pad: clamp(3rem, 6vw, 5rem);

  --container-max: 72rem;
  --container-padding: 1.5rem;

  /* ─── BASIS: Form ─── */
  /* Runde Ecken sind hier eine Entscheidung, keine Voreinstellung: Radien um
     3 px lassen die Seite hart wirken und arbeiten gegen das runde Logo.
     Karten und Bilder 16 bis 20 px, Knoepfe als Pille. */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 0.75rem;   /* 12 px statt 16 und 20: zu viele gerundete Flaechen wirkten "bubblig" (Alex, 05.09.2026) */
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* ─── SEMANTIK: Stapelreihenfolge ─── */
  /* Immer diese Tokens nutzen, nie freie Zahlen — sonst entsteht der
     übliche Wettlauf aus z-index: 9999. */
  --z-base: 1;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-skip-link: 1000;   /* muss über allem liegen, auch über der Nav */
}

/* ═══════════ BODY ═══════════ */

/* ⚠️ Basis bleibt bei 16 px. Die Design-Canvas ist auf 16 px gerechnet, ihre
   Groessen stehen unten als absolute Werte. Eine groessere Basis hat jede
   rem-Angabe still mitskaliert, die Seite wirkte dadurch plakativ.
   Der Zielgruppe (viele ueber 45) wird ueber den Fliesstext Rechnung getragen:
   17 px statt 16, gesetzt an body und den Textrollen, nicht an der Wurzel. */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Footer bleibt unten, auch wenn die Seite kurz ist. Ohne das rutscht er auf
     inhaltsarmen Seiten (Danke, Fehler, 404, frische Blog-Uebersicht) mitten ins
     Bild und darunter klafft leere Flaeche. Faellt erst nach dem Launch auf, weil
     die Inhaltsseiten waehrend der Entwicklung immer lang genug sind. */
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

/* ═══════════ CONTAINER ═══════════ */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ═══════════ PROSE ═══════════ */

/* Text-/Rechtsseiten (page.njk: Impressum, Datenschutz, …): konsistenter vertikaler
   Abstand zu Nav und Footer. .page hatte zuvor kein Padding → Inhalt klebte am Footer. */
.page { padding-block: var(--section-pad); }
.page > .prose > :first-child { margin-block-start: 0; }

.prose h1 { font-size: var(--text-h1); line-height: var(--leading-tight); margin-block: var(--space-lg) var(--space-md); }
.prose h2 { font-size: var(--text-h2); line-height: var(--leading-snug); margin-block: var(--space-lg) var(--space-sm); }
.prose h3 { font-size: var(--text-h3); line-height: var(--leading-snug); margin-block: var(--space-lg) var(--space-sm); }
.prose p { margin-block-end: var(--space-md); }
.prose ul, .prose ol { margin-block-end: var(--space-md); padding-inline-start: var(--space-lg); }
.prose li { margin-block-end: var(--space-xs); }
.prose blockquote {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-md);
  color: var(--color-text-muted);
  margin-block-end: var(--space-md);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  padding: 0.125em 0.25em;
  border-radius: var(--radius);
}
.prose pre {
  background: var(--color-bg-alt);
  padding: var(--space-md);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-block-end: var(--space-md);
}
.prose pre code {
  background: none;
  padding: 0;
}

/* ═══════════ HEADINGS ═══════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Tracking bleibt auf null. Negatives Tracking presst die Buchstaben zusammen
     und laesst jede Schrift blockiger wirken, als sie ist (gemessen 04.09.2026). */
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-wrap: balance;
  /* Deutsche Komposita mit Bindestrich trennen statt hart umbrechen (braucht
     lang="de" am html-Element). Ohne das bricht z.B. "Suchmaschinenoptimierung"
     in schmalen Containern mitten im Wort ohne Bindestrich. */
  hyphens: auto;
  /* Aber erst ab echten Bandwurmwoertern. Ohne diese Grenze trennt der Browser
     auch normale Woerter, sobald text-wrap: balance die Zeilen ausgleichen will:
     Bei tim-haaf stand auf dem Handy "Erfahrungen aus dem gemeinsa-men Training",
     obwohl das Wort ungetrennt in die Zeile gepasst haette. 14 Zeichen laesst
     "gemeinsamen" (11) in Ruhe und trennt "Suchmaschinenoptimierung" (24)
     weiterhin. Zweite und dritte Zahl: Mindestzeichen vor und nach dem
     Bindestrich, damit keine Zwei-Buchstaben-Schnipsel entstehen. Kennt ein
     Browser die Eigenschaft nicht, bleibt es beim bisherigen Verhalten. */
  hyphenate-limit-chars: 14 5 5;
}

/* ═══════════ LINKS ═══════════ */

a {
  color: var(--color-primary);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ═══════════ FOKUS ═══════════ */

/* Sichtbarer, konsistenter Fokus-Ring — nur bei Tastaturbedienung, damit
   Mausklicks keinen Ring hinterlassen. Der Browser-Default ist je nach
   Engine und Hintergrundfarbe kaum sichtbar. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ═══════════ SKIP LINK ═══════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  z-index: var(--z-skip-link);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ═══════════ BUTTON ═══════════ */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.btn:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

/* ─────────────────────────────────────────────────────────
   Responsive Images — Base Styles
   Add these rules to your main stylesheet.
   Required for proper responsive behavior and CLS prevention.
   ───────────────────────────────────────────────────────── */

/* Core responsive image behavior + CLS prevention */
img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* Ensure <picture> wrapper doesn't break layout */
picture {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Hero Image — Optional utility class
   Apply to the hero <img> or wrapping <picture> element.
   Use with eleventy:pictureattr:class="hero-image" on the <img>.
   ───────────────────────────────────────────────────────── */
.hero-image {
  inline-size: 100%;
}

.hero-image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────
   Content Images — Optional styling
   Images within the main content column.
   ───────────────────────────────────────────────────────── */
.content img,
.prose img {
  border-radius: var(--radius-sm);
  margin-block: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   Thumbnail / Card Images — Optional
   For card grid layouts with fixed aspect ratio.
   ───────────────────────────────────────────────────────── */
.card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ═══════════ SITE HEADER + NAV ═══════════ */

.site-header {
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.site-header__logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-decoration: none;
}

.site-header__logo:hover {
  color: var(--color-primary);
}

/* Mobile: details/summary toggle */
.site-nav__toggle {
  display: block;
}

.site-nav__toggle summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-semibold);
}

.site-nav__toggle summary::-webkit-details-marker {
  display: none;
}

.site-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-nav__list a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-bg-alt);
}

/* Desktop: 768px+ */
@media (min-width: 768px) {
  .site-nav__toggle {
    display: contents;
  }

  .site-nav__toggle[open] > summary {
    display: none;
  }

  .site-nav__toggle > summary {
    display: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--space-sm);
  }
}

/* ═══════════ SITE FOOTER ═══════════ */

.site-footer {
  margin-block-start: var(--space-xl);
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.site-footer__links a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--color-primary);
}

/* ═══════════ LEAD FORM ═══════════ */

.lead-form {
  max-width: 32rem;
  margin: var(--space-lg) auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.lead-form__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--text-2xl);
}

.lead-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.lead-form__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.lead-form__field input,
.lead-form__field textarea,
.lead-form__field select {
  padding: var(--space-sm) 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
}

.lead-form__field input:focus,
.lead-form__field textarea:focus,
.lead-form__field select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.lead-form__consent {
  font-size: var(--text-xs);
}

.lead-form__consent a {
  color: var(--color-primary);
}

.lead-form__turnstile {
  min-height: 65px; /* Layout-Shift vermeiden, bis das Widget lädt */
}

.lead-form__noscript {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.lead-form__submit {
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lead-form__submit:hover {
  background: var(--color-primary-hover);
}

/* ═══════════ SEKTIONEN DER STARTSEITE ═══════════

   Sektionsabstaende nach der Regel aus sektions-abstaende.md: jede Sektion
   traegt die HAELFTE des Zielabstands, ohne Ausnahme fuer getoente Flaechen.
   Zwei benachbarte ergeben zusammen --section-pad, und jede farbige Flaeche
   hat garantiert Innenabstand. Keine Sektion je auf padding-block-start: 0.

   Im Entwurf lagen vier von neun Naehten bei 132 bis 160 px statt im Korridor,
   weil beim Lockern beide Seiten einer Naht erhoeht wurden. Wer hier nachjustiert,
   aendert --section-pad, nicht die Paddings einzeln. */

:root {
  --section-pad: 7rem;          /* der sichtbare Abstand ZWISCHEN zwei Sektionen */
  --card-pad: 2.25rem;          /* Karten mindestens 36 px innen, sonst wirkt es eng */
  --grid-gap: 1.375rem;
}

.section {
  padding-block: calc(var(--section-pad) / 2);
}

/* Die letzte Sektion vor dem Footer braucht vollen Abstand nach unten,
   sonst wirkt der Seitenschluss gedraengt. */
.section:last-of-type {
  padding-block-end: var(--section-pad);
}

.section--tint { background-color: var(--color-bg-tint); border-block: 1px solid #D2E9D9; }
.section--alt  { background-color: var(--color-bg-alt); }

/* ─────────── Hero ─────────── */

/* Der Hero traegt unten KEIN Padding mehr: Die freigestellte Figur soll von der
   Unterkante der Toenung angeschnitten werden, statt darin zu schweben (Ansage Alex
   04.09.2026). Der Abstand nach unten haengt deshalb an der Textspalte, nicht an
   der Sektion. Ohne diese Trennung faellt der Text mit dem Praxisband zusammen. */
.hero {
  /* Mehr Luft oben (Alex, 04.09.2026): Der Hero schrumpft mit jeder Zeile, die aus
     der Ueberschrift faellt, und wirkte dann gedraengt. Die Hoehe haengt an der
     Textspalte, nicht am Bild, deshalb sitzt der Zuschlag hier und an .hero__text. */
  padding-block: 6rem 0;
  overflow: hidden;
  background-color: var(--color-bg-tint);
}

.hero__grid {
  display: grid;
  /* 1:1 statt 1.12:0.88, damit die Figur wirklich groesser wird: Bei 0.88fr war die
     Spalte 487 px breit, und max-width am Bild aenderte nichts (Alex, 05.09.: "noch nen
     tick groesser"). */
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem;
  align-items: end;
}

.hero__text { padding-block-end: 7.5rem; }  /* Platz fuer die halbe Kennzahlen-Karte */

/* Die Figur ohne Rahmen und ohne Flaeche dahinter, direkt auf der Toenung. Sie steht
   am Ende der Zeile und wird von der Kennzahlen-Karte angeschnitten. */
.hero__figurfeld { display: flex; justify-content: center; align-items: flex-end; }
.hero__figur { display: block; width: 100%; max-width: 34rem; height: auto; }

.hero h1 {
  /* Vierzeilig wirkte die Ueberschrift gequetscht (Alex, 04.09.2026). Sie traegt
     jetzt die kleine Ortszeile als erste Zeile und darunter zwei grosse: drei Zeilen
     statt vier, und der Hero bekommt Luft. */
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.14;
  margin-block-end: 1.375rem;
}

/* Die Ortszeile sitzt IN der H1 und muss deren Groesse und Gewicht ablegen. Optisch
   ist sie identisch zur Eyebrow der uebrigen Sektionen, damit die Seite ein Muster
   behaelt; text-transform aendert nur die Darstellung, im Quelltext steht der Begriff
   normal geschrieben. */
.hero__ort {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #4E8A61;
  margin-block-end: 1rem;
}

.hero__lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem;
  margin-block-start: 1.75rem;
}

/* ─────────── Anruf-Knopf ─────────── */

.tel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tel-btn:hover,
.tel-btn:focus-visible { background-color: var(--color-primary-hover); color: #fff; }

.tel-btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* ─────────── Sektionskopf ─────────── */

.sektionskopf {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 3.5rem;
  /* "end" richtet die Kaesten aus, nicht die Schrift: Ueberschrift und Lead haben
     verschiedene Zeilenhoehen, dadurch endete der Lead rund neun Pixel ueber der
     letzten Zeile der Ueberschrift (Alex, 04.09.2026). "last baseline" richtet die
     letzten Grundlinien aneinander aus, also genau das, was das Auge erwartet.
     Die Zeile darueber bleibt als Rueckfall fuer Engines ohne die Angabe. */
  align-items: end;
  align-items: last baseline;
  margin-block-end: 2.625rem;
}

/* Gestapelt statt zweispaltig: fuer den ersten Block nach dem Seitenkopf einer
   Leistungsseite. Zweispaltig sah er aus wie ein zweiter Hero (Alex, 05.09.2026). */
.sektionskopf--schmal { display: block; max-width: 60ch; }
.sektionskopf--schmal > div { margin-block-end: 1rem; }

.sektionskopf h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
/* Kein padding-block-end mehr: Die Spalten stehen auf align-items: end, und die
   sechs Pixel schoben den Lead ueber die Grundlinie der Ueberschrift hinaus. Beide
   Spalten sollen unten auf derselben Linie abschliessen (Alex, 04.09.2026). */
.sektionskopf p  { font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #4E8A61;
  margin-block-end: 0.75rem;
}

/* ─────────── Leistungsraster ─────────── */

.leistungen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.leistung {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  padding: var(--card-pad) 2rem;
  /* Weiss mit Haarlinie statt getoent (Alex, 05.09.2026: "zu bunt"). Die Sektion bleibt
     weiss, weil sie direkt auf den getoenten Hero folgt. */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Der Notfall bleibt erkennbar ueber rostrote Ueberschrift, Icon und Haarlinie, ohne
   rosa Flaeche (dieselbe Ansage). */
.leistung--notfall { border-color: rgb(168 67 28 / 0.28); }
.leistung--notfall h3 { color: var(--color-warm-text); }

.leistung h3 { font-size: 1.25rem; font-weight: 700; }
.leistung p  { font-size: 1rem; line-height: 1.6; color: var(--color-text-muted); }
/* ─────────── Icon in der Ueberschriftenzeile ───────────
   Entscheidung 05.09.2026 nach zwei Vergleichsrunden. Vorher schwebte das Icon frei
   ueber der Ueberschrift, und weil Knochen, Herz, Schere und Zahn verschieden viel
   Flaeche fuellen, sprang das Auge bei jeder Kachel woanders hin ("unruhig"). Eine
   weisse Box darum wirkte "aufgesetzt", ein Kreis war schon am 04.09. raus, das
   Wasserzeichen zeigte die Icons zu gross ("so toll sind die nicht"). Klein vor dem
   ersten Wort haengt es an der Zeile und kann nirgends hin. */
.leistung h3 { display: flex; align-items: flex-start; gap: 0.625rem; }

.leistung__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  /* Auf die Versalhoehe der ersten Zeile, nicht auf die Mitte des Blocks: bei
     zweizeiligen Ueberschriften sass es sonst zwischen den Zeilen. */
  margin-block-start: 0.1875rem;
  color: var(--color-primary);
}

/* Groesse im Container, nie per Attribut am SVG: Der Icon-Shortcode entfernt
   width/height aus der Datei. */
.leistung__icon svg { display: block; width: 100%; height: 100%; }

.leistung--notfall .leistung__icon { color: #A8431C; }

.leistung a { color: inherit; text-decoration: none; }
.leistung a::after { content: ""; position: absolute; inset: 0; }
.leistung { position: relative; }
/* Hover faerbt den vorhandenen Rand, statt einen zweiten Rahmen mit Abstand zu zeichnen
   (Alex, 05.09.2026: "1-2px abstand zur regulaeren umrandung"). Fokus behaelt den Ring. */
.leistung:has(a:hover) { border-color: var(--color-primary); }
.leistung:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ─────────── Hauslabor: Bild ueber die volle Breite, Karte darauf ─────────── */
/* Die Trennung entsteht ueber Form, nicht ueber Farbe: dasselbe Muster, mit dem
   oben schon das Praxisbild arbeitet. Ein getoentes Feld war hier zu schwach. */

/* ⚠️ Umgebaut am 04.09.2026. Vorher: Bild 20,6 rem hoch, Karte 62 Prozent breit und
   8,25 rem hineingezogen. Vom Bild blieb ein Streifen, die Geraete waren nicht mehr
   zu erkennen ("so siehts kacke aus"). Jetzt traegt das Bild die Sektion, die Karte
   ragt nur noch flach von links hinein und laesst die rechte Bildhaelfte frei. */
/* Bild im Container, die weisse Karte ragt von unten hinein: der Stand vom 04.09.2026,
   nach drei verworfenen Streifen-Fassungen am 05.09. wiederhergestellt. */
.section--labor { padding-block-start: 0; }
.labor { position: relative; }

.labor__bild {
  display: block;
  width: 100%;
  height: clamp(15rem, 26vw, 23rem);  /* flacher (Alex, 05.09.: "noch etwas flacher") */
  object-fit: cover;
  /* Die Geraete liegen im Bild zwischen 40 und 75 % der Hoehe, deshalb tiefer als mittig. */
  object-position: 50% 58%;
}

/* Dieselbe Sprache wie die Kennzahlen-Karte im Hero: mittig auf der Bildkante, Haarlinie,
   weicher Schatten, kein Versatz nach links (Alex, 05.09.2026: "badge besser stylen"). */
.labor__karte {
  position: relative;
  width: min(82%, 52rem);
  margin-block-start: -6.5rem;
  margin-inline: auto;
  padding: 2.25rem 2.5rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgb(20 45 28 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.labor__karte p { font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }

.labor__karte h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.625rem); font-weight: 800; line-height: 1.18; }

/* ─────────── Pfeil-Link ─────────── */

.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary-hover);
  text-decoration: none;
  border-block-end: 2px solid #8FDDA6;
  padding-block-end: 0.25rem;
}

.pfeil:hover, .pfeil:focus-visible { color: var(--color-accent); border-color: var(--color-primary); }
.pfeil svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

/* ─────────── Zwei Spalten: Bild und Text ─────────── */

/* ⚠️ Benannte Bereiche statt blosser Spalten, damit die Reihenfolge am Handy stimmt.
   Ueberschrift und Fliesstext stehen im Markup als zwei Bloecke, das Bild dazwischen:
   Am Desktop legen die Bereiche beide Textbloecke uebereinander in dieselbe Spalte,
   am Handy stapelt das Raster Ueberschrift, Bild, Text. Ohne das landet das Bild als
   letztes Element unter dem ganzen Text, und der Bezug zur Ueberschrift ist weg. */
.zweispalt {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas:
    "kopf bild"
    "text bild";
  grid-template-rows: auto 1fr;
  column-gap: 3.5rem;
  row-gap: 1.125rem;
  align-items: center;
}
.zweispalt__kopf { grid-area: kopf; align-self: end; }
.zweispalt__text { grid-area: text; align-self: start; }
.zweispalt .bildrahmen { grid-area: bild; }

.zweispalt--bild-rechts {
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "kopf bild"
    "text bild";
}

.zweispalt__kopf { display: flex; flex-direction: column; gap: 0.5rem; }
.zweispalt__text { display: flex; flex-direction: column; gap: 1.125rem; }
.zweispalt__kopf h2 { font-size: clamp(1.4375rem, 1.15rem + 1.25vw, 2.125rem); font-weight: 800; line-height: 1.14; }
.zweispalt__text p  { font-size: 1.125rem; line-height: 1.65; color: #3F5A48; }

/* Versetzter heller Block hinter dem Foto, uebernommen von der alten Seite */
/* Ohne die weisse Kachel dahinter (Alex, 05.09.2026: "ich wuerde weisse kacheln weglassen"):
   das Bild steht fuer sich, wie jedes andere Bild der Seite. */
.bildrahmen { position: relative; }
/* Das Bild fuellt die Hoehe der Textspalte statt mit fester Hoehe darueber zu schweben
   (Alex, 05.09.2026: "die bilder fliegen da so rum, zu viel space"). align-self: stretch
   am Rahmen, height: 100% am Bild, die Mindesthoehe faengt kurze Texte ab. */
/* Das Bild behaelt seine Proportion und haengt oben an der Ueberschrift. Es auf die
   Hoehe des Textes zu strecken war ein Workaround und ist abgelehnt (Alex, 05.09.2026:
   "keine solchen workarounds, mach es premium"). Wo ein Text laenger ist als ein
   Bild im Querformat, bekommt der Block ein anderes Layout, siehe /ueber-mich/. */
.bildrahmen { align-self: center; }  /* mittig zum Textblock, oben angeschlagen wirkte es verrutscht (Kontakt, Ankommen; Alex, 05.09.) */
.bildrahmen picture { display: contents; }
.bildrahmen img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* ─────────── Aufzaehlung mit Haken ─────────── */

.merkmale { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.merkmale li { display: flex; gap: 0.8125rem; font-size: 1.0625rem; line-height: 1.6; color: #3F5A48; }
.merkmale svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--color-primary); margin-block-start: 0.125rem; }

/* ─────────── Zitat, gross und allein ─────────── */

/* Eingefasst wie die Bewertungskarten darunter: weisse Karte mit Haarlinie, damit das
   Zitat nicht im leeren Raum schwebt (Alex, 05.09.2026 abends). Keine Toenung, denn
   Zuschriften sind Stimmen von aussen (design-richtung.md, Farblogik). */
.zitat { display: flex; flex-direction: column; align-items: center; gap: 1.625rem; text-align: center; max-width: 52rem; margin-inline: auto; padding: 3rem 2.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.zitat .eyebrow { margin: 0; }
/* Die lucide-SVGs bringen kein width/height mit, sie skalieren auf den Container.
   Ohne diese Zeile wuchs das Herz im Zitat auf 1208 px und fuellte den Bildschirm. */
.zitat > svg { width: 2.5rem; height: 2.5rem; flex: none; color: var(--color-primary); }
.zitat blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);  /* 28 px am Desktop: 32 war zu gross, 24 zu klein (Alex, 05.09.) */
  font-weight: 600;
  line-height: 1.38;
  max-width: 28ch;
  margin: 0;
}
.zitat figcaption { display: flex; align-items: center; gap: 0.8125rem; font-size: 1rem; font-weight: 600; color: #7C9C87; }
.zitat img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }

/* ─────────── Kundenstimmen ─────────── */

.stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.stimme {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--card-pad) 2rem;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.stimme p { font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; margin: 0; }
.stimme footer { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; font-weight: 600; color: #7C9C87; }
.stimme img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }

/* ─────────── Google-Bewertungen ─────────── */
/* Strikt getrennt von den Zuschriften daneben: Note und Anzahl stammen aus dem
   Google-Profil, die Zuschriften nicht. Zusammengelegt waere das irrefuehrend. */

.bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.375rem;
  padding: 1.625rem 1.875rem;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.bewertung__note { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.bewertung__text { font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-muted); }

/* ─────────── Kontaktblock ─────────── */

/* Vorher zwei gleich breite Spalten: links nackter Fliesstext, rechts ein Knopf und
   ein kleiner Kasten mit viel Leerraum darunter. Jetzt traegt die linke Spalte eine
   Liste mit Icons und Trennlinien, die rechte den Notfallblock mit eigenem Anrufziel. */
/* EIN Bauteil aus Landkarte und Angaben, in einem gemeinsamen Rahmen. Zwei Fassungen
   davor haben nicht getragen: erst zwei Spalten mit einer Zeilenliste links und dem
   Notfall als hohem Kasten rechts, der dadurch den Block dominierte; dann sechs Kacheln
   im Dreierraster, das aber formgleich mit dem Leistungsraster weiter oben war, waehrend
   die Landkarte separat darunter hing. Die Karte gehoert in den Block, nicht daneben. */
.kontaktblock {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Die Karte fuellt ihre Haelfte randlos aus, ohne eigenen Rahmen und ohne Radius:
   Sie ist eine Flaeche des Blocks, kein Bild darin. */
/* Das Bild absolut im gestreckten Grid-Item: Mit height 100 Prozent allein bliebe es
   bei seiner Eigenhoehe stehen, weil der Anker keine feste Hoehe hat, und darunter
   klaffte getoenter Leerraum (gemessen 190 px). */
.kontaktblock__karte {
  position: relative;
  display: block;
  line-height: 0;
}
.kontaktblock__karte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kontaktblock__knopf {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 20px rgb(20 45 28 / 0.24);
  transition: background-color 0.15s ease;
}
.kontaktblock__knopf svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
.kontaktblock__karte:hover .kontaktblock__knopf,
.kontaktblock__karte:focus-visible .kontaktblock__knopf { background-color: var(--color-primary-hover); }

/* Zwei Spalten statt fuenf Zeilen untereinander. Einspaltig war der Block 728 px hoch,
   und die Karte daneben musste sich auf dieselbe Hoehe strecken (Alex: "warum so
   riesig"). Der Notfall laeuft ueber beide Spalten, damit er als Abschluss steht und
   nicht als vierte Angabe unter vielen. */
.kontaktblock__daten {
  margin: 0;
  padding: 2.25rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  column-gap: 2.25rem;
  row-gap: 1.25rem;
}
.kontaktblock__daten > div:nth-child(n + 3) {
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border);
}

.kontaktblock__daten dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #4E8A61;
  margin-block-end: 0.375rem;
}
.kontaktblock__daten dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #3F5A48;
  text-wrap: pretty;
}
.kontaktblock__daten dd a { color: var(--color-primary); font-weight: 600; }

/* Der Notfall steht als Leistungskachel weiter oben mit der Erklaerung. Hier traegt er
   nur die Handlung, faellt aber ueber Farbe und Knopf trotzdem sofort auf. */
.kontaktblock__notfall dt { color: #A8431C; }
.kontaktblock__notfall dd { color: #8A4527; }

/* width: fit-content statt inline-flex: Als Inline-Element haengt der Knopf im
   Textfluss und der letzte Satz laeuft unter ihm durch. */
.kontaktblock__tel {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5625rem;
  margin-block-start: 0.875rem;
  padding: 0.6875rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  background-color: #A8431C;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.kontaktblock__daten .kontaktblock__tel { color: #fff; }
.kontaktblock__tel:hover, .kontaktblock__tel:focus-visible { background-color: var(--color-warm-text); color: #fff; }
.kontaktblock__tel svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

/* Das Einzugsgebiet steht unter dem Block als Fliesstext: Es ist eine Ortsangabe fuer
   Suchende, keine Kontaktzeile, und in der Liste hat es die Zeilen gesprengt. */
.kontakt__einzug {
  max-width: 52rem;
  margin-block-start: 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ─────────── Mobil ─────────── */

@media (max-width: 60rem) {
  :root { --section-pad: 4.5rem; --card-pad: 1.75rem; }


  .hero__grid,
  .sektionskopf { grid-template-columns: 1fr; gap: 2rem; }

  /* Ueberschrift, Bild, Text. Das Bild sitzt zwischen Titel und Erklaerung, weil es
     ganz unten wie ein Anhaengsel wirkt und ganz oben ohne Bezug steht. */
  .zweispalt,
  .zweispalt--bild-rechts {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "bild" "text";
    grid-template-rows: auto;
    row-gap: 1.5rem;
  }

  /* Untereinander: Bei zwei Spalten bleibt fuer die Angaben keine Zeilenlaenge mehr,
     die eine Adresse traegt. Die Karte steht dann oben als Bild ueber dem Text. */
  .kontaktblock { grid-template-columns: 1fr; }
  .kontaktblock__karte { min-height: clamp(12rem, 34vw, 17rem); }
  .kontaktblock__daten { padding: 2rem 1.75rem; }

  .leistungen { grid-template-columns: 1fr; }
  .stimmen    { grid-template-columns: 1fr; }

  /* Am Handy volle Breite, sonst steht die Karte als schmaler Streifen rechts. */

  /* Die ueberlappende Karte funktioniert am Handy nicht: sie deckt das Bild fast
     ganz zu. Dort steht sie unter dem Bild, mit leichter Ueberlappung. */
  .labor__karte {
    width: 100%;
    margin-block-start: -2rem;
    margin-inline-start: 0;
    padding: 1.75rem;
  }

  .sektionskopf { margin-block-end: 1.75rem; }
  .zitat blockquote { max-width: none; }
}

/* ═══════════ HEADER: Logo, Navigation, Anrufnummer ═══════════

   Der Header traegt die Telefonnummer auf jeder Seite, weil der Anruf der einzige
   Conversion-Kanal ist: kein Formular, kein Terminsystem. Am Handy schrumpft sie
   auf das Icon, der Text waere dort zu breit.

   ⚠️ Ueberschreibt die Regeln aus _nav.css, die auf die details/summary-Variante
   des Templates gemuenzt sind. Die Engine-Datei bleibt dafuer unangetastet. */

/* Mit sticky Header wuerde ein Ankersprung (etwa auf #leistungen) unter dem Kopf
   landen. Der Wert liegt knapp ueber der gemessenen Kopfhoehe von 77 px. */
html { scroll-padding-block-start: 6rem; }

/* Sticky, weil der Anruf der einzige Conversion-Kanal ist: Der Knopf im Kopf bleibt
   damit auf jeder Scrollposition erreichbar, statt nur ganz oben. Der Hintergrund muss
   dabei gesetzt sein, sonst scheint der Seiteninhalt durch. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background-color: var(--color-bg);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

.site-header__logo { display: flex; align-items: center; }
/* Oben 3,375 rem, beim Scrollen 2,625 rem. Das Schrumpfen ist kein Effekt um seiner
   selbst willen: Der Kopf klebt beim Scrollen ueber dem Inhalt und nimmt dort Platz
   weg, den er oben nicht nimmt. Die Uebergaenge laufen ueber eine eigene Klasse, die
   kopf.js setzt, nicht ueber die Scrollposition im CSS, denn die kennt CSS nicht. */
.site-header__logo img {
  display: block;
  width: auto;
  height: 3.375rem;
  transition: height 0.18s ease;
}

.site-header {
  transition: padding-block 0.18s ease, box-shadow 0.18s ease;
}
.site-header.ist-gescrollt { padding-block: 0.6875rem; box-shadow: 0 6px 18px rgb(20 45 28 / 0.07); }
.site-header.ist-gescrollt .site-header__logo img { height: 2.625rem; }

/* Wer Bewegung reduziert haben will, bekommt den kleineren Kopf ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__logo img { transition: none; }
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--color-primary); }
.site-nav__list a[aria-current="page"] { color: var(--color-primary); }

.site-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.6875rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  text-decoration: none;
}

.site-header__tel:hover,
.site-header__tel:focus-visible { background-color: var(--color-primary-hover); color: #fff; }
.site-header__tel svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

@media (max-width: 52rem) {
  /* Die Nummer bleibt, der Text daneben faellt weg: ein Icon-Knopf mit 44 px
     Trefferflaeche, wie es die Mobil-Regel fuer Hit-Targets verlangt. */
  .site-header__tel-text { display: none; }
  .site-header__tel { padding: 0.75rem; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .site-header__logo img { height: 2.75rem; }
  .site-header.ist-gescrollt .site-header__logo img { height: 2.25rem; }
  /* Burger und Anrufknopf stehen zusammen rechts im Kopf. Das auto-Margin schiebt
     die Gruppe nach rechts, ohne dass Markup dafuer noetig waere. Eine eigene Zeile
     fuer den Burger haette den Kopf um 55 px hoeher gemacht, gemessen 04.09.2026,
     und genau die wollte der Burger einsparen.
     Die Reihenfolge ist gedreht: erst der Anrufknopf, dann ganz aussen der Burger.
     Der Daumen liegt am rechten Rand, und dort gehoert das Menue hin, nicht die
     Handlung, die man aus Versehen ausloest. */
  .site-header__tel { order: 2; margin-inline-start: auto; }
  .site-nav { order: 3; }
  /* Die beiden Knoepfe stehen als Paar zusammen, deshalb hier ein kleinerer Abstand
     als die 2 rem des Kopfes. Zum Logo hin macht das auto-Margin am Anrufknopf den
     Raum, der Spaltenabstand wird dort also nicht gebraucht. */
  .site-header .container { column-gap: 0.625rem; }
  /* ⚠️ Hier stand bis zum 04.09.2026 eine umbrechende Zeile aus vier Links unter dem
     Logo. Sie war der Notbehelf, solange es keinen Burger gab: Die Spaltenvariante aus
     _nav.css kostete ueber 300 px Hoehe und schob den Anrufknopf unter die Falz.
     Jetzt klappt das Menue auf, die Zeile darunter entfaellt. */
  .site-header__logo { min-height: 2.75rem; align-items: center; }
}

/* Nur fuer Screenreader. Wird gebraucht, weil der Anruf-Knopf am Handy auf das
   Icon schrumpft und der Nummerntext dort verschwindet. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════ FOOTER: dunkelgruene Flaeche mit NAP-Block ═══════════

   Der Footer traegt Name, Adresse, Telefon und Oeffnungszeiten, wie es fuer einen
   lokalen Anbieter Standard ist. "Welcher Tierarzt hat gerade geoeffnet" gehoert zu
   den haeufigsten Fragen am Ortsbegriff, und "oeffnungszeiten" war im Scan eine
   Entitaet mit Gewicht 5.

   ⚠️ Ueberschreibt _footer.css: dort ist der Footer hell und einzeilig. Die
   Engine-Datei bleibt unangetastet. */

.site-footer {
  margin-block-start: 0;
  padding-block: 3.25rem 2rem;
  background-color: var(--color-footer);
  border-block-start: 0;
  color: var(--color-dunkel-text);  /* eine Palette fuer alle dunklen Flaechen: Text, Weiss fuer Links und Fettes, Akzent fuer Labels (Alex, 05.09.2026) */
  font-size: 1rem;
}

.site-footer .container {
  display: block;
}

.site-footer__nap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block-end: 1.875rem;
  margin-block-end: 1.625rem;
  border-block-end: 1px solid #23412D;
}

.site-footer__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-dunkel-akzent);
  margin-block-end: 0.625rem;
}

.site-footer__nap p { font-size: 1.0625rem; line-height: 1.55; margin: 0; }
.site-footer__nap p + p { margin-block-start: 0.5rem; }
.site-footer__klein { font-size: 0.9375rem; }

.site-footer__nap a { color: #FFFFFF; font-weight: 700; text-decoration: none; }
.site-footer__nap a:hover, .site-footer__nap a:focus-visible { text-decoration: underline; }
.site-footer__klein a { font-weight: 600; color: #fff; }

.site-footer__schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
  color: #8FB39B;
}

.site-footer__schluss p { margin: 0; }
.site-footer__links { display: flex; gap: 1.625rem; list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: #fff; font-weight: 600; text-decoration: none; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { text-decoration: underline; }
/* Social Media als eigene Sparte unter Telefon: Label wie die anderen Sparten, darunter
   runde Icon-Knoepfe ohne Wortmarke (Alex, 05.09.2026). 44 px Durchmesser als
   Tipp-Ziel, Kreis in der Trennlinienfarbe der Fusszeile, Icon in Weiss wie die Links,
   beim Hover der Kreis in der Akzentfarbe mit dunklem Icon. */
/* Spezifitaet bewusst: .site-footer__nap p + p (0,1,2) und .site-footer__nap p (0,1,1)
   setzen sonst 0.5rem bzw. 0 und fressen die Abstaende (gemessen 05.09.2026: 8 und 0 px). */
.site-footer__nap .site-footer__label--social { margin-block-start: 1.75rem; margin-block-end: 0.75rem; }
.site-footer__social { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: #23412D; color: #fff; text-decoration: none; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { background: var(--color-dunkel-akzent); color: var(--color-dunkel); text-decoration: none; }
.site-footer__social svg { width: 1.375rem; height: 1.375rem; display: block; }

@media (max-width: 48rem) {
  .site-footer__nap { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ═══════════ ÜBER MICH auf der Startseite ═══════════
   Text links, Portraet rechts und im Hochformat. Vorher stand hier dasselbe Muster
   wie eine Sektion darueber bei den Heimtieren: Querbild links, Text rechts. Zwei
   gleiche Bausteine hintereinander lesen sich als Wiederholung, nicht als Aufbau. */
.uebermich {
  display: grid;
  /* 1.3 zu 0.7 statt 1.15 zu 0.85: das Bild einen Tick kleiner (Alex, 05.09.) */
  grid-template-columns: 1.3fr 0.7fr;
  grid-template-areas:
    "kopf bild"
    "text bild";
  grid-template-rows: auto 1fr;
  column-gap: 4rem;
  row-gap: 1.125rem;
  align-items: center;
}
.uebermich__kopf { grid-area: kopf; align-self: end; display: flex; flex-direction: column; gap: 0.5rem; }
.uebermich__text { grid-area: text; align-self: start; display: flex; flex-direction: column; gap: 1.125rem; }
.uebermich__bild { grid-area: bild; }
.uebermich__kopf h2 { font-size: clamp(1.4375rem, 1.15rem + 1.25vw, 2.125rem); font-weight: 800; line-height: 1.14; }
.uebermich__text p  { font-size: 1.125rem; line-height: 1.65; color: #3F5A48; }
.uebermich__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius-xl);
}

/* ═══════════ HEIMTIERE: Bild und Text als Block ═══════════ */

/* Benannte Bereiche, damit am Handy Ueberschrift, Bild, Text steht. Ohne das landet
   das Bild vor der Ueberschrift, weil es im Markup vor dem Textblock kommt. Siehe die
   Regel zu Zweispaltern in design-und-layout.md. */
.heimtiere {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-areas:
    "bild kopf"
    "bild text";
  grid-template-rows: auto 1fr;
  column-gap: 3rem;
  row-gap: 1.125rem;
  align-items: center;
}
.heimtiere__bild { grid-area: bild; }
.heimtiere__kopf { grid-area: kopf; align-self: end; display: flex; flex-direction: column; gap: 0.5rem; }
.heimtiere__text { grid-area: text; align-self: start; }

.heimtiere__bild img {
  display: block;
  width: 100%;
  height: clamp(15rem, 26vw, 21rem);
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.heimtiere__text { display: flex; flex-direction: column; gap: 1.125rem; }
.heimtiere__kopf h2 { font-size: clamp(1.4375rem, 1.15rem + 1.3vw, 2.125rem); font-weight: 800; line-height: 1.14; }
.heimtiere__text p { font-size: 1.125rem; line-height: 1.65; color: #3F5A48; }
.heimtiere__text strong { color: var(--color-text); }

@media (max-width: 60rem) {
  .heimtiere {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "bild" "text";
    grid-template-rows: auto;
    row-gap: 1.5rem;
  }
}

/* ⚠️ Hier stand eine ueberzaehlige schliessende Klammer. Ein Browser liest sie als
   Beginn eines Selektors und verschluckt damit die NAECHSTE Regel komplett: Der
   Abstand unter dem Footer-Logo fehlte, das Logo klebte an der Sprechzeiten-Zeile.
   Im Quelltext ist so etwas unsichtbar, im Bild sofort. */

.site-footer__logo { display: inline-flex; margin-block-end: 2.25rem; }
.site-footer__logo img { display: block; width: auto; height: 3.25rem; }

@media (max-width: 48rem) {
  .site-footer__logo { margin-block-end: 1.75rem; }
  .site-footer__logo img { height: 2.75rem; }
}

/* ═══════════ PRAXISBAND MIT KENNZAHLEN-KARTE ═══════════
   Entscheidung 05.09.2026, Fassung 14b aus drei Vergleichsrunden (HANDOFF-STAND.md).
   Das Panorama laeuft randlos direkt unter der Toenung des Heros, die drei Kennzahlen
   liegen als weisse Karte halb auf der Toenung und halb auf dem Foto. Vorher lag das
   Foto hinter dem Text mit einem Schleier, und die Zahlen standen als weisser Streifen
   (.hero__sockel) zwischen Figur und Foto: beides abgelehnt.
   ⚠️ Die Ueberlagerung ist eine Farbentscheidung, kein Lesbarkeitstrick: Auf dem Foto
   steht kein Text. 18 % nehmen Holz und Pferdebild die Dominanz; 32 % kippten im
   Vergleich in den abgelehnten Schleier-Look. */

.praxisband {
  position: relative;
  /* 20 statt 24 rem (Alex, 05.09.: "etwas weniger hoch"), der Ausschnitt bleibt unten */
  height: 20rem;
  /* Faellt das Foto aus, bleibt die Flaeche in der Toenung */
  background-color: var(--color-bg-tint);
}

.praxisband__bild { position: absolute; inset: 0; overflow: hidden; }

.praxisband__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ganz unten im Panorama: Tresen, Boden und Sessel, die gekruemmte Decke bleibt
     draussen. Eine 360-Grad-Aufnahme vertraegt als flaches Band keine Decke. */
  object-position: 52% 90%;  /* ein Tick hoeher, oben war zu viel weg (Alex, 05.09.) */
  /* Beruhigt, weil das Panorama "zu heftig" war (Alex, 05.09.2026): weniger Farbe, ein
     Stueck hineingezoomt, damit die verzerrten Tueren an den Raendern wegfallen. */
  filter: saturate(0.85);
  /* 1.14 liess links den Tuerrahmen sehen, 1.22 rechts noch das Holz der Tuer: deshalb
     etwas mehr Zoom und der Ausschnitt ein Stueck nach links geschoben (Alex, 05.09.). */
  /* Positives translateX schiebt das Bild nach rechts, der sichtbare Ausschnitt wandert also
     nach links und die Tuer rechts (ab 87 % der Bildbreite) faellt raus; links bleibt der
     Rahmen (bis 9 %) draussen. Gerechnet, dann gemessen. */
  transform: translateX(8%) scale(1.38);
  transform-origin: 50% 100%;
}

.praxisband::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-bg) 20%, transparent);  /* 26 % war zu blass (Alex, 05.09.) */
  pointer-events: none;
}

/* Die Karte haengt an der Oberkante des Bands und ragt zur Haelfte in die Toenung.
   Die Figur endet an der Hero-Unterkante und wird von der Karte angeschnitten
   (Alex, 04.09.: "muss halt anschnitt haben, sonst funzt es nicht"). */
.praxisband__karte {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 1;
  transform: translateY(-50%);
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem 3.5rem;
  margin: 0;
  padding: 1.75rem 2.25rem;
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  /* Flach statt mit Schatten: der Schatten machte die Karte zum Aufkleber (Alex, 05.09.2026) */
  border: 1px solid var(--color-border);
}

.kennzahlen dt {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text);
}

.kennzahlen dd {
  margin: 0;
  margin-block-start: 0.1875rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ═══════════ HERO: Eyebrow, Zeiten, Bewertung ═══════════ */

.hero .eyebrow { margin-block-end: 1rem; }
.hero__zeiten { font-size: 1.0625rem; line-height: 1.5; color: var(--color-text-muted); }

.hero__bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block-start: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hero__bewertung strong { color: var(--color-text); font-weight: 700; }

/* Eine Zeile fuer Zeiten und Bewertung, getrennt durch Abstand. Bricht am Handy um. */
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; margin-block-start: 1.5rem; font-size: 1.0625rem; line-height: 1.5; color: var(--color-text-muted); }
.hero__meta .hero__bewertung { margin: 0; }

.sterne { display: inline-flex; gap: 0.1875rem; }
.sterne svg { width: 1.25rem; height: 1.25rem; flex: none; }
/* Googles eigenes Sternchengelb. Die Note stammt aus dem Unternehmensprofil,
   und in der vertrauten Farbe liest sie sich als das, was sie ist. */
.sterne .voll { fill: #FBBC04; }
/* 4,8 von 5: der letzte Stern steht zu vier Fuenfteln, deshalb blasser statt voll.
   Ehrlicher als fuenf volle Sterne und ehrlicher als vier. */
.sterne .teil { fill: #FBBC04; opacity: 0.42; }

/* Zweispaltige Merkmalliste: am Desktop nebeneinander, am Handy untereinander.
   Als Inline-Style stand die Spaltenzahl fest und war mobil zu eng. */
.merkmale--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem 3rem; }

@media (max-width: 60rem) {
  .merkmale--zwei { grid-template-columns: 1fr; gap: 1rem; }
}

/* Zweite getoente Sektionsfarbe. Der Rhythmus-Pruefer kennt sie automatisch,
   weil er die Klasse-zu-Farbe-Zuordnung aus der gebauten CSS liest. */
.section--sand { background-color: var(--color-bg-sand); }


/* ═══════════ HERO-FIGUR, freigestellt ═══════════
   Kein Rahmen und keine Flaeche dahinter: die Figur steht direkt auf der Toenung.
   Ein abgerundeter Kasten mit versetztem Block wirkte wie ein aufgeklebtes Foto. */

@media (max-width: 60rem) {
  .uebermich {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "bild" "text";
    grid-template-rows: auto;
    row-gap: 1.5rem;
  }
  .uebermich__bild { max-width: 22rem; }
  /* Am Handy sitzt der Kopf direkt darueber und der Hero faengt gleich an. Die 6 rem
     vom Desktop sind dort zu viel, weil die Ueberschrift ohnehin drei Zeilen braucht. */
  .hero { padding-block-start: 2.5rem; }

  .hero__text { padding-block-end: 0; }
  /* Die Figur steht 6 rem ueber der Bandkante: Die Karte ist am Handy drei Zeilen hoch
     und wuerde sonst die halbe Figur verdecken. Gemessen bei 390 px. */
  .hero__figurfeld { padding-block-end: 6rem; }
  .hero__figur { max-width: 22rem; }
  .praxisband { height: 18rem; }
  .kennzahlen { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; }
}

/* ═══════════ NEUE BAUSTEINE (04.09.2026) ═══════════

   Anlass: "generell die bloecke sind so aehnlich da untereinander, dauernd headline
   links und so, das muss aufgelockert werden". Die Startseite trug den Sektionskopf
   mit Ueberschrift links und Lead rechts fuenfmal und zwei Hakenlisten direkt
   hintereinander. Der Sektionskopf bleibt fuer die Leistungen und den Kontakt, alles
   dazwischen bekommt eine eigene Form. */

/* ─────────── Mittiger Sektionskopf ─────────── */

.mittigerkopf {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: 3rem;
  text-align: center;
}
.mittigerkopf h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
.mittigerkopf p  { margin-block-start: 1rem; font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); }

/* ─────────── Punktzeilen: fettes Stichwort links, Erklaerung rechts ─────────── */
/* Ersetzt die zweite Hakenliste. Zwei Listen mit Haken hintereinander lasen sich
   abgehakt statt erklaert, und die Haken verloren dadurch ihre Wirkung. */

.punktzeilen { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.punktzeilen > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.5rem;
  padding-block: 1.375rem;
  border-block-start: 1px solid var(--color-border);
}
/* Die erste Zeile jeder Spalte traegt ihre Linie als Abschluss nach oben, damit
   beide Spalten oben auf derselben Kante beginnen. */
.punktzeilen > div:nth-child(-n+2) { border-block-start: 1px solid var(--color-border); }
.punktzeilen dt { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--color-text); }
.punktzeilen dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #3F5A48; }

@media (max-width: 68rem) {
  .punktzeilen > div { grid-template-columns: 1fr; gap: 0.375rem; }
}
@media (max-width: 60rem) {
  .punktzeilen { grid-template-columns: 1fr; gap: 0; }
  .mittigerkopf { margin-block-end: 2rem; }
}

/* ─────────── Kostenfeld ─────────── */
/* Eigene Flaeche statt Sektionskopf plus zwei Textspalten: Der Abschnitt stand
   sonst als dritter gleich aussehender Block in Folge. Sand statt Gruen, damit die
   Seite nicht auf drei Gruenabstufungen hinauslaeuft. */

/* ⚠️ Die sandfarbene Flaeche bleibt, der Kasten geht (Alex, 04.09.2026: "das wird
   sonst zu viel umrandeter kram", auf Rueckfrage: "behaelt schon seinen beigen
   background"). Der Unterschied liegt in der Form, nicht in der Farbe: Vorher war es
   ein gerundeter Kasten im Container und stand auf jeder Leistungsseite unmittelbar
   vor dem dunkelgruenen Seitenschluss, also zwei gerundete Kaesten hintereinander,
   und der zweite verlor sein Gewicht. Jetzt traegt die SEKTION die Farbe, randlos
   ueber die volle Fensterbreite. Sitewide dasselbe Bauteil, Startseite und
   Unterseiten aendern sich gemeinsam. */
.section--kosten { background-color: var(--color-bg-sand); }

.kostenfeld {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 3.5vw, 3.5rem);
}
.kostenfeld__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.kostenfeld__kopf h2 { font-size: clamp(1.4375rem, 1.15rem + 1.25vw, 2.125rem); font-weight: 800; line-height: 1.14; }
.kostenfeld__kopf .eyebrow { margin-block-end: -0.75rem; }
.kostenfeld__text { display: flex; flex-direction: column; gap: 1.125rem; }
.kostenfeld__text p { font-size: 1.0625rem; line-height: 1.65; color: #3F5A48; }


@media (max-width: 60rem) {
  .kostenfeld { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─────────── Notenband: die Google-Note ─────────── */
/* Alex am 04.09.2026: "da fehlen die sterne, das sieht nicht so richtig nach echten
   Google-Rezensionen aus". Note, Sterne und Anzahl stehen deshalb zusammen und in
   Googles eigenem Sternchengelb. Der Text daneben haelt die UWG-Trennung zu den
   Zuschriften ausdruecklich fest, die sind keine Plattformbewertungen. */

/* Weiss wie die Rezensionskarten darunter (Ansage Alex): Note und Rezensionen
   gehoeren zusammen und kommen aus derselben Quelle, also tragen sie dieselbe
   Flaeche. Getoent stand die Note als eigener Markenblock ueber fremden Stimmen. */
/* Sterne und Note unter der Ueberschrift, gleiche Sprache wie die Zeile im Hero. */
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block: -0.5rem 0.75rem; font-size: 1.0625rem; line-height: 1.5; color: var(--color-text-muted); }
.note strong { color: var(--color-text); font-weight: 700; }
/* Am Containerrand wie jede andere Ueberschrift (Alex, 05.09.2026). Erklaerung rechts oben an
   der Ueberschrift ausgerichtet, nicht an ihrer letzten Grundlinie. */
.bewertungskopf { align-items: start; margin-block-end: 1.75rem; }
.bewertungskopf > p { margin-block-start: calc(0.8125rem * 1.3 + 1rem); }
.note .sterne svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 60rem) {
  /* ⚠️ min-width: 0 ist hier Pflicht. Rasterzellen stehen auf min-width: auto und
     schrumpfen NICHT unter ihren Inhalt: Die Notenzeile war mit 364 px breiter als
     die Karte (342 px) und ragte samt Ueberschrift rechts darueber hinaus, ohne dass
     die Seite scrollbar wurde (Alex, 04.09.2026). Zusammen mit dem Umbruch unten ist
     das der Fix, eine der beiden Zeilen allein reicht nicht. */
  /* Die Zeile darf umbrechen: "aus 49 Bewertungen" stand auf nowrap und hat die
     ganze Karte aufgezogen. */
}

/* ─────────── Terminfeld: der Seitenschluss ─────────── */
/* Dunkles Feld auf weisser Sektion, nicht als dunkle Sektion: Der Footer ist selbst
   dunkelgruen, zwei dunkle Flaechen uebereinander wuerden zu einer verschmelzen. */

/* Nach einer getoenten Sektion (Kosten auf jeder Leistungsseite) traegt der Abschluss oben den
   vollen Abstand: Von der Farbkante bis zur Karte sind es dann 112 px, so wie von weissem Inhalt
   (56 + 56) und wie unter der Karte bis zum Footer. Gemessen 05.09.2026, vorher 56 gegen 112. */
.section--kosten + .abschluss,
.section--sand + .abschluss,
.section--alt + .abschluss { padding-block-start: var(--section-pad); }

/* Dunkle Karte auf weisser Sektion, wie am 04.09. gebaut. Die randlose Fassung vom 05.09.
   gefiel Alex am Ende nicht ("vielleicht doch als Block"). Karte statt Sektion hat zudem einen
   Grund: Direkt ueber dem dunkelgruenen Footer verschmolz die dunkle Sektion mit ihm. */
.terminfeld {
  display: grid;
  /* 1.35 zu 0.65: bei 1.25 zu 0.75 brach die erste Listenzeile um (Alex, 05.09.2026). */
  grid-template-columns: 1.35fr 0.65fr;
  gap: 3.5rem;
  align-items: center;
  padding: 3.25rem 3.5rem;
  background-color: var(--color-dunkel);
  border-radius: var(--radius-xl);
  color: var(--color-dunkel-text);
}

.terminfeld .eyebrow { color: var(--color-dunkel-akzent); }
.terminfeld h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.14; color: #fff; }

.terminfeld__punkte { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.125rem; }
.terminfeld__punkte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.terminfeld__punkte strong { color: #fff; font-weight: 700; }

/* ⚠️ Ohne Icons. Drei verschiedene Symbole vor drei Zeilen lasen sich als drei
   Kategorien, obwohl es eine Aufzaehlung ist, und die Seite trug ohnehin schon genug
   davon (Alex, 04.09.2026). Ein gleicher Punkt je Zeile ordnet, ohne zu behaupten.
   Als Pseudoelement, damit im Markup nur die Liste steht. */
.terminfeld__punkte li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-block-start: 0.6875rem;
  border-radius: var(--radius-full);
  background-color: var(--color-dunkel-akzent);
}

.terminfeld__aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.terminfeld__aufruf {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.terminfeld__aktion .tel-btn--gross { margin-block-start: 0.25rem; }
.terminfeld__aktion p { margin: 0; margin-block-start: 0.375rem; font-size: 1rem; line-height: 1.55; color: var(--color-dunkel-text); }

/* Auf dem dunklen Grund traegt der Knopf Weiss, nicht das Markengruen: Gruen auf
   Dunkelgruen erreicht die Kontrastschwelle nicht. */
.tel-btn--gross {
  padding: 1rem 1.75rem;
  font-size: 1.1875rem;
  background-color: #fff;
  color: #14291B;
}
.tel-btn--gross:hover, .tel-btn--gross:focus-visible { background-color: #CDEBD8; color: #14291B; }
.tel-btn--gross svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 60rem) {
  .terminfeld { grid-template-columns: 1fr; gap: 2rem; padding: 2.25rem 1.75rem; }
}


/* ─────────── Google-Rezensionen ─────────── */
/* Slider mit Pfeilen statt Laufband. Ein gleichmaessig laufendes Band liest sich bei
   Logos gut und bei Fliesstext schlecht: Wer eine Rezension zu Ende lesen will, jagt
   ihr hinterher. Deshalb steht die Spur still und wird auf Klick um genau eine Karte
   weitergeschoben, das Beschleunigen macht scroll-behavior: smooth.

   Die Spur ist eine normale scrollbare Liste: Wischen, Trackpad und Tastatur
   funktionieren ohne das Skript. Die Pfeile sind nur die zweite Bedienung und bleiben
   verborgen, bis das Skript sie einschaltet. */

.rezensionen { margin-block-start: 0.25rem; }  /* naeher an den Kopf (Alex, 05.09.) */

.rezensionen__leiste {
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* nur noch die Pfeile, die Zeile "Zuletzt bei Google" war eine Eyebrow zu viel */
  gap: 1rem;
  margin-block-end: 1rem;
}

.rezensionen__titel {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #4E8A61;
}

/* Erst sichtbar, wenn das Skript die Klasse gesetzt hat. Ohne JavaScript waeren es
   tote Knoepfe. */
.rezensionen__pfeile { display: none; gap: 0.5rem; }
.rezensionen--bedienbar .rezensionen__pfeile { display: flex; }

.rezensionen__pfeil {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-primary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.rezensionen__pfeil svg { width: 1.25rem; height: 1.25rem; }
.rezensionen__pfeil:hover:not(:disabled) { background-color: var(--color-bg-alt); border-color: var(--color-primary); }
.rezensionen__pfeil:disabled { opacity: 0.35; cursor: default; }

.rezensionen__spur {
  list-style: none;
  margin: 0;
  padding: 0.375rem 0 1rem;
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Balken weg: Die Bedienung liegt bei den Pfeilen, und die angeschnittene Karte am
     rechten Rand zeigt ohnehin, dass es weitergeht. Wischen, Trackpad und Tastatur
     bleiben davon unberuehrt. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rezensionen__spur::-webkit-scrollbar { display: none; }

/* Wer Bewegung abbestellt hat, springt ohne Uebergang weiter statt gar nicht. */
@media (prefers-reduced-motion: reduce) {
  .rezensionen__spur { scroll-behavior: auto; }
}

.rezension {
  flex: 0 0 min(22rem, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: var(--card-pad) 1.875rem;
  /* Weiss statt gruen getoent (Ansage Alex): Eine Rezension ist ein Zitat von aussen
     und keine Flaeche der Marke. Weiss mit Rand liest sich als Karte einer Plattform,
     die Toenung liess die fremden Stimmen wie eigene Textbausteine aussehen. */
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgb(20 45 28 / 0.05);
}

.rezension .sterne svg { width: 1.0625rem; height: 1.0625rem; }
.rezension p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #3F5A48;
  /* Lange Rezensionen nach acht Zeilen abschneiden, sonst stehen die Karten
     unterschiedlich hoch und die Spur wirkt zerfranst. Der vollstaendige Text
     steht hinter dem Link auf das Profil. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rezension footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.625rem;
  margin-block-start: auto;
  padding-block-start: 0.25rem;
}
.rezension__name { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.rezension__zeit { font-size: 0.9375rem; color: var(--color-text-muted); }

.notenband__text a { font-weight: 600; }

/* ═══════════ VERTRAUENSBAND ═══════════
   Schmales Band zwischen Hero und Praxisbild. Es hat zwei Aufgaben: Es trennt die
   getoente Hero-Flaeche vom randlosen Panorama, was vorher weder ohne Abstand noch
   mit einem weissen Streifen funktioniert hat, und es gibt der freigestellten Gruppe
   eine Kante, auf der sie steht.

   ⚠️ Der Inhalt darf nichts wiederholen, was direkt darueber oder darunter schon
   steht: Im Hero steht die Google-Note, unter dem Panorama die Kennzahlen. Drei
   Vertrauensblöcke auf einem Bildschirm arbeiten gegeneinander, genau daran sind die
   achtzehn Zuschriften gescheitert. Deshalb hier nur, was sonst nirgends oben steht:
   ihre Zulassung, die Diagnostik im Haus und das Einzugsgebiet.

   Bewusst KEINE Karten und keine Ueberschriften, nur eine Zeile je Angabe mit
   Trennstrichen. Mit Kasten und Ueberschrift waere es das uebliche Drei-Karten-Muster
   aus design-und-layout.md. */

/* Dunkel. Sand war einen Durchgang lang drin und wirkte zu leise: Zwischen der
   getoenten Hero-Flaeche und dem hellen Panorama sind zwei helle Toene zu wenig
   Unterschied, die Kante verschwindet fast. Die dunkle Flaeche trennt zuverlaessig
   und gibt der freigestellten Gruppe eine Linie, auf der sie steht.
   Farbe aus --color-dunkel, dem dunklen Gruen des Logos: Begruendung in _base.css. */
/* ⚠️ Weiss, nicht gefuellt. Der entscheidende Befund steht in Zahlen: Als dunkle
   Flaeche in der Knopffarbe war das Band 126.500 px gross, der Anrufknopf daneben
   10.900 - also das ZWOELFFACHE in derselben Farbe. Damit war nicht mehr der Knopf
   das staerkste Gruen im ersten Bildschirm, sondern der Balken, und der Anruf ist der
   einzige Conversion-Kanal dieser Seite.
   Die Trennwirkung kommt trotzdem zustande, weil hier nicht Abstand steht, sondern
   eine dritte Flaeche MIT INHALT. Genau das war die Lehre aus den frueheren
   Anlaeufen: Ein leerer weisser Streifen liest sich als Panne, ein weisser Streifen
   mit drei Angaben als Sektion. Weiss trennt hier zusaetzlich dadurch, dass es HELLER
   ist als beide Nachbarn, statt sich als drittes Band dazwischenzuschieben. */
.section--vertrauen {
  padding-block: 1.5rem;
  background-color: var(--color-bg);
  border-block: 1px solid var(--color-border);
}

.vertrauensband {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4.5rem;
  align-items: center;
}

/* ⚠️ Keine Icons hier. Drei Outline-Symbole nebeneinander sind das Muster, das auf
   jeder zweiten Seite steht und deshalb beliebig aussieht (Alex, 04.09.2026: "die
   sehen halt einfach scheisse und lieblos aus"). Die Unterscheidung macht stattdessen
   die Typografie: oben die Angabe in der Ueberschriftenschrift, darunter die
   Einordnung kleiner und leiser. Zwei klare Ebenen statt einer flachen Zeile mit
   einem Symbol davor. */
.vertrauensband > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

/* ⚠️ Der Trennstrich gehoert in die MITTE des Zwischenraums, nicht an die Rasterkante.
   Bis zum 04.09.2026 trugen die Spalten stattdessen ein Innenpadding, das an den
   Aussenraendern wegfiel: Der Text der ersten Spalte klebte am Satzspiegel, die
   Spalten 2 und 3 ruecken 37 px hinter ihrem Strich ein (gemessen). Dadurch sass der
   Text links und rechts eines Strichs unterschiedlich weit von ihm entfernt.
   Jetzt traegt das Raster den Abstand als column-gap, und der Strich haengt ueber ein
   negatives Margin genau in dessen Mitte. Das Padding schiebt den Text wieder auf den
   Spaltenanfang zurueck, damit die Spalten gleich breit bleiben und die Aussenkanten
   buendig zum Satzspiegel stehen. */
.vertrauensband > div + div {
  margin-inline-start: -2.25rem;
  padding-inline-start: 2.25rem;
}

.vertrauensband__wert {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  text-wrap: pretty;
}
.vertrauensband__dazu {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@media (max-width: 60rem) {
  .section--vertrauen { padding-block: 1.125rem; }
  /* grid-auto-rows: 1fr gibt allen drei Zeilen die Hoehe der hoechsten. Ohne das war
     der mittlere Punkt 20 px flacher als seine Nachbarn, weil er nur eine Textzeile
     traegt, und die Trennstriche standen dadurch in ungleichem Abstand. Die Icons
     selbst sassen bereits mittig, gemessen 0 px Versatz (Alex, 04.09.2026). */
  .vertrauensband { grid-template-columns: 1fr; grid-auto-rows: 1fr; column-gap: 0; }
  .vertrauensband > div { padding-block: 0.8125rem; justify-content: center; }
  .vertrauensband > div + div {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-border);
  }
}

/* Punkte unter der Spur: Bei fuenf Karten und drei sichtbaren verliert man sonst,
   wo man gerade ist. Sie sind zugleich Anzeige und Bedienung, ein Klick springt zur
   Karte. Wie die Pfeile bleiben sie verborgen, bis das Skript sie einschaltet. */

.rezensionen__punkte { display: none; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }
.rezensionen--bedienbar .rezensionen__punkte { display: flex; }

.rezensionen__punkt {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: #C6D8CC;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
/* Der aktive Punkt wird zum Strich statt nur dunkler: Farbe allein waere fuer
   Farbfehlsichtige kein Unterschied. */
.rezensionen__punkt[aria-current="true"] { width: 1.5rem; background-color: var(--color-primary); }
.rezensionen__punkt:hover { background-color: #8FB39B; }

/* Die Trefferflaeche ist groesser als der sichtbare Punkt, sonst ist er am Telefon
   nicht sicher zu treffen. */
.rezensionen__punkte { padding-block: 0.75rem; }
.rezensionen__punkt { box-shadow: 0 0 0 0.5rem transparent; }

/* ═══════════ BURGER-MENUE ═══════════

   Am Handy klappt die Navigation auf, am Desktop steht sie als Zeile im Kopf. Beides
   aus demselben details/summary-Markup, siehe nav.njk.

   ⚠️ Der Anrufknopf bleibt IMMER sichtbar und wandert nicht ins Menue. Er ist der
   einzige Conversion-Kanal der Seite; hinter zwei Fingertipps versteckt waere er die
   haeufigste verpasste Handlung. */

/* ⚠️ Diese Zeile stand bis zum 04.09.2026 ohne Media Query hier und blendete den
   Burger auch am Handy aus: `.site-nav > summary` hat die Spezifitaet 0-1-1 und
   schlaegt `.burger` mit 0-1-0, eine Media Query aendert daran nichts. Am Telefon war
   dadurch ueberhaupt kein Menue erreichbar (gemessen: display none). Der Summary
   gehoert nur am Desktop weg, dort steht die Liste als Zeile im Kopf. */
@media (min-width: 52.0625rem) {
  .site-nav > summary { display: none; }
  .site-nav { display: contents; }

  /* ⚠️ display: contents am details-Element allein reicht NICHT mehr. Chrome legt den
     Inhalt eines geschlossenen details seit Version 131 in das Pseudoelement
     ::details-content und setzt dort content-visibility: hidden. Das gilt unabhaengig
     davon, welches display das details selbst traegt, das Menue war am Desktop also
     unsichtbar (Breite 0, gemessen 04.09.2026). Erst das Zuruecksetzen hier holt es
     wieder in den Fluss. */
  .site-nav::details-content {
    content-visibility: visible;
    display: contents;
    block-size: auto;
  }

  /* Ohne diese Zeile stehen die Links am Desktop untereinander: _nav.css aus dem
     Master-Template setzt flex-direction: column und wird sonst nirgends aufgehoben. */
  /* Rechts neben dem Anrufknopf statt mittig (Alex, 05.09.2026). Das auto-Margin haengt die
     Liste an die rechte Seite; das Logo darf beim Scrollen schrumpfen, ohne dass sich das
     Menue bewegt, denn space-between verteilte vorher jede Breitenaenderung des Logos neu. */
  .site-nav__list { flex-direction: row; }
  /* ⚠️ Das Flex-Item ist das nav-Panel, nicht die Liste: details und ::details-content sind
     display: contents, das Panel darunter nicht. Ein Margin an der Liste hatte deshalb keine
     Wirkung, gemessen: Menue bei 481 px oben, 456 px gescrollt. Am Panel haelt es. */
  .site-nav__panel { margin-inline-start: auto; margin-inline-end: 2.5rem; }
}

@media (max-width: 52rem) {
  .site-header .container { position: relative; }


  /* ⚠️ Ohne Beschriftung. Mit dem Wort "Menue" daneben war der Burger 99 px breit,
     und Logo, Burger und Anrufknopf passten zusammen nicht mehr in eine Zeile: Der
     Anrufknopf brach in Zeile zwei um (gemessen bei 390 px, 04.09.2026). Er ist der
     einzige Conversion-Kanal und bleibt oben, also weicht der Burger. Als runder
     44-px-Knopf steht er jetzt als Paar neben dem Telefonknopf. */
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    list-style: none;
  }
  .burger__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Safari zeigt sonst das Aufklapp-Dreieck vor dem Inhalt. */
  .burger::-webkit-details-marker { display: none; }
  .burger::marker { content: ""; }

  .burger__icon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; }
  .burger__icon svg { width: 1.25rem; height: 1.25rem; }
  .burger__icon--zu { display: none; }
  .site-nav[open] .burger__icon--auf { display: none; }
  .site-nav[open] .burger__icon--zu  { display: grid; }
  .site-nav[open] .burger { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }

  /* Das Panel haengt am Kopf, nicht am Container: So laeuft es ueber die volle
     Fensterbreite und nicht nur ueber den Satzspiegel. */
  /* ⚠️ inset-inline stand hier auf dem negativen Container-Padding. Der Container ist
     am Handy aber schon fensterbreit und traegt das Padding innen, das Panel ragte
     dadurch 24 px ueber den rechten Rand hinaus und erzeugte Querscroll (gemessen:
     Dokumentbreite 414 statt 390). Null ist richtig: Die absolute Positionierung
     bezieht sich auf die Padding-Box, also genau auf die Fensterbreite. */
  .site-nav__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 1rem);
    z-index: var(--z-nav);
    padding: 0.5rem var(--container-padding) 1rem;
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    box-shadow: 0 18px 34px rgb(20 45 28 / 0.12);
  }

  /* align-items: center stammt aus der Desktop-Zeile und richtet in Spaltenrichtung
     horizontal aus: Die Links standen dadurch mittig und die Trennstriche waren nur
     so breit wie das laengste Wort (04.09.2026). stretch stellt die Zeilen wieder her. */
  .site-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li + li { border-block-start: 1px solid var(--color-border); }
  /* 3,25 rem Zeilenhoehe: klar ueber den 44 px, die am Telefon sicher zu treffen sind. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding-inline: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 0;
  }
  .site-nav__list a:hover,
  .site-nav__list a[aria-current="page"] { background: none; color: var(--color-primary); }
}




@media (max-width: 48rem) {
  /* Einspaltig: Zwei Spalten waeren hier je 150 px breit, da passt keine Adresse hinein. */
  .kontaktblock__daten { grid-template-columns: 1fr; }
  .kontaktblock__daten > div:nth-child(2) { padding-block-start: 1.25rem; border-block-start: 1px solid var(--color-border); }
  .kontaktblock__knopf { inset-block-end: 0.875rem; inset-inline-start: 0.875rem; font-size: 0.875rem; }
}

/* ═══════════ BAUSTEINE DER UNTERSEITEN ═══════════

   Eigene Datei, weil _sections.css schon die Startseite traegt und beim Suchen
   sonst niemand mehr findet, wo ein Block definiert ist. Die Regeln hier bauen
   ausschliesslich auf den Tokens aus _base.css und auf den Bauteilen, die es
   schon gibt: .section, .container, .sektionskopf, .eyebrow, .tel-btn, .pfeil,
   .kostenfeld, .terminfeld, .stimme. Neu ist nur, was die Startseite nicht hat.

   ⚠️ Kein Block bringt eigenes padding-block mit. Der Abstand kommt von .section
   (halbes --section-pad je Kante), sonst bricht die Kollaps-Logik. */


/* ─────────── Seitenkopf: der Hero der Unterseiten ───────────
   Zwei Spalten wie der Hero der Startseite, rechts aber kein Bild, sondern die
   Terminkarte. Grund: Fuer die sieben Leistungsseiten gibt es kein Bildmaterial
   (siehe ansagen-und-offene-punkte.md), und eine leere rechte Spalte waere
   schlechter als eine, die den einzigen Conversion-Kanal traegt. Die Karte steht
   damit auf jeder Unterseite oberhalb der Falz.
   ⚠️ Die Toenung gehoert an DIESEN Block, nicht an den Header. Der Header steht auf
   jeder Seite; eine getoente Kopfleiste ueber weissem Inhalt waere eine Kante ohne
   Grund. Der Seitenkopf dagegen ist Inhalt und darf eine Flaeche sein. */

/* Oben 5 rem wie beim Hero der Startseite (dort 6), unten das halbe --section-pad,
   damit der Uebergang zur ersten Sektion genauso gross ist wie jeder andere.
   ⚠️ Nicht volles Padding unten: Die Folgesektion bringt ihre Haelfte mit, sonst
   steht hier anderthalbfacher Abstand und der Kopf haengt allein (Kollaps-Raster,
   sektions-abstaende.md). */
.seitenkopf {
  background-color: var(--color-bg-tint);
  padding-block: 5rem calc(var(--section-pad) / 2);
}

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

.seitenkopf h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  margin-block-start: 0.75rem;
}

.seitenkopf__lead {
  margin-block-start: 1.25rem;
  max-width: 34rem;
  font-size: 1.15625rem;
  line-height: 1.62;
  color: #3F5A48;
}

/* Die drei Kurzfakten unter dem Lead. Bewusst als Textzeile mit Trennpunkten und
   nicht als drittes Kartenraster: Das Vertrauensband der Startseite macht dieselbe
   Aussage schon in Kartenform, eine zweite Fassung davon auf jeder Unterseite waere
   die Wiederholung, vor der design-und-layout.md warnt. */
/* Zwei je Zeile statt drei in einer Reihe: Auf /kontakt/ brachen die drei Fakten von
   selbst um, und genau das sah stimmiger aus (Alex, 05.09.2026). Jetzt ueberall so. */
/* Kurzfakten als Pillen: "richtige Elemente" statt Liste, Zeile oder Strich (Alex, 05.09.2026).
   Weiss mit Haarlinie, damit sie auf der Toenung stehen, ohne mit dem gruenen Anrufknopf
   zu konkurrieren. */
/* max-width, damit nie drei Pillen in einer Reihe stehen (Alex, 05.09.: "3 nebeneinander sieht nix aus"):
   zwei passen, die dritte bricht um. */
.seitenkopf__meta { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 1.75rem; max-width: 33rem; }
.seitenkopf__meta span {
  display: inline-block;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}


/* ─────────── Brotkrumen ───────────
   Sieben von fuenfzehn Wettbewerbern fuehren BreadcrumbList, bei Cavalcanti fehlte
   es ganz (On-Page-Deep-Scan 04.09.2026). Sichtbar UND als Schema, sonst ist es ein
   Markup ohne Entsprechung auf der Seite. */

/* ⚠️ Gemessen: Ohne diesen Abstand klebt die Brotkrume direkt auf der Rubrikzeile
   (0 px). Der Reset nimmt der Liste ihre Margins, und im Quelltext sieht man es nicht.
   24 px oberhalb der Rubrikzeile gegen 12 px zwischen Rubrik und Ueberschrift: Die
   Ueberschrift bindet sich damit sichtbar an ihre Rubrik und nicht an den Pfad. */
.pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  /* ⚠️ Der Abstand steht NACH dem Shorthand. Stand er davor, setzte `margin: 0`
     ihn stillschweigend wieder auf null: der Pfad klebte gemessen mit 0 px auf der
     Rubrikzeile, waehrend die Regel im Quelltext richtig aussah (die Shorthand-Falle
     aus design-und-layout.md, hier prompt hineingelaufen). */
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.pfad a { color: var(--color-text-muted); text-decoration: none; }
.pfad a:hover, .pfad a:focus-visible { color: var(--color-primary); text-decoration: underline; }
.pfad svg { width: 0.875rem; height: 0.875rem; flex: none; color: #9BB6A5; }
.pfad [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ─────────── Terminkarte im Seitenkopf ───────────
   Weiss auf der Toenung, damit sie sich abhebt, ohne eine zweite Farbe einzufuehren. */

.terminkarte {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.terminkarte__titel {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text);
}

.terminkarte .tel-btn { align-self: stretch; justify-content: center; }

.terminkarte dl { margin: 0; display: grid; gap: 0.75rem; width: 100%; }
.terminkarte dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.terminkarte dd { margin: 0; margin-block-start: 0.125rem; font-size: 1rem; line-height: 1.5; color: #3F5A48; }
.terminkarte dd a { color: var(--color-primary); font-weight: 600; }

.terminkarte__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.terminkarte__note .sterne svg { width: 1.0625rem; height: 1.0625rem; }
.terminkarte__note strong { color: var(--color-text); font-weight: 700; }

/* Die Trennlinie sitzt ueber dem Padding, damit sie durch die volle Kartenbreite
   laeuft statt nur unter dem Text zu enden. Dasselbe Mittel wie bei .kennzahlen. */
.terminkarte dl > div + div {
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

/* ─────────── Lauftext auf der Leseachse ───────────
   Fuer Abschnitte, die nur aus Absaetzen bestehen. Die Zeilenlaenge wird in ch
   begrenzt und nicht in Prozent, sonst wird sie mit dem Container zu lang. */

/* margin-inline: auto: Eine einzelne Lesespalte steht mittig, sonst bleibt die rechte
   Haelfte der Sektion leer (gesehen bei der GOT-Erklaerung auf /kontakt/, 05.09.2026). */
.lauftext { display: flex; flex-direction: column; gap: 1.125rem; max-width: 64ch; margin-inline: auto; }
.lauftext p { font-size: 1.125rem; line-height: 1.65; color: #3F5A48; }
.lauftext strong { color: var(--color-text); font-weight: 700; }
.lauftext a { font-weight: 600; }

/* Zwei Spalten fuer laengere Fliesstextabschnitte unter einem vollbreiten Kopf.
   Der Grund steht in design-und-layout.md: Ein Absatz auf der Leseachse unter einem
   vollbreiten Block laesst daneben eine Flaeche frei, die so breit ist wie er selbst. */
.lauftext--zwei {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem 3.5rem;
  align-items: start;
}

/* ─────────── Ablauf: nummerierte Schritte ───────────
   Eine echte Reihenfolge, deshalb <ol> und Zahlen. Senkrecht statt als Kartenreihe:
   Vier gleich grosse Karten nebeneinander sind genau das Muster, das jedes generierte
   Layout nimmt, und am Handy stapeln sie sich ohnehin. Die Linie zwischen den Zahlen
   macht die Abfolge sichtbar, ohne ein weiteres Bauteil einzufuehren. */

.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }

.ablauf > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.ablauf__nr {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
}

/* Der Verbinder laeuft von der Zahl bis zur naechsten, nicht bis zum Listenende:
   Sonst haengt unter dem letzten Schritt ein Strich ins Leere. */
.ablauf > li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: 3.125rem;
  inset-inline-start: 1.375rem;
  width: 1px;
  height: calc(100% - 1.5rem);
  background-color: var(--color-border);
}

.ablauf h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--color-text); }
.ablauf p { margin-block-start: 0.5rem; font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }

/* ─────────── Hund, Katze, Kaninchen ───────────
   Kein Kartenraster: Icon, Ueberschrift und Text stehen frei unter einer Haarlinie.
   Damit unterscheidet sich der Block von .leistungen auf der Startseite, statt ihn
   in anderer Farbe zu wiederholen. */

.tierarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3.5rem; }
.tierarten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }

.tierart { min-width: 0; padding-block-start: 1.5rem; border-block-start: 2px solid var(--color-border); }
/* Mit Foto: Das Bild ist die Kante des Blocks, die Haarlinie darueber waere eine zweite.
   3:2 wie das Referenzfoto, damit Hund, Katze und Kaninchen auf einer Hoehe enden. */
.tierart:has(.tierart__bild) { padding-block-start: 0; border-block-start: 0; }
.tierart__bild { margin-block-end: 1.25rem; }
.tierart__bild picture { display: contents; }
.tierart__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.tierart__kopf { display: flex; align-items: center; gap: 0.75rem; }
.tierart__kopf svg { width: 1.75rem; height: 1.75rem; flex: none; display: block; color: var(--color-primary-flaeche); }
.tierart h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.tierart p { margin-block-start: 0.875rem; font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }
.tierart p + p { margin-block-start: 0.75rem; }

/* ─────────── Hinweiskasten ───────────
   Das Rostrot ist auf der ganzen Website dem Notfall vorbehalten. Deshalb traegt der
   Kasten zwei Fassungen: warm nur dort, wo es wirklich eilt, sonst gruen getoent. */

.hinweis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

/* Kaesten mit Icon (Notfall) bekommen die Icon-Spalte zurueck: Icon links, Text daneben
   (Alex, 05.09.2026: "icon muss da links hin, nicht in eine zeile"). */
.hinweis:has(> svg) { grid-template-columns: 1.75rem minmax(0, 1fr); align-items: start; }
.hinweis > svg { width: 1.75rem; height: 1.75rem; display: block; margin-block-start: 0.1em; color: var(--color-primary-flaeche); }
.hinweis p { font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }
.hinweis p + p { margin-block-start: 0.75rem; }
.hinweis strong { color: var(--color-text); font-weight: 700; }

.hinweis--eilig { background-color: var(--color-bg-warm); border-color: #F3D9C9; }
.hinweis--eilig > svg { color: #A8431C; }
.hinweis--eilig p { color: #7A3A1D; }
.hinweis--eilig strong { color: var(--color-warm-text); }

/* ─────────── Symptomliste ───────────
   Anlaesse, bei denen jemand anrufen soll. Zweispaltig, weil es Stichpunkte sind
   und eine einspaltige Liste aus zehn kurzen Zeilen die Seite auseinanderzieht. */

/* Echte Punkteliste (Alex, 05.09.2026 abends: "mach doch ne ordentliche Liste draus, das
   kann doch so kein Mensch lesen"). Die Zeilen mit Haarlinie vom Nachmittag waren in der
   halben Breite neben einem Bild 75 px hoch je Punkt und lasen sich wie eine Tabelle.
   Jetzt ein kleiner Punkt in Markengruen, enge Zeilen, kein Rahmen. Zweispaltig in
   voller Breite, einspaltig neben einem Bild (siehe .bildblock). */
.anlaesse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 3rem; }
/* min-width: 0 gegen den Grid-Blowout: Ein langes Wort in einer 1fr-Spalte sprengt
   sonst den Container und erzeugt NUR am Handy Querscroll (design-und-layout.md).
   hyphens braucht dabei eine Grenze, sonst trennte der Browser am Handy auch "zu-sammen". */
.anlaesse li { position: relative; min-width: 0; padding-inline-start: 1.375rem; font-size: 1.0625rem; line-height: 1.55; color: #3F5A48; hyphens: auto; hyphenate-limit-chars: 12 4 4; }
/* Punkt auf der Mitte der ersten Zeile: halbe Zeilenhoehe (0.775em) minus halber Punkt. */
.anlaesse li::before { content: ""; position: absolute; inset-inline-start: 0.125rem; inset-block-start: calc(0.775em - 0.25rem); width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-primary); }
.anlaesse strong { color: var(--color-text); font-weight: 700; }

/* ⚠️ Warnzeichen tragen Rostrot, nicht Markengruen. Auf der Notfallseite stand die
   Liste der Alarmzeichen mit gruenen Warndreiecken da, und ein gruenes Warndreieck
   ist ein widersprüchliches Signal. Rostrot ist auf dieser Website dem Notfall
   vorbehalten, hier ist es also genau am richtigen Ort. */
.anlaesse--warnung li::before { background: rgb(168 67 28); }

.hinweis--eilig .anlaesse li::before { background: rgb(194 87 31); }
.hinweis--eilig .anlaesse li { color: #7A3A1D; }

/* ─────────── Eine einzelne Zuschrift ───────────
   Modifier auf .stimme statt eines zweiten Bauteils. Ohne Sterne, ohne Plattformlogo,
   ohne Review-Schema: Das sind Zuschriften, keine Plattformbewertungen (§ 5b UWG,
   siehe bewertungen-und-schema.md). Die Rubrikzeile sagt genau das. */

.stimme--solo { max-width: 46rem; margin-inline: auto; }
.stimme--solo .stimme__rubrik {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.stimme--solo blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }
.stimme--solo blockquote p + p { margin-block-start: 0.75rem; }

/* ─────────── Notdienst-Adressen ───────────
   Namen und Rufnummern der zustaendigen Kliniken. Als Zeilenliste mit Haarlinien,
   nicht als drei Karten: Es ist eine Liste, keine Auswahl zwischen Angeboten. */

.kliniken { margin: 0; display: grid; gap: 0; }
.kliniken > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  align-items: center;
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--color-border);
}
.kliniken > div:last-child { border-block-end: 1px solid var(--color-border); }
.kliniken dt { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--color-text); }
.kliniken dt span { display: block; margin-block-start: 0.25rem; font-size: 1rem; font-weight: 400; color: var(--color-text-muted); }
.kliniken dd { margin: 0; }

/* ─────────── Partnerlogos auf /ueber-mich/ ───────────
   Feste gleiche Luecken statt gleicher Zellen: Bei verschieden breiten Marken
   erzeugt flex:1 ungleiche Abstaende (design-und-layout.md, Logo-Reihen). */

/* margin-block-end: Die Logoreihe klebte am Hinweiskasten darunter (Alex, 05.09.2026: "da fehlt abstand unten"). */
/* Raster mit gleich breiten Zellen, jedes Logo mittig in seiner Zelle: verteilt sich ueber die
   Breite, ohne dass das letzte Logo an der Kante klebt, und bricht in ganzen Zeilen um statt
   zwei Logos an die Raender zu schieben (Alex, 05.09.2026). */
.partner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 2.5rem 1.5rem; list-style: none; margin: 0 0 2.5rem; padding: 0; }
.partner li { display: flex; align-items: center; justify-content: center; }
 /* Die Hoehe kommt je Logo aus _data/partner.js ueber eine Custom Property, nicht
   aus einer gemeinsamen max-height: Bei gleicher Hoehe wirkt eine breite Wortmarke
   doppelt so gross wie eine kompakte Bildmarke (bilder.md). */
.partner img { display: block; width: auto; height: auto; max-height: var(--logo-h, 2.5rem); max-width: 100%; }

/* ─────────── Zwei Bilder nebeneinander ───────────
   Fuer die Endoskopiebilder auf /hauslabor/: zwei Aufnahmen, die nur im Vergleich
   etwas zeigen, mit je einer erklaerenden Zeile darunter. */

/* Nach Fliesstext 2,5 rem Luft, sonst kleben die Bilder am Absatz (gemessen 0 px, Alex, 05.09.2026 abends). */
.lauftext + .bildpaar { margin-block-start: 2.5rem; }
.bildpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.bildpaar figure { margin: 0; }
.bildpaar img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.bildpaar figcaption { margin-block-start: 0.875rem; font-size: 1rem; line-height: 1.55; color: var(--color-text-muted); }

/* Bildunterschrift unter einem einzelnen Bild. Braucht Abstand zum Bild, sonst
   klebt sie daran (design-und-layout.md). */
.bildnachweis { margin-block-start: 0.875rem; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }


/* ═══════════ MOBIL ═══════════ */

@media (max-width: 60rem) {
  .seitenkopf { padding-block-start: 2.5rem; }
  .seitenkopf__grid { grid-template-columns: 1fr; gap: 2rem; }
  .seitenkopf__lead { max-width: none; }
  .lauftext--zwei { grid-template-columns: 1fr; gap: 1.125rem; }
  .tierarten, .tierarten--drei { grid-template-columns: 1fr; gap: 1.75rem; }
  .bildpaar { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 48rem) {
  /* Zwei Spalten Stichpunkte werden auf dem Telefon zu zwei sehr schmalen Saeulen,
     in denen jede Zeile umbricht. Ab hier untereinander. */
  .anlaesse { grid-template-columns: 1fr; gap: 0.75rem; }

  /* Icon oben, Text darunter waere hier falsch: Der Kasten hat nur EIN Icon fuer
     mehrere Absaetze. Es bleibt links und oben, damit es auf der ersten Zeile sitzt. */
  .hinweis { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.875rem; padding: 1.25rem 1.25rem; }
  .hinweis > svg { width: 1.5rem; height: 1.5rem; }

  /* Rufnummer unter den Klinikenamen statt daneben: nebeneinander bleiben fuer den
     Namen sonst rund 150 px, und jede Zeile bricht dreifach um. */
  .kliniken > div { grid-template-columns: 1fr; gap: 0.75rem; }

  .ablauf > li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
  .ablauf__nr { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .ablauf > li:not(:last-child)::before { inset-block-start: 2.625rem; inset-inline-start: 1.125rem; height: calc(100% - 1.125rem); }

  .terminkarte { padding: 1.5rem; }
}


/* ═══════════ FUSSZEILE: vierte Spalte mit den Leistungen ═══════════

   Die Fusszeile trug bis zum 04.09.2026 drei Spalten (Sprechzeiten, Praxis, Telefon).
   Mit den Unterseiten kommt die Leistungsliste dazu: Sie ist auf jeder Seite der
   zweite Weg zu allen sieben Seiten, neben dem Aufklappmenue im Kopf, und sie verteilt
   interne Links auf jede Seite der Website.

   ⚠️ Die Spaltentitel sind seit demselben Tag <p> und keine <h2> mehr. Sie sind
   Navigations-Labels und keine inhaltlichen Ueberschriften; als h2 bekam jede Seite
   drei bis vier belanglose Eintraege in ihre Ueberschriften-Gliederung (mobile-qa.md).
   Die Optik ist unveraendert, sie haengt an .site-footer__label. */

.site-footer__nap { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.site-footer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__liste a {
  font-size: 1rem;
  font-weight: 400;
  color: #DCEBE1;
  text-decoration: none;
}
.site-footer__liste a:hover,
.site-footer__liste a:focus-visible { color: #8FDDA6; text-decoration: underline; }

@media (max-width: 60rem) {
  .site-footer__nap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 34rem) {
  .site-footer__nap { grid-template-columns: 1fr; }
}

/* ═══════════ FIGURBLOCK: Text links, freigestellte Figur auf der Blockkante ═══════════
   Alex am 04.09.2026: "in nem block bei ueber mich aber muss halt anschnitt haben am
   blockende, sonst funzt es nicht". Das PNG endet dort, wo frueher die Tischplatte lag.
   Ohne eine Kante, auf der die Gruppe steht, schwebt sie.

   ⚠️ Die Sektion traegt deshalb WEDER oben noch unten Padding: Oben schliesst sie
   direkt an den Seitenkopf an und bildet mit ihm eine durchgehende Flaeche, unten
   muss die Figur die Kante beruehren. Der Abstand nach unten haengt an der Textspalte.
   Wer hier padding-block-end setzt, hebt die Figur an und der Anschnitt ist weg.

   ⚠️ Gleiche Toenung wie der Seitenkopf, und das ist Absicht: Zwischen beiden soll
   KEINE Kante liegen, die einzige Kante der Flaeche ist die, auf der die Figur steht.
   Der Rhythmus-Pruefer meldet das Paar sonst als "zwei gleiche Toenungen", deshalb
   steht es begruendet in seiner BEKANNT-Liste. */

.section--figur {
  background-color: var(--color-bg-tint);
  padding-block: 0;
}

.figurblock {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-areas:
    "kopf figur"
    "text figur";
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}

.figurblock__kopf { grid-area: kopf; display: flex; flex-direction: column; gap: 0.5rem; }
.figurblock__kopf h2 {
  font-size: clamp(1.4375rem, 1.15rem + 1.25vw, 2.125rem);
  font-weight: 800;
  line-height: 1.14;
}

/* Der halbe Sektionsabstand, die andere Haelfte bringt das Faktenband darunter mit
   (Kollaps-Raster, sektions-abstaende.md). */
.figurblock__text {
  grid-area: text;
  padding-block: 1.75rem calc(var(--section-pad) / 2);
}

/* ─────────── Stationen: der Weg als Zeitleiste ───────────
   Vier Absaetze am Stueck neben der Figur lasen sich als Textwueste (Alex,
   04.09.2026). Der Inhalt ist eine Abfolge in der Zeit, deshalb <ol> und eine
   Zeitleiste. Bewusst ANDERS als .ablauf auf den Leistungsseiten (Kreis mit Zahl,
   Marke neben dem Text) und anders als die Punktzeilen der naechsten Sektion
   (zweispaltige Definitionsreihe): hier ein Punkt auf der Linie und die Marke
   ueber dem Text. Drei Abfolgen in derselben Form waeren eine Wiederholung. */

/* ⚠️ padding-inline-start statt padding: 0. Die Liste traegt zugleich die Klasse
   .figurblock__text, und deren padding-block steht weiter oben in derselben Datei:
   Ein Shorthand haette es ueberschrieben, gemessen standen dann 0 px zwischen der
   Ueberschrift und der ersten Station (design-und-layout.md, CSS-Fallen). */
.stationen {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
  display: grid;
  gap: 1.625rem;
}

.stationen > li { position: relative; padding-inline-start: 1.875rem; }

/* Der Punkt sitzt auf der Grundlinie der Marke, nicht an deren Oberkante:
   0,45 rem sind die halbe Zeilenhoehe der Marke abzueglich des halben Punktes. */
.stationen > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-flaeche);
}

/* Die Linie laeuft von Punkt zu Punkt und endet vor dem letzten, sonst haengt
   unter der letzten Station ein Strich ins Leere. */
.stationen > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.21875rem;
  inset-block-start: 1.125rem;
  width: 1px;
  height: calc(100% - 0.5rem);
  background-color: var(--color-border);
}

.stationen__marke {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text);
  margin-block-end: 0.375rem;
}

.stationen p { font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }

/* Kein Rahmen, keine Flaeche, kein Radius: Die Figur steht direkt auf der Toenung,
   so wie sie es vorher im Hero der Startseite tat. Ein abgerundeter Kasten daherum
   liest sich als aufgeklebtes Foto. */
.figurblock__figur { grid-area: figur; align-self: end; }
.figurblock__figur img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline-start: auto;
}

@media (max-width: 60rem) {
  /* Ueberschrift, Text, Figur. Die Figur steht am Handy unten und beruehrt dort
     dieselbe Kante wie am Rechner. */
  .figurblock {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "text" "figur";
    row-gap: 0;
  }
  .figurblock__text { padding-block: 1.25rem 1.75rem; }
  .figurblock__figur img { max-width: 21rem; margin-inline: auto; }
}


/* ─────────── Zweispalter mit Hochformat-Bild ───────────
   Fuer den Weg-Block auf /ueber-mich/: vier Stationen links brauchen Hoehe, ein
   querformatiger Beschnitt (wie .bildrahmen sonst) liesse das Bild daneben verhungern. */
.zweispalt--hoch .bildrahmen img { aspect-ratio: 4 / 5; }

/* ─────────── Bildblock auf den Leistungsseiten (05.09.2026, dritte Fassung) ───────────
   Eyebrow und Ueberschrift als volle Zeile, darunter Vorspann plus Inhalt neben einem
   Hochformat-Bild. Der Vorspann steht IN der Textspalte, nicht als halbbreiter Absatz
   ueber einem breiten Block: Das waere das Text-Kacheln-Text-Sandwich aus
   design-und-layout.md, und genau das hat Alex zweimal abgelehnt (zweispaltiger Kopf
   "wie ein zweiter Hero", gestapelter Kopf "halber Einstieg"). Die Bildhoehe kommt aus
   dem Seitenverhaeltnis je Block, so gewaehlt, dass Text und Bild bei 1440 px auf
   einer Kante enden (scripts/bildblock-messen.mjs). Kein Strecken, kein Mitlaufen. */
.bildblock { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "kopf kopf" "text bild"; column-gap: 3.5rem; row-gap: 2rem; align-items: start; }
.bildblock--bild-links { grid-template-areas: "kopf kopf" "bild text"; }
.bildblock__kopf { grid-area: kopf; display: flex; flex-direction: column; gap: 0.5rem; max-width: 60ch; }
.bildblock__kopf h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
.bildblock__text { grid-area: text; min-width: 0; }
.bildblock__lead { font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); margin-block-end: 1.5rem; }
.bildblock__bild { grid-area: bild; min-width: 0; }
.bildblock__bild picture { display: contents; }
.bildblock__bild img { display: block; width: 100%; height: auto; aspect-ratio: var(--bb-ratio, 4 / 5); object-fit: cover; border-radius: var(--radius-lg); }
.bildblock--r-1-1 { --bb-ratio: 1 / 1; }
.bildblock--r-5-6 { --bb-ratio: 5 / 6; }
.bildblock--r-4-5 { --bb-ratio: 4 / 5; }
.bildblock--r-3-4 { --bb-ratio: 3 / 4; }
.bildblock--r-2-3 { --bb-ratio: 2 / 3; }
.bildblock--r-5-8 { --bb-ratio: 5 / 8; }
.bildblock--r-9-16 { --bb-ratio: 9 / 16; }
/* Feine Zwischenstufen, damit Text und Bild auf wenige Pixel genau enden. Alle aus
   2:3-Quellen beschnitten; 10:9 nur fuer das Monitorbild, dessen Motiv oben sitzt. */
.bildblock--r-10-9 { --bb-ratio: 10 / 9; }
.bildblock--r-7-10 { --bb-ratio: 7 / 10; }
.bildblock--r-5-7 { --bb-ratio: 5 / 7; }
.bildblock--r-3-5 { --bb-ratio: 3 / 5; }
.bildblock--r-4-7 { --bb-ratio: 4 / 7; }
.bildblock--r-8-15 { --bb-ratio: 8 / 15; }
.bildblock--fokus-oben .bildblock__bild img { object-position: 50% 30%; }
/* Zwei Spalten Stichpunkte, Text oder Punktzeilen passen nicht in eine halbe Breite. */
.bildblock .anlaesse, .bildblock .lauftext--zwei, .bildblock .punktzeilen { grid-template-columns: 1fr; }
/* Handy: Ueberschrift, Bild, Text (design-und-layout.md: bei langem Text gehoert das
   Bild direkt hinter die Ueberschrift). */
@media (max-width: 60rem) {
  .bildblock, .bildblock--bild-links { grid-template-columns: 1fr; grid-template-areas: "kopf" "bild" "text"; row-gap: 1.5rem; }
  .bildblock__bild img { aspect-ratio: 4 / 5; }
}

/* Lesetext ueber die Containerbreite, ohne Mittelachse: fuer die Partnerzeile auf /ueber-mich/ */
.lauftext--breit { max-width: none; margin-inline: 0; }
.lauftext--breit p { font-size: 1.0625rem; color: var(--color-text-muted); }

/* ─────────── Bildbuehne: ein Querformat in voller Breite ───────────
   Fuer Bloecke, deren Text laenger ist als ein Bild daneben hoch waere (/ueber-mich/,
   die Raeume): Kopf mit Einleitung, dann das Foto ueber die Containerbreite, darunter
   der Text in zwei Spalten. So schwebt kein Bild neben einer Textwand. */
.bildbuehne { margin-block: 0.5rem 2.5rem; }
.bildbuehne picture { display: contents; }
.bildbuehne img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-xl); }
@media (max-width: 60rem) { .bildbuehne img { aspect-ratio: 3 / 2; } .bildbuehne { margin-block: 0 1.5rem; } }

/* ─────────── Textblock: Ueberschrift links, Lesespalte rechts ───────────
   Fuer kurze Erklaerstuecke ohne Bild (80 bis 190 Woerter). Vorher standen sie als Kopf
   plus zwei Textspalten da, und zwei Spalten aus je einem Absatz lasen sich als
   Textflaeche (Alex, 05.09.2026 abends: "vom Layout noch bisschen weak"). Jetzt bleibt
   der Text in EINER Spalte mit Lesezeilenlaenge, die Ueberschrift steht daneben als
   Marginalie. Variante --antwort: Bei einer Frage in der Ueberschrift steht die Antwort
   als eigene Zeile darunter, gross und in Markenfarbe (Schreibstil-Regel 4: erst die
   Antwort, dann die Erklaerung). */
.textblock { display: grid; grid-template-columns: 0.92fr 1.08fr; column-gap: 3.5rem; align-items: start; }
.textblock__kopf { display: flex; flex-direction: column; gap: 0.5rem; }
.textblock__kopf h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
.textblock__antwort { font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); font-weight: 700; line-height: 1.3; color: var(--color-primary); margin-block-start: 0.75rem; max-width: 22ch; }  /* --color-primary ist hier das textsichere Gruen (#26803F, 4,5:1), ein eigenes Text-Token gibt es in diesem Projekt nicht */
.textblock__text { display: flex; flex-direction: column; gap: 1.125rem; max-width: 64ch; }
.textblock__text p { font-size: 1.125rem; line-height: 1.65; color: #3F5A48; }
.textblock__text .textblock__lead { color: var(--color-text-muted); }
.textblock__text strong { color: var(--color-text); font-weight: 700; }
.textblock__text a { font-weight: 600; }
@media (max-width: 60rem) { .textblock { grid-template-columns: 1fr; row-gap: 1.25rem; } }

/* ─────────── Zwei Tafeln nebeneinander ───────────
   Fuer Vergleiche wie Roentgen gegen Ultraschall: je Verfahren eine Tafel mit eigener
   Ueberschrift, statt zwei Absaetze mit fettem Anfang. */
.tafeln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-block-end: 2rem; }
.tafel { padding: 1.75rem 2rem; background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.tafel h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-block-end: 0.75rem; }
.tafel p { font-size: 1.0625rem; line-height: 1.62; color: #3F5A48; }
@media (max-width: 60rem) { .tafeln { grid-template-columns: 1fr; } .anlaesse { grid-template-columns: 1fr; } .kennzahlen--fakten { padding-inline: 1.5rem; } }

/* Stilles Zeichen ueber dem Abschied: gedeckt, nicht Markengruen, und nur hier. */
.abschied__zeichen { display: block; width: 2rem; height: 2rem; margin-block-end: 1rem; color: var(--color-text-muted); opacity: 0.7; }
.abschied__zeichen svg { display: block; width: 100%; height: 100%; }

/* Fliessende Spalten statt Raster: drei Absaetze verteilen sich gleichmaessig, statt links
   zwei und rechts einer (Abschied auf /ueber-mich/). */
.lauftext--fluss { display: block; columns: 2; column-gap: 3rem; }
.lauftext--fluss p { break-inside: avoid; margin-block-end: 1.125rem; }
@media (max-width: 60rem) { .lauftext--fluss { columns: 1; } }
@media (max-width: 60rem) { .partner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .partner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hinweiskasten direkt nach Fliesstext klebte an der letzten Zeile (gemessen 15 px auf /notfall/). */
/* Dieselbe Luft vor jedem Kasten, egal was davorsteht: Liste, Tierarten, Kliniken, Punktzeilen,
   Ablauf oder Bildblock. Fehlte fuer Tierarten (Impfung, gemessen 0 px, Alex, 05.09.2026 abends). */
.lauftext + .hinweis, .anlaesse + .hinweis, .tierarten + .hinweis, .kliniken + .hinweis, .punktzeilen + .hinweis, .ablauf + .hinweis, .bildblock + .hinweis { margin-block-start: 2.5rem; }

/* ═══════════ AUFKLAPPMENUE "LEISTUNGEN" ═══════════

   Eigene Datei und NACH _sections.css eingebunden, damit die Regeln hier zuletzt
   greifen. Waeren sie ans Ende von _sections.css gehaengt, stuenden ihre Basisregeln
   hinter den Media Queries des Burgers und wuerden diese bei gleicher Spezifitaet
   ueberschreiben (design-und-layout.md, CSS-Fallen).

   Technik: ein zweites details/summary im Listenpunkt. Auf- und Zuklappen macht der
   Browser, es gibt kein aria-expanded und kein Skript, das den Zustand nachfuehren
   muesste. menue.js schliesst zusaetzlich bei Escape und Klick daneben. */

/* Beide Breiten: der Marker des summary weg, sonst steht ein Dreieck davor. */
.untermenue > summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}
.untermenue > summary::-webkit-details-marker { display: none; }
.untermenue > summary::marker { content: ""; }
.untermenue > summary:hover { color: var(--color-primary); }
.untermenue > summary svg { width: 0.875rem; height: 0.875rem; flex: none; display: block; transition: transform 0.18s ease; }
.untermenue[open] > summary svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .untermenue > summary svg { transition: none; }
}

/* Steht die geoeffnete Seite im Aufklappmenue, faerbt sich auch der Punkt darueber.
   Sonst wirkt die Navigation auf jeder Leistungsseite so, als sei man nirgends. */
.hat-menue:has(a[aria-current="page"]) > .untermenue > summary { color: var(--color-primary); }

/* ⚠️ Der aktive und der ueberfahrene Punkt tragen nur Farbe, keine Flaeche. _nav.css
   aus dem Master-Template gibt beiden eine getoente Pille (`background: var(--color-bg-alt)`).
   Auf dieser Website ist die Pille aber dem Notfall vorbehalten; eine zweite gruene Pille
   daneben nimmt dem einzigen Signal seine Bedeutung. Auf der Startseite fiel das nicht
   auf, weil dort kein Menuepunkt der aktuellen Seite entspricht.
   `:not(.nav-signal)`, damit der Notfall seine warme Pille behaelt: Die Regel darunter
   hat dieselbe Spezifitaet und stuende sonst gegen sie. */
.site-nav__list a:not(.nav-signal):hover,
.site-nav__list a:not(.nav-signal)[aria-current="page"] { background: none; }

/* Der Notfall ist der einzige Punkt mit Farbe. Rostrot ist auf der ganzen Website
   dem Notfall vorbehalten, ein zweiter Ort dafuer naehme ihm die Bedeutung. */
.site-nav__list a.nav-signal {
  color: var(--color-warm-text);
  background-color: var(--color-bg-warm);
  padding: 0.4375rem 0.9375rem;
  border-radius: var(--radius-full);
}
.site-nav__list a.nav-signal:hover,
.site-nav__list a.nav-signal:focus-visible { color: #fff; background-color: #A8431C; }


/* ─────────── Desktop: das Panel faellt unter den Punkt ─────────── */

@media (min-width: 52.0625rem) {
  .hat-menue { position: relative; }

  .untermenue__liste {
    position: absolute;
    /* Der Abstand entspricht dem Kopf-Padding, damit das Panel unter der Kopfkante
       ansetzt und nicht mitten im Kopf haengt. */
    inset-block-start: calc(100% + 1.375rem);
    inset-inline-start: -0.5rem;
    z-index: var(--z-dropdown);
    min-width: 17rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    display: grid;
    gap: 0.125rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .untermenue__liste a {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
  }
  .untermenue__liste a:hover,
  .untermenue__liste a:focus-visible { background-color: var(--color-bg-alt); color: var(--color-primary); }
  .untermenue__liste a[aria-current="page"] { background-color: var(--color-bg-alt); }
}


/* ─────────── Handy: das Panel klappt im Burger auf ─────────── */

@media (max-width: 52rem) {
  .untermenue > summary {
    justify-content: space-between;
    /* 3,25 rem wie die uebrigen Menuezeilen, klar ueber den 44 px Trefferflaeche. */
    min-height: 3.25rem;
  }

  .untermenue__liste {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0 0 0 0.9375rem;
    border-inline-start: 2px solid var(--color-border);
  }

  /* Die Regel .site-nav__list li + li aus _sections.css trifft ueber den
     Nachfahren-Selektor AUCH die Punkte im Aufklappmenue und zeichnet dort eine
     zweite Linienreihe neben der Einrueckung. Hier zurueckgenommen. */
  .untermenue__liste li + li { border-block-start: 0; }

  .untermenue__liste a { min-height: 2.875rem; font-size: 1rem; font-weight: 500; }

  /* Der Notfall-Punkt ist am Handy eine Zeile wie die anderen, keine Pille: Als
     Pille in einer Zeilenliste sieht er aus wie ein verrutschter Knopf. Die Farbe
     traegt das Signal auch ohne Flaeche. */
  .site-nav__list a.nav-signal {
    background: none;
    padding-inline: 0;
    border-radius: 0;
    color: var(--color-warm-text);
  }
  .site-nav__list a.nav-signal:hover,
  .site-nav__list a.nav-signal:focus-visible { background: none; color: #A8431C; }
}

/* ═══════════ BLOG POST ═══════════ */

.post__header {
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.post__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-block-start: var(--space-sm);
}

/* ═══════════ COOKIE CONSENT OVERRIDES ═══════════ */

:root {
  --cc-bg: var(--color-bg);
  --cc-text: var(--color-text);
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-text: var(--color-on-primary);
  --cc-btn-primary-hover-bg: var(--color-primary-hover);
  --cc-btn-secondary-bg: var(--color-bg-alt);
  --cc-btn-secondary-text: var(--color-text);
  --cc-btn-secondary-hover-bg: var(--color-border);
  --cc-toggle-bg-on: var(--color-primary);
  --cc-link: var(--color-primary);
  --cc-link-hover: var(--color-primary-hover);
  --cc-cookie-category-block-bg: var(--color-bg-alt);
  --cc-overlay-bg: var(--color-overlay);
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius-xl);
}

.site-footer__cookie-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer__cookie-btn:hover {
  color: var(--color-primary);
}