/* =========================================================================
   SCHULTERZENTRUM – SPORTTRAUMATOLOGIE MÜNCHEN
   Zentrales Stylesheet für den Relaunch (WordPress + Bricks, Child-Theme)
   Stand: Oktober 2026 · Quelle: HTML-Entwürfe und design.md
   -------------------------------------------------------------------------
   EINBINDUNG
   1. Datei als schulterzentrum.css ins Child-Theme legen, daneben den
      Ordner fonts/ mit Inter-Regular.woff2, Inter-Medium.woff2,
      InterDisplay-Medium.woff2 und Inter-LICENSE.txt.
   2. In der functions.php des Child-Themes laden (Priorität 20, also nach
      den Bricks-Styles):

        add_action( 'wp_enqueue_scripts', function () {
            wp_enqueue_style( 'schulterzentrum',
                get_stylesheet_directory_uri() . '/schulterzentrum.css',
                array(),
                filemtime( get_stylesheet_directory() . '/schulterzentrum.css' ) );
        }, 20 );

   3. Schriften im <head> vorladen (optional, empfohlen):

        add_action( 'wp_head', function () {
            $dir = get_stylesheet_directory_uri() . '/fonts/';
            foreach ( array( 'Inter-Regular', 'Inter-Medium', 'InterDisplay-Medium' ) as $f ) {
                printf( '<link rel="preload" href="%s%s.woff2" as="font" type="font/woff2" crossorigin>', $dir, $f );
            }
        }, 1 );

   HINWEISE FÜR BRICKS
   - Klassennamen 1:1 als globale Klassen in Bricks anlegen und den Elementen
     zuweisen. Styling nur über diese Datei, nicht im Bricks-Stylepanel –
     so bleiben Entwürfe und Livesite deckungsgleich.
   - Bricks-Theme-Styles für Typografie, Links und Buttons leer lassen bzw.
     auf „inherit“ setzen, damit sie diese Datei nicht überschreiben.
   - Bricks-Sektionen/-Container ohne eigene Breite/Abstände nutzen; Breite
     kommt über .container, Abstände über .section.
   - Google Fonts in Bricks deaktivieren (Einstellungen → Performance).
   - Die Datei enthält auch die Interaktions-Zustände für das JavaScript der
     Entwürfe (Navigation .is-open, Video-Schalter [data-state]). Das JS
     liegt in den HTML-Entwürfen am Seitenende und wird separat eingebunden.

   AUFBAU
    1  Schrift                       11  Übersichtsseiten
    2  Design-Tokens                 12  Infoseite Abrechnung
    3  Basis                         13  Infoseite Zweitmeinung
    4  Topbar                        14  Infoseite Vorbereitung und Kliniken
    5  Header und Navigation         15  Verfahrensseiten (OP-Techniken)
    6  Buttons und Links             16  Arztprofile
    7  Hero                          17  Praxisteam
    8  Sektionen / Startseite        18  Rechtliche Seiten
    9  Responsive (Basis)            19  Englische Seite
   10  Seitenvorlagen – gemeinsam
   ========================================================================= */
/* =========================================================
   1. SCHRIFT
   Inter 4.1 (SIL Open Font License), selbst gehostet, Latin-Subset.
   Pfade relativ zu dieser Datei: Ordner fonts/ liegt daneben.
   ========================================================= */
@font-face{ font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face{ font-family:"Inter Display"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/InterDisplay-Medium.woff2") format("woff2"); }

/* =========================================================
   2. DESIGN TOKENS
   In Bricks zusätzlich als globale Variablen anlegen (gleiche Namen).
   ========================================================= */
:root{
  /* Farben */
  --color-primary:      #0A4E7F;
  --color-navy:         #123047;
  --color-white:        #FFFFFF;
  --color-surface:      #F4F7F9;
  --color-highlight:    #E6EFF5;
  --color-text:         #243746;
  --color-text-muted:   #526575;
  --color-accent:       #EC2950;
  --color-accent-dark:  #C91F43;
  --color-accent-hover: #A8183A;
  --color-border:       #DCE5EC;

  /* Schrift: Display nur für H1, H2 und Kennzahlen */
  --font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Schriftgrößen (fluid) */
  --fs-hero:   clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-h2:     clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h3:     clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-lead:   clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  --fs-card:   clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  --fs-nav:    1.0625rem;
  --fs-topbar: .9375rem;
  --fs-btn:    1.0625rem;
  /* Gewichte: es gibt nur Regular (400) und Medium (500) */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 500; --fw-bold: 500;
  --lh-tight: 1.12; --lh-body: 1.5;
  --ls-btn: 0;

  /* Abstände im 8er-Raster */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(16px, 4vw, 32px);
  --topbar-h: 42px;
  --header-h: 84px;

  /* Radien und Schatten */
  --radius-pill: 999px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --shadow-card: 0 8px 24px rgba(18,48,71,.10);

  /* Bewegung */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 200ms;
}

/* =========================================================
   3. BASIS
   ========================================================= */
html{ box-sizing:border-box; scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; font-family:var(--font-base); letter-spacing:-0.011em; font-size:1.125rem; color:var(--color-text); background:var(--color-white); line-height:var(--lh-body); }
img, video{ max-width:100%; display:block; }
a{ color:var(--color-primary); }
h1,h2,h3{ color:var(--color-primary); font-family:var(--font-heading); }
/* H1/H2 in Inter Display, alle Überschriften Medium; Umbruch ausgeglichen */
h1, h2{ font-weight:var(--fw-medium); font-family:var(--font-display); letter-spacing:-0.02em; }
h1, h2, h3, h4{ text-wrap:balance; }
h1, h2, h3{ overflow-wrap:break-word; hyphens:auto; }
p, li{ text-wrap:pretty; }
h3{ font-weight:var(--fw-bold); }
p{ margin:0 0 var(--space-4); }
:focus-visible{ outline:3px solid var(--color-primary); outline-offset:3px; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link{ position:absolute; left:var(--space-4); top:-60px; background:var(--color-primary); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); z-index:100; }
.skip-link:focus{ top:var(--space-4); }
.icon{ width:20px; height:20px; fill:currentColor; flex:none; }

/* =========================================================
   4. TOPBAR
   ========================================================= */
.topbar{ background:var(--color-navy); color:var(--color-white); font-size:var(--fs-topbar); }
.topbar .container{ min-height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); }
.topbar p{ margin:0; }
.topbar__links, .topbar__contact{ display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0; }
.topbar__contact a{ display:inline-flex; align-items:center; gap:var(--space-2); }
.topbar li{ display:flex; align-items:center; line-height:1.2; }
.topbar__contact .icon{ width:16px; height:16px; }
.topbar a{ color:var(--color-white); text-decoration:none; }
.topbar a:hover{ text-decoration:underline; text-underline-offset:4px; }
.topbar :focus-visible{ outline-color:var(--color-white); }

/* =========================================================
   5. HEADER UND NAVIGATION
   ========================================================= */
.header{ background:var(--color-white); border-bottom:1px solid var(--color-border); position:relative; z-index:20; }
.header__main{ height:var(--header-h); display:flex; align-items:center; gap:var(--space-6); }
.logo{ flex:none; }
.logo img{ height:56px; width:auto; aspect-ratio:680/202; }
.header__info{ display:flex; align-items:center; gap:var(--space-3); flex:none; }
.header__booking{ min-height:48px; padding:10px 22px; }
.header__phone-mobile{ display:none; }

.header__nav{ flex:1; display:flex; justify-content:flex-end; align-self:stretch; }
.header__nav > .container{ max-width:none; padding:0; display:flex; }
.nav{ display:flex; align-items:stretch; gap:var(--space-5); list-style:none; margin:0; padding:0; font-size:var(--fs-nav); font-weight:var(--fw-medium); }
.nav > li{ position:relative; }
.nav__link{ white-space:nowrap; position:relative; display:inline-flex; align-items:center; gap:6px; height:100%; padding:0; border:0; background:none; font:inherit; color:var(--color-primary); text-decoration:none; cursor:pointer; }
.nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:24px; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.nav__link:hover::after, .nav > li.is-open > .nav__link::after{ transform:scaleX(1); }
.nav__link .chev{ width:10px; height:10px; transition:transform var(--dur) var(--ease); }
.nav > li.is-open > .nav__link .chev{ transform:rotate(180deg); }
.sub{ display:none; position:absolute; left:-16px; top:100%; min-width:280px; list-style:none; margin:0; padding:var(--space-2) 0;
  background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); z-index:30; }
.sub a{ display:block; padding:8px 16px; color:var(--color-text); text-decoration:none; font-weight:var(--fw-regular); font-size:1rem; }
.sub a:hover, .sub a:focus-visible{ background:var(--color-surface); color:var(--color-primary); }
.sub--wide{ display:none; min-width:640px; grid-template-columns:1fr 1fr; gap:0 var(--space-4); padding:var(--space-3) 0; }
.sub__title{ display:block; padding:8px 16px 4px; font-size:.875rem; font-weight:var(--fw-semibold); color:var(--color-text-muted); }
.sub__col{ list-style:none; margin:0; padding:0; }
@media (hover:hover) and (min-width:1241px){
  .nav > li:hover > .sub{ display:block; }
  .nav > li:hover > .sub--wide{ display:grid; }
}
.nav > li.is-open > .sub{ display:block; }
.nav > li.is-open > .sub--wide{ display:grid; }
.nav-toggle{ display:none; width:44px; height:44px; place-items:center; background:none; border:0; color:var(--color-primary); cursor:pointer; border-radius:var(--radius-sm); }
.nav-toggle svg{ width:28px; height:28px; }

/* =========================================================
   6. BUTTONS UND LINKS
   ========================================================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:48px; padding:12px 24px; border:2px solid transparent; border-radius:var(--radius-pill);
  font:var(--fw-semibold) var(--fs-btn)/1.2 var(--font-base); letter-spacing:var(--ls-btn); text-decoration:none; cursor:pointer; text-align:left;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.btn--booking{ background:var(--color-accent-dark); color:var(--color-white); }
.btn--booking:hover{ background:var(--color-accent-hover); }
.btn--booking:focus-visible{ outline-color:var(--color-accent-dark); }
.btn--outline{ background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn--outline:hover{ background:var(--color-primary); color:var(--color-white); }
.btn--lg{ min-height:56px; padding:10px 28px 10px 24px; font-size:1.0625rem; }
.btn--xl{ min-height:76px; padding:16px 52px 16px 40px; font-size:1.0625rem; }
.btn--xl svg{ width:26px; height:26px; }
.btn small{ display:block; font-size:.875rem; font-weight:var(--fw-regular); letter-spacing:0; opacity:.9; margin-top:2px; }

/* =========================================================
   7. HERO (STARTSEITE, ENGLISCHE SEITE)
   ========================================================= */
.hero{ position:relative; isolation:isolate; display:flex; align-items:center; overflow:hidden;
  min-height:max(600px, calc(100svh - var(--topbar-h) - var(--header-h))); padding-block:var(--space-8);
  background:var(--color-highlight) url("hero-poster.jpg") center/cover no-repeat; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media video{ width:100%; height:100%; object-fit:cover; }
/* Desktop: Video nach rechts versetzen, damit das Motiv neben dem Text steht */
@media (min-width:901px){
  .hero__media video{ position:absolute; top:0; left:0; width:135%; max-width:none; }
  .hero{ background-size:135% auto; background-position:left center; }
}
/* Video anhalten / abspielen (WCAG 2.2.2) */
.hero__toggle{ position:absolute; right:clamp(16px, 4vw, 32px); bottom:var(--space-5); z-index:2;
  display:inline-flex; align-items:center; gap:var(--space-2); padding:8px 16px 8px 12px;
  font:var(--fw-medium) .875rem/1.2 var(--font-base); color:var(--color-white);
  background:rgba(18,48,71,.72); border:1px solid rgba(255,255,255,.35); border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer; transition:background .2s ease; }
.hero__toggle:hover{ background:rgba(18,48,71,.9); }
.hero__toggle:focus-visible{ outline:2px solid var(--color-white); outline-offset:3px; }
.hero__toggle svg{ width:14px; height:14px; fill:currentColor; flex:none; }
.hero__toggle .icon-play{ display:none; }
.hero__toggle[data-state="paused"] .icon-play{ display:block; }
.hero__toggle[data-state="paused"] .icon-pause{ display:none; }
/* Dunkelblauer Verlauf links -> transparent rechts, für die Lesbarkeit */
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,48,71,.88) 0%, rgba(18,48,71,.7) 38%, rgba(18,48,71,.25) 60%, rgba(18,48,71,0) 74%); }
/* Heller Text auf dunklem Verlauf (nur ab Tablet – mobil steht der Text unter dem Video) */
@media (min-width:901px){
  .hero .eyebrow, .hero .hero__title{ color:var(--color-white); }
  .hero .hero__lead{ color:rgba(255,255,255,.92); }
  .hero .text-link{ color:var(--color-white); }
  .hero :focus-visible{ outline-color:var(--color-white); }
}
.hero__inner{ width:100%; }
.hero__content{ max-width:40rem; }

/* Kennzahlen direkt unter dem Hero */
.figures-section{ background:var(--color-white); padding-block:var(--space-7); border-bottom:1px solid var(--color-border); }
.figures{ display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; }
.figure{ padding-right:var(--space-6); }
.figure + .figure{ padding-left:var(--space-6); border-left:1px solid var(--color-border); }
.figure__value{ display:block; margin:0; font-family:var(--font-display); letter-spacing:-0.02em; font-weight:var(--fw-semibold); font-size:clamp(1.375rem, 1.15rem + .8vw, 1.875rem); line-height:1.2; color:var(--color-primary); }
.figure__label{ margin:var(--space-3) 0 0; font-size:1rem; line-height:1.5; color:var(--color-text-muted); max-width:34ch; }
/* Eyebrow auch für Sektionen */
.eyebrow{ display:flex; align-items:flex-start; gap:var(--space-3); margin:0 0 var(--space-4); font-size:1rem; font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary); }
.eyebrow::before{ content:""; flex:none; width:32px; height:3px; margin-top:.7em; border-radius:2px; background:var(--color-accent); }
.hero__title{ margin:0; color:var(--color-primary); font-size:var(--fs-hero); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
.hero__lead{ font-size:var(--fs-lead); margin:var(--space-5) 0 var(--space-6); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); align-items:center; }
.hero__actions .btn{ min-height:60px; }

/* =========================================================
   8. SEKTIONEN UND STARTSEITEN-BAUSTEINE
   ========================================================= */
.section{ padding-block:var(--space-9); }
.section--surface{ background:var(--color-surface); }
.section__head{ max-width:68ch; margin-bottom:var(--space-7); }
.section__head h2{ font-size:var(--fs-h2); line-height:1.2; margin:0 0 var(--space-4); text-wrap:balance; }
.section__head p{ font-size:var(--fs-lead); margin:0; }
.section__head .eyebrow{ font-size:1rem; margin-bottom:var(--space-4); }

/* Intro */
.intro{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8); align-items:start; }
.intro h2{ font-size:var(--fs-h2); line-height:1.2; margin:0 0 var(--space-5); text-wrap:balance; }
.intro__text{ max-width:68ch; }
.intro__text > p:first-of-type{ font-size:var(--fs-lead); }
.intro__aside{ display:block; }
.intro__img{ display:block; width:100%; max-width:480px; height:auto; margin-inline:auto; }
.intro__text .infobox{ margin-top:var(--space-6); }
.infobox{ background:var(--color-highlight); border-radius:var(--radius-md); padding:var(--space-6); }
.infobox h3{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.infobox p:last-of-type{ margin-bottom:var(--space-3); }
.text-link{ font-weight:var(--fw-semibold); color:var(--color-primary); text-underline-offset:4px; }
.text-link:hover{ text-decoration-thickness:2px; }

/* Behandlungsspektrum */
.spectrum{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); list-style:none; margin:0; padding:0; }
.spectrum__card{ display:flex; flex-direction:column; height:100%; background:var(--color-white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-card); border-bottom:3px solid transparent; transition:border-color var(--dur) var(--ease); }
.spectrum__card:hover, .spectrum__card:focus-within{ border-bottom-color:var(--color-accent); }
.spectrum__img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center; background:var(--color-highlight); }
.spectrum__body{ display:flex; flex-direction:column; flex:1; padding:var(--space-6); }
.spectrum__body h3{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.spectrum__body > p{ color:var(--color-text-muted); font-size:1.0625rem; }
.linklist{ list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-1); }
.linklist a{ display:flex; gap:var(--space-2); align-items:flex-start; padding:4px 0; font-size:1.0625rem; line-height:1.45; color:var(--color-text); text-decoration:none; }
.linklist a:hover{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.linklist svg{ width:16px; height:16px; fill:var(--color-primary); flex:none; margin-top:3px; }
.spectrum__body .text-link{ margin-top:auto; }

/* Ärzte */
.doctors{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); }
.doctor{ display:grid; grid-template-columns:1fr 200px; gap:var(--space-6); padding:var(--space-6); background:var(--color-white);
  border:1px solid var(--color-border); border-radius:var(--radius-md); }
.doctor__img{ order:2; align-self:start; width:200px; height:auto; aspect-ratio:auto; border-radius:var(--radius-md); }
.doctor h3{ font-size:var(--fs-h3); margin:0 0 var(--space-1); }
.doctor__title{ display:block; font-size:.875rem; font-weight:var(--fw-semibold); color:var(--color-text-muted); }
.doctor__role{ color:var(--color-text-muted); font-size:1rem; margin-bottom:var(--space-4); }
.doctor p{ font-size:1.0625rem; }
.doctor__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); }
.doctor__actions .btn{ min-height:44px; padding:10px 20px; font-size:1rem; }

/* Siegel */
.section__head--center{ margin-inline:auto; text-align:center; }
.seals{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); list-style:none; margin:0; padding:0; }
.seals li{ display:grid; place-items:center; width:136px; height:176px; padding:var(--space-4); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.seals li.seals__wide{ width:304px; }
.seals img{ max-width:100%; max-height:136px; width:auto; height:auto; object-fit:contain; }

/* Termin-CTA */
.cta{ background:var(--color-highlight); padding-block:var(--space-9); }
.cta__inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-7); align-items:center; }
.cta h2{ font-size:var(--fs-h2); line-height:1.2; margin:0 0 var(--space-3); text-wrap:balance; }
.cta p{ font-size:var(--fs-lead); margin:0; max-width:52ch; }
.cta__side{ display:grid; justify-items:center; gap:var(--space-3); }
.cta__phone{ font-size:1rem !important; color:var(--color-text-muted); }
.cta__phone a{ font-weight:var(--fw-semibold); }

/* Footer */
.footer{ background:var(--color-navy); color:var(--color-white); padding-block:var(--space-8) var(--space-6); font-size:1rem; }
.footer a{ color:var(--color-white); text-decoration:none; }
.footer a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer :focus-visible{ outline-color:var(--color-white); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-6); }
.footer__logo{ width:240px; max-width:100%; height:auto; margin-bottom:var(--space-4); }
.footer h3{ color:var(--color-white); font-size:1rem; margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid rgba(255,255,255,.2); }
.footer p{ opacity:.88; margin:0 0 var(--space-2); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); line-height:1.4; }
.footer .footer__bottom{ margin:var(--space-8) 0 0; padding-top:var(--space-5); border-top:1px solid rgba(255,255,255,.18); opacity:.8; font-size:.875rem; }

/* =========================================================
   9. RESPONSIVE (BASIS)
   ========================================================= */
@media (max-width: 1240px) and (min-width: 901px){
}
@media (max-width: 1240px) and (min-width: 901px){
  .hero::before{ background:linear-gradient(90deg, rgba(18,48,71,.9) 0%, rgba(18,48,71,.78) 48%, rgba(18,48,71,.3) 68%, rgba(18,48,71,0) 84%); }
  .hero__content{ max-width:34rem; }
}
@media (max-width: 1240px){
  .nav-toggle{ display:grid; }
  .header__main{ justify-content:space-between; }
  .header__nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--color-white);
    border-top:1px solid var(--color-border); box-shadow:var(--shadow-card); max-height:calc(100vh - 120px); overflow-y:auto; }
  .header__nav > .container{ max-width:var(--container); padding-inline:var(--gutter); display:block; }
  .header__nav.is-open{ display:block; }
  .nav{ flex-direction:column; flex-wrap:nowrap; gap:0; padding-block:var(--space-2); }
  .nav > li{ border-bottom:1px solid var(--color-border); }
  .nav > li:last-child{ border-bottom:0; }
  .nav__link{ display:flex; width:100%; height:auto; justify-content:space-between; padding-block:14px; }
  .nav__link::after{ bottom:8px; right:auto; width:48px; }
  .sub, .sub--wide{ position:static; min-width:0; border:0; box-shadow:none; border-radius:0; padding:0 0 var(--space-3); background:transparent; }
  .sub--wide{ grid-template-columns:1fr; }
  .sub a{ padding:8px 12px; }
  .spectrum{ grid-template-columns:1fr 1fr; }
  .doctors{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .intro, .cta__inner{ grid-template-columns:1fr; }
  /* Mobil: Video als Streifen oben, Text darunter */
  .hero{ display:block; min-height:0; padding:0 0 var(--space-7); background:var(--color-surface); }
  .hero::before{ display:none; }
  .hero__media{ position:relative; z-index:auto; aspect-ratio:16/9; background:var(--color-highlight) url("hero-poster.jpg") center/cover no-repeat; }
  .hero__toggle{ top:calc(100vw * 9 / 16 - 44px); bottom:auto; right:var(--space-3); padding:6px 12px 6px 10px; font-size:.8125rem; }
  .hero__inner{ padding-top:var(--space-6); }
  .hero__content{ max-width:none; }
  .figures-section{ padding-block:var(--space-3); }
  .figures{ grid-template-columns:1fr; }
  .figure, .figure + .figure{ padding:var(--space-5) 0; border-left:0; }
  .figure + .figure{ border-top:1px solid var(--color-border); }
  .intro__aside{ order:-1; }
  .intro__img{ max-width:280px; }
  .cta__side{ justify-items:start; }
}
@media (max-width: 760px){
  :root{ --header-h: 68px; }
  .topbar{ display:none; } /* Telefon sitzt mobil als Icon im Header */
  .logo img{ height:46px; }
  .header__booking{ display:none; }
  .header__phone-mobile{ display:grid; place-items:center; width:44px; height:44px; color:var(--color-primary); }
  .header__phone-mobile svg{ width:24px; height:24px; fill:currentColor; }
  .hero__actions .btn{ width:100%; }
  .spectrum{ grid-template-columns:1fr; }
  .section{ padding-block:var(--space-8); }
  .doctor{ grid-template-columns:1fr; padding:var(--space-5); }
  .doctor__img{ order:-1; width:100%; max-width:260px; height:auto; }
  .seals{ gap:var(--space-3); }
  .seals li{ width:calc(50% - 6px); height:156px; }
  .seals li.seals__wide{ width:100%; }
  .seals img{ max-height:120px; }
  .btn--xl{ width:100%; font-size:1.125rem; }
  .footer__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }

/* =========================================================
   10. SEITENVORLAGEN – GEMEINSAM
   Seitenkopf, „Auf einen Blick“, Inhalt mit Seitenspalte, Akkordeon.
   Genutzt von Leistungs-, Übersichts-, Verfahrens- und Infoseiten sowie Profilen.
   ========================================================= */
.nav > li.is-current > .nav__link::after{ transform:scaleX(1); }
.page-head{ background:var(--color-surface); padding-block:var(--space-8); }
.page-head__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8); align-items:center; }
.page-head__grid > *{ min-width:0; }
.page-head h1{ margin:0 0 var(--space-5); font-size:var(--fs-hero); line-height:1.1; letter-spacing:-.01em; text-wrap:balance; }
.page-head__lead{ font-size:var(--fs-lead); margin:0 0 var(--space-6); max-width:42rem; }
.page-head__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); align-items:center; }
.page-head__img{ display:block; width:100%; height:auto; border-radius:var(--radius-md); }
.content-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--space-8); align-items:start; }
.prose h2{ font-size:var(--fs-h2); line-height:1.2; margin:0 0 var(--space-5); }
.prose h2:not(:first-child){ margin-top:var(--space-8); }
.prose p{ max-width:68ch; }
.prose a{ text-underline-offset:3px; }
/* Auf einen Blick */
.glance{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); list-style:none; margin:0; padding:0; }
.glance li{ background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); border-top:3px solid var(--color-primary); }
.glance h3{ font-size:1.125rem; margin:0 0 var(--space-2); }
.glance p{ font-size:1rem; margin:0; }
/* Seitenspalte */
.aside{ position:sticky; top:var(--space-5); display:grid; gap:var(--space-5); }
.side-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-6); }
.side-card--booking{ border-top:4px solid var(--color-accent); }
.side-card h2{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.side-card p{ font-size:1rem; margin:0 0 var(--space-5); }
.side-card .btn{ width:100%; min-height:60px; }
.side-card__phone{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--color-border); font-size:1rem; color:var(--color-text); text-decoration:none; }
.side-card__phone .icon{ fill:var(--color-primary); }
.side-card__phone strong{ color:var(--color-primary); }
.side-card__phone:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.side-card .linklist{ margin-bottom:var(--space-4); }
/* Akkordeon */
.accordion{ display:grid; gap:var(--space-3); max-width:58rem; }
.acc{ background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.acc summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--space-6); cursor:pointer; list-style:none; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary h3{ margin:0; font-size:var(--fs-h3); }
.acc summary::after{ content:""; flex:none; width:28px; height:28px; border-radius:50%; background:var(--color-highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z' fill='%230A4E7F'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform var(--dur) var(--ease); }
.acc[open] summary::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h14v2H5z' fill='%230A4E7F'/%3E%3C/svg%3E"); }
.acc summary:hover h3{ text-decoration:underline; text-underline-offset:4px; }
.acc__body{ padding:0 var(--space-6) var(--space-5); }
.acc__body p, .acc__body ul{ max-width:72ch; }
.acc__body ul{ padding-left:1.2em; }
.acc__body li{ margin-bottom:var(--space-2); }
.acc__body h4{ font-size:1.0625rem; color:var(--color-primary); margin:var(--space-5) 0 var(--space-2); }
.acc__body h4:first-child{ margin-top:0; }
.acc__media{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-7); align-items:start; }
.acc__media figure, .acc__wide{ margin:0; }
.acc__media img, .acc__wide img{ display:block; max-width:100%; height:auto; }
.acc__wide{ margin-top:var(--space-4); max-width:680px; }
.prose .infobox{ margin-top:var(--space-6); }
.prose .infobox h3{ font-size:1.125rem; }
.prose .infobox p{ font-size:1rem; }
@media (max-width: 760px){
  .acc__media{ grid-template-columns:1fr; }
  .acc__media figure{ max-width:240px; }
}
@media (max-width: 1100px){
  .content-grid{ grid-template-columns:1fr; }
  .aside{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px){
  .page-head__grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .page-head__media{ order:-1; }
  .glance{ grid-template-columns:1fr; }
  .aside{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .page-head{ padding-block:var(--space-7); }
  .page-head__actions .btn{ width:100%; }
  .acc summary{ padding:var(--space-4) var(--space-5); }
  .acc__body{ padding:0 var(--space-5) var(--space-4); }
}

/* =========================================================
   11. ÜBERSICHTSSEITEN (SCHULTER, ELLENBOGEN)
   Themenkarten und Diagnose-Liste.
   ========================================================= */
/* Übersichtsseite */
.topic-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); list-style:none; margin:0; padding:0; }
.topic-card{ display:flex; flex-direction:column; height:100%; padding:var(--space-6); background:var(--color-white); border:1px solid var(--color-border);
  border-bottom:3px solid var(--color-border); border-radius:var(--radius-md); text-decoration:none; color:var(--color-text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.topic-card:hover, .topic-card:focus-visible{ border-bottom-color:var(--color-accent); box-shadow:var(--shadow-card); }
.topic-card h3{ font-size:var(--fs-h3); margin:0 0 var(--space-2); }
.topic-card p{ font-size:1rem; color:var(--color-text-muted); margin:0 0 var(--space-5); }
.topic-card__more{ display:inline-flex; align-items:center; gap:var(--space-2); margin-top:auto; font-weight:var(--fw-semibold); font-size:1rem; color:var(--color-primary); }
.topic-card__arrow{ width:18px; height:18px; fill:currentColor; transition:transform var(--dur) var(--ease); }
.topic-card:hover .topic-card__arrow{ transform:translateX(4px); }
.chips-block{ margin-top:var(--space-8); }
.chips-block h3{ font-size:var(--fs-h3); margin:0 0 var(--space-4); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); list-style:none; margin:0; padding:0; }
.chips a{ display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border:1px solid var(--color-primary); border-radius:var(--radius-pill);
  font-size:1rem; font-weight:var(--fw-semibold); color:var(--color-primary); text-decoration:none; background:var(--color-white); }
.chips a:hover{ background:var(--color-primary); color:var(--color-white); }
.diag-list{ columns:2; column-gap:var(--space-7); list-style:none; margin:0 0 var(--space-5); padding:0; max-width:52rem; }
.diag-list li{ display:flex; gap:var(--space-2); align-items:flex-start; break-inside:avoid; padding:6px 0; font-size:1rem; }
.diag-list svg{ width:18px; height:18px; fill:var(--color-primary); flex:none; margin-top:3px; }
.section--surface .side-card{ background:var(--color-white); }
@media (max-width: 1100px){
  .topic-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px){
  .topic-grid{ grid-template-columns:1fr; }
  .diag-list{ columns:1; }
}

/* =========================================================
   12. INFOSEITE ABRECHNUNG
   ========================================================= */
/* Infoseiten */
.summary-card{ background:var(--color-white); border:1px solid var(--color-border); border-top:4px solid var(--color-primary); border-radius:var(--radius-md); padding:var(--space-6); }
.summary-card h2{ font-size:var(--fs-h3); margin:0 0 var(--space-4); }
.summary-card dl{ margin:0; display:grid; gap:var(--space-4); }
.summary-card dt{ font-weight:var(--fw-bold); color:var(--color-primary); font-size:1rem; }
.summary-card dd{ margin:var(--space-1) 0 0; font-size:1rem; }
.summary-card dd a{ font-weight:var(--fw-semibold); text-underline-offset:3px; }
.billing{ display:grid; gap:var(--space-4); margin:0 0 var(--space-7); }
.billing article{ background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-6); border-left:4px solid var(--color-primary); scroll-margin-top:var(--space-5); }
.billing h2{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.billing p{ font-size:1.0625rem; }
.billing p:last-child{ margin-bottom:0; }
.side-card__contact{ display:grid; gap:var(--space-3); list-style:none; margin:0; padding:0; }
.side-card__contact a{ display:flex; align-items:center; gap:var(--space-3); color:var(--color-text); text-decoration:none; font-size:1rem; }
.side-card__contact .icon{ fill:var(--color-primary); }
.side-card__contact a:hover span{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 900px){
  .page-head__media--card{ order:0; }
}

/* =========================================================
   13. INFOSEITE ZWEITMEINUNG
   Nummerierte Schritte (.steps) – auch auf „Vorbereitung und Kliniken“.
   ========================================================= */
/* Zweitmeinung */
.steps{ counter-reset:step; display:grid; gap:var(--space-4); list-style:none; margin:0 0 var(--space-5); padding:0; }
.steps:last-child{ margin-bottom:0; }
.steps li{ counter-increment:step; display:grid; grid-template-columns:48px 1fr; gap:var(--space-4); align-items:start; }
.steps li::before{ content:counter(step); display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--color-primary); color:var(--color-white); font-weight:var(--fw-bold); font-size:1.125rem; }
.steps h3{ font-size:1.125rem; margin:10px 0 var(--space-1); }
.steps p{ font-size:1rem; margin:0; }

/* =========================================================
   14. INFOSEITE VORBEREITUNG UND KLINIKEN
   Klinikkarten, Checkliste, Vorbereitungs-Kacheln (.prep--white auf hellem Grund).
   ========================================================= */
/* Kliniken & Vorbereitung */
.summary-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
.summary-card li a{ display:block; text-decoration:none; color:var(--color-text); font-size:1rem; }
.summary-card li a strong{ display:block; color:var(--color-primary); }
.summary-card li a:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.clinics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); list-style:none; margin:0; padding:0; }
.clinic{ display:flex; flex-direction:column; height:100%; background:var(--color-white); border:1px solid var(--color-border); border-top:4px solid var(--color-primary);
  border-radius:var(--radius-md); padding:var(--space-6); scroll-margin-top:var(--space-5); }
.clinic h3{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.clinic address{ font-style:normal; font-size:1rem; margin:0 0 var(--space-4); }
.clinic__intro{ font-size:1rem; color:var(--color-text-muted); }
.clinic__contact{ list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-2); }
.clinic__contact a{ display:flex; align-items:center; gap:var(--space-3); font-size:1rem; color:var(--color-text); text-decoration:none; }
.clinic__contact .icon{ width:18px; height:18px; fill:var(--color-primary); }
.clinic__contact a:hover span{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.clinic details{ border-top:1px solid var(--color-border); padding-top:var(--space-4); margin-bottom:var(--space-5); }
.clinic summary{ cursor:pointer; font-weight:var(--fw-semibold); color:var(--color-primary); font-size:1rem; }
.clinic details h4{ font-size:1rem; margin:var(--space-4) 0 var(--space-1); color:var(--color-text); }
.clinic details p, .clinic details li{ font-size:1rem; }
.clinic details ul{ padding-left:1.2em; margin:0; }
.clinic .btn{ margin-top:auto; align-self:flex-start; }
.btn svg.pin{ width:18px; height:18px; }
.prep{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); list-style:none; margin:0; padding:0; }
.prep li{ background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); border-top:3px solid var(--color-primary); }
.prep li:last-child:nth-child(odd){ grid-column:1 / -1; }
.prep h3{ font-size:1.125rem; margin:0 0 var(--space-2); }
.prep p{ font-size:1rem; margin:0; }
/* Variante auf hellblaugrauem Grund */
.prep--white{ margin-bottom:var(--space-8); }
.prep--white li{ background:var(--color-white); }
.checklist-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.checklist-box{ background:var(--color-white); border-radius:var(--radius-md); padding:var(--space-6); }
.checklist-box h3{ font-size:1.125rem; margin:0 0 var(--space-3); }
.checklist-box ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.checklist-box li{ display:flex; gap:var(--space-2); font-size:1rem; }
.checklist-box svg{ width:18px; height:18px; fill:var(--color-primary); flex:none; margin-top:3px; }
@media (max-width: 1100px){
  .clinics{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .clinics, .prep, .checklist-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   15. VERFAHRENSSEITEN (OP-TECHNIKEN)
   Verfahrenskarten (.method) und Schritt-für-Schritt-Abbildungen (.op-step).
   ========================================================= */
/* Verfahrenskarten */
.methods{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); list-style:none; margin:var(--space-5) 0 0; padding:0; }
.method{ display:flex; flex-direction:column; align-items:flex-start; background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); border-top:3px solid var(--color-primary); }
.method:last-child:nth-child(odd){ grid-column:1 / -1; }
.method h3{ font-size:1.125rem; margin:var(--space-2) 0 var(--space-2); }
.method p{ font-size:1rem; margin:0 0 var(--space-4); flex:1; }
.method .text-link{ font-size:1rem; }
.method__tag{ display:inline-block; font-size:.8125rem; font-weight:var(--fw-medium); letter-spacing:.02em; padding:3px 10px; border-radius:999px; }
.method__tag--arthro{ background:var(--color-highlight); color:var(--color-primary); }
.method__tag--open{ background:var(--color-primary); color:var(--color-white); }
/* Schritt-für-Schritt-Abbildungen */
.op-steps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-5); list-style:none; margin:0; padding:0; counter-reset:none; }
.op-step{ display:flex; flex-direction:column; gap:var(--space-3); margin:0; }
.op-step__img{ display:flex; align-items:center; justify-content:center; height:240px; background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); }
.op-step__img img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; }
.op-step p{ font-size:.9375rem; line-height:1.5; margin:0; color:var(--color-text); }
.op-step__no{ display:inline-grid; place-items:center; width:24px; height:24px; margin-right:var(--space-2); border-radius:50%; background:var(--color-primary); color:var(--color-white); font-size:.8125rem; font-weight:var(--fw-medium); vertical-align:1px; }
@media (max-width: 760px){
  .methods{ grid-template-columns:1fr; }
  .op-step__img{ height:200px; }
}

/* =========================================================
   16. ARZTPROFILE
   Profilkopf mit freigestelltem Porträt, Schwerpunkte, Kennzahlen, Werdegang, Auszeichnungen.
   .prep (Kacheln) ist auch auf der Infoseite „Vorbereitung“ im Einsatz.
   ========================================================= */
/* Arztprofil */
.profile-head{ padding-top:var(--space-8); padding-bottom:0; }
.profile-head .page-head__grid{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:end; }
.profile-head__role{ font-size:var(--fs-lead); color:var(--color-text); margin:calc(var(--space-3) * -1) 0 var(--space-5); font-weight:var(--fw-semibold); }
.profile-head .page-head__grid > div:first-child{ padding-bottom:var(--space-8); align-self:center; }
.profile-head .page-head__media{ display:flex; justify-content:center; }
/* Freigestelltes Porträt sitzt bündig auf der Unterkante des Seitenkopfs */
.profile-head .page-head__img{ display:block; width:100%; max-width:620px; height:auto; border-radius:0; }
.profile-seals{ margin-top:var(--space-7); }
.profile-seals .seals{ justify-content:flex-start; }
.qual-list{ list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; gap:var(--space-2); }
.qual-list li{ display:flex; gap:var(--space-2); font-size:1rem; }
.qual-list svg{ width:18px; height:18px; fill:var(--color-primary); flex:none; margin-top:3px; }
.prep a{ text-underline-offset:3px; }
/* Werdegang */
.cv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); }
.cv h3{ font-size:var(--fs-h3); margin:0 0 var(--space-5); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-primary); }
.cv ol{ list-style:none; margin:0; padding:0 0 0 var(--space-5); border-left:2px solid var(--color-border); display:grid; gap:var(--space-5); }
.cv li{ position:relative; }
.cv li::before{ content:""; position:absolute; left:calc(var(--space-5) * -1 - 7px); top:6px; width:12px; height:12px; border-radius:50%; background:var(--color-white); border:3px solid var(--color-accent); }
.cv time, .cv .cv__year{ display:block; font-weight:var(--fw-bold); color:var(--color-primary); font-size:1rem; margin-bottom:var(--space-1); }
.cv p{ font-size:1rem; margin:0; }
.cv__note{ color:var(--color-text-muted); font-size:.9375rem; }
@media (max-width: 1100px){
  .cv{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .profile-head .page-head__grid{ grid-template-columns:1fr; }
  .profile-head .page-head__media{ order:2; }
  .profile-head .page-head__grid > div:first-child{ padding-bottom:0; }
  .profile-head .page-head__img{ max-width:420px; }
}
@media (max-width: 760px){
  .cv, .prep{ grid-template-columns:1fr; }
}
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); list-style:none; margin:var(--space-6) 0; padding:0; }
.stats li{ background:var(--color-highlight); border-radius:var(--radius-md); padding:var(--space-5); }
.stats strong{ display:block; font-size:2rem; font-weight:var(--fw-semibold); color:var(--color-primary); line-height:1.1; }
.stats span{ display:block; font-size:.9375rem; color:var(--color-text-muted); margin-top:var(--space-1); }
.prep ul{ margin:var(--space-2) 0 0; padding-left:1.1em; font-size:1rem; }
.prep li li{ background:none; border:0; border-radius:0; padding:0; margin-bottom:var(--space-1); grid-column:auto; }
.prep li p{ margin-bottom:0; }
.prep li p + ul{ margin-top:var(--space-1); }
.feature{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-6); align-items:center; background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-6); margin-top:var(--space-7); }
.feature img{ display:block; width:100%; height:auto; border-radius:var(--radius-md); }
.feature h3{ margin:0 0 var(--space-2); }
.feature p{ font-size:1rem; margin:0 0 var(--space-4); }
.book{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--space-6); align-items:start; }
.book img{ display:block; width:120px; height:auto; box-shadow:0 8px 24px rgba(18,48,71,.18); border-radius:4px; }
.book h3{ margin:0 0 var(--space-2); }
.book p{ font-size:1rem; margin:0 0 var(--space-2); }
.book small{ color:var(--color-text-muted); font-size:.875rem; }
@media (max-width: 900px){
  .stats{ grid-template-columns:1fr 1fr; }
  .feature{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .book{ grid-template-columns:1fr; }
}

/* =========================================================
   17. PRAXISTEAM
   ========================================================= */
/* Praxisteam */
.team-head .page-head__grid{ align-items:center; }
.team-contact{ background:var(--color-white); border-radius:var(--radius-md); padding:var(--space-6); box-shadow:0 8px 24px rgba(18,48,71,.08); }
.team-contact h2{ font-size:var(--fs-h3); margin:0 0 var(--space-4); }
.team-contact ul{ list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-3); }
.team-contact li{ display:flex; gap:var(--space-3); font-size:1rem; }
.team-contact svg{ width:18px; height:18px; fill:var(--color-primary); flex:none; margin-top:3px; }
.team-contact a{ color:var(--color-primary); text-underline-offset:3px; }
.team-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); list-style:none; margin:0; padding:0; }
.member{ background:var(--color-white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); }
.member__photo{ background:var(--color-highlight); aspect-ratio:860/953; display:flex; align-items:flex-end; justify-content:center; }
.member__photo img{ display:block; width:100%; height:auto; }
.member__body{ padding:var(--space-5) var(--space-6) var(--space-6); }
.member h3{ font-size:var(--fs-h3); margin:0 0 var(--space-1); }
.member p{ margin:0; font-size:1rem; color:var(--color-text-muted); }
@media (max-width: 1100px){
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .team-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   18. RECHTLICHE SEITEN (IMPRESSUM, DATENSCHUTZ)
   ========================================================= */
/* Rechtliche Seiten */
.page-head--compact{ padding-block:var(--space-7); }
.page-head--compact h1{ margin:0; }
.legal{ max-width:62rem; margin:0; padding:0; }
.legal__row{ display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:var(--space-6); padding:var(--space-6) 0; border-top:1px solid var(--color-border); }
.legal__row:last-child{ border-bottom:1px solid var(--color-border); }
.legal h2{ font-size:var(--fs-h3); margin:0; hyphens:manual; overflow-wrap:break-word; }
.legal p, .legal ul{ margin:0 0 var(--space-3); }
.legal p:last-child, .legal ul:last-child{ margin-bottom:0; }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-bottom:var(--space-1); }
.legal a{ text-underline-offset:3px; overflow-wrap:anywhere; }
.legal__label{ display:block; font-size:.875rem; font-weight:var(--fw-semibold); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--space-1); }
.legal__group + .legal__group{ margin-top:var(--space-4); }
@media (max-width: 760px){
  .legal__row{ grid-template-columns:1fr; gap:var(--space-3); padding:var(--space-5) 0; }
}

/* =========================================================
   19. ENGLISCHE SEITE
   Häkchenliste (.check), Spezialist, Behandlungsbereiche, Zeitleiste (.timeline), Kontaktkarte.
   ========================================================= */
.check{ list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; gap:var(--space-3); }
.check li{ position:relative; padding-left:32px; }
.check li::before{ content:""; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%;
  background:var(--color-highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230A4E7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.expert{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-8); align-items:center; }
.expert__photo{ background:var(--color-highlight); border-radius:var(--radius-md); padding-top:var(--space-7); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.expert__photo img{ display:block; width:100%; max-width:440px; height:auto; }
.expert h2{ font-size:var(--fs-h2); margin:0 0 var(--space-5); }
.expert__role{ font-size:var(--fs-lead); color:var(--color-text-muted); margin:-8px 0 var(--space-5); }
.pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.pillar{ background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-6); }
.pillar h3{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.pillar p{ font-size:1rem; margin:0 0 var(--space-4); }
.pillar .check{ margin:0 0 var(--space-4); gap:var(--space-2); font-size:1rem; }
.pillar .check li::before{ width:18px; height:18px; background-size:18px; }
.pillar > :last-child{ margin-bottom:0; }
.areas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
.area{ background:var(--color-white); border-radius:var(--radius-md); padding:var(--space-6); border-top:3px solid var(--color-primary); }
.area h3{ font-size:var(--fs-h3); margin:0 0 var(--space-4); }
.area .check{ font-size:1rem; gap:var(--space-2); margin:0; }
.area .check li::before{ width:18px; height:18px; background-size:18px; }
.journey{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8); align-items:start; }
.timeline{ list-style:none; margin:0; padding:0; counter-reset:step; }
.timeline li{ position:relative; padding:0 0 var(--space-6) 64px; }
.timeline li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--color-primary); color:var(--color-white); font-weight:var(--fw-medium); }
.timeline li:not(:last-child)::after{ content:""; position:absolute; left:19px; top:44px; bottom:4px; width:2px; background:var(--color-border); }
.timeline h3{ font-size:1.125rem; margin:6px 0 var(--space-1); }
.timeline p{ margin:0; font-size:1rem; color:var(--color-text-muted); }
.appreciate{ background:var(--color-primary); color:var(--color-white); border-radius:var(--radius-md); padding:var(--space-7); position:sticky; top:var(--space-6); }
.appreciate h3{ color:var(--color-white); font-size:var(--fs-h3); line-height:1.3; margin:0 0 var(--space-5); }
.appreciate .check li::before{ background-color:rgba(255,255,255,.16); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.appreciate .check{ margin:0; }
.contact{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8); align-items:start; }
.contact__text p{ max-width:62ch; }
.contact__motto{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--color-primary); margin-top:var(--space-6); }
.contact-card{ background:var(--color-white); border-radius:var(--radius-md); padding:var(--space-7); box-shadow:0 8px 24px rgba(18,48,71,.08); }
.contact-card h3{ font-size:var(--fs-h3); line-height:1.3; margin:0 0 var(--space-5); }
.contact-card ul{ list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; gap:var(--space-4); }
.contact-card li{ display:flex; gap:var(--space-3); }
.contact-card li svg{ width:20px; height:20px; fill:var(--color-primary); flex:none; margin-top:2px; }
.contact-card a{ color:var(--color-primary); text-underline-offset:3px; }
.contact-card .btn{ width:100%; justify-content:center; color:var(--color-white); text-decoration:none; }
.contact-card .btn svg{ fill:currentColor; }
.contact-card .btn small{ color:rgba(255,255,255,.85); }
.contact-card__alt{ margin:var(--space-4) 0 0; font-size:.9375rem; color:var(--color-text-muted); text-align:center; }
@media (max-width: 1100px){
  .areas{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .expert, .journey, .contact{ grid-template-columns:1fr; gap:var(--space-7); }
  .expert__photo{ max-width:420px; }
  .pillars{ grid-template-columns:1fr; }
  .appreciate{ position:static; }
}