/* ============================================================
   MD PHYSIO – Website (Startseite und gemeinsame Bausteine) · Literata + Figtree
   Tokens: DESIGN.md · Produktkontext: PRODUCT.md
   Regeln:
   · Marken-Farben Navy / Teal / Amber – nur Abstufungen, keine neuen Töne
   · Fließtext ≥ 18 px, Labels ≥ 14 px, Klickflächen ≥ 48 px
   · Bewegung: nur transform / opacity (+ clip-path), < 300 ms, ein Vokabular;
     keine Scroll-Reveals je Abschnitt; prefers-reduced-motion ist Pflicht
   ============================================================ */

:root {
  color-scheme: light;

  /* Marke */
  --navy: #1f415a;       --navy-deep: #142c3e;
  --teal: #437695;       --teal-dark: #2d6080;   --teal-soft: #eaf1f6;
  --amber: #a96515;      --amber-dark: #8a5210;  --amber-soft: #f8efe3;
  --grey: #626161;       --beige: #e7e3dd;
  /* Flächen und Text (Abstufungen von Beige / Navy) */
  --paper: #ffffff;      --tint: #f6f5f2;        --tint-2: #eeece7;
  --ink: #1d2a35;        --muted: #5d6872;
  --line: rgba(31, 65, 90, .12);

  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --container: 1200px;
  --pad: clamp(20px, 4vw, 60px);
  --section-py: clamp(80px, 10vw, 140px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ring: var(--teal-dark);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scrollbar-color: var(--teal) var(--tint); scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font: 400 1.125rem/1.6 var(--font-body);
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: rgba(67, 118, 149, .25); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .875rem 1.25rem; border-radius: var(--r-md); background: var(--navy); color: #fff; font-weight: 500; }
.skip:focus { top: 1rem; }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--navy); text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: clamp(2.75rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.026em; }
h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: clamp(1.5rem, 1.9vw, 1.75rem); line-height: 1.2; letter-spacing: -.012em; }
h1 em { font-style: italic; }
h1, h2, h3 { overflow-wrap: break-word; }
.svc__text h3, .step h3 { hyphens: manual; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--muted); max-width: 40rem; }
.sub { font-size: 1.125rem; font-weight: 500; color: var(--teal-dark); margin-top: .5rem; }
.more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--navy); }
.more svg { width: 1.15em; height: 1.15em; transition: transform 200ms var(--ease-out); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: 0 1.75rem; border-radius: var(--r-md);
  font-size: 1.125rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--sm { min-height: 3rem; padding: 0 1.25rem; }
.btn--lg { min-height: 3.75rem; padding: 0 2.25rem; }
.btn--amber { background: var(--amber); color: #fff; }
.btn--outline { background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--photo { background: #fff; color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .btn--amber:hover { background: var(--amber-dark); }
  .btn--navy:hover { background: var(--navy-deep); }
  .btn--outline:hover { background: var(--tint-2); }
  .btn--photo:hover { background: var(--tint-2); }
}

/* ---------- Navigation: Logo frei, Leiste beginnt rechts daneben ---------- */
.brand {
  position: fixed; z-index: 101; top: .5rem;
  left: max(var(--pad), calc((100% - var(--container)) / 2));
  transition: opacity 150ms var(--ease-out), transform 250ms var(--ease-out);
}
.brand img { height: 5.5rem; width: auto; }
body[data-nav="scrolled"] .brand { opacity: 0; transform: translate3d(0, -8px, 0); pointer-events: none; }

.nav { position: fixed; z-index: 100; top: 1rem; left: 0; right: 0; pointer-events: none; }
.nav__in { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; }
.nav__pill {
  position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 4.25rem; padding: 0 .625rem 0 .75rem;
  --off: 9.5rem;   /* Platz für das große Logo */
}
/* Die Fläche ist eine eigene Ebene (transform) – Inhalt bleibt unverzerrt, kein Layout */
.nav__glass {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(20, 44, 62, .10);
  transform-origin: 100% 50%; transform: scaleX(var(--k, .86));
  transition: transform 300ms var(--ease-in-out);
}
body[data-nav="scrolled"] .nav__glass { transform: none; }
.nav__pill > :not(.nav__glass) { position: relative; z-index: 1; }
.nav__mini { display: flex; align-items: center; flex: none; width: 3.25rem; opacity: 0; transition: opacity 200ms ease; }
.nav__mini img { height: 3.25rem; width: auto; }
body[data-nav="scrolled"] .nav__mini { opacity: 1; }
.nav__links { display: flex; gap: .25rem; margin-left: auto; margin-right: .5rem; }
.nav__links a {
  display: flex; align-items: center; min-height: 3rem; padding: 0 1rem; border-radius: var(--r-md);
  font-size: 1.125rem; font-weight: 500; color: var(--navy);
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.nav__links a:active { transform: scale(.97); }
.nav__links a.is-aqua { background: var(--teal-soft); color: var(--teal-dark); }
.nav__links a[aria-current="page"] { background: var(--tint-2); }
.nav__links a.is-aqua[aria-current="page"] { background: var(--teal-soft); box-shadow: inset 0 0 0 1.5px var(--teal-dark); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { background: var(--teal-soft); } }

.nav__burger { display: none; width: 3rem; height: 3rem; border-radius: var(--r-md); align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: var(--teal-soft); transition: transform 160ms var(--ease-out); }
.nav__burger:active { transform: scale(.94); }
.nav__burger span { width: 1.25rem; height: 2px; border-radius: var(--r-sm); background: var(--navy); transition: transform 200ms var(--ease-out), opacity 150ms ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 60em) {
  .brand img { height: 4.5rem; }
  .nav { top: .75rem; }
  .nav__pill { height: 3.75rem; padding: 0 .5rem; gap: .5rem; justify-content: flex-end; }
  /* Mobil sitzt der Burger immer rechts; die Fläche blendet nur ein (Opacity statt Skalieren) */
  .nav__glass { transform: none; opacity: 0; transition: opacity 200ms ease; }
  body[data-nav="scrolled"] .nav__glass { opacity: 1; }
  .nav__burger { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 20px rgba(20, 44, 62, .16); }
  body[data-nav="scrolled"] .nav__burger { background: var(--teal-soft); box-shadow: none; }
  .nav__mini { margin-right: auto; width: 2.75rem; }
  .nav__mini img { height: 2.75rem; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  /* Das Menü wächst aus dem Burger (oben rechts). Eintritt 200 ms, Austritt 150 ms */
  .nav__links {
    position: absolute !important; top: calc(100% + .625rem); right: 0; left: auto; margin: 0; width: min(22rem, calc(100vw - var(--pad) - .75rem));
    flex-direction: column; gap: .125rem; padding: .5rem;
    background: #fff; border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(20, 44, 62, .12), 0 0 0 1px var(--line);
    opacity: 0; visibility: hidden; transform: scale(.95); transform-origin: top right;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s 150ms;
  }
  body[data-nav="scrolled"] .nav__links, .nav__links { transform: scale(.95); }
  .nav__links.open { opacity: 1; visibility: visible; transform: none !important; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
  .nav__links a { min-height: 3.5rem; font-size: 1.125rem; padding: 0 1.1rem; }
}

/* ---------- Hero: Foto-Bühne auf hellem Grund ---------- */
.hero { background: var(--tint); padding: clamp(7rem, 10.5vw, 8.75rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.stage {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(30rem, calc(100svh - 17rem), 40rem);
  border-radius: var(--r-xl); background: var(--navy-deep); color: #fff;
}
.stage__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; animation: settle 1300ms var(--ease-out) both; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 44, 62, .96) 0%, rgba(20, 44, 62, .84) 38%, rgba(20, 44, 62, .2) 64%, rgba(20, 44, 62, 0) 80%); }
.stage__text {
  max-width: 40rem; padding: clamp(2rem, 5vw, 4rem);
  --c-h: #fff; --c-em: var(--teal-soft); --c-place: var(--beige); --c-lead: #fff; --ring: #fff;
}
.stage h1 { color: var(--c-h); margin-bottom: 1.25rem; animation: rise 600ms var(--ease-out) 80ms both; --rise: 14px; }
.stage h1 em { color: var(--c-em); }
.stage .place { font-weight: 500; color: var(--c-place); margin-bottom: .75rem; animation: rise 500ms var(--ease-out) 220ms both; --rise: 8px; }
.stage .lead { color: var(--c-lead); margin-bottom: 2rem; animation: rise 500ms var(--ease-out) 290ms both; --rise: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; animation: rise 500ms var(--ease-out) 360ms both; --rise: 6px; }

.usp { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .75rem 2rem; margin-top: 1.75rem; animation: fade 500ms var(--ease-out) 520ms both; }
.usp li { display: flex; align-items: center; gap: .6rem; font-size: 1.125rem; font-weight: 500; color: var(--navy); }
.usp svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--teal-dark); }

@media (max-width: 56em) {
  .hero { padding-top: 6.5rem; }
  .stage { display: block; min-height: 0; overflow: visible; background: none; border-radius: 0; color: inherit; }
  .stage::after { display: none; }
  .stage__img { position: static; z-index: auto; aspect-ratio: 16 / 10; border-radius: var(--r-xl); object-position: 70% 40%; }
  .stage__text { max-width: none; padding: 1.75rem 0 0; --c-h: var(--navy); --c-em: var(--teal-dark); --c-place: var(--teal-dark); --c-lead: var(--muted); --ring: var(--teal-dark); }
  .btn--photo { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); }
  .usp { grid-template-columns: 1fr 1fr; justify-content: stretch; }
}
@media (max-width: 36em) {
  .actions .btn { flex: 1 1 100%; }
  .usp { grid-template-columns: 1fr; }
}

/* ---------- Abschnitte ---------- */
.sec { padding: var(--section-py) 0; position: relative; }
.sec--tint { background: var(--tint); }
.head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 44rem; }
.head--wide { max-width: 52rem; }
.head .lead { margin-top: 1.25rem; }

/* ---------- Leistungen: Überschrift links bleibt stehen, rechts die acht Leistungen ---------- */
.svc-sec { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.svc-sec .head { position: sticky; top: 7rem; margin-bottom: 0; }
.svc { border-top: 1px solid var(--line); }
.svc li { border-bottom: 1px solid var(--line); }
.svc__row {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;
  min-height: 6.5rem; padding: 1.25rem .75rem 1.25rem .5rem; border-radius: var(--r-md);
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.svc__row:active { transform: scale(.995); }
.svc__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-md); transition: background-color 150ms ease, color 150ms ease; }
.svc__ico svg { width: 2.625rem; height: 2.625rem; }
.svc__ico svg * { stroke-width: 2.3; }
/* Gruppen wie im Bestand: Physiotherapie (Navy), Land (Amber), Wasser (Teal) */
.svc__row--physio .svc__ico { background: var(--tint-2); color: var(--navy); }
.svc__row--land .svc__ico { background: var(--amber-soft); color: var(--amber-dark); }
.svc__row--water .svc__ico { background: var(--teal-soft); color: var(--teal-dark); }
.svc__text h3 { margin-bottom: .25rem; }
.svc__text p { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .svc__row:hover { background: var(--tint); }
  .svc__row:hover .svc__ico { background: var(--navy); color: #fff; }
  .svc__row:hover .more svg { transform: translateX(4px); }
}

/* ---------- Drei Schritte: eine Linie verbindet die Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-top: 4.5rem; }
.step__n { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--navy); color: #fff; font: 400 1.5rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.step:not(:last-child)::before { content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: -1.75rem; height: 1px; background: rgba(31, 65, 90, .22); }
.step p { color: var(--muted); max-width: 26rem; }
.step .btn { margin-top: .75rem; }
.tel { color: var(--navy); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; white-space: nowrap; }

/* ---------- Rezeptionszeiten: Zeiten als ruhige Typografie in zwei Spalten ---------- */
.hours { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.hours .head { margin-bottom: 0; }
.days { border-top: 1px solid var(--line); }
.day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 5rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.day dt { font-weight: 500; color: var(--navy); font-size: 1.1875rem; }
.day dd { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); gap: .5rem 1.5rem; }
.day dd span { font: 400 1.5rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* ---------- Bewegungsbad ---------- */
.sec--water { background: var(--teal-soft); }
.sec--water > .wave { position: absolute; top: 1.25rem; left: 0; width: 100%; height: 3.5rem; }
.wave path { fill: none; stroke: var(--teal); stroke-opacity: .5; stroke-width: 2; vector-effect: non-scaling-stroke; }
.js .wave { clip-path: inset(0 100% 0 0); }
.js .wave.in { clip-path: inset(0); transition: clip-path 1400ms var(--ease-out); }
.pool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-top: 1.5rem; }
.pool__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); }
.pool__text > p:not(.sub) { margin-top: 1.25rem; }
.checks { display: grid; gap: .625rem; margin: 1.75rem 0 2.25rem; }
.checks li { display: flex; align-items: flex-start; gap: .75rem; font-weight: 500; color: var(--navy); }
.checks svg { width: 1.4rem; height: 1.4rem; margin-top: .2rem; flex: none; color: var(--teal-dark); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq__side { position: sticky; top: 7rem; }
.faq__side .head { margin-bottom: 2rem; }
.faq__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa h3 { font: inherit; }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; min-height: 4.5rem; padding: 1rem 0;
  text-align: left; font: 500 1.1875rem/1.4 var(--font-body); color: var(--navy);
}
.qa__icon { position: relative; flex: none; width: 1.5rem; height: 1.5rem; transition: transform 200ms var(--ease-out); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.125rem; height: 2.5px; margin: -1.25px 0 0 -.5625rem; border-radius: var(--r-sm); background: var(--teal-dark); }
.qa__icon::after { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__icon { transform: rotate(45deg); }
.js .qa__a { display: none; }
.js .qa__a.open { display: block; animation: rise 220ms var(--ease-out) both; --rise: 6px; }
.qa__a { padding: 0 2.75rem 1.5rem 0; color: var(--ink); }
.qa__a p + p, .qa__a p + ul, .qa__a ul + p { margin-top: .75rem; }
.qa__a ul { list-style: disc; padding-left: 1.4rem; }
.qa__a li::marker { color: var(--teal-dark); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.member { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); box-shadow: 0 0 0 1px var(--line); }
.member__photo { aspect-ratio: 3 / 4; background: var(--tint-2); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__photo--empty { display: grid; place-items: center; color: var(--muted); }
.member__photo--empty svg { width: 5rem; height: 5rem; opacity: .6; }
.member__panel { min-width: 0; padding: 1.25rem 1.25rem 1.5rem; }
.member h3, .role, .bio { overflow-wrap: break-word; }
.bio { hyphens: auto; }
.member h3 { font-size: 1.5rem; }
.role { font-weight: 500; color: var(--teal-dark); line-height: 1.35; margin-top: .25rem; }
.bio { margin-top: .75rem; color: var(--ink); }

/* Mit Maus und Platz: Name und Rolle liegen auf dem Foto, der Text klappt nach oben aus */
@media (hover: hover) and (pointer: fine) and (min-width: 40em) {
  .member { --cap: 7.25rem; background: var(--navy-deep); }
  .member__photo { aspect-ratio: 3 / 4; }
  .member__panel {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; background: var(--navy-deep); color: #fff;
    transform: translate3d(0, calc(100% - var(--cap)), 0); transition: transform 260ms var(--ease-out);
  }
  .member h3 { color: #fff; }
  .role { color: var(--teal-soft); }
  .bio { color: #fff; opacity: 0; transition: opacity 160ms ease; }
  .member:hover .member__panel, .member:focus-within .member__panel, .member:focus-visible .member__panel { transform: none; }
  .member:hover .bio, .member:focus-within .bio, .member:focus-visible .bio { opacity: 1; transition: opacity 220ms ease 80ms; }
}

/* ---------- CTA-Banner ---------- */
.cta { background: var(--navy-deep); color: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0; --ring: #fff; }
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.cta__in > div { flex: 1 1 30rem; min-width: 0; }
.cta h2 { color: #fff; margin-bottom: .75rem; }
.cta p { color: var(--beige); font-size: 1.25rem; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: stretch; }
.contact .head { margin-bottom: 2rem; }
.contact__list { display: grid; gap: .5rem; }
.contact__list li { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; font-size: 1.1875rem; font-weight: 500; }
.contact__list a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.ico { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--teal-soft); color: var(--teal-dark); }
.ico svg { width: 1.375rem; height: 1.375rem; }
.hours-mini { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hours-mini h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.hours-mini table { border-collapse: collapse; width: 100%; }
.hours-mini th, .hours-mini td { padding: .5rem 0; text-align: left; vertical-align: top; }
.hours-mini th { width: 6.5rem; font-weight: 500; color: var(--navy); }
.contact__map { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1.25rem; min-height: 22rem; padding: 2rem; border-radius: var(--r-xl); background: var(--teal-soft); }
.contact__map p { font: 400 1.75rem/1.2 var(--font-display); color: var(--navy); }
.map__lines { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 55%; }
.map__lines path { fill: none; stroke: var(--teal); stroke-opacity: .35; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: var(--beige); --ring: #fff; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding: clamp(3.5rem, 6vw, 5rem) 0 3rem; }
.footer__logo { display: inline-block; margin-bottom: 1.25rem; }
.footer__logo img { height: 6.5rem; width: auto; }
.footer__brand p { max-width: 22rem; }
.footer__nav h2 { font: 500 1.125rem/1.3 var(--font-body); color: #fff; margin-bottom: .75rem; letter-spacing: 0; }
.footer__nav a { display: flex; align-items: center; min-height: 3rem; border-radius: var(--r-sm); color: var(--beige); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; } }
.footer__bottom { padding: 0 0 1.5rem; font-size: 1.125rem; }
.footer__bottom .wrap { border-top: 1px solid rgba(231, 227, 221, .2); padding-top: 1.5rem; }

/* ---------- Schnellzugriff (nur Smartphone) ---------- */
.dock { display: none; }
@media (max-width: 48em) {
  .dock {
    display: flex; gap: .75rem; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    padding: .75rem max(.75rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px rgba(20, 44, 62, .08);
    transform: translate3d(0, 100%, 0); visibility: hidden;
    transition: transform 200ms var(--ease-out), visibility 0s 200ms;
  }
  body[data-dock="on"] .dock { transform: none; visibility: visible; transition: transform 300ms var(--ease-out), visibility 0s; }
  .dock .btn { flex: 1; padding: 0 .5rem; gap: .4rem; min-width: 0; }
  .footer__bottom { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
}

/* ---------- Bewegung: Eintritt einmal, danach Ruhe ---------- */
@keyframes rise { from { opacity: 0; transform: translate3d(0, var(--rise, 12px), 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 64em) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .step { padding: .25rem 0 0 4.5rem; min-height: 3rem; }
  .step:not(:last-child)::before { top: 3.75rem; bottom: -2.25rem; left: 1.5rem; right: auto; width: 1px; height: auto; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 56em) {
  .svc-sec { grid-template-columns: 1fr; }
  .svc-sec .head { position: static; margin-bottom: 2.5rem; }
  .hours, .pool, .faq, .contact { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq__side .faq__img { display: none; }
  .contact__map { min-height: 16rem; }
  .pool__img { order: -1; }
}
@media (max-width: 40em) {
  .team { grid-template-columns: 1fr; }
  .member { display: grid; grid-template-columns: 38% 1fr; }
  .member__photo { aspect-ratio: auto; min-height: 12rem; }
  .day { grid-template-columns: 1fr; gap: .5rem; }
  .day dd { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
  .day dd span { white-space: normal; overflow-wrap: anywhere; }
  .svc__row { grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; }
  .svc__row .more { grid-column: 2; margin-top: .5rem; }
  .svc__text p, .qa__a, .step p { hyphens: auto; hyphenate-limit-chars: 9 4 4; }
  .qa__a { padding-right: 0; }
  .cta__in { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 100%; }
}
@media (max-width: 22.5em) {
  .member { display: block; }
  .member__photo { aspect-ratio: 4 / 3; min-height: 0; }
  .member__photo img { object-position: 50% 20%; }
}
@media (max-width: 30em) {
  .svc__row { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding-inline: 0; }
  .svc__ico { width: 3rem; height: 3rem; }
  .svc__ico svg { width: 2.25rem; height: 2.25rem; }
  .footer__inner { grid-template-columns: 1fr; }
  .contact__list li { align-items: flex-start; padding-block: .25rem; }
}

/* ---------- Seitenränder: tragen die Abschnitte, der innere Container begrenzt nur die Breite ---------- */
.sec, .hero, .cta, .footer { padding-inline: var(--pad); }

/* ---------- Weniger Bewegung: sanfter, nicht null ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage__img, .stage h1, .stage .place, .stage .lead, .actions, .usp { animation: fade 200ms ease both; animation-delay: 0ms; }
  .js .qa__a.open { animation: fade 150ms ease both; }
  .js .wave, .js .wave.in { clip-path: none; transition: none; }
  .brand, .nav__glass, .nav__mini, .member__panel, .dock { transition-property: opacity, visibility; transition-duration: 150ms; transition-delay: 0s; }
  body[data-nav="scrolled"] .brand { transform: none; }
  .nav__glass { transform: none; }
  .more svg { transform: none !important; }
}

/* Höherer Kontrast auf Wunsch des Systems */
@media (prefers-contrast: more) {
  .svc__ico, .member, .nav__glass { box-shadow: 0 0 0 1.5px var(--navy); }
  .svc, .svc li, .days, .day, .qa { border-color: var(--navy); }
}