:root {
  color-scheme: light;
  --ink: #153130;
  --muted: #60706f;
  --paper: #fbfcfa;
  --surface: #ffffff;
  --line: #dce5e1;
  --brand: #176a62;
  --brand-dark: #11534d;
  --brand-soft: #e4f3ef;
  --warm: #f3eee4;
  --warning: #a75620;
  --warning-bg: #fff2e7;
  --danger: #a33a3a;
  --danger-bg: #fff0ef;
  --success: #196246;
  --success-bg: #e9f7f0;
  --shadow: 0 18px 55px rgba(21, 49, 48, .10);
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(201, 239, 228, .55), transparent 30rem),
    linear-gradient(180deg, #f8fbf8 0%, var(--paper) 42%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(23, 106, 98, .28);
  outline-offset: 2px;
}
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.02em; }
.brand img { width: 42px; height: 42px; }
.brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.quiet-link { color: var(--brand-dark); text-decoration: none; font-weight: 700; }
.quiet-link:hover { text-decoration: underline; }
.booking-layout { display: grid; grid-template-columns: 310px 1fr; gap: 28px; padding: 34px 0 70px; }
.review-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  border: 1px solid #d8a23a;
  border-radius: 14px;
  background: #fff8e8;
  color: #5f4310;
}
.review-banner span { flex: 1 1 24rem; }
.review-banner a { color: inherit; font-weight: 700; }
.review-state { color: #805d17 !important; font-weight: 700; }
.intro { padding: 28px 8px 0 0; }
.eyebrow { color: var(--brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 10px 0 16px; font-size: clamp(34px, 5vw, 54px); line-height: 1.02; letter-spacing: -.055em; }
h2 { margin: 0 0 8px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
p { line-height: 1.58; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 26px; }
.trust-list { display: grid; gap: 12px; margin-top: 30px; }
.trust-item { display: flex; gap: 11px; color: var(--muted); font-size: 14px; }
.trust-item::before { content: "✓"; color: var(--brand); font-weight: 900; }
.card {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid rgba(220, 229, 225, .9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.booking-card { min-height: 610px; padding: clamp(22px, 4vw, 42px); }
.progress { display: flex; gap: 8px; margin-bottom: 34px; }
.progress span {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px;
  padding-top: 10px; border-top: 4px solid #e4ebe8; color: var(--muted);
}
.progress span.active { border-color: var(--brand); color: var(--brand-dark); }
.progress b {
  flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: #edf2f0; font-size: 11px;
}
.progress span.active b { color: #fff; background: var(--brand); }
.progress em { min-width: 0; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.2; }
.step { display: none; animation: reveal .22s ease-out; }
.step.active { display: block; }
.request-step { animation: reveal .22s ease-out; }
.request-summary { margin-top: 24px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-upload {
  display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px;
  border: 1px dashed #91aaa4; border-radius: 15px; background: #f8fcfa; color: var(--ink);
  transition: .15s ease; cursor: pointer;
}
.file-upload:hover, .file-input:focus-visible + .file-upload { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(23, 106, 98, .12); }
.file-upload-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 22px; font-weight: 800; }
.file-upload strong, .file-upload small { display: block; }
.file-upload small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.step-copy { color: var(--muted); margin: 0 0 24px; }
.choice-grid { display: grid; gap: 12px; }
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  transition: .15s ease;
}
.choice:hover { border-color: #9bbeb7; transform: translateY(-1px); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.choice input { width: 19px; height: 19px; accent-color: var(--brand); margin-top: 2px; }
.choice strong { display: block; }
.choice small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.4; }
.compact-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
.preference-choices { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preference-choices .choice { padding: 10px 12px; align-items: center; }
.preference-choices .choice span { font-weight: 700; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { font-size: 14px; font-weight: 750; }
.field input, .field select, .field textarea, .search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 13px 14px;
}
.field input:hover, .field select:hover { border-color: #aac1bc; }
.checkline { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.checkline input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.button {
  border: 0;
  border-radius: 12px;
  padding: 13px 19px;
  font-weight: 780;
  background: var(--brand);
  color: #fff;
  min-height: 48px;
}
.button:hover { background: var(--brand-dark); }
.button:disabled { opacity: .52; cursor: not-allowed; }
.button.secondary { background: transparent; color: var(--brand-dark); border: 1px solid var(--line); }
.button.secondary:hover { background: var(--brand-soft); }
.button.danger { background: var(--danger); }
.button.wide { width: 100%; }
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.slot {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 15px;
  text-align: left;
  color: var(--ink);
}
.slot.selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.slot strong, .slot span { display: block; }
.slot span { color: var(--muted); margin-top: 5px; font-size: 13px; }
.slot small { display: block; margin-top: 4px; color: var(--muted); }
.empty { border: 1px dashed #b9c9c5; border-radius: 14px; padding: 24px; color: var(--muted); text-align: center; }
.notice { border-radius: 14px; padding: 15px 17px; margin: 18px 0; font-size: 14px; line-height: 1.5; }
.notice.info { background: var(--brand-soft); color: var(--brand-dark); }
.notice.success { background: var(--success-bg); color: var(--success); }
.notice.warning { background: var(--warning-bg); color: #7e3c16; }
.notice.error { background: var(--danger-bg); color: var(--danger); }
.clinical-question.missing { border-color: var(--danger); }
fieldset.clinical-question.missing { outline: 1px solid var(--danger); border-radius: 15px; }
.safety-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.save-status { min-height: 18px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.save-status.is-error { color: var(--danger); font-weight: 700; }
.intake-actions { margin-top: 24px; }
.intake-cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.intake-cta p { color: var(--muted); margin: 0 0 12px; }
#clinical-intake-done { text-align: center; }
@media (max-width: 480px) {
  .yes-no-grid, .safety-grid { grid-template-columns: 1fr; }
}
.patient-privacy { margin-top: 22px; }
.clinical-intake-groups { display: grid; gap: 18px; }
.question-group {
  min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line);
  border-radius: 15px; background: #fbfdfc;
}
.question-group legend { padding: 0 7px; color: var(--brand-dark); font-weight: 800; }
.yes-no-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clinical-question { min-width: 0; }
.consent-summary {
  margin: 16px 0; padding: 14px 16px; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand-dark); font-size: 14px;
}
.consent-summary strong { display: block; margin-bottom: 5px; }
.consent-summary ul { margin: 0; padding-left: 18px; }
.result { text-align: center; padding: 48px 12px 20px; }
.result-icon {
  width: 66px; height: 66px; display: grid; place-items: center;
  margin: 0 auto 20px; border-radius: 50%; font-size: 27px; font-weight: 900;
}
.result.confirmed .result-icon { color: var(--success); background: var(--success-bg); }
.result.uncertain .result-icon { color: var(--warning); background: var(--warning-bg); }
.result.failed .result-icon { color: var(--danger); background: var(--danger-bg); }
.booking-number { display: inline-block; margin-top: 14px; background: #f1f4f2; padding: 8px 12px; border-radius: 9px; font-weight: 800; letter-spacing: .03em; }
.booking-summary, .result-details { margin-top: 22px; text-align: left; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.summary-grid div { min-width: 0; padding: 13px 15px; background: #fff; }
.summary-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.summary-grid dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; line-height: 1.4; }
.summary-grid .summary-wide { grid-column: 1 / -1; }
.result-details a, .checkline a { color: var(--brand-dark); font-weight: 700; }
.hidden { display: none !important; }
.booking-card [hidden] { display: none !important; }
.error-text { min-height: 20px; color: var(--danger); font-size: 14px; margin-top: 10px; }
.restart-panel {
  margin-top: 14px; padding: 17px; border: 1px solid #efc2bf; border-radius: 14px;
  background: var(--danger-bg); color: #762c2c;
}
.restart-panel p { margin: 0 0 12px; font-weight: 700; }

/* Operational inbox */
.staff-body { background: #f3f6f4; }
.staff-shell { width: min(1440px, calc(100% - 30px)); margin: 0 auto; }
.staff-topbar { min-height: 70px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }
.staff-topbar .staff-shell { min-height: 70px; display: flex; align-items: center; justify-content: space-between; }
.staff-user { font-size: 13px; color: var(--muted); }
.inbox-header { padding: 30px 0 20px; }
.inbox-header h1 { font-size: 38px; margin: 0 0 6px; }
.inbox-header p { margin: 0; color: var(--muted); }
.inbox-toolbar { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.search { max-width: 390px; }
.button-compact { width: auto; min-height: 40px; padding: 9px 13px; font-size: 13px; }
.inbox-filters { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.inbox-filters label, .note-form label { color: var(--muted); font-size: 12px; font-weight: 700; }
.inbox-filters select, .inbox-filters input { margin-top: 5px; min-height: 40px; }
.group-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 16px; }
.group-tab {
  white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 9px 13px; font-weight: 700; font-size: 13px;
}
.group-tab.active { color: #fff; border-color: var(--brand); background: var(--brand); }
.workbench { display: grid; grid-template-columns: minmax(480px, .95fr) minmax(430px, 1.05fr); gap: 18px; padding-bottom: 50px; }
.list-panel, .detail-panel { min-height: 620px; background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }
.list-head { display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: 12px; padding: 12px 18px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line); }
.inbox-row {
  width: 100%; display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: 12px;
  padding: 17px 18px; text-align: left; background: #fff; color: var(--ink);
  border: 0; border-bottom: 1px solid #edf1ef;
}
.inbox-row:hover, .inbox-row.selected { background: #f3faf7; }
.inbox-row.selected { box-shadow: inset 3px 0 var(--brand); }
.row-patient strong, .row-subject strong { display: block; }
.row-patient span, .row-subject span, .row-meta span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 8px; background: var(--warning-bg); color: #803e18; font-size: 12px; font-weight: 800; }
.detail-empty { min-height: 620px; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px; }
.detail { padding: 26px; }
.detail-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.detail-title p { margin: 5px 0 0; color: var(--muted); }
.detail-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 14px; }
.fact dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.fact dd { margin: 0; font-weight: 680; }
.next-action { background: var(--warning-bg); border-radius: 14px; padding: 16px; margin-top: 16px; }
.next-action small { display: block; color: #86502c; font-weight: 750; }
.next-action strong { display: block; margin-top: 5px; }
.resolution-grid { display: grid; gap: 10px; margin-top: 14px; }
.resolution {
  border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 13px 14px;
  text-align: left; color: var(--ink);
}
.resolution:hover { border-color: var(--brand); background: var(--brand-soft); }
.resolution strong, .resolution span { display: block; }
.resolution span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.resolution-panel > summary { list-style: none; display: inline-flex; margin-top: 12px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.plain-list { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.plain-list li { margin: 6px 0; overflow-wrap: anywhere; }
.plain-list small { display: block; }
.note-form { display: grid; gap: 8px; margin-top: 16px; }
.note-form textarea { min-height: 80px; resize: vertical; }
details { margin-top: 15px; }
summary { cursor: pointer; color: var(--brand-dark); font-weight: 750; }
.diagnostics { margin-top: 10px; background: #142625; color: #d8e8e4; border-radius: 12px; padding: 14px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; max-height: 260px; overflow: auto; }

@media (max-width: 900px) {
  .booking-layout { grid-template-columns: 1fr; padding-top: 10px; }
  .intro { padding-top: 4px; }
  .trust-list { display: none; }
  .workbench { grid-template-columns: 1fr; }
  .inbox-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-panel { min-height: 0; }
}

@media (max-width: 620px) {
  .shell, .staff-shell { width: min(100% - 22px, 100%); }
  .topbar { min-height: 64px; }
  .brand small { display: none; }
  .booking-card { padding: 22px 17px; border-radius: 16px; min-height: 560px; }
  .progress { gap: 4px; margin-bottom: 25px; }
  .progress span { display: block; padding-top: 7px; }
  .progress b { margin-bottom: 4px; }
  .progress em { display: block; font-size: 9px; overflow-wrap: anywhere; }
  .field-grid, .slot-grid, .compact-choices, .summary-grid, .yes-no-grid { grid-template-columns: 1fr; }
  .summary-grid .summary-wide { grid-column: auto; }
  .actions { position: sticky; bottom: 0; background: rgba(255,255,255,.96); padding: 12px 0 2px; }
  .actions .button { flex: 1; }
  .list-head { display: none; }
  .inbox-row { grid-template-columns: 1fr; }
  .row-meta { display: flex; justify-content: space-between; }
  .inbox-filters { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.growth-analysis-flow:before{content:'Ihre Analyse  ·  Funktions- und Leistungsanalyse  ·  60 Minuten  ·  179 €';display:block;margin:0 0 18px;padding:13px 16px;border-top:1px solid #cfc5b6;border-bottom:1px solid #cfc5b6;background:#f4efe5;color:#5b513f;font-size:12px;font-weight:750;letter-spacing:.04em}@media(max-width:620px){.growth-analysis-flow:before{margin:0 0 14px;font-size:11px;line-height:1.45}}

/* Self-hosted, same variable-weight files physio-web ships. No CDN, no
   runtime dependency on the physio-web service - static files copied once. */
@font-face {
  font-family: 'Site Inter';
  src: url('/termin/buchen/assets/fonts/inter-latin-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Site Plus Jakarta Sans';
  src: url('/termin/buchen/assets/fonts/plus-jakarta-sans-latin-variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Site Cormorant';
  src: url('/termin/buchen/assets/fonts/cormorant-garamond-latin-variable.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Site Cormorant';
  src: url('/termin/buchen/assets/fonts/cormorant-garamond-latin-italic-variable.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

.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;
}

/* Public booking only — reuses the actual physiotherapie-am-marktplatz.de
   header/hero/footer shell (ported assets, no runtime dependency on
   physio-web) so /termin/buchen reads as a page of that site, not a
   separate app. Does not affect staff, assessment or patient-portal. */
.booking-page {
  --ed-linen: #F8F5F0;
  --ed-parchment: #F2ECE4;
  --ed-ink: #1D1A12;
  --ed-body: #5C554E;
  --ed-faint: #6B625A;
  --ed-border: #E8E0D4;
  --ed-gold: #B89C6A;
  --ed-gold-text: #70582E;
  --ed-focus: #946600;
  --ed-ease: cubic-bezier(.22, 1, .36, 1);
  --font-serif: 'Site Cormorant', Georgia, 'Times New Roman', serif;
  --font-heading: 'Site Plus Jakarta Sans', 'Site Inter', system-ui, sans-serif;
  background: var(--ed-linen);
  color: var(--ed-ink);
  font-family: 'Site Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.booking-page .site-header a,
.booking-page .site-footer a,
.booking-page .hero a { text-decoration: none; }

.booking-page .wide-shell,
.booking-page .content-shell {
  width: min(100%, 1500px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 4rem);
}
.booking-page .content-shell { width: min(100%, 1440px); }

body.site-nav-open { overflow: hidden; }

/* 1. Header — fixed, transparent-over-hero, flips to an opaque light bar
   with a blur once the page scrolls past the hero (mirrors Header.tsx's
   `scrolled = window.scrollY > 24` + backdrop-filter behaviour exactly). */
.booking-page .site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
.booking-page .site-header.is-scrolled {
  background: rgba(248, 245, 240, .96);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--ed-border);
}
.booking-page .site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 20px; }
.booking-page .site-logo { display: inline-flex; }
.booking-page .site-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); transition: filter 200ms ease; }
.booking-page .site-header.is-scrolled .site-logo img { filter: none; }
.booking-page .site-nav { display: none; align-items: center; gap: 28px; }
.booking-page .site-nav a {
  position: relative;
  font-size: 14px; font-weight: 500; color: var(--ed-linen);
  transition: color 200ms ease;
}
.booking-page .site-header.is-scrolled .site-nav a { color: var(--ed-ink); }
.booking-page .site-nav a.site-nav-active { border-bottom: 1px solid rgba(184, 156, 106, .75); padding-bottom: 2px; }
.booking-page .site-nav a:not(.site-nav-active)::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease-out;
}
.booking-page .site-nav a:not(.site-nav-active):hover::after { transform: scaleX(1); }
.booking-page .site-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; padding: 0;
}
.booking-page .site-nav-toggle-icon,
.booking-page .site-nav-toggle-icon::before,
.booking-page .site-nav-toggle-icon::after {
  display: block; width: 20px; height: 1.5px; background: var(--ed-linen); transition: background 200ms ease;
}
.booking-page .site-header.is-scrolled .site-nav-toggle-icon,
.booking-page .site-header.is-scrolled .site-nav-toggle-icon::before,
.booking-page .site-header.is-scrolled .site-nav-toggle-icon::after { background: var(--ed-ink); }
.booking-page .site-nav-toggle-icon { position: relative; }
.booking-page .site-nav-toggle-icon::before,
.booking-page .site-nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
.booking-page .site-nav-toggle-icon::before { top: -6px; }
.booking-page .site-nav-toggle-icon::after { top: 6px; }
.booking-page .site-nav-mobile {
  background: var(--ed-linen); border-top: 1px solid var(--ed-border);
  padding: 8px 0 0;
}
.booking-page .site-nav-mobile nav { display: flex; flex-direction: column; padding-inline: clamp(1.25rem, 3vw, 4rem); }
.booking-page .site-nav-mobile a {
  min-height: 56px; display: flex; align-items: center;
  font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 400;
  color: var(--ed-ink); border-bottom: 1px solid var(--ed-border);
}
.booking-page .site-nav-mobile a.site-nav-active { color: var(--ed-gold-text); }
.booking-page .site-nav-mobile-contact { padding: 20px clamp(1.25rem, 3vw, 4rem) 24px; border-top: 1px solid var(--ed-border); }
.booking-page .site-nav-mobile-contact p { margin: 0 0 8px; font-size: 14px; color: var(--ed-faint); }
.booking-page .site-nav-mobile-contact a { font-size: 14px; font-weight: 600; color: var(--ed-body); }

/* 2. Hero — full-bleed photo (blurred Ken-Burns backdrop + sharp masked
   foreground layer + dark scrim), matching the homepage hero's visual
   language instead of a flat CSS gradient standing in for one. */
.booking-page .hero {
  position: relative; overflow: hidden;
  min-height: 480px; height: 64vh; max-height: 620px;
  display: flex; align-items: flex-end;
  background: #141310;
}
.booking-page .hero-media { position: absolute; inset: 0; }
.booking-page .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.booking-page .hero-media-blur { filter: brightness(.34) saturate(.55) blur(18px); transform: scale(1.1); }
.booking-page .hero-media-sharp {
  filter: brightness(.9) saturate(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 20%, #000 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 20%, #000 46%, #000 100%);
}
.booking-page .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,19,16,.86) 0%, rgba(20,19,16,.68) 34%, rgba(20,19,16,.3) 68%, rgba(20,19,16,.14) 100%),
    linear-gradient(180deg, rgba(20,19,16,.1) 0%, rgba(20,19,16,.2) 60%, rgba(20,19,16,.55) 100%);
}
.booking-page .hero-content { position: relative; z-index: 1; padding-block: 40px 56px; max-width: 46rem; }
.booking-page .hero-kicker {
  display: inline-block; margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(184, 156, 106, .3);
  color: var(--ed-gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em;
}
.booking-page #hero-title {
  margin: 0 0 18px; max-width: 14ch;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.75rem, 5.5vw, 5.3rem); line-height: .98; letter-spacing: 0;
  color: var(--ed-linen);
}
.booking-page .hero-sub { margin: 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(248, 245, 240, .74); }

/* The entry screen may use the full editorial hero. Once a route is chosen,
   booking becomes a focused workspace: the shell remains recognisable, but no
   longer pushes the first decision below the fold. */
.booking-page.booking-workspace-active .hero {
  min-height: 184px;
  height: 184px;
  max-height: none;
  align-items: flex-end;
}
.booking-page.booking-workspace-active .hero-media img { object-position: 70% 42%; }
.booking-page.booking-workspace-active .hero-content { padding-block: 18px 24px; }
.booking-page.booking-workspace-active .hero-kicker { display: none; }
.booking-page.booking-workspace-active #hero-title { margin: 0; max-width: none; font-size: clamp(2rem, 3.5vw, 3.25rem); }
.booking-page.booking-workspace-active .hero-sub { display: none; }

/* 3+4. Booking interaction as a normal content section below the hero -
   no boxed app-panel, no separate two-column shell. */
.booking-page .booking-content { padding-block: clamp(48px, 6vw, 72px) 96px; }
.booking-page.booking-workspace-active .booking-content {
  width: min(100%, 1180px);
  padding-top: 34px;
}
.booking-page .booking-workspace {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--ed-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 22px 56px rgba(61, 48, 27, .07);
}
.booking-page .booking-workspace :is(.request-step, .step) { scroll-margin-top: 104px; }
.booking-page .request-flow .field-grid { gap: 14px; }
.booking-page .request-flow .choice-grid.compact-choices { gap: 9px; }
.booking-page .request-flow .choice-grid.compact-choices .choice { min-height: 58px; padding: 13px 15px; }
.booking-page .request-flow .choice-grid.compact-choices .choice strong { font-size: 16px; }
.booking-page .request-flow .file-upload { min-height: 78px; border-style: solid; border-color: var(--ed-border); border-radius: 2px; background: rgba(255, 255, 255, .45); }
.booking-page .request-flow .file-upload-icon { width: 32px; height: 32px; flex-basis: 32px; background: var(--ed-gold-text); font-size: 18px; }
.booking-page .request-flow .preference-options { margin-bottom: 18px; }
.booking-page .request-flow .checkline { margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--ed-border); background: rgba(255, 255, 255, .45); }
.booking-page .request-flow .request-summary { margin-top: 20px; }
.booking-page .request-flow .request-summary .summary-grid { border-color: var(--ed-border); background: var(--ed-border); }
.booking-page .request-flow .request-summary .summary-grid div { padding: 14px 16px; background: rgba(255, 255, 255, .55); }
.booking-page .eyebrow { color: var(--ed-gold-text); font-size: 10px; font-weight: 720; letter-spacing: .18em; }
.booking-page .lead { color: var(--ed-body); max-width: 42rem; font-size: 15px; line-height: 1.65; }
.booking-page .booking-content h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.035em;
  margin: 10px 0 12px;
  color: var(--ed-ink);
  font-size: clamp(2.15rem, 3.2vw, 3.15rem);
  line-height: .98;
}
.booking-page .progress {
  position: relative;
  display: flex;
  gap: 0;
  margin: 0 0 38px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--ed-border);
}
/* [hidden] has lower specificity than the class rule above, so it would
   otherwise still render as an empty bar (with its ::before gold line)
   before the wizard sets an active step. */
.booking-page .progress[hidden] { display: none; }
.booking-page .progress::before { content: none; }
.booking-page .progress span { gap: 8px; padding: 0; border: 0; color: var(--ed-faint); transition: color 200ms ease; }
/* Three real states: done (past, dezent but marked complete), active
   (current, clear), everything else stays the muted default (upcoming,
   zurückhaltend) - not just a binary active/inactive toggle. */
.booking-page .progress span.active { color: var(--ed-ink); }
.booking-page .progress span.done { color: var(--ed-gold-text); }
.booking-page .progress b { width: 20px; height: 20px; flex-basis: 20px; border: 1px solid rgba(29, 26, 18, .22); border-radius: 50%; background: transparent; color: var(--ed-faint); font-size: 10px; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.booking-page .progress span.active b { background: var(--ed-gold-text); border-color: var(--ed-gold-text); color: var(--ed-linen); }
.booking-page .progress span.done b { border-color: rgba(184, 156, 106, .5); color: var(--ed-gold-text); font-size: 11px; }
.booking-page .progress em { font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
/* Longer flows (up to 6 steps) don't have room for every label at once
   without wrapping into the neighbouring step - show only the active
   step's label, keep every step's numbered marker always visible. The
   text stays in the DOM for all steps either way. */
.booking-page .progress span:not(.active) em { display: none; }

/* Three phases are deliberately legible in the prescription path. The
   connecting line makes completion, current work and upcoming work readable
   at a glance instead of relying on decorative dots. */
.booking-page .workspace-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 42px;
  padding: 0;
  border: 0;
}
.booking-page .workspace-progress span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ed-faint);
}
.booking-page .workspace-progress span:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 27px;
  right: 10px;
  height: 1px;
  background: var(--ed-border);
}
.booking-page .workspace-progress span.done:not(:last-child)::after { background: rgba(112, 88, 46, .6); }
.booking-page .workspace-progress b {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  font-size: 10px;
}
.booking-page .workspace-progress em,
.booking-page .workspace-progress span:not(.active) em {
  display: block;
  overflow: hidden;
  font-size: 10px;
  letter-spacing: .095em;
  text-overflow: ellipsis;
}

/* The configured/private path can have more than three phases. Keep its
   labels on desktop too, rather than reducing the journey to anonymous dots. */
.booking-page.booking-workspace-active #progress {
  display: grid;
  grid-template-columns: repeat(var(--progress-count, 4), minmax(0, 1fr));
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.booking-page.booking-workspace-active #progress span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.booking-page.booking-workspace-active #progress span:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 26px;
  right: 8px;
  height: 1px;
  background: var(--ed-border);
}
.booking-page.booking-workspace-active #progress span.done:not(:last-child)::after { background: rgba(112, 88, 46, .6); }
.booking-page.booking-workspace-active #progress b { position: relative; z-index: 1; }
.booking-page.booking-workspace-active #progress em,
.booking-page.booking-workspace-active #progress span:not(.active) em {
  display: block;
  overflow: hidden;
  font-size: 9px;
  letter-spacing: .075em;
  text-overflow: ellipsis;
}

.booking-page .step-copy { color: var(--ed-body); max-width: 43rem; margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.booking-page .choice-grid { gap: 12px; }
.booking-page .product-catalog-section { display: grid; gap: 8px; margin: 16px 0 18px; }
.booking-page .product-catalog-heading { display: grid; gap: 3px; margin: 0 0 2px; }
.booking-page .product-catalog-heading p { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.booking-page .product-catalog-section h3 { margin: 0; color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.55rem; font-weight: 400; }
.booking-page .catalog-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.booking-page .catalog-category {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-height: 190px;
  padding: 18px 20px;
  text-align: left;
}
.booking-page .catalog-category:nth-child(5) { grid-column: 1 / -1; }
.booking-page .catalog-category-label { justify-self: start; padding-right: 36px; color: var(--ed-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.booking-page .catalog-category-copy { display: grid; min-width: 0; gap: 4px; }
.booking-page .catalog-category strong { font-size: clamp(1.4rem, 1.7vw, 1.65rem); line-height: 1.05; }
.booking-page .catalog-category small { max-width: none; font-size: 13px; line-height: 1.45; }
.booking-page .catalog-category-meta { color: var(--ed-body); font-size: 11px; font-weight: 760; letter-spacing: .035em; text-transform: none; white-space: nowrap; }
.booking-page .catalog-category-marker {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--ed-border);
  border-radius: 50%;
  color: var(--ed-gold-text);
  font-size: 13px;
  line-height: 1;
  transition: transform 160ms var(--ed-ease), background 160ms var(--ed-ease), color 160ms var(--ed-ease);
}
.booking-page .catalog-category:hover .catalog-category-marker { transform: translateX(2px); }
.booking-page .catalog-category.selected { border-color: var(--ed-gold-text); background: var(--ed-parchment); box-shadow: 0 7px 20px rgba(112, 88, 46, .08); }
.booking-page .catalog-category.selected .catalog-category-marker { border-color: var(--ed-gold-text); background: var(--ed-gold-text); color: var(--ed-linen); }
.booking-page .training-access { align-items: center; grid-template-columns: 1fr auto; }
.booking-page .training-access .button { width: auto; white-space: nowrap; }
.booking-page .choice-grid.compact-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-page .choice,
.booking-page .slot {
  border-color: var(--ed-border);
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ed-ease), box-shadow 160ms var(--ed-ease);
}
.booking-page .choice { min-height: 74px; grid-template-columns: 18px 1fr; gap: 14px; padding: 18px 20px; }
/* Category cards intentionally opt out of the radio-card grid: their content
   lives on one calm vertical axis, with the marker floating in the top row. */
.booking-page .choice.catalog-category { min-height: 190px; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 20px; }
.booking-page .choice:hover,
.booking-page .slot:hover { border-color: var(--ed-gold); transform: translateY(-1px); }
.booking-page .choice:has(input:checked),
.booking-page .slot.selected { border-color: var(--ed-gold-text); background: var(--ed-parchment); box-shadow: inset 3px 0 var(--ed-gold-text), 0 6px 18px rgba(112, 88, 46, .08); }
.booking-page .choice input,
.booking-page .checkline input { accent-color: var(--ed-gold-text); }
.booking-page .choice strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 19px; font-weight: 400; letter-spacing: -.012em; }
.booking-page .choice small { color: var(--ed-body); font-size: 13px; line-height: 1.5; }
/* Product cards use the native radios for keyboard accessibility but present
   a composed clinical choice, with the decision and its practical details
   easy to scan in one pass. */
.booking-page .product-choice { min-height: 88px; align-items: start; gap: 12px; padding: 14px 16px; }
.booking-page .product-choice-copy { display: grid; gap: 4px; }
.booking-page .product-choice-description { max-width: 48rem; }
.booking-page .product-choice-meta {
  color: var(--ed-gold-text) !important;
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.booking-page .product-choice:has(input:checked) { border-color: var(--ed-gold-text); background: #f5efe2; box-shadow: inset 4px 0 var(--ed-gold-text), 0 8px 20px rgba(112, 88, 46, .10); }
.booking-page .product-choice:has(input:checked) .product-choice-meta { color: var(--ed-gold-text) !important; }
/* Therapist selection is deliberately compact: it is a preference before a
   concrete time is chosen, not the visual centre of the journey. */
.booking-page .therapist-choice { min-height: 64px; padding: 14px 18px; }
.booking-page .therapist-choice-copy { display: grid; gap: 2px; }
.booking-page .therapist-choice strong { font-size: 17px; }
.booking-page .therapist-choice-any { margin-bottom: 4px; background: rgba(245, 239, 228, .72); }
.booking-page .therapist-choice-any strong { color: var(--ed-gold-text); }
.booking-page .therapist-selection { margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--ed-border); }
.booking-page .slot-section-heading { display: grid; gap: 4px; margin: 0 0 12px; }
.booking-page .slot-section-heading h3 { color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; }
.booking-page .slot-section-heading p { margin: 0; color: var(--ed-body); font-size: 13px; line-height: 1.45; }
.booking-page .therapist-inline-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; }
.booking-page .therapist-inline-choices .therapist-choice { min-height: 54px; padding: 11px 13px; }
.booking-page .therapist-inline-choices .therapist-choice strong { font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; }
/* Legacy non-private therapist flow retains its compact disclosure treatment. */
.booking-page .therapist-disclosure { margin: 0 0 20px; border-top: 1px solid var(--ed-border); border-bottom: 1px solid var(--ed-border); }
.booking-page .therapist-disclosure summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; color: var(--ed-ink); font-size: 13px; font-weight: 750; list-style: none; }
.booking-page .therapist-disclosure summary::-webkit-details-marker { display: none; }
.booking-page .therapist-disclosure summary::after { content: '+'; margin-left: auto; color: var(--ed-gold-text); font-family: var(--font-serif); font-size: 21px; font-weight: 400; }
.booking-page .therapist-disclosure[open] summary::after { content: '–'; }
.booking-page .therapist-disclosure summary span { margin-left: 8px; color: var(--ed-faint); font-size: 11px; font-weight: 600; }
.booking-page .therapist-disclosure > p { margin: 0 0 12px; color: var(--ed-body); font-size: 13px; line-height: 1.5; }

/* Slot selection deliberately limits the initial choice to a calm, chronological
   selection. Filtering and revealing more cards remain client-side only. */
.booking-page .slot-grid { display: block; }
.booking-page .appointment-heading { margin-bottom: 14px; }
.booking-page .slot-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.booking-page .slot-filter {
  min-height: 38px; border: 1px solid var(--ed-border); border-radius: 999px;
  padding: 8px 13px; background: transparent; color: var(--ed-body); font: inherit;
  font-size: 13px; font-weight: 700;
}
.booking-page .slot-filter:hover,
.booking-page .slot-filter.active { border-color: var(--ed-gold-text); background: var(--ed-parchment); color: var(--ed-ink); }
.booking-page .slot-list-context { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0 0 7px; color: var(--ed-gold-text); font-size: 11px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.booking-page .slot-list-context span + span::before { content: '·'; margin-right: 14px; color: var(--ed-gold); }
.booking-page .slot-list-note { margin: 0 0 18px; color: var(--ed-body); font-size: 13px; line-height: 1.5; }
.booking-page .slot-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.booking-page .slot { position: relative; min-height: 122px; padding: 16px 18px; text-align: left; }
.booking-page .slot-card-time { display: block; color: var(--ed-ink); font-family: var(--font-serif); font-size: clamp(1.7rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; }
.booking-page .slot-card-therapist { display: block; margin-top: 8px; color: var(--ed-body); font-size: 12px; line-height: 1.4; }
.booking-page .slot .slot-card-date { display: block; margin: 0 0 9px; color: var(--ed-faint); font-size: 10px; font-weight: 700; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; }
.booking-page .slot.selected { border-color: var(--ed-gold-text); background: var(--ed-parchment); box-shadow: 0 10px 25px rgba(112, 88, 46, .12); }
.booking-page .slot-selected-marker { position: absolute; top: 13px; right: 14px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--ed-gold-text); color: var(--ed-linen); font-size: 12px; }
.booking-page .slot-load-more { margin-top: 14px; }
.booking-page .slot-selection-summary { display: grid; gap: 4px; margin-top: 18px; padding: 15px 17px; border: 1px solid rgba(112, 88, 46, .34); background: var(--ed-parchment); }
.booking-page .slot-selection-summary p { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.booking-page .slot-selection-summary strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; }
.booking-page .slot-selection-summary span,
.booking-page .slot-selection-summary small { color: var(--ed-body); font-size: 12px; line-height: 1.45; }
.booking-page .slot-empty-state { padding: 20px 0; border-top: 1px solid var(--ed-border); border-bottom: 1px solid var(--ed-border); }
.booking-page .slot-empty-state h3 { margin: 0 0 6px; color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; }
.booking-page .slot-empty-state p { margin: 0; color: var(--ed-body); font-size: 13px; line-height: 1.5; }
.booking-page .slot-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Entry choice (Mit Rezept / Privat starten) is the front-door decision and
   gets a distinct, more prominent treatment than later-step choice cards.
   It has no radio input (a plain button), so it must not inherit the
   22px input-gutter grid-template-columns meant for radio-backed choices. */
.booking-page .entry-choice {
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 20px 24px;
  text-align: left;
}
.booking-page .entry-choice::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 4px;
  background: var(--ed-gold);
  transition: background 160ms ease, width 160ms var(--ed-ease);
}
.booking-page .entry-choice strong {
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.01em;
  transition: color 160ms ease;
}
.booking-page .entry-choice small { font-size: 12.5px; }
.booking-page .entry-choice:hover::before { width: 36px; background: var(--ed-gold-text); }
.booking-page .entry-choice:hover strong { color: var(--ed-gold-text); }

.booking-page .field-grid { gap: 16px; }
.booking-page .field { gap: 7px; }
.booking-page .step[data-step="patient"] { max-width: 56rem; }
.booking-page .patient-selection-summary { display: grid; gap: 4px; margin: 0 0 24px; padding: 15px 17px; border: 1px solid rgba(112, 88, 46, .34); background: var(--ed-parchment); }
.booking-page .patient-selection-summary p { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.booking-page .patient-selection-summary strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; }
.booking-page .patient-selection-summary span,
.booking-page .patient-selection-summary small { color: var(--ed-body); font-size: 12px; line-height: 1.45; }
.booking-page .patient-form-section { margin: 0; padding: 0 0 22px; }
.booking-page .patient-form-section + .patient-form-section { padding-top: 20px; border-top: 1px solid var(--ed-border); }
.booking-page .patient-form-section h3,
.booking-page .patient-consent-section h3 { margin: 0 0 12px; color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; }
.booking-page .patient-form-section > p { margin: -4px 0 13px; color: var(--ed-body); font-size: 13px; line-height: 1.5; }
.booking-page .patient-person-fields { margin-top: 14px; }
.booking-page .patient-contact-note { margin: 11px 0 0; color: var(--ed-body); font-size: 12px; line-height: 1.5; }
.booking-page .patient-optional-section textarea { min-height: 88px; resize: vertical; }
.booking-page .patient-optional-fields { margin-top: 14px; }
.booking-page .patient-consent-section { padding: 20px 0 0; border-top: 1px solid var(--ed-border); }
.booking-page .patient-consent-section .patient-privacy { margin: 0; padding: 12px 14px; border: 1px solid var(--ed-border); background: rgba(255, 255, 255, .45); }
.booking-page .field label,
.booking-page .field-label { color: var(--ed-ink); font-size: 12px; font-weight: 720; letter-spacing: .025em; }
.booking-page .field input,
.booking-page .field select,
.booking-page .field textarea {
  min-height: 48px;
  border-color: var(--ed-border);
  border-radius: 2px;
  background: rgba(255, 255, 255, .65);
  color: var(--ed-ink);
  padding: 13px 14px;
  font-size: 14.5px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.booking-page .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235C554E' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.booking-page .field input:hover,
.booking-page .field select:hover,
.booking-page .field textarea:hover { border-color: var(--ed-gold); }
.booking-page .field input:focus,
.booking-page .field select:focus,
.booking-page .field textarea:focus { border-color: var(--ed-gold-text); box-shadow: 0 0 0 3px rgba(184, 156, 106, .17); background: #fff; outline: 0; }
/* Toggled onto the active step section after a failed validation attempt
   (see booking.js next/submit handlers) - highlights exactly the fields
   still failing native constraint validation, without changing what
   validateCurrentStep()/validateRequestStep() consider valid. */
.was-validated .field input:invalid,
.was-validated .field select:invalid,
.was-validated .field textarea:invalid,
.was-validated .choice:has(input:required:invalid) { border-color: #9d3630; }
.was-validated .field input:invalid:focus,
.was-validated .field select:invalid:focus,
.was-validated .field textarea:invalid:focus { box-shadow: 0 0 0 3px rgba(157, 54, 48, .17); }
.booking-page .checkline { color: var(--ed-body); font-size: 13px; }
.booking-page .checkline a,
.booking-page .result-details a { color: var(--ed-gold-text); font-weight: 700; }
.booking-page .notice { border-radius: 2px; border-left: 3px solid currentColor; }
.booking-page .notice.info { color: #70582e; background: #f2ece4; }
.booking-page .notice.success { color: #335c48; background: #edf4ed; }
.booking-page .notice.warning { color: #82521d; background: #faf0df; }
.booking-page .summary-grid { border-color: var(--ed-border); border-radius: 2px; background: var(--ed-border); }
.booking-page .summary-grid div { background: rgba(255,255,255,.63); padding: 15px 16px; }
.booking-page .summary-grid dt { color: var(--ed-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.booking-page .summary-grid dd { color: var(--ed-ink); font-size: 14px; font-weight: 620; }
.booking-page .patient-agreements { margin-top: 8px; }
.booking-page .patient-agreements::before { content: 'Erforderliche Zustimmungen'; display: block; margin: 12px 0 8px; color: var(--ed-gold-text); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.booking-page .patient-agreements .choice-grid { gap: 8px; }
.booking-page .patient-agreements .checkline { margin: 0; padding: 12px 14px; border: 1px solid var(--ed-border); background: rgba(255, 255, 255, .45); }
.booking-page .patient-agreements .checkline:has(input:checked) { border-color: var(--ed-gold-text); background: var(--ed-parchment); }
.booking-page .private-booking-summary { display: grid; gap: 0; border-top: 1px solid var(--ed-border); border-bottom: 1px solid var(--ed-border); }
.booking-page .private-booking-summary section { display: grid; gap: 5px; padding: 18px 0; }
.booking-page .private-booking-summary section + section { border-top: 1px solid var(--ed-border); }
.booking-page .private-booking-summary p { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.booking-page .private-booking-summary strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 21px; font-weight: 400; letter-spacing: -.012em; }
.booking-page .private-booking-summary span { color: var(--ed-body); font-size: 13px; line-height: 1.5; }
.booking-page .summary-revalidation-note { margin: 17px 0 0; color: var(--ed-body); font-size: 13px; line-height: 1.5; }
.booking-page .private-review-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ed-border); border-left: 1px solid var(--ed-border); }
.booking-page .private-review-block,
.booking-page .private-review-next-steps { display: grid; align-content: start; gap: 5px; min-height: 176px; padding: 20px 22px; border-right: 1px solid var(--ed-border); border-bottom: 1px solid var(--ed-border); background: rgba(255, 255, 255, .38); }
.booking-page .private-review-block.review-slot { background: var(--ed-parchment); }
.booking-page .review-block-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.booking-page .review-block-heading h3,
.booking-page .private-review-next-steps h3 { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.booking-page .review-edit { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ed-body); font: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; }
.booking-page .review-edit:hover { color: var(--ed-gold-text); }
.booking-page .private-review-block > strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.08; }
.booking-page .private-review-block.review-slot > strong { font-size: 1.25rem; }
.booking-page .private-review-block.review-slot > b { color: var(--ed-ink); font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1; white-space: nowrap; }
.booking-page .private-review-block > span,
.booking-page .private-review-block > small { color: var(--ed-body); font-size: 13px; line-height: 1.45; }
.booking-page .private-review-block > small { margin-top: 5px; font-size: 12px; }
.booking-page .review-message { display: grid; gap: 3px; margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--ed-border); }
.booking-page .review-message p { margin: 0; color: var(--ed-gold-text); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.booking-page .private-review-next-steps { background: rgba(245, 239, 228, .48); }
.booking-page .private-review-next-steps p { margin: 4px 0 0; color: var(--ed-body); font-size: 13px; line-height: 1.55; }
.booking-page .request-success-summary { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid var(--ed-border); background: var(--ed-parchment); }
.booking-page .request-success-summary strong { color: var(--ed-ink); font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; }
.booking-page .request-success-summary span { color: var(--ed-body); font-size: 13px; line-height: 1.45; }
.booking-page .consent-summary { border-radius: 2px; background: var(--ed-parchment); color: var(--ed-ink); }

.booking-page .actions { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ed-border); }
.booking-page .button {
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 2px;
  background: var(--ed-ink);
  color: var(--ed-linen);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: transform 260ms var(--ed-ease), box-shadow 260ms var(--ed-ease), opacity 180ms ease;
}
.booking-page .button:hover:not(:disabled) { background: var(--ed-ink); transform: translateY(-2px); box-shadow: 0 11px 22px -13px rgba(29, 26, 18, .52); }
.booking-page .button.secondary { border-color: var(--ed-border); background: transparent; color: var(--ed-ink); }
.booking-page .button.secondary:hover:not(:disabled) { background: var(--ed-parchment); box-shadow: none; }
.booking-page .button:disabled { background: rgba(29, 26, 18, .24); color: rgba(248, 245, 240, .8); }
.booking-page .result { padding: 28px 6px 10px; }
.booking-page .result h2 { color: var(--ed-ink); font-size: clamp(2.2rem, 4vw, 3.5rem); }
.booking-page .result .lead { color: var(--ed-body); margin-inline: auto; }
.booking-page .result-icon { border-radius: 50%; }
.booking-page .booking-number { border-radius: 2px; background: var(--ed-parchment); color: var(--ed-ink); }
.booking-page .error-text { color: #9d3630; }
.booking-page :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ed-focus); outline-offset: 3px; }

/* Clinical Intake and the "Mit Rezept" upload step share the same field/
   choice primitives already themed above, but their own container classes
   (fieldset wrapper, safety grid, save-status line, file dropzone) were
   never brought into the editorial palette - they still fell back to the
   default teal theme's colors despite living inside .booking-page. */
.booking-page .question-group {
  border-color: var(--ed-border);
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}
.booking-page .question-group legend { color: var(--ed-gold-text); font-weight: 700; letter-spacing: .01em; }
/* The question prompt itself (each fieldset's own legend, one level below
   the group legend above) had no themed rule and fell back to the browser
   default bold serif — reads as a raw form fieldset rather than a guided
   question. */
.booking-page .clinical-question > legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--ed-ink);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.4;
}
.booking-page .yes-no-grid { gap: 8px; }
.booking-page .safety-grid { gap: 10px; }
/* Yes/No/Unsicher answers rendered as bare native radio+label rows (plain
   .checkline) - a "Fragebogen" look at odds with the rest of the flow,
   which answers questions via bordered, tappable .choice-style surfaces.
   Same visual language, no markup/behaviour change. */
.booking-page .yes-no-grid .checkline {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--ed-border);
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  color: var(--ed-body);
  font-size: 13px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.booking-page .yes-no-grid .checkline:hover { border-color: var(--ed-gold); }
.booking-page .yes-no-grid .checkline:has(input:checked) {
  border-color: var(--ed-gold-text);
  background: var(--ed-parchment);
  color: var(--ed-ink);
  font-weight: 700;
}
.booking-page .save-status { color: var(--ed-faint); }
.booking-page .save-status.is-error { color: #9d3630; }
.booking-page .intake-cta { border-top-color: var(--ed-border); }
.booking-page .intake-cta p,
.booking-page #clinical-intake-done { color: var(--ed-body); }
/* .missing marks every required-but-unanswered question, including on the
   very first render before the patient has touched anything - toggled by
   updateIntakeGates() in booking.js, unchanged here. Rendering that as the
   same saturated danger red used for real validation errors makes an
   ordinary, mostly-empty intake form look like a page full of mistakes on
   first paint - exactly the "Fragebogen"/alarmist read item 6 asks to
   avoid. A quiet gold-tinted border (the page's own accent color, already
   used for hover/selected states) still guides completion without reading
   as an error. */
.booking-page .clinical-question.missing,
.booking-page fieldset.clinical-question.missing {
  outline: none;
  border-color: rgba(184, 156, 106, .55);
}
.booking-page .safety-field.missing { border-color: rgba(184, 156, 106, .75); }
.booking-page .file-upload {
  border-color: var(--ed-border);
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  color: var(--ed-ink);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.booking-page .file-upload:hover,
.booking-page .file-input:focus-visible + .file-upload { border-color: var(--ed-gold); background: var(--ed-parchment); box-shadow: none; }
.booking-page .file-upload-icon { border-radius: 50%; background: var(--ed-gold-text); }
.booking-page .file-upload small { color: var(--ed-faint); }

/* Desktop nav only above 1024px — matches physio-web's `hidden lg:flex`. */
@media (min-width: 1024px) {
  .booking-page .site-nav { display: flex; }
  .booking-page .site-nav-toggle { display: none; }
}

@media (max-width: 900px) {
  .booking-page .hero { min-height: 380px; height: 52vh; }
  .booking-page .hero-content { padding-block: 24px 40px; }
  .booking-page #hero-title { max-width: 16ch; font-size: clamp(2.3rem, 10.5vw, 3.7rem); }
  .booking-page .hero-sub { font-size: 14px; }
  .booking-page .slot-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-page .therapist-inline-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-page .private-review-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .booking-page .site-header-row { padding-block: 16px; }
  .booking-page .site-logo img { height: 34px; }
  .booking-page .hero { min-height: 320px; height: 46vh; }
  .booking-page.booking-workspace-active .hero { min-height: 126px; height: 126px; }
  .booking-page.booking-workspace-active .hero-content { padding-block: 16px 18px; }
  .booking-page.booking-workspace-active #hero-title { font-size: 2rem; }
  .booking-page.booking-workspace-active .booking-content { padding-top: 18px; }
  .booking-page .booking-workspace { margin-inline: -1px; padding: 22px 18px; border-inline: 0; box-shadow: none; }
  .booking-page .hero-kicker { margin-bottom: 14px; }
  .booking-page #hero-title { margin-top: 8px; font-size: 2.4rem; }
  .booking-page .booking-content { padding-top: 32px; }
  .booking-page .booking-content h2 { font-size: 2.1rem; }
  .booking-page .entry-choice { padding: 22px 18px; }
  .booking-page .progress { margin-bottom: 28px; padding-bottom: 13px; }
  .booking-page .progress em { display: none; }
  .booking-page .workspace-progress { margin-bottom: 30px; }
  .booking-page .workspace-progress em,
  .booking-page .workspace-progress span:not(.active) em { display: block; font-size: 8px; letter-spacing: .06em; }
  .booking-page .workspace-progress span { gap: 7px; }
  .booking-page .workspace-progress span:not(:last-child)::after { left: 26px; right: 5px; }
  .booking-page .choice-grid.compact-choices { grid-template-columns: 1fr; }
  .booking-page.booking-workspace-active #progress em,
  .booking-page.booking-workspace-active #progress span:not(.active) em { display: none; }
  .booking-page.booking-workspace-active #progress span { justify-content: center; }
  .booking-page.booking-workspace-active #progress span:not(:last-child)::after { left: calc(50% + 13px); right: calc(-50% + 13px); }
  .booking-page .progress b { margin: 0; }
  .booking-page .choice { padding: 17px 16px; }
  .booking-page .training-access { grid-template-columns: 1fr; }
  .booking-page .training-access .button { width: 100%; }
  .booking-page .catalog-category-grid { grid-template-columns: 1fr; }
  .booking-page .catalog-category,
  .booking-page .catalog-category:nth-child(5),
  .booking-page .choice.catalog-category { grid-column: auto; min-height: 0; padding: 16px; }
  .booking-page .catalog-category strong { font-size: 1.5rem; }
  .booking-page .product-choice { min-height: 0; padding: 14px; }
  .booking-page .private-review-block,
  .booking-page .private-review-next-steps { min-height: 0; padding: 18px 16px; }
  .booking-page .therapist-choice { min-height: 60px; }
  .booking-page .therapist-inline-choices { grid-template-columns: 1fr; }
  .booking-page .slot-card-grid { grid-template-columns: 1fr; }
  .booking-page .slot { min-height: 124px; padding: 18px; }
  .booking-page .slot-list-context { gap: 5px 10px; }
  .booking-page .slot-list-context span + span::before { margin-right: 10px; }
  .booking-page .slot-toolbar { gap: 7px; }
  .booking-page .slot-filter { flex: 1 1 auto; padding-inline: 10px; }
  .booking-page .actions { position: sticky; bottom: 0; z-index: 2; margin: 28px -2px 0; padding: 13px 2px 2px; background: rgba(248, 245, 240, .96); backdrop-filter: blur(8px); }
  .booking-page .booking-workspace .actions { position: static; margin: 32px 0 0; padding: 18px 0 0; background: transparent; backdrop-filter: none; }
  .booking-page .booking-workspace.private-booking-flow .actions { position: sticky; bottom: 0; z-index: 2; margin: 28px -2px 0; padding: 13px 2px 2px; background: rgba(248, 245, 240, .96); backdrop-filter: blur(8px); }
  .booking-page .booking-workspace.private-booking-flow .actions { box-shadow: 0 -8px 16px rgba(41, 34, 24, .06); }
  .booking-page .booking-workspace.private-booking-flow #slot-choices { padding-bottom: 12px; }
  .booking-page .booking-workspace.private-booking-flow .therapist-selection { margin-bottom: 16px; padding-bottom: 14px; }
  .booking-page .booking-workspace.private-booking-flow .slot-empty-actions { display: grid; grid-template-columns: 1fr; }
  .booking-page .booking-workspace.private-booking-flow .slot-empty-actions .button { width: 100%; min-height: 46px; }
}

/* 5. Footer — same visual language as physio-web's Footer.tsx (dark, 4-col
   grid, social row omitted since praxis-os-v2 has no content store for the
   URLs), hardcoded contact/nav values since booking has no CMS. */
.booking-page .site-footer { background: var(--ed-ink); color: rgba(248, 245, 240, .72); margin-top: 40px; }
.booking-page .site-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px 40px; }
.booking-page .site-footer-col h3 { margin: 0 0 14px; color: var(--ed-linen); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.booking-page .site-footer-col a,
.booking-page .site-footer-col p { display: block; margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: rgba(248, 245, 240, .68); }
.booking-page .site-footer-col a:hover { color: var(--ed-linen); }
.booking-page .site-footer-brand p { max-width: 26rem; }
.booking-page .site-footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.booking-page .site-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding-block: 20px; border-top: 1px solid rgba(248, 245, 240, .06);
  font-size: 12px; color: rgba(248, 245, 240, .5);
}
.booking-page .site-footer-legal { display: flex; gap: 16px; }
.booking-page .site-footer-legal a { color: inherit; }
.booking-page .site-footer-legal a:hover { color: var(--ed-linen); }
@media (max-width: 900px) {
  .booking-page .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 480px) {
  .booking-page .site-footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-page .choice,
  .booking-page .slot,
  .booking-page .button { transition: none; }
  .booking-page .choice:hover,
  .booking-page .slot:hover,
  .booking-page .button:hover:not(:disabled) { transform: none; }
}