/* GoodFellaz — per-section layout.
   One block per section, in scroll order, matching index.html and
   .olympus/06-build-plan.md. Each section is correct and readable as a
   static document with js/motion.js deleted. References tokens.css only —
   no literal colour or size below this line. The two rule tints use
   color-mix() against --red, not a new hex. */

/* Shared helpers ---------------------------------------------------------- */

.frame { margin: 0; background: var(--ground); }
.frame > img { width: 100%; height: auto; }

/* --  Navigation -------------------------------------------------------- */

/* Fixed, not absolute: the page runs ~20,000px and an absolute nav took the
   booking link out of reach for all but the first and last screen. It rides
   transparent over the hero, then takes a ground fill and a hairline once the
   hero is past — .nav--stuck is toggled by motion.js. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-32);
  padding: var(--s-32) var(--gutter);
  border-bottom: var(--rule) solid transparent;
  transition: background-color var(--dur-move) var(--ease-out),
              border-color var(--dur-move) var(--ease-out),
              padding var(--dur-move) var(--ease-out);
}
.nav--stuck {
  background: var(--ground);
  border-bottom-color: color-mix(in srgb, var(--bone) 14%, transparent);
  padding-block: var(--s-16);
}
.nav__mark {
  font-family: var(--font-display);
  font-size: var(--t-24);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  /* The hero already carries the wordmark at 288px; a second one beside it is
     redundant. It arrives only once the hero has gone. */
  opacity: 0;
  transition: opacity var(--dur-move) var(--ease-out);
}
.nav--stuck .nav__mark { opacity: 1; }
.nav__links {
  display: flex;
  gap: var(--s-32);
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* 00 · Cold open -------------------------------------------------------- */

.cold-open {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ground);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-32);
  /* Auto-dismiss with no JS: hold, then leave. motion.js only sharpens it.
     Reduced motion removes it outright (below). */
  animation: cold-open-exit var(--dur-scene) var(--ease-in-out)
             calc(var(--dur-scene) * 2.5) forwards;
}
.cold-open__strip { width: min(var(--w-coldopen), 70vw); }
.cold-open__mark {
  font-family: var(--font-display);
  font-size: var(--t-81);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--bone);
}
@keyframes cold-open-exit {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .cold-open { display: none; }
}

/* 01 · Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* The scrim belongs to the type — and only to the type. A 78vh ramp put the
   whole lower three-quarters of the frame, Kirill included, under a fade to
   ground: the subject was being erased by the thing meant to protect the
   copy. Two short bands now sit under the two type blocks and the middle of
   the picture is left alone. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--ground) 0%, transparent 16%),
    linear-gradient(to top, var(--ground) 4%,
                    color-mix(in srgb, var(--ground) 74%, transparent) 30%,
                    transparent 58%);
}
/* Bone, not muted: this line crosses an image, so it does not get the
   dimmest ink on the palette. 16.27:1 against the scrimmed ground. */
.hero__content .label { color: var(--bone); }

/* The frame is a one-point perspective with the figure on the vanishing
   point. A centred column of type therefore lands squarely on the subject —
   which is exactly what it was doing. The type takes the four corners and
   the base instead, and the centre of the frame stays picture. */
.hero__content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--s-32);
  row-gap: var(--s-16);
  padding: calc(var(--s-128) + var(--s-32)) var(--gutter) var(--s-64);
}
.hero__eyebrow { grid-area: 1 / 1; align-self: start; justify-self: start; }
.hero__sub {
  grid-area: 3 / 1;
  align-self: end;
  font-family: var(--font-body);
  font-size: var(--t-24);
  color: var(--bone);
}
.hero .cta { grid-area: 3 / 2; align-self: end; justify-self: end; }
/* Full-bleed: --t-hero is fitted to 100vw minus the gutters, so the wordmark
   is the page's statement of its own width. */
.hero h1 {
  grid-area: 4 / 1 / 5 / -1;
  margin: 0;
  white-space: nowrap;
  /* heroHandoff() flies this wordmark into .nav__mark on scrub, anchored
     top-left, so the origin is part of the layout contract. */
  transform-origin: 0 0;
  will-change: transform;
}
/* The exact fit. --t-hero is measured against 100vw, which includes the
   scrollbar; 100cqi is the real content box of .hero__content, so this fills
   the measure to the pixel at any width and with any scrollbar. 4.152 is
   Anton's uppercase advance for "GOODFELLAZ" at --tr-display, measured — and
   the "Anton Fallback" face in tokens.css is size-adjusted to match it, so
   the number holds before the webfont lands too. */
@supports (container-type: inline-size) {
  .hero__content { container-type: inline-size; }
  .hero h1 { font-size: var(--t-hero); }
}

/* --  Scroll progress — the razor's edge, drawn across the top ---------- */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 150;
  width: 100%;
  height: var(--rule);
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
}

/* --  Chapter cards --------------------------------------------------- */

.chapter {
  position: relative;
  min-height: var(--chapter-height);
  display: grid;
  /* An explicit minmax(0,1fr) column, not place-content:center. The latter
     sizes the track to max-content, so at narrow widths the card title
     overflowed its own padding by ~20px and was clipped by overflow:hidden.
     The column now takes the measure and the type centres inside it. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: var(--s-64) var(--gutter);
  background: var(--oxblood);
  overflow: hidden;
}
/* The cut. chapterWipe() draws it left to right on scrub; with no JS it is
   simply a rule across the card, which is what a title card has anyway. */
.chapter__rule {
  position: absolute;
  /* Above the type, never through it: the card centres its word, so a rule at
     50% reads as a strikethrough — with JS at the end of the draw, and with
     no JS at all times. */
  inset: 24% var(--gutter) auto;
  height: var(--rule);
  background: var(--bone);
  opacity: .35;
  transform-origin: 0 50%;
}
.chapter--yellow .chapter__rule { background: var(--ground); }
.chapter > span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--t-chapter);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  text-align: center;
  text-wrap: nowrap;
  color: var(--bone);            /* 9.70:1 on oxblood */
}
/* Below 900 the card breaks after the "·" into two lines, so the title is
   fitted to its wider half and reads as a title card, not a caption. */
.chapter__break { display: none; }
@media (max-width: 900px) { .chapter__break { display: inline; } }
.chapter--yellow { background: var(--yellow); }
.chapter--yellow > span { color: var(--ground); }   /* 11.98:1 on yellow */

/* 02 · Der Boss ------------------------------------------------------- */

.boss__inner {
  display: grid;
  grid-template-columns: 3fr 4fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-64);
  row-gap: var(--s-32);
  align-items: start;
}
.boss__portrait { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.boss__portrait > img {
  width: 100%;
  height: calc(100vh - var(--s-128) - var(--s-128));   /* keep the portrait within one screen */
  object-fit: cover;
}
.boss__neon { grid-column: 2; grid-row: 1; margin-top: var(--s-64); }  /* offset lower */
.boss__text {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}
.boss__quote {
  font-family: var(--font-body);
  font-size: var(--t-36);
  line-height: var(--lh-quote);
  color: var(--bone);
  max-width: var(--measure-quote);
  margin-block: var(--s-16);
}

/* 03 · Das Gesetz --------------------------------------------------- */

.gesetz {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.gesetz__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The doctrine assumes plates are ~85% shadow and need no scrim. This clip
     (Cigarette_smoke_in_light) is ~50% bright smoke, so the haze is dropped
     back to a texture behind the type. See .olympus/07-qa.md § deviations. */
  opacity: 0.3;
  z-index: 0;
}
/* The three statements are stacked on top of each other, not down the page:
   this section is a 300vh pin and only one line is ever lit. Stacking them
   means each one owns the whole stage instead of holding a third of it, and
   the static (no-JS) path stays readable because .gesetz__line is relative
   until motion.js promotes the section. */
.gesetz__stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;      /* the pinned stage fits the small viewport on phones */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: var(--s-64);
  padding: var(--s-128) var(--gutter);
}
.gesetz__eyebrow { color: var(--muted); }
.gesetz__lines { display: grid; align-content: center; gap: var(--s-64); }
/* Display type, not body copy. --t-quote at 34ch measured 845px inside a
   1680px stage — 44% of a 1920 screen with the remainder empty. */
.gesetz__line {
  margin: 0;
  max-width: 22ch;
  font-size: var(--t-manifest);
  line-height: var(--lh-display);
  text-wrap: balance;
}

/* Once motion.js pins the section the lines share one cell and hand over on
   scroll (manifestoPin). GSAP is the only thing that writes to them — no CSS
   animation or transition, which is what made the earlier pin stutter. */
.gesetz--stacked .gesetz__lines { grid-template-areas: "line"; }
.gesetz--stacked .gesetz__line { grid-area: line; align-self: center; }

/* 04 · Das Handwerk ------------------------------------------------- */

.craft__pair {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--s-32);
  align-items: end;
  margin-top: var(--s-64);
}
.craft__caption {
  margin-top: var(--s-16);
  color: var(--muted);
}
.craft__rows {
  margin: var(--s-128) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-64);
}
.craft__row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s-32);
  align-items: center;
  border-top: var(--rule) solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-top: var(--s-32);
}
.craft__row-text { display: flex; flex-direction: column; gap: var(--s-16); }
.craft__row dt {
  font-family: var(--font-display);
  font-size: var(--t-54);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-section);
  text-transform: uppercase;
}
.craft__row dd { margin: 0; color: var(--muted); max-width: var(--measure); }
.craft__row dd.craft__price { color: var(--tungsten); }   /* label in tungsten — 10.87:1 */

/* 05 · Der Raum — the one hero moment ----------------------------- */

.room {
  padding: var(--s-128) 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* full-width column so a .wrap child re-centres */
  align-content: center;
  gap: var(--s-64);
}
.room__frame { width: 100%; }
.room__video { clip-path: inset(0); }    /* static = fully open; roomMask() scrubs 30% -> 0 */
.room__caption {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding-inline: var(--gutter);
}
/* margin-left:auto put an 845px quote in the right half of a 1920 screen with
   nothing at all in the left half. It is now a two-column row: the attribution
   holds the left edge, the quote the right, and the row spans the measure. */
.room__pull {
  margin: 0;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-32);
  margin-bottom: var(--quote-after);
}
.room__pull .label { color: var(--muted); align-self: start; }
.room__pull .quote { max-width: none; }

/* 06 · Das Ritual ------------------------------------------------- */

.ritual { width: 100%; min-width: 0; max-width: 100%; overflow: clip; }
.ritual__head { margin-bottom: var(--s-32); }
.ritual__track {
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  padding: 0;
  max-width: var(--wrap);      /* align the static list with the .wrap heading */
  display: flex;
  flex-direction: column;      /* static + reduced motion = a vertical list */
  gap: var(--s-64);
}
.ritual__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s-32);
  border-top: var(--rule) solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-top: var(--s-32);
}
.ritual__card--media { grid-template-columns: auto 1fr; }
.ritual__card--media .letterbox {
  grid-column: 1 / -1;
  order: -1;
  width: 100%;
  max-width: var(--wrap);
}
.ritual__num {
  font-family: var(--font-display);
  font-size: var(--t-122);
  line-height: 1;
  color: var(--tungsten);
}
.ritual__label {
  font-family: var(--font-display);
  font-size: var(--t-54);
  text-transform: uppercase;
  letter-spacing: var(--tr-section);
  align-self: center;
}
/* ritualTrack() adds .ritual--run to the section and turns the list on its side. */
.ritual--run .ritual__track {
  flex-direction: row;
  /* was stretch + align-content:start, which gave every card the full track
     height and pinned its content to the top — a number and a word floating
     in ~700px of void. Cards now size to their content and centre on the
     track's axis. */
  align-items: center;
  gap: var(--s-64);
  max-width: none;
  margin-inline: 0;
  width: max-content;
  will-change: transform;
}
.ritual--run .ritual__card {
  border-top: 0;
  border-left: var(--rule) solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-top: 0;
  padding-left: var(--s-32);
  align-content: center;
}
/* A number and a label do not need half the viewport. Media cards keep the
   width their 2.39:1 frame needs; text-only cards are sized to their text. */
.ritual--run .ritual__card:not(.ritual__card--media) { width: 22vw; }
.ritual--run .ritual__card--media { width: 42vw; }
.ritual--run .ritual__card--media .letterbox { order: 0; }

/* 07 · Die Crew — real photos, documentary register ------------- */

.crew { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.crew__note { margin: var(--s-16) 0 var(--s-64); }
.crew__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-32);
}
.crew__photo {
  position: relative;
  /* 4:5 rather than square: it is the right crop for a face, and it gives the
     row the vertical presence the section was missing. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}
.crew__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  will-change: transform;          /* crewIntro() settles it on the compositor */
}
/* The reveal shutter. crewIntro() lifts it by tweening --shutter 1 -> 0;
   the default is 0, so with no JS (or a trigger that never fires) the photo
   is simply visible. Transform only — no clip-path repaint. */
.crew__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ground);
  transform: scaleY(var(--shutter, 0));
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: none;
}
.crew__photo::after {              /* oxblood duotone at 35% */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  opacity: 0.35;
  mix-blend-mode: color;
}
.crew__name { margin-top: var(--s-16); }
/* Handle on its own line for every card: inline, the longer handles wrapped
   and the five captions no longer shared a rhythm. */
.crew__handle { display: block; width: fit-content; padding-block: var(--s-4); }

/* 08 · Der Laden ------------------------------------------------- */

/* The copy column is sized to the copy and ends on the right gutter, level
   with the nav's "Shop" and the footer links; the photograph takes the
   remaining width. Two equal columns left a 284px void right of the text.
   The 42% cap keeps the photograph the larger column between 901 and 1440,
   where a fixed 38rem copy column squeezed it to 288px at 1024. */
.shop__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--shop-text), 42%));
  gap: var(--shop-gap);
  align-items: center;
}
.shop__media { height: var(--shop-media-height); overflow: hidden; }
.shop__media > img { height: 100%; object-fit: cover; object-position: var(--shop-focus); }
.shop__text .measure { max-width: 55ch; }
.shop__text h2 { text-wrap: balance; }   /* never an orphaned "&" */
.shop__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}
.shop__text .cta { margin-top: var(--s-16); }

/* 09 · Termin — closing wide, CTA crosses the media -------------- */

.close {
  position: relative;
  padding: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* see .room */
  align-content: center;
}
.close__frame { width: 100%; }
/* Was a left-aligned column, which left the right 60% of the closing screen
   empty under a full-bleed frame. The facts now hold the right edge so the
   block spans the measure it sits on. */
.close__content {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--s-64) * -1);   /* just kiss the frame's lower edge */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--s-64);
  row-gap: var(--s-32);
  padding: var(--s-64) var(--gutter) var(--s-64);
}
.close__content > h2 { grid-column: 1 / -1; }
.close__content > .cta { grid-column: 1; justify-self: start; }
.close__content::before {          /* the scrim belongs to the type — DESIGN.md § Media */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(100% + var(--s-128) + var(--s-64));
  z-index: -1;
  background: linear-gradient(transparent, var(--ground) 55%);
}
.close__facts {
  grid-column: 2;
  justify-self: end;
  display: flex;
  gap: var(--s-64);
}
.close__facts .label { color: var(--muted); }

/* 10 · Footer — billing block --------------------------------- */

.billing {
  text-align: left;
  padding: var(--s-128) var(--gutter);
  background: var(--ground);
}
.billing__mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--footer-display);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
/* The grid and the legal line share one column system, so "Impressum" starts
   exactly under "Entdecken". The dividers sit in the middle of the gutter
   rather than inside a column: padded inside, they pushed columns 2 and 3 in
   by 33px and nothing else, so no two column edges were evenly spaced. */
.billing__grid,
.billing__legal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--s-64);
}
.billing__grid {
  row-gap: var(--s-32);
  margin-top: var(--s-64);
  padding-top: var(--s-32);
  border-top: var(--rule) solid color-mix(in srgb, var(--bone) 20%, transparent);
}
/* align-content:start — stretch shared the spare height between the rows and
   dropped single-line entries 14px below their neighbours. */
.billing__grid section { position: relative; display: grid; align-content: start; gap: var(--s-8); }
.billing__grid section + section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(var(--s-32) * -1);
  width: var(--rule);
  background: color-mix(in srgb, var(--bone) 12%, transparent);
}
.billing__grid .label { color: var(--muted); }
.billing__legal > :first-child { grid-column: 1 / 4; }
.billing__legal > :last-child {
  grid-column: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-32);
}
.billing__legal {
  row-gap: var(--s-16);
  margin-top: var(--s-64);
  padding-top: var(--s-16);
  border-top: var(--rule) solid color-mix(in srgb, var(--bone) 20%, transparent);
  font-family: var(--font-data);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.nav__links a {
  color: var(--tungsten);
  text-decoration: none;
  padding-block: var(--s-8);     /* touch target: 22px text, 38px to tap */
}
/* Footer links get the same treatment — they were 21px tall on a phone. */
.billing a.link { display: inline-block; padding-block: var(--s-4); }

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--bone);
  text-decoration: none !important;
}


/* ------------------------------------------------------------------ *
 *  Narrow viewports                                                   *
 *                                                                     *
 *  This file previously carried no layout breakpoint at all: every    *
 *  multi-column grid below stayed multi-column at 375px, and the      *
 *  acceptance criterion "every section correct at 375px" could not    *
 *  have been met. One collapse point, at the width where the two-up   *
 *  rows stop having room for both halves.                             *
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .boss__inner,
  .craft__pair,
  .craft__row,
  .shop__inner,
  .room__pull {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the boss portrait no longer spans two rows once there is one column */
  .boss__portrait { grid-column: 1; grid-row: auto; }
  .boss__portrait > img { height: auto; }
  .boss__neon { grid-column: 1; grid-row: auto; margin-top: 0; }
  .boss__text { grid-column: 1; grid-row: auto; }

  .crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .close__content { grid-template-columns: minmax(0, 1fr); }
  .close__content > .cta,
  .close__facts { grid-column: 1; justify-self: start; }
  .close__facts { flex-wrap: wrap; gap: var(--s-32); }
  .billing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing__grid section + section::before { display: none; }
  .billing__legal { grid-template-columns: minmax(0, 1fr); }
  .billing__legal > :first-child,
  .billing__legal > :last-child { grid-column: 1; }

  /* The CTA is locked to >=24px (bone-on-red is 4.22:1 and legal only as
     large text), so it cannot be shrunk to fit — it takes the full measure
     and wraps instead. */
  .hero .cta,
  .close .cta,
  .shop .cta { display: block; width: 100%; text-align: center; padding-inline: var(--s-16); }

  .hero__content { grid-template-columns: minmax(0, 1fr); }
  .hero__eyebrow { grid-area: 1 / 1; }
  .hero__sub { grid-area: 3 / 1; }
  .hero .cta { grid-area: 4 / 1; }
  .hero h1 { grid-area: 5 / 1; }
}

@media (max-width: 560px) {
  /* "Termin vereinbaren" broke onto two lines in the nav on a phone; the
     short form keeps the bar one line tall. The full name stays in the
     accessible label. */
  .nav__more { display: none; }
  /* The CTA keeps its 24px floor (bone on red is legal only as large text);
     tighter tracking lets "Termin vereinbaren" hold one line at 375. */
  .cta { letter-spacing: var(--tr-cta-narrow); padding-inline: var(--s-8); }
  .crew__grid { grid-template-columns: minmax(0, 1fr); }
  .chapter > span { white-space: normal; text-wrap: balance; }
  .billing__mark { font-size: min(18vw, 8rem); }
  .billing__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-height: 699px), (max-width: 900px), (prefers-reduced-motion: reduce) {
  .ritual--run .ritual__track { flex-direction: column; width: auto; max-width: var(--wrap); margin-inline: auto; }
  .ritual--run .ritual__card,
  .ritual--run .ritual__card--media { width: auto; border-left: 0; border-top: var(--rule) solid color-mix(in srgb, var(--red) 40%, transparent); padding-left: 0; padding-top: var(--s-32); }
  .ritual--run .ritual__card--media .letterbox { order: -1; }
}