/* ==========================================================================
   /scroll page styles. Themes the scrollcraft engine with the brand tokens
   from the Brand Language Reference (Notion) / site/styles.css, then lays
   out the eight parts of the evening. Engine selectors are never restyled.
   ========================================================================== */

@font-face {
  font-family: "Euclid Flex Medium Regular";
  src: url("/assets/euclid-flex-medium.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Brand tokens, verbatim names and values. */
  --blue: #0008A8;
  --blue-bright: #151ED9;
  --blue-hover: #8489ED;
  --dark: #181818;
  --dark-2: #0C0C0D;
  --white: #FFFFFF;
  --off-white: #F6F6F4;
  --gold: #D9B45E;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 14px;
  --radius-sm: 8px;

  /* Caudex = Nevio's voice and headings; Libre Baskerville = other people's
     quotes only, always upright (Brand Language Reference). */
  --font-heading: "Caudex", Georgia, serif;
  --font-body: "Euclid Flex Medium Regular", "Roboto", system-ui, sans-serif;
  --font-accent: "Libre Baskerville", Georgia, serif;

  /* The engine's six roles, on the dark stage. Ink-soft is a warm tint of the
     ink, never flat grey (taste floor). Accent here is only the focus ring and
     selection: brand blue on #181818 would be ~1.3:1, so the dark ground uses
     --blue-hover for state, which the brand doc allows for hover/focus. */
  --sc-canvas: #181818;
  --sc-surface: #181818;
  --sc-ink: #EEEDEA;
  --sc-ink-soft: #C9C5BD;
  --sc-accent: #8489ED;
  --sc-accent-ink: #0C0C0D;
  --sc-font-display: var(--font-heading);
  --sc-font-text: var(--font-body);
}

/* No prices on the website (Nevio, 29.09.2026): the package cards carry none. */

::selection { background: var(--blue); color: var(--white); }

/* Paper register: transactional and read-heavy parts. Restating `color` with
   the token is required, or text keeps the body's computed ink (taste.md). */
.paper, .voices__paper, .packages, .reserve {
  --sc-canvas: var(--off-white);
  --sc-surface: var(--white);
  --sc-ink: #181818;
  --sc-ink-soft: #5B5955;
  --sc-accent: var(--blue);
  --sc-accent-ink: var(--white);
  color: var(--sc-ink);
  background: var(--off-white);
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; background: var(--white); color: var(--dark); padding: .6rem 1rem; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------ type ----- */
.display {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(3.2rem, 2rem + 6vw, 7rem); }
.display--lg { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.8rem); }
.display--md { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.3rem); }
.lede { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.45; margin: 0; text-wrap: pretty; }
.body { color: var(--sc-ink-soft); max-width: 58ch; margin: 0; text-wrap: pretty; }
/* Lining figures wherever the face offers them (dates, "30 Minuten"). */
body { font-variant-numeric: lining-nums; }

/* The brand's signature kicker: uppercase, 0.22em tracking, a short rule
   before it. Always gold, on dark and on paper alike. Used at most once per three parts. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem; margin: 0;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }

/* ---------------------------------------------------------- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85rem 1.6rem; border-radius: 999px;
  font: 500 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: 0 8px 24px -8px rgba(0, 8, 168, .55); }
/* On the dark stage a blue pill needs an edge to clear 3:1 against #181818. */
.btn--primary { border-color: color-mix(in oklab, var(--white) 26%, transparent); }
.paper .btn--primary, .packages .btn--primary, .reserve .btn--primary { border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--white); color: var(--blue); border-color: var(--blue); }
  .btn--ghost:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
}
.btn--ghost { background: transparent; color: inherit; border-color: color-mix(in oklab, currentColor 45%, transparent); }
.btn--sm { min-height: 40px; padding: .6rem 1.15rem; font-size: .92rem; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* -------------------------------------------------------- programme ---- */
.programme {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--sc-gutter);
  pointer-events: none;
  color: var(--sc-ink);
  transition: color 240ms var(--ease);
}
.programme > * { pointer-events: auto; }
.programme__mark { display: flex; align-items: center; flex-shrink: 0; }
/* The live header's logo (brain + blue puzzle piece), same 40px and the same
   soft white glow that keeps its black linework readable over dark photos. */
.programme__mark img {
  height: 40px; width: auto; display: block;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 8px rgba(255, 255, 255, .5));
}
.programme__folio { display: none; margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-ink-soft); }
/* On wide screens the programme is a quiet running order set in the bar,
   read left to right like the evening itself. (A margin column was tried
   first and collided with the intro photo and the rail's lead.) Current
   part gets the gold rule. */
.programme nav { margin-inline: auto; }
.programme__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 1.8vw, 2rem); }
.programme__list a {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: color-mix(in oklab, currentColor 58%, transparent);
  padding: .2rem 0;
  transition: color 200ms var(--ease);
}
.programme__list a::before { content: ""; width: .6rem; height: 1px; background: currentColor; transition: width 240ms var(--ease), background-color 240ms var(--ease); }
.programme__list a[aria-current="step"] { color: var(--sc-ink); }
.programme__list a[aria-current="step"]::before { width: 1.6rem; background: var(--gold); }
@media (hover: hover) and (pointer: fine) { .programme__list a:hover { color: var(--sc-ink); } }
/* Over paper parts the chrome re-inks itself (page.js sets data-ground). */
html[data-ground="paper"] .programme { color: #181818; --sc-ink: #181818; --sc-ink-soft: #5B5955; }
html[data-ground="paper"] .programme__list a[aria-current="step"]::before { background: var(--blue); }
/* Bar sits on photography at the top of the hero; a soft top shade keeps the
   wordmark legible without a full-width bar. */
.programme::before {
  content: ""; position: absolute; inset: 0 0 -2rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
  opacity: 0; transition: opacity 240ms var(--ease);
}
html[data-scrolled] .programme::before { opacity: 1; }
html[data-ground="paper"] .programme::before { background: linear-gradient(to bottom, color-mix(in oklab, var(--off-white) 88%, transparent), transparent); }

@media (max-width: 1180px) {
  .programme nav { display: none; }
  .programme__folio { display: block; margin-right: auto; margin-left: 1.25rem; }
}
@media (max-width: 860px) {
  /* Phones: a soft fade is not enough. Copy scrolls right under the logo and
     the pill, so once the page moves the bar gets a solid ground of its own. */
  .programme::before { inset: 0; background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); box-shadow: 0 1px 0 rgba(238, 237, 234, .08); }
  html[data-ground="paper"] .programme::before { background: color-mix(in oklab, var(--off-white) 96%, transparent); box-shadow: 0 1px 0 rgba(24, 24, 24, .08); }
}
@media (max-width: 560px) {
  .programme { padding-block: .75rem; }
  .programme__mark img { height: 34px; }
  /* Phones: the programme folds to one folio line beside the logo. */
  .programme__folio { margin: 0 auto 0 .7rem; font-size: .7rem; letter-spacing: .12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .programme__cta { padding-inline: .95rem; font-size: .86rem; }
}

/* ------------------------------------------------------ 1 · einlass ---- */
/* Three planes cut from one real photograph (Kulturrausch Bürglen). Plate and
   subject share the exact same framing (both full-frame, same object-fit and
   position), so they line up pixel for pixel at p = 0. Both scale from his
   feet (--foot): the subject grows faster than the room, which reads as depth
   and always covers the inpainted patch behind him instead of revealing it.
   The copy is the live homepage's hero, same place and same parts: centred
   at the bottom, badge, headline with the blue bar, sub, two pills. */
.hero__stage { --fit: 50% 60%; --foot: 20% 95%; background: var(--sc-canvas); isolation: isolate; }
.hero__plate, .hero__subject { position: absolute; inset: 0; margin: 0; transform-origin: var(--foot); }
.hero__plate img, .hero__subject img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fit); }
.hero__plate { z-index: 0; transform: scale(calc(1 + var(--sc-p, 0) * .05)); }
/* The room dims as the second line arrives. */
.hero__dim { position: absolute; inset: 0; z-index: 1; background: var(--sc-canvas); opacity: calc(.22 + var(--sc-p, 0) * .36); }
.hero__subject { z-index: 2; transform: scale(calc(1 + var(--sc-p, 0) * .09)); }
/* Near atmosphere: warm stage haze in front of him that lifts fastest. */
.hero__haze {
  position: absolute; z-index: 3; left: -10%; right: -10%; bottom: -30%; height: 70%;
  background: radial-gradient(45% 40% at 30% 60%, rgba(217, 180, 94, .12), transparent 70%);
  transform: translate3d(0, calc(var(--sc-p, 0) * -26vh), 0);
  filter: blur(8px);
}
/* The live hero's vignette (same stops), then its multiply "spotlight" that
   only darkens the bright patches right behind the headline. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(12, 12, 13, .5) 0%, rgba(12, 12, 13, .05) 30%, rgba(12, 12, 13, .25) 58%, rgba(12, 12, 13, .9) 100%);
}
.hero__spot {
  position: absolute; z-index: 4; left: 50%; bottom: 0; width: min(64rem, 100%); height: 70%; translate: -50% 0;
  background: radial-gradient(ellipse 58% 58% at 50% 56%, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .34) 48%, transparent 78%);
  mix-blend-mode: multiply; pointer-events: none;
}

.hero__copy {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(56px, 9vw, 110px);
  display: grid; justify-items: center; text-align: center;
}
/* Cred line: the first version's quiet gold kicker instead of a pill badge. */
/* The old site's opening badge: a glass pill with five gold stars. */
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  font-size: .82rem; letter-spacing: .08em; color: #fff;
  background: rgba(12, 12, 13, .34); border: 1px solid rgba(255, 255, 255, .28);
  padding: 8px 18px 8px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__stars { color: var(--gold); letter-spacing: 2px; font-size: .9rem; }
/* The line sits where the bar's lamps are brightest: a soft local shade
   behind it (on the copy block, not a pill) keeps the small gold caps at
   4.5:1 over the brightest lamp. */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -1.1rem; width: min(30rem, 100%); height: 3.2rem; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(12, 12, 13, .78), rgba(12, 12, 13, .45) 62%, transparent);
  /* Leaves with the copy (cue 0 → .46, .16 fade), never lingers on the room. */
  opacity: clamp(0, calc((.46 - var(--sc-p, 0)) / .16), 1);
}
.hero__title {
  margin: 0; max-width: 16ch;
  font-family: var(--font-heading); font-weight: 400; line-height: 1.15;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.hero__title .hl { background: linear-gradient(180deg, transparent 62%, var(--blue-bright) 62%); padding: 0 .05em; }
.hero__sub {
  max-width: 46ch; margin: 22px auto 36px;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); color: rgba(255, 255, 255, .86);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
.hero__actions { display: flex; gap: 1.6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero__ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
/* The old site's scroll hint: a thin line with a dot running down it. */
.hero__scrolldown {
  position: absolute; z-index: 6; bottom: 22px; left: 50%; translate: -50% 0; width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, 0) 100%);
}
.hero__scrolldown::after {
  content: ""; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: hero-scrolldown 2.2s ease-in-out infinite;
}
@keyframes hero-scrolldown { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { top: 40px; opacity: 0; } }
@keyframes hero-scrolldown-m { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { top: 20px; opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .hero__ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } }
/* Second line: his own words, so the heading face (Caudex), same place. */
.hero__second {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(80px, 14vh, 150px);
  margin: 0 auto; max-width: 18ch; text-align: center;
  font-family: var(--font-heading); font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); line-height: 1.15;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
/* Desktop: he stands in front of the vignette, lit while the room dims
   around him (the first version's plastic depth). The copy never crosses
   him at this width. Phones keep him under the scrim, where it does. */
@media (min-width: 861px) {
  .hero__subject { z-index: 5; }
  .hero__copy, .hero__second { z-index: 6; }
}
@media (max-width: 860px) {
  /* Phone framing keeps him in the left third (the live phone crop loses him);
     the copy stays centred at the bottom, pills side by side to stay low. */
  .hero__stage { --fit: 14% 100%; --foot: 36% 97%; }
  /* Phone score (index.html *-m cues): the copy starts leaving with the first
     pixel of a swipe and the second line lands within one swipe. The push-in
     is gentler here; on a narrow crop the same scale reads as a lurch. */
  .hero__plate { transform: scale(calc(1 + var(--sc-p, 0) * .03)); }
  .hero__subject { transform: scale(calc(1 + var(--sc-p, 0) * .05)); }
  .hero__copy::before { opacity: clamp(0, calc((.36 - var(--sc-p, 0)) / .32), 1); }
  .hero__copy { bottom: 44px; }
  .hero__badge { margin-bottom: 16px; font-size: .7rem; letter-spacing: .04em; padding: 6px 12px 6px 10px; gap: 7px; }
  .hero__stars { font-size: .72rem; letter-spacing: 1px; }
  /* One line on a phone: the award, without the association. */
  .hero__badge-more { display: none; }
  .hero__actions .btn { padding-inline: 1.25rem; }
  .hero__scrolldown { bottom: 10px; height: 26px; }
  .hero__scrolldown::after { animation-name: hero-scrolldown-m; }
  .hero__sub { margin: 14px auto 22px; font-size: 1.02rem; max-width: 30ch; }
  .hero__actions { gap: 1.2rem; flex-wrap: nowrap; }
}
@media (max-width: 860px) and (max-height: 700px) {
  /* Short phones: the headline lands where the live vignette is still light. */
  .hero__scrim { background: linear-gradient(180deg, rgba(12, 12, 13, .55) 0%, rgba(12, 12, 13, .15) 22%, rgba(12, 12, 13, .62) 48%, rgba(12, 12, 13, .95) 100%); }
}
@media (max-width: 380px) {
  .hero__actions .btn { padding-inline: 1.2rem; }
}

/* ------------------------------------------------------- 2 · nevio ---- */
.intro { position: relative; }
.intro__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.intro__photo { margin: 0; }
.intro__frame { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.intro__frame img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%; }
.intro__frame[data-about-fit="intro"] img { object-position: 38% 40%; }
.intro__frame[data-about-fit="n110"] img { object-position: 50% 30%; }
.intro__copy { max-width: 36rem; }
.intro__copy .lede { color: var(--sc-ink); }
/* Room to breathe: the story is read, not scanned. More air between the
   title, the two paragraphs and the awards, and a looser line. */
.intro__copy.sc-stack > h2 { margin-top: 1.1rem; }
.intro__copy .lede { margin-top: 1.9rem; line-height: 1.62; }
.intro__copy .body { margin-top: 1.5rem; line-height: 1.75; }
.intro__copy .facts { margin-top: 3.2rem; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.5rem 2.5rem; margin: 2.25rem 0 0; }
/* Four entries: 2 × 2, as on phones. Four across doesn't fit the text
   column, and a single fourth entry on its own row looks like a leftover. */
.facts:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 13rem)); gap: 1.75rem 3rem; }
/* The awards that aren't in the numbers: one quiet line under them. */
.intro__awards { margin-top: 1.75rem; font-size: 1rem; line-height: 1.5; color: var(--sc-ink-soft); }
.facts div { display: grid; gap: .3rem; max-width: 13rem; }
.facts dt { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.facts dd { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--sc-ink-soft); }
/* Vertraut von: the first proof after the hero. The seven live-site clients,
   logos flattened to white, each in its own ruled cell so no logo outshouts
   another. Still grid = Reduce Motion and no JS; page.js 7 sets
   .trust--moving and the cells drift by as one slow strip (two rows against
   each other on phones, .trust--two). Hover, a first tap or keyboard
   focus stops the strip, lights one logo, dims the rest and writes the
   client's name under the rule with the blue bar; a click (on touch: the
   second tap) opens their site. */
.trust { margin-bottom: clamp(5rem, 11vw, 9rem); display: grid; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
.trust__head { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.trust__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.trust__rail { min-width: 0; }
.trust__logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-block: 1px solid rgba(238, 237, 234, .14);
}
.trust__logos li { display: grid; height: clamp(5.5rem, 8vw, 7.5rem); }
.trust__logos li + li { border-left: 1px solid rgba(238, 237, 234, .14); }
.trust__logos a, .trust__logos li > img { position: relative; display: grid; place-items: center; padding: 0 clamp(.8rem, 1.6vw, 1.6rem); }
.trust__logos a:not([href]) { cursor: default; }
.trust__logos img { max-height: 38px; max-width: 100%; width: auto; filter: brightness(0) invert(1); opacity: .86; transition: opacity .45s var(--ease), transform .45s var(--ease); }
/* The lit cell: the brand's blue bar drawn along the cell's own bottom rule. */
.trust__logos a::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
  background: var(--blue-hover); transform: scaleX(0); transition: transform .45s var(--ease);
}
.trust__logos a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .trust__logos:has(a[href]:hover) img { opacity: .3; }
  .trust__logos a[href]:hover img { opacity: 1; transform: translateY(-2px) scale(1.05); }
  .trust__logos a[href]:hover::after { transform: scaleX(1); }
}
.trust__logos:has(a:focus-visible) img { opacity: .3; }
.trust__logos a:focus-visible img { opacity: 1; }
.trust__logos a:focus-visible::after { transform: scaleX(1); }
/* Touch: the first tap lights a logo (page.js), across both phone rows. */
.trust__rail.has-lit .trust__logos img { opacity: .3; }
.trust__rail.has-lit .trust__logos a.is-lit img { opacity: 1; transform: scale(1.05); }
.trust__logos a.is-lit::after { transform: scaleX(1); }
/* Who you are pointing at, under the rule. Height reserved so nothing moves. */
.trust__who {
  margin: 1rem 0 0; min-height: 1.6rem; text-align: center;
  display: flex; justify-content: center; align-items: baseline; gap: .7rem;
  opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.trust__who.is-on { opacity: 1; transform: none; }
.trust__who b { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; }
.trust__who small { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-ink-soft); }
/* On touch the name is the second tap's target: it opens the site too. */
@media (hover: none) {
  .trust__who { cursor: pointer; }
  .trust__who small { color: var(--blue-hover); }
}

/* Moving strip. overflow: clip (not hidden) so a keyboard focus can never
   scroll the rail sideways; page.js brings a focused cell into view itself. */
.trust--moving .trust__rail {
  overflow: hidden; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.trust--moving .trust__logos {
  display: flex; width: max-content;
  will-change: transform;
  animation: trust-drift var(--trust-duration, 40s) linear infinite;
}
/* Every cell carries its own left rule, so one set measures the same as its
   copy and the loop never jumps by a pixel. */
.trust--moving .trust__logos li { flex: none; width: clamp(8rem, 15vw, 13.5rem); border-left: 1px solid rgba(238, 237, 234, .14); }
.trust--moving .trust__rail:has(a:hover, a:focus-visible) .trust__logos,
.trust--moving .trust__rail.has-lit .trust__logos { animation-play-state: paused; }
/* Phones: the second half of the list drifts the other way, one rule
   between the rows. */
.trust--two .trust__logos--b { border-top: 0; animation-direction: reverse; }
@keyframes trust-drift {
  to { transform: translateX(calc(-1 * var(--trust-distance, 50%))); }
}
@media (max-width: 860px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__frame { aspect-ratio: 4 / 5; max-height: 78svh; margin-inline: auto; }
  .facts { grid-template-columns: 1fr 1fr; }
  .trust:not(.trust--moving) .trust__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .trust:not(.trust--moving) .trust__logos li { border-bottom: 1px solid rgba(238, 237, 234, .14); }
  .trust:not(.trust--moving) .trust__logos li + li { border-left: 0; }
  .trust:not(.trust--moving) .trust__logos li:nth-child(even) { border-left: 1px solid rgba(238, 237, 234, .14); }
  .trust:not(.trust--moving) .trust__logos li:last-child { grid-column: 1 / -1; }
  .trust__logos li { height: 5rem; }
  .trust__logos img { max-height: 30px; }
  .trust--two .trust__logos li { width: 6.75rem; height: 4.25rem; }
  .trust--two .trust__logos a { padding: 0 .9rem; }
  .trust--two .trust__logos img { max-height: 24px; }
}

/* ---------------------------------------------------- 2b · programm ---- */
/* The printed programme handed out at the door: paper on the dark stage, set
   straight (the place card later is the tilted, personal one). Names the two
   formats before the first begins; each row jumps to its part. */
.programm { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
.progcard {
  --sc-ink: #181818; --sc-ink-soft: #5B5955;
  width: min(30rem, 100%); margin-inline: auto;
  background: var(--off-white); color: var(--sc-ink);
  border-radius: 6px; padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 60px -30px rgba(0, 0, 0, .8);
  text-align: center;
}
.progcard__kicker { margin: 0 0 .7rem; font-size: .84rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.progcard__list { list-style: none; margin: 0; padding: 0; border-top: 3px double rgba(24, 24, 24, .5); }
.progcard__list li { border-bottom: 1px solid rgba(24, 24, 24, .14); }
.progcard__list a {
  display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; align-items: baseline;
  padding: 1rem .2rem; text-align: left; color: inherit; text-decoration: none;
}
.progcard__no { grid-row: 1 / span 2; font-family: var(--font-heading); font-size: 1.5rem; color: var(--blue); text-align: right; font-variant-numeric: normal; }
.progcard__name { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1.1; transition: color 200ms var(--ease); }
.progcard__what { font-size: 1.02rem; color: var(--sc-ink-soft); margin-top: .2rem; }
@media (hover: hover) and (pointer: fine) { .progcard__list a:hover .progcard__name { color: var(--blue); } }
.progcard__list a:focus-visible, .progcard__main:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
/* Act III: the whole evening that I and II build up to. Set apart below the
   double rule on the brand blue, larger, as the main course of the card. */
.progcard__main {
  display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; align-items: baseline; text-align: left;
  margin-top: 1.1rem; padding: 1.3rem 1.2rem 1.4rem .6rem; border-radius: 4px;
  background: var(--blue); color: #fff; text-decoration: none;
  box-shadow: 0 18px 36px -18px rgba(0, 8, 168, .7);
}
.progcard__main .progcard__no { grid-row: 1 / span 3; color: var(--blue-hover); font-size: 1.9rem; align-self: center; }
.progcard__tag { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-hover); }
.progcard__main .progcard__name { font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.7rem); margin-top: .15rem; }
.progcard__main .progcard__what { color: rgba(255, 255, 255, .92); font-size: 1.05rem; }
/* Says what the card is: formats to book, not a running order. Quiet, no sales voice. */
.progcard__intro { margin: 0 auto 1.3rem; max-width: 28ch; font-size: 1.05rem; line-height: 1.45; color: var(--sc-ink-soft); text-wrap: balance; }
.progcard__intro:empty, .progcard__more:empty { display: none; }
.progcard__more { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.3rem; font-size: .95rem; color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0, 8, 168, .3); padding-bottom: .1rem; }
.progcard__more::after { content: "\2192"; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .progcard__more:hover { border-bottom-color: var(--blue); } .progcard__more:hover::after { transform: translateX(3px); } }
.progcard__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .progcard__main:hover { background: var(--blue-bright); } .progcard__main:hover .progcard__name { color: #fff; } }


/* ------------------------------------------------------ 3 · hautnah ---- */
.tables__stage { display: flex; align-items: center; }
.tables__rail {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 6rem);
  padding-inline: var(--sc-gutter);
  width: max-content;
}
/* Rail items are sized in vw, not svh: height-based sizing let a 1920px
   screen outgrow the rail (measured overflow 0, i.e. a pan that never moves).
   In vw the rail overflows by ~0.7 of a viewport on every desktop. */
.tables__lead { width: 28vw; display: grid; gap: 1.1rem; }
.tables__lead .lede { color: var(--sc-ink); }
.tables__item { margin: 0; display: grid; gap: .9rem; }
.tables__item img { width: 36vw; height: auto; max-height: 64svh; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.tables__item--tall img { width: 26vw; aspect-ratio: 3 / 4; max-height: 70svh; }
.tables__rail { gap: 6vw; }
/* Without this the flex items shrink to fit the stage and the overflow the
   pan depends on disappears (measured: every item at ~55-75% of its size). */
.tables__rail > * { flex-shrink: 0; }
/* One label schema for every table: place in gold caps, then what happens. */
.tables__item figcaption { font-size: 1.12rem; line-height: 1.4; color: var(--sc-ink); margin-top: .7rem; }
.tables__item figcaption b { display: block; font-weight: 400; font-size: .86rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.tables__quote { margin: 0; width: 24vw; }
.tables__quote p { margin: 0; font-family: var(--font-accent); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.3; }
/* Testimonial attribution, one rule for every quote on the page: name on the
   first line (larger, heavier, full ink), company or description below. */
.tables__quote footer, .show__quote footer, .voices__lead footer, .voices__more footer {
  display: flex; flex-direction: column; gap: .2rem; margin-top: 1.3rem;
  font-size: 1.05rem; line-height: 1.35; color: var(--sc-ink-soft);
}
.tables__quote footer > :first-child, .show__quote footer > :first-child,
.voices__lead footer > :first-child, .voices__more footer > :first-child {
  font-size: 1.22rem; font-weight: 600; letter-spacing: .005em; color: var(--sc-ink);
}
/* Items after the first settle in as the rail arrives; the floor opacity keeps
   an unsettled item reading as arriving, not as failing to load. */
@media (prefers-reduced-motion: no-preference) {
  .tables__rail > :nth-child(n+2) {
    opacity: clamp(.55, calc(.55 + (var(--sc-p, 0) * 4.2 - var(--i, 1) * .7)), 1);
  }
}
.tables__rail > :nth-child(2) { --i: 0; }
.tables__rail > :nth-child(3) { --i: 1; }
.tables__rail > :nth-child(4) { --i: 2; }
.tables__rail > :nth-child(5) { --i: 3; }

/* The place card: a folded table card on the last table. Paper on the dark
   stage, the name in the brand's literary face (the "personal" register). */
.placecard { width: clamp(18rem, 24vw, 28rem); display: grid; gap: 1.1rem; justify-items: start; }
.placecard__note { margin: 0; font-family: var(--font-heading); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem); line-height: 1.25; color: var(--sc-ink); max-width: 20ch; }
.placecard__card {
  position: relative; width: 100%;
  background: var(--off-white); color: #181818;
  border-radius: 6px; padding: 2.4rem 1.6rem 1.6rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 40px -18px rgba(0, 0, 0, .7), 0 6px 12px -6px rgba(0, 0, 0, .5);
  transform: rotate(-1.5deg);
}
/* The fold of a tent card, a hairline and a faint shade above it. */
.placecard__fold { position: absolute; left: 0; right: 0; top: 1.3rem; height: 1px; background: rgba(24, 24, 24, .12); }
.placecard__fold::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.3rem; background: linear-gradient(to top, rgba(24, 24, 24, .05), transparent); }
.placecard__label { display: block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: .4rem; }
.placecard__input {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--blue); background: transparent; border-radius: 0;
  padding: .3rem 0 .4rem; color: #181818;
  font-family: var(--font-accent); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  caret-color: var(--blue);
}
/* An empty card shows a blinking pen caret before the placeholder, so it reads
   as "write here" before anyone touches it. The native caret takes over on focus. */
.placecard__field { position: relative; display: block; }
.placecard__caret {
  position: absolute; left: 0; top: .5rem; bottom: .65rem; width: 2px; background: var(--blue);
  /* Always rendered and always running; only its visibility follows the
     field. Safari does not reliably start an animation on an element that a
     :placeholder-shown rule switches from display:none, so the caret sat
     still on iPhones. Explicit stops, no steps(), for the same reason. */
  visibility: hidden; animation: pc-caret 1.1s linear infinite;
}
/* The placeholder is a single space: an empty line with the pen caret reads as
   "write here"; a printed «Dein Vorname» read as a card already filled in. */
.placecard__input:placeholder-shown:not(:focus) { text-indent: .5rem; }
/* Builder switch (data-demo): page.js writes a sample name in ink once and
   erases it, the caret riding at its end. Same box as the input's text. */
.placecard__demo {
  position: absolute; left: 0; top: 0; padding: .3rem 0 .4rem .5rem; pointer-events: none; white-space: nowrap;
  font-family: var(--font-accent); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: normal; color: #181818;
}
.placecard__caret { transform: translateX(var(--pc-demo-w, 0px)); }
.placecard__input:placeholder-shown:not(:focus) + .placecard__caret { visibility: visible; }
@keyframes pc-caret { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.placecard__card { cursor: text; }
.placecard__input::placeholder { color: var(--blue-hover); opacity: 1; }
.placecard__save {
  margin-top: 1rem; min-height: 40px; padding: .5rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font: inherit; font-size: .92rem; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 8, 168, .3); transition: transform 150ms var(--ease), background-color 150ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .placecard__save:hover { background: var(--blue-bright); transform: translateY(-1px); } }
.placecard__save:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.placecard__input:focus { outline: none; border-bottom-color: var(--blue-bright); box-shadow: 0 3px 0 -1px rgba(0, 8, 168, .18); }
/* The instruction under the card, said plainly (without it the card reads as
   decoration); page.js swaps it for «Gemerkt, …» once a name is written. */
.placecard__status { margin: 0; min-height: 1.5em; font-size: 1.08rem; line-height: 1.45; color: var(--gold); max-width: 26ch; }

@media (max-width: 860px) {
  .tables__rail { padding-inline: var(--sc-gutter); gap: 2rem; }
  .tables__lead { width: 78vw; }
  .tables__quote { width: 74vw; }
  .placecard { width: 82vw; }
  /* Every item fits the screen width on its own, so the pan never parks on
     a half-cut photo or half a sentence: wide photos by width, the tall one
     capped by height. */
  .tables__rail { gap: 12vw; }
  .tables__item img { width: 84vw; height: auto; max-height: none; }
  .tables__item--tall img { width: min(66vw, 52svh * .75); }
}
/* Phones with Reduce Motion read Hautnah top to bottom: a pan cannot move
   there, so page.js turns the act into a flow (data-sc-act-mr) and drops the
   pan, and the rail becomes a column. */
html.sc-phone-reduce .tables { padding-block: clamp(4.5rem, 16vw, 6rem) 2rem; }
html.sc-phone-reduce .tables__stage { display: block; }
html.sc-phone-reduce .tables__rail { flex-direction: column; align-items: stretch; width: auto; gap: 3rem; }
html.sc-phone-reduce .tables__rail > * { opacity: 1; }
html.sc-phone-reduce .tables__lead, html.sc-phone-reduce .tables__quote, html.sc-phone-reduce .placecard { width: auto; }
html.sc-phone-reduce .tables__item img, html.sc-phone-reduce .tables__item--tall img { width: 100%; height: auto; max-height: none; }
html.sc-phone-reduce .tables__item--tall img { aspect-ratio: 4 / 5; }
html.sc-phone-reduce .placecard { padding-bottom: 1rem; }

/* ----------------------------------------------------- 4 · licht aus ---- */
/* Authored silence. Tall on purpose; the one line holds the middle. */
.blackout { min-height: 120svh; display: grid; place-items: center; padding: 0 var(--sc-gutter); }
@media (max-width: 860px) {
  /* The line rides the middle of the screen (sticky) for the whole black
     stretch and leaves with it as the stage comes up: no empty black before
     or after it. */
  .blackout { min-height: 140svh; display: block; padding-block: calc(50svh - .7em); }
  .blackout__line { position: sticky; top: calc(50svh - .7em); text-align: center; }
}
.blackout__line { margin: 0; font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); color: var(--sc-ink-soft); }

/* ------------------------------------------------------ 5 · immersiv ---- */
.show__stage { background: #07080a; }
/* Phones: the stage slides up out of «Licht aus», and the two blacks met in a
   visible edge. A feather from the page's own black over the stage's top
   hides the seam; it is gone (p ≈ .09) just before the light snaps on. */
@media (max-width: 860px) {
  .show__stage::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 4; pointer-events: none;
    background: linear-gradient(to bottom, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 35%, transparent 100%);
    opacity: clamp(0, calc(1 - var(--sc-p, 0) * 11), 1);
  }
}
.show__reduced { display: none; }
.show__copy {
  position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem);
  max-width: min(40rem, 50vw); display: grid; gap: 1.1rem; margin: 0;
}
.show__copy .lede { max-width: 26ch; }
.show__call { margin: 0; font-family: var(--font-heading); font-size: clamp(2.2rem, 1.6rem + 2.8vw, 4.4rem); line-height: 1.06; text-wrap: balance; }
.show__call b { font-weight: 400; color: var(--gold); }
.show__quote p { margin: 0; font-family: var(--font-accent); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.35; }
/* Lead scrim, strengthened a touch: the stage floor under the copy is lit. */
.show__scrim { opacity: 1; }
@media (max-width: 860px) {
  .show__copy { right: var(--sc-gutter); max-width: none; bottom: 7svh; }
  .show__scrim { background: linear-gradient(to top, color-mix(in oklab, #07080a 94%, transparent) 0%, color-mix(in oklab, #07080a 72%, transparent) 30%, transparent 62%); }
}
@media (max-width: 860px) and (max-height: 700px) {
  /* Compact phones: the longer room line climbs higher, so the scrim does too. */
  .show__scrim { background: linear-gradient(to top, color-mix(in oklab, #07080a 95%, transparent) 0%, color-mix(in oklab, #07080a 84%, transparent) 45%, transparent 82%); }
}

/* ------------------------------------------------------- 6 · stimmen ---- */
/* House lights up: the paper wipes in over the dark stage (the grammar's
   second hard cut), then everything on it is still. */
.voices { background: transparent; }
.voices__inner { padding-block: clamp(6.5rem, 14vw, 13rem); display: grid; gap: clamp(5rem, 10vw, 9rem); }
/* The heading is a section label in its own column, set small and upright,
   so it never competes with the lead quote beside it. */
.voices__top { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.voices__head { padding-top: 1rem; border-top: 1px solid var(--sc-ink); display: grid; gap: .9rem; }
.voices__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.2; max-width: 16ch; }
.voices__lead { margin: 0; position: relative; }
/* A hanging blue guillemet marks it as a voice, not a headline. */
.voices__lead::before {
  content: "«"; position: absolute; left: -.08em; top: -.52em;
  font-family: var(--font-accent); font-size: clamp(5rem, 3rem + 6vw, 9rem); line-height: 1; color: var(--blue);
}
.voices__lead p { margin: 0; padding-top: clamp(2.6rem, 1.5rem + 3vw, 4.4rem); max-width: 34ch; font-family: var(--font-accent); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem); line-height: 1.4; text-wrap: balance; }
/* Three smaller voices as newspaper columns: column rules between them,
   upright serif at reading size, full ink. */
.voices__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; border-top: 1px solid rgba(24, 24, 24, .16); }
.voices__more blockquote { margin: 0; padding: 2.2rem clamp(1.8rem, 3.6vw, 3.6rem) .4rem; }
.voices__more blockquote:first-child { padding-left: 0; }
.voices__more blockquote + blockquote { border-left: 1px solid rgba(24, 24, 24, .16); }
.voices__more p { margin: 0; font-family: var(--font-accent); font-size: 1.08rem; line-height: 1.7; color: var(--sc-ink); hyphens: auto; }

/* In den Medien: a newspaper page. Double rule masthead, three clippings in
   ruled columns, outlet mark on top, the published headline large. */
.press { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); margin-top: clamp(1.5rem, 4vw, 4rem); padding-top: 1.4rem; border-top: 3px double var(--sc-ink); }
.press__head { padding-bottom: 1.6rem; border-bottom: 1px solid var(--sc-ink); text-align: center; }
.press__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.01em; }
.press__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.press__seal { display: grid; justify-items: center; }
.press__seal[hidden] { display: none; }
.press .press__seal-label { margin: 0 0 1rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.press__seal img { width: 92px; height: 92px; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .press__seal a:hover img { transform: translateY(-2px); } }
.clip {
  display: grid; align-content: start; gap: 1.4rem;
  padding: .6rem clamp(1.8rem, 3.6vw, 3.6rem) 1rem; color: var(--sc-ink); text-decoration: none;
}
.clip:first-child { padding-left: 0; }
.clip + .clip { border-left: 1px solid rgba(24, 24, 24, .16); }
.clip__mast { display: flex; align-items: center; height: 26px; }
.clip__mast img { height: 22px; width: auto; filter: grayscale(1) brightness(0); opacity: .82; }
.clip__headline { font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.16; text-wrap: balance; transition: color 200ms var(--ease); }
.clip__more { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); display: inline-flex; gap: .5rem; align-items: center; }
.clip__more::after { content: "→"; letter-spacing: 0; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .clip:hover .clip__headline { color: var(--blue); }
  .clip:hover .clip__more::after { transform: translateX(4px); }
}
.clip:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) {
  .voices__top { grid-template-columns: 1fr; }
  /* The hanging guillemet sits inside the quote's own top padding here, not
     above it where it collided with the section title. */
  .voices__lead::before { top: -.16em; left: -.04em; font-size: 4.6rem; }
  .voices__lead p { padding-top: 2.9rem; }
  .voices__more, .press__cols { grid-template-columns: 1fr; }
  .voices__more blockquote, .voices__more blockquote:first-child { padding: 1.4rem 0; }
  .voices__more blockquote + blockquote { border-left: 0; border-top: 1px solid rgba(24, 24, 24, .16); }
  .clip, .clip:first-child { padding: 1.3rem 0; }
  .clip + .clip { border-left: 0; border-top: 1px solid rgba(24, 24, 24, .16); }
}


/* ------------------------------------------------- 7 · unvergesslich ---- */
/* Top padding = clearance for the fixed programme bar, so the heading never
   slides under it while the stage is pinned. */
.packages__stage { display: flex; align-items: center; background: var(--off-white); padding-top: 4.5rem; }
/* Clip only sideways (the plates travel in from off-screen). The stage ends
   ~3rem under the plates, and a full clip cut their shadows and the blue glow
   off in a hard line as the stage scrolled away; this lets them fade out
   over the enquiry section, which sits on the same off-white. */
.packages .packages__stage { overflow: visible; overflow-x: clip; }
.packages__inner { display: grid; gap: clamp(1.25rem, 3.2vh, 3rem); }
.packages__head { display: grid; gap: 1rem; max-width: 50rem; }
.packages__head em { font-style: normal; color: var(--blue); }
.packages__head .op { color: var(--sc-ink-soft); }
/* The join: --j runs 0..1 over the first ~55% of the pin. Hautnah and
   Immersiv travel in from the edges; where they meet, Unvergesslich rises. */
.packages__plates {
  --j: clamp(0, calc((var(--sc-p, 0) - .06) * 2), 1);
  --c: clamp(0, calc((var(--sc-p, 0) - .38) * 3.2), 1);
  display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-items: end;
}
.plate {
  margin: 0; display: grid; gap: .55rem; align-content: start;
  background: var(--white); border: 1px solid rgba(24, 24, 24, .08); border-radius: var(--radius);
  padding: .75rem .75rem 1.25rem;
  box-shadow: 0 1px 2px rgba(24, 24, 24, .05), 0 10px 28px rgba(24, 24, 24, .08);
}
.plate img { width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 30svh; object-fit: cover; border-radius: var(--radius-sm); }
.plate h3 { margin: .45rem .25rem 0; font-family: var(--font-heading); font-weight: 400; font-size: 1.6rem; }
.plate p { margin: 0 .25rem; font-size: .95rem; color: var(--sc-ink-soft); }
.plate .btn { justify-self: start; margin: .6rem .25rem 0; }
.plate__badge { margin: .2rem .25rem 0 !important; font-size: .74rem !important; letter-spacing: .22em; text-transform: uppercase; color: var(--blue) !important; }
.plate--a { grid-column: 1; grid-row: 1; transform: translate3d(calc((1 - var(--j)) * -24vw), 0, 0) rotate(calc((1 - var(--j)) * -4deg)); }
.plate--b { grid-column: 3; grid-row: 1; transform: translate3d(calc((1 - var(--j)) * 24vw), 0, 0) rotate(calc((1 - var(--j)) * 4deg)); }
.plate--c {
  grid-column: 2; grid-row: 1; position: relative; z-index: 2;
  opacity: var(--c);
  transform: translate3d(0, calc((1 - var(--c)) * 5vh), 0) scale(calc(.94 + var(--c) * .06));
  box-shadow: 0 1px 2px rgba(24, 24, 24, .05), 0 30px 60px -24px rgba(0, 8, 168, .32);
}
.packages__note { margin: 0; font-size: .98rem; color: var(--sc-ink-soft); }
@media (min-width: 861px) and (max-height: 820px) {
  /* Short desktop screens (1280x720 measured 33px over): tighter plates. */
  .packages__head .display { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
  .packages__head .body { font-size: .95rem; }
  .plate img { max-height: 20svh; }
  .plate h3 { font-size: 1.3rem; margin-top: .2rem; }
  .plate p { font-size: .86rem; }
  .plate { padding-bottom: .9rem; }
}
@media (max-width: 860px) {
  .packages__head .body { font-size: .95rem; }
}
/* Phone podium. The act is a flow here (data-sc-act-m), so nothing has to fit
   one screen. The clock is --pp from page.js: where the plates sit on screen
   (0 = top edge at the bottom of the screen, 1 = at the top). Same story as desktop, turned for a narrow screen:
   Hautnah and Immersiv slide in tilted from the edges and meet side by side,
   a "+" lands between them, then Unvergesslich rises underneath as the wide
   card that carries both. --j / --c finish while the plates sit mid-screen. */
/* The cards start off-screen; without the clip they widen the page and the
   fixed bar slides sideways with it. */
html.sc-phone .packages { overflow-x: clip; }
html.sc-phone .packages__stage { padding-block: 1rem 3rem; }
html.sc-phone .packages__plates {
  --j: clamp(0, calc((var(--pp, 0) - var(--pj0, .08)) * var(--pjk, 3.1)), 1);
  --c: clamp(0, calc((var(--pp, 0) - var(--pc0, .42)) * var(--pck, 3.3)), 1);
  position: relative; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: stretch;
}
html.sc-phone .plate { padding: .5rem .5rem .9rem; gap: .35rem; }
html.sc-phone .plate h3 { margin: .3rem .2rem 0; font-size: 1.2rem; }
html.sc-phone .plate p { margin: 0 .2rem; font-size: .9rem; line-height: 1.4; }
html.sc-phone .plate img { aspect-ratio: 4 / 3; max-height: none; }
html.sc-phone .plate--a { grid-column: 1; grid-row: 1; transform: translate3d(calc((1 - var(--j)) * -60vw), 0, 0) rotate(calc((1 - var(--j)) * -6deg)); }
html.sc-phone .plate--b { grid-column: 2; grid-row: 1; transform: translate3d(calc((1 - var(--j)) * 60vw), 0, 0) rotate(calc((1 - var(--j)) * 6deg)); }
/* The "+" where they meet, centred on the photos' seam. */
html.sc-phone .packages__plates::before {
  content: "+"; position: absolute; z-index: 3; left: 50%; top: calc((50vw - var(--sc-gutter) - .375rem - 1rem) * .375 + .5rem);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; translate: -50% -50%;
  border-radius: 50%; background: var(--blue); color: var(--white);
  font: 400 1.4rem/1 var(--font-heading); box-shadow: 0 6px 16px -6px rgba(0, 8, 168, .6);
  opacity: clamp(0, calc((var(--j) - .85) * 6.67), 1); scale: calc(.6 + var(--j) * .4);
}
/* The top step: full width, its photo wide, rising in with the blue glow. */
html.sc-phone .plate--c {
  grid-column: 1 / -1; grid-row: 2; margin-top: .4rem; padding: .6rem .6rem 1.1rem;
  transform: translate3d(0, calc((1 - var(--c)) * 16vh), 0) scale(calc(.92 + var(--c) * .08));
}
html.sc-phone .plate--c img { aspect-ratio: 16 / 9; }
html.sc-phone .plate--c h3 { font-size: 1.5rem; }
html.sc-phone .plate--c p { font-size: .9rem; }

/* ---------------------------------------------------- 8 · reservation ---- */
.reserve { padding-top: clamp(4rem, 9vw, 8rem); }
.reserve__grid { display: grid; grid-template-columns: 4fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.reserve__mail { margin: 0; color: var(--sc-ink-soft); }
.reserve__mail a { color: var(--blue); }
.card {
  background: var(--white); border: 1px solid rgba(24, 24, 24, .08); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 1px 2px rgba(24, 24, 24, .05), 0 24px 50px -28px rgba(24, 24, 24, .28);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem;
}
.card > * { grid-column: 1 / -1; }
.card .field--half { grid-column: auto; }
.card__kicker { margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.card__kicker span { text-transform: none; letter-spacing: 0; font-family: var(--font-accent); font-style: italic; font-size: 1.2rem; color: #181818; margin-left: .35rem; }
.card__pick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.card__pick legend { font-size: .85rem; font-weight: 500; color: var(--blue); margin-bottom: .5rem; padding: 0; }
.card__pick label { position: relative; }
.card__pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.card__pick span {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid rgba(0, 8, 168, .35); color: var(--blue); font-size: .92rem;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.card__pick input:checked + span { background: var(--blue); color: var(--white); border-color: var(--blue); }
.card__pick input:focus-visible + span { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
/* Form fields: the brand's signature blue border and bold blue labels. */
.field { display: grid; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 500; color: var(--blue); }
.field input, .field textarea {
  width: 100%; background: var(--white); color: #181818;
  border: 1.5px solid var(--blue); border-radius: 10px; padding: .8rem .9rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--blue-hover); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(0, 8, 168, .12); }
.card .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 0; font-size: .95rem; }
/* The two quiet lines around the button: what happens next, and the reassurance. */
.card__next, .card__fine { margin: 0; font-size: .85rem; color: var(--sc-ink-soft); }
.form-status--ok { color: #1A7F52; }
.form-status--error { color: #C0392B; }
.foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: clamp(4rem, 8vw, 7rem) 2.5rem; font-size: .85rem; color: var(--sc-ink-soft); }
.foot p { margin: 0; }
.foot a { color: inherit; }
.foot__links { flex-basis: 100%; order: -2; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.6rem 2rem; padding-block: clamp(2.4rem, 5vw, 3.6rem) 0; border-top: 1px solid rgba(24, 24, 24, .12); }
.foot__links[hidden] { display: none; }
.foot .foot__title { margin: 0 0 1rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-ink); }
.foot__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
/* The regions: two tracks wide, listed in two short columns (pages.js LONG_LIST). */
@media (min-width: 761px) { .foot__links { grid-template-columns: repeat(5, minmax(0, 1fr)); } .foot__col--wide { grid-column: span 2; } }
@media (max-width: 760px) { .foot__col--wide { grid-column: 1 / -1; } }
.foot__col--wide ul { display: block; columns: 2; column-gap: 2rem; }
.foot__col--wide li { break-inside: avoid; margin-bottom: .45rem; }
.foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--sc-ink); } }
/* Footer order (24.10.2026, Nevio): one divider under the enquiry form, then
   the page links; a second divider sets the newsletter + footer line apart
   (24.10.2026, his call). Newsletter on the reservation's 4/6 grid so the field
   lines up with the enquiry card above. One field + button. */
.letter {
  flex-basis: 100%; order: -1; display: grid; grid-template-columns: 4fr 6fr; gap: 1.4rem clamp(2rem, 6vw, 6rem); align-items: start;
  padding-block: clamp(2.4rem, 5vw, 3.6rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); border-top: 1px solid rgba(24, 24, 24, .12);
}
.letter__intro { display: grid; gap: .55rem; }
.letter .foot__title { margin: 0; }
.letter__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); line-height: 1.12; color: #181818; }
.letter__body { margin: 0; max-width: 36ch; font-size: .95rem; line-height: 1.55; }
.letter__form { display: grid; gap: .7rem; }
.letter__label { font-size: .85rem; line-height: 1.375; font-weight: 500; color: var(--blue); }
.letter__row { display: flex; gap: .5rem; }
.letter__row input {
  flex: 1; min-width: 0; min-height: 48px; background: var(--white); color: #181818;
  border: 1.5px solid var(--blue); border-radius: 10px; padding: .8rem .9rem; font: inherit; font-size: 1rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.letter__row input::placeholder { color: var(--blue-hover); opacity: 1; }
.letter__row input:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(0, 8, 168, .12); }
.letter__row .btn { flex: none; }
.letter__consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .82rem; line-height: 1.5; cursor: pointer; }
.letter__consent span { text-wrap: pretty; }
.letter__consent input { flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--blue); cursor: pointer; }
.letter__consent input:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.letter .form-status { font-size: .9rem; }
.letter.is-done .letter__label, .letter.is-done .letter__row, .letter.is-done .letter__consent, .letter.is-done .cf-turnstile { display: none; }
@media (max-width: 860px) { .letter { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .letter__row { flex-direction: column; } .letter__row .btn { width: 100%; } }
@media (max-width: 860px) {
  .reserve__grid { grid-template-columns: 1fr; }
  .card { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .placecard__caret { animation: none; }
  .hero__plate, .hero__subject, .hero__haze,
  .plate--a, .plate--b, .plate--c { transform: none !important; }
  .plate--c { opacity: 1 !important; }
  /* No clip is fetched under reduced motion; show the lit stage instead of
     the dim first frame. */
  .show__reduced { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
}