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

/* ==========================================================================
   OrthoEins – Stylesheet
   Aufbau: 0. Schriften  1. Tokens  2. Basis  3. Layout  4. Komponenten
           5. Sektionen  6. Animationen
   Für Bricks: Tokens -> Variable Manager / Theme Styles,
   Klassen (.btn, .card-doctor …) -> Global Classes, Rest in Child-Theme-CSS.
   ========================================================================== */

/* 0. Schriften ----------------------------------------------------------- */
/* Lokal eingebunden (kein Google-Server, DSGVO), variable Fonts:
   DM Sans (wght 100–1000, opsz 9–40), Plus Jakarta Sans (wght 200–800).
   Quelle: Google Fonts, Lizenz SIL Open Font License 1.1 */
/* DM Sans – latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-var-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans – latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-var-latin.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans – latin-ext */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-var-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans – latin */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-var-latin.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Markenfarben (aus Logo / Bestandsseite) */
  --c-navy: #00355e;
  --c-navy-700: #0a4676;
  --c-blue: #0f6fb8;          /* Buttons: 5.4:1 mit Weiß */
  --c-blue-600: #0b5c9a;
  --c-sky: #a9c6e5;
  --c-sky-100: #eef4fa;
  --c-rose: #f19ec0;
  --c-surface: #f6f8fb;
  --c-white: #fff;
  --c-text: #2f3a45;          /* 11:1 auf Weiß */
  --c-text-muted: #55636f;    /* 6:1 auf Weiß */
  --c-border: #dfe6ee;
  --c-focus: #f19ec0;

  /* Schrift */
  --ff-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-head: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;

  /* Schriftgrößen: Minimum 16px, Fließtext 18px */
  --fs-sm: 1rem;                                           /* 16 */
  --fs-nav: 1.0625rem;                                     /* 17: Hauptmenü und Arztnamen im Dropdown */
  --fs-base: 1.125rem;                                     /* 18 */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); /* 19–21 */
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);        /* 20–24 */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);     /* 20–23 */
  --fs-h2: clamp(1.75rem, 1.49rem + 1.1vw, 2.375rem);      /* 28–38 */
  --fs-h1-page: clamp(2rem, 1.69rem + 1.33vw, 2.75rem);    /* 32–44: H1 der Unterseiten */
  --fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem);      /* 34–54: nur Startseite (Hero) */

  /* Abstände */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Maße */
  --container: 82rem;       /* 1312px */
  --measure: 40rem;         /* max. Zeilenlänge Fließtext ≈ 65–70 Zeichen */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgb(0 53 94 / 0.06), 0 2px 8px rgb(0 53 94 / 0.05);
  --shadow-m: 0 4px 12px rgb(0 53 94 / 0.07), 0 18px 40px rgb(0 53 94 / 0.09);
  --header-h: 6.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. Basis ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* 1rem = Browser-Standard (meist 16px) – alle rem-Werte beruhen darauf.
   Bricks setzt standardmäßig 62.5 % (1rem = 10px); das hier überschreibt es. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  overflow-wrap: break-word; /* sehr lange Wörter brechen statt überzulaufen (schmale Bildschirme, starker Zoom) */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  color: var(--c-navy);
  font-family: var(--ff-head);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Sehr schmale Bildschirme: lange Wörter wie „Regenerationsmedizin“ trennen statt überlaufen */
@media (max-width: 22.5em) {
  h1, h2, h3, h4 { hyphens: auto; }
}
p { text-wrap: pretty; }

a { color: var(--c-blue-600); text-underline-offset: 0.2em; }
a:hover { color: var(--c-navy); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-white); }

.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.section { padding-block: var(--space-xl); }
.section--soft { background: var(--c-surface); }

.section-head { max-width: 40rem; margin-bottom: var(--space-l); }

.flow > * + * { margin-top: 1em; }

.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
@media (min-width: 60em) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 4. Komponenten ----------------------------------------------------------- */
.eyebrow {
  margin-bottom: var(--space-xs);
  color: var(--c-blue-600);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.h2 { font-size: var(--fs-h2); }

.lead {
  color: var(--c-navy);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* Buttons */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* Smartphone: Buttons volle Breite – leichter zu treffen, gleich breit statt ungleich gestapelt */
@media (max-width: 30em) {
  .btn-group { flex-direction: column; }
  .btn-group > .btn { width: 100%; }
  .site-footer__about > .btn { justify-self: stretch; }
  .cta-band__inner > .btn-group { width: 100%; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;           /* ≥ 44px Klickfläche */
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: var(--c-navy); color: var(--c-white); }

.btn--navy { background: var(--c-navy); color: var(--c-white); }
.btn--navy:hover { background: var(--c-blue); color: var(--c-white); }

.btn--light {
  background: var(--c-white);
  border-color: var(--c-border);
  color: var(--c-navy);
}
.btn--light:hover { border-color: var(--c-navy); color: var(--c-navy); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  text-decoration-thickness: 1px;
}

/* Ganze Karte klickbar, Link bleibt der eine fokussierbare Punkt */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.stretched-link:focus-visible { outline: none; }
.stretched-link:focus-visible::after {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* Ärztekarte */
.card-doctor {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-white);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.card-doctor__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 20%;
  background: #e9edf2;
}
.card-doctor__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-m);
}
.card-doctor__title {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.card-doctor__name {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h4);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s var(--ease);
}
.card-doctor__role {
  margin-bottom: var(--space-m);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.card-doctor__link {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.card-doctor__link span[aria-hidden] {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}
/* Hover/Fokus: Foto bleibt ruhig – Karte hebt sich leicht, Name wird rosa unterstrichen (wie aktiver Menüpunkt) */
.card-doctor:hover,
.card-doctor:focus-within {
  border-color: var(--c-sky);
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}
.card-doctor:hover .card-doctor__name,
.card-doctor:focus-within .card-doctor__name { text-decoration-color: var(--c-rose); }
.card-doctor:hover .card-doctor__link span[aria-hidden],
.card-doctor:focus-within .card-doctor__link span[aria-hidden] { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .card-doctor:hover,
  .card-doctor:focus-within { transform: none; }
}

/* Leistungskarte */
.card-service {
  padding: var(--space-m) var(--space-m) calc(var(--space-m) + 0.25rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-white);
}
.card-service__icon {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  margin-bottom: var(--space-s);
  border-radius: 12px;
  background: var(--c-sky-100);
  color: var(--c-navy);
}
.card-service__icon svg {
  width: 1.75rem; height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-service__title {
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-h3);
}
.card-service p { color: var(--c-text); }
/* Kein Hover: Die Karten sind nicht verlinkt, ein Hover würde Klickbarkeit suggerieren */

/* 5. Sektionen ------------------------------------------------------------- */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-border);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}
.site-header__logo img { width: clamp(9.5rem, 6rem + 8vw, 12.75rem); } /* 152–204px, wie die bisherige Seite */

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav__link {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-s);
  color: var(--c-text);
  font-size: var(--fs-nav);
  font-weight: 500;
  text-decoration: none;
}
.main-nav__link:hover { background: var(--c-sky-100); color: var(--c-navy); }
.main-nav__link[aria-current] {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-rose);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}
.main-nav__cta { margin-left: 0.75rem; min-height: 2.875rem; padding-block: 0.6rem; font-size: var(--fs-nav); }

/* Untermenü „Unsere Ärzte“ */
.has-submenu { position: relative; }
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: none;
  font-family: var(--ff-body);
  line-height: inherit;
  cursor: pointer;
}
.submenu-toggle__chevron {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}
.submenu-toggle[aria-expanded="true"] .submenu-toggle__chevron { transform: rotate(180deg); }
.submenu-toggle.is-active {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-rose);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

.submenu { display: none; margin: 0; }
.submenu-toggle[aria-expanded="true"] + .submenu { display: grid; gap: 0.25rem; }

.nav-doctor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
  border-radius: var(--radius-s);
  color: var(--c-text);
  text-decoration: none;
}
.nav-doctor:hover { background: var(--c-sky-100); color: var(--c-text); }
.nav-doctor[aria-current="page"] { background: var(--c-sky-100); }
.nav-doctor__img {
  width: 4rem; height: 4rem;
  flex: none;
  border-radius: var(--radius-s);   /* 8px wie der Kontakt-Button */
  object-fit: cover;
  background: #e9edf2;
}
.nav-doctor__text { display: grid; line-height: 1.35; }
.nav-doctor__name { color: var(--c-navy); font-size: var(--fs-nav); font-weight: 700; }
.nav-doctor__role { color: var(--c-text-muted); font-size: var(--fs-sm); }

@media (min-width: 64em) {
  .submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    z-index: 60;
    width: 30rem;            /* breit genug, dass die Fachgebiete in einer Zeile stehen */
    padding: 0.5rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-white);
    box-shadow: var(--shadow-m);
    transform: translateX(-50%);
  }
  /* Hover-Brücke, damit das Menü beim Überfahren der Lücke nicht schließt */
  .submenu::before { content: ""; position: absolute; inset: -0.75rem 0 auto; height: 0.75rem; }
}
@media (max-width: 63.99em) {
  .submenu-toggle { width: 100%; justify-content: space-between; }
  .submenu-toggle[aria-expanded="true"] + .submenu { padding: 0.25rem 0 0.5rem 0.5rem; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-navy);
  font: 700 var(--fs-sm) / 1 var(--ff-body);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 63.99em) {
  :root { --header-h: 5rem; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    padding: var(--space-s) var(--gutter) var(--space-m);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-white);
    box-shadow: var(--shadow-m);
  }
  .main-nav.is-open { display: block; }
  /* Offenes Menü füllt den Bildschirm unter dem Header ganz aus (dvh: ohne die Browserleiste am Handy),
     scrollt bei Bedarf selbst; die Seite dahinter steht still */
  .main-nav {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:has(.main-nav.is-open) { overflow: hidden; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0.125rem; }
  .main-nav__link { padding: 0.85rem 0.75rem; font-size: var(--fs-base); }
  .main-nav__cta { width: 100%; min-height: 3.25rem; margin: var(--space-s) 0 0; font-size: var(--fs-base); }   /* über die ganze Breite, gut zu treffen */
}

/* Hero – ein Bild, per object-fit an jede Breite angepasst */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-sky-100);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 25%;
}

@media (max-width: 63.99em) {
  .hero__media { aspect-ratio: 4 / 3; max-height: 70vh; width: 100%; }
  .hero__inner { position: relative; margin-top: -3.5rem; padding-bottom: var(--space-l); }
  .hero__card { padding: var(--space-m); }
}
@media (max-width: 30em) {
  .hero__media { aspect-ratio: 1 / 1; }
  .hero__img { object-position: 74% 20%; }
}

@media (min-width: 64em) {
  .hero {
    display: grid;
    align-items: center;
    min-height: clamp(34rem, 72vh, 46rem);
    background: var(--c-white);
  }
  .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 80%;
  }
  /* Weicher Übergang links – statt ins Bild gerechnetem Verlauf */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--c-white) 0%, rgb(255 255 255 / 0.55) 10%, rgb(255 255 255 / 0) 26%);
  }
  .hero__img { object-position: 60% 30%; }
  .hero__inner { padding-block: var(--space-xl); }

  /* Leicht transparente Karte – nur über dem Foto, mit Fallback */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero .hero__card {
      background: rgb(255 255 255 / 0.84);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
      backdrop-filter: blur(14px) saturate(1.2);
      border: 1px solid rgb(255 255 255 / 0.7);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .hero .hero__card { background: var(--c-white); backdrop-filter: none; }
  }
}

.hero__card {
  max-width: 36rem;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-m);
}
.hero__title {
  margin-bottom: var(--space-l);
  font-size: var(--fs-h1);
  letter-spacing: -0.025em;
}

/* Intro */
.intro__grid {
  display: grid;
  gap: var(--space-m) var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (min-width: 60em) {
  .intro__grid { grid-template-columns: minmax(16rem, 1fr) minmax(0, var(--measure)); }
}
.intro__text { max-width: var(--measure); }

/* Kontakt */
.contact__grid {
  display: grid;
  align-items: center;
  gap: var(--space-l) var(--space-xl);
}
@media (min-width: 60em) {
  .contact__grid { grid-template-columns: 1fr 1.15fr; }
}

.contact-list {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-l);
}
.contact-list__row {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--c-border);
}
.contact-list__row:first-child { padding-top: 0; }
.contact-list__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.contact-list__label .icon { color: var(--c-blue); }
.contact-list__value {
  color: var(--c-navy);
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: 600;
}
.contact-list__value a { color: inherit; text-decoration: none; }
.contact-list__value a:hover { text-decoration: underline; }

.contact__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* Footer */
.site-footer {
  padding-top: var(--space-xl);
  background: var(--c-navy);
  color: rgb(255 255 255 / 0.85);   /* ≥ 7:1 auf Navy */
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--c-white); text-decoration-color: rgb(255 255 255 / 0.4); }
.site-footer a:hover { text-decoration-color: var(--c-rose); }
.site-footer :focus-visible { outline-color: var(--c-rose); }

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
}
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72em) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

.site-footer__about { display: grid; gap: var(--space-s); justify-items: start; max-width: 26rem; }
.site-footer__logo { width: clamp(8.5rem, 7rem + 3vw, 10rem); margin-bottom: var(--space-2xs); }
/* Praxisname statt Logo (wie auf der bisherigen Website); das Logo kann später wieder an diese Stelle */
.site-footer__name { margin: 0; color: var(--c-white); font-family: var(--ff-head); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.site-footer__heading {
  margin-bottom: var(--space-s);
  color: var(--c-sky);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer__list { display: grid; gap: 0.6rem; font-style: normal; }
.site-footer__list a { display: inline-block; padding-block: 0.15rem; }

.hours { display: grid; gap: 0.5rem; }
/* Festes Raster: Tag links, Zeit rechtsbündig – jede Zeile gleich aufgebaut */
.hours__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.hours dt { color: var(--c-white); font-weight: 500; }
.hours dd { text-align: right; font-variant-numeric: tabular-nums; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }

/* „Cookies“ im Footer: Button wie ein Link. Die Klasse borlabs-cookie-open-dialog-preferences
   lässt Borlabs Cookie beim Klick die Cookie-Auswahl öffnen. Ohne Borlabs blendet das Child-Theme den Eintrag aus. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.link-button:hover { text-decoration-color: var(--c-rose); }

/* Unterseiten ------------------------------------------------------------- */

@media (min-width: 48em) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Abstand oben für Seitenköpfe der Unterseiten (keine Brotkrumen – flache Seitenstruktur) */
:root { --space-hero-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }

/* Profil-Kopf: Karte mit Text links, Porträt rechts */
.profile-hero {
  padding-block: var(--space-hero-top) var(--space-xl);
  background: var(--c-surface);
}
.profile-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-m);
}
@media (min-width: 60em) {
  .profile-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } /* Text 40 %, Foto 60 % */
}
.profile-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
/* Termin- und Telefon-Button untereinander, gleich breit (wie auf dem Smartphone) */
.profile-card .btn-group { display: grid; max-width: 20rem; }
.profile-card__media { order: -1; background: #e9edf2; }
@media (min-width: 60em) {
  .profile-card__media { order: 0; }
}
.profile-card__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 25%;
}
.profile-hero__prefix {
  color: var(--c-navy);
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: 600;
}
.profile-hero__name {
  margin-bottom: var(--space-s);
  font-size: var(--fs-h1-page);
  letter-spacing: -0.025em;
}
.profile-hero__role {
  max-width: 32rem;
  margin-bottom: var(--space-l);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Vita + Seitenspalte */
.profile-body {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 60em) {
  .profile-body { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); }
}
.profile-body__main .h2 { margin-bottom: var(--space-l); }
.profile-body__aside { display: grid; gap: var(--space-m); }
.profile-box > p + p { margin-top: var(--space-s); }

/* Zeitleiste */
.timeline { margin: 0; max-width: var(--measure); }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-m);
  padding-bottom: var(--space-m);
}
/* Linie + Punkt */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: -0.55rem;
  left: calc(4rem + var(--space-m) / 2);
  width: 2px;
  background: var(--c-border);
}
.timeline__item:last-child::before { display: none; }
.timeline__item::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: calc(4rem + var(--space-m) / 2 - 5px);
  width: 12px;
  height: 12px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-rose);
  box-shadow: 0 0 0 1px var(--c-rose);
}
.timeline__year {
  color: var(--c-blue-600);
  font-family: var(--ff-head);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.timeline__body { padding-left: var(--space-s); }
.timeline__title {
  color: var(--c-navy);
  font-weight: 700;
  line-height: 1.5;
}
.timeline__meta {
  margin-top: 0.15rem;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Infobox in der Seitenspalte */
.profile-box {
  padding: var(--space-m);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-white);
}
.profile-box__title {
  margin-bottom: var(--space-s);
  font-size: var(--fs-h3);
}

.checklist { display: grid; gap: 0.65rem; margin: 0; }
.checklist li { display: flex; gap: 0.65rem; line-height: 1.5; }
.checklist .icon { margin-top: 0.15em; color: var(--c-blue); stroke-width: 2.2; }

.members { display: grid; gap: 0.6rem; margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.members li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.5rem; }
.members__abbr { color: var(--c-navy); font-weight: 700; }

/* Seitenkopf für Inhaltsseiten (Karriere, Impressum …) */
.page-hero {
  padding-block: var(--space-hero-top) var(--space-xl);
  background: var(--c-surface);
}
.page-hero__text { max-width: 46rem; }
.page-hero__text .lead { margin-bottom: var(--space-l); }
.page-hero__title {
  margin-bottom: var(--space-m);
  font-size: var(--fs-h1-page);
  letter-spacing: -0.025em;
}
.page-hero__media { margin-top: var(--space-xl); }
.page-hero__media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-l);
}
@media (max-width: 47.99em) {
  .page-hero__media img { aspect-ratio: 4 / 3; }
}

/* Seitenkopf mit Bild daneben (Karriere): Desktop Text | Bild, mobil Bild oben */
.page-hero__split { display: grid; gap: var(--space-l); align-items: center; }
.page-hero__media--side { margin-top: 0; order: -1; }
.page-hero__media--side img { aspect-ratio: 3 / 2; object-position: 50% 25%; }
@media (min-width: 60em) {
  .page-hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-xl); }
  .page-hero__media--side { order: 0; }
  .page-hero__media--side img { aspect-ratio: 4 / 3; }
}

/* Bild über die volle Breite direkt unter dem Header (Leistungen, Karriere) – auf allen Seiten gleich hoch:
   ein Drittel der Fensterbreite (1440px → 475px), mindestens 240px, höchstens 640px. */
.page-banner { margin: 0; background: var(--c-surface); }
.page-banner img {
  width: 100%;
  height: clamp(15rem, 33vw, 40rem);
  object-fit: cover;
  object-position: 45% 35%;
}
.page-banner + .page-hero .lead { margin-bottom: 0; }
/* Gruppenfoto (Karriere): Ausschnitt so, dass alle sieben Personen zu sehen sind */
.page-banner--team img { object-position: 57% 22%; }
/* Bildcollage (Hertha BSC): immer ganz zeigen, nicht beschneiden */
.page-banner--collage img { height: auto; aspect-ratio: 1455 / 423; }

.btn--block { width: 100%; }

/* Stellenanzeige */
.job { display: grid; gap: var(--space-xl); }
.job__title {
  margin-bottom: var(--space-m);
  font-size: var(--fs-h3);
}

/* Faktenliste (Auf einen Blick, Impressum) */
.facts { display: grid; gap: var(--space-s); margin: 0 0 var(--space-m); }
.facts > div { display: grid; gap: 0.1rem; }
.facts dt {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.facts dd { color: var(--c-navy); font-weight: 500; line-height: 1.5; }
.facts__note { margin-bottom: var(--space-m); font-size: var(--fs-sm); }
.facts__mail { margin-top: var(--space-xs); text-align: center; font-size: var(--fs-sm); }

@media (min-width: 36em) {
  .facts--inline > div { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-s); }
  .facts--inline dt { font-size: var(--fs-base); }
}

/* Sportmedizin / Hertha BSC (Profil Dr. Schleicher) */
.sport { scroll-margin-top: var(--header-h); }
.sport__grid {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}
@media (min-width: 60em) {
  /* Einleitung über beide Spalten, darunter Artikel links und Trikot rechts – oben bündig.
     Auf dem Smartphone: Einleitung, Bild, Artikel. */
  .sport__grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.75fr); }
  .sport__media { order: 2; justify-self: end; width: 100%; max-width: 24rem; position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}
.sport__media img {
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-l);
}
@media (max-width: 59.99em) {
  .sport__media img { max-width: none; aspect-ratio: 3 / 2; object-position: 50% 40%; }
}
.sport__intro { margin-bottom: var(--space-l); }
.sport__intro .h2 { margin-bottom: var(--space-s); }
.sport__intro .lead { max-width: var(--measure); }

.press-list { display: grid; gap: var(--space-m); margin: 0; }
.press-card {
  display: grid;
  gap: var(--space-xs);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-white);
}
.press-card p { max-width: var(--measure); }
.press-card__kicker {
  color: var(--c-blue-600);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.press-card__title { font-size: var(--fs-h3); }
.press-card .text-link { margin-top: var(--space-2xs); }

.timeline__title a { color: inherit; text-decoration-color: var(--c-rose); text-decoration-thickness: 2px; }
.timeline__title a:hover { color: var(--c-blue-600); }

/* Kontaktseite */
.contact-cards { align-items: start; }
/* Sprechzeiten-Karte etwas breiter, damit jede Zeile einzeilig bleibt */
@media (min-width: 60em) {
  .contact-cards { grid-template-columns: 1fr 1fr 1.3fr; }
}
.contact-cards .profile-box { height: 100%; }
.contact-list--compact { gap: 0; margin-block: 0 var(--space-m); }
.contact-list--compact .contact-list__row:first-child { padding-top: var(--space-2xs); }
.contact-list--compact .contact-list__row:last-child { border-bottom: 0; }
.contact-list--compact .contact-list__value { font-size: var(--fs-base); line-height: 1.5; }
.contact-list__value--text { font-family: var(--ff-body); font-weight: 500; }
/* Link darf umbrechen, Symbol bleibt direkt am Text */
.contact-cards .text-link { display: inline; }
.contact-cards .text-link .icon { display: inline-block; margin-left: 0.25em; vertical-align: -0.2em; }
.contact-list__value a { overflow-wrap: anywhere; }

/* Sprechzeiten auf hellem Grund */
.hours--light .hours__row { border-bottom-color: var(--c-border); }
.hours--light .hours__row:last-child { border-bottom: 0; }
.hours--light dt { color: var(--c-navy); font-weight: 700; }
.hours--light dd { color: var(--c-text); }

/* Kontakt-Button im Header: aktive Seite */
.main-nav__cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--c-sky); }

/* Terminleiste */
/* Terminleiste als hellblaue Box auf weißem Grund – hebt sich auch nach hellen Abschnitten ab */
.cta-band { background: var(--c-white); }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-l);
  background: var(--c-sky-100);
}
.cta-band__title { margin-bottom: 0.25rem; font-size: var(--fs-h3); }

/* Kompakte Ärztekarte (Querverweis auf Arztseiten) */
/* Abschluss-Abschnitte vor dem Footer: mehr Luft als vorher, aber kleiner als Hauptabschnitte */
.section--compact { padding-block: clamp(3rem, 2.25rem + 2.5vw, 4.5rem); }
.section-head--compact { margin-bottom: var(--space-m); }
.section-head__title { font-size: var(--fs-h3); }

.card-doctor--compact {
  flex-direction: row;
  align-items: center;
}
.card-doctor--compact .card-doctor__img {
  width: clamp(5.5rem, 4rem + 5vw, 7.5rem);
  aspect-ratio: 1;
  align-self: stretch;
  object-position: 50% 15%;
}
.card-doctor--compact .card-doctor__body { padding: var(--space-s) var(--space-m); }
.card-doctor--compact .card-doctor__name { margin-bottom: 0.15rem; font-size: var(--fs-base); }
.card-doctor--compact .card-doctor__role {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: var(--space-2xs);
  color: var(--c-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Handy: Fachgebiet weglassen (steht im Profil), dafür Bild breiter – fast quadratisch statt schmaler Streifen */
@media (max-width: 39.99em) {
  .card-doctor--compact .card-doctor__img { width: 8.5rem; }
  .card-doctor--compact .card-doctor__role { display: none; }
}

/* Fließtext-Seiten (Impressum, Datenschutz) */
.prose { max-width: var(--measure); }
/* Leistungen, Impressum, Datenschutz: unter dem Bild weiß, Überschrift und Inhalt in einer schmalen Spalte in der Mitte
   (Spalte mittig, Text linksbündig) */
.narrow-page { padding-top: var(--space-hero-top); }
.narrow-page__column { max-width: 46rem; }      /* 736px, etwas breiter als die normale Textbreite */
.narrow-page .prose { max-width: none; }
.narrow-page .page-hero__title { margin-bottom: var(--space-l); }

/* Leistungen (erster Schritt): eine Kachel mit allen Leistungen, ohne Zwischenüberschriften */
.service-panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-white);
}
.service-panel__lead { margin-bottom: var(--space-l); }

.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: var(--space-l);
  font-size: var(--fs-h3);
}
.prose h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: var(--space-xs); }
.prose ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding-left: 1.25rem; }
.prose li::marker { color: var(--c-blue); }
.prose address { font-style: normal; }
.prose h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h3 {
  margin-top: var(--space-m);
  font-size: var(--fs-base);
}
.prose h3 + * { margin-top: 0.35rem; }
.prose__stand { margin-top: var(--space-l); color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Inhaltsverzeichnis */
.toc {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}
.toc__title { margin-bottom: var(--space-xs); color: var(--c-navy); font-weight: 700; }
.toc ol { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.5rem; list-style: lower-alpha; }
.toc li::marker { color: var(--c-blue); font-weight: 700; }
.prose a { overflow-wrap: anywhere; }
/* Symbol „öffnet in neuem Fenster“ hinter Links im Fließtext */
.prose a .icon { display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; vertical-align: -0.125em; }

/* 404-Seite */
.error-page { padding-block: var(--space-xl); }
.error-page .page-hero__title { max-width: 18ch; }
.error-page .lead { max-width: var(--measure); }
.section-head__title + .link-grid { margin-top: var(--space-m); }

/* Linkkarten (404, Querverweise) */
.link-grid {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.link-card {
  position: relative;
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: var(--space-m) calc(var(--space-m) + 1.5rem) var(--space-m) var(--space-m);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-white);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.link-card__title { color: var(--c-navy); font-family: var(--ff-head); font-size: var(--fs-h4); font-weight: 600; }
.link-card__text { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.link-card__arrow {
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  color: var(--c-blue);
  font-weight: 700;
  transition: transform 0.2s var(--ease);
}
.link-card:hover { border-color: var(--c-sky); box-shadow: var(--shadow-s); color: var(--c-text); }
.link-card:hover .link-card__arrow { transform: translateX(4px); }

/* Karriere-Übersicht und Stellenseiten: unter dem Teamfoto ganz weiß, Titel über die volle Breite,
   darunter Inhalt links und Kasten rechts (Einleitung bzw. „Auf einen Blick“), oben bündig.
   „Offene Stellen“ ist nur für Screenreader sichtbar (.visually-hidden).
   Die Einleitung beginnt auf Höhe der ersten Stelle; auf dem Smartphone steht sie über den Stellen. */
.karriere { padding-top: var(--space-hero-top); }
.karriere__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-areas: "head" "aside" "main";
}
.karriere__head { grid-area: head; margin-bottom: var(--space-m); }
.karriere__head .page-hero__title { margin-bottom: 0; }
/* Smartphone: unter der Überschrift nur der Rasterabstand (40 px statt 64 px) */
@media (max-width: 59.99em) { .karriere__head { margin-bottom: 0; } }
.karriere__main { grid-area: main; }
/* Stellenseiten: „Auf einen Blick“ auf dem Smartphone nach dem Stellentext */
.karriere__grid--facts-last { grid-template-areas: "head" "main" "aside"; }
.karriere__aside { grid-area: aside; }
@media (min-width: 60em) {
  .karriere__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr);
    grid-template-areas: "head head" "main aside";
    column-gap: var(--space-xl);
  }
  .karriere__aside { align-self: start; }
}

/* Stellenliste: ohne Rahmen, jede Stelle beginnt mit einer Linie */
.job-list { display: grid; margin: 0; }
.job-list > .job-card {
  padding: var(--space-l) 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.job-list > .job-card { border-top: 1px solid var(--c-border); }
.job-list > .job-card:last-child { padding-bottom: 0; }
.job-list > .job-card:hover,
.job-list > .job-card:focus-within { box-shadow: none; transform: none; }

/* Stellenkarte (Karriere-Übersicht): ganze Karte klickbar, Hover wie die Ärztekarte */
.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.job-card__title {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h3);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s var(--ease);
}
.job-card__meta {
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font-weight: 600;
}
.job-card__text { margin-bottom: var(--space-m); }
.job-card__link {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.job-card__link span[aria-hidden] {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}
.job-card:hover,
.job-card:focus-within {
  border-color: var(--c-sky);
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}
.job-card:hover .job-card__title,
.job-card:focus-within .job-card__title { text-decoration-color: var(--c-rose); }
.job-card:hover .job-card__link span[aria-hidden],
.job-card:focus-within .job-card__link span[aria-hidden] { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .job-card:hover,
  .job-card:focus-within { transform: none; }
}

/* 6. Animationen ----------------------------------------------------------- */
/* Dezent: nur Deckkraft und wenige Pixel Bewegung, max. 0,6 s.
   Bewegt wird über "translate", damit vorhandene "transform"-Werte (z. B. Zentrierung) unberührt bleiben.
   Inhalte sind ohne Skript immer sichtbar; bei „Bewegung reduzieren“ entfällt alles (siehe unten). */
@keyframes oe-drop-in {
  from { opacity: 0; translate: 0 -6px; }
}
@keyframes oe-rise-in {
  from { opacity: 0; translate: 0 14px; }
}

/* Dropdown „Unsere Ärzte“ und Mobilmenü öffnen weich */
.submenu-toggle[aria-expanded="true"] + .submenu { animation: oe-drop-in 0.18s var(--ease); }
.main-nav.is-open { animation: oe-drop-in 0.2s var(--ease); }

/* Hero-Karte der Startseite: einmaliger Auftritt beim Laden (reines CSS, kein Skript nötig) */
.hero__card { animation: oe-rise-in 0.9s var(--ease) 0.15s both; }

/* Einblenden beim Scrollen (.reveal): nur wenn das Skript .js-reveal an <html> setzt.
   Als Animation statt Transition, damit Hover-Übergänge der Karten unberührt bleiben. */
.js-reveal .reveal:not(.is-visible) { opacity: 0; }
.js-reveal .reveal.is-visible { animation: oe-rise-in 0.7s var(--ease) both; }
.js-reveal .reveal.is-instant { animation: none; }

/* Kacheln einer Reihe nacheinander (je 100 ms) – nur bei mehrspaltigem Raster */
@media (min-width: 60em) {
  .js-reveal .card-grid--3 > .reveal.is-visible:nth-child(3n+2) { animation-delay: 0.1s; }
  .js-reveal .card-grid--3 > .reveal.is-visible:nth-child(3n+3) { animation-delay: 0.2s; }
  /* Ärztekarten: deutlicherer Versatz, damit sie sichtbar nacheinander kommen */
  .js-reveal .card-grid--3 > .card-doctor.reveal.is-visible { animation-duration: 0.8s; }
  .js-reveal .card-grid--3 > .card-doctor.reveal.is-visible:nth-child(3n+2) { animation-delay: 0.25s; }
  .js-reveal .card-grid--3 > .card-doctor.reveal.is-visible:nth-child(3n+3) { animation-delay: 0.5s; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .submenu-toggle[aria-expanded="true"] + .submenu,
  .main-nav.is-open,
  .hero__card { animation: none; }
  .js-reveal .reveal { opacity: 1; animation: none; }
}


/* ==========================================================================
   Anpassungen für Bricks: Bausteine, die Bricks um den Inhalt legt
   ========================================================================== */
.brx-body { display: block; }                       /* Bricks: Flex-Spalte um Header, Inhalt, Footer */
#brx-content, #brx-footer { display: block; }
.main-nav > .brxe-shortcode { display: contents; }  /* Menü aus Design → Menüs ohne zusätzliche Box */