/* =========================================================
   FONTS
   ========================================================= */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Abril Text";
  src: url("../assets/fonts/Abril_Text_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Abril Text";
  src: url("../assets/fonts/Abril_Text_Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --color-primary: #312241;
  --color-secondary: #E8E1F1;
  --color-accent: #F6C861;
  --color-white: #FFFFFF;

  --font-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Abril Text", "Times New Roman", Georgia, serif;

  /* Type scale. Fluid via clamp(): each step interpolates between its
     360px-viewport size and its full desktop size (reached ~1280px), so
     headings scale smoothly instead of jumping at breakpoints. */
  --fs-title: clamp(40px, 3.5vw + 27px, 72px);     /* Hero headline (Geist Bold) */
  --fs-subline: 18px;                              /* Small label above headlines (Geist Regular) */
  --fs-hero-text: clamp(22px, 1.5vw + 17px, 36px); /* Mission paragraph (Abril Text) */
  --fs-h1: clamp(34px, 2.6vw + 27px, 60px);        /* Abril Text */
  --fs-h2: clamp(24px, 0.65vw + 22px, 30px);       /* Abril Text */
  --fs-h3: clamp(20px, 0.45vw + 18px, 24px);       /* Abril Text */
  --fs-body: 18px;                                 /* Geist Light */
  --fs-small: 14px;

  --max-width: 1280px;
  --gutter: 96px;
  --gutter-sm: 24px;

  --radius: 8px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.2,.7,.2,1);
  /* Stronger exponential curves for entrances/reveals — the built-in
     `ease-out` keyword is too weak to read as intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* =========================================================
   RESET
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
html {
  /* `clip` (not `hidden`!) also at the root: stops the wide decorative
     .svg-path from making the page horizontally scrollable on phones,
     without creating a scroll container that would break position: sticky. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Dark canvas so the macOS elastic overscroll past the footer blends with
     the dark footer instead of flashing the white page background. */
  background: var(--color-primary);
}
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-primary);
  background: var(--color-white);
  overflow-x: clip;
  /* Establish a stacking context on body so the decorative .svg-path
     (z-index: -1) paints above the white page background but behind the
     in-flow section content. Without this, the path floats up to the root
     stacking context and renders beneath body's opaque background — invisible. */
  position: relative;
  z-index: 0;
}
img, svg { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

/* Keyboard focus: a clear ring that adapts to its surface via currentColor
   (purple on light sections, white/yellow text colors on dark ones). */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter-sm);
}

.section {
  position: relative;
  padding: 120px 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-subline);
  color: var(--color-primary);
  letter-spacing: 0;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow--light { color: var(--color-white); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .16s var(--ease-out);
}
/* Press feedback: the button visibly responds to the tap itself. */
.btn:active { transform: scale(0.97); }

.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.btn--ghost-light {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Hover styles only on devices that actually hover — on touch, a tap would
   otherwise leave the button stuck in its inverted state. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-primary); color: var(--color-white); }
  .btn--accent:hover {
    background: #efb840;
    border-color: #efb840;
    color: var(--color-primary);
  }
  .btn--ghost-light:hover {
    background: var(--color-white);
    color: var(--color-primary);
  }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 36px 0;
  background: var(--color-white);
  transition: transform .35s var(--ease);
  will-change: transform;
}
/* JS toggles `.is-hidden` when scrolling down past the top; removing the
   class on scroll-up slides the bar back in. translateY (not opacity)
   keeps the motion smooth even when paint-blending against dark sections. */
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo svg,
.site-logo img {
  width: 64px;
  height: auto;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}
.site-nav a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary);
  transition: opacity .2s var(--ease);
}
.site-nav a:hover { opacity: .7; }
.site-nav a.is-current { font-weight: 700; }

/* =========================================================
   MOBILE NAV — hamburger + full-screen drawer (≤ 720px)
   ========================================================= */
/* Two-bar toggle that morphs into an X. Hidden on desktop. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  margin-right: -10px;     /* optically aligns the bars with the container edge */
  color: var(--color-primary);
  transition: color .25s var(--ease);
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .3s var(--ease-out);
}
.menu-open .nav-toggle__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-open .nav-toggle__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Full-screen drawer in the brand purple — color as identity. It sits below
   the fixed header (z-index 9 < 10), which stays visible and inverts. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px var(--gutter-sm) 40px;
  background: var(--color-primary);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
}
.menu-open .nav-drawer {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s var(--ease-out);
}
.nav-drawer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.nav-drawer__links a {
  font-family: var(--font-serif);
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.25;
  color: var(--color-white);
  padding: 4px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.menu-open .nav-drawer__links a {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .45s var(--ease-out) calc(var(--i, 0) * 60ms + 80ms),
    transform .45s var(--ease-out) calc(var(--i, 0) * 60ms + 80ms);
}
.nav-drawer__links a em {
  font-style: italic;
  /* Opaque band: translucent yellow turns olive on the purple drawer. */
  background-image: linear-gradient(transparent 72%, var(--color-accent) 72%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
}
.nav-drawer__foot {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.menu-open .nav-drawer__foot {
  opacity: 1;
  transition: opacity .5s var(--ease-out) .35s;
}
.nav-drawer__foot a { color: var(--color-white); }

/* While the drawer is open: lock page scroll, invert the header chrome so
   the white bar doesn't sit on the purple drawer. */
html.menu-open { overflow: hidden; }
.menu-open .site-header { background: transparent; }
.menu-open .site-logo img { filter: brightness(0) invert(1); }
.menu-open .nav-toggle { color: var(--color-white); }
.menu-open .site-nav .btn {
  border-color: var(--color-white);
  color: var(--color-white);
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-drawer { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .menu-open .nav-drawer,
  .nav-drawer__links a,
  .menu-open .nav-drawer__links a,
  .nav-drawer__foot,
  .menu-open .nav-drawer__foot {
    transition: opacity .15s ease;
    transform: none;
  }
}

/* =========================================================
   1. HERO
   ========================================================= */
/* Hero fills the viewport — a strong full-screen intro pairing the
   illustration with the headline. The user scrolls to reach mission. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 136px;   /* clears the fixed 136px header */
  padding-bottom: 60px;
}
.hero .container {
  width: 100%;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}
/* Square illustration, centered within the left column. */
.hero__image {
  width: 80%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.hero__image-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}
/* =========================================================
   2. MISSION
   ========================================================= */
.mission {
  padding: 120px 0 160px;
  position: relative;
}
.mission .container {
  max-width: var(--max-width);
}
.mission__inner {
  /* Block-centered horizontally below the hero (video + title row). */
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
/* Eyebrow is inline-flex, so it centers as a unit (line + label) when
   the surrounding text-align is center. */
.mission__inner .eyebrow {
  justify-content: center;
}
.mission__text {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: var(--fs-hero-text);
  line-height: 1.35;
  color: var(--color-primary);
}
.mission__text em {
  font-style: italic;
  background-image: linear-gradient(transparent 55%, rgba(246, 200, 97, .65) 55%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Word-by-word reveal + drawn yellow highlight.
   JS wraps each word in .word and adds `.is-split` to the paragraph; an
   IntersectionObserver then adds `.is-on` once the mission enters the
   viewport. Word fades cascade via --word-index; the yellow line begins
   drawing only after the words have settled. `box-decoration-break: clone`
   lets each line fragment of the em phrase draw independently. */
.mission__text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  transition-delay: calc(var(--word-index, 0) * 40ms);
}
.mission__text.is-on .word {
  opacity: 1;
  transform: translateY(0);
}
.mission__text.is-split em {
  background-size: 0% 100%;
  transition: background-size 1s var(--ease-out) 1.2s;
}
.mission__text.is-on em {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .mission__text .word {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mission__text.is-split em {
    background-size: 100% 100%;
    transition: none;
  }
}

/* =========================================================
   3. USP
   ========================================================= */
.usp {
  padding: 60px 0 120px;
  position: relative;
}
.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px;
}
.usp__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.usp__col .eyebrow {
  /* Background gradient drawn via background-image (not the shorthand) so
     background-size can be animated independently. The 55% stop pushes the
     yellow band higher into the letterforms — it reads as overlapping the
     bottom of the sub-heading text rather than sitting under the descenders. */
  background-image: linear-gradient(transparent 55%, rgba(246, 200, 97, .65) 55%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  align-self: flex-start;
  padding: 0 4px;
}
.usp__col .eyebrow::before { display: none; }
.usp__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-primary);
}
.usp__title em { font-style: italic; }
.usp__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-primary);
  max-width: 36ch;
}

/* USP reveal animation — JS opts each column in by adding `.is-anim-ready`
   (which sets the hidden start state) and later `.is-on` (which fires the
   transition). The columns stagger via --col-index; the eyebrow's yellow
   line draws after the column text has finished moving up.
   `transition` only applies once `.is-armed` joins `.is-anim-ready` (added
   by JS one layout flush later): if the value change and the transition
   property both landed in the same class add, Chrome plays it immediately,
   visibly fading the column from visible to hidden on page load before any
   scroll ever happens — see setupUspReveal in js/main.js. */
.usp__col.is-anim-ready {
  opacity: 0;
  transform: translateY(16px);
}
.usp__col.is-anim-ready.is-armed {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--col-index, 0) * 100ms);
}
.usp__col.is-anim-ready .eyebrow {
  background-size: 0% 100%;
}
.usp__col.is-anim-ready.is-armed .eyebrow {
  transition: background-size .7s var(--ease-out);
  transition-delay: calc(var(--col-index, 0) * 100ms + 500ms);
}
.usp__col.is-anim-ready.is-on {
  opacity: 1;
  transform: translateY(0);
}
.usp__col.is-anim-ready.is-on .eyebrow {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .usp__col.is-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .usp__col.is-anim-ready .eyebrow {
    background-size: 100% 100%;
    transition: none;
  }
}

/* =========================================================
   4. CURRENT SITUATION (Dark)
   ========================================================= */
.situation {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 120px 0;
  position: relative;
}
.situation .eyebrow {
  color: var(--color-white);
}
.situation .eyebrow::before { background: var(--color-white); }
.situation__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.stat__value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 1.5vw + 29px, 48px);
  line-height: 1;
  color: var(--color-white);
  margin-bottom: 12px;
  /* Tabular numbers keep widths stable during the count-up animation. */
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-white);
  margin-bottom: 6px;
}
.stat__note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}

/* =========================================================
   5. VISION / SERVICES
   ========================================================= */
.vision {
  padding: 120px 0 80px;
  position: relative;
}
.vision__head {
  max-width: 1000px;
  margin-bottom: 72px;
}
.vision__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--color-primary);
  margin-top: 24px;
}
.vision__title em {
  font-style: italic;
}
/* The highlighted phrase uses the shared .mark / .mark--draw component
   (drawn in by setupReveal), same as every subpage heading. */
.vision__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  margin-top: 64px;
}
.vision__tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 120px;
  align-self: start;
}
.vision__tab {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: rgba(49, 34, 65, .72);
  padding: 4px 6px;
  position: relative;
  background-image: linear-gradient(transparent 65%, rgba(246, 200, 97, .85) 65%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: color .2s var(--ease), background-size .5s var(--ease-out);
}
.vision__tab:hover { color: var(--color-primary); }
.vision__tab.is-active {
  color: var(--color-primary);
  font-weight: 700;
  background-size: 100% 100%;
}

.vision__cards-stage {
  min-width: 0;
}
.vision__cards-set {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-content: start;
}
.vision__cards-set + .vision__cards-set {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(49, 34, 65, .1);
}
.vision__card {
  background: transparent;
  border: 1px solid rgba(49, 34, 65, .22);
  padding: 20px 22px 22px;
  border-radius: var(--radius);
}
/* Content toggle for services not (yet) offered — add data-status="planned"
   to a .vision__card in leistungen.html to hide it; delete the attribute to
   show it again. See the comment at the top of that file's Leistungen
   section, and DEPLOYMENT.md, for the full how-to. */
.vision__card[data-status="planned"] { display: none; }
/* Reveal animation: card scales up from a slightly inward state.
   JS adds is-anim-ready at load and is-on when the card set enters view.
   --card-delay is set per-card to stagger the reveal left-to-right, top-to-bottom.
   `transition` is gated behind `.is-armed` (added by JS a layout flush after
   is-anim-ready) so the hidden-state value change doesn't land in the same
   style recalc as the transition property — otherwise Chrome plays it
   immediately, visibly fading every card out on page load before any
   scroll. See setupVision in js/main.js. */
.vision__card.is-anim-ready {
  opacity: 0;
  transform: scale(0.93) translateY(10px);
}
.vision__card.is-anim-ready.is-armed {
  transition: opacity .5s var(--ease-out), transform .55s cubic-bezier(.2,.9,.3,1);
  transition-delay: var(--card-delay, 0ms);
}
.vision__card.is-anim-ready.is-on {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .vision__card.is-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.vision__card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin-bottom: 10px;
}
.vision__card p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
}

/* =========================================================
   6. PROCESS
   ========================================================= */
.process {
  padding: 100px 0 120px;
  position: relative;
  /* Deliberately transparent (not just unset) — the decorative yellow
     .svg-path snake is now bounded to draw all the way through this
     section (see setupStrokePath in js/main.js) and needs to show through
     behind the step text rather than being painted over. */
  background: transparent;
}
.process__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
}
.process__steps {
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
  padding-left: 24px;
}
/* Vertical line driven by the JS-managed --line-progress CSS variable.
   No CSS transition — JS sets this on every scroll frame for a perfectly
   scroll-locked draw effect. */
.process__steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(49, 34, 65, .35);
  transform-origin: top center;
  transform: scaleY(var(--line-progress, 0));
}
.step {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  /* Once the initial fade-in is complete the JS swaps this transition for
     a short linear one and starts driving step opacity by distance from
     the viewport center (the "spotlight" effect). */
}
/* Each step is revealed individually by JS as the line reaches it. */
.step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.step::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-white);
  border-radius: 50%;
}
.step__title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.step__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-primary);
  max-width: 60ch;
}
.step__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.step__actions .btn { padding: 10px 18px; font-size: 14px; }

/* =========================================================
   7. THERAPISTS (Yellow)
   ========================================================= */
.therapists {
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.therapists__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px;
}
.therapists__left {
  display: flex;
  flex-direction: column;
}
.therapists__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin-top: 24px;
}
.therapists__title em { font-style: italic; }
.therapists__text {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  max-width: 50ch;
}
.therapists__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.therapists__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-self: stretch;
}
.therapists__card {
  background: none;
  border: none;
  padding: 24px 0;
}
.therapists__card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: var(--icon-delay, 0ms);
}
.therapists__card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.therapists__card-icon.is-on {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .therapists__card-icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.therapists__card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.therapists__card p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
}

/* =========================================================
   8. FAQ
   ========================================================= */
.faq {
  padding: 120px 0;
  position: relative;
}
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 80px;
  align-items: start;
}
.faq__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin-top: 24px;
}
.faq__lead {
  margin-top: 36px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  max-width: 40ch;
}
.faq__cta { margin-top: 32px; }
.faq__list { margin-top: 0; }
.faq__item {
  border-bottom: 1px solid rgba(49, 34, 65, .18);
}
.faq__item:first-child { border-top: 1px solid rgba(49, 34, 65, .18); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 8px;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  text-align: left;
  color: var(--color-primary);
}
.faq__q-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
}
.faq__q-icon::before,
.faq__q-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-primary);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__q-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__q-icon::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__q-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
/* grid-template-rows: 0fr → 1fr animates to the exact content height with no
   capped-max-height artefact.  The inner element needs overflow:hidden so the
   content is clipped while the row is smaller than its natural size. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a-inner {
  overflow: hidden;
  padding: 0 8px 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-primary);
  max-width: 70ch;
  /* Animate the bottom padding so the spacing opens/closes in step with the text. */
  transition: padding-bottom .38s cubic-bezier(.4,0,.2,1);
}
.faq__item.is-open .faq__a-inner {
  padding-bottom: 24px;
}

/* =========================================================
   9. CTA
   ========================================================= */
.cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 120px 0;
}
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.cta__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--color-white);
}
.cta__title em { font-style: italic; }
.cta__text {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-white);
  max-width: 50ch;
}
.cta__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.cta__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 32px;
  padding-top: 80px;
}
.cta__info-item .label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--color-accent);
  margin-bottom: 10px;
  text-transform: none;
}
.cta__info-item p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-white);
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 80px 0 64px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .container {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 64px;
  align-items: start;
}
.footer__brand img,
.footer__brand svg {
  width: 90px;
  height: auto;
  margin-bottom: 16px;
}
.footer__brand .tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-white);
}
.footer__brand .copy {
  margin-top: 56px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.footer__col h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  margin-bottom: 24px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.footer__col a,
.footer__col button {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-white);
  opacity: .9;
  transition: opacity .2s var(--ease);
}
.footer__col a:hover,
.footer__col button:hover { opacity: .6; }
/* Reset native button chrome so it reads identically to the <a> links beside it. */
.footer__col button {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.footer__social {
  display: flex;
  gap: 18px;
}
.footer__social a {
  width: 22px;
  height: 22px;
  color: var(--color-white);
  opacity: .9;
  transition: opacity .2s var(--ease);
}
.footer__social a:hover { opacity: .6; }
.footer__social svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  /* Hero collapses to a single column: headline first, then a smaller
     centred illustration — the brand keeps its visual anchor on mobile. */
  .hero { min-height: 0; padding-top: 160px; padding-bottom: 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__title { order: 1; }
  .hero__image {
    order: 2;
    width: min(64%, 320px);
    margin: 40px auto 0;
  }
  .usp__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .usp__placeholder { display: none; }
  .situation__stats { grid-template-columns: 1fr 1fr; }
  .vision__body { grid-template-columns: 1fr; }
  .vision__tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  /* Horizontal tab strip needs real tap targets (≥44px high). */
  .vision__tab { padding: 11px 12px; }
  .vision__cards-set { display: none; }
  .vision__cards-set.is-active { display: grid; }
  .vision__cards-set + .vision__cards-set { margin-top: 0; padding-top: 0; border-top: none; }
  .therapists__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta__info { padding-top: 32px; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root {
    --gutter-sm: 20px;
  }
  .section { padding: 80px 0; }
  .site-header { padding: 24px 0; }
  .site-nav { gap: 14px; }
  .site-nav a:not(.btn) { display: none; }
  .hero { padding-top: 132px; }
  .usp__grid { grid-template-columns: 1fr; }
  .situation__stats { gap: 40px 24px; }
  .vision__cards-set { grid-template-columns: 1fr; }
  /* Long German compounds ("Sprachentwicklungsstörung") must be allowed to
     break on narrow screens instead of overflowing their cards. */
  .vision__card h3,
  .usp__title,
  .step__title,
  .job__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .therapists__cards { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__title { margin-top: 16px; }
  .process__inner { grid-template-columns: 1fr; gap: 24px; }
  .cta__info { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; gap: 32px; }
}

/* Decorative flowing path behind the upper sections.
   The SVG keeps its viewBox aspect ratio, so its rendered height is
   width * (11200 / 1378) ≈ width * 8.13. Left unbounded, a wide viewport
   makes the path taller than the whole page, which extends the document's
   scrollable height and leaves dead space below the footer. Capping the
   width caps the height so the path always stays within the content. */
.svg-path {
  position: absolute;
  top: 25svh;
  left: 50%;
  transform: translateX(-50%);
  /* clamp(): never narrower than 560px so the squiggle stays prominent on
     phones (where the hero image is hidden), never wider than 1300px so its
     aspect-ratio-locked height can't overrun the content. */
  width: clamp(560px, 90%, 1300px);
  height: auto;
  z-index: -1;
  pointer-events: none;
  /* JS (setupStrokePath) sets an explicit height ending at the bottom of the
     USP section; `clip` then stops the path from reappearing in the lower
     sections (Vision through FAQ). It also keeps the tall SVG from
     contributing to the document's scrollable height. */
  overflow: clip;
}
.svg-path svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   SUBPAGES — shared building blocks
   ========================================================= */

/* Reusable yellow highlight band — same look as the home headings. */
.mark {
  background-image: linear-gradient(transparent 55%, rgba(246, 200, 97, .65) 55%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}
/* Scroll-drawn variant: the reveal system (js) adds .is-anim-ready on load
   and .is-on in view; the band then sweeps in left-to-right, slightly after
   the surrounding text has settled. `transition` is gated behind .is-armed
   (added a layout flush after is-anim-ready, see setupReveal) so the
   0%-size hidden state doesn't get animated into on page load itself. */
.mark--draw.is-anim-ready {
  background-size: 0% 100%;
}
.mark--draw.is-anim-ready.is-armed {
  transition: background-size .9s var(--ease-out) .45s;
}
.mark--draw.is-anim-ready.is-on { background-size: 100% 100%; }

/* Section colour variants. `.section` already provides position + padding. */
.section--dark { background: var(--color-primary); color: var(--color-white); }
.section--dark .eyebrow { color: var(--color-white); }
.section--dark .eyebrow::before { background: var(--color-white); }
.section--accent { background: var(--color-accent); color: var(--color-primary); }
.section--tight { padding: 96px 0; }

/* Big serif display heading for subpage sections. */
.display {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1.08;
  margin-top: 20px;
  color: var(--color-primary);
}
.display em { font-style: italic; }
.section--dark .display { color: var(--color-white); }

/* Generic section header (eyebrow + display title + lead). */
.section-head { max-width: 860px; margin-bottom: 64px; }
.section-head__lead {
  margin-top: 24px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-primary);
  max-width: 640px;
}
.section--dark .section-head__lead { color: rgba(255,255,255,.85); }

/* Flowing prose column. The 35px top margin aligns the first line with a
   sibling pullquote's text top inside .approach__grid (the left column has
   an eyebrow line the right column doesn't), and doubles as comfortable
   spacing below a .display title (Über uns vision section). */
.prose { max-width: 760px; margin-top: 35px; }

/* Three plain text columns (dark franchise band on Karriere). */
.minicols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}
.minicol h4 {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--color-white);
}
.minicol p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.85);
}
.prose p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-primary);
}
.prose p + p { margin-top: 24px; }

/* =========================================================
   GENERIC REVEAL SYSTEM
   JS adds .is-anim-ready on load (hidden start state) and .is-on once the
   element scrolls into view. Without JS or with reduced motion nothing is
   ever hidden. --reveal-delay staggers siblings (set from data-reveal-delay
   or the child index inside a data-reveal-group).
   `transition` only applies once .is-armed joins .is-anim-ready — added by
   JS a layout flush after is-anim-ready itself. If the hidden-state value
   change and the transition property both arrived via the same class add,
   Chrome would treat it as one style-change event and immediately, visibly
   animate every [data-reveal] element from visible down to hidden on page
   load, before the user ever scrolled. See setupReveal in js/main.js.
   ========================================================= */
[data-reveal].is-anim-ready,
[data-reveal-child].is-anim-ready {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal].is-anim-ready.is-armed,
[data-reveal-child].is-anim-ready.is-armed {
  transition:
    opacity .7s var(--ease-out) calc(var(--reveal-delay, 0) * 90ms),
    transform .7s var(--ease-out) calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal].is-anim-ready.is-on,
[data-reveal-child].is-anim-ready.is-on {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-anim-ready,
  [data-reveal-child].is-anim-ready,
  .mark--draw.is-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
    background-size: 100% 100%;
  }
}

/* setupPageParallax (js/main.js) writes its scroll offset to --parallax-y
   instead of the transform property directly, specifically so it can
   coexist with an entrance reveal on the same element. .hero__title carries
   both [data-reveal] (fade up on load) and this parallax layer (drift on
   scroll); if the reveal's own `transform: translateY(22px)` and the
   parallax script's transform both targeted the plain `transform` property,
   whichever wrote last would silently erase the other; also inline styles
   set by JS beat any class-based CSS rule, no matter the source order.
   Composing both offsets through calc() on the same declaration fixes that. */
.hero__title,
.mission__inner,
.process__inner > div,
.cta__grid {
  transform: translateY(var(--parallax-y, 0px));
}
.hero__title[data-reveal].is-anim-ready {
  transform: translateY(calc(22px + var(--parallax-y, 0px)));
}
.hero__title[data-reveal].is-anim-ready.is-on {
  transform: translateY(var(--parallax-y, 0px));
}

/* =========================================================
   HERO XL — oversized editorial subpage hero
   ========================================================= */
.hero-xl {
  position: relative;
  padding: 216px 0 110px;
}
.hero-xl--compact { padding-bottom: 24px; }
/* Title reuses the home hero scale (--fs-title) so page openers are the
   same size site-wide. */
.hero-xl__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-top: 28px;
  max-width: 18ch;
}
.hero-xl__title em { font-style: italic; }
.hero-xl__lead {
  margin-top: 36px;
  max-width: 620px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-primary);
}
/* Sans-bold subpage hero — same Geist Bold treatment as the home
   .hero__title. Used by all three content subpages (Über uns, Karriere,
   Kontakt); the legal pages keep the serif default. */
.hero-xl--narrow-sans .hero-xl__title {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero-xl--narrow-sans .hero-xl__title em { font-style: normal; }
.hero-xl__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* Split hero — big title left, lead paragraph top-right, full-width media
   below (Terner-style editorial opener). Used by Über uns / Karriere /
   Kontakt; Kontakt omits the media figure. */
.hero-xl__split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px 96px;
  align-items: start;
}
.hero-xl--split .hero-xl__title {
  margin-top: 0;
  max-width: none;
}
/* Optically aligns the lead's first line with the title's cap height. */
.hero-xl__aside { padding-top: 14px; }
.hero-xl--split .hero-xl__lead {
  margin-top: 0;
  max-width: 44ch;
}
.hero-xl--split .hero-xl__actions { margin-top: 28px; }
.hero-xl__media {
  margin: 72px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-xl__media img {
  width: 100%;
  height: clamp(320px, 58vh, 600px);
  object-fit: cover;
  display: block;
}
/* Karriere's illustration must never crop, unlike the practice photos this
   component otherwise shows — cropping would cut off the group's heads or
   feet. Sizing purely from the image's own aspect ratio (instead of a
   viewport-height-driven box + object-fit: cover) makes cropping impossible
   at any screen height, at the cost of the figure's height varying with
   viewport width. The `figure` type selector bumps specificity above the
   breakpoint-specific `.hero-xl__media img` height rules further down. */
figure.hero-xl__media--uncropped img {
  height: auto;
  object-fit: contain;
}

/* =========================================================
   PULLQUOTE — big serif statement with word-by-word reveal
   (same mechanics as the home mission: JS wraps words, adds
   .is-split, then .is-on in view)
   ========================================================= */
/* Two-column editorial statement: eyebrow + pullquote left, prose right
   (Über uns "Unser Ansatz", Karriere "Warum loquio"). */
.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 80px;
  align-items: start;
}
.pullquote {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 1.7vw + 21px, 44px);
  line-height: 1.28;
  color: var(--color-primary);
  max-width: 22ch;
}
.pullquote em {
  font-style: italic;
  background-image: linear-gradient(transparent 55%, rgba(246, 200, 97, .65) 55%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-words] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  transition-delay: calc(var(--word-index, 0) * 40ms);
}
[data-words].is-on .word {
  opacity: 1;
  transform: translateY(0);
}
[data-words].is-split em {
  background-size: 0% 100%;
  transition: background-size 1s var(--ease-out) 1s;
}
[data-words].is-on em { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  [data-words] .word { opacity: 1; transform: none; transition: none; }
  [data-words].is-split em { background-size: 100% 100%; transition: none; }
}

/* =========================================================
   TEAM GRID — reuses the home page USP column recipe (eyebrow,
   serif title, paragraph, scroll-stagger via .usp__col) for the
   Über uns "Wer hinter loquio steht" section.
   ========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 64px;
}

/* =========================================================
   ADVANTAGES — icon + title + description grid, 3 columns, no divider
   lines. Used for the Über uns patient advantages (6 items) and the
   Karriere benefits (12 items). Icons are inline Lucide SVGs
   (https://lucide.dev, ISC license) at stroke-width 1.75.
   ========================================================= */
.advantages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  margin-top: 64px;
}
.advantages__icon {
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  color: var(--color-primary);
}
.advantages__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.advantages__item h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
  color: var(--color-primary);
}
.advantages__item p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-primary);
  max-width: 34ch;
}

/* =========================================================
   ÜBER UNS — location
   ========================================================= */
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Single photo (praxis_2) — praxis_1 lives in the page's hero media. */
.location__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.location__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
  margin-top: 36px;
}
.location__fact .label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: rgba(49, 34, 65, .55);
  margin-bottom: 8px;
}
.location__fact p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-primary);
}

/* =========================================================
   KARRIERE — open positions + inline application form
   ========================================================= */
.jobs__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.job {
  border: 1px solid rgba(49, 34, 65, .25);
  border-radius: 18px;
  background: var(--color-white);
  overflow: hidden;
}
.job__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  padding: 48px;
}
.job__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.job__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 1vw + 24px, 36px);
  line-height: 1.15;
  margin-top: 20px;
  color: var(--color-primary);
}
.job__intro {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-primary);
  max-width: 46ch;
}
.job__salary { margin-top: 28px; }
.job__salary-value {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--color-primary);
}
.job__salary-note {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(49, 34, 65, .65);
  max-width: 48ch;
}
.job__facts {
  margin-top: 24px;
  display: grid;
  gap: 0;
}
.job__fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid rgba(49, 34, 65, .14);
}
.job__fact:last-child { border-bottom: 1px solid rgba(49, 34, 65, .14); }
.job__fact dt {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(49, 34, 65, .6);
}
.job__fact dd {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  text-align: right;
  color: var(--color-primary);
  margin: 0;
}
.job__aside h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  margin-bottom: 20px;
  color: var(--color-primary);
}
.ticks { display: flex; flex-direction: column; gap: 14px; }
.ticks li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-primary);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 4px;
  height: 7px;
  border: solid var(--color-primary);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.job__apply { margin-top: 28px; }

/* Inline application form: grid-template-rows 0fr→1fr animates to the exact
   content height (same trick as the FAQ accordion). The [hidden] guard is
   required because display:grid would otherwise override the attribute. */
.job__form-wrap {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid rgba(49, 34, 65, .14);
  background: rgba(246, 200, 97, .12);
  transition: grid-template-rows .5s var(--ease-in-out);
}
.job__form-wrap[hidden] { display: none; }
.job__form-wrap.is-open { grid-template-rows: 1fr; }
.job__form {
  overflow: hidden;
  min-height: 0;
  padding: 0 48px;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.job__form-wrap.is-open .job__form {
  padding: 40px 48px 48px;
  opacity: 1;
  transition: opacity .5s var(--ease-out) .15s, padding .5s var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .job__form-wrap,
  .job__form,
  .job__form-wrap.is-open .job__form { transition: none; }
}

/* =========================================================
   FORMS — shared field styles
   ========================================================= */
.form__title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--color-primary);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.field label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-primary);
}
.field__optional {
  font-weight: 300;
  font-size: 12px;
  color: rgba(49, 34, 65, .55);
  margin-left: 6px;
}
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1.5px solid rgba(49, 34, 65, .35);
  border-radius: 10px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(246, 200, 97, .5);
}
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
}
.field--check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.field--check label {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}
/* Honeypot: a field real visitors never see or reach (off-screen, not
   display:none, so unsophisticated bots that skip hidden fields still find
   and fill it). backend/send.php treats a non-empty value as spam. */
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}
/* Invalid state only after a submit attempt (JS adds .was-validated). */
.form.was-validated input:invalid,
.form.was-validated select:invalid,
.form.was-validated textarea:invalid {
  border-color: #b3261e;
}
.form__error {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #b3261e;
}
.form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}
.form__hint {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(49, 34, 65, .6);
  max-width: 40ch;
}
.form__success {
  margin-top: 28px;
  border: 1.5px solid var(--color-primary);
  border-radius: 12px;
  background: rgba(246, 200, 97, .3);
  padding: 24px 26px;
}
.form__success h4 {
  font-family: var(--font-serif);
  font-size: 21px;
  margin-bottom: 8px;
  color: var(--color-primary);
}
.form__success p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-primary);
}
.form.is-sent .form__actions { display: none; }
/* =========================================================
   KONTAKT — form + aside + map
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr);
  gap: 80px;
  align-items: start;
}
.contact__form .form__row:first-child .field { margin-top: 0; }
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid rgba(49, 34, 65, .15);
  padding-left: 40px;
}
.contact__aside-item .label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: rgba(49, 34, 65, .55);
  margin-bottom: 8px;
}
.contact__aside-item p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-primary);
}
.contact__aside-item a:not(.btn) {
  border-bottom: 1px solid rgba(49, 34, 65, .35);
  transition: border-color .2s var(--ease);
}
.contact__aside-item a:not(.btn):hover { border-color: var(--color-primary); }
.contact__aside-item--cta .btn { margin-top: 6px; }

.map {
  border: 1px solid rgba(49, 34, 65, .25);
  border-radius: 16px;
  overflow: hidden;
}
.map__frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
/* .map__frame's display:block would defeat the hidden attribute pre-consent. */
.map__frame[hidden] { display: none; }
.map__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 18px 24px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
}
.map__bar a {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
}

/* Consent gate — shown instead of the iframe until the visitor opts in to
   the "Externe Karte" cookie category (see COOKIE CONSENT below). Same
   footprint as .map__frame so the layout doesn't jump once loaded. */
.map__consent {
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding: 40px;
  background: var(--color-secondary);
}
.map__consent p {
  max-width: 46ch;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-primary);
}
.map__consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.map.is-consented .map__consent { display: none; }

/* =========================================================
   COOKIE CONSENT — banner + settings modal (DSGVO/TTDSG)
   Two categories only, matching what the site actually does:
   "necessary" (stores the consent choice itself, always on) and
   "maps" (gates the OpenStreetMap iframe on kontakt.html). Add
   further [data-cookie-toggle="…"] categories here if the site
   ever adds analytics/marketing — see setupCookieConsent in
   js/main.js, which is written generically for that.
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 20px;
  display: flex;
  justify-content: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__card {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  background: var(--color-white);
  border: 1px solid rgba(49, 34, 65, .18);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(49, 34, 65, .35);
  padding: 24px 28px;
}
.cookie-banner__text { flex: 1 1 360px; }
.cookie-banner__title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.cookie-banner__text p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary);
}
.cookie-banner__text a {
  color: var(--color-primary);
  border-bottom: 1px solid rgba(49, 34, 65, .35);
}
.cookie-banner__text a:hover { border-color: var(--color-primary); }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner__actions .btn {
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(49, 34, 65, .45);
}
.cookie-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(49, 34, 65, .5);
  padding: 40px clamp(24px, 4vw, 44px) 32px;
}
.cookie-modal__panel h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.cookie-modal__panel > p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.cookie-modal__panel > p a {
  color: var(--color-primary);
  border-bottom: 1px solid rgba(49, 34, 65, .35);
}
.cookie-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--color-primary);
  border-radius: 50%;
  transition: background-color .2s var(--ease);
}
.cookie-modal__close:hover { background: rgba(49, 34, 65, .08); }

.cookie-option {
  padding: 20px 0;
  border-top: 1px solid rgba(49, 34, 65, .15);
}
.cookie-option__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cookie-option__head strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary);
}
.cookie-option__head p {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(49, 34, 65, .8);
}
.cookie-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Toggle switch — accessible checkbox visually rendered as a pill switch. */
.toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.toggle__track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(49, 34, 65, .25);
  transition: background-color .2s var(--ease);
}
.toggle__thumb {
  display: block;
  width: 20px;
  height: 20px;
  margin: 3px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform .2s var(--ease-out);
}
.toggle input:checked + .toggle__track { background: var(--color-accent); }
.toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.toggle input:disabled + .toggle__track { opacity: .6; cursor: not-allowed; }
.toggle input:disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .toggle__track,
  .toggle__thumb { transition: none; }
}

/* =========================================================
   TERMIN — app-like booking wizard
   ========================================================= */
.booking {
  padding: 190px 0 120px;
}
.booking .container { max-width: 880px; }
.booking__head {
  text-align: center;
  margin-bottom: 48px;
}
.booking__head .eyebrow { justify-content: center; }
.booking__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 2.4vw + 24px, 60px);
  line-height: 1.08;
  margin-top: 20px;
  color: var(--color-primary);
}
.wizard {
  background: var(--color-white);
  border: 1px solid rgba(49, 34, 65, .18);
  border-radius: 20px;
  padding: 40px clamp(24px, 5vw, 56px) 44px;
  box-shadow: 0 24px 60px -32px rgba(49, 34, 65, .3);
}
.wizard__progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(49, 34, 65, .12);
  overflow: hidden;
}
.wizard__progress-bar {
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width .5s var(--ease-out);
}
.wizard__count {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: rgba(49, 34, 65, .55);
}
.wizard__step {
  border: 0;
  padding: 0;
  margin: 28px 0 0;
  min-width: 0;
}
.wizard__step[hidden] { display: none; }
/* Step entrance: slides in from the direction of travel. */
.wizard__step.is-active { animation: wizard-in .45s var(--ease-out) both; }
.wizard__step.is-active.is-back { animation-name: wizard-in-back; }
@keyframes wizard-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wizard-in-back {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard__step.is-active { animation: none; }
}
.wizard__q {
  font-family: var(--font-serif);
  font-size: clamp(24px, 1vw + 20px, 32px);
  line-height: 1.2;
  color: var(--color-primary);
  padding: 0;
  margin-bottom: 26px;
}
.wizard__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-primary);
  margin: 30px 0 12px;
}
.wizard__hint {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(49, 34, 65, .6);
}
.wizard__error {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #b3261e;
}

/* Choice cards (radio buttons styled as tappable cards). */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 22px 20px;
  border: 1.5px solid rgba(49, 34, 65, .3);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .25s var(--ease-out);
}
.choice__card svg {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  color: var(--color-primary);
}
.choice__card strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-primary);
}
.choice__card small {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  color: rgba(49, 34, 65, .6);
}
@media (hover: hover) and (pointer: fine) {
  .choice__card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
}
.choice__card:active { transform: scale(.98); }
.choice input:checked + .choice__card {
  border-color: var(--color-primary);
  background: rgba(246, 200, 97, .35);
}
.choice input:focus-visible + .choice__card {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Chips (radio / checkbox pills). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1.5px solid rgba(49, 34, 65, .3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip span:hover { border-color: var(--color-primary); }
}
.chip span:active { transform: scale(.96); }
.chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Chip info tooltip — a small "i" button beside a chip (Schritt 2, Anliegen)
   that explains the term for parents/patients unsure which to pick. Hover
   and keyboard focus work via pure CSS; setupChipInfo() in js/main.js adds a
   tap-to-toggle on top for touch devices, which have no hover state. */
.chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chip-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: rgba(49, 34, 65, .55);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.chip-info svg { width: 17px; height: 17px; }
.chip-info:hover,
.chip-info:focus-visible,
.chip-info.is-open {
  color: var(--color-primary);
  background: rgba(49, 34, 65, .08);
  outline: none;
}
.chip-info__tooltip {
  /* --tooltip-shift is set by setupChipInfo() in js/main.js to keep the box
     on-screen when the trigger sits near the left/right edge of the
     viewport — without it the box is simply centered on the button. */
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(calc(-50% + var(--tooltip-shift, 0px))) translateY(4px);
  width: max-content;
  max-width: 240px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  z-index: 5;
}
.chip-info__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Counter-shift so the arrow keeps pointing at the button even though the
     box itself moved to stay on-screen. */
  left: calc(50% - var(--tooltip-shift, 0px));
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-primary);
}
/* setupChipInfo() adds this when there isn't enough room above the button
   (e.g. the top row of chips, right under the "Worum geht es?" heading) so
   the tooltip opens downward instead of covering the heading. */
.chip-info.tooltip-below .chip-info__tooltip {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(calc(-50% + var(--tooltip-shift, 0px))) translateY(-4px);
}
.chip-info.tooltip-below .chip-info__tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .chip-info:hover .chip-info__tooltip { opacity: 1; visibility: visible; transform: translateX(calc(-50% + var(--tooltip-shift, 0px))) translateY(0); }
}
.chip-info:focus-visible .chip-info__tooltip,
.chip-info.is-open .chip-info__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--tooltip-shift, 0px))) translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .chip-info__tooltip { transition: none; }
}

/* Recurring-appointment callout (Schritt 3) — same tinted-callout recipe as
   .legal__note, scoped to the wizard. */
.wizard__notice {
  margin-bottom: 22px;
  border: 1.5px solid rgba(49, 34, 65, .3);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
  background: rgba(246, 200, 97, .14);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary);
}
.wizard__notice strong { font-weight: 700; }

/* Summary box on the final step. */
.wizard__summary {
  border: 1.5px dashed rgba(49, 34, 65, .4);
  border-radius: 12px;
  background: rgba(246, 200, 97, .12);
  padding: 18px 22px;
  margin-bottom: 6px;
}
.wizard__summary .label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(49, 34, 65, .6);
  margin-bottom: 10px;
}
.wizard__summary ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-primary);
}
.wizard__summary li strong { font-weight: 400; }

.wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 38px;
}
.wizard__nav .wizard__next { margin-left: auto; }
/* .btn's display:inline-flex would defeat the hidden attribute. */
.wizard__nav[hidden],
.wizard__nav .btn[hidden] { display: none; }

/* Success screen with drawn check mark. */
.wizard__done {
  text-align: center;
  padding: 28px 0 8px;
}
.wizard__done svg {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  color: var(--color-primary);
}
.wizard__done-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: check-draw .6s var(--ease-out) .35s forwards;
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard__done-check { animation: none; stroke-dashoffset: 0; }
}
.wizard__done h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--color-primary);
}
.wizard__done p {
  margin: 14px auto 28px;
  max-width: 44ch;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-primary);
}
.booking__note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(49, 34, 65, .7);
}
.booking__note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   SUBPAGES — responsive
   ========================================================= */
@media (max-width: 1100px) {
  .hero-xl { padding: 176px 0 80px; }
  .hero-xl__split { grid-template-columns: 1fr; gap: 28px; }
  .hero-xl__aside { padding-top: 0; }
  .hero-xl__media { margin-top: 48px; }
  .hero-xl__media img { height: clamp(240px, 44vh, 440px); }
  .approach__grid { grid-template-columns: 1fr; gap: 40px; }
  .minicols { grid-template-columns: 1fr; gap: 32px; }
  .pullquote { max-width: none; }
  .team-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .advantages { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .location__grid { grid-template-columns: 1fr; gap: 40px; }
  .location__media img { max-width: 520px; }
  .job__layout { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
  .job__form { padding: 0 36px; }
  .job__form-wrap.is-open .job__form { padding: 32px 36px 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 56px; }
  .contact__aside {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(49, 34, 65, .15);
    padding-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 720px) {
  .hero-xl { padding: 150px 0 56px; }
  .hero-xl__lead { font-size: 17px; }
  .hero-xl__media { margin-top: 36px; }
  .advantages { grid-template-columns: 1fr; gap: 32px; }
  .advantages__item h3 { hyphens: auto; overflow-wrap: break-word; }
  .display,
  .hero-xl__title { hyphens: auto; overflow-wrap: break-word; }
  .job__layout { padding: 28px 24px; }
  .job__form { padding: 0 24px; }
  .job__form-wrap.is-open .job__form { padding: 28px 24px 32px; }
  .job__fact { flex-direction: column; gap: 2px; }
  .job__fact dd { text-align: left; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .contact__aside { grid-template-columns: 1fr; }
  .map__frame { height: 340px; }
  .map__consent { height: 340px; padding: 28px; }
  .cookie-banner { padding: 12px; }
  .cookie-banner__card { flex-direction: column; align-items: stretch; padding: 20px; }
  .cookie-banner__text { flex: none; }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { width: 100%; }
  .cookie-modal__actions { flex-direction: column; }
  .cookie-modal__actions .btn { width: 100%; }
  .booking { padding: 140px 0 80px; }
  .wizard { padding: 28px 20px 32px; border-radius: 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .wizard__nav { margin-top: 30px; }
}

/* =========================================================
   LEGAL PAGES — Impressum / Datenschutz
   Long-form text in a single readable measure. Reuses the
   hero-xl--compact header; the article column tops out near 70ch.
   ========================================================= */
.legal { padding: 24px 0 120px; }
.legal__article {
  max-width: 760px;
}
.legal__meta {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(49, 34, 65, .55);
}
.legal__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.legal__article h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 1vw + 20px, 30px);
  line-height: 1.2;
  color: var(--color-primary);
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(49, 34, 65, .15);
}
.legal__article h2:first-of-type { margin-top: 40px; }
.legal__article h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 28px 0 0;
}
.legal__article p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-primary);
  margin-top: 16px;
}
.legal__article address {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-primary);
  margin-top: 16px;
}
.legal__article ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal__article ul li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-primary);
}
.legal__article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal__article a {
  color: var(--color-primary);
  border-bottom: 1px solid rgba(49, 34, 65, .35);
  word-break: break-word;
  transition: border-color .2s var(--ease);
}
.legal__article a:hover { border-color: var(--color-primary); }
/* Bracketed "to be completed" placeholders from the source drafts. */
.legal__todo {
  font-style: italic;
  background-image: linear-gradient(transparent 60%, rgba(246, 200, 97, .55) 60%);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 0 2px;
}
/* Draft / "not legal advice" callout. */
.legal__note {
  margin-top: 48px;
  border: 1.5px solid rgba(49, 34, 65, .3);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
  background: rgba(246, 200, 97, .14);
  padding: 22px 26px;
}
.legal__note p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-primary);
}
.legal__note strong { font-weight: 700; }

@media (max-width: 720px) {
  .legal { padding: 8px 0 80px; }
  .legal__article h2 { hyphens: auto; overflow-wrap: break-word; }
}