/* =========================================================
   Physiotherapie Pauker — styles.css
   Warm & spa, exklusiv. Design-Tokens abgeleitet vom weißen,
   architektonischen Logo. Mobile-first.
   ========================================================= */

/* ---------- Schrift: Archivo, lokal eingebunden (keine Verbindung zu Google) ----------
   Variable Schrift: eine Datei deckt die Staerken 400–700 ab. Lizenz: Assets/Fonts/OFL.txt */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("Assets/Fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("Assets/Fonts/archivo-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;
}

/* ---------- Tokens ---------- */
:root {
  /* Basis-Palette: "Stein & Leinen" (Grau #4A4846) — fest verankert, gilt fuer alle Seiten */
  --sage-deep: #4A4846;
  --sage-deeper: #3A3937;
  --sage-soft: #9A958E;
  --sand: #ECE6DB;
  --linen: #E1DACE;
  --clay: #9AA79B;
  --clay-deep: #7C8A7D;
  --ink: #2C2A28;
  --ink-soft: #5E5952;
  --cream: #F7F3EC;
  /* Einzige warme Akzentfarbe (gedaempftes Cognac): Hero-Link, Nach-oben-Pfeil, Stern, Link-Hover, Praxis-Icon.
     --accent fuer dunkle Flaechen, --accent-deep fuer Text auf hellen Flaechen */
  --accent: #BC9A84;
  --accent-deep: #7D5F4C;
  /* Mitlaufender Termin-Button: gedaempftes Cognac */
  --fab-bg: var(--accent);
  --fab-bg-hover: #AD8A73;
  --cream-dim: #CBC5BB;
  --border: #D9D2C6;
  --border-dark: rgba(240, 235, 225, 0.15);

  /* Icon-Kreise: tieferes Salbei (Akzentgruen + Anthrazit) -> weisse Icons stechen hervor.
     Nutzt --clay/--sage-deep und passt sich jeder gewaehlten Palette an. */
  --icon-circle: color-mix(in srgb, var(--clay) 68%, var(--sage-deep));

  --font-display: "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;

  --wrap: 1160px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* spacing scale (8pt rhythm) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --radius: 0px;
  --radius-sm: 0px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

/* ---------- Focus / a11y ---------- */
:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}
.section-sage :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  padding: 0.6rem 1.1rem; border-radius: 0 0 10px 10px;
  z-index: 200; transition: top 0.2s var(--ease); text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative;
  scroll-margin-top: calc(var(--header-h) + 0.75rem); }
.section-sand  { background: var(--sand);  color: var(--ink); }
.section-linen { background: var(--linen); color: var(--ink); }
.section-sage  { background: var(--sage-deep); color: var(--cream); }

/* thin connector line between sections (the signature thread) */
.section-sand::before,
.section-linen::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--border);
}

/* ---------- Section-Illustrationen ----------
   Grundregel: Illustrationen liegen NUR auf freien Flaechen und nie hinter Text.
   Position und Groesse berechnet script.js bei jedem Laden und jeder Fenstergroesse
   (freier Seitenrand bzw. leere Flaeche neben der Ueberschrift). Ist nirgends genug
   Platz (z. B. Handy), bleiben sie unsichtbar. */
.section--illu { overflow: hidden; }
.section--illu > .wrap { position: relative; z-index: 1; }   /* Text/Lesbarkeit hat Vorrang */
.section-illu, .spezial-illu, .leistungen-illu {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  visibility: hidden; max-width: none;
}
.section-illu.is-placed, .spezial-illu.is-placed, .leistungen-illu.is-placed { visibility: visible; }
.section-illu {
  background-repeat: no-repeat; background-position: center;
  background-size: contain;                    /* Seitenverhältnis exakt, keine Verzerrung */
  opacity: 0.5;
}
.section-sage .section-illu { opacity: 0.52; }  /* auf dunklem Grund etwas kräftiger sichtbar */
.illu-ruecken { background-image: url("Assets/Illustrations%20Spine/back-neutral-rand.webp?v=1"); }
.illu-faq { background-image: url("Assets/Illustrations%20Spine/spine%20faq.webp"); }
#faq .section-illu { opacity: 0.16; mix-blend-mode: multiply; }

/* ---------- Logo (single-colour mask so it can take any brand colour) ---------- */
.logo-mark {
  display: block;
  width: 210px; height: 54px;
  background-color: var(--cream);
  -webkit-mask: url("Assets/logo.webp") no-repeat left center;
  mask: url("Assets/logo.webp") no-repeat left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.logo-mark--soft { background-color: var(--sage-soft); width: 240px; height: 62px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.4rem; min-height: 46px;
  /* Buttons leicht gerundet – unabhaengig vom gewaehlten Design */
  border-radius: 12px !important; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-icon { width: 20px; height: 20px; border-radius: 5px; flex: none; display: block; }
.btn-lg { padding: 0.95rem 1.8rem; min-height: 52px; font-size: 1.02rem; }
.btn-lg .btn-icon { width: 22px; height: 22px; border-radius: 6px; margin-left: -2px; }
.btn-block { width: 100%; }

.btn-clay { background: var(--clay); color: #fff; }
.btn-clay:hover { background: var(--clay-deep); }

/* Header-CTA: solides Salbeigruen, rund (wie der Buchen-Button) */
.btn-ghost { background: var(--clay); color: #fff; border-color: transparent; }
.btn-ghost:hover { background: var(--clay-deep); color: #fff; }
/* Termin-Link in der Kopfzeile: Creme-Schrift, fetter als die uebrigen Menuepunkte,
   mit festem Cognac-Unterstrich */
.nav-desktop .btn-termin { background: none; color: var(--cream); border: 0; border-radius: 0 !important;
  min-height: 0; padding: 0.35rem 0; margin-left: 0.35rem; font-weight: 700; letter-spacing: 0; }
.nav-desktop .btn-termin:hover { background: none; color: var(--cream); }
.btn-termin-text { border-bottom: 2px solid var(--accent); padding-bottom: 2px;
  transition: border-color 0.25s var(--ease); }
.nav-desktop .btn-termin:hover .btn-termin-text { border-color: var(--cream); }

.btn-line { border-color: rgba(244,238,226,0.5); color: var(--cream); }
.btn-line:hover { border-color: var(--cream); background: rgba(244,238,226,0.08); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--sage-deep);
  border-bottom: 1px solid var(--border-dark);
  transition: padding 0.3s var(--ease), background-color 0.3s var(--ease);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--sage-deep) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand .logo-mark { width: clamp(200px, 19vw, 240px); height: clamp(44px, 4.1vw, 52px); background-color: var(--cream); }

.nav-desktop { display: none; align-items: center; gap: clamp(0.55rem, 1.1vw, 1.1rem); }
.nav-desktop a {
  color: var(--cream); text-decoration: none; font-weight: 500;
  font-size: clamp(0.9rem, 0.95vw, 0.98rem);
  position: relative; padding-block: 0.35rem; white-space: nowrap;
}
.nav-desktop a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--clay); transition: width 0.25s var(--ease);
}
.nav-desktop a:not(.btn):hover::after { width: 100%; }

/* toggle */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 46px; height: 46px; padding: 0 11px;
  background: transparent; border: 1px solid var(--border-dark); border-radius: 10px;
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--cream); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* mobile menu */
.nav-mobile {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
  background: var(--sage-deeper);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0.4s;
  display: flex; align-items: flex-start; padding: var(--s-5) var(--gutter);
}
.nav-mobile[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-mobile nav { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.nav-mobile a {
  color: var(--cream); text-decoration: none;
  font-family: var(--font-display); font-size: 2rem; font-weight: 500;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border-dark);
}
.nav-mobile a.btn {
  font-family: var(--font-body); font-size: 1.02rem; border-bottom: none;
  margin-top: var(--s-3); justify-content: center;
}

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--clay); margin-bottom: 1rem;
}
.eyebrow--dark { color: var(--clay-deep); }
/* Section-Labels (DER ANSATZ, SCHWERPUNKTE, LEISTUNGEN, IHR WEG ZU UNS, ÜBER MICH,
   DIE PRAXIS, STANDORT, TERMIN & KONTAKT) etwas größer & kräftiger, damit sie
   präsenter wirken. Nur innerhalb echter Content-Sections – die Hero-Zeile
   (eigene Regel, keine .section-Klasse) bleibt bewusst unberührt. Drei Klassen,
   damit Gewicht/Spacing einheitlich greifen (auch über Dev-Design-Voreinstellungen). */
.section .wrap .eyebrow {
  font-size: 1.35rem; letter-spacing: 0.14em; font-weight: 700; margin-bottom: 1.2rem;
}
.section-head { max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title {
  font-size: clamp(1.9rem, 4.3vw, 3rem); line-height: 1.08; letter-spacing: -0.015em;
}
.section-title--light { color: var(--cream); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 820px);
  display: flex; align-items: center;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.hero-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.motion-path { stroke-linecap: round; }
.hero-inner { position: relative; z-index: 1; }

/* ---------- Hero-Slideshow (3 Bilder, Crossfade) ---------- */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-image: var(--img); background-size: cover;
  background-position: var(--pos, center); background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
/* Slide oben beschneiden (Kopf/Haaransatz weg): Bildhoehe aus der Hero-Groesse berechnet,
   damit auf jeder Breite genau der obere Anteil --cut des Fotos wegfaellt.
   --ar = Seitenverhaeltnis des Fotos. Ohne Container-Query-Support gilt "cover". */
.hero-slides { container-type: size; }
.hero-slide--cut-top {
  --h: max(calc(100cqh / (1 - var(--cut))), calc(100cqw / var(--ar)));
  background-size: auto var(--h);
  background-position: 50% calc(var(--h) * var(--cut) * -1);
}
/* Overlay fuer Textlesbarkeit: Verlauf von links (hinter dem Text) nach rechts transparent */
.hero-slides::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--hero-overlay-opacity, 0.70);
  background: linear-gradient(90deg,
    var(--hero-overlay-color, var(--sage-deep)) 0%,
    var(--hero-overlay-color, var(--sage-deep)) 22%,
    color-mix(in srgb, var(--hero-overlay-color, var(--sage-deep)) 78%, transparent) 42%,
    color-mix(in srgb, var(--hero-overlay-color, var(--sage-deep)) 42%, transparent) 65%,
    color-mix(in srgb, var(--hero-overlay-color, var(--sage-deep)) 10%, transparent) 86%,
    transparent 100%);
}
/* Slideshow ersetzt die Bewegungslinie */
.hero:has(.hero-slides) .hero-line { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* Hero-Hinweiszeile: warmes, helles Creme auf dem Foto — kräftig und leicht
   größer, ohne Fläche/Pill. Dezenter Text-Schatten sichert Kontrast auf hellen
   wie dunklen Bildstellen (Desktop & Mobile). Höhere Spezifität (drei Klassen),
   damit die Werte auch die Dev-Leisten-Voreinstellungen zuverlässig überbieten. */
.hero .hero-inner .eyebrow {
  color: var(--cream); font-weight: 700;
  font-size: 0.88rem;
  text-shadow: 0 1px 3px rgba(20, 18, 16, 0.5);
}

.hero-title {
  font-size: clamp(2.35rem, 7vw, 4.7rem);
  line-height: 1.04; letter-spacing: -0.02em; font-weight: 500;
  max-width: 16ch; color: var(--cream);
  margin-bottom: var(--s-3);
}
/* "Fortschritt": gleiche aufrechte Serifenschrift, Akzentfarbe wie der Clay-Button */
.hero-title em { font-style: normal; font-weight: inherit; color: var(--clay); }
.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.6;
  max-width: 64ch; color: var(--cream-dim); margin-bottom: var(--s-4);
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-bottom: var(--s-4); }
/* Zweiter Hero-Weg: Milchglas-Knopf – leicht durchscheinend, ohne Rahmen, so hoch wie der Buchen-Knopf */
.hero-link { display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.95rem 1.8rem; border-radius: 12px; border: 1px solid transparent;
  background: rgba(247, 243, 236, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.25s var(--ease); }
.hero-link:hover, .hero-link:focus-visible { background: rgba(247, 243, 236, 0.26); color: #fff; }

/* Ort + Leitbild als eine ruhige Zeile unter den Knoepfen (ersetzt die dreispaltige Infoleiste) */
.hero-note { font-size: 0.95rem; line-height: 1.6; letter-spacing: 0.01em; color: var(--cream-dim); }
.hero-note a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(244, 238, 226, 0.5);
  transition: text-decoration-color 0.2s var(--ease);
}
.hero-note a:hover { text-decoration-color: currentColor; }
/* Schmal: beide Teile untereinander statt Umbruch mitten in der Zeile */
.hero-note > span { white-space: nowrap; }
@media (max-width: 599px) {
  .hero-note > span:not(.hero-note-dot) { display: block; }
  .hero-note-dot { display: none; }
}

.scroll-hint { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid var(--border-dark); border-radius: 20px;
  display: none; z-index: 1; }
.scroll-hint span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px;
  margin-left: -1.5px; background: var(--clay); border-radius: 2px;
  animation: scrollpulse 1.8s var(--ease) infinite; }
@keyframes scrollpulse { 0%,100%{opacity:.2; transform:translateY(0);} 50%{opacity:1; transform:translateY(8px);} }

/* ---------- Lead text ---------- */
.lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.5;
  max-width: 30ch; color: var(--ink);
}
.section-head + .lead, .lead { max-width: 62ch; }

/* ---------- Principles (Ansatz) ---------- */
.principles {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.principle { padding-top: var(--s-3); border-top: 2px solid var(--ink); }
.principle-index {
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em; color: var(--clay-deep); display: block; margin-bottom: 0.9rem;
}
.principle h3 { font-size: 1.4rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.principle p { color: var(--ink-soft); max-width: 40ch; }

/* ---------- Leistungsspektrum: Split-Layout (Variante 5) ----------
   Links: Eyebrow + Titel + Einleitung. Rechts: zwei Leistungsspalten als
   feine Liste mit Trennlinien (keine Karten), kleine Salbei-Icon-Kreise.
   Beschreibung erscheint per Hover/Fokus/Tippen (siehe weiter unten). */
/* Ueberschrift + Einleitung oben (volle Breite), Leistungen darunter */
.leistungen-split { display: block; }
.leistungen-intro { max-width: 52ch; }
.leistungen-lead { margin-top: clamp(1rem, 2vw, 1.4rem); color: var(--cream-dim);
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6; max-width: 46ch; }

.leistungen-acc { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); align-items: start; }
@media (min-width: 560px) { .leistungen-acc { grid-template-columns: 1fr 1fr; } }
.acc-col { display: flex; flex-direction: column; }

/* Zeile: feine Trennlinie statt Karte; aktiver Eintrag = dezenter Salbei-Grund */
.acc-item { border-top: 1px solid rgba(247, 243, 236, 0.14); border-radius: 10px;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.acc-col > .acc-item:last-child { border-bottom: 1px solid rgba(247, 243, 236, 0.14); }
.acc-item:hover, .acc-item:focus-within, .acc-item.is-open {
  background: color-mix(in srgb, var(--clay) 13%, transparent);
  border-top-color: color-mix(in srgb, var(--clay) 50%, transparent); }

/* Kopf (Button): [Salbei-Icon-Kreis] Name [Pfeil] */
.acc-row {
  width: 100%; display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.15rem);
  padding: clamp(1.15rem, 2.1vw, 1.55rem) clamp(0.75rem, 1.4vw, 1.1rem);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--cream); font-family: inherit;
}
.acc-icon { flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: var(--icon-circle); color: #fff; display: grid; place-items: center; }
.acc-icon svg { width: 31px; height: 31px; display: block;
  fill: #fff; stroke: #fff; stroke-width: 0.14;
  stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; }
.acc-icon .service-icon-img { width: 31px; height: 31px; display: block; background-color: #fff;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
/* Figuren-/Hand-Icons mit feiner Zeichnung groesser -> klar lesbar (Krankengymnastik,
   Manuelle Therapie, Return to Sport); geometrische Icons bleiben bei 31px */
.acc-row[aria-controls="acc-0"] .acc-icon svg,
.acc-row[aria-controls="acc-1"] .acc-icon svg,
.acc-row[aria-controls="acc-7"] .acc-icon svg { width: 40px; height: 40px; }
.acc-name { flex: 1 1 auto; min-width: 0; font-size: clamp(1.08rem, 1.45vw, 1.22rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--cream); }
.acc-chevron { flex: none; width: 18px; height: 18px; color: var(--clay);
  transition: transform 0.3s var(--ease); }
.acc-row[aria-expanded="true"] .acc-chevron,
.acc-item.is-open .acc-chevron,
.acc-item:focus-within .acc-chevron { transform: rotate(180deg); }
.acc-row:focus-visible { outline: 2px solid var(--clay); outline-offset: -3px; border-radius: 10px; }

/* Aufklapp-Inhalt: sanftes Ein-/Ausblenden (Fade + Hoehe), kein Layout-Ruck */
.acc-desc { overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.32s var(--ease), opacity 0.24s var(--ease); }
/* Sichtbar bei: Touch-Toggle (.is-open) und Tastaturfokus — geraeteunabhaengig */
.acc-item.is-open > .acc-desc,
.acc-item:focus-within > .acc-desc { max-height: 20rem; opacity: 1; }
/* Desktop mit Maus: Hover blendet ein (kein Klick noetig) */
@media (hover: hover) and (pointer: fine) {
  .acc-item:hover > .acc-desc { max-height: 20rem; opacity: 1; }
  .acc-item:hover .acc-chevron { transform: rotate(180deg); }
}
.acc-desc p { color: var(--cream-dim); font-size: 1rem; line-height: 1.6; margin: 0;
  padding: 0 clamp(0.75rem, 1.4vw, 1.1rem) clamp(0.35rem, 1vw, 0.5rem) calc(54px + clamp(0.9rem, 1.6vw, 1.15rem) + clamp(0.75rem, 1.4vw, 1.1rem)); }
/* „Mehr erfahren" -> Detailseite, dezent in Salbeigrün, am Ende der Beschreibung */
.acc-more { display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0.25rem clamp(0.75rem, 1.4vw, 1.1rem) clamp(1rem, 2vw, 1.3rem) calc(54px + clamp(0.9rem, 1.6vw, 1.15rem) + clamp(0.75rem, 1.4vw, 1.1rem));
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--cream); text-decoration: none; transition: gap 0.2s var(--ease); }
/* wie „Leistungen ansehen": Schrift creme, Unterstrich + Pfeil in Cognac */
.acc-more-text { padding-bottom: 3px; border-bottom: 2px solid var(--accent); }
.acc-more-arrow { color: var(--accent); }
.acc-more:hover, .acc-more:focus-visible { color: #fff; gap: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .acc-desc, .acc-chevron, .acc-item, .acc-more { transition: none; }
}

/* Wirbelsaeulen-Illustration der Leistungen (Platzierung: script.js) */
#leistungen { overflow: hidden; isolation: isolate; }
#leistungen .wrap { position: relative; z-index: 1; }   /* Inhalt immer über der Illustration */
.leistungen-illu { mix-blend-mode: screen; opacity: 0.42; }
.services-note { margin-top: var(--s-3); font-size: 0.92rem; color: var(--ink-soft); }
.services-note em { color: var(--clay-deep); font-style: normal; font-weight: 600; }

/* ---------- Spezialisierungen ---------- */
/* Einleitungszeile hell auf dem dunklen Sage-Abschnitt */
.section-sage .lead { color: var(--cream-dim); }

/* Dekorative Wirbelsaeule links im Rand (Platzierung: script.js) */
#spezialisierungen { overflow: hidden; isolation: isolate; }
#spezialisierungen .wrap { position: relative; z-index: 1; }
.spezial-illu { mix-blend-mode: multiply; opacity: 0.38; }
.spezial-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.spezial-card {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.spezial-card:hover {
  border-color: var(--clay); transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(42, 38, 34, 0.5);
}
.spezial-icon {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--icon-circle);
  display: grid; place-items: center; color: #fff;
  margin-bottom: var(--s-3);
}
.spezial-icon svg {
  width: 30px; height: 30px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* einfarbiges PNG-Icon (per Maske) -> weisses Symbol im gruenen Kreis */
.spezial-icon-img {
  width: 36px; height: 36px; display: block;
  background-color: currentColor;
  -webkit-mask: var(--i) no-repeat center / contain;
          mask: var(--i) no-repeat center / contain;
}
/* explizit dunkel, damit die Überschrift auf der cremefarbenen Karte
   auch im dunklen Sage-Abschnitt lesbar bleibt (statt geerbtem Cream) */
.spezial-name { font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; color: var(--ink); }
.spezial-card p { color: var(--ink-soft); }

/* ---------- Steps (Ablauf) ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  counter-reset: step; margin-top: clamp(2rem,4vw,3rem); }
.step { display: flex; gap: var(--s-3); align-items: flex-start; }
.step-num {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--cream);
  border: none;
  background: var(--clay);
  box-shadow: 0 8px 20px -10px rgba(42, 38, 34, 0.55);
}
.step-body h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.step-body p { color: var(--ink-soft); max-width: 46ch; }

/* ---------- Praxis ---------- */
.praxis-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.praxis-text .lead { margin-top: var(--s-3); }
.creds { margin-top: var(--s-4); display: grid; gap: 0.75rem; }
.creds li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.creds li::before { content: ""; position: absolute; left: 0; top: 0.65em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.creds .muted { color: var(--sage-soft); }
.praxis-figure { margin: 0; }
.figure-placeholder {
  aspect-ratio: 4 / 5; border: 1.5px dashed var(--border);
  border-radius: var(--radius); display: grid; place-content: center; gap: 1rem;
  text-align: center; padding: 2rem; background: rgba(124,139,122,0.06);
}
.figure-placeholder .logo-mark { margin-inline: auto; }
.figure-placeholder p { color: var(--sage-soft); font-size: 0.92rem; }

/* ---------- Über mich ---------- */
.ueber-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }

/* Portrait mit warmem Duoton (passend zur Palette) */
.ueber-portrait { position: relative; width: 100%; max-width: 340px; margin-inline: auto; }
.portrait {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--sage-deep);
  box-shadow: 0 30px 60px -30px rgba(42, 38, 34, 0.55);
  aspect-ratio: 1024 / 1536;
}
/* Foto genau wie das Original: keine Filter, kein Farbueberzug, keine Vignette */
.portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: none;
}
.portrait-badge {
  position: absolute; left: -14px; bottom: 22px; z-index: 2;
  background: var(--cream); color: var(--sage-deep);
  padding: 0.6rem 1rem 0.65rem; border-radius: 12px;
  box-shadow: 0 14px 30px -14px rgba(42, 38, 34, 0.5);
}
.portrait-badge b { display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; font-size: 0.95rem; }
.portrait-badge span { display: block; font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.02em; }

.ueber-quote {
  margin: var(--s-3) 0 0; padding-left: var(--s-3);
  border-left: 2px solid var(--clay);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 2.3vw, 1.5rem); line-height: 1.45; color: var(--ink);
  max-width: 46ch;
}
/* Kurze persönliche Einführung — bewusst zurückhaltender als das Zitat */
.ueber-intro {
  margin: var(--s-3) 0 0;
  max-width: 54ch;
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.75;
  color: var(--ink-soft);
}
/* Handy + Tablet: kleines Portraet links neben „Über mich / Toni Pauker“ statt bildschirmfuellend */
@media (max-width: 959px) {
  .ueber-grid { grid-template-columns: clamp(105px, 38%, 220px) 1fr; column-gap: clamp(1rem, 3vw, 2rem); row-gap: 0; align-items: center; }
  .ueber-portrait { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
  .ueber-portrait .portrait { aspect-ratio: 3 / 4; box-shadow: 0 18px 36px -22px rgba(42, 38, 34, 0.55); }
  .ueber-portrait .portrait img { object-position: 50% 22%; }
  .ueber-main { display: contents; }
  .ueber-main > .section-head { grid-column: 2; grid-row: 1; margin-bottom: 0 !important; }
  .ueber-main > :not(.section-head) { grid-column: 1 / -1; }
  .ueber-main > .ueber-quote { margin-top: var(--s-4); }
}

.tl-heading { margin: var(--s-5) 0 0; }

/* ---------- Vertikaler Zeitstrahl ---------- */
.timeline { position: relative; margin-top: var(--s-3); padding-left: 2.25rem; }
.tl-line {
  position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--clay) 0%, var(--sage-soft) 100%);
  border-radius: 2px; transform-origin: top center;
}
.tl-item { position: relative; padding-bottom: var(--s-4); }
.tl-item:last-child { padding-bottom: 0; }
.tl-marker {
  position: absolute; left: calc(-2.25rem + 0px); top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--linen); border: 2px solid var(--clay);
  box-shadow: 0 0 0 4px var(--linen);
}
.tl-year {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clay-deep); font-variant-numeric: tabular-nums;
}
.tl-title { font-size: 1.18rem; letter-spacing: -0.01em; margin-top: 0.15rem; }
.tl-note { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.15rem; }

/* Zeitstrahl-Animation */
.reveal-group > .tl-line {
  opacity: 1; transform: scaleY(0);
  transition: transform 1.3s var(--ease);
}
.reveal-group > .tl-line.is-visible { transform: scaleY(1); }
.tl-marker { transform: scale(0.35); transition: transform 0.55s var(--ease); }
.reveal-group > .tl-item.is-visible .tl-marker { transform: scale(1); }

/* ---------- Kontakt ---------- */
.kontakt-book { margin: var(--s-4) 0 0; }
.kontakt-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
.kontakt-lead { color: var(--cream-dim); max-width: 42ch; margin-top: var(--s-2); }
.kontakt-details { display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  margin-top: var(--s-5); align-items: start; }
/* Oeffnungszeiten als letzter Eintrag in der Spalte (gleicher Abstand wie die anderen) */
.kd-hours { margin-top: 0; }
/* Beschriftungen in hellem Cognac, etwas groesser/kraeftiger – gut lesbar auf dem dunklen Grund */
.kontakt-details dt { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: #D2B6A3; margin-bottom: 0.35rem; }
.kontakt-details dd { color: var(--cream); line-height: 1.5; }
.kontakt-details a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 1px; }
.kontakt-details a:hover { color: var(--accent); }

/* form */
.kontakt-form {
  background: var(--sand); color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius);
}
.form-note { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s-3); }
.field { margin-bottom: var(--s-3); display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--s-3); }
.field label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; min-height: 46px; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(192,132,98,0.18);
}
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #B4442F; }
.field-error { min-height: 1.1em; font-size: 0.84rem; color: #B4442F; margin-top: 0.35rem; }
.form-hint { font-size: 0.84rem; color: var(--ink-soft); margin-top: var(--s-2); }
/* Checkbox „Privatpatient/Selbstzahler" */
.field-check .check { flex-direction: row; align-items: flex-start; gap: 0.6rem;
  cursor: pointer; margin-bottom: 0; }
.field-check input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 0;
  padding: 0; margin-top: 1px; accent-color: var(--clay); cursor: pointer; }
.field-check .check span { font-weight: 500; font-size: 0.95rem; line-height: 1.4; }
/* Datei-Upload „Rezept hochladen" */
.field-opt { font-weight: 400; color: var(--ink-soft); font-size: 0.85em; }
.field-file .field-label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
/* Nativen File-Input verstecken (Button-Text ist nicht uebersetzbar), eigenes DE-Steuerelement */
.field-file .file-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field-file .file-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.field-file .file-btn {
  font-family: var(--font-body); font-size: 0.86rem; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: 12px; font-weight: 600;
  /* leicht transparentes gedaempftes Cognac, wie „Karte laden" */
  border: 1px solid var(--accent); color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.field-file .file-btn:hover { border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 24%, transparent); }
.field-file .file-native:focus-visible + .file-row .file-btn,
.field-file .file-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.field-file .file-name { font-size: 0.88rem; color: var(--ink-soft); }
.field-file .file-name[data-has-file="true"] { color: var(--ink); font-weight: 500; }
/* Kreuz zum Entfernen der gewaehlten Datei */
.field-file .file-chosen { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 0 1 auto; }
.field-file .file-chosen .file-name { min-width: 0; overflow-wrap: anywhere; }
.field-file .file-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 50%;
  color: var(--accent-deep); background: transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.field-file .file-clear:hover { border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.field-file .file-clear:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.field-file .file-clear[hidden] { display: none; }
.field-hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.35rem; }
/* Einwilligung: etwas kleinere Schrift, Link zur Datenschutzerklaerung */
#f-consent + span { font-weight: 400; font-size: 0.88rem; color: var(--ink-soft); }
#f-consent + span a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--clay);
  text-underline-offset: 3px; }
/* Spam-Falle fuer Bots: fuer Menschen unsichtbar */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Rueckmeldung nach dem Absenden */
.form-status { margin: 0 0 var(--s-3); padding: 0.85rem 1rem; font-size: 0.95rem; line-height: 1.5;
  border-left: 3px solid var(--clay); background: color-mix(in srgb, var(--clay) 16%, transparent); color: var(--ink); }
.form-status[data-ok="false"] { border-left-color: #B4442F; background: color-mix(in srgb, #B4442F 10%, transparent); }
.kontakt-form button[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Meine Praxis (Text jetzt, Galerie später vorbereitet) ---------- */
.praxis-intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.praxis-accent {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent);
  display: inline-grid; place-items: center; color: #FBF4EC;
  margin-bottom: var(--s-3);
}
.praxis-accent svg {
  width: 24px; height: 24px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.praxis-text {
  margin-top: var(--s-3); color: var(--cream-dim);
  font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.7;
}
/* Galerie: 1 Spalte mobil, ab Tablet oben das breite Bild, darunter 2x2. */
.praxis-gallery {
  margin-top: var(--s-5); display: grid; grid-template-columns: 1fr; gap: var(--s-3);
}
.praxis-shot {
  display: block; margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--sage-deeper); aspect-ratio: 4 / 3;
  position: relative; cursor: zoom-in; outline-offset: 3px;
}
.praxis-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.55s var(--ease), filter 0.55s var(--ease);
}
/* sehr zurückhaltender Hover: minimaler Zoom + Hauch Helligkeit */
.praxis-shot:hover img,
.praxis-shot:focus-visible img { transform: scale(1.03); filter: brightness(1.03); }
/* Oberes Bild: breites Banner (volle Breite), darunter die weiteren Aufnahmen */
.praxis-shot--wide { aspect-ratio: 2 / 1; }
.praxis-shot--wide img { object-position: center 38%; }
@media (min-width: 640px) {
  .praxis-gallery { grid-template-columns: repeat(2, 1fr); }
  .praxis-shot--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* Dezente Lupe beim Hover/Fokus auf einer Praxis-Kachel */
.praxis-shot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; transform: translate(-50%, -50%) scale(0.8);
  border-radius: 50%; background: rgba(42, 38, 34, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EEE2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    center / 24px 24px no-repeat;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.praxis-shot:hover::after,
.praxis-shot:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Lightbox: ruhige, größere Ansicht beim Klick (weiches Ein-/Ausblenden).
   WICHTIG: geschlossen (hidden) komplett aus dem Layout nehmen, damit sie
   NICHT als unsichtbares Overlay die Seite blockiert. */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24, 22, 20, 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }        /* geschlossen: kein Overlay, keine Events */
.lightbox[data-open="true"] { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.8);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(244, 238, 226, 0.12); border: 1px solid rgba(244, 238, 226, 0.35);
  color: var(--cream); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; z-index: 2;
  transition: background-color 0.25s var(--ease);
}
.lightbox-close:hover { background: rgba(244, 238, 226, 0.22); }
/* Vor/Zurück-Navigation */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 2;
  background: rgba(244, 238, 226, 0.12); border: 1px solid rgba(244, 238, 226, 0.35);
  color: var(--cream); font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color 0.25s var(--ease);
}
.lightbox-nav:hover { background: rgba(244, 238, 226, 0.22); }
.lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 600px) {
  .lightbox-nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .praxis-shot img, .praxis-shot::after { transition: none; }
}

/* ---------- Anfahrt & Parken ---------- */
.anfahrt-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem); align-items: start;
}
.anfahrt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.anfahrt-card {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 1.5rem);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.anfahrt-card:hover {
  border-color: var(--clay); transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(42, 38, 34, 0.5);
}
.anfahrt-icon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--clay);
  display: grid; place-items: center; color: #fff;
}
.anfahrt-icon svg {
  width: 30px; height: 30px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.anfahrt-card-title { font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.anfahrt-card p { color: var(--ink-soft); }

.anfahrt-actions {
  margin-top: var(--s-4); display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s-2);
}
.anfahrt-address { font-size: 0.98rem; color: var(--ink-soft); }
.anfahrt-address a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--clay); padding-bottom: 2px;
}
.anfahrt-address a:hover { color: var(--clay-deep); border-bottom-color: var(--clay-deep); }

/* Inline-SVG-Icon im Button (analog zum PNG-.btn-icon) */
.btn-ico {
  width: 20px; height: 20px; flex: none; margin-left: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* dezenter Outline-Button für „Karte laden" (heller Hintergrund) */
.btn-outline { border-color: var(--sage-soft); color: var(--sage-deep); background: transparent; }
.btn-outline:hover { border-color: var(--sage-deep); background: rgba(51, 66, 58, 0.06); }
/* „Karte laden": leicht transparenter Cognac-Akzent */
.map-placeholder .btn-outline { border-color: var(--accent); color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.map-placeholder .btn-outline:hover { border-color: var(--accent-deep); color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Karte: einwilligungsbasierter Platzhalter (kein Auto-Load von Google) */
.anfahrt-map { width: 100%; }
.map-embed {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--linen); aspect-ratio: 4 / 3; min-height: 260px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 0.7rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--linen);
}
.map-placeholder::before {
  content: ""; position: absolute; inset: 0; opacity: 0.55;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(124, 139, 122, 0.12) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(124, 139, 122, 0.12) 46px 47px);
}
.map-placeholder > * { position: relative; z-index: 1; }
.map-placeholder .anfahrt-icon--lg { width: 60px; height: 60px; background: var(--clay); }
.map-placeholder .anfahrt-icon--lg svg { width: 34px; height: 34px; }
.map-ph-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--sage-deep); }
.map-ph-note { font-size: 0.9rem; color: var(--ink-soft); max-width: 34ch; }
.map-ph-legal { font-size: 0.82rem; }
.map-ph-legal a { color: var(--clay-deep); }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--border-dark); }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.footer-brand .logo-mark { width: 200px; height: 46px; margin-bottom: var(--s-2); }
.footer-brand p { color: var(--cream-dim); font-size: 0.95rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer-nav a { color: var(--cream); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--clay); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--border-dark); }
.footer-legal a { color: var(--cream-dim); text-decoration: none; font-size: 0.9rem; }
.footer-legal a:hover { color: var(--cream); text-decoration: underline; }
.footer-copy { color: var(--sage-soft); font-size: 0.86rem; margin-left: auto; }

/* ---------- Legal pages (Impressum, Datenschutz) ----------
   Nutzen dieselben Bausteine wie die Leistungsseiten (.leistung-detail, .leistung-back,
   .leistung-body) -> Ueberschriften, Abstaende, Listen und Zurueck-Links sind automatisch gleich. */
.wrap--narrow { max-width: 760px; }
.legal .section-title { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.legal .leistung-body h3 {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  margin: 1.4rem 0 0.4rem; color: var(--ink); letter-spacing: 0; }
.legal .leistung-body h2 + h3 { margin-top: 0.6rem; }
/* Links wie in den Leistungstexten (dunkel, Salbei-Unterstrich); lange Adressen duerfen umbrechen */
.legal .leistung-body a:not(.leistung-back) { overflow-wrap: anywhere; }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal, .reveal-group > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible, .reveal-group > .is-visible { opacity: 1; transform: none; }

.motion-path {
  stroke-dasharray: var(--len, 2600); stroke-dashoffset: var(--len, 2600);
  transition: stroke-dashoffset 2.4s var(--ease);
}
.motion-path.is-drawn { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none; }
  .motion-path { stroke-dashoffset: 0 !important; transition: none; }
  .tl-marker { transform: none !important; transition: none; }
  .scroll-hint span { animation: none; }
}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .footer-legal { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .spezial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
  .scroll-hint { display: block; }
}

@media (min-width: 960px) {
  /* Logo deutlich größer, Header nur so weit höher wie nötig */
  :root { --header-h: 108px; }
  .brand .logo-mark { width: 345px; height: 76px; }
  .anfahrt-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .praxis-grid { grid-template-columns: 1.15fr 0.85fr; }
  .ueber-grid { grid-template-columns: 310px 1fr; gap: clamp(3rem, 5vw, 5rem); }
  .ueber-portrait { position: sticky; top: calc(var(--header-h) + 1.5rem); max-width: none; margin-inline: 0; }
  .kontakt-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-legal { grid-column: auto; flex-direction: column; align-items: flex-start; border-top: none; padding-top: 0; }
  .footer-copy { margin-left: 0; margin-top: auto; }
}

/* Desktop-Menü erst zeigen, wenn größeres Logo + alle Menüpunkte sauber passen */
@media (min-width: 1080px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

@media (min-width: 1160px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ============ Leistungs-Detailseiten (wiederverwendbare Vorlage) ============ */
.leistung-detail { padding-top: clamp(6.5rem, 10vw, 9rem); }  /* Platz unter fixem Header */
/* Pfeil haengt links heraus: Text und Unterstrich stehen buendig mit „LEISTUNG"/Titel */
.leistung-back { display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: calc(-0.85em - 0.4rem);
  font-size: 0.95rem; font-weight: 600; color: var(--ink); text-decoration: none;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.leistung-back .lb-arrow { width: 0.85em; flex: none; text-align: left;
  transition: color 0.2s var(--ease); }
/* Handy: schmaler Seitenrand -> kleinerer Pfeil, damit er nicht am Bildschirmrand klebt */
@media (max-width: 600px) {
  .leistung-back { gap: 0.3rem; margin-left: calc(-0.82em - 0.3rem); }
  .leistung-back .lb-arrow { font-size: 0.82em; width: 1em; }
}
/* Schrift dunkel, Unterstrich gedaempftes Cognac (nur unter dem Text, nicht unter dem Pfeil) */
.leistung-back .lb-text { padding-bottom: 2px; border-bottom: 2px solid var(--accent);
  transition: border-color 0.2s var(--ease); }
.leistung-back:hover .lb-arrow, .leistung-back:focus-visible .lb-arrow { color: var(--accent-deep); }
.leistung-back:hover .lb-text, .leistung-back:focus-visible .lb-text { border-bottom-color: var(--accent-deep); }
/* Zurueck-Link am Seitenende: etwas Abstand zum letzten Absatz */
.leistung-back--bottom { margin-top: clamp(2rem, 4vw, 2.75rem); }

.section-title .title-sub { display: block; margin-top: 0.3em; font-size: 0.55em; line-height: 1.2;
  font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.leistung-head { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
/* letzter Wortteil + Symbol bleiben zusammen (Symbol bricht nie allein um) */
.sig-keep { white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* Leistungs-Symbol im runden Salbei-Kreis am Ende des Titels (bleibt am letzten Wort).
   Der Platzhalter ist nur so hoch wie die Grossbuchstaben und sitzt auf der Grundlinie;
   der Kreis schwebt mittig darueber -> der Zeilenabstand der Ueberschrift bleibt gleich. */
.leistung-sig { --sig: max(0.9em, 32px);
  position: relative; display: inline-block; vertical-align: baseline;
  width: var(--sig); height: 0.72em; margin-left: 0.35em; color: #fff; }
.leistung-sig::before { content: ""; position: absolute; left: 0; top: 50%;
  width: var(--sig); height: var(--sig); transform: translateY(-50%);
  border-radius: 50%; background: var(--icon-circle); }
.leistung-sig > * { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.leistung-sig svg { width: calc(var(--sig) * 0.8); height: calc(var(--sig) * 0.8); display: block;
  fill: currentColor; stroke: currentColor; stroke-width: 0.14;
  stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; }
.leistung-sig .service-icon-img { width: calc(var(--sig) * 0.66); height: calc(var(--sig) * 0.66); display: block;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.leistung-detail h1 { margin: 0; }

.leistung-lead { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.5; color: var(--ink);
  max-width: 48ch; margin-bottom: clamp(1.25rem, 2.2vw, 1.6rem); }

.leistung-body { max-width: 64ch; }
/* Zwischenueberschriften klar unter dem Lead gestuft (wie die Subheads der Hauptseite) */
.leistung-body h2 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.25;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.6rem; }
.leistung-body h2:first-child { margin-top: 0; }
.leistung-body p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1rem; }
/* Aufzaehlung mit sichtbaren Punkten (globales list-style:none hier aufheben) */
.leistung-body ul { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1rem;
  list-style: disc; padding-left: 1.4rem; }
.leistung-body li { list-style: disc; margin-bottom: 0.4rem; padding-left: 0.25rem; }
/* Aufzaehlungspunkte in gedaempftem Cognac (heben sich auf dem Sandgrund besser ab) */
.leistung-body li::marker { color: var(--accent); font-size: 1.15em; }
.leistung-body strong { color: var(--ink); font-weight: 600; }
/* Verweise im Fließtext (interne Leistungsseiten, IAOM) */
/* Links im Leistungstext: Schrift dunkel, Unterstrich Salbei
   (der Zurueck-Link am Seitenende behaelt seine eigene Gestaltung) */
.leistung-body a:not(.leistung-back) { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--clay); text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.leistung-body a:not(.leistung-back):hover { color: var(--clay-deep); text-decoration-color: var(--clay-deep); }


/* Text + Bild nebeneinander (Desktop), gestapelt (Mobile) */
.leistung-media { display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.5rem); align-items: start; }
.leistung-media .leistung-body { max-width: 60ch; }
.leistung-figure { margin: 0; }
.leistung-figure img { display: block; width: 100%; max-width: 380px; height: auto;
  margin-inline: auto; }
@media (min-width: 820px) {
  .leistung-media { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem); }
  .leistung-media .leistung-body { order: 1; max-width: none; }
  .leistung-figure { order: 2; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  /* dezent in die Laenge gezogen, damit die Bildhoehe zur Textspalte passt */
  .leistung-figure img { max-width: none; width: 100%;
    height: clamp(640px, 46vw, 720px); margin-left: auto; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .leistung-figure { position: static; } }

/* ============ FAQ (Akkordeon, helle Sektion) ============ */
/* FAQ als Timeline: senkrechte Linie mit Punkten links; der geöffnete Punkt füllt sich
   dunkel. Überschrift bleibt schwarz; Farbe folgt der gewählten Palette (--clay). */
.faq-list { position: relative; margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-left: clamp(1.5rem, 3vw, 2rem); }
.faq-list::before { content: ""; position: absolute; left: 6px; top: 1.6rem; bottom: 1.6rem;
  width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--clay) 38%, transparent); }
.faq-item { position: relative; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item::before { content: ""; position: absolute; z-index: 1; box-sizing: border-box;
  left: calc(-1 * clamp(1.5rem, 3vw, 2rem) + 0.5px);
  top: clamp(1.45rem, 2.7vw, 1.8rem); width: 15px; height: 15px; border-radius: 50%;
  background: var(--clay); /* gefuellter Salbei-Punkt */
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
/* offene Frage: Punkt in gedaempftem Cognac mit zartem Lichthof */
.faq-item.is-open::before { background: var(--accent); transform: scale(1.15);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent); }
.faq-item:hover:not(.is-open)::before, .faq-item:focus-within:not(.is-open)::before {
  background: var(--clay-deep); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(1.05rem, 2.2vw, 1.4rem) 0.15rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.3; color: var(--ink);
}
/* Runder Plus/Minus-Knopf: geschlossen leicht transparent, offen voll Cognac */
.faq-toggle { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-deep);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.faq-toggle svg { width: 16px; height: 16px; }
.faq-toggle-v { transform-origin: 12px 12px; transition: transform 0.3s var(--ease); }
.faq-q:hover .faq-toggle { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.faq-item.is-open .faq-toggle { background: var(--accent); color: #fff; }
.faq-item.is-open .faq-toggle-v { transform: scaleY(0); }
.faq-q:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 6px; }
.faq-a { overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.32s var(--ease), opacity 0.24s var(--ease); }
.faq-item.is-open .faq-a { max-height: 60rem; opacity: 1; }
/* hervorgehobener Hinweis in einer Antwort (z. B. Kassenrezept) */
.faq-a p.faq-hint { margin-top: 0.2rem; padding: 0.75rem 1rem; border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink); }
.faq-hint strong { font-weight: 600; }
.faq-a p { color: var(--ink-soft); line-height: 1.7; margin: 0;
  padding: 0 0.15rem clamp(1.1rem, 2.2vw, 1.4rem); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-toggle, .faq-toggle-v { transition: none; } }

/* Google-Bewertungen als Kontaktdaten-Eintrag: Sterne oben, Link darunter */
/* Google-Bewertung unter dem Link: gelbe Sterne + (5 von 5) */
.kontakt-details .dt-star { width: 1.05em; height: 1.05em; margin-left: 0.3em; vertical-align: -0.15em;
  fill: #E2B457; stroke: #E2B457; stroke-width: 2.2; stroke-linejoin: round; }  /* gedaempftes Gold, hebt sich von der Cognac-Beschriftung ab */
.kontakt-details .dd-sub { display: block; margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.3;
  color: color-mix(in srgb, var(--cream) 80%, transparent); }

/* Oeffnungszeiten: elegante Liste (volle Tagesnamen, feine Trennlinien) */
.hours-list { margin-top: 0.55rem; max-width: 34rem; }
.hours-list .hl-row { display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.55rem 0; border-top: 1px solid rgba(247, 243, 236, 0.12); }
.hours-list .hl-row:last-child { border-bottom: 1px solid rgba(247, 243, 236, 0.12); }
.hl-d { font-weight: 600; color: var(--cream); }
.hl-t { color: var(--cream-dim); text-align: right; line-height: 1.5;
  font-variant-numeric: tabular-nums; }
.hours-list .is-closed .hl-d, .hours-list .is-closed .hl-t { color: var(--cream-dim); }

/* Media-Layout mit Bild LINKS (Text rechts) */
@media (min-width: 820px) {
  .leistung-media--left { grid-template-columns: minmax(250px, 1fr) minmax(0, 1.5fr); }
  .leistung-media--left .leistung-figure { order: 1; }
  .leistung-media--left .leistung-body { order: 2; }
  .leistung-media--left .leistung-figure img { margin-left: 0; margin-right: auto; }
}
/* Statisches Media-Bild (laeuft beim Scrollen NICHT mit) */
.leistung-media--static .leistung-figure { position: static; top: auto;
  align-self: start; }
/* Kleineres Media-Bild: schmale Bildspalte, begrenzte Breite, natuerliche Proportionen */
.leistung-media--smallimg .leistung-figure img,
.leistung-media--smallimg .leistung-figure svg { max-width: 240px; width: 100%;
  height: auto; display: block; margin-inline: auto; }
@media (min-width: 820px) {
  .leistung-media--smallimg { grid-template-columns: minmax(0, 1.75fr) minmax(170px, 0.55fr);
    align-items: center; }
  /* natuerliches Seitenverhaeltnis statt der gestreckten Standardhoehe */
  .leistung-media--smallimg .leistung-figure img,
  .leistung-media--smallimg .leistung-figure svg { max-width: 230px; width: 100%;
    height: auto; margin-inline: auto; }
}
/* Mittelgrosses Media-Bild (etwas groesser als smallimg), natuerliche Proportionen */
.leistung-media--midimg .leistung-figure img,
.leistung-media--midimg .leistung-figure svg { max-width: 300px; width: 100%;
  height: auto; display: block; margin-inline: auto; }
@media (min-width: 820px) {
  .leistung-media--midimg { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.75fr);
    align-items: center; }
  .leistung-media--midimg .leistung-figure img,
  .leistung-media--midimg .leistung-figure svg { max-width: 310px; width: 100%;
    height: auto; margin-inline: auto; }
}
/* Media-Layout mit QUERFORMAT-Bild -> natuerliches Seitenverhaeltnis (keine Verzerrung) */
@media (min-width: 820px) {
  .leistung-media--wideimg { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); }
  .leistung-media--wideimg .leistung-figure img { height: auto; width: 100%; max-width: 100%;
    margin-left: auto; margin-right: 0; }
}

/* Bild oben rechts neben der Ueberschrift (statisch), Fliesstext darunter */
.leistung-intro-media { display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem); align-items: center; }
.leistung-intro-media .leistung-figure { position: static; margin: 0; }
.leistung-intro-media .leistung-figure img { width: 100%; max-width: 100%; height: auto;
  margin-inline: auto; }
.leistung-intro-media .leistung-figure svg { width: 100%; height: auto; display: block;
  max-width: 220px; margin-inline: auto; }
/* abstraktes Motiv (z. B. Kompressionstherapie): dezent, am Titel ausgerichtet */
.leistung-intro-media--motiv .leistung-figure svg { max-width: 200px; }
.leistung-intro-media + .leistung-body { margin-top: 0; }
@media (min-width: 820px) {
  /* Bildspalte schmaler + Bild begrenzt, damit es den Intro-Block nicht in die Laenge
     zieht (sonst entsteht eine grosse Luecke unter dem Lead). Oben ausgerichtet. */
  .leistung-intro-media { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.85fr);
    gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }
  .leistung-intro-media .leistung-figure img { max-width: 360px; margin-left: auto;
    margin-right: 0; }
}

/* ============ Mobil & Tablet (< 820px): Illustrationen auf den Leistungsseiten ausblenden.
   Titel-Icon (Kreis) bleibt; Desktop bleibt unberuehrt. ============ */
@media (max-width: 819.98px) {
  .leistung-detail .leistung-figure { display: none; }
  .leistung-detail .leistung-intro-media,
  .leistung-detail .leistung-media { gap: 0; }
}

/* ============ Mitlaufender „Termin"-Button (Floating CTA) ============ */
.fab-termin {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: 0.65rem;
  /* gedaempftes Cognac, dunkle Schrift fuer gute Lesbarkeit */
  background: var(--fab-bg); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.85rem 1.25rem 0.85rem 1.1rem; border-radius: 12px; text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.fab-termin.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-termin:hover { background: var(--fab-bg-hover); }
/* sanft „atmender" Punkt statt Kalender */
.fab-pulse { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cream);
  animation: fabPulse 2.2s var(--ease) infinite; }
@keyframes fabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(247, 243, 236, 0.75); }
  70%  { box-shadow: 0 0 0 8px rgba(247, 243, 236, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 243, 236, 0); } }
/* „Nach oben"-Pfeil: rund, Salbei gefüllt mit weißem Pfeil; sitzt über dem Termin-Button */
.fab-top {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + var(--fab-h, 0px));
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--clay); color: #fff;
  border: 1px solid var(--clay);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), bottom 0.3s var(--ease),
              background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fab-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover, .fab-top:focus-visible { background: var(--clay-deep); border-color: var(--clay-deep); }
.fab-top svg { width: 20px; height: 20px; }
/* Termin-Knopf: Tablet/Desktop „Termin vereinbaren" mit Puls-Punkt;
   Handy kompakt mit Kalender + „Termin", damit er weniger Text verdeckt */
.fab-cal, .fab-short { display: none; }
@media (max-width: 599px) {
  .fab-termin { height: 40px; padding: 0 0.9rem 0 0.75rem; gap: 0.45rem; font-size: 0.85rem; }
  .fab-pulse, .fab-long { display: none; }
  .fab-cal { display: block; width: 16px; height: 16px; flex: none; }
  .fab-short { display: inline; }
  .fab-top { width: 38px; height: 38px; }
  .fab-top svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-termin, .fab-top { transition: opacity 0.2s linear; transform: none; }
  .fab-pulse { animation: none; }
}

/* =========================================================
   Festes Design (frueher per Dev-Leiste gesetzt: Palette „Salbeigrau“,
   Design „Architektonisch“). Gleiche Spezifitaet wie zuvor, damit sich
   die Darstellung nicht veraendert.
   ========================================================= */
html:root .btn-clay { color: #2a2420; }
html:root .section-title { letter-spacing: -0.02em; font-weight: 700; }
html:root .hero-title { font-weight: 700; }
html:root .eyebrow { letter-spacing: 0.24em; font-weight: 700; }