/* Praxis Petersen – Relaunch-Entwurf 2026 */
:root {
  --bg: #ffffff;
  --surface: #f3f5f6;
  --surface-2: #e9edef;
  --ink: #0f1214;
  --muted: #5b6267;
  /* Pantone 375 U – Bildschirmwert wie im Logo (#ABCC59). Nur als Fläche einsetzen, nicht als Textfarbe auf Weiß */
  --accent: #abcc59;
  --accent-hover: #9dbf48;
  --accent-ink: #0f1214;
  /* abgedunkeltes 375 U für Links und Text auf Weiß (Kontrast 5,6 : 1) */
  --accent-text: #4a7314;
  --logo-grey: #575756;
  --field-1: #0f1214;
  --field-1-ink: #ffffff;
  --field-1-muted: #a7b0b6;

  /* Myriad Pro über Adobe Fonts (Kit-ID in build.mjs), sonst lokal installiertes Myriad, sonst Source Sans 3 (Adobe, sehr ähnlich) */
  --font: "myriad-pro", "Myriad Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "myriad-pro-semi-condensed", "Myriad Pro SemiCondensed", "myriad-pro", "Myriad Pro", "Source Sans 3", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.4rem, 1rem + 8.3vw, 8rem);

  --margin: 6vw;
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 13vw, 13rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}
@media (max-width: 47.99em) { :root { --margin: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class], .site-footer ul, .contact-band ul, .related ul, .menu-panel ul, .rows ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 7rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: manual; letter-spacing: -0.02em; }
.display { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.head { font-size: var(--step-head); line-height: 1.04; }
.lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.02em; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
strong { font-weight: 600; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.25rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 600; letter-spacing: -0.005em; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:hover { background: var(--accent-hover); }
.button:active { transform: scale(0.97); }
.button.ghost { background: var(--surface); color: var(--ink); }
.button.ghost:hover { background: var(--surface-2); }
.link { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link:hover { text-decoration-color: currentColor; }
.arrow-link { display: inline-flex; gap: .5em; align-items: baseline; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.arrow-link span { transition: transform var(--t-hover) var(--ease-out); }
.arrow-link:hover span { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding-inline: var(--margin); font-size: 15px; }
.site-header nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; color: var(--ink); transition: color var(--t-hover); }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--accent-text); }
.wordmark { text-decoration: none; display: flex; align-items: center; gap: 10px; line-height: 1; }
.wordmark img { width: 40px; height: 40px; flex: none; }
.wordmark span { display: grid; gap: 3px; }
.wordmark b { font-family: var(--font-logo); font-weight: 800; font-stretch: semi-condensed; font-size: 21px; letter-spacing: -0.005em; color: var(--accent); }
.wordmark small { font-size: 12.5px; color: var(--logo-grey); letter-spacing: 0.01em; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
.header-actions .tel { text-decoration: none; white-space: nowrap; }
.header-actions .button { min-height: 2.75rem; padding: 0 1.2rem; font-size: 15px; }
.menu-toggle { display: none; font-size: 15px; min-height: 44px; padding-right: 8px; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(15,18,20,.06); } /* taste-skill-ignore: sticky bar */

.menu-panel { position: fixed; inset: 76px 0 0 0; background: var(--bg); z-index: 49; padding: 24px var(--margin) 40px; overflow-y: auto; display: none; }
.menu-panel.open { display: block; }
.menu-panel ul { display: grid; gap: 4px; }
.menu-panel a { display: block; text-decoration: none; font-size: 26px; letter-spacing: -0.03em; padding: 6px 0; }
.menu-panel .sub a { font-size: 19px; color: var(--muted); padding: 4px 0 4px 0; }
.menu-panel .button { margin-top: 28px; font-size: 17px; }

@media (max-width: 63.99em) {
  .site-header nav.desk, .header-actions .tel { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
}
@media (max-width: 30em) {
  .header-actions .button { display: none; }
  .wordmark b { font-size: 18px; } .wordmark img { width: 34px; height: 34px; } .wordmark small { font-size: 11.5px; }
}

/* ---------- photo placeholders (werden durch Praxisfotos ersetzt) ---------- */
.ph { container-type: inline-size; position: relative; background: var(--surface); aspect-ratio: var(--r, 4/5); overflow: clip; width: 100%; }
.ph .ph-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(12px, 1.4vw, 20px); color: var(--muted); font-size: var(--step-small); line-height: 1.35; }
.ph .ph-in b { font-weight: 600; color: var(--ink); opacity: .55; }
.ph svg.mark { position: absolute; left: 50%; top: 45%; width: clamp(28px, 3.4vw, 48px); transform: translate(-50%, -50%); color: var(--surface-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
figure figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .ph.drift .ph-in, .ph.drift svg.mark { animation: drift 14s var(--ease-soft) infinite alternate; }
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.ph.drift svg.mark { animation-name: driftc; }
@keyframes driftc { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.06); } }

/* ---------- hero (stepped title, two photographs) ---------- */
.hero { position: relative; min-height: calc(100svh - 76px); padding-inline: var(--margin); padding-top: 10svh; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); overflow: clip; }
.hero .ph-small { grid-column: 10 / 13; grid-row: 1; --r: 16/10; margin-bottom: 20px; }
.hero h1 { grid-column: 2 / 13; grid-row: 2; }
.hero h1 .l1 { display: block; }
.hero h1 .l2 { display: block; padding-left: calc((100% + var(--gutter)) / 11 * 4); }
.hero .ph-tall { grid-column: 2 / 6; grid-row: 3; margin-top: 24px; --r: 4/5; align-self: start; margin-bottom: -18vh; }
.hero .hero-text { grid-column: 6 / 12; grid-row: 3; padding-top: 28px; padding-left: calc((100% + var(--gutter)) / 7 * 0); }
.hero .hero-text p.lead { max-width: 30ch; }
.hero .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.open-status { display: inline-flex; align-items: center; gap: .55em; font-size: var(--step-small); color: var(--muted); margin-top: 20px; }
.open-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.open-status.is-open i { background: var(--accent); }
.open-status.is-open { color: var(--ink); }

@media (max-width: 47.99em) {
  .hero { display: block; padding-top: 24px; min-height: auto; padding-bottom: 0; }
  .hero .ph-small { width: 46%; margin-left: auto; }
  .hero h1 { font-size: 15vw; margin-top: 8px; }
  .hero h1 .l2 { padding-left: 22vw; }
  .hero .hero-text { padding-top: 20px; }
  .hero .hero-text p.lead { font-size: 18px; }
  .hero .ph-tall { width: 72%; margin-top: 32px; margin-bottom: 0; }
}

/* page hero (unterseiten) */
.page-hero { padding-inline: var(--margin); padding-top: clamp(40px, 9svh, 110px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.page-hero h1 { grid-column: 1 / 10; font-size: clamp(2.6rem, 1rem + 6vw, 6.4rem); line-height: 1.0; letter-spacing: -0.045em; }
.page-hero h1 .l2 { display: block; padding-left: calc((100% + var(--gutter)) / 9 * 2); }
.page-hero .crumbs { grid-column: 1 / 13; font-size: var(--step-small); color: var(--muted); margin-bottom: 28px; }
.page-hero .crumbs a { color: var(--muted); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--accent-text); }
.page-hero .intro { grid-column: 4 / 10; margin-top: 36px; }
.page-hero .intro .lead { max-width: 34ch; }
.page-hero .intro .hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .ph-wide { grid-column: 6 / 13; margin-top: 64px; --r: 16/10; }
.page-hero .ph-side { grid-column: 2 / 5; margin-top: 180px; --r: 3/4; align-self: start; }
@media (max-width: 47.99em) {
  .page-hero { display: block; }
  .page-hero h1 { font-size: 12vw; }
  .page-hero h1 .l2 { padding-left: 14vw; }
  .page-hero .intro .lead { font-size: 19px; }
  .page-hero .ph-wide { width: 100%; margin-top: 40px; }
  .page-hero .ph-side { width: 60%; margin-top: 16px; margin-left: auto; }
}

/* ---------- intro: pinned sentence, photographs pass ---------- */
.pin-intro { position: relative; padding-inline: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); padding-top: var(--section); }
.pin-intro .pin { grid-column: 1 / 7; grid-row: 1; position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-self: start; }
.pin-intro .pin p.statement { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.25rem); line-height: 1.18; letter-spacing: -0.03em; max-width: 22ch; }
.pin-intro .pin p.sub { margin-top: 28px; max-width: 40ch; }
.pin-intro .pass { grid-column: 7 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: var(--gutter); padding-block: 12svh 6svh; row-gap: 16svh; }
.pin-intro .pass figure:nth-child(1) { grid-column: 1 / 5; }
.pin-intro .pass figure:nth-child(2) { grid-column: 2 / 7; }
.pin-intro .pass figure:nth-child(3) { grid-column: 3 / 6; }
@media (max-width: 47.99em) {
  .pin-intro { display: block; padding-top: 96px; }
  .pin-intro .pin { position: relative; height: auto; }
  .pin-intro .pin p.statement { font-size: 24px; }
  .pin-intro .pass { display: block; padding-block: 48px 0; }
  .pin-intro .pass figure { margin-bottom: 40px; }
  .pin-intro .pass figure:nth-child(1) { width: 64%; }
  .pin-intro .pass figure:nth-child(2) { width: 78%; margin-left: auto; }
  .pin-intro .pass figure:nth-child(3) { width: 52%; }
}

/* ---------- features: rows hanging from an axis, margin photographs ---------- */
.rows { padding-inline: var(--margin); padding-block: var(--section) calc(var(--section) / 2); }
.rows .rows-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); min-height: 46svh; align-items: center; }
.rows .rows-head > div { grid-column: 5 / 12; }
.rows .rows-head p { margin-top: 24px; max-width: 44ch; }
.rows ol { list-style: none; padding: 0; margin-top: 48px; display: grid; row-gap: clamp(72px, 9vw, 120px); }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.rows li .txt { grid-column: 5 / 10; }
.rows li h3 { font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); line-height: 1.05; }
.rows li h3 a { text-decoration: none; transition: color var(--t-hover); }
.rows li h3 a:hover { color: var(--accent-text); }
.rows li p { margin-top: 14px; max-width: 40ch; }
.rows li .arrow-link { margin-top: 16px; }
.rows li figure { grid-column: 10 / 13; justify-self: end; }
.rows li:nth-child(3n+1) figure { width: 240px; --r: 4/5; }
.rows li:nth-child(3n+2) figure { width: 320px; --r: 3/2; }
.rows li:nth-child(3n+3) figure { width: 180px; --r: 1/1; }
.rows li figure .ph { width: 100%; }
@media (max-width: 63.99em) { .rows li .txt { grid-column: 3 / 9; } .rows .rows-head > div { grid-column: 3 / 12; } .rows li figure { grid-column: 9 / 13; max-width: 100%; } }
@media (max-width: 47.99em) {
  .rows .rows-head { display: block; min-height: auto; padding-bottom: 8px; }
  .rows ol { row-gap: 64px; }
  .rows li { display: block; }
  .rows li h3 { font-size: 26px; }
  .rows li figure { margin-top: 24px; }
  .rows li:nth-child(3n+1) figure { width: 100%; }
  .rows li:nth-child(3n+2) figure { width: 70%; margin-left: auto; }
  .rows li:nth-child(3n+3) figure { width: 55%; }
}

/* ---------- about: doctor + team ---------- */
.about { padding-inline: var(--margin); padding-block: calc(var(--section) / 2); }
.about .doc { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.about .doc figure { grid-column: 2 / 6; --r: 3/4; margin-top: 120px; }
.about .doc .bio { grid-column: 7 / 12; }
.about .doc .bio h2 { margin-bottom: 28px; }
.about .doc .bio p.role { color: var(--muted); margin-bottom: 24px; }
.cv { margin-top: 40px; display: grid; gap: 14px; }
.cv li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; font-size: var(--step-small); line-height: 1.45; }
.cv li span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.team-row { margin-top: clamp(96px, 12vw, 180px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.team-row > .team-head { grid-column: 1 / 5; }
.team-row > .team-head p { margin-top: 18px; color: var(--muted); max-width: 32ch; }
.team-row .people { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 56px; }
.people figure:nth-child(1) { grid-column: 1 / 4; }
.people figure:nth-child(2) { grid-column: 4 / 7; margin-top: 120px; }
.people figure:nth-child(3) { grid-column: 2 / 5; }
.people figure:nth-child(4) { grid-column: 6 / 9; margin-top: -60px; }
.people figure .ph { --r: 4/5; }
.people figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; }
@media (max-width: 47.99em) {
  .about .doc { display: block; }
  .about .doc figure { width: 72%; margin: 0 0 40px; }
  .team-row { display: block; }
  .team-row .people { display: block; margin-top: 40px; }
  .people figure { width: 72%; margin: 0 0 40px !important; }
  .people figure:nth-child(even) { margin-left: auto !important; }
}

/* ---------- proof: plain names in columns ---------- */
.proof { padding-inline: var(--margin); padding-block: calc(var(--section) * .6); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); background: var(--surface); }
.proof h2 { grid-column: 1 / 4; font-size: clamp(1.75rem, 1.4rem + 0.6vw, 2rem); line-height: 1.1; }
.proof .cols { grid-column: 5 / 13; columns: 3; column-gap: 32px; font-size: clamp(1.0625rem, .95rem + .4vw, 1.375rem); line-height: 1.5; }
.proof .cols p { max-width: none; margin: 0 0 1.4em; break-inside: avoid; }
.proof .cols p > span { display: block; }
.proof .cols p > span.k { color: var(--muted); }
@media (max-width: 63.99em) { .proof .cols { columns: 2; } }
@media (max-width: 47.99em) { .proof { display: block; } .proof .cols { margin-top: 28px; columns: 1; font-size: 18px; } }

/* ---------- how-it-works: drag row ---------- */
.steps { padding-block: var(--section) calc(var(--section) / 2); }
.steps .steps-top { padding-inline: var(--margin); display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.steps .steps-top p { margin-top: 14px; color: var(--muted); max-width: 44ch; }
.steps .ctrl { display: flex; gap: 8px; }
.steps .ctrl button { width: 48px; height: 48px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 20px; border-radius: 50%; transition: transform var(--t-press), background var(--t-hover); }
.steps .ctrl button:hover { background: var(--accent); color: var(--ink); }
.steps .ctrl button:active { transform: scale(.94); }
.steps .bar { margin: 28px var(--margin) 0; height: 6px; background: var(--surface-2); position: relative; border-radius: 3px; overflow: hidden; }
.steps .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--ink); border-radius: 3px; transition: width 120ms linear; }
.steps .track { margin-top: 40px; display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--margin); scroll-padding-inline: var(--margin); scrollbar-width: none; }
.steps .track::-webkit-scrollbar { display: none; }
.steps .track li { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; }
.steps .track h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.steps .track p { margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.steps .track .gap { flex: 0 0 auto; }
.steps .track li:nth-child(odd) .gap { height: 120px; }
.steps .track li:nth-child(3n) .gap { height: 64px; }
.steps .track li:nth-child(4n+2) .gap { height: 140px; }
.steps .track li:nth-child(4n) .gap { height: 90px; }
.steps .track .ph { --r: 4/5; }
@media (max-width: 47.99em) {
  .steps .ctrl { display: none; }
  .steps .track { gap: 16px; }
  .steps .track li { flex-basis: 72vw; }
  .steps .track li .gap { height: 40px !important; }
  .steps .track li:nth-child(even) .gap { height: 24px !important; }
}

/* ---------- booking (live thing) ---------- */
.booking { padding-inline: var(--margin); padding-block: calc(var(--section) / 2); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.booking .b-head { grid-column: 1 / 5; }
.booking .b-head p { margin-top: 20px; color: var(--muted); max-width: 34ch; }
.booking .b-head .hours { margin-top: 36px; }
.booking form, .booking .done { grid-column: 6 / 13; }
.hours { width: 100%; max-width: 360px; border-collapse: collapse; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.hours td { padding: 7px 0; vertical-align: top; }
.hours td:first-child { color: var(--muted); padding-right: 24px; width: 7em; }
.hours tr.today td { color: var(--ink); font-weight: 600; }
fieldset { border: 0; margin: 0 0 36px; padding: 0; min-width: 0; }
legend { font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 16px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--surface); font-size: 16px; transition: background var(--t-hover), color var(--t-hover), transform var(--t-press); cursor: pointer; user-select: none; }
.chip:hover span { background: var(--surface-2); }
.chip input:checked + span { background: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.chip:active span { transform: scale(.97); }
.note { margin-top: 14px; font-size: var(--step-small); color: var(--muted); min-height: 1.4em; }
.urgent { display: none; margin-top: 18px; padding: 22px 24px; background: var(--ink); color: var(--bg); }
.urgent.show { display: block; }
.urgent p { max-width: 46ch; }
.urgent a.button { margin-top: 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }
.fields label { display: grid; gap: 6px; font-size: var(--step-small); color: var(--muted); }
.field { width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid transparent; border-radius: 12px; font-size: 17px; color: var(--ink); transition: border-color var(--t-hover), background var(--t-hover); } /* taste-skill-ignore: form field */
.field:focus { outline: none; border-color: var(--accent-text); background: var(--bg); }
textarea.field { min-height: 7rem; resize: vertical; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step-small); color: var(--muted); margin-top: 18px; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent-text); flex: none; }
.form-actions { margin-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form-error { color: #b42318; font-size: var(--step-small); }
.done { display: none; background: var(--surface); padding: clamp(28px, 4vw, 56px); }
.done.show { display: block; }
.done h3 { font-size: var(--step-head); line-height: 1.05; }
.done p { margin-top: 18px; }
@media (max-width: 47.99em) {
  .booking { display: block; }
  .booking form, .booking .done { margin-top: 48px; }
  .fields { grid-template-columns: 1fr; }
}

/* ---------- faq ---------- */
.faq { padding-inline: var(--margin); padding-block: calc(var(--section) / 2); }
.faq h2 { font-size: clamp(2.2rem, 1rem + 4.2vw, 5.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.faq .qs { margin-top: 80px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.faq .qs > div { grid-column: 5 / 13; display: grid; gap: 12px; }
.faq details { padding: 14px 24px; margin-inline: -24px; transition: background var(--t-hover); }
.faq details[open] { background: var(--surface); padding-block: 24px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; font-size: clamp(1.1875rem, 1rem + .5vw, 1.5rem); letter-spacing: -0.02em; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--t-hover) var(--ease-out); }
.faq details[open] summary .chev { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--accent-text); }
.faq details .a { margin-top: 16px; max-width: 52ch; }
.faq details .a p { font-size: 17px; }
@media (max-width: 47.99em) {
  .faq h2 { font-size: 10vw; }
  .faq .qs { display: block; margin-top: 48px; }
  .faq details { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .faq summary { font-size: 19px; }
  .faq details .a p { font-size: 16px; }
}

/* ---------- contact band ---------- */
.contact-band { padding-inline: var(--margin); padding-block: 160px 120px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.contact-band p.statement { grid-column: 1 / 6; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; max-width: 20ch; }
.contact-band figure { grid-column: 7 / 9; --r: 1/1; }
.contact-band .c-links { grid-column: 9 / 13; }
.contact-band .c-links h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.contact-band .c-links ul { margin-top: 18px; display: grid; gap: 8px; font-size: 19px; }
.contact-band .c-links a { color: var(--accent-text); }
.contact-band .c-links p { margin-top: 18px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 47.99em) {
  .contact-band { display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; padding-block: 96px 80px; }
  .contact-band p.statement { grid-column: 1 / 3; font-size: 24px; margin-bottom: 32px; }
  .contact-band figure { grid-column: 1; }
  .contact-band .c-links { grid-column: 2; }
}

/* ---------- prose (unterseiten) ---------- */
.prose-row { padding-inline: var(--margin); padding-block: calc(var(--section) / 2.2); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.prose-row .txt { grid-column: 5 / 11; }
.prose-row h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.06; margin-bottom: 24px; max-width: 18ch; }
.prose-row h3 { font-size: var(--step-lead); margin: 32px 0 10px; }
.prose-row ul.ticks { margin-top: 20px; display: grid; gap: 12px; max-width: 60ch; }
.prose-row ul.ticks li { padding-left: 1.6em; position: relative; }
.prose-row ul.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); }
.prose-row figure { grid-column: 1 / 4; }
.prose-row.alt .txt { grid-column: 2 / 8; grid-row: 1; }
.prose-row.alt figure { grid-column: 9 / 13; grid-row: 1; margin-top: 120px; }
.prose-row figure .ph { --r: 3/4; }
.prose-row.alt figure .ph { --r: 4/5; }
.prose-row.nofig .txt { grid-column: 3 / 10; }
.prose-row.field { background: var(--surface); }
.prose-row.dark { background: var(--field-1); color: var(--field-1-ink); }
.prose-row.dark .muted, .prose-row.dark p.muted { color: var(--field-1-muted); }
.prose-row.dark ul.ticks li::before { background: #fff; }
@media (max-width: 47.99em) {
  .prose-row { display: block; }
  .prose-row h2 { font-size: 30px; }
  .prose-row figure { width: 72%; margin-bottom: 36px; }
  .prose-row.alt figure { margin: 40px 0 0 auto; width: 60%; }
}

/* related treatments */
.related { padding-inline: var(--margin); padding-block: calc(var(--section) / 2); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.related h2 { grid-column: 1 / 5; font-size: clamp(1.75rem, 1.4rem + .6vw, 2rem); line-height: 1.1; }
.related ul { grid-column: 5 / 13; columns: 2; column-gap: 32px; }
.related li { break-inside: avoid; margin-bottom: 10px; }
.related a { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; text-decoration: none; transition: color var(--t-hover); }
.related a:hover { color: var(--accent-text); }
@media (max-width: 47.99em) { .related { display: block; } .related ul { columns: 1; margin-top: 24px; } }

/* cta strip */
.cta-strip { margin-inline: var(--margin); margin-block: calc(var(--section) / 2); background: var(--accent); color: var(--accent-ink); padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: end; border-radius: 28px; }
.cta-strip h2 { grid-column: 1 / 8; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); line-height: 1.04; }
.cta-strip .acts { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-strip .button { background: var(--ink); color: #fff; }
.cta-strip .button:hover { background: #2a3034; }
.cta-strip .button.ghost { background: rgba(255,255,255,.55); color: var(--ink); }
.cta-strip .button.ghost:hover { background: rgba(255,255,255,.8); }
.cta-strip p { grid-column: 1 / 8; margin-top: 16px; color: #2d3a12; }
@media (max-width: 47.99em) { .cta-strip { display: block; border-radius: 20px; } .cta-strip .acts { justify-content: flex-start; margin-top: 28px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--field-1); color: var(--field-1-ink); padding: clamp(72px, 9vw, 120px) var(--margin) 40px; overflow: clip; }
.site-footer .big { font-family: var(--font-logo); font-weight: 800; font-stretch: semi-condensed; color: var(--accent); font-size: clamp(3rem, 1rem + 10vw, 11.5rem); line-height: .9; letter-spacing: -0.02em; margin-bottom: 72px; white-space: nowrap; }
.site-footer .f-row { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 40px; }
.site-footer .places { grid-column: 1 / 6; display: grid; gap: 6px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.2; }
.site-footer .places a { color: var(--accent); text-decoration: none; }
.site-footer .places a:hover { color: #fff; }
.site-footer .places .addr { color: var(--field-1-ink); }
.site-footer .f-cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 15px; }
.site-footer .f-cols h2 { font-size: 15px; font-weight: 600; color: var(--field-1-muted); margin-bottom: 12px; letter-spacing: 0; }
.site-footer .f-cols ul { display: grid; gap: 8px; }
.site-footer .f-cols a { text-decoration: none; color: var(--field-1-ink); }
.site-footer .f-cols a:hover { color: var(--accent); }
.site-footer .legal { margin-top: 96px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--field-1-muted); }
.site-footer .legal a { color: var(--field-1-muted); }
@media (max-width: 47.99em) {
  .site-footer .big { font-size: 15.5vw; margin-bottom: 48px; }
  .site-footer .f-row { display: block; }
  .site-footer .places { font-size: 24px; margin-bottom: 40px; }
  .site-footer .f-cols { grid-template-columns: 1fr 1fr; }
}

/* sticky mobile call bar */
.mobile-cta { display: none; }
@media (max-width: 47.99em) {
  .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -6px 24px rgba(15,18,20,.07); } /* taste-skill-ignore: sticky bar */
  .mobile-cta .button { min-height: 48px; font-size: 16px; }
  body { padding-bottom: 72px; }
}

/* landing (neupatienten / ads) */
.lp-hero { padding-inline: var(--margin); padding-top: clamp(32px, 7svh, 90px); padding-bottom: calc(var(--section) / 2); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.lp-hero .l { grid-column: 1 / 7; }
.lp-hero h1 { font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem); line-height: 1; letter-spacing: -0.045em; }
.lp-hero .lead { margin-top: 28px; max-width: 32ch; }
.lp-hero ul.ticks { margin-top: 32px; display: grid; gap: 10px; }
.lp-hero ul.ticks li { padding-left: 1.6em; position: relative; }
.lp-hero ul.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); }
.lp-hero figure { grid-column: 8 / 13; --r: 4/5; }
@media (max-width: 47.99em) { .lp-hero { display: block; } .lp-hero figure { width: 72%; margin: 40px 0 0 auto; } .lp-hero h1 { font-size: 12vw; } }

.legal-text { padding-inline: var(--margin); padding-block: 40px var(--section); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.legal-text > div { grid-column: 4 / 11; }
.legal-text h2 { font-size: var(--step-lead); margin: 40px 0 12px; }
@media (max-width: 47.99em) { .legal-text { display: block; } }

/* ---------- motion ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 520ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .ph[data-shutter] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .ph[data-shutter].is-in { clip-path: inset(0); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

@container (max-width: 200px) { .ph-in span { display: none; } }
.nowrap { white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.button[aria-busy=true] { opacity: .6; pointer-events: none; }