/* Kreis Systems sub-pages v2: shared styles. Tokens, base, header and menu (as landing V2 "Film"), page hero with its window,
   shared editorial blocks, closing block, footer, dock, the phone card stack (as P3 "Stapel"). Page styles live in <page>/page.css. */

/* ---------- Fonts: Chivo variable, upright and italic of the same family ---------- */
@font-face {
  font-family: "Chivo";
  src: url("/fonts/chivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Chivo";
  src: url("/fonts/chivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Chivo";
  src: url("/fonts/chivo-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Metric-matched fallback so the swap to Chivo does not shift the layout (Chivo is wide). */
@font-face {
  font-family: "Chivo Fallback";
  src: local("Arial");
  size-adjust: 108%;
  ascent-override: 88%;
  descent-override: 23%;
}

/* ---------- Tokens ---------- */
:root {
  /* Palette "Vollfarb" (brand brief section 3); no #000, no #fff. Tiefnacht only as the shadow of a covered card. */
  --blau: #2238b8;
  --gelb: #ffe344;
  --koralle: #fb794a;
  --creme: #faf4dd;
  --rosa: #fab0d9;
  --nacht: #09105b;
  --tiefnacht: #07072a;

  /* Motion tokens (Material 3 values; exit is about 70 % of entry). Same values as js/motion.js. */
  --dur-fast: 150ms;
  --dur-fast-out: 100ms;
  --dur-moderate: 300ms;
  --dur-moderate-out: 200ms;
  --dur-slow: 500ms;
  --dur-slow-out: 350ms;
  --dur-hero: 900ms;
  --ease-move: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Grid and spacing on an 8 px baseline: 12 columns at desktop, one column with 16 px margins at 390. */
  --margin: clamp(32px, 4.45vw, 80px);
  --gap: 24px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 192px;
  --section-pad: clamp(96px, 13vw, 192px);
  --nav-h: 80px;

  /* Type scale 1.333 on 18 px. */
  --t-label: 0.8125rem;
  --t-small: 0.9375rem;
  --t-body: 1.125rem;
  --t-l: 1.5rem;
  --t-xl: 2rem;
  --t-title: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);

  --font: "Chivo", "Chivo Fallback", system-ui, sans-serif;
  /* Radii, three values on every page (E8): 0 for surfaces and images, --card for cards and scene panels, round for pills and circles. */
  --card: 32px;
  --round: 999px;
}

/* Surfaces: each section is one Vollfarb colour; text, accent and action follow the brand rules (Koralle only for the main action). */
[data-surface="blau"] { --bg: var(--blau); --fg: var(--creme); --accent: var(--gelb); --muted: color-mix(in oklab, var(--creme) 80%, var(--blau)); --line: color-mix(in oklab, var(--creme) 32%, var(--blau)); --soft: color-mix(in oklab, var(--creme) 10%, var(--blau)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--gelb); --action-hover-fg: var(--nacht); --logo-ring: var(--creme); --logo-core: var(--creme); --logo-big: var(--creme); --logo-small: var(--creme); }
[data-surface="nacht"] { --bg: var(--nacht); --fg: var(--creme); --accent: var(--gelb); --muted: color-mix(in oklab, var(--creme) 76%, var(--nacht)); --line: color-mix(in oklab, var(--creme) 24%, var(--nacht)); --soft: color-mix(in oklab, var(--creme) 8%, var(--nacht)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--gelb); --action-hover-fg: var(--nacht); --logo-ring: var(--creme); --logo-core: var(--creme); --logo-big: var(--creme); --logo-small: var(--creme); }
[data-surface="creme"] { --bg: var(--creme); --fg: var(--nacht); --accent: var(--blau); --muted: color-mix(in oklab, var(--nacht) 78%, var(--creme)); --line: color-mix(in oklab, var(--nacht) 22%, var(--creme)); --soft: color-mix(in oklab, var(--nacht) 6%, var(--creme)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--nacht); --action-hover-fg: var(--creme); --logo-ring: var(--blau); --logo-core: var(--koralle); --logo-big: var(--nacht); --logo-small: var(--koralle); }
[data-surface="gelb"] { --bg: var(--gelb); --fg: var(--nacht); --accent: var(--blau); --muted: color-mix(in oklab, var(--nacht) 80%, var(--gelb)); --line: color-mix(in oklab, var(--nacht) 24%, var(--gelb)); --soft: color-mix(in oklab, var(--nacht) 7%, var(--gelb)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--nacht); --action-hover-fg: var(--creme); --logo-ring: var(--blau); --logo-core: var(--koralle); --logo-big: var(--nacht); --logo-small: var(--koralle); }
[data-surface="rosa"] { --bg: var(--rosa); --fg: var(--nacht); --accent: var(--blau); --muted: color-mix(in oklab, var(--nacht) 84%, var(--rosa)); --line: color-mix(in oklab, var(--nacht) 26%, var(--rosa)); --soft: color-mix(in oklab, var(--nacht) 7%, var(--rosa)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--nacht); --action-hover-fg: var(--creme); --logo-ring: var(--blau); --logo-core: var(--koralle); --logo-big: var(--nacht); --logo-small: var(--koralle); }
[data-surface="koralle"] { --bg: var(--koralle); --fg: var(--nacht); --accent: var(--nacht); --muted: color-mix(in oklab, var(--nacht) 86%, var(--koralle)); --line: color-mix(in oklab, var(--nacht) 30%, var(--koralle)); --soft: color-mix(in oklab, var(--nacht) 8%, var(--koralle)); --action-bg: var(--nacht); --action-fg: var(--creme); --action-hover: var(--creme); --action-hover-fg: var(--nacht); --logo-ring: var(--nacht); --logo-core: var(--nacht); --logo-big: var(--nacht); --logo-small: var(--nacht); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--nacht); scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 350;
  color: var(--nacht);
  background: var(--creme);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
em { font-style: italic; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

:focus-visible { outline: 2px solid var(--fg, var(--nacht)); outline-offset: 4px; }
::selection { background: var(--gelb); color: var(--nacht); }

.wrap { padding-inline: var(--margin); container-type: inline-size; }

.surface { position: relative; background: var(--bg); color: var(--fg); }
.surface > * { position: relative; z-index: 1; }
.surface__bg { position: absolute !important; inset: 0; z-index: 0 !important; background: var(--bg); pointer-events: none; }

.accent { color: var(--accent); font-style: italic; }

/* A/B: blocks that only fit one main action. Without JS the "check" variant shows (same as ab.js default text). */
html:not([data-cta="demo"]) [data-ab="demo"], html[data-cta="demo"] [data-ab="check"] { display: none !important; }

.label {
  display: block;
  font-size: var(--t-label);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.label .sep { color: var(--muted); margin: 0 0.45em; }
.label__dot { display: inline-block; width: 10px; height: 10px; margin-right: 12px; vertical-align: 0.02em; border-radius: var(--round); background: currentColor; }

.section { padding: var(--section-pad) 0; }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-3); margin-bottom: var(--space-8); }
.section-head .label { grid-column: 1 / -1; }
.section-title { grid-column: 1 / 9; font-size: var(--t-title); line-height: 1.04; font-weight: 300; letter-spacing: -0.025em; text-wrap: balance; }
.section-intro { grid-column: 9 / 13; align-self: end; color: var(--muted); max-width: 40ch; text-wrap: pretty; }
.section-title .reveal-line { padding-bottom: 0.04em; }

.micro { font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.fineprint { margin-top: var(--space-5); max-width: 80ch; font-size: var(--t-small); color: var(--muted); text-wrap: pretty; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 1px solid currentColor; border-radius: var(--round); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.tag--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 calc(50% + 0.8em);
  background-repeat: no-repeat;
  transition: background-size var(--dur-fast-out) var(--ease-exit);
}
.text-link .icon { transition: transform var(--dur-fast-out) var(--ease-exit); }
.text-link:hover { background-size: 0% 1px; background-position: 100% calc(50% + 0.8em); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-enter); }
.text-link--arrow:hover .icon { transform: translateX(4px); transition: transform var(--dur-fast) var(--ease-enter); }
.text-link--out:hover .icon { transform: translate(3px, -3px); transition: transform var(--dur-fast) var(--ease-enter); }

/* Main action: Koralle (the colour of the Orbit core) is reserved for it. A circle of the hover colour grows from the pointer (js/nav.js). */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--round);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
}
.button--main { background: var(--action-bg); color: var(--action-fg); transition: color var(--dur-fast-out) var(--ease-exit); }
.button--large { min-height: 64px; padding: 0 32px; font-size: 1.0625rem; }
.button--quiet { border: 1px solid var(--line); color: var(--fg); transition: border-color var(--dur-fast-out) var(--ease-exit); }
.button--quiet:hover { border-color: var(--fg); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-enter); }
.button__fill { position: absolute; inset: 0; z-index: -1; background: var(--action-hover); clip-path: circle(0 at 50% 50%); pointer-events: none; }
.button.is-filled { color: var(--action-hover-fg); transition: color var(--dur-fast) var(--ease-enter) 60ms; }
.button .icon { transition: transform var(--dur-fast-out) var(--ease-exit); }
.button:hover .icon { transform: translateX(4px); transition: transform var(--dur-fast) var(--ease-enter); }
.no-fill .button--main:hover { background: var(--action-hover); color: var(--action-hover-fg); }
.button--hero { min-height: 84px; min-width: 25.5em; padding: 0 44px 0 52px; gap: 18px; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.005em; }
.button--hero .icon { width: 26px; height: 26px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--round);
  background: var(--gelb);
  color: var(--nacht);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-fast-out) var(--ease-exit);
}
.skip-link:focus-visible { transform: none; outline-color: var(--nacht); transition: transform var(--dur-fast) var(--ease-enter); }

/* ---------- Logo (real Orbit geometry from ks-icon-farbig.svg, colours per surface) ---------- */
.orbit__ring { stroke: var(--logo-ring, var(--blau)); }
.orbit__core { fill: var(--logo-core, var(--koralle)); }
.orbit__big { fill: var(--logo-big, var(--nacht)); }
.orbit__small { fill: var(--logo-small, var(--koralle)); }
.wordmark { display: inline-flex; gap: 0.28em; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1; }
.wordmark__a { font-weight: 700; }
.wordmark__b { font-weight: 400; }

/* ---------- Header (as landing V2): logo left, one quiet "Menü" right; the main action joins only after the hero button ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--fg); }
.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nav-h);
  padding-inline: var(--margin);
}
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--dur-moderate-out) var(--ease-exit), background-color var(--dur-fast) linear;
}
.nav.is-solid .nav__bar::before { opacity: 1; transition: opacity var(--dur-moderate) var(--ease-enter), background-color var(--dur-fast) linear; }
.nav__bar::after { content: ""; position: absolute; left: var(--margin); right: var(--margin); bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity var(--dur-moderate) var(--ease-move); }
.nav.is-solid .nav__bar::after { opacity: 1; }
.nav, .nav a { transition: color var(--dur-fast) linear; }
.nav__logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; }
.logo-mark { width: 40px; height: 40px; flex: none; overflow: visible; }

.nav__cta { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.js .nav__cta {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-fast-out) var(--ease-exit), transform var(--dur-fast-out) var(--ease-exit), visibility 0s linear var(--dur-fast-out), color var(--dur-fast-out) var(--ease-exit);
}
.js .nav.is-past-hero .nav__cta { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-moderate) var(--ease-enter), transform var(--dur-moderate) var(--ease-enter), visibility 0s, color var(--dur-fast-out) var(--ease-exit); }
.nav.menu-open .nav__cta { visibility: hidden; opacity: 0; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--round);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color var(--dur-fast-out) var(--ease-exit);
}
.js .nav__toggle--nojs, html:not(.js) .nav__toggle--js { display: none; }
.nav__toggle:hover { border-color: currentColor; transition: border-color var(--dur-fast) var(--ease-enter); }
.nav__toggle-dot { width: 8px; height: 8px; border-radius: var(--round); background: currentColor; transition: transform var(--dur-fast) var(--ease-move); }
.nav__toggle[aria-expanded="true"] .nav__toggle-dot { transform: scale(1.5); }

/* The full navigation grows as a Gelb circle out of the "Menü" control and shrinks back into it. Without JS the toggle links to the footer pages. */
.menu { display: none; }
.js .menu {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--gelb);
  color: var(--nacht);
  --bg: var(--gelb); --fg: var(--nacht); --accent: var(--blau); --muted: color-mix(in oklab, var(--nacht) 78%, var(--gelb)); --line: color-mix(in oklab, var(--nacht) 24%, var(--gelb)); --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--nacht); --action-hover-fg: var(--creme);
  clip-path: circle(0 at 100% 0);
  visibility: hidden;
}
.js .menu[hidden] { display: block; }
.menu.is-open { visibility: visible; }
.menu__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-content: center;
  height: 100%;
  padding: calc(var(--nav-h) + var(--space-4)) var(--margin) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__pages { grid-column: 1 / 8; }
.menu__links { display: grid; border-top: 1px solid var(--line); }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(2rem, min(5vw, 7.2svh), 4.25rem);
  line-height: 1;
  font-weight: 200;
  letter-spacing: -0.03em;
}
.menu__word { transition: font-weight var(--dur-fast-out) var(--ease-exit); }
.menu__links a:hover .menu__word, .menu__links a:focus-visible .menu__word { font-weight: 700; transition: font-weight var(--dur-fast) var(--ease-enter); }
.menu__links a[aria-current="page"] .menu__word { font-weight: 700; font-style: italic; color: var(--accent); }
.menu__num { flex: none; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em; min-width: 2.2em; }
.menu__links a[aria-current="page"] .menu__num::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: var(--round); background: var(--accent); vertical-align: 0.1em; }
.menu__side { grid-column: 9 / 13; align-self: end; display: grid; gap: var(--space-5); justify-items: start; }
.menu__group { display: grid; gap: var(--space-2); }
.menu__head { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu__products { display: grid; gap: var(--space-1); }
.menu__products a { display: grid; min-height: 44px; }
.menu__product { font-size: var(--t-xl); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.menu__domain { font-size: var(--t-small); color: var(--muted); }
.menu__contact { display: grid; gap: 2px; }
.menu__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.nav.menu-open { color: var(--nacht); --fg: var(--nacht); --line: color-mix(in oklab, var(--nacht) 24%, var(--gelb)); --logo-ring: var(--blau); --logo-core: var(--koralle); --logo-big: var(--nacht); --logo-small: var(--koralle); }
.nav.menu-open .nav__bar::before, .nav.menu-open .nav__bar::after { opacity: 0; }

/* ---------- Page hero (as landing V2): line, window, line, the big centred main action; nothing else in the first view ---------- */
.page-hero__wrap {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  padding-top: calc(var(--nav-h) + clamp(0px, 1vh, 12px));
  padding-bottom: clamp(28px, 5.2vh, 64px);
}
.page-hero__title {
  grid-row: 1 / 4;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  text-align: center;
  font-size: min(calc(100cqw / var(--hero-fit, 12.2)), 11svh);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.page-hero__line { display: block; white-space: nowrap; }
.page-hero__line--a { grid-row: 1; align-self: end; }
.page-hero__line--b { grid-row: 3; align-self: start; line-height: 1.16; }
.page-hero__line .accent { font-weight: 800; letter-spacing: -0.035em; }
@supports not (grid-template-rows: subgrid) {
  .page-hero__title { grid-row: 1; display: block; }
  .window { grid-row: 2; }
}

/* The window: the Kreis stretched into a band (same shape as the film window of the landing page). Each page fills its stage. */
.window { grid-row: 2; grid-column: 1; justify-self: center; position: relative; width: min(100%, 90cqw); margin: clamp(12px, 2.4vh, 28px) 0; container-type: size; overflow: clip; overflow-clip-margin: 3px; }
.window__stage { position: absolute; inset: 0; overflow: hidden; background: var(--window-bg, var(--gelb)); clip-path: inset(0 0 round var(--round)); }
.window__toggle {
  position: absolute;
  top: 50%;
  right: clamp(12px, 3cqh, 24px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: var(--round);
  background: var(--nacht);
  color: var(--creme);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--creme) 55%, var(--nacht));
  transition: box-shadow var(--dur-fast-out) var(--ease-exit);
}
.window__toggle:hover { box-shadow: inset 0 0 0 1.5px var(--creme); transition: box-shadow var(--dur-fast) var(--ease-enter); }
.window__toggle:focus-visible { outline-color: var(--creme); outline-offset: 3px; }
.window__toggle .icon { width: 20px; height: 20px; }
.window__toggle[hidden] { display: none; }
.window__toggle .icon--play, .window__toggle[aria-pressed="true"] .icon--pause { display: none; }
.window__toggle[aria-pressed="true"] .icon--play { display: block; }
.window.is-paused * { animation-play-state: paused !important; }

.page-hero__action { grid-row: 4; justify-self: center; margin-top: clamp(20px, 4vh, 44px); }

/* First load: two curtains in the hero colour with a half-circle cut part sideways, the window opens from a circle into the band;
   the lines swing in on wide arcs like the two orbits of the mark. Transforms only, the stage paints at full size from the start. */
.window__curtain { display: none; position: absolute; top: -2px; bottom: -2px; z-index: 2; width: calc(50% + 2px); background: var(--bg); pointer-events: none; }
.window__curtain--l { left: -2px; -webkit-mask-image: radial-gradient(circle 50cqh at 100% 50%, transparent 99.5%, #000 100%); mask-image: radial-gradient(circle 50cqh at 100% 50%, transparent 99.5%, #000 100%); }
.window__curtain--r { right: -2px; -webkit-mask-image: radial-gradient(circle 50cqh at 0% 50%, transparent 99.5%, #000 100%); mask-image: radial-gradient(circle 50cqh at 0% 50%, transparent 99.5%, #000 100%); }
@keyframes curtain-l { from { transform: none; visibility: visible; } to { transform: translateX(calc(50cqh - 50cqw)); visibility: hidden; } }
@keyframes curtain-r { from { transform: none; visibility: visible; } to { transform: translateX(calc(50cqw - 50cqh)); visibility: hidden; } }
@keyframes line-swing-a { from { transform: rotate(-3.5deg); } to { transform: none; } }
@keyframes line-swing-b { from { transform: rotate(3.5deg); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .window__curtain { display: block; }
.js .window__curtain--l { animation: curtain-l var(--dur-hero) var(--ease-enter) 80ms both; }
.js .window__curtain--r { animation: curtain-r var(--dur-hero) var(--ease-enter) 80ms both; }
.js .page-hero__line--a { transform-origin: 50% 1400%; animation: line-swing-a var(--dur-hero) var(--ease-enter) both; }
.js .page-hero__line--b { transform-origin: 50% -1300%; animation: line-swing-b var(--dur-hero) var(--ease-enter) 60ms both; }
.js .page-hero__action { animation: rise var(--dur-slow) var(--ease-enter) 380ms both; }

/* A browser window inside a stage: real screenshots with their address. */
.browser { position: absolute; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--creme); box-shadow: 0 0 0 1.5px var(--nacht); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; background: var(--creme); color: var(--nacht); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; border-bottom: 1.5px solid var(--nacht); white-space: nowrap; }
.browser__bar::before { content: ""; width: 6px; height: 6px; border-radius: var(--round); background: var(--nacht); flex: none; }
.browser img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Below the first view: the page label, the lead, the promise of the action, the chapters as pills. */
.page-hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-3);
  align-items: end;
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}
.page-hero__foot::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: var(--space-4); background: var(--line); }
.page-hero__foot .label { grid-column: 1 / -1; }
.page-hero__lead { grid-column: 1 / 8; max-width: 42ch; font-size: var(--t-l); line-height: 1.4; font-weight: 300; text-wrap: pretty; }
.page-hero__lead strong { font-weight: 500; }
.page-hero__micro { grid-column: 1 / 8; }
.chapters { grid-column: 9 / 13; grid-row: 3 / 5; align-self: end; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chapters a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--line); border-radius: var(--round); font-size: var(--t-small); font-weight: 500; transition: border-color var(--dur-fast-out) var(--ease-exit), background-color var(--dur-fast-out) var(--ease-exit); }
.chapters .tnum { font-size: var(--t-label); color: var(--muted); }
.chapters a:hover { border-color: var(--fg); background: var(--soft); transition: border-color var(--dur-fast) var(--ease-enter), background-color var(--dur-fast) var(--ease-enter); }

/* ---------- Shared editorial blocks ---------- */
/* Doors (as landing V2): big words, a Gelb lens grows from the left edge on pointer devices. */
.doors__list { border-top: 1px solid var(--line); container-type: inline-size; }
.door { position: relative; border-bottom: 1px solid var(--line); }
.door__link, .door__lens { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: var(--space-3) 0 var(--space-4); }
.door__num { grid-column: 1; align-self: start; padding-top: 1.1em; font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.door__word { grid-column: 2 / 10; grid-row: 1; font-size: calc(((100cqw - 11 * var(--gap)) * 8 / 12 + 7 * var(--gap)) / 6.4); line-height: 0.92; font-weight: 200; letter-spacing: -0.035em; white-space: nowrap; }
.door__kicker { grid-column: 10 / 13; grid-row: 1; justify-self: end; text-align: right; font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.door__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .door__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; grid-column: 2 / 10; margin-top: var(--space-2); color: var(--muted); max-width: 60ch; }
.door__lens { position: absolute; inset: 0; z-index: 2; background: var(--gelb); color: var(--nacht); pointer-events: none; clip-path: circle(0 at 0 50%); visibility: hidden; }
.door__lens .door__num { color: var(--nacht); }
.door__lens .door__word { font-weight: 800; }
.door__lens-text { grid-column: 10 / 13; grid-row: 1; align-self: end; display: grid; gap: var(--space-2); font-size: var(--t-small); line-height: 1.45; max-width: 36ch; justify-self: end; }
.door__go { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.door__link:focus-visible { outline-offset: -2px; }
.door.is-open .door__lens { visibility: visible; }
@media (hover: none), (pointer: coarse) {
  .door__lens, .door__kicker { display: none; }
  .door__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; grid-column: 2 / 13; margin-top: var(--space-2); color: var(--muted); max-width: 52ch; }
  .door__link:active { background: var(--soft); }
}

/* Kinetic prose: what belongs gains weight in reading order, what does not is struck through by a line that draws itself.
   The text reads as a sentence, not as a list; [data-say] marks it for js/say.js. */
.say { font-size: clamp(1.625rem, 1rem + 1.9vw, 2.875rem); line-height: 1.18; font-weight: 300; letter-spacing: -0.02em; text-wrap: pretty; }
.say__lead { font-weight: 500; }
.say__yes { font-weight: 650; }
.say__no { position: relative; color: var(--muted); }
.say__no::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 54%; height: max(2px, 0.06em); background: currentColor; transform-origin: 0 50%; }
.say__sep { display: inline-block; width: 0.32em; height: 0.32em; margin: 0 0.32em; border-radius: var(--round); background: var(--accent); vertical-align: 0.14em; }
.js [data-say]:not(.is-said) .say__yes { font-weight: 300; }
.js [data-say]:not(.is-said) .say__no::after { transform: scaleX(0); }
.js [data-say] .say__yes { transition: font-weight var(--dur-slow) var(--ease-move) calc(var(--i, 0) * 60ms); }
.js [data-say] .say__no::after { transition: transform var(--dur-slow) var(--ease-enter) calc(var(--i, 0) * 60ms); }

/* Poster statements: one sentence per row in display size, its explanation beside it. */
.posters { display: grid; border-top: 1px solid var(--line); }
.poster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.poster__mark { grid-column: 1; font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.poster__title { grid-column: 2 / 9; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.75rem); line-height: 0.98; font-weight: 250; letter-spacing: -0.035em; text-wrap: balance; }
.poster__title em { font-weight: 750; }
.poster__text { grid-column: 9 / 13; color: var(--muted); max-width: 36ch; text-wrap: pretty; }

/* ---------- Closing block: one poster sentence, the main action, direct contact ---------- */
.close { min-height: 100svh; display: flex; }
.close__wrap { flex: 1; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + var(--space-5)); padding-bottom: var(--space-6); }
.close__title { align-self: center; margin: var(--space-6) 0; line-height: 0.9; letter-spacing: -0.035em; font-size: calc(100cqw / var(--close-fit, 8.45)); }
.close__line { display: block; font-weight: 200; white-space: nowrap; }
.close__line--b { font-weight: 800; }
.close__base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.close__text { grid-column: 1 / 6; font-size: var(--t-l); line-height: 1.38; font-weight: 300; max-width: 36ch; text-wrap: pretty; }
.close__actions { grid-column: 7 / 13; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.close__direct { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }

/* ---------- Footer (as landing V2) ---------- */
.footer { padding: var(--space-8) 0 var(--space-4); }
.footer__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.footer__claim { font-size: var(--t-title); line-height: 1.05; font-weight: 300; letter-spacing: -0.025em; max-width: 26ch; text-wrap: balance; }
.footer__up .icon--up { transform: rotate(-90deg); }
.footer__up:hover .icon--up { transform: rotate(-90deg) translateX(4px); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: var(--space-6) 0 var(--space-8); font-size: var(--t-small); }
.footer__head { margin-bottom: var(--space-2); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.footer__col li { line-height: 1.5; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 85%; background-repeat: no-repeat; transition: background-size var(--dur-fast-out) var(--ease-exit); }
.footer__col a:hover { background-size: 100% 1px; transition: background-size var(--dur-fast) var(--ease-enter); }
.footer__col a[aria-current="page"] { background-size: 100% 1px; font-weight: 600; }
.footer__small { color: var(--muted); font-size: var(--t-label); margin-top: var(--space-1); }
.footer__mark { display: flex; align-items: center; gap: 0.18em; font-size: calc(100cqw / 7.6); line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; }
.footer__mark .logo-mark { width: 1em; height: 1em; }
.footer__word { display: inline-block; }
.footer__legal { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--t-label); color: var(--muted); }

/* ---------- Mobile dock (main action and call in thumb reach) ---------- */
.dock { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .menu__pages { grid-column: 1 / -1; }
  .menu__side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, auto)); column-gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
  .menu__cta { grid-column: 1 / -1; }
  .section-title, .section-intro { grid-column: 1 / -1; }
  .page-hero__lead, .page-hero__micro { grid-column: 1 / -1; }
  .chapters { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-3); }
  .poster__title { grid-column: 2 / -1; }
  .poster__text { grid-column: 2 / -1; margin-top: var(--space-2); }
  .close__text { grid-column: 1 / -1; }
  .close__actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--space-4); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
}

/* ---------- Phone: own composition ---------- */
@media (max-width: 760px) {
  .nav__cta { display: none; }
}
@media (max-width: 640px) {
  :root { --margin: 16px; --gap: 12px; --nav-h: 64px; --section-pad: 88px; --t-body: 1.0625rem; --card: 24px; }
  .logo-mark { width: 34px; height: 34px; }
  .wordmark { font-size: 1.125rem; }
  .nav__toggle { padding: 0 16px; }

  .menu__inner { align-content: start; grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + var(--space-3)); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .menu__side { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
  .menu__cta { order: -1; width: 100%; }
  .menu__links a { font-size: clamp(2rem, 10vw, 2.75rem); padding: 10px 0; }

  .page-hero__wrap { padding-top: calc(var(--nav-h) + 4px); padding-bottom: var(--space-4); grid-template-rows: auto auto auto auto; align-content: center; }
  .page-hero__title { font-size: min(calc(100cqw / var(--hero-fit-m, 7.05)), 7.4svh); line-height: 1.02; }
  .page-hero__line { white-space: normal; text-wrap: balance; }
  .window { width: 100%; margin: var(--space-3) 0; height: auto; aspect-ratio: 4 / 3; }
  .window__stage { clip-path: inset(0 0 round var(--card)); }
  .window__curtain { display: none !important; }
  .window__toggle { right: 50%; margin-right: -22px; top: auto; bottom: 10px; margin-top: 0; }
  .page-hero__action { justify-self: stretch; margin-top: var(--space-3); }
  .button--hero { width: 100%; min-width: 0; min-height: 64px; padding: 0 16px; font-size: 1.0625rem; letter-spacing: -0.01em; }
  .button--hero .icon { display: none; }
  .page-hero__foot { grid-template-columns: 1fr; padding-top: var(--space-4); padding-bottom: var(--space-7); }
  .page-hero__foot > * { grid-column: 1; }
  .page-hero__lead { font-size: 1.25rem; }
  .chapters { margin-top: var(--space-2); }

  .section-head { grid-template-columns: 1fr; margin-bottom: var(--space-6); }
  .section-title, .section-intro { grid-column: 1; }
  .section-title { font-size: 2.125rem; }

  .door__link { grid-template-columns: 2.25rem 1fr; padding: var(--space-3) 0; }
  .door__num { grid-column: 1; padding-top: 0.6em; }
  .door__word { grid-column: 1 / -1; grid-row: 2; font-size: calc(100cqw / 5.6); font-weight: 300; margin-top: var(--space-1); }
  .door__text { grid-column: 1 / -1; grid-row: 3; display: block; font-size: 1rem; }

  .say { font-size: 1.5rem; line-height: 1.22; }
  .poster { grid-template-columns: 1fr; row-gap: var(--space-2); padding: var(--space-4) 0; }
  .poster__mark, .poster__title, .poster__text { grid-column: 1; }
  .poster__title { font-size: 2.375rem; }

  .close { min-height: auto; }
  .close__wrap { padding-top: var(--space-7); }
  .close__title { font-size: calc(100cqw / var(--close-fit-m, 5.75)); margin: var(--space-5) 0; }
  .close__line { white-space: normal; }
  .close__base { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
  .close__text, .close__actions { grid-column: 1; }
  .close__text { font-size: 1.125rem; }
  .close__actions { justify-content: flex-start; margin-top: 0; }
  .close__actions .button { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding: 12px 16px; font-size: 1rem; }

  .footer { padding-bottom: calc(var(--space-4) + 88px); }
  .footer__top { flex-direction: column; }
  .footer__claim { font-size: 2rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__mark { font-size: calc(100cqw / 7.5); }
  .footer__legal { flex-direction: column; }

  .dock {
    display: flex;
    gap: var(--space-1);
    position: fixed;
    left: var(--margin);
    right: var(--margin);
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40;
    transform: translateY(calc(100% + 24px));
    transition: transform var(--dur-moderate-out) var(--ease-exit);
    --action-bg: var(--koralle); --action-fg: var(--nacht); --action-hover: var(--nacht); --action-hover-fg: var(--creme);
  }
  .dock.is-shown { transform: none; transition: transform var(--dur-moderate) var(--ease-enter); }
  .dock__main { flex: 1; min-height: 56px; min-width: 0; padding: 0 16px; font-size: 0.9375rem; }
  .dock__main span { overflow: hidden; text-overflow: ellipsis; }
  .dock__call { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--round); background: var(--nacht); color: var(--creme); box-shadow: 0 0 0 1px color-mix(in oklab, var(--creme) 30%, var(--nacht)); }

  /* The card stack (P3 "Stapel"): every section after the hero is a card that slides up over the one before and holds there.
     js/stack.js measures each card (--card-h), so a card taller than the screen first scrolls to its end and only then holds.
     The covered card recedes (scale and shade from --cover). Native scroll: CSS sticky only, nothing is pinned by script. */
  .js.stack-on main > .surface:not(.page-hero) {
    position: sticky;
    top: min(0px, calc(100svh - var(--card-h, 100svh)));
    margin-top: calc(-1 * var(--card));
    border-radius: var(--card) var(--card) 0 0;
    transform-origin: 50% 0;
  }
  .js.stack-on main > .surface.is-covered { transform: scale(calc(1 - var(--cover, 0) * 0.07)); }
  .js.stack-on main > .surface::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: var(--tiefnacht); opacity: calc(var(--cover, 0) * 0.62); pointer-events: none; }
  .js.stack-on main > .surface.is-gone { visibility: hidden; }
  .js.stack-on .footer { margin-top: calc(-1 * var(--card)); border-radius: var(--card) var(--card) 0 0; }
}

/* Small phones (360 px): the longer main action ("Kostenlose Website-Demo anfragen") may wrap inside its pill instead of touching the edges. */
@media (max-width: 400px) {
  .button--large { padding-inline: 20px; gap: 10px; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
  .dock__main { padding: 6px 16px; font-size: 0.875rem; line-height: 1.15; white-space: normal; text-align: center; }
  .dock__main span { overflow: visible; text-overflow: clip; }
}

/* ---------- Reduced motion: final states, colour surfaces intact ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .window__curtain { display: none; }
  .js .page-hero__line--a, .js .page-hero__line--b, .js .page-hero__action { animation: none; }
  .js .nav__cta, .js .nav.is-past-hero .nav__cta { transform: none; }
  .window * { animation: none !important; }
  .js [data-say] .say__yes, .js [data-say] .say__no::after { transition: none; }
  .text-link, .text-link .icon, .button .icon, .footer__col a, .menu__word, .chapters a { transition-duration: 0ms; }
  .dock, .dock.is-shown { transition: opacity 120ms ease; }
}

/* ---------- Without JS: the header scrolls away with the hero (no colour tracking), content stands complete ---------- */
html:not(.js) .nav { position: absolute; }