/* ==========================================================================
   Laser Studio Kurt · Rundgang
   Tokens zuerst, dann Chrome, dann die neun Stationen in Scroll-Reihenfolge.
   ========================================================================== */

:root {
  --sc-canvas:     #F8F4EB;
  --sc-surface:    #FFFCF6;
  --sc-ink:        #1E1B16;
  --sc-ink-soft:   #5E574B;
  --sc-accent:     #5A5836;
  --sc-accent-ink: #F8F4EB;
  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;

  --sc-gutter: clamp(1.25rem, 6vw, 6rem);
  --sc-maxw: 86rem;
  --sc-section: clamp(4.5rem, 9vw, 9.5rem);

  /* Heller Grund: Schatten halb so kräftig und warm getönt. */
  --sc-shadow-color: 34 28% 28%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / .08), 0 3px 8px -2px hsl(var(--sc-shadow-color) / .08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / .06), 0 12px 28px -8px hsl(var(--sc-shadow-color) / .18);
  --sc-e3: 0 4px 10px hsl(var(--sc-shadow-color) / .06), 0 26px 50px -14px hsl(var(--sc-shadow-color) / .22), 0 60px 110px -40px hsl(var(--sc-shadow-color) / .22);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / .75);

  --line: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --line-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  --sand: #ECE4D5;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --r: 18px;

  --t-h2: clamp(2.2rem, 1.35rem + 2.9vw, 4.1rem);
  --t-hero: clamp(2.6rem, 1.1rem + 4.3vw, 5rem);
  --t-h3: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
}

html { scroll-padding-top: 84px; }
body { font-weight: 400; }
main { position: relative; z-index: 1; }
img { height: auto; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.js .no-js-only { display: none; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 12px 16px; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-canvas); text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------- type --- */
.sc-display { font-weight: 400; letter-spacing: -0.04em; }
.sc-display em, .h2 em, .trial__title em {
  font-style: italic; font-weight: 300; color: var(--sc-accent);
  letter-spacing: -0.035em;
}
.h2 { font-size: var(--t-h2); line-height: 1.04; }
.kicker {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-canvas));
}
.lede {
  font-family: var(--sc-font-display); font-weight: 300;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.45; letter-spacing: -0.015em;
  color: var(--sc-ink); max-width: 36ch; text-wrap: pretty;
}
.body { color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 48ch; }

/* ---------------------------------------------------------- controls --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.45em; border-radius: 999px;
  font: 500 0.94rem/1 var(--sc-font-text); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), scale 120ms var(--ease);
}
.btn:active { scale: .97; }
.btn--solid { background: var(--sc-ink); color: var(--sc-canvas); box-shadow: var(--sc-e2); }
.btn--ghost { border-color: var(--line-strong); color: var(--sc-ink); background: transparent; }
.btn--lg { min-height: 56px; padding: 0 2em; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: #3A352D; }
  .btn--ghost:hover { border-color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 4%, transparent); }
}
.textlink {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sc-ink); text-decoration: none; font-weight: 500; font-size: .94rem;
}
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(.35);
  transition: transform 240ms var(--ease);
}
.textlink:hover::after, .textlink:focus-visible::after { transform: scaleX(1); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

/* ------------------------------------------------ animated background --- */
.ambient {
  position: fixed; inset: -20vh -10vw; z-index: 0; pointer-events: none; overflow: hidden;
  transform: translate3d(0, 0, 0); /* Scroll-Versatz setzt site.js direkt */
}
.ambient.is-paused i { animation-play-state: paused; }
.ambient i { position: absolute; border-radius: 50%; will-change: transform; }
.ambient__a {
  width: 72vw; height: 72vw; left: -8vw; top: -6vw;
  background: radial-gradient(closest-side, rgb(232 216 186 / .7), rgb(232 216 186 / 0));
  animation: drift-a 28s ease-in-out infinite alternate;
}
.ambient__b {
  width: 58vw; height: 58vw; right: -6vw; top: 34vh;
  background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / 0));
  animation: drift-b 34s ease-in-out infinite alternate;
}
.ambient__c {
  width: 64vw; height: 64vw; left: 22vw; bottom: -24vh;
  background: radial-gradient(closest-side, rgb(214 210 180 / .5), rgb(214 210 180 / 0));
  animation: drift-c 40s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(22vw, 16vh, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-26vw, -12vh, 0) scale(.88); } }
@keyframes drift-c { to { transform: translate3d(-14vw, -20vh, 0) scale(1.12); } }
.sc-grain { opacity: .03; }  /* ohne mix-blend-mode: der zwang jeden Frame zum Mischen der ganzen Seite */
[data-sc-progress] { height: 2px; background: var(--sc-accent); z-index: 80; }

/* -------------------------------------------------------------- header --- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--sc-gutter);
  color: var(--sc-ink);
  transition: color 300ms var(--ease);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--sc-canvas) 97%, transparent);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity 300ms var(--ease), background-color 300ms var(--ease);
}
.bar.is-solid::before { opacity: 1; }
.bar[data-tone="dark"] { color: #F2EDE2; }
.bar[data-tone="dark"]::before { background: rgb(27 25 21 / .92); border-color: rgb(242 237 226 / .1); }
.bar[data-tone="dark"] .btn--solid { background: #F2EDE2; color: #1B1915; }
.bar__mark { display: block; color: inherit; border-radius: 6px; }
.bar__mark svg { width: clamp(118px, 10vw, 150px); height: auto; }
.bar__station {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity 300ms var(--ease);
}
.bar.is-solid .bar__station { opacity: 1; }
.bar__station i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.bar__station span { display: inline-block; }
.bar__station span.is-swapping { animation: swap 420ms var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }
.bar__cta { min-height: 42px; padding: 0 1.25em; font-size: .88rem; }
@media (max-width: 900px) { .bar__station { display: none; } .bar { height: 64px; } }

/* ------------------------------------------------------------ rail nav --- */
.rail {
  position: fixed; left: clamp(18px, 1.8vw, 30px); top: 50%; translate: 0 -50%;
  z-index: 65; display: none;
}
.rail ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rail::before, .rail__fill {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
}
.rail::before { background: var(--line-strong); }
.rail__fill { background: var(--sc-accent); transform-origin: top; transform: scaleY(var(--rail, 0)); }
.rail a { display: flex; align-items: center; gap: 12px; height: 12px; text-decoration: none; color: var(--sc-ink); border-radius: 6px; }
.rail a::before { content: ""; position: absolute; left: -10px; width: 32px; height: 28px; } /* größere Trefferfläche */
.rail li { position: relative; }
.rail__dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  background: var(--sc-canvas);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.rail a.is-past .rail__dot { background: var(--sc-accent); border-color: var(--sc-accent); }
.rail a[aria-current="true"] .rail__dot { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.45); }
.rail__name {
  padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap;
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e1), var(--sc-edge);
  opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.rail a:hover .rail__name, .rail a:focus-visible .rail__name { opacity: 1; transform: none; }
.rail[data-tone="dark"]::before { background: rgb(242 237 226 / .28); }
.rail[data-tone="dark"] .rail__dot { background: #1B1915; border-color: rgb(242 237 226 / .55); }
.rail[data-tone="dark"] a.is-past .rail__dot,
.rail[data-tone="dark"] a[aria-current="true"] .rail__dot { background: #CFC99F; border-color: #CFC99F; }
.rail[data-tone="dark"] .rail__fill { background: #CFC99F; }
@media (min-width: 1100px) { .rail { display: block; } }

/* Mobile: Stations-Pille unten + Liste als Popover */
.pill {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 65;
  translate: -50% 0;
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 15px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e2), var(--sc-edge);
  font: 500 .9rem/1 var(--sc-font-text); cursor: pointer;
  transition: opacity 240ms var(--ease), translate 240ms var(--ease);
}
.pill.is-hidden { opacity: 0; translate: -50% 24px; pointer-events: none; }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) { .pill { display: none; } }

.sheet {
  inset: auto 0 0 0; margin: 0 auto max(14px, env(safe-area-inset-bottom));
  width: min(92vw, 420px); padding: 18px 10px 10px;
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e3);
  opacity: 0; translate: 0 18px;
  transition: opacity 220ms var(--ease), translate 220ms var(--ease), display 220ms allow-discrete, overlay 220ms allow-discrete;
}
.sheet:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .sheet:popover-open { opacity: 0; translate: 0 18px; } }
.sheet::backdrop { background: rgb(30 27 22 / .28); }
.sheet__title { padding: 0 14px 8px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sheet ol { list-style: none; margin: 0; padding: 0; display: grid; }
.sheet a {
  display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 14px;
  color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-size: 1.05rem;
}
.sheet a[aria-current="true"] { background: color-mix(in oklab, var(--sc-accent) 12%, transparent); color: var(--sc-accent); }

/* ==========================================================================
   1 · ANKOMMEN
   ========================================================================== */
.arrive__stage {
  /* --t: Öffnen des Bogens. --e: weich ausgeglichen. --k: Rest bis offen. */
  --t: clamp(0, (var(--sc-p, 0) - 0.22) / 0.48, 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  --k: calc(1 - var(--e));
  --mx: 0; --my: 0;
  --wt: 15%; --wr: 7%; --wb: 9%; --wl: 57%; --wrad: 18vw;
}
.arrive__script {
  position: absolute; z-index: 1; left: 24vw; top: 8vh; width: 54vw;
  color: color-mix(in oklab, var(--sc-ink) 6.5%, transparent);
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--sc-p, 0) * -16vh + var(--my) * -6px), 0);
}
.arrive__script svg { width: 100%; height: auto; animation: write 2.6s .35s var(--ease) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.arrive__window {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  clip-path: inset(
    calc(var(--wt) * var(--k)) calc(var(--wr) * var(--k)) calc(var(--wb) * var(--k)) calc(var(--wl) * var(--k))
    round calc(var(--wrad) * var(--k)) calc(var(--wrad) * var(--k)) calc(16px * var(--k)) calc(16px * var(--k)));
  animation: window-in 1.5s var(--ease) both;
}
@keyframes window-in { from { opacity: 0; } }
.arrive__window picture { display: contents; }
.arrive__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 42%;
  /* Geschlossen ist das Foto verkleinert, damit der ganze Schriftzug im Bogen steht.
     Beim Öffnen wächst es auf volle Größe: man geht auf die Wand zu. */
  transform-origin: var(--po, 80% 60%);
  transform: translate3d(calc(var(--mx) * 10px * var(--k)), calc(var(--my) * 8px * var(--k)), 0) scale(calc(1 - var(--pz, .2) * var(--k)));
}
/* Ein einzelner Lichtstreif zieht beim Laden über das Foto. */
.arrive__window::after {
  content: ""; position: absolute; inset: -10% -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 252 244 / .5) 50%, transparent 58%);
  transform: translateX(-60%); animation: sheen 2.4s 1.1s var(--ease) both;
}
@keyframes sheen { to { transform: translateX(60%); } }

.arrive__scrim { z-index: 3; opacity: var(--e); }

.arrive__intro {
  position: absolute; z-index: 5; left: var(--sc-gutter); top: 50%;
  translate: 0 -44%; width: min(46rem, 50vw);
  display: grid; gap: 22px; justify-items: start;
}
.hero-title { font-size: var(--t-hero); line-height: 1; letter-spacing: -0.045em; }
.hero-title em { display: block; }
.hero-sub { max-width: 34ch; color: var(--sc-ink-soft); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); text-wrap: pretty; }
.arrive__intro .actions { margin-top: 6px; }
.arrive__intro > * { animation: intro-in 1.2s var(--ease) both; }
.arrive__intro > :nth-child(2) { animation-delay: .08s; }
.arrive__intro > :nth-child(3) { animation-delay: .16s; }
.arrive__intro > :nth-child(4) { animation-delay: .24s; }
@keyframes intro-in { from { opacity: 0; translate: 0 18px; } }

.arrive__beat {
  position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem);
  width: min(36rem, 80vw); display: grid; gap: 12px;
}
.beat-title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem); line-height: 1.02; }
.beat-title em { display: block; }
.beat-sub { color: var(--sc-ink-soft); font-size: 1.05rem; max-width: 34ch; }

@media (max-width: 760px) {
  .arrive__stage { --wt: 56%; --wr: 8%; --wb: 3.5%; --wl: 8%; --wrad: 42vw; }
  .arrive__intro { top: 92px; translate: none; width: auto; right: var(--sc-gutter); gap: 16px; }
  .hero-title { font-size: clamp(2.5rem, 11.6vw, 3.4rem); }
  .hero-sub { font-size: 1rem; }
  /* Hochformat: der Bogen sitzt unten, der Schriftzug im Foto oben. Ursprung weit
     unterhalb des Bildes schiebt den Schriftzug in den Bogen, beim Öffnen gleitet er hoch. */
  .arrive__stage { --po: 50% 328%; --pz: .16; }
  .arrive__photo { object-position: 85% 30%; }
  .arrive__script { left: 6vw; top: auto; bottom: 30svh; width: 90vw; }
  .arrive__beat { bottom: 92px; right: var(--sc-gutter); width: auto; }
  .beat-title { font-size: 2.1rem; }
}

/* ==========================================================================
   2 · SEMAH
   ========================================================================== */
.meet { padding-top: clamp(3rem, 7vw, 7rem); }
.meet__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.meet__text { display: grid; gap: 20px; justify-items: start; }
.meet__text .lede { margin-top: 8px; }
.values { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; max-width: 34rem; border-top: 1px solid var(--line); }
.values li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.values strong { font-family: var(--sc-font-display); font-weight: 500; letter-spacing: -0.01em; }
.values span { color: var(--sc-ink-soft); }
.sign { display: grid; gap: 2px; margin-top: 18px; }
.sign__name { font-family: var(--sc-font-display); font-style: italic; font-weight: 300; font-size: 2rem; letter-spacing: -0.03em; color: var(--sc-accent); }
.sign__role { font-size: .85rem; color: var(--sc-ink-soft); }

.meet__media { position: relative; min-height: min(78vh, 760px); }
.meet__media figure { margin: 0; position: absolute; overflow: hidden; }
.meet__media img { width: 100%; height: 100%; object-fit: cover; }
.meet__tall {
  right: 6%; top: 4%; width: 58%; aspect-ratio: 9 / 14;
  border-radius: 50% 50% var(--r) var(--r) / 32% 32% var(--r) var(--r);
  box-shadow: var(--sc-e2);
}
.meet__small { left: 0; top: 0; width: 30%; aspect-ratio: 760 / 988; border-radius: 12px; box-shadow: var(--sc-e2); }
.meet__portrait {
  left: 8%; bottom: 4%; width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
  border-radius: 50%; border: 6px solid var(--sc-canvas); box-shadow: var(--sc-e3);
}

@media (max-width: 900px) {
  .meet__grid { grid-template-columns: 1fr; }
  .meet__media { min-height: 0; aspect-ratio: 1 / 1.08; order: -1; }
  .values li { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   3 · STUDIO (seitliche Galerie)
   ========================================================================== */
.studio__stage { display: flex; align-items: center; }
.studio__rail {
  align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem);
  height: 100%; padding: 76px var(--sc-gutter) 0;
}
.studio__lead { flex: 0 0 min(26rem, 32vw); display: grid; gap: 18px; }
.piece { flex: none; margin: 0; display: grid; gap: 14px; }
.piece__img { overflow: hidden; box-shadow: var(--sc-e2); background: var(--sand); }
.piece__img img { width: 100%; height: 100%; object-fit: cover; }
.piece figcaption { font-size: .92rem; color: var(--sc-ink-soft); }
.piece figcaption b {
  font-family: var(--sc-font-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--sc-ink); margin-right: 8px;
}
.piece--tall { width: min(clamp(15rem, 25vw, 26rem), 42svh); }
.piece--tall .piece__img { aspect-ratio: 3 / 4.5; border-radius: 50% 50% var(--r) var(--r) / 34% 34% var(--r) var(--r); }
.piece--mid { width: min(clamp(13rem, 21vw, 22rem), 44svh); }
.piece--mid .piece__img { aspect-ratio: 4 / 5; border-radius: var(--r); }
.piece--wide { width: min(clamp(18rem, 34vw, 34rem), 76svh); }
.piece--wide .piece__img { aspect-ratio: 16 / 9; border-radius: var(--r) var(--r) 50% 50% / var(--r) var(--r) 26% 26%; }
.piece--low { margin-top: 14vh; }
.piece--high { margin-bottom: 18vh; }
.studio__note {
  flex: 0 0 min(22rem, 28vw);
  font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  line-height: 1.12; letter-spacing: -0.03em;
}
.studio__note em { display: block; font-style: italic; font-weight: 300; color: var(--sc-accent); }
@media (prefers-reduced-motion: no-preference) {
  /* Die Bilder setzen sich nacheinander, wie eine Schublade, die aufgezogen wird. */
  .studio [style*="--i"] {
    --s: clamp(0, var(--sc-p, 0) * 6 - var(--i) + 2.4, 1);
    opacity: calc(.5 + .5 * var(--s));
    transform: translate3d(0, calc((1 - var(--s)) * 36px), 0);
  }
}
@media (max-width: 760px) {
  .studio__lead { flex-basis: 74vw; }
  .studio__note { flex-basis: 70vw; }
  .piece--tall { width: min(70vw, 48svh); }
  .piece--mid { width: min(62vw, 44svh); }
  .piece--wide { width: 84vw; }
  .piece--low { margin-top: 9vh; }
  .piece--high { margin-bottom: 11vh; }
}

/* ==========================================================================
   4 · BEHANDLUNGSRAUM (Höhepunkt, dunkler Grund)
   ========================================================================== */
.room {
  --sc-canvas: #1B1915; --sc-ink: #F2EDE2; --sc-ink-soft: #BFB6A5;
  --sc-accent: #D2CCA2; --sc-accent-ink: #1B1915;
  color: var(--sc-ink);
}
.room__stage {
  background: #1B1915;
  /* Der Raum kommt als Türbogen herein und wird beim Einrasten rechteckig. */
  --door: calc(1 - var(--enter, 1));
  clip-path: inset(0 round calc(var(--door) * 50vw) calc(var(--door) * 50vw) 0 0);
  --t: clamp(0, var(--sc-p, 0) / 0.3, 1);
}
/* Lichtschein aus dem Video: strahlt vom Bogen aus und läuft vor dem Text aus. */
.room__ambient {
  position: absolute; left: -10%; top: -14%; width: 80%; height: 128%; max-width: none;
  /* Kein filter:blur mehr. Das 36x64-Canvas wird beim Hochskalieren ohnehin weich,
     und ein 70px-Blur pro Videoframe war der teuerste Effekt der Seite. */
  opacity: .42;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.room__frame {
  --fh: min(84svh, 860px);
  --fw: calc(var(--fh) * 0.5625);
  position: absolute; z-index: 2; left: max(var(--sc-gutter), 9vw); top: 50%;
  height: var(--fh); width: var(--fw);
  translate: 0 -50%;
  scale: calc(.93 + .07 * var(--t));
  border-radius: calc(var(--fw) / 2) calc(var(--fw) / 2) 22px 22px;
  overflow: hidden; background: #2A2620;
  box-shadow: 0 30px 80px -24px rgb(0 0 0 / .7), 0 0 0 1px rgb(242 237 226 / .08);
}
.room__scrim { display: none; }
.room__copy { position: absolute; z-index: 5; right: var(--sc-gutter); top: 0; bottom: 0; width: min(38rem, 44vw); }
.room__line { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: 18px; }
.room__line .kicker { color: var(--sc-ink-soft); }
.room__big {
  font-family: var(--sc-font-display); font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.7rem); line-height: 1.22; letter-spacing: -0.03em;
}
@media (max-width: 760px) {
  .room__ambient { display: none; }
  .room__frame { inset: 0; left: 0; top: 0; translate: none; width: 100%; height: 100%; border-radius: 0; scale: 1; box-shadow: none; }
  .room__scrim {
    display: block; z-index: 3;
    background: linear-gradient(to top, rgb(27 25 21 / .97) 0%, rgb(27 25 21 / .9) 34%, rgb(27 25 21 / .55) 56%, rgb(27 25 21 / 0) 76%);
  }
  .room__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 86px; top: auto; height: 50svh; }
  .room__line { top: auto; bottom: 0; translate: none; gap: 12px; }
  .room__line .h2 { font-size: 2.1rem; }
  .room__big { font-size: 1.55rem; }
}

/* ==========================================================================
   5 · TECHNIK
   ========================================================================== */
.tech { padding-top: clamp(4rem, 8vw, 8rem); }
.tech__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.tech__text { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
.tech__text > div:first-child { display: grid; gap: 20px; }

/* Hautquerschnitt: zwei Strahlen, die beim Scrollen unterschiedlich tief einfahren */
.skinview { margin: 0; display: grid; gap: 14px; max-width: 42rem; color: var(--sc-accent); }
.skinview__tags { position: relative; height: 62px; }
.skinview__tag {
  position: absolute; bottom: 0; left: var(--x); translate: -50% 0;
  display: grid; justify-items: center; gap: 1px; white-space: nowrap;
  font-size: .8rem; color: var(--sc-ink-soft);
}
.skinview__nm {
  font-family: var(--sc-font-display); font-size: 1.45rem; letter-spacing: -0.03em;
  color: var(--sc-ink); font-variant-numeric: tabular-nums;
}
.skinview__plot { position: relative; }
.skinview__plot svg { width: 100%; height: auto; display: block; border-radius: var(--r); }
.skinview__surface { stroke: color-mix(in oklab, var(--sc-ink) 40%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.skinview__edge { stroke: rgb(255 255 255 / .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.skinview__follicle { fill: none; stroke: #D3BE97; stroke-width: 14; stroke-linecap: round; }
.skinview__shaft { fill: none; stroke: var(--sc-ink); stroke-width: 3; stroke-linecap: round; }
.skinview__bulb { fill: #C9B28A; stroke: var(--sc-ink); stroke-width: 2.5; }
.skinview__glow { opacity: clamp(0, (var(--sc-p, 1) - .3) * 5, 1); }
.skinview__spot { transform-origin: 356px 268px; animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.skinview__halo { stroke: currentColor; stroke-width: 15; opacity: .16; stroke-linecap: round; }
.skinview__core { stroke-width: 5; stroke-linecap: round; }
.skinview__halo, .skinview__core { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 1)); }
.skinview__tip { fill: currentColor; opacity: clamp(0, (var(--d, 1) - .85) * 8, 1); }
.skinview__beam--a { --d: clamp(0, (var(--sc-p, 1) - .1) / .16, 1); }
.skinview__beam--b { --d: clamp(0, (var(--sc-p, 1) - .16) / .2, 1); }
.skinview__layer {
  position: absolute; left: 2.5%; top: var(--y); translate: 0 -50%;
  font-size: .78rem; line-height: 1.35; color: color-mix(in oklab, var(--sc-ink) 72%, transparent);
  max-width: 34%;
}
.skinview__layer b {
  display: block; font-family: var(--sc-font-display); font-weight: 500; font-size: .95rem;
  letter-spacing: -0.01em; color: var(--sc-ink);
}
.skinview figcaption { font-size: .88rem; color: var(--sc-ink-soft); }
@media (max-width: 560px) {
  .skinview__layer { font-size: .68rem; max-width: 40%; }
  .skinview__layer b { font-size: .8rem; }
  .skinview__nm { font-size: 1.15rem; }
  .skinview__tag { font-size: .7rem; }
}

.skin { display: grid; gap: 12px; }
.skin__label { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.skin__scale { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.skin__scale li {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c); color: var(--t, var(--sc-ink)); font-family: var(--sc-font-display); font-size: .9rem;
  box-shadow: var(--sc-e1), inset 0 0 0 1px rgb(0 0 0 / .05);
}

.tech__media { margin: 0; display: grid; gap: 14px; justify-items: center; }
.tech__frame {
  width: min(100%, 26rem); aspect-ratio: 9 / 16; overflow: hidden; background: var(--sand);
  border-radius: 50% 50% var(--r) var(--r) / 28% 28% var(--r) var(--r);
  box-shadow: var(--sc-e3);
}
.tech__frame video { width: 100%; height: 100%; object-fit: cover; }
.tech__media figcaption { font-size: .9rem; color: var(--sc-ink-soft); text-align: center; }
.tech__media figcaption b { color: var(--sc-ink); }
@media (max-width: 900px) {
  .tech__grid { grid-template-columns: 1fr; }
  .tech__frame { width: min(78vw, 22rem); }
  .skin__scale li { width: 44px; height: 44px; }
}

/* ==========================================================================
   6 · ABLAUF
   ========================================================================== */
.steps__stage { display: flex; align-items: center; }
.steps__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; padding-top: 60px; }
.steps__head { display: grid; gap: 18px; align-content: start; }
.steps__photo {
  margin: 14px 0 0; width: min(15rem, 60%); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r); box-shadow: var(--sc-e2);
}
.steps__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.steps__track { position: relative; }
.steps__line { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: var(--line-strong); }
.steps__line i {
  position: absolute; inset: 0; background: var(--sc-accent); transform-origin: top;
  transform: scaleY(clamp(0, (var(--sc-p, 1) - .04) / .66, 1));
}
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 3.2vh, 2.4rem); }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; align-items: start; }
.step__n {
  --a: clamp(0, (var(--sc-p, 1) - var(--at)) * 10, 1);
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sc-canvas); border: 1px solid var(--line-strong);
  font-family: var(--sc-font-display); font-size: 1rem; color: var(--sc-ink);
}
.step__n::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--sc-accent);
  transform: scale(calc(.4 + .6 * var(--a))); opacity: var(--a);
}
.step__n { isolation: isolate; }
.step__n::before { z-index: -1; }
.step h3 { font-family: var(--sc-font-display); font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.2; margin-top: 8px; }
.step p { margin-top: 6px; color: var(--sc-ink-soft); max-width: 46ch; }
.steps:not(.is-flow) .step__n { color: color-mix(in oklab, var(--sc-ink) calc(100% - var(--a) * 100%), var(--sc-accent-ink)); }
.steps.is-flow { padding-top: clamp(3.5rem, 8vw, 6rem); }
.steps.is-flow .step__n { --a: 1; color: var(--sc-accent-ink); }
.steps.is-flow .steps__line i { transform: none; }
@media (max-width: 900px) {
  .steps__grid { grid-template-columns: 1fr; padding-top: 0; }
  .steps__photo { display: none; }
}

/* ==========================================================================
   7 · PREISE + Zonen-Plan
   ========================================================================== */
.prices { padding-top: clamp(3.5rem, 7vw, 6rem); }
.prices__head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.planner { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.planner__main { display: grid; gap: 28px; min-width: 0; }

.seg {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; justify-self: start;
  padding: 4px; border-radius: 999px; background: var(--sand); box-shadow: inset 0 1px 2px hsl(var(--sc-shadow-color) / .12);
}
.seg button {
  position: relative; z-index: 1; min-height: 44px; min-width: 8.5rem; padding: 0 1.3em;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-weight: 500; color: var(--sc-ink-soft); transition: color 200ms var(--ease);
}
.seg button[aria-checked="true"] { color: var(--sc-canvas); }
.seg__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--sc-ink); box-shadow: var(--sc-e1);
  transition: transform 320ms var(--ease);
}
.seg[data-g="h"] .seg__thumb { transform: translateX(100%); }
.js .pricelist[hidden] { display: none; }
.pricelist { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.pricelist__title { font-family: var(--sc-font-display); font-size: var(--t-h3); }
.zgroup { display: grid; gap: 12px; }
.zgroup h4, .packs h4 {
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.zones { display: flex; flex-wrap: wrap; gap: 10px; }
.zone {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px 0 18px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--sc-surface);
  color: var(--sc-ink); cursor: pointer; box-shadow: var(--sc-e1), var(--sc-edge);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), scale 120ms var(--ease);
}
.zone:active { scale: .97; }
.zone__price { font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); transition: color 180ms var(--ease); }
.zone__tick {
  flex: none; width: 16px; height: 16px; margin-left: -2px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.zone__plus { opacity: .5; transform-origin: 8px 8px; transition: opacity 160ms var(--ease), transform 220ms var(--ease); }
.zone__check { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 280ms var(--ease); }
.zone[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.zone[aria-pressed="true"] .zone__price { color: color-mix(in oklab, var(--sc-accent-ink) 82%, transparent); }
.zone[aria-pressed="true"] .zone__plus { opacity: 0; transform: rotate(45deg) scale(.6); }
.zone[aria-pressed="true"] .zone__check { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) {
  .zone:hover { border-color: var(--line-strong); }
  .zone[aria-pressed="true"]:hover { background: #4B4A2C; }
}

/* Zwei klar getrennte Blöcke: erst Pakete, dann Einzelzonen */
.block { display: grid; gap: 16px; }
.block__head { display: grid; gap: 4px; }
.block__title { font-family: var(--sc-font-display); font-size: var(--t-h3); letter-spacing: -0.03em; }
.block__note { font-size: .92rem; color: var(--sc-ink-soft); }

.packgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcard {
  position: relative; display: grid; gap: 10px; align-content: start;
  padding: 20px 20px 18px; border-radius: 20px;
  background: var(--sc-surface); border: 1px solid var(--line); box-shadow: var(--sc-e1), var(--sc-edge);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), translate 180ms var(--ease);
}
.pcard__name { font-family: var(--sc-font-display); font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.25; padding-right: 5.5rem; }
.pcard__zones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pcard__zones li {
  padding: 4px 10px; border-radius: 999px; font-size: .8rem; color: var(--sc-ink-soft);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
}
.pcard__price {
  position: absolute; top: 18px; right: 20px; text-align: right;
  display: grid; gap: 1px; font-variant-numeric: tabular-nums;
}
.pcard__price b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.03em; }
.pcard__price s { font-size: .82rem; color: var(--sc-ink-soft); text-decoration-thickness: 1px; }
.pcard__save {
  justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 500;
  background: color-mix(in oklab, var(--sc-accent) 14%, transparent); color: var(--sc-accent);
}
.pcard__note { font-size: .8rem; color: var(--sc-ink-soft); }
.pcard__add {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; margin-top: 2px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--sc-ink);
  font: 500 .88rem/1 var(--sc-font-text); cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), scale 120ms var(--ease);
}
.pcard__add svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pcard__add:active { scale: .97; }
.pcard--whole { background: color-mix(in oklab, var(--sand) 55%, var(--sc-surface)); }
.pcard.is-in { border-color: var(--sc-accent); }
.pcard.is-in .pcard__add { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.pcard__check { display: none; }
.pcard.is-in .pcard__check { display: block; }
.pcard.is-in .pcard__plus { display: none; }
.pcard.is-flash { animation: flash 900ms var(--ease); }
@keyframes flash { 0% { border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent); } }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { border-color: var(--line-strong); translate: 0 -2px; box-shadow: var(--sc-e2); }
  .pcard__add:hover { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); }
}
@media (max-width: 1240px) { .packgrid { grid-template-columns: 1fr; } }

.trial {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px;
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
}
.trial > div { display: grid; gap: 10px; }
.trial__title { font-family: var(--sc-font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.03em; }
.trial__list { list-style: none; margin: 0; padding: 0; display: grid; }
.trial__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trial__list li:last-child { border-bottom: 0; }
.trial__list span { font-variant-numeric: tabular-nums; color: var(--sc-accent); font-weight: 600; }

/* Der Plan */
.plan {
  position: sticky; top: 96px; z-index: 5;
  border-radius: 24px; background: var(--sc-surface);
  box-shadow: var(--sc-e3), var(--sc-edge); border: 1px solid var(--line);
}
.no-js .plan, html:not(.js) .plan { display: none; }
.plan__bar { display: none; }
.plan__body { display: grid; gap: 14px; padding: 26px 24px 20px; }
.plan__title { font-family: var(--sc-font-display); font-size: 1.6rem; letter-spacing: -0.03em; }
.plan__empty { color: var(--sc-ink-soft); font-size: .95rem; }
.plan:not(.is-empty) .plan__empty { display: none; }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan__list:empty, .plan__lines:empty { display: none; }
.plan__list li button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 12px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: color-mix(in oklab, var(--sc-accent) 12%, transparent); color: var(--sc-ink); font-size: .85rem;
  animation: chip-in 280ms var(--ease) both;
}
.plan__list li button svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .6; }
@keyframes chip-in { from { opacity: 0; transform: scale(.95); } }
.plan__lines { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 6px; border-top: 1px solid var(--line); font-size: .88rem; }
.plan__lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--sc-ink-soft); }
.plan__lines li b { font-weight: 500; color: var(--sc-ink); }
.plan__lines span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan__total { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price span {
  font-family: var(--sc-font-display); font-size: 2.6rem; line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.plan__price small { font-size: .82rem; color: var(--sc-ink-soft); }
.plan__was { font-size: .88rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.plan:not(.has-pack) .plan__was { display: none; }
.plan__save {
  justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  background: color-mix(in oklab, var(--sc-accent) 14%, transparent); color: var(--sc-accent);
}
.plan:not(.has-pack) .plan__save { background: none; padding: 0; color: var(--sc-ink-soft); font-weight: 400; }
.plan.is-empty .plan__total { display: none; }
.plan__extra, .plan__hint { font-size: .88rem; color: var(--sc-ink-soft); }
.plan__save:empty, .plan__extra:empty, .plan__hint:empty { display: none; }
.plan__actions { display: grid; gap: 8px; margin-top: 4px; }
.plan__actions .btn { width: 100%; }
.plan__note { font-size: .78rem; color: var(--sc-ink-soft); }
.plan__reset {
  justify-self: start; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sc-ink-soft); font-size: .82rem; text-decoration: underline; text-underline-offset: .22em;
}
.plan.is-empty .plan__reset { display: none; }
.plan.is-bump .plan__price span { animation: bump 380ms var(--ease); }
@keyframes bump { from { transform: translateY(4px); opacity: .4; } }

@media (max-width: 1000px) {
  .planner { grid-template-columns: 1fr; }
  .plan {
    position: sticky; top: auto; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column-reverse; max-height: calc(100svh - 110px);
  }
  .plan__bar {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 20px;
  }
  .plan__count { font-size: .9rem; color: var(--sc-ink-soft); }
  .plan__sum { font-family: var(--sc-font-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; margin-right: auto; }
  .plan__toggle {
    min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--sc-ink); color: var(--sc-canvas); font-weight: 500;
  }
  .plan__body { display: none; overflow: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .plan.is-open .plan__body { display: grid; animation: sheet-in 260ms var(--ease); }
  .trial { grid-template-columns: 1fr; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 520px) {
  .seg { justify-self: stretch; }
  .seg button { min-width: 0; }
  .zone { padding: 0 12px 0 14px; gap: 8px; }
}

/* ==========================================================================
   8 · FRAGEN
   ========================================================================== */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.faq__side { display: grid; gap: 20px; position: sticky; top: 110px; }
.score {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center;
  margin-top: 14px; padding: 22px 24px; border-radius: 24px;
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
}
.score__big { font-family: var(--sc-font-display); font-size: 3.4rem; line-height: 1; letter-spacing: -0.05em; }
.stars svg { width: 104px; height: 18px; fill: var(--sc-accent); }
.score__src { font-size: .9rem; color: var(--sc-ink-soft); margin-top: 6px; }
.score__src b { font-weight: 600; color: var(--sc-ink); }
.score__note { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--sc-ink-soft); }
.score .textlink { grid-column: 1 / -1; justify-self: start; margin-top: -6px; }

.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); letter-spacing: -0.015em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary i {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong);
  transition: transform 260ms var(--ease), background-color 180ms var(--ease);
}
.faq__list summary i::before, .faq__list summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor;
  translate: -50% -50%;
}
.faq__list summary i::after { rotate: 90deg; }
.faq__list details[open] summary i { transform: rotate(45deg); background: var(--sc-ink); color: var(--sc-canvas); }
.faq__a { padding: 0 60px 22px 0; color: var(--sc-ink-soft); max-width: 60ch; }
.faq__list details[open] .faq__a { animation: faq-in 360ms var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .faq__list summary:hover i { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
}
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq__a { padding-right: 0; }
}

/* ==========================================================================
   9 · TERMIN (Empfang)
   ========================================================================== */
.close__stage {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
  padding: 96px var(--sc-gutter) 84px;
}
.close__copy { position: relative; display: grid; gap: 22px; justify-items: start; max-width: 44rem; }
.close__script {
  position: absolute; z-index: -1; left: -2%; top: -18%; width: min(34rem, 60%);
  color: color-mix(in oklab, var(--sc-accent) 16%, transparent);
}
.close__script svg { width: 100%; height: auto; clip-path: inset(0 100% 0 0); transition: clip-path 2.6s var(--ease); }
.close__script.is-written svg { clip-path: inset(0 0 0 0); }
.close__title { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.8rem); }
.close__title em { display: block; }
.close .lede { max-width: 32ch; }
.info {
  margin: 12px 0 0; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.info dt { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 8px; }
.info dd { margin: 0; line-height: 1.6; font-size: .95rem; }
.info a { color: var(--sc-ink); text-underline-offset: .22em; }
.info a[href^="tel"], .info a[href^="mailto"] { display: inline-block; padding: 4px 0; }
.close__arch {
  order: 2; justify-self: end; width: min(100%, 24rem); aspect-ratio: 9 / 15; overflow: hidden;
  border-radius: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r);
  box-shadow: var(--sc-e3);
  max-height: calc(100svh - 200px);
}
.close__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.foot {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 0;
  display: flex; align-items: center; gap: 24px; min-height: 64px;
  border-top: 1px solid var(--line); font-size: .82rem; color: var(--sc-ink-soft);
}
.foot__mark { width: 104px; height: auto; color: var(--sc-ink); }
.foot nav { margin-left: auto; display: flex; gap: 20px; }
.foot a { color: var(--sc-ink-soft); display: inline-flex; align-items: center; min-height: 44px; }

.close.is-flow { padding: 0; }
.close.is-flow .close__stage { grid-template-columns: 1fr; padding: clamp(3.5rem, 10vw, 6rem) var(--sc-gutter) 0; }
.close.is-flow .close__arch { order: -1; justify-self: center; width: min(76vw, 20rem); max-height: none; }
.close.is-flow .foot { position: static; flex-wrap: wrap; margin-top: 36px; padding: 16px 0 96px; gap: 8px 20px; }
@media (max-width: 900px) {
  .info { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------- Preise: gestaffelter Einlauf --
   Reine CSS-Animation (Opacity + Transform, backwards-Fill), damit Hover-
   Transitions der Karten danach unberührt bleiben. site.js setzt --n und .is-seen. */
@media (prefers-reduced-motion: no-preference) {
  .js .packgrid:not(.is-seen) > li, .js .zgroup:not(.is-seen) .zone { opacity: 0; }
  .packgrid.is-seen > li, .zgroup.is-seen .zone {
    animation: rise-in 520ms var(--ease) backwards;
    animation-delay: calc(var(--n, 0) * 45ms);
  }
  @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
}

/* ------------------------------------------------------ FAQ: weiches Öffnen --
   Höhe ist beim Akkordeon die einzige Option ohne Transform-Äquivalent. Nur dort,
   wo der Browser es kann; sonst bleibt das Einblenden von oben. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size 300ms var(--ease), opacity 220ms var(--ease), content-visibility 300ms allow-discrete;
  }
  .faq__list details[open]::details-content { block-size: auto; opacity: 1; }
  .faq__list details[open] .faq__a { animation: none; }
}

/* --------------------------------------------------------- focus + tone --- */
.room :focus-visible, .bar[data-tone="dark"] :focus-visible { outline-color: #D2CCA2; }

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ambient, .ambient i { animation: none; transform: none; }
  .arrive__stage { --e: 0; --k: 1; }
  .arrive__script, .arrive__photo { transform: none !important; }
  .arrive__script svg, .arrive__window, .arrive__window::after, .arrive__intro > * { animation: none; }
  .arrive__window::after { display: none; }
  .room__stage { clip-path: none; }
  .room__frame { scale: 1; }
  .close__script svg { clip-path: none; transition: none; }
  .faq__list details::details-content { transition: none; }
  .skinview__halo, .skinview__core { stroke-dashoffset: 0; }
  .skinview__glow { opacity: 1; }
  .skinview__spot { animation: none; }
  .skinview__tip { opacity: 1; }
  .steps__line i { transform: none; }
  .step__n { --a: 1; color: var(--sc-accent-ink) !important; }
  .bar__station span.is-swapping, .plan__list li button, .plan.is-open .plan__body, .faq__list details[open] .faq__a { animation: none; }
}