@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400 700;
  font-optical-sizing:auto;
  font-display:swap;
  src:url("fonts/fraunces-italic.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 800;
  font-optical-sizing:auto;
  font-display:swap;
  src:url("fonts/fraunces.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/inter.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
     PHYSIOTHERAPIE AM STADTPARK
     Concept: "Der Weg zurück in Bewegung"
     A single teal recovery path threads the whole page and draws
     itself as the patient scrolls: Schmerzpunkt -> Alltag zurück.
     ============================================================ */

  :root {
    /* Brand palette (70% calm light / 20% clinical teal / 10% warm) */
    --primary:        #1F4E5F;
    --primary-900:    #10353F;
    --primary-800:    #123F4E;
    --secondary:      #2E7C86;
    --teal-ink:       #1C5460;   /* teal that passes AA as small text */
    --surface:        #F5FAFB;
    --surface-warm:   #FAF8F5;
    --surface-card:   #FFFFFF;
    --line:           #D8E8EA;
    --line-strong:    #BFDDE1;
    --text:           #0F172A;
    --muted:          #475569;
    --accent:         #C29B6B;   /* warm gold – lines & nodes only, never body text */
    --accent-soft:    #EBD8BE;
    --focus:          #0E7C93;

    --path:           #2E7C86;   /* the recovery line */
    --node:           #C29B6B;   /* journey nodes */

    --font-head: "Fraunces", Georgia, "Times New Roman", serif;   /* editorial display serif */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --shadow-soft: 0 30px 80px rgba(16, 53, 63, .12);
    --shadow-card: 0 16px 40px rgba(16, 53, 63, .09);
    --shadow-chip: 0 8px 22px rgba(16, 53, 63, .06);

    --r-xl: 28px;
    --r-lg: 20px;
    --r-md: 14px;
    --container: 1280px;
    --gutter: clamp(20px, 3vw, 32px);
    --section: clamp(74px, 8vw, 128px);
    --rail-w: 240px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  ::selection { background: var(--secondary); color: #fff; }
  section[id] { scroll-margin-top: 84px; }
  body {
    margin: 0;
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

  .wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

  /* ---------- Typography ---------- */
  h1, h2, h3 {
    font-family: var(--font-head);
    font-optical-sizing: auto;
    font-synthesis: none;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.08;
    margin: 0;
    color: var(--text);
  }
  /* !important guards the type scale against any late-injected CSS reset
     (e.g. Tailwind Preflight's h1{font-size:inherit}) — see head comment. */
  h1 { font-size: clamp(46px, 6.4vw, 82px) !important; font-weight: 600 !important; letter-spacing: -.021em; line-height: 1.02; }
  h2 { font-size: clamp(33px, 4.2vw, 54px) !important; font-weight: 600 !important; max-width: 18ch; letter-spacing: -.018em; }
  h3 { font-size: clamp(20px, 1.6vw, 25px) !important; font-weight: 600 !important; letter-spacing: -.01em; }
  .lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 60ch; }
  .muted { color: var(--muted); }

  /* Eyebrow + stage chip (echoes the recovery path nodes in every section) */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--teal-ink); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .14em;
  }
  .eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--accent); }
  .stage {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0;
    border-radius: 0;
    background: transparent; border: 0;
    box-shadow: none;
    font-family: var(--font-head);
    font-weight: 800; font-size: clamp(18px, 1.45vw, 23px); color: var(--primary-900);
    letter-spacing: -.015em;
    line-height: 1.12;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .stage b {
    display: inline;
    width: auto; height: auto;
    border-radius: 0; background: transparent; color: var(--teal-ink);
    font-family: var(--font-head); font-size: 1em; font-weight: 800;
    line-height: 1;
  }
  .stage .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 4px rgba(194,155,107,.18); transform: none; }
  .prehead { display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; margin-bottom: 16px; }
  .prehead .stage, .prehead .eyebrow { margin: 0; }
  .prehead .eyebrow { transform: translateY(1px); }

  .sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 54px); }
  .sec-head .lede { margin-top: 18px; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 11px;
    min-height: 54px; padding: 0 28px; border-radius: 14px; white-space: nowrap;
    border: 1px solid transparent; font-weight: 600; font-size: 15.5px; letter-spacing: -.005em;
    cursor: pointer; position: relative; isolation: isolate;
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.99); }
  .btn .arw {
    display: inline;
    width: auto; height: auto; margin-right: 0;
    border-radius: 0; font-size: 1em; line-height: 1;
    background: transparent !important;
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
  }
  .btn:hover .arw { transform: translateX(4px); }

  .btn-primary {
    color: #fff;
    background: var(--primary-900);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(16,53,63,.28), 0 12px 26px rgba(16,53,63,.24);
  }
  .btn-primary:hover {
    background: var(--primary-800);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 5px rgba(16,53,63,.30), 0 20px 42px rgba(16,53,63,.30);
  }

  .btn-ghost {
    color: var(--primary);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.64));
    border-color: var(--line-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,53,63,.05), 0 8px 20px rgba(16,53,63,.07);
  }
  .btn-ghost:hover { border-color: var(--secondary); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(16,53,63,.07), 0 14px 30px rgba(16,53,63,.10); }

  .btn-warm {
    color: var(--primary);
    background: linear-gradient(180deg, #FFFDF9, var(--surface-warm));
    border-color: var(--accent-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(16,53,63,.06);
  }
  .btn-warm:hover { border-color: var(--accent); }

  section { padding-block: var(--section); position: relative; }
  .bg-warm { background: var(--surface-warm); }
  .bg-tint { background: linear-gradient(180deg, var(--surface), #EDF6F7); }

  /* ============================================================
     SKIP LINK + UTILITY BAR + HEADER
     ============================================================ */
  .skip {
    position: fixed; left: 16px; top: 12px; z-index: 200;
    background: var(--primary); color: #fff; padding: 12px 18px;
    border-radius: 999px; font-weight: 700; transform: translateY(-160%);
    transition: transform .2s ease;
  }
  .skip:focus { transform: translateY(0); }

  .util { background: var(--primary-900); color: #DCEEF0; font-size: 13.5px; }
  .util .wrap { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .util-list { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
  .util-list span { display: inline-flex; align-items: center; gap: 8px; opacity: .92; }
  .util a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #EAF7F8; }
  .util a:hover { color: #fff; }

  header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(245,250,251,.82); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(216,232,234,.8);
    transition: box-shadow .25s ease, background .25s ease;
  }
  header.scrolled { box-shadow: 0 12px 30px rgba(15,23,42,.06); background: rgba(245,250,251,.94); }
  .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: clamp(18px,1.6vw,22px); color: var(--primary-900); letter-spacing: -.03em; white-space: nowrap; }
  .brand .mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 10px 22px rgba(16,53,63,.24); }
  .brand.brand-image { width: clamp(64px, 6vw, 86px); height: auto; display: block; flex: 0 0 auto; }
  .brand-logo { display: block; width: 100%; height: auto; aspect-ratio: 216 / 212; object-fit: contain; }
  .brand .mark { overflow: hidden; background: #071d36; }
  .brand .mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .brand .mark svg { width: 22px; height: 22px; }
  .menu { display: flex; align-items: center; gap: 28px; font-weight: 600; color: #12303A; }
  .menu a { position: relative; padding: 8px 0; }
  .menu a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--secondary); border-radius: 2px; transition: width .2s ease; }
  .menu a:hover::after, .menu a[aria-current="true"]::after { width: 100%; }
  .nav-cta { display: flex; align-items: center; gap: 14px; }

  /* mobile scroll-progress bar (the path, felt on small screens where the rail is hidden) */
  .topbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 150; background: linear-gradient(90deg, var(--secondary), var(--accent)); display: none; }

  /* ============================================================
     THE RECOVERY RAIL  (fixed left, desktop) – the signature device.
     A vertical guide path that fills as you scroll; each node is a
     stage of recovery and jumps you there. This IS the concept.
     ============================================================ */
  .rail { position: fixed; left: 20px; top: 0; bottom: 0; width: var(--rail-w); z-index: 90; pointer-events: none; display: none; }
  .rail .track, .rail .fill { position: absolute; left: 5px; width: 2px; border-radius: 2px; }
  .rail .track { top: 130px; bottom: 130px; background: linear-gradient(180deg, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); }
  .rail .fill { top: 130px; height: 0; background: linear-gradient(180deg, var(--secondary), var(--primary)); box-shadow: 0 0 14px rgba(46,124,134,.4); }
  .rail ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .rail-node {
    position: absolute; left: 0; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 12px;
    pointer-events: auto; padding: 4px 0;
  }
  .rail-node .pt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); transition: all .3s ease; position: relative; }
  .rail-node .lbl {
    font-size: 12.5px; font-weight: 700; color: var(--muted);
    white-space: nowrap; opacity: 0; transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
    background: rgba(255,255,255,.86); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(6px);
  }
  .rail-node .lbl b { color: var(--secondary); margin-right: 6px; font-family: var(--font-head); }
  .rail-node:hover .lbl, .rail-node:focus-visible .lbl { opacity: 1; transform: none; }
  .rail-node.reached .pt { border-color: var(--secondary); background: var(--secondary); }
  .rail-node.active .pt { border-color: var(--node); background: var(--node); box-shadow: 0 0 0 6px rgba(194,155,107,.22); transform: scale(1.15); }
  .rail-node.active .lbl { color: var(--primary); }
  .rail-node.hint .pt { border-color: var(--secondary); box-shadow: 0 0 0 6px rgba(46,124,134,.16); }

  /* ============================================================
     HERO — full-bleed immersive photo, editorial scrim
     ============================================================ */
  .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(600px, 84vh, 820px); background: var(--primary-900); }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 32%; }
  .hero-scrim { position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(96deg, rgba(7,31,39,.86) 0%, rgba(7,31,39,.60) 36%, rgba(7,31,39,.14) 64%, rgba(7,31,39,0) 82%),
      linear-gradient(0deg, rgba(7,31,39,.50), rgba(7,31,39,0) 46%); }
  .hero-inner { position: relative; z-index: 2; width: min(100% - 48px, var(--container)); margin-inline: auto; padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(36px, 4vw, 52px); }
  .hero-copy { max-width: 660px; }
  .hero-kicker { margin: 0 0 20px; font-size: 13px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  .hero h1 { max-width: 12.8em; color: #fff; font-size: clamp(44px, 5.4vw, 72px) !important; line-height: 1.05; letter-spacing: -.02em; }
  .hero h1 .soft { color: rgba(255,255,255,.60); font-weight: 500; }
  .hero h1 .mark-word { color: #E7C79A; font-style: italic; font-weight: 500; }
  .hero h1 .mark-word::after { display: none; }
  .hero p.lede { max-width: 48ch; margin: 20px 0 28px; color: rgba(255,255,255,.84); }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hero .btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.07); backdrop-filter: blur(6px); box-shadow: none; }
  .hero .btn-ghost:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.68); }
  .hero-note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }

  /* ============================================================
     TRUST — hairline overlay row inside the hero
     ============================================================ */
  .hero-trust { position: relative; z-index: 2; width: min(100% - 48px, var(--container)); margin-inline: auto; padding-bottom: 30px; }
  .hero-trust .trust-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.30); padding-top: 20px; }
  .hero-trust .trust-item { display: flex; align-items: center; gap: 11px; padding: 4px 20px; border-left: 1px solid rgba(255,255,255,.20); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: rgba(255,255,255,.92); }
  .hero-trust .trust-item:first-child { border-left: none; padding-left: 2px; }
  .hero-trust .trust-item .ic { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; color: #E7C79A; font-size: 17px; }
  .hero-cue { position: relative; z-index: 2; align-self: center; display: grid; place-items: center; width: 44px; height: 30px; margin-bottom: 10px; }
  .hero-cue-line { width: 1px; height: 20px; background: rgba(255,255,255,.45); position: relative; transition: background .25s ease; }
  .hero-cue-line::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 1.5px solid rgba(255,255,255,.70); border-bottom: 1.5px solid rgba(255,255,255,.70); transform: translateX(-50%) rotate(45deg); transition: border-color .25s ease; }
  .hero-cue:hover .hero-cue-line { background: #E7C79A; }
  .hero-cue:hover .hero-cue-line::after { border-color: #E7C79A; }

  /* ============================================================
     BESCHWERDEN  (problem-first) – symptom cards link to services
     ============================================================ */
  /* --- Anliegen als redaktioneller Index: nummerierte Zeilen statt Kartenraster --- */
  .symptom-grid { display: block; border-top: 1px solid var(--line-strong); }
  .symptom {
    display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 30px;
    padding: 27px 6px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
    transition: background .3s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
  }
  .symptom:hover, .symptom:focus-visible { background: linear-gradient(90deg, rgba(46,124,134,.07), rgba(46,124,134,0) 72%); padding-left: 24px; }
  .symptom:hover .zone i, .symptom:focus-visible .zone i { transform: scale(1.45); background: var(--accent); }
  .symptom .snum { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--accent); letter-spacing: .03em; }
  .symptom .sbody { display: block; min-width: 0; }
  .symptom .zone { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal-ink); }
  .symptom .zone i { width: 8px; height: 8px; border-radius: 50%; background: var(--node); font-style: normal; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease; }
  .symptom strong { display: block; font-family: var(--font-head); font-size: clamp(20px, 2.1vw, 27px); margin: 6px 0 4px; letter-spacing: -.02em; }
  .symptom p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
  .symptom .link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--primary); white-space: nowrap; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease; }
  .symptom:hover .link, .symptom:focus-visible .link { transform: translateX(4px); color: var(--primary-900); }
  @media (prefers-reduced-motion: reduce) { .symptom:hover, .symptom:focus-visible { padding-left: 6px; } .symptom:hover .zone i, .symptom:focus-visible .zone i, .symptom:hover .link, .symptom:focus-visible .link, .symptom:hover .link .arw { transform: none; } }
  .symptom .link .arw { transition: transform .2s ease; }
  .symptom:hover .link .arw { transform: translateX(4px); }
  @media (max-width: 900px) { .symptom { grid-template-columns: 42px minmax(0,1fr); gap: 18px; padding: 22px 4px; } .symptom .link { display: none; } }

  /* ============================================================
     LEISTUNGEN  (services, bento, connected to problems)
     ============================================================ */
  .bento { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: minmax(390px,auto); align-items: stretch; gap: 20px; }
  .svc { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface-card); box-shadow: var(--shadow-card); padding: 28px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; scroll-margin-top: 110px; }
  .svc-media { width: calc(100% + 56px); height: auto; max-width: none; aspect-ratio: 4 / 3; margin: -28px -28px 0; object-fit: cover; object-position: center top; border-bottom: 1px solid var(--line); }
  .svc.big .svc-media { height: auto; }
  .svc::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(46,124,134,.10), transparent 66%); pointer-events: none; }
  /* F213 · Hover lift shadow: selected service card state */
  .svc:hover, .svc:has(.more:focus-visible) { transform: translateY(-8px) scale(1.012); z-index: 2; border-color: var(--secondary); box-shadow: 0 30px 64px rgba(16,53,63,.16), 0 0 0 3px rgba(46,124,134,.14); }
  .svc:hover .svc-media, .svc:has(.more:focus-visible) .svc-media { transform: scale(1.035); }
  .svc:hover .svc-ic, .svc:has(.more:focus-visible) .svc-ic { background: var(--primary); color: #fff; transform: rotate(-3deg) scale(1.06); }
  .svc:hover .more, .svc:has(.more:focus-visible) .more { transform: translateX(4px); color: var(--primary-900); }
  .svc-media, .svc .svc-ic, .svc .more { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease; }
  @media (prefers-reduced-motion: reduce) { .svc:hover, .svc:has(.more:focus-visible) { transform: none; } .svc:hover .svc-media, .svc:has(.more:focus-visible) .svc-media, .svc:hover .svc-ic, .svc:has(.more:focus-visible) .svc-ic, .svc:hover .more, .svc:has(.more:focus-visible) .more { transform: none; } }
  .svc.pulse { animation: pulse 1.6s ease; border-color: var(--node); }
  @keyframes pulse { 0%,100% { box-shadow: var(--shadow-card);} 18% { box-shadow: 0 0 0 4px rgba(194,155,107,.35), 0 30px 64px rgba(16,53,63,.16);} }
  .svc.linked { border-color: var(--node); background: linear-gradient(180deg,#fff,#FCF6EC); }
  .svc .svc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #E7F4F5; color: var(--primary-900); font-weight: 800; }
  .svc.big { grid-column: span 1; grid-row: span 1; background: var(--surface-card); }
  .svc.wide, .svc.third { grid-column: span 1; }
  .svc .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 11px; background: #F3F0EA; border: 1px solid var(--accent-soft); color: #6E5836; font-weight: 700; font-size: 12px; }
  .svc h3 { margin-top: 16px; }
  .svc p { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 46ch; }
  .svc .for { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
  .svc .for span { font-size: 12px; font-weight: 600; color: var(--teal-ink); background: #EAF4F5; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
  .svc .more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 14px; color: var(--primary); }

  /* ============================================================
     ABLAUF  (sticky scrollytelling recovery path)
     Left visual stays pinned; steps scroll past and drive it.
     ============================================================ */
  .process { position: relative; }
  .scrolly { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px,5vw,64px); align-items: start; margin-top: clamp(20px,3vw,36px); }
  .scrolly-visual { position: sticky; top: 92px; align-self: start; }
  .plan { border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(160deg,#FFFFFF,#F1FAFB); box-shadow: var(--shadow-soft); padding: 26px; }
  .plan-top { display: flex; align-items: center; justify-content: space-between; }
  .plan-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--teal-ink); }
  .plan-num { font-family: var(--font-head); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--primary); }
  .plan-num::after { content: "/05"; font-size: 15px; font-weight: 500; letter-spacing: .05em; color: var(--muted); margin-left: 6px; }
  .plan-body { display: grid; grid-template-columns: 34px 1fr; gap: 22px; align-items: center; margin: 22px 0 26px; }
  .plan-path { position: relative; height: 220px; }
  .pp-track { position: absolute; left: 14px; top: 6px; width: 4px; height: 204px; border-radius: 3px; background: var(--line-strong); }
  .pp-fill { position: absolute; left: 14px; top: 6px; width: 4px; height: 0; border-radius: 3px; background: linear-gradient(180deg,var(--secondary),var(--primary)); transition: height .5s cubic-bezier(.5,.1,.2,1); }
  .plan-path ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .pp-node { position: absolute; left: 6px; top: calc(-4px + var(--i) * 51px); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease; }
  .pp-node.done { background: var(--secondary); border-color: var(--secondary); }
  .pp-node.active { background: var(--node); border-color: var(--node); box-shadow: 0 0 0 6px rgba(194,155,107,.3); transform: scale(1.22); }
  .plan-text strong { display: block; font-family: var(--font-head); font-size: 22px; letter-spacing: -.02em; }
  .plan-text span { display: block; color: var(--muted); margin-top: 8px; font-size: 15px; }
  .plan .btn { width: 100%; }

  .scrolly-steps { margin: 0; padding: 0; list-style: none; }
  .pstep { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; min-height: clamp(160px, 22vh, 220px); padding: 16px; border-radius: var(--r-lg); border: 1px solid transparent; transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }
  .pstep.is-active { background: #fff; border-color: var(--line); box-shadow: var(--shadow-card); }
  .pstep-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal-ink); }
  .pstep h3 { margin: 7px 0 5px; }
  .pstep p { margin: 0; color: var(--muted); max-width: 52ch; }
  .process-cta-m { display: none; }

  /* ============================================================
     TEAM
     ============================================================ */
  .team-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px,4vw,54px); align-items: start; }
  .team-aside { position: sticky; top: 110px; }
  .foci { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
  .foci span { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 13px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: #143943; }
  .people { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
  .person { border-radius: var(--r-xl); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
  .person:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(16,53,63,.13); }
  .portrait { height: 200px; position: relative; overflow: hidden; background: radial-gradient(80% 70% at 72% 22%, rgba(194,155,107,.28), transparent 42%), linear-gradient(140deg, #DCEBEC, #FFFFFF); }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .portrait .init { position: absolute; left: 22px; bottom: 18px; width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 28px; color: #fff; background: var(--primary-900); box-shadow: 0 16px 38px rgba(16,53,63,.24); }
  .person .body { padding: 22px 22px 24px; }
  .person h3 { font-size: 20px !important; }
  .person p { margin: 8px 0 14px; color: var(--muted); font-size: 14.5px; }
  .person .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--teal-ink); background: #EAF4F5; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }

  /* ============================================================
     PRAXIS & UMGEBUNG  (local)
     ============================================================ */
  .place-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,52px); align-items: center; }
  .place-visual { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4/3; min-height: 320px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); background: linear-gradient(160deg, #EFF7F8, #FFFFFF 55%, #FBF5EC); }
  .place-visual > svg, .place-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .place-visual > img { object-fit: cover; }
  .place-facts { display: grid; gap: 14px; margin-top: 26px; }
  .fact { display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-chip); }
  .fact .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #E7F4F5; color: var(--primary); }
  .fact strong { display: block; font-family: var(--font-head); font-size: 15px; }
  .fact span { color: var(--muted); font-size: 14px; }

  /* ============================================================
     FAQ
     ============================================================ */
  .faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px,4vw,54px); align-items: start; }
  .faq-list { display: grid; gap: 14px; }
  details.faq { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-chip); overflow: hidden; }
  details.faq summary { list-style: none; cursor: pointer; padding: 24px 26px; font-family: var(--font-head); font-weight: 750; font-size: clamp(20px, 1.55vw, 23px); line-height: 1.22; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary .pm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #EAF4F5; color: var(--secondary); font-size: 24px; transition: transform .25s ease, background .25s ease; }
  details.faq[open] summary .pm { transform: rotate(45deg); background: var(--secondary); color: #fff; }
  details.faq .ans { padding: 0 26px 26px; color: var(--muted); font-size: 17px; line-height: 1.7; }
  details.faq[open] .ans { animation: faqIn .32s ease; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .faq-kicker { font-size: clamp(17px, 1.3vw, 21px); letter-spacing: .11em; }


  /* ============================================================
     KONTAKT
     ============================================================ */
  .contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,48px); align-items: start; }
  .contact-grid > *, .form-card, .contact-side, .info-card, .info-row, .info-row > div { min-width: 0; max-width: 100%; }
  .form-card, .contact-side { width: 100%; }
  .form-card { padding: 30px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
  .form-card h2 { font-size: clamp(26px,2.4vw,34px) !important; }
  form { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 22px; }
  .field { display: grid; gap: 7px; }
  .field.full { grid-column: 1 / -1; }
  label { font-weight: 700; font-size: 13.5px; color: #143943; }
  input, select, textarea { width: 100%; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 15px; background: #FAFDFD; }
  input:focus, select:focus, textarea:focus { border-color: var(--secondary); outline: none; box-shadow: 0 0 0 3px rgba(46,124,134,.16); }
  textarea { min-height: 116px; resize: vertical; }
  fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
  fieldset.field legend { font-weight: 700; font-size: 13.5px; color: #143943; padding: 0; margin-bottom: 7px; }
  .pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .pills label { position: relative; cursor: pointer; }
  .pills input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
  .pills .pl { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: #FAFDFD; font-weight: 600; font-size: 14.5px; color: #143943; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
  .pills input:checked + .pl { border-color: var(--secondary); background: #E7F4F5; box-shadow: 0 0 0 3px rgba(46,124,134,.14); }
  .pills input:focus-visible + .pl { outline: 3px solid var(--focus); outline-offset: 2px; }
  .form-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin: -2px 0 0; }
  .contact-side { display: grid; gap: 18px; }
  .info-card { padding: 26px; border-radius: var(--r-xl); background: linear-gradient(180deg,#fff,#F2FAFB); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: grid; gap: 16px; }
  .info-row { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
  .info-row .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #E7F4F5; color: var(--primary); }
  .info-row strong { display: block; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
  .info-row span { color: var(--muted); font-size: 14px; }
  .map { min-height: 220px; border-radius: var(--r-xl); border: 1px solid var(--line-strong); display: grid; place-items: center; text-align: center; color: var(--primary); font-weight: 700; position: relative; overflow: hidden; background:#F6FBFB; }
  .map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.72) contrast(.96); }
  .map-overlay { position:relative; z-index:1; max-width:320px; padding:14px 18px; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 12px 26px rgba(16,53,63,.14); }
  .map-overlay span { display:block; font-weight:500; color:var(--muted); font-size:13.5px; margin-top:4px; }.map-overlay a{display:block;margin-top:10px;color:var(--secondary);font-size:12px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}

  /* ============================================================
     FOOTER
     ============================================================ */
  footer { background: var(--primary-900); color: #DCEEF0; padding: 72px 0 30px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: clamp(28px,4vw,56px); margin-bottom: 50px; }
  .foot-brand { font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.03em; color: #fff; }
  .foot-brand + p { margin-top: 14px; color: rgba(220,238,240,.8); max-width: 34ch; }
  .foot-col h3 { color: #fff; font-size: 15px !important; letter-spacing: .02em; margin-bottom: 14px; }
  .foot-col a, .foot-col p { display: block; color: rgba(220,238,240,.78); margin: 0 0 9px; }
  .foot-col a:hover { color: #fff; }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: rgba(220,238,240,.68); font-size: 13.5px; }
  /* numerals & monograms stay in the grotesk — serif figures read oddly at chip size */
  .portrait .init {
    font-family: var(--font-body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
  }

  /* ============================================================
     MOTION – reveal on enter (gated by .js so no-JS shows all)
     ============================================================ */
  /* --- Sektionsübergänge: fließende Pfad-Wellen statt harter Bandkanten --- */
  .seam { position: absolute; top: -95px; left: 0; width: 100%; height: 96px; display: block; pointer-events: none; }
  @media (max-width: 640px) { .seam { top: -57px; height: 58px; } }
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .06s; }
  .js .reveal.d2 { transition-delay: .12s; }
  .js .reveal.d3 { transition-delay: .18s; }
  .js .reveal.d4 { transition-delay: .24s; }
  .js .reveal.d5 { transition-delay: .30s; }
  /* kinetic H1 – words rise on load (JS-gated) */
  .js .kin .hw { display: inline-block; opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .js .kin.in .hw { opacity: 1; transform: none; }
  .js .kin .hw:nth-child(1) { transition-delay: .04s; }
  .js .kin .hw:nth-child(2) { transition-delay: .12s; }
  .js .kin .hw:nth-child(3) { transition-delay: .20s; }
  .js .kin .hw:nth-child(4) { transition-delay: .28s; }
  .js .kin .hw:nth-child(5) { transition-delay: .36s; }
  /* hero path draw */
  .js .draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .draw-path.drawn { transition: stroke-dashoffset 1.6s ease; stroke-dashoffset: 0; }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (min-width: 1400px) { .rail { display: block; } }
  @media (max-width: 1399px) { .topbar { display: block; } }
  @media (max-width: 1080px) {
    .hero-copy { max-width: 600px; }
    .hero-trust .trust-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .hero-trust .trust-item { padding: 10px 16px; }
    .hero-trust .trust-item:nth-child(3n+1) { border-left: none; padding-left: 2px; }
    .hero-trust .trust-item:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.20); }
    .bento { grid-template-columns: repeat(2,1fr); }
    .svc.big, .svc.wide, .svc.third { grid-column: span 1; grid-row: auto; }
    .team-grid, .faq-grid, .contact-grid, .place-grid { grid-template-columns: 1fr; }
    .team-aside { position: static; }
    .scrolly { grid-template-columns: 1fr; }
    .scrolly-visual { display: none; }
    .pstep { min-height: auto; }
    .process-cta-m { display: flex; justify-content: center; margin-top: 8px; }
    /* min-height would transfer through aspect-ratio into a >container min-width */
    .place-visual { order: -1; min-height: 0; width: 100%; }
    .people { grid-template-columns: repeat(2,1fr); }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .menu, .util, .nav-cta .btn-ghost, .brand-suffix { display: none; }
    .brand { min-width: 0; flex: 1 1 auto; font-size: 17px; gap: 10px; }
    .brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .brand .mark { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; }
    .nav { min-width: 0; gap: 12px; }
    .nav-cta { min-width: 0; flex: 0 0 auto; }
    .btn { padding: 0 20px; }
    .nav-cta .btn-primary { padding: 0 16px; font-size: 14.5px; min-height: 46px; }
    .contact-side .hero-cta { flex-wrap: wrap; }
    .contact-side .hero-cta .btn { flex: 1 1 130px; min-width: 0; padding-inline: 14px; }
    /* minmax(0,1fr): min-content of long labels must not blow the grid out */
    .hero-trust .trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero-trust .trust-item:nth-child(n) { border-left: 1px solid rgba(255,255,255,.20); padding: 9px 12px; font-size: 12.5px; }
    .hero-trust .trust-item:nth-child(odd) { border-left: none; padding-left: 2px; }
    .hero-trust .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.20); }
    .bento, .people, .form-card form, .foot-grid { grid-template-columns: 1fr; }
    form { grid-template-columns: 1fr; }
    .svc.big, .svc.wide, .svc.third { grid-column: span 1; }
    .hero { min-height: 560px; }
    .hero-scrim { background: linear-gradient(180deg, rgba(7,31,39,.48) 0%, rgba(7,31,39,.86) 72%); }
    .hero h1 { font-size: clamp(34px, 9.6vw, 46px) !important; }
    h1 { font-size: clamp(38px,10vw,52px) !important; }
  }

  @media (max-width: 420px) {
    .wrap.nav { width: min(100% - 20px, var(--container)); }
    .nav { gap: 8px; }
    .brand { font-size: 15px; gap: 8px; }
    .brand .mark { width: 34px; height: 34px; }
    .nav-cta .btn-primary { padding-inline: 12px; font-size: 13.5px; min-height: 44px; }
    .nav-cta .btn-primary .arw { display: none; }
    .form-card, .info-card { padding: 22px 18px; }
    .info-row { grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
    .info-row .ic { width: 36px; height: 36px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    .js .kin .hw { opacity: 1 !important; transform: none !important; }
    .js .draw-path { stroke-dashoffset: 0 !important; }
  }