/* ================================================================
   PRAXIS DR. HENKEL — DNA
   Light-mode Hausarzt · Hachenburg
   ================================================================ */

@layer reset, tokens, base, components, pages, utilities;
@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: hidden; }
  body { line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img, picture, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { border: 0; background: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
}

@layer tokens {
  :root {
    --bg-primary: #F5F4F0;
    --bg-secondary: #EBE8E0;
    --bg-tertiary: #FFFFFF;
    --text-primary: #2A2D2A;
    --text-secondary: rgba(42, 45, 42, 0.74);
    --text-muted: rgba(42, 45, 42, 0.55);
    --accent: #536270;             /* steel-blue-grey deep — text-safe (5.6:1 on cream) */
    --accent-deep: #3A4A56;        /* darker steel-blue for portrait text on light gradient */
    --accent-bright: #7C8A95;      /* lighter — solid bg */
    --accent-hover: #3F4D5A;
    --hairline: rgba(42, 45, 42, 0.14);
    --hairline-strong: rgba(42, 45, 42, 0.22);

    --font-display: 'Source Serif 4', Georgia, serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --fs-hero: clamp(3rem, 7vw, 6rem);
    --fs-h1: clamp(2.2rem, 4.5vw, 3.5rem);
    --fs-h2: clamp(1.625rem, 3.25vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fs-body-lg: clamp(17px, 1.4vw, 19px);
    --fs-body: 17px;
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.75rem;

    --content-max: 1280px;
    --content-narrow: 720px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-py: clamp(4rem, 8vw, 6.5rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 200ms;
    --dur-base: 400ms;
  }
}

@layer base {
  body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
  p { line-height: 1.65; }
  ::selection { background: var(--accent); color: var(--bg-primary); }
  .container { container-type: inline-size; }
}

@layer components {
  .container-wide { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
  .container-narrow { width: 100%; max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--gutter); }
  section { padding-block: var(--section-py); }

  .eyebrow {
    display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow);
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--accent); font-weight: 600;
    margin-bottom: 1rem;
  }

  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.625rem;
    font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500;
    border-radius: 4px; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
    min-height: 48px;
  }
  .btn-primary { background: var(--accent); color: var(--bg-primary); padding: 1rem 2.5rem; border-radius: 2px; font-weight: 600; letter-spacing: 0.01em; }
  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(83,98,112,0.35); }
  .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--hairline-strong); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-link { color: var(--accent); font-weight: 500; border-bottom: 1px solid currentColor; padding: 0.375rem 0; min-height: 32px; font-size: var(--fs-small); display: inline-block; }
  .btn-link:hover { color: var(--accent-hover); }

  /* Sticky-subnav Navigation (Hero #12 base + sticky subnav) */
  .nav { position: sticky; top: 0; z-index: 50; background: rgba(245, 244, 240, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
  .nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); width: 100%; max-width: var(--content-max); margin-inline: auto; }
  .nav-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--text-primary); }
  .nav-logo .accent { color: var(--accent); }
  .nav-list { display: none; gap: 1.75rem; }
  @media (min-width: 768px) { .nav-list { display: flex; align-items: center; } }
  .nav-list a { font-size: var(--fs-small); color: var(--text-secondary); padding: 0.375rem 0; transition: color var(--dur-fast); position: relative; }
  .nav-list a:hover { color: var(--text-primary); }
  .nav-list a[aria-current="page"] { color: var(--accent); }
  .nav-list a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); }
  .nav-cta { background: var(--accent); color: var(--bg-primary); padding: 0.625rem 1.25rem; border-radius: 4px; font-size: var(--fs-small); font-weight: 600; transition: background var(--dur-fast); min-height: 44px; display: inline-flex; align-items: center; }
  .nav-cta:hover { background: var(--accent-hover); }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--text-primary); }
  @media (min-width: 768px) { .nav-burger { display: none; } }

  .nav-drawer { position: fixed; inset: 0; background: var(--bg-primary); z-index: 100; transform: translateY(-100%); transition: transform 0.5s var(--ease-out); padding: 4rem var(--gutter) 2rem; }
  .nav-drawer.is-open { transform: translateY(0); }
  .nav-drawer-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; color: var(--text-primary); font-size: 1.625rem; }
  .nav-drawer ul { display: grid; gap: 0; margin-top: 1rem; }
  .nav-drawer ul a { display: block; padding-block: 1rem; font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3rem); line-height: 1; border-bottom: 1px solid var(--hairline); }
  .nav-drawer ul a[aria-current="page"] { color: var(--accent); }

  .photo { overflow: hidden; position: relative; background: var(--bg-secondary); }
  .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  .photo:hover img { transform: scale(1.02); }

  .footer { background: var(--bg-secondary); border-top: 1px solid var(--hairline); padding: clamp(3rem, 5vw, 4rem) 0 1.5rem; }
  .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--hairline); }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: end; } }
  .footer-tagline { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; margin-top: 0.75rem; max-width: 22ch; }
  .footer-meta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }
  .footer-meta-row a { font-size: var(--fs-small); color: var(--text-secondary); border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px; }
  .footer-meta-row a:hover { color: var(--accent); border-color: var(--accent); }
  .footer-contact h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 0.875rem; font-weight: 600; }
  .footer-contact p, .footer-contact address { font-style: normal; line-height: 1.7; color: var(--text-secondary); font-size: var(--fs-small); }
  .footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: var(--fs-small); color: var(--text-muted); }
}

@layer utilities {
  .muted { color: var(--text-secondary); }
  .accent { color: var(--accent); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  /* Inline form success message (replaces alert()) */
  .form-success-msg {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(47, 164, 108, 0.08);
    border-left: 3px solid #2fa46c;
    color: var(--text-primary);
    font-size: var(--fs-small);
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@layer pages {
  /* Hero #12 Center-Hero with Sticky Subnav */
  .hero { padding-block: clamp(5rem, 10vw, 9rem) clamp(3.5rem, 6vw, 5rem); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .hero > .container-wide { width: 100%; }
  .hero-grid {
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
    width: 100%;
  }
  @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 240px; gap: 4rem; align-items: start; } }

  .hero-text h1 {
    font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 400;
    line-height: 1.05; letter-spacing: -0.03em; max-width: 14ch;
    margin-block: 0.5rem 1.75rem;
  }
  .hero-text h1 em { font-style: italic; color: var(--accent); display: block; }
  .hero-text p { color: var(--text-secondary); font-size: var(--fs-body-lg); max-width: 50ch; margin-bottom: 2rem; }
  .hero-actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

  /* Sticky Subnav (signature pattern) */
  .hero-subnav {
    position: sticky;
    top: 5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--hairline-strong);
    padding: 1.25rem;
  }
  .hero-subnav h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); font-weight: 600; margin-bottom: 0.75rem; }
  .hero-subnav ul { display: grid; gap: 0; }
  .hero-subnav li { padding-block: 0.625rem; border-bottom: 1px solid var(--hairline); }
  .hero-subnav li:last-child { border-bottom: 0; }
  .hero-subnav a { font-size: var(--fs-small); color: var(--text-primary); transition: color var(--dur-fast); display: flex; justify-content: space-between; align-items: center; }
  .hero-subnav a:hover { color: var(--accent); }
  .hero-subnav a::after { content: "→"; color: var(--accent); transition: transform var(--dur-fast); }
  .hero-subnav a:hover::after { transform: translateX(3px); }

  /* Trust Icons (6-icon grid Privatpraxis-Kosttor pattern) */
  .trust-grid { background: var(--bg-tertiary); border-block: 1px solid var(--hairline); padding-block: clamp(3rem, 5vw, 4rem); }
  .trust-grid-inner {
    display: grid; grid-template-columns: 1fr; gap: 2rem;
  }
  @media (min-width: 600px) { .trust-grid-inner { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .trust-grid-inner { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; } }
  .trust-item h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: 0.625rem; }
  .trust-item h3 .num { color: var(--accent); font-style: italic; margin-right: 0.5rem; }
  .trust-item p { color: var(--text-secondary); line-height: 1.55; max-width: 32ch; }

  /* Werte / Manifesto / generic content */
  .werte-row { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
  @media (min-width: 768px) { .werte-row { grid-template-columns: 1fr 1.4fr; gap: 4rem; } .werte-row.flip > .photo { order: -1; } }
  .werte-row .photo { aspect-ratio: 4/5; }
  .werte-row h2 { font-size: var(--fs-h1); line-height: 1.05; margin-bottom: 1rem; max-width: 16ch; }
  .werte-row h2 em { color: var(--accent); font-style: italic; }
  .werte-row p { color: var(--text-secondary); line-height: 1.65; max-width: 50ch; margin-bottom: 1rem; }

  /* Team Cards */
  .team-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
  @media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
  .team-card { display: grid; gap: 1rem; }
  .team-card .photo { aspect-ratio: 4/5; }
  .team-card h2 { font-size: var(--fs-h2); line-height: 1.1; }
  .team-card h2 em { color: var(--accent); font-style: italic; }
  .team-role { font-size: var(--fs-small); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .team-card p { color: var(--text-secondary); line-height: 1.6; font-size: var(--fs-small); }

  /* Sprechzeiten & Anfahrt strip */
  .info-strip { background: var(--bg-tertiary); border-block: 1px solid var(--hairline); padding-block: clamp(3rem, 5vw, 4rem); }
  .info-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  @media (min-width: 768px) { .info-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
  .info-grid h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-weight: 600; margin-bottom: 0.75rem; }
  .info-grid p, .info-grid address { font-style: normal; line-height: 1.7; color: var(--text-secondary); }
  .info-grid a:hover { color: var(--accent); }

  /* Subpage hero */
  .subpage-hero { padding-block: clamp(5rem, 10vw, 8rem) clamp(2.5rem, 4vw, 3.5rem); }
  .subpage-display { font-family: var(--font-display); font-size: clamp(2.5rem, 6.5vw, 4.75rem); line-height: 1.05; letter-spacing: -0.03em; margin-block: 0.5rem 1.25rem; max-width: 22ch; }
  .subpage-display em { font-style: italic; color: var(--accent); }
  .subpage-lead { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 56ch; }

  /* Leistungen list */
  .leistungen-section { padding-block: clamp(2rem, 4vw, 3rem); }
  .leistungen-section.alt { background: var(--bg-tertiary); border-block: 1px solid var(--hairline); }
  .leistungen-list { display: grid; grid-template-columns: 1fr; gap: 0; }
  @media (min-width: 768px) { .leistungen-list { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
  .leistungen-item { padding-block: 1.125rem; border-bottom: 1px solid var(--hairline); }
  .leistungen-item h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; line-height: 1.2; margin-bottom: 0.375rem; }
  .leistungen-item p { font-size: var(--fs-small); color: var(--text-secondary); }

  /* Patienten-Info FAQ */
  .faq-list { border-top: 1px solid var(--hairline); }
  .faq-list details { border-bottom: 1px solid var(--hairline); }
  .faq-list summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 0; cursor: pointer;
    font-family: var(--font-display); font-size: var(--fs-body-lg); font-weight: 500;
    list-style: none;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; transition: transform var(--dur-base); }
  .faq-list details[open] summary::after { content: "−"; }
  .faq-list details p { padding-bottom: 1.25rem; color: var(--text-secondary); max-width: 70ch; }

  /* Notfall-Banner — prominent, high-contrast */
  .notfall-banner { background: var(--accent); color: var(--bg-primary); padding-block: clamp(2.25rem, 4vw, 3rem); }
  .notfall-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  @media (min-width: 768px) { .notfall-grid { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; } }
  .notfall-banner h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; max-width: 18ch; }
  .notfall-banner h2 em { font-style: italic; opacity: 0.85; }
  .notfall-banner p { color: rgba(245, 244, 240, 0.84); line-height: 1.6; }
  .notfall-numbers { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 480px) { .notfall-numbers { grid-template-columns: 1fr 1fr; } }
  .notfall-num { display: block; padding: 1.25rem; border: 1px solid rgba(245, 244, 240, 0.28); transition: background var(--dur-fast); }
  .notfall-num:hover { background: rgba(245, 244, 240, 0.08); }
  .notfall-num strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.375rem; }
  .notfall-num span { display: block; font-size: var(--fs-small); color: rgba(245, 244, 240, 0.78); line-height: 1.4; }

  /* Section-eyebrow header (re-used pattern) */
  .section-head { margin-bottom: 2.5rem; max-width: 56ch; }
  .section-head h2 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; margin-block: 0.25rem 0.75rem; max-width: 22ch; }
  .section-head h2 em { color: var(--accent); font-style: italic; }
  .section-head p { color: var(--text-secondary); line-height: 1.6; }

  /* Step-grid (Erstbesuch / Anmeldung Process) */
  .steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; counter-reset: step; }
  @media (min-width: 600px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
  .step-card { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: 1.75rem 1.5rem; counter-increment: step; position: relative; }
  .step-card::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.5rem; margin-bottom: 0.75rem; letter-spacing: 0.04em; }
  .step-card h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; font-weight: 500; margin-bottom: 0.5rem; }
  .step-card p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; }

  /* Bewertungen / Testimonials */
  .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
  .review-card { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
  .review-stars { color: var(--accent); font-size: 1rem; letter-spacing: 0.15em; }
  .review-card blockquote { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.45; color: var(--text-primary); flex: 1; }
  .review-meta { font-size: var(--fs-small); color: var(--text-muted); border-top: 1px solid var(--hairline); padding-top: 0.875rem; }
  .review-meta strong { color: var(--text-primary); font-weight: 500; }
  .review-platforms { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; padding: 1.5rem 0 0; margin-top: 2.5rem; border-top: 1px solid var(--hairline); }
  .review-platform { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-small); color: var(--text-secondary); }
  .review-platform strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); font-weight: 400; letter-spacing: -0.01em; }

  /* DMP-/Programs Tile-Grid */
  .program-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 600px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .program-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
  .program-tile { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: 1.5rem; transition: border-color var(--dur-fast); }
  .program-tile:hover { border-color: var(--hairline-strong); }
  .program-tile h3 { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; font-weight: 500; margin-bottom: 0.5rem; }
  .program-tile h3 em { color: var(--accent); font-style: italic; }
  .program-tile p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; }
  .program-tile .program-tag { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); font-weight: 600; margin-bottom: 0.625rem; }

  /* Two-col split (text + photo or text + box) */
  .split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
  .split.flip > div:first-child { order: 2; }
  @media (min-width: 900px) { .split.flip > div:first-child { order: 0; } }
  .split .photo { aspect-ratio: 4/5; }
  .split-text h2 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; max-width: 18ch; margin-bottom: 1rem; }
  .split-text h2 em { color: var(--accent); font-style: italic; }
  .split-text p { color: var(--text-secondary); line-height: 1.65; max-width: 50ch; margin-bottom: 1rem; }
  .split-text ul.checklist { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
  .split-text ul.checklist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.625rem; align-items: baseline; color: var(--text-primary); font-size: var(--fs-body); line-height: 1.5; }
  .split-text ul.checklist li::before { content: "✓"; color: var(--accent); font-weight: 600; }

  /* Portal Card / E-Service-Tile */
  .portal-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  @media (min-width: 600px) { .portal-grid { grid-template-columns: repeat(2, 1fr); } }
  .portal-tile { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .portal-tile .portal-icon { width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; border-radius: 50%; flex-shrink: 0; }
  .portal-tile .portal-icon svg { width: 1.25rem; height: 1.25rem; }
  .portal-tile h3 { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; font-weight: 500; }
  .portal-tile p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; flex: 1; }
  .portal-tile .btn-link { align-self: flex-start; margin-top: 0.5rem; }

  /* Stats inline strip (for hero / under team) */
  .stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; padding: 1.75rem 0; border-block: 1px solid var(--hairline); margin-top: 2rem; }
  @media (min-width: 600px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }
  .stat-item strong { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 400; color: var(--accent); font-style: italic; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
  .stat-item span { display: block; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.4; }

  /* MFA-Grid 2x2 (instead of 3-col) */
  .mfa-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  @media (min-width: 600px) { .mfa-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
  @media (min-width: 1024px) { .mfa-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
  .mfa-card { display: grid; gap: 0.75rem; }
  .mfa-card .photo { aspect-ratio: 1/1; border-radius: 50%; }
  .mfa-card h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; font-weight: 500; }
  .mfa-card h3 em { color: var(--accent); font-style: italic; }
  .mfa-card .role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); font-weight: 600; }
  .mfa-card p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; }

  /* Ethik / Werte-Block (centered statement) */
  .ethik-block { background: var(--bg-secondary); padding-block: clamp(4rem, 7vw, 6rem); }
  .ethik-inner { max-width: 56ch; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
  .ethik-block h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.75vw, 2.125rem); line-height: 1.3; max-width: 28ch; margin-inline: auto; margin-bottom: 1.5rem; }
  .ethik-block h2 em { color: var(--accent); font-style: italic; }
  .ethik-block p { color: var(--text-secondary); line-height: 1.7; max-width: 50ch; margin-inline: auto; }
  .ethik-rules { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; text-align: left; }
  @media (min-width: 768px) { .ethik-rules { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
  .ethik-rule { padding: 1.25rem 1.375rem; background: var(--bg-tertiary); border: 1px solid var(--hairline); }
  .ethik-rule strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.375rem; }
  .ethik-rule span { display: block; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; }

  /* Praxis-Räume photo gallery */
  .raeume-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 600px) { .raeume-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
  @media (min-width: 1024px) { .raeume-grid { grid-template-columns: repeat(3, 1fr); } }
  .raum-tile { display: grid; gap: 0.75rem; }
  .raum-tile .photo { aspect-ratio: 4/3; }
  .raum-tile h3 { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2; font-weight: 500; }
  .raum-tile p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }

  /* Karriere / Stellenausschreibung */
  .career-card { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  @media (min-width: 900px) { .career-card { grid-template-columns: 1fr 1.4fr; gap: 3rem; } }
  .career-card .career-badge { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; background: var(--accent); color: var(--bg-primary); padding: 0.375rem 0.75rem; font-weight: 600; }
  .career-card h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.75vw, 2rem); line-height: 1.1; margin: 1rem 0 0.75rem; max-width: 18ch; }
  .career-card h2 em { color: var(--accent); font-style: italic; }
  .career-card p { color: var(--text-secondary); line-height: 1.65; margin-bottom: 1rem; }
  .career-card ul.checklist { display: grid; gap: 0.625rem; margin-bottom: 1.5rem; }
  .career-card ul.checklist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.5rem; align-items: baseline; font-size: var(--fs-small); }
  .career-card ul.checklist li::before { content: "✓"; color: var(--accent); font-weight: 600; }

  /* Telemed-Block */
  .telemed-card { background: var(--accent); color: var(--bg-primary); padding: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
  @media (min-width: 768px) { .telemed-card { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
  .telemed-card h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.1; max-width: 22ch; margin-bottom: 1rem; }
  .telemed-card h2 em { font-style: italic; opacity: 0.82; }
  .telemed-card p { color: rgba(245, 244, 240, 0.85); line-height: 1.65; margin-bottom: 1rem; }
  .telemed-times { background: rgba(245, 244, 240, 0.08); border: 1px solid rgba(245, 244, 240, 0.22); padding: 1.5rem; }
  .telemed-times dl { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem 1.25rem; font-size: var(--fs-small); }
  .telemed-times dt { color: rgba(245, 244, 240, 0.7); }
  .telemed-times dd { font-family: var(--font-display); font-size: 1rem; }

  /* Impf-/Reise-Liste (badge-list) */
  .badge-list { display: flex; flex-wrap: wrap; gap: 0.625rem 0.5rem; margin-top: 1.25rem; }
  .badge-list span { display: inline-block; padding: 0.5rem 0.875rem; border: 1px solid var(--hairline-strong); font-size: var(--fs-small); color: var(--text-secondary); border-radius: 4px; }

  /* Datenschutz-detail */
  .privacy-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  @media (min-width: 768px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
  .privacy-tile { padding: 1.5rem; border-left: 2px solid var(--accent); background: var(--bg-tertiary); }
  .privacy-tile h3 { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2; font-weight: 500; margin-bottom: 0.5rem; }
  .privacy-tile p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; }

  /* ============================================================
     ROUND-1 LEBENDIGKEIT · Hero ambient video, doctor cutout,
     heartbeat-EKG, live appointments, sprechzeiten-wheel,
     beschwerden-wegweiser, wartezeit-heatmap, trust-badges
     ============================================================ */

  /* Hero with ambient backdrop ----------------------------- */
  .hero { position: relative; isolation: isolate; overflow: hidden; }
  .hero-bg {
    position: absolute; inset: 0; z-index: -2;
    overflow: hidden; pointer-events: none;
  }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(245,244,240,0.28) 0%, rgba(245,244,240,0.55) 55%, rgba(245,244,240,0.80) 100%),
      radial-gradient(ellipse at 80% 0%, rgba(83,98,112,0.08), transparent 55%);
  }
  .hero-bg img, .hero-bg video {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.82) brightness(1.04);
    opacity: 0.88;
  }
  .hero-bg video { animation: hero-drift 38s ease-in-out infinite alternate; }
  @keyframes hero-drift {
    0% { transform: scale(1.04) translate3d(0,0,0); }
    100% { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
  }

  /* Doctor cut-out floating into the type column ----------- */
  .hero-text { position: relative; }
  .hero-cutout {
    position: absolute; right: -0.5rem; top: -1rem;
    width: clamp(108px, 22vw, 168px); aspect-ratio: 4/5;
    border-radius: 50% 50% 48% 52% / 56% 54% 46% 44%;
    overflow: hidden;
    box-shadow: 0 22px 48px -22px rgba(42,45,42,0.42), 0 0 0 1px rgba(83,98,112,0.10);
    background: var(--bg-tertiary);
    transform: rotate(2deg);
    z-index: 2;
  }
  .hero-cutout img { width: 100%; height: 100%; object-fit: cover; }
  .hero-cutout::after {
    content: "Dr. Henkel"; position: absolute; left: 0; right: 0; bottom: -1.75rem;
    text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.875rem;
    color: var(--accent); letter-spacing: 0.02em;
  }
  @media (min-width: 600px) {
    .hero-cutout { right: 0; top: -1.25rem; }
  }
  @media (min-width: 1024px) {
    .hero-cutout {
      right: auto; top: auto;
      position: relative; float: right; margin: 0.25rem -1rem 0.5rem 1.5rem;
      width: clamp(150px, 16vw, 196px);
      shape-outside: circle(50%);
    }
  }

  /* Heartbeat-EKG signature line --------------------------- */
  .hero-signature {
    display: flex; align-items: center; gap: 0.875rem;
    margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline);
    font-family: var(--font-display); font-size: 0.95rem; color: var(--text-secondary);
  }
  .hero-signature .sig-name { font-style: italic; color: var(--text-primary); }
  .hero-signature svg.ekg { width: clamp(110px, 18vw, 156px); height: 30px; flex-shrink: 0; }
  .hero-signature svg.ekg path {
    fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 240; stroke-dashoffset: 240;
    animation: ekg-trace 2.6s var(--ease-out) infinite;
  }
  @keyframes ekg-trace {
    0%   { stroke-dashoffset: 240; }
    35%  { stroke-dashoffset: 0; }
    70%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.15; }
  }

  /* Live "Freie Termine" tile ------------------------------ */
  .live-slots {
    margin-top: 1.75rem; padding: 1.125rem 1.25rem;
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    border-radius: 4px; display: grid; gap: 0.75rem;
  }
  .live-slots-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .live-slots-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--text-muted); font-weight: 600;
  }
  .live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #2fa46c;
    box-shadow: 0 0 0 0 rgba(47,164,108,0.45);
    animation: live-pulse 2s ease-out infinite;
  }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47,164,108,0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(47,164,108,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,164,108,0); }
  }
  .live-slots-meta { font-size: var(--fs-small); color: var(--text-muted); }
  .live-slots-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .live-slot {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--hairline-strong);
    background: var(--bg-primary); font-size: var(--fs-small); color: var(--text-primary);
    border-radius: 4px; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  }
  .live-slot:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-tertiary); }
  .live-slot strong { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); }
  .live-slot .slot-day { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }

  /* Inline stethoscope divider ----------------------------- */
  .scope-divider {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0; margin: 0;
  }
  .scope-divider::before, .scope-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--hairline);
  }
  .scope-divider svg { width: 38px; height: 38px; color: var(--accent); opacity: 0.55; }

  /* ──── Sprechzeiten-Tafel (clean weekly grid — round 7 fix) ──── */
  .hours-card {
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid; gap: 1.75rem;
  }
  @media (min-width: 900px) {
    .hours-card { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 2.25rem; align-items: stretch; }
  }
  .hours-table {
    width: 100%; border-collapse: collapse;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
  }
  .hours-table thead th {
    font-family: var(--font-body); font-weight: 600;
    font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--hairline-strong);
  }
  .hours-table thead th.hours-th-day { width: 24%; }
  .hours-table thead th.hours-th-note { display: none; }
  @media (min-width: 700px) {
    .hours-table thead th.hours-th-note { display: table-cell; width: 30%; }
  }
  .hours-table tbody th {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.0625rem; color: var(--text-primary);
    text-align: left;
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    white-space: nowrap;
  }
  .hours-table tbody th .hours-note-inline {
    display: block;
    font-family: var(--font-body); font-weight: 400; font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-top: 0.25rem;
    white-space: normal;
    line-height: 1.35;
  }
  .hours-table tbody th .hours-note-inline a { color: var(--accent); text-decoration: underline; }
  @media (min-width: 700px) {
    .hours-table tbody th .hours-note-inline { display: none; }
  }
  .hours-table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    font-size: var(--fs-small);
    color: var(--text-primary);
    border-top: 1px solid var(--hairline);
  }
  .hours-table tbody tr th {
    border-top: 1px solid var(--hairline);
  }
  .hours-table tbody tr:first-child th,
  .hours-table tbody tr:first-child td {
    border-top: 0;
  }
  .hours-table .hours-time {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .hours-table td.open .hours-time {
    background: rgba(83,98,112,0.10);
    border-left: 3px solid var(--accent);
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
  }
  .hours-table td.closed .hours-time {
    color: var(--text-muted);
    font-style: italic;
  }
  .hours-table td.hours-note {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    display: none;
  }
  @media (min-width: 700px) {
    .hours-table td.hours-note { display: table-cell; }
  }
  .hours-table tr.row-closed td.closed .hours-time {
    background: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--hairline-strong);
    color: var(--text-muted);
  }

  .hours-aside {
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.25rem; background: var(--bg-primary);
    border-left: 3px solid var(--accent);
  }
  .hours-aside-stat strong {
    display: block; font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--accent); line-height: 1;
  }
  .hours-aside-stat span {
    display: block; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--text-muted); margin-top: 0.5rem;
  }
  .hours-aside p {
    font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6;
  }
  .hours-legend { display: grid; gap: 0.5rem; }
  .hours-legend li {
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.8125rem; color: var(--text-secondary);
  }
  .hl-swatch {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 2px; flex-shrink: 0;
  }
  .hl-swatch.open { background: rgba(83,98,112,0.10); border-left: 3px solid var(--accent); }
  .hl-swatch.closed { background: var(--bg-secondary); border-left: 3px solid var(--hairline-strong); }
  .hours-aside .btn-link { align-self: flex-start; }

  /* ──── Beschwerden-Wegweiser (CSS-only routing) ──── */
  .wegweiser { background: var(--bg-tertiary); border: 1px solid var(--hairline); padding: clamp(1.75rem, 3vw, 2.5rem); }
  .wegweiser h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 0.5rem; }
  .wegweiser h3 em { color: var(--accent); font-style: italic; }
  .wegweiser > p { color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: 1.5rem; max-width: 50ch; }
  .wegweiser-options {
    display: grid; grid-template-columns: 1fr; gap: 0.625rem;
    margin-bottom: 1.5rem;
  }
  @media (min-width: 600px) { .wegweiser-options { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .wegweiser-options { grid-template-columns: repeat(4, 1fr); } }
  .wegweiser input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .wegweiser label {
    display: block; padding: 0.875rem 1rem; border: 1px solid var(--hairline-strong);
    background: var(--bg-primary); cursor: pointer; font-size: var(--fs-small);
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
    border-radius: 4px;
  }
  .wegweiser label:hover { border-color: var(--accent); color: var(--accent); }
  .wegweiser label strong { display: block; font-family: var(--font-display); font-style: italic; color: var(--accent); margin-bottom: 0.125rem; }
  .wegweiser input[type="radio"]:checked + label {
    border-color: var(--accent); background: var(--bg-tertiary); color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .wegweiser-result {
    display: none; padding: 1.25rem 1.5rem;
    background: var(--bg-secondary); border-left: 2px solid var(--accent);
    font-size: var(--fs-small); color: var(--text-primary); line-height: 1.6;
  }
  .wegweiser-result strong { font-family: var(--font-display); font-style: italic; color: var(--accent); display: block; margin-bottom: 0.25rem; }
  .wegweiser-result a { color: var(--accent); border-bottom: 1px solid currentColor; }
  /* Show matching result for each radio choice */
  #ww-akut:checked    ~ .wegweiser-result[data-for="akut"],
  #ww-vorsorge:checked ~ .wegweiser-result[data-for="vorsorge"],
  #ww-rezept:checked  ~ .wegweiser-result[data-for="rezept"],
  #ww-kind:checked    ~ .wegweiser-result[data-for="kind"]    { display: block; }

  /* ──── Wartezeit-Heatmap (5×4 grid) ──── */
  .heatmap-card {
    display: grid; gap: 1.5rem;
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    padding: clamp(1.5rem, 3vw, 2.25rem);
  }
  .heatmap-card h2, .heatmap-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); }
  .heatmap-card h2 em, .heatmap-card h3 em { color: var(--accent); font-style: italic; }
  .heatmap-card > p { color: var(--text-secondary); font-size: var(--fs-small); max-width: 50ch; }
  .heatmap {
    display: grid; grid-template-columns: 5rem repeat(5, 1fr);
    gap: 4px; align-items: stretch;
  }
  .heatmap .hm-corner { display: block; }
  .heatmap .hm-day, .heatmap .hm-band {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 0.375rem 0.5rem; align-self: center;
  }
  .heatmap .hm-day { text-align: center; }
  .heatmap .hm-band { padding-right: 0.625rem; text-align: right; }
  .heatmap .hm-cell {
    min-height: 56px; max-height: 88px; aspect-ratio: 5/3;
    background: var(--accent);
    position: relative; cursor: default;
    transition: outline var(--dur-fast);
  }
  .heatmap .hm-cell::after {
    content: attr(data-min) " min"; position: absolute; inset: 0;
    display: grid; place-items: center; font-size: 0.625rem; letter-spacing: 0.04em;
    color: var(--bg-primary); font-weight: 500;
  }
  .heatmap .hm-cell.q1 { background: rgba(47,164,108,0.22); } /* low wait — green */
  .heatmap .hm-cell.q1::after { color: #1a5c3a; }
  .heatmap .hm-cell.q2 { background: rgba(215,160,48,0.45); } /* amber */
  .heatmap .hm-cell.q2::after { color: #6b4800; }
  .heatmap .hm-cell.q3 { background: rgba(215,100,28,0.60); } /* orange */
  .heatmap .hm-cell.q3::after { color: #fff; }
  .heatmap .hm-cell.q4 { background: rgba(184,81,74,0.90); } /* red-high */
  .heatmap .hm-cell.q4::after { color: #fff; }
  .heatmap .hm-cell:hover { outline: 2px solid var(--text-primary); outline-offset: 1px; }
  .heatmap .hm-cell.closed { background: var(--bg-secondary); border: 1px dashed var(--hairline-strong); }
  .heatmap .hm-cell.closed::after { content: "—"; color: var(--text-muted); }
  .heatmap-legend {
    display: flex; flex-wrap: wrap; gap: 0.875rem 1.25rem; align-items: center;
    font-size: 0.75rem; color: var(--text-muted);
  }
  .heatmap-legend .swatch {
    display: inline-flex; align-items: center; gap: 0.375rem;
  }
  .heatmap-legend .sw {
    display: block; width: 14px; height: 14px;
  }
  .heatmap-legend .sw1 { background: rgba(47,164,108,0.22); }
  .heatmap-legend .sw2 { background: rgba(215,160,48,0.45); }
  .heatmap-legend .sw3 { background: rgba(215,100,28,0.60); }
  .heatmap-legend .sw4 { background: rgba(184,81,74,0.90); }

  /* ──── Trust-badge-strip (jameda + Google + DSGVO) ──── */
  .trust-badges {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
    padding: 1.25rem 1.5rem; background: var(--bg-tertiary);
    border: 1px solid var(--hairline); margin-top: 1.75rem;
  }
  @media (min-width: 600px) { .trust-badges { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
  @media (min-width: 1024px) { .trust-badges { grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: center; } }
  .badge-rating {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: var(--fs-small); color: var(--text-secondary);
  }
  .badge-rating .badge-logo {
    width: 56px; height: 22px; flex-shrink: 0; color: var(--accent);
  }
  .badge-rating strong { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--accent); }
  .badge-rating .stars { color: var(--accent); letter-spacing: 0.1em; }

  .dsgvo-strip {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    padding-top: 1rem; border-top: 1px solid var(--hairline);
    grid-column: 1 / -1;
  }
  @media (min-width: 1024px) { .dsgvo-strip { padding-top: 0; border-top: 0; padding-left: 1.25rem; border-left: 1px solid var(--hairline); grid-column: auto; } }
  .dsgvo-strip details {
    position: relative; font-size: 0.75rem;
  }
  .dsgvo-strip summary {
    list-style: none; cursor: help;
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-primary); border: 1px solid var(--hairline-strong);
    color: var(--text-secondary); font-weight: 500;
    border-radius: 4px;
    transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .dsgvo-strip summary::-webkit-details-marker { display: none; }
  .dsgvo-strip summary:hover { border-color: var(--accent); color: var(--accent); }
  .dsgvo-strip summary svg { width: 12px; height: 12px; }
  .dsgvo-strip details[open] summary { border-color: var(--accent); color: var(--accent); }
  .dsgvo-strip details > div {
    position: absolute; top: calc(100% + 0.5rem); left: 0;
    width: max-content; max-width: 240px; z-index: 4;
    background: var(--text-primary); color: var(--bg-primary);
    padding: 0.625rem 0.875rem; border-radius: 4px; font-size: 0.6875rem; line-height: 1.5;
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.3);
  }
  .dsgvo-strip details > div::before {
    content: ""; position: absolute; top: -4px; left: 0.875rem;
    width: 8px; height: 8px; background: var(--text-primary); transform: rotate(45deg);
  }

  /* Compact section helper for inserted upgrades ----------- */
  .section-soft { background: var(--bg-secondary); }

  /* Dark section — for werte, welcome-letter contrast */
  .section-dark {
    background: #2A2D2A;
    color: var(--bg-primary);
  }
  .section-dark .eyebrow { color: rgba(245,244,240,0.55); }
  .section-dark h2 { color: var(--bg-primary); }
  .section-dark h2 em { color: var(--accent-bright); }
  .section-dark p { color: rgba(245,244,240,0.78); }
  .section-dark .btn-primary { background: var(--bg-primary); color: var(--text-primary); }
  .section-dark .btn-primary:hover { background: var(--bg-secondary); }
  .section-dark .stat-item strong { color: var(--accent-bright); }
  .section-dark .stat-item span { color: rgba(245,244,240,0.55); }
  .section-dark .stats-strip { background: rgba(245,244,240,0.06); border-color: rgba(245,244,240,0.12); }
  .section-dark .stat-item { border-left-color: var(--accent-bright); }

  /* Trust item card hovers */
  .trust-item { padding: 1.25rem; border-radius: 4px; transition: background var(--dur-fast); }
  .trust-item:hover { background: var(--bg-tertiary); }

  /* ============================================================
     ROUND-2 DEPTH · Patient-Journey Timeline + Werte-Manifest
     ============================================================ */

  /* ──── Patienten-Reise Timeline ──── */
  .journey { display: grid; gap: 1.25rem; }
  .journey-head { margin-bottom: 1.25rem; max-width: 56ch; }
  .journey-head h2 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; margin-block: 0.25rem 0.75rem; max-width: 22ch; }
  .journey-head h2 em { color: var(--accent); font-style: italic; }
  .journey-head p { color: var(--text-secondary); line-height: 1.6; }

  .journey-track {
    position: relative;
    display: grid; grid-template-columns: 1fr; gap: 0;
    padding-left: 2.75rem;
  }
  /* Vertical guide line (steel-blue) */
  .journey-track::before {
    content: ""; position: absolute;
    left: 1.0625rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 92%, transparent 100%);
    opacity: 0.55;
  }

  .journey-stop {
    position: relative;
    border-bottom: 1px solid var(--hairline);
    padding: 1.5rem 0 1.25rem;
  }
  .journey-stop:last-child { border-bottom: 0; padding-bottom: 0; }
  /* Numbered node */
  .journey-stop::before {
    content: attr(data-num);
    position: absolute; left: -2.75rem; top: 1.5rem;
    width: 2.125rem; height: 2.125rem; border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent);
    display: grid; place-items: center;
    font-family: var(--font-display); font-style: italic;
    font-size: 1.0625rem; font-weight: 500; color: var(--accent);
    line-height: 1;
    box-shadow: 0 0 0 4px var(--bg-primary);
    z-index: 2;
  }
  .journey-stop[open]::before {
    background: var(--accent); color: var(--bg-primary);
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }

  .journey-stop > summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; gap: 1rem;
    align-items: baseline;
    padding-right: 0.25rem;
  }
  .journey-stop > summary::-webkit-details-marker { display: none; }
  .journey-stop > summary .stop-eyebrow {
    font-size: var(--fs-eyebrow); text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--text-muted); font-weight: 600;
    grid-column: 1 / -1; margin-bottom: 0.375rem;
  }
  .journey-stop > summary h3 {
    font-family: var(--font-display); font-size: var(--fs-h3);
    font-weight: 500; line-height: 1.2; margin: 0;
  }
  .journey-stop > summary h3 em { color: var(--accent); font-style: italic; }
  .journey-stop > summary .stop-toggle {
    align-self: center; color: var(--accent);
    font-size: 1.5rem; line-height: 1; font-weight: 300;
    width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .journey-stop[open] > summary .stop-toggle { transform: rotate(45deg); }

  .journey-body {
    padding: 1rem 0 0.25rem;
    display: grid; gap: 0.875rem;
    overflow: hidden;
    animation: journey-reveal var(--dur-base) var(--ease-out);
  }
  @keyframes journey-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .journey-body p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.65; max-width: 60ch; }
  .journey-body ul.journey-points {
    display: grid; gap: 0.5rem;
    margin-top: 0.25rem; padding: 0;
  }
  .journey-body ul.journey-points li {
    display: grid; grid-template-columns: 0.875rem 1fr; gap: 0.625rem;
    align-items: baseline;
    font-size: var(--fs-small); color: var(--text-primary); line-height: 1.55;
  }
  .journey-body ul.journey-points li::before {
    content: ""; display: block;
    width: 0.5rem; height: 0.5rem;
    background: var(--accent); border-radius: 50%;
    transform: translateY(0.25rem);
  }
  .journey-body .journey-meta {
    margin-top: 0.5rem; padding: 0.875rem 1rem;
    background: var(--bg-secondary); border-left: 2px solid var(--accent);
    font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55;
  }
  .journey-body .journey-meta strong {
    font-family: var(--font-display); font-style: italic;
    color: var(--accent); display: block; margin-bottom: 0.125rem;
  }

  /* Mobile: horizontal scroll-snap fallback below 600px */
  @media (max-width: 599px) {
    .journey-track {
      display: flex;
      grid-template-columns: none;
      gap: 1rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 0 0 1rem 0;
      margin: 0 calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
    }
    .journey-track::before { display: none; }
    .journey-stop {
      flex: 0 0 86%;
      scroll-snap-align: start;
      border-bottom: 0;
      border: 1px solid var(--hairline-strong);
      background: var(--bg-tertiary);
      padding: 1.25rem 1.125rem 1.125rem;
      border-radius: 4px;
    }
    .journey-stop::before {
      position: relative; left: 0; top: 0;
      margin-bottom: 0.875rem;
      box-shadow: none;
    }
    .journey-stop > summary { grid-template-columns: 1fr; }
    .journey-stop > summary .stop-toggle { justify-self: end; margin-top: -1.5rem; }
    .journey-hint {
      font-size: var(--fs-small); color: var(--text-muted);
      padding-inline: var(--gutter); margin-top: -0.5rem;
    }
  }
  @media (min-width: 600px) {
    .journey-hint { display: none; }
  }

  /* ──── Werte-Manifest deep (6 editorial statements) ──── */
  .werte-manifest { display: grid; gap: 0; }
  .werte-manifest .manifest-head {
    max-width: 56ch; margin: 0 auto 3rem;
    text-align: center;
  }
  .werte-manifest .manifest-head .eyebrow { display: inline-block; }
  .werte-manifest .manifest-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.625rem);
    line-height: 1.15;
    margin: 0.5rem auto 0.875rem; max-width: 26ch;
  }
  .werte-manifest .manifest-head h2 em { color: var(--accent); font-style: italic; }
  .werte-manifest .manifest-head p { color: var(--text-secondary); line-height: 1.65; }

  .werte-list { display: grid; gap: 0; }
  .werte-statement {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    padding-block: clamp(2.25rem, 4vw, 3rem);
    border-bottom: 1px solid var(--hairline);
  }
  .werte-statement:first-of-type { border-top: 1px solid var(--hairline); }
  @media (min-width: 768px) {
    .werte-statement { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
  }

  .werte-statement .werte-num {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.875rem; color: var(--accent);
    letter-spacing: 0.18em; text-transform: none;
    font-weight: 500;
    margin-bottom: 0.875rem;
    display: block;
  }
  .werte-statement blockquote.werte-pull {
    font-family: var(--font-display);
    font-style: italic; font-weight: 400;
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.22; letter-spacing: -0.01em;
    color: var(--text-primary);
    max-width: 22ch; margin: 0;
    position: relative;
  }
  /* Opening statement (first werte) gets extra editorial weight */
  .werte-statement:first-of-type blockquote.werte-pull {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-primary);
  }
  /* Accent highlight on statement 01 and 04 */
  .werte-statement:first-of-type,
  .werte-statement:nth-of-type(4) {
    background: rgba(83,98,112,0.04);
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
    margin-left: -1.5rem;
  }
  .werte-statement blockquote.werte-pull::before {
    content: "„"; position: absolute;
    left: -0.5rem; top: -0.375rem;
    color: var(--accent); opacity: 0.55;
    font-size: 1.5em; font-style: normal; line-height: 1;
  }
  .werte-statement blockquote.werte-pull::after { content: "."; color: var(--accent); }

  .werte-body { display: grid; gap: 0.875rem; }
  .werte-body p {
    color: var(--text-secondary);
    font-size: var(--fs-body); line-height: 1.65;
    max-width: 56ch;
  }
  .werte-body p:first-of-type::first-line {
    font-family: var(--font-display); font-style: italic;
    color: var(--text-primary);
  }
  .werte-body .werte-tag {
    display: inline-block; align-self: start;
    margin-top: 0.5rem;
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--accent); font-weight: 600;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
  }

  /* Closing kicker after the 6 statements */
  .werte-manifest .manifest-foot {
    margin-top: 2.5rem; padding: 1.75rem 1.5rem;
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    text-align: center;
  }
  .werte-manifest .manifest-foot p {
    font-family: var(--font-display); font-style: italic;
    font-size: var(--fs-body-lg); color: var(--text-primary);
    line-height: 1.4; max-width: 50ch; margin: 0 auto;
  }

  /* ============================================================
     ROUND-3 DEEP · Leistungen editorial-deep + Service-Finder
     ============================================================ */

  /* ──── Leistungen editorial deep-dive sections ──── */
  .leistungen-deep { padding-block: clamp(3rem, 6vw, 5rem); }
  .leistungen-deep.alt { background: var(--bg-tertiary); border-block: 1px solid var(--hairline); }

  .leistungen-deep-head { max-width: 64ch; margin-bottom: 2.5rem; }
  .leistungen-deep-head .eyebrow { color: var(--accent); }
  .leistungen-deep-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.75vw, 2.625rem);
    line-height: 1.1; letter-spacing: -0.005em;
    margin-block: 0.25rem 0.875rem; max-width: 22ch;
  }
  .leistungen-deep-head h2 em { color: var(--accent); font-style: italic; }
  .leistungen-deep-head p {
    color: var(--text-secondary);
    line-height: 1.65; max-width: 60ch;
    font-size: var(--fs-body);
  }

  /* Italic pull-quote — steel-blue accented, signature element */
  .leistungen-pull {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.4; letter-spacing: -0.005em;
    color: var(--accent);
    max-width: 56ch;
    margin: 0 0 2.75rem;
    padding: 1.25rem 0 1.25rem 1.5rem;
    border-left: 2px solid var(--accent);
    position: relative;
  }
  .leistungen-pull cite {
    display: block; margin-top: 0.625rem;
    font-family: var(--font-body); font-style: normal;
    font-size: var(--fs-small); font-weight: 500;
    color: var(--text-muted); letter-spacing: 0.04em;
  }

  /* Detail item list — 6 sub-leistungen per category */
  .leistungen-deep-list {
    display: grid; grid-template-columns: 1fr; gap: 0;
    border-top: 1px solid var(--hairline);
  }
  @media (min-width: 768px) {
    .leistungen-deep-list {
      grid-template-columns: 1fr 1fr;
      column-gap: 3rem;
      border-top: 1px solid var(--hairline);
    }
  }
  .leistungen-deep-item {
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--hairline);
  }
  .leistungen-deep-item h3 {
    font-family: var(--font-display); font-size: 1.1875rem;
    font-weight: 500; line-height: 1.25;
    margin-bottom: 0.5rem;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.875rem;
  }
  .leistungen-deep-item h3 .lz-meta {
    font-family: var(--font-body);
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--accent); font-weight: 600;
    border: 1px solid var(--accent); border-radius: 4px;
    padding: 0.25rem 0.5rem; line-height: 1.1;
  }
  .leistungen-deep-item p {
    color: var(--text-secondary); line-height: 1.6;
    font-size: var(--fs-small); max-width: 56ch;
  }

  /* ──── Service-Finder Quiz (pure CSS) ──── */
  .servicefinder {
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    display: grid; gap: 1.75rem;
  }
  .servicefinder fieldset { border: 0; padding: 0; margin: 0; }
  .servicefinder legend {
    font-family: var(--font-display); font-size: var(--fs-h3);
    font-weight: 500; line-height: 1.2;
    margin-bottom: 1rem;
    display: flex; align-items: baseline; gap: 0.625rem;
  }
  .servicefinder .sf-step-num {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.875rem; color: var(--accent);
    letter-spacing: 0.18em;
  }

  .sf-options { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }
  @media (min-width: 600px) { .sf-options-6 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .sf-options-6 { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 600px) { .sf-options-3 { grid-template-columns: repeat(3, 1fr); } }

  .servicefinder input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px;
  }
  .servicefinder label {
    display: block; padding: 0.875rem 1rem;
    border: 1px solid var(--hairline-strong);
    background: var(--bg-primary); cursor: pointer; font-size: var(--fs-small);
    line-height: 1.45; color: var(--text-secondary);
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
    border-radius: 4px;
    min-height: 56px;
  }
  .servicefinder label strong {
    display: block; font-family: var(--font-display); font-style: italic;
    font-weight: 500; color: var(--accent); margin-bottom: 0.125rem;
    font-size: 1rem; line-height: 1.2;
  }
  .servicefinder label:hover { border-color: var(--accent); color: var(--text-primary); }
  .servicefinder input[type="radio"]:checked + label {
    border-color: var(--accent); background: var(--bg-tertiary); color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  /* Step-2 hidden until step-1 has selection */
  .sf-step-2 { display: none; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
  .servicefinder:has(input[name="sf-anliegen"]:checked) .sf-step-2 { display: block; }

  /* Emergency hint (always visible inside Step 2) */
  .sf-emergency-hint {
    margin-top: 1rem; padding: 0.875rem 1rem;
    background: var(--bg-secondary); border-left: 2px solid var(--accent);
    font-size: var(--fs-small); color: var(--text-primary); line-height: 1.55;
    max-width: 64ch;
  }
  .sf-emergency-hint strong { font-family: var(--font-display); font-style: italic; color: var(--accent); }
  .sf-emergency-hint a {
    color: var(--accent); border-bottom: 1px solid currentColor; font-weight: 600;
  }

  /* Result cards — only show when matching anliegen is checked */
  .sf-results { display: grid; gap: 1rem; padding-top: 0.5rem; }
  .sf-result {
    display: none;
    background: var(--bg-secondary); border-left: 2px solid var(--accent);
    padding: 1.5rem 1.625rem;
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  .sf-result-tag {
    display: inline-block; align-self: start;
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--accent); font-weight: 600;
  }
  .sf-result h3 {
    font-family: var(--font-display); font-size: 1.25rem;
    font-weight: 500; line-height: 1.2;
    margin: 0;
  }
  .sf-result h3 em { color: var(--accent); font-style: italic; }
  .sf-result p {
    color: var(--text-secondary); line-height: 1.6;
    font-size: var(--fs-small); max-width: 60ch;
  }
  .sf-result-meta {
    display: grid; grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem; padding: 0.875rem 0;
    border-block: 1px solid var(--hairline);
    font-size: var(--fs-small);
  }
  .sf-result-meta dt {
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.6875rem;
    align-self: center; font-weight: 600;
  }
  .sf-result-meta dd {
    font-family: var(--font-display);
    color: var(--text-primary); line-height: 1.4;
  }
  .sf-result .btn-link { align-self: start; margin-top: 0.25rem; }

  /* Show matching result-card (uses :has() because radios are nested in fieldset) */
  .servicefinder:has(#sf-husten:checked)    .sf-result[data-for="husten"],
  .servicefinder:has(#sf-schmerzen:checked) .sf-result[data-for="schmerzen"],
  .servicefinder:has(#sf-vorsorge:checked)  .sf-result[data-for="vorsorge"],
  .servicefinder:has(#sf-chronisch:checked) .sf-result[data-for="chronisch"],
  .servicefinder:has(#sf-reise:checked)     .sf-result[data-for="reise"],
  .servicefinder:has(#sf-anderes:checked)   .sf-result[data-for="anderes"] { display: grid; }

  /* When sf-akut is selected, accent the result card border to signal urgency */
  .servicefinder:has(#sf-akut:checked) .sf-result { border-left-color: #b8514a; }
  .servicefinder:has(#sf-akut:checked) .sf-result-tag::before {
    content: "Akut · "; color: #b8514a; font-weight: 700;
  }

  /* ============================================================
     ROUND-4 CLINICAL POLISH · status-strip, parallax-bg,
     floating medical cutouts, editorial drop-caps, stamps,
     doctor signature, ornament dividers, more pull-quotes
     ============================================================ */

  /* ── Status-Strip (live "heute geöffnet") ─────────────── */
  .status-strip {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
    background: rgba(245, 244, 240, 0.78);
    border: 1px solid var(--hairline-strong);
    border-left: 2px solid #2fa46c;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .status-strip .status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #2fa46c;
    box-shadow: 0 0 0 0 rgba(47,164,108,0.5);
    animation: status-pulse 2.4s ease-out infinite;
    flex-shrink: 0;
  }
  @keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47,164,108,0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(47,164,108,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,164,108,0); }
  }
  .status-strip strong {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; color: var(--text-primary);
  }
  .status-strip .sep { color: var(--text-muted); opacity: 0.6; }

  /* ── Hero: Soft cream-tone wash layer (no photo, depth via gradients) ─ */
  .hero-bg-photo {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(ellipse 60% 50% at 80% 25%, rgba(83, 98, 112, 0.10), transparent 70%),
      radial-gradient(ellipse 50% 40% at 15% 75%, rgba(166, 142, 100, 0.08), transparent 70%),
      linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    opacity: 0.92;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .hero-bg-photo { opacity: 0.78; }
  }

  /* Hero h1 italic shimmer (very subtle) ─────────────── */
  .hero-text h1 em {
    background: linear-gradient(95deg, var(--accent) 0%, #6e8190 45%, var(--accent) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: italic-shimmer 14s linear infinite;
  }
  @keyframes italic-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Pulse on "Aktuell freie Termine" tile ───────────── */
  .live-slots {
    position: relative;
    animation: tile-soft-pulse 6s ease-in-out infinite;
  }
  @keyframes tile-soft-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(83,98,112,0); }
    50%      { box-shadow: 0 0 0 6px rgba(83,98,112,0.06); }
  }

  /* ── Editorial signature-strip ("Dr. Henkel & Dr. Werner") ── */
  .editor-signature {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding: 1rem 0 0.25rem;
    border-top: 1px dashed var(--hairline-strong);
  }
  .editor-signature .sig-name {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 1.25rem; line-height: 1.2;
    color: var(--accent);
  }
  .editor-signature .est { font-style: normal; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

  /* ── Floating medical cutouts (drift between sections) ── */
  .floater-set {
    position: relative;
    height: 0; pointer-events: none;
    overflow: visible;
  }
  .floater {
    position: absolute;
    color: var(--accent);
    opacity: 0.18;
    pointer-events: none;
    will-change: transform;
  }
  .floater svg { width: 100%; height: 100%; display: block; }
  .floater-left  { left: clamp(0.5rem, 4vw, 3rem); }
  .floater-right { right: clamp(0.5rem, 4vw, 3rem); }
  .floater-stetho {
    width: clamp(64px, 9vw, 110px); aspect-ratio: 1/1;
    top: -3rem;
    animation: float-drift-a 22s ease-in-out infinite;
    transform-origin: center;
  }
  .floater-cross {
    width: clamp(48px, 6vw, 78px); aspect-ratio: 1/1;
    top: -1.5rem;
    animation: float-drift-b 26s ease-in-out infinite;
  }
  .floater-plant {
    width: clamp(56px, 7vw, 92px); aspect-ratio: 1/1.4;
    top: -2.25rem;
    animation: float-drift-c 30s ease-in-out infinite;
  }
  .floater-bag {
    width: clamp(56px, 7vw, 92px); aspect-ratio: 1/0.85;
    top: -2rem;
    animation: float-drift-a 28s ease-in-out infinite;
  }
  @keyframes float-drift-a {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
  }
  @keyframes float-drift-b {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50%      { transform: translateY(-8px) rotate(-2deg); }
  }
  @keyframes float-drift-c {
    0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
    50%      { transform: translateY(-10px) rotate(2deg) scale(1.03); }
  }
  @media (max-width: 600px) {
    .floater { display: none; }
  }

  /* ── Welcome-letter section wrapper ─────────────────── */
  .welcome-letter-section {
    background: #2A2D2A;
    padding-block: clamp(5rem, 10vw, 8rem);
  }
  .welcome-letter-section .eyebrow { color: rgba(245,244,240,0.55); }
  .welcome-letter-section .section-head-dark h2 {
    color: var(--bg-primary);
    font-size: var(--fs-h1);
    margin-bottom: 2.5rem;
  }
  .welcome-letter-section .section-head-dark h2 em { color: var(--accent-bright); }

  /* ── Welcome-letter cutout (editorial) ──────────────── */
  .welcome-letter {
    background: var(--bg-primary);
    border: 1px solid rgba(245,244,240,0.12);
    box-shadow: 0 32px 80px -32px rgba(0,0,0,0.40), 0 1px 0 rgba(245,244,240,0.08);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
    max-width: 68ch;
    margin-inline: auto;
    position: relative;
    transform: rotate(-0.4deg);
    background-image:
      linear-gradient(180deg, transparent 0%, transparent calc(2rem - 1px), rgba(83,98,112,0.06) calc(2rem - 1px), rgba(83,98,112,0.06) 2rem, transparent 2rem),
      linear-gradient(180deg, transparent 0%, transparent calc(4rem - 1px), rgba(83,98,112,0.06) calc(4rem - 1px), rgba(83,98,112,0.06) 4rem, transparent 4rem);
  }
  .welcome-letter::before {
    content: ""; position: absolute;
    top: -8px; left: clamp(1.5rem, 3vw, 2.5rem);
    width: 38px; height: 16px;
    background: rgba(83,98,112,0.18);
    border-radius: 2px;
    transform: rotate(-4deg);
  }
  .welcome-letter .welcome-eyebrow {
    font-family: var(--font-body); font-size: 0.6875rem;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--accent); font-weight: 600;
    margin-bottom: 0.625rem;
  }
  .welcome-letter h2 {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2; margin-bottom: 1rem; max-width: 22ch;
  }
  .welcome-letter h2 em { color: var(--accent); font-style: italic; }
  .welcome-letter p {
    font-family: var(--font-display); font-style: italic;
    color: var(--text-secondary); line-height: 1.65;
    font-size: var(--fs-body); margin-bottom: 1rem;
  }
  .welcome-letter .welcome-sign {
    display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid var(--hairline);
  }
  .welcome-letter .welcome-sign .sig-name {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 1.25rem; color: var(--accent);
    line-height: 1.2;
  }
  .welcome-letter .welcome-sign-meta {
    font-family: var(--font-body); font-style: normal;
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--text-muted); line-height: 1.4;
  }

  /* ── Section-divider ornament (medical line illustration) ── */
  .ornament-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; padding-block: clamp(2rem, 4vw, 3rem);
    color: var(--accent);
  }
  .ornament-divider::before,
  .ornament-divider::after {
    content: ""; flex: 0 1 clamp(80px, 18vw, 220px);
    height: 1px; background: var(--hairline);
  }
  .ornament-divider svg { width: clamp(40px, 6vw, 64px); height: clamp(40px, 6vw, 64px); opacity: 0.55; }

  /* ── Drop-caps for werte-body and journey-body ──────── */
  .werte-body p:first-of-type::first-letter,
  .journey-body p:first-of-type::first-letter {
    font-family: var(--font-display); font-style: italic;
    font-size: 3.6em; line-height: 0.9;
    float: left;
    color: var(--accent);
    margin: 0.15em 0.18em 0 0;
    padding-right: 0.05em;
    font-weight: 400;
  }
  /* Re-block: first-line italic would conflict, so override */
  .werte-body p:first-of-type::first-line { font-style: normal; color: var(--text-secondary); }

  /* ── Custom bullet style (cross-mark dots) ──────────── */
  .cross-list { display: grid; gap: 0.625rem; margin-top: 1.25rem; }
  .cross-list li {
    display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.75rem;
    align-items: baseline;
    color: var(--text-primary); font-size: var(--fs-body); line-height: 1.55;
  }
  .cross-list li::before {
    content: ""; display: block;
    width: 0.625rem; height: 0.625rem;
    background:
      linear-gradient(var(--accent), var(--accent)) center / 100% 1.5px no-repeat,
      linear-gradient(var(--accent), var(--accent)) center / 1.5px 100% no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--accent);
    transform: translateY(0.3rem);
  }

  /* ── Stamp-Marks (kassenärztlich, DSGVO, DTG) ───────── */
  .stamps {
    display: flex; flex-wrap: wrap; gap: 0.875rem 1rem;
    align-items: center;
    padding-block: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--hairline);
  }
  .stamp {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-body); font-size: 0.6875rem;
    text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
    border-radius: 3px;
    transform: rotate(-1.5deg);
    background: rgba(83,98,112,0.04);
    opacity: 0.78;
    position: relative;
  }
  .stamp:nth-child(2n) { transform: rotate(1.2deg); }
  .stamp:nth-child(3n) { transform: rotate(-0.8deg); }
  .stamp::before {
    content: ""; display: block;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.5;
  }
  .stamp em { font-family: var(--font-display); font-style: italic; font-weight: 400; opacity: 0.85; text-transform: none; letter-spacing: 0; }

  /* ── Reading-time indicator ─────────────────────────── */
  .reading-time {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--text-muted); font-weight: 600;
    padding: 0.375rem 0;
    margin-bottom: 1rem;
  }
  .reading-time svg { width: 12px; height: 12px; color: var(--accent); }
  .reading-time strong {
    font-family: var(--font-display); font-style: italic;
    font-weight: 400; color: var(--accent); text-transform: none; letter-spacing: 0;
    font-size: 0.875rem;
  }

  /* ── Doctor signature (bottom-right) ── */
  .doctor-signature {
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    display: flex; justify-content: flex-end; align-items: baseline; gap: 0.875rem; flex-wrap: wrap;
    font-family: var(--font-display); font-style: italic;
    color: var(--text-muted); font-size: 0.875rem;
  }
  .doctor-signature .sig-name {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 1.25rem;
    color: var(--accent);
    line-height: 1.2;
  }

  /* ── Inline pull-quote (mid-section, attributed) ────── */
  .inline-quote {
    margin: 2rem 0;
    padding: 1.25rem 0 1.25rem 1.5rem;
    border-left: 2px solid var(--accent);
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
    line-height: 1.45; color: var(--accent);
    max-width: 56ch;
  }
  .inline-quote cite {
    display: block; margin-top: 0.5rem;
    font-family: var(--font-body); font-style: normal;
    font-size: var(--fs-small); font-weight: 500;
    color: var(--text-muted); letter-spacing: 0.04em;
  }

  /* ── Doctor portrait cutout (small variant) ─────────── */
  .doctor-portrait-mini {
    width: clamp(72px, 10vw, 110px); aspect-ratio: 4/5;
    border-radius: 50% 50% 48% 52% / 56% 54% 46% 44%;
    overflow: hidden;
    box-shadow: 0 14px 30px -16px rgba(42,45,42,0.32), 0 0 0 1px rgba(83,98,112,0.10);
    background: var(--bg-tertiary);
    transform: rotate(-2deg);
    flex-shrink: 0;
  }
  .doctor-portrait-mini img { width: 100%; height: 100%; object-fit: cover; }

  /* ── Praxis-Section-Divider (typographic, no photo) ──── */
  .photo-divider {
    --mask: radial-gradient(ellipse 70% 60% at 50% 50%, #000 35%, transparent 75%);
    width: 100%;
    aspect-ratio: 7/1;
    background:
      linear-gradient(90deg, transparent 0%, rgba(83, 98, 112, 0.08) 40%, rgba(83, 98, 112, 0.10) 50%, rgba(83, 98, 112, 0.08) 60%, transparent 100%);
    -webkit-mask-image: var(--mask); mask-image: var(--mask);
    margin-block: clamp(2rem, 4vw, 3rem);
    pointer-events: none;
    position: relative;
  }
  .photo-divider::before {
    content: "Praxis Dr. Henkel · Hachenburg · Mittelstraße 12";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
    color: rgba(83, 98, 112, 0.55);
    letter-spacing: 0.06em;
  }

  /* ============================================================
     ROUND-5 FINAL POLISH · Praxis-Team-Faces + Mobile-Tuning
     ============================================================ */

  /* ── Heute in der Praxis · 6-Faces Grid ───────────────── */
  .heute-in-praxis .praxis-faces {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem;
  }
  @media (min-width: 480px) { .heute-in-praxis .praxis-faces { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.5rem; } }
  @media (min-width: 768px) { .heute-in-praxis .praxis-faces { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.75rem; } }
  @media (min-width: 1024px) { .heute-in-praxis .praxis-faces { grid-template-columns: repeat(6, 1fr); gap: 2.5rem 1.5rem; } }

  .face-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1rem;
  }
  .face-portrait {
    --halo: rgba(83, 98, 112, 0.12);
    position: relative;
    width: clamp(120px, 28vw, 168px); aspect-ratio: 5/6;
    margin: 0;
    border-radius: 50% 50% 47% 53% / 56% 54% 46% 44%;
    overflow: hidden;
    background: var(--bg-tertiary);
    box-shadow:
      0 0 0 6px var(--bg-primary),
      0 0 0 7px var(--halo),
      0 22px 40px -22px rgba(42, 45, 42, 0.34);
    isolation: isolate;
    transform: rotate(-1.5deg);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .face-card:nth-child(2n) .face-portrait { transform: rotate(1.5deg); }
  .face-card:nth-child(3n) .face-portrait { transform: rotate(-0.6deg); }
  .face-portrait::before {
    /* cream-halo subtle inner glow */
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(245, 244, 240, 0.0) 55%, rgba(245, 244, 240, 0.45) 100%);
    pointer-events: none; z-index: 1;
  }
  .face-portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
    filter: saturate(0.92) contrast(1.02);
  }
  .face-card:hover .face-portrait { transform: rotate(0deg); box-shadow: 0 0 0 6px var(--bg-primary), 0 0 0 8px var(--accent), 0 26px 46px -22px rgba(42, 45, 42, 0.4); }

  .face-meta { max-width: 28ch; }
  .face-meta h3 {
    font-family: var(--font-display); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    line-height: 1.2; font-weight: 500; margin-bottom: 0.25rem; color: var(--text-primary);
  }
  .face-meta h3 em { color: var(--accent); font-style: italic; }
  .face-role {
    font-size: 0.75rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 0.625rem;
  }
  .face-detail {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary);
    max-width: 24ch; margin-inline: auto;
  }

  .faces-foot {
    margin-top: 2.5rem;
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
    align-items: center; justify-content: space-between;
    padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  }
  .faces-foot .faces-meta {
    font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.04em;
  }
  .faces-foot .faces-meta strong { color: var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 400; }

  /* ============================================================
     Mobile-Perfectionierung · 375px-First Tuning
     ============================================================ */

  /* — Sprechzeiten-Tafel: tighten on small screens — */
  @media (max-width: 600px) {
    .hours-table tbody th { font-size: 0.9375rem; padding: 0.625rem 0.5rem; }
    .hours-table tbody td { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
    .hours-table td.open .hours-time,
    .hours-table tr.row-closed td.closed .hours-time { padding: 0.4375rem 0.5625rem; }
    .hours-aside { padding: 1rem; }
    .hours-aside-stat strong { font-size: 1.75rem; }
  }

  /* — Wegweiser pills: touch-friendly 48px min-height — */
  .wegweiser label {
    min-height: 56px;
    display: flex; flex-direction: column; justify-content: center;
    line-height: 1.35;
  }
  @media (max-width: 600px) {
    .wegweiser label { min-height: 60px; padding: 0.875rem 1rem; }
    .wegweiser-result { padding: 1.125rem 1.25rem; font-size: 0.9375rem; line-height: 1.55; }
  }

  /* — Wartezeit-Heatmap responsive: shrink label-col on 375px — */
  @media (max-width: 600px) {
    .heatmap-card { padding: 1.25rem; }
    .heatmap {
      grid-template-columns: 4.5rem repeat(5, 1fr);
      gap: 3px;
    }
    .heatmap .hm-day, .heatmap .hm-band {
      font-size: 0.5rem; padding: 0.25rem 0.25rem; letter-spacing: 0.04em;
      white-space: normal; overflow-wrap: break-word; word-break: break-word;
      line-height: 1.25; hyphens: auto; lang: de;
    }
    .heatmap .hm-band { padding-right: 0.375rem; text-align: left; }
    .heatmap .hm-cell { min-height: 42px; max-height: 58px; aspect-ratio: auto; }
    .heatmap .hm-cell::after { font-size: 0.5625rem; }
    .heatmap-legend { gap: 0.5rem 0.75rem; font-size: 0.6875rem; }
    .heatmap-legend .sw { width: 12px; height: 12px; }
  }
  /* Ultra-narrow: hide minute labels inside cells, keep color-coding */
  @media (max-width: 430px) {
    .heatmap {
      grid-template-columns: 4rem repeat(5, 1fr);
      gap: 2px;
    }
    .heatmap .hm-cell::after { content: ""; } /* hide "X min" text, color speaks */
    .heatmap .hm-band { font-size: 0.4375rem; padding: 0.25rem 0.25rem 0.25rem 0; }
    .heatmap .hm-day { font-size: 0.5rem; }
  }

  /* — Service-Finder Quiz: touch-friendly labels & tap-targets — */
  @media (max-width: 768px) {
    .servicefinder .sf-step label {
      min-height: 56px;
      padding: 0.875rem 1rem;
    }
    .servicefinder .sf-result {
      padding: 1.25rem 1.25rem;
    }
    .servicefinder .sf-result h3 { font-size: 1.125rem; }
  }

  /* — Stamp-Marks visible rotation on mobile (slightly bigger) — */
  @media (max-width: 600px) {
    .stamps {
      flex-wrap: wrap; gap: 0.625rem 0.5rem; justify-content: flex-start;
    }
    .stamps .stamp {
      font-size: 0.6875rem;
      padding: 0.4375rem 0.6875rem;
      letter-spacing: 0.04em;
      min-height: 32px;
    }
  }

  /* — Patienten-Reise mobile: ensure horizontal scroll-snap is readable — */
  @media (max-width: 600px) {
    .journey-body, .journey-meta {
      font-size: 0.9375rem; line-height: 1.6;
    }
    .journey-meta { padding: 0.875rem 1rem; }
    .journey .journey-stop > summary {
      min-height: 56px;
      padding: 0.875rem 0.875rem 0.875rem 2.5rem;
    }
  }

  /* — Hero-cutout & subnav stack readable on 375px — */
  @media (max-width: 600px) {
    .hero-cutout { width: clamp(120px, 32vw, 160px); margin-bottom: 1rem; }
    .hero-subnav { margin-top: 1.75rem; padding: 1.25rem 1.25rem; }
    .hero-subnav ul { columns: 2; column-gap: 1.5rem; }
    .hero-subnav li { break-inside: avoid; padding: 0.375rem 0; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .hero-actions .btn { justify-content: center; }
  }

  /* — Live-slots responsive (4 → 2-col grid on tiny screens) — */
  @media (max-width: 480px) {
    .live-slots-list {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
    }
    .live-slot { min-height: 56px; padding: 0.625rem 0.75rem; }
  }

  /* — Trust-badges + DSGVO-strip clarity on tiny screens — */
  @media (max-width: 600px) {
    .trust-badges { padding: 1rem 1.125rem; }
    .badge-rating { flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.8125rem; }
    .dsgvo-strip { gap: 0.4375rem; }
    .dsgvo-strip summary { padding: 0.4375rem 0.6875rem; min-height: 32px; }
  }

  /* — Notfall-banner: tap-targets full-width on mobile — */
  @media (max-width: 480px) {
    .notfall-num { padding: 1rem 1.125rem; min-height: 80px; }
    .notfall-num strong { font-size: 1.5rem; }
    .notfall-num span { font-size: 0.8125rem; }
  }

  /* — Heute-in-Praxis ultra-compact 375px tuning — */
  @media (max-width: 480px) {
    .heute-in-praxis .praxis-faces { gap: 1.75rem 1rem; }
    .face-portrait { width: clamp(110px, 36vw, 140px); }
    .face-meta h3 { font-size: 1.0625rem; }
    .face-detail { font-size: 0.9375rem; }
    .faces-foot { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  }

  /* ============================================================
     ROUND-8 · Typographic Portraits + Room-Tiles · Aushängeschild
     ============================================================
     Replaces stock-photography with editorial CSS-only renderings.
     Mood: Sollis Health x Modern Age — calm steel-blue on cream,
     Source Serif initials, hairline ornamentation, no decoration noise. */

  /* — Typographic portrait (initials in oval, steel-blue gradient) — */
  .cs-portrait {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.375rem;
    background:
      radial-gradient(ellipse 80% 65% at 50% 28%, rgba(255, 255, 255, 0.55), transparent 65%),
      linear-gradient(160deg, #DDE2E7 0%, #C5CCD3 55%, #A4ADB6 100%);
    color: var(--accent-deep);
    overflow: hidden;
  }
  .cs-portrait::before {
    /* hairline inner frame */
    content: ""; position: absolute; inset: 8px;
    border: 1px solid rgba(83, 98, 112, 0.22);
    pointer-events: none;
  }
  .cs-portrait::after {
    /* faint serif marker line at bottom */
    content: ""; position: absolute; left: 50%; bottom: 12%;
    width: 32px; height: 1px; background: rgba(83, 98, 112, 0.4);
    transform: translateX(-50%);
  }
  .cs-portrait-monogram {
    font-family: var(--font-display); font-style: italic;
    font-weight: 400;
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    line-height: 1; letter-spacing: 0.04em;
    color: var(--accent-deep);
    user-select: none;
  }
  .cs-portrait-meta {
    font-family: var(--font-body);
    font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(42, 45, 42, 0.62);
    font-weight: 500;
  }
  /* MFA variant: warmer beige-tinted gradient */
  .cs-portrait-mfa {
    background:
      radial-gradient(ellipse 80% 65% at 50% 28%, rgba(255, 255, 255, 0.55), transparent 65%),
      linear-gradient(160deg, #E8DFCF 0%, #D6CAB1 55%, #BFB295 100%);
    color: #5C4A2E;
  }
  .cs-portrait-mfa .cs-portrait-monogram { color: #6B5430; }
  .cs-portrait-mfa::after { background: rgba(107, 84, 48, 0.45); }
  .cs-portrait-mfa::before { border-color: rgba(107, 84, 48, 0.22); }

  /* Hero-cutout typographic variant (oval frame) */
  .hero-cutout-typo {
    width: clamp(140px, 18vw, 200px);
    aspect-ratio: 4/5;
    border-radius: 50% 50% 47% 53% / 56% 54% 46% 44%;
    overflow: hidden;
    box-shadow:
      0 0 0 6px var(--bg-primary),
      0 0 0 7px rgba(83, 98, 112, 0.18),
      0 22px 40px -22px rgba(42, 45, 42, 0.36);
    transform: rotate(-2deg);
  }

  /* face-portrait-typo variant (already inside .face-portrait wrapper which clips) */
  .face-portrait-typo .cs-portrait { width: 100%; height: 100%; }

  /* Praxisteam large portrait variant (for werte-row figure photo) */
  .cs-portrait-large {
    aspect-ratio: 4/5;
    border: 1px solid var(--hairline-strong);
    display: flex; flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: #E8ECEF;
    position: relative;
  }
  /* Top 70%: initialen-field mit großem Monogramm */
  .cs-portrait-large .cs-portrait-monogram {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(5rem, 14vw, 9rem);
    margin: 0;
    padding: clamp(1.5rem, 4vw, 3rem) 1rem 1rem;
    background:
      radial-gradient(ellipse 75% 60% at 40% 30%, rgba(255,255,255,0.7), transparent 70%),
      linear-gradient(165deg, #DFE5EA 0%, #C3CDD5 55%, #9BAAB5 100%);
    color: var(--accent-deep);
    letter-spacing: 0.06em;
    line-height: 1;
  }
  /* Bottom nameplate bar */
  .cs-portrait-large-nameplate {
    flex-shrink: 0;
    background: var(--accent);
    padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.25rem;
  }
  .cs-portrait-large-name {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 2vw, 1.3125rem);
    font-weight: 500; line-height: 1.2;
    color: var(--bg-primary);
    letter-spacing: -0.01em;
  }
  .cs-portrait-large-meta {
    font-family: var(--font-body);
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(245,244,240,0.72);
    font-weight: 500;
  }
  .cs-portrait-large::before { display: none; }
  .cs-portrait-large::after { display: none; }

  /* Alt variant: warmer for Dr. Werner */
  .cs-portrait-large-alt .cs-portrait-monogram {
    background:
      radial-gradient(ellipse 75% 60% at 60% 30%, rgba(255,255,255,0.7), transparent 70%),
      linear-gradient(195deg, #EAE1D1 0%, #CFBFA0 55%, #AC9978 100%);
    color: #5C4530;
  }
  .cs-portrait-large-alt .cs-portrait-large-nameplate {
    background: #7A6040;
  }

  /* Square portrait variant (for MFA cards in praxisteam.html) */
  .cs-portrait-square {
    aspect-ratio: 1/1;
    border-radius: var(--radius-md, 8px);
  }

  /* — Typographic room tile (no photo, editorial label + icon) — */
  .cs-room {
    width: 100%; height: 100%;
    min-height: 280px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; padding: 2rem 1.5rem;
    background:
      radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
      linear-gradient(165deg, #EFE9DC 0%, #DCD2BD 55%, #C5B79B 100%);
    color: var(--accent-deep);
    border: 1px solid rgba(83, 98, 112, 0.16);
    position: relative;
    isolation: isolate;
  }
  .cs-room::before {
    /* serif quote marks decoration */
    content: ""; position: absolute; inset: 10px;
    border: 1px dashed rgba(83, 98, 112, 0.18);
    pointer-events: none;
  }
  .cs-room-icon {
    width: clamp(52px, 8vw, 80px); height: auto;
    color: var(--accent-deep);
    stroke-width: 1.4;
    opacity: 0.78;
  }
  .cs-room-label {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 500; line-height: 1.15;
    color: var(--accent-deep);
    text-align: center;
  }
  .cs-room-detail {
    font-family: var(--font-body);
    font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(42, 45, 42, 0.58);
    font-weight: 500;
    text-align: center;
  }
  /* Flat-variant for raum-tile grid (room photos in praxisteam.html) */
  .cs-room-flat {
    min-height: 0; aspect-ratio: 4/3;
    padding: 1.25rem;
    gap: 0.625rem;
  }
  .cs-room-flat svg {
    width: clamp(36px, 6vw, 52px); height: auto;
    color: var(--accent-deep);
    opacity: 0.7;
  }
  .cs-room-flat-label {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.875rem; font-weight: 500;
    color: var(--accent-deep);
    letter-spacing: 0.02em;
    text-align: center;
  }
  .cs-room-wartezimmer { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #EFE9DC 0%, #DCD2BD 55%, #C5B79B 100%); }
  .cs-room-empfang     { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #E4EAEF 0%, #C7D1D9 55%, #A8B5BF 100%); }
  .cs-room-sprechzimmer { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #EDEAE2 0%, #D5D0C4 55%, #B7B0A0 100%); }
  .cs-room-labor       { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #E8ECEF 0%, #CDD4DB 55%, #ACB6BF 100%); }
  .cs-room-garten      { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #E4ECE0 0%, #C8D4C2 55%, #A4B59C 100%); }
  .cs-room-beratung    { background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(165deg, #ECE9E0 0%, #D4CFC0 55%, #B5AE9C 100%); }

  /* ── Anfahrt-Map embed wrapper ───────────────────────── */
  .map-embed {
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--hairline-strong);
    background: var(--bg-tertiary);
    overflow: hidden;
  }
  .map-embed iframe {
    width: 100%; height: clamp(280px, 38vw, 420px);
    border: 0; display: block;
    filter: grayscale(0.32) contrast(1.02);
  }
  .map-embed .map-svg {
    width: 100%; height: auto; display: block;
    background: var(--bg-secondary);
  }
  .map-embed-caption {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--hairline);
    font-size: 0.8125rem;
  }
  .map-embed-caption strong {
    font-family: var(--font-display); font-style: italic;
    color: var(--accent-deep); font-weight: 500;
  }

  /* — Mobile-tuning round-8 — */
  @media (max-width: 600px) {
    .cs-room { min-height: 220px; padding: 1.5rem 1.25rem; }
    .cs-portrait-large { padding: 1.5rem 1rem; }
    .cs-portrait-large .cs-portrait-monogram { font-size: clamp(3rem, 14vw, 5rem); }
  }
  @media (max-width: 480px) {
    .map-embed iframe { height: 240px; }
  }

  /* ============================================================
     QUALITY-PASS · Termin-Formular + Misc Fixes
     ============================================================ */

  /* ── Clinical Termin Form ──────────────────────────────── */
  .termin-section { padding-block: clamp(3.5rem, 6vw, 5rem); background: var(--bg-secondary); }
  .termin-wrap {
    max-width: 800px;
    display: grid; gap: 2.5rem;
  }
  @media (min-width: 900px) {
    .termin-wrap { grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: start; }
  }
  .termin-header {}
  .termin-header h2 {
    font-family: var(--font-display); font-size: var(--fs-h1);
    line-height: 1.05; margin-block: 0.375rem 0.875rem; max-width: 16ch;
  }
  .termin-header h2 em { color: var(--accent); font-style: italic; }
  .termin-header .muted { color: var(--text-secondary); line-height: 1.65; font-size: var(--fs-body); max-width: 44ch; margin-bottom: 1.5rem; }
  .termin-meta-row {
    display: flex; flex-direction: column; gap: 0.625rem;
    padding: 1.25rem;
    background: var(--bg-tertiary); border: 1px solid var(--hairline);
    border-left: 2px solid var(--accent);
  }
  .termin-meta-item {
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.8125rem; color: var(--text-secondary);
  }
  .termin-meta-item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

  .termin-form {
    background: var(--bg-tertiary);
    border: 1px solid var(--hairline-strong);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid; gap: 0;
  }
  .termin-form-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 0;
  }
  @media (min-width: 480px) {
    .termin-form-grid { grid-template-columns: 1fr 1fr; }
  }
  .termin-field {
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .termin-field:last-child { border-bottom: 0; }
  .termin-field-wide {
    grid-column: 1 / -1;
  }
  @media (min-width: 480px) {
    /* alternate fields fill both cols cleanly */
    .termin-form-grid .termin-field:not(.termin-field-wide):nth-child(odd of .termin-field:not(.termin-field-wide)) {
      border-right: 1px solid var(--hairline);
      padding-right: 1.25rem;
    }
    .termin-form-grid .termin-field:not(.termin-field-wide):nth-child(even of .termin-field:not(.termin-field-wide)) {
      padding-left: 1.25rem;
    }
  }
  .termin-label {
    display: block;
    font-family: var(--font-body); font-size: 0.6875rem;
    text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
    color: var(--text-muted); margin-bottom: 0.5rem;
  }
  .termin-required { color: var(--accent); }
  .termin-input,
  .termin-select {
    display: block; width: 100%;
    background: transparent; border: 0;
    font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary);
    padding: 0.375rem 0;
    line-height: 1.45;
    appearance: none; -webkit-appearance: none;
    border-radius: 0;
  }
  .termin-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23536270' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.25rem center;
    padding-right: 1.5rem;
    cursor: pointer;
  }
  .termin-input::placeholder { color: var(--text-muted); }
  .termin-input:focus, .termin-select:focus { outline: none; color: var(--text-primary); }
  .termin-field:focus-within {
    background: rgba(83,98,112,0.03);
    margin-inline: -0.75rem; padding-inline: 0.75rem;
  }
  .termin-form-footer {
    padding-top: 1.5rem;
    display: grid; gap: 1rem;
    border-top: 1px solid var(--hairline);
    margin-top: 0.5rem;
  }
  .termin-submit { justify-self: start; }
  .termin-note {
    font-size: var(--fs-small); color: var(--text-secondary);
    line-height: 1.55; max-width: 56ch;
  }
  .termin-note a { color: var(--accent); border-bottom: 1px solid currentColor; }

  /* ── Simple form (rezept, etc) ─────────────────────── */
  .simple-form-section { padding-block: clamp(3rem, 5vw, 4rem); }
  .simple-form-wrap {
    max-width: 680px;
    display: grid; gap: 2rem;
  }
  @media (min-width: 768px) {
    .simple-form-wrap { grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
  }
  .simple-form-wrap h2 {
    font-family: var(--font-display); font-size: var(--fs-h1);
    line-height: 1.05; margin-block: 0.375rem 0.875rem; max-width: 16ch;
  }
  .simple-form-wrap h2 em { color: var(--accent); font-style: italic; }
  .simple-form-wrap .muted { color: var(--text-secondary); line-height: 1.65; font-size: var(--fs-body); max-width: 44ch; }
  .simple-form {
    background: var(--bg-tertiary);
    border: 1px solid var(--hairline-strong);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    display: grid; gap: 0;
  }
  .simple-form .termin-field { padding: 0.875rem 0; border-bottom: 1px solid var(--hairline); }
  .simple-form .termin-field-last { border-bottom: 0; }
  .simple-form-foot {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
    padding-top: 1.25rem; border-top: 1px solid var(--hairline); margin-top: 0.25rem;
  }
  .termin-textarea {
    min-height: 72px; resize: vertical; line-height: 1.55;
  }

  /* ── Stats-strip on index: increase visual weight ────── */
  .stats-strip {
    background: var(--bg-tertiary);
    border: 1px solid var(--hairline);
    padding: 1.75rem;
    margin-top: 2rem;
  }
  .stat-item {
    padding-left: 0;
    border-left: 2px solid var(--accent);
    padding-left: 0.875rem;
  }

  /* ── Booking section accent line on patienten-info ─── */
  @media (max-width: 899px) {
    .termin-wrap { max-width: 680px; margin-inline: auto; }
  }

  /* ── Scroll-reveal (Intersection Observer driven) ───────── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }

  /* Round-4 reduced-motion overrides */
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-bg-photo { background-attachment: scroll; opacity: 0.10; }
    .status-strip .status-dot { animation: none !important; }
    .hero-text h1 em { animation: none !important; background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent); }
    .live-slots { animation: none !important; }
    .floater { animation: none !important; }
    .editor-signature svg.handwrite path { animation: none !important; stroke-dashoffset: 0; }
    /* Round-5 face-cards: respect reduced-motion */
    .face-portrait { transform: none !important; transition: none !important; }
    .face-card:hover .face-portrait { transform: none !important; }
  }

  /* Reduced-motion safety overrides ------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .hero-bg video { display: none !important; }
    .hero-bg img { animation: none !important; }
    .hero-signature svg.ekg path { animation: none !important; stroke-dashoffset: 0; }
    .live-dot { animation: none !important; }
    .hero-bg::after { background: linear-gradient(180deg, rgba(245,244,240,0.85), rgba(245,244,240,0.96)); }
    .journey-body { animation: none !important; }
    .journey-stop > summary .stop-toggle { transition: none !important; }
    .servicefinder label, .servicefinder input[type="radio"]:checked + label { transition: none !important; }
  }
}