/* ==========================================================================
   Osteo-Care Bensheim — Heiko Dräger
   Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
     1.  Schriften (selbst gehostet)
     2.  Design-Tokens
     3.  Reset & Grundlagen
     4.  Typografie
     5.  Layout-Bausteine
     6.  Buttons
     7.  Header & Navigation
     8.  Hero
     9.  Karten (Zielgruppen, Leistungen)
     10. Selbst-Check
     11. Ablauf
     12. Über mich & Qualifikationen
     13. Kundenstimmen
     14. Preise
     15. FAQ
     16. Kontakt & Formular
     17. Footer
     18. Partner
     19. Rechtstexte / Fließtextseiten
     20. Hilfsklassen
     21. Bewegungsreduktion & Druck

   FARBREGEL — bitte beim Bearbeiten beachten:
   Gelb (#FFC309) hat auf Weiß nur 1,6:1 Kontrast und ist als Textfarbe
   unlesbar. Gelb wird deshalb ausschließlich als Buttonfläche mit blauer
   Schrift (#32458C, 5,5:1) oder als schmaler Akzentbalken verwendet.

   SIGNATUR — zwei Motive aus Logo und Favicon, konsequent weitergeführt:
   1. „Fokuspunkt": die vier Eckklammern aus dem Logo (dort umrahmen sie den
      Namen) tauchen als Hover-/Fokus-Akzent auf Buttons und als feste Rahmung
      um die Praxisfotos wieder auf — passend zum Beruf: präzise den Punkt
      finden, der behandelt werden muss.
   2. „Wirbelsäule": das Favicon-Symbol (Linie mit drei Querstreben) ersetzt
      den schlichten Strich vor jeder Rubrik (.eyebrow) und erscheint riesig
      und sehr blass als Wasserzeichen in den blauen Flächen.
   Beide werden rein mit CSS-Gradienten gezeichnet (kein zusätzliches Bild,
   kein zusätzlicher Request) und tragen keine Textinformation — sie ändern
   an keiner Stelle den Inhalt, nur die Anmutung.
   ========================================================================== */


/* 1. Schriften ============================================================ */
/* Bellefair ist selbst gehostet — Google Fonts per CDN würde die IP-Adresse
   der Besucher in die USA übertragen (DSGVO, LG München 3 O 17493/20).
   Hinweis: Bellefair gibt es NUR in Regular 400. Kein Bold verwenden —
   der Browser würde sonst ein verzerrtes Faux-Bold erzeugen. */

@font-face {
  font-family: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bellefair-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: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bellefair-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;
}


/* 2. Design-Tokens ======================================================== */

:root {
  /* Markenfarben */
  --primary:        #32458C;   /* Dunkelblau  — Flächen, Überschriften, Links */
  --primary-dark:   #26356E;   /* Hover auf Blau */
  --primary-mid:    #4557A0;   /* Verläufe */
  --primary-tint:   #EDF0F8;   /* sehr helle Blaufläche */
  --secondary:      #FFC309;   /* Gelb — ausschließlich CTA & Akzent */
  --secondary-dark: #E9B000;   /* Hover auf Gelb */
  --tertiary:       #F7F9FA;   /* Fast-Weiß — Sektionswechsel */

  /* Text */
  --ink:        #1A1F33;       /* Fließtext        16,3:1 auf Weiß */
  --ink-soft:   #4A5163;       /* Sekundärtext      7,9:1 auf Weiß */
  --ink-faint:  #6B7385;       /* Meta, Bildunterschriften */
  --on-primary: #FFFFFF;

  /* Linien & Flächen */
  --surface:      #FFFFFF;
  --border:       #DEE3ED;
  --border-strong:#C3CBDC;
  --ink-deep:     #131A33;   /* tiefstes Marken-Navy — Fußbereich, große Flächen */

  /* Statusfarben (Selbst-Check) */
  --warn-bg:     #FFF6E0;
  --warn-border: #E0A500;   /* nur für Rahmen/Flächen, nicht für Symbole */
  --warn-icon:   #A66A00;   /* Warnsymbole: 4,2:1 auf hellem Grund (WCAG 1.4.11) */
  --warn-ink:    #6B4A00;

  /* Radien */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-btn: 10px;    /* Buttons: bewusst kein Pill-Radius — passt zu den
                        Fokuspunkt-Klammern, siehe Abschnitt 6 */

  /* Schatten — bewusst zurückhaltend, ruhige Anmutung */
  --shadow-sm: 0 1px 2px rgba(26, 31, 51, .06);
  --shadow-md: 0 4px 16px rgba(26, 31, 51, .07);
  --shadow-lg: 0 12px 40px rgba(26, 31, 51, .10);
  --shadow-brand: 0 14px 34px rgba(50, 69, 140, .22);  /* markenfarbener
                     Schatten für Hover-Zustände auf Buttons und Karten */

  /* Abstände */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Maße */
  --container: 1180px;
  --measure: 68ch;             /* angenehme Lesebreite */
  --header-h: 72px;

  /* Schriftfamilien */
  --font-display: 'Bellefair', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, Georgia, serif;
  /* Segoe UI stand vorher hinter Arial — auf Windows existieren beide, Arial
     gewinnt dann aber immer zuerst und Segoe UI kommt nie zum Zug. Jetzt vor
     Arial: Windows bekommt seine native Schrift, macOS weiterhin -apple-system. */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
               Helvetica, Arial, sans-serif;

  /* Fluide Schriftgrößen */
  --fs-hero:  clamp(2.5rem, 1.75rem + 2.6vw, 4.15rem);
  --fs-h1:    clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2:    clamp(1.9rem,  1.4rem + 2vw,  2.9rem);
  --fs-h3:    clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  --fs-lead:  clamp(1.075rem, 1rem + .35vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-sm:    .9375rem;
  --fs-xs:    .8125rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* 3. Reset & Grundlagen =================================================== */

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

/* Das hidden-Attribut kommt vom Browser nur als schwaches display:none.
   Jede eigene display-Regel (z. B. .btn { display: inline-flex }) schlägt es
   sonst — dann bleiben ausgeblendete Elemente sichtbar. Deshalb hier
   ausdrücklich durchsetzen. Betrifft im Selbst-Check die Zurück-Taste sowie
   das Ausblenden des Formulars, sobald die Auswertung erscheint. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Muss zur tatsächlichen Höhe der klebenden Kopfzeile passen, sonst
     verschwinden Sprungziele darunter. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 8rem; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

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

/* Sichtbarer Fokus — nie entfernen, das ist die Tastatur-Bedienbarkeit */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:where(header, footer) :focus-visible { outline-color: var(--secondary); }

::selection { background: var(--secondary); color: var(--primary); }

/* Sprunglink für Screenreader & Tastatur */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }


/* 4. Typografie =========================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;              /* Bellefair hat nur diesen Schnitt */
  color: var(--primary);
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.15rem; line-height: 1.35; }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }

strong, b { font-weight: 600; }

/* <address> ist im Browser standardmäßig kursiv — für eine Praxisadresse
   unpassend. Gilt für Kontaktbereich, Fußzeile, Impressum und Datenschutz. */
address { font-style: normal; }

/* Kleine Rubrik über den Überschriften */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--sp-4);
}
/* Wirbelsäulen-Glyph statt schlichtem Strich — dieselbe Form wie im Favicon,
   rein aus CSS-Gradienten gezeichnet (kein zusätzliches Bild). */
.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary));
  background-size: 2px 14px, 8px 2px, 12px 2px, 8px 2px;
  background-position: 8px 2px, 5px 5px, 3px 8px, 5px 12px;
}
.eyebrow--light { color: rgba(255, 255, 255, .85); }

blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--primary);
}


/* 5. Layout-Bausteine ===================================================== */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .container { width: min(100% - 4rem, var(--container)); }
}

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--tint { background: var(--tertiary); }
.section--blue {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: rgba(255, 255, 255, .9);
}
/* Riesiges, sehr blasses Wirbelsäulen-Wasserzeichen — dieselbe Form wie das
   Eyebrow-Symbol und das Favicon, hier nur als stille Flächentextur. */
.section--blue::before {
  content: '';
  position: absolute;
  inset: auto -6rem -8rem auto;
  width: 26rem;
  height: 26rem;
  pointer-events: none;
  opacity: .05;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 14px 220px, 100px 14px, 150px 14px, 100px 14px;
  background-position: 130px 20px, 88px 60px, 63px 120px, 88px 180px;
}
.section--blue .container { position: relative; }
.section--blue h2,
.section--blue h3 { color: var(--on-primary); }
.section--blue .lead { color: rgba(255, 255, 255, .82); }
/* Nur Textlinks einfärben. Ohne :not(.btn) würde diese Regel (0,1,1) die
   Button-Farbe (0,1,0) überstimmen — der gelbe Buchungsbutton bekäme gelbe
   Schrift auf gelbem Grund und wäre unlesbar. */
.section--blue a:not(.btn) { color: var(--secondary); }

.section-head { max-width: 44rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-inline: auto; }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Bildplatzhalter — bleibt sichtbar, bis echte Fotos geliefert sind.
   Siehe assets/images/BILDER-CHECKLISTE.md */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background:
    repeating-linear-gradient(135deg,
      var(--primary-tint) 0 12px,
      #E4E9F5 12px 24px);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--primary);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  min-height: 220px;
}
.ph span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.ph--portrait { aspect-ratio: 4 / 5; min-height: 0; }
.ph--wide     { aspect-ratio: 16 / 10; min-height: 0; }
.ph--square   { aspect-ratio: 1; min-height: 0; }


/* 6. Buttons ============================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: .95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }

/* Fokuspunkt-Klammern — dieselben vier Ecken wie im Logo, ziehen sich beim
   Hover/Fokus um den Button zusammen. Rein dekorativ (aria-hidden über
   pointer-events + kein Inhalt), ändert nichts an Bedienbarkeit oder Fokusring. */
.btn::after {
  content: '';
  position: absolute;
  inset: -7px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary));
  background-size: 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px;
  background-position: top left, top left, top right, top right,
                        bottom right, bottom right, bottom left, bottom left;
}
.btn:hover::after,
.btn:focus-visible::after { opacity: 1; transform: scale(1); }
/* Auf blauem Grund braucht die Klammer denselben Ton wie der Button selbst */
.btn--ghost-light::after {
  background-image:
    linear-gradient(var(--on-primary), var(--on-primary)), linear-gradient(var(--on-primary), var(--on-primary)),
    linear-gradient(var(--on-primary), var(--on-primary)), linear-gradient(var(--on-primary), var(--on-primary)),
    linear-gradient(var(--on-primary), var(--on-primary)), linear-gradient(var(--on-primary), var(--on-primary)),
    linear-gradient(var(--on-primary), var(--on-primary)), linear-gradient(var(--on-primary), var(--on-primary));
}

/* Primär: gelbe Fläche, blaue Schrift — 5,5:1, barrierefrei */
.btn--primary {
  background: var(--secondary);
  color: var(--primary);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover {
  background: var(--secondary-dark);
  color: var(--primary-dark);
  box-shadow: var(--shadow-brand);
}

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

.btn--outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-dark);
}

/* Auf blauem Grund */
.btn--ghost-light {
  background: transparent;
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--on-primary);
  color: var(--on-primary);
}

.btn--sm { padding: .6rem 1.1rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--primary);
}
.link-arrow::after {
  content: '→';
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }


/* 7. Header & Navigation ================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}
@media (min-width: 1024px) {
  .header__inner { min-height: 92px; }
}

.logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  flex-shrink: 0;
}
/* Die Bildmarke ist 2:1 und enthält zwei feine Zeilen („Heilpraktiker“ /
   „Heiko Dräger“). Zu klein skaliert werden die zu Grafikrauschen — deshalb
   bewusst großzügig und der Header entsprechend höher. */
.logo img {
  width: auto;
  height: 52px;             /* ergibt 104 px Breite */
  display: block;
}
@media (min-width: 640px)  { .logo img { height: 64px; } }
@media (min-width: 1024px) { .logo img { height: 72px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }
}
.nav a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--sp-2);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--secondary);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--primary); }

.header .btn--primary { display: none; }
@media (min-width: 600px) { .header .btn--primary { display: inline-flex; } }

/* Burger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--primary);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: background-color .15s var(--ease);
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/* Mobiles Menü */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-4) 0 var(--sp-6);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--border); }
.mobile-nav a {
  display: block;
  padding: var(--sp-4) 0;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--primary); }
.mobile-nav .btn { margin-top: var(--sp-5); }

/* Mobile Buchungsleiste
   Unter 600px passt neben Logo und Burger kein CTA mehr in den Header.
   Ohne diese Leiste wäre auf dem Handy gar kein Buchungsbutton sichtbar,
   ohne vorher das Menü zu öffnen — genau dort geht sonst die Buchung verloren.
   Erscheint nach dem Hero und blendet sich im Kontaktbereich wieder aus,
   weil dort ohnehin ein Button steht. */
.cta-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: .6rem .9rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(26, 31, 51, .08);
  transform: translateY(110%);
  transition: transform .28s var(--ease);
}
.cta-mobile.is-visible { transform: translateY(0); }
@media (min-width: 600px) { .cta-mobile { display: none; } }

/* Platz schaffen, damit die Leiste den Fußbereich nicht verdeckt.
   Muss mindestens der tatsächlichen Leistenhöhe entsprechen (gemessen 75 px). */
@media (max-width: 599px) {
  body { padding-bottom: 5rem; }
}


/* 8. Hero ================================================================= */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--primary-tint) 0%, transparent 60%),
    var(--surface);
  overflow: hidden;
}

/* Sanftes Eintreten beim Laden — respektiert prefers-reduced-motion über die
   globale Regel in Abschnitt 20, die Animationsdauer dort auf .01ms setzt. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero__title,
.hero__lead,
.hero .btn-row,
.hero__meta,
.hero__media {
  animation: hero-rise .6s var(--ease) both;
}
.hero .eyebrow  { animation-delay: .02s; }
.hero__title    { animation-delay: .08s; }
.hero__lead     { animation-delay: .16s; }
.hero .btn-row  { animation-delay: .24s; }
.hero__meta     { animation-delay: .3s; }
.hero__media    { animation-delay: .12s; }

.hero__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.2fr .8fr; gap: var(--sp-8); }
}

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-5);
}
/* Gelber Balken als Akzent — nicht als Textfarbe.
   Bewusst als Hintergrundverlauf statt als positioniertes ::after mit
   z-index: -1 — letzteres würde hinter dem Sektionshintergrund verschwinden. */
.hero__title em {
  font-style: normal;
  white-space: nowrap;
  padding-inline: .06em;
  background-image: linear-gradient(var(--secondary), var(--secondary));
  background-repeat: no-repeat;
  background-size: 100% .15em;
  background-position: 0 86%;
}

.hero__lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34rem; }

/* Bewusst als <ul> selbst ausgelegt statt mit display:contents auf einer
   inneren Liste — display:contents entfernt in mehreren Browsern die
   Listen-Semantik für Screenreader. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__meta svg { width: 1.05em; height: 1.05em; color: var(--primary); }

.hero__media { position: relative; }
/* Gelbe Fläche hinter dem Portrait */
.hero__media::before {
  content: '';
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%;
  height: 58%;
  background: var(--secondary);
  border-radius: var(--r-lg);
  z-index: 0;
}
.hero__media > * { position: relative; z-index: 1; border-radius: var(--r-lg); }
.hero__media img { box-shadow: var(--shadow-lg); }

/* Fokuspunkt-Klammern, fest um das Portrait — dieselbe Form wie am Logo */
.hero__media::after {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary));
  background-size: 3px 30px, 30px 3px, 3px 30px, 30px 3px, 3px 30px, 30px 3px, 3px 30px, 30px 3px;
  background-position: top left, top left, top right, top right,
                        bottom right, bottom right, bottom left, bottom left;
}


/* 9. Karten =============================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-sm); color: var(--ink-soft); }
.card > :last-child { margin-top: auto; padding-top: var(--sp-5); }

.card--link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--sp-5);
  background: var(--primary-tint);
  border-radius: var(--r-md);
  color: var(--primary);
}
.card__icon svg { width: 27px; height: 27px; }

/* Zielgruppen-Karten: Zitat-Charakter */
.audience {
  position: relative;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  border-top: 4px solid var(--secondary);
}
.audience h3 { font-size: 1.3rem; margin-bottom: var(--sp-3); }
.audience__quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--primary);
  margin-bottom: var(--sp-4);
}
.audience p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); }

/* Leistungs-Karten mit Nummer */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
/* Feste Markenkante oben — wie ein beschriftetes Karteikarten-Register */
.service::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--secondary);
}
/* Fokuspunkt-Klammern statt generischem Lift-Effekt allein — dieselbe Form
   wie bei Buttons und Portraits, hier als Hover-Signal auf der Karte. */
.service::after {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary));
  background-size: 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px;
  background-position: top left, top left, top right, top right,
                        bottom right, bottom right, bottom left, bottom left;
}
.service:hover { border-color: var(--primary); box-shadow: var(--shadow-brand); transform: translateY(-3px); }
.service:hover::after { opacity: 1; transform: scale(1); }
.service__no {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--border-strong);
  margin-bottom: var(--sp-4);
}
.service h3 { margin-bottom: var(--sp-3); }
.service p { font-size: var(--fs-sm); color: var(--ink-soft); flex-grow: 1; }
.service .link-arrow { margin-top: var(--sp-5); }


/* 10. Selbst-Check ======================================================== */

.check {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--surface);
  border-top: 3px solid var(--secondary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--ink);
}
.check__head {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.check__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.check__bar {
  flex-grow: 1;
  height: 5px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.check__bar i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--secondary);
  border-radius: inherit;
  transition: width .35s var(--ease);
}
.check__head h3 { margin: 0; color: var(--primary); }

.check__body { padding: var(--sp-6); }

.check fieldset { margin: 0; padding: 0; border: 0; }
/* <legend> darf laut HTML nur Phrasen- und Überschrifteninhalt enthalten —
   erklärender Fließtext gehört deshalb daneben, nicht hinein. */
.check legend { padding: 0; }
.check__hint {
  margin: -.5rem 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.check__options {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 560px) { .check__options { grid-template-columns: 1fr 1fr; } }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.opt:hover { border-color: var(--primary-mid); background: var(--primary-tint); }
.opt input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.opt__mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.opt input[type="checkbox"] ~ .opt__mark { border-radius: var(--r-sm); }
.opt__mark::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform .18s var(--ease);
}
.opt input[type="checkbox"] ~ .opt__mark::after { border-radius: 2px; }
.opt input:checked ~ .opt__mark { border-color: var(--primary); }
.opt input:checked ~ .opt__mark::after { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.opt:has(input:focus-visible) { outline: 3px solid var(--secondary); outline-offset: 2px; }

.check__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--tertiary);
}
/* Der Hinweistext schiebt die Buttons nach rechts. Würden beide Buttons
   selbst margin-left:auto bekommen, bräche die Zeile zwischen ihnen um. */
.check__note {
  /* Darf schrumpfen, damit die beiden Buttons auch bei langer Beschriftung
     ("Auswertung anzeigen") nebeneinander in einer Zeile bleiben. */
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0 auto 0 0;
  max-width: 24rem;
}

/* Ergebnis */
.check__result { padding: var(--sp-6); }
.check__result[hidden] { display: none; }
.result__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .35rem .85rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.result__disclaimer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* Warnhinweis-Variante: kein Buchungsbutton, Verweis zum Arzt */
.result--warn { background: var(--warn-bg); }
.result--warn .result__badge {
  background: var(--secondary);
  color: var(--warn-ink);
}
.result--warn h3 { color: var(--warn-ink); }
.result--warn .result__disclaimer { border-top-color: rgba(224, 165, 0, .4); color: var(--warn-ink); }

.result__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.result__list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.result__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--secondary);
}


/* 11. Ablauf ============================================================== */

.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid rgba(255, 255, 255, .25);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4);
  left: 0;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--secondary);
}
.step h3 { margin: 2.6rem 0 var(--sp-3); font-size: 1.25rem; }
.step p { font-size: var(--fs-sm); }


/* 12. Über mich & Qualifikationen ========================================= */

.about {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) { .about { grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); } }

/* isolation erzeugt einen eigenen Stapelkontext. Ohne das würde der
   Akzentrahmen mit z-index:-1 hinter den Abschnittshintergrund rutschen
   und wäre unsichtbar. */
.about__media { position: relative; isolation: isolate; }
/* Fokuspunkt-Klammern statt schlichtem Rahmenquadrat — dieselbe Form wie am
   Logo und am Hero-Portrait, hier als ruhigere Variante ohne Farbfläche. */
.about__media::after {
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary));
  background-size: 3px 30px, 30px 3px, 3px 30px, 30px 3px, 3px 30px, 30px 3px, 3px 30px, 30px 3px;
  background-position: top left, top left, top right, top right,
                        bottom right, bottom right, bottom left, bottom left;
}
.about__media img {
  position: relative;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.quals {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .quals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quals { grid-template-columns: repeat(3, 1fr); } }

.qual {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.qual__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: var(--secondary);
  border-radius: 50%;
  color: var(--primary);
}
.qual__icon svg { width: 21px; height: 21px; }
.qual b { display: block; color: var(--primary); font-weight: 400; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.qual span { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); }

/* Zeitleiste für den Werdegang (Über mich) */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}
.timeline li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
  border-left: 2px solid var(--border);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -9px;
  top: .3rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--secondary);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.timeline time {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.timeline b {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--primary);
}
.timeline p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }


/* 13. Kundenstimmen ======================================================= */

/* Gesamtbewertung über den Zitaten */
.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.rating__stars {
  display: flex;
  gap: .15rem;
  margin: 0;
  color: var(--secondary);
}
.rating__stars svg { width: 26px; height: 26px; }
.rating__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.rating__text strong { color: var(--primary); font-size: 1.05rem; }

.quotes { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.quote__stars {
  display: flex;
  gap: .1rem;
  margin: 0 0 var(--sp-4);
  color: var(--secondary);
}
.quote__stars svg { width: 18px; height: 18px; }

.quote blockquote { font-size: 1.1rem; flex-grow: 1; }
.quote figcaption {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.quote figcaption b { color: var(--ink); font-weight: 700; }
.quote__source { font-size: var(--fs-xs); color: var(--ink-faint); }


/* 14. Preise ============================================================== */

.prices { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 800px) { .prices { grid-template-columns: repeat(3, 1fr); } }

.price {
  position: relative;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
}
.price--featured {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-md);
}
/* Dauerhaft „fokussiert": dieselben Klammern wie bei Buttons und Portraits
   markieren die empfohlene Karte, statt sie nur farblich abzusetzen. */
.price--featured::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary)),
    linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary));
  background-size: 3px 22px, 22px 3px, 3px 22px, 22px 3px, 3px 22px, 22px 3px, 3px 22px, 22px 3px;
  background-position: top left, top left, top right, top right,
                        bottom right, bottom right, bottom left, bottom left;
}
.price__tag {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .25rem .85rem;
  background: var(--secondary);
  color: var(--primary);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price h3 { font-size: 1.35rem; margin-bottom: var(--sp-2); }
.price__amount {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  color: var(--primary);
  margin: var(--sp-4) 0 var(--sp-2);
}
.price__unit { display: block; font-size: var(--fs-sm); color: var(--ink-faint); margin-bottom: var(--sp-4); }
.price p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 auto; }

.price-note {
  max-width: 48rem;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-5);
  background: var(--primary-tint);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.price-note p { max-width: none; }
.price-note p + p { margin-top: var(--sp-3); }


/* 15. FAQ ================================================================= */

.faq { max-width: 52rem; margin-inline: auto; }

.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--primary);
}
.faq__q:hover { color: var(--primary-dark); }
.faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 22px; height: 22px;
  margin-top: .2em;
  margin-left: auto;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s var(--ease);
}
.faq__a-inner { padding: 0 0 var(--sp-5); }
.faq__a-inner p { color: var(--ink-soft); }
.faq__a-inner p + p { margin-top: var(--sp-3); }
.faq__a-inner ul { color: var(--ink-soft); padding-left: 1.2rem; margin: var(--sp-3) 0 0; }
.faq__a-inner li + li { margin-top: var(--sp-2); }


/* 16. Kontakt & Formular ================================================== */

.contact { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); } }

.contact__facts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.contact__facts li { display: flex; gap: var(--sp-4); }
.contact__facts svg { width: 22px; height: 22px; color: var(--primary); flex: 0 0 auto; margin-top: .2em; }
.contact__facts b { display: block; color: var(--primary); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
.contact__facts a { color: var(--ink); }

.form {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.form__grid { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field label .req { color: var(--primary); }
.field input,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color .18s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--secondary);
  outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.field__error { font-size: var(--fs-xs); font-weight: 700; color: #A32020; }
.field__error:empty { display: none; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #A32020; }

/* Honeypot — für Menschen unsichtbar, Bots füllen ihn aus */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: .2em;
  accent-color: var(--primary);
  cursor: pointer;
}

.form__notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--warn-ink);
}
.form__notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .15em; }
.form__notice p { margin: 0; max-width: none; }

.form__status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"]    { background: #E8F5EC; color: #1B5E30; }
.form__status[data-state="error"] { background: #FDECEC; color: #A32020; }


/* 17. Footer ============================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  border-top: 3px solid var(--secondary);
  color: rgba(255, 255, 255, .78);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
/* Dasselbe Wasserzeichen wie in den blauen Abschnitten — hält den Fußbereich
   im selben Bildvokabular, ohne dass er wie ein Fremdkörper wirkt. */
.footer::before {
  content: '';
  position: absolute;
  inset: auto auto -9rem -5rem;
  width: 24rem;
  height: 24rem;
  pointer-events: none;
  opacity: .04;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 14px 200px, 90px 14px, 135px 14px, 90px 14px;
  background-position: 120px 20px, 80px 56px, 57px 112px, 80px 168px;
}
.footer .container { position: relative; }
.footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer a:hover { color: var(--secondary); text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer h2 { font-size: 1.5rem; color: var(--on-primary); margin-bottom: var(--sp-3); }
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer p { max-width: 24rem; }

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: .55rem 1rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  font-weight: 600;
}
.footer__social:hover { border-color: var(--secondary); text-decoration: none; }
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .6);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* Dezenter Entwickler-Hinweis — bewusst leiser als der Rest des Footers:
   eigene Zeile, eigener Trenner, niedrigste Textfarbe im ganzen Footer.
   Der WhatsApp-Button daneben darf sichtbarer sein, bleibt aber klein. */
.footer__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__credit p {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .38);
}
.footer__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  background: #25D366;
  color: #0B2E13;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.footer__wa-btn:hover { background: #1EBE5A; transform: translateY(-1px); text-decoration: none; }
.footer__wa-btn svg { width: 15px; height: 15px; flex-shrink: 0; }


/* 18. Partner ============================================================= */

.partner-card {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 800px) {
  .partner-card { grid-template-columns: .5fr 1fr; gap: var(--sp-7); padding: var(--sp-7); }
}
.partner-card__logo {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--tertiary);
  border-radius: var(--r-md);
}
.partner-card__logo img { width: 100%; max-width: 240px; height: auto; }
.partner-card__body p { color: var(--ink-soft); }
.partner-card__body .result__list { margin-top: var(--sp-4); }

/* Foto-Galerie — Einblicke ins Studio des Partners */
.gallery { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.gallery figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* Adresse/Kontakt-Fakten auf der Partnerseite — dieselbe Optik wie im
   eigenen Kontaktbereich, damit sich die Seite nicht wie ein Fremdkörper
   anfühlt, obwohl sie einen anderen Betrieb vorstellt. */
.partner-facts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.partner-facts li { display: flex; gap: var(--sp-4); }
.partner-facts svg { width: 22px; height: 22px; color: var(--primary); flex: 0 0 auto; margin-top: .2em; }
.partner-facts b { display: block; color: var(--primary); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
.partner-facts a { color: var(--ink); }


/* 19. Rechtstexte / Fließtextseiten ======================================= */

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--tertiary);
  border-bottom: 1px solid var(--border);
}
.page-head p { max-width: 40rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--sp-2); color: var(--border-strong); }

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--sp-4); color: var(--ink-soft); }
.prose li + li { margin-top: var(--sp-2); }
.prose dl { margin: 0 0 var(--sp-4); }
.prose dt { font-weight: 700; margin-top: var(--sp-4); }
.prose dd { margin: 0; color: var(--ink-soft); }
.prose address { font-style: normal; color: var(--ink-soft); }

/* Info-Kasten */
.note {
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
  background: var(--primary-tint);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.note p { max-width: none; }
.note strong { color: var(--primary); }
.note--warn { background: var(--warn-bg); border-left-color: var(--warn-border); color: var(--warn-ink); }
.note--warn strong { color: var(--warn-ink); }

/* Zwei-Spalten-Liste „passt / passt nicht" auf Leistungsseiten */
.fit { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col {
  padding: var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.fit__col h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: 1.25rem; }
.fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.fit__col li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.fit__col li svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .15em; }
.fit__yes li svg { color: #1B7A3D; }
.fit__no  { background: var(--tertiary); }
.fit__no li svg { color: var(--warn-icon); }

/* Schlussaufruf */
.cta-band {
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, .88);
  text-align: center;
}
.cta-band h2 { color: var(--on-primary); }
.cta-band p { margin-inline: auto; }


/* 20. Hilfsklassen ======================================================== */

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }

/* Tabellen (z. B. Preisliste in Rechtstexten) horizontal scrollbar halten */
.table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: var(--fs-sm); }
.table-wrap th, .table-wrap td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); }
.table-wrap th { color: var(--primary); font-weight: 700; }


/* 21. Bewegungsreduktion & Druck ========================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card--link:hover, .service:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   DRUCKFASSUNG — ruhige A4-Praxisbroschüre
   --------------------------------------------------------------------------
   Grundsätze (bitte beim Bearbeiten beachten):

   • Weißer Grund, keine Farbflächen. Akzente entstehen über Schriftfarbe und
     Rahmenlinien — die druckt jeder Browser. Hintergründe druckt er nur, wenn
     im Druckdialog „Hintergrundgrafiken“ aktiv ist. So sieht das Ergebnis mit
     und ohne diese Option nahezu gleich aus.

   • Chrome malt beim Druck ohne Hintergrundgrafiken jedes Element, das ein
     Hintergrundbild hat, deckend WEISS aus. Die Fokuspunkt-Klammern liegen als
     ::after über den Fotos — sie würden die Fotos dann komplett verdecken.
     Deshalb sind hier alle dekorativen Pseudo-Elemente entfernt oder als
     reine Rahmenlinien neu gezeichnet.

   • Animationen sind abgeschaltet. hero-rise startet bei opacity 0 — wer
     direkt nach dem Laden druckt, bekäme sonst einen leeren Hero.

   • Keine automatisch angehängten URLs: im PDF bleiben Links ohnehin
     klickbar. Nur Terminbuchung und fitness 4urself erscheinen als kurze
     Adresse (Abschnitt 21.4). Die Selektoren prüfen die exakte Adresse —
     ändert sich ein Link, verschwindet die Zeile, statt eine veraltete
     Adresse zu drucken.

   • Die Fußzeile jeder Seite (@page) steht nur hier im CSS. Ändern sich
     Telefon oder Adresse, bitte auch hier anpassen. Sie erscheint in
     Chrome/Edge; Safari kennt diese Randfelder nicht — dort trägt der
     Footer am Ende die Kontaktdaten.
   ========================================================================== */

@page {
  size: A4;
  margin: 15mm 16mm 17mm;

  /* Leere Kopfzeile: unterdrückt Datum und Seitentitel, die Chrome sonst
     einblendet, wenn „Kopf- und Fußzeilen“ im Druckdialog aktiv ist. */
  @top-center { content: ""; }

  @bottom-left {
    content: "Osteo-Care · Heiko Dräger, Heilpraktiker · Weidenring 18, 64625 Bensheim · Tel. 0157 32883251 · osteo-care.de";
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 7pt;
    color: #6B7385;
  }
  @bottom-right {
    content: "Seite " counter(page) " / " counter(pages);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 7pt;
    color: #6B7385;
  }
}

@media print {

  /* 21.1 Druck-Tokens ---------------------------------------------------- */
  /* Alle Bausteine lesen ihre Größen aus diesen Tokens — hier überschrieben
     in pt/mm statt der fluiden Bildschirmwerte. */
  :root {
    --fs-hero: 23pt;
    --fs-h1:   25pt;
    --fs-h2:   17pt;
    --fs-h3:   12.5pt;
    --fs-lead: 11.5pt;
    --fs-body: 10.25pt;
    --fs-sm:   9.25pt;
    --fs-xs:   7.5pt;

    --sp-1: 1mm;   --sp-2: 1.8mm; --sp-3: 2.6mm; --sp-4: 3.5mm; --sp-5: 4.5mm;
    --sp-6: 5.5mm; --sp-7: 7mm;   --sp-8: 9mm;   --sp-9: 12mm;

    --r-sm: 1mm;
    --r-md: 2mm;
    --r-lg: 3mm;

    /* Haarlinien etwas kräftiger — zu blasse Linien verschlucken Drucker */
    --border:        #C9D0DE;
    --border-strong: #A7B1C6;

    --measure: 75ch;
  }


  /* 21.2 Grundlagen ------------------------------------------------------ */

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Doppelt abgesichert: diese Elemente starten in hero-rise unsichtbar */
  .hero .eyebrow,
  .hero__title,
  .hero__lead,
  .hero .btn-row,
  .hero__meta,
  .hero__media {
    opacity: 1 !important;
    transform: none !important;
  }

  html, body { background: #fff !important; }
  body {
    font-size: var(--fs-body);
    line-height: 1.5;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .container { width: auto !important; max-width: none; margin-inline: 0; }

  p, li, dd, blockquote { orphans: 3; widows: 3; }
  img, svg, figure, blockquote { break-inside: avoid; page-break-inside: avoid; }

  a { color: inherit; text-decoration: none; }
  .prose a { color: var(--primary); }

  h1, h2, h3, h4 {
    line-height: 1.15;
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2 { margin-bottom: var(--sp-3); }
  h3 { margin-bottom: var(--sp-2); line-height: 1.2; }

  .lead { line-height: 1.45; }

  .eyebrow { display: block; margin-bottom: var(--sp-2); }
  /* Das Wirbelsäulen-Symbol ist winzig — einzige Stelle, an der der Farbdruck
     erzwungen wird. Sonst bliebe ohne Hintergrundgrafiken nur ein leerer
     Einzug vor der Rubrik stehen. */
  .eyebrow::before {
    display: inline-block;
    vertical-align: -4px;
    margin-right: var(--sp-2);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .eyebrow--light { color: var(--primary); }

  /* Überschriften nie allein am Seitenende: ein unsichtbarer Block unter der
     Überschrift reserviert Platz für die ersten Zeilen danach. Passt beides
     nicht mehr auf die Seite, wandert die Überschrift mit (break-inside:
     avoid). Der negative Außenabstand hebt den Block im Layout wieder auf.
     Chrome beachtet zusätzlich break-after: avoid — Safari braucht den Trick. */
  h2::after,
  .prose h3::after,
  .section-head::after,
  .eyebrow::after,
  .rating::after {
    content: '';
    display: block;
    height: var(--keep, 22mm);
    margin-bottom: calc(-1 * var(--keep, 22mm));
  }
  .prose h3::after { --keep: 12mm; }
  .section-head::after,
  .eyebrow::after,
  .rating::after { --keep: 30mm; }
  /* Nicht innerhalb von Rastern: dort kann Chrome den Platzhalter nicht
     sauber umbrechen und schneidet sonst die folgende Textzeile an der
     Seitenkante an. Diese Blöcke werden stattdessen als Ganzes
     zusammengehalten (21.8) oder stehen ohnehin oben auf der Seite. */
  :is(.hero, .about, .contact, .partner-card, .footer) :is(h2, h3, .eyebrow)::after { content: none; }
  .section-head { break-inside: avoid; page-break-inside: avoid; break-after: avoid; }


  /* 21.3 Ausblenden: alles, was nur am Bildschirm eine Funktion hat ------ */

  .skip-link,
  .nav,
  .nav-toggle,
  .mobile-nav,
  .cta-mobile,
  .breadcrumb,
  .btn,
  .link-arrow,
  .faq__icon,
  .form,
  .contact > div:has(> .form),
  .check__head,
  .check__body,
  .check__foot,
  .footer__grid > div:nth-child(2),
  .footer__grid > div:nth-child(3),
  .footer__bottom ul,
  .footer__wa-btn {
    display: none !important;
  }

  /* Selbst-Check: nur drucken, wenn bereits ein Ergebnis angezeigt wird.
     Die Warnzeichen stehen unabhängig davon in der FAQ. */
  .section:has(.check__result[hidden]) { display: none !important; }
  .section:has(.check) .section-head .lead { display: none; }

  /* Schlussaufrufe, die nur zum interaktiven Selbst-Check führen */
  .cta-band:has(a[href*="#selbstcheck"]) { display: none !important; }

  /* Absätze, die nur aus einem Aktionslink bestehen („Alle Bewertungen …“,
     „Zurück zur Startseite“) */
  p:has(> .link-arrow:only-child) { display: none; }


  /* 21.4 Buttons → kurze Adresszeilen ------------------------------------ */
  /* Nur Buttons mit echtem Informationswert bleiben, als Textzeile:
     „Termin online buchen: calendly.com/osteo-care/55min“. */

  .btn-row { display: block; margin-top: var(--sp-4); }
  .btn-row:not(:has(a[href="https://calendly.com/osteo-care/55min"],
                    a[href="https://4urself.fit/"],
                    a[href="https://calendly.com/4urself-fitness/probetraining"])) {
    display: none;
  }
  /* Auf der Startseite genügt die Buchungszeile im Hero und im Kontakt */
  #ablauf .btn-row,
  #preise .btn-row,
  .cta-band .btn-row { display: none; }

  .btn-row a[href="https://calendly.com/osteo-care/55min"],
  .btn-row a[href="https://4urself.fit/"],
  .btn-row a[href="https://calendly.com/4urself-fitness/probetraining"] {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: auto;
    margin: 0 0 var(--sp-1);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--primary);
    font-size: var(--fs-sm);
    line-height: 1.4;
    text-align: left;
  }
  .btn-row .btn svg { width: 1.1em; height: 1.1em; margin-right: var(--sp-2); }

  .btn-row a[href="https://calendly.com/osteo-care/55min"]::after,
  .btn-row a[href="https://4urself.fit/"]::after,
  .btn-row a[href="https://calendly.com/4urself-fitness/probetraining"]::after {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    background: none;
    font-weight: 400;
    color: var(--ink);
    white-space: nowrap;
  }
  .btn-row a[href="https://calendly.com/osteo-care/55min"]::after { content: ": calendly.com/osteo-care/55min"; }
  .btn-row a[href="https://4urself.fit/"]::after { content: ": 4urself.fit"; }
  .btn-row a[href="https://calendly.com/4urself-fitness/probetraining"]::after { content: ": calendly.com/4urself-fitness/probetraining"; }

  /* Partnerseite: dort ist die Adresse schon die Beschriftung */
  .partner-facts + .btn-row a::after { content: none; }
  .partner-facts + .btn-row a::before { content: "Web:\00a0"; font-weight: 400; color: var(--ink); }


  /* 21.5 Kopf: nur das Logo, als Briefkopf ------------------------------- */

  .header {
    position: static;
    margin-bottom: var(--sp-6);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1pt solid var(--primary);
  }
  .header__inner {
    min-height: 0;
    padding: 0 0 var(--sp-3);
    align-items: flex-end;
  }
  .logo img { height: 18mm; }
  .header__inner::after {
    content: "osteo-care.de";
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
  }


  /* 21.6 Hero: Text links, Portrait rechts ------------------------------- */

  .hero {
    padding: 0 0 var(--sp-4);
    background: none;
    overflow: visible;
  }
  .hero__grid {
    grid-template-columns: 1fr 48mm;
    gap: 9mm;
    align-items: start;
  }
  .hero__title { margin-bottom: var(--sp-4); }
  /* Gelber Akzent als Unterstreichung statt als Hintergrund — druckt immer */
  .hero__title em {
    padding-inline: 0;
    background: none;
    text-decoration: underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: .13em;
    text-underline-offset: .1em;
    text-decoration-skip-ink: none;
  }
  .hero__lead { max-width: none; }
  .hero__meta {
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
  }

  /* Portraits: Fokuspunkt-Klammern als Rahmenlinien (nur zwei Ecken), statt
     als Hintergrundbild über dem Foto. Gelbe Fläche und Schatten entfallen. */
  .hero__media,
  .about__media { position: relative; isolation: auto; margin: 2mm; }
  .hero__media::before,
  .hero__media::after,
  .about__media::before,
  .about__media::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 7mm;
    height: 7mm;
    background: none;
    border: 0 solid var(--secondary);
    border-radius: 0;
    pointer-events: none;
  }
  .hero__media::before,
  .about__media::before { inset: -2mm auto auto -2mm; border-width: .8mm 0 0 .8mm; }
  .hero__media::after,
  .about__media::after  { inset: auto -2mm -2mm auto; border-width: 0 .8mm .8mm 0; }
  .hero__media img,
  .about__media img { width: 100%; border-radius: var(--r-md); }


  /* 21.7 Abschnitte ------------------------------------------------------ */

  .section,
  .section--tight { padding-block: var(--sp-8) 0; }
  .section--tint { background: none; }
  .section-head { margin-bottom: var(--sp-5); }

  .page-head {
    padding: 0 0 var(--sp-4);
    background: none;
    border-bottom: 0;
  }
  .page-head p { max-width: none; }

  /* Blaue Flächen → weiße Panels mit blauer Rahmung. Spart Tinte und bleibt
     ohne Hintergrundgrafiken lesbar (sonst weiße Schrift auf weißem Papier). */
  .section--blue,
  .cta-band {
    padding: var(--sp-6);
    background: none;
    color: var(--ink);
    border: .75pt solid var(--primary);
    border-top-width: 2.5pt;
    border-radius: var(--r-md);
    overflow: visible;
  }
  .section--blue { margin-top: var(--sp-8); }
  .section--blue::before { content: none; }
  .section--blue h2,
  .section--blue h3,
  .cta-band h2 { color: var(--primary); }
  .section--blue .lead { color: var(--ink-soft); }
  .section--blue a:not(.btn) { color: var(--primary); }
  .cta-band { margin-top: var(--sp-7); text-align: left; break-inside: avoid; page-break-inside: avoid; }
  .cta-band p { margin-inline: 0; }

  .steps {
    grid-template-columns: repeat(auto-fit, minmax(36mm, 1fr));
    gap: var(--sp-5);
  }
  .step { padding-top: 0; border-top: 1pt solid var(--border-strong); }
  .step::before { top: var(--sp-2); font-size: 18pt; color: var(--primary); }
  .step h3 { margin: 11mm 0 var(--sp-2); font-size: 11.5pt; }


  /* 21.8 Karten, Raster, Bilder ------------------------------------------ */

  .audience,
  .service,
  .qual,
  .quote,
  .price,
  .step,
  .fit__col,
  .partner-card,
  .timeline li,
  .faq__item,
  .note,
  .price-note,
  .gallery figure,
  .contact__facts li,
  .partner-facts li,
  .about__media,
  .about:not(:has(.prose)),
  .contact,
  .check {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Druckbreite (~178 mm ≈ 670 px) liegt unter allen Desktop-Breakpoints —
     Spalten deshalb hier ausdrücklich festlegen. */
  .grid { gap: var(--sp-4); }
  .grid--2,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .card__icon {
    width: 8mm;
    height: 8mm;
    margin-bottom: var(--sp-3);
    border-radius: var(--r-sm);
  }
  .card__icon svg { width: 4.6mm; height: 4.6mm; }

  /* Icon links neben der Überschrift statt darüber — spart Höhe */
  .audience,
  .service {
    display: block;
    padding: var(--sp-5);
    border-radius: var(--r-md);
  }
  .audience .card__icon,
  .service .card__icon { float: left; margin: 0 var(--sp-3) 0 0; }
  .audience h3,
  .service h3 {
    display: flex;
    align-items: center;
    min-height: 8mm;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-h3);
  }

  .audience { border-top-width: 2pt; }
  .audience__quote { clear: left; font-size: 11pt; margin-bottom: var(--sp-2); }
  .audience p { margin-bottom: var(--sp-2); }
  /* Querverweis auf die passende Leistung statt Link-Pfeil */
  .audience .link-arrow { display: inline !important; font-size: var(--fs-xs); }
  .audience .link-arrow::before { content: "Passende Leistung: "; font-weight: 400; color: var(--ink-soft); }
  .audience .link-arrow::after { content: none; }

  /* Gelbe Registerkante als Rahmen statt als Hintergrund-Pseudo-Element */
  .service { overflow: visible; border-top: 2pt solid var(--secondary); }
  .service::before,
  .service::after { content: none; }
  .service__no {
    float: right;
    margin: 0 0 0 var(--sp-3);
    font-size: 16pt;
  }
  .service p { clear: both; }

  .quals { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .qual { gap: var(--sp-3); padding: var(--sp-3); }
  .qual__icon { width: 7.5mm; height: 7.5mm; border: .75pt solid var(--secondary); }
  .qual__icon svg { width: 4mm; height: 4mm; }
  .qual b { font-size: 11pt; }
  .qual span { font-size: 8.25pt; }

  .about { grid-template-columns: 62mm 1fr; gap: 8mm; align-items: start; }
  /* Hochformat-Portrait (Leistungsseiten, Über mich) schmaler halten */
  .about:has(img[src*="portrait"]) { grid-template-columns: 45mm 1fr; }

  .partner-card {
    grid-template-columns: 42mm 1fr;
    gap: var(--sp-6);
    padding: var(--sp-5);
    border-radius: var(--r-md);
  }
  .partner-card__logo { padding: 0; background: none; }
  .partner-card__body h2 { font-size: 15pt; }

  /* Aufzählungspunkte als Rahmen-Kreis — ein Hintergrund-Punkt fiele ohne
     Hintergrundgrafiken weg */
  .result__list li::before {
    width: 0;
    height: 0;
    background: none;
    border: .9mm solid var(--secondary);
  }

  .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .gallery img { border-radius: var(--r-sm); }
  .gallery figcaption { margin-top: var(--sp-1); }

  .fit { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .fit__col { padding: var(--sp-5); }
  .fit__no { background: none; }
  .fit__col h3 { gap: var(--sp-2); font-size: 12pt; }
  .fit__col ul { gap: var(--sp-2); }
  .fit__col li svg { width: 4mm; height: 4mm; }

  .note {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    background: none;
    border-radius: 0;
  }

  /* Einzug: Chrome schneidet alles ab, was links über den Satzspiegel ragt —
     die Punkte auf der Linie wären sonst nur zur Hälfte zu sehen. */
  .timeline { max-width: 140mm; margin-left: 2.5mm; }
  .timeline li { padding: 0 0 var(--sp-5) var(--sp-6); }
  .timeline li::before {
    left: -1.9mm;
    top: 1mm;
    width: 3.6mm;
    height: 3.6mm;
    background: #fff;
    border: 1mm solid var(--secondary);
  }
  .timeline b { font-size: 12pt; }

  .prose { max-width: none; }
  .prose h2 { font-size: 15pt; margin-top: var(--sp-7); }
  .prose h3 { font-size: 12pt; margin-top: var(--sp-5); }
  .prose blockquote {
    padding-left: var(--sp-4);
    border-left: 1mm solid var(--secondary);
    font-size: 13pt;
  }

  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }


  /* 21.9 Kundenstimmen, Preise, FAQ, Selbst-Check-Ergebnis --------------- */

  /* Block statt Flex, damit der Platzhalter-Trick aus 21.2 greift:
     Sterne und Gesamtbewertung bleiben bei den Zitaten. */
  .rating {
    display: block;
    margin-bottom: var(--sp-5);
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }
  .rating__stars { justify-content: center; margin-bottom: var(--sp-1); }
  .rating__stars svg { width: 4.5mm; height: 4.5mm; }

  .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  /* margin: 0 — <figure> bringt 40 px Browser-Einzug mit, der die drei
     Spalten im Druck sonst auf Handbreite zusammendrückt */
  .quote { margin: 0; padding: var(--sp-4); }
  .quote__stars { margin-bottom: var(--sp-2); }
  .quote__stars svg { width: 3mm; height: 3mm; }
  .quote blockquote { font-size: 10.5pt; line-height: 1.4; }
  .quote figcaption {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    font-size: var(--fs-xs);
  }

  .prices { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; }
  .price { padding: var(--sp-5) var(--sp-4); }
  .price--featured { border-width: 1.5pt; }
  .price--featured::after { content: none; }
  .price__tag {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: var(--sp-3);
    padding: .4mm 2.5mm;
    border: .75pt solid var(--secondary);
    font-size: 6.5pt;
  }
  .price h3 { font-size: 12.5pt; }
  .price__amount { margin: var(--sp-2) 0 var(--sp-1); font-size: 24pt; }
  .price__unit { margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
  .price-note {
    max-width: none;
    margin-top: var(--sp-5);
    padding: var(--sp-2) var(--sp-4);
    background: none;
    border-left: 1.5pt solid var(--primary);
    border-radius: 0;
  }

  /* FAQ: alle Antworten offen, zweispaltig. !important schlägt die
     max-height, die das Skript beim Auf-/Zuklappen inline setzt. */
  .faq { max-width: none; column-count: 2; column-gap: 8mm; }
  .faq__item,
  .faq__item:first-child { border-top: .5pt solid var(--border); border-bottom: 0; }
  .faq__q {
    padding: var(--sp-3) 0 var(--sp-1);
    font-size: 11.5pt;
    line-height: 1.25;
  }
  .faq__a { max-height: none !important; overflow: visible; }
  .faq__a-inner { padding-bottom: var(--sp-3); font-size: var(--fs-sm); }
  .faq__a-inner p + p { margin-top: var(--sp-2); }

  .check {
    max-width: none;
    border: .75pt solid var(--border);
    border-top: 2pt solid var(--secondary);
    border-radius: var(--r-md);
    overflow: visible;
  }
  .check__result { padding: var(--sp-5); }
  .result--warn { background: none; border-left: 1.5pt solid var(--warn-border); }
  .result__badge { padding: .4mm 2.5mm; border: .75pt solid currentColor; }


  /* 21.10 Kontakt und Footer → Kontaktleiste am Ende --------------------- */

  #kontakt { break-inside: avoid; page-break-inside: avoid; }

  .contact { grid-template-columns: 1fr 1fr; gap: 8mm; }
  .contact:has(.form) { grid-template-columns: 1fr; }
  .contact__facts,
  .partner-facts { gap: var(--sp-4); margin-top: var(--sp-5); }
  .contact__facts { grid-template-columns: 1fr 1fr 1.7fr; }
  .contact__facts li,
  .partner-facts li { gap: var(--sp-3); }
  .contact__facts svg,
  .partner-facts svg { width: 4.5mm; height: 4.5mm; }
  .contact__facts b,
  .partner-facts b { font-size: 11pt; }

  .footer {
    margin-top: var(--sp-6);
    padding: var(--sp-3) 0 0;
    background: none;
    border-top: 1.5pt solid var(--primary);
    color: var(--ink-soft);
    overflow: visible;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .footer::before { content: none; }
  /* Copyright links, Credit rechts in derselben Zeile — spart eine Zeile */
  .footer .container {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sp-5);
    align-items: baseline;
  }
  .footer a { color: var(--ink); }
  .footer__grid {
    grid-column: 1 / -1;
    grid-template-columns: 1.8fr 1fr;
    gap: var(--sp-7);
    padding-bottom: var(--sp-2);
    border-bottom: .5pt solid var(--border);
  }
  .footer h2 { margin-bottom: var(--sp-1); font-size: 13pt; color: var(--primary); }
  .footer h3 { margin-bottom: var(--sp-2); color: var(--primary); }
  .footer p { max-width: none; }
  .footer ul { gap: 0; line-height: 1.45; }
  .footer__social {
    margin-top: var(--sp-1);
    padding: 0;
    border: 0;
    border-radius: 0;
    font-weight: 400;
  }
  .footer__social svg { width: 4mm; height: 4mm; }
  .footer a[href^="tel:"]::before    { content: "Tel. ";    color: var(--ink-soft); }
  .footer a[href^="mailto:"]::before { content: "E-Mail "; color: var(--ink-soft); }
  .footer__bottom { padding-top: var(--sp-2); color: var(--ink-faint); }
  .footer__bottom p::after { content: " · osteo-care.de"; }
  .footer__credit {
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .footer__credit p { font-size: 6.5pt; color: var(--ink-faint); }
}