/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}


/* =====================================================================
   Physiotherapie Riedern — Stylesheet
   Farbpalette abgeleitet aus den Fotos der Praxis (Grünton H≈79°,
   der Wandfarbe der Praxis und dem Grün der Aussenaufnahmen entnommen).
   ===================================================================== */

/* ---------- 1. Design Tokens ---------------------------------------- */

:root {
  /* Grün — aus den Bildern gemessen (Praxiswand rgb(95,121,25), H79 S67) */
  --g-50:  #f6f9f0;
  --g-100: #ebf1dd;
  --g-200: #d6e3bb;
  --g-300: #bbcf97;
  --g-400: #a0ba71;
  --g-500: #8db94a;
  --g-600: #79a339;
  --g-700: #638932;
  --g-800: #53732c;
  --g-900: #465e27;
  --g-950: #394d22;

  /* Warme Neutraltöne — aus den Hauttönen und Holzflächen der Fotos */
  --s-50:  #faf8f3;
  --s-100: #f2eee5;
  --s-200: #e6e0d3;
  --s-300: #d3ccbb;

  --ink:   #22251e;
  --ink-2: #4a4e42;
  --ink-3: #6e7365;

  --white: #ffffff;

  /* Typografie */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3:      clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --fs-h2:      clamp(1.6rem, 1.35rem + 1.25vw, 2.4rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-hero:    clamp(2rem, 1.3rem + 2.6vw, 3.4rem);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --header-h: 84px;

  --shadow-sm: 0 1px 2px rgba(34, 37, 30, .06), 0 2px 8px rgba(34, 37, 30, .05);
  --shadow-md: 0 4px 12px rgba(34, 37, 30, .08), 0 16px 40px rgba(34, 37, 30, .09);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
}

/* ---------- 2. Reset & Basis ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  color: var(--ink-2);
  background: var(--s-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.35; }

/* H1 im Inhalt (wenn das Hero keinen Titel trägt) — semantisch H1,
   optisch auf der Ebene der übrigen Abschnittsüberschriften */
.wie-h2 { font-size: var(--fs-h2); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--g-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--g-900); }

ul { margin: 0; padding: 0; }

strong { color: var(--ink); font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--s-200);
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--g-700);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--g-200); color: var(--g-950); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--g-800);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout-Bausteine ------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }
.container--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--sand { background: var(--s-100); }
.section--white { background: var(--white); }
.section--green { background: var(--g-800); color: var(--g-100); }
.section--green h2, .section--green h3 { color: #fff; }

.eyebrow {
  display: block;
  margin: 0 0 .9rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-800);
}
.section--green .eyebrow,
.cta-band .eyebrow { color: var(--g-100); }

.section-head { max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-lead); margin-top: 1rem; color: var(--ink-2); }
.section--green .section-head p { color: var(--g-100); }

.lead { font-size: var(--fs-lead); color: var(--ink-2); }

.rule {
  width: 64px;
  height: 3px;
  background: var(--g-600);
  margin: 1.5rem 0 0;
}
.section-head--center .rule { margin-inline: auto; }

/* ---------- 4. Buttons ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1em; height: 1em; flex: none; fill: currentColor; }

.btn--primary { background: var(--g-800); border-color: var(--g-800); color: #fff; }
.btn--primary:hover { background: var(--g-900); border-color: var(--g-900); color: #fff; }

.btn--outline { border-color: var(--g-800); color: var(--g-800); background: transparent; }
.btn--outline:hover { background: var(--g-800); color: #fff; }

.btn--light { background: #fff; border-color: #fff; color: var(--g-800); }
.btn--light:hover { background: var(--g-100); border-color: var(--g-100); color: var(--g-900); }

.btn--ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--g-800);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 1.25rem; height: 1px;
  background: currentColor;
  transition: width .25s var(--ease);
}
.link-arrow:hover::after { width: 2rem; }

/* ---------- 5. Header ------------------------------------------------ */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              height .35s var(--ease);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,26,12,.55), rgba(20,26,12,0));
  opacity: 1;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.header.is-solid { background: rgba(250,248,243,.96); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.header.is-solid::before { opacity: 0; }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.logo { display: block; flex: none; line-height: 0; }
.logo img { width: clamp(168px, 18vw, 232px); height: auto; transition: opacity .3s var(--ease); }
.logo .logo--dark { display: none; }
.header.is-solid .logo .logo--light { display: none; }
.header.is-solid .logo .logo--dark { display: block; }

.nav { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.1rem); }

.nav__link {
  position: relative;
  padding: .5rem .2rem;
  font-size: .9375rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.header.is-solid .nav__link { color: var(--ink); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current]::after { transform: scaleX(1); }
.header.is-solid .nav__link:hover,
.header.is-solid .nav__link[aria-current] { color: var(--g-800); }

/* Dropdown — der Titel bleibt ein Link, das Chevron öffnet das Untermenü */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .1rem;
}
.nav__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.header.is-solid .nav__chev { color: var(--ink); }
.header.is-solid .nav__item:hover .nav__chev { color: var(--g-800); }
.nav__chev .chev {
  width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .25s var(--ease);
}
.nav__item.is-open .nav__chev .chev { transform: rotate(-135deg) translateY(-1px); }

.nav__panel {
  position: absolute;
  top: calc(100% + .65rem);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 300px;
  padding: .6rem;
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-top: 3px solid var(--g-700);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item.is-open .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__panel a {
  display: block;
  padding: .6rem .9rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__panel a:hover, .nav__panel a[aria-current] { background: var(--g-50); color: var(--g-800); }

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.35rem;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s var(--ease);
}
.header__cta:hover { background: #fff; border-color: #fff; color: var(--g-800); }
.header__cta svg { width: .9em; height: .9em; fill: currentColor; }
.header.is-solid .header__cta { background: var(--g-800); border-color: var(--g-800); color: #fff; }
.header.is-solid .header__cta:hover { background: var(--g-900); border-color: var(--g-900); }

.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span {
  position: relative;
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  transition: background-color .2s var(--ease), transform .3s var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px; height: 2px;
  background: inherit;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.header.is-solid .burger span { background: var(--ink); }
body.menu-open .burger span { background: transparent !important; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); background: var(--ink); }
body.menu-open .burger span::after { top: 0; transform: rotate(-45deg); background: var(--ink); }

/* Mobile-Menü */
.mobilenav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--s-50);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  overscroll-behavior: contain;
}
body.menu-open .mobilenav { opacity: 1; visibility: visible; transform: none; }
.mobilenav a {
  display: block;
  padding: .85rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--s-200);
}
.mobilenav a[aria-current] { color: var(--g-800); font-weight: 600; }
.mobilenav .sub a {
  padding: .6rem 0 .6rem 1rem;
  font-size: .9375rem;
  color: var(--ink-2);
  border-bottom: 0;
}
.mobilenav .sub { padding: .3rem 0 .9rem; border-bottom: 1px solid var(--s-200); }
.mobilenav .sublabel {
  padding: .85rem 0 .35rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-800);
}
/* `.mobilenav a` ist spezifischer als `.btn` und hat dem Knopf sonst
   display:block und padding-inline:0 aufgezwungen — Symbol und Text standen
   dadurch untereinander am linken Rand. Deshalb hier zurückgeholt. */
.mobilenav .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.75rem;
  padding: .95rem 1.75rem;
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* ---------- 6. Hero -------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Gleiche Höhe auf allen Seiten — dadurch ist auf jeder Seite derselbe
     Anteil des Fotos sichtbar, die Bilder wirken nicht angeschnitten. */
  min-height: 540px;
  height: 66vh;
  max-height: 780px;
  /* oben Platz für die feste Kopfzeile, unten ein normaler Rand —
     der Titelblock zentriert sich darin, die Knöpfe bleiben unten */
  padding-top: var(--header-h);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  background: var(--g-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(21,28,12,.62) 0%, rgba(21,28,12,.20) 38%, rgba(21,28,12,.05) 62%, rgba(21,28,12,.32) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}
.hero__inner > .container {
  display: flex;
  flex-direction: column;
}
/* Titelblock mittig, Knöpfe bleiben am unteren Bildrand */
.hero__lead { margin-block: auto; }

/* Auf den Unterseiten sitzt der Textblock etwas unterhalb der Bildmitte:
   Der Abstand zur Kopfzeile wird grösser, und der Satz liegt auf den
   Hero-Fotos meist über ruhigerem Hintergrund. Die Startseite bleibt
   mittig — dort steht unter dem Titel noch die Knopfreihe. */
.hero--page .hero__lead { transform: translateY(clamp(1.25rem, 3.5vh, 3rem)); }

.hero__eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-200);
}

.hero__title {
  max-width: 20ch;
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(15, 20, 8, .35);
}
.hero__title strong { color: #fff; font-weight: 600; }

.hero--page .hero__title { font-size: var(--fs-h1); font-weight: 400; max-width: 24ch; }

/* Titel auf der Ebene der übrigen Hero-Zeilen — dort, wo im Bild
   sonst nur noch die Vorzeile und ein Satz stehen */
.hero--page .hero__title--klein {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 52ch;
}

.hero__text {
  max-width: 52ch;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 16px rgba(15, 20, 8, .4);
}

.hero .btn-row { margin-top: 2.25rem; }

/* Breadcrumb */
.crumbs {
  background: var(--white);
  border-bottom: 1px solid var(--s-200);
  font-size: var(--fs-small);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding-block: .9rem;
}
.crumbs li { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; color: var(--s-300); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--g-800); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ---------- 7. Intro / Portrait ------------------------------------- */

.section--intro {
  background: var(--white);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

/* Der erste Abschnitt schliesst direkt an das Hero-Bild an — keine
   grosse leere Fläche zwischen Bild und erstem Text. */
.hero + .section,
.hero + .factsband,
.hero + .crumbs + .section,
.hero + .crumbs + .factsband {
  padding-top: clamp(1.75rem, 3.5vw, 3rem);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.intro__media { position: relative; }
/* Warmer Akzentblock hinter dem Porträt — hebt das Bild von der
   weissen Fläche ab, ohne mit dem Grün im Foto zu konkurrieren. */
.intro__media::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(.75rem, 1.6vw, 1.5rem));
  top: calc(-1 * clamp(.75rem, 1.6vw, 1.5rem));
  width: 58%;
  height: 52%;
  background: var(--s-200);
  z-index: 0;
}
/* Bild immer über dem Akzentblock — sonst deckt das absolut
   positionierte ::before das <picture> zu. */
.intro__frame,
.intro__media > picture,
.intro__media > img { position: relative; z-index: 1; }
.intro__frame { box-shadow: var(--shadow-md); }
.intro__media img { width: 100%; display: block; }

/* Das Portrait behält sein volles Format — es wird nicht auf die
   Spaltenhöhe gestreckt, sonst schneidet es seitlich stark an.
   Damit neben langem Text keine tote Fläche entsteht, läuft es beim
   Scrollen mit. */
@media (min-width: 861px) {
  .intro { align-items: start; }
  .intro__media {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .intro__frame { overflow: hidden; }
  .intro__frame picture { display: block; width: 100%; }
  .intro__frame img { width: 100%; height: auto; }
}

.intro__body { margin-top: 2rem; }
.intro__salut {
  font-size: var(--fs-lead);
  color: var(--ink);
}
.intro__note {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--g-50);
  border-left: 3px solid var(--g-600);
  font-size: var(--fs-body);
}
.intro__note strong { color: var(--g-800); }
.intro__media figcaption {
  margin-top: .9rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.signature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--s-200);
}
.signature strong { display: block; font-size: 1.0625rem; }
.signature span { font-size: var(--fs-small); color: var(--ink-3); }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- 8. Fakten-Band ------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--s-200);
  border-block: 1px solid var(--s-200);
}

/* Fakten-Band als eigener Block unter dem Vorstellungstext. */
.factsband {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.facts--card {
  border: 1px solid var(--s-200);
  box-shadow: 0 18px 44px rgba(21, 28, 12, .13);
}
.fact {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--white);
}
.fact__icon {
  width: 30px; height: 30px;
  margin-bottom: 1rem;
  fill: none;
  stroke: var(--g-700);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fact h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.fact p { font-size: .9375rem; line-height: 1.62; color: var(--ink-2); }

/* ---------- 9. Therapie-Karten -------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--s-200); }
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}
.card__body h3 { font-size: var(--fs-h4); }
.card__body p {
  margin: .7rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.card__body .link-arrow { margin-top: 1.35rem; }

/* ganze Karte klickbar, Fokus bleibt am Link */
.card__link::after { content: ""; position: absolute; inset: 0; }

/* Kompakte Listenvariante (Angebot) */
.list-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--s-200);
  border: 1px solid var(--s-200);
}
.list-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  background: var(--white);
  transition: background-color .25s var(--ease);
}
.list-card:hover { background: var(--g-50); }
.list-card img { width: 128px; height: 96px; object-fit: cover; }
.list-card h3 { font-size: 1.0625rem; }
.list-card p { margin: .4rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.list-card a::after { content: ""; position: absolute; inset: 0; }
.list-card a { text-decoration: none; color: inherit; }

@media (max-width: 480px) {
  .list-card { grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; }
  .list-card img { width: 88px; height: 76px; }
}

/* ---------- 10. Therapie-Detailseite --------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; gap: 2.5rem; } }

.detail__body h2 { margin-bottom: 1.25rem; }
.detail__body .lead + h2 { margin-top: 2.5rem; }

.panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border-top: 3px solid var(--g-700);
  box-shadow: var(--shadow-sm);
}
.panel h2, .panel h3 { font-size: var(--fs-h3); margin-bottom: 1.25rem; }

.ticks { list-style: none; }
.ticks li {
  position: relative;
  padding: .45rem 0 .45rem 1.9rem;
  font-size: .9375rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--s-100);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: .1rem; top: 1.05em;
  width: .85rem; height: .45rem;
  border-left: 2px solid var(--g-600);
  border-bottom: 2px solid var(--g-600);
  transform: rotate(-45deg) translateY(-.1rem);
}

/* Fortbildungsliste: zwei Spalten erst, wenn genug Platz da ist. */
.ticks--cols li { break-inside: avoid; }
@media (min-width: 720px) {
  .ticks--cols { columns: 2; column-gap: 3rem; }
}

.dashlist { list-style: none; }
.dashlist li {
  position: relative;
  padding: .3rem 0 .3rem 1.35rem;
  font-size: .9375rem;
  line-height: 1.6;
}
.dashlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.02em;
  width: .7rem; height: 2px;
  background: var(--g-500);
}

.backlink { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.5rem; border-top: 1px solid var(--s-200); }

/* Indikationen über die volle Breite, mehrspaltig — so bleibt neben
   dem Erklärungstext keine leere Spalte stehen. */
.indikationen {
  list-style: none;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.indikationen li {
  position: relative;
  padding: .7rem 0 .7rem 1.6rem;
  font-size: .9375rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--s-100);
}
.indikationen li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.32em;
  width: .7rem; height: 2px;
  background: var(--g-500);
}

/* Kompakte Terminkarte neben dem Erklärungstext */
.termin {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--white);
  border-top: 3px solid var(--g-700);
  box-shadow: var(--shadow-sm);
}
.termin h2 { font-size: var(--fs-h4); margin-bottom: .75rem; }
.termin p { font-size: .9375rem; line-height: 1.6; margin-bottom: 1.5rem; }
.termin .btn { width: 100%; justify-content: center; }
.termin__meta {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--s-200);
  font-size: .8125rem;
}
.termin__meta dt {
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-size: .6875rem;
}
.termin__meta dd { margin: .2rem 0 .9rem; color: var(--ink-2); line-height: 1.5; }
.termin__meta dd:last-child { margin-bottom: 0; }

/* Info-Karten nebeneinander statt in einer langen rechten Spalte */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}

/* ---------- 11. Weitere Therapien (Related) -------------------------- */

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.related a {
  position: relative;
  display: block;
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border-left: 3px solid var(--g-600);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related strong { display: block; font-size: 1rem; color: var(--ink); }
.related span { display: block; margin-top: .35rem; font-size: .875rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- 12. Über mich — Zeitstrahl ------------------------------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 0 1rem 0;
  border-bottom: 1px solid var(--s-200);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .year {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--g-800);
  letter-spacing: .01em;
}
.timeline .what { font-size: .9375rem; line-height: 1.6; }

@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: .25rem; }
}

/* Beruflicher Werdegang neben dem Portrait.
   Feine Haarlinie, die oben und unten ausblendet, dazu kleine offene
   Marken je Station — die letzte, aktuelle Station ist ausgefüllt. */
.timeline--career {
  position: relative;
  margin-top: 2rem;
}
/* Verbindungslinie je Zeile — so endet sie exakt auf der ersten
   und der letzten Marke, statt darüber hinauszulaufen. */
.timeline--career li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--s-300);
}
.timeline--career li:first-child::after { top: calc(1.5rem + 3px); }
.timeline--career li:last-child::after { bottom: calc(100% - 1.5rem - 4px); }

.timeline--career li {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1.5rem;
  padding: .95rem 0;
  padding-left: 1.9rem;
  border-bottom-color: var(--s-100);
}
.timeline--career li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 1.5rem;
  width: 7px;
  height: 7px;
  background: var(--white);
  border: 1.5px solid var(--s-300);
}
.timeline--career .year {
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  color: var(--g-800);
}
.timeline--career .what { color: var(--ink-2); }

/* Aktuelle Station hervorheben */
.timeline--career li:last-child::before {
  background: var(--g-600);
  border-color: var(--g-600);
}
.timeline--career li:last-child .year { color: var(--g-900); }
.timeline--career li:last-child .what { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .timeline--career li {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding-left: 1.6rem;
  }
}

.intro__closing {
  margin-top: 2rem;
  font-size: var(--fs-lead);
  color: var(--ink);
}

.sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .sticky { position: static; } }

/* ---------- 13. Kontakt ---------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; }
.contact-list li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--s-200);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg {
  width: 22px; height: 22px;
  margin-top: .25rem;
  fill: none; stroke: var(--g-700); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact-list dt, .contact-list .label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.contact-list .value { font-size: 1.0625rem; color: var(--ink); line-height: 1.55; }
.contact-list .value a { color: var(--ink); text-decoration: none; }
.contact-list .value a:hover { color: var(--g-800); text-decoration: underline; }

.map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
  background: var(--s-200);
  filter: saturate(.85);
}

.map__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: .9rem;
  font-size: .875rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.gallery picture { display: block; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.notice {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--g-50);
  border-left: 3px solid var(--g-600);
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- 14. CTA-Band --------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--g-800);
  color: var(--g-100);
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { margin-top: .9rem; max-width: 52ch; color: var(--g-100); }
.cta-band .btn-row { margin-top: 0; }
@media (max-width: 820px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- 15. Footer ----------------------------------------------- */

.footer {
  background: var(--g-950);
  color: rgba(255,255,255,.72);
  font-size: .9375rem;
}
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__main { grid-template-columns: 1fr; } }

.footer__logo img { width: 220px; margin-bottom: 1.25rem; }
.footer__claim { max-width: 34ch; line-height: 1.7; }

.footer h2 {
  margin-bottom: 1.1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: .55rem; line-height: 1.55; }
.footer address { font-style: normal; line-height: 1.85; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.badge-emr {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.35rem;
  padding: .5rem .95rem;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
}
.badge-emr::before {
  content: "";
  width: .55rem; height: .55rem;
  background: var(--g-400);
  border-radius: 50%;
}

/* ---------- 16. Mobile Aktionsleiste --------------------------------- */

.actionbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--g-800);
  box-shadow: 0 -4px 20px rgba(20,26,12,.22);
}
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.actionbar a + a { border-left: 1px solid rgba(255,255,255,.18); }
.actionbar svg { width: 1em; height: 1em; fill: currentColor; }

@media (max-width: 700px) {
  .actionbar { display: grid; }
  /* env(safe-area-inset-bottom) ist auf iPhones mit Home-Indikator > 0 und
     hält die Leiste über der Wischleiste; auf allen anderen Geräten 0. */
  .actionbar a { padding-bottom: calc(.95rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
}

/* ---------- 17. Animation -------------------------------------------- */

/* Nur einblenden, wenn JavaScript läuft — sonst bliebe der Inhalt
   unsichtbar. Was beim Laden schon im Bild ist, wird sofort gezeigt. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* ---------- 18. Rechtstexte ------------------------------------------ */

.prose h2 { margin: 2.75rem 0 1rem; font-size: var(--fs-h3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 2rem 0 .75rem; font-size: var(--fs-h4); }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.2rem; list-style: disc; }
.prose li { margin-bottom: .4rem; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: .875rem;
}
.prose th, .prose td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--s-200);
  vertical-align: top;
}
.prose th { background: var(--s-100); font-weight: 600; color: var(--ink); }
.table-scroll { overflow-x: auto; }

/* ---------- 19. Handy-Feinschliff ------------------------------------ */

/* Aufklappbares Therapie-Untermenü im mobilen Menü. <details> braucht keine
   Zeile JavaScript, ist mit Tastatur bedienbar und funktioniert auch, wenn
   das Skript nicht lädt. Nur im mobilen Menü sichtbar. */
.mobilenav .sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
}
.mobilenav .sub > summary::-webkit-details-marker { display: none; }
.mobilenav .sub > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-right: .2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.mobilenav .sub[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mobilenav .sub > summary:focus-visible { outline: 2px solid var(--g-800); outline-offset: 4px; }

/* Alles Weitere greift nur auf schmalen Geräten — die Ansicht am Rechner
   bleibt unverändert. */
@media (max-width: 700px) {

  /* Hero flacher als am Rechner: Ein hochkant stehendes Fenster schneidet
     aus einem Querformat sonst einen sehr engen Ausschnitt heraus. Mit
     weniger Höhe bleibt mehr vom Motiv stehen, und der erste Textabschnitt
     rückt in Sichtweite. */
  .hero { height: 56vh; min-height: 400px; max-height: 540px; }

  /* Der Bildverlauf bleibt derselbe wie am Rechner, damit die Fotos auf dem
     Handy genauso hell wirken. Die Lesbarkeit sichern stattdessen kräftige
     Textschatten: Ein weit gestreuter Schatten verdunkelt nur die Fläche
     direkt um die Buchstaben, statt das ganze Bild grau zu überziehen.
     Nötig ist das, weil der engere Handy-Ausschnitt die Schrift öfter auf
     helle Stellen legt — weisse Kleidung, Fensterlicht, helle Wand. */
  /* Die Vorzeile ist am hellsten und am dünnsten gesetzt — sie bekommt
     zusätzlich einen engen Saum direkt um die Buchstaben. */
  .hero__eyebrow {
    text-shadow: 0 0 6px rgba(15, 20, 8, .9), 0 1px 3px rgba(15, 20, 8, .75),
                 0 2px 20px rgba(15, 20, 8, .65);
  }
  .hero__title {
    text-shadow: 0 1px 3px rgba(15, 20, 8, .55), 0 2px 26px rgba(15, 20, 8, .65);
  }
  .hero__text {
    text-shadow: 0 1px 3px rgba(15, 20, 8, .6), 0 2px 22px rgba(15, 20, 8, .6);
  }

  /* Lange Komposita wie «Sportphysiotherapie» oder «Triggerpunkttherapie»
     passen auf einem Handy in keine Zeile. Ohne Trennhilfe greift das
     globale overflow-wrap und bricht stumpf nach dem letzten passenden
     Zeichen um («Sportphysiotherapi / e»). hyphens:auto nutzt stattdessen
     die Silbentrennung von lang="de-CH". */
  .hero__title,
  .section-head h1,
  .section-head h2,
  .prose h2,
  .prose h3,
  .card h3 { hyphens: auto; }

  /* Verlass ist darauf aber nicht: Silbentrennung braucht ein deutsches
     Trennwörterbuch, das nicht jeder Browser mitbringt (iOS Safari ja,
     Chrome je nach System nein). Deshalb zusätzlich die Schrift so weit
     herunterziehen, dass das längste Wort («Kinderphysiotherapie», 20
     Zeichen) in jedem Fall in eine Zeile passt. min() heisst: nur dort
     kleiner, wo es nötig ist — ab rund 430 px bleibt die normale Grösse. */
  .hero--page .hero__title { font-size: min(var(--fs-h1), 8vw); }

  /* Bedienbare Flächen auf rund 44 px bringen. Die Schrift bleibt gleich
     gross, nur die antippbare Fläche wächst. */
  .crumbs ol { padding-block: .3rem; }
  .crumbs a { display: inline-block; padding-block: .6rem; }
  .card__link, .link-arrow { padding-block: .5rem; }
  .footer li { margin-bottom: 0; }
  .footer li > a,
  .footer address a,
  .footer__bottom nav a { display: inline-block; padding-block: .6rem; }
  .map__links a,
  .prose td a,
  .prose th a { display: inline-block; padding-block: .65rem; }
  /* Verlinkungen mitten im Fliesstext bleiben bewusst unangetastet:
     mehr Zeilenhöhe würde dort die Absätze auseinanderreissen, und
     WCAG nimmt Links im Satz von der Mindestgrösse aus. */

  /* Im offenen Menü unten Luft lassen, sonst endet der letzte Eintrag
     hinter der Aktionsleiste. */
  .mobilenav { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .mobilenav .sub > summary { padding-block: .9rem .55rem; }
  .mobilenav .sub[open] { padding-bottom: .9rem; }
}

@media (max-width: 480px) {
  /* Die zweispaltige Tabelle im Impressum stapeln — sonst bleiben für den
     Wert nur ein paar Zeichen pro Zeile. */
  .prose table,
  .prose tbody,
  .prose tr,
  .prose th,
  .prose td { display: block; width: 100%; }
  .prose tr { border-bottom: 1px solid var(--s-200); }
  .prose th { background: none; padding: .8rem .25rem .15rem; border-bottom: 0; }
  .prose td { padding: 0 .25rem .8rem; border-bottom: 0; }
}

/* ---------- 20. Print ------------------------------------------------ */

@media print {
  .header, .actionbar, .cta-band, .mobilenav { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .hero { height: auto; min-height: 0; padding-top: 0; }
}