/* ═══════════ 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;
  /* Eyebrow-Zeilen, Rubriken, Zaehler: 13 px in Versalien, also normale Textgroesse fuer WCAG.
     Das fruehere #4E8A61 kam auf 3,8 bis 4,0 (Lighthouse mobil, 06.09.2026); #427654 erreicht
     auf allen hellen Hintergruenden (Weiss, Gruen-Toenung, Sand, Rosé) mindestens 4,8. */
  --color-akzent-text: #427654;

  /* 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); }
/* Lesbarkeit: Rechtstexte liefen im vollen Container auf 140 Zeichen je Zeile (vetpetcare, 06.09.2026).
   Begrenzt werden die Kinder, nicht der Container, damit die Seite ihren linken Rand behaelt. */
.prose > :where(p, ul, ol, h2, h3, h4, blockquote, table) { max-width: 56ch; }  /* 56ch sind rund 75 Textzeichen je Zeile, weil 1ch (Breite der Null) etwa 1,4 Textzeichen entspricht */
.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: 6.25rem;       /* der sichtbare Abstand ZWISCHEN zwei Sektionen: 100 px (Alex, 06.09.2026: "ueberall 100 waeren gut"; davor 7rem, kurz 8rem) */
  --kanten-pad: 6.25rem;        /* sichtbare Luft an Farb- und Bildkanten (nach Hero und Seitenkopf, vor und nach getoenten Sektionen, um das Laborband): dieselben 100 px. Getrennt gehalten, weil die Kante ihren Abstand nicht aus dem halben Sektionsabstand bezieht, sondern ganz sichtbar tragen muss. */
  --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);
}

/* ─────────── Optischer Ausgleich an den Sektionskanten ───────────
   Der Container-Abstand allein ergibt keinen gleichen Weissraum. Ueber der Versalhoehe einer Zeile und unter
   ihrer Grundlinie sitzt unsichtbarer Raum (gemessen: 6,8 px ueber einer Eyebrow-Zeile, 5 bis 7 px unter einem
   Absatz), der zum Padding dazukommt. Endet eine Sektion mit einer sichtbaren Kante, also mit einem Kasten,
   einer Tabelle oder einem Bild, fehlt dieser Raum, und der Uebergang wirkt enger.
   ⚠️ Der Ausgleich ERGAENZT dort, wo der Raum fehlt, er zieht ihn nirgends ab. Die erste Fassung am
   06.09.2026 machte es umgekehrt und zog ihn ueberall ab, damit rechnerisch 100 px herauskommen: Danach war
   die ganze Seite 13 px enger als vorher (Alex: "es ist jetzt dichter zusammen als davor"). Der vereinbarte
   Abstand ist der zwischen zwei Textbloecken, und der bleibt unangetastet.
   Wer ein Bauteil baut, das eine Sektion mit einer Kante beginnt oder beendet, traegt es unten ein.
   Geprueft mit `node scripts/blockabstaende.mjs`. */
:root { --trim-oben: 0.4375rem; --trim-unten: 0.375rem; }
/* Sektionen, die mit einer sichtbaren Kante ENDEN: der fehlende Zeilenraum wird ergaenzt. */
.section > .container:has(> .hinweis:last-child),
.section > .container:has(> .vergleich:last-child),
.section > .container:has(> .stimme:last-child),
.section > .container:has(> .tafeln:last-child),
.section > .container:has(> .tierarten:last-child),
.section > .container:has(> .kennzahlen:last-child),
.section > .container:has(> .kliniken:last-child),
.section > .container:has(> .praxispunkte:last-child),
.section > .container:has(> .sprechstunde:last-child),
.section > .container:has(> .leistungen:last-child),
.section > .container:has(> .uebermich:last-child),
.section > .container:has(> .zitat:last-child),
.section > .container:has(> .rezensionen:last-child),
.section > .container:has(> .kontaktblock:last-child) { margin-block-end: var(--trim-unten); }
/* Sektionen, die mit einer Kante BEGINNEN: dasselbe oben. */
.section > .container:has(> .kennzahlen:first-child),
.section > .container:has(> .rezensionen:first-child) { margin-block-start: var(--trim-oben); }
/* Nach dem getoenten Kopf (Hero der Startseite, Seitenkopf der Unterseiten) voller Abstand statt halbem:
   Die getoente Haelfte liest sich nicht als Luft, sichtbar waren nur 64 px, zwischen zwei weissen Sektionen
   128 (Alex, 06.09.2026: "nach Hero ist das zu nah dran auf allen Seiten"). Die Aktuelles-Box dazwischen
   teilt diesen Abstand: 50 px ueber der Box, 50 px unter ihr, ohne Box die vollen 100 (Alex, 06.09.2026
   abends: "er soll oben 50 unten 50 Abstand haben, wenn er weg ist waeren das dann die 100"; gemessen
   davor 100 ueber und 50 unter der Box). Die weggeklickte Box bleibt als [hidden] im DOM stehen, deshalb
   zaehlt sie im Selektor ausdruecklich mit. */
.hero + .section, .seitenkopf + .section,
.hero + .aktuelles[hidden] + .section, .seitenkopf + .aktuelles[hidden] + .section { padding-block-start: var(--kanten-pad); }
/* Die Box haelt ueberall denselben Abstand zur Farbkante ueber ihr: einen halben Kantenabstand, egal ob ein
   Hero oder ein Seitenkopf darueber steht (Alex, 09.09.2026: "abstand ueber aktuelles nicht vorhanden die
   50 px", dann "sitewide ja?").
   Bis dahin stand hier 0 mit der Begruendung, der Seitenkopf trage unten schon den halben Sektionsabstand,
   zusammen waeren es 100 statt 50. Die Rechnung stimmt, sie misst aber die falsche Groesse: Sichtbar ist bei
   einer getoenten Sektion die Farbkante, nicht die Grundlinie des letzten Textes. Mit 0 beruehrte die Karte
   die gruene Flaeche. Der Weg vom letzten Text zur Karte ist jetzt 100 px, also ein normaler
   Sektionsabstand, und der von der Kante zur Karte 50 wie nach dem Hero. */
.seitenkopf + .aktuelles:not([hidden]) > .container { padding-block-start: calc(var(--kanten-pad) / 2); }
.hero + .aktuelles:not([hidden]) > .container { padding-block-start: calc(var(--kanten-pad) / 2); }
/* ⚠️ An einer FARBKANTE braucht die ungetoente Nachbarin den vollen Kantenabstand, nicht ihren halben. Die
   Kante wirkt selbst wie ein Block: Steht direkt dahinter eine Karte, klebt sie an der Farbflaeche (Alex,
   06.09.2026: "was ist da drueber, da ist doch zu wenig Abstand", ueber der Zuschrift unter dem gruenen
   Ueber-mich-Block, und "ueber und unter dem Block auch" zur gruenen Sprechstunde).
   Die Regel galt schon einmal, wurde am selben Tag entfernt, weil das Messskript sie als Abweichung meldete,
   und ist damit gestalterisch richtig aber messtechnisch unbequem gewesen. Sie bleibt, und das Messskript
   bewertet Farbkanten seither in einer eigenen Gruppe. Wichtig: JEDE getoente Klasse muss hier stehen, sonst
   sind gruene und sandfarbene Kanten wieder verschieden. */
.section--alt + .section, .section--tint + .section, .section--sand + .section, .section--kosten + .section { padding-block-start: var(--kanten-pad); }
.section:has(+ .section--alt), .section:has(+ .section--tint), .section:has(+ .section--sand), .section:has(+ .section--kosten) { padding-block-end: var(--kanten-pad); }

/* 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: var(--color-akzent-text);
  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: var(--color-akzent-text);
  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.0625rem;  /* 3 px sassen 2 px unter der Versalmitte (gemessen 06.09.2026, Alex: "nen Tick zu tief") */
  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 h3 a { color: inherit; text-decoration: none; }
.leistung h3 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(h3 a:hover) { border-color: var(--color-primary); }
.leistung:has(h3 a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* WhatsApp-Knopf der Notfallkachel (29.10.2026): ueber der gestreckten Kachel-Flaeche,
   damit er seinen eigenen Klick bekommt, und nur so breit wie sein Inhalt. */
.leistung__whatsapp { position: relative; z-index: 1; align-self: flex-start; margin-block-start: auto; }

/* ─────────── 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. */
/* Laborband als Teil des Praxisblocks (seit 06.09.2026, Alex: "gehoert Labor zu Was meine Praxis ausmacht"):
   4 rem ueber dem Bild ("ueberm Bild ok"), und die Sektion, die das Band traegt, bekommt unten 8 rem bis zur
   getoenten Kante ("danach nach dem Badge eher bisl mehr"). */
.labor { margin-block-start: 4rem; }
.section:has(> .labor) { padding-block-end: 8rem; }
.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(92%, 58rem);  /* dritte Verbreiterung: 44 rem waren "zu hoch, muss breiter", 50 rem noch immer. Der Text
     wurde dafuer gekuerzt, sonst steigt die Zeilenlaenge ueber das Lesbare (06.09.2026 spaet). */
  margin-block-start: -8rem;  /* rueckt dadurch einen Tick weiter ins Bild (Alex) */
  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;
}

/* Die Karte ist breit, der Text darin bleibt lesbar: ohne Grenze lief er bei 58 rem Kartenbreite auf 102
   Zeichen je Zeile (gemessen 06.09.2026), die Standards-Grenze liegt bei 90. */
.labor__karte p { font-size: 1.125rem; line-height: 1.6; color: #3F5A48; max-width: 62ch; }

.labor__karte h2, .labor__karte h3 { 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: var(--color-text-muted) /* vorher #7C9C87, Kontrast 2,97 (Lighthouse 06.09.2026) */; }
.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: var(--color-text-muted) /* vorher #7C9C87, Kontrast 2,97 (Lighthouse 06.09.2026) */; }
.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: var(--color-akzent-text);
  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; --kanten-pad: 3.5rem; --card-pad: 1.75rem; }


  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Ueberschrift und Erklaerung stehen mobil untereinander: 2 rem dazwischen las sich wie
     ein Sektionswechsel (Alex, 06.09.2026: "zuviel abstand nach headlines"). 1 rem wie in den
     uebrigen Koepfen (mittigerkopf, textblock). */
  .sektionskopf { grid-template-columns: 1fr; gap: 1rem; }
  /* 1,5 rem Rand fressen auf 390 px ein Achtel der Breite; 1,25 rem ist der uebliche Handy-Rand
     (mobile-qa.md). */
  :root { --container-padding: 1.25rem; }

  /* 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; }
}

/* ⚠️ Der Abstand zwischen den Menuepunkten ist eine Platzfrage, keine Geschmacksfrage.
   Mit vier Punkten trug die Zeile 1,75 rem Gap und 16 px Innenabstand je Link; mit dem
   fuenften Punkt ("Ratgeber", 09.09.2026) reichte der Satzspiegel nicht mehr: Erst fiel
   der Anrufknopf in eine zweite Zeile, nach `nowrap` brach stattdessen "Notfall" aus der
   Liste und die Rufnummer im Knopf auf zwei Zeilen. 1,25 rem Gap und 10 px Innenabstand
   sparen zusammen rund 90 px und bringen die Zeile mit Reserve unter. Die Klickflaeche
   bleibt dabei ueber der geforderten Mindestgroesse, weil die Hoehe unveraendert ist. */
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  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;
}
/* Ueberschreibt das 16-px-Padding aus _nav.css, siehe Begruendung ueber .site-nav__list.
   white-space: nowrap, damit ein zweiteiliger Punkt wie "Ueber mich" nicht im Wort
   umbricht, sobald es eng wird (gemessen bei 1100 px). Die Zeile wird dann breiter
   statt hoeher, und wenn sie nicht mehr passt, greift die Burger-Schwelle darunter. */
.site-nav__list > li > a,
.site-nav__list > li > .untermenue > summary { padding-inline: 0.625rem; white-space: nowrap; }

.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;
}

/* Die Rufnummer bricht nie: Ein Knopf mit "06172" ueber "1388044" sieht aus wie ein Fehler. */
.site-header__tel { white-space: nowrap; }
.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: 76rem) {
  /* 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; }
/* Oeffnungszeiten als Tabelle: Tage links in Weiss, rechts ein Zeitfenster je Zeile (30.09.2026) */
.site-footer__zeiten { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.site-footer__zeiten dt { font-weight: 600; color: #fff; }
.site-footer__zeiten dd { margin: 0; }
.site-footer__zeiten span { display: block; }
.site-footer__zeiten + p { margin-block-start: 0.5rem; }
/* .site-footer__nap p setzt die Margin des Labels auf null, der Abstand kam bisher aus p + p. Die
   Tabelle ist kein p, also hier dieselben 8 px wie vorher (gemessen 30.09.2026). */
.site-footer__label + .site-footer__zeiten { margin-block-start: 0.5rem; }
/* pretty: sonst stand bei 390 px "Tag." allein unter "Termine nach Vereinbarung, auch am selben" (30.09.2026) */
.site-footer__klein { font-size: 0.9375rem; text-wrap: pretty; }

.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, .hero__zeiten 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; }
/* Seit der Mittagspause (30.09.2026) ist die Zeitzeile laenger und bricht am Handy um. Ohne
   Ausgleich stand dort ein einzelnes "pm" oder "18h" in der zweiten Zeile (gemessen bei 390 px). */
.hero__meta > span:first-child { text-wrap: balance; }

.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); }

/* ─────────── Praxispunkte: Stichwort als Kapitaelchenzeile, Erklaerung darunter, zwei Spalten ───────────
   Seit 06.09.2026, Alex' Wahl aus drei Vorschlaegen. Vorher am selben Tag: acht Tabellenzeilen, dann sechs
   Punkte mit Phosphor-Icon, dann Nummern und eine Fassung ohne Symbol, alles verworfen. Das Stichwort ist
   eine H3 in der Anmutung der Zeilen ueber den Ueberschriften (.eyebrow), damit die Seite eine Handschrift hat. */
.praxispunkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 4rem; }
/* Drei Zeilen zu dritt nebeneinander (Fundtiere auf /voegel-heimtiere/): im Zweierraster stand die dritte allein
   links, rechts daneben Leere (08.09.2026). Am Handy greift die Einspaltigkeit des Grundrasters. */
.praxispunkte--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 3rem; }
.praxispunkt h3 { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.5; color: var(--color-akzent-text); }
.praxispunkt p { margin-block-start: 0.375rem; font-size: 1.0625rem; line-height: 1.6; color: #3F5A48; }
.praxispunkt p a { font-weight: 600; }
@media (max-width: 60rem) { .praxispunkte { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ─────────── 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); }
/* Die LETZTE Zeile jeder Spalte ohne Innenraum unten: Dort folgt keine Trennlinie mehr, die er zur naechsten
   Zeile abgrenzen muesste, also wirkt er als zusaetzlicher Leerraum am Blockende. Gemessen 06.09.2026: 22 px,
   die den sichtbaren Abstand zur naechsten Sektion von 100 auf 127 px trieben. */
.punktzeilen > div:nth-last-child(-n+2) { padding-block-end: 0; }
.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); }
/* Zweite Praxisnummer im Text darunter (29.10.2026): Weiss wie der Knopf, Gruen erreicht auf dem
   dunklen Grund die Kontrastschwelle nicht (siehe .tel-btn--gross). */
.terminfeld__aktion p a { color: #fff; font-weight: 600; }

/* 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: var(--color-akzent-text);
}

/* 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; }

/* Der Knopf ist 24 px gross (WCAG-Zielgroesse, Lighthouse target-size), der sichtbare Punkt
   sitzt als ::before darin. Vorher war der Knopf selbst 8 px, der transparente Schatten
   zaehlt als Trefferflaeche nicht mit (gemessen 06.09.2026). */
.rezensionen__punkt {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 0.2s ease;
}
.rezensionen__punkt::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: var(--radius-full);
  background-color: #C6D8CC;
  transition: background-color 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: 2.5rem; }
.rezensionen__punkt[aria-current="true"]::before { background-color: var(--color-primary); }
.rezensionen__punkt:hover::before { background-color: #8FB39B; }
.rezensionen__punkte { padding-block: 0.25rem; }

/* ═══════════ 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. */
/* ⚠️ Die Burger-Schwelle liegt bei 76rem (1104 px) und nicht mehr bei 52rem. Gemessen
   am 09.09.2026 ueber elf Fensterbreiten: Mit fuenf Menuepunkten, Logo und der vollen
   Rufnummer im Knopf laeuft die Kopfzeile ab 1050 px ueber (36 px), bei 1000 px sind es
   86 px. Der fuenfte Punkt ("Ratgeber") kostet rund 100 px und verschiebt die Schwelle
   damit von etwa 950 auf 1100 px. Die Alternative waere, den Anrufknopf im mittleren
   Bereich auf das Icon zu reduzieren wie am Handy; dagegen spricht, dass die Rufnummer
   der einzige Conversion-Kanal ist. Wer hier etwas aendert, misst mit
   .cache/qa/kopf-grenze.mjs nach, statt zu schaetzen.
   ⚠️ Seit 22.09.2026 bei 76rem (1216 px): Die zwei Sprachflaggen am Ende der Menuezeile
   (Alex: "mit Flagge") kosten rund 66 px. Gemessen mit .cache/qa/sprachen-schwelle.mjs:
   bei 1150 px lief die Zeile 18 px ueber, bei 1184 px stand der Anrufknopf an der
   Fensterkante, erst ab 1216 px haelt er seinen Rand von 24 px. Die Alternative, das
   Menue enger zu setzen, haette rund 60 px gebracht und die abgestimmten Abstaende
   der Zeile zerlegt; 1216 px liegt unter jeder gaengigen Laptopbreite (1280 aufwaerts). */
@media (min-width: 76.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: 1.5rem; }

  /* ⚠️ Am Desktop darf die Kopfzeile NICHT umbrechen. Der Container traegt
     `flex-wrap: wrap` aus dem Master-Template, und das ist am Handy richtig, am
     Desktop aber eine Falle: Sobald die gewuenschte Breite von Logo, Menue und
     Anrufknopf den Satzspiegel um wenige Pixel uebersteigt, faellt der Anrufknopf
     in eine zweite Zeile und der Kopf waechst von 86 auf 156 px. Genau das ist am
     09.09.2026 mit dem fuenften Menuepunkt ("Ratgeber") passiert, und es war vorher
     schon knapp: Mit vier Punkten lag die Zeile bei rund 1.150 von 1.152 px.
     `nowrap` laesst das Menue stattdessen um die fehlenden Pixel schrumpfen, was bei
     fuenf Punkten unsichtbar bleibt. Ab 76rem abwaerts greift die Regel nicht, dort
     steht ohnehin der Burger. */
  .site-header .container { flex-wrap: nowrap; }
  /* Logo und Anrufknopf schrumpfen nicht. Ohne das quetscht das Flex-Layout bei knapper
     Breite zuerst das Logo zusammen (gemessen bei 900 px: 226 auf 24 px). Wenn es eng
     wird, soll stattdessen die Burger-Schwelle greifen. */
  .site-header__logo, .site-header__tel { flex: none; }
  /* Und die Liste selbst auch nicht: Sonst rutscht der letzte Punkt unter den ersten. */
  .site-nav__list { flex-wrap: nowrap; }
}

@media (max-width: 76rem) {
  .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; }
}

/* ─────────── Mobil, Kopfabstaende (steht bewusst am Dateiende) ───────────
   Die Regeln fuer bewertungskopf, kostenfeld, mittigerkopf und terminfeld stehen weiter oben
   NACH dem grossen Mobil-Block und wuerden eine Ueberschreibung dort bei gleicher Spezifitaet
   schlagen. Gemessen am 06.09.2026 (scripts/mobil-messen.mjs): Bewertungskopf 65 px, Kostenfeld
   24 px, Zuschrift-Kopf 32 px, Terminfeld 28 px unter der Ueberschrift; Ziel sind 16 bis 24 px
   wie in den uebrigen Koepfen (Alex: "zuviel abstand nach headlines"). */
@media (max-width: 60rem) {
  .bewertungskopf > p { margin-block-start: 0; }
  .kostenfeld__kopf { gap: 1rem; }
  .kostenfeld__kopf .eyebrow { margin-block-end: -0.5rem; }
  .mittigerkopf { margin-block-end: 1.5rem; }
  .terminfeld__punkte { margin-block-start: 1.25rem; }
}

/* ═══════════ 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 {
  /* Dieselbe Groesse wie die H1 der Startseite (Alex, 06.09.2026: "H1 auf den Leistungsseiten ist groesser
     als Startseite, bitte angleichen"); vorher var(--text-h1) = 51 px gegen 44 px bei 1440. */
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.14;
  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. */
/* Schritte mit Icon im Seitenkopf (Notfallseite): drei Zeilen unter dem Lead, Icon auf der Versalhoehe. */
.seitenkopf__schritte { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.875rem; max-width: 34rem; }
.seitenkopf__schritte li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 1.0625rem; line-height: 1.55; color: #3F5A48; }
.seitenkopf__schritte strong { color: var(--color-text); font-weight: 700; }
.seitenkopf__schritt-icon { display: block; width: 1.375rem; height: 1.375rem; margin-block-start: 0.1875rem; color: var(--color-primary); }
.seitenkopf__schritt-icon svg { width: 100%; height: 100%; display: block; }
.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; }
/* Zweite Praxisnummer unter dem Knopf (29.10.2026), mittig wie der Knopf. */
.terminkarte__oder { margin: 0; align-self: stretch; text-align: center; font-size: 1rem; line-height: 1.5; color: #3F5A48; }
.terminkarte__oder a { color: var(--color-primary); font-weight: 600; }

.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; }
/* Notfallbox: dieselbe Karte in Warm (Alex, 06.09.2026: "so ne roetliche Notfallbox, das muss doch klar
   sein"). Farben wie beim Notfallblock der Kontaktseite: Rost auf Warm, gemessen 5,5:1 fuer #A8431C auf
   #FDF2EC, 6,1:1 fuer Weiss auf #A8431C. */
.terminkarte--notfall { background-color: var(--color-bg-warm); border-color: #F3D9C9; }
.terminkarte--notfall .terminkarte__titel { color: var(--color-warm-text); }
.terminkarte--notfall dt { color: #A8431C; }
.terminkarte--notfall dd { color: #5C3A2B; }
.terminkarte--notfall dd a { color: #A8431C; }
.tel-btn--notfall { background-color: #A8431C; }
.tel-btn--notfall:hover, .tel-btn--notfall:focus-visible { background-color: var(--color-warm-text); color: #fff; }

.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; }
/* Steht die Liste allein unter einem Sektionskopf (Fundtier-Ratgeber), spannte sie den ganzen Container:
   132 Zeichen je Zeile (06.09.2026). Im Bildblock begrenzt die Textspalte, hier muss es die Liste selbst. */
.sektionskopf + .ablauf { max-width: 40rem; }
/* Fuenf Schritte ohne Bild daneben liessen die rechte Haelfte des Containers leer (Kastration, Alex, 08.09.2026:
   "manche sehen aus als wenn da Bilder fehlen"). Zwei Spalten, spaltenweise gefuellt (1 bis 3 links, 4 und 5
   rechts), ohne die Verbindungslinie, die ueber den Spaltenbruch hinweg nichts mehr verbindet. Die Zeilenzahl ist
   fuer fuenf Schritte gerechnet; bei vier Schritten repeat(2, auto). */
.ablauf--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 3.5rem; }
.sektionskopf + .ablauf--zwei { max-width: none; }
.ablauf--zwei > li::before { display: none; }
@media (max-width: 60rem) { .ablauf--zwei { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .ablauf--zwei > li::before { display: block; } }  /* am Handy wieder eine Spalte, dort verbindet die Linie wieder */

.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 Sand. Sand und nicht Hellgruen, weil ein Hinweiskasten eine
   sachliche Erklaerung ist und Hellgruen in diesem Projekt der persoenlichen Stimme gehoert (design-richtung.md,
   Alex 06.09.2026 spaet: "Infoboxen im Beige eher, weil Hellgruen ist ja fuer persoenliche Sachen"). Die
   Zuschrift bleibt aus demselben Grund gruen: Sie ist eine Stimme, kein Sachtext. */

.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-sand);
  border: 1px solid #EFE3D2;  /* sandfarbene Haarlinie; die gruenliche --color-border liegt auf Sand daneben */
}

/* 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: #9A7B4F; }
.hinweis p { font-size: 1.0625rem; line-height: 1.62; color: #4A4034; }  /* warmes Dunkelbraun auf Sand, 8,4:1; das gruene #3F5A48 wirkte auf Sand schmutzig */
.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); }
/* Volle Box, ein Absatz, kurz: Der Kasten spannt den Container (1104 px), der Text laeuft ueber die ganze Breite
   und bleibt bei ein bis zwei Zeilen. Ein Absatz auf 54ch liess die rechte Haelfte leer ("hier ist Text nicht
   im ganzen Box"), Spaltensatz wollte Alex nicht (06.09.2026 spaet: "Breite bleibt bei allen Boxen, aber
   einspaltig, Text volle Breite, und kurz halten diese Boxeninhalte"). Die Kuerze ersetzt die Zeilenlaengen-
   Regel: Bei zwei Zeilen muss das Auge die naechste Zeile nicht suchen. Kaesten stehen immer in voller Breite
   unter einem Block, nie in der Textspalte eines Bildblocks: Dort hingen sie unter dem Bild, rechts Leere. */
.hinweis > div { columns: 1; }
.hinweis--zwei p + p { margin-block-start: 0.5rem; }

/* ─────────── 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. */

/* Kein eigener Grund, nur eine Haarlinie: Die Karte nimmt die Farbe der Sektion, in der sie steht (Alex,
   06.09.2026 spaet: "doch nicht gruen sondern Backgroundfarbe genau wie der Block eh hat"). Sieben Fassungen
   an einem Abend. `transparent` statt eines festen Werts, damit es auch stimmt, wenn die Sektion einmal
   getoent ist. Die Bewertungskarten der Startseite bleiben davon unberuehrt, sie zitieren eine Plattform. */
.stimme--solo { max-width: 46rem; margin-inline: auto; background-color: transparent; border: 1px solid var(--color-border); }
.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; }
/* Erste Reihe auf /notfall/: zwei Knoepfe (WhatsApp, Anruf) nebeneinander, am Handy untereinander */
.kliniken__direkt dd { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ─────────── 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. */
  /* ⚠️ Nur Kaesten MIT Icon bekommen die schmale Icon-Spalte. Ohne die :has-Bedingung landete
     bei Kaesten ohne Icon der Text in der 1,5-rem-Spalte, 24 px breit und tausende Pixel hoch,
     auf Roentgen, Impfung, Zahn, Kastration und Notfall (gemessen 06.09.2026, mobil-messen.mjs). */
  .hinweis { gap: 0.875rem; padding: 1.25rem 1.25rem; }
  .hinweis:has(> svg) { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .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-7-8 { --bb-ratio: 7 / 8; }  /* Nachsorge Kastration: Text 574 px, mit 5:6 stand die Tafel 27 px ueber der Kante, mit 4:5 48 (gemessen 08.09.2026) */
.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-8-7 { --bb-ratio: 8 / 7; }  /* Querformat neben kurzem Text (Notfall, Heimtiere): Text 456 px, Bild 458 px bei 524 breit, gemessen 06.09.2026 */
.bildblock--r-5-4 { --bb-ratio: 5 / 4; }
.bildblock--r-4-3 { --bb-ratio: 4 / 3; }
.bildblock--r-3-2 { --bb-ratio: 3 / 2; }
.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; }
/* Zwischenstufen, ausgerechnet fuer die Bildtafeln (416 px breit): Die groben Stufen darueber liessen fuenf
   Tafeln 21 bis 28 px ueber dem Textende enden. Werte aus scripts/bildblock-messen.mjs, nicht geraten. */
.bildblock--r-10-7 { --bb-ratio: 10 / 7; }
.bildblock--r-13-20 { --bb-ratio: 13 / 20; }
.bildblock--r-11-15 { --bb-ratio: 11 / 15; }
.bildblock--r-11-20 { --bb-ratio: 11 / 20; }
.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; }

/* ─────────── Bildtafel: eingefasstes Bild mit Erklaerung ───────────
   Entwurf 06.09.2026 (Alex: "generell sind die Bilder bisl gross auf den Landings", "mehr Praxis-Stil",
   "eingefasste Bilder mit Erklaerung"). Statt eines Fotos in halber Breite, das auf die Texthoehe gestreckt
   wird (bis 870 px hoch), steht das Bild in einer Tafel: schmalere Spalte, Rahmen mit Haarlinie und Rand,
   darunter eine Bildunterschrift mit fettem Stichwort und einem Satz, was zu sehen ist. Die Tafel ist ein
   eigenes Objekt wie eine Abbildung im Buch, sie muss deshalb nicht mit dem Text abschliessen. */
.bildblock--tafel { grid-template-columns: minmax(0, 1fr) 26rem; }
.bildblock--tafel.bildblock--bild-links { grid-template-columns: 26rem minmax(0, 1fr); }
/* Ohne Rahmen (Alex, 06.09.2026 spaet: "nur der Rahmen weg, Rest bleibt so"): Der Kasten um das Bild war ein
   Kasten mehr auf einer Seite voller Kaesten. Es bleiben die schmalere Spalte, das feste Format und die
   Bildunterschrift. */
/* Das Bild sitzt auf der VERSALLINIE der ersten Textzeile daneben, nicht auf deren Zeilenkasten: Gemessen lag
   die Bildkante 13 px darueber (halber Durchschuss 5,6 px, Abstand Ascender zu Versalhoehe 4,4 px, dazu 3 px
   Versatz der Spalten), und genau das las sich als "bisl zu hoch, minimal" (Alex, 06.09.2026 spaet). Am Handy
   steht das Bild ueber dem Text, dort faellt der Versatz weg. */
.bildtafel { margin: 0; }
.bildblock--tafel .bildtafel { margin-block-start: 0.8125rem; }
/* Das Format kommt aus der Ratio-Klasse des Bildblocks (--bb-ratio), damit Tafel und Textspalte auf einer Kante
   enden. Die Unterschrift zaehlt dabei mit, das Format wird also mit scripts/bildblock-messen.mjs bestimmt und
   nicht geschaetzt. Bis 06.09.2026 spaet stand hier ein festes 4:3 mit einer --hoch-Variante, das ignorierte die
   Ratio-Klassen und liess Tafeln bis 202 px ueber dem Textende enden (Alex: "die 100 px zwischen Bloecken werden
   nicht eingehalten"). */
.bildtafel img { display: block; width: 100%; height: auto; aspect-ratio: var(--bb-ratio, 4 / 3); object-fit: cover; border-radius: var(--radius-lg); }
.bildtafel figcaption { padding-block-start: 0.875rem; font-size: 1rem; line-height: 1.55; color: var(--color-text-muted); }
.bildtafel figcaption strong { color: var(--color-text); font-weight: 700; }
/* ─────────── Antwortblock: Frage, Antwort als Zeile, darunter Erklaerung und Texttafel ───────────
   Seit 06.09.2026 abends (Roentgen, Narkose). Kopf wie beim Bildblock ueber die ganze Breite, die Antwort
   gross und in Markenfarbe direkt unter der Frage (Schreibstil-Regel 4: erst die Antwort, dann die
   Erklaerung). Darunter links Vorspann und Punkteliste, rechts eine .tafel in derselben Spaltenbreite wie
   die Bildtafel. Die aeltere Fassung .textblock--antwort (Frage links, Lesespalte rechts) bleibt fuer Zahn. */
.antwortblock { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; grid-template-areas: "kopf tafel" "text tafel"; column-gap: 3.5rem; row-gap: 2rem; align-items: start; }
.antwortblock__kopf { grid-area: kopf; display: flex; flex-direction: column; gap: 0.5rem; }
.antwortblock__kopf h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
.antwortblock__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.5rem; }
.antwortblock__text { grid-area: text; }
/* Die Tafel steht mittig zur linken Spalte, nicht oben buendig: unten sass sie "zu tief", oben "zu hoch"
   (Alex, 06.09.2026 spaet, in zwei Runden). Dieselbe Loesung wie bei der Terminkarte der Sprechstunde. */
.antwortblock > .tafel { grid-area: tafel; align-self: center; }
.antwortblock__lead { font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); margin-block-end: 1.5rem; }
.antwortblock .anlaesse { grid-template-columns: 1fr; }
@media (max-width: 60rem) { .antwortblock { grid-template-columns: 1fr; grid-template-areas: "kopf" "text" "tafel"; row-gap: 1.5rem; } }

@media (max-width: 60rem) {
  .bildblock--tafel, .bildblock--tafel.bildblock--bild-links { grid-template-columns: 1fr; }
  .bildblock--tafel .bildtafel { margin-block-start: 0; }
  .bildtafel { max-width: 26rem; }
  /* Die allgemeine Mobilregel weiter unten setzt Bildblock-Bilder auf 4:5; die Tafel behaelt ihr Format,
     deshalb hier mit hoeherer Spezifitaet (gemessen 06.09.2026: ohne diese Zeile 4:5 statt 4:3 am Handy). */
  /* Die Ratio-Klassen sind fuer den Desktop gerechnet, damit Tafel und Textspalte auf einer Kante enden. Am
     Handy stehen Bild und Text untereinander, dort ergeben sie keinen Sinn: --r-11-20 wurde bei 350 px Breite
     636 px hoch und fuellte den halben Bildschirm (gemessen 06.09.2026). Deshalb hier zwei ruhige Formate,
     nach der Ausrichtung des Motivs: stehende Motive 4:5, liegende 4:3. Neue Ratio-Klasse also in die
     passende Liste eintragen. */
  .bildblock__bild .bildtafel img { aspect-ratio: 4 / 5; }
  .bildblock--r-4-3 .bildtafel img, .bildblock--r-5-4 .bildtafel img, .bildblock--r-3-2 .bildtafel img,
  .bildblock--r-8-7 .bildtafel img, .bildblock--r-10-9 .bildtafel img, .bildblock--r-10-7 .bildtafel img,
  .bildblock--r-1-1 .bildtafel img { aspect-ratio: 4 / 3; }
}
/* 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/ */
/* Bis 06.09.2026 max-width: none, damit lief der Absatz ueber den ganzen Container: 140 Zeichen je
   Zeile auf Ueber mich und im Fundtier-Ratgeber. 76ch sind rund 640 px bei 17 px, linksbuendig unter
   dem linksbuendigen Sektionskopf. */
.lauftext--breit { max-width: 56ch; 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; } }

/* ─────────── Sprechstunde als Angebot ───────────
   Seit 06.09.2026 spaet (Roentgen, Bewegungsapparat). Auf gruener Flaeche (persoenlich): links Titel, Vorspann
   und die Themen als Checkliste mit Haken (Icons hier ausdruecklich erlaubt, Alex: "Icons waeren da ok"),
   rechts die Terminkarte des Seitenkopfs mit Anruf-Knopf, denn der Anruf ist der einzige Weg zu diesem Termin. */
 /* Die Karte steht mittig zur Textspalte, nicht oben buendig (Alex, 06.09.2026 spaet: "zentrier das doch
   vertikal"). Die Ausrichtung auf die Versallinie der ersten Zeile, die davor hier stand, entfaellt damit. */
.sprechstunde { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 3.5rem; align-items: center; }
.sprechstunde__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; max-width: 60ch; }
.sprechstunde__lead { max-width: 60ch; margin-block: 0.75rem 1.25rem; font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); }
.sprechstunde__themen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.sprechstunde__themen li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.625rem; align-items: start; font-size: 1.0625rem; line-height: 1.55; color: #3F5A48; }
.sprechstunde__themen svg { width: 1.5rem; height: 1.5rem; color: var(--color-primary); margin-block-start: 0.05em; }
@media (max-width: 60rem) { .sprechstunde { grid-template-columns: 1fr; row-gap: 1.5rem; } }

/* ─────────── Gegenueberstellung: Tabelle mit Haekchen ───────────
   Seit 06.09.2026 abends (Roentgen gegen Ultraschall). Vorher zwei Tafeln mit je einem Absatz, die sich
   nicht vergleichen liessen (Alex: "die zwei Boxen machen keinen Sinn"). Kopfzeile mit Name und Kurzformel je
   Verfahren auf hellem Gruen (Icons dort wieder raus, Alex 06.09.2026 spaet: "Icons weg"), darunter je Frage eine Zeile: gruener Kreis mit Haken, wo das
   Verfahren stark ist, grauer Kreis mit Strich, wo nicht, und ein paar Worte dazu. Zeilen ohne Zeichen
   (Narkose, Strahlung) sind reine Fakten. */
.vergleich { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: #fff; overflow: hidden; }
.vergleich__tabelle { width: 100%; border-collapse: collapse; }
.vergleich__tabelle th, .vergleich__tabelle td { padding: 1.125rem 1.5rem; text-align: left; vertical-align: top; font-size: 1.0625rem; line-height: 1.5; }
/* Hellgruen, nicht Sand (Alex, 06.09.2026 spaet: "Tabelle nicht beige"). Die Farbe nach Sprechhaltung gilt fuer
   FLAECHEN, die wie eine Sektion gelesen werden, also auch fuer den Hinweiskasten. Eine Kopfzeile INNERHALB eines
   Bauteils setzt dagegen nur ab und gehoert zur Tabelle, nicht zur Seite. */
.vergleich__tabelle thead th { background-color: var(--color-bg-alt); vertical-align: bottom; }
.vergleich__tabelle tbody th, .vergleich__tabelle tbody td { border-block-start: 1px solid var(--color-border); }
.vergleich__frage { width: 38%; }
.vergleich__verfahren { width: 31%; }
.vergleich__name { display: block; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--color-text); }
.vergleich__claim { display: block; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-text-muted); margin-block-start: 0.125rem; }
.vergleich__tabelle tbody .vergleich__frage { font-weight: 700; color: var(--color-text); }
.vergleich__tabelle td { color: #3F5A48; }
.vergleich__mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-inline-end: 0.625rem; border-radius: 50%; background-color: var(--color-primary); color: #fff; vertical-align: -0.3em; }
.vergleich__mark svg { width: 0.875rem; height: 0.875rem; }
.vergleich__mark--nein { background-color: var(--color-border); color: var(--color-text-muted); }
.vergleich__fuss { margin-block-start: 1rem; max-width: 56ch; font-size: 1rem; line-height: 1.5; color: var(--color-text-muted); }  /* 56ch: rund 75 Zeichen je Zeile, ohne Grenze lief der Satz auf 95 (standards-check 06.09.2026) */
.vergleich__fuss a { font-weight: 600; }
.vergleich + .lauftext--zwei, .vergleich__fuss + .lauftext--zwei { margin-block-start: 2.5rem; }
/* Am Handy gestapelt: Drei Spalten auf 358 px liefen ueber den Rand (gemessen 06.09.2026, die dritte Spalte war
   abgeschnitten). Jede Frage wird ein Block, darunter je Verfahren eine Zeile mit Namen, Zeichen und Text. */
@media (max-width: 48rem) {
  .vergleich__tabelle, .vergleich__tabelle tbody, .vergleich__tabelle tbody tr, .vergleich__tabelle tbody th, .vergleich__tabelle tbody td { display: block; width: auto; }
  .vergleich__tabelle thead { display: block; }
  .vergleich__tabelle thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .vergleich__tabelle thead .vergleich__frage { display: none; }
  .vergleich__tabelle th, .vergleich__tabelle td { padding: 1rem 1.125rem; font-size: 1rem; }
  .vergleich__verfahren { width: auto; }
  .vergleich__name { font-size: 1.0625rem; }
  .vergleich__claim { font-size: 0.9375rem; }
  .vergleich__tabelle tbody tr { padding: 0.875rem 1.125rem 1rem; border-block-start: 1px solid var(--color-border); }
  .vergleich__tabelle tbody th, .vergleich__tabelle tbody td { border: 0; padding: 0; }
  .vergleich__tabelle tbody th { padding-block-end: 0.5rem; }
  .vergleich__tabelle tbody td { display: grid; grid-template-columns: 6.25rem 1.5rem minmax(0, 1fr); column-gap: 0.5rem; align-items: start; padding-block: 0.25rem; }
  .vergleich__tabelle tbody td::before { content: attr(data-verfahren); grid-column: 1; font-weight: 600; color: var(--color-text); }
  .vergleich__mark { grid-column: 2; margin: 0; }
  .vergleich__text { grid-column: 3; }
}

/* 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%; }

/* Abschied auf /ueber-mich/: Kopf links, Text rechts (Alex, 09.09.2026: "ok mach a").
   Drei Anlaeufe stehen dahinter, und die ersten beiden sind an derselben Stelle gescheitert:
   Wer den Text SELBST zweispaltig setzt (erst als Raster, dann als `columns: 2`), bekommt bei
   drei Absaetzen sehr ungleicher Laenge rechts unten ein Loch ueber die halbe Sektionshoehe.
   Der dritte Anlauf, eine einzelne Lesespalte links, hatte das Loch nicht mehr, dafuer stand
   die rechte Haelfte des Containers ueber die ganze Sektion leer ("das ist einfach text
   linksbuendig, kein plan der block funzt so nicht").
   Die Loesung trennt Kopf und Text statt den Text zu teilen: links eine schmale Spalte mit
   Zeichen, Eyebrow, Ueberschrift und Vorspann, rechts die drei Absaetze am Stueck auf
   Lesebreite. 54ch sind rund 72 Zeichen je Zeile und bleiben unter der Grenze von 90, die
   standards-check zieht. Unter 60rem einspaltig, sonst wird die Textspalte gequetscht. */
/* Fliessende Spalten statt Raster: Absaetze verteilen sich gleichmaessig, statt links zwei
   und rechts einer. Traegt seit 09.09.2026 nur noch den Abrechnungsblock auf /kontakt/, dort
   sind die fuenf Absaetze aehnlich lang und die Spalten laufen sauber aus. Der Abschied auf
   /ueber-mich/ ist damit gescheitert, siehe unten. */
.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; } }

.abschied { display: grid; grid-template-columns: 22rem minmax(0, 54ch); column-gap: 5rem; align-items: start; }
.abschied h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3125rem); font-weight: 800; line-height: 1.12; }
.abschied p { font-size: 1.0625rem; line-height: 1.62; color: #4A4034; }  /* warmes Dunkelbraun auf Sand, wie in den Sand-Kaesten */
.abschied__text p + p { margin-block-start: 1.125rem; }
.abschied__intro { margin-block-start: 1rem; font-size: 1.125rem; line-height: 1.62; color: var(--color-text-muted); }
/* Einspaltig, bevor die Textspalte unter die Lesebreite faellt: 22rem Kopf plus 5rem Abstand
   plus 54ch Text brauchen rund 1020 px, der Container fasst 1104. */
@media (max-width: 60rem) {
  .abschied { grid-template-columns: minmax(0, 1fr); row-gap: 1.125rem; }
  .abschied__kopf, .abschied__text { max-width: 56ch; }
}
@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, .tafeln + .hinweis { margin-block-start: 2.5rem; }
/* Lauftext nach der Klinikliste (Fundtier-Ratgeber, 06.09.2026): ohne die Regel klebte er mit 0 px an der Liste. */
.kliniken + .lauftext { margin-block-start: 2.5rem; }

/* ─────────── Aktuelles-Hinweis ───────────
   Die Box direkt unter dem Hero bzw. dem Seitenkopf (components/aktuelles.njk, aktuelles.js): Sand mit Haarlinie,
   Eyebrow in Warm, Titel, Text, Link, Schliessen-Knopf. Sand statt Gruen: Ein Hinweis ist eine Sache der
   Praxis, nichts Persoenliches (design-richtung.md). Verworfen am 06.09.2026: Karte oberhalb des Heros
   (schob ihn 216 px nach unten), eine schmale Leiste unter dem Menue und ein Fenster ueber der Seite. */
.aktuelles > .container { padding-block: 1.5rem 0; }
/* Weggeklickt: die Klasse setzt der Einzeiler im <head> vor dem ersten Paint (layouts/base.njk),
   nach dem Klick setzt aktuelles.js zusaetzlich hidden. Beides ohne Sprung. */
.aktuelles-weg .aktuelles { display: none; }
.aktuelles__karte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-bg-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.aktuelles__karte--bild { grid-template-columns: 12rem minmax(0, 1fr) auto; }
.aktuelles__bild { width: 12rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.aktuelles__text { display: flex; flex-direction: column; gap: 0.375rem; max-width: 62ch; }
.aktuelles__text .eyebrow { color: var(--color-warm-text); }
.aktuelles__titel { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--color-text); }
.aktuelles__text p:not(.aktuelles__titel) { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-muted); }
.aktuelles__text .pfeil { margin-block-start: 0.375rem; }
.aktuelles__zu {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--color-border); border-radius: 50%;
  background: #fff; color: var(--color-text); cursor: pointer;
}
.aktuelles__zu svg { width: 1.125rem; height: 1.125rem; }
.aktuelles__zu:hover { background: var(--color-bg-alt); }
.aktuelles__zu:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Einblenden beim Laden ("die sich einblendet"): kurz und leise, ohne Bewegung fuer wen es stoert. */
.aktuelles__karte { animation: aktuelles-ein 0.45s ease-out both; }
@keyframes aktuelles-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aktuelles__karte { animation: none; } }
@media (max-width: 48rem) {
  .aktuelles > .container { padding-block: 0; }
  /* Nach dem Hero traegt die Box ihren halben Abstand selbst, weil der Hero mit 0 px abschliesst. Diese Regel
     stand vorher nur im Desktop-Teil und wurde hier ueberschrieben: mobil blieben 28 statt 45 px (06.09.2026). */
  .hero + .aktuelles:not([hidden]) > .container,
  .seitenkopf + .aktuelles:not([hidden]) > .container { padding-block-start: calc(var(--kanten-pad) / 2); }
  .aktuelles__karte { grid-template-columns: minmax(0, 1fr) auto; padding: 1rem 1.125rem; gap: 0.75rem; }
  .aktuelles__karte--bild { grid-template-columns: minmax(0, 1fr) auto; }
  .aktuelles__bild { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; }
  .aktuelles__zu { width: 2.25rem; height: 2.25rem; }
}



/* ═══════════ 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: 76.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: 76rem) {
  .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. */
  /* ⚠️ Dieselbe linke Kante wie die uebrigen Punkte: Die tragen 0,625 rem Innenabstand
     aus `.site-nav__list > li > a`, der Notfall stand mit 0 zehn Pixel weiter links
     (Alex, 22.09.2026: "gleicher abstand wie alle items im burger menü von links"). */
  .site-nav__list a.nav-signal {
    background: none;
    padding-inline: 0.625rem;
    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; }
}

/* ═══════════ SPRACHWAHL ═══════════

   Flaggen mit Sprachname (22.09.2026, Alex: "mit Flagge") als letzter Punkt der
   Hauptnavigation, auf allen Seiten, auch auf /en/ und /pt/ (dort bleibt das deutsche
   Menue, Alex: "man kann doch einfach deutsches menü lassen"). Am Desktop nur die runden
   Flaggen, im Burger als Zeile mit Namen. Die Flaggen kommen aus flag-icons (quadratisch)
   und werden hier rund beschnitten, wie die Social-Icons im Fuss. Der Innenschatten
   zeichnet die Kante der weissen Felder nach (England im Union Jack), sonst laeuft die
   Flagge ins Weiss des Kopfes.

   NACH _menue.css eingebunden, damit .sprachwahl a die Regel .site-nav__list a bei
   gleicher Spezifitaet schlaegt (Schrift, Padding, nowrap). */

.sprachwahl {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Die Regel .site-nav__list li + li aus _sections.css trifft ueber den Nachfahren-Selektor
   auch die zweite Flagge und zeichnete im Burger eine kurze zweite Linie ueber "Português"
   (Screenshot 22.09.2026). Gleiche Spezifitaet, spaeter eingebunden, also gewinnt das hier. */
.sprachwahl li + li { border-block-start: 0; }

.sprachwahl a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.sprachwahl a:hover,
.sprachwahl a:focus-visible { color: var(--color-primary); background-color: var(--color-bg-alt); }

.sprachwahl__flagge {
  display: block;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(20 45 28 / 0.14);
}
.sprachwahl__flagge svg { display: block; width: 100%; height: 100%; }

/* ─────────── Desktop: nur die Flaggen, die Kopfzeile breiter als der Inhalt ─────────── */

@media (min-width: 76.0625rem) {
  /* In der Kopfzeile nur die Flaggen. Der Name steht im aria-label und im title. */
  .site-nav__list .sprachwahl__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Gleichmaessige Luecken (Alex, 22.09.2026: "zwischen den flaggen nen tick mehr abstand
     und links zu notfall bisl mehr, es muss gleichmäßig sein"). Gemessen vorher bei 1440 px:
     Pille zu Flagge 20, Flagge zu Flagge 12, Flagge zu Anrufknopf 50 px, weil dort neben
     dem Panel-Rand noch der Spaltenabstand des Kopf-Containers (2 rem) lag. Jetzt alle drei
     Luecken 24 px: Flaggenknopf ohne Innenabstand, 1,5 rem zwischen den Flaggen, 0,375 rem
     vor dem ersten Flaggenpunkt (plus 1,125 rem Listen-Gap = 24 px), Panel-Rand 1,5 rem zum
     Anrufknopf und der Spaltenabstand des Containers am Desktop auf 0, denn das auto-Margin
     des Panels haelt das Logo ohnehin auf Abstand. */
  .site-nav__list .sprachwahl a { padding: 0; gap: 0; }
  .site-nav__list .sprachwahl { gap: 1.5rem; }
  .site-nav__list .sprachwahl-punkt { margin-inline-start: 0.375rem; }
  .site-header .container { column-gap: 0; }

  /* Die Kopfzeile ist am Desktop etwas breiter als der Inhalt (Alex, 22.09.2026: "menü
     generell etwas breiter, der button dann bisschen weiter rechts", dann "nur bisschen
     breiter, 20 px oder so"). 75 rem statt der 72 rem des Satzspiegels: Logo und Anrufknopf
     stehen je 24 px ausserhalb der Textkante. Das reicht nicht allein fuer die zwei Flaggen
     (rund 66 px), deshalb gibt die Menuezeile 18 px dazu: Gap 1,125 statt 1,25 rem (fuenf
     Luecken, 10 px); der Spaltenabstand des Containers faellt weg (siehe oben). Gemessen:
     Knopf buendig auf der Kante bei 1217, 1280 und 1440 px. */
  .site-header .container { max-width: 75rem; }
  .site-nav__list { gap: 1.125rem; }
  .site-nav__panel { margin-inline-end: 1.5rem; }
}

@media (max-width: 76rem) {
  /* Im Burger eine Zeile wie die Menuepunkte, 3,25 rem hoch, mit Trennlinie darueber
     (li + li aus _sections.css). Die beiden Sprachen stehen nebeneinander mit Namen. */
  /* 0,625 rem Einzug wie die uebrigen Menuepunkte (Alex, 22.09.2026: "gleicher abstand wie
     alle items im burger menü von links"; die Flaggen standen buendig am Rand). */
  .sprachwahl-punkt .sprachwahl { min-height: 3.25rem; gap: 0.75rem; padding-inline-start: 0.625rem; }
  .sprachwahl-punkt .sprachwahl a { min-height: 2.75rem; padding-inline: 0 0.75rem; font-size: 1rem; }
}

/* ─────────── Eigennamen nicht trennen ─────────── */

/* Der Praxisname in der Hero-Ueberschrift der Sprachseiten: Mit lang="pt" trennte Chrome
   "Ca-valcanti" mitten im Namen (gemessen 22.09.2026 bei 390 px), mit lang="en" haette es
   "Kleintierpraxis" treffen koennen. Der Name bleibt am Stueck, der Umbruch faellt
   zwischen die Woerter. Der span traegt lang="de", weil es ein deutscher Name ist. */
.nicht-trennen { hyphens: manual; -webkit-hyphens: manual; }

/* ═══════════ RATGEBER ═══════════ */

/* Traegt die Uebersicht /ratgeber/ und die Beitraege darunter. Die Datei heisst
   weiter _blog.css, weil sie so im Master-Template steht und ein Umbenennen jeden
   kuenftigen `git merge upstream` an dieser Stelle kollidieren liesse. */

/* ─────────── Kopf eines Beitrags ───────────
   Dieselbe gruene Flaeche wie auf den Leistungsseiten, aber ohne die Terminkarte:
   Wer einen Ratgeber oeffnet, will erst lesen. Der Anruf steht am Seitenschluss.
   Deshalb hier kein Grid, sondern eine Textspalte mit Lesebreite. */

/* Ein Beitrag steht als zentrierte Lesespalte, nicht linksbuendig wie die Leistungsseiten
   (Alex, 09.09.2026: "ok wir machen 2", nach drei Entwuerfen). Der Anlass war das Titelbild
   ueber die volle Containerbreite: "die breiten bilder am anfang der beiträge ich glaub das
   sieht nix aus oder? sollten die nicht auch lieber content breite haben?". Die Bildbreite
   war dabei nur das Symptom. Die Lesespalte misst 646 px, der Container 1104, und rechts
   daneben stand ueber rund 6.000 px Seitenhoehe nichts; ein vollbreites Bild macht dieses
   Missverhaeltnis nur sichtbar. Zentriert ist der Weissraum links und rechts gleich, also
   gewollt statt uebrig. Der Textsatz selbst bleibt linksbuendig, nur die Spalte rueckt in
   die Mitte. Das gilt nur fuer Beitraege: Eine Landing ist eine andere Textsorte, der Bruch
   mit dem linksbuendigen Rest ist Absicht.

   --bildspalte ist die aeussere Achse: Bild, Kopf, Hinweiskasten und Tippfeld richten sich
   danach, der Fliesstext bleibt mit seinen 56ch schmaler und sitzt mittig darin. 47,5 rem
   sind 760 px, also je 57 px mehr als die Lesespalte auf jeder Seite. Wer die Schriftgroesse
   der Lesespalte aendert, misst den Wert neu (.cache/qa/beitrag-mess.mjs).
   --lesespalte bildet dieselben 56ch in rem ab (646 px bei 18 px Schrift). Gebraucht wird
   sie fuer die Zwischenueberschriften: Deren 56ch rechnen mit ihrer eigenen, groesseren
   Schrift und ergaben 1008 px, womit die H2 links aus der Spalte herausragte. */
.beitrag { --bildspalte: 47.5rem; --lesespalte: 40.375rem; }

.seitenkopf--beitrag { padding-block: 4.5rem calc(var(--section-pad) / 2); }
/* Alle Kopfzeilen auf dieselbe Achse: Eigene max-width je Element (22ch fuer die H1, 60ch
   fuer den Lead) haette zentriert drei verschiedene linke Kanten ergeben. */
.seitenkopf--beitrag .container > * { max-width: var(--bildspalte); margin-inline: auto; }

/* Herkunftszeile: Autorin, Datum, Lesezeit. Leiser als die Ueberschrift und ohne
   Pillen, weil sie kein Argument ist, sondern eine Angabe. Die Trennpunkte haengen als
   ::after am jeweils vorigen Kind, damit beim Umbruch der Punkt am Ende der Zeile
   stehen bleibt statt am Anfang der naechsten. Vorher stand hier ::before mit genau
   dieser Begruendung, es bewirkte aber das Gegenteil: Der erzeugte Punkt gehoert zum
   Kind und wandert mit ihm in die neue Zeile (sichtbar geworden, als die Spalte durch
   die Zentrierung auf 760 px schmaler wurde, 09.09.2026). */
.beitrag__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  margin-block-start: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.beitrag__meta > *:not(:last-child)::after { content: "·"; margin-inline-start: 0.875rem; color: var(--color-border); }
.beitrag__autorin { font-weight: 600; color: var(--color-text); }

/* ─────────── Aktuelles-Hinweis im Ratgeber ───────────
   Der Abstand ueber der Karte ist seit 09.09.2026 sitewide geregelt (_sections.css): ein
   halber Kantenabstand zur Farbflaeche darueber, gleich ob Hero oder Seitenkopf. Der Weg
   dorthin steht in HANDOFF-STAND.md, weil zweimal die falsche Groesse gemessen wurde:
   erst der Abstand zur Sektionskante (ueberall 0, sagt nichts), dann der vom letzten Text
   zur Karte (ueberall 50, sagt auch nichts). Sichtbar ist der Weg von der FARBKANTE. */

/* Die Karte steht im Beitrag auf der Bildspalte, sonst waere sie nach dem Umbau auf die
   zentrierte Lesespalte das einzige Element ueber die volle Containerbreite. */
.beitrag .aktuelles__karte { max-width: var(--bildspalte); margin-inline: auto; }

/* ─────────── Titelbild ───────────
   Auf der Bildspalte, nicht ueber die volle Containerbreite, und im Originalformat der
   Bilder (3:2, alle Quellen 1536x1024): So wird nichts weggeschnitten, und das Bild steht
   als breitestes Element leicht ueber der Lesespalte. Die Bildunterschrift traegt bei den
   echten Aufnahmen die fachliche Erklaerung und ist damit Inhalt, nicht Beiwerk. */
.bildbuehne--beitrag { max-width: var(--bildspalte); margin-block: 0 3rem; margin-inline: auto; }
.bildbuehne--beitrag img { aspect-ratio: 3 / 2; }
.bildbuehne--beitrag figcaption {
  padding-block-start: 0.875rem;
  max-width: 66ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.bildbuehne--beitrag figcaption strong { color: var(--color-text); font-weight: 700; }

/* ─────────── Lesespalte ───────────
   .prose bringt die Grundregeln mit (56ch je Zeile, rund 75 Zeichen, gemessen am
   06.09.2026 am Impressum). Hier kommt nur die Groesse dazu: 18 px statt 17, weil
   ein Ratgeber am Stueck gelesen wird und die Zielgruppe ueberwiegend 45+ ist. */
/* Zentriert wird ueber die Kinder, nicht ueber .beitrag__text selbst: Die Breiten stehen
   in .prose (56ch) und an den Bauteilen (Hinweiskasten, Rufkarten mit 56ch + 3,5 rem, damit
   ihr Innentext auf der Textkante sitzt). Eine Breite am Elternteil haette die breiteren
   Bauteile mitgekappt. */
.beitrag__text > * { margin-inline: auto; }
.beitrag__text p,
.beitrag__text li { font-size: 1.125rem; line-height: 1.68; color: #3F5A48; }
.beitrag__text strong { color: var(--color-text); font-weight: 700; }
.beitrag__text a { font-weight: 600; }
.beitrag__text > :first-child { margin-block-start: 0; }
.beitrag__text h2 { max-width: var(--lesespalte); font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); font-weight: 800; margin-block: 2.75rem 0.875rem; }
.beitrag__text h3 { max-width: var(--lesespalte); font-size: 1.25rem; font-weight: 700; margin-block: 2rem 0.625rem; }
.beitrag__text ul { list-style: none; padding-inline-start: 0; display: grid; gap: 0.625rem; margin-block: 0 1.75rem; max-width: 56ch; }
.beitrag__text ul li { position: relative; padding-inline-start: 1.375rem; margin: 0; }
.beitrag__text ul li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6875em;
  inset-inline-start: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-primary-flaeche);
}
.beitrag__text ol { padding-inline-start: 1.375rem; margin-block: 0 1.75rem; }
.beitrag__text ol li { margin-block-end: 0.625rem; }
.beitrag__text ol li::marker { font-weight: 700; color: var(--color-primary); }
/* Zitat aus einer fremden Quelle (Stellungnahme der Bundestieraerztekammer). Kein
   Schmuckelement: Der Strich markiert, dass hier jemand anders spricht. */
.beitrag__text blockquote {
  margin-block: 0 1.75rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--color-primary-flaeche);
  color: var(--color-text-muted);
}
.beitrag__text blockquote p:last-child { margin-block-end: 0; }
/* display: block plus overflow-x macht die Tabelle in sich scrollbar, statt die ganze
   Seite zu verbreitern. Ohne das schob die Lebensphasen-Tabelle das Handy-Layout nach
   rechts (gemessen 08.09.2026: horizontales Scrollen bei 390 px). Gilt auch fuer
   Tabellen, die die Kundin spaeter selbst schreibt. */
/* Die Tabelle scrollt in sich (Lebensphasen im Vorsorge-Beitrag, sonst schob sie das
   Handy-Layout nach rechts). Ihre Breite ist die Bildspalte, nicht 100 %: sonst liefe sie
   als einziges Element ueber die ganze Containerbreite. */
.beitrag__text table { border-collapse: collapse; margin-block: 0 1.75rem; display: block; max-width: min(100%, var(--bildspalte)); overflow-x: auto; }
.beitrag__text table tbody, .beitrag__text table thead { display: table; width: 100%; min-width: 34rem; }
.beitrag__text th, .beitrag__text td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  font-size: 1.0625rem;
  line-height: 1.5;
  border-block-end: 1px solid var(--color-border);
}
.beitrag__text th { font-weight: 700; color: var(--color-text); }

/* Der Kasten steht hier auf Lesebreite und nicht wie auf den Leistungsseiten ueber die
   volle Containerbreite. Grund: Dort steht er unter einem vollbreiten Block und schliesst
   an dessen Kante an (Alex, 06.09.2026), hier steht er unter einer 56ch-Textspalte, und
   ein vollbreiter Kasten waere genau der Bruch, den die Regel vermeiden will. Gemessen:
   ueber die volle Breite lief der Text auf 131 Zeichen je Zeile, erlaubt sind 90. */
.beitrag__hinweis { margin-block-start: 2.5rem; margin-inline: auto; max-width: calc(56ch + 3.5rem); }

/* ─────────── Mein Tipp als Tierärztin ───────────
   Ihr Schlusswort auf gruener Flaeche, mit Portrait. Kein Anrufknopf: der steht
   direkt darunter im Seitenschluss, zwei hintereinander waeren einer zu viel. */
.tippfeld {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1.75rem;
  align-items: start;
  max-width: var(--bildspalte);
  margin-inline: auto;
}
.tippfeld__portrait { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; object-position: 50% 50%; }
.tippfeld h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); font-weight: 800; line-height: 1.16; margin-block-start: 0.375rem; }
.tippfeld p { margin-block-start: 1rem; font-size: 1.125rem; line-height: 1.68; color: #3F5A48; max-width: 60ch; }
.tippfeld strong { color: var(--color-text); font-weight: 700; }
.tippfeld__signatur { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); }

/* ─────────── Aufmacher der Uebersicht ───────────
   Der neueste Beitrag mit breitem Bild links. Bild und Text stehen nebeneinander,
   nie uebereinander: kein Schleier ueber einem Foto (Projektregel). */
.beitragsaufmacher {
  display: grid;
  grid-template-columns: 34rem minmax(0, 1fr);
  column-gap: 3.5rem;
  align-items: center;
  padding-block-end: 3rem;
  margin-block-end: 3rem;
  border-block-end: 1px solid var(--color-border);
}
.beitragsaufmacher__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.beitragsaufmacher__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); font-weight: 800; line-height: 1.14; margin-block-start: 0.5rem; }
.beitragsaufmacher__text h2 a { color: inherit; text-decoration: none; }
.beitragsaufmacher__text h2 a:hover { color: var(--color-primary); }
.beitragsaufmacher__teaser { margin-block-start: 1rem; font-size: 1.125rem; line-height: 1.65; color: #3F5A48; max-width: 46ch; }
.beitragsaufmacher__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-block-start: 1rem;
  font-size: 1rem;
  color: var(--color-text-muted);
}
.beitragsaufmacher__meta > * + *::before { content: "·"; margin-inline-end: 0.875rem; color: var(--color-border); }
.beitragsaufmacher .pfeil { margin-block-start: 1.5rem; }
/* Die ganze Flaeche klickbar, der Link bleibt aber der Titel (ein Ziel, ein Anchor). */
.beitragsaufmacher { position: relative; }
.beitragsaufmacher h2 a::after { content: ""; position: absolute; inset: 0; }
.beitragsaufmacher:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 0.75rem; border-radius: var(--radius-lg); }

/* Weiterlesen steht auf derselben Achse wie der Beitrag, die beiden Karten deshalb
   untereinander statt nebeneinander: Zwei Spalten auf der Bildspalte liessen je 155 px
   Text neben dem Bild uebrig. Der Seitenschluss darunter bleibt vollbreit, er ist ein
   gemeinsames Bauteil aller Seiten. */
.beitrag__weiter .container > * { max-width: var(--bildspalte); margin-inline: auto; }
.beitrag__weiter .beitragsliste { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

/* ─────────── Liste der uebrigen Beitraege ───────────
   Zwei Spalten, in jeder Zeile Bild links und Text rechts. */
.beitragsliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }

.beitragskarte {
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
}
/* Ohne Bild rutscht der Text sonst in die Bildspalte und die Zeile steht schmal. */
.beitragskarte:not(:has(.beitragskarte__bild)) { grid-template-columns: minmax(0, 1fr); }
.beitragskarte__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.beitragskarte__datum { display: block; font-size: 0.9375rem; color: var(--color-text-muted); }
.beitragskarte h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin-block-start: 0.3125rem; }
.beitragskarte h3 a { color: inherit; text-decoration: none; }
.beitragskarte h3 a::after { content: ""; position: absolute; inset: 0; }
.beitragskarte:hover h3 a { color: var(--color-primary); }
.beitragskarte p { margin-block-start: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--color-text-muted); }
.beitragskarte:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 0.75rem; border-radius: var(--radius); }

.beitrag__zurueck { margin-block-start: 2.5rem; }

/* ─────────── Mobil ───────────
   Eine Spalte ab 60rem abwaerts. Das Bild der Karte bleibt links neben dem Text,
   nur schmaler: uebereinander gestapelt wuerde die Liste bei acht Beitraegen
   endlos lang, und das Bild ist hier Wiedererkennung, kein Hauptmotiv. */
@media (max-width: 60rem) {
  .beitragsaufmacher { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .beitragsliste { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 40rem) {
  .seitenkopf--beitrag { padding-block: 3rem calc(var(--section-pad) / 2); }
  .bildbuehne--beitrag { margin-block-end: 2rem; }
  .bildbuehne--beitrag img { aspect-ratio: 16 / 10; }
  /* Am Handy bleibt das Bild neben dem Text, wird aber groesser: bei 6,5 rem war auf
     den Motiven nichts mehr zu erkennen (gemessen 08.09.2026). Damit die Karte trotzdem
     kompakt bleibt, endet der Anrisstext nach drei Zeilen. */
  .beitragskarte { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; }
  .beitragskarte p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tippfeld { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .tippfeld__portrait { width: 4.5rem; height: 4.5rem; }
}


/* ─────────── Ihr Wort im Kopf der Uebersicht ───────────
   Steht dort, wo auf den Leistungsseiten die Terminkarte sitzt. Kein Kasten mit Rahmen:
   Das Archiv soll waermer wirken als eine Leistungsseite, nicht gleich formell (Alex,
   09.09.2026: "es muss auch bisl liebevoller sein das archiv"). Deshalb Portrait, ein
   Satz von ihr in groesserer Schrift und ihre Signatur, ohne Anfuehrungszeichen-Ornament
   und ohne Karte. */
.kopfstimme {
  margin: 0;
  display: grid;
  justify-items: start;
  gap: 1.125rem;
  max-width: 22rem;
  padding-inline-start: 1.75rem;
  border-inline-start: 2px solid var(--color-primary-flaeche);
}
.kopfstimme__portrait { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.kopfstimme blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.62;
  color: #3F5A48;
}
.kopfstimme figcaption {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}
.kopfstimme figcaption span {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-block-start: 0.125rem;
}

/* Ruhige Zeile zwischen Aufmacher und Liste. */
.beitragsliste__vorspann {
  margin-block-end: 2.5rem;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--color-text-muted);
}

@media (max-width: 60rem) {
  .kopfstimme { max-width: none; }
}


/* ─────────── Rufnummern als Einschub im Fliesstext ───────────
   Fuer den Fundtier-Beitrag: Wer ein verletztes Tier vor sich hat, braucht die Nummer
   an der Stelle, an der sie im Ablauf vorkommt, und nicht in einem Block am Seitenende
   (Alex, 09.09.2026: "nummer als interstitials dazwischen auch gut"). Deshalb stehen sie
   zwischen den Abschnitten statt darunter, auf Sand wie die Hinweiskaesten, weil Sand in
   diesem Projekt die ernste Tonlage traegt. */
.beitrag__text .rufkarten {
  max-width: calc(56ch + 3.5rem);
  margin-block: 2.25rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--color-bg-sand);
  border: 1px solid #EFE3D2;
  border-radius: var(--radius-lg);
}
.rufkarten__titel {
  font-family: var(--font-heading);
  font-size: 1.0625rem !important;
  font-weight: 800;
  color: var(--color-text) !important;
  margin-block-end: 1rem;
}
.beitrag__text .rufkarten ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.beitrag__text .rufkarten li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  padding-block: 0.875rem;
  margin: 0;
  padding-inline-start: 0;
}
.beitrag__text .rufkarten li::before { content: none; }
.beitrag__text .rufkarten li + li { border-block-start: 1px solid #EFE3D2; }
/* strong und span stehen in einem eigenen div, damit das Grid zwei Zellen hat
   (Text links, Knopf rechts) und nicht drei nebeneinander. */
.rufkarten li > div { min-width: 0; }
.rufkarten strong { display: block; font-size: 1.0625rem; line-height: 1.35; color: var(--color-text); }
.rufkarten span { display: block; margin-block-start: 0.1875rem; font-size: 1rem; line-height: 1.5; color: #6B5B47; }
/* Gleiche Breite fuer alle Knoepfe: Die Rufnummern sind unterschiedlich lang, und
   rechtsbuendig ausgerichtete Knoepfe in drei Breiten lesen sich als Unordnung. */
.rufkarten .tel-btn { white-space: nowrap; min-width: 10.5rem; justify-content: center; }

@media (max-width: 40rem) {
  .beitrag__text .rufkarten { padding: 1.25rem 1.25rem; }
  .beitrag__text .rufkarten li { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; justify-items: start; }
}

/* ═══════════ 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);
}