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

/* ATOS Orthopädie Dr. Schettle – Prototyp Startseite
   Aufbau: Variablen → Basis → Bausteine (Header, Menü, Buttons) → Abschnitte → Footer.
   Klassen sind so benannt, dass sie später als globale Klassen in Bricks übernommen werden können. */

@font-face { font-family: "Suisse Intl"; src: url("../fonts/suisseintl-light-webfont.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("../fonts/suisseintl-regular-webfont.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("../fonts/suisseintl-bold-webfont.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Markenfarben laut ATOS Brandcard */
  --atos-grey: #293d4b;
  --human-blue: #482683;
  --light-green: #cdff00;
  /* Neutrale Töne */
  --text-hell: #5d6874;
  --flaeche: #f1f0f5;
  --linie: #dcdbe4;
  --weiss: #fff;

  --schrift: "Suisse Intl", Helvetica, Arial, sans-serif;
  --text-s: 0.9375rem;
  --text-m: 1.125rem;
  --text-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);

  --breite: 1280px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(56px, 6vw + 24px, 112px);
  --luft: clamp(24px, 2.5vw, 40px);
  --header-h: 88px;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Sicherheitsnetz: nichts darf die Seite auf dem Handy seitlich verbreitern (clip lässt den Sticky-Header intakt) */
body { overflow-x: clip; margin: 0; font-family: var(--schrift); font-weight: 300; font-size: var(--text-m); line-height: 1.65; color: var(--atos-grey); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 300; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 700; }
h1 strong, h2 strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--human-blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--light-green); color: var(--atos-grey); padding: 10px 16px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Raster-Kinder dürfen schmaler werden als ihr breitester Inhalt, sonst drückt ein einzelnes Element die Spalte auf */
.einstieg__grid > *, .arzt__grid > *, .split > *, .zentrum__grid > *, .footer__grid > * { min-width: 0; }
.container { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.section { padding-block: var(--abstand); }
.section--flaeche { background: var(--flaeche); }
.section--lila { background: var(--human-blue); color: var(--weiss); }
.section--grau { background: var(--atos-grey); color: var(--weiss); }

.kicker { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--human-blue); margin-bottom: 14px; }
.section--lila .kicker, .section--grau .kicker { color: var(--light-green); }
.section-kopf { max-width: 760px; margin-bottom: var(--luft); }
.section-kopf h2 { margin-bottom: 16px; }
.section-kopf p { color: var(--text-hell); }
.section--lila .section-kopf p { color: #e4dcf3; }
.lead { font-size: var(--text-l); line-height: 1.5; }
.lead strong { font-weight: 700; }

/* Buttons */
.btn { display: inline-flex; align-items: stretch; text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.2; background: var(--light-green); color: var(--atos-grey); transition: background-color .2s, color .2s; }
/* Suisse Intl sitzt in der Zeile etwas hoch, daher oben 4px mehr Innenabstand als unten (nachgemessen) */
.btn__text { padding: 18px 22px 14px; display: flex; align-items: center; }
.btn__icon { display: grid; place-items: center; width: 52px; background: var(--atos-grey); color: var(--light-green); transition: background-color .2s; }
.btn__icon svg { width: 20px; height: 20px; }
/* Offizielles Doctolib-„D“ nur in Weiß, nicht in ATOS-Farben umgefärbt. */
.btn__icon--doctolib { color: var(--weiss); }
.btn__icon--doctolib svg { width: 17px; height: 19px; }
.btn:hover { background: var(--human-blue); color: var(--weiss); }
.btn:hover .btn__icon { background: var(--atos-grey); }
.btn--rahmen { background: transparent; color: var(--atos-grey); box-shadow: inset 0 0 0 2px var(--atos-grey); }
.btn--rahmen .btn__icon { background: var(--atos-grey); color: var(--weiss); }
.btn--rahmen:hover { background: var(--atos-grey); color: var(--weiss); }
.section--lila .btn--rahmen, .section--grau .btn--rahmen { color: var(--weiss); box-shadow: inset 0 0 0 2px var(--weiss); }
.section--lila .btn--rahmen .btn__icon, .section--grau .btn--rahmen .btn__icon { background: var(--weiss); color: var(--atos-grey); }
/* Auf ATOS Grey braucht das Icon-Feld Human Blue, sonst verschwindet es. */
.footer .btn__icon, .section--grau .btn__icon { background: var(--human-blue); }
.footer .btn:hover .btn__icon { background: var(--atos-grey); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.textlink { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--light-green); padding-bottom: 2px; transition: border-color .2s; }
.textlink:hover { border-color: var(--human-blue); }
/* Links im Fließtext und in Listen: nur grüne Unterstreichung, nicht fett (ruhiger). Eigenständige Links (Alle …, anrufen, Mehr zu …) bleiben fett. */
p:is(:not([class]), [class="brxe-text-basic"]) .textlink, .fakten .textlink { font-weight: inherit; }

/* Header */
/* Kein backdrop-filter: er würde das fixierte Mobilmenü an den Header binden. */
.header { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.header.is-scrolled { border-color: var(--linie); box-shadow: 0 6px 24px rgba(41,61,75,.06); }
/* Kompakte Kopfzeile ab 120 px Scrollweg: niedriger, Logo etwas kleiner */
.header.ist-kompakt { --header-h: 66px; }
.header__inner, .nav__link { transition: min-height .3s ease, height .3s ease; }
.logo__bild { transition: transform .3s ease; transform-origin: left center; }
.header.ist-kompakt .logo__bild { transform: scale(.84); }
.header.ist-kompakt .nav__link::after { bottom: 14px; }
.header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--atos-grey); flex-shrink: 0; }
.logo__bild { display: block; width: 280px; aspect-ratio: 608.41 / 83.10; color: var(--atos-grey); }
.header__aktion { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header__aktion .btn__text { padding: 14px 18px 10px; white-space: nowrap; }
.header__aktion .btn__icon { width: 44px; }
.sprache { font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .06em; padding: 6px 8px; border: 1px solid var(--linie); }
.sprache:hover { border-color: var(--atos-grey); }
/* Sprachwechsel im mobilen Menü */
.nav__sprache { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: var(--text-s); }
.nav__sprache span { margin-right: auto; color: var(--text-hell); }
.nav__sprache a { padding: 8px 14px 6px; border: 1px solid var(--linie); text-decoration: none; color: var(--atos-grey); font-weight: 400; }
.nav__sprache a[aria-current] { border-color: var(--atos-grey); font-weight: 700; }

/* Hauptmenü mit Mega-Panel */
.nav { margin-left: auto; }
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav__link { display: flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; color: var(--atos-grey); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 24px; height: 2px; background: var(--light-green); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 700; }
/* Aktueller Bereich: übergeordneter Menüpunkt bleibt unterstrichen (in Bricks: current-menu-ancestor) */
.nav__punkt--aktiv > .nav__link::after { transform: scaleX(1); }
.nav__pfeil { width: 10px; height: 10px; transition: transform .2s; }
.nav__link[aria-expanded="true"] .nav__pfeil { transform: rotate(180deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 24px 48px rgba(41,61,75,.12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.nav__punkt.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.mega__inner { display: grid; gap: 40px; padding-block: 36px 40px; }
.mega--gross .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0.8fr minmax(0, 1fr); }
.mega__titel { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--human-blue); text-decoration: none; margin-bottom: 12px; }
.mega__titel:hover { color: var(--atos-grey); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 7px 0; font-size: 16px; text-decoration: none; border-bottom: 1px solid var(--flaeche); transition: color .15s, padding .15s; }
.mega li a:hover { color: var(--human-blue); padding-left: 6px; }
/* Aktuelle Seite im Drop-down (in Bricks: current-menu-item) */
.mega li a[aria-current="page"] { font-weight: 700; color: var(--atos-grey); }
.mega__titel[aria-current="page"] { color: var(--atos-grey); text-decoration: underline 2px var(--light-green); text-underline-offset: 5px; }
.mega__teaser { background: var(--flaeche); padding: 24px; align-self: start; }
.mega__teaser p { font-size: var(--text-s); margin-bottom: 16px; }
.mega__teaser strong { display: block; font-size: 1.125rem; margin-bottom: 6px; }

.nav__punkt--dropdown { position: relative; }
.dropdown { left: -8px; right: auto; width: 340px; border-top: 3px solid var(--light-green); padding: 8px 0; }
.dropdown li a { padding: 11px 22px; }
.dropdown li:last-child a { border-bottom: 0; }
.dropdown li a:hover { padding-left: 28px; }
.dropdown__zusatz { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-hell); }

.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--atos-grey); }
.nav-toggle svg { width: 28px; height: 28px; }

/* Hero */
.hero { --hero-h: clamp(360px, 42vw, 640px); position: relative; overflow: hidden; background: var(--flaeche); border-bottom: 6px solid var(--light-green); }
.hero__bild { width: 100%; height: var(--hero-h); object-fit: cover; object-position: 42% 24%; }
/* Rechter Fuß des A endet auf der Inhaltskante (Logo, H1), sobald diese weit genug rechts liegt.
   Auf schmaleren Bildschirmen bliebe vom A sonst nur ein Streifen, dort gilt der bisherige Versatz. */
.hero__form { position: absolute; left: max(-21%, calc(max(var(--rand), (100% - var(--breite)) / 2) - var(--hero-h) * 70 / 62.686)); bottom: 0; height: 100%; width: auto; aspect-ratio: 70 / 62.686; fill: var(--light-green); pointer-events: none; }
.hero--unterseite { --hero-h: clamp(300px, 35vw, 535px); }
.hero--unterseite .hero__bild { object-position: 60% 35%; }
.hero--unterseite .hero__bild--unten { object-position: 60% 85%; }
.hero--unterseite .hero__bild--ganz-unten { object-position: 60% 100%; }
.hero--unterseite .hero__bild--kontakt { object-position: 60% calc(30% - 30px); }
.hero--unterseite .hero__bild--zentrum { object-position: 70% 55%; }
.hero--unterseite .hero__bild--international { object-position: 60% 55%; }
.hero--unterseite .hero__bild--kliniken { object-position: 60% 30%; }
.hero--unterseite .hero__bild--nacken { object-position: 60% 18%; }
.hero--unterseite .hero__bild--muskel { object-position: 60% 60%; }
.hero--unterseite .hero__bild--fuss { object-position: 60% 68%; }
.hero--unterseite .hero__bild--gelenke { object-position: 60% 50%; }
.hero--unterseite .hero__bild--therapie { object-position: 60% 38%; }
.hero--unterseite .hero__bild--beschwerden { object-position: 60% 40%; }
.hero--unterseite .hero__bild--schmerz { object-position: 60% 20%; }
.hero--unterseite .hero__bild--bio { object-position: 60% 50%; }
.hero--unterseite .hero__bild--arthrose { object-position: 60% 24%; }
.hero--unterseite .hero__bild--stosswelle { object-position: 60% 50%; }
.hero--unterseite .hero__bild--orthese { object-position: 60% 50%; }
.hero--unterseite .hero__bild--ambiente { object-position: 50% 60%; }
.hero--unterseite .hero__bild--gang { object-position: 50% 22%; }
/* Sportmedizin: Köpfe dichter an der Oberkante, mehr Laufband sichtbar */
.hero--unterseite .hero__bild--sport-lauf { object-position: 50% 42%; }
.hero--unterseite .hero__bild--sport { object-position: 60% 48%; }
.hero--unterseite .hero__bild--checkup { object-position: 50% calc(38% - 50px); }
.hero--unterseite .hero__bild--zweitmeinung { object-position: 50% 40%; }
.fakten--abgesetzt { margin-top: 6px; }
.fakten__einleitung { margin: 0 0 14px; }
/* Seitenkopf und folgender weißer Abschnitt lesen sich als ein Textblock */
.seitenkopf.seitenkopf--anschluss { padding-bottom: 0; }
.section.section--nach-kopf { padding-top: clamp(32px, 4vw, 48px); }
/* Akute Verletzungen: Knie mit Orthese mittig im Bild */
.hero--unterseite .hero__bild--verletzung { object-position: 60% 50%; }
.seitenkopf.seitenkopf--weiss { background: var(--weiss); padding-top: clamp(32px, 4vw, 56px); }
.hero__bildtext { position: absolute; right: var(--rand); bottom: 20px; font-size: 13px; color: var(--weiss); text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* Einstieg */
/* Weniger Luft über dem Einstieg, damit die H1 trotz höherem Kopfbild früh sichtbar ist */
.einstieg { padding-top: clamp(40px, 4vw, 64px); }
.einstieg__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.einstieg h1 { margin-bottom: 12px; }
.einstieg__claim { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.3; margin-bottom: 28px; }
.einstieg__claim strong { background: linear-gradient(transparent 62%, var(--light-green) 62%); padding-inline: 2px; }
.kontaktbox { background: var(--atos-grey); color: var(--weiss); padding: 32px; }
.kontaktbox h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 20px; }
.kontaktbox__zeile { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); text-decoration: none; }
.kontaktbox__zeile svg { flex: 0 0 22px; height: 22px; color: var(--light-green); margin-top: 2px; }
.kontaktbox__zeile span { display: block; font-size: var(--text-s); color: #c9d0d6; }
.kontaktbox__zeile b { font-size: 1.125rem; }
/* Nur die Telefonnummer fett, E-Mail und Adresse ruhiger */
.kontaktbox__zeile .kontaktbox__wert--leicht { font-weight: 400; font-size: 1.0625rem; }
a.kontaktbox__zeile:hover b { color: var(--light-green); }
.zeiten { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
.zeiten td { padding: 3px 0; }
.zeiten td:last-child { text-align: right; }
/* Zeiten linksbündig direkt neben dem Tag, damit keine Lücke entsteht */
.sprechzeiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; margin: 2px 0 0; font-size: 1rem; }
.sprechzeiten dt { font-weight: 700; }
.sprechzeiten dd { margin: 0; color: #e4e8eb; }

/* Beschwerden-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kachel { position: relative; display: flex; flex-direction: column; background: var(--weiss); text-decoration: none; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.kachel:hover { box-shadow: 0 18px 40px rgba(41,61,75,.14); transform: translateY(-3px); }
.kachel__bild { aspect-ratio: 4 / 3; overflow: hidden; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.kachel:hover .kachel__bild img { transform: scale(1.04); }
.kachel__text { min-width: 0; padding: 22px 24px 26px; border-top: 4px solid var(--light-green); flex: 1; display: flex; flex-direction: column; }
.kachel__text h3 { margin-bottom: 8px; hyphens: auto; }
.kachel__text p { font-size: var(--text-s); color: var(--text-hell); margin-bottom: 14px; }
.kachel__mehr { margin-top: auto; font-size: var(--text-s); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.kachel__mehr svg { width: 16px; height: 16px; transition: transform .2s; }
.kachel:hover .kachel__mehr svg { transform: translateX(4px); }
.alle-link { margin: 28px 0 0; font-size: var(--text-s); }
.alle-link a { display: inline-flex; align-items: center; gap: 8px; }
.alle-link svg { width: 16px; height: 16px; transition: transform .2s; }
.alle-link a:hover svg { transform: translateX(3px); }


/* Dr. Schettle */
.arzt__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.arzt__bild { position: relative; }
.arzt__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.arzt__bild::after { content: ""; position: absolute; right: -16px; bottom: -16px; width: 42%; height: 42%; border-right: 6px solid var(--light-green); border-bottom: 6px solid var(--light-green); pointer-events: none; }
.arzt__name { font-size: var(--text-s); color: var(--text-hell); margin: 8px 0 24px; }
.fakten__titel { margin: 28px 0 12px; font-size: 0.8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--human-blue); }
.fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fakten li { display: flex; gap: 11px; }  /* Folgezeilen bündig mit dem Textanfang */
.fakten li b { font-weight: 700; }
/* Kleines Quadrat, mittig zur ersten Zeile (1lh = Zeilenhöhe) */
.fakten li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: calc(0.5lh - 3px); background: var(--human-blue); }

/* Leitbild */
.leitbild__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.leitsatz { background: var(--weiss); padding: 32px 28px; border-top: 3px solid var(--human-blue); }
.leitsatz h3 { margin-bottom: 12px; }
.leitsatz p { font-size: var(--text-s); margin: 0; }

/* Lage */
/* Text links, Bild rechts: Bild beginnt auf Höhe der H2 und ist so hoch wie der Textblock (Therapie, Anfahrt) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.split__text h2 { margin-bottom: 16px; }
.split__text > :last-child { margin-bottom: 0; }
.split__bild { position: relative; min-height: 280px; }
.split__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.adressen { margin: 20px 0 28px; }
.adressen__zeile { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid rgba(41, 61, 75, .14); }
.adressen__zeile:last-child { border-bottom: 1px solid rgba(41, 61, 75, .14); }
.adressen dt { font-weight: 700; }
.adressen dd { margin: 0; }
/* Bild ragt oben und unten über den Textblock hinaus (Kontakt-Anfahrt), dafür mehr Luft in der Fläche */
.section.section--luftig { padding-block: clamp(72px, 7vw, 104px); }
.split--bild-hoch .split__bild { margin-block: -32px; min-height: 380px; }
.section--kompakt { padding-block: 64px 80px; }
.verfahren { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid rgba(41, 61, 75, .14); }
.verfahren li { border-bottom: 1px solid rgba(41, 61, 75, .14); }
.verfahren a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 1.0625rem; font-weight: 400; color: var(--atos-grey); text-decoration: none; transition: color .2s; }
.verfahren svg { flex: none; width: 16px; height: 16px; color: var(--human-blue); transition: transform .2s; }
.verfahren a:hover { color: var(--human-blue); }
.verfahren a:hover svg { transform: translateX(4px); }
.verfahren + .alle-link { margin-top: 24px; }
.parken { display: flex; gap: 16px; align-items: center; background: var(--light-green); padding: 18px 20px; margin: 4px 0 24px; }
.parken svg { flex: 0 0 32px; width: 32px; height: 32px; color: var(--atos-grey); }
.parken b { display: block; font-size: 1.125rem; line-height: 1.3; }
.parken span { font-size: var(--text-s); }

/* Zentrum */
/* Partnerverzeichnis: links Einleitung, rechts Liste mit zwei festen Achsen */
.zentrum__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.zentrum__intro h2 { margin-bottom: 16px; }
.zentrum__intro p { color: var(--text-hell); }
.zentrum__intro .alle-link { margin-top: 8px; }
.partnerliste { list-style: none; margin: 0; padding: 0; }
.partnerliste li + li { border-top: 1px solid rgba(41, 61, 75, .14); }
.partnerliste__zeile { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 56px; padding-block: 10px; }
.partnerliste__fach { font-size: 1rem; font-weight: 400; color: var(--atos-grey); }
.partnerliste__logo { width: auto; height: calc(var(--logo-h, 36px) * .8); max-width: 100%; object-fit: contain; object-position: left center; }
/* ATOS-Wortmarken größer, damit „ATOS“ in beiden Zeilen etwa gleich groß wirkt */

/* Unterseiten: Seitenkopf mit Brotkrumen */
.seitenkopf { background: var(--flaeche); padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4vw, 56px); }
.seitenkopf h1 { margin-bottom: 16px; max-width: 40ch; }
.seitenkopf .lead { max-width: 62ch; color: var(--atos-grey); margin: 0; }
/* 404-Seite: große Fehlernummer über der H1 */
.fehler__code { margin: 0 0 8px; font-size: clamp(64px, 10vw, 120px); line-height: 1; font-weight: 700; color: var(--light-green); -webkit-text-stroke: 2px var(--atos-grey); }
/* Seitenkopf mit Foto rechts (Standortseiten): 55 % Text, 45 % Bild */
/* Gespiegelt darunter: Bild links (45 %), Text rechts (55 %), gleicher Spaltenabstand wie im Seitenkopf */
.split--gespiegelt { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(32px, 5vw, 72px); }
.split--gespiegelt .split__bild { order: -1; }
.seitenkopf__grid { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.seitenkopf__bild { margin: 0; }
.seitenkopf__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
/* Zeilenabstand beim Umbruch klein halten: row-gap 2px, column-gap 8px */
.brotkrumen { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; line-height: 1.4; color: var(--text-hell); margin-bottom: 20px; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { color: var(--human-blue); }

/* Profilseite: Porträt neben dem Text im Seitenkopf */
.profil__grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.profil__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.profil__text h1 { margin-bottom: 8px; }
.profil__titel { font-size: var(--text-s); color: var(--text-hell); margin-bottom: 24px; }
.profil__text .lead { margin-bottom: 1em; }
.profil__h2 { margin-bottom: 28px; }
.liste__einleitung { max-width: 760px; margin: -8px 0 28px; }
.schwerpunkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); }
.schwerpunkt { display: flex; flex-direction: column; border-top: 3px solid var(--human-blue); padding-top: 18px; text-decoration: none; }
.schwerpunkt h3 { margin-bottom: 8px; transition: color .2s; }
.schwerpunkt p { font-size: var(--text-s); color: var(--text-hell); margin-bottom: 14px; }
.schwerpunkt:hover h3 { color: var(--human-blue); }
.schwerpunkt:hover .kachel__mehr svg { transform: translateX(4px); }
/* Werdegang: Zeitspalte und Station, neueste zuerst */
/* Gleiches Dreier-Raster wie die Schwerpunkte: Titel in Spalte 1, Zeitleiste über Spalte 2 und 3 */
.werdegang__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); align-items: start; }
.werdegang__inhalt { grid-column: 2 / span 2; }
.werdegang { list-style: none; margin: 0; padding: 0; }
.werdegang li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(41, 61, 75, .14); }
.werdegang li:first-child { border-top: 1px solid rgba(41, 61, 75, .14); }
.werdegang__zeit { font-size: var(--text-s); font-weight: 700; color: var(--human-blue); padding-top: 2px; }
.werdegang b { display: block; font-size: 1.0625rem; line-height: 1.4; }
.werdegang li span:not(.werdegang__zeit) { display: block; font-size: var(--text-s); color: var(--text-hell); }
.werdegang__zusatz { margin: 24px 0 0; font-size: var(--text-s); color: var(--text-hell); }
.fachbeitrag { margin-top: 32px; }
.fachbeitrag .kicker { margin-bottom: 10px; }
.fachbeitrag a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; background: var(--weiss); padding: 20px 24px; text-decoration: none; }
.fachbeitrag b { display: block; line-height: 1.4; transition: color .2s; }
.fachbeitrag a > span { grid-column: 1; font-size: var(--text-s); color: var(--text-hell); }
.fachbeitrag svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--human-blue); transition: transform .2s; }
.fachbeitrag a:hover b { color: var(--human-blue); }
.fachbeitrag a:hover svg { transform: translateX(4px); }

/* Praxisräume: großes Raumbild, das aus der grauen Fläche in den weißen Bereich ragt */
.seitenkopf--bild { padding-bottom: 0; background: linear-gradient(var(--flaeche) calc(100% - clamp(80px, 9vw, 160px)), var(--weiss) 0); }
.raumbild { margin: clamp(28px, 3vw, 44px) 0 0; }
.raumbild img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.schwerpunkt__titel { font-size: var(--h3); font-weight: 700; margin-bottom: 8px; }

/* Galerie als Mosaik: ein großes Bild, breite und normale Kacheln, enge Fugen */
.galerie__titel { margin-bottom: 28px; }
.galerie { --reihe: clamp(170px, 17vw, 260px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--reihe); grid-auto-flow: row dense; gap: 12px; }
/* Oberer Block (großes Bild + zwei kleine) bleibt, die beiden Reihen darunter sind höher und weniger panoramaartig */
.galerie { grid-template-rows: var(--reihe) var(--reihe) calc(var(--reihe) * 1.45) calc(var(--reihe) * 1.45); }
.galerie__eintrag--gross { grid-column: span 2; grid-row: span 2; }
.galerie__eintrag--breit { grid-column: span 2; }
.galerie a { position: relative; display: block; height: 100%; overflow: hidden; background: var(--linie); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.03); }
/* Beschriftung als Verlauf über die volle Bildbreite */
.galerie span { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 12px; background: linear-gradient(to top, rgba(41, 61, 75, .85), rgba(41, 61, 75, 0)); color: var(--weiss); font-size: 14px; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
/* Abschlusszeile ohne eigene Fläche: links bündig mit der Galerie, Textlink schließt rechts mit ihr ab */
.ablauf__intro { max-width: 72ch; margin: -8px 0 28px; }
.abschnitt__intro { max-width: 72ch; margin: -12px 0 28px; }
.reha { max-width: 72ch; }
.reha h2 { margin-bottom: 16px; }
.reha p { margin: 0; }
.reha p + p { margin-top: 14px; }
.termin-hinweis.termin-hinweis--weiss { background: var(--weiss); }
.termin-hinweis.termin-hinweis--offen { background: none; padding: 0; }

/* Vergrößerte Ansicht */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lightbox::backdrop { background: rgba(20, 28, 35, .94); }
.lightbox__bild { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 80px 28px; }
.lightbox__bild img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }
.lightbox__bild figcaption { margin-top: 14px; font-size: 14px; color: #e4e8eb; }
.lightbox__knopf { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: rgba(255, 255, 255, .12); color: var(--weiss); font: 300 30px/1 var(--schrift); cursor: pointer; transition: background-color .2s, color .2s; }
.lightbox__knopf:hover { background: var(--light-green); color: var(--atos-grey); }
.lightbox__zu { top: 16px; right: 16px; }
.lightbox__zurueck { left: 16px; top: calc(50% - 24px); }
.lightbox__vor { right: 16px; top: calc(50% - 24px); }

/* Internationale Patienten */
.intl-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 28px; }
.sprachen p { margin: 0 0 10px; }
.sprachen strong { font-weight: 700; }
.sprachen .textlink { font-size: var(--text-s); }
.intl-zeile__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.recht { max-width: 640px; }
/* Partner im Haus: je Partner Fach/Etage/Logo links, Leistung rechts */
.sprungliste { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: var(--text-s); }
.sprungliste a { color: var(--atos-grey); font-weight: 400; text-decoration: none; border-bottom: 1px solid rgba(41, 61, 75, .3); padding-bottom: 2px; }
.sprungliste a:hover { color: var(--human-blue); border-color: var(--human-blue); }
.partner { list-style: none; margin: 0; padding: 0; }
.partner__eintrag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px clamp(32px, 5vw, 72px); padding: 36px 0; border-top: 1px solid rgba(41, 61, 75, .14); scroll-margin-top: calc(var(--header-h) + 16px); }
.partner__eintrag:first-child { border-top: 0; padding-top: 0; }
.partner__fach { font-size: var(--h3); font-weight: 700; }
.partner__ort { display: block; margin-top: 6px; font-size: var(--text-s); color: var(--text-hell); }
.partner__logos { display: flex; flex-direction: column; gap: 16px; }
.partner__logo { display: block; margin-top: 20px; width: auto; height: var(--logo-h, 36px); max-width: 100%; object-fit: contain; object-position: left center; }
/* Optisch gleiche Logogröße: kompakte Logos höher, breite flacher (Platzhalter-PNGs von Conradia und Turan später gegen Vektor tauschen) */
.partner__logo[src*="conradia"], .partnerliste__logo[src*="conradia"] { --logo-h: 40px; }
.partner__logo[src*="atos-neurologie"], .partnerliste__logo[src*="atos-neurologie"],
.partner__logo[src*="atos-physiotherapie"], .partnerliste__logo[src*="atos-physiotherapie"] { --logo-h: 28px; }
.partner__logo[src*="lueckenotto"], .partnerliste__logo[src*="lueckenotto"],
.partner__logo[src*="bodynostic"], .partnerliste__logo[src*="bodynostic"] { --logo-h: 36px; }
.partner__logo[src*="turan"], .partnerliste__logo[src*="turan"] { --logo-h: 44px; }
.partner__logos .partner__logo { margin-top: 0; }
.partner__logos { margin-top: 20px; }
.partner__logo--klinik { width: auto; height: 32px; max-width: 100%; }
.kliniken__weitere { margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(41, 61, 75, .14); }
.termin-hinweis.termin-hinweis--offen:first-child { margin-top: 0; }
.partner__text p { margin: 0 0 14px; max-width: 68ch; }
.partner__text .textlink { display: inline-flex; align-items: center; gap: 6px; margin-right: 28px; font-size: var(--text-s); }
.partner__text .textlink svg { width: 14px; height: 14px; }
/* Kontakt: Rückruf-Formular links, Kontaktbox rechts (Platzhalter für Ninja Forms) */
.kontakt__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.rueckruf h2 { margin-bottom: 12px; }
.rueckruf > p { margin: 0 0 28px; color: var(--text-hell); }
.formular { display: grid; gap: 20px; max-width: 680px; }
.formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: var(--text-s); font-weight: 400; color: var(--atos-grey); }
.feld__hinweis { font-size: var(--text-s); color: var(--text-hell); font-weight: 300; }
.feld input:not([type="checkbox"]), .feld select { font: inherit; font-size: 1rem; color: var(--atos-grey); background: var(--weiss); border: 1px solid rgba(41, 61, 75, .35); border-radius: 0; padding: 12px 14px; min-height: 48px; width: 100%; }
.feld input:focus-visible, .feld select:focus-visible { outline: 2px solid var(--human-blue); outline-offset: 1px; border-color: var(--human-blue); }
.feld--check { grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; }
.feld--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--human-blue); }
.feld--check label { font-weight: 300; line-height: 1.5; color: var(--text-hell); }
.feld--check a { color: inherit; }
.formular__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.formular__absenden .btn { border: 0; cursor: pointer; font: inherit; padding: 0; }
.formular__status { margin: 0; padding: 14px 16px; background: var(--flaeche); font-size: var(--text-s); }
.section--flaeche .formular__status { background: var(--weiss); }
/* Langer Rechtstext (Datenschutz): eine Spalte mit ruhiger Gliederung */
.rechtstext { max-width: 720px; color: var(--text-hell); }
.rechtstext h2 { font-size: var(--h3); font-weight: 700; color: var(--atos-grey); margin: 48px 0 14px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.125rem; color: var(--atos-grey); margin: 32px 0 10px; padding-top: 24px; border-top: 1px solid rgba(41, 61, 75, .14); }
.rechtstext h4 { font-size: var(--text-m); font-weight: 700; color: var(--atos-grey); margin: 22px 0 6px; }
.rechtstext p, .rechtstext ul { margin: 0 0 14px; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 4px; }
.rechtstext a { color: inherit; overflow-wrap: anywhere; }
.recht__block { padding: 24px 0 10px; border-top: 1px solid rgba(41, 61, 75, .14); }
.recht__block:first-child { border-top: 0; padding-top: 0; }
.recht__block h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; }
.recht__block p { margin: 0 0 14px; color: var(--text-hell); }
.recht__block a { color: inherit; }
.vorab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.vorab__frage { padding: 22px 0; border-top: 1px solid rgba(41, 61, 75, .14); }
.vorab__frage:nth-last-child(-n+2) { border-bottom: 1px solid rgba(41, 61, 75, .14); }
.vorab__frage h3 { margin-bottom: 8px; }
.vorab__frage p { margin: 0; color: var(--text-hell); }
.vorab__frage p:is(:not([class]), [class="brxe-text-basic"]) + p:is(:not([class]), [class="brxe-text-basic"]) { margin-top: 12px; }
.intl-service { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.intl-service .fakten { margin-top: 20px; }
.kontaktbox__hinweis { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--text-s); color: #c9d0d6; }

/* Themenliste: zwei Spalten, Titel, ein Satz, Pfeil; jede Zeile komplett klickbar */
.themenliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.themenliste li { border-bottom: 1px solid rgba(41, 61, 75, .14); }
.themenliste li:nth-child(-n+2) { border-top: 1px solid rgba(41, 61, 75, .14); }
.themenliste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 22px 0; text-decoration: none; }
.themenliste__titel { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin: 0 0 4px; transition: color .2s; }
.themenliste p { grid-column: 1; margin: 0; font-size: var(--text-s); color: var(--text-hell); }
.themenliste svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--human-blue); transition: transform .2s; }
.themenliste a:hover .themenliste__titel { color: var(--human-blue); }
.themenliste a:hover svg { transform: translateX(4px); }

/* Ablauf der Behandlung: vier nummerierte Schritte */
.ablauf__titel { margin-bottom: 28px; }
/* Schrittfolge: gleiche Kreise, durch eine 1-px-Linie verbunden; Grün bleibt dem Terminbutton vorbehalten */
.ablauf { --kreis: 38px; --abstand-schritte: 24px; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-schritte); counter-reset: schritt; }
/* Linie von der Mitte des ersten bis zur Mitte des letzten Kreises */
.ablauf::before { content: ""; position: absolute; top: calc(var(--kreis) / 2); left: calc(var(--kreis) / 2); right: calc(25% - var(--abstand-schritte) * 3 / 4 - var(--kreis) / 2); height: 1px; background: var(--human-blue); opacity: .45; }
.ablauf li { counter-increment: schritt; position: relative; }
.ablauf li::before { content: counter(schritt); position: relative; display: grid; place-items: center; width: var(--kreis); height: var(--kreis); border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--human-blue); color: var(--human-blue); font-size: 0.9375rem; font-weight: 700; line-height: 1; padding-top: 2px; margin-bottom: 16px; box-sizing: border-box; }
.ablauf b { display: block; font-size: 1.125rem; margin-bottom: 4px; }
.ablauf span { display: block; font-size: var(--text-s); color: var(--text-hell); }
.ablauf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }
.ablauf__aktion .textlink { font-size: var(--text-s); }

/* Nächster Schritt unter Listen */
.termin-hinweis { margin-top: clamp(40px, 5vw, 64px); background: var(--flaeche); padding: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.termin-hinweis h2 { font-size: var(--h3); font-weight: 700; margin-bottom: 6px; }
.termin-hinweis p { margin: 0; max-width: 56ch; text-wrap: balance; }
/* Keine einzelnen Wörter in der letzten Zeile von Fließtexten */
p, .lead { text-wrap: pretty; }
.termin-hinweis__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.termin-hinweis__aktion .textlink { font-size: var(--text-s); }

/* Footer */
.footer { background: var(--atos-grey); color: var(--weiss); padding-block: 72px 0; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--light-green); }
.footer__grid { display: grid; grid-template-columns: 1.2fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.footer .logo { margin-bottom: 24px; }
.footer .logo__bild { color: var(--weiss); }
.footer h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--light-green); margin-bottom: 16px; }
.footer p, .footer li, .footer td { font-size: var(--text-s); color: #dfe4e8; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 4px 0; }
.footer .zeiten td { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .btn { margin-top: 8px; }
.footer__unten { margin-top: 56px; border-top: 1px solid rgba(255,255,255,.14); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: #b9c2c9; }
.footer__unten nav { display: flex; gap: 20px; margin-left: auto; }
.footer__umgebung { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.footer__umgebung span { display: block; font-size: 13px; color: #b9c2c9; margin-bottom: 2px; }
/* jameda als ruhiger Textlink neben dem Profil-Button */
.arzt__bewertung { align-self: center; margin-left: 8px; font-size: var(--text-s); }

/* Schmaler Desktop: Kopfzeile etwas enger, damit alles in eine Zeile passt */
/* Beschwerdeseite (Vorlage: Rückenschmerzen) */
.seitenkopf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.seitenkopf__aktion .textlink { font-size: var(--text-s); }
.seitenkopf__hinweis { max-width: 62ch; margin: 20px 0 0; }
.rueckruf { scroll-margin-top: calc(var(--header-h) + 24px); }
.split--ohne-bild { align-items: start; }
.verfahren__titel { font-size: var(--text-m); font-weight: 700; margin: 6px 0 0; }
.vorab__frage--breit { grid-column: 1 / -1; }
/* Steht ein breiter Abschlusspunkt unten, schließt nur er die Liste ab (sonst doppelte Linie) */
.vorab__frage:has(+ .vorab__frage--breit) { border-bottom: 0; }
.vorab__frage p.vorab__mehr { margin-top: 10px; font-size: var(--text-s); }
.vorab__mehr svg { width: 14px; height: 14px; vertical-align: -1px; margin-left: 4px; }
/* Einspaltige Liste: Begriff links, Erklärung rechts (Beschwerdeseiten) */
.vorab--liste { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.vorab--liste .vorab__frage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px clamp(24px, 4vw, 56px); align-items: baseline; padding: 16px 0; border-bottom: 0; }
.vorab--liste .vorab__frage:last-child { border-bottom: 1px solid rgba(41, 61, 75, .14); }
.vorab--liste .vorab__frage h3 { margin: 0; }
.vorab--liste .vorab__frage > p { grid-column: 2; }
.vorab--liste .vorab__frage p.vorab__mehr { margin-top: 0; }
/* Knie und Hüfte: zwei beschriftete Bereiche nebeneinander, darin kompakte Listen */
.gelenke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.gelenke__titel { padding-top: 14px; border-top: 2px solid var(--human-blue); margin-bottom: 4px; }
.vorab--schmal .vorab__frage { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
.vorab--schmal .vorab__frage:first-child { border-top: 0; }
.vorab--schmal .vorab__frage > p { grid-column: auto; }
.vorab__frage h4 { font-size: var(--text-m); font-weight: 700; }
.fachbeitrag--dezent { margin-top: 28px; }
/* Auf weißer Fläche braucht die Fachbeitrag-Karte einen grauen Grund */
.section:not(.section--flaeche) .fachbeitrag a { background: var(--flaeche); }
.fachbeitrag--dezent b { font-weight: 400; }
.gelenke__ausstrahlung { margin-top: clamp(40px, 5vw, 56px); max-width: 72ch; }
.gelenke__ausstrahlung h3 { margin-bottom: 10px; }
.gelenke__ausstrahlung p { margin: 0; }
.notfall { display: flex; gap: 18px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 2.5vw, 28px); border: 1px solid rgba(41, 61, 75, .18); border-left: 4px solid #b3261e; }
.notfall__icon { flex: none; width: 28px; height: 28px; color: #b3261e; margin-top: 2px; }
.notfall h2 { font-size: var(--text-m); font-weight: 700; margin-bottom: 6px; }
.notfall p { margin: 0; max-width: 72ch; }
.notfall a { color: inherit; font-weight: 700; }
.notfall + .termin-hinweis { margin-top: 24px; }

@media (max-width: 1300px) {
  .header__inner { gap: 16px; }
  .logo__bild { width: 240px; }
  .nav__link { padding: 0 9px; }
  .nav__link::after { left: 9px; right: 9px; }
  .header__aktion { gap: 10px; }
}

/* Tablet */
@media (max-width: 1100px) {
  .mega--gross .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mega--gross .mega__teaser { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Menü wechselt früh auf mobil, weil „Beschwerden und Therapien“ viel Platz braucht. */
@media (max-width: 1120px) {
  :root { --header-h: 72px; }
  .header.ist-kompakt { --header-h: 60px; }
  .nav-toggle { display: block; margin-left: 4px; }
  .header__aktion { margin-left: auto; }
  .header__aktion .btn { display: none; }
  /* Geschlossen ist das Menü ganz aus dem Layout genommen (display: none).
     So kann es in keinem Browser die Seitenbreite beeinflussen; beim Öffnen blendet es kurz ein. */
  .nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: var(--weiss); overflow-y: auto; padding: 8px var(--rand) 40px; margin: 0; }
  .nav.is-open { display: block; animation: menue-ein .25s ease-out; }
  .nav__liste { flex-direction: column; gap: 0; }
  .nav__punkt { border-bottom: 1px solid var(--linie); }
  .nav__link { height: auto; width: 100%; justify-content: space-between; padding: 16px 0; font-size: 18px; white-space: normal; text-align: left; }
  .nav__link::after { display: none; }
  .nav__punkt--aktiv > .nav__link { font-weight: 700; }
  .mega { position: static; box-shadow: none; border: 0; opacity: 1; visibility: visible; transform: none; display: none; }
  .nav__punkt.is-open > .mega { display: block; }
  .mega .container { padding: 0; }
  .mega__inner, .mega--gross .mega__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 0 20px; }
  .dropdown { width: auto; border-top: 0; padding: 0 0 12px; }
  .dropdown li a, .dropdown li a:hover { padding: 9px 0; }
  .mega__teaser { display: none; }
  .nav__termin { display: block; margin-top: 24px; }
  .nav__termin .btn { width: 100%; }
  .nav__termin .btn__text { flex: 1; }
}
@media (min-width: 1121px) { .nav__termin, .nav__sprache { display: none; } }
/* Desktop: Seite unter der Kopfzeile dunkelt leicht ab, solange ein Mega-Menü offen ist; Klick in die Fläche schließt (menu.js) */
@media (min-width: 1121px) {
  body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(41, 61, 75, .28); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  body:has(.nav__punkt.is-open)::after { opacity: 1; visibility: visible; transition: opacity .2s; }
}

@media (max-width: 980px) {
  .split--gespiegelt .split__bild { order: 0; }
  .seitenkopf__grid { grid-template-columns: minmax(0, 1fr); }
  .split--bild-hoch .split__bild { margin-block: 0; min-height: 0; }
  .kontakt__grid { grid-template-columns: minmax(0, 1fr); }
  .einstieg__grid, .arzt__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .profil__grid, .werdegang__grid { grid-template-columns: minmax(0, 1fr); }
  .intl-service { grid-template-columns: minmax(0, 1fr); }
  .werdegang__inhalt { grid-column: auto; }
  .profil__bild { max-width: 420px; }
  .schwerpunkte { grid-template-columns: minmax(0, 1fr); }
  .split__bild { min-height: 0; aspect-ratio: 3 / 2; }
  .kacheln, .leitbild__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Unter 980 px vertikal: Kreise und Linie links, Text rechts daneben */
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ablauf::before { display: none; }
  .ablauf li { display: grid; grid-template-columns: var(--kreis) minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
  .ablauf li:last-child { padding-bottom: 0; }
  .ablauf li::before { grid-row: 1 / span 2; margin: 0; }
  .ablauf li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--kreis) / 2); top: var(--kreis); bottom: 0; width: 1px; background: var(--human-blue); opacity: .45; }
  .ablauf b { grid-column: 2; padding-top: 7px; }
  .ablauf span { grid-column: 2; }
  .zentrum__grid { grid-template-columns: minmax(0, 1fr); }
  .arzt__bild { max-width: 460px; }
}

/* Smartphone */
@media (max-width: 640px) {
  .logo__bild { width: 210px; }
  .sprache { padding: 5px 7px; }
  .hero { --hero-h: 300px; }
  .brotkrumen { font-size: 13px; margin-bottom: 22px; }
  .hero__bild { object-position: 38% 30%; }
  .hero__form { left: -42%; }
  .kacheln, .leitbild__grid { grid-template-columns: minmax(0, 1fr); }
  .themenliste { grid-template-columns: minmax(0, 1fr); }
  .vorab { grid-template-columns: minmax(0, 1fr); }
  .hero--unterseite .hero__bild--gang, .hero--unterseite .hero__bild--sport-lauf { object-position: 30% 50%; }
  .hero--unterseite .hero__bild--international { object-position: 0% 50%; }
  .hero--unterseite .hero__bild--checkup { object-position: 35% 50%; }
  .hero--unterseite .hero__bild--zweitmeinung { object-position: 40% 50%; }
  .hero--unterseite .hero__bild--kliniken { object-position: 20% 50%; }
  .hero--unterseite .hero__bild--nacken { object-position: 50% 50%; }
  .hero--unterseite .hero__bild--muskel { object-position: 15% 50%; }
  .hero--unterseite .hero__bild--fuss { object-position: 28% 50%; }
  .hero--unterseite .hero__bild--gelenke { object-position: 60% 50%; }
  .hero--unterseite .hero__bild--therapie { object-position: 15% 50%; }
  .hero--unterseite .hero__bild--beschwerden { object-position: 75% 50%; }
  .hero--unterseite .hero__bild--schmerz { object-position: 80% 50%; }
  .hero--unterseite .hero__bild--bio { object-position: 60% 50%; }
  .hero--unterseite .hero__bild--arthrose { object-position: 15% 50%; }
  .hero--unterseite .hero__bild--stosswelle { object-position: 40% 50%; }
  .hero--unterseite .hero__bild--orthese { object-position: 18% 50%; }
  /* Kontakt-Kopf mobil: Bild füllt die Höhe genau, daher keine Pixel-Verschiebung; leicht hineinzoomen und Personen vom A wegrücken */
  .hero--unterseite .hero__bild--kontakt { object-position: 10% 50%; transform: scale(1.04); transform-origin: 0% 40%; }
  .formular__reihe { grid-template-columns: minmax(0, 1fr); }
  .partner__eintrag { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .vorab--liste .vorab__frage { grid-template-columns: minmax(0, 1fr); }
  .vorab--liste .vorab__frage > p { grid-column: auto; }
  .gelenke { grid-template-columns: minmax(0, 1fr); }
  /* Mobil: Linie erst nach der Erklärung */
  .vorab--liste .vorab__frage { border-top: 0; border-bottom: 1px solid rgba(41, 61, 75, .14); gap: 4px; }
  .seitenkopf__aktion .btn { width: 100%; }
  .seitenkopf__aktion .btn__text { flex: 1; }
  .vorab__frage:nth-last-child(2) { border-bottom: 0; }
  .intl-zeile__aktion .btn { width: 100%; }
  .intl-zeile__aktion .btn__text { flex: 1; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; gap: 8px; }
  .raumbild img { aspect-ratio: 4 / 3; }
  .lightbox__bild { padding: 64px 12px 24px; }
  .lightbox__zurueck, .lightbox__vor { top: auto; bottom: 16px; }
  .werdegang li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* Porträt auf dem Handy flacher, damit Name und Einstieg schneller sichtbar sind */
  .profil__bild img { aspect-ratio: 4 / 3; object-position: 50% 20%; }
  .ablauf__aktion .btn { width: 100%; }
  .ablauf__aktion .btn__text { flex: 1; }
  .themenliste li:nth-child(2) { border-top: 0; }
  .themenliste a { padding: 18px 0; }
  .termin-hinweis__aktion .btn { width: 100%; }
  .termin-hinweis__aktion .btn__text { flex: 1; }
  .partnerliste__zeile { grid-template-columns: 130px minmax(0, 1fr); gap: 16px; }
  .kacheln { gap: 14px; }
  .kachel { flex-direction: row; }
  .kachel__bild { flex: 0 0 34%; aspect-ratio: auto; }
  .kachel__text { border-top: 0; border-left: 4px solid var(--light-green); padding: 16px 18px; }
  .kachel__text p { display: none; }
  .kontaktbox { padding: 24px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__unten nav { margin-left: 0; }
  .arzt__bewertung { margin: 4px 0 0; }
  .btn-reihe .btn { width: 100%; }
  .btn-reihe .btn__text { flex: 1; }
}

/* Sehr schmale Handys */
@media (max-width: 360px) {
  .logo__bild { width: 180px; }
  .header__inner { gap: 12px; }
}

@keyframes menue-ein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Dezente Animationen ---------- */
/* Einblenden beim Scrollen: js/animation.js markiert Inhalte unterhalb des sichtbaren Bereichs */
.anim [data-einblenden] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); transition-delay: var(--verzoegerung, 0ms); }
.anim [data-einblenden].ist-sichtbar { opacity: 1; transform: none; }
/* Ablauf: Verbindungslinie zeichnet sich von links nach rechts */
.anim .ablauf[data-linie]::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1) .15s; }
.anim .ablauf[data-linie].ist-sichtbar::before { transform: scaleX(1); }
/* Claim: grüne Markierung hinter „ohne OP“ zieht einmal von links auf (reines CSS, kein Flackern) */
.einstieg__claim strong { background: linear-gradient(var(--light-green), var(--light-green)) no-repeat 0 100% / 100% 38%; animation: markierung .9s cubic-bezier(.6, 0, .2, 1) .5s both; }
@keyframes markierung { from { background-size: 0 38%; } to { background-size: 100% 38%; } }
/* Bildkopf: ATOS-A gleitet beim Laden leicht herein */
.hero:not(.hero--unterseite) .hero__form { animation: a-ein .9s cubic-bezier(.2, .6, .2, 1) .1s both; }
@keyframes a-ein { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* Buttons: Pfeil rückt beim Überfahren ein Stück nach rechts */
.btn__icon svg { transition: transform .2s; }
.btn:hover .btn__icon svg { transform: translateX(3px); }
.btn:hover .btn__icon--doctolib svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .anim [data-einblenden] { opacity: 1; transform: none; }
}


/* ==========================================================================
   Anpassungen für Bricks: Bausteine, die Bricks um den Inhalt legt
   ========================================================================== */
.brx-body { display: block; }                          /* Bricks: Flex-Spalte um Header, Inhalt, Footer */
#brx-header { display: contents; }                     /* Kopfzeile bleibt am Seitenrand haften (sticky) */
#brx-content, #brx-footer { display: block; }
.header__inner > .brxe-shortcode, #brx-header > .brxe-shortcode { display: contents; }   /* Menü-Shortcode ohne eigene Box */
/* Angemeldet: Kopfzeile und Handymenü unter der WordPress-Adminleiste (32 px, mobil 46 px) */
.admin-bar .header { top: 32px; }
@media (max-width: 1120px) { .admin-bar .nav { inset-block-start: calc(var(--header-h) + 32px); } }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } .admin-bar .nav { inset-block-start: calc(var(--header-h) + 46px); } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } .admin-bar .nav { inset-block-start: var(--header-h); } }   /* WordPress lässt die Leiste hier mitscrollen */
/* Bricks-Bilder: Klassen des Prototyps hängen direkt am <img>, Bricks soll nichts dazugeben */
img.brxe-image { border-radius: revert; }

/* ==========================================================================
   Kontaktformular: Ninja Forms im Aufbau des Prototyp-Formulars (.formular/.feld)
   Ninja Forms lädt seine Styles nach diesem Stylesheet. Deshalb beginnen die Regeln mit
   .form.form--ninja .nf-form-cont (stärker als die Ninja-Selektoren).
   ========================================================================== */
.form.form--ninja { display: block; max-width: 680px; }
.form.form--ninja .nf-form-cont { color: var(--atos-grey); font: inherit; }
.form.form--ninja .nf-form-cont .nf-form-content { max-width: none; margin: 0; padding: 0; }
.form.form--ninja .nf-form-cont :is(.nf-form-title, .nf-form-fields-required) { display: none; }
.form.form--ninja .nf-form-cont nf-fields-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form.form--ninja .nf-form-cont nf-field:has(textarea, .checkbox-container, .listcheckbox-container, .listradio-container, .submit-container, .html-container, .hr-container, .phone-container, .tel-container) { grid-column: 1 / -1; }
@media (max-width: 640px) { .form.form--ninja .nf-form-cont nf-fields-wrap { grid-template-columns: minmax(0, 1fr); } }
.form.form--ninja .nf-form-cont .nf-field-container { margin: 0; }
.form.form--ninja .nf-form-cont .nf-field-container::after { display: none; }
.form.form--ninja .nf-form-cont .field-wrap { display: grid; gap: 6px; }
.form.form--ninja .nf-form-cont .nf-field-label { display: block; width: auto; margin: 0; padding: 0; }
.form.form--ninja .nf-form-cont :is(.html-container, .hr-container, .hidden-container) .nf-field-label { display: none; }
.form.form--ninja .nf-form-cont .nf-field-label :is(label, .nf-label-span) { display: inline; margin: 0; font-size: var(--text-s); font-weight: 400; line-height: 1.65; color: var(--atos-grey); }
.form.form--ninja .nf-form-cont .nf-field-element { width: 100%; margin: 0; }
.form.form--ninja .nf-form-cont .ninja-forms-req-symbol { color: inherit; font-weight: 400; }
.form.form--ninja .nf-form-cont :is(input:not([type=checkbox], [type=radio], [type=button], [type=submit]), select, textarea) {
  font: inherit; font-size: 1rem; color: var(--atos-grey); background: var(--weiss); border: 1px solid rgba(41, 61, 75, .35);
  border-radius: 0; padding: 12px 14px; min-height: 48px; height: auto; width: 100%; box-shadow: none;
}
.form.form--ninja .nf-form-cont textarea { min-height: 8rem; resize: vertical; }
.form.form--ninja .nf-form-cont :is(input, select, textarea):focus-visible { outline: 2px solid var(--human-blue); outline-offset: 1px; border-color: var(--human-blue); }
.form.form--ninja .nf-form-cont .checkbox-wrap { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-element { order: -1; position: static; width: auto; opacity: 1; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-label { order: 0; }
.form.form--ninja .nf-form-cont .checkbox-wrap .nf-field-label label { position: static; margin: 0; font-weight: 300; line-height: 1.5; color: var(--text-hell); }
.form.form--ninja .nf-form-cont .checkbox-wrap label::before, .form.form--ninja .nf-form-cont .checkbox-wrap label::after { content: none; display: none; }
.form.form--ninja .nf-form-cont input[type=checkbox] { display: block; width: 20px; height: 20px; margin: 2px 0 0; opacity: 1; accent-color: var(--human-blue); }
.form.form--ninja .nf-form-cont .checkbox-wrap a { color: inherit; }
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button) {
  display: inline-flex; align-items: center; min-height: 52px; padding: 18px 74px 14px 22px; border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--atos-grey);
  background-color: var(--light-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdff00' stroke-width='2'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"), linear-gradient(var(--atos-grey), var(--atos-grey));
  background-repeat: no-repeat; background-position: right 16px center, right center; background-size: 20px 20px, 52px 100%;
  box-shadow: none; transition: background-color .2s, color .2s;
}
.form.form--ninja .nf-form-cont :is(input[type=button], input[type=submit], button):hover { background-color: var(--human-blue); color: var(--weiss); }
.form.form--ninja .nf-form-cont .nf-error-msg { margin-top: 6px; font-size: var(--text-s); color: #b3261e; }
.form.form--ninja .nf-form-cont .nf-error .nf-error-msg:empty { display: none; }
.form.form--ninja .nf-form-cont .nf-error :is(input:not([type=checkbox]), textarea, select) { border-color: #b3261e; }
.form.form--ninja .nf-form-cont .nf-error.field-wrap .nf-field-element::after, .form.form--ninja .nf-form-cont .nf-pass.field-wrap .nf-field-element::after { display: none; }
.form.form--ninja .nf-form-cont .nf-response-msg { margin: 0; padding: 14px 16px; background: var(--weiss); font-size: var(--text-s); }
.form.form--ninja .nf-form-cont .nf-form-hp, .form.form--ninja .nf-form-cont .nf-form-hp * { position: absolute; left: -9999px; }