/* LaserLabs · Theme und Seitenklassen. Engine-Selektoren bleiben unberührt. */

:root {
  --sc-canvas:      #F7F1EF;   /* blasses Rosé-Weiß, die Wand im Studio, weit heller */
  --sc-surface:     #FFFFFF;
  --sc-ink:         #23191C;
  --sc-ink-soft:    #6F6166;
  --sc-accent:      #D89A2C;   /* das Senfgelb der Sessel in Graz */
  --sc-accent-ink:  #23191C;
  --sc-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ll-rose:        #E9B7BD;   /* die Wand */
  --ll-rose-soft:   #F3DFE1;
  --ll-plum:        #3B2A31;
  --sc-shadow-color: 350 20% 20%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 1px 1px hsl(var(--sc-shadow-color) / 0.06);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 24px -12px hsl(var(--sc-shadow-color) / 0.22);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 28px 60px -28px hsl(var(--sc-shadow-color) / 0.35);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.7);
  --ll-r: 14px;
}

/* Grain ohne Blend-Modus und nur viewportgroß: ein multiply-Layer über der
   ganzen Seite ließ den Compositor jeden Scroll-Frame neu mischen. */
.sc-grain { opacity: 0.028; mix-blend-mode: normal; }
.sc-grain::before { inset: 0; }
@media (max-width: 860px) { .sc-grain { display: none; } }

/* ------------------------------------------------------------ Buttons -- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.85rem 1.5rem;
  border-radius: var(--ll-r); border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e3), var(--sc-edge); background: #E2A63A; }
}
.cta:active { transform: translateY(1px) scale(0.985); }
.cta--pill { border-radius: 999px; padding: 0.95rem 1.75rem 0.95rem 1.9rem; font-weight: 500; letter-spacing: 0.01em; }
.cta__arrow { display: inline-block; transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover .cta__arrow { transform: translateX(3px); } }
.cta--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px var(--sc-hairline-strong); }
@media (hover: hover) and (pointer: fine) { .cta--ghost:hover { background: var(--sc-surface); } }

/* ---------------------------------------------------------------- Bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: block; }
.bar__logo { height: 34px; width: auto; }
.bar__logo--light { display: none; }
.bar--light .bar__logo--light { display: block; }
.bar--light .bar__logo--dark { display: none; }
.bar__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.55rem 0.95rem; border-radius: var(--ll-r);
  background: color-mix(in oklab, var(--sc-surface) 94%, transparent);
  box-shadow: var(--sc-e1); text-decoration: none;
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  transition: background 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.bar--light .bar__phone { background: rgba(35,25,28,0.42); color: #FBF4F1; }

/* --------------------------------------------------------------- Hero -- */
.hero {
  --sc-canvas: #2A2124;            /* der Scrim mischt zur Bühne, nicht zur Seite */
  --sc-ink: #FBF4F1; --sc-ink-soft: #E4D6D2;
  color: var(--sc-ink);
  background: #6A5E5C;
}
.hero__plane { position: absolute; inset: 0; will-change: transform; }
.hero__plane img { position: absolute; max-width: none; }
.hero__plate { z-index: 1; }
.hero__plate img { inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 55% 40%; }
.hero__title { z-index: 4; display: flex; align-items: flex-start; padding: clamp(6.5rem, 14vh, 11rem) var(--sc-gutter) 0; }
.hero__h1 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 300;
  font-size: clamp(3.4rem, 1rem + 7.6vw, 8.6rem); line-height: 0.92; letter-spacing: -0.03em;
  color: #FBF4F1; text-wrap: balance; font-variation-settings: "opsz" 72;
}
.hero__h1 em { font-style: italic; font-weight: 300; color: var(--ll-rose); }
.hero__subject { z-index: 5; }
.hero__subject img {
  left: auto; right: -7%; bottom: 0; top: auto;
  height: 92%; width: auto;
}
.hero__haze { z-index: 2; pointer-events: none; opacity: 0.5; }   /* kein screen-Blend: der lief pro Frame über den ganzen Viewport */
.hero__haze img { inset: -8%; width: 116%; height: 116%; object-fit: cover; }
.hero__scrim { z-index: 3; --sc-scrim-a: 90%; }   /* Haze und Scrim liegen nur auf der Wand, nicht auf Titel und Person */
.hero__copy { z-index: 6; max-width: min(34rem, 76vw); }
.hero__kicker {
  display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.1rem;
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ll-rose);
}
.hero__kicker::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.85; }
.hero__lede {
  margin: 0 0 1.8rem; max-width: 24rem;
  font-family: var(--sc-font-display); font-weight: 300; font-style: normal;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.32; letter-spacing: -0.005em;
  color: #F6ECE8; text-wrap: pretty;
}
.hero__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero__more {
  color: #F6ECE8; font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 1px solid rgba(246,236,232,0.4);
  transition: border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .hero__more:hover { border-color: var(--sc-accent); color: #FFFFFF; } }
.hero__beat { z-index: 6; max-width: min(34rem, 76vw); }
.hero__beat-line {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); line-height: 1.08; color: #FBF4F1;
}

/* ------------------------------------------------------------- Wählen -- */
.choose { padding: clamp(3rem, 6vw, 6rem) 0 clamp(6rem, 10vw, 10rem); }
.choose__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.choose__kicker { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.2rem; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.choose__kicker::before { content: ""; width: 2.25rem; height: 1px; background: var(--sc-accent); }
.choose__h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.choose__lede { margin: 0 0 0.35rem; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; max-width: 40ch; text-wrap: pretty; }
.choose__groups { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.choose__label { margin: 0 0 1.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--sc-hairline); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.choose__label-t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.015em; }
.choose__hint { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* Pakete: Bildkarten */
.pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.pkg {
  display: flex; flex-direction: column; padding: 0; margin: 0; text-align: left; cursor: pointer;
  border: 0; border-radius: calc(var(--ll-r) + 4px); overflow: hidden;
  background: var(--sc-surface); color: var(--sc-ink); font: inherit;
  box-shadow: 0 0 0 1px var(--sc-hairline), var(--sc-e1);
  transition: transform 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out);
}
.pkg__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ll-rose-soft); }
.pkg__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
.pkg__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(59,42,49,0.22), transparent 45%); pointer-events: none; }
.pkg__check {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: inline-grid; place-items: center; color: transparent;
  background: rgba(255,255,255,0.94); border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow: var(--sc-e1); transition: background 160ms, border-color 160ms, color 160ms, transform 160ms var(--sc-ease-out);
}
.pkg__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.15rem 1.2rem; }
.pkg__name { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.5rem); line-height: 1.12; letter-spacing: -0.015em; }
.pkg__desc { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; text-wrap: pretty; }
.pkg__price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; padding-top: 0.75rem; border-top: 1px solid var(--sc-hairline); font-variant-numeric: tabular-nums; }
.pkg__now { font-family: var(--sc-font-display); font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1; letter-spacing: -0.01em; }
.pkg__was { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.pkg__unit { flex-basis: 100%; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: 0.01em; }
@media (hover: hover) and (pointer: fine) {
  .pkg:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--sc-hairline-strong), var(--sc-e3); }
  .pkg:hover .pkg__media img { transform: scale(1.04); }
}
.pkg:active { transform: translateY(0); }
.pkg[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ll-plum), var(--sc-e2); }
.pkg[aria-pressed="true"] .pkg__check { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); transform: scale(1.08); }
.pkg[aria-pressed="true"] .pkg__now { color: var(--ll-plum); }

/* Einzelzonen: Menükarte mit Punktlinie */
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 0; }
.row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%;
  padding: 0.85rem 0.25rem; margin: 0; border: 0; border-bottom: 1px solid var(--sc-hairline);
  background: transparent; color: var(--sc-ink); font: inherit; text-align: left; cursor: pointer;
  transition: background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.row__check { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--sc-hairline-strong); display: inline-grid; place-items: center; color: transparent; transition: background 140ms, border-color 140ms, color 140ms; }
.row__name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.row__lead { flex: 1 1 auto; min-width: 1rem; height: 0.55em; align-self: flex-end; margin: 0 0.15rem 0.35rem; border-bottom: 1px dotted var(--sc-hairline-strong); opacity: 0.8; }
.row__price { display: inline-flex; align-items: baseline; gap: 0.5rem; font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--sc-t-base); white-space: nowrap; }
.row__was { color: var(--sc-ink-soft); font-weight: 400; font-size: var(--sc-t-xs); }
@media (hover: hover) and (pointer: fine) { .row:hover { background: color-mix(in oklab, var(--ll-rose-soft) 55%, transparent); } .row:hover .row__check { border-color: var(--sc-ink); } }
.row[aria-pressed="true"] { color: var(--ll-plum); }
.row[aria-pressed="true"] .row__check { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.row[aria-pressed="true"] .row__name { font-weight: 500; }

.choose__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--sc-hairline); }
.choose__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.choose__trust span { display: inline-flex; align-items: center; gap: 0.55rem; }
.choose__trust span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sc-accent); }

/* ------------------------------------------------------------ Technik -- */
.tech { padding: clamp(4rem, 8vw, 8rem) 0 clamp(2rem, 5vw, 5rem); }
.tech__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tech__h2 { margin: 0 0 1.25rem; font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.tech__body { max-width: 52ch; }
.tech__spec { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.tech__spec > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--sc-hairline); }
.tech__spec dt { margin: 0; white-space: nowrap; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400; letter-spacing: -0.01em; }
.tech__spec dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-align: right; }
.tech__figure { position: relative; min-height: 34rem; display: flex; align-items: flex-end; justify-content: center; }
.tech__disc { position: absolute; left: 50%; top: 50%; width: min(34rem, 70%); aspect-ratio: 1; margin: -17rem 0 0 min(-17rem, -35%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F6E1E3, var(--ll-rose) 60%, #E4AEB5 100%); box-shadow: var(--sc-e3); }
.tech__device { margin: 0; position: relative; width: min(16rem, 40vw); }
.tech__device img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(35,25,28,0.35)); }

/* ------------------------------------------------------------ Studios -- */
.studios { display: flex; align-items: center; }
.rail { gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail > * { flex: none; }
.rail__lead { width: min(26rem, 70vw); display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-right: 1rem; }
.rail__h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.025em; }
.studio {
  width: min(24rem, 78vw); display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem; border-radius: calc(var(--ll-r) + 6px); background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
  transition: box-shadow 200ms var(--sc-ease-out), outline-color 200ms;
  outline: 2px solid transparent; outline-offset: 0;
}
.studio--picked { outline-color: var(--sc-accent); }
.studio__photo { aspect-ratio: 16 / 9; border-radius: var(--ll-r); overflow: hidden; background: var(--ll-rose-soft); }
.studio__photo img { width: 100%; height: 100%; object-fit: cover; }
.studio__photo--soon { display: grid; place-items: center; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.studio__name { margin: 0.9rem 0 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1; }
.studio__addr, .studio__hours { margin: 0; font-size: var(--sc-t-sm); }
.studio__hours { color: var(--sc-ink-soft); }
.pick {
  margin-top: auto; align-self: flex-start;
  min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--ll-r);
  border: 1.5px solid var(--sc-ink); background: transparent; color: var(--sc-ink);
  font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer;
  transition: background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .pick:hover { background: var(--sc-ink); color: #FBF4F1; } }
.pick:active { transform: translateY(1px); }
.studio--picked .pick { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.rail__note { width: min(24rem, 78vw); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.rail__note img { width: 100%; height: auto; border-radius: var(--ll-r); }
/* Staggered settle from --sc-p; the first item is exempt, floor at 0.55. */
@media (prefers-reduced-motion: no-preference) {
  .rail > :nth-child(2) { opacity: calc(0.55 + 0.45 * min(1, var(--sc-p, 1) * 4)); }
  .rail > :nth-child(3) { opacity: calc(0.55 + 0.45 * min(1, max(0, var(--sc-p, 1) - 0.12) * 4)); }
  .rail > :nth-child(4) { opacity: calc(0.55 + 0.45 * min(1, max(0, var(--sc-p, 1) - 0.3) * 4)); }
  .rail > :nth-child(5) { opacity: calc(0.55 + 0.45 * min(1, max(0, var(--sc-p, 1) - 0.5) * 4)); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { padding-block: 1rem; }
}

/* ------------------------------------------------------------ Stimmen -- */
.voice { padding: clamp(5rem, 12vw, 12rem) 0 clamp(7rem, 14vw, 14rem); }
.voice__inner { display: grid; justify-items: center; text-align: center; gap: 2rem; }
.voice__quote { margin: 0; max-width: 34ch; }
.voice__quote p { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 1rem + 2.4vw, 3.1rem); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.voice__by { margin-top: 1.25rem; font-family: var(--sc-font-text); font-style: normal; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.voice__rating { margin: 0; display: inline-flex; align-items: center; gap: 0.7rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.voice__rating img { height: 1.1rem; width: auto; }
.voice__rating strong { color: var(--sc-ink); font-weight: 600; }

/* --------------------------------------------------------------- Dock -- */
.dock { display: flex; flex-direction: column; justify-content: space-between; padding-top: 4.5rem; }
.dock__inner { flex: 1; display: flex; align-items: center; padding: 0 var(--sc-gutter); }
.dock__panel {
  width: 100%; max-width: 72rem; margin-inline: auto;
  border-radius: calc(var(--ll-r) + 10px); background: var(--sc-surface);
  box-shadow: var(--sc-e3), var(--sc-edge);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  transform-origin: 50% 100%;
}
.dock__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 3rem; align-items: end; padding-bottom: 1.25rem; border-bottom: 1px solid var(--sc-hairline); }
.dock__h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.025em; }
.dock__lede { margin: 0; color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; }
.dock__body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem 3rem; padding-top: 1.5rem; }
.dock__label { margin: 1.25rem 0 0.6rem; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 600; display: flex; gap: 0.6rem; align-items: baseline; }
.dock__label:first-child { margin-top: 0; }
.dock__zones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--sc-t-sm); }
.dock__zones li { display: flex; justify-content: space-between; gap: 1rem; }
.dock__zones li span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.dock__empty { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.dock__empty a, .dock__totals a { color: var(--sc-ink); font-weight: 500; }
.dock__totals { margin: 1rem 0 0; display: grid; gap: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.dock__totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.dock__totals dt { margin: 0; color: var(--sc-ink-soft); }
.dock__totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.dock__totals > div:first-child dd { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1; }
.dock__save[hidden] { display: none; }
.days, .times { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.day, .slot {
  min-height: 2.75rem; padding: 0.45rem 0.8rem; border-radius: var(--ll-r);
  border: 1.5px solid var(--sc-hairline-strong); background: var(--sc-surface); color: var(--sc-ink);
  font-size: var(--sc-t-sm); font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background 120ms var(--sc-ease-out), border-color 120ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.day { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 4rem; }
.day small { color: var(--sc-ink-soft); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .day:hover, .slot:hover { border-color: var(--sc-ink); } }
.day:active, .slot:active { transform: translateY(1px); }
.day[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--ll-plum); border-color: var(--ll-plum); color: #FBF4F1; }
.day[aria-pressed="true"] small { color: #D9CBCF; }
.slot[disabled] { cursor: not-allowed; opacity: 0.4; text-decoration: line-through; }
.dock__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.25rem; }
.dock__fields label { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--sc-t-xs); font-weight: 600; color: var(--sc-ink-soft); }
.dock__fields input { min-height: 2.9rem; padding: 0.5rem 0.8rem; border-radius: var(--ll-r); border: 1.5px solid var(--sc-hairline-strong); background: var(--sc-surface); font-size: var(--sc-t-base); font-weight: 400; color: var(--sc-ink); }
.dock__fields input:focus-visible { border-color: var(--sc-accent); }
.dock__cta { width: 100%; margin-top: 1rem; }
.dock__note { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: var(--ll-r); background: var(--ll-rose-soft); font-size: var(--sc-t-sm); }
.dock .choose__trust { margin-top: 0.8rem; font-size: var(--sc-t-xs); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.25rem var(--sc-gutter) max(1.25rem, env(safe-area-inset-bottom)); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot img { height: 26px; width: auto; }
.foot p { margin: 0; }
.foot a { color: var(--sc-ink); }

/* --------------------------------------------------------- Laufzettel -- */
.slip {
  position: fixed; left: 50%; bottom: max(0.9rem, env(safe-area-inset-bottom)); z-index: var(--sc-z-chrome);
  transform: translate(-50%, 140%);
  display: flex; align-items: stretch; gap: 0.25rem;
  padding: 0.4rem; border-radius: calc(var(--ll-r) + 6px);
  background: color-mix(in oklab, var(--ll-plum) 97%, transparent);
  color: #FBF4F1; box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255,255,255,0.12);
  max-width: calc(100vw - 2 * var(--sc-gutter));
  transition: transform 460ms var(--sc-ease-drawer), opacity 300ms var(--sc-ease-out), visibility 0s linear 460ms;
  opacity: 0; pointer-events: none; visibility: hidden;
}
.slip--on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s, 0s, 0s; }
.slip__step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  min-width: 8.5rem; min-height: 3rem; padding: 0.45rem 0.9rem; border: 0; border-radius: var(--ll-r);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
  transition: background 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .slip__step:hover { background: rgba(255,255,255,0.08); } }
.slip__step--done { background: rgba(255,255,255,0.06); }
.slip__k { font-size: var(--sc-t-xs); color: #C9B9BF; letter-spacing: 0.02em; }
.slip__v { font-size: var(--sc-t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.slip__step--done .slip__v { color: #F2D9A0; }
.slip__sum { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0.45rem 1rem; border-left: 1px solid rgba(255,255,255,0.14); min-width: 7rem; }
.slip__total { white-space: nowrap; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.slip__mins { font-size: var(--sc-t-xs); color: #C9B9BF; }
.slip__cta { align-self: center; margin-left: 0.35rem; }
.slip__stamp { animation: stamp 420ms var(--sc-ease-out); }
@keyframes stamp { from { transform: scale(0.96); } to { transform: none; } }

@media (max-width: 1100px) and (min-width: 861px) {
  .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- Mobile -- */
@media (max-width: 860px) {
  .bar__logo { height: 28px; }
  .bar__phone span { display: none; }
  .bar__phone { padding: 0.55rem; }
  .hero__title { padding-top: 6rem; z-index: 6; }         /* Headline vor der Person */
  .hero__subject { z-index: 4; }
  .hero__scrim { z-index: 5; }                              /* Band-Scrim über der Person, unter der Kopie */
  .hero__copy { z-index: 7; }
  .hero__h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .hero__subject img { right: -18%; height: 74%; }
  .hero__copy { bottom: 6.5rem; max-width: none; }
  .hero__lede { font-size: clamp(1.15rem, 1rem + 1.2vw, 1.4rem); max-width: 22rem; margin-bottom: 1.3rem; }
  .hero__actions { gap: 1.1rem; }
  .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .pkg__body { padding: 0.85rem 0.85rem 0.95rem; }
  .menu { grid-template-columns: 1fr; }
  .choose__foot .cta { width: 100%; }
  .hero__beat { display: none; }
  .choose__head, .tech__grid, .dock__head, .dock__body, .dock__fields { grid-template-columns: 1fr; }
  .tech__figure { min-height: 22rem; order: -1; }
  .tech__device { width: min(9rem, 40vw); }
  .tech__disc { width: 70%; margin: -35% 0 0 -35%; }
  .tech__spec { grid-template-columns: 1fr; }
  .studio { width: min(20rem, 80vw); }
  .rail__lead { width: 76vw; }
  .dock { padding-top: 4rem; }
  .dock__inner { align-items: flex-start; overflow-y: auto; }
  .dock__panel { padding: 1rem; }
  .dock__h2 { font-size: var(--sc-t-2xl); }
  .foot { display: none; }
  .slip { left: 0.75rem; right: 0.75rem; transform: translate(0, 140%); max-width: none; flex-wrap: wrap; gap: 0.2rem; }
  .slip--on { transform: none; }
  .slip__step { min-width: 0; flex: 1 1 30%; padding: 0.4rem 0.6rem; }
  .slip__v { max-width: 100%; }
  .slip__sum { flex: 1 1 40%; border-left: 0; align-items: flex-start; padding: 0.3rem 0.6rem; }
  .slip__cta { flex: 1 1 50%; margin: 0; }
}
@media (max-width: 400px) {
  .hero__h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .chips--wide .chip { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__plane { transform: none !important; }
  .slip { transition: opacity 200ms; }
  .slip__stamp { animation: none; }
}

/* Das Dock klappt aus dem Laufzettel auf: vom unteren Rand nach oben, aus --sc-p. */
@media (prefers-reduced-motion: no-preference) {
  .dock__panel {
    transform: translate3d(0, calc((1 - min(1, var(--sc-p, 1) * 2.4)) * 34vh), 0)
               scale(calc(0.94 + 0.06 * min(1, var(--sc-p, 1) * 2.4)));
    will-change: transform;
  }
}

/* Mobile: Band-Scrim unter der Hero-Kopie, kompaktes Dock, das in 100svh passt */
@media (max-width: 860px) {
  .hero__scrim {
    background: linear-gradient(to top,
      #2A2124 0%, rgba(42,33,36,0.94) 26%, rgba(42,33,36,0.62) 48%, rgba(42,33,36,0.18) 64%, transparent 78%);
  }
  .dock { padding-top: 3.6rem; }
  .dock__inner { padding: 0 0.75rem; }
  .dock__panel { padding: 0.9rem 0.9rem 0.8rem; border-radius: 18px; }
  .dock__head { padding-bottom: 0.6rem; gap: 0.25rem; }
  .dock__h2 { font-size: var(--sc-t-xl); }
  .dock__lede { font-size: var(--sc-t-xs); max-width: none; }
  .dock__body { gap: 0.6rem; padding-top: 0.6rem; }
  .dock__label { margin: 0.6rem 0 0.4rem; font-size: var(--sc-t-xs); }
  .dock__zones, .dock__empty, .dock__totals { font-size: var(--sc-t-xs); }
  .dock__totals { margin-top: 0.4rem; padding-top: 0.4rem; gap: 0.15rem; }
  .dock__totals > div:first-child dd { font-size: var(--sc-t-lg); }
  .days, .times { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .days::-webkit-scrollbar, .times::-webkit-scrollbar { display: none; }
  .day, .slot { flex: none; min-height: 2.75rem; }
  .day { min-width: 4.4rem; }
  .dock__fields { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
  .dock__fields label { font-size: 0.7rem; }
  .dock__fields input { min-height: 2.75rem; font-size: 1rem; }
  .dock__cta { margin-top: 0.6rem; min-height: 2.9rem; }
  .dock .choose__trust { display: none; }
  .dock__note { font-size: var(--sc-t-xs); }
}
.dock__panel { max-width: min(72rem, 100%); }
.dock__body > *, .dock__form, .dock__summary, .dock__fields > label { min-width: 0; }
.dock__fields input { width: 100%; min-width: 0; }

/* Der letzte Akt: der Laufzettel wird zur Bühne. Pflaume als Grund, das Panel hell darauf. */
.foot { color: #C9B9BF; }
.foot a { color: #FBF4F1; }
.foot img { filter: invert(1) brightness(1.6); }
@media (prefers-reduced-motion: no-preference) {
  .dock__panel {
    transform: translate3d(0, calc((1 - min(1, var(--sc-p, 1) * 2.4)) * 46vh), 0)
               scale(calc(0.9 + 0.1 * min(1, var(--sc-p, 1) * 2.4)));
  }
}