/* leomore v2 · Komponenten (BEM, nur Tokens). Breakpoints: 600 / 900 / 1200, Verhalten über html.pin-ok bzw. (hover: hover). */

/* ---------- Icon ---------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Wortmarke ---------- */
.wordmark { display: inline-flex; align-items: flex-end; gap: .3rem; color: var(--c-ink); text-decoration: none; }
.wordmark__type { height: 1.375rem; width: auto; }
.wordmark__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--grad); margin-bottom: .1rem; }
.chapter--night .wordmark { color: var(--c-on-night); }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 3rem; padding: .3125rem .3125rem .3125rem 1.375rem;
  border-radius: var(--r-pill); font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-fast) var(--ease-spring), background-color var(--d-base) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.btn--on-night { background: var(--c-paper); color: var(--c-ink); }
.btn__icon { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--grad); color: var(--c-ink); transition: transform var(--d-base) var(--ease-spring); }
.btn__icon .icon { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--c-night-2); }
  .btn:hover .btn__icon { transform: translateX(2px) scale(1.05); }
}
.btn--block { width: 100%; }
.btn--sm { padding-left: 1.125rem; font-size: .9375rem; }
.btn--sm .btn__icon { width: 2.25rem; height: 2.25rem; }

.link-text {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 3rem;
  font-weight: 500; text-decoration: none; color: inherit;
  background-image: var(--grad), linear-gradient(var(--c-line-strong), var(--c-line-strong));
  background-size: 0 2px, 100% 1px; background-position: 0 calc(100% - .7rem), 0 calc(100% - .7rem); background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--ease-out);
}
.link-text:hover, .link-text:focus-visible { background-size: 100% 2px, 100% 1px; }
.link-text .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--d-base) var(--ease-spring); }
.link-text:hover .icon { transform: translateX(2px); }
.chapter--night .link-text { color: var(--c-on-night); background-image: var(--grad), linear-gradient(var(--c-line-night), var(--c-line-night)); }

/* ---------- Status-Pille ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .25rem .8rem .25rem .55rem;
  border-radius: var(--r-pill); background: var(--c-paper); box-shadow: var(--sh-1), inset 0 0 0 1px var(--c-line);
  font-size: var(--t-small); font-weight: 500; color: var(--c-ink); white-space: nowrap;
}
.status-pill .icon { width: 1rem; height: 1rem; color: var(--c-ok); }
.status-pill__dot { position: relative; width: .5rem; height: .5rem; margin-inline: .2rem; border-radius: 50%; background: var(--c-ok); }
.motion-ok .status-pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-ok); animation: dot-pulse 2.4s var(--ease-out) infinite; }
@keyframes dot-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(3); opacity: 0; } }

/* ---------- Header ---------- */
.scroll-sentinel { position: absolute; top: 8px; left: 0; width: 1px; height: 1px; }
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  background: var(--c-paper);
  transition: background-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.site-header.is-scrolled { background: var(--c-paper-88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-5); height: 100%; }
.site-header__brand { margin-right: auto; display: inline-flex; align-items: center; min-height: 3rem; }
.site-nav { display: none; }
.site-nav__list { display: flex; gap: var(--s-1); }
.site-nav__link { display: inline-flex; align-items: center; min-height: 3rem; padding-inline: var(--s-3); border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--c-ink-2); transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.site-nav__link:hover { color: var(--c-ink); background: var(--c-surface); }
.site-nav__link[aria-current="page"] { color: var(--c-ink); background: var(--c-surface); }
.site-header__cta { display: none; }
.site-header__menu {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 3rem; padding: 0 var(--s-3) 0 var(--s-4);
  margin-right: calc(var(--s-3) * -1); border-radius: var(--r-pill); font-weight: 500; font-size: .9375rem; text-decoration: none; color: var(--c-ink);
}
.site-header__menu:hover { background: var(--c-surface); }
@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header__menu { display: none; }
}

/* ---------- Menü-Sheet ---------- */
.menu-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 35rem; max-height: 85svh; margin: 0 auto;
  padding: 0; border: 0; border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--c-paper); color: var(--c-ink); box-shadow: var(--sh-3); overflow: auto; overscroll-behavior: contain;
}
.menu-sheet::backdrop { background: var(--c-ink-scrim); }
.menu-sheet__panel { padding: var(--s-3) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); }
.menu-sheet__grip { display: block; width: 2.5rem; height: .3rem; margin: 0 auto var(--s-3); border-radius: var(--r-pill); background: var(--c-line-strong); touch-action: none; }
.menu-sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); touch-action: none; }
.menu-sheet__close { display: grid; place-items: center; width: 3rem; height: 3rem; margin-right: calc(var(--s-3) * -1); border-radius: 50%; }
.menu-sheet__close:hover { background: var(--c-surface); }
.menu-sheet__links { margin-bottom: var(--s-6); }
.menu-sheet__links li + li { border-top: 1px solid var(--c-line); }
.menu-sheet__link { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -.01em; text-decoration: none; }
.menu-sheet__link .icon { color: var(--c-ink-3); }
.menu-sheet__meta { margin-top: var(--s-5); font-size: var(--t-small); color: var(--c-ink-3); }
.menu-sheet__meta a { color: inherit; }
@media (min-width: 600px) {
  .menu-sheet { bottom: var(--s-4); border-radius: var(--r-card); width: calc(100% - 2 * var(--s-4)); }
}
.motion-ok .menu-sheet[open] { animation: sheet-in var(--d-base) var(--ease-spring); }
.motion-ok .menu-sheet[open]::backdrop { animation: fade-in var(--d-base) var(--ease-out); }
.motion-ok .menu-sheet.is-closing { animation: sheet-out var(--d-base) var(--ease-spring) forwards; }
.motion-fade .menu-sheet[open] { animation: fade-in 200ms var(--ease-out); }
.motion-fade .menu-sheet.is-closing { animation: fade-out 200ms var(--ease-out) forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(110%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- Daumenleiste ---------- */
.thumb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: calc(var(--thumb-h) + env(safe-area-inset-bottom));
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--c-paper); box-shadow: var(--sh-2); border-top: 1px solid var(--c-line);
}
.thumb-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.thumb-bar .btn { flex: 1; }
.thumb-bar__icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--c-surface); color: var(--c-ink); }
.thumb-bar__icon:active { transform: scale(.96); }
.js .thumb-bar { transform: translateY(110%); visibility: hidden; transition: transform var(--d-base) var(--ease-spring), visibility 0s linear var(--d-base); }
.js .thumb-bar.is-visible { transform: none; visibility: visible; transition: transform var(--d-base) var(--ease-spring), visibility 0s; }
.motion-fade .thumb-bar, .motion-fade .thumb-bar.is-visible { transition: none; }
@supports (animation-timeline: scroll()) {
  .thumb-bar::before { animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { to { transform: scaleX(1); } }
@media (min-width: 600px) {
  .thumb-bar { left: 50%; right: auto; bottom: var(--s-4); width: min(35rem, calc(100% - 2 * var(--s-4))); translate: -50% 0; min-height: 0; padding: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
  .js .thumb-bar { transform: translateY(calc(100% + var(--s-6))); }
}
@media (min-width: 900px) { .thumb-bar { display: none; } }
.has-thumb .site-footer { padding-bottom: calc(var(--thumb-h) + env(safe-area-inset-bottom) + var(--s-6)); }
@media (min-width: 900px) { .has-thumb .site-footer { padding-bottom: var(--s-7); } }

/* ---------- Brotkrumen ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--c-ink-3); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); }
.breadcrumb a { color: inherit; text-decoration: none; display: inline-block; padding-block: .75rem; }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-ink-2); padding-block: .75rem; display: inline-block; }

/* ---------- Bildrahmen (Doppelrand) ---------- */
.frame { padding: .375rem; border-radius: var(--r-card); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.frame picture { display: block; height: 100%; overflow: hidden; border-radius: var(--r-inner); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.chapter--night .frame { background: var(--c-night-2); box-shadow: inset 0 0 0 1px var(--c-line-night); }

/* ---------- Hero (Start) ---------- */
.hero { padding-block: var(--s-5) var(--section); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
.hero__eyebrow { margin-bottom: var(--s-4); }
.hero__title { max-width: 11ch; }
.hero__mark { position: relative; white-space: nowrap; }
.hero__mark::after {
  content: ""; position: absolute; left: 0; right: .04em; bottom: .02em; height: clamp(2px, .05em, 4px);
  border-radius: 2px; background: var(--grad);
}
.motion-ok .hero__mark::after { clip-path: inset(0 100% 0 0); animation: line-draw var(--d-slow) var(--ease-out) .35s forwards; }
.motion-fade .hero__mark::after { opacity: 0; animation: fade-to-1 200ms var(--ease-out) .2s forwards; }
@keyframes line-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes fade-to-1 { to { opacity: 1; } }
.hero__lead { margin-top: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.hero__actions .btn { flex: 1 1 100%; }
.hero__media { aspect-ratio: 4 / 5; }
@media (min-width: 600px) {
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__media { aspect-ratio: 3 / 2; }
}
@media (min-width: 900px) {
  .hero { padding-top: var(--s-7); }
  .hero__grid { grid-template-columns: 6fr 6fr; gap: var(--s-7); }
  .hero__media { aspect-ratio: 4 / 5; }
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
}
@supports (animation-timeline: view()) {
  .motion-ok .hero__media img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .motion-ok.pin-ok .hero__media img { animation-name: sink; animation-range: exit 0% exit 100%; }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sink { from { transform: scale(1); opacity: 1; } to { transform: scale(.96); opacity: .6; } }

/* ---------- Sektionskopf ---------- */
.section-head { display: grid; gap: var(--s-4); justify-items: start; margin-bottom: var(--s-7); }

/* ---------- Erledigt-Liste (Signatur) ---------- */
.erledigt { position: relative; padding-block: var(--section); }
.erledigt__stage { display: grid; gap: var(--s-6); }
.erledigt__head { display: contents; }
.erledigt__count {
  position: sticky; top: calc(var(--header-h) + var(--s-2)); z-index: 5; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.25rem; padding: .3rem .9rem .3rem .5rem;
  border-radius: var(--r-pill); background: var(--c-paper); box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-line);
  font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums;
}
.erledigt__meter { position: relative; width: 3rem; height: .375rem; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.erledigt__meter span { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform var(--d-base) var(--ease-out); }
.erledigt__item { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--c-line); }
.erledigt__item:last-child { border-bottom: 1px solid var(--c-line); }
.erledigt__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-surface); color: var(--c-ink); transition: background-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.erledigt__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.erledigt__title { position: relative; display: inline-block; white-space: nowrap; }
.erledigt__title::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; top: 54%; height: 2px; border-radius: 2px;
  background: var(--grad); transform-origin: left; transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.erledigt__pill { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; padding: .15rem .7rem .15rem .5rem; border-radius: var(--r-pill); background: var(--c-ok-soft); color: var(--c-ok); font-size: var(--t-small); font-weight: 600; transition: opacity var(--d-base) var(--ease-out) 120ms, transform var(--d-base) var(--ease-spring) 120ms; }
.erledigt__pill .icon { width: 1rem; height: 1rem; }
.erledigt__text { margin-top: var(--s-2); color: var(--c-ink-2); max-width: 46ch; }
.erledigt__outro { display: grid; gap: 0; justify-items: start; }
.erledigt__outro p { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -.01em; }
.erledigt__markers { display: none; }
.erledigt__list { order: 1; }
.erledigt__outro { order: 2; }

.erledigt.is-armed .erledigt__item:not(.is-done) .erledigt__title::after { transform: scaleX(0); }
.erledigt.is-armed .erledigt__item:not(.is-done) .erledigt__pill { opacity: 0; transform: translateY(4px) scale(.96); }
.erledigt.is-armed .erledigt__item:not(.is-done) .erledigt__icon { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.motion-fade .erledigt.is-armed .erledigt__item:not(.is-done) .erledigt__title::after { transform: none; opacity: 0; }
.motion-fade .erledigt.is-armed .erledigt__item:not(.is-done) .erledigt__pill { transform: none; }
.motion-fade .erledigt__title::after, .motion-fade .erledigt__pill { transition-duration: 200ms; transition-delay: 0s; }

@media (min-width: 600px) {
  .erledigt__item { grid-template-columns: 2.75rem minmax(13rem, 2fr) 3fr; align-items: start; }
  .erledigt__body { display: contents; }
  .erledigt__item .erledigt__text { margin-top: 0; }
  .erledigt__row { align-self: center; justify-content: flex-start; }
  .erledigt__item .erledigt__text { align-self: center; }
}
@media (min-width: 900px) {
  .erledigt__stage { grid-template-columns: 2fr 3fr; column-gap: var(--s-8); align-items: start; }
  .erledigt__head { display: grid; gap: var(--s-6); justify-items: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
  .erledigt__count { position: static; }
  .erledigt__list { grid-column: 2; grid-row: 1; order: 0; }
  .erledigt__outro { order: 0; }
  .erledigt__item { grid-template-columns: 2.75rem 1fr; }
  .erledigt__body { display: block; }
  .erledigt__row { justify-content: space-between; }
  .erledigt__item .erledigt__text { margin-top: var(--s-2); }
}
@media (min-width: 1200px) {
  .erledigt__stage { grid-template-columns: 5fr 7fr; }
  .erledigt__item { grid-template-columns: 2.75rem 17rem 1fr auto; column-gap: var(--s-5); align-items: center; padding-block: var(--s-4); }
  .erledigt__body, .erledigt__row { display: contents; }
  .erledigt__title { font-size: 1.25rem; justify-self: start; }
  .erledigt__pill { order: 1; }
  .erledigt__item .erledigt__text { margin-top: 0; font-size: .9375rem; }
}
.pin-ok .erledigt { height: 260vh; padding-block: 0; }
.pin-ok .erledigt__stage { position: sticky; top: 0; height: 100vh; align-content: start; align-items: start; padding-top: calc(var(--header-h) + var(--s-7)); }
.pin-ok .erledigt__head { position: static; }
.pin-ok .erledigt__item { padding-block: var(--s-3); }
.pin-ok .erledigt__markers { display: block; position: absolute; inset: 0; pointer-events: none; }
.pin-ok .erledigt__markers span { position: absolute; left: 0; width: 1px; height: 1px; top: calc(60vh + var(--k) * 20vh); }

/* ---------- Rail (Wischen + Einrasten) ---------- */
.rail {
  display: flex; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: var(--s-2) var(--s-4);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 86%; scroll-snap-align: start; }
.rail:focus-visible { outline-offset: -2px; }
.rail-dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.rail-dots span { width: .5rem; height: .5rem; border-radius: var(--r-pill); background: var(--c-line-strong); transition: width var(--d-base) var(--ease-spring), background-color var(--d-base) var(--ease-out); }
.rail-dots span.is-active { width: 1.5rem; background: var(--c-ink); }
.rail-wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 600px) { .rail > * { flex-basis: 60%; } }

/* ---------- So läuft's ---------- */
.steps { padding-top: calc(var(--section) * .6); }
.step-card { display: flex; flex-direction: column; gap: var(--s-5); padding: .375rem .375rem var(--s-6); border-radius: var(--r-card); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out); }
.step-card__frag { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); min-height: 10rem; padding: var(--s-5); border-radius: var(--r-inner); background: var(--c-paper); box-shadow: var(--sh-1); overflow: hidden; }
.step-card__frag::before, .step-card__frag::after { content: ""; position: absolute; right: var(--s-5); height: 2px; border-radius: 2px; background: var(--c-surface-2); }
.step-card__frag::before { top: var(--s-5); width: 38%; }
.step-card__frag::after { top: calc(var(--s-5) + .75rem); width: 22%; }
.step-card__num { font-family: var(--f-display); font-weight: 600; font-size: 3.75rem; line-height: .78; letter-spacing: -.04em; color: var(--c-ink); }
.step-card__body { padding-inline: var(--s-4); }
.step-card__body p { margin-top: var(--s-2); color: var(--c-ink-2); }
@media (min-width: 900px) {
  .steps .rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); overflow: visible; }
  .steps .rail > * { min-width: 0; }
  .steps .rail-dots { display: none; }
}
@media (min-width: 1200px) {
  .steps .rail { align-items: start; }
  .steps .rail > :nth-child(2) { margin-top: var(--s-8); }
  .steps .rail > :nth-child(3) { margin-top: var(--s-10); }
}
@media (hover: hover) and (pointer: fine) {
  .step-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-line); }
}

/* ---------- Arbeiten ---------- */
.work-card { display: flex; flex-direction: column; gap: var(--s-5); }
.work-card__stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; isolation: isolate; }
.device { position: absolute; background: var(--c-ink); box-shadow: var(--sh-3); }
.device__screen { position: relative; overflow: hidden; height: 100%; background: var(--c-paper); }
.device__screen picture, .device__screen img { display: block; width: 100%; height: 100%; }
.device__screen img { object-fit: cover; object-position: top; }
.device--laptop { padding: .4rem; border-radius: .9rem; aspect-ratio: 16 / 10.4; }
.device--laptop .device__screen { border-radius: .45rem; }
.device--phone { padding: .35rem; border-radius: 1.6rem; aspect-ratio: 9 / 19.5; z-index: 2; }
.device--phone .device__screen { border-radius: 1.3rem; }
.work-card .device--laptop { width: 92%; top: 7%; left: 30%; }
.work-card .device--phone { width: 58%; left: 8%; top: 18%; }
.work-card__body { display: grid; gap: var(--s-2); justify-items: start; padding-inline: var(--s-1); }
.work-card__body p { color: var(--c-ink-2); max-width: 44ch; }
.works__more { margin-top: var(--s-5); }
@media (min-width: 600px) {
  .works .rail > * { flex-basis: 80%; }
  .work-card__stage { aspect-ratio: 16 / 11; }
  .work-card .device--laptop { width: 72%; top: 9%; left: 6%; }
  .work-card .device--phone { width: 24%; left: auto; right: 7%; top: 22%; }
}
@media (min-width: 900px) {
  .works .rail { display: grid; grid-template-columns: 1fr; gap: var(--s-8); overflow: visible; }
  .works .rail-dots { display: none; }
  .work-card__stage { aspect-ratio: 16 / 10; }
  .work-card .device--laptop { width: 74%; top: 9%; left: 7%; }
  .work-card .device--phone { width: 19%; right: 9%; top: 26%; }
}
@media (min-width: 1024px) {
  .works .rail { grid-template-columns: 7fr 5fr; column-gap: var(--s-6); align-items: start; }
  .works .rail > :nth-child(2) { margin-top: var(--s-9); }
  .works .rail > :nth-child(2) .work-card__stage { aspect-ratio: 5 / 4.4; }
  .works .rail > :nth-child(2) .device--laptop { width: 86%; top: 10%; left: 5%; }
  .works .rail > :nth-child(2) .device--phone { width: 27%; right: 6%; top: 34%; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .device--laptop img { transition: object-position 1.2s var(--ease-out); }
  .work-card:hover .device--laptop img { object-position: bottom; transition-duration: 6s; }
}

/* ---------- Änderungs-Leiste ---------- */
.change__grid { display: grid; gap: var(--s-7); }
.change__media { aspect-ratio: 4 / 5; }
.change__lead { margin-top: var(--s-4); }
.track { position: relative; display: grid; gap: var(--s-6); padding-left: 2.5rem; }
.track::before, .track::after { content: ""; position: absolute; left: .6875rem; top: .75rem; bottom: .75rem; width: 2px; border-radius: 2px; }
.track::before { background: var(--c-line-strong); }
.track::after { background: var(--grad-v); transform-origin: top; }
.chapter--night .track::before { background: var(--c-line-night); }
.track__step { position: relative; }
.track__step .track__node { transition-delay: calc(var(--i, 0) * 140ms); }
.track__node { position: absolute; left: -2.5rem; top: .1rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); transition: background-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.track__node .icon { width: .875rem; height: .875rem; transition: opacity var(--d-base) var(--ease-out); }
.track__step p { margin-top: var(--s-1); color: var(--c-ink-2); }
.chapter--night .track__step p { color: var(--c-on-night-2); }
.track.is-armed .track__step:not(.is-done) .track__node { background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-line-strong); }
.chapter--night .track.is-armed .track__step:not(.is-done) .track__node { background: var(--c-night); box-shadow: inset 0 0 0 2px var(--c-line-night); }
.track.is-armed .track__step:not(.is-done) .track__node .icon { opacity: 0; }
@supports (animation-timeline: view()) {
  .motion-ok .track::after { animation: fill-y linear both; animation-timeline: view(); animation-range: entry 60% cover 60%; }
}
@keyframes fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 600px) {
  .change__grid { grid-template-columns: 5fr 7fr; column-gap: var(--s-7); row-gap: var(--s-7); }
  .change__media { grid-row: 1 / span 2; align-self: start; }
  .change__head { align-self: end; }
  .change .track { align-self: start; }
}
@media (min-width: 900px) {
  .change__grid { column-gap: var(--s-8); align-content: center; }
  .change .track__step h3, .track--wide .track__step h3 { font-size: 1.25rem; }
  .change .track__step p { font-size: .9375rem; }
  .change .track { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding-left: 0; padding-top: 2.5rem; }
  .change .track::before, .change .track::after { left: .75rem; right: .75rem; top: .6875rem; bottom: auto; width: auto; height: 2px; }
  .change .track::after { background: var(--grad); transform-origin: left; }
  .change .track__node { left: 0; top: -2.5rem; }
}
.track--wide { margin-top: var(--s-7); }
@media (min-width: 1200px) { .change__grid { grid-template-columns: 4fr 8fr; } }
@media (min-width: 900px) {
  .track--wide { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding-left: 0; padding-top: 2.5rem; }
  .track--wide::before, .track--wide::after { left: .75rem; right: .75rem; top: .6875rem; bottom: auto; width: auto; height: 2px; }
  .track--wide::after { background: var(--grad); transform-origin: left; }
  .track--wide .track__node { left: 0; top: -2.5rem; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 900px) {
    .motion-ok .change .track::after, .motion-ok .track--wide::after { animation-name: fill-x; }
  }
}

/* ---------- Statement ---------- */
.statement { padding-block: calc(var(--section) * 1.15); text-align: center; border-block: 1px solid var(--c-line); }
.statement__text { max-width: 19ch; margin-inline: auto; font-size: clamp(2.25rem, 1.3rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; }
.statement__text span { color: var(--c-ink-3); }
@supports (animation-timeline: view()) {
  .motion-ok .statement__text span { animation: tone linear both; animation-timeline: view(); animation-range: entry 100% cover 60%; }
}
@keyframes tone { from { color: var(--c-ink-3); } to { color: var(--c-ink); } }

/* ---------- Persönlich ---------- */
.people__grid { display: grid; gap: var(--s-7); }
.people__list { display: grid; }
.person { padding-block: var(--s-5); border-top: 1px solid var(--c-line); display: grid; gap: var(--s-2); align-content: start; }
.person__name { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -.025em; }
.person p:last-child { color: var(--c-ink-2); max-width: 32ch; }
.people__seat { display: grid; gap: var(--s-2); justify-items: start; padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.people__seat-line { display: flex; gap: var(--s-3); align-items: center; color: var(--c-ink-2); }
.people__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
@media (min-width: 600px) {
  .people__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}
@media (min-width: 1200px) {
  .people__grid { grid-template-columns: 5fr 7fr; column-gap: var(--s-8); align-items: start; }
  .people__grid > .t-h2 { grid-row: 1 / span 2; }
}

/* ---------- Abschluss ---------- */
.closing { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--section) * 1.1); }
.closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); transform-origin: left; transition: transform 900ms var(--ease-out); z-index: 1; }
.motion-ok .closing:not(.is-in)::before { transform: scaleX(0); }
.motion-fade .closing::before { transition: opacity 200ms var(--ease-out); }
.motion-fade .closing:not(.is-in)::before { opacity: 0; }
.closing__bg { position: absolute; inset: 0; z-index: -1; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.closing__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-night) 0%, var(--c-night-veil) 50%, transparent 100%); }
.closing__inner { display: grid; gap: var(--s-5); justify-items: start; }
.closing__title { font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; max-width: 12ch; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); width: 100%; margin-top: var(--s-2); }
.closing__actions .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .closing__actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .closing { padding-block: calc(var(--section) * 1.4); } }
@media (max-width: 899px) { .closing__bg { display: none; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s-8) var(--s-7); border-top: 1px solid var(--c-line-night); font-size: var(--t-small); }
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer__brand p { margin-top: var(--s-3); max-width: 28ch; }
.site-footer__title { font-family: var(--f-text); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-night-2); margin-bottom: var(--s-1); }
.site-footer__list a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-on-night); text-decoration: none; }
.site-footer__list a:hover, .site-footer__legal a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; color: var(--c-on-night-2); line-height: 1.7; }
.site-footer address a { color: var(--c-on-night); display: inline-block; padding-block: .6rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); justify-content: space-between; align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line-night); color: var(--c-on-night-2); }
.site-footer__legal { display: flex; gap: var(--s-5); }
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

/* ---------- Leistungen: Hero ---------- */
.page-hero { padding-block: var(--s-2) var(--section); }
.page-hero__title { max-width: 13ch; margin-top: var(--s-4); }
.page-hero__lead { margin-top: var(--s-4); }
.page-hero__actions { margin-top: var(--s-5); display: flex; }
.page-hero__actions .btn { flex: 1 1 100%; }
.page-hero__media { margin-top: var(--s-7); aspect-ratio: 1 / 1; }
@media (min-width: 600px) {
  .page-hero__actions .btn { flex: 0 0 auto; }
  .page-hero__media { aspect-ratio: 3 / 2; }
}
@media (min-width: 900px) {
  .page-hero__top { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: end; }
  .page-hero__side { padding-bottom: .4rem; }
  .page-hero__media { aspect-ratio: 21 / 9; }
}
@supports (animation-timeline: view()) {
  .motion-ok .page-hero__media img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}

/* ---------- Leistungen: Punkte (Haarlinien) ---------- */
.points { display: grid; }
.point { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-top: 1px solid var(--c-line); }
.point:last-child { border-bottom: 1px solid var(--c-line); }
.point p { color: var(--c-ink-2); max-width: 46ch; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--s-8); align-items: start; }
  .split > .section-head { position: sticky; top: calc(var(--header-h) + var(--s-6)); margin-bottom: 0; }
  .point { grid-template-columns: 1fr 1.4fr; align-items: baseline; gap: var(--s-5); }
}

/* ---------- Leistungen: Kacheln ---------- */
.tiles { display: grid; }
.tile { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-1) var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--c-line); }
.tile:last-child { border-bottom: 1px solid var(--c-line); }
.tile__icon { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-surface); }
.tile p { color: var(--c-ink-2); }
@media (min-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .tile, .tile:last-child { grid-template-columns: 1fr; align-content: start; gap: var(--s-2); padding: var(--s-5); border: 0; border-radius: var(--r-card); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
  .tile__icon { grid-row: auto; margin-bottom: var(--s-4); background: var(--c-paper); box-shadow: var(--sh-1); }
}
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .tile { padding: var(--s-6); } }

/* ---------- Leistungen: Störung (dunkel) ---------- */
.alert-block { display: grid; gap: var(--s-7); }
.alert-block__panel { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--c-night-2); box-shadow: inset 0 0 0 1px var(--c-line-night); }
.alert-block__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: var(--c-night); box-shadow: inset 0 0 0 1px var(--c-line-night); color: var(--c-on-night); }
.alert-block__row .icon { color: var(--c-yellow); }
.alert-block__row span { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 500; }
@media (min-width: 900px) { .alert-block { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: center; } }

/* ---------- Segment (Pakete) ---------- */
.segment { display: flex; gap: var(--s-1); width: max-content; max-width: 100%; padding: .3rem; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.segment::-webkit-scrollbar { display: none; }
.segment__tab { flex: none; min-height: 3rem; padding: 0 1.25rem; border-radius: var(--r-pill); font-weight: 500; color: var(--c-ink-2); scroll-snap-align: start; transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
.segment__tab:hover { color: var(--c-ink); }
.segment__tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-paper); }
.packages__panel { margin-top: var(--s-6); display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-card); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.packages__name { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.03em; }
.packages__panel p { color: var(--c-ink-2); max-width: 40ch; }
.packages__panel .packages__name { color: var(--c-ink); }
.packages__panel .btn { margin-top: var(--s-3); }
.motion-ok .packages__name.is-swap { animation: swap var(--d-base) var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 900px) {
  .packages__panel { padding: var(--s-7); }
}

/* ---------- Fair raus (Leistungen) ---------- */
.fair { text-align: center; border-block: 1px solid var(--c-line); }
.fair__title { max-width: 14ch; margin-inline: auto; font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; }
.fair p { margin: var(--s-5) auto 0; max-width: 34ch; }

/* ---------- FAQ ---------- */
.faq__list { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4rem; padding-block: var(--s-4); cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { flex: none; transition: transform var(--d-base) var(--ease-spring); }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--s-5); color: var(--c-ink-2); max-width: 56ch; }
.faq__a a { color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon, .link-text .icon, .step-card, .faq__q .icon { transition-duration: 0s; }
}