/* c-alm home prototype — desktop-first, scales linearly above 93.75rem.
   All dimensions are in rem; 1rem = 1rem at 93.75rem viewport and grows with it
   (see the html font-size rule). Hairlines stay 1px for crispness. */

:root {
  /* colour channels in HSL — every colour and tint in the project is built from
     these, so a colour change is one line (F-R341) */
  --hsl-valentino: 280 41.2% 10%;   /* Valentino #1d0f24 (was #2c1736) */
  --hsl-alabaster: 60 33.3% 98.8%;  /* Alabaster #fdfdfb */
  --hsl-mint: 117.4 94.5% 85.7%;    /* Mint #bbfdb8 */
  --hsl-clover: 118 45% 40%;        /* Clover #3b9438 — the darker green of the hero's line cloud (F-R359) */
  --color-bg: hsl(var(--hsl-alabaster));
  --color-ink: hsl(var(--hsl-valentino));
  --color-ink-mid: hsl(var(--hsl-valentino) / 0.5); /* Valentino 50% */
  --color-ink-quiet: hsl(var(--hsl-valentino) / 0.25); /* Valentino 25% */
  --color-paper: hsl(var(--hsl-alabaster)); /* Alabaster — light type on the dark surfaces */
  --color-accent: hsl(var(--hsl-mint));
  --color-clover: hsl(var(--hsl-clover)); /* Clover — lines only, never a ground or a type colour */
  --color-line: hsl(var(--hsl-valentino) / 0.1);
  --color-box: hsl(var(--hsl-valentino) / 0.05);
  --color-card: hsl(var(--hsl-valentino) / 0.01); /* Valentino 1% — the article and insight cards, a lighter tint than the fields (F-R360, F-R365) */
  --color-overlay: hsl(var(--hsl-valentino) / 0.25);
  --color-overlay-dark: hsl(var(--hsl-valentino) / 0.75);

  /* grid: 3.5rem margins, 8 columns, 2rem gutter
     → (86.75 - 7 x 2) / 8 = 9.09375rem per column at 1500 */
  --page-width: 93.75rem;
  --margin: 3.5rem;
  --gut: 2rem;
  /* column spans INCLUDING the gutters inside the span (86.75rem content,
     8 x 9.09375rem + 7 x 2rem); the small breakpoint resets them to 100% */
  --col1: 9.09375rem;
  --col2: 20.1875rem;
  --col3: 31.28125rem;
  --col4: 42.375rem;
  --col5: 53.46875rem;
  --col6: 64.5625rem;
  --content: 86.75rem;
  --step: 13.09375rem; /* gutter + column + gutter — the offset that leaves one column empty */

  /* ---------- the four areas (F-R380) ----------
     Every module sits in one of four areas. They are the project's standard
     placements; a new module picks one instead of inventing a width.
       full-area           the whole page, edge to edge — pictures, dark bands
       grid-area           the eight columns between the margins
       prose-area-default  four columns centred — long-form reading (articles)
       prose-area-on-side  four columns at the right of the grid, a title beside
                           them — text set between other modules
     Below 800px all four become the one column between the margins. */
  /* control heights: one for everything in the flow of the page, one for the
     single action on a CTA band. A field and the button beside it always share
     the height of their band (F-R381). */
  /* ---------- module spacing (F-R387) ----------
     The page stack has no gap: every module brings its own top inset, and
     nothing below it. Default is the rhythm the pages already had (7.5rem
     under one module + 7.5rem over the next); compact is half of it and marks
     modules that continue the one before. Small keeps the same arithmetic
     (3.5 + 3.5). Two values, changed here, move the whole site. */
  --space-module: 15rem;
  --space-module-compact: 7.5rem;

  /* Internal content spacing: the distance between two fields INSIDE a module,
     named by the relationship, never by the element. Each applies only when
     both fields are present, so a module without a title or without copy still
     starts at its inset (F-R387). The -lg set belongs to the big heads (page
     header, CTA), whose type is two steps larger. */
  --space-kicker: 1.25rem;  /* kicker → title */
  --space-copy: 2rem;       /* title → copy */
  --space-action: 2rem;     /* copy → link */
  --space-kicker-lg: 2rem;
  --space-copy-lg: 2.5rem;
  --space-action-lg: 2.5rem;

  --control-h: 3.5rem;
  --control-h-lg: 5.25rem;

  --full-area: var(--page-width);
  --grid-area: var(--content);
  --prose-area: var(--col4);
  --prose-indent: calc(var(--col3) + var(--step)); /* columns 1–4 skipped: where the on-side measure starts */

  /* type ladders — two independent sets, the styleguide renders both. An element
     picks any Large step above 800px and any Small step below; the steps need
     not correspond (e.g. body: --large-text-md, --small-text-md; lead:
     --large-text-xl, --small-text-lg). */
  --large-text-xs: 0.875rem;  /* 14 */
  --large-text-sm: 1rem;      /* 16 */
  --large-text-md: 1.125rem;  /* 18 body */
  --large-text-lg: 1.25rem;   /* 20 operating labels */
  --large-text-xl: 1.375rem;  /* 22 lead */
  --large-text-2xl: 1.5rem;   /* 24 */
  --large-text-3xl: 2rem;     /* 32 subheadings, mono index */
  --large-text-4xl: 3rem;     /* 48 module and teaser titles */
  --large-text-5xl: 4rem;     /* 64 statement, page header, CTA, quote */
  --large-text-6xl: 5.5rem;   /* 88 hero */
  --small-text-xs: 0.75rem;   /* 12 hero kicker and meta line (mono) */
  --small-text-sm: 0.875rem;  /* 14 meta, numbers, contact card, dates */
  --small-text-md: 1rem;      /* 16 body, footer, captions */
  --small-text-lg: 1.125rem;  /* 18 lead, FAQ questions, download and card titles, H5 */
  --small-text-xl: 1.25rem;   /* 20 H4; lead in the 600-800 band */
  --small-text-2xl: 1.5rem;   /* 24 H3, lead card, menu, Facts stations */
  --small-text-3xl: 1.75rem;  /* 28 statement, page header, module and teaser titles, CTA, quote */
  --small-text-4xl: 2.375rem; /* 38 hero; titles in the 600-800 band */

  --color-accent-hover: hsl(117.9 82.7% 79.6%); /* slightly darker mint for slide-over hovers */
  --color-box-hover: hsl(var(--hsl-valentino) / 0.12); /* slightly darker grey for the discover box */
  --color-cell-hover: hsl(var(--hsl-valentino) / 0.04); /* very subtle darker shade for Menu/DE cells */
  --color-tab-hover: hsl(var(--hsl-valentino) / 0.06); /* darkened slide-over for the insight tabs */
  --color-pearl: hsl(330 4% 90.2%); /* Pearl — Valentino 10% on Alabaster as an opaque surface (Content.Facts, second station); recomputed for the new Valentino, #e7e5e6 */
  --outline-width: 0.09375rem; /* stroke of the outlined hero type (outside) */
  --arrow-swap: 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  --contact-right: calc(var(--margin) - 0.4375rem + 2rem + 1rem); /* Kontakt: its arrow field ends 1rem before the menu field, which ends on the margin */
  /* page chrome (mark, Kontakt, menu): quiet, flat, in the arrow-field family.
     The mark and the type in --chrome-mark, the two fields in --chrome-field;
     they follow the named ground behind the header: .is-on-valentino, .is-on-mint (F-R371) */
  --chrome-mark: var(--color-ink);
  --chrome-hover-field: var(--color-accent); /* one hover for every box — mark, menu, Kontakt (F-R376) */
  --chrome-hover-mark: var(--color-ink);
  --chrome-text: var(--color-ink); /* the Kontakt label, which has no field: the colour that reads on the ground (F-R372) */
  --chrome-field: var(--color-paper); /* Alabaster, opaque: invisible on the page ground, a pane over the dot field, Mint and Pearl (F-R337) */ /* Kontakt card: margin + burger box + gap — follows the margin at every breakpoint */
  /* --sbw = width of a classic scrollbar (set by modules.js / home-extra.js, 0 with
     overlay scrollbars). The page is 100vw wide, scrollbar included, while fixed
     elements measure from the visible viewport; right-anchored pinned chrome
     subtracts it so it stays aligned with the page grid at every width. */
  --sbw: 0px;
  /* tracking per step (F-R308): the larger, the tighter; neutral through the middle; positive at the bottom.
     Labels (kicker, meta, numbers) are ordinary steps: nothing is set in capitals (F-R345). */
  --track-6xl: -0.035em; --track-5xl: -0.03em; --track-4xl: -0.025em; --track-3xl: -0.02em; --track-2xl: -0.015em; --track-xl: -0.01em; --track-lg: -0.005em; --track-md: 0em; --track-sm: 0.005em; --track-xs: 0.01em;
  --small-track-4xl: -0.02em; --small-track-3xl: -0.015em; --small-track-2xl: -0.015em; --small-track-xl: -0.005em; --small-track-lg: 0em; --small-track-md: 0.005em; --small-track-sm: 0.01em; --small-track-xs: 0.015em;
  /* weights: text and headings — Manrope 400 and 600 (F-R349, F-R350) */
  --fw-regular: 400;
  --fw-bold: 600;
  --pc-accent: var(--color-accent); /* reviewer comment layer chrome */
  --pc-font: "DM Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* the scrollbar's space is always reserved: locking the page while the menu
     is open used to remove it, which shifted every pinned box to the right */
  scrollbar-gutter: stable;

  /* The whole layout is built in rem on a 1500px design, so scaling the root
     scales the page. Above 1500 it grows, below it shrinks with the window —
     fluid down to the small breakpoint, where a one-column layout takes over
     and the root goes back to a readable 16px. */
  font-size: calc(100vw / 93.75);
}

/* ---------- module spacing: how the inset is resolved (F-R387) ----------
   Every module in a stack carries data-mod (its name) and, if it belongs to a
   related group, data-group. The inset lands in --mod-top, which the module
   reads. Order of resolution is the cascade's own: the shared default first,
   then the group rule, then ordered-pair exceptions — a later matching rule
   wins, so the exceptions stand at the end.
   Adjacency is the rendered one: the composer emits a wrapper only for a
   module that renders, so + reads what the reader actually sees. */

[data-mod] { --mod-top: var(--space-module); }

/* the related run: prose after prose reads as continuous content. Members are
   Content.Text and Content.Media-Assets — an article and the pictures in it.
   Directional by construction: the pair is (previous, current). */
[data-group="prose"] + [data-group="prose"] { --mod-top: var(--space-module-compact); }

/* ---- ordered-pair exceptions (later wins) ---- */

/* the first module owns the fold: a page header brings its own construction */
main > [data-mod]:first-child { --mod-top: 0; }

/* a CTA band is followed by the footer with no gap at all: two dark surfaces
   meeting, separated by the footer's own light line (F-R357) */
[data-mod="cta-default"] + [data-mod="site-footer"],
[data-mod="cta-newsletter"] + [data-mod="site-footer"],
main:has(> :last-child[data-mod="cta-default"]) + [data-mod="site-footer"],
main:has(> :last-child[data-mod="cta-newsletter"]) + [data-mod="site-footer"] { --mod-top: 0; }

/* ---------- the four areas as classes (F-R380) ----------
   The widths above, ready to put on an element. They are written for the usual
   case: a box that already sits between the margins (a module with
   padding: … var(--margin)). full-area steps back out of those margins, the
   other three stay inside them. Modules either carry the class or compose the
   same tokens; the styleguide shows all four at their real width. */
.full-area { width: var(--full-area); margin-inline: calc((var(--grid-area) - var(--full-area)) / 2); }
.grid-area { width: var(--grid-area); margin-inline: auto; }
.prose-area-default { width: var(--prose-area); margin-inline: auto; }
.prose-area-on-side { width: var(--prose-area); margin-left: var(--prose-indent); }

@media (max-width: 800px) {
  /* one column: every area is the space between the margins */
  .full-area, .grid-area, .prose-area-default, .prose-area-on-side {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 800px) {
  /* small scales too, just on its own slope: 16px at 390, 19px at 800, so the
     layout grows with the screen instead of jumping at 600 */
  html { font-size: clamp(15px, calc(13.15px + 0.73vw), 19px); }
  /* one column, one thumb: the big field would fill half the screen */
  :root { --control-h: 3rem; --control-h-lg: 3.5rem; }
  :root { --space-module: 7rem; --space-module-compact: 3.5rem; }
}

@media (min-width: 1500px) {
  html { overflow-x: clip; }
}

html,
b, strong { font-weight: var(--fw-bold); } /* bold means the heading weight, 600 */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "Manrope", sans-serif; /* Google Fonts: Regular 400 (--fw-regular), SemiBold 600 (--fw-bold) (F-R349, F-R350) */
  font-weight: var(--fw-regular);
  font-feature-settings: "salt" 1;
}

body {
  width: var(--page-width);
  margin: 0 auto;
  overflow-x: clip; /* clip, not hidden — hidden would break position: sticky */
}

a {
  color: inherit;
  text-decoration: none;
}

.eyebrow {
  font-size: var(--large-text-sm);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: var(--track-sm);
  color: var(--color-ink);
}

/* ---------- draw-in hairlines ---------- */

.line {
  position: absolute;
  background: var(--color-line);
  pointer-events: none;
}

.line-h {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.line-v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
}

.line.at-top { top: 0; }
.line.at-bottom { bottom: 0; }

/* the header hairline (F-R353, as in variant 1): under the chrome row across
   the full width, drawn in on load like every line; it leaves once the page
   moves and comes back at the very top (modules.js, chrome section) */
.site-header-line {
  position: absolute; /* part of the page: it travels up with it (F-R382) */
  top: 5rem; /* the chrome's centre line (2.5rem) mirrored below it */
  z-index: 39; /* above the page, under the menu overlay (40) and the chrome boxes (50) */
}
.line.at-left { left: 0; right: auto; }
.line.at-right { right: 0; left: auto; }

/* ---------- arrow boxes with swap-through hover ---------- */

.arrow-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  background: color-mix(in srgb, var(--color-ink) 5%, var(--color-bg)); /* opaque over the halftone */
  font-size: var(--large-text-md);
  line-height: 1.4;
  transition: background 0.25s ease;
}

.arrow-a,
.arrow-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--arrow-swap);
}

.arrow-b {
  transform: translateX(-100%);
}

.arrow-glyph-clip {
  position: relative;
  display: block;
  overflow: hidden;
  width: 1rem;
  height: 1.4rem;
}
/* ---------- text links: hairline underline on hover ---------- */

.text-link {
  position: relative;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.125rem;
  height: 1px;
  background: var(--color-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.insights-all:hover .text-link::after {
  transform: scaleX(1);
}

/* ---------- header: the page chrome (F-R332) ----------
   Three quiet pieces on the margin: the bare mark, Kontakt as label + arrow
   field (the aside link's pattern), the menu as an arrow-sized field. Solid
   ink stays with the calls to action; the chrome ranks below them. */

.site-header-v4 {
  /* the mark on the margin. At the top of the page it stands bare and full;
     once the page moves it folds into a menu-sized field showing the swoosh
     alone, and unfolds to the full mark on hover, in a field with room around
     it (F-R333/F-R334). The mark's left edge stays on the margin and its
     centre line on the menu field's in every state. */
  --mark-pad: 1.25rem; /* horizontal room around the unfolded mark */
  position: fixed;
  top: 0.75rem; /* centre at 2.5rem, like the 2rem menu field at 1.5rem */
  left: calc(var(--margin) - var(--mark-pad));
  z-index: 50;
  display: flex;
  align-items: center;
  width: calc(var(--mark-pad) * 2 + 3.5rem);
  height: 3.5rem;
  padding-left: var(--mark-pad);
  overflow: hidden;
  background: transparent;
  transition: top 0.4s cubic-bezier(0.65, 0, 0.35, 1), left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1), height 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.4s cubic-bezier(0.65, 0, 0.35, 1), background 0.25s ease;
}
.site-header-v4.is-compact:not(:hover) {
  --mark-pad: 0.375rem;
  top: 1.5rem;
  width: 2rem;
  height: 2rem;
}
.site-header-v4.is-compact { background: var(--chrome-field); }
/* the mark hovers like the menu box: the same field and mark colours in every
   state — folded or not, even when it stands bare at the top (F-R376) */
.site-header-v4:hover { background: var(--chrome-hover-field); }
.site-header-v4:hover .bar-logo { color: var(--chrome-hover-mark); }
/* folded, the mark is a line (F-R371 — a dot since F-R336): the wordmark fades
   and the swoosh flattens and shortens onto the field's centre, where a crisp
   line the size of a burger bar takes over. The line tilts with the scroll
   speed and settles flat once the page rests (modules.js, chrome section).
   Hover and the top of the page unfold the logo again. */
.bar-logo { position: relative; }
.bar-logo svg {
  flex: none;
  transform-origin: 41.5% 50%; /* the swoosh's centre: 28.2 of the 68 viewBox units */
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.mark-word { transition: opacity 0.2s ease; }
.mark-line {
  position: absolute;
  left: 0.625rem; /* the folded field's centre (1rem − 0.375rem pad), a constant from the mark's left edge (F-R338) */
  top: 50%;
  width: 1.125rem; /* one burger bar */
  height: 2px;
  margin: -1px 0 0 -0.5625rem;
  background: var(--chrome-mark);
  opacity: 0;
  transform: scaleX(0.35);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s ease, background 0.25s ease;
}
.site-header-v4.is-compact:not(:hover) .bar-logo svg {
  /* the swoosh's centre (1.4515rem from the svg's left edge) travels onto the
     field centre while it shortens to the line (1.125 of its 2.904rem) and
     flattens to about 2px; then it hands over to the line */
  transform: translateX(calc(0.625rem - 1.4515rem)) scale(0.387, 0.08);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s ease 0.25s;
}
.site-header-v4.is-compact:not(:hover) .mark-word { opacity: 0; }
.site-header-v4.is-compact:not(:hover) .mark-line {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s, opacity 0.15s ease 0.25s, background 0.25s ease;
}

.burger-box {
  position: fixed;
  top: 1.5rem;
  right: calc(var(--margin) - 0.4375rem - var(--sbw, 0px)); /* (2rem field − 1.125rem bars) / 2: the bars end on the margin; page coordinates, see --sbw */
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  overflow: hidden;
  background: var(--chrome-field);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease;
}

.burger-box span {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--chrome-mark);
  transition: transform var(--arrow-swap), background 0.25s ease;
}

.burger-box:hover { background: var(--chrome-hover-field); }
.burger-box:hover span { background: var(--chrome-hover-mark); }
.burger-box:hover span:first-child { transform: translateY(-1px); }
.burger-box:hover span:last-child { transform: translateY(1px); }

.contact-card {
  /* sits at the top of the page and scrolls away — unlike the pinned mark and
     menu, which stay */
  position: absolute;
  top: 1.5rem;
  right: var(--contact-right);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.0625rem;
  height: 2rem;
  color: var(--chrome-text);
  font-size: var(--large-text-md);
  line-height: 1.5;
  letter-spacing: var(--track-md);
  transition: color 0.25s ease;
}

.contact-card > span { position: relative; }

.contact-card .arrow-clip {
  /* the arrow field, as beside "Unsere Beratungsfelder" */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  background: var(--chrome-field);
  color: var(--chrome-mark);
  font-size: var(--large-text-md);
  line-height: 1.4;
  transition: background 0.25s ease, color 0.25s ease;
}

.contact-card:hover .arrow-clip { background: var(--chrome-hover-field); color: var(--chrome-hover-mark); }
.contact-card:hover .arrow-a { transform: translateX(100%); }
.contact-card:hover .arrow-b { transform: translateX(0); }

.bar-logo {
  display: flex;
  color: var(--chrome-mark);
  transition: color 0.25s ease;
}

.bar-logo-svg,
.bar-logo svg {
  width: 3.5rem;
  height: 1.65rem;
}
/* ---------- mask reveal shared parts (used by hero AND quote) ---------- */

.mask {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  /* room above and below the line box: Manrope's descenders (g, p) and the
     umlauts reach past line-height 1.1 and were cut; the negative margins keep
     the layout where it was (F-R352) */
  padding-block: 0.25em;
  margin-block: -0.25em;
}

.line-move {
  display: inline-block;
  will-change: transform;
}

.line-move {
  position: relative;
}

.line-outline {
  display: inline-block;
  -webkit-text-stroke: calc(var(--outline-width) * 2) var(--color-ink);
  color: var(--color-bg);
  paint-order: stroke fill;
}

.line-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- hero (variant 4: claim with the line cloud) ---------- */

.v4-hero {
  position: relative;
}

/* the line cloud (F-R359): one canvas over the hero's own box, under its text
   (z-index −1 inside the hero's stacking context), painted by script.js,
   section "hero line cloud". pointer-events: none also keeps it out of the
   chrome sampler, which reads the page with elementsFromPoint. */
.hero-v4 { isolation: isolate; }
.hero-cloud {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}


.hero-v4 {
  /* spacing straight from the Figma frame (1500 basis): 362px above the eyebrow,
     24px to the headline, 48px under the headline block, 80px to the meta row,
     120px below it. Grid so the aside can sit on the headline's baseline. */
  /* exactly one viewport: the content sits at the bottom and the space above
     it flexes, instead of a fixed 362px top that made the hero overflow the
     screen on anything shorter than 1000px */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 20.1875rem;
  column-gap: var(--gut);
  align-content: end;
  height: 100vh;
  min-height: 44rem;
  padding: 10rem var(--margin) 4.5rem; /* 3rem under the headline block + 4.5rem = 7.5rem (Figma's 120px) to the fold, now that the meta bar is gone (F-R342) */
}

.hero-tag {
  grid-column: 1 / -1;
  font-size: var(--large-text-md);
  line-height: 1.4;
  letter-spacing: var(--track-md);
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.hero-v4 .hero-lines {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.hero-v4 .hero-row {
  position: relative;
  display: flex;
  font-size: var(--large-text-6xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-6xl);
  white-space: nowrap;
}

.hero-aside {
  grid-column: 2;
  align-self: end;
  padding-bottom: 3rem;
  font-size: var(--large-text-md);
  line-height: 1.5;
}

.aside-link {
  display: inline-flex;
  align-items: center;
  gap: 1.0625rem;
  margin-top: 1.5rem;
  font-size: var(--large-text-md);
  line-height: 1.5;
}

.aside-link:hover .arrow-box { background: var(--color-accent); }
.aside-link:hover .arrow-a { transform: translateX(100%); }
.aside-link:hover .arrow-b { transform: translateX(0); }
.aside-link:hover .text-link::after { transform: scaleX(1); }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.toggle-track {
  position: relative;
  display: inline-block;
  width: 1.75rem;
  height: 0.875rem;
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--color-ink) 12%, var(--color-bg)); /* opaque over the halftone */
}

.toggle-dot {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-ink);
  transition: transform var(--arrow-swap);
}

.lang-toggle.is-en .toggle-dot {
  transform: translateX(0.875rem);
}

/* ---------- statement (green band) ---------- */

/* only right after the hero does the band overtake it (home page) */

/* ---------- Header.Hero, second part: the photo (F-R347, F-R348) ----------
   Part of the hero module (inside .v4-hero, so the dot field stays pinned
   behind it). Variant 1's growing image: the frame starts four columns wide
   at the photo's 3:2 and grows with the scroll (script.js) until it fills the
   width and --grow-end-h; then it pins while the statement slides over it. */
.media-grow {
  --grow-end-h: 100vh; /* the frame once grown: full screen height, so no head gets cropped on wide screens */
  position: relative;
  height: calc(var(--grow-end-h) + 100vh); /* the grow phase + the viewport the statement needs to slide over */
}
.media-grow-frame {
  position: sticky;
  top: calc(100vh - var(--grow-end-h)); /* pins with its bottom on the viewport bottom */
  width: var(--col4);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: hidden;
}
.media-grow-frame picture { display: contents; } /* the phone crop's wrapper (F-R363) */
.media-grow-frame img {
  display: block;
  width: 100%;
  height: 112%; /* headroom for the drift while the statement covers it */
  object-fit: cover;
}
.media-grow-shade {
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  opacity: 0;
  pointer-events: none;
}
.v4-hero + .statement { margin-top: -100vh; } /* slides over the pinned photo */

/* Exception, documented: the home's hero → statement → stages sequence is one
   choreography, not three stacked modules — the statement slides over the
   pinned photo (margin-top: -100vh) and the stages continue its surface. It
   stays outside the spacing system (F-R387). */
.statement {
  position: relative;
  z-index: 2;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--color-accent);
  padding: 7.5rem var(--margin); /* on the margin, like the "In Zahlen" column below (F-R351) */
}

.statement h2 {
  max-width: var(--col6); /* six columns: the lines stay readable on the margin */
  font-size: var(--large-text-4xl); /* one step down from 5xl (F-R351) */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--track-4xl);
}

/* ---------- about (green, two columns) ---------- */

.about-text {
  font-size: var(--large-text-md);
  line-height: 1.5;
  font-feature-settings: "case" 1;
}

/* the intro's closing line belongs to the stacked layout (F-R389) */
.stages-edge { display: none; }

.stages {
  position: relative;
  background: var(--color-accent);
  transition: background-color 0.4s ease, color 0.4s ease; /* switches per stage via JS */
}

.stages-track {
  position: relative;
  margin-left: 34.78125rem; /* margin + 3 columns */
}

.stage-block {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 5rem var(--margin);
}

/* unused since F-R351 (the stages run text-only as a trial) — delete when the trial sticks */
.stage-image {
  position: relative;
  width: 53.46875rem; /* five columns */
  max-width: 100%;
  aspect-ratio: 811 / 456.1875;
  overflow: hidden;
}

.stage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the stations walk Mint → Pearl → Valentino → Mint; the class names the
   ground, the type follows (F-R326, F-R330, F-R331) */
.stages.is-pearl { background: var(--color-pearl); }
.stages.is-valentino {
  background: var(--color-ink);
  color: var(--color-paper);
  --color-line: hsl(var(--hsl-alabaster) / 0.18);
}
.stages.is-valentino .eyebrow,
.stages.is-valentino .stage-block h3 { color: var(--color-paper); }

.stage-block h3 {
  width: 53.46875rem; /* five columns */
  max-width: 100%;
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--track-4xl);
  font-feature-settings: "case" 1;
}

.stages-left {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34.78125rem; /* margin + 3 columns */
  padding: 7.5rem var(--margin); /* bottom padding = where the sticky text stops before the edge */
  z-index: 5;
  pointer-events: none;
}

.stages-left-inner {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---------- insights ---------- */

.insights {
  position: relative;
  padding-top: var(--mod-top, var(--space-module));
  /* the 3rem stay: they are the distance from the last card to the section's
     own closing hairline, inside the module (F-R387) */
  padding-bottom: 3rem;
}

.insights-canvas {
  position: relative;
  /* ends with the big card and the "Alle Beiträge" row (F-R309) — the section's
     bottom hairline sits 3rem below them */
  height: 51.8125rem;
}

.insights-title {
  position: absolute;
  left: var(--margin);
  top: 3rem;
  width: 31.28125rem; /* three columns */
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  font-feature-settings: "case" 1;
}

.insights-tabs {
  position: absolute;
  left: 46.875rem;
  top: 3rem; /* on the title's line */
  display: flex;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.84375rem;
  height: 3.5rem;
  font-size: var(--large-text-md);
  line-height: 1.5;
  background: var(--color-box);
  transition: background 0.25s ease;
}

.tab.is-active {
  background: var(--color-ink);
  color: var(--color-paper);
}

.tab {
  overflow: hidden;
}

.tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-tab-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.tab > span {
  position: relative;
}

.tab:not(.is-active):hover::before {
  transform: scaleX(1);
}

.card {
  position: absolute;
  top: 9.9375rem; /* 1.75rem up with the title (F-R202 tightening, completed in F-R309) */
  background: var(--color-card);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.card:hover::before {
  transform: scaleX(1);
}

.card-large {
  left: 0;
  /* the insight cards butt against each other, as in Figma — no gutter here */
  width: 46.875rem;
  height: 41.875rem;
}

.card-small {
  width: 21.6875rem;
  height: 19.4375rem;
}

.card-mid {
  left: 46.875rem;
}

.card-right {
  left: 68.5625rem;
}

.card-eyebrow {
  position: absolute;
  left: 3.5rem;
  top: 3.5rem;
}

.card-small .card-eyebrow {
  left: 2rem;
  top: 2rem;
}

.card-title-large {
  position: absolute;
  left: 3.5rem;
  bottom: 3.5rem;
  width: 39.875rem;
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--track-4xl);
  font-feature-settings: "case" 1;
}

.card-title-small {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 17.6875rem;
  font-size: var(--large-text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.insights-all {
  position: absolute;
  right: var(--margin);
  top: 49.8125rem; /* bottom edge on the big card's bottom edge */
  display: flex;
  align-items: center;
  gap: 1.0625rem;
  font-size: var(--large-text-md);
  line-height: 1.5;
}

.insights-all:hover .arrow-box { background: var(--color-accent); }
.insights-all:hover .arrow-a { transform: translateX(100%); }
.insights-all:hover .arrow-b { transform: translateX(0); }

/* ---------- quote ---------- */

.quote {
  position: relative;
  height: 56.25rem;
  /* a band brings its own ground, so its inset sits above the surface — inside
     it the colour would swallow the gap (F-R387) */
  margin-top: var(--mod-top, var(--space-module));
  /* one grid cell shared by the review tag anchor (top, full width, sticky) and
     the centred text — as a flex row the zero-size anchor sat centred at x=0
     and the tag was off the left edge */
  display: grid;
  align-items: center;
  background-image: linear-gradient(var(--color-overlay-dark), var(--color-overlay-dark)), url("assets/quote-bg.webp");
  background-size: cover;
  background-position: center;
}

.quote > * { grid-area: 1 / 1; }
.quote > .tag-anchor { align-self: start; }

.quote-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 14.375rem;
  color: var(--color-accent);
}

.quote blockquote {
  font-size: var(--large-text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-5xl);
  text-indent: -1.5625rem; /* hanging opening quote */
  font-feature-settings: "case" 1, "dlig" 1;
}

.quote .line-outline {
  -webkit-text-stroke: var(--outline-width) var(--color-accent);
  color: transparent;
  paint-order: normal;
}

/* SplitText's line masks (overflow: clip, inline): the same room for descenders (F-R352) */
.quote blockquote > div { padding-block: 0.25em; margin-block: -0.25em; }

.quote blockquote .line-move {
  display: inline-block;
  position: relative;
  will-change: transform;
}

.quote blockquote .line-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.quote-attribution {
  font-size: var(--large-text-md);
  line-height: 1.4;
}

/* ---------- faq ---------- */

.faq {
  position: relative;
  padding-top: var(--mod-top, var(--space-module));
}

.faq-head {
  position: relative;
  margin-left: var(--margin);
  width: 64.5625rem;
  padding: 0 0 3.5rem; /* the module's inset is on .faq now (F-R387) */
}

.faq-head h2 {
  width: 31.28125rem; /* three columns */
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  font-feature-settings: "case" 1;
}

.faq-list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.faq-item {
  position: relative;
}

.faq-row {
  position: relative;
  display: flex;
  align-items: stretch;
  transition: background 0.25s ease;
}

.faq-row:hover,
.faq-item.is-open .faq-row {
  background: var(--color-accent);
}

.faq-answer {
  height: 0;
  overflow: hidden;
}

/* the head carries no rule of its own — the list's hairlines do the dividing */
.faq-head > i.line { display: none; }

.faq-answer-inner {
  padding: 3rem 12.125rem 3rem 12.4375rem; /* aligns with the question column */
  font-size: var(--large-text-md);
  line-height: 1.5;
}

.faq-arrow-glyph {
  display: inline-block;
  transition: transform 0.35s ease;
}

.faq-item.is-open .faq-arrow-glyph {
  transform: scaleY(-1);
}

.faq-num {
  position: relative;
  display: flex;
  align-items: center;
  width: 8.9375rem;
  flex-shrink: 0;
  padding: 0 var(--margin);
  font-size: var(--large-text-sm);
  line-height: 1.4;
  letter-spacing: var(--track-sm);
  color: var(--color-ink);
}

.faq-question {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem var(--margin);
  font-size: var(--large-text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.faq-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.625rem;
  flex-shrink: 0;
  background: var(--color-box);
  font-size: 2.5rem;
  line-height: 1.3;
  transition: background 0.25s ease;
}

.faq-row:hover .faq-arrow,
.faq-item.is-open .faq-arrow { background: var(--color-accent); }

/* ---------- small: one column ----------
   Sits next to the same breakpoint in modules.css. The home page's own
   sections (hero, statement, stages, footer) are defined here, so they need
   their own reset — the hero headline is set with white-space: nowrap and
   would otherwise push the page to its desktop width. */
@media (max-width: 800px) {
  .v4-hero { height: auto; padding-bottom: 0; }
  /* the hero is as tall as its content on small — a full viewport left a
     screenful of empty space under the meta row */
  /* the overlay needs a full screen to cover: the hero fills the viewport, its
     content sits at the bottom, and the mint band scrolls over it */
  /* the block sits at the bottom of the screen; the padding is the floor for
     short phones, where the kicker would otherwise crowd the pinned boxes */
  .hero-v4 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    padding: 7.5rem var(--margin) 3rem; /* the fold, without the meta bar (F-R342) */
    overflow: hidden;
  }

  .hero-v4 .hero-tag { margin-top: auto; }

  .hero-tag { font-size: var(--small-text-xs); letter-spacing: var(--small-track-xs); margin-bottom: 1.25rem; }

  /* the four hero lines are separate blocks, each with its own reveal mask —
     on small they wrap, so the leading has to come from the row rather than
     from the line break, and the rows sit closer together */
  .hero-v4 .hero-lines { padding-bottom: 0; }

  /* the headline is the one big thing on the screen — at 28 against a 16px
     lead there was barely a step between them */
  .hero-v4 .hero-row {
    display: block;
    font-size: var(--small-text-4xl);
    line-height: 1.2;
    letter-spacing: var(--small-track-4xl);
    white-space: normal;
  }

  /* the outlined type carries a 3px stroke, drawn for 88px letters — at this
     size it thickened every stem and read as a heavier weight */
  .hero-v4 .line-outline { -webkit-text-stroke-width: 1px; }

  .hero-v4 .hero-row + .hero-row { margin-top: 0.125rem; }
  .hero-aside { width: auto; margin-top: 2rem; padding-bottom: 0; }
  .hero-aside p { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); line-height: 1.65; }

  /* the link steps down with the rest */
  .aside-link { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); }
  .aside-link .arrow-box { width: 1.75rem; height: 1.75rem; }
  .aside-link .arrow-glyph-clip { width: 0.875rem; height: 1.2rem; }


  /* the statement band and the stage sequence lose their sticky layout */
  /* phones: a portrait crop grows into a frame that fills the screen, so no gap
     opens above the pinned photo while the statement slides over it (F-R363) */
  .media-grow { --grow-end-h: 100vh; }
  .media-grow-frame { width: calc(100% - 2 * var(--margin)); aspect-ratio: 3 / 4; }
  .statement { margin-top: 0; padding: 4rem var(--margin); }
  .statement-inner, .statement h2 { width: auto; max-width: none; padding: 0; font-size: var(--small-text-2xl); letter-spacing: var(--small-track-2xl); line-height: 1.3; } /* one step down, like large (F-R351) */

  /* no padding of its own: the last station's own 1.75rem carries to the
     section's closing line (F-R389) */
  .stages { display: block; padding: 0; }

  .stages-left {
    position: relative; /* its closing line belongs to it, not to the section */
    width: auto;
    /* the same air under the intro as a station keeps over its line (F-R389) */
    padding: 2.5rem var(--margin) 1.75rem;
  }

  /* stacked, the divider between the two columns has nothing to divide — it
     stood as a stray line on the right edge of the screen; the intro closes
     with a horizontal line instead, like every station (F-R389) */
  .stages-left .line-v { display: none; }
  .stages-edge { display: block; }

  .stages-left-inner { position: static; }
  .stages-track { width: auto; margin-left: 0; }

  /* the stages are a full-height pinned sequence on desktop — on small each
     station is one block: picture edge to edge, then kicker, headline, text
     on the margin. The colour steps carry the sequence, so the blocks sit
     directly on top of each other. */
  .stages-sticky { position: static; width: auto; padding: 2.5rem 0 0.5rem; }

  .stage-block {
    width: auto;
    min-height: 0;
    height: auto;
    /* the text sits between two lines, with the same distance to each (F-R389) */
    padding: 1.75rem 0;
  }

  .stage-block img { width: 100%; height: 52vw; object-fit: cover; margin-bottom: 1.25rem; }

  .stage-block .eyebrow {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--margin);
    margin-bottom: 0.5rem;
  }

  .stage-block h3 {
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--margin);
    font-size: var(--small-text-2xl);
    line-height: 1.3;
    hyphens: auto;
  }

  .stage-block p {
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0 var(--margin);
    font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md);
    line-height: 1.6;
  }

  /* footer */
  .site-footer { padding: 4rem var(--margin); }
  .footer-logo { margin-bottom: 2rem; }
  .footer-top { display: block; }
  .footer-nav { display: block; margin-top: 2rem; }
  .footer-nav a { display: block; padding: 0.375rem 0; }
  .footer-cols { display: block; }
  .footer-cols > * + * { margin-top: 1.5rem; }
  .footer-bottom { display: block; margin-top: 2.5rem; }
  .footer-bottom > * + * { margin-top: 0.75rem; }
  .footer-legal { display: block; }
  .footer-legal a { display: inline-block; margin: 0 1rem 0.25rem 0; }
}