/* =========================================================================
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 Figtree-Variable-Latin.woff2 und Figtree-OFL.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',
array(),
filemtime( get_stylesheet_directory() . '/schulterzentrum.css' ) );
}, 20 );
3. Schriften im vorladen (optional, empfohlen):
add_action( 'wp_head', function () {
$dir = get_stylesheet_directory_uri() . '/fonts/';
printf( '', $dir );
}, 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 20 Bricks-Anpassungen
========================================================================= */
/* =========================================================
1. SCHRIFT
Figtree (SIL Open Font License), variable Schrift 300–900, selbst gehostet, Latin-Subset.
Pfade relativ zu dieser Datei: Ordner fonts/ liegt daneben.
========================================================= */
@font-face{ font-family:"Figtree"; font-weight:300 900; font-style:normal; font-display:swap; src:url("fonts/Figtree-Variable-Latin.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: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-heading: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-base: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
/* Schriftgrößen (fluid) */
--fs-hero: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
--fs-page: clamp(2rem, 1.4rem + 1.8vw, 3rem); /* H1 Unterseiten, eine Stufe unter dem Startseiten-Hero */
--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-page-lead: clamp(1.125rem, 1.05rem + .2vw, 1.25rem); /* Einleitung Unterseiten */
--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: 600; --fw-bold: 600;
--lh-tight: 1.1; --lh-body: 1.6;
--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
========================================================= */
/* Bricks setzt html{font-size:62.5%} (1rem = 10px). Alle rem-Werte hier gehen von 16px aus. */
html{ box-sizing:border-box; font-size:100%; scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; font-family:var(--font-base); letter-spacing:0; 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); }
/* Überschriften Figtree 600; Umbruch ausgeglichen */
h1, h2{ font-weight:var(--fw-semibold); font-family:var(--font-display); letter-spacing:-0.02em; }
h1, h2, h3, h4{ text-wrap:balance; }
/* Silbentrennung nur mobil und nur bei langen Wörtern; auf großen Bildschirmen nie */
h1, h2, h3{ overflow-wrap:break-word; hyphens:manual; }
@media (max-width: 600px){ h1, h2, h3{ hyphens:auto; hyphenate-limit-chars:12 5 5; } .hero__title{ hyphens:manual; } }
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; }
/* Bricks-Textblöcke aus übernommenen Bausteinen: Hülle fürs Layout ausblenden */
.sz-raw{ display:contents; }
.sz-raw > p:has(> a:only-child){ display:contents; }
.sz-wrap{ display:contents; }
.pillar > .sz-raw:last-child .sz-wrap > :last-child{ margin-bottom:0; }
/* =========================================================
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; }
/* Zusatzlinks im mobilen Menü (Inhalt der Topbar, die mobil ausgeblendet ist) */
.nav-meta{ display:none; list-style:none; margin:0; padding:var(--space-3) 0 var(--space-4); border-top:1px solid var(--color-border); }
.nav-meta a{ display:inline-block; padding:8px 0; font-size:1rem; color:var(--color-text-muted); text-decoration:none; }
.nav-meta a:hover{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.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); }
/* Aktive Seite im Untermenü (aria-current setzt schulterzentrum.js) */
.sub a[aria-current="page"]{ color:var(--color-primary); font-weight:var(--fw-medium); background:var(--color-highlight); box-shadow:inset 3px 0 0 var(--color-accent); }
.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; margin:4px 16px 6px; padding:6px 0 8px; border-bottom:1px solid var(--color-border);
font-size:.8125rem; font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary); }
.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("/wp-content/uploads/2026/10/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; }
/* 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,.68) 0%, rgba(18,48,71,.47) 38%, rgba(18,48,71,.15) 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:44rem; }
/* 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); max-width:40rem; }
.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:1.125rem; margin:0; max-width:52rem; }
.section__head .eyebrow{ font-size:1rem; margin-bottom:var(--space-4); }
@media (max-width: 600px){
.eyebrow, .section__head .eyebrow{ font-size:.875rem; gap:var(--space-3); letter-spacing:.03em; }
.eyebrow::before{ width:20px; }
}
/* 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{ text-decoration-line:underline; text-decoration-thickness:1px; }
.text-link:hover{ text-decoration-thickness:2px; }
/* Sprunglinks innerhalb der Seite bekommen einen Pfeil nach unten */
.text-link[href^="#"]::after{ content:""; display:inline-block; width:.85em; height:.85em; margin-left:.4em; vertical-align:-.1em; background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v12.2l5.3-5.3 1.4 1.4-7.7 7.7-7.7-7.7 1.4-1.4 5.3 5.3z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v12.2l5.3-5.3 1.4 1.4-7.7 7.7-7.7-7.7 1.4-1.4 5.3 5.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Links im Fließtext immer unterstrichen (Bricks setzt sonst text-decoration:none) */
p a:not(.btn){ text-decoration-line:underline; text-underline-offset:3px; }
/* 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; }
/* Links ohne eingebettetes SVG (z. B. aus Bricks-Query-Loops) bekommen das Häkchen per CSS */
.qual-list li:not(:has(svg))::before,
.linklist a:not(:has(svg))::before{ content:""; width:16px; height:16px; flex:none; margin-top:3px; background:var(--color-primary);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.spectrum__body .text-link{ margin-top:auto; }
/* Ganze Kachel klickbar über den Textlink */
.spectrum__card{ position:relative; }
.spectrum__link::after{ content:""; position:absolute; inset:0; }
.spectrum__card:has(.spectrum__link:focus-visible){ outline:3px solid var(--color-primary); outline-offset:2px; }
.spectrum__link:focus-visible{ outline:none; }
/* Gemeinsamer Hover für klickbare Karten (Spektrum, Ärzte, Themen) */
.spectrum__card, .doctor, .topic-card{ transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.spectrum__card:hover, .doctor:hover, .topic-card:hover{ box-shadow:0 12px 32px rgba(18,48,71,.12); transform:translateY(-3px); }
.doctor:hover{ border-color:var(--color-highlight); }
@media (prefers-reduced-motion: reduce){ .spectrum__card:hover, .doctor:hover, .topic-card:hover{ transform:none; } }
/* Ä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); }
/* Ganze Karte klickbar: der Namenslink spannt per ::after über die Karte, „Zum Profil“ liegt darüber */
.doctor{ position:relative; }
.doctor__link{ color:inherit; text-decoration:none; }
.doctor__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.doctor:hover .doctor__actions .btn--outline{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-white); }
.doctor:has(.doctor__link:focus-visible){ outline:3px solid var(--color-primary); outline-offset:2px; }
.doctor__link:focus-visible{ outline:none; }
.doctor__actions{ position:relative; z-index: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:156px; height:200px; padding:var(--space-3); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.seals li.seals__wide{ width:340px; }
.seals img{ max-width:100%; max-height:172px; 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:1.0625rem; 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); }
/* Variante mit Ärzte-Freisteller (Baustein cta-team-de): Bild steht bündig auf der Unterkante */
.cta--team{ padding-bottom:0; overflow:hidden; }
.cta--team .cta__inner{ grid-template-columns:minmax(0,1fr) minmax(0,440px) auto; align-items:end; }
.cta--team .cta__inner > div:first-child, .cta--team .cta__side{ align-self:center; padding-bottom:var(--space-9); }
.cta__team{ display:block; width:100%; height:auto; margin-top:var(--space-6); }
@media (max-width: 1100px){
.cta--team .cta__inner{ grid-template-columns:minmax(0,1fr) auto; }
.cta--team .cta__team-wrap{ grid-column:1 / -1; order:3; justify-self:center; width:min(100%, 440px); }
.cta--team .cta__inner > div:first-child, .cta--team .cta__side{ padding-bottom:0; }
.cta__team{ margin-top:0; }
}
@media (max-width: 900px){
.cta--team .cta__inner{ grid-template-columns:1fr; }
.cta--team .cta__team-wrap{ width:min(100%, 360px); }
}
/* 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,.72) 0%, rgba(18,48,71,.55) 48%, rgba(18,48,71,.2) 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; }
.sub__title{ margin:var(--space-4) 12px var(--space-2); font-size:.875rem; }
.sub__col:first-child .sub__title{ margin-top:var(--space-2); }
.spectrum{ grid-template-columns:1fr 1fr; }
.doctors{ grid-template-columns:1fr; }
.footer__grid{ grid-template-columns:1fr 1fr; }
.header__nav{ height:calc(100dvh - var(--topbar-h) - var(--header-h)); max-height:none; box-shadow:none; }
body:has(.header__nav.is-open){ overflow:hidden; }
}
@media (max-width:760px){
.header__nav{ height:calc(100dvh - var(--header-h)); }
}
@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; }
.nav-meta{ display:flex; flex-wrap:wrap; gap:0 var(--space-6); }
.hero__media{ position:relative; z-index:auto; aspect-ratio:16/9; background:var(--color-highlight) url("/wp-content/uploads/2026/10/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; }
}
/* Smartphone: Video hoch (ca. 66 % der Bildschirmhöhe), Motiv mittig, links und rechts angeschnitten */
@media (max-width: 600px){
.hero{ --hero-media-h: clamp(340px, 66svh, 600px); }
.hero__media{ aspect-ratio:auto; height:var(--hero-media-h); }
.hero__media video{ object-position:55% 50%; }
.hero__media{ background-position:55% 50%; }
.hero__toggle{ top:calc(var(--hero-media-h) - 44px); }
}
@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:184px; }
.seals li.seals__wide{ width:100%; }
.seals img{ max-height:156px; }
.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; } }
/* =========================================================
KI-KENNZEICHNUNG (Art. 50 KI-Verordnung)
Für Bilder mit der Klasse .is-ki (gesetzt per Häkchen „KI-generiert“ in der
Mediathek, siehe functions.php) oder Container mit der Klasse .ki-bild.
========================================================= */
.page-head__media:has(img.is-ki), .page-head__media.ki-bild,
.spectrum__card:has(img.is-ki), .spectrum__card.ki-bild{ position:relative; }
.page-head__media:has(img.is-ki)::after, .page-head__media.ki-bild::after,
.spectrum__card:has(img.is-ki)::after, .spectrum__card.ki-bild::after{
content:"AI Symbolbild"; position:absolute; right:12px; bottom:12px; z-index:2; pointer-events:none;
padding:4px 10px; border-radius:var(--radius-pill); background:rgba(18,48,71,.78); color:var(--color-white);
font:500 .75rem/1.3 var(--font-base); letter-spacing:.01em; white-space:nowrap;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
/* Spektrum-Karten: Kennzeichnung unten rechts auf dem Bild (Bild hat 3:2, volle Kartenbreite) */
.spectrum__card:has(img.is-ki), .spectrum__card.ki-bild{ container-type:inline-size; }
.spectrum__card:has(img.is-ki)::after, .spectrum__card.ki-bild::after{ bottom:auto; top:calc(66.667cqw - 12px); transform:translateY(-100%); }
@media (max-width: 900px){
.page-head:not(.profile-head) .page-head__media:has(img.is-ki)::after,
.page-head:not(.profile-head) .page-head__media.ki-bild::after{ right:var(--gutter); }
}
/* =========================================================
PRAXIS-HINWEIS (Urlaub o. Ä., zeitgesteuert über functions.php)
Leiste ganz oben vor Topbar und Header, scrollt mit weg
========================================================= */
.praxis-hinweis{ background:#FDECEF; color:var(--color-text); border-bottom:1px solid #F5C2CD; }
.praxis-hinweis__inner{ display:flex; align-items:center; gap:var(--space-4); padding-block:16px; }
.praxis-hinweis svg{ width:22px; height:22px; flex:0 0 auto; fill:var(--color-accent-dark); }
.praxis-hinweis p{ margin:0; font-size:1.0625rem; line-height:1.45; text-wrap:pretty; }
.praxis-hinweis strong{ font-weight:600; color:var(--color-accent-dark); }
/* =========================================================
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,1fr) minmax(0,1fr); 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-page); line-height:1.1; letter-spacing:-.01em; text-wrap:balance; }
.page-head__lead{ font-size:var(--fs-page-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:0; list-style:none; margin:0; padding:0; background:var(--color-highlight); border-radius:var(--radius-md); overflow:hidden; }
.glance > li{ padding:var(--space-6) var(--space-7); }
.glance > li:nth-child(odd){ border-right:1px solid rgba(10,78,127,.15); }
.glance > li:nth-child(n+3){ border-top:1px solid rgba(10,78,127,.15); }
.glance h3{ display:flex; align-items:center; gap:var(--space-3); font-size:1.125rem; margin:0 0 var(--space-2); }
.glance h3::before{ content:""; width:16px; height:2px; flex:none; background:var(--color-accent); }
.glance p{ font-size:1rem; margin:0; }
/* Seitenspalte */
.aside{ 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{ transition:border-color var(--dur) var(--ease); }
.acc summary::after{ transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
/* Hover/Fokus: Rahmen blau, Plus-Kreis blau gefüllt mit weißem Symbol – keine Unterstreichung */
.acc:has(> summary:hover), .acc:has(> summary:focus-visible){ border-color:var(--color-primary); }
.acc summary:hover::after, .acc summary:focus-visible::after{ background-color:var(--color-primary);
background-image: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='%23ffffff'/%3E%3C/svg%3E"); }
.acc[open] summary:hover::after, .acc[open] summary:focus-visible::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='%23ffffff'/%3E%3C/svg%3E"); }
.acc summary:focus-visible{ outline:none; }
.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; }
.page-head:not(.profile-head):has(.page-head__media:not(.page-head__media--card)){ padding-top:0; }
.page-head:not(.profile-head) .page-head__media:not(.page-head__media--card){ margin-inline:calc(-1 * var(--gutter)); width:calc(100% + 2 * var(--gutter)); max-width:none; }
.page-head:not(.profile-head) .page-head__media:not(.page-head__media--card) .page-head__img{ border-radius:0; }
.glance{ grid-template-columns:1fr; }
.glance > li{ padding:var(--space-5); }
.glance > li:nth-child(odd){ border-right:0; }
.glance > li + li{ border-top:1px solid rgba(10,78,127,.15); }
.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:0; margin:0 0 var(--space-7); border-bottom:1px solid var(--color-border); }
/* Abrechnungsblöcke als Liste mit Symbol im hellblauen Kreis, getrennt durch feine Linien */
.billing article{ position:relative; padding:var(--space-6) 0 var(--space-6) 76px; border-top:1px solid var(--color-border); scroll-margin-top:var(--space-5); }
.billing article::before{ content:""; position:absolute; left:0; top:var(--space-6); width:52px; height:52px; border-radius:50%; background:var(--color-highlight); }
.billing article::after{ content:""; position:absolute; left:14px; top:calc(var(--space-6) + 14px); width:24px; height:24px; background:var(--color-primary);
-webkit-mask:var(--billing-icon) center/contain no-repeat; mask:var(--billing-icon) center/contain no-repeat; }
/* Symbole: Schild (Privat), Geldbörse (Selbstzahler), Arzttasche (BG) – Standard: Häkchen */
.billing article{ --billing-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.billing #privat{ --billing-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E"); }
.billing #selbstzahler{ --billing-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 7H5a1 1 0 0 1 0-2h14V3H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-3 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }
.billing #bg{ --billing-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V5a2 2 0 0 1 2-2zm4 3V5h-4v1h4zm-3 4v3H8v2h3v3h2v-3h3v-2h-3v-3h-2z'/%3E%3C/svg%3E"); }
.billing h2{ font-size:var(--fs-h3); margin:10px 0 var(--space-3); }
@media (max-width: 600px){
.billing article{ padding-left:0; padding-top:calc(var(--space-6) + 64px); }
}
.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-white); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); }
.prep li:last-child:nth-child(odd){ grid-column:1 / -1; }
.prep h3{ display:flex; align-items:center; gap:var(--space-3); font-size:1.125rem; margin:0 0 var(--space-2); }
.prep h3::before{ content:""; width:16px; height:2px; flex:none; background:var(--color-accent); }
.prep p{ font-size:1rem; margin:0; }
/* Variante auf hellblaugrauem Grund: ohne Rahmen, mit leichtem Schatten */
.prep--white{ margin-bottom:var(--space-8); }
.prep--white li{ border-color:transparent; box-shadow:0 1px 3px rgba(18,48,71,.06); }
.prep--white li li{ box-shadow:none; }
.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:0 0 var(--space-5); font-weight:var(--fw-semibold); }
/* H1 im Profil: akademischer Titel als kleine Zeile über dem Namen (wie Arztkarten der Startseite) */
.profile-head h1 .profile-head__title{ display:block; margin-bottom:2px; font-family:var(--font-base); font-size:var(--fs-page-lead); font-weight:var(--fw-medium); letter-spacing:0; line-height:1.25; color:var(--color-text-muted); }
.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 > li > 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-head .team-contact{ justify-self:end; width:100%; max-width:440px; }
@media (max-width: 900px){
.team-head .team-contact{ justify-self:stretch; max-width:none; }
}
.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; }
/* Langer Rechtstext aus dem Editor (z. B. Datenschutzerklärung): Klasse legal-text am Rich-Text-Element */
.legal-text{ max-width:48rem; }
.legal-text > :first-child{ margin-top:0; }
.legal-text h2{ font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem); line-height:1.25; margin:var(--space-8) 0 var(--space-4); }
.legal-text h3{ font-size:1.25rem; line-height:1.3; margin:var(--space-6) 0 var(--space-3); }
.legal-text h4{ font-family:var(--font-base); font-size:1.0625rem; font-weight:var(--fw-medium); color:var(--color-text); letter-spacing:0; margin:var(--space-5) 0 var(--space-2); }
.legal-text p, .legal-text li{ font-size:1.0625rem; }
.legal-text p{ margin:0 0 var(--space-4); }
.legal-text ul, .legal-text ol{ margin:0 0 var(--space-4); padding-left:1.25em; }
.legal-text li{ margin-bottom:var(--space-1); }
.legal-text a{ overflow-wrap:anywhere; text-underline-offset:3px; }
.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__row:first-child{ border-top:0; padding-top:0; }
.legal__row:last-child{ border-bottom:0; }
.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:calc(var(--header-h) + var(--space-5) + var(--wp-admin--admin-bar--height, 0px)); }
.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; }
}
/* =========================================================
20. BRICKS-ANPASSUNGEN
Bricks verpackt Shortcode-Elemente in .
In Flex-Layouts würde dieser Wrapper als eigene Spalte mitzählen
(im Hero z. B. 50 % Breite). display:contents blendet ihn aus dem Layout aus.
========================================================= */
.hero > .brxe-shortcode,
.hero__actions > .brxe-shortcode,
.page-head__actions > .brxe-shortcode,
.page-head__grid > .brxe-shortcode,
.aside > .brxe-shortcode{ display:contents; }
/* =========================================================
Blog: Übersicht (Kartenraster) und Beitrag (Template „Beitrag“)
========================================================= */
.section--tight{ padding-top:0; padding-bottom:var(--space-8); }
.section__more{ margin:var(--space-6) 0 0; }
/* Beitragskopf */
.post-head .container{ max-width:var(--container); }
.post-head__back{ margin:0 0 var(--space-3); font-size:.9375rem; }
/* Zurück-Link: nur das Wort ist unterstrichen, der Pfeil nicht (inline-block wird von der Unterstreichung ausgenommen) */
.post-head .post-head__back a{ display:inline; color:var(--color-primary); font-weight:var(--fw-medium);
text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-head .post-head__back a::before{ content:"←"; display:inline-block; margin-right:var(--space-2); text-decoration:none; }
.post-head .post-head__back a:hover{ text-decoration-thickness:2px; }
.post-head h1{ max-width:52rem; margin:0 0 var(--space-4); }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); margin:0; font-size:.9375rem; color:var(--color-text-muted); }
.post-head .post-meta .post-meta__author{ display:inline-flex; align-items:center; gap:var(--space-3); color:var(--color-text); font-weight:var(--fw-medium); text-decoration:none; }
.post-meta__author img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:center top; background:var(--color-highlight); }
.post-head .post-meta .post-meta__author:hover{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
/* Autorenkarte im Kopf der Blog-Übersicht (nutzt die Kartenoptik .team-contact) */
.author-intro__head{ display:flex; align-items:center; gap:var(--space-5); margin-bottom:var(--space-4); }
.author-intro__img{ width:96px; height:96px; flex:none; border-radius:50%; object-fit:cover; background:var(--color-highlight); box-shadow:0 0 0 4px var(--color-highlight); }
.team-contact .author-intro__name{ font-size:var(--fs-h3); line-height:1.25; margin:0; }
.author-intro > p{ font-size:1rem; margin:0 0 var(--space-4); }
/* Autor-Karte in der Seitenspalte */
.author-card__head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); }
.author-card__img{ width:72px; height:72px; flex:none; border-radius:50%; object-fit:cover; object-position:center; background:var(--color-highlight); }
.side-card .author-card__name{ font-size:1.25rem; line-height:1.25; margin:0; }
.author-card .doctor__title{ font-size:.8125rem; }
/* Beitragstext */
.post-body h2{ font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem); margin:0 0 var(--space-4); }
.post-body h2:not(:first-child){ margin-top:var(--space-7); }
.post-body h3{ font-size:1.25rem; line-height:1.3; margin:var(--space-6) 0 var(--space-2); }
.post-body h4{ font-size:1.0625rem; line-height:1.35; font-weight:600; letter-spacing:0; color:var(--color-text); margin:var(--space-5) 0 var(--space-1); }
.post-body h3 + h4{ margin-top:var(--space-3); }
.post-body p, .post-body li{ max-width:68ch; }
.post-body ul, .post-body ol{ padding-left:1.25em; margin:0 0 var(--space-5); }
.post-body li{ margin-bottom:var(--space-2); }
.post-body li::marker{ color:var(--color-primary); }
.post-body img{ max-width:100%; height:auto; border-radius:var(--radius-md); }
.post-body img.emoji{ border-radius:0; }
.post-body > .brxe-post-content > :first-child{ margin-top:0; }
/* Kartenraster */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); list-style:none; margin:0; padding:0; }
.post-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); color:var(--color-text); text-decoration:none;
transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post-card:hover{ box-shadow:0 12px 32px rgba(18,48,71,.12); transform:translateY(-3px); border-bottom-color:var(--color-accent); }
.post-card:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }
.post-card__meta{ font-size:.875rem; color:var(--color-text-muted); margin-bottom:var(--space-3); }
.post-card h3{ font-size:1.25rem; line-height:1.3; margin:0 0 var(--space-3); color:var(--color-primary); text-wrap:balance; }
.post-card p{ font-size:1rem; color:var(--color-text-muted); margin:0 0 var(--space-5); }
.post-card__more{ display:inline-flex; align-items:center; gap:var(--space-2); margin-top:auto; font-weight:var(--fw-medium); font-size:1rem; color:var(--color-primary); }
.post-card__more svg{ width:18px; height:18px; fill:currentColor; transition:transform var(--dur) var(--ease); }
.post-card:hover .post-card__more svg{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .post-card:hover{ transform:none; } }
@media (max-width: 1100px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px){ .post-grid{ grid-template-columns:1fr; } }
/* Liste aller Beiträge (Blog-Übersicht) – ganze Zeile klickbar über den Titel-Link */
.post-rows{ list-style:none; margin:0; padding:0; }
.post-rows > li + li{ border-top:1px solid var(--color-border); }
.post-row{ position:relative; padding:var(--space-6) 0; }
.post-rows > li:first-child .post-row{ padding-top:0; }
.post-row__meta{ margin:0 0 var(--space-2); font-size:.9375rem; color:var(--color-text-muted); }
.post-row__title{ font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height:1.25; margin:0 0 var(--space-3); }
.post-row__title a{ color:var(--color-primary); text-decoration:none; }
.post-row__title a::after{ content:""; position:absolute; inset:0; }
.post-row__title a:focus-visible{ outline:none; }
.post-row:has(.post-row__title a:focus-visible){ outline:3px solid var(--color-primary); outline-offset:6px; border-radius:4px; }
.post-row__excerpt{ margin:0 0 var(--space-3); color:var(--color-text); max-width:68ch; }
.post-row__more{ display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; font-size:1rem; color:var(--color-primary); }
.post-row__more svg{ width:18px; height:18px; fill:currentColor; transition:transform var(--dur) var(--ease); }
.post-row:hover .post-row__title a{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.post-row:hover .post-row__more svg{ transform:translateX(4px); }
/* Kompakte Liste (Seitenspalte) */
.post-list{ list-style:none; margin:0 0 var(--space-5); padding:0; }
.post-list li + li{ border-top:1px solid var(--color-border); }
.post-list a{ display:grid; gap:2px; padding:var(--space-3) 0; text-decoration:none; }
.post-list__title{ font-size:1rem; line-height:1.4; font-weight:var(--fw-medium); color:var(--color-primary); }
.post-list a:hover .post-list__title{ text-decoration:underline; text-underline-offset:3px; }
.post-list time{ font-size:.8125rem; color:var(--color-text-muted); }
/* Fachlich verantwortlich */
.author-box{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--space-6); align-items:center; max-width:58rem;
padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.author-box__img{ width:120px; height:120px; object-fit:cover; object-position:center top; border-radius:50%; background:var(--color-highlight); }
.author-box__label{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); font-size:.9375rem; font-weight:600; letter-spacing:0; color:var(--color-primary); }
.author-box__label::before{ content:""; width:24px; height:2px; flex:none; background:var(--color-accent); }
.author-box__name{ font-size:var(--fs-h3); margin:0 0 var(--space-3); }
.author-box p:not(.author-box__label){ font-size:1rem; margin:0 0 var(--space-3); }
@media (max-width: 600px){
.author-box{ grid-template-columns:1fr; gap:var(--space-4); }
.author-box__img{ width:96px; height:96px; }
}
/* =========================================================
Kontaktformular (Fluent Forms) – gilt nur innerhalb von .contact-form
========================================================= */
.contact-form{ margin-top:var(--space-6); }
.contact-form__note{ font-size:1rem; color:var(--color-text-muted); }
.contact-form .ff-el-group{ margin-bottom:var(--space-5); }
/* Zweispaltige Zeilen (Vorname/Name, E-Mail/Telefon) */
.contact-form .ff-t-container{ display:flex; gap:var(--space-5); }
.contact-form .ff-t-container .ff-t-cell{ flex:1 1 0; min-width:0; padding:0; }
@media (max-width:600px){
.contact-form .ff-t-container{ flex-direction:column; gap:0; }
}
/* Beschriftungen */
.contact-form .ff-el-input--label{ margin-bottom:var(--space-2); }
.contact-form .ff-el-input--label label{ font-weight:var(--fw-medium); font-size:1rem; color:var(--color-text); }
.contact-form .ff-el-is-required.asterisk-right label:after{ color:var(--color-accent); margin-left:2px; }
/* Eingabefelder */
.contact-form .ff-el-form-control{
width:100%; min-height:52px; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5; color:var(--color-text);
background-color:var(--color-white); border:1px solid #7D8E9C; border-radius:var(--radius-md); box-shadow:none;
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.contact-form textarea.ff-el-form-control{ min-height:180px; resize:vertical; }
.contact-form .ff-el-form-control:hover{ border-color:var(--color-text-muted); }
.contact-form .ff-el-form-control:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(10,78,127,.15); }
/* Auswahlfeld „Anliegen“ */
.contact-form select.ff-el-form-control{
appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
background:var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%230A4E7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px no-repeat; }
/* Telefonfeld mit Länderauswahl */
.contact-form .iti{ width:100%; }
.contact-form .iti input.ff-el-form-control{ padding-left:52px; }
.contact-form .iti__flag-container{ padding:0 0 0 6px; }
/* Einwilligungs-Checkbox (Fluent-Feld „DSGVO-Einverständnis“) */
.contact-form .ff-el-form-check.ff-el-tc label.ff_tc_label{ display:flex; gap:16px; align-items:flex-start; margin:0; font-weight:var(--fw-regular); font-size:.9375rem; line-height:1.55; color:var(--color-text); cursor:pointer; }
.contact-form .ff-el-form-check.ff-el-tc label.ff_tc_label > span{ display:block; flex:none; width:auto; padding:0 !important; }
.contact-form .ff-el-form-check.ff-el-tc label.ff_tc_label > div{ display:block; padding:0; }
.contact-form .ff-el-form-check-label a{ color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.contact-form .ff-el-form-check input.ff-el-form-check-input{ appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; min-height:0; margin:2px 0 0; padding:0; line-height:1; background:var(--color-white); border:1px solid #7D8E9C; border-radius:5px; cursor:pointer; transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.contact-form .ff-el-form-check input.ff-el-form-check-input:hover{ border-color:var(--color-primary); }
.contact-form .ff-el-form-check input.ff-el-form-check-input:checked{ background:var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color:var(--color-primary); }
.contact-form .ff-el-form-check input.ff-el-form-check-input:focus-visible{ outline:3px solid rgba(10,78,127,.3); outline-offset:2px; }
/* Absenden-Button (Selektor mit form.frm-fluent-form, damit er Fluents eigene Farbregel überstimmt) */
.contact-form form.frm-fluent-form .ff-btn.ff-btn-submit{
min-height:52px; padding:14px 32px; font:inherit; font-size:1.0625rem; font-weight:var(--fw-medium); line-height:1.2;
color:var(--color-white); background-color:var(--color-primary); border:0; border-radius:var(--radius-pill); cursor:pointer; box-shadow:none; opacity:1;
transition:background-color var(--dur) var(--ease); }
.contact-form form.frm-fluent-form .ff-btn.ff-btn-submit:hover,
.contact-form form.frm-fluent-form .ff-btn.ff-btn-submit:focus{ background-color:var(--color-navy); color:var(--color-white); opacity:1; }
.contact-form form.frm-fluent-form .ff-btn.ff-btn-submit:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; }
.contact-form form.frm-fluent-form .ff-btn.ff-btn-submit:disabled{ opacity:.6; cursor:wait; }
/* Fehler und Erfolgsmeldung */
.contact-form .ff-el-is-error .ff-el-form-control,
.contact-form .ff-el-is-error input.ff-el-form-check-input{ border-color:#C21E3A; }
.contact-form .error.text-danger{ color:#C21E3A; font-size:.875rem; margin-top:var(--space-1); }
.contact-form .ff-message-success{ padding:var(--space-5); background:var(--color-surface); border:0; border-left:4px solid var(--color-primary); border-radius:var(--radius-md); box-shadow:none; font-size:1.0625rem; }
/* Anfahrt-Liste in der Seitenspalte */
.contact-list{ list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-4); }
.contact-list li{ display:flex; gap:var(--space-3); font-size:1rem; line-height:1.5; }
.contact-list svg{ width:20px; height:20px; flex:none; margin-top:2px; fill:var(--color-primary); }
/* Sticky Header: Bricks packt Topbar und Header in