/* ==========================================================================
   Jakob Jarm Physiotherapie – Stylesheet
   Farbwelt: ruhiges Petrol/Grün + warmes Off-White. Beruhigend, seriös, medizinisch.
   ========================================================================== */

/* ==========================================================================
   DESIGN-TOKENS
   Eine Akzentfarbe, zwei Neutraltöne, eine typografische Skala (1.25),
   ein Abstandsraster (4/8 px), ein Radius- und ein Schattenstil.
   Alles Weitere im Stylesheet greift nur noch auf diese Werte zu.
   ========================================================================== */

:root {
  /* --- Akzent: EINE Farbe in mehreren Helligkeiten ---------------------
     Das frühere zweite Markenblau (#3aafa9) ist entfallen. Es erreichte
     auf Weiß nur 2,66:1 und war damit weder als Text noch als Fokusring
     verwendbar.                                                          */
  --accent-050: #eef6f5;
  --accent-100: #d9eae8;
  --accent-200: #b8d8d5;
  --accent-500: #2b7a78;   /* Basis — 5,05:1 auf Weiß */
  --accent-600: #226260;   /* Hover/aktiv */
  --accent-700: #1a4b4a;
  --accent-on-dark: #8fd6d0;  /* nur auf dunklem Grund */

  /* --- Neutral 1: Tinte ------------------------------------------------ */
  --ink-900: #17252a;      /* Fließtext — 15,7:1 */
  --ink-700: #35474a;
  --ink-600: #5a6b6a;      /* gedämpfter Text — 5,6:1 */
  --ink-300: #b6c5c3;
  --ink-200: #e2ecea;      /* Rahmen */
  --ink-100: #f4f8f7;      /* zarte Fläche */

  /* --- Neutral 2: Fläche ----------------------------------------------- */
  --surface: #ffffff;

  /* --- Typografische Skala, Verhältnis 1.25 ---------------------------- */
  --text-xs:   .8rem;
  --text-sm:   .9rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   clamp(1.35rem, 1.15rem + .9vw, 1.5625rem);
  --text-2xl:  clamp(1.55rem, 1.2rem + 1.7vw, 1.953rem);
  --text-3xl:  clamp(1.85rem, 1.3rem + 2.8vw, 2.441rem);
  --text-4xl:  clamp(2.1rem, 1.4rem + 3.9vw, 3.052rem);

  /* --- Abstände: 4/8-px-Raster ----------------------------------------- */
  --space-1: .25rem;   --space-2: .5rem;    --space-3: .75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;

  /* --- Form ------------------------------------------------------------ */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 50px;
  --shadow-sm: 0 1px 2px rgba(23, 37, 42, .04), 0 4px 14px rgba(23, 37, 42, .06);
  --shadow:    0 2px 4px rgba(23, 37, 42, .04), 0 12px 32px rgba(23, 37, 42, .10);

  /* --- Maße ------------------------------------------------------------ */
  --maxw: 1140px;
  --measure: 70ch;         /* maximale Zeilenlänge im Fließtext */
  --transition: .25s ease;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Altnamen -------------------------------------------------------- */
  /* Bestehende Regeln nutzen weiter diese Namen. Sie zeigen jetzt auf die
     Tokens oben, sodass eine Farbänderung nur an einer Stelle passiert. */
  --color-primary: var(--accent-500);
  --color-primary-dark: var(--accent-600);
  --color-accent: var(--accent-500);
  --color-dark: var(--ink-900);
  --color-muted: var(--ink-600);
  --color-bg: var(--surface);
  --color-bg-alt: var(--ink-100);
  --color-border: var(--ink-200);
  --color-light: var(--surface);
}

/* Reset & Grundlagen ------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height: auto ist Pflicht, seit alle <img> width/height tragen — sonst
   gilt das HTML-Attribut als feste Höhe und das Bild wird verzerrt.
   Die späteren Regeln mit eigener Höhe (.logo-img, .gallery-item img,
   .passion-card img, .profile-photo) sind spezifischer und gewinnen.    */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4 { line-height: 1.2; color: var(--ink-900); margin: 0 0 .5em; }
h1 { font-size: var(--text-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--text-3xl); letter-spacing: -.01em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
p { margin: 0 0 var(--space-4); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-500);
  margin-bottom: var(--space-2);
}
.lead { font-size: var(--text-lg); color: var(--ink-600); max-width: 62ch; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: .85rem 1.6rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-align: center;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-light { background: #fff; color: var(--color-primary); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--color-primary-dark); }
.btn-nav { padding: .55rem 1.2rem; background: var(--color-primary); color: #fff; }
.btn-nav:hover { background: var(--color-primary-dark); color: #fff; }

/* Header & Navigation ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 700; color: var(--color-dark); }
.logo-mark { color: var(--color-accent); font-size: 1.4rem; }
.logo-text strong { color: var(--color-primary); font-weight: 800; }
.logo-img { height: 60px; width: auto; display: block; }

.main-nav ul { list-style: none; display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; }
.main-nav a { color: var(--color-dark); font-weight: 500; font-size: .98rem; }
.main-nav a:hover, .main-nav a.active { color: var(--color-primary); }
.main-nav a.btn-nav { color: #fff; }

.lang-toggle {
  background: none; border: 1.5px solid var(--color-border);
  color: var(--color-dark); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: .4rem .7rem; border-radius: 50px; cursor: pointer;
  transition: all var(--transition); min-width: 44px;
}
.lang-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .4rem;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-dark); border-radius: 2px; transition: var(--transition); }

/* Hero --------------------------------------------------------------------- */
.hero {
  background: linear-gradient(100deg, rgba(23,37,42,.85) 0%, rgba(23,37,42,.60) 50%, rgba(23,37,42,.40) 100%), url('../images/outdoor-berge.jpg');
  background-size: cover; background-position: center;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
.hero .eyebrow { color: var(--accent-on-dark); }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255,255,255,.92); }
.hero .btn-outline { border-color: #fff; color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--color-primary); }
.hero::after {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,214,208,.16), transparent 70%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero-content { max-width: 640px; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero-image { margin: 0; position: relative; z-index: 1; }
.hero-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-image { order: -1; max-width: 340px; }
}

/* Page Hero (Unterseiten) -------------------------------------------------- */
.page-hero {
  background: linear-gradient(135deg, var(--accent-050), var(--ink-100));
  padding: clamp(3rem, 7vw, 4.5rem) 0;
}
.page-hero h1 { margin-bottom: .5rem; }

/* Page Hero mit Foto-Hintergrund (Unterseiten) ----------------------------- */
.page-hero--photo { background-size: cover; background-position: center; }
.page-hero--photo .eyebrow { color: var(--accent-on-dark); }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo .lead { color: rgba(255,255,255,.92); }
.page-hero--fels {
  background-image: linear-gradient(135deg, rgba(23,37,42,.72), rgba(23,37,42,.50)), url('../images/outdoor-fels.jpg');
}
.page-hero--berge {
  background-image: linear-gradient(135deg, rgba(23,37,42,.72), rgba(23,37,42,.50)), url('../images/outdoor-berge.jpg');
}

/* Sections ----------------------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-head .eyebrow { display: block; }

/* Grids -------------------------------------------------------------------- */
.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Cards -------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1rem;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--color-muted); margin: 0; }

.service-card {
  background: #fff; border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm); padding: 1.5rem 1.6rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.service-card h3 { font-size: 1.15rem; }
.service-card p { color: var(--color-muted); margin: 0; font-size: .96rem; }

.services-detailed .service-detail {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.service-detail h3 { margin-bottom: .5rem; }
.service-detail p { color: var(--color-muted); margin: 0; }

.center-btn { text-align: center; margin-top: 3rem; }

/* Galerie ------------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .75rem 1rem; color: #fff; font-weight: 600;
  background: linear-gradient(to top, rgba(23,37,42,.75), transparent);
}

/* Rezensionen -------------------------------------------------------------- */
/* Zwei Spalten statt vier: die Zitate laufen über mehrere Zeilen, in
   vier Spalten würde jede Karte zu schmal und die Zeilen zu kurz.       */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

.quote-card {
  margin: 0; padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}

/* Das Anführungszeichen ist Dekoration und wird von Screenreadern
   übersprungen, weil <blockquote> die Rolle schon mitteilt.            */
.quote-card::before {
  content: '\201C';
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem; line-height: 1;
  color: var(--color-primary); opacity: .25;
  height: 2rem;   /* das Zeichen hängt oben in seiner Zeile, der Rest ist Luft */
}

.quote-card blockquote { margin: 0; flex: 1; border: 0; padding: 0; }
.quote-card blockquote p { margin: 0; max-width: none; }

.quote-card figcaption {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-weight: 600; font-size: var(--text-sm);
}
.quote-card figcaption span {
  font-weight: 400; color: var(--color-muted);
}
.quote-card figcaption span::before { content: ' · '; }

.quote-source {
  margin: var(--space-8) auto 0; text-align: center;
  font-size: var(--text-sm); color: var(--color-muted);
}

@media (max-width: 720px) {
  .quote-grid { grid-template-columns: 1fr; }
  .quote-card { padding: var(--space-6); }
}

/* Info-Box ----------------------------------------------------------------- */
.info-box {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 2.5rem;
  margin-top: 3rem;
  border: 1px solid var(--color-border);
}
.info-box h3 { color: var(--color-primary); }
.info-box p { color: var(--color-muted); margin: 0; }

/* Info-Box mit Bild (zweispaltig) ------------------------------------------ */
.info-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; margin-top: 3rem; }
.info-split img {
  width: 100%; height: 100%; max-height: 360px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
}
.info-split .info-box { margin-top: 0; }
@media (max-width: 720px) {
  .info-split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Team --------------------------------------------------------------------- */
.team-card {
  text-align: center; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 2.5rem 1.75rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-photo {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; font-weight: 700; font-size: 1.6rem; letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
}
.team-role { color: var(--color-primary); font-weight: 600; margin-bottom: .6rem; }
.team-card p { color: var(--color-muted); }

/* Profil (Über mich) ------------------------------------------------------- */
.profile { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.profile-photo {
  width: 220px; height: 220px; border-radius: var(--radius);
  object-fit: cover; object-position: center top;
  box-shadow: var(--shadow-sm);
}
.profile-body h2 { color: var(--color-primary); }
.profile-body p { color: var(--color-muted); }
.qual-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.qual-list li {
  position: relative; padding: .4rem 0 .4rem 1.75rem;
  color: var(--color-dark); border-bottom: 1px dashed var(--color-border);
}
.qual-list li::before {
  content: "✓"; position: absolute; left: 0; top: .4rem;
  color: var(--color-accent); font-weight: 700;
}

/* Leidenschaft / Outdoorsport --------------------------------------------- */
.passion-feature {
  display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: center;
  margin: 2.5rem 0; padding: 2rem 2.5rem;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.passion-feature img {
  width: 240px; height: 300px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.passion-feature blockquote {
  margin: 0; padding-left: 1.5rem; border-left: 4px solid var(--color-accent);
  font-size: 1.35rem; line-height: 1.5; color: var(--color-dark); font-style: italic;
}
@media (max-width: 720px) {
  .passion-feature { grid-template-columns: 1fr; text-align: center; padding: 1.75rem; }
  .passion-feature img { width: 100%; max-width: 240px; margin: 0 auto; }
  .passion-feature blockquote { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 4px solid var(--color-accent); }
}

.passion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.passion-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.passion-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.passion-card img { width: 100%; height: 220px; object-fit: cover; }
.passion-card .passion-body { padding: 1.5rem; }
.passion-card h3 { margin-bottom: .4rem; }
.passion-card p { color: var(--color-muted); margin: 0; }

/* CTA ---------------------------------------------------------------------- */
.cta {
  background: linear-gradient(135deg, rgba(43,122,120,.90), rgba(32,94,92,.90)), url('../images/outdoor-berge.jpg');
  background-size: cover; background-position: center;
  color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: .3rem; }
.cta p { color: rgba(255,255,255,.85); margin: 0; }

/* Kontakt ------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.contact-block { margin-bottom: 1.75rem; }
.contact-block h3 { font-size: 1.05rem; color: var(--color-primary); margin-bottom: .3rem; }
.contact-info address { font-style: normal; color: var(--color-muted); }
.hours-list, .footer-hours { list-style: none; margin: 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--color-border); color: var(--color-muted); }
.hours-list li span:last-child { font-weight: 600; color: var(--color-dark); }
.note { font-size: .9rem; color: var(--color-muted); margin-top: .75rem; }

.contact-form-wrap {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.contact-form { margin-top: 1.5rem; }
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: .75rem .9rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--color-dark);
  background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(58,175,169,.15);
}
.form-check { display: flex; align-items: flex-start; gap: .6rem; }
.form-check input { width: auto; margin-top: .3rem; }
.form-check label { font-weight: 400; font-size: .9rem; color: var(--color-muted); }
.form-hint { font-size: .82rem; color: var(--color-muted); margin-top: 1rem; }

/* Formular-Statusmeldung ---------------------------------------------------- */
.form-status { margin-top: 1rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm); font-size: .95rem; }
.form-status.pending { background: var(--color-bg-alt); color: var(--color-muted); border: 1px solid var(--color-border); }
.form-status.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.form-status.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Karte -------------------------------------------------------------------- */
.map-wrap {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
  line-height: 0;
}
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }

/* Google-Bewertungs-Aufruf -------------------------------------------------- */
.review-cta {
  text-align: center; max-width: 640px; margin: 0 auto;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: clamp(2rem, 5vw, 3rem);
}
.review-stars { color: #f5a623; font-size: 2rem; letter-spacing: .2rem; margin-bottom: .75rem; }
.review-cta h2 { margin-bottom: .5rem; }
.review-cta p { color: var(--color-muted); max-width: 46ch; margin: 0 auto 1.5rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; }

/* Karte mit Klick-zum-Laden (Datenschutz) ---------------------------------- */
.map-consent {
  position: relative; min-height: 380px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 2rem; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  background: var(--color-bg-alt);
}
.map-consent-inner { max-width: 420px; }
.map-consent-inner p { color: var(--color-muted); margin: 0 0 .9rem; }
.map-consent-icon { font-size: 2.2rem; }
.map-consent.map-loaded { display: block; padding: 0; min-height: 0; line-height: 0; }
.map-consent iframe { width: 100%; height: 380px; border: 0; display: block; }

/* Gebäudefoto (Anfahrt) ---------------------------------------------------- */
.building-photo { margin: 0 0 1.75rem; }
.building-photo img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.building-photo figcaption { margin-top: .6rem; color: var(--color-muted); font-size: .92rem; text-align: center; }

/* Online-Terminbuchung (Doctolib) ------------------------------------------ */
.booking {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: center;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2.5rem;
}
.booking-text h2 { margin-bottom: .5rem; }
.booking-text p { color: var(--color-muted); }
.booking-text .btn { margin-top: .5rem; }
.booking-qr { text-align: center; }
.booking-qr img {
  width: 200px; max-width: 100%; margin: 0 auto;
  background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.booking-qr p { margin: .75rem 0 0; font-size: .9rem; color: var(--color-muted); }
@media (max-width: 720px) {
  .booking { grid-template-columns: 1fr; text-align: center; }
  .booking-qr { margin-top: .5rem; }
}

/* Rechtstexte -------------------------------------------------------------- */
.legal-text { max-width: 800px; }
.legal-text h2 { font-size: 1.35rem; margin-top: 2.25rem; color: var(--color-primary); }
.legal-text p { color: var(--color-muted); }
/* .notice — der orangerote Hinweiskasten der Datenschutzerklärung. Er
   war die einzige Verwendung dieser Klasse und ist 08/2026 entfallen. */
.back-link { margin-top: 2.5rem; font-weight: 600; }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: var(--color-dark); color: #c8d6d4; margin-top: 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; gap: 2.5rem;
  padding: 3.5rem 1.5rem 2.5rem;
}
.logo-footer { color: #fff; margin-bottom: 1rem; }
.logo-footer .logo-text strong { color: var(--color-accent); }
.footer-about { color: #9fb3b0; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-links, .footer-hours { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a, .footer-contact a { color: #c8d6d4; }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-contact { font-style: normal; color: #9fb3b0; font-size: .95rem; line-height: 1.9; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; color: #9fb3b0; padding: .2rem 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; font-size: .88rem; }
.footer-bottom p { margin: 0; color: #9fb3b0; }
.legal-links { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.legal-links a { color: #9fb3b0; }
.legal-links a:hover { color: var(--color-accent); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .profile { grid-template-columns: 1fr; text-align: left; }
  .profile-photo { width: 160px; height: 160px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .passion-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow); transform: translateY(-150%);
    transition: transform var(--transition); z-index: 90;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem; }
  .main-nav li { border-bottom: 1px solid var(--color-border); }
  .main-nav li:last-child { border-bottom: none; padding-top: .75rem; }
  .main-nav a { display: block; padding: .85rem 0; }
  .main-nav a.btn-nav { text-align: center; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .passion-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Phase 1 — Ergänzungen
   Neue Bausteine aus der technischen SEO-Basis: Sprungmarke, Zeitentabelle,
   Zeitleiste, zweiter Standort, mobiler Anruf-Button und Sticky-CTA.
   ========================================================================== */

/* Zum Inhalt springen — nur sichtbar, wenn er den Fokus bekommt --------- */
.skip-link {
  position: absolute; left: 1rem; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--color-primary); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Sprachumschalter ist jetzt ein Link, kein Button --------------------- */
a.lang-toggle {
  display: inline-block; text-align: center; text-decoration: none;
  line-height: 1.3;
}
a.lang-toggle:hover { color: var(--color-primary); }

/* Der Anruf-Button im Kopfbereich ist 08/2026 einem WhatsApp-Knopf
   gewichen. Regeln dafür stehen unten bei .header-chat.                */

/* Fußzeilen-Überschriften (vorher <h4> ohne vorangehendes <h3>) -------- */
.site-footer .footer-heading {
  color: #fff; font-size: 1rem; font-weight: 600;
  margin: 0 0 1rem; letter-spacing: 0;
}

/* Behandlungszeiten ---------------------------------------------------- */
.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.hours-block h3 { color: var(--color-primary); font-size: 1.05rem; margin: 0 0 .75rem; }
.hours-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours-table th, .hours-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--color-border); }
.hours-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; }
.hours-table tbody th { font-weight: 500; color: var(--color-dark); }
.hours-table tbody td { color: var(--color-muted); white-space: nowrap; }
.hours-note { margin-top: 1.25rem; color: var(--color-muted); font-size: .95rem; }

/* Zweiter Behandlungsort ----------------------------------------------- */
.second-location {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2rem;
}
.second-location h2 { margin-top: 0; font-size: 1.35rem; }
.second-location address { font-style: normal; margin: 1rem 0; line-height: 1.8; }
.second-location p { color: var(--color-muted); margin: .6rem 0; }
.second-location-way { color: var(--color-dark) !important; font-weight: 500; }

/* Werdegang als Zeitleiste --------------------------------------------- */
.timeline { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--color-border); }
.timeline-item { position: relative; padding: 0 0 1.5rem 1rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.5rem; top: .45rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-bg);
  transform: translateX(-5px);
}
.timeline-year {
  display: block; font-size: .82rem; font-weight: 700;
  color: var(--color-primary); letter-spacing: .03em;
}
.timeline-body strong { display: block; font-weight: 600; }
.timeline-meta { display: block; color: var(--color-muted); font-size: .92rem; margin-top: .15rem; }

/* Nebeneinanderstehende Infokästen ------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.info-grid .info-box { margin-top: 0; }

/* Sticky-CTA auf Mobilgeräten ------------------------------------------ */
.sticky-cta { display: none; }

/* Sichtbarer Fokus auf allen interaktiven Elementen -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 860px) {
  .sticky-cta {
    display: block; position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 90; text-align: center; padding: .95rem 1.5rem;
    background: var(--color-primary); color: #fff; font-weight: 600;
    border-radius: 50px; box-shadow: 0 8px 24px rgba(23, 37, 42, .25);
  }
  .sticky-cta:hover { background: var(--color-primary-dark); color: #fff; }

  /* Platz, damit der Sticky-CTA die Fußzeile nicht überdeckt */
  .footer-bottom-inner { padding-bottom: 4.5rem; }

  .hours-grid { gap: 1.5rem; }
  .second-location { padding: 1.5rem; }
}

/* ==========================================================================
   Phase 2 — Optische Politur
   Icons, vereinheitlichte Karten und Buttons, Zeilenlänge, Wortmarke,
   Lightbox.
   ========================================================================== */

/* --- Icons ---------------------------------------------------------------
   Lucide-SVG statt Emoji. Größe und Farbe kommen aus dem CSS, nicht aus
   der Schriftart des Betriebssystems.                                     */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }

.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--accent-050);
  color: var(--accent-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  font-size: inherit;              /* Emoji-Größe von früher zurücksetzen */
}
.card-icon .icon { width: 26px; height: 26px; }

.map-consent-icon { color: var(--accent-500); display: flex; justify-content: center; }
.map-consent-icon .icon { width: 34px; height: 34px; }

/* --- Karten: ein Radius, ein Schatten, ein Hover-Verhalten ------------- */
.card,
.services-detailed .service-detail,
.team-card,
.info-box,
.second-location,
.contact-form-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--ink-200);
}
.card, .services-detailed .service-detail, .team-card {
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover, .services-detailed .service-detail:hover, .team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.service-card { border-radius: var(--radius); border-left: 3px solid var(--accent-500); }

/* --- Buttons: gleiche Höhe, gleicher Radius, klarer Hover -------------- */
.btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  line-height: 1.4;
  min-height: 44px;                /* Mindest-Zielgröße für Finger */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
}
.btn-nav { padding: var(--space-2) var(--space-5); min-height: 40px; font-size: var(--text-sm); }
.btn-lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

/* --- Zeilenlänge im Fließtext ----------------------------------------- */
.legal-text p,
.legal-text li,
.profile-body p,
.second-location p,
.hours-note { max-width: var(--measure); }

/* --- Kopfbereich: Logo präsenter --------------------------------------
   Die Datei logo-beschnitten.png hat keinen weißen Rand mehr, dadurch
   füllt der Schriftzug die Boxhöhe tatsächlich aus.                     */
.logo-img { height: 84px; }
.header-inner { height: 104px; gap: var(--space-8); }
.main-nav ul { gap: var(--space-6); }

/* --- Wortmarke (offizielle Zweitform der Bildmarke) -------------------- */
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark-name {
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.wordmark-sub {
  font-size: .68rem; font-weight: 400;
  letter-spacing: .22em; text-transform: lowercase;
  color: var(--accent-on-dark); margin-top: .2rem;
}
.logo-footer { color: #fff; margin-bottom: var(--space-4); display: inline-flex; }

/* --- Lightbox für die Praxis-Galerie ---------------------------------- */
.gallery-item button.gallery-trigger {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; font: inherit; color: inherit;
}

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(23, 37, 42, .92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.lightbox-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin: 0 auto;
}
.lightbox-caption { color: #fff; margin-top: var(--space-4); font-size: var(--text-base); }

.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .25); }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }
.lightbox-close { top: var(--space-4); right: var(--space-4); transform: none; position: absolute; }
.lightbox-btn .icon { width: 24px; height: 24px; }

@media (max-width: 860px) {
  /* Logo darf auf Mobil nicht zum Icon zusammenschrumpfen */
  .logo-img { height: 60px; }
  .header-inner { height: 84px; gap: var(--space-3); }
  .lightbox-prev { left: var(--space-2); }
  .lightbox-next { right: var(--space-2); }
}

/* --- Formular-Fehlermeldungen ------------------------------------------ */
.field-error {
  color: #a3262b;                 /* 5,9:1 auf Weiß */
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}
.contact-form [aria-invalid="true"] {
  border-color: #a3262b;
  outline: none;
}
.form-check .field-error { grid-column: 1 / -1; }

/* Logo darf im Flex-Kopfbereich nicht schrumpfen — sonst wird es
   horizontal gestaucht und der Schriftzug bricht ab. */
.logo { flex: none; }
.logo-img { max-width: none; }
.header-inner > .main-nav { min-width: 0; }

/* ==========================================================================
   Phase 3 — FAQ
   ========================================================================== */

.faq-container { max-width: 860px; }

/* Sprungmarken über den Blöcken --------------------------------------- */
.faq-jump { margin-bottom: var(--space-12); }
.faq-jump ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.faq-jump a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-900);
  transition: all var(--transition);
}
.faq-jump a:hover { border-color: var(--accent-500); color: var(--accent-500); }

.faq-block { margin-bottom: var(--space-16); }
.faq-block:last-child { margin-bottom: 0; }
/* Damit die Sprungmarke nicht unter dem klebenden Kopfbereich landet */
.faq-block-title { scroll-margin-top: 120px; }

/* Entwurfshinweis ------------------------------------------------------ */
.draft-note {
  background: #fdf6e3; border-left: 3px solid #b8860b;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm); color: var(--ink-700);
  max-width: var(--measure);
}
.draft-note strong { color: #7a5c07; }

/* Akkordeon ------------------------------------------------------------
   <details>/<summary>: Die Antworten stehen auch geschlossen im HTML.  */
.faq-list { border-top: 1px solid var(--ink-200); }

.faq-item {
  border-bottom: 1px solid var(--ink-200);
  scroll-margin-top: 120px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-10) var(--space-5) 0;
  font-weight: 600; font-size: var(--text-base);
  color: var(--ink-900);
  position: relative;
  transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-500); }

/* Eigener Aufklapp-Pfeil */
.faq-item summary::after {
  content: '';
  position: absolute; right: var(--space-2); top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }

.faq-item summary:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: -3px; border-radius: var(--radius-sm);
}

.faq-answer {
  padding: 0 var(--space-10) var(--space-6) 0;
  color: var(--ink-600);
  max-width: var(--measure);
}
.faq-answer p { margin: 0 0 var(--space-4); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.faq-answer li { margin-bottom: var(--space-2); }
.faq-answer strong { color: var(--ink-900); }

/* Kurz hervorheben, wenn per Direktlink angesprungen */
.faq-item:target { background: var(--accent-050); }
.faq-item:target summary { color: var(--accent-600); }

@media (max-width: 860px) {
  .faq-item summary { padding-right: var(--space-8); }
  .faq-answer { padding-right: 0; }
  .faq-block { margin-bottom: var(--space-12); }
}

/* Links in dunklen Kopfbereichen -----------------------------------------
   Die Standard-Linkfarbe (Petrol) erreicht auf dem abgedunkelten Foto nur
   rund 1,7:1 und ist praktisch unlesbar. Auf dunklem Grund daher weiss
   und unterstrichen, damit der Link auch ohne Farbunterschied erkennbar
   bleibt.                                                                */
.hero a:not(.btn),
.page-hero--photo a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero a:not(.btn):hover,
.page-hero--photo a:not(.btn):hover {
  color: var(--accent-on-dark);
  text-decoration-color: var(--accent-on-dark);
}

/* ==========================================================================
   Änderungen nach Durchsicht
   ========================================================================== */

/* Karten ohne Icon: Die Fläche trägt jetzt allein, deshalb bekommt sie
   einen deutlicheren Grundton statt Weiß auf Weiß.                       */
.card,
.services-detailed .service-detail {
  background: var(--accent-050);
  border-color: var(--accent-100);
  padding: var(--space-8);
}
.card:hover,
.services-detailed .service-detail:hover {
  background: var(--accent-100);
  border-color: var(--accent-200);
}
.card h3,
.service-detail h3 { color: var(--accent-600); margin-bottom: var(--space-2); }
.card p,
.service-detail p { color: var(--ink-700); }

/* Auf bereits eingefärbten Abschnitten würde der gleiche Ton verschwinden */
.section-alt .card,
.section-alt .services-detailed .service-detail {
  background: var(--surface);
  border-color: var(--ink-200);
}
.section-alt .card:hover,
.section-alt .services-detailed .service-detail:hover {
  background: var(--accent-050);
}

/* .card-icon wird nicht mehr verwendet; .icon bleibt für Kartenmodul
   und Lightbox in Gebrauch. */

/* Hinweis zur Untermiete — steht bewusst neben der Adresse, nicht darin,
   damit die Adresszeile zeichengleich zum Google-Profil bleibt.          */
.address-note {
  font-size: var(--text-sm);
  color: var(--ink-600);
  margin-top: var(--space-3);
  max-width: var(--measure);
}

/* Logo präsenter im Kopfbereich ---------------------------------------- */
.logo-img { height: 96px; }
.header-inner { height: 116px; }

/* Logo auf hellem Feld in der Fußzeile --------------------------------- */
.logo-plate {
  display: inline-block;
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  line-height: 0;
}
.logo-plate img { height: 68px; width: auto; max-width: none; }
.logo-footer { margin-bottom: var(--space-5); }

@media (max-width: 860px) {
  .logo-img { height: 64px; }
  .header-inner { height: 88px; }
  .logo-plate img { height: 58px; }
}

/* Standortkarten — Haupt- und zweiter Behandlungsort sehen gleich aus.
   Ersetzt die frühere Sonderformatierung .second-location.              */
.location-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--space-8);
  margin-top: var(--space-8);
}
.section-alt .location-card { background: var(--surface); }
.location-card h3 { margin-top: 0; color: var(--accent-600); font-size: var(--text-xl); }
.location-card address { font-style: normal; margin: var(--space-4) 0; line-height: 1.8; }
.location-card p { color: var(--ink-600); margin: var(--space-3) 0; max-width: var(--measure); }
.location-way { color: var(--ink-900) !important; font-weight: 500; }

/* Trainingstabelle in der FAQ ------------------------------------------
   Breite Tabelle: scrollt in ihrem eigenen Container, damit die Seite
   selbst auf dem Handy nicht seitlich wegrutscht.                       */
.table-scroll {
  overflow-x: auto;
  margin: var(--space-5) 0;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.training-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 560px; }
.training-table caption {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-weight: 600; color: var(--ink-900); background: var(--ink-100);
}
.training-table th, .training-table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--ink-200);
  text-align: left; white-space: nowrap;
}
.training-table thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-600); font-weight: 600;
}
.training-table tbody th[scope="row"] { font-weight: 500; color: var(--ink-900); }
.training-table tbody td { color: var(--ink-600); }
.training-table tr.group th {
  background: var(--accent-050); color: var(--accent-600);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
}
.training-table tr:last-child th, .training-table tr:last-child td { border-bottom: 0; }

/* Kopfbereich deckend statt halbtransparent.
   Das Logo-PNG hat einen deckend weissen Hintergrund und zeichnete sich
   auf der durchscheinenden Leiste als helles Rechteck ab.               */
.site-header { background: var(--surface); }

/* Die Zeilenlängenbegrenzung gehört auf den Fließtext, nicht auf den
   ganzen Antwortblock — sonst wird die Trainingstabelle beschnitten.   */
.faq-answer { max-width: none; padding-right: 0; }
.faq-answer p,
.faq-answer ul { max-width: var(--measure); }
.faq-answer .table-scroll { max-width: 100%; }

/* ==========================================================================
   Phase 3 — Leistungseinzelseiten
   ========================================================================== */

.prose { max-width: 780px; }
.prose-block { margin-bottom: var(--space-12); }
.prose-block:last-child { margin-bottom: 0; }
.prose-block h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.prose-block p,
.prose-block li { color: var(--ink-600); max-width: var(--measure); }
.prose-block ul { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.prose-block li { margin-bottom: var(--space-2); }
.prose-block strong { color: var(--ink-900); }

/* Querverweise auf die übrigen Leistungen ------------------------------ */
.service-links ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 780px;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
}
.service-links a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-900);
  transition: all var(--transition);
}
.service-links a:hover { border-color: var(--accent-500); color: var(--accent-500); }

/* Verweis von der Übersichtsseite auf die Einzelseite ------------------ */
.service-detail h3 a { color: inherit; }
.service-detail h3 a:hover { color: var(--accent-600); }
.service-more { margin: var(--space-3) 0 0 !important; }
.service-more a { font-weight: 600; font-size: var(--text-sm); }
.service-more a::after { content: ' \2192'; }

/* Preistabelle ---------------------------------------------------------- */
.preis-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 480px; }
.preis-table caption {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-weight: 600; color: var(--ink-900); background: var(--ink-100);
}
.preis-table th, .preis-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-200); text-align: left;
}
.preis-table thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-600); font-weight: 600;
}
.preis-table tbody th[scope="row"] { font-weight: 500; color: var(--ink-900); }
.preis-table tbody td { color: var(--ink-600); white-space: nowrap; }
.preis-table td.preis { font-weight: 600; color: var(--ink-900); }
.preis-table tr.group th {
  background: var(--accent-050); color: var(--accent-600);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
}
.preis-table tr:last-child th, .preis-table tr:last-child td { border-bottom: 0; }
.preis-hinweis {
  margin-top: var(--space-4); font-size: var(--text-sm);
  color: var(--ink-600); max-width: var(--measure);
}
.section-alt .table-scroll { background: var(--surface); }

/* Ratgeberartikel ------------------------------------------------------- */
.artikel-meta,
.artikel-datum {
  font-size: var(--text-sm); color: var(--ink-600);
  margin-bottom: var(--space-6);
}
.artikel-datum { margin-bottom: var(--space-2); }
.artikel-hinweis {
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-5);
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--ink-600);
  max-width: var(--measure);
}
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--accent-600); }

/* Ausführlicher Anfahrtstext ------------------------------------------- */
.anfahrt-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
  margin: var(--space-8) 0;
}
.anfahrt-grid h3 { color: var(--accent-600); font-size: var(--text-base); margin-bottom: var(--space-2); }
.anfahrt-grid p { color: var(--ink-600); margin: 0; }
.anfahrt-grid strong { color: var(--ink-900); }

/* Formular als sekundärer Weg kennzeichnen ------------------------------ */
.form-alternative {
  font-size: var(--text-sm); color: var(--ink-600);
  padding-left: var(--space-4);
  border-left: 2px solid var(--ink-200);
}
/* Lange Einwilligungserklärung lesbar halten */
.form-check label { font-size: var(--text-sm); line-height: 1.6; }

/* Links im Fließtext unterstreichen -------------------------------------
   Ein Link mitten im Text darf sich nicht allein durch die Farbe vom
   umgebenden Text abheben (WCAG 1.4.1). Petrol auf gedämpftem Grau
   erreicht nur 1,1:1 — deshalb kommt die Unterstreichung dazu.

   Ausgenommen sind Links, die für sich stehen und schon durch Form oder
   Position erkennbar sind: Buttons, Sprungmarken, Karten-Titel und die
   Weiterlesen-Verweise.                                                 */
main p a:not(.btn),
main li a:not(.btn),
main label a,
main address a,
main figcaption a,
main dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main p a:not(.btn):hover,
main li a:not(.btn):hover,
main address a:hover {
  text-decoration-color: currentColor;
}

/* Diese stehen für sich und brauchen keine Unterstreichung */
.faq-jump a,
.service-links a,
.service-more a,
.card h3 a,
.service-detail h3 a,
.legal-links a,
.back-link a { text-decoration: none; }

/* Beide Standorte als gleichwertiges Paar ------------------------------- */
.standort-paar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* .anfahrt-titel ist 08/2026 entfallen — die Kontaktseite bringt die
   Überschrift des Abschnitts jetzt selbst mit. Die Zwischentitel im
   Raster sind damit von h4 zu h3 aufgerückt; ihre Regel steht oben. */

/* Standortkarten im Hochformat, direkt unter den Behandlungszeiten.
   Schmaler als die volle Spaltenbreite, damit sie stehend wirken.      */
.standort-paar {
  max-width: 760px;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5);
}
.standort-paar .location-card {
  margin-top: var(--space-10);
  padding: var(--space-6);
  /* Höhe nach Inhalt statt gestreckt — sonst klafft in der kürzeren
     Karte eine Lücke über dem Button. */
  align-self: start;
}
.standort-paar .location-card > p:last-child { padding-top: var(--space-2); margin-bottom: 0; }
.standort-paar .location-card h3 { font-size: var(--text-lg); }

/* Standorte: je Ort eine Spalte aus Zeiten und Adresse ------------------
   Ersetzt das frühere Nebeneinander von Zeitentabelle und Standortpaar.
   So steht die Bahrenfelder Adresse unter den Bahrenfelder Zeiten.     */
.standort-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: var(--space-8);
  row-gap: var(--space-3);     /* eng, damit Tabelle und Karte eine Einheit bilden */
  align-items: start;
}
.standort-spalte > h3 {
  color: var(--accent-600); font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

/* Die Zeitentabelle bekommt dieselbe Kartenoptik wie die Adresse
   darunter — so lesen sich beide als zusammengehöriger Block.        */
.standort-spalte .hours-table {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.standort-spalte .hours-table th,
.standort-spalte .hours-table td { padding: var(--space-2) var(--space-5); }
.standort-spalte .hours-table tbody tr:last-child th,
.standort-spalte .hours-table tbody tr:last-child td { border-bottom: 0; }

.standort-spalte .location-card { margin-top: 0; padding: var(--space-5); }
.standort-spalte .location-card address { margin-top: 0; }
.standort-spalte .location-card > p:last-child { margin-bottom: 0; }

/* Beide Adresskarten auf gleicher Höhe beginnen lassen, obwohl die
   Zeitentabellen unterschiedlich viele Zeilen haben. Mit subgrid teilen
   sich die Spalten dieselben Zeilenhöhen. Browser ohne subgrid zeigen
   die Spalten weiterhin korrekt, nur eben versetzt.                    */
@supports (grid-template-rows: subgrid) {
  .standort-spalten { grid-template-rows: auto auto auto; }
  .standort-spalte {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* Die Tabelle nicht auf die Zeilenhöhe des Rasters strecken — sonst
   stehen die zwei Eppendorfer Zeilen weiter auseinander als die drei
   in Bahrenfeld. Die Adresskarten bleiben trotzdem auf einer Linie,
   weil subgrid die Zeilenhöhe vorgibt.                                */
.standort-spalte .hours-table { align-self: start; }

/* =========================================================================
   KONTAKTWEGE, ANAMNESEBOGEN, RÜCKMELDUNG   (08/2026)
   ========================================================================= */

/* Kontaktwege -------------------------------------------------------------
   Drei gleich gebaute Blöcke: Kopfzeile mit Icon, ein Satz dazu, der Link.
   WhatsApp steht zuerst und bekommt als einziger einen farbigen Rand —
   nicht als Dekoration, sondern weil es der Weg ist, über den die meisten
   tatsächlich schreiben.                                                  */
.kontaktwege { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }

.kontaktweg {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--surface);
}
.section-alt .kontaktweg { background: var(--surface); }

.kontaktweg-kopf {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-base); font-weight: 600; color: var(--ink-900);
}
.kontaktweg-icon { width: 22px; height: 22px; flex: none; color: var(--accent-500); }
/* Die E-Mail-Adresse ist 265 px breit und passt auf einem 320-px-Handy
   nicht in die Karte. Umbrechen lassen statt seitlich hinausschieben —
   ein waagerechter Scrollbalken auf der Kontaktseite wäre das Letzte,
   was jemand dort braucht.                                             */
.kontaktweg-link { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* WhatsApp-Grün nur als Rand und Icon. Als Textfarbe wäre es zu hell:
   #25D366 erreicht auf Weiß nur 1,8:1. Der Link bleibt deshalb Petrol. */
.kontaktweg--whatsapp {
  border-color: color-mix(in srgb, #25d366 45%, var(--ink-200));
  background: color-mix(in srgb, #25d366 5%, var(--surface));
}
.kontaktweg--whatsapp .kontaktweg-icon { color: #128c7e; }

/* WhatsApp-Knopf im Kopfbereich (ersetzt den Telefonhörer) ---------------- */
.header-chat { display: none; color: #128c7e; padding: var(--space-2); margin-left: auto; }
.header-chat svg { width: 26px; height: 26px; display: block; }

/* Untermiet-Hinweis unter den Standorten ---------------------------------
   Etwas kleiner und abgesetzt: Er gehört zur Sache, ist aber keine
   Information, die jemand beim Terminmachen braucht.                     */
/* Keine Trennlinie: .hours-note ist auf Lesebreite begrenzt, ein Strich
   endete deshalb mitten in der Fläche. Der Abstand allein reicht.      */
.hours-note--traeger {
  font-size: var(--text-sm);
  margin-top: var(--space-8);
}

/* Anamnesebogen -----------------------------------------------------------
   Der eigene Abschnitt auf der Kontaktseite ist 08/2026 entfallen; der
   Bogen steht jetzt als FAQ-Frage. Übrig bleibt das Icon im
   Download-Knopf, das auch die Startseite verwendet.                     */
.btn-icon { width: 18px; height: 18px; margin-right: var(--space-2); vertical-align: -3px; }

/* Ein Download-Knopf in einer FAQ-Antwort steht sonst direkt am Text. */
.faq-answer .btn { margin: var(--space-2) 0; }

/* „Ein Ort, an dem Du Dich wohlfühlen sollst" ----------------------------
   Auf der Startseite ein ruhiger, breiter Block statt einer Karte im
   Raster — der Text ist zum Lesen da, nicht zum Überfliegen.            */
.wohlfuehlen-box {
  max-width: 780px; margin-inline: auto;
  background: var(--accent-050);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
}
.wohlfuehlen-box .eyebrow { margin-bottom: var(--space-2); }
.wohlfuehlen-box h2 { margin-top: 0; }
.wohlfuehlen-box p { color: var(--ink-700); }
.wohlfuehlen-box strong { color: var(--ink-900); }
.wohlfuehlen-link {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: 0;
}

/* Anliegen-Auswahl im Formular ------------------------------------------
   Zwei große Klickflächen statt schmaler Radiobuttons. Auf dem Handy ist
   das der Unterschied zwischen treffen und danebentippen.               */
.form-anliegen {
  border: 0; padding: 0; margin: 0 0 var(--space-5);
  display: grid; gap: var(--space-3);
}
.form-anliegen legend {
  padding: 0; margin-bottom: var(--space-3);
  font-weight: 600; font-size: .92rem;
}

.anliegen-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.anliegen-option:hover { border-color: var(--accent-200); background: var(--accent-050); }
.anliegen-option input { margin: .2rem 0 0; flex: none; accent-color: var(--accent-500); }
.anliegen-option:has(input:checked) {
  border-color: var(--accent-500);
  background: var(--accent-050);
  box-shadow: inset 0 0 0 1px var(--accent-500);
}
/* Der Fokusring gehört an die ganze Fläche, nicht an den 16-px-Kreis. */
.anliegen-option:has(input:focus-visible) { outline: 3px solid var(--accent-500); outline-offset: 2px; }
.anliegen-option input:focus-visible { outline: none; }

.anliegen-body { display: block; }
.anliegen-titel { display: block; font-weight: 600; }
.anliegen-hint { display: block; font-size: var(--text-sm); color: var(--ink-600); margin-top: .1rem; }

/* Zusage bzw. Hinweis über den Feldern ---------------------------------- */
.form-zusage { margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.form-zusage--feedback {
  color: var(--ink-700);
  background: var(--accent-050);
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4);
  line-height: 1.6;
}
.form-zusage[hidden], .form-row[hidden] { display: none; }

.freiwillig-hinweis { font-weight: 400; color: var(--ink-600); font-size: var(--text-xs); }

@media (max-width: 860px) {
  /* Ersetzt den früheren .header-call an derselben Stelle */
  .header-chat { display: block; }
}

@media (max-width: 720px) {
  /* Auf schmalen Schirmen sollen beide Knöpfe volle Breite haben —
     nebeneinander bleiben sonst zwei je halbe Zeilen übrig. */
  .wohlfuehlen-link { flex-direction: column; align-items: stretch; }
  .wohlfuehlen-link .btn { text-align: center; }
}

/* Adresszeile im Anfahrtsabschnitt der Kontaktseite ---------------------
   Seit der Standortblock auf der Startseite steht, ist das die einzige
   sichtbare Adresse dieser Seite. Sie steht bewusst über dem Foto, damit
   man sie findet, ohne den Anfahrtstext lesen zu müssen.                */
.anfahrt-adresse {
  font-style: normal; line-height: 1.7;
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}
.section-alt .anfahrt-adresse { background: var(--surface); }

/* =========================================================================
   HANDY: KARUSSELLS UND „MEHR LESEN"   (08/2026)
   =========================================================================
   Die Startseite war auf einem 390-px-Handy 10.579 px lang — zwölfeinhalb
   Bildschirme. Beides hier greift deshalb ausschließlich unter 720 px:
   am Rechner bleibt jedes Raster, wie es war.
   ========================================================================= */

/* Karussell ---------------------------------------------------------------
   Reines CSS: scroll-snap. Kein Skript nötig, um zu wischen — die Punkte
   darunter fügt js/main.js nur als Zugabe hinzu.

   Die Bahn läuft absichtlich bis an den Bildschirmrand (negatives
   margin gegen das Container-Padding). Dass rechts die nächste Karte
   angeschnitten hervorlugt, ist der ganze Hinweis darauf, dass es
   weitergeht — deshalb 84 % Kartenbreite und nicht 100 %.             */
@media (max-width: 720px) {
  .karussell {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    margin-inline: -1.5rem;          /* = padding von .container */
    padding-inline: 1.5rem;
    padding-bottom: var(--space-2);
    scroll-padding-inline: 1.5rem;
    /* Der Balken stört unter Karten mehr, als er nützt; gewischt wird
       ohnehin, und die Punkte darunter zeigen die Position an. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Kettenreaktion verhindern: sonst scrollt beim Erreichen des Endes
       die ganze Seite seitwärts mit. */
    overscroll-behavior-x: contain;
  }
  .karussell::-webkit-scrollbar { display: none; }

  .karussell > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    margin: 0;
  }

  /* Der Fokusring darf nicht vom overflow abgeschnitten werden. */
  .karussell { padding-block: 3px calc(var(--space-2) + 3px); }

  /* Karten im Karussell auf gleiche Höhe: eine kürzere Karte neben einer
     langen sähe nach Fehler aus, nicht nach Absicht. */
  .karussell > .card,
  .karussell > .service-card,
  .karussell > .quote-card { display: flex; flex-direction: column; }

  /* Die Standort-Spalten sind im Raster als subgrid gebaut. Im Karussell
     gibt es kein Elternraster mehr — zurück auf normalen Fluss. */
  .karussell > .standort-spalte {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }

  /* Bilder im Galerie-Karussell etwas höher: eine einzelne Karte darf
     mehr Fläche haben als drei nebeneinander. */
  .karussell > .gallery-item img { height: 300px; }
}

/* Positionspunkte ---------------------------------------------------------
   Werden von js/main.js erzeugt und nur dort eingehängt, wo tatsächlich
   mehr als eine Karte steht.                                           */
.karussell-punkte { display: none; }

@media (max-width: 720px) {
  .karussell-punkte {
    display: flex; justify-content: center; gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .karussell-punkt {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--ink-300);
    transition: background-color .2s, transform .2s;
  }
  .karussell-punkt[aria-current="true"] {
    background: var(--accent-500);
    transform: scale(1.35);
  }
  /* Die Punkte sind winzig; die Trefferfläche darf es nicht sein. */
  .karussell-punkt::before {
    content: ''; position: absolute;
    inset: -12px;
  }
  .karussell-punkt { position: relative; }
}

/* „Mehr lesen" ------------------------------------------------------------
   Die Kürzung setzt js/main.js, nicht das Stylesheet: Ohne JavaScript
   soll der volle Text dastehen. Die Höhe kommt als --kuerzung mit.

   Der weiche Auslauf ist eine Maske, kein aufgelegter Verlauf — so
   funktioniert er über jedem Hintergrund, hell wie eingefärbt.        */
.ist-gekuerzt {
  max-height: var(--kuerzung, 260px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.ist-gekuerzt > :last-child { margin-bottom: 0; }

.mehr-lesen-knopf {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  border: 0; background: none;
  color: var(--accent-600);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.mehr-lesen-knopf:hover { color: var(--accent-700); }

/* Der Pfeil dreht sich beim Aufklappen. */
.mehr-lesen-knopf .icon { width: 16px; height: 16px; transition: transform .2s; }
.mehr-lesen-knopf[aria-expanded="true"] .icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .karussell { scroll-behavior: auto; }
  .karussell-punkt,
  .mehr-lesen-knopf .icon { transition: none; }
}

/* =========================================================================
   HERO AUF DEM HANDY   (08/2026)
   =========================================================================
   Der Kopfbereich war auf einem 390-px-Handy 1093 px hoch — man scrollte,
   bevor der erste Inhalt kam. Die Höhe verteilte sich auf:

     Polsterung  112 px   Bild  327 px   Abstand  32 px
     Text        593 px   davon Einleitung 297 px (acht Zeilen!)
                          und zwei Knöpfe untereinander 117 px

   Vier Eingriffe bringen ihn auf 689 px. Alle greifen nur unter 820 px;
   am Rechner ist der Hero unverändert.

   Es gab eine Vergleichsfassung unter /hero-klein/. Sie hat gewonnen und
   ist hier aufgegangen; die Vorschauseite ist gelöscht.
   ========================================================================= */

/* Der Ortssatz der Einleitung. Bis 820 px versteckt, darüber im normalen
   Textfluss. Als lokales Signal geht dadurch nichts verloren: Ottensen
   steht in H1, Title, Description, im Standortblock derselben Seite und
   im JSON-LD.

   Bewusst nur innerhalb des Heros — sonst verschwände irgendwo sonst
   unbemerkt Text.                                                      */
.hero .nur-breit { display: none; }

@media (min-width: 821px) {
  .hero .nur-breit { display: inline; }
}

@media (max-width: 820px) {
  .hero { padding: var(--space-8) 0; }
  .hero-inner { gap: var(--space-5); }

  /* Das Porträt ist bereits quadratisch (1400×1400), es wird also nur
     verkleinert und rund maskiert, nicht beschnitten. 156 px ist die
     Grenze, unter der Jakob nicht mehr zu erkennen ist — kleiner wäre
     ein Platzhalter statt eines Porträts.

     Links statt mittig, damit Kreis und Text auf einer Kante stehen.
     Kein Schlagschatten: auf dunklem Grund sieht man ihn ohnehin nicht,
     der helle Ring übernimmt das Absetzen. */
  .hero-image {
    max-width: 156px;
    margin: 0;
  }
  .hero-image img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .28);
    box-shadow: none;
  }

  /* Zwei Knöpfe nebeneinander statt gestapelt: spart eine ganze Zeile.
     flex: 1 gibt beiden dieselbe Breite, damit keiner wie ein Anhängsel
     des anderen aussieht. Deshalb sind die Beschriftungen kurz —
     „Meine Leistungen" passte nicht ohne Umbruch. */
  .hero-actions {
    flex-wrap: nowrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .hero-actions .btn {
    flex: 1 1 0;
    text-align: center;
    padding-inline: var(--space-3);
    white-space: nowrap;
  }
}

/* =========================================================================
   HANDY-DURCHGANG ÜBER ALLE SEITEN   (08/2026)
   =========================================================================
   Befunde aus der Messung aller Seiten bei 390 px. Reihenfolge wie in
   der Liste: erst was kaputt war, dann Länge, dann Bedienung.
   ========================================================================= */

/* A1 — Preistabelle wird auf dem Handy zu Karten -------------------------
   Sie war 480 px breit bei 321 px Platz, und ausgerechnet die Spalte
   „Privatpreis" (382–505 px) lag komplett außerhalb des Bildschirms.
   Auf einer Preisseite fehlte damit die einzige Information, für die
   man kommt.

   Jede Zeile wird eine Karte: Leistung als Überschrift, darunter Dauer
   und Preis mit ihrer Spaltenbeschriftung aus `data-spalte`. Die
   Kopfzeile entfällt sichtbar — sie steht ja jetzt in jeder Zelle.

   Die role-Angaben im HTML halten die Tabellensemantik aufrecht,
   obwohl display:block sie sonst zerstören würde.                     */
@media (max-width: 720px) {
  /* Der Behälter braucht hier weder Rahmen noch Scrollbalken mehr. */
  .table-scroll:has(.preis-table) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  /* min-width: 480px steht oben an .preis-table und hielt die Tabelle
     trotz display:block auf Tabellenbreite — der Grund, warum das
     Kartenlayout beim ersten Versuch wirkungslos blieb. */
  .preis-table,
  .preis-table tbody,
  .preis-table tr,
  .preis-table th,
  .preis-table td { display: block; width: auto; min-width: 0; }

  /* Ebenfalls von oben: nowrap an den Zellen. In einer Karte darf und
     soll der Text umbrechen. */
  .preis-table th,
  .preis-table td { white-space: normal; }

  .preis-table thead { display: none; }

  /* Ohne display:block behält die caption die Breite der schmalsten
     Tabellenspalte und bricht nach jedem Wort um. */
  .preis-table caption {
    display: block;
    width: 100%;
    padding: 0 0 var(--space-4);
    background: none;
    text-align: left;
  }

  /* Zwei Zeilen statt vier: Name und Preis nebeneinander, die Dauer
     klein darunter. Als gestapelte Karten mit Beschriftung vor jedem
     Wert wuchs die Seite um 1250 px — das ist zu teuer dafür, dass eine
     Preisliste ohnehin nur aus Name, Dauer und Preis besteht.

     Kein Kartenrahmen mehr, nur eine Trennlinie: So liest es sich als
     das, was es ist — eine Liste. */
  .preis-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--ink-200);
  }

  .preis-table tbody th[scope="row"] {
    grid-column: 1; grid-row: 1;
    border: 0; padding: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink-900);
    white-space: normal;
  }

  /* Die Dauer braucht keine Beschriftung — „15 Min." erklärt sich. */
  .preis-table tbody td:not(.preis) {
    grid-column: 1; grid-row: 2;
    border: 0; padding: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--ink-600);
  }

  /* Der Preis ist die Information, für die man hier ist. Rechts,
     groß, über beide Zeilen mittig. */
  .preis-table tbody td.preis {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    border: 0; padding: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--accent-600);
    white-space: nowrap;
  }
  .preis-table tbody td.preis::before { content: none; }

  /* Die Kassensatz-Spalte ist derzeit abgeschaltet. Falls sie
     zurückkommt, bekommt sie ihre Beschriftung wieder davor. */
  .preis-table tbody td:not(.preis)::before {
    content: attr(data-spalte) ': ';
    color: var(--ink-600);
  }
  .preis-table tbody td[data-spalte="Dauer"]::before,
  .preis-table tbody td[data-spalte="Duration"]::before { content: none; }

  /* Zwischenüberschrift „Ergänzende Leistungen" bleibt eine Überschrift
     und wird keine Karte. */
  .preis-table tbody tr.group {
    border: 0; background: none; padding: 0;
    margin: var(--space-8) 0 var(--space-4);
  }
  .preis-table tbody tr.group th {
    padding: 0;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent-600);
  }
}

/* A2 — seitwärts scrollbare Tabellen erkennbar und bedienbar -------------
   Die Klasse setzt js/main.js nur, wenn wirklich etwas zu scrollen ist.
   Der Verlauf am rechten Rand ist der einzige Hinweis darauf, dass die
   Tabelle weitergeht; ohne ihn hält man sie für vollständig.          */
.table-scroll.ist-scrollbar {
  /* Der Verlauf hängt am Behälter und scrollt nicht mit. */
  background:
    linear-gradient(to left, rgba(23, 37, 42, .10), transparent 40px) right / 40px 100% no-repeat;
}
.table-scroll.ist-scrollbar:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}

/* A3 — offenes Menü ------------------------------------------------------
   ⚠️ HIER STAND EINE SCROLL-SPERRE. Sie ist wieder raus, weil sie die
   Seite auf dem Handy einfrieren ließ:

     .menue-offen, .menue-offen body { overflow: hidden; }

   `.site-header` ist `position: sticky`. Bekommt `html` ein
   `overflow: hidden`, verliert Sticky seinen scrollenden Bezug — der
   Browser setzt die Scroll-Position zurück, und auf iOS bleibt das
   Wischen anschließend ganz blockiert. Wer weit unten das Menü öffnete,
   musste die Seite neu laden.

   Nötig war die Sperre ohnehin nicht: Das Menü hängt mit
   `position: absolute` am klebenden Header und wandert beim Scrollen
   mit. Es verschwindet also nicht, wenn man dahinter wischt.

   Falls das doch einmal gewünscht ist: nicht über `overflow`, sondern
   über `position: fixed` am <body> mit gemerktem und danach wieder
   gesetztem Scroll-Stand. Alles andere bricht Sticky.

   Die Klasse `menue-offen` bleibt — sie blendet nur noch den
   schwebenden Knopf aus, und das ist harmlos.                        */

/* Der Sticky-CTA lag auf derselben Ebene wie das Menü (beide z-index 90)
   und deckte dessen unteren Rand ab — der Sprachumschalter verschwand
   halb dahinter. Bei offenem Menü hat er nichts zu suchen: Der Knopf
   steht im Menü ohnehin. */

/* Der Sticky-CTA lag auf derselben Ebene wie das Menü (beide z-index 90)
   und deckte dessen unteren Rand ab — der Sprachumschalter verschwand
   halb dahinter. Bei offenem Menü hat er nichts zu suchen: Der Knopf
   steht im Menü ohnehin. */
.menue-offen .sticky-cta { display: none; }

/* A4 — Sticky-CTA nur zeigen, wenn er etwas hinzufügt --------------------
   Solange der Terminknopf im Kopfbereich sichtbar ist, stünde derselbe
   Knopf zweimal auf dem Schirm.                                       */
.sticky-cta {
  transition: opacity .2s, transform .2s;
}
.sticky-cta--versteckt {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* B2 + C1 — Leistungskarten: ganze Fläche antippbar, kompakter --------------
   Vorher reagierten von 295 px Kartenhöhe nur die 27 px der Überschrift.
   Das ::after des Überschriftenlinks legt sich über die ganze Karte, ohne
   dass Links ineinander verschachtelt werden müssten.

   Damit die Karte nicht nur klickbar ist, sondern auch so aussieht,
   bekommt sie beim Überfahren die Akzentfarbe — und der Fokusring landet
   auf der Karte, nicht auf den paar Pixeln der Überschrift.             */
.service-detail--klickbar { position: relative; }
.service-detail--klickbar .service-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.service-detail--klickbar .service-link { text-decoration: none; }
.service-detail--klickbar:hover { border-color: var(--accent-200); }
.service-detail--klickbar:has(.service-link:focus-visible) {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}
.service-detail--klickbar .service-link:focus-visible { outline: none; }

/* „Mehr dazu" ist kein Link mehr, sieht aber weiter wie einer aus —
   es ist der sichtbare Hinweis, dass die Karte irgendwohin führt. */
.service-more {
  margin: var(--space-3) 0 0;
  color: var(--accent-600);
  font-size: var(--text-sm);
  font-weight: 600;
}
.service-more::after { content: ' \2192'; }

@media (max-width: 720px) {
  /* Zehn Karten à 295 px waren allein 2950 px. Weniger Polsterung und
     eine auf drei Zeilen begrenzte Beschreibung — der volle Text steht
     eine Antippbewegung entfernt auf der Einzelseite. */
  .services-detailed .service-detail { padding: var(--space-5); }
  .services-detailed .service-detail > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

/* C2 — Karussell-Punkte großzügiger ---------------------------------------
   Sichtbar waren 11 px, die Trefferfläche lag bei 32×32. Das erfüllt
   WCAG 2.5.8 (24 px), bleibt aber unter Googles Empfehlung von 48 px.  */
@media (max-width: 720px) {
  .karussell-punkte { gap: var(--space-3); }
  .karussell-punkt { width: 10px; height: 10px; }
  .karussell-punkt::before { inset: -17px; }   /* 44×44 Trefferfläche */
}

/* C3 + B4 — Sprungmenü über langen Textseiten -----------------------------
   Gleiche Optik wie die Themenübersicht der FAQ, nur linksbündig statt
   zentriert: Bei dreizehn Abschnitten der Datenschutzerklärung liest
   sich eine zentrierte Wolke schlechter als eine Liste.                */
.artikel-jump {
  margin: 0 0 var(--space-10);
  padding: var(--space-5);
  background: var(--ink-100);
  border-radius: var(--radius);
}
.artikel-jump ul { justify-content: flex-start; }
.artikel-jump a { background: var(--surface); }

/* Sprungziele nicht unter die klebende Kopfzeile rutschen lassen. */
.prose-block h2,
.legal-text h2 { scroll-margin-top: 110px; }

/* D1 — .eyebrow war 12,8 px bei 1,5 px Sperrung ---------------------------
   Versalien mit Sperrung lesen sich kleiner, als sie sind. Auf dem Handy
   eine Stufe hoch; am Rechner bleibt es bei der bisherigen Größe.      */
@media (max-width: 720px) {
  .eyebrow { font-size: var(--text-sm); letter-spacing: .1em; }
}

/* Lange Wörter in Überschriften ------------------------------------------
   Beim Durchgang über alle Seiten aufgefallen und älter als dieser
   Umbau: „Datenschutzerklärung", „Ringbandverletzung",
   „Sportphysiotherapie" und „Behandlungsspektrum" sind bei 327 px
   Textbreite breiter als die Zeile. Sie ragten bis zu 56 px hinaus und
   machten die ganze Seite seitlich scrollbar.

   `hyphens: auto` trennt sie an den richtigen Stellen — das <html> trägt
   das passende `lang`, sonst käme dabei Unsinn heraus. `break-word` ist
   die Rückfalllinie für Browser ohne deutsches Trennmuster: lieber hart
   umgebrochen als über den Rand hinaus.                                */
@media (max-width: 720px) {
  h1, h2, h3, .hero h1, .page-hero h1 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Sprungmenü auf dem Handy als schlichte Liste ---------------------------
   Als Pillenwolke brauchte es bei den dreizehn Abschnitten der
   Datenschutzerklärung fast 680 px — mehr, als es an Scrollweg spart.
   Einspaltig, mit Trennlinien, ist es halb so hoch und liest sich als
   Inhaltsverzeichnis statt als Schlagwortwolke.                        */
@media (max-width: 720px) {
  .artikel-jump {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
  }
  .artikel-jump ul {
    display: block;
    margin: 0; padding: 0;
    list-style: none;
  }
  .artikel-jump li + li { border-top: 1px solid var(--ink-200); }
  .artikel-jump a {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: var(--space-3) 0;   /* 44 px Trefferhöhe */
    font-size: var(--text-sm);
  }
}

/* Hinweise unter den Standortkarten --------------------------------------
   Vorher drei einzelne .hours-note direkt am Raster: linksbündig unter
   der ersten Spalte (574 von 1092 px Rasterbreite), zwei davon in
   15,2 px, der dritte in 14,4 px mit doppeltem Abstand. Sie sahen aus,
   als wären sie übrig geblieben.

   Jetzt ein Block über die volle Breite der Karten, angebunden durch
   dieselbe Grundfläche und eine Linie oben. Die Sätze stehen in zwei
   Spalten, solange Platz ist — untereinander wirkten drei kurze Zeilen
   auf 1092 px verloren.                                              */
.standort-hinweise {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-200);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3) var(--space-8);
  align-items: start;
}
.standort-hinweise p {
  margin: 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 46ch;
}

/* Alle drei Hinweise in einer Größe. Die Trägerangabe stand kurzzeitig
   eine Stufe kleiner — das war genau die uneinheitliche Formatierung,
   die den Block vorher zerfallen ließ. Sie unterscheidet sich jetzt nur
   noch durch ihre Stellung: über die volle Breite unter den beiden
   anderen, damit sie deren Zweispaltigkeit nicht aufbricht. */
.standort-hinweise-traeger {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
}

@media (max-width: 720px) {
  .standort-hinweise {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    gap: var(--space-3);
  }
  .standort-hinweise-traeger { padding-top: var(--space-2); }
}

/* Standort-Überschriften im Karussell auf gleicher Höhe halten -----------
   „Bahrenfeld — Otto-von-Bahrenpark" braucht auf dem Handy zwei Zeilen,
   „Eppendorf — UKE-Gelände" nur eine. Dadurch begann die eine
   Zeitentabelle 24 px tiefer als die andere — beim Wischen von Karte zu
   Karte springt dann alles.

   Am Rechner löst das `subgrid` (siehe .standort-spalten weiter oben).
   Im Karussell gibt es kein gemeinsames Raster mehr, deshalb hier zwei
   Zeilen Platz reservieren. `2lh` ist genau die Zeilenhöhe der
   Überschrift; `2.4em` ist der Rückfall für Browser ohne lh-Einheit.  */
@media (max-width: 720px) {
  .karussell > .standort-spalte > h3 {
    min-height: 2.4em;
    min-height: 2lh;
  }
}