/* ==========================================================================
   Coaching Davos · site.css · Design system "Nachtaufstieg"
   An ascent from night (hero photo) through blue hour into daylight paper,
   and back into the night at the close. Gold is used like light: sparingly.

   FILE MAP
     1  Tokens (colour, type, space, radii, motion, layers)      [critical]
     2  Fonts (self-hosted, metric-matched fallbacks)             [critical]
     3  Base / reset / browser surfaces                           [critical]
     4  Surfaces (night, dusk, paper, paper-2)                     [critical]
     5  Layout primitives                                          [critical]
     6  Type roles                                                 [critical]
     7  Header, nav, language switch, menu toggle, skip link       [critical]
     8  Home hero                                                  [critical]
     9  Buttons and links                                      [critical]
    10  Mobile menu                                            [critical]
    11  Sections and content components
    12  Inner-page components (page hero, breadcrumb, accordion, prose)
    13  Forms
    14  Motion utilities (reveals)
    15  Reduced motion, forced colours, print
   Blocks marked [critical] sit between the CRITICAL:START / CRITICAL:END
   markers. tools/inline-critical.py (scratchpad) copies them into <head>.
   Every page also loads this whole file, so duplicates are harmless.

   COMPONENT INDEX  (component → classes → usage)
   --------------------------------------------------------------------------
   Surface          .surface-night | .surface-dusk | .surface-paper | .surface-paper-2
                    Put on a <section>. Sets --bg --fg --fg-2 --fg-3 --line
                    --accent --accent-ink. Components read only these tokens,
                    so every component works on every surface.
                    data-header="night|paper" on a section tells the fixed
                    header which skin to use while it sits under it.
   Container        .container (max 80rem) · .container--narrow (48rem) · .container--wide
   Section          .section (fluid vertical padding) · .section--tight · .section--continues
   Stack            .stack  (vertical gap, set --stack: var(--sp-6))
   Cluster          .cluster (wrapping row of items, set --cluster)
   Split            .split  (1 col → 2 cols at 56em, .split--7-5, .split--5-7)
   Flow (prose)     .flow   (adds rhythm between children of running text)
   Type roles       .t-display .t-h1 .t-h2 .t-h3 .t-lead .t-body .t-small .t-meta
                    <em> inside a serif heading = the one italic emphasis.
   Skip link        <a class="skip-link" href="#main">Zum Inhalt springen</a>
   Header           <header class="site-header" data-skin="hero|night|paper">
                      .site-header__inner > .brand (+ .brand__name, .brand__sub)
                      nav.nav > ul.nav__list > li > a.nav__link[aria-current=page]
                      .site-header__actions > .lang + a.btn.btn--sm.nav__cta + button.menu-toggle
   Language switch  <p class="lang"><span class="lang__current" aria-current="true">DE</span>
                    <a class="lang__link" href="en/…" hreflang="en" lang="en">EN</a></p>
   Menu toggle      button.menu-toggle[aria-controls=menu][aria-expanded] > .menu-toggle__bars
   Mobile menu      <div class="menu surface-night" id="menu" data-menu> … .menu__list,
                    .menu__link, .menu__foot ; optional <canvas data-stars> inside.
   Buttons          .btn + .btn--primary (gold light) | .btn--solid (ink on paper,
                    snow on night) | .btn--ghost (hairline) ; .btn--sm ; .btn--block
                    .btn__note = quiet second part ("kostenlos"); .btn__icon = arrow
   Text link        .link (underlined, offset) · .link--arrow (with trailing arrow)
   Price index      ol.index > li.index__item > article.index__row
                      h3.index__name > a.index__link (stretched link)
                      p.index__desc · p.index__price > .price (.price__cur .price__num .price__unit)
                      span.index__more (visible link label, aria-hidden duplicate)
                    p.index__note under the list.
   Plain list       ul.features > li (small accent dot, no rules)
   Items            ul.items > li > h3.items__title + p.items__text
   Duo              .duo > .duo__head + .duo__body (the repeating section layout)
   Section rule     .section--next: hairline + one --section gap above the content
   Quote            figure.quote > blockquote.quote__text + figcaption.quote__cite
   Media frame      figure.frame (aspect-ratio box, --ratio: 4/5 | 3/2) > img.frame__img
   Credentials      ul.credentials > li > .credentials__name + .credentials__by
   CTA band         section.cta-band.surface-night > canvas[data-stars] + .cta-band__inner
   Footer           footer.site-footer.surface-night … .footer__grid (brand, contact, nav),
                    .footer__bottom, a.luxid-credit (Made by Luxid badge)
   Page hero        header.page-hero.surface-night > .container > nav.breadcrumb + h1 + p.t-lead
                    Optional canvas[data-stars] inside.
   Breadcrumb       nav.breadcrumb[aria-label] > ol > li > a | span[aria-current=page]
   Accordion        div.accordion > details.accordion__item > summary.accordion__summary
                      (+ span.accordion__icon) + div.accordion__body
   Form             form.form[data-form] (data-msg-* attributes carry the copy)
                      .form__summary[role=alert] · .field > label.field__label + .input|.select|.textarea
                      + p.field__help + p.field__error · .form__privacy · button.btn[type=submit]
                      .form__status[aria-live] · .form__success[hidden]
   Reveal           [data-reveal] (opt-in, visible by default; JS hides only what is
                    below the fold, then reveals). data-reveal="list" staggers children.
   Utilities        .visually-hidden .no-js-only .tnum .gold .measure
   ========================================================================== */

/* CRITICAL:START */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Night: the hero sky and everything that stays dark */
  --night-950: #060c18;
  --night-900: #0b1426;   /* brand night */
  --night-850: #0e1a31;
  --night-800: #13213d;
  --night-700: #1b2d52;   /* blue hour, deep */
  --dusk-600: #2b4370;
  --dusk-500: #4a6494;
  --dusk-300: #a7b3cb;
  --snow: #f3f5f9;        /* text on night */
  --snow-2: #c3cbda;      /* secondary on night (11:1) */
  --snow-3: #97a2b8;      /* tertiary on night (6:1) */

  /* Day: paper sections (light mode values; dark mode below) */
  --paper: #f7f5f1;
  --paper-2: #efebe3;
  --paper-line: #dcd5c8;
  --ink: #0b1426;
  --ink-2: #3d4757;       /* 8.6:1 on paper */
  --ink-3: #596172;       /* 5.2:1 on paper-2 */

  /* Gold, used like light */
  --gold: #c9a84c;        /* decorative only on paper (2.1:1, never for text) */
  --gold-light: #e8c97e;  /* text-safe on night (11:1) */
  --gold-ink: #76591a;    /* text-safe gold on paper and paper-2 (5.5:1) */

  /* Dawn / dusk stops (redefined for dark mode) */
  --dawn-1: #13254a;
  --dawn-2: #2b4370;
  --dawn-3: #8d8fa8;
  --dawn-4: #e3d6bf;

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Times", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid scale: 390px → 1440px */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);   /* 12–13 meta */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14 small */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);         /* 16–18 body */
  --step-1: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);   /* 18–21 lead */
  --step-2: clamp(1.5rem, 1.33rem + 0.7vw, 1.875rem);       /* 24–30 h3 serif */
  --step-3: clamp(1.875rem, 1.6rem + 1.15vw, 2.625rem);     /* 30–42 */
  --step-4: clamp(2.375rem, 1.9rem + 1.95vw, 3.75rem);      /* 38–60 h2 */
  --step-5: clamp(2.75rem, 2.05rem + 2.9vw, 4.75rem);       /* 44–76 h1 inner */
  --step-6: clamp(3rem, 1.95rem + 4.3vw, 6rem);             /* 48–96 home h1 */

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-body: 1.62;
  --measure: 66ch;

  /* Space (4px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --section: clamp(4.5rem, 2.6rem + 7.8vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
  --header-h: 4rem;

  /* Shape rule: controls are pills, inputs 0.75rem, media and sections square */
  --radius-pill: 999px;
  --radius-input: 0.75rem;
  --radius-media: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* authored entrances */
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);       /* UI feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* menu, sticky bars */
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-hero: 1000ms;

  /* Layers */
  --z-menu: 40;
  --z-header: 50;
  --z-skip: 100;

  color-scheme: light dark;
}

@media (min-width: 64em) {
  :root { --header-h: 4.5rem; }
}

/* Dark mode: the paper sections become moonlit slate; night stays night. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1829;
    --paper-2: #131e33;
    --paper-line: #26324a;
    --ink: #eceff5;
    --ink-2: #b5bdcc;
    --ink-3: #8e98aa;
    --gold-ink: #e8c97e;
    --gold: #b89a48;
    --dawn-1: #11203f;
    --dawn-2: #172846;
    --dawn-3: #131f38;
    --dawn-4: #10192b;
  }
}

/* ---------- 2. Fonts ----------------------------------------------------- */
/* Two variable files cover the whole site (latin). latin-ext loads only when
   a glyph outside latin appears. Preload the two upright latin files. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-var-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-var-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks: no layout shift when the real face swaps in. */
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); ascent-override: 104.5482%; descent-override: 32.4733%; line-gap-override: 0%; size-adjust: 88.3803%; }
@font-face { font-family: "Cormorant Fallback Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); ascent-override: 95.2728%; descent-override: 29.5923%; line-gap-override: 0%; size-adjust: 96.9846%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 90.4365%; descent-override: 22.518%; line-gap-override: 0%; size-adjust: 107.1194%; }

/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  background: var(--night-900);
  scrollbar-color: var(--dusk-500) var(--night-900);
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--gold);
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a, button, [role="button"], summary, label { touch-action: manipulation; }
p, li, h1, h2, h3, h4, blockquote, figcaption { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-weight: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

::selection { background: var(--gold-light); color: var(--night-900); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus, var(--gold));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar (WebKit/Blink; Firefox uses scrollbar-color above) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--night-900); }
::-webkit-scrollbar-thumb { background: var(--dusk-600); border: 3px solid var(--night-900); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--dusk-500); }

/* ---------- 4. Surfaces -------------------------------------------------- */
.surface-night, .surface-dusk, .surface-paper, .surface-paper-2 {
  background-color: var(--bg);
  color: var(--fg);
}
.surface-night {
  --bg: var(--night-900);
  --fg: var(--snow);
  --fg-2: var(--snow-2);
  --fg-3: var(--snow-3);
  --line: rgb(243 245 249 / 0.14);
  --accent: var(--gold-light);
  --accent-ink: var(--gold-light);
  --focus: var(--gold-light);
  --field-bg: rgb(243 245 249 / 0.06);
  --field-border: rgb(243 245 249 / 0.28);
}
.surface-dusk {
  --bg: var(--night-700);
  --fg: var(--snow);
  --fg-2: var(--snow-2);
  --fg-3: #a8b2c7;
  --line: rgb(243 245 249 / 0.16);
  --accent: var(--gold-light);
  --accent-ink: var(--gold-light);
  --focus: var(--gold-light);
  --field-bg: rgb(243 245 249 / 0.07);
  --field-border: rgb(243 245 249 / 0.3);
}
.surface-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--paper-line);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --focus: var(--gold-ink);
  --field-bg: color-mix(in srgb, var(--paper) 70%, #fff 30%);
  --field-border: color-mix(in srgb, var(--ink) 28%, transparent);
}
.surface-paper-2 {
  --bg: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--paper-line);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --focus: var(--gold-ink);
  --field-bg: var(--paper);
  --field-border: color-mix(in srgb, var(--ink) 28%, transparent);
}
@media (prefers-color-scheme: dark) {
  .surface-paper, .surface-paper-2 {
    --field-bg: rgb(243 245 249 / 0.05);
    --field-border: rgb(243 245 249 / 0.26);
  }
}
/* .is-clear keeps a surface's tokens but lets the parent's background show */
.surface-night.is-clear, .surface-dusk.is-clear, .surface-paper.is-clear, .surface-paper-2.is-clear { background-color: transparent; }
.surface-night ::selection, .surface-dusk ::selection { background: var(--gold-light); color: var(--night-900); }

/* ---------- 5. Layout primitives ---------------------------------------- */
.container {
  width: 100%;
  max-width: calc(80rem + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.container--narrow { max-width: calc(48rem + var(--gutter) * 2); }
.container--wide { max-width: calc(90rem + var(--gutter) * 2); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
/* follows a section on the same surface: halves the top so the gap stays one --section */
.section--continues { padding-top: calc(var(--section) * 0.5); }

.stack { display: flex; flex-direction: column; gap: var(--stack, var(--sp-6)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); }

.split { display: grid; gap: var(--split-gap, var(--sp-12)); }
@media (min-width: 56em) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); --split-gap: clamp(3rem, 6vw, 7rem); }
  .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.flow > * + * { margin-top: var(--flow, 1em); }
.measure { max-width: var(--measure); }

/* ---------- 6. Type roles ------------------------------------------------ */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.t-display { font-size: var(--step-6); line-height: var(--leading-tight); letter-spacing: -0.022em; }
.t-h1 { font-size: var(--step-5); line-height: 1.06; letter-spacing: -0.02em; }
.t-h2 { font-size: var(--step-4); line-height: 1.08; }
.t-h3 { font-size: var(--step-2); line-height: var(--leading-snug); font-weight: 400; letter-spacing: -0.005em; }
.t-display em, .t-h1 em, .t-h2 em, .t-h3 em { font-style: italic; font-weight: 300; }
.t-lead { font-size: var(--step-1); line-height: 1.55; color: var(--fg-2, var(--ink-2)); text-wrap: pretty; max-width: 40em; }
.t-body { font-size: var(--step-0); line-height: var(--leading-body); text-wrap: pretty; }
.t-small { font-size: var(--step--1); line-height: 1.55; }
.t-meta {
  font-size: var(--step--2);
  line-height: 1.4;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg-3, var(--ink-3));
}
.gold { color: var(--accent-ink); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.js .no-js-only { display: none !important; }

/* ---------- 7. Header ---------------------------------------------------- */
.skip-link {
  position: fixed; left: var(--sp-4); top: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--gold-light); color: var(--night-900);
  font-weight: 500; text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-ui);
}
.skip-link:focus-visible { transform: none; outline-color: var(--snow); }

.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
  color: var(--snow);
  --focus: var(--gold-light);
  transition: transform var(--dur-base) var(--ease-drawer), color var(--dur-fast) ease;
}
.site-header::before {
  /* Material layer: fades in once the header leaves the hero */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(11 20 38 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgb(243 245 249 / 0.08);
  opacity: 0;
  transition: opacity var(--dur-base) ease, background-color var(--dur-fast) ease;
}
.site-header[data-skin="night"]::before { opacity: 1; }
.site-header[data-skin="paper"] { color: var(--ink); --focus: var(--gold-ink); }
.site-header[data-skin="paper"]::before {
  opacity: 1;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  box-shadow: 0 1px 0 var(--paper-line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-menu-open { transform: none; color: var(--snow); }
.site-header.is-menu-open::before { opacity: 0; }

.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: var(--header-h);
}
.brand {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; margin-right: auto;
  text-decoration: none; line-height: 1;
}
.brand__name { white-space: nowrap; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: 0; }
.brand__sub {
  margin-top: 0.3rem; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.72;
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); list-style: none; padding: 0; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 450; letter-spacing: 0.005em;
  text-decoration: none; opacity: 0.86;
  transition: opacity var(--dur-fast) ease;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-ui);
}
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { opacity: 1; }
  .nav__link:hover::after { transform: scaleX(1); }
}

.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.site-header .nav__cta { display: none; }

.lang {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em;
}
.lang__current, .lang__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none;
}
.lang__current { opacity: 1; }
.lang__link { opacity: 0.6; transition: opacity var(--dur-fast) ease; }
.lang__sep { width: 1px; height: 0.875rem; background: currentColor; opacity: 0.35; }
@media (hover: hover) and (pointer: fine) { .lang__link:hover { opacity: 1; } }

.menu-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border-radius: 50%;
  user-select: none; -webkit-user-select: none;
}
.menu-toggle__bars { position: relative; width: 22px; height: 10px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-drawer), top var(--dur-base) var(--ease-drawer);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 8.5px; transform-origin: center; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-4.25px) rotate(-45deg); }
.menu-toggle:active { transform: scale(0.94); }
.no-js .menu-toggle { display: none; }
.menu-fallback { display: inline-grid; place-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 500; text-decoration: none; }

@media (max-width: 22.4em) {
  .site-header .lang { display: none; }   /* stays reachable inside the menu */
}
@media (min-width: 64em) {
  .nav { display: block; margin-right: var(--sp-4); }
  .brand { margin-right: auto; }
  .site-header .nav__cta { display: inline-flex; }
  .menu-toggle, .menu-fallback { display: none; }
}

/* ---------- 8. Home hero (static layer) ------------------------------- */
/* Static, JS-free hero and the LCP. The photo is shown untouched: no tint,
   no filter. A soft edge gradient sits only at the bottom, where the hero
   meets the next night section.
   Structure (contract with assets/js/hero.js + assets/css/hero.css):
     section.hero#hero[data-hero].is-static-anim
       .hero__stage
         picture.hero__night > img.hero__img      untouched night photo (LCP)
         div.hero__fx[aria-hidden]                empty slot for the WebGL canvas
         div.hero__copy
           h1.hero__title > span.hero__line--a / --b > .w (words, --i = order)
           p.hero__lead · .hero__actions · p.hero__place
   .is-static-anim enables the CSS headline entrance (the no-WebGL fallback);
   the hero engine removes the class when it takes over. */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--snow);
  background-color: #13315d;  /* paint-before-image, sampled from the photo top */
}
.hero__stage {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  background-color: #28497f;
  background-image: linear-gradient(180deg, #13315d 0%, #203e73 30%, #264982 50%, #8e9ab0 62%, #7a878f 100%);
}
.hero__night, .hero__fx { position: absolute; inset: 0; }
.hero__night { z-index: 0; }
.hero__fx { z-index: 1; pointer-events: none; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-x, 42%) var(--hero-y, 100%);
}
.hero__stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 2;
  height: clamp(8rem, 20svh, 14rem);
  background: linear-gradient(to bottom, rgb(11 20 38 / 0) 0%, rgb(11 20 38 / 0.5) 55%, var(--night-900) 100%);
  pointer-events: none;
}
.hero__copy {
  position: relative; z-index: 3;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.5rem, 5svh, 3.5rem));
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}
.hero__title {
  max-width: 13.5em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-6);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  padding-bottom: 0.08em;     /* italic descender clearance (g) */
  text-shadow: 0 1px 28px rgb(4 12 32 / 0.35);
  font-kerning: normal;
}
.hero__line { display: block; }
.hero__title em { font-style: italic; }
.hero__title .w { display: inline-block; }
.hero__lead {
  margin-top: clamp(1rem, 2.4svh, 1.75rem);
  max-width: 31em;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgb(243 245 249 / 0.92);
  text-wrap: pretty;
  text-shadow: 0 1px 18px rgb(4 12 32 / 0.5);
}
.hero__actions {
  grid-row: 4;
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.hero__place {
  grid-row: 5;
  margin-top: var(--sp-5);
  font-size: var(--step--2); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgb(243 245 249 / 0.78);
}

/* Fallback entrance: words resolve from blur, staggered, once. Pure CSS,
   so it plays without JS; the image (LCP) is never hidden. */
@media (prefers-reduced-motion: no-preference) {
  .hero.is-static-anim .hero__title .w {
    animation: hero-word var(--dur-hero) var(--ease-out) both;
    animation-delay: calc(140ms + var(--i, 0) * 75ms);
  }
  .hero.is-static-anim .hero__lead,
  .hero.is-static-anim .hero__actions,
  .hero.is-static-anim .hero__place {
    animation: hero-rise 900ms var(--ease-out) both;
    animation-delay: 700ms;
  }
  .hero.is-static-anim .hero__actions { animation-delay: 820ms; }
  .hero.is-static-anim .hero__place { animation-delay: 960ms; }
}
@keyframes hero-word {
  from { opacity: 0; filter: blur(14px); transform: translate3d(0, 0.32em, 0); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 30em) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 48em) {
  .hero { --hero-x: 50%; --hero-y: 78%; }
  .hero__copy {
    grid-template-rows: auto auto auto 1fr auto;
    padding-top: calc(var(--header-h) + clamp(3rem, 12svh, 8rem));
  }
  .hero__actions { grid-row: 3; align-self: start; margin-top: clamp(1.75rem, 4svh, 2.5rem); }
  .hero__place { grid-row: 5; }
}
@media (min-width: 64em) {
  .hero { --hero-y: 64%; }
  .hero__copy { padding-top: calc(var(--header-h) + clamp(3.5rem, 13svh, 9rem)); }
}
/* Landscape desktop: big sky, the satellite streak and the high western peak
   keep the left half; the words sit in the clean eastern sky. */
@media (min-width: 64em) and (min-aspect-ratio: 1/1) {
  .hero { --hero-y: 34%; }
  .hero__copy { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); column-gap: var(--sp-8); }
  .hero__copy > * { grid-column: 2; }
  .hero__copy > .hero__place { grid-column: 1 / -1; }
  .hero__title { font-size: min(var(--step-6), 5.5rem); }
}
@media (min-width: 48em) and (max-aspect-ratio: 4/5) {
  .hero { --hero-y: 100%; }
}

/* ---------- 9. Buttons and links ---------------------------------------- */
.btn {
  --btn-h: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: var(--btn-h);
  padding: 0 1.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9688rem; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  transition:
    transform var(--dur-press) var(--ease-ui),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-base) ease;
}
.btn:active { transform: scale(0.97); }
.btn--sm { --btn-h: 2.75rem; padding: 0 1.25rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn__note {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-weight: 400; opacity: 0.72;
}
.btn__note::before { content: ""; width: 1px; height: 1em; background: currentColor; opacity: 0.45; }
.btn__icon {
  width: 1rem; height: 1rem; flex: none;
  transition: transform var(--dur-base) var(--ease-ui);
}

/* Primary: gold light. On night it reads like a lit window. */
.btn--primary {
  background: var(--gold-light);
  color: var(--night-900);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 10px 30px -12px rgb(232 201 126 / 0.55);
}
/* Solid: ink on paper, snow on night */
.btn--solid { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
/* Ghost: hairline. Over the photo it gets a dark material so it stays legible. */
.btn--ghost {
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  color: inherit;
  background: transparent;
}
.hero .btn--ghost, .on-photo .btn--ghost {
  background: rgb(6 14 32 / 0.34);
  border-color: rgb(243 245 249 / 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #f0d692; box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 14px 34px -12px rgb(232 201 126 / 0.7); }
  .btn--solid:hover { background: color-mix(in srgb, var(--fg, var(--ink)) 88%, var(--accent, var(--gold))); }
  .btn--ghost:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 7%, transparent); }
  .btn:hover .btn__icon { transform: translateX(3px); }
}

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent, var(--gold)) 80%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.link--arrow {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-weight: 500; text-decoration: none;
}
.link--arrow .link__label { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent, var(--gold)) 70%, transparent); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.link--arrow svg { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-ui); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .link--arrow:hover svg { transform: translateX(3px); }
  .link--arrow:hover .link__label { text-decoration-color: currentColor; }
}

/* ---------- 10. Mobile menu ---------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + var(--sp-8)) 0 max(var(--sp-6), env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--ease-drawer), visibility 0s linear 520ms;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 560ms var(--ease-drawer), visibility 0s;
}
.menu__stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.menu__inner { position: relative; display: flex; flex-direction: column; flex: 1; gap: var(--sp-10); }
.menu__list { list-style: none; padding: 0; display: grid; gap: var(--sp-1); }
.menu__link {
  display: flex; align-items: baseline; min-height: 3.5rem;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3rem); line-height: 1.1; letter-spacing: -0.015em;
  text-decoration: none;
}
.menu__link[aria-current="page"] { font-style: italic; color: var(--gold-light); }
.menu__foot { margin-top: auto; display: grid; gap: var(--sp-5); }
.menu__foot .lang { margin-left: -12px; }
.menu__mail { color: var(--fg-2); text-decoration: none; font-size: var(--step--1); }
.menu .menu__list > li, .menu .menu__foot {
  opacity: 0; transform: translate3d(0, 0.75rem, 0);
  transition: opacity var(--dur-base) ease, transform var(--dur-slow) var(--ease-out);
}
.menu.is-open .menu__list > li, .menu.is-open .menu__foot {
  opacity: 1; transform: none;
  transition-delay: calc(140ms + var(--i, 0) * 45ms);
}
@media (min-width: 64em) { .menu { display: none; } }

/* ---------- Inner page hero (critical, builder A) ----------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(3rem, 10vw, 7rem));
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.page-hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.page-hero .t-h1 { max-width: 16em; }
.page-hero .t-lead { margin-top: var(--sp-6); }
.breadcrumb { margin-bottom: var(--sp-8); font-size: var(--step--1); color: var(--fg-3); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "\203A"; color: var(--fg-3); }
.breadcrumb a { color: var(--fg-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--fg); }

/* Image variant: the picture sits under the words and fades up into the night.
   The text stays in the sky; only the lower part of the band carries the peaks. */
.page-hero--image {
  --media-h: clamp(17rem, 96vw, 32rem);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.25rem, 6vw, 4rem));
  padding-bottom: calc(var(--media-h) * 0.4 + var(--sp-6));
}
.page-hero__media {
  position: absolute; inset: auto 0 0 0; z-index: -2;
  height: var(--media-h);
  background-color: var(--lqip-color, var(--night-800));
}
.page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 60%); }
.page-hero__media picture { display: contents; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(11 20 38 / 0.7) 0%, rgb(11 20 38 / 0) 22%),
    linear-gradient(to bottom, #0b1426 0%, rgb(11 20 38 / 0.82) 12%, rgb(11 20 38 / 0.5) 24%, rgb(11 20 38 / 0.16) 34%, rgb(11 20 38 / 0) 44%);
}
.page-hero--image .page-hero__stars { height: calc(100% - var(--media-h) * 0.5); }
.page-hero--image .t-h1 { text-shadow: 0 1px 28px rgb(4 12 32 / 0.4); }
.page-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (min-width: 30em) { .page-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); } }
@media (min-width: 56em) {
  .page-hero--image { --media-h: min(44vw, 36rem); }
  .page-hero__media::after {
    background:
      linear-gradient(to top, rgb(11 20 38 / 0.7) 0%, rgb(11 20 38 / 0) 20%),
      linear-gradient(to right, rgb(11 20 38 / 0.82) 0%, rgb(11 20 38 / 0.5) 30%, rgb(11 20 38 / 0) 62%),
      linear-gradient(to bottom, #0b1426 0%, rgb(11 20 38 / 0.8) 14%, rgb(11 20 38 / 0.4) 32%, rgb(11 20 38 / 0) 62%);
  }
}

/* In-page section nav: chips, sticky under the header, current one filled.
   When the header slides away the bar moves up to the top edge. */
.subnav {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--paper-line);
  transition: top var(--dur-base) var(--ease-drawer);
}
body:has(.site-header.is-hidden) .subnav { top: 0; }
.subnav__list {
  display: flex; gap: var(--sp-2); list-style: none; margin: 0;
  padding: var(--sp-2) var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent 100%);
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list > li { flex: none; }
.subnav__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  border: 1px solid var(--paper-line); border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-ui);
}
.subnav__link:active { transform: scale(0.97); }
.subnav__link[aria-current="location"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .subnav__link:hover { border-color: var(--ink); color: var(--ink); }
  .subnav__link[aria-current="location"]:hover { color: var(--paper); }
}
.subnav .container { padding-inline: 0; max-width: none; }
@media (min-width: 64em) {
  .subnav .container { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); max-width: calc(80rem + var(--gutter) * 2); }
  .subnav__list { padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
}
/* ===== EN home (builder C) ===== */
.hero__note { display: block; margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.55; color: rgb(243 245 249 / 0.78); }

/* CRITICAL:END */

/* ---------- 11. Sections and components --------------------------------- */

/* Dawn: night → blue hour → first light → paper. Used once, below the hero. */
.dawn {
  background:
    linear-gradient(180deg,
      var(--night-900) 0%,
      var(--dawn-1) 32%,
      var(--dawn-2) 60%,
      var(--dawn-3) 80%,
      var(--dawn-4) 93%,
      var(--paper) 100%);
}

/* Leistungen intro sits in the blue hour */
.services__dawn { position: relative; z-index: 1; }
.services__head { display: grid; gap: var(--sp-6); align-content: start; }
.services__intro {
  display: grid; gap: var(--sp-10);
  padding-top: clamp(3.5rem, 2rem + 6vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.services__intro .t-lead { color: var(--snow-2); }
@media (min-width: 56em) {
  /* the image straddles the first light: it hangs --overlap into the paper */
  .services { --overlap: clamp(3.5rem, 6vw, 6.5rem); }
  .services__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: clamp(3rem, 6vw, 6rem); padding-bottom: 0; }
  .services__head { padding-top: clamp(0.5rem, 2vw, 2rem); }
  .services__intro .frame { margin-bottom: calc(var(--overlap) * -1); }
  .services__list { padding-top: calc(var(--overlap) + clamp(2.5rem, 4vw, 4rem)); }
}
/* same paper continues into #ansatz: together they make one section gap */
.services__list { padding-bottom: calc(var(--section) * 0.5); }

/* Section rhythm on one surface: a hairline inside the container separates
   consecutive sections instead of a change of background. */
.section--next { padding-top: 0; }
.section--next > .container::before {
  content: ""; display: block; height: 1px;
  margin-bottom: var(--section);
  background: var(--line);
}

/* Duo: the one repeating layout. Heading on the left, content on the right
   (stacked on phones). Used for every content section on every page. */
.duo { display: grid; gap: var(--sp-8); }
.duo__head { display: grid; gap: var(--sp-5); align-content: start; }
.duo__head .t-lead { max-width: 30em; }
.duo__body { display: grid; gap: var(--sp-6); align-content: start; max-width: var(--measure); }
.duo__body > p { text-wrap: pretty; }
@media (min-width: 56em) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 8rem); }
  .duo__head { position: sticky; top: calc(var(--header-h) + var(--sp-10)); }
}

/* Media frame: a fixed-ratio box so nothing shifts while the image loads */
.frame {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--dawn-2) var(--lqip, none) center / cover no-repeat;
  box-shadow: 0 30px 60px -36px rgb(6 12 24 / 0.55);
}
.frame__img { width: 100%; height: 100%; object-fit: cover; }
.frame--3x2 { --ratio: 3 / 2; }

/* Price index: an editorial menu card, one full-width row per package */
.index { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.index__item { position: relative; }
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "price" "desc" "more";
  column-gap: var(--sp-6);
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.index__row::before {
  /* the hover wash, revealed left to right */
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.5); z-index: -1;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--ease-out);
}
.index__name {
  grid-area: name;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.012em;
  transition: transform var(--dur-slow) var(--ease-out);
}
.index__link { text-decoration: none; color: inherit; }
.index__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.index__link:focus-visible { outline: none; }
.index__row:has(.index__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.index__desc { grid-area: desc; margin-top: var(--sp-3); color: var(--fg-2); max-width: 34em; text-wrap: pretty; }
.index__price {
  grid-area: price; justify-self: start; align-self: start;
  margin-top: var(--sp-2);
  white-space: nowrap;
}
@media (min-width: 34em) {
  .index__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc" "more more"; }
  .index__price { justify-self: end; margin-top: 0; padding-top: 0.45em; text-align: right; }
}
.price { display: inline-flex; align-items: baseline; gap: 0.35em; font-variant-numeric: tabular-nums lining-nums; }
.price__cur { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--fg-3); }
.price__num { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); font-weight: 300; letter-spacing: -0.02em; }
.price__unit { font-size: var(--step--1); color: var(--fg-3); }
.price--ask .price__num { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.index__more {
  grid-area: more;
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--sp-4);
  font-size: var(--step--1); font-weight: 500; color: var(--accent-ink);
}
.index__more svg { width: 0.9rem; height: 0.9rem; transition: transform var(--dur-base) var(--ease-ui); }
.index__row:active::before { clip-path: inset(0 0 0 0); transition-duration: 160ms; }
@media (hover: hover) and (pointer: fine) {
  .index__row:hover::before { clip-path: inset(0 0 0 0); }
  .index__row:hover .index__name { transform: translateX(0.375rem); }
  .index__row:hover .index__more svg { transform: translateX(4px); }
}
@media (min-width: 56em) {
  .index:not(.index--compact) .index__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(11rem, 3fr);
    grid-template-areas: "name desc price" "name more price";
    align-items: start;
  }
  .index:not(.index--compact) .index__desc { margin-top: 0.5em; }
  .index:not(.index--compact) .index__price { padding-top: 0.35em; }
  /* A row without a price (Mental Coaching): the description takes the price column too */
  .index:not(.index--compact) .index__row:not(:has(.index__price)) { grid-template-areas: "name desc desc" "name more more"; }
  .index:not(.index--compact) .index__row:not(:has(.index__price)) .index__desc { max-width: 40em; }
}
/* Compact: inside the narrow column of a duo (coaching price list) */
.index--compact .index__name { font-size: var(--step-2); }
.index--compact .index__row { padding-block: var(--sp-5); }
.index--compact .index__desc { margin-top: var(--sp-1); font-size: var(--step--1); }
.index__note {
  margin-top: var(--sp-6);
  font-size: var(--step--1); color: var(--fg-3);
}
.duo__body .index__note { margin-top: 0; }

/* Plain list: short items, a small accent dot, no rules */
.features { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.features li { position: relative; padding-left: 1.25rem; text-wrap: pretty; }
.features li::before {
  content: ""; position: absolute; left: 0.125rem; top: calc(var(--leading-body) * 0.5em - 0.1875rem);
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--accent);
}

/* Items: a short list of named points (OE fields, values) */
.items { list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.items__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.005em; }
.items__text { margin-top: var(--sp-2); color: var(--fg-2); text-wrap: pretty; }

/* Quote */
.quote { position: relative; }
.quote__text {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem); line-height: 1.16; letter-spacing: -0.01em;
  text-wrap: balance;
}
.quote__text p { text-indent: -0.42em; }
.quote__cite {
  margin-top: var(--sp-6);
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; color: var(--fg-2);
}
.quote--page { max-width: 46rem; }

/* Credentials: name + institution, compact */
.credentials { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.credentials__name { display: block; font-weight: 500; }
.credentials__by { display: block; margin-top: 0.1rem; font-size: var(--step--1); color: var(--fg-3); }

/* Service (coaching page): a duo per offer, all four alike */
.svc + .svc { margin-top: calc(var(--section) * 0.75); padding-top: calc(var(--section) * 0.75); border-top: 1px solid var(--line); }
.svc__for { color: var(--fg-2); max-width: 26em; text-wrap: pretty; }
.svc__price { font-size: var(--step-0); }
.svc__price .price__num { font-size: var(--step-3); font-family: var(--font-display); font-weight: 400; }
.svc__price .price__label { font-size: var(--step--1); color: var(--fg-3); }
.duo__body .link--arrow { justify-self: start; }

/* CTA band: back in the night, stars only (no photo) */
.cta-band { position: relative; overflow: clip; isolation: isolate; }
.cta-band__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.cta-band__copy { max-width: 42rem; }
.cta-band .t-lead { margin-top: var(--sp-6); color: var(--fg-2); }
.cta-band__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (min-width: 30em) { .cta-band__actions { flex-direction: row; flex-wrap: wrap; } }

/* Footer: brand, contact, one link list, bottom bar */
.site-footer { position: relative; padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom)); --bg: var(--night-950); }
.footer__grid { display: grid; gap: var(--sp-10); }
.footer__brand { display: grid; gap: var(--sp-3); align-content: start; }
.footer__logo { font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; line-height: 1; }
.footer__tag, .footer__contact { color: var(--fg-2); font-size: var(--step--1); line-height: 1.7; }
.footer__links { list-style: none; padding: 0; display: grid; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--fg-2); text-decoration: none; font-size: var(--step--1); transition: color var(--dur-fast) ease; }
.footer__links a[aria-current="page"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { color: var(--fg); } }
@media (min-width: 48em) {
  .footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: clamp(2rem, 5vw, 5rem); }
  .footer__links { margin-top: -0.6rem; }
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-8);
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--step--2); color: var(--fg-3); letter-spacing: 0.02em;
}
.footer__bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); }
.footer__bottom-links > a:not(.luxid-credit) { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__bottom-links > a:not(.luxid-credit):hover { color: var(--fg); } }

/* Made by Luxid: the studio's own credit badge, as on luxid.ch */
@font-face { font-family: "Syne Luxid"; src: url("../fonts/syne-700-luxid.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.luxid-credit {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  font-size: 11px; letter-spacing: 0.08em; color: #8b877f; text-decoration: none;
}
.luxid-credit__badge {
  display: inline-block;
  font-family: "Syne Luxid", "Syne", var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: #ff3d2e; background: rgba(232, 51, 42, 0.08);
  border: 1.5px solid #e8332a; padding: 5px 10px;
  box-shadow: 0 0 8px rgba(232, 51, 42, 0.6), 0 0 20px rgba(232, 51, 42, 0.25);
  transition: transform 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .luxid-credit:hover .luxid-credit__badge {
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(232, 51, 42, 0.9), 0 0 36px rgba(232, 51, 42, 0.45);
  }
}

/* ---------- 12. Inner-page components ----------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(3rem, 10vw, 7rem));
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.page-hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.page-hero .t-h1 { max-width: 16em; }
.page-hero .t-lead { margin-top: var(--sp-6); }

.breadcrumb { margin-bottom: var(--sp-8); font-size: var(--step--1); color: var(--fg-3); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "›"; color: var(--fg-3); }
.breadcrumb a { color: var(--fg-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.25em; } }

.accordion { border-bottom: 1px solid var(--line); }
.accordion__item { border-top: 1px solid var(--line); }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  min-height: 4rem; padding-block: var(--sp-5);
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.2;
  cursor: pointer; list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__icon { position: relative; flex: none; width: 1rem; height: 1rem; color: var(--accent-ink); }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-ui);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__icon::after { transform: rotate(0deg); }
.accordion__body { padding-bottom: var(--sp-6); max-width: var(--measure); color: var(--fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .accordion__item[open] .accordion__body { animation: hero-rise 420ms var(--ease-out) both; }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.12; margin-top: 2em; }
.prose h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.2; margin-top: 1.75em; }
.prose a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
.prose ul { padding-left: 1.1em; }
.prose li + li { margin-top: 0.4em; }

/* ===== Page: coaching / organisationsentwicklung (builder A) ===== */

/* The base .page-hero padding in this section would override the image variant from the
   critical block (same specificity, later in the file). Restating it here keeps the hero
   identical before and after the full stylesheet arrives (no layout shift). */
.page-hero--image {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.25rem, 6vw, 4rem));
  padding-bottom: calc(var(--media-h) * 0.4 + var(--sp-6));
}

[data-spy-target] { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
/* the sticky chip bar sits under the header: duo headings stay clear of it */
.subnav ~ .section .duo__head { top: calc(var(--header-h) + 5rem); }

/* FAQ accordion */
.accordion__summary { transition: color var(--dur-fast) ease; }
.accordion__summary:focus-visible { outline-offset: -2px; border-radius: 2px; }
.accordion__item.is-animating { overflow: clip; }
.js .accordion__item[open] .accordion__body { animation: none; }
.accordion__body > * + * { margin-top: 0.75em; }
@media (hover: hover) and (pointer: fine) { .accordion__summary:hover { color: var(--accent-ink); } }

/* OE: the four steps, a numbered path on a quiet hairline */
.path { --node: 2.5rem; list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.path__step { position: relative; padding-left: calc(var(--node) + var(--sp-5)); }
.path__step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 0.5px); top: calc(var(--node) + var(--sp-2));
  bottom: calc(var(--sp-8) * -1 + var(--sp-2)); width: 1px;
  background: var(--line);
}
.path__node {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: var(--node); height: var(--node);
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 50%;
  color: var(--accent-ink);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; line-height: 1;
  font-variant-numeric: lining-nums;
}
.path__title {
  min-height: var(--node); display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em;
  font-size: var(--step-2); line-height: 1.2;
}
.path__text { margin-top: var(--sp-1); color: var(--fg-2); text-wrap: pretty; }

/* Hero jump link and secondary actions on night */
.page-hero .link--arrow { color: var(--snow); }

/* ---------- 13. Forms ---------------------------------------------------- */
.form { display: grid; gap: var(--sp-6); }
.form__row { display: grid; gap: var(--sp-6); }
@media (min-width: 40em) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__hint { font-size: var(--step--1); color: var(--fg-3); }
.form__summary {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-input);
  border: 1px solid color-mix(in srgb, var(--error, #b42318) 55%, transparent);
  background: color-mix(in srgb, var(--error, #b42318) 8%, transparent);
  color: var(--fg);
  font-size: var(--step--1); font-weight: 500;
}
.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--step--1); font-weight: 500; color: var(--fg); }
.field__help { font-size: var(--step--1); color: var(--fg-3); }
.field__error { font-size: var(--step--1); font-weight: 500; color: var(--error, #b42318); }
.field__error:empty { display: none; }
.surface-night, .surface-dusk { --error: #ff9b8f; }
@media (prefers-color-scheme: dark) { .surface-paper, .surface-paper-2 { --error: #ff9b8f; } }

.input, .select, .textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  font-size: max(16px, 1rem);      /* never below 16px: no iOS zoom */
  line-height: 1.4;
  color: var(--fg);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-input);
  caret-color: var(--accent-ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 10rem; resize: vertical; }
.select {
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); opacity: 1; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error, #b42318);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--fg) 50%, transparent); }
}
.form__privacy { font-size: var(--step--1); color: var(--fg-3); max-width: 46em; }
.form__privacy a { color: var(--fg-2); text-underline-offset: 0.22em; }
.form__submit { justify-self: start; }
.form__submit[aria-busy="true"] { cursor: progress; opacity: 0.85; }
.form__submit[aria-busy="true"] .btn__icon { animation: sending 1s var(--ease-in-out) infinite; }
@keyframes sending { 50% { transform: translateX(4px); opacity: 0.4; } }
.form__status { font-size: var(--step--1); font-weight: 500; color: var(--error, #b42318); }
.form__status:empty { display: none; }
.form__success { display: grid; gap: var(--sp-4); padding-block: var(--sp-6); }
.form__success:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .form__success:not([hidden]) { animation: hero-rise 600ms var(--ease-out) both; }
}

/* ===== Page: about / contact / imprint / 404 (builder B) ===== */

/* B-CONTACT:START  Contact pages inline this block, plus section 13 (forms), in their <head>. */
:root { --pull: clamp(3rem, 9vw, 6.5rem); }
/* The form card rises out of the hero picture by --pull */
.page-hero--contact { padding-bottom: calc(var(--media-h) * 0.58 + var(--sp-4) + var(--pull)); }
@media (min-width: 56em) {
  .page-hero--contact { --media-h: min(48vw, 40rem); }
  .page-hero--contact .page-hero__media { left: auto; width: 58%; }
  .page-hero--contact .page-hero__media::after {
    background:
      linear-gradient(to top, rgb(11 20 38 / 0.7) 0%, rgb(11 20 38 / 0) 20%),
      linear-gradient(to right, #0b1426 0%, rgb(11 20 38 / 0.6) 22%, rgb(11 20 38 / 0) 56%),
      linear-gradient(to bottom, #0b1426 0%, rgb(11 20 38 / 0.8) 14%, rgb(11 20 38 / 0.4) 32%, rgb(11 20 38 / 0) 62%);
  }
}
.page-hero--contact .t-lead { text-shadow: 0 1px 18px rgb(4 12 32 / 0.65); }
.contact { position: relative; padding-bottom: var(--section); }
.contact__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.form-card {
  position: relative; z-index: 2; align-self: start;
  margin-top: calc(var(--pull) * -1);
  padding: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  background: color-mix(in srgb, var(--paper) 52%, #fff);
  border: 1px solid color-mix(in srgb, var(--paper-line) 60%, #fff);
  border-radius: var(--radius-media);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 56px 90px -54px rgb(6 12 24 / 0.65), 0 20px 36px -26px rgb(6 12 24 / 0.32);
  --field-bg: color-mix(in srgb, var(--paper) 78%, transparent);
}
@media (prefers-color-scheme: dark) {
  .form-card { background: var(--paper-2); border-color: var(--paper-line); box-shadow: 0 56px 90px -54px rgb(0 0 0 / 0.7); --field-bg: rgb(243 245 249 / 0.05); }
}
.form__head { display: grid; gap: var(--sp-3); }
.form__head p { color: var(--fg-2); }
.form__submit { min-height: 3.5rem; }
@media (max-width: 29.99em) { .form__submit { justify-self: stretch; } }
.form-card .form { gap: var(--sp-6); }
.form__success .link--arrow { justify-self: start; }

.contact__side { display: block; }
.contact-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-media); }
.contact-card .t-h3 { margin-bottom: var(--sp-2); }
.facts { display: grid; margin: 0; }
.facts > div { padding-block: var(--sp-4); }
.facts > div + div { border-top: 1px solid var(--line); }
.facts dt { margin: 0 0 var(--sp-1); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.facts a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 56em) {
  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(3rem, 6vw, 6rem); }
  .contact__side { padding-top: var(--sp-10); }
  .contact-card { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
}
/* B-CONTACT:END */

/* About */
.t-lead--ink { color: var(--fg); }
/* The picture sits mostly under the words on phones, so the lead stays on the dark sky */
@media (max-width: 55.99em) { .page-hero--about { padding-bottom: calc(var(--media-h) * 0.9); } }

/* Imprint & privacy: reading layout with a contents list */
.legal { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.toc__title { margin-bottom: var(--sp-3); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.toc__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.toc__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 500; line-height: 1; text-decoration: none; color: var(--fg-2);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-ui);
}
.toc__link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .toc__link:hover { border-color: var(--fg); color: var(--fg); } }
.legal__body { max-width: 44rem; }
.legal__sec > * + * { margin-top: 1em; }
.legal__sec > h2 { margin-top: 0; }
.legal__sec > h3 { margin-top: 2em; }
.legal__sec + .legal__sec { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.legal__sec address { line-height: 1.7; color: var(--fg); }
.legal__sec p { color: var(--fg-2); text-wrap: pretty; }
.legal__sec a { overflow-wrap: anywhere; }
@media (min-width: 56em) {
  .legal { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .toc { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
  .toc__list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .toc__link { min-height: 2.75rem; padding: 0; border: 0; border-radius: 0; font-size: var(--step-0); font-weight: 400; }
  .toc__link:active { transform: none; }
}

/* 404 */
.lost { display: grid; align-items: center; min-height: min(100svh, 52rem); }
.lost__copy { padding-block: var(--sp-8) clamp(3rem, 8vw, 6rem); }
.lost .t-h1 { max-width: 12em; }
.lost__help { margin-top: var(--sp-6); max-width: 36rem; font-size: var(--step--1); color: var(--fg-2); }
.lost__en { max-width: 36rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--fg-2); }
.lost__en-title { margin-bottom: var(--sp-2); font-size: var(--step-0); font-weight: 500; color: var(--fg); }
.lost__en p + p { margin-top: var(--sp-1); }

/* ---------- 14. Motion utilities ---------------------------------------- */
/* Reveal: visible by default. JS adds .reveal-armed only to elements below
   the fold, then .is-in when they enter. If JS never runs, nothing hides. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-armed { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  .reveal-armed.is-in { opacity: 1; transform: none; transition: opacity 700ms ease, transform 1000ms var(--ease-out); transition-delay: var(--delay, 0ms); }
  .reveal-armed[data-reveal="soft"] { transform: none; filter: blur(8px); }
  .reveal-armed[data-reveal="soft"].is-in { filter: blur(0); transition: opacity 900ms ease, filter 1100ms var(--ease-out); }
  .reveal-armed[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  .reveal-armed[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1300ms var(--ease-out); }
  .reveal-armed[data-reveal="mask"] img { transform: scale(1.08); }
  .reveal-armed[data-reveal="mask"].is-in img { transform: none; transition: transform 1800ms var(--ease-out); }

}

/* ---------- 15. Preferences and print ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .menu, .menu.is-open, .site-header, .index__row::before, .index__name { transition-duration: 1ms !important; }
  .menu .menu__list > li, .menu .menu__foot { transform: none; transition: opacity 200ms ease; }
  .menu { clip-path: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms !important; }
  .menu.is-open { opacity: 1; transition: opacity 200ms ease, visibility 0s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--night-900); }
  .site-header[data-skin="paper"]::before { background: var(--paper); }
  .hero .btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(6 14 32 / 0.7); }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}
@media print {
  .site-header, .menu, .skip-link, canvas, .hero__actions, .cta-band__actions { display: none !important; }
  .hero, .surface-night, .dawn { background: #fff !important; color: #000 !important; min-height: 0; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}