/* carepath homepage — brand identity (Figtree, teal #164C45, apricot) with the N26-style journey shell.
   Apricot is used for one thing only: the "Über WhatsApp." highlight and the active dot in the shell. */

:root {
  --teal: #164C45; --teal-deep: #0F3A35; --teal-tint: #DCE8E4;
  --apricot: #F5C7A9; --paper: #F8F7F0; --sage: #E8EDE5; --grey-ui: #E9E9E5; --grey-ui-line: #DDDDD7;
  --ink: #203B36; --ink-2: #53665E; --line: #D4DBD0; --white: #ffffff; --error: #8C3A2B;
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-btn: 10px; --r-tile: 12px; --r-card: 24px; --r-shell: 40px;
  --shadow-tile: 0 1px 1px rgba(32, 59, 54, .06);
  --shadow-float: 0 9px 7px rgba(32, 59, 54, .10), 0 1px 1px rgba(32, 59, 54, .05);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  /* Distance from the viewport's left edge to the content column, so a card can bleed out to the edge. */
  --wrap-left: 24px;
}
@media (min-width: 720px) { :root { --nav-h: 76px; } }
@media (min-width: 900px) { :root { --wrap-left: calc((100vw - min(100vw, 1280px)) / 2 + 40px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
/* Anchored sections stop below the sticky header. */
.block, .journey, .office, .faq, .closing { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ── Type ── */
.display-xl { font-weight: 500; font-size: clamp(36px, 3.2vw + 8px, 56px); line-height: 1.04; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.display-lg { font-weight: 500; font-size: clamp(30px, 2.4vw + 10px, 46px); line-height: 1.08; letter-spacing: -.024em; margin: 0; text-wrap: balance; }
.display-md { font-weight: 500; font-size: clamp(27px, 1.5vw + 14px, 40px); line-height: 1.1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.body-lg { font-size: clamp(17px, .3vw + 15px, 19px); line-height: 1.55; }
.body-md { font-size: 17px; line-height: 1.55; }
.body-sm { font-size: 14px; line-height: 1.45; }
.muted { color: var(--ink-2); }
mark { background: var(--apricot); color: var(--ink); padding: .02em .12em; margin: 0 -.04em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The highlighted line sits a touch lower so the apricot block does not crowd the line above. */
@media (min-width: 600px) { .display-xl mark { display: inline-block; margin-top: .16em; } }
@media (max-width: 599px) { .display-xl br, .display-lg br, .display-md br { display: none; } }

/* ── Buttons and links ── */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 12px 22px; border-radius: var(--r-btn); border: 1px solid transparent; font: 600 16px/24px var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; white-space: nowrap; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-deep); }
.btn:disabled { opacity: .55; cursor: default; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--teal); font: 600 16px/24px var(--font); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.textlink:hover { color: var(--teal-deep); }

/* ── Nav: stays on top so the demo action is always one click away ── */
.nav-bar { position: sticky; top: 0; z-index: 20; background: var(--white); transition: box-shadow .2s ease; }
.nav-bar.is-stuck { box-shadow: inset 0 -1px 0 var(--line); }
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.nav > .logo { margin-left: calc(24px - var(--wrap-left)); } /* out to 24px from the screen edge, like the hero photo */
.logo svg { display: block; height: 100%; width: auto; }
.logo .mark { height: 36px; }
.logo .word { height: 20px; }
/* "carepath | [WhatsApp Business]" — a hairline divider, then the partner mark in the nav's muted ink. */
.partner { display: inline-flex; align-items: center; margin-left: 18px; }
.partner .divider { width: 1px; height: 34px; background: var(--line); margin-right: 18px; }
.partner img { height: 33px; width: auto; display: block; transform: translateY(-2px); } /* cap height and baseline match the carepath wordmark */
@media (max-width: 719px) { .partner { display: none; } } /* phones: logo and demo button only */
@media (max-width: 400px) { .partner img { height: 17px; } .partner .divider { margin-right: 10px; } }
@media (max-width: 340px) { .partner { display: none; } }
.nav-links { display: flex; gap: 28px; margin: 0 8px 0 auto; }
.nav-links a { text-decoration: none; color: var(--ink); font: 500 16px/24px var(--font); padding: 10px 0; transition: color .2s ease; }
.nav-links a:hover { color: var(--teal); }
.nav .btn { height: 44px; padding: 10px 18px; }
/* Language switch: round flag + code. Both languages are live; the current one is not a link. */
.lang { display: flex; align-items: center; gap: 16px; margin: 0 calc(24px - var(--wrap-left)) 0 8px; font: 600 15px/20px var(--font); color: var(--ink); } /* right group ends 24px from the screen edge, mirroring the logo */
.lang-item { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; transition: opacity .2s ease; }
.lang-item svg { width: 20px; height: 20px; border-radius: 50%; flex: none; }
a.lang-item { opacity: .55; }                 /* the language you are not reading sits back a little */
a.lang-item:hover, a.lang-item:focus-visible { opacity: 1; }
@media (max-width: 719px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav .btn { padding: 10px 12px; font-size: 15px; margin-left: auto; }
  .lang { margin-left: 0; gap: 10px; }
  .lang-item span { display: none; }           /* phones: the flags alone, both still tappable */
}
@media (max-width: 400px) { .logo .word { display: none; } }

/* ── Opening: one photograph, two text blocks ── */
.opening { padding: 16px 0 24px; }
.opening-grid { display: grid; gap: 40px; }
.block { display: flex; flex-direction: column; justify-content: center; }
.hero-block > * + * { margin-top: 24px; }
.hero-block .body-lg { max-width: 540px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.hero-block .after { margin-top: 16px; max-width: 540px; }
.wa-block > * + * { margin-top: 22px; }
.wa-block .body-lg { max-width: 540px; }

/* "Jetzt selbst ausprobieren" in the second opening block: a paper card with a large QR to the demo sign-up.
   The whole card is a link; on phones (no way to scan your own screen) the QR gives way to a button. */
.try-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 36px; padding: 22px 26px 22px 22px; max-width: 560px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.try-card:hover { box-shadow: 0 12px 28px rgba(32, 59, 54, .12); transform: translateY(-1px); }
.try-qr { width: 160px; height: 160px; display: block; border-radius: 12px; background: var(--white); padding: 8px; border: 1px solid var(--line); }
.try-copy { display: grid; gap: 8px; min-width: 0; }
.try-copy b { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.try-copy > span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.try-copy em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--teal); }
.try-btn, .try-mob { display: none; }
/* The button is a <span> inside the card link; keep it white-on-teal despite the card's muted text colour. */
.try-copy > .try-btn, .tryout-copy > .try-btn { color: var(--white); font-size: 16px; line-height: 24px; }
/* Phones: you can't scan your own screen, so the QR and its copy give way to a button and matching copy. */
@media (max-width: 599px) {
  .try-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .try-qr, .try-copy em, .try-desk { display: none; }
  .try-mob { display: block; }
  .try-btn { display: inline-flex; width: 100%; margin-top: 4px; }
}

/* Wide and tall enough: pin the picture below the header while both blocks pass. ~1.7 viewport heights. */
@media (min-width: 1024px) and (min-height: 641px) {
  .opening { padding: 24px 0 40px; }
  .opening-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: start; }
  /* The photograph grows out of its column to 24px from the viewport's left edge. */
  .opening-media { position: sticky; top: calc(var(--nav-h) + 20px); margin-left: calc(24px - var(--wrap-left)); }
  .hero-block { min-height: min(calc(100dvh - var(--nav-h) - 44px), 820px); padding: 24px 0; }
  .wa-block { min-height: min(68dvh, 560px); padding: 24px 0 40px; }
  .hero-scene .photo { max-height: calc(100dvh - var(--nav-h) - 56px); }
}
@media (min-width: 1240px) { .opening-grid { gap: 96px; } }
/* Narrow or short: ordinary flow. Copy, picture, second block. */
@media (max-width: 1023px), (max-height: 640px) {
  .opening-copy { display: contents; }
  .hero-block { order: 1; padding-top: 16px; }
  .opening-media { order: 2; }
  .wa-block { order: 3; padding: 8px 0 16px; }
}

/* ── Scene: the photograph with the conversation floating on it. Never an app frame. ── */
.scene { position: relative; }
.scene .photo { border-radius: var(--r-card); overflow: hidden; background: var(--sage); aspect-ratio: 11 / 10; }
.scene .photo img { width: 100%; height: 100%; object-fit: cover; }
.chat { position: absolute; left: 5%; bottom: 6%; width: 58%; max-height: 62%; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; padding-top: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%); }
.msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; box-shadow: var(--shadow-float); flex: none; }
.msg.patient { align-self: flex-end; background: var(--teal); color: var(--white); border-bottom-right-radius: 5px; }
.msg.practice { align-self: flex-start; background: var(--white); color: var(--ink); border-bottom-left-radius: 5px; }
.msg .who { display: block; font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ink-2); margin-bottom: 3px; }
.msg.patient .who { color: rgba(255, 255, 255, .78); }
.msg.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: blink 1.1s infinite ease-in-out; }
.msg.typing span:nth-child(2) { animation-delay: .18s; }
.msg.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
.enter { animation: rise .38s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .scene .photo { aspect-ratio: 3 / 4; }
  .scene .photo img { object-position: 60% 40%; }
  .chat { width: 80%; max-height: 64%; left: 4%; }
  .msg { font-size: 14px; padding: 9px 12px; }
}
@media (min-width: 600px) and (max-width: 1023px) { .scene .photo { aspect-ratio: 4 / 3; } .chat { width: 56%; } }

/* Hero chat rows on the photograph: same group-chat language as the journey, floating on the picture. */
.chat .row { flex: none; }
.chat .bubble { max-width: 88%; padding: 10px 14px; font-size: 14.5px; line-height: 1.4; border-radius: 18px; }
.chat .row.practice .bubble { background: var(--white); border: 0; box-shadow: var(--shadow-float); }
.chat .row.patient .bubble { box-shadow: var(--shadow-float); }
.chat .avatar { width: 28px; height: 28px; border: 0; box-shadow: var(--shadow-tile); }
.chat .avatar svg { width: 17px; height: 17px; }
.chat .card-row .tile { box-shadow: var(--shadow-float); }
.bubble.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.bubble.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: blink 1.1s infinite ease-in-out; }
.bubble.typing span:nth-child(2) { animation-delay: .18s; }
.bubble.typing span:nth-child(3) { animation-delay: .36s; }
@media (max-width: 1023px) { .chat .bubble { font-size: 14px; padding: 9px 12px; } }

/* ── Journey: heading in flow, then one pinned stage. Left: the teal board (rounded on the left only,
   cut straight where the chat begins) with a vertical numbered rail and four steps that scroll through it.
   Right: one continuous chat in a phone-proportioned column on white; messages are added by scrolling. ── */
.journey { padding: 88px 0 0; --stage-h: calc(100svh - var(--nav-h) - 16px); --d: 360svh; --board-edge: 24px; } /* the teal board's inset; the heading and the page gutter line up with it at every width */
@media (min-width: 900px) { .journey { padding-top: 120px; } }
.journey-title { max-width: 900px; margin-bottom: 28px; }
.journey-sub { margin-top: 18px; max-width: 680px; }
/* The heading lines up with the LEFT EDGE of the teal board below it, at every width.
   It used to be offset with calc(96px - var(--wrap-left)); --wrap-left is where a 1280px-wide .wrap
   starts, but this block is capped at 900px, so the two references disagreed and the heading was
   dragged further off-screen the wider the window got (-200px of clipped text at 1920). Anchoring the
   box at the viewport edge and spending the board inset as padding keeps it put at any size. */
@media (min-width: 900px) {
  .journey-title { margin-bottom: 36px; margin-left: 0; margin-right: auto; padding-left: var(--board-edge); padding-right: 40px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Default (no JavaScript, reduced motion, phones, or it cannot fit): the four steps stack inside the board, the full chat follows. */
.stage { display: grid; gap: 40px; }
.board { position: relative; margin: 0 var(--board-edge); padding: 36px 24px 40px; background: var(--teal); color: var(--white); border-radius: 24px; overflow: hidden; }
.rail, .skip { display: none; }
.steps-track { display: grid; gap: 40px; }
.step { display: grid; gap: 14px; }
.step-no { font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: rgba(255, 255, 255, .55); }
.step .body-lg { color: rgba(255, 255, 255, .86); max-width: 520px; }
.phone { display: flex; justify-content: center; padding: 0 24px; }
@media (max-width: 899px) { .phone { display: none; } } /* phones: the four steps carry the story, the chat is desktop-only */
.phone-photo { display: none; }
.chat-col { width: min(100%, 460px); }
.chat-list { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: flex-end; gap: 10px; }
.row.patient { justify-content: flex-end; }
.row.day { justify-content: center; margin: 6px 0; }
.row.day span { padding: 5px 12px; border-radius: 999px; background: var(--sage); color: var(--ink-2); font-size: 12.5px; line-height: 18px; font-weight: 500; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; color: var(--teal); }
.avatar svg { width: 20px; height: 20px; display: block; }
.bubble { position: relative; max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.005em; }
.row.practice .bubble { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 8px; box-shadow: 0 6px 16px rgba(32, 59, 54, .08); }
.row.patient .bubble { background: var(--teal); color: var(--white); border-bottom-right-radius: 8px; box-shadow: 0 6px 16px rgba(22, 76, 69, .18); }
.bubble .t { display: block; text-align: right; margin: 4px 0 -2px; font-size: 11.5px; line-height: 1; color: var(--ink-2); }
.row.patient .bubble .t { color: rgba(255, 255, 255, .7); }
.card-row .tile, .card-row .summary { background: var(--white); border-color: var(--line); box-shadow: 0 6px 16px rgba(32, 59, 54, .08); }
.card-row .tile { padding: 12px 16px; border-radius: 16px; font-size: 15px; }
.card-row .summary { min-width: min(78%, 300px); padding: 12px 16px; border-radius: 16px; font-size: 14.5px; gap: 6px; }

/* Pinned (added by JavaScript on wide screens when everything fits). */
.journey.is-pinned .pin { height: calc(var(--stage-h) + var(--d)); }
.journey.is-pinned .stage { position: sticky; top: calc(var(--nav-h) + 8px); height: var(--stage-h); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; }
.journey.is-pinned .board { margin: 0; margin-left: var(--board-edge); border-radius: var(--r-shell) 0 0 var(--r-shell); padding: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
@media (min-width: 1240px) { .journey.is-pinned .board { grid-template-columns: 96px minmax(0, 1fr); } }
.journey.is-pinned .rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.journey.is-pinned .rail li { position: relative; }
.journey.is-pinned .rail li + li::before { content: ""; display: block; width: 1px; height: 36px; margin: 0 auto; background: rgba(255, 255, 255, .28); }
.rail button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: none; color: rgba(255, 255, 255, .8); font: 600 13px/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.rail button.is-on { background: var(--white); border-color: var(--white); color: var(--teal); }
.rail button[aria-current="true"] { background: var(--apricot); border-color: var(--apricot); color: var(--ink); }
.rail button:focus-visible { outline-color: var(--white); outline-offset: 3px; }
.journey.is-pinned .steps-clip { overflow: hidden; height: 100%; min-height: 0; padding-right: 176px; } /* room for CarePath bubbles that overlap the board */
.journey.is-pinned .steps-track { display: block; height: 100%; transform: translate3d(0, calc(var(--p, 0) * -300%), 0); will-change: transform; }
.journey.is-pinned .step { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 0; }
.journey.is-pinned .step-no { font-size: clamp(56px, 5vw, 84px); }
.journey.is-pinned .skip { display: block; position: absolute; left: 24px; top: 16px; z-index: 2; padding: 8px 12px; border-radius: 8px; background: var(--white); color: var(--teal); font: 600 14px/20px var(--font); text-decoration: none; clip-path: inset(50%); }
.journey.is-pinned .skip:focus-visible { clip-path: none; outline-color: var(--white); }
/* Right half: the photograph as a rounded card, the chat floating over it. CarePath rows begin over the board's
   right edge, patient rows end at the photo's right edge, so the two sides of the conversation sit apart. */
.journey.is-pinned .phone { position: relative; display: block; min-height: 0; padding: 0; margin: 0 24px 0 28px; }
.journey.is-pinned .phone-photo { display: block; position: absolute; inset: 0; border-radius: var(--r-card); overflow: hidden; background: var(--sage); }
.journey.is-pinned .phone-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.journey.is-pinned .row.practice { width: 62%; }
.journey.is-pinned .row.patient { width: 56%; margin-left: auto; }
.journey.is-pinned .bubble { max-width: 100%; }
.journey.is-pinned .row.practice .bubble { box-shadow: 0 10px 24px rgba(0, 0, 0, .16); border: 0; }
.journey.is-pinned .row.patient .bubble { box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.journey.is-pinned .avatar { border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.journey.is-pinned .row.day span { background: rgba(255, 255, 255, .9); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.journey.is-pinned .card-row .tile, .journey.is-pinned .card-row .summary { box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.journey.is-pinned .chat-col { position: absolute; top: 0; bottom: 0; left: -168px; right: 24px; width: auto; height: auto; min-height: 0; margin: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%); }
.journey.is-pinned .chat-list { position: absolute; left: 0; right: 0; bottom: 24px; gap: 14px; will-change: transform; }
.journey.is-pinned .row { will-change: transform, opacity; }

/* Tiles inside the visual regions */
.tile { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow-float); font-size: 14px; line-height: 1.35; font-weight: 500; flex: none; }
.tile svg { width: 22px; height: 22px; flex: none; color: var(--teal); }
.summary { align-self: flex-start; margin: 0; min-width: min(64%, 280px); padding: 10px 14px; display: grid; gap: 5px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow-float); font-size: 13.5px; line-height: 1.4; }
.summary div { display: flex; justify-content: space-between; gap: 16px; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 500; }

/* ── Office side (white) ── */
.office { padding: 96px 0 80px; }
@media (min-width: 900px) { .office { padding: 128px 0 112px; } }
.office-head { max-width: 760px; }
.office-head .body-lg { margin-top: 20px; }
.office { overflow-x: clip; } /* the mockup bleeds past the right edge; clip it so the page never scrolls sideways */
.office-grid { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 900px) { .office-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 64px; align-items: start; margin-top: 64px; } }
/* The team-view screenshot runs off the right edge of the screen; only its left corners are rounded. */
.ui-preview { aspect-ratio: 16 / 10; margin: 0 calc(-1 * var(--wrap-left) - 8px) 0 0; background: var(--paper); border: 1px solid var(--grey-ui-line); border-right: 0; border-radius: 28px 0 0 28px; overflow: hidden; }
.ui-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.explain { margin: 0; display: grid; gap: 28px; }
.explain dt { font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.explain dd { margin: 8px 0 0; max-width: 480px; }

/* ── Integration: copy left, a wall of apricot PVS/calendar logos right, bleeding off the screen and fading out ── */
.integrate { display: grid; gap: 48px; margin-top: 88px; }
@media (min-width: 900px) { .integrate { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; margin-top: 112px; } .integrate-copy { order: 2; } .logo-wall { order: 1; } }
.integrate-copy .body-lg { margin-top: 20px; max-width: 560px; }
.points { margin: 32px 0 0; display: grid; gap: 22px; max-width: 560px; }
.points dt { font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.points dd { margin: 6px 0 0; }
/* The logo field: four lanes drifting right → left at different speeds (seamless: each lane holds its set twice
   and travels exactly one set width), fading in at the right edge and out at the left. Small per-logo offsets keep it loose. */
.logo-wall { display: grid; gap: 8px; padding: 12px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%); }
@media (min-width: 900px) { .logo-wall { gap: 20px; margin-left: calc(-1 * var(--wrap-left) - 16px); padding: 24px 0; } }
.lane { overflow: visible; padding: 12px 0; } /* the wall clips horizontally; lanes must not clip the vertical offsets */
.lane-track { display: flex; width: max-content; animation: drift var(--dur, 50s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform; }
.lane-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
@media (min-width: 900px) { .lane-set { gap: 84px; padding-right: 84px; } }
.lane-set img { height: 40px; width: auto; flex: none; transform: translateY(var(--dy, 0)); }
.lane-set img.icon { height: 54px; }
@media (min-width: 900px) { .lane-set img { height: 46px; } .lane-set img.icon { height: 62px; } }
@keyframes drift { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .lane-track { animation: none; } }

/* ── FAQ (white): questions left, the park photograph right, the photo dropping a third of its height
   into the teal band below. --faq-overlap is that third, so the closing band can make room for it. ── */
:root { --faq-overlap: calc((100vw - 48px) * .25); }                                    /* 4:3 photo, full width */
@media (min-width: 900px) { :root { --faq-overlap: calc((min(100vw, 1280px) - 144px) / 2 * .4167); } } /* 4:5 photo, half width */
.faq { position: relative; z-index: 2; padding: 8px 0 0; }
.faq-inner { display: grid; gap: 40px; }
@media (min-width: 900px) { .faq-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.faq-copy { padding-bottom: 72px; }
@media (min-width: 900px) { .faq-copy { padding-bottom: 112px; } }
.faq-photo { align-self: end; margin-bottom: calc(-1 * var(--faq-overlap)); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sage); box-shadow: var(--shadow-float); }
@media (min-width: 900px) { .faq-photo { aspect-ratio: 4 / 5; } }
.faq-photo { position: relative; }
.faq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Small white CarePath lockup as a watermark in the photo's top-left corner. */
.watermark { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 9px; color: var(--white); opacity: .82; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.watermark svg { display: block; height: 100%; width: auto; }
.watermark .mark { height: 26px; }
.watermark .word { height: 14px; }
@media (min-width: 900px) { .watermark { top: 24px; left: 24px; } .watermark .mark { height: 30px; } .watermark .word { height: 16px; } }
.faq-list { margin-top: 28px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0; min-height: 44px; cursor: pointer; font-size: 19px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--teal); }
.plus { position: relative; flex: none; width: 24px; height: 24px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--teal); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item p { margin: 0 0 22px; max-width: 700px; }

/* ── Closing band (teal) with the demo request ── */
.closing { background: var(--teal); color: var(--white); padding: calc(var(--faq-overlap) + 56px) 0 80px; }
.closing-grid { display: grid; gap: 40px; align-items: start; }
/* Desktop: the form takes the left column (same width as the FAQ column), the copy sits on the right
   below the overlapping photo. The form starts ~1 cm below the top of the band. */
@media (min-width: 900px) {
  .closing { padding: 40px 0 112px; }
  .closing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .closing-copy { order: 2; padding-top: calc(var(--faq-overlap) + 56px); }
  .closing .card { order: 1; }
}
.closing .body-lg { margin-top: 20px; max-width: 560px; color: rgba(255, 255, 255, .88); }
/* "Jetzt selbst ausprobieren": white card with the QR code to the demo sign-up. */
.tryout { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 16px 20px 16px 16px; max-width: 560px; background: var(--white); color: var(--ink); border-radius: 20px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.tryout:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.tryout img { width: 112px; height: 112px; flex: none; border-radius: 10px; }
.tryout-copy { display: grid; gap: 6px; min-width: 0; }
.tryout-copy b { font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.tryout-copy > span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.tryout-copy em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--teal); }
@media (max-width: 599px) { .tryout { gap: 14px; padding: 18px; } .tryout img, .tryout-copy em { display: none; } .tryout-copy b { font-size: 17px; } .tryout-copy > span { font-size: 14px; } .tryout .try-btn { margin-top: 6px; } }
.card { background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 28px 24px; }
@media (min-width: 600px) { .card { padding: 36px; } }
.form h3, .form-done h3 { margin: 0 0 20px; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 14px; line-height: 20px; font-weight: 500; }
.field .opt { color: var(--ink-2); font-weight: 400; }
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); color: var(--ink); font: 400 16px/24px var(--font); transition: border-color .2s ease; }
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.input:user-invalid { border-color: var(--error); }
.form .helper { margin: 2px 0 18px; }
.form .btn { width: 100%; }
.form-error { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--error); }
.form-done { outline: none; }
.form-done h3 { font-size: 28px; margin-bottom: 12px; }

/* ── Footer: deep teal, the brand large, three short columns, and the wordmark oversized running off the bottom ── */
.foot { position: relative; overflow: hidden; background: var(--teal-deep); color: rgba(255, 255, 255, .78); padding: 72px 0 0; }
@media (min-width: 900px) { .foot { padding-top: 96px; } }
.foot-grid { position: relative; z-index: 1; display: grid; gap: 40px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; } }
.foot-logo { color: var(--white); gap: 14px; }
.foot-logo .mark { height: 44px; }
.foot-logo .word { height: 24px; }
.foot-claim { margin-top: 22px; max-width: 360px; color: var(--white); font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.foot-by { margin-top: 14px; font-size: 14.5px; }
.foot-by a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.foot-by a:hover { border-color: var(--white); }
.foot-col { display: grid; gap: 12px; align-content: start; font-size: 15.5px; }
.foot-col h4 { margin: 0 0 6px; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apricot); }
.foot-col a { color: rgba(255, 255, 255, .82); text-decoration: none; width: max-content; max-width: 100%; transition: color .2s ease; }
.foot-col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot-wa { display: block; margin-top: 8px; }
.foot-wa img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.foot-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .55); }
@media (min-width: 900px) { .foot-bottom { margin-top: 72px; } }
/* The signature: the wordmark, huge and faint, cut by the bottom of the page. */
.foot-mark { position: relative; height: clamp(70px, 9vw, 150px); margin-top: -8px; color: rgba(255, 255, 255, .07); pointer-events: none; }
.foot-mark svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: clamp(130px, 17vw, 280px); width: auto; }

/* ── Reduced motion: nothing animates; the journey stacks (the script never pins it). ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter, .msg.typing span { animation: none; }
  .dot::before, .plus::before, .plus::after, .btn, .nav-bar { transition: none; }
}