/*
 * Practice microsite -- Patientenseite density
 * (docs/plans/practice_microsites_plan.md §16; .claude/skills/praxista-design
 * ADOPTION.md §1: 18px body, >=48px controls, measure 620px).
 *
 * Token VALUES are copied from the design skill's tokens/*.css (V2,
 * 2026-09-09). This file is deliberately small and unstyled beyond the
 * system's surfaces and type: the visual pass happens in the design phase
 * (docs/plans/practice_microsites_release1_phase.md, UI deliverables). Keep
 * the custom-property names, restyle freely.
 *
 * No @import, no url() to another host, no web font fetch: this file must
 * stay free of third-party requests (§7.2). Hanken Grotesk is used when the
 * visitor has it; a self-hosted woff2 is a design-phase deliverable.
 */
:root {
  --blue-900: #1B3E9E;
  --blue-700: #2A56C8;
  --blue-500: #4477F2;
  --ink: #14285E;
  --mist: #E7EEFD;
  --paper-page: #FCFCFA;
  --paper-white: #FFFFFF;
  --paper-inset: #FAF9F6;
  --text-body: #0F2438;
  --text-secondary: #3E5060;
  --text-tertiary: #5A6B7A;
  --text-on-deep: #FFFFFF;
  --line: #E3E7EB;
  --line-inset: #EAE8E4;
  --success: #0E8C45;
  --success-tint: #BFEDCE;
  --success-text: #0A6B34;
  --warning-tint: #FBE6A4;
  --warning-text: #6B4C05;
  --danger-tint: #FBD1D1;
  --danger-text: #8E1E1E;
  --info-tint: #C7E5F8;
  --info-text: #075B85;
  --action: var(--blue-700);
  --action-deep: var(--blue-900);
  --focus: var(--blue-700);
  --heading: var(--blue-700);
  --link: var(--blue-700);
  --link-hover: var(--blue-900);
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-ui);
  --measure: 620px;
  --radius: 12px;
  --shadow-1: 0 1px 2px rgba(20, 40, 94, 0.06), 0 1px 3px rgba(20, 40, 94, 0.08);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper-page);
  color: var(--text-body);
  font: 400 18px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--paper-white);
  color: var(--text-body);
  padding: 12px 16px;
}
.skip-link:focus { left: 16px; z-index: 10; }

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 48px 20px 32px;
}

.hero { text-align: left; margin-bottom: 40px; }
.hero__logo {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--paper-white);
  margin-bottom: 20px;
}
.hero__eyebrow {
  margin: 0 0 8px;
  font: 500 11px/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.hero__title {
  margin: 0 0 8px;
  font: 300 32px/1.2 var(--font-display);
  color: var(--ink);
}
.hero__person { margin: 0; font-weight: 600; }
.hero__qualification { margin: 4px 0 0; color: var(--text-secondary); }

.section {
  background: var(--paper-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 24px;
  margin-bottom: 20px;
}
.section__title {
  margin: 0 0 16px;
  font: 600 16px/1.4 var(--font-ui);
  color: var(--heading);
}
.section__subtitle {
  margin: 20px 0 8px;
  font: 600 16px/1.4 var(--font-ui);
}
.section__subtitle:first-of-type { margin-top: 0; }

.facts { margin: 0; }
.facts__row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-inset);
}
.facts__row:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; gap: 12px; }
.hours__day { min-width: 6.5em; }

.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--link-hover); }

.availability {
  display: inline-block;
  margin: 0 0 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--info-tint);
  color: var(--info-text);
}
.availability--accepting { background: var(--success-tint); color: var(--success-text); }
.availability--waitlist { background: var(--warning-tint); color: var(--warning-text); }
.availability--not_accepting { background: var(--danger-tint); color: var(--danger-text); }
.availability__wait { margin: 0 0 16px; color: var(--text-secondary); }

.cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-inset); }
.cta__title { margin: 0 0 8px; font: 600 16px/1.4 var(--font-ui); }
.cta__text { margin: 0 0 16px; color: var(--text-secondary); }
.cta__fallback { margin: 8px 0 0; color: var(--text-secondary); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--action);
  color: var(--text-on-deep);
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--action-deep); }
.button:focus-visible, .link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.bullets { margin: 0; padding-left: 1.2em; }

.footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px 20px 48px;
  color: var(--text-tertiary);
  font-size: 15px;
}
.footer__note { margin: 0 0 8px; }
.footer__nav a { color: var(--text-secondary); margin-right: 16px; }

@media (max-width: 480px) {
  .page { padding-top: 32px; }
  .facts__row { grid-template-columns: 1fr; gap: 2px; }
  .hero__title { font-size: 28px; }
}