/* =========================================================
   Andrea Schoch – Gesichtsphysiognomie & Berufsberatung
   Design: dunkle und cremefarbene Abschnitte im Wechsel, Pastell-Karten in den Logofarben (Himmel, Mint)
   plus zwei warme Töne (Butter, Pfirsich), grosse Display-Typografie.
   Schriften: Bricolage Grotesque (Titel) · Instrument Sans (Text) – beide OFL, lokal gehostet.
   Radien: Karten 24–32 px, Bilder in Karten 16 px, Buttons und Chips rund (Pille), Eingabefelder 12 px.
   ========================================================= */

:root {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* neutrals */
  --ink: #111516;
  --ink-2: #1b2022;
  --ink-3: #272e30;
  --paper: #ffffff;          /* light sections are plain white – the warmth comes from the pastel cards, not the page */
  --white: #ffffff;
  --field: #f4f5f4;          /* form fields need a fill of their own now that the page behind them is white */
  --text: #171c1d;
  --text-2: #525a5b;
  --on-dark: #f4f2ec;
  --on-dark-2: rgba(244, 242, 236, .68);
  --line: rgba(17, 21, 22, .12);
  --line-strong: rgba(17, 21, 22, .26);
  --line-dark: rgba(244, 242, 236, .13);
  --line-dark-strong: rgba(244, 242, 236, .3);

  /* brand: logo gradient #0088b8 → #00c898 */
  --brand-blue: #0088b8;
  --brand-green: #00c898;
  --brand-text: #0b6f6b;     /* teal for small text on cream (>= 4.5:1) */
  --brand-bright: #1ed3a6;   /* mint-green for small accents */
  --teal: #0a7c78;           /* section colour: white text keeps >= 4.5:1 */
  --teal-deep: #075f5c;
  --mint-bright: #bdf5e4;    /* numbers and accents on teal */

  /* pastel cards */
  --sky: #cfe5f1;
  --mint: #cdf1e2;
  --butter: #f5e7a3;
  --peach: #f8d6c5;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --pill: 999px;

  --container: 84rem;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --nav-h: 4.75rem;
  --edge-h: clamp(4.5rem, 9vw, 11rem);   /* curved arrow edge at the top of the teal sections */

  --shadow-sm: 0 1px 2px rgba(17, 21, 22, .06), 0 2px 8px rgba(17, 21, 22, .05);
  --shadow-md: 0 10px 30px -12px rgba(17, 21, 22, .22), 0 2px 6px rgba(17, 21, 22, .06);
  --shadow-lg: 0 24px 60px -24px rgba(17, 21, 22, .35), 0 6px 16px -8px rgba(17, 21, 22, .12);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
}

/* ---------- section themes: every section sets the tokens its children use ---------- */
.s-light, body {
  --bg: var(--paper);
  --fg: var(--text);
  --fg-2: var(--text-2);
  --surface: var(--white);
  --line-c: var(--line);
  --line-c-strong: var(--line-strong);
  --accent: var(--brand-text);
  --btn-bg: var(--ink);
  --btn-fg: var(--on-dark);
  --btn-bg-hover: #2a3234;
  --ghost-border: rgba(17, 21, 22, .3);
  --ghost-hover: rgba(17, 21, 22, .06);
  --chip-bg: var(--mint);
  --chip-fg: var(--ink);
  --focus: var(--brand-text);
  color-scheme: light;
}
/* brand sections: the petrol of the logo gradient, white text (>= 4.5:1), pastel cards on top */
.s-brand {
  --bg: var(--teal);
  --fg: #ffffff;
  --fg-2: rgba(255, 255, 255, .92);
  --surface: rgba(255, 255, 255, .12);
  --line-c: rgba(255, 255, 255, .2);
  --line-c-strong: rgba(255, 255, 255, .42);
  --accent: var(--mint-bright);
  --btn-bg: #ffffff;
  --btn-fg: var(--teal-deep);
  --btn-bg-hover: #f2fbf8;
  --ghost-border: rgba(255, 255, 255, .55);
  --ghost-hover: rgba(255, 255, 255, .12);
  --chip-bg: rgba(255, 255, 255, .18);
  --chip-fg: #ffffff;
  --focus: #ffffff;
  color-scheme: dark;
}
.s-light, .s-brand { background: var(--bg); color: var(--fg); }
.s-brand { background-image: radial-gradient(70% 60% at 100% 0%, rgba(0, 200, 152, .22), transparent 70%); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* no CSS scroll-behavior: smooth – the browser would also animate every scroll position ScrollTrigger sets while
     snapping the pinned section, and the two fight each other (that is the stutter). Anchor links are scrolled
     smoothly by js/main.js instead; without JS the .no-js rule below restores the CSS behaviour. */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  scrollbar-gutter: stable;
  background: var(--paper);
}
html.no-js { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  accent-color: var(--brand-text);
  caret-color: var(--brand-text);
}
::selection { background: var(--mint); color: var(--ink); }
.s-brand ::selection { background: var(--mint-bright); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: .75rem; left: .75rem; z-index: 100;
  padding: .6rem 1rem; background: var(--brand-bright); color: var(--ink); font-weight: 600; border-radius: var(--pill);
  transform: translateY(-200%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
/* every section fills the screen: one section at a time, content centred vertically */
.section { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding-block: var(--section-y); }
.section > .container { width: 100%; }

/* ---------- type ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: .96; letter-spacing: -.035em; }
.h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.h2 { font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; }
.h2--xl { font-size: clamp(3rem, 10vw, 8.5rem); line-height: .92; letter-spacing: -.045em; }
.h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--fg); }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--fg-2); }
.muted { color: var(--fg-2); }
.copy { display: grid; gap: 1rem; color: var(--fg-2); }
.copy strong { color: var(--fg); }
.link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c-strong); transition: text-decoration-color var(--dur-fast); }
.link:hover { text-decoration-color: currentColor; }
.num { font-variant-numeric: tabular-nums; }

/* chip: small pill label above a heading (used sparingly) */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: var(--pill);
  background: var(--chip-bg); color: var(--chip-fg);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  user-select: none;
}

/* section header (stacked: chip, headline, text) */
.sec-head { display: grid; gap: 1.25rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head .chip { justify-self: start; }
.sec-head--center .chip { justify-self: center; }
.sec-head .lead { max-width: 40rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em;
  border-radius: var(--pill);
  border: 1px solid transparent;
  white-space: nowrap; user-select: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.btn:active { transform: scale(.97); }
.btn svg { flex: none; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--ghost-border); }
.btn--link { min-height: 0; padding: .25rem 0; border-radius: 4px; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-c-strong); }
.btn--link svg { transition: transform var(--dur-fast) var(--ease-out); }
.btn--sm { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .9375rem; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--btn-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn--primary:hover:active { transform: scale(.97); box-shadow: none; }
  .btn--ghost:hover { background: var(--ghost-hover); border-color: var(--fg); }
  .btn--link:hover { text-decoration-color: currentColor; }
  .btn--link:hover svg { transform: translateX(3px); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn.is-busy { opacity: .7; pointer-events: none; }

/* ---------- photo frames ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--45 { aspect-ratio: 4 / 5; }

/* =========================================================
   NAVIGATION – a dark pill that floats over every section
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 50; padding-block: .625rem; pointer-events: none; }
.nav .container { pointer-events: auto; }
.nav__bar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.5rem; padding: .375rem .375rem .375rem 1rem;
  border-radius: var(--pill); border: 1px solid rgba(17, 21, 22, .08);
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(17, 21, 22, .04);
  transition: box-shadow var(--dur) ease;
}
.nav.is-scrolled .nav__bar { box-shadow: 0 14px 36px -18px rgba(17, 21, 22, .35), 0 1px 2px rgba(17, 21, 22, .05); }
.nav__brand { position: relative; z-index: 41; display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; border-radius: var(--pill); }
.nav__brand img { height: 2.25rem; width: auto; }
.nav__brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: .25rem; }
.nav__links a {
  display: inline-flex; align-items: center; padding: .5rem .8rem; border-radius: var(--pill);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
@media (hover: hover) { .nav__links a:hover { background: rgba(17, 21, 22, .06); } }
.nav__actions { display: flex; align-items: center; gap: .5rem; }
.nav__actions .btn { min-height: 2.75rem; padding-block: .5rem; font-size: .9375rem; }
.nav .btn--primary { --btn-bg: var(--teal); --btn-fg: #fff; --btn-bg-hover: var(--teal-deep); }
.nav .btn--ghost { --ghost-border: rgba(17, 21, 22, .28); --ghost-hover: rgba(17, 21, 22, .06); color: var(--ink); }
.nav .btn--ghost[aria-current="page"] { background: rgba(17, 21, 22, .06); }
.nav :focus-visible { outline-color: var(--brand-text); }

.nav__toggle {
  display: none; position: relative; z-index: 41; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: var(--ink); background: rgba(17, 21, 22, .06);
}
.nav__toggle span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.nav__toggle span:nth-child(1) { transform: translateY(-5px); }
.nav__toggle span:nth-child(3) { transform: translateY(5px); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
.nav__menu { display: contents; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * (var(--nav-h) + .25rem)); padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 85% 15%, rgba(0, 200, 152, .16), transparent 70%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy { display: grid; gap: 1.75rem; align-content: center; }
.hero__copy .lead { max-width: 34rem; }
.hero__visual { position: relative; }
.hero__photo { border-radius: var(--radius-xl); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - 6rem); margin-inline: auto; }
.hero__photo img { object-position: 50% 20%; }
/* the large photo is never hidden (LCP): a transform-only rise while the copy fades in */
.js.gsap .hero__visual { animation: hero-rise 1.1s var(--ease-out) .1s both; }
@keyframes hero-rise { from { transform: translateY(24px) scale(.985); } to { transform: none; } }
/* caption card: who is in the picture */
.hero__caption {
  position: absolute; left: clamp(-1rem, -2vw, -1.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.1rem .75rem .75rem; border-radius: var(--radius-md);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
  rotate: -3deg;
}
.hero__caption img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.hero__caption strong { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
.hero__caption span { display: block; font-size: .8125rem; color: var(--text-2); line-height: 1.3; }

/* =========================================================
   STATEMENT – centred copy, portrait stickers floating around it
   (below 992px the stickers become a 3×2 wall under the text)
   ========================================================= */
.statement { position: relative; overflow: hidden; }
.statement .faces { inset: var(--edge-h) 0 0; }
/* curved section edge: the previous section's colour spills over the top in a soft arc, the arc itself is an arrow
   (drawn by js/main.js; data-edge="rtl" mirrors it so the direction alternates from section to section).
   Sections other than the statement reserve room for it with .has-edge – no overflow: hidden here, the sticky
   cards of the Ablauf need the viewport as their scroll container */
.has-edge { position: relative; padding-top: calc(var(--edge-h) + var(--section-y) * .5); }
.has-edge > .container { position: relative; z-index: 1; }
.edge { position: absolute; left: 0; right: 0; top: -1px; height: var(--edge-h); z-index: 0; pointer-events: none; overflow-x: clip; }
.edge__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.edge__fill { fill: var(--edge-from, var(--paper)); }
.edge__stroke { fill: none; stroke-linecap: round; filter: drop-shadow(0 3px 5px rgba(0, 40, 38, .28)); }   /* stroke/fill: gradient per edge in the markup */
.edge__head { filter: drop-shadow(0 3px 5px rgba(0, 40, 38, .28)); }
.statement__inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; justify-items: center; text-align: center; max-width: 50rem; margin-inline: auto; }
.statement__inner .lead { max-width: 38rem; }
.faces {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.8vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.75rem);
  width: 100%; max-width: 32rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
}
.face {
  aspect-ratio: 4 / 5; padding: .375rem; border-radius: 18px; background: var(--white);
  box-shadow: 0 24px 60px -24px rgba(0, 40, 38, .55), 0 6px 16px -8px rgba(0, 40, 38, .25);
  rotate: var(--r, 0deg);
}
.face img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.face--1 { --r: -4deg; } .face--2 { --r: 3deg; } .face--3 { --r: -2.5deg; }
.face--4 { --r: 3.5deg; } .face--5 { --r: -3deg; } .face--6 { --r: 4deg; }
@media (max-width: 991px) {
  .face--2, .face--5 { margin-top: clamp(1rem, 2.2vw, 2rem); }
}
@media (min-width: 992px) {
  .faces { position: absolute; inset: 0; display: block; width: auto; max-width: none; margin: 0; padding: 0; pointer-events: none; }
  .face { position: absolute; width: clamp(7rem, 11vw, 12.5rem); }
  /* measured from the centre so the ring hugs the copy on every width */
  .face--1 { left: max(2%, calc(50% - min(40vw, 47rem))); top: 7%; --r: -6deg; }
  .face--2 { left: max(1%, calc(50% - min(46vw, 55rem))); top: 40%; --r: 4deg; }
  .face--3 { left: max(2%, calc(50% - min(37vw, 43rem))); bottom: 6%; --r: 5deg; }
  .face--4 { right: max(2%, calc(50% - min(40vw, 47rem))); top: 6%; --r: 6deg; }
  .face--5 { right: max(1%, calc(50% - min(46vw, 55rem))); top: 42%; --r: -4deg; }
  .face--6 { right: max(2%, calc(50% - min(37vw, 43rem))); bottom: 7%; --r: -5deg; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .statement__inner { max-width: 40rem; }
  .face { width: clamp(6rem, 9.5vw, 9rem); }
}

/* =========================================================
   PHYSIOGNOMIE – study head with thin callout lines (paths are drawn by JS in pixel space, labels are HTML)
   ========================================================= */
.physio { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: clamp(2rem, 4vh, 3.5rem); }
.physio__grid { display: grid; gap: clamp(1.25rem, 3vh, 2.5rem); justify-items: center; }
.physio__head { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 52rem; }
.physio__head .h2 { text-wrap: balance; }
.physio__lead { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.4375rem); line-height: 1.5; color: var(--text-2); max-width: 36rem; text-wrap: pretty; }
.physio__stage {
  position: relative; --head-ar: 0.6289; --head-h: min(58svh, 46rem); --ax-l: 16%; --ax-r: 84%;
  width: calc(var(--head-h) * var(--head-ar)); max-width: 100%;
}
.physio__figure { position: relative; aspect-ratio: var(--head-ar); }
/* the portrait is a cut-out photo: its lower edge dissolves into the page instead of ending in a hard line */
.physio__img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.callouts__lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.callout-line { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.callout-dot { fill: var(--teal); stroke: var(--paper); stroke-width: 2; }
.callouts { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callout { position: absolute; top: var(--ay); translate: 0 -50%; width: max-content; max-width: 10.5rem; display: grid; gap: .15rem; pointer-events: auto; }
.callout--l { right: calc(100% - var(--ax-l)); text-align: right; justify-items: end; }
.callout--r { left: var(--ax-r); }
.callout strong { font-family: var(--font-display); font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.callout span { font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
/* zoom sequence (js/main.js setupZoom, GSAP only): the section pins, the bust is scaled with a transform, lines and
   labels move into an overlay on the section and are placed in pixels by the script (translate = position) */
.physio--zoom .physio__figure { transform-origin: 50% 50%; }
.physio--zoom .callouts__lines, .physio--zoom .callouts { display: block; position: absolute; inset: 0; margin: 0; }
/* labels sit on skin as often as on the background, so they are frosted cards on every screen size: centred, with
   a small numbered eyebrow, a hairline edge instead of a border and a two-layer shadow tinted like the ink */
.physio--zoom .callout {
  position: absolute; left: 0; top: 0; right: auto; translate: 0 0;
  text-align: center; justify-items: center; gap: .35rem;
  padding: 1.05rem 1.6rem 1.2rem; border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(17, 21, 22, .06), 0 1px 0 0 rgba(255, 255, 255, .9) inset,
    0 22px 44px -22px rgba(17, 21, 22, .38), 0 4px 12px -6px rgba(17, 21, 22, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform-origin: 50% 100%;
}
.physio--zoom .callout strong { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.05; letter-spacing: -.02em; }
.physio--zoom .callout span { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.4; color: var(--text-2); text-wrap: balance; }
/* desktop: the traits stay on one line, a wrapped list would leave a lonely separator dot at the line end */
.physio--zoom .callout:not(.callout--b) { min-width: 16.5rem; max-width: none; }
.physio--zoom .callout:not(.callout--b) span { white-space: nowrap; font-size: clamp(1rem, 1.1vw, 1.0625rem); }
.physio--zoom .callout--b { max-width: min(22rem, calc(100vw - 2rem)); padding: .95rem 1.25rem 1.1rem; }
/* phone: one fixed card width for every zone (so the reserved strip at the bottom of the screen never jumps) and
   wrapping text. The rules are written stronger than the .callout--b ones on purpose: even if the script were to
   measure a stale desktop layout, the card can never grow wider than the screen and push its text off both sides. */
@media (max-width: 991px) {
  .physio.physio--zoom .callout {
    width: min(21rem, calc(100vw - 2.5rem)); min-width: 0; max-width: none;
    padding: .9rem 1.125rem 1rem; gap: .25rem; border-radius: 18px;
    /* a live blur behind a card that moves over a scaling photo is the most expensive pixel on the page – the card
       is opaque here instead, which looks the same on a phone and saves the whole backdrop pass per frame */
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .physio.physio--zoom .callout strong { font-size: clamp(1.25rem, 6vw, 1.625rem); }
  .physio.physio--zoom .callout span { white-space: normal; font-size: clamp(.875rem, 3.6vw, 1rem); text-wrap: balance; }
}
/* line: a fine deep-teal hairline on a soft white casing; marker: pulse ring, frosted ring, teal core; node at the card */
.physio--zoom .callout-casing { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.physio--zoom .callout-line { stroke: var(--teal-deep); stroke-width: 1.5; }
.physio--zoom .callout-dot { r: 3.5; fill: var(--teal-deep); stroke: #fff; stroke-width: 1.5; }
.callout-halo { fill: rgba(255, 255, 255, .28); stroke: #fff; stroke-width: 1.5; }
.callout-node { fill: #fff; stroke: var(--teal-deep); stroke-width: 1.5; }
.callout-pulse {
  fill: none; stroke: #fff; stroke-width: 1.25; stroke-opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
/* only the marker of the zone that is currently on screen pulses – six running loops would cost frames for nothing
   (js/main.js sets .is-live in render()) */
.physio.is-pinned .callout-pulse.is-live { animation: callout-pulse 2.6s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes callout-pulse {
  0% { transform: scale(1); stroke-opacity: .85; }
  100% { transform: scale(2.3); stroke-opacity: 0; }
}
@media (max-width: 767px) {
  .physio { padding-top: var(--section-y); }
  .physio__stage { width: min(100%, 20rem); }
  .callouts__lines { display: none; }
  .callouts { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 1.5rem; }
  .callout { position: static; translate: none; width: auto; max-width: none; text-align: left; justify-items: start; }
}
@media (min-width: 1200px) and (max-height: 780px) {
  .physio { padding-top: calc(var(--nav-h) + .5rem); padding-bottom: 1.5rem; }
  .physio__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(2rem, 5vw, 5rem); justify-items: stretch; }
  .physio__head { text-align: left; justify-items: start; max-width: 40rem; }
  .physio__head .h2 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); text-wrap: pretty; }
  .physio__stage { --head-h: min(76svh, 40rem); justify-self: center; margin-inline-end: 3rem; }
  .callout { max-width: 10rem; }
}

/* =========================================================
   ANGEBOT / ABLAUF – centred headline, three pastel cards that stick below the nav and stack while scrolling
   (js/main.js shrinks and dims the previous card while the next one slides over it; below 992px the cards
   simply follow one another). The card fills the viewport below the nav, capped so it stays a card, not a screen.
   ========================================================= */
.process { --stack-top: calc(var(--nav-h) + 1.25rem); --peek: 1.25rem; }
.process__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.stack { display: grid; gap: 4rem; }
.stack__card {
  --i: 0;
  position: sticky; top: calc(var(--stack-top) + var(--i) * var(--peek));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem;
  height: clamp(26rem, calc(100svh - var(--stack-top) - var(--peek) * 2 - 1.5rem), 44rem);
  padding: 1rem; border-radius: var(--radius-xl);
  --fg: var(--ink); color: var(--ink); transform-origin: 50% 0;   /* the section is teal: the display tokens flip to ink inside the pastel card */
  box-shadow: 0 -10px 40px -24px rgba(0, 30, 28, .45), 0 30px 70px -30px rgba(0, 30, 28, .55);
}
.stack__card:nth-child(2) { --i: 1; }
.stack__card:nth-child(3) { --i: 2; }
.stack__card--sky { background: var(--sky); --fg-2: #30454d; }
.stack__card--mint { background: var(--mint); --fg-2: #2c4a41; }
.stack__card--butter { background: var(--butter); --fg-2: #4b4523; }
/* dim overlay: GSAP tweens --dim while the next card slides over – one opacity, the card itself is never repainted */
.stack__card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #04302e; opacity: var(--dim, 0); pointer-events: none; }
.stack__photo { position: relative; height: 100%; min-height: 0; border-radius: calc(var(--radius-xl) - 1rem); }   /* nested radius: outer − padding */
.stack__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack__card:nth-child(even) .stack__photo { order: 2; }
.stack__copy { display: grid; align-content: center; justify-items: center; gap: 1rem; min-width: 0; padding: clamp(1.5rem, 3vw, 3.5rem) clamp(1rem, 3vw, 3rem); text-align: center; }
.stack__num { font-family: var(--font-display); font-size: clamp(2.75rem, 4.5vw, 4.5rem); font-weight: 700; line-height: .9; letter-spacing: -.045em; color: var(--teal); font-variant-numeric: tabular-nums; }
.stack__copy .h3 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); max-width: 18ch; }
.stack__copy p { max-width: 34rem; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.6; color: var(--fg-2); }
.stack__meta { display: inline-flex; align-items: center; margin-top: .5rem; padding: .45rem .9rem; border-radius: var(--pill); background: rgba(17, 21, 22, .08); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; }

/* =========================================================
   PREISE – sticky intro on the left, two pastel offer cards on the right (what & price | what is included)
   ========================================================= */
.pricing { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pricing__intro { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.25rem; justify-items: start; }
.pricing__intro .lead { max-width: 30rem; }
.pricing__intro .muted { font-size: .9375rem; max-width: 30rem; }
.pricing__intro .btn { margin-top: .5rem; }
.offers { display: grid; gap: 1rem; }
.offer {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); color: var(--ink);
}
.offer:nth-child(1) { background: var(--sky); --fg-2: #30454d; }
.offer:nth-child(2) { background: var(--mint); --fg-2: #2c4a41; }
.offer__head { display: grid; gap: .75rem; justify-items: start; }
.offer .chip { background: rgba(17, 21, 22, .08); color: var(--ink); }
.offer__price { font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.offer__price small { display: block; margin-top: .5rem; font-family: var(--font-body); font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--fg-2); }
.offer > p:not([class]) { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
.offer__list { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: grid; gap: .7rem; align-content: start; padding-left: clamp(1.25rem, 2.5vw, 2rem); border-left: 1px solid rgba(17, 21, 22, .14); }
.offer__list li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9375rem; line-height: 1.45; }
.offer__list svg { margin-top: .2rem; color: var(--brand-text); }

/* =========================================================
   ÜBER MICH – portrait, text, credential stickers, facts
   ========================================================= */
.about { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about__photo { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.about__photo .ph { border-radius: var(--radius-xl); }
.about__photo img { object-position: 50% 15%; }
.about__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .75rem; padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: var(--sky); color: var(--ink);
}
.about__bar strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.2; }
.about__bar span { font-size: .8125rem; color: #30454d; }
.about__bar img { width: 2.75rem; flex: none; }
.about__copy { display: grid; gap: 1.5rem; }
.about__copy .chip { justify-self: start; }
.about__copy .copy { font-size: 1.0625rem; }
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: .5rem; }
.cred {
  display: grid; gap: .75rem; align-content: space-between;
  min-height: 8.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-md);
  color: var(--ink); rotate: var(--r, 0deg);
  transition: rotate var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.cred svg { color: var(--ink); opacity: .8; }
.cred strong { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.15; letter-spacing: -.015em; }
.cred--sky { background: var(--sky); --r: -2.5deg; }
.cred--mint { background: var(--mint); --r: 2deg; }
.cred--butter { background: var(--butter); --r: 1.5deg; }
.cred--peach { background: var(--peach); --r: -1.5deg; }
@media (hover: hover) { .cred:hover { rotate: 0deg; transform: translateY(-2px); } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-c); }
.fact { display: grid; gap: .5rem; align-content: start; }
.fact__n { font-family: var(--font-display); font-size: clamp(2.5rem, 4.6vw, 4rem); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.fact__n small { font-size: .45em; font-weight: 600; letter-spacing: -.01em; margin-right: .3em; vertical-align: .1em; }
.fact__d { font-size: .9375rem; color: var(--fg-2); max-width: 16rem; }

/* =========================================================
   REFERENZEN – quote cards + photo
   ========================================================= */
.testi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.quote {
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  min-height: 26rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg);
  color: var(--ink);
}
.quote--sky { background: var(--sky); --fg-2: #30454d; }
.quote--butter { background: var(--butter); --fg-2: #4b4523; }
.quote__mark { font-family: var(--font-display); font-size: 4rem; line-height: .6; font-weight: 700; letter-spacing: -.05em; user-select: none; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }
.quote figcaption { display: grid; gap: .15rem; padding-top: 1.25rem; border-top: 1px solid rgba(17, 21, 22, .14); font-size: .9375rem; }
.quote figcaption strong { font-family: var(--font-display); font-size: 1.0625rem; }
.quote figcaption span { color: var(--fg-2); }
.testi__photo { border-radius: var(--radius-lg); min-height: 26rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.25rem; }
.faq__intro .lead { max-width: 30rem; }
.faq__help {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
  margin-top: .75rem; padding: 1rem; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-c);
}
.faq__help img { width: 4rem; height: 4rem; border-radius: var(--radius-sm); object-fit: cover; object-position: 50% 20%; }
.faq__help strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.01em; margin-bottom: .15rem; }
.faq__help p { font-size: .875rem; color: var(--fg-2); margin-bottom: .75rem; }
.faq__help .btn-row { gap: .5rem; }
.faq__list { display: grid; gap: .625rem; }
.faq__item { border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-c); transition: box-shadow var(--dur-fast) ease; }
.faq__item.is-open { box-shadow: inset 0 0 0 1px var(--line-c-strong); }
.faq__q { margin: 0; font: inherit; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.1rem 1.25rem; text-align: left; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; color: var(--fg);
}
.faq__btn:focus-visible { outline-offset: -3px; }
/* indicator = the logo mark: closed it is a quiet white silhouette in a translucent chip, open the chip turns solid
   white, the mark takes its brand gradient back and the ring makes one full turn (the logo is a rotation arrow) */
.faq__mark {
  flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px var(--line-c);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.faq__mark img {
  width: 1.4375rem; height: auto; opacity: .82;
  filter: brightness(0) invert(1);   /* same function list as the open state, so the colour interpolates */
  transition: filter var(--dur) ease, opacity var(--dur) ease, rotate .72s var(--ease-out);
}
.faq__item.is-open .faq__mark { background: #fff; box-shadow: 0 6px 16px -8px rgba(0, 30, 28, .5); }
.faq__item.is-open .faq__mark img { opacity: 1; filter: brightness(1) invert(0); rotate: 360deg; }
@media (hover: hover) { .faq__btn:hover .faq__mark { background: rgba(255, 255, 255, .24); } .faq__item.is-open .faq__btn:hover .faq__mark { background: #fff; } }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner > div { display: grid; gap: .75rem; padding: 0 1.25rem 1.25rem; font-size: .9375rem; color: var(--fg-2); }
.faq__a-inner strong { color: var(--fg); }

/* =========================================================
   CTA – dark card on cream
   ========================================================= */
.cta {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-xl);
}
.cta__copy { display: grid; gap: 1.5rem; padding: clamp(.5rem, 2vw, 1.5rem); }
.cta__copy .lead { max-width: 30rem; }
.cta__copy .btn-row { justify-content: center; }   /* the single white button sits centred under the copy */
.cta__photo { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }

/* =========================================================
   FOOTER (dark)
   ========================================================= */
.footer { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer.has-edge { padding-top: calc(var(--edge-h) + 2.5rem); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.footer__brand { display: grid; gap: 1.5rem; justify-items: start; }
.footer__lockup { display: flex; align-items: center; gap: .85rem; border-radius: var(--radius-sm); }
.footer__lockup img { width: 3.25rem; height: auto; }
.footer__lockup strong { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.footer__lockup small { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.footer__tagline { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; max-width: 22rem; }
.footer__address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; font-size: .9375rem; color: var(--fg-2); }
.footer__address strong { display: block; margin-bottom: .2rem; color: var(--fg); }
.footer__address a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c-strong); }
.footer__address a:hover { text-decoration-color: currentColor; }
.social { display: flex; gap: .75rem; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #1877f2; transition: transform var(--dur-fast) var(--ease-out); }
.social a svg { width: 2.75rem; height: 2.75rem; }
@media (hover: hover) { .social a:hover { transform: translateY(-2px); } }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.footer__cols h2 { margin: 0 0 .75rem; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.footer__cols ul { display: grid; gap: .1rem; }
.footer__cols a { display: inline-block; padding: .3rem 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.005em; color: var(--fg); border-radius: 4px; }
.footer__cols a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-c);
  font-size: .875rem; color: var(--fg-2);
}
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c-strong); }
.footer__legal a:hover { text-decoration-color: currentColor; }
.footer--slim { padding-top: 2rem; }
.footer--slim .footer__bottom { margin-top: 0; }

/* =========================================================
   LEGAL PAGES (impressum / datenschutz)
   ========================================================= */
.legal { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.legal__inner { max-width: 46rem; }
.legal .h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 2rem; }
.legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.015em; color: var(--fg); margin: 2.5rem 0 .75rem; }
.legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--fg); margin: 1.5rem 0 .5rem; }
.legal p, .legal li { margin-bottom: 1rem; color: var(--fg-2); }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c-strong); }
.legal a:hover { text-decoration-color: currentColor; }
.legal .back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 2rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--fg); text-decoration: none; border-radius: 4px; }
.legal .back:hover { color: var(--accent); }
.legal .credits { display: grid; gap: .35rem; }
.legal .credits li { margin: 0; font-size: .9375rem; }

/* =========================================================
   KONTAKTSEITE (kontakt.html)
   ========================================================= */
.hero--page .hero__grid { align-items: center; }
.hero--page .hero__copy { padding-bottom: 0; }
.hero--page .hero__photo { aspect-ratio: 4 / 3; }
.hero--page .hero__photo img { object-position: 45% 50%; }   /* keeps Andrea centred when the 3:2 photo is cropped to 4:3 */

.contact { padding-top: clamp(3rem, 6vw, 5rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__info { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.5rem; }
.contact__list { display: grid; gap: .75rem; }
.contact__item {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1.1rem 1.25rem; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-c);
}
.contact__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); }
.contact__item strong { display: block; margin-bottom: .1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.contact__value { display: inline-block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--fg); border-radius: 4px; }
a.contact__value:hover { color: var(--accent); }
.contact__note { display: block; margin-top: .35rem; font-size: .875rem; color: var(--fg-2); }
.contact__note a, .field--check a, .form-panel p a, .anfahrt__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c-strong); }
.contact__note a:hover, .field--check a:hover, .form-panel p a:hover, .anfahrt__note a:hover { text-decoration-color: currentColor; }

/* form */
.form-card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line-c); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.form-card__head { margin-bottom: 1.5rem; }
.form-card__head .h3 { margin-bottom: .35rem; }
.form-card__head p { font-size: .9375rem; color: var(--fg-2); }
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: .4rem; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { font-size: .875rem; font-weight: 600; color: var(--fg); }
.field__req { color: var(--fg-2); font-weight: 500; }
.field__input {
  width: 100%; min-height: 3rem; padding: .75rem 1rem; font: inherit; font-size: 1rem; line-height: 1.375; color: var(--fg);
  background: var(--field); border: 1px solid var(--line-c-strong); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.field__input::placeholder { color: #7a8486; opacity: 1; }
@media (hover: hover) { .field__input:hover { border-color: var(--fg); } }
.field__input:focus, .field__input:focus-visible { outline: none; background: var(--surface); border-color: var(--brand-text); box-shadow: 0 0 0 3px rgba(11, 111, 107, .18); }
textarea.field__input { min-height: 9.5rem; resize: vertical; }
select.field__input {
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23171c1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px 16px;
}
.field__hint { font-size: .8125rem; color: var(--fg-2); }
.field__error { display: none; font-size: .8125rem; font-weight: 500; color: #b42318; }
.field.is-invalid .field__input { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__hint { display: none; }
.field--choice legend { padding: 0; margin-bottom: .4rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.choice { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; color: var(--fg); cursor: pointer; }
.choice input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--brand-text); cursor: pointer; }
.field--check .choice { align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--fg-2); }
.field--check .choice input { margin-top: .2rem; }
.field.is-invalid .choice input { outline: 2px solid #d92d20; outline-offset: 2px; border-radius: 3px; }
/* trap for spam bots: far off-screen rather than display:none (some bots skip hidden fields) */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.form__actions .btn { min-width: 12.5rem; }
.form__actions .btn svg { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .form__actions .btn:hover svg { transform: translateX(3px); } }
.form__required { font-size: .8125rem; color: var(--fg-2); }
/* result panels take the place of the form */
.form-panel { display: grid; gap: 1rem; justify-items: start; padding-block: .5rem; outline: none; }
.form-panel__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); }
.form-panel--error .form-panel__icon { background: #fdecea; color: #b42318; }
.form-panel p { font-size: .9375rem; color: var(--fg-2); }
.form-panel__small { font-size: .875rem; }
.form-panel .btn-row { margin-top: .5rem; }

/* Anfahrt */
/* Anfahrt follows the contact section directly: it does not claim a screen of its own (its content is much shorter
   than one), and the generous bottom padding of the section above is the whole separation it needs – otherwise the
   forced full height plus its own top padding leaves a field of nothing above the heading. */
.anfahrt { min-height: 0; padding-top: 0; }
.anfahrt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.anfahrt__content { display: grid; gap: 1.5rem; }
.anfahrt__content .chip { justify-self: start; }
.anfahrt__address { padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--sky); color: var(--ink); font-size: .9375rem; line-height: 1.6; justify-self: start; }
.anfahrt__note { max-width: 34rem; font-size: .8125rem; color: var(--fg-2); }

/* the map: a self-drawn SVG (assets/img/karte-neukirch-egnach.svg) with place names and the pin as HTML overlays
   (positions in % of the square frame – keep the aspect ratio); the picture links to the Google Maps directions,
   the Google map itself is only loaded on request (js/kontakt.js) */
.media--map { aspect-ratio: 1 / 1; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--line-c); container-type: inline-size; }
.map__link { position: absolute; inset: 0; display: block; color: inherit; }
.map__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-xl); }
.map__canvas { position: absolute; inset: 0; }
.map__img { width: 100%; height: 100%; object-fit: cover; }
.map__label {
  position: absolute; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}
.map__label--hamlet { font-size: .6875rem; font-weight: 500; color: #5c6b6f; }
.map__label--water { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: #3f7a92; }
.map__label--station { padding-left: .95rem; font-size: .6875rem; font-weight: 500; color: #5c6b6f; }
.map__label--station::before { content: ''; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem; transform: translateY(-50%); border: 2px solid var(--brand-text); border-radius: 50%; background: #fff; }
.map__pin { position: absolute; width: 2.125rem; }
.map__pin-inner { position: relative; display: block; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px rgba(13, 27, 30, .28)); }
.map__marker { display: block; width: 100%; height: auto; }
.map__pulse { position: absolute; left: 50%; bottom: -.45rem; width: 1.5rem; height: .9rem; border: 2px solid var(--brand-green); border-radius: 50%; transform: translateX(-50%); opacity: 0; animation: map-pulse 2.6s ease-out infinite; }
@keyframes map-pulse { 0% { transform: translateX(-50%) scale(.45); opacity: .85; } 100% { transform: translateX(-50%) scale(2.4); opacity: 0; } }
.map__tag { position: absolute; left: calc(100% + .4rem); top: .5rem; padding: .3rem .6rem; white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .95); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.map__hint {
  position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; font-size: .8125rem; font-weight: 600; color: var(--on-dark); background: var(--ink);
  border-radius: var(--pill); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.map__link:hover .map__hint, .map__link:focus-visible .map__hint { opacity: 1; transform: none; }
@media (hover: none) { .map__hint { display: none; } }
.map__frame { position: absolute; inset: 0; z-index: 2; background: var(--surface); }
.map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 1rem; font-size: .75rem; color: #5c6b6f; pointer-events: none;
  background: rgba(255, 255, 255, .9); border-top: 1px solid rgba(13, 27, 30, .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.map__bar a { pointer-events: auto; }
.map__go { display: none; align-items: center; gap: .35rem; font-weight: 600; color: var(--brand-text); }
@media (hover: none) { .map__go { display: inline-flex; } }
.map__addr { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-weight: 500; color: var(--ink); }
.map__addr svg { flex: none; color: var(--brand-text); }
.map__credit { flex: none; margin-left: auto; text-decoration: underline; text-underline-offset: 2px; }
.map__credit:hover { color: var(--ink); }
@container (max-width: 500px) {
  .map__addr, .map__label--hamlet { display: none; }
  .map__bar { padding-block: .4rem; }
}
.map.is-embed .map__link, .map.is-embed .map__bar { display: none; }
.no-js [data-map-load] { display: none; }
@media (min-width: 992px) and (max-width: 1279px) { .anfahrt .btn-row .btn { flex: 1 1 auto; } }

/* =========================================================
   MOTION
   html.js.gsap  → GSAP + ScrollTrigger (js/main.js) reveal everything marked below; the elements start
                   hidden so nothing flashes before the script takes over
   html.js       → IntersectionObserver fallback with CSS transitions (GSAP not loaded)
   no JS / reduced motion → everything is visible, nothing moves
   ========================================================= */
.js [data-reveal], .js [data-reveal-group] > * { opacity: 0; }
.js:not(.gsap) [data-reveal], .js:not(.gsap) [data-reveal-group] > * {
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js:not(.gsap) [data-reveal-group] > :nth-child(2) { transition-delay: 80ms; }
.js:not(.gsap) [data-reveal-group] > :nth-child(3) { transition-delay: 160ms; }
.js:not(.gsap) [data-reveal-group] > :nth-child(4) { transition-delay: 240ms; }
.js:not(.gsap) [data-reveal].is-visible, .js:not(.gsap) [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.js.gsap .hero-in { opacity: 0; }
/* safety net: should main.js never run, everything appears after 2.5 s (motion-ready is set the moment GSAP takes over) */
.js.gsap:not(.motion-ready) [data-reveal], .js.gsap:not(.motion-ready) [data-reveal-group] > *, .js.gsap:not(.motion-ready) .hero-in {
  animation: motion-safety 0s linear 2.5s forwards;
}
@keyframes motion-safety { to { opacity: 1; } }
.line { display: block; }

@media print {
  [data-reveal], [data-reveal-group] > *, .hero-in { opacity: 1 !important; transform: none !important; }
  .nav, .skip-link, .map__hint, .map__frame, .map__pulse, [data-map-load] { display: none !important; }
  .s-brand { background: none; color: var(--text); }
  .hero { margin-top: 0; padding-top: 1rem; }
  .stack__card { position: static !important; transform: none !important; }
  .stack__card::after { display: none; }
  /* zoom sequence: bust unscaled, labels as a plain list */
  .physio--zoom .physio__figure { transform: none !important; }
  .physio--zoom .callouts__lines { display: none !important; }
  .physio--zoom .callouts { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 1.5rem; }
  .physio--zoom .callout { position: static; translate: none !important; transform: none !important; opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal-group] > *, .js .hero-in { opacity: 1 !important; transform: none !important; }
  .map__pulse { display: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1279px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  :root { --nav-h: 4.25rem; }
  .nav__toggle { display: block; }
  .nav__menu {
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    position: fixed; inset: 0; z-index: 40; padding: calc(var(--nav-h) + 1rem) var(--pad-x) 2rem;
    background: var(--teal); color: #fff;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility var(--dur);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links li { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .nav__links a { width: 100%; padding: 1.1rem 0; border-radius: 0; font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; color: #fff; }
  .nav__actions { flex-direction: column; align-items: stretch; }
  .nav__actions .btn { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
  .nav__menu .btn--primary { --btn-bg: #fff; --btn-fg: var(--teal-deep); --btn-bg-hover: #f2fbf8; }
  .nav__menu .btn--ghost { --ghost-border: rgba(255, 255, 255, .55); --ghost-hover: rgba(255, 255, 255, .12); color: #fff; }
  .nav.menu-open .nav__bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
  .nav.menu-open .nav__toggle { color: #fff; background: rgba(255, 255, 255, .16); }

  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy { padding-bottom: 0; }
  .hero__visual { max-width: 30rem; }
  .hero__photo { aspect-ratio: 4 / 3; max-height: 40svh; }
  .hero__caption { left: 1rem; }


  .has-edge { padding-top: calc(var(--edge-h) + 1.5rem); }

  /* Ablauf: the same sticky stack as on desktop, only in one column – photo above, copy below. The photo takes
     whatever height is left over (minmax(0, 1fr)), so the card fits the screen from a 640 px phone upwards. */
  .process { --stack-top: calc(var(--nav-h) + .75rem); --peek: .75rem; }
  .stack { gap: 2.5rem; }
  .stack__card {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
    height: max(28rem, calc(100svh - var(--stack-top) - var(--peek) * 2 - 1rem));
    padding: .75rem;
  }
  .stack__card:nth-child(even) .stack__photo { order: 0; }
  .stack__photo { min-height: 8rem; border-radius: calc(var(--radius-xl) - .75rem); }
  .stack__copy { gap: .5rem; padding: 1.125rem .5rem .375rem; }
  .stack__num { font-size: 2.5rem; }
  .stack__copy .h3 { font-size: 1.375rem; }
  .stack__copy p { font-size: .9375rem; line-height: 1.5; }
  .stack__meta { margin-top: .25rem; }

  .pricing, .about, .faq__grid, .contact__grid, .anfahrt__grid { grid-template-columns: 1fr; }
  .pricing__intro, .about__photo, .faq__intro, .contact__info { position: static; }
  .about__photo { max-width: 26rem; }
  .testi__grid { grid-template-columns: 1fr; max-width: 36rem; margin-inline: auto; }
  .quote { min-height: 0; }
  .testi__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .cta { grid-template-columns: 1fr; }
  .cta__photo { aspect-ratio: 16 / 10; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-card { max-width: 44rem; }
}

/* ---------- phones: reading order and vertical budget of the hero ----------
   Order on a phone is headline → photo → call to action → text: the picture earns the fold, the button sits where the
   thumb is, the explanation follows for whoever wants it. .hero__copy dissolves (display: contents) so its three
   blocks become siblings of the photo in one column and can be ordered; the gaps are margins, not one grid gap.
   Everything is sized so the photo is never cut off by the fold – on a 640 px screen as well. */
@media (max-width: 767px) {
  .u-sm-hide { display: none; }

  /* ---- phone performance & calm surfaces ----
     The green corner glow of the hero read as a stain on the white page, so it is gone here. The nav pill drops its
     live blur: a translucent, blurred bar sits over everything that scrolls, so the browser re-blurs that strip on
     every single frame – by far the most expensive thing on a phone. The scrubbed arrow edges lose their
     drop-shadows for the same reason: a filter on an SVG path that is redrawn while scrolling is repainted each frame. */
  .hero::before { display: none; }
  .nav__bar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .edge__stroke, .edge__head { filter: none; }

  .hero:not(.hero--page) { padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
  .hero:not(.hero--page) .hero__grid { gap: 0; text-align: center; }
  .hero:not(.hero--page) .hero__copy { display: contents; }
  .hero:not(.hero--page) .hero__copy > .display { order: 1; font-size: clamp(2.125rem, 8.6vw, 3.25rem); }
  .hero:not(.hero--page) .hero__visual { order: 2; margin: clamp(1rem, 4vw, 1.5rem) auto 0; max-width: 26rem; }
  .hero:not(.hero--page) .hero__copy > .lead { order: 3; margin-top: clamp(1rem, 4vw, 1.375rem); font-size: 1rem; max-width: none; }
  .hero:not(.hero--page) .hero__copy > .btn-row { order: 4; margin-top: clamp(1rem, 4vw, 1.5rem); justify-content: center; }
  .hero:not(.hero--page) .hero__copy > .btn-row .btn { flex: 1 1 auto; }
  .hero:not(.hero--page) .hero__photo { aspect-ratio: 4 / 3; max-height: min(32svh, 18rem); border-radius: var(--radius-lg); }

  /* the intro of every section is centred on a phone – headline, lead and the button below them. Lists, quotes,
     questions and the footer stay left: centred body copy with ragged edges on both sides is harder to read. */
  .pricing__intro, .about__copy, .faq__intro, .cta__copy, .fact {
    text-align: center; justify-items: center;
  }
  .about__copy .btn-row, .cta__copy .btn-row, .pricing__intro .btn-row { justify-content: center; }
  .about__copy .chip, .sec-head .chip { justify-self: center; }
  .cred { justify-items: center; }   /* icon and label on one axis, not icon left / label centred */
  /* blocks that carry their own surface keep the full column width and their own left-aligned text */
  .faq__help, .creds, .about__copy .copy, .cta__copy .btn-row { justify-self: stretch; }
  .faq__help, .about__bar, .hero__caption { text-align: left; }
  .fact__d { max-width: 18rem; margin-inline: auto; }
  /* the name card only claims a corner of the small photo */
  .hero:not(.hero--page) .hero__caption { max-width: 13.5rem; gap: .5rem; padding: .5rem .75rem .5rem .5rem; border-radius: var(--radius-sm); }
  .hero:not(.hero--page) .hero__caption img { width: 1.875rem; height: 1.875rem; }
  .hero:not(.hero--page) .hero__caption strong { font-size: .9375rem; }
  .hero:not(.hero--page) .hero__caption span { font-size: .75rem; }
}

@media (max-width: 599px) {
  .creds { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .cred { min-height: 7rem; padding: .9rem 1rem; }
  .cred strong { font-size: 1rem; }
  .facts { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .offer { grid-template-columns: 1fr; }
  .offer__list { grid-column: auto; grid-row: auto; padding: 1rem 0 0; border-left: 0; border-top: 1px solid rgba(17, 21, 22, .14); }
  .btn-row .btn { flex: 1 1 auto; }
  .hero__caption { rotate: 0deg; left: .75rem; bottom: .75rem; }
  .footer__address, .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .form__row { grid-template-columns: 1fr; }
  .form__actions .btn { width: 100%; }
  .map__label--hamlet { display: none; }
  .map__bar { font-size: .6875rem; }
}
@media (max-width: 359px) { .map__tag { display: none; } }

/* short, wide screens (laptops with 720–768 px, ultra-wide monitors): tighter vertical rhythm so a section fits */
@media (min-width: 992px) and (max-height: 780px) {
  /* flat windows: three rows would collide, so the stickers zigzag – top/bottom near the copy, middle further out */
  .face { width: clamp(6rem, 9vw, 10.5rem); }
  .face--1, .face--3 { left: max(2%, calc(50% - min(38vw, 58rem))); }
  .face--4, .face--6 { right: max(2%, calc(50% - min(38vw, 58rem))); }
  .face--1, .face--4 { top: 5%; }
  .face--3, .face--6 { bottom: 5%; }
  .face--2 { left: max(1%, calc(50% - min(47vw, 72rem))); top: 50%; translate: 0 -50%; }
  .face--5 { right: max(1%, calc(50% - min(47vw, 72rem))); top: 50%; translate: 0 -50%; }
  :root { --section-y: clamp(3rem, 6vh, 5rem); --edge-h: clamp(3.5rem, 7vw, 8rem); }
  .hero { padding-top: calc(var(--nav-h) + .5rem); padding-bottom: 1.5rem; }
  .hero__copy { gap: 1.25rem; }
  .display { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
  .hero__copy .lead { max-width: 38rem; }
  .sec-head { margin-bottom: 1.75rem; }
  .process__head { margin-bottom: 1.25rem; }
  .process .h2--xl { font-size: clamp(2.5rem, 7vw, 6rem); }
}