/* ============================================================
   uwalkin — SCENE 02
   Implemented from Figma: MO-AMIN-SCENE_02, node 232:85 (1728×1200)
   ============================================================ */
/* ── design tokens ─────────────────────────────────────────── */
:root {
    /* palette (raw hex from the Figma node — no variables were defined) */
    --c-bone: #f1efe9;

    /* logo "u/walk", footer copy */
    --c-coral: #ff9376;

    /* logo "in" */
    --c-sage: #a7aea9;

    /* nav, byline, CTA, arrow */
    --c-sage-deep: #6d746f;

    /* vertical rail */
    --c-rule-top: #b5b5b5;

    /* masthead rule */
    --c-rule-bottom: #c8c8c8;

    /* baseline rule */
    --c-title-warm: rgba(255, 147, 118, .6);
    --c-title-cool: rgba(140, 146, 141, .8);
    --c-void: #090a09;
    --c-ink: #17201c;

    /* scene 03 ground */
    --c-panel: #353535;

    /* CHECKASK panel */
    --c-rule-eye: #727272;

    /* eyebrow rule */
    --c-rule-row: #686868;

    /* list rules */
    --c-display: #8c928d;

    /* scene 03 display type */
    --c-card-ink: #dedede;

    /* scene 04 card type */
    --c-sand: #d8d2c7;

    /* about eyebrow + lifted note */
    /* proportional unit: 1 design px. Exact at a 1728px viewport,
     scales the whole composition either side of it. */
    --u: clamp(0.5208px, 100vw / 1728, 1.12px);

    /* legibility floor for micro-typography */
    --micro: 11px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    background: var(--c-void);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion:no-preference){
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: var(--c-void);
    color: var(--c-bone);
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

img,
svg {
    display: block;
}

:focus-visible {
    outline: 1px solid var(--c-coral);
    outline-offset: calc(6 * var(--u));
}

/* ============================================================
   SCENE  ·  232:85
   ============================================================ */
.scene {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* ── background image ──────────────────────────────────────── */
.scene__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.scene__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 1672×941 source (aspect 1.777), centre-cropped. At rest this is
     exactly `center`. Cover leaves horizontal slack for script.js to pan
     within - 136px either side at 1728x1117 - with no zoom. The slack is
     whatever cover overflows, so it shrinks as the window gets wider and
     shorter, and reaches zero once the hero box is wider than 1.777:1
     (above ~1728x973). The pan simply has no room there and sits still;
     nothing clips or jumps. */
    object-position: calc(50% + var(--bg-x, 0px)) center;
    will-change: object-position;
}

/* ── content column (padding 20 / 30) ──────────────────────── */
.scene__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100svh;
    width: 100%;
    padding: calc(100 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
}

/* ============================================================
   MASTHEAD  ·  232:86
   ============================================================ */
.masthead {
    /* Fixed, not in flow. The hero and the impressum page each add an
     equivalent top padding so nothing below it moves - see
     .scene__inner / .impress. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
    transition: transform .4s var(--ease),
    background-color .4s var(--ease),
    backdrop-filter .4s var(--ease);
}

/* Detached from the hero it needs a ground of its own, but at the very
   top it must look exactly as designed - transparent, no backdrop. */
.is-scrolled .masthead {
    background: rgba(9, 10, 9, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* hidden while travelling down, back on the first upward move */
.is-nav-hidden .masthead {
    transform: translateY(-100%);
}

/* The mobile overlay (.nav) is a position:fixed CHILD of this element, so
   anything here that establishes a containing block - a transform, or the
   backdrop-filter above - stops the overlay resolving against the viewport
   and clips it to this 84px bar. That is exactly what is-scrolled's blur
   did: full-screen at the top of the page, an 84px sliver once scrolled.
   Both are dropped while the menu is open. Nothing is lost - the overlay
   sitting behind this strip is already a flat wash, so there is no page
   content left underneath for the blur to act on. The transform is listed
   defensively (is-nav-hidden is cleared on open) and its transition with
   it, since a transform still in flight toward none is a matrix, and a
   matrix is a containing block. */
.is-nav-open .masthead {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: background-color .4s var(--ease);
}

/* the 1px rule, drawn as a pseudo-element so it can wipe in */
.masthead::after {
    content: "";
    position: absolute;
    inset: auto calc(30 * var(--u)) 0;

    /* stays inside the 30u gutters */
    height: 1px;
    background: var(--c-rule-top);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--ease) .15s;
}

.is-ready .masthead::after {
    transform: scaleX(1);
}

/* ── logo  ·  232:87 / 232:88 ──────────────────────────────── */
.logo {
    display: flex;
    align-items: flex-start;
    padding-right: calc(8 * var(--u));
}

.logo__stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-weight: 700;
    font-size: max(19px, calc(33 * var(--u)));
    line-height: max(11.5px, calc(20 * var(--u)));
    letter-spacing: -.07em;

    /* -2.31px @ 33px */
    color: var(--c-bone);
    text-box: trim-both cap alphabetic;
}

.logo__line {
    display: block;
}

.logo__line--accent {
    color: var(--c-coral);
}

/* ── nav  ·  232:89 ────────────────────────────────────────── */
.nav {
    display: flex;
    align-items: center;
    gap: calc(88 * var(--u));
}

.nav__link {
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: max(var(--micro), calc(14 * var(--u)));
    line-height: 1.08;

    /* 15.12px @ 14px */
    letter-spacing: .088em;

    /* 1.232px @ 14px */
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-sage);
    transition: color .35s var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-6 * var(--u));
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .45s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--c-bone);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ── language switch  ·  nav tail ──────────────────────────────
   Reads as a fourth nav item: same case, size and tracking. Only
   the language you are NOT reading is a link — the current one is
   inert and carries the brighter ink, which is the same signal the
   other nav links use on hover. */
.langswitch {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-weight: 500;
    font-size: max(var(--micro), calc(14 * var(--u)));
    line-height: 1.08;
    letter-spacing: .088em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The language you are reading stays a real link so both URLs are
   always crawlable from both versions - it is only marked, not removed. */
.langswitch__link[aria-current] {
    color: var(--c-bone);
    cursor: default;
}

.langswitch__link[aria-current]::after {
    content: none;
}

.langswitch__sep {
    color: var(--c-sage-deep);
}

.langswitch__link {
    position: relative;
    display: inline-block;
    color: var(--c-sage);
    transition: color .35s var(--ease);
}

.langswitch__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-6 * var(--u));
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .45s var(--ease);
}

.langswitch__link:hover,
.langswitch__link:focus-visible {
    color: var(--c-bone);
}

.langswitch__link:hover::after,
.langswitch__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ── CTA  ·  240:6 / 240:13 ────────────────────────────────── */
.masthead__end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cta {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    color: var(--c-sage);
    transition: color .35s var(--ease);
}

.cta__label {
    font-weight: 700;
    font-size: max(var(--micro), calc(14 * var(--u)));
    line-height: 1.08;
    letter-spacing: .088em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cta__icon {
    display: block;
    width: max(14px, calc(18 * var(--u)));
    height: max(14px, calc(18 * var(--u)));
    transition: transform .45s var(--ease);
}

.cta__icon svg {
    width: 100%;
    height: 100%;
}

.cta:hover,
.cta:focus-visible {
    color: var(--c-bone);
}

.cta:hover .cta__icon {
    transform: translateX(calc(6 * var(--u)));
}

/* mobile-only menu button */
.nav-toggle {
    display: none;
    width: 34px;
    height: 34px;
    margin-left: 14px;
    padding: 0;
    cursor: pointer;
    place-items: center;
    align-content: center;
    justify-items: center;
    gap: 6px;
    color: var(--c-sage);
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform .4s var(--ease), opacity .3s var(--ease);
}

/* ============================================================
   BYLINE  ·  232:100 / 232:101
   ============================================================ */
.byline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: calc(20 * var(--u));
}

.byline__text {
    width: calc(268 * var(--u));
    font-weight: 700;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;

    /* 15.12px @ 11.2px */
    letter-spacing: .11em;

    /* 1.232px @ 11.2px */
    text-transform: uppercase;
    color: var(--c-sage);
}

.byline__text span {
    display: block;
}

/* ============================================================
   TITLEFRAME  ·  232:104
   ============================================================ */
.titleframe {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    width: 100%;
    padding-bottom: calc(20 * var(--u));
}

.titleframe__spacer {
    flex: 1 0 0;
    min-height: calc(20 * var(--u));
    width: 100%;
}

/* ── TITLEBOX  ·  232:106 ──────────────────────────────────── */
.titlebox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(12.5 * var(--u));
    width: calc(631 * var(--u));
    max-width: calc(1400 * var(--u));
    font-weight: 600;
    font-size: calc(110 * var(--u));
    line-height: calc(86 * var(--u));
    letter-spacing: -.08em;

    /* -8.8px @ 110px */
}

.titlebox__group {
    display: block;
}

.titlebox__group--accent {
    min-width: 100%;
    color: var(--c-title-warm);
}

.titlebox__group--muted {
    width: calc(678 * var(--u));
    color: var(--c-title-cool);
}

.titlebox__line {
    display: block;
    white-space: nowrap;
}

/* ============================================================
   BASELINE  ·  232:109
   ============================================================ */
.baseline {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: calc(20 * var(--u)) 0;
    color: var(--c-bone);
}

.baseline::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--c-rule-bottom);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--ease) .35s;
}

.is-ready .baseline::before {
    transform: scaleX(1);
}

.baseline__copy {
    width: calc(811 * var(--u));
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: 1.182;

    /* 26px @ 22px */
    letter-spacing: -.05em;

    /* -1.1px @ 22px */
    text-box: trim-both cap alphabetic;
}

/* ── SEIT 2007  ·  232:111 ─────────────────────────────────── */
.since {
    display: flex;
    align-items: flex-end;
    gap: calc(10 * var(--u));
}

.since__label {
    font-weight: 400;
    text-transform: uppercase;
    font-size: max(12px, calc(15.2 * var(--u)));
    line-height: 1.35;
    text-box: trim-both cap alphabetic;
}

.since__year {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 700;
    font-size: max(28px, calc(40 * var(--u)));
    line-height: 1;
    letter-spacing: -.05em;

    /* -2px @ 40px */
    text-box: trim-both cap alphabetic;
}

/* ============================================================
   VERTICAL RAIL  ·  232:114
   ============================================================ */
.rail {
    position: absolute;
    z-index: 2;
    top: 58.417%;

    /* 701 / 1200 */
    right: calc(20 * var(--u));

    /* right 36 − own width 16 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(16 * var(--u));
    height: calc(130 * var(--u));
    color: var(--c-sage-deep);
    transition: color .4s var(--ease);
}

.rail__text {
    flex: none;
    display: block;
    width: calc(130 * var(--u));
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 700;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    transform: rotate(90deg);
}

.rail__arrow {
    display: inline-block;
    transition: transform .45s var(--ease);
}

.rail:hover,
.rail:focus-visible {
    color: var(--c-bone);
}

.rail:hover .rail__arrow {
    transform: translateX(4px);
}

/* ============================================================
   SCENE 03  ·  232:115  ·  EIN ZWEITER BLICK
   Frame 1728x1698. Height is purely intrinsic here - the stack
   of paddings and fixed rows sums to 1698 on its own.
   ============================================================ */
.probe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: calc(60 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
    background: var(--c-ink);
}

/* ── eyebrow · 232:116 ─────────────────────────────────────── */
.probe__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: calc(20 * var(--u));
    border-top: 1px solid var(--c-rule-eye);
}

.eyebrow {
    font-weight: 700;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;

    /* 15.12px @ 11.2px */
    letter-spacing: .11em;

    /* 1.232px @ 11.2px */
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-sage);
}

/* ── shared display face · 60px SemiBold ───────────────────── */
.display {
    font-weight: 600;
    font-size: calc(60 * var(--u));
    line-height: calc(46 * var(--u));
    letter-spacing: -.08em;

    /* -4.8px @ 60px */
    color: var(--c-display);
}

.display--lead {
    width: calc(895 * var(--u));
    line-height: calc(47 * var(--u));
}

.display--narrow {
    width: calc(355 * var(--u));
}

.display--coral {
    color: var(--c-coral);
}

/* ── lead + status list · 232:119 ──────────────────────────── */
.probe__split {
    display: flex;
    align-items: center;
    width: 100%;
}

.probe__lead-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-start;
    height: calc(340 * var(--u));
    padding: calc(40 * var(--u)) 0 calc(100 * var(--u));
}

.probe__status-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: calc(40 * var(--u)) 0;
}

.status {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.status__row {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: calc(51 * var(--u));

    /* rule sits inside the 51 */
    padding: calc(20 * var(--u)) 0;
    border-top: 1px solid var(--c-rule-row);
}

.status__row:last-child {
    border-bottom: 1px solid var(--c-rule-row);
}

.status__text {
    flex: 1 0 0;
    min-width: 0;
    font-weight: 500;
    font-size: max(13px, calc(15 * var(--u)));
    line-height: 1.334;

    /* 20px @ 15px */
    letter-spacing: -.05em;

    /* -0.75px @ 15px */
    color: var(--c-bone);
    text-box: trim-both cap alphabetic;
}

/* ── concession · 232:131 ──────────────────────────────────── */
.probe__concession {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: calc(20 * var(--u)) 0;
}

/* ── the turn · 232:133 ────────────────────────────────────── */
.probe__turn {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    padding: calc(20 * var(--u)) 0 calc(140 * var(--u)) calc(136 * var(--u));
}

.probe__turn .display {
    /* CSS appends letter-spacing after the last glyph of every line. On
     right-aligned text that pushes each line 4.8px (-.08em @ 60px) past
     where Figma sets it, so the box is widened by that much and padded
     back - the content width stays 437 and the wrap points don't move. */
    width: calc((437 * var(--u)) + .08em);
    padding-right: .08em;
    height: calc(138 * var(--u));
    text-align: right;
}

/* ── the five questions · 232:135 ──────────────────────────── */
.probe__questions {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding-bottom: calc(100 * var(--u));
}

/* Spacer (232:136). The 10px padding is load-bearing: with flex-basis:0
   it is added on top of the flex share, so the gutter takes 844 and the
   question column 824 - which is exactly what the Figma render measures
   (its rule spans x 874-1697). Dropping it would give a 50/50 split. */
.probe__questions-gutter {
    flex: 1 0 0;
    min-width: 0;
    align-self: stretch;
    padding: calc(10 * var(--u));
}

.questions {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.questions__row {
    display: flex;
    align-items: flex-start;
    gap: calc(12 * var(--u));
    width: 100%;
    height: calc(51 * var(--u));
    padding: calc(16 * var(--u)) 0 calc(10 * var(--u));
    border-top: 1px solid var(--c-rule-row);
}

.questions__row:last-child {
    border-bottom: 1px solid var(--c-rule-row);
}

.questions__num {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 500;
    font-size: max(10px, calc(11 * var(--u)));
    line-height: 1.818;

    /* 20px @ 11px */
    letter-spacing: -.05em;
    color: var(--c-coral);
    text-box: trim-both cap alphabetic;
}

.questions__text {
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: .91;

    /* 20px @ 22px */
    letter-spacing: -.05em;

    /* -1.1px @ 22px */
    color: var(--c-bone);
    text-box: trim-both cap alphabetic;
}

/* ── CHECKASK · 232:153 ────────────────────────────────────── */
.checkask {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: calc(400 * var(--u));
    padding: calc(20 * var(--u));
    overflow: hidden;
    background: var(--c-panel);
}

.checkask__body {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: calc(175 * var(--u));
}

.checkask__claim {
    flex: 1 0 0;
    min-width: 0;
}

.checkask__claim span {
    display: block;
}

.checkask__aside {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(31 * var(--u));
    height: 100%;
    padding-bottom: calc(20 * var(--u));
}

.checkask__copy {
    width: calc(749 * var(--u));
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: 1.182;

    /* 26px @ 22px */
    letter-spacing: -.05em;
    color: var(--c-coral);
    text-box: trim-both cap alphabetic;
}

/* ── CTA button · 232:161 ──────────────────────────────────── */
.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(240 * var(--u));
    height: calc(38 * var(--u));
    padding: 0 calc(16 * var(--u));
    border-radius: calc(4 * var(--u));
    background: var(--c-coral);
    color: #000;
    transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.button__label {
    padding: calc(2 * var(--u)) calc(4 * var(--u));
    font-weight: 700;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-panel);
    text-box: trim-both cap alphabetic;
}

.button__icon {
    width: max(16px, calc(20 * var(--u)));
    height: max(16px, calc(20 * var(--u)));
    transition: transform .4s var(--ease);
}

.button__icon svg {
    width: 100%;
    height: 100%;
}

.button:hover,
.button:focus-visible {
    background: #ffa88f;
}

.button:hover .button__icon {
    transform: translateX(calc(4 * var(--u)));
}

/* ============================================================
   LOCALISATION
   ============================================================ */
/* Set by i18n.js only when a non-default dictionary is on its way, and
   cleared as soon as it lands or fails. The class is never present with
   scripting off, and never on the default language, so neither case can
   be left staring at a hidden page. */
.i18n-pending body {
    visibility: hidden;
}

/* ============================================================
   ENTRANCE CHOREOGRAPHY
   ============================================================ */
/* Scoped to .js (set in <head> before first paint) so that with
   scripting off the page renders complete instead of blank. */
.js .logo,
.js .nav__link,
.js .langswitch,
.js .masthead__end,
.js .byline__text,
.js .titlebox__line,
.js .baseline__copy,
.js .since,
.js .rail {
    opacity: 0;
    transform: translateY(var(--rise, 14px));
    transition: opacity .9s var(--ease) var(--delay, 0s),
    transform 1s var(--ease) var(--delay, 0s);
}

.titlebox__line {
    --rise: .14em;
}

.rail {
    --rise: 0px;
}

.is-ready .logo,
.is-ready .nav__link,
.is-ready .langswitch,
.is-ready .masthead__end,
.is-ready .byline__text,
.is-ready .titlebox__line,
.is-ready .baseline__copy,
.is-ready .since,
.is-ready .rail {
    opacity: 1;
    transform: none;
}

.js .scene__bg-img {
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}

.is-ready .scene__bg-img {
    opacity: 1;
}

/* ============================================================
   SCENE 04  ·  232:166  ·  WAS ICH MACHE
   Frame 1728x1055, intrinsic height.

   Ground: the dust plate multiplied down to 66% over pure black
   - not a tinted overlay, and not over the page's --c-void.
   The 0.66 was originally derived by fitting the Figma render
   against the old dust-bg asset (out = raw x 0.6596, zero
   intercept on all three channels, mean err 0.41). That asset
   has since been replaced by dusty.webp, so the figure is now
   an inherited art-direction choice rather than a measured fit
   - re-fit it if this section is ever matched to a comp again.
   ============================================================ */
.craft {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #000;
}

.craft__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.craft__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .66;
}

.craft__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    width: 100%;
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
}

/* ── eyebrow · 232:167 → 232:170 ───────────────────────────── */
.craft__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    /* 232:167 px-10 + 232:168 px-20, flattened. The 1960px width on
     232:168 is inert - the content is left-aligned and 160 wide -
     so reproducing it would only force a page-wide overflow. */
    padding: 0 calc(30 * var(--u));
}

/* ── quote + note · 232:171 ────────────────────────────────── */
.craft__intro {
    display: flex;
    align-items: flex-end;
    gap: calc(10 * var(--u));
    width: 100%;
    padding: calc(159 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
}

.craft__quote {
    flex: 1 0 0;
    min-width: 0;
    font-weight: 600;
    font-size: calc(60 * var(--u));
    line-height: calc(48 * var(--u));
    letter-spacing: -.08em;

    /* -4.8px @ 60px */
    color: var(--c-sage);
    text-box: trim-both cap alphabetic;
}

.craft__note-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-end;
    align-self: stretch;
}

.craft__note {
    width: calc(498 * var(--u));
    font-weight: 500;
    font-size: max(13px, calc(16 * var(--u)));
    line-height: 1.25;

    /* 20px @ 16px */
    letter-spacing: -.05em;

    /* -0.8px @ 16px */
    color: var(--c-sage);
    text-box: trim-both cap alphabetic;
}

/* ── card grid · 232:174 ───────────────────────────────────── */
.craft__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u));
}

.craft__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

/* ── card · 232:176 / :182 / :189 / :197 ───────────────────── */
.card {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(26 * var(--u));
    height: calc(310 * var(--u));
    padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(40 * var(--u));
    border: 1px solid;
}

/* adjacent cards each draw their own 1px stroke, exactly as the
   Figma frames do - the shared edges read as 2px in the comp too */
.card--01 {
    border-color: #a7aea9;
}

.card--02,
.card--03 {
    border-color: #b2b2b2;
}

.card--04 {
    border-color: #a7aea8;
    background: rgba(167, 174, 168, .5);
}

.card__num {
    width: 100%;
    height: calc(18 * var(--u));
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 500;
    font-size: max(10px, calc(12 * var(--u)));
    line-height: 1.834;

    /* 22px @ 12px */
    letter-spacing: -.05em;
    color: var(--c-card-ink);
    text-box: trim-both cap alphabetic;
}

.card__title {
    width: 100%;
    font-weight: 600;
    font-size: calc(40 * var(--u));
    line-height: calc(52 * var(--u));
    letter-spacing: -.08em;

    /* -3.2px @ 40px */
    color: var(--c-card-ink);
}

.card__copy {
    font-weight: 500;
    font-size: max(13px, calc(16 * var(--u)));
    line-height: 1.25;
    letter-spacing: -.05em;
    color: var(--c-card-ink);
    text-box: trim-both cap alphabetic;
}

/* the copy box width is what sets each card's wrap points */
.card--01 .card__copy-cell {
    width: calc(490 * var(--u));
}

.card--02 .card__copy-cell {
    width: calc(504 * var(--u));
}

.card--03 .card__copy-cell {
    width: calc(506 * var(--u));
}

.card--04 .card__copy-cell {
    width: calc(746 * var(--u));
}

/* ── corner marks ──────────────────────────────────────────── */
.card__mark {
    display: flex;
    width: 100%;
    color: var(--c-card-ink);
}

.card__mark--disc {
    /* 232:193 */
    align-items: center;
    justify-content: flex-end;
}

.card__disc {
    display: block;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
}

.card__disc svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   05  ·  BRANCHEN  ·  232:210
   Frame 1728x622 on a solid coral ground - the first section
   that inverts the palette, so the ink colour is set here and
   inherited rather than repeated on every child.
   ============================================================ */
.branchen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u));
    background: var(--c-coral);
    color: var(--c-ink);
}

/* ── eyebrow · 232:211 ─────────────────────────────────────── */
.branchen__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* the node sets 14px here; held to the shared 11.2px so it matches
   the other section eyebrows. Both resolve to the same 15.12px line
   box, so the section height is unaffected. */
.eyebrow--ink {
    color: #000;
}

/* ── contrast pair · 232:213 ───────────────────────────────── */
.branchen__contrast {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: calc(216 * var(--u));
    padding-top: calc(124 * var(--u));
}

.branchen__contrast-text {
    width: 100%;
    font-weight: 500;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;

    /* 15.12px @ 11.2px */
    letter-spacing: .11em;

    /* 1.232px @ 11.2px */
    text-transform: uppercase;
}

.branchen__contrast-text span {
    display: block;
}

/* ── statement · 232:217 ───────────────────────────────────── */
.branchen__statement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(6 * var(--u));
    width: 100%;
    padding: calc(60 * var(--u)) 0;
    font-size: calc(60 * var(--u));
}

.branchen__line {
    width: calc(551 * var(--u));

    /* sets the wrap after "zum" */
    font-weight: 600;
    line-height: calc(50 * var(--u));
    letter-spacing: -.08em;

    /* -4.8px @ 60px */
}

.branchen__line--serif {
    width: auto;
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
    line-height: calc(46 * var(--u));
    letter-spacing: normal;

    /* the node tracks only the sans line */
    white-space: nowrap;
}

/* ── tags · 232:220 ────────────────────────────────────────── */
.branchen__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    width: calc(796 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    border: 1px solid #000;
    border-radius: calc(4 * var(--u));
    font-weight: 500;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: 1.08;

    /* 15.12px @ 14px */
    letter-spacing: -.05em;

    /* -0.7px @ 14px */
    text-transform: uppercase;
    white-space: nowrap;
}

/* widths come from the node, in source order: two pills fill the
   remainder, three are fixed */
.branchen__tags .tag:nth-child(1) {
    width: calc(145 * var(--u));
}

.branchen__tags .tag:nth-child(3) {
    width: calc(127 * var(--u));
}

.branchen__tags .tag:nth-child(4) {
    width: calc(126 * var(--u));
}

.branchen__tags .tag:nth-child(2),
.branchen__tags .tag:nth-child(5) {
    flex: 1 0 0;
    min-width: 0;
}

/* ============================================================
   06  ·  ÜBER MICH  ·  ABOUT_01 = 2020:2
   Frame 1728x920. The node's content stops around 870, so the
   920 is honoured as a min-height rather than being forced.

   The plate lives on .about, not on the frame, because the
   finished image spans ABOUT_01 + ABOUT_02.
   ============================================================ */
.about {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--c-void);
}

.about__frame {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* spans the whole section, both frames */
.about__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: calc(920 * var(--u));
}

.about__inner--01 {
    padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
}

.about__inner--02 {
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u));
}

.eyebrow--about {
    color: #a7aea8;
}

/* ── claim + note · 2020:4 ─────────────────────────────────── */
.about__lead {
    display: flex;
    align-items: flex-end;
    gap: calc(20 * var(--u));
    width: 100%;
    padding: calc(60 * var(--u)) 0 calc(40 * var(--u));
}

.about__claim {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(4 * var(--u));
    font-weight: 600;
    font-size: calc(80 * var(--u));
    letter-spacing: -.08em;

    /* -6.4px @ 80px */
}

.about__claim-line {
    display: block;
    width: 100%;
    line-height: calc(60 * var(--u));
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

.about__claim-line--coral {
    color: var(--c-coral);
}

.about__note-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-end;
    align-self: stretch;
}

.about__note {
    width: calc(635 * var(--u));
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: 1.182;

    /* 26px @ 22px */
    letter-spacing: -.05em;

    /* -1.1px @ 22px */
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

/* ── preference cards · 2020:10 ────────────────────────────── */
.about__prefs {
    display: flex;

    /* The node bottom-aligns these (items-end), which leaves the coral card
     starting 4px lower than the bordered one - the bordered card carries a
     1px stroke top and bottom, and its rows measure 40/40/41/40/41 against
     the coral card's flat 40x5. Stretching instead gives both cards the
     same height, so the tops line up as well as the bottoms. */
    align-items: stretch;
    gap: calc(20 * var(--u));
    width: 100%;
    padding-top: calc(140 * var(--u));
}

.prefs {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    border-radius: calc(4 * var(--u));
}

.prefs--dislike {
    padding: calc(20 * var(--u)) calc(12 * var(--u));
    border: 1px solid #a7aea8;
    color: #a7aea8;
}

.prefs--like {
    padding: calc(20 * var(--u)) calc(16 * var(--u));
    background: var(--c-coral);
    color: var(--c-ink);
    opacity: .8;

    /* node puts it on the card, text included */
}

.prefs__head {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding-bottom: calc(60 * var(--u));
}

.prefs__label {
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 500;
    font-size: max(10px, calc(11.2 * var(--u)));
    line-height: 1.35;

    /* 15.12px @ 11.2px */
    letter-spacing: .11em;

    /* 1.232px @ 11.2px */
    text-transform: uppercase;
}

.prefs--dislike .prefs__label {
    width: calc(313 * var(--u));
}

.prefs--like    .prefs__label {
    white-space: nowrap;
}

.prefs__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prefs__row {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(40 * var(--u));
    border-top: 1px solid currentColor;
    font-weight: 500;
    font-size: max(13px, calc(15 * var(--u)));
    line-height: 1.334;

    /* 20px @ 15px */
    letter-spacing: -.08em;

    /* -1.2px @ 15px */
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

/* the node measures rows 3 and 5 of the left card a pixel taller */
.prefs--dislike .prefs__row:nth-child(3),
.prefs--dislike .prefs__row:nth-child(5) {
    height: calc(41 * var(--u));
}

/* ============================================================
   ABOUT_02  ·  2020:139
   Frame 1728x920. The lower column block is flex:1, so the frame
   needs a definite height for it to distribute against - hence
   the same 920 min-height as ABOUT_01.
   ============================================================ */
/* ── top band · 2020:174 ───────────────────────────────────── */
.about__band {
    display: flex;
    align-items: flex-start;
    gap: calc(20 * var(--u));
    width: 100%;
    padding-bottom: calc(100 * var(--u));

    /* The node clips here (overflow-clip). Both texts are cap-trimmed, so
     their box top is the cap line and every ascender - h, k, b, and the
     umlaut on "kümmere" - sits above it and gets sheared off; the comp
     shows the same flat-topped letters. Letting the band overflow shows
     the glyphs whole without moving a single box: the few pixels of
     overhang land in the frame's 40px top padding, which is empty. */
    overflow: visible;
}

.about__band-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-start;
    padding: 0 calc(12 * var(--u)) calc(60 * var(--u));
}

.about__band-cell--display {
    flex-direction: column;
    padding: 0;
}

.about__bio {
    flex: 1 0 0;
    min-width: 0;
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: 1.182;

    /* 26px @ 22px */
    letter-spacing: -.05em;

    /* -1.1px @ 22px */
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

.about__headline {
    width: 100%;
    font-weight: 600;
    font-size: calc(80 * var(--u));
    line-height: calc(61 * var(--u));
    letter-spacing: -.08em;

    /* -6.4px @ 80px */
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

/* ── lower columns · 2020:179 ──────────────────────────────── */
.about__cols {
    display: flex;
    flex: 1 0 0;
    align-items: flex-start;
    gap: calc(20 * var(--u));
    width: 100%;
    min-height: 0;
}

.about__col {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    overflow: hidden;
}

.about__col--left {
    padding-top: calc(20 * var(--u));
}

.about__col--right {
    padding-top: calc(100 * var(--u));
}

.about__col-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: calc(60 * var(--u));
}

.eyebrow--bone {
    color: var(--c-sand);
}

.about__subhead {
    width: 100%;
    font-weight: 600;
    font-size: calc(60 * var(--u));
    line-height: calc(61 * var(--u));
    letter-spacing: -.08em;

    /* -4.8px @ 60px */
    color: #a7aea8;
}

/* flex:1 here is what pushes the language pills to the column foot */
.about__col-copy {
    display: flex;
    flex: 1 0 0;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    padding-bottom: calc(40 * var(--u));
}

.about__copy {
    /* Sits on the light end of the MOGRADE plate: 3.83:1, under the 4.5:1
     WCAG AA asks for 22px body text. Accepted as-is by design decision -
     if it ever needs to pass, darken the gradient's lower end in the
     source image rather than recolouring the type. */
    flex: 1 0 0;
    min-width: 0;
    font-weight: 500;
    font-size: max(15px, calc(22 * var(--u)));
    line-height: 1.182;
    letter-spacing: -.05em;
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

.about__copy p {
    margin: 0;
}

/* ── language pills · 2020:187 ─────────────────────────────── */
.about__langs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    width: 100%;
    margin: 0;
    padding: calc(20 * var(--u)) 0 0;
    list-style: none;
}

.lang {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(180 * var(--u));
    height: calc(38 * var(--u));
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    border: 1px solid #a7aea8;
    border-radius: calc(4 * var(--u));
    font-weight: 600;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: 1.08;

    /* 15.12px @ 14px */
    text-transform: uppercase;
    white-space: nowrap;
    color: #a7aea8;
    text-box: trim-both cap alphabetic;
}

/* ── quote + mark · 2020:195 / 2020:197 ────────────────────── */
.about__quote-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: calc(164 * var(--u));
}

.about__quote {
    width: 100%;
    font-weight: 600;
    font-size: calc(28 * var(--u));
    line-height: calc(38 * var(--u));
    letter-spacing: -.08em;

    /* -2.24px @ 28px */
    color: #a7aea8;
}

.about__mark-cell {
    display: flex;
    flex: 1 0 0;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u));
    border-left: 1px solid #a9a9a9;
}

.about__mark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: calc(201 * var(--u));
    height: calc(159 * var(--u));
    font-weight: 700;
    font-size: calc(89 * var(--u));
    line-height: calc(53 * var(--u));
    letter-spacing: -.07em;

    /* -6.23px @ 89px */
    color: #a7aea8;
}

.about__mark-line {
    display: block;
}

.about__mark-line--accent {
    color: var(--c-coral);
}

/* ============================================================
   TICKER  ·  232:203
   Styling from the TICKER frame; names from KUNDEN (2005:12).

   Two identical lists sit side by side and the track slides by
   -50%, which is exactly one list width, so the loop is seamless.
   Every item carries the same right margin - including the last -
   so the seam spacing equals the internal spacing.
   ============================================================ */
.ticker {
    --ticker-duration: 52s;

    /* JS retunes this to a constant px/s */
    width: 100%;
    height: calc(80 * var(--u));
    padding: calc(10 * var(--u)) 0;
    overflow: hidden;
    background: var(--c-ink);
}

.ticker__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: ticker-slide var(--ticker-duration) linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
    animation-play-state: paused;
}

@keyframes ticker-slide{
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.ticker__list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticker__item {
    /* 98px gap, less the phantom trailing tracking the last glyph adds,
     so the measured gap between words is the designed 98 */
    margin-right: calc((98 * var(--u)) - .18em);
    font-weight: 600;
    font-size: max(12px, calc(16 * var(--u)));
    line-height: calc(38 * var(--u));
    letter-spacing: .18em;

    /* 2.88px @ 16px */
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-coral);
    text-box: trim-both cap alphabetic;
}

/* ============================================================
   07  ·  KONTAKT  ·  245:61
   Frame 1728x1169, intrinsic height. Target of the masthead
   "Reden wir" CTA and the IT-Check button.
   ============================================================ */
.kontakt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(120 * var(--u));
    background: var(--c-ink);
    color: #a7aea8;
}

/* ── lead-in · 245:62 ──────────────────────────────────────── */
.kontakt__ask {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kontakt__ask-line {
    font-weight: 600;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: 1.08;

    /* 15.12px @ 14px */
    letter-spacing: .01em;

    /* 0.14px @ 14px - far tighter than the
                                     numbered section eyebrows, per the node */
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── display · 245:67 ──────────────────────────────────────── */
.kontakt__display {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: calc(60 * var(--u)) 0 calc(120 * var(--u));
}

.kontakt__headline {
    width: calc(873 * var(--u));

    /* sets the break after "Sie" */
    font-weight: 600;
    font-size: calc(160 * var(--u));
    line-height: calc(126 * var(--u));
    letter-spacing: -.08em;

    /* -12.8px @ 160px */
}

/* ── contact columns · 2001:9 ──────────────────────────────── */
.kontakt__cols {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    width: 100%;
}

.kontakt__nav {
    /* 2001:3 LEFTO */
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-start;
    height: calc(195 * var(--u));
    padding: calc(30 * var(--u)) calc(10 * var(--u));
    overflow: hidden;
}

.kontakt__nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(28 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

/* shared 16px footer type */
.kontakt__link,
.kontakt__name,
.kontakt__street span,
.kontakt__row-label {
    font-weight: 500;
    font-size: max(14px, calc(16 * var(--u)));
    line-height: 1.25;

    /* 20px @ 16px */
    letter-spacing: -.05em;

    /* -0.8px @ 16px */
    text-box: trim-both cap alphabetic;
}

.kontakt__link {
    /* block, not inline-block: as an inline-block the anchor sits inside a
     line box that keeps its own leading, so the cap-trim never reaches the
     layout box and each item measured 25px instead of 11.2 - which pushed
     the nav's step to 53 against the node's 39. */
    display: block;
    transition: color .3s var(--ease);
}

.kontakt__link:hover,
.kontakt__link:focus-visible {
    color: var(--c-bone);
}

.kontakt__pair {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-start;
    gap: calc(10 * var(--u));
}

/* ── address · 252:2 ───────────────────────────────────────── */
.kontakt__address {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24 * var(--u));
    height: calc(195 * var(--u));
    padding: calc(30 * var(--u)) 0;
    font-style: normal;
}

.kontakt__name {
    width: 100%;
}

.kontakt__street {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(7 * var(--u));
    width: 100%;
}

.kontakt__street span {
    width: calc(355 * var(--u));
}

/* ── mail + phone rows · 252:8 ─────────────────────────────── */
.kontakt__reach {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    height: calc(195 * var(--u));
}

.kontakt__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    width: 100%;
    height: calc(65 * var(--u));
    padding: calc(20 * var(--u)) 0;
    color: inherit;
    transition: color .3s var(--ease);
}

/* only the second row is ruled - the node zeroes the first one's border */
.kontakt__row--ruled {
    border-top: 1px solid var(--c-rule-row);
}

.kontakt__row-label--fill {
    flex: 1 0 0;
    min-width: 0;
}

.kontakt__row:hover,
.kontakt__row:focus-visible {
    color: var(--c-bone);
}

.kontakt__row:hover .ico {
    transform: translate(calc(3 * var(--u)), calc(-3 * var(--u)));
}

/* ── the arrow · ArrowDownRight rotated -90, as in the node ── */
.ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    transition: transform .4s var(--ease);
}

.ico svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.kontakt__gap {
    width: 100%;
    height: calc(80 * var(--u));
}

/* ── call button · 245:89 ──────────────────────────────────── */
.kontakt__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: calc(80 * var(--u)) 0 calc(60 * var(--u));
}

.kontakt__cta {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    width: 100%;
    padding: calc(20 * var(--u)) calc(25 * var(--u));
    border-radius: calc(4 * var(--u));
    background: var(--c-coral);
    color: var(--c-ink);
    transition: background-color .3s var(--ease);
}

.kontakt__cta-label {
    flex: 1 0 0;
    min-width: 0;
    font-weight: 600;
    font-size: max(18px, calc(24 * var(--u)));
    line-height: .834;

    /* 20px @ 24px */
    letter-spacing: -.05em;

    /* -1.2px @ 24px */
    text-box: trim-both cap alphabetic;
}

.kontakt__cta:hover,
.kontakt__cta:focus-visible {
    background: #ffa88f;
}

.kontakt__cta:hover .ico {
    transform: translate(calc(4 * var(--u)), calc(-4 * var(--u)));
}

/* ── foot row · 2027:207 ───────────────────────────────────── */
.kontakt__foot {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    width: 100%;
}

.kontakt__mark-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-start;
    height: calc(66 * var(--u));
    padding: 0 calc(10 * var(--u));
    overflow: hidden;
}

.kontakt__mark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-weight: 700;
    font-size: calc(33 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: -.07em;

    /* -2.31px @ 33px */
    color: #fff;

    /* pure white here, not --c-bone */
    text-box: trim-both cap alphabetic;
}

.kontakt__mark-line {
    display: block;
}

.kontakt__mark-line--accent {
    color: var(--c-coral);
}

.kontakt__legal {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-end;
    gap: calc(10 * var(--u));
    height: calc(66 * var(--u));
}

.kontakt__legal-cell {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

/* ============================================================
   IMPRESSUM PAGE  ·  2087:305  ·  impressum.html
   Frame 1728x1192. Reuses the home page's .masthead wholesale -
   the node's header is that same component.
   ============================================================ */
.impress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    /* no masthead on this page, so nothing to reserve at the top */
    min-height: 100svh;
    padding: calc(20 * var(--u)) calc(30 * var(--u));
    background: var(--c-ink);
}

/* ── title bar · 2087:311 ──────────────────────────────────── */
.impress__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(100 * var(--u));
}

.impress__title {
    font-weight: 700;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: 1.08;

    /* 15.12px @ 14px */
    letter-spacing: .088em;

    /* 1.232px @ 14px */
    text-transform: uppercase;
    white-space: pre;

    /* the node double-spaces around the & */
    color: #a7aea8;
}

/* ── close · no frame, just the glyph lighting up ──────────── */
.impress__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    color: #a7aea8;
    transition: color .3s var(--ease), transform .3s var(--ease);
}

.impress__close svg {
    width: 100%;
    height: 100%;
}

.impress__close:hover,
.impress__close:focus-visible {
    color: var(--c-coral);
    transform: scale(1.08);
}

/* ── legal text · 2087:313 ─────────────────────────────────── */
.impress__body {
    display: flex;
    flex: 1 0 auto;

    /* grows to fill the viewport height */
    align-items: flex-end;
    width: 100%;
    padding: calc(100 * var(--u)) 0 calc(60 * var(--u));
}

.impress__text {
    /* Two columns at the node's own 789 measure: 789 + 90 + 789 = 1668,
     exactly the content width. Halves the block's height so the whole
     text lands inside one viewport with no scrolling. */
    width: 100%;
    columns: 2;
    column-gap: calc(90 * var(--u));
    font-weight: 500;
    font-size: max(12px, calc(14 * var(--u)));
    line-height: 1.286;

    /* 18px @ 14px */
    letter-spacing: -.05em;

    /* -0.7px @ 14px */
    color: #a7aea8;
    white-space: pre-wrap;

    /* source newlines are the line breaks */
    text-box: trim-both cap alphabetic;
}

/* ============================================================
   SCROLL REVEAL  ·  scene 03

   Keyed on [data-reveal] rather than the layout classes: the
   hidden rule and the revealed rule then differ only by .is-in,
   so the reveal always out-ranks the hide no matter how specific
   a component selector elsewhere happens to be. Gated on .js, so
   with scripting off the section renders complete.
   ============================================================ */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-rise, calc(20 * var(--u))));
    transition: opacity   var(--reveal-fade, .8s) var(--ease) var(--delay, 0s),
    transform var(--reveal-move, .9s) var(--ease) var(--delay, 0s);
}

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    height: -1px;
}

/* rows cascade off their own index */
.status__row:nth-child(2),
.questions__row:nth-child(2) {
    --delay: .07s;
}

.status__row:nth-child(3),
.questions__row:nth-child(3) {
    --delay: .14s;
}

.status__row:nth-child(4),
.questions__row:nth-child(4) {
    --delay: .21s;
}

.questions__row:nth-child(5) {
    --delay: .28s;
}

.checkask__copy {
    --delay: .08s;
}

.button {
    --delay: .16s;
}

/* The pills are small and sit low in their section, so the default
   .8s fade reads as lag by the time they scroll in. Short travel,
   quick fade, and a 50ms cascade - the last one is fully in at .5s,
   where it used to be .8s with no stagger at all. */
.tag {
    --reveal-rise: calc(8 * var(--u));
    --reveal-fade: .3s;
    --reveal-move: .34s;
}

.branchen__tags .tag:nth-child(2) {
    --delay: .05s;
}

.branchen__tags .tag:nth-child(3) {
    --delay: .10s;
}

.branchen__tags .tag:nth-child(4) {
    --delay: .15s;
}

.branchen__tags .tag:nth-child(5) {
    --delay: .20s;
}

/* ============================================================
   COMPACT  ·  below the point where the comp stops fitting
   ============================================================ */
@media (max-width:899px){
    :root {
        --u: 1px;
    }

    /* the compact masthead measures 84px - reserve exactly that */
    .scene__inner {
        padding: 84px 20px 20px;
    }

    .masthead {
        align-items: center;
        padding: 20px 20px 16px;
    }

    .masthead::after {
        inset: auto 20px 0;
    }

    .masthead__end {
        align-items: center;
    }

    /* The overlay is a child of the masthead, so the logo and the toggle
     have to out-rank it inside that stacking context — otherwise the
     menu paints over its own close button. */
    .logo,
    .masthead__end {
        position: relative;
        z-index: 60;
    }

    .logo__stack {
        font-size: 26px;
        line-height: 16px;
    }

    .nav-toggle {
        display: grid;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: 50;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 28px;
        padding: 32px;
        background: rgba(9,10,9,.94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s var(--ease), visibility .4s;
    }

    .nav__link {
        font-size: 20px;
        opacity: 1;
        transform: none;
    }

    .langswitch {
        gap: 8px;
        font-size: 20px;
        opacity: 1;
        transform: none;
    }

    .langswitch__link::after {
        bottom: -8px;
    }

    .nav__link::after {
        bottom: -8px;
    }

    .is-nav-open .nav {
        opacity: 1;
        visibility: visible;
    }

    .is-nav-open .cta {
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s var(--ease);
    }

    .is-nav-open .nav-toggle__bar:first-child {
        transform: translateY(3.75px) rotate(45deg);
    }

    .is-nav-open .nav-toggle__bar:last-child {
        transform: translateY(-3.75px) rotate(-45deg);
    }

    .cta__label {
        font-size: 11px;
    }

    .byline {
        padding-top: 16px;
    }

    .byline__text {
        width: auto;
        font-size: 10px;
    }

    .titleframe {
        padding-bottom: 16px;
    }

    .titleframe__spacer {
        min-height: 48px;
    }

    .titlebox {
        width: 100%;
        max-width: none;
        font-size: clamp(44px, 13.2vw, 104px);
        line-height: .775;

        /* 124 / 160 */
        gap: .094em;

        /* 15 / 160 */
    }

    .titlebox__group--muted {
        width: 100%;
    }

    .titlebox__line {
        white-space: normal;
    }

    .baseline {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding: 18px 0 4px;
    }

    .baseline__copy {
        width: 100%;
        font-size: clamp(15px, 4.1vw, 20px);
        line-height: 1.22;
    }

    .br-lg {
        display: none;
    }

    .since {
        align-self: flex-end;
        gap: 8px;
    }

    .since__year {
        font-size: 32px;
    }

    .rail {
        display: none;
    }

    /* ── scene 03 ────────────────────────────────────────────── */
    .probe {
        padding: 60px 10px 10px;
    }

    .display {
        font-size: clamp(30px, 8.4vw, 54px);
        line-height: .79;

        /* 46 / 60 */
    }

    .display--lead,
    .display--narrow {
        width: 100%;
        line-height: .79;
    }

    .probe__split {
        flex-direction: column;
        align-items: stretch;
    }

    .probe__lead-cell {
        height: auto;
        padding: 40px 0 80px;
    }

    /* 2050:47 fixes this cell at 340 with only 189 of rows inside it. That
     leftover ~71px is what opens the air above "Das kann ..." - applying
     the py-40 without the height loses it. */
    /* flex:none, or the base flex:1 0 0 makes flex-basis the main size
     once this column stacks, and the 340 height is ignored */
    .probe__status-cell {
        flex: none;
        height: 340px;
        padding: 40px 0;
    }

    /* 2050:48-54 row heights */
    .status__row {
        height: 46px;
    }

    .status__row:last-child {
        height: 51px;
    }

    .probe__concession {
        padding: 20px 0;
    }

    .probe__turn {
        padding: 20px 0 140px 136px;
    }

    .probe__turn .display {
        width: 100%;
        height: auto;
    }

    .probe__questions {
        flex-direction: column;
        padding-bottom: 100px;
    }

    .probe__questions-gutter {
        display: none;
    }

    /* wrapped question text needs the row to grow */
    .questions {
        white-space: normal;
        width: 100%;
    }

    .questions__row {
        height: auto;
        min-height: 51px;
        padding: 14px 0 12px;
    }

    .questions__text {
        font-size: clamp(16px, 4.6vw, 22px);
        line-height: 1.2;
    }

    .checkask {
        height: auto;
        gap: 300px;
        padding: 20px;
    }

    .checkask__body {
        flex-direction: column;
        height: auto;
        gap: 41px;
    }

    .checkask__aside {
        height: auto;
        gap: 31px;
        padding-bottom: 20px;
    }

    .checkask__copy {
        width: 100%;
        font-size: clamp(15px, 4.1vw, 20px);
        line-height: 1.25;
    }

    .button {
        width: 100%;
        max-width: 260px;
        height: 44px;
    }

    /* ── scene 04 ────────────────────────────────────────────── */
    .craft__inner {
        padding: 32px 20px 20px;
        gap: 0;
    }

    .craft__eyebrow {
        padding: 0;
    }

    .craft__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 66px;

        /* quote -> note */
        padding: 150px 0 62px;

        /* eyebrow -> quote, note -> cards */
    }

    .craft__quote {
        font-size: clamp(28px, 7.8vw, 50px);
        line-height: .8;

        /* 48 / 60 */
    }

    .craft__note-cell {
        align-self: auto;
    }

    .craft__note {
        width: 100%;
    }

    .craft__grid {
        padding: 0 0 36px;
    }

    .craft__row {
        flex-direction: column;
    }

    .card {
        height: auto;
        min-height: 250px;
        gap: 18px;
        padding: 12px 14px 24px;
    }

    .card--02,
    .card--03,
    .card--04 {
        margin-top: -1px;
    }

    /* collapse the doubled stroke when stacked */
    .card__title {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1.06;
    }

    .card__copy-cell,
    .card--01 .card__copy-cell,
    .card--02 .card__copy-cell,
    .card--03 .card__copy-cell,
    .card--04 .card__copy-cell {
        width: 100%;
    }

    .card__mark {
        margin-top: auto;
    }

    .card__disc {
        width: 36px;
        height: 36px;
    }

    /* ── ticker ──────────────────────────────────────────────── */
    .ticker {
        height: 64px;
        padding: 8px 0;
    }

    .ticker__item {
        margin-right: calc(56px - .18em);
        font-size: 13px;
    }

    /* ── branchen ────────────────────────────────────────────── */
    .branchen {
        padding: 20px 20px 60px;
    }

    /* 2050:176 keeps the desktop's h-216 / pt-124 here, and the base rule
     already resolves to exactly that at this breakpoint - so no override */
    .branchen__statement {
        /* h-430 + justify-end is what opens the air above the statement */
        height: 430px;
        justify-content: flex-end;
        gap: 6px;
        padding: 60px 0;
        font-size: clamp(30px, 8.6vw, 52px);
    }

    .branchen__line {
        width: 100%;
        line-height: .834;
    }

    /* 50 / 60 */
    .branchen__line--serif {
        line-height: .767;
        white-space: normal;
    }

    /* 46 / 60 */
    .branchen__tags {
        width: 100%;
        gap: 10px;
    }

    .tag {
        font-size: 12px;
        padding: 9px 13px;
    }

    .branchen__tags .tag:nth-child(1),
    .branchen__tags .tag:nth-child(3),
    .branchen__tags .tag:nth-child(4) {
        width: auto;
    }

    .branchen__tags .tag:nth-child(2),
    .branchen__tags .tag:nth-child(5) {
        flex: 0 0 auto;
    }

    /* ── about ───────────────────────────────────────────────── */
    .about__inner {
        min-height: 0;
    }

    .about__inner--01 {
        padding: 32px 20px 40px;
    }

    .about__inner--02 {
        padding: 80px 20px 48px;
    }

    .about__band {
        flex-direction: column;
        gap: 60px;
        padding-bottom: 120px;
    }

    .about__band-cell {
        padding: 0;
    }

    .about__bio {
        width: 100%;
        font-size: clamp(15px, 4.1vw, 20px);
        line-height: 1.25;
    }

    .about__headline {
        font-size: clamp(32px, 9vw, 60px);
        line-height: .7625;
    }

    /* 61 / 80 */
    /* These carry flex:1 0 0 so they can distribute the frame's fixed 920
     on desktop. Once that min-height goes away there is nothing to
     distribute, and their automatic minimum is defeated too - explicitly
     by min-height:0 on three of them, and by overflow:hidden on
     .about__col - so every one collapses to zero. They size to their
     own content here instead. */
    .about__cols,
    .about__col,
    .about__col-copy,
    .about__mark-cell {
        flex: none;
        min-height: auto;
    }

    .about__cols {
        flex-direction: column;
        gap: 80px;
    }

    .about__col {
        height: auto;
    }

    .about__col--left,
    .about__col--right {
        padding-top: 0;
    }

    .about__col-block {
        padding-bottom: 28px;
    }

    .about__subhead {
        font-size: clamp(28px, 8vw, 48px);
        line-height: 1.02;
    }

    .about__col-copy {
        padding-bottom: 80px;
    }

    .about__copy {
        font-size: clamp(15px, 4.1vw, 20px);
        line-height: 1.25;
    }

    .about__copy p + p {
        margin-top: 1em;
    }

    .about__langs {
        gap: 8px;
        padding-top: 4px;
    }

    .lang {
        width: auto;
        flex: 1 1 auto;
        min-width: 100px;
        font-size: 12px;
    }

    .about__quote-cell {
        height: auto;
        padding-bottom: 32px;
        padding-top: 60px;
    }

    .about__quote {
        font-size: clamp(20px, 5.4vw, 28px);
        line-height: 1.25;
    }

    .about__mark-cell {
        padding-left: 12px;
    }

    .about__mark {
        width: auto;
        height: auto;
        font-size: clamp(56px, 16vw, 89px);
        line-height: .6;
    }

    .about__lead {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 40px 0 32px;
    }

    .about__claim {
        font-size: clamp(34px, 9.6vw, 64px);
        gap: .05em;
    }

    .about__claim-line {
        line-height: .75;
    }

    /* 60 / 80 */
    .about__note-cell {
        align-self: auto;
    }

    .about__note {
        width: 100%;
        font-size: clamp(15px, 4.1vw, 20px);
        line-height: 1.25;
    }

    .about__prefs {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-top: 56px;
    }

    .prefs--dislike,
    .prefs--like {
        padding: 18px 14px;
    }

    .prefs__head {
        padding-bottom: 28px;
    }

    .prefs--dislike .prefs__label {
        width: auto;
    }

    .prefs--like .prefs__label {
        white-space: normal;
    }

    .prefs__row {
        height: auto;
        min-height: 40px;
        padding: 10px 0;
        white-space: normal;
    }

    .prefs--dislike .prefs__row:nth-child(3),
    .prefs--dislike .prefs__row:nth-child(5) {
        height: auto;
    }

    /* ── kontakt ─────────────────────────────────────────────── */
    .kontakt {
        padding: 32px 20px 56px;
    }

    .kontakt__ask-line {
        font-size: 11px;
        white-space: normal;
    }

    .kontakt__display {
        padding: 36px 0 48px;
    }

    .kontakt__headline {
        width: 100%;
        font-size: clamp(40px, 12vw, 96px);
        line-height: .7875;
    }

    /* 126 / 160 */
    .kontakt__cols {
        flex-direction: column;
        align-items: stretch;
        gap: 80px;
    }

    .kontakt__nav,
    .kontakt__address,
    .kontakt__reach {
        flex: none;
        height: auto;
        min-height: auto;
    }

    /* The node clips this cell. On desktop the 195px height leaves room to
     spare, but here the nav hugs its list exactly - and the reveal starts
     each item 20px low, which pushed "Über Mo" outside the clip. The
     observer then saw zero intersection, so it never revealed and never
     un-transformed. Nothing needs clipping at this width. */
    .kontakt__nav {
        padding: 0;
        overflow: visible;
    }

    .kontakt__nav-list {
        gap: 18px;
    }

    /* stretch, or the stacked children shrink to content and the rule
     under the mail row stops short of the column edge */
    .kontakt__pair {
        flex-direction: column;
        align-items: stretch;
        gap: 60px;
    }

    .kontakt__address {
        padding: 0;
        gap: 18px;
    }

    .kontakt__street span {
        width: auto;
    }

    .kontakt__row {
        height: auto;
        min-height: 56px;
        padding: 16px 0;
    }

    .kontakt__gap {
        height: 24px;
    }

    .kontakt__cta-wrap {
        padding: 32px 0 40px;
    }

    .kontakt__cta {
        padding: 18px 20px;
    }

    .kontakt__cta-label {
        font-size: clamp(17px, 5vw, 24px);
        line-height: 1.1;
    }

    .kontakt__foot {
        flex-direction: column;
        gap: 28px;
    }

    .kontakt__mark-cell {
        flex: none;
        height: auto;
        padding: 0;
    }

    .kontakt__legal {
        flex: none;
        height: auto;
        gap: 28px;
        align-items: flex-start;
    }

    /* ── impressum page ──────────────────────────────────────── */
    .impress {
        padding: 20px;
    }

    .impress__bar {
        height: auto;
        padding: 28px 0;
        gap: 16px;
    }

    .impress__title {
        font-size: 11px;
        white-space: normal;
    }

    .impress__close {
        width: 26px;
        height: 26px;
    }

    .impress__body {
        padding: 32px 0 40px;
    }

    .impress__text {
        width: 100%;
        columns: 1;
        font-size: 12px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .scene__bg-img {
        object-position: center;
    }

    /* a near-zero duration would snap the track to -50% and strand it,
     so the ticker stops where it is and becomes scrollable instead */
    .ticker__track {
        animation: none !important;
        transform: none !important;
    }

    .ticker {
        overflow-x: auto;
    }

    .ticker__list[aria-hidden="true"] {
        display: none;
    }

    /* snapping the bar in and out reads worse than simply keeping it */
    .is-nav-hidden .masthead {
        transform: none !important;
    }
}

/* ============================================================
   TRAILING LETTER-SPACING COMPENSATION

   CSS adds letter-spacing after the final glyph of a run; Figma
   does not. Wherever a letter-spaced run feeds a flex gap or is
   pinned to a right edge, that phantom space shows up as a 1-2px
   drift against the comp. An equal and opposite margin cancels it.
   (Left-aligned runs are unaffected, so they are left alone.)
   ============================================================ */
.nav__link {
    margin-right: -.088em;
}

/* ls +1.232px @ 14px */
.langswitch__link {
    margin-right: -.088em;
}

/* ls +1.232px @ 14px */
.cta__label {
    margin-right: -.088em;
}

/* ls +1.232px @ 14px */
.since__year {
    margin-right: .05em;
}

/* ls -2px     @ 40px */
/* ============================================================
   STAGGER TABLE
   ============================================================ */
.logo {
    --delay: .05s;
}

.nav__link:nth-child(1) {
    --delay: .12s;
}

.nav__link:nth-child(2) {
    --delay: .17s;
}

.nav__link:nth-child(3) {
    --delay: .22s;
}

.langswitch {
    --delay: .27s;
}

.masthead__end {
    --delay: .32s;
}

.byline__text {
    --delay: .38s;
}

.titlebox__group--accent .titlebox__line:nth-child(1) {
    --delay: .46s;
}

.titlebox__group--accent .titlebox__line:nth-child(2) {
    --delay: .54s;
}

.titlebox__group--muted  .titlebox__line:nth-child(1) {
    --delay: .62s;
}

.titlebox__group--muted  .titlebox__line:nth-child(2) {
    --delay: .70s;
}

.baseline__copy {
    --delay: .80s;
}

.since {
    --delay: .86s;
}

.rail {
    --delay: .95s;
}