/* Inter lokal aus dem Theme (keine Verbindung zu Google) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Bricks-Grundstile neutralisieren
   Bricks setzt in seiner Kaskadenebene „bricks" eigene Grundwerte (Schrift-
   größe 62,5 %, Georgia-Zitate, graue Bildunterschriften, Rahmenfarbe …).
   Das Design baut auf den Browser-Standards auf, deshalb hier zurück auf
   diese („revert"). Ohne Gewicht (:where), die Regeln des Designs gehen vor.
   ========================================================================== */
:where(html) { font-size: 100%; line-height: normal; }   /* 1rem = Browser-Standard (meist 16 px) */
:where(body) { font-size: revert; line-height: revert; color: revert; font-family: revert; background-position: revert; transition: none; }
:where([class*=brxe-]) { max-width: revert; }
:where(*) { border-color: revert; }
:where(a) { color: revert; text-decoration: revert; cursor: revert; border-color: revert; }
:where(h1, h2, h3, h4, h5, h6) { margin: revert; font-size: revert; line-height: revert; }
:where(h1, h2, h3, h4, h5, h6) :where(a) { color: revert; }
:where(p) { margin-block: revert; }
:where(figure) { margin: revert; }
:where(figcaption) { color: revert; font-size: revert; margin: revert; text-align: revert; }
:where(img) { height: revert; max-width: revert; vertical-align: revert; outline: revert; }
:where(button) { border: revert; cursor: revert; outline: revert; padding: revert; }
:where(button, input, optgroup, select, textarea) { font-family: revert; font-size: revert; line-height: revert; margin: revert; text-align: revert; }
:where(blockquote) { border-left: revert; font-family: revert; font-size: revert; margin: revert; padding: revert; position: revert; }
:where(hr) { border: revert; margin: revert; }
:where(table) { width: revert; }
:where(label) { color: revert; display: revert; font-weight: revert; margin-bottom: revert; }
:where(select) { appearance: revert; background: revert; border-radius: revert; }
:where(textarea) { height: revert; min-height: revert; padding: revert; }
:where(svg:not([width])) { min-width: revert; }
:where(svg:not([height])) { min-height: revert; }
:where(:before, :after) { outline: revert; }

/* ==========================================================================
   Orthopädische Privatpraxis am Stadtwald – orthoinfo.css
   Prototyp Startseite · Basis für die Umsetzung in Bricks
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Komponenten · 5 Sektionen · 6 Utilities
   ========================================================================== */


/* 1 · DESIGN-TOKENS
   In Bricks: als Global Variables / Theme Styles übernehmen.
   -------------------------------------------------------------------------- */
:root {
  /* Farben – Marke */
  --c-navy-950: #020e35;   /* Footer */
  --c-navy-900: #032167;   /* Primär, dunkle Sektionen */
  --c-navy-700: #163881;   /* Links, Hover */
  --c-teal-400: #46d0d6;   /* Akzent: nur Flächen, Linien, Buttons (mit Navy-Text) */
  --c-blue-500: #2f5bb7;   /* Akzent als Text auf Weiß (6,4 : 1) – Eyebrows, Hervorhebungen */
  --c-teal-200: #c4f0f2;   /* Akzent als Text auf Navy */

  /* Farben – Neutral */
  --c-ink:      #1a1f36;   /* Fließtext (15,9 : 1) */
  --c-muted:    #4b5370;   /* Sekundärtext (7,6 : 1) – vorher #6b7392 */
  --c-line:     #dfe3ee;
  --c-surface:  #ffffff;
  --c-surface-alt: #f5f7fb;
  --c-on-dark:  #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, .82); /* vorher .40–.55 */

  /* Schrift */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);

  /* Schriftgrößen – fluid, Minimum 14 px */
  --fs-xs:   0.875rem;                                   /* 14 px  Labels, Meta */
  --fs-sm:   0.9375rem;                                  /* 15 px  Kleintext */
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* 17–19 px */
  --fs-lead: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); /* 19–22 px */
  --fs-h3:   clamp(1.25rem, 1.15rem + .4vw, 1.4375rem);
  --fs-h2:   clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  --fs-h1:   clamp(2.125rem, 1.4rem + 3vw, 3.75rem);

  --lh-body: 1.65;
  --lh-heading: 1.18;

  /* Abstände – 8er-Raster */
  --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-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Breiten */
  --w-container: 82rem;   /* 1312 px – Fließtexte bleiben über eigene Höchstbreiten schmal */
  --w-narrow: 52rem;
  --measure: 66ch;        /* max. Zeilenlänge Fließtext */
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);

  /* Form */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(3, 33, 103, .06), 0 2px 8px rgba(3, 33, 103, .05);
  --shadow:    0 2px 4px rgba(3, 33, 103, .05), 0 12px 32px rgba(3, 33, 103, .09);

  /* Bewegung */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;

  --header-h: 5.5rem;
}


/* 2 · BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  color: var(--c-navy-900);
  text-wrap: balance;
  overflow-wrap: break-word;   /* nur Notumbruch, wenn ein Wort sonst überläuft */
  hyphens: manual;             /* keine automatische Silbentrennung in Überschriften */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

/* Fließtext: gebremste automatische Silbentrennung (nur Wörter ab 10 Zeichen,
   mind. 4 Zeichen vor/nach dem Trennstrich). Überschriften bleiben ohne (siehe oben). */
:where(p, li, dd, blockquote, figcaption, td) {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
/* Ausnahmen: Navigation, Buttons, Labels, Tags, Zeiten, Footer */
:where(nav, .btn, .eyebrow, .chips, .tags, .hours, .site-footer, .action-bar, .quick-contact, .post__meta),
:where(nav, .btn, .eyebrow, .chips, .tags, .hours, .site-footer, .action-bar, .quick-contact, .post__meta) * {
  -webkit-hyphens: manual;
  hyphens: manual;
}
p:last-child { margin-bottom: 0; }

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

a {
  color: var(--c-navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { color: var(--c-navy-900); }

:focus-visible {
  outline: 3px solid var(--c-teal-400);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-on-dark); }

::selection { background: var(--c-teal-400); color: var(--c-navy-900); }

a[href^="tel:"] { white-space: nowrap; }   /* Telefonnummern nie auseinanderreißen */

/* Telefon und E-Mail als eigenständige Kontaktangabe: ohne Unterstreichung,
   im Fließtext bleibt sie (Link nicht nur an der Farbe erkennbar). */
a:is([href^="tel:"], [href^="mailto:"]) { text-decoration: none; font-weight: 600; }
a:is([href^="tel:"], [href^="mailto:"]):is(:hover, :focus-visible) { text-decoration: underline; }
:is(.article, .note, .faq__answer, .legal, .check) a:is([href^="tel:"], [href^="mailto:"]) { text-decoration: underline; }

ul[role="list"] { list-style: none; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* 3 · LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--w-container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--w-narrow)); }

.section { padding-block: var(--sp-section); }
.section--alt  { background: var(--c-surface-alt); }
.section--dark { background: var(--c-navy-900); color: var(--c-on-dark); }
.section--dark h2,
.section--dark h3 { color: var(--c-on-dark); }

.section-head {
  max-width: 44rem;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.section-head p { color: var(--c-muted); font-size: var(--fs-lead); text-wrap: balance; }
.section--dark .section-head p { color: var(--c-on-dark-muted); }

.grid-3 {
  display: grid;
  gap: var(--sp-5);
  /* Höchstens 3 Spalten: Mindestbreite ist mindestens ein Drittel der Zeile (seit dem 82rem-Container
     passten sonst 4 hinein) */
  grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 18rem), (100% - 2 * var(--sp-5)) / 3), 1fr));
}

.split {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 6fr; gap: var(--sp-8); }
}

.prose { max-width: var(--measure); }


/* 4 · KOMPONENTEN
   -------------------------------------------------------------------------- */

/* Skip-Link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-navy-900);
  color: var(--c-on-dark);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-on-dark); }

/* Eyebrow / Kennzeichnung über Überschriften */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;   /* Linie auf Höhe der ersten Zeile, auch bei Umbruch */
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  margin-top: calc(.825em - 1px);   /* Mitte der ersten Textzeile */
  background: var(--c-teal-400);
}
/* Umbruch an fester Stelle: mobil Ort in Zeile 2, ab Tablet einzeilig mit Trenner */
.eyebrow__br { display: none; }
@media (max-width: 47.99rem) {
  .eyebrow__br { display: inline; }
  .eyebrow__sep { display: none; }
  /* Handy: ohne Strich – bei zweizeiligen Eyebrows würde er die zweite Zeile einrücken */
  .eyebrow::before, .section-head .eyebrow::after { content: none; }
}
.section--dark .eyebrow { color: var(--c-teal-400); }

.hl { color: var(--c-blue-500); }
.section--dark .hl { color: var(--c-teal-400); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-teal-400); color: var(--c-navy-900); }
.btn--primary:hover { background: #6fdde1; color: var(--c-navy-900); }

.btn--dark { background: var(--c-navy-900); color: var(--c-on-dark); }
.btn--dark:hover { background: var(--c-navy-700); color: var(--c-on-dark); }

.btn--ghost { border-color: currentColor; color: var(--c-on-dark); background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: var(--c-on-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-navy-700);
  text-decoration: none;
}
.link-arrow svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }

/* Icons */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: rgba(70, 208, 214, .16);
  color: var(--c-navy-900);
}

/* Karte – ganze Fläche klickbar über .card__link::after */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover,
.card:focus-within {
  box-shadow: var(--shadow);
  border-color: transparent;
  transform: translateY(-3px);
}
.card:hover .link-arrow svg,
.card:focus-within .link-arrow svg { transform: translateX(4px); }
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.card__body p { color: var(--c-muted); }
.card__body .link-arrow { margin-top: auto; padding-top: var(--sp-2); }
.card h3 { margin: 0; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--c-teal-400); outline-offset: 3px; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-alt); }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }


/* 5 · SEKTIONEN
   -------------------------------------------------------------------------- */

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.site-logo img { width: clamp(11rem, 7rem + 9vw, 15rem); height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-navy-900);
  font: 600 1rem var(--font-body);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

.main-nav__list > li > a,
.main-nav__list > li > button {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3) 0;
  border: 0;
  background: none;
  color: var(--c-navy-900);
  font: 500 1.0625rem var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.main-nav__list > li > button svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.main-nav__list > li > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.main-nav__list [aria-current="page"] { color: var(--c-blue-500); }
.submenu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-size: 1rem;
  text-decoration: none;
}
.submenu a:hover { background: var(--c-surface-alt); color: var(--c-navy-900); }
.submenu[hidden] { display: none; }

/* Mega-Menü „Leistungen“ */
.mega-col { display: grid; align-content: start; gap: var(--sp-1); }
.submenu .mega-col__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--c-navy-900);
}
.mega-col__title .icon { width: 1.25rem; height: 1.25rem; color: var(--c-blue-500); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }

/* Mobile-Navigation */
@media (max-width: 63.99rem) {
  /* backdrop-filter am Header macht ihn zum Bezugsrahmen – daher top: 100% + Höhe */
  .main-nav {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--sp-4) var(--gutter) var(--sp-8);
    background: var(--c-surface);
  }
  .main-nav[hidden] { display: none; }
  .main-nav__list > li { border-bottom: 1px solid var(--c-line); }
  .main-nav__list > li > a,
  .main-nav__list > li > button { padding: var(--sp-4) 0; font-size: 1.1875rem; justify-content: space-between; }
  .submenu { padding: 0 0 var(--sp-4); }
  .submenu--mega { display: grid; gap: var(--sp-5); }
  .main-nav .btn { width: 100%; margin-top: var(--sp-6); }
}

/* Desktop-Navigation */
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .main-nav__home { display: none; }   /* „Startseite“ nur im Handy-Menü, am Desktop führt das Logo zur Startseite */

  /* Größeres Logo, beim Scrollen schrumpfen Header und Logo auf die Lesehöhe (Klasse setzt orthoinfo.js).
     Nur am Header gesetzt: Sprungmarken und Sticky-Spalten rechnen weiter mit 5.5rem. */
  .site-header { --header-h: 6.5rem; }
  .site-header.is-scrolled { --header-h: 5.5rem; }
  .site-logo img { width: clamp(13rem, 2.6rem + 16.3vw, 17.25rem); }
  .site-header.is-scrolled .site-logo img { width: clamp(13rem, 2.6rem + 16.3vw, 13.75rem); }
  .main-nav,
  .main-nav[hidden] { display: flex; align-items: center; gap: var(--sp-5); }
  .main-nav { gap: clamp(1.5rem, .5rem + 2vw, 2.75rem); }
  .main-nav__list { display: flex; gap: clamp(1.25rem, .4rem + 1.6vw, 2.5rem); }
  .main-nav__list > li { position: relative; }
  .main-nav__list > li > a,
  .main-nav__list > li > button { padding: var(--sp-2) 0; font-size: 1.0625rem; width: auto; }
  .main-nav__list > li > a:hover,
  .main-nav__list > li > button:hover { color: var(--c-blue-500); }
  .submenu {
    position: absolute;
    top: calc(100% + .75rem);
    left: -1rem;
    min-width: 17rem;
    padding: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .submenu::before { content: ""; position: absolute; inset: -.85rem 0 auto; height: .85rem; }

  /* Mega-Menü spannt über die Containerbreite */
  .site-header__inner { position: relative; }
  .main-nav__list > li.has-mega { position: static; }
  .submenu--mega {
    left: 0;
    right: 0;
    top: calc(100% - .25rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-6);
  }
  .submenu--mega::before { inset: -1.75rem 0 auto; height: 1.75rem; }
  .submenu--mega[hidden] { display: none; }

  .main-nav .btn { min-height: 2.75rem; padding: .5rem 1.25rem; }
}

/* Hero -------------------------------------------------------------------- */
/* Ein Bild für alle Geräte: Ausschnitt per object-position steuern.
   In Bricks: Bild-Element + Klasse .hero__media, --hero-focus pro Bild setzen. */
.hero { position: relative; }
.hero__media {
  --hero-focus: 60% 25%;
  margin: 0;
  background: var(--c-navy-900);
}
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 44rem;
  object-fit: cover;
  object-position: var(--hero-focus);
}
/* Slider (Startseite): Bilder liegen übereinander und blenden weich über (wie live, 1,5 s).
   Das erste Bild bleibt im Fluss und gibt die Höhe vor. Ohne JS ist nur das erste sichtbar.
   In Bricks: Slider (Nestable) mit Effekt „fade“, Autoplay 6 s, Pause bei Hover/Fokus, Pausen-Knopf. */
.hero__slider { --slide-dauer: 6s; position: relative; }
.hero__slider img { transition: opacity 1.5s ease; }
.hero__slider img:not(:first-child) {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}
.hero__slider img:not(.ist-aktiv) { opacity: 0; }
.hero__slider:not(.ist-bereit) img:first-child { opacity: 1; }   /* vor dem Start des Skripts */
.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-4);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 10, 16, .35);
  color: #fff;
  cursor: pointer;
}
.hero__pause:hover { background: rgba(8, 10, 16, .55); }
.hero__pause:focus-visible { outline: 3px solid var(--c-teal-400); outline-offset: 2px; }
.hero__pause .icon { width: 1.125rem; height: 1.125rem; }
/* Zeitring: blasse Bahn, darüber die weiße Linie, die sich im Uhrzeigersinn füllt */
.hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.hero__ring-bahn { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.hero__ring-lauf {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 125.7;                  /* Umfang 2 · π · 20 */
  stroke-dashoffset: 125.7;
}
.hero__slider.laeuft .hero__ring-lauf { animation: hero-ring var(--slide-dauer) linear forwards; }
.hero__slider.ist-angehalten .hero__ring-lauf { animation-play-state: paused; }
@keyframes hero-ring { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__slider img { transition: none; } }

.hero__content { color: var(--c-on-dark); }
.hero .eyebrow { color: var(--c-teal-400); }
.hero h1 {
  max-width: 20ch;
  margin-bottom: var(--sp-6);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--c-on-dark);
}

/* Text liegt unten links im Foto (wie live, auch mobil). Verlauf von unten sichert den
   Kontrast, Gesichter (obere Bildhälfte) bleiben frei. */
.hero {
  display: grid;
  overflow: hidden;
  background: var(--c-navy-900);
}
.hero > * { grid-area: 1 / 1; }
.hero__media { position: relative; }
/* Neutrales Schwarz statt Navy: lässt die rote Wand im Foto sauber stehen */
.hero__media::after {
  --shade: 8, 10, 16;
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), .36) 26%, rgba(var(--shade), .1) 46%, rgba(var(--shade), 0) 58%),
    linear-gradient(90deg, rgba(var(--shade), .25) 0%, rgba(var(--shade), 0) 45%);
  /* Bewusst leicht (Wunsch der Praxis): auf hellen Bildstellen liegt der Weißtext teils unter 4,5 : 1. */
}
.hero__wrap {
  position: relative;
  align-self: end;
  width: min(100% - 2 * var(--gutter), var(--w-container));
  margin-inline: auto;
  padding-bottom: var(--sp-5);
}
.hero__content { max-width: 44rem; }

/* Mobil: Bild höher als 16 : 10, damit Text und Gesichter Platz haben. Der Text nimmt hier
   einen größeren Teil des Bildes ein, deshalb ein kräftigerer Verlauf und ein weicher Schatten.
   Die Buttons übernimmt die feste Aktionsleiste Anrufen/Termin (wie auf den Unterseiten). */
@media (max-width: 47.99rem) {
  .hero__media img { aspect-ratio: 5 / 4; max-height: none; }
  .hero__media::after {
    background: linear-gradient(0deg, rgba(var(--shade), .72) 0%, rgba(var(--shade), .5) 30%, rgba(var(--shade), .12) 55%, rgba(var(--shade), 0) 70%);
  }
  .hero h1 { max-width: calc(100% - 3.25rem); margin-bottom: 0; text-shadow: 0 1px 12px rgba(8, 10, 16, .45); }   /* rechts Platz für den Pausen-Knopf */
  .hero .btn-row { display: none; }
}

/* Ab Tablet: breites Bildformat */
@media (min-width: 48rem) {
  .hero__wrap { padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
  .hero__media img {
    height: 100%;
    aspect-ratio: 1920 / 750;
    min-height: 30rem;
    max-height: 46rem;
  }
}

/* Willkommen -------------------------------------------------------------- */
.welcome__media { position: relative; }
.welcome__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: var(--radius-lg);
}
.stat-badge {
  position: absolute;
  right: clamp(-1rem, -2vw, 0rem);
  bottom: var(--sp-6);
  display: grid;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-navy-900);
  color: var(--c-on-dark);
  box-shadow: var(--shadow);
}
.stat-badge strong { font: 600 2.25rem/1 var(--font-heading); color: var(--c-teal-400); }
.stat-badge span { font-size: var(--fs-sm); }

/* Startseite: Mobil steht der Text vor dem Gruppenbild, sonst folgt das Bild direkt auf das Hero-Foto */
@media (max-width: 59.99rem) { .welcome__media--nach-text { order: 1; } }

/* Desktop: Bild übernimmt die Höhe der Textspalte */
@media (min-width: 60rem) {
  .welcome__media { align-self: stretch; }
  .welcome__media img { height: 100%; aspect-ratio: auto; }
}

/* Quadratisches Bild ohne Streckung auf Texthöhe (z. B. Kooperationsklinik) */
.welcome__media--square img,
.welcome__media--square img[src] { aspect-ratio: 1 / 1; height: auto; }
@media (min-width: 60rem) { .welcome__media--square { align-self: center; } }

/* Bild und Text oben bündig */
.split--top { align-items: start; }
@media (min-width: 60rem) { .split--top .welcome__media--square { align-self: start; } }

/* Vorzüge quer unter beiden Spalten */
.feature-list--row[role="list"] { margin-top: var(--sp-7); gap: var(--sp-4); }
@media (min-width: 48rem) { .feature-list--row[role="list"] { grid-template-columns: repeat(3, 1fr); } }
.feature-list--row li { padding: var(--sp-5); border-radius: var(--radius); background: var(--c-surface-alt); }

.welcome__text .prose p { color: var(--c-muted); }

.feature-list[role="list"] {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.feature-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature-list strong { display: block; color: var(--c-navy-900); line-height: 1.35; }
.feature-list span { color: var(--c-muted); font-size: var(--fs-sm); }

/* Ärzte ------------------------------------------------------------------- */
.doctor .card__media { aspect-ratio: 1 / 1; }
.doctor .card__media img { object-position: 50% 0; }
.doctor__role { font-size: var(--fs-sm); color: var(--c-blue-500); font-weight: 600; margin-top: -.25rem; }

/* Ärzte-Hover: Karte hebt sich wie alle Karten, zusätzlich wächst eine
   Türkis-Linie unter dem Foto, Name und Pfeil reagieren. */
.doctor .card__media { position: relative; }
.doctor .card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--c-teal-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.doctor .card__media img { filter: saturate(.92); transition: filter .45s var(--ease); }
.doctor:hover .card__media img,
.doctor:focus-within .card__media img { transform: none; filter: saturate(1.05); }
.doctor:hover .card__media::after,
.doctor:focus-within .card__media::after { transform: scaleX(1); }
.doctor h3 { transition: color var(--dur) var(--ease); }
.doctor:hover h3,
.doctor:focus-within h3 { color: var(--c-navy-700); }
.doctor .link-arrow {
  align-self: flex-start;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--ease);
}
.doctor:hover .link-arrow,
.doctor:focus-within .link-arrow { background-size: 100% 2px; }

/* Leistungen -------------------------------------------------------------- */
.service .card__body { padding: var(--sp-6); gap: var(--sp-4); }
.service .icon-badge { width: 3.5rem; height: 3.5rem; }
.service .icon { width: 1.75rem; height: 1.75rem; }

/* Kontakt & Anfahrt ------------------------------------------------------- */
.visit {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 60rem) { .visit { grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: center; } }

.map-consent {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(3, 33, 103, .78), rgba(3, 33, 103, .78)),
    repeating-linear-gradient(45deg, #0b2d7a 0 2px, transparent 2px 22px),
    #0a2a73;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 48rem) { .map-consent { aspect-ratio: 4 / 3; } }
.map-consent p { max-width: 34ch; margin-inline: auto; color: var(--c-on-dark-muted); font-size: var(--fs-sm); }
.map-consent .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--sp-4); color: var(--c-teal-400); }
.map-consent .btn { margin-top: var(--sp-4); }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Startseite: Foto der Praxis statt Karte (Route planen steht bei der Adresse) */
.visit__media { margin: 0; }
.visit__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(2, 14, 53, .45);
}

.info-list { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0 0; }
.info-list > div { display: flex; gap: var(--sp-4); }
.info-list .icon-badge { background: rgba(70, 208, 214, .14); color: var(--c-teal-400); }
.info-list dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-teal-200);
}
.info-list dd { margin: 0; font-size: 1.0625rem; }
.info-list a { color: var(--c-on-dark); }

.hours { border-collapse: collapse; font-size: 1.0625rem; }
.hours th { padding: 0 var(--sp-4) 0 0; font-weight: 600; text-align: left; vertical-align: top; white-space: nowrap; }
.hours td { padding: 0; }

/* Patientenstimmen -------------------------------------------------------- */
.reviews { display: grid; gap: var(--sp-5); }
@media (min-width: 52rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-6);
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.review__stars { display: flex; gap: 2px; color: #e3a008; }
.review__stars svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.7; }
.review figcaption { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); }

/* News -------------------------------------------------------------------- */
.post .card__media { aspect-ratio: 16 / 10; }
.post .card__media img { object-position: 50% 0; }   /* oben ausrichten: Köpfe nicht beschneiden */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.post__meta span:first-child { font-weight: 600; color: var(--c-blue-500); letter-spacing: .06em; text-transform: uppercase; }
.post h3 { font-size: 1.1875rem; line-height: 1.35; }

/* Kontaktformular --------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-7); }
@media (min-width: 60rem) { .contact { grid-template-columns: 5fr 7fr; gap: var(--sp-8); } }
.contact__intro p { color: var(--c-on-dark-muted); font-size: var(--fs-lead); max-width: 34ch; }
.contact__channels { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.contact__channels a,
.contact__channels div {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-on-dark);
  font-size: 1.125rem;
  text-decoration: none;
}
.contact__channels a:hover { text-decoration: underline; }
.contact__channels .icon { color: var(--c-teal-400); }
.contact__channels small { color: var(--c-on-dark-muted); font-size: var(--fs-sm); }

.form {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  color: var(--c-ink);
}
@media (min-width: 40rem) { .form { grid-template-columns: 1fr 1fr; } }
.form h3 { grid-column: 1 / -1; margin-bottom: 0; color: var(--c-navy-900); }   /* sonst weiß aus .section--dark */
.field { display: grid; gap: var(--sp-1); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy-900); }
.field label span { color: var(--c-muted); font-weight: 400; }
.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border: 1.5px solid #b9c0d4;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-navy-700);
  box-shadow: 0 0 0 3px rgba(70, 208, 214, .45);
}
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-muted); }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--c-navy-900); }
.form .btn { justify-self: start; }
.form__hint { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.form__status { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--c-blue-500); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  padding-block: var(--sp-8) var(--sp-5);
  background: var(--c-navy-950);
  color: var(--c-on-dark-muted);
  font-size: 1rem;
}
.site-footer a { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
/* Tablet: Praxislogo, Text und Partnerlogos über die volle Breite, darunter Ärzte, Leistungen, Kontakt */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand img { width: 12rem; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.site-footer address { font-style: normal; }
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-on-dark);
  font: inherit;
  cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.footer-brand p { max-width: 30ch; }
.footer-heading {
  margin: 0 0 var(--sp-4);
  font: 600 var(--fs-xs) var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-teal-400);
}
.footer-links { display: grid; gap: var(--sp-2); }
.partners[role="list"] { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.partners img { width: auto; height: 3.5rem; margin: 0; object-fit: contain; filter: none; }   /* farbig, nicht weiß wie das Praxislogo darüber */
.social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
}
.social a:hover { background: rgba(255, 255, 255, .1); }
.social .icon { width: 1.25rem; height: 1.25rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-sm);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* Mobile Aktionsleiste ---------------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgba(3, 33, 103, .08);
}
.action-bar .btn { min-height: 3rem; padding-inline: var(--sp-3); }
@media (max-width: 47.99rem) { body { padding-bottom: 4.5rem; } }
@media (min-width: 48rem) { .action-bar { display: none; } }


/* LEISTUNGSSEITE (Template)
   In Bricks: ein Template für alle Unterseiten von Diagnostik /
   Konservative Therapie / Operative Therapie.
   -------------------------------------------------------------------------- */

/* Seitenkopf -------------------------------------------------------------- */
/* Feine Körnung (SVG-Rauschen, ca. 5 % Deckkraft) als oberste Ebene: verhindert Farbabrisse
   im dunklen Verlauf. Statisch, kein Extra-Request (Bricks: zweites Hintergrundbild). */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(60rem 30rem at 85% 0%, rgba(70, 208, 214, .14), transparent 60%),
    linear-gradient(135deg, var(--c-navy-950) 0%, var(--c-navy-900) 55%, #0b3a8f 100%);
  color: var(--c-on-dark);
}
.page-hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 60rem) { .page-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--sp-8); } }
.page-hero .eyebrow { color: var(--c-teal-400); }
.page-hero h1 { max-width: 18ch; color: var(--c-on-dark); hyphens: manual; }
.page-hero__lead { max-width: 44ch; margin-bottom: var(--sp-6); font-size: var(--fs-lead); color: var(--c-on-dark-muted); }
/* Mobil übernimmt die Aktionsleiste Anrufen/Termin */
@media (max-width: 47.99rem) {
  .page-hero .btn-row { display: none; }
  .page-hero__lead { margin-bottom: 0; }
  .page-hero__media img { aspect-ratio: 16 / 10; }
}
.page-hero__media { margin: 0; }
.page-hero__media--oben { --bildfokus: 50% 0; }        /* Köpfe nie anschneiden */
.page-hero__media--unten { --bildfokus: 50% 100%; }    /* z. B. Füße am Boden */
.page-hero__media--fokus-40 { --bildfokus: 50% 40%; }
/* Grafiken/Keyvisuals: vollständig zeigen, ohne Beschnitt, Schatten und Rundung */
.page-hero__media--plain img,
.page-hero__media--plain img[src] {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  max-width: 28rem;
  margin-inline: auto;
}
/* Bildfeld 5:4 (etwas höher als 4:3: Hände, Füße und Geräte bleiben im Bild).
   Ausschnitt mittig; Porträts/Gruppen oben bündig. Bricks: Klasse am Bild-Element. */
.page-hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: var(--bildfokus, 50% 50%);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(2, 14, 53, .45);
}

/* Inhalt + Seitenspalte --------------------------------------------------- */
.article-layout { display: grid; gap: var(--sp-8); }
@media (min-width: 64rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(3rem, 1rem + 4vw, 6rem); }
}

.article { max-width: var(--measure); }
.article > * + * { margin-top: var(--sp-5); }
.article > :first-child { margin-top: 0; }
.article h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
}
.article h2:first-child { margin-top: 0; }
.article h2 + * { margin-top: 0; }
.article p { margin-bottom: 0; }
.article p + p { margin-top: var(--sp-4); }
.article .lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-navy-900);
}

/* Hinweisbox */
.note {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-left: 4px solid var(--c-teal-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(70, 208, 214, .1);
}
.note .icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--c-navy-900); }
.note strong { color: var(--c-navy-900); }

/* Checkliste (Messbereiche) */
.checklist {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.checklist__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.checklist > .checklist__title { margin-bottom: var(--sp-3); }   /* stärker als „.article p" (Abstand 0) */
.checklist__title .icon { width: 1.125rem; height: 1.125rem; }
.checklist ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.checklist li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line);
}
.checklist li:first-child { border-top: 0; padding-top: var(--sp-4); }   /* etwas Luft unter der Kartenüberschrift */
.checklist li .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--c-blue-500); stroke-width: 2.25; }

/* Ablauf in Schritten */
.steps { display: grid; gap: 0; margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-navy-900);
  color: var(--c-on-dark);
  font-weight: 700;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: .5rem;
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--c-line);
}
.steps li:last-child { padding-bottom: 0; }
.article h2 + .steps { margin-top: calc(var(--sp-4) + var(--sp-3)); }   /* Kreise stehen oben bündig: etwas mehr Luft unter der Überschrift (28 statt 16 px) */
.steps h3 { margin: .45rem 0 var(--sp-1); font-size: 1.1875rem; }

/* Chips (Anwendungsbereiche) */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface-alt);
  font-size: 1rem;
  line-height: 1.3;
}
.chips .icon { width: 1rem; height: 1rem; color: var(--c-blue-500); stroke-width: 2.5; }

/* Vorteile */
.benefits { display: grid; gap: var(--sp-3); margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; }
.benefits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }   /* zweispaltig nur, wenn jede Kachel mind. 22rem breit ist */
.benefits li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  font-weight: 600;
  color: var(--c-navy-900);
  line-height: 1.35;
}
.benefits li { -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; }   /* kurze Stichpunkte: ganze Wörter umbrechen, nicht trennen */
.benefits .icon-badge { width: 2.5rem; height: 2.5rem; }
.benefits .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.25; }

/* Seitenspalte */
.aside { display: grid; gap: var(--sp-5); align-content: start; }
@media (min-width: 64rem) { .aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); } }
.aside-card {
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--c-surface-alt);
}
.aside-card h2 { margin-bottom: var(--sp-2); font-size: var(--fs-h3); }
.aside-card > p { color: var(--c-muted); font-size: 1rem; }
.aside-card .btn { width: 100%; margin-top: var(--sp-3); }
.aside-card .btn--outline { border-color: var(--c-navy-900); color: var(--c-navy-900); background: transparent; }
.aside-card .btn--outline:hover { background: var(--c-navy-900); color: var(--c-on-dark); }
.aside-card .hours { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--c-muted); }
.aside-card .hours th { color: var(--c-navy-900); }

.aside-nav { padding: var(--sp-5) var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.aside-nav h2 {
  margin-bottom: var(--sp-2);
  font: 600 var(--fs-xs) var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.aside-nav ul { margin: 0; padding: 0; list-style: none; }
.aside-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 1rem;
  text-decoration: none;
}
.aside-nav li:first-child a { border-top: 0; }
.aside-nav a .icon { width: 1rem; height: 1rem; color: var(--c-blue-500); transition: transform var(--dur) var(--ease); }
.aside-nav a:hover { color: var(--c-navy-900); }
.aside-nav a:hover .icon { transform: translateX(3px); }
.aside-nav a[aria-current="page"] { font-weight: 600; color: var(--c-navy-900); }

/* ARZTPROFIL (Template)
   -------------------------------------------------------------------------- */
/* Quadratisch und eng geschnitten wie auf der bisherigen Website: das Gesicht wirkt größer.
   28rem: etwa so hoch wie die Textspalte, damit der Seitenkopf nicht höher wird als nötig */
.page-hero--profile .page-hero__media img { aspect-ratio: 1; max-width: 28rem; margin-left: auto; object-position: 50% 0; }
.page-hero--profile h1 { max-width: none; }
.page-hero--profile h1 small {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: .5em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-on-dark-muted);
}
/* Bis Tablet: Porträt vor dem Text */
@media (max-width: 59.99rem) {
  .page-hero--profile .page-hero__media { order: -1; }
  .page-hero--profile .page-hero__media img { aspect-ratio: 4 / 3; max-width: none; }
  .page-hero--profile .tags { margin-bottom: 0; }
  .page-hero--profile .page-hero__lead { margin-bottom: var(--sp-5); }
}

/* Schwerpunkt-Tags im Seitenkopf */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.tags li {
  padding: .4rem .9rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--c-on-dark);
}

/* Vita als Zeitleiste */
.timeline { margin: 0; padding: 0 0 0 .4375rem; list-style: none; }   /* Punkte außen bündig mit dem Text darüber (nicht die Linie) */
/* Linie als eigenes Element: beginnt im ersten Punkt und endet im letzten, statt oben überzustehen */
.timeline li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
  border-left: 2px solid transparent;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: var(--c-line);
}
.timeline li:first-child::after { top: .7375rem; }        /* Mitte des Punkts (.3rem + .875rem / 2) */
.timeline li:last-child::after { bottom: auto; height: .7375rem; }
.timeline li:only-child::after { display: none; }
.timeline li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: .3rem;
  left: -.5rem;
  width: .875rem;
  height: .875rem;
  border: 3px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-teal-400);
  box-shadow: 0 0 0 1px var(--c-teal-400);
}
.timeline__date {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.timeline h3 { margin-bottom: var(--sp-2); font-size: 1.1875rem; }
.timeline .link-arrow { margin-top: var(--sp-2); }

/* Schwerpunkte */
.focus-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.focus-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.focus-item h3 { margin: 0; font-size: 1.125rem; }
.focus-item p { margin: 0; font-size: 1rem; color: var(--c-muted); line-height: 1.55; }

/* Profisport */
.pro-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pro-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.pro-card__date { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue-500); }
.pro-card h3 { margin: 0; font-size: 1.1875rem; }
.pro-card p { margin: 0; color: var(--c-muted); font-size: 1rem; }
.pro-card img { width: 3rem; height: 3rem; object-fit: contain; margin-bottom: var(--sp-2); }
.pro-card .link-arrow { margin-top: auto; padding-top: var(--sp-3); }
/* Aktuelle Station: ruhig hervorgehoben über eine leichte Flächenfarbe */
.pro-card--highlight { border-color: transparent; background: var(--c-surface-alt); }
.pro-card--highlight img { width: 3.5rem; height: 3.5rem; }
/* Vereinslogo am Ende der Kachel, zusammen mit „Zum Profil“ als ein Link */
.pro-card .pro-card__profil { gap: var(--sp-3); }
.pro-card .pro-card__profil img { width: 2.5rem; height: 2.5rem; margin: 0; }

/* Bewertungen mit Note */
.review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.review__grade { font-size: var(--fs-sm); color: var(--c-muted); }
.review__grade strong { font-size: 1.125rem; color: var(--c-navy-900); }
.review h3 { margin: 0; font-size: 1.125rem; }
/* Bewertungen auf weißem Hintergrund */
.reviews--bordered .review { border: 1px solid var(--c-line); box-shadow: none; }
@media (min-width: 52rem) { .reviews--two { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-inline: auto; } }

/* KATEGORIESEITE (Diagnostik / Konservativ / Operativ)
   -------------------------------------------------------------------------- */
/* Faktenleiste unter dem Seitenkopf */
.facts { border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.facts ul {
  display: grid;
  gap: var(--sp-5);
  margin: 0 auto;
  padding: var(--sp-6) 0;
  list-style: none;
}
@media (min-width: 48rem) { .facts ul { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.facts li { display: flex; gap: var(--sp-4); align-items: center; }
.facts strong { display: block; color: var(--c-navy-900); line-height: 1.35; }
.facts div > span { display: block; margin-top: .15rem; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.45; }

/* Raster füllen sich von links, Karten gleich breit */
/* Festes Raster: 1 / 2 / 3 Spalten, letzte Reihe behält die Spaltenbreite (linksbündig) */
.grid-3.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid-3.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid-3.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-grid .card__body { padding: var(--sp-6); gap: var(--sp-4); }
.service-grid .icon-badge { width: 3.5rem; height: 3.5rem; }
.service-grid .icon { width: 1.75rem; height: 1.75rem; }

/* KARRIERE
   -------------------------------------------------------------------------- */
.article > .eyebrow + h2 { margin-top: 0; }
.apply-info { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); font-size: 1rem; }
.apply-info p { margin: 0; }
.apply-info small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.apply-info a { font-weight: 600; overflow-wrap: anywhere; }
.benefits li { font-weight: 500; font-size: 1rem; }

/* FAQ – natives <details>-Akkordeon, ohne JavaScript bedienbar
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); align-content: start; max-width: var(--measure); }
.faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: transparent; box-shadow: var(--shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--c-navy-900);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-navy-700); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.faq summary .icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: .4rem;
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-blue-500);
  transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.faq details[open] summary .icon { transform: rotate(180deg); background: rgba(70, 208, 214, .18); }
.faq__answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-ink); }
.faq__answer p + p, .faq__answer p + ul, .faq__answer ul + p { margin-top: var(--sp-3); }
.faq__answer ul { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.faq__answer li { display: flex; gap: var(--sp-3); }
.faq__answer li .icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .3rem; color: var(--c-blue-500); stroke-width: 2.25; }

/* DOWNLOADS
   -------------------------------------------------------------------------- */
.downloads { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.download {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}
@media (min-width: 40rem) { .download { grid-template-columns: auto 1fr auto; } }
.download .icon-badge { width: 3.5rem; height: 3.5rem; }
.download .icon-badge .icon { width: 1.75rem; height: 1.75rem; }
.download h3 { margin: 0 0 var(--sp-1); font-size: 1.1875rem; }
.download p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.download .btn { grid-column: 1 / -1; }
@media (min-width: 40rem) { .download .btn { grid-column: auto; } }

/* NEWS – Übersicht & Beitrag
   -------------------------------------------------------------------------- */
/* Aufmacher: neuester Beitrag groß */
.post--featured { margin-bottom: var(--sp-6); }
.post--featured .card__media { aspect-ratio: 16 / 9; }   /* Querformat-Bild bis Tablet ungeschnitten */
@media (min-width: 60rem) {
  .post--featured { flex-direction: row; }
  .post--featured .card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 22rem; }
  .post--featured .card__body { justify-content: center; padding: var(--sp-7); }
  .post--featured h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
}
.post time { color: var(--c-muted); }

/* Einzelbeitrag: Bild im Seitenkopf, etwas kleiner als bei Leistungen */
.page-hero--post { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-hero--post h1 { max-width: 24ch; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); }
.page-hero--post .page-hero__media img { aspect-ratio: 16 / 10; }
@media (min-width: 60rem) { .page-hero--post .page-hero__grid { grid-template-columns: 3fr 2fr; } }
@media (max-width: 47.99rem) { .page-hero--post .page-hero__media { order: -1; } }

/* Einzelbeitrag */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); color: var(--c-on-dark-muted); font-size: var(--fs-sm); }
.post-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.post-meta .icon { width: 1rem; height: 1rem; color: var(--c-teal-400); }
.article figure { margin: 0 0 var(--sp-6); }
.article figure img { width: 100%; border-radius: var(--radius-lg); }
.article figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.back-link { display: inline-flex; margin-top: var(--sp-7); }
.back-link .icon { transform: rotate(180deg); }

/* Arzt-Kurzprofil in der Seitenspalte */
/* Foto + Name nebeneinander, Bezeichnung darunter über volle Breite */
.doctor-mini { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-3) var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.doctor-mini > div { display: contents; }
.doctor-mini img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 0; }
.doctor-mini strong { display: block; color: var(--c-navy-900); font-size: 1.125rem; line-height: 1.3; }
.doctor-mini span { grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-muted); }

/* RECHTSTEXTE (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.page-hero--slim { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-hero--slim h1 { margin-bottom: 0; }
.legal h2 { margin-top: var(--sp-7); font-size: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal address { font-style: normal; }
.legal p, .legal address { color: var(--c-ink); }
.legal h3 { margin-top: var(--sp-6); font-size: 1.25rem; }
.legal h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: 1.1875rem; color: var(--c-ink); }   /* Zwischenfrage/-punkt unter h3 */
.legal h2 + h3 { margin-top: var(--sp-4); }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li + li { margin-top: var(--sp-2); }
.legal a { overflow-wrap: anywhere; }

/* Inhaltsverzeichnis links, Text rechts */
@media (min-width: 64rem) {
  .article-layout--toc { grid-template-columns: 18rem minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--header-h) + var(--sp-5)); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
}
.article-layout > * { min-width: 0; }
.toc { align-self: start; padding: var(--sp-5); border-radius: var(--radius); background: var(--c-surface-alt); hyphens: auto; overflow-wrap: break-word; }
.legal { hyphens: auto; overflow-wrap: break-word; }
.toc h2 {
  margin-bottom: var(--sp-3);
  font: 600 var(--fs-xs) var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.toc ol { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: var(--sp-1) 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-ink); text-decoration: none; }
.toc a:hover { color: var(--c-navy-700); text-decoration: underline; }

/* KONTAKTSEITE
   -------------------------------------------------------------------------- */
.page-hero--compact .page-hero__grid { grid-template-columns: 1fr; }
.page-hero--compact h1 { max-width: 20ch; }

/* Schnellkontakt-Kacheln im Seitenkopf */
.quick-contact { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 60rem) { .quick-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.quick-contact a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  color: var(--c-on-dark);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quick-contact a:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-teal-400); transform: translateY(-2px); color: var(--c-on-dark); }
.quick-contact .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--c-teal-400); }
.quick-contact small { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal-200); }
.quick-contact strong { font-size: 1.0625rem; font-weight: 600; }

/* Standort: Infos + Karte */
.location { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 60rem) { .location { grid-template-columns: 6fr 5fr; gap: var(--sp-8); } }
.location .map-consent { aspect-ratio: auto; height: 100%; min-height: 26rem; }
@media (min-width: 60rem) { .location .map-consent { position: sticky; top: calc(var(--header-h) + var(--sp-5)); height: auto; aspect-ratio: 4 / 5; } }
/* Kontaktseite: Foto des Praxisschilds statt Karte (Route planen steht bei der Adresse) */
.location__media { margin: 0; }
.location__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius-lg);
}
@media (min-width: 60rem) {
  .location__media { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
  .location__media img { aspect-ratio: 4 / 5; }
}

.info-blocks { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
@media (min-width: 40rem) { .info-blocks { grid-template-columns: 1fr 1fr; } }
.info-block { display: flex; gap: var(--sp-4); align-items: flex-start; }
.info-block .icon-badge { width: 2.75rem; height: 2.75rem; }
.info-block .icon { width: 1.25rem; height: 1.25rem; }
.info-block h3 {
  margin: .1rem 0 var(--sp-2);
  font: 600 var(--fs-xs) var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue-500);
}
.info-block p, .info-block address, .info-block .hours { margin: 0; font-size: 1.0625rem; font-style: normal; }
.info-block p + p { margin-top: var(--sp-2); }
.info-block a { font-weight: 600; }
.info-block small { color: var(--c-muted); font-size: var(--fs-sm); }
.info-block .hours th { display: block; padding: 0; font-weight: 600; color: var(--c-navy-900); }
.info-block .hours td { display: block; padding: 0 0 var(--sp-2); }
.info-block--wide { grid-column: 1 / -1; }

/* Neben der Karte: eine Spalte, Tag und Uhrzeit auf einer Zeile */
.info-blocks.info-blocks--stack { grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 30rem) {
  .info-blocks--stack .hours th,
  .info-blocks--stack .hours td { display: table-cell; padding: 0 0 var(--sp-1); }
  .info-blocks--stack .hours th { padding-right: var(--sp-4); white-space: nowrap; }
}

/* Klinik-Anfahrt */
.travel { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 48rem) { .travel { grid-template-columns: 1fr 1fr; } }
.travel__item { padding: var(--sp-6); border-radius: var(--radius); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.travel__item h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: 1.1875rem; }
.travel__item h3 .icon { color: var(--c-blue-500); }
.travel__item p { color: var(--c-muted); }
.travel__item p + p { margin-top: var(--sp-3); }

.mps-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--c-muted);
}
.mps-note strong { color: var(--c-navy-900); }

/* Abschluss-CTA */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin-inline: auto; }
.cta-band p { max-width: 44ch; margin: 0 auto var(--sp-6); color: var(--c-on-dark-muted); font-size: var(--fs-lead); }
/* Zentrierte Einleitungen: Zeilen gleich lang verteilen statt ein einzelnes Wort in der letzten Zeile,
   ohne Silbentrennung (Trennstriche stören in kurzen, mittig gesetzten Texten) */
:is(.cta-band, .section-head) p { text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.cta-band .btn-row { justify-content: center; }


/* BEWEGUNG – dezent, nur Transparenz und Position
   Alles gilt nur ohne „Bewegung reduzieren“. Ohne JavaScript ist alles sichtbar.
   -------------------------------------------------------------------------- */
.site-header { transition: box-shadow var(--dur) var(--ease); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(3, 33, 103, .08); }

@media (prefers-reduced-motion: no-preference) {

  /* 0 · Header und Logo schrumpfen weich */
  .site-header__inner { transition: min-height var(--dur) var(--ease); }
  .site-logo img { transition: width var(--dur) var(--ease); }

  /* 1 · Hero der Startseite: einmalig beim Laden */
  @keyframes oi-rise { from { opacity: 0; translate: 0 12px; } }
  .hero__content > * { animation: oi-rise .5s var(--ease) both; }
  .hero__content > :nth-child(2) { animation-delay: .08s; }
  .hero__content > :nth-child(3) { animation-delay: .16s; }
  .hero__content > :nth-child(4) { animation-delay: .24s; }

  /* 2 · Einblenden beim Scrollen (Klassen setzt orthoinfo.js) */
  /* Startzustand ohne Übergang setzen, nur das Einblenden animieren */
  .reveal:not(.is-visible) { opacity: 0; translate: 0 16px; }
  .reveal.is-visible {
    transition: opacity .6s var(--ease), translate .6s var(--ease),
                box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  /* im Raster leicht versetzt */
  :is(.grid-3, .reviews, .focus-grid, .pro-grid, .feature-list--row) > .reveal:nth-child(3n+2) { transition-delay: .08s; }
  :is(.grid-3, .reviews, .focus-grid, .pro-grid, .feature-list--row) > .reveal:nth-child(3n+3) { transition-delay: .16s; }
  .focus-grid > .reveal:nth-child(4n) { transition-delay: .24s; }

  /* 3 · Menüs blenden kurz ein */
  @keyframes oi-fade { from { opacity: 0; translate: 0 -4px; } }
  @media (min-width: 64rem) { .submenu:not([hidden]) { animation: oi-fade .18s var(--ease); } }

  /* 3 · FAQ-Antworten klappen weich auf (moderne Browser, sonst sofort) */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .3s var(--ease), content-visibility .3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}


/* 6 · UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }


/* ==========================================================================
   Anpassungen für Bricks: Bausteine, die Bricks um den Inhalt legt
   ========================================================================== */
.brx-body { display: block; }                     /* Bricks: Flex-Spalte um Header, Inhalt, Footer */
#brx-header { display: contents; }                  /* Header bleibt am Seitenrand haften (sticky) */
#brx-content, #brx-footer { display: block; }
.main-nav > .brxe-shortcode { display: contents; }  /* Menü aus Design → Menüs ohne zusätzliche Box */
.aside-card > .brxe-template { display: contents; } /* Sprechzeiten als Template eingebunden */
.footer-bottom li > .brxe-shortcode { display: contents; }                 /* Cookies-Link (Borlabs) */
.footer-bottom li:is(:empty, :has(> .brxe-shortcode:empty)) { display: none; }        /* ohne Borlabs kein leerer Punkt */

/* ==========================================================================
   Kontaktformular: Ninja Forms im Aufbau des Designs (wie .form/.field/.btn--dark im Prototyp)
   Ninja Forms lädt seine Styles nach diesem Stylesheet. Deshalb beginnen die Regeln mit
   .form.form--ninja .nf-form-cont (stärker als die Ninja-Selektoren) und gelten auch dann,
   wenn unter Einstellungen „Opinionated Styles" noch „Light" oder „Dark" gewählt ist.
   ========================================================================== */
.form--ninja > .brxe-shortcode { grid-column: 1 / -1; }
.form.form--ninja .nf-form-cont { color: var(--c-ink); font: inherit; }
.form.form--ninja .nf-form-cont .nf-form-content { max-width: none; margin: 0; padding: 0; }
/* Titel und Pflichtfeld-Hinweis von Ninja Forms: Überschrift steht schon darüber, „(notwendig)" am Feld.
   Ebenso ein HTML-Feld ganz oben (z. B. „Rezept anfragen") – es wiederholt nur die Überschrift. */
.form.form--ninja .nf-form-cont :is(.nf-form-title, .nf-form-fields-required) { display: none; }
.form.form--ninja .nf-form-cont nf-field:first-child:has(> .html-container) { display: none; }
.form.form--ninja .nf-form-cont nf-fields-wrap { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .form.form--ninja .nf-form-cont nf-fields-wrap { grid-template-columns: 1fr 1fr; } }
.form.form--ninja .nf-form-cont nf-field:has(textarea, .checkbox-container, .listcheckbox-container, .listradio-container, .submit-container, .html-container, .hr-container) { grid-column: 1 / -1; }
.form.form--ninja .nf-form-cont .nf-field-container { margin: 0; }
.form.form--ninja .nf-form-cont .nf-field-container::after { display: none; }
.form.form--ninja .nf-form-cont .field-wrap { display: grid; gap: var(--sp-1); }
.form.form--ninja .nf-form-cont .nf-field-label { display: block; width: auto; margin: 0; padding: 0; }
.form.form--ninja .nf-form-cont :is(.html-container, .hr-container, .hidden-container) .nf-field-label { display: none; }   /* Bezeichnung nur im Formular-Editor, wie bei Ninja Forms */
.form.form--ninja .nf-form-cont .nf-field-label label { display: inline; margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--c-navy-900); }
.form.form--ninja .nf-form-cont .nf-field-element { width: 100%; margin: 0; }
/* Sternchen als „(notwendig)" wie im Prototyp */
.form.form--ninja .nf-form-cont .ninja-forms-req-symbol { font-size: 0; }
.form.form--ninja .nf-form-cont .ninja-forms-req-symbol::after { content: "(notwendig)"; font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted); }
.form.form--ninja .nf-form-cont :is(input:not([type=checkbox], [type=radio], [type=button], [type=submit]), textarea, select) {
  width: 100%;
  height: auto;
  min-height: 3rem;
  margin: 0;
  padding: .75rem .9rem;
  border: 1.5px solid #b9c0d4;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: none;
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.form.form--ninja .nf-form-cont .nf-field-element textarea { height: 9.5rem; min-height: 8rem; resize: vertical; }   /* wie rows="5" im Prototyp */
.form.form--ninja .nf-form-cont :is(input, textarea, select):focus { outline: none; border-color: var(--c-navy-700); box-shadow: 0 0 0 3px rgba(70, 208, 214, .45); }
/* Einwilligung: Kästchen links, Text daneben (die Ersatz-Kästchen von „Opinionated Styles" aus) */
.form.form--ninja .nf-form-cont .checkbox-wrap { display: flex; gap: var(--sp-3); align-items: flex-start; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-element { position: static; order: -1; flex: none; width: auto; opacity: 1; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-label { flex: 1; order: 0; line-height: 1.5; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-label label { position: static; margin: 0; font-weight: 400; color: var(--c-muted); }
.form.form--ninja .nf-form-cont .checkbox-wrap label::before,
.form.form--ninja .nf-form-cont .checkbox-wrap label::after { content: none; display: none; }
.form.form--ninja .nf-form-cont input[type=checkbox] { display: block; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; opacity: 1; accent-color: var(--c-navy-900); }
/* Senden-Knopf = .btn.btn--dark mit Pfeil */
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button) {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 3rem;
  padding: .75rem 3.125rem .75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--c-navy-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 1.5rem center / 1.125rem;
  color: var(--c-on-dark);
  font: 600 1rem/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button):hover { background-color: var(--c-navy-700); color: var(--c-on-dark); }
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button):active { transform: translateY(1px); }
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button):focus-visible { outline: 3px solid var(--c-teal-400); outline-offset: 2px; box-shadow: none; }
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button):disabled { opacity: .7; cursor: wait; }
/* Meldungen */
.form.form--ninja .nf-form-cont .nf-error-msg { margin-top: var(--sp-1); font-size: var(--fs-sm); color: #b3261e; }
.form.form--ninja .nf-form-cont .nf-error .nf-error-msg:empty { display: none; }
.form.form--ninja .nf-form-cont .nf-error :is(input:not([type=checkbox]), textarea) { border-color: #b3261e; }
.form.form--ninja .nf-form-cont .nf-error.field-wrap .nf-field-element::after,
.form.form--ninja .nf-form-cont .nf-pass.field-wrap .nf-field-element::after { display: none; }
.form.form--ninja .nf-form-cont .nf-form-errors .nf-error-msg { margin-top: var(--sp-3); }
.form.form--ninja .nf-form-cont .nf-response-msg { font-weight: 600; color: var(--c-blue-500); }
.form.form--ninja .nf-form-cont .nf-form-hp, .form.form--ninja .nf-form-cont .nf-form-hp * { position: absolute; left: -9999px; }