/* ============================================================
   TEGEL — erdbau_0.1
   Seitenschicht über der Agentur-Engine (acss-system.css).
   BEM-Komponenten auf Tokens. Keine Hex-Werte, kein [data-theme].
   Hell und dunkel über light-dark(); umgeschaltet wird mit den
   Engine-Klassen .scheme--light / .scheme--dark auf <html>.
   Dunkel ist das Vorlagenbild (Tegel-Fastschwarz, gelbe Schrift),
   hell trägt Gelb nur Flächen mit dunkler Schrift.
   ============================================================ */

/* ──────────── Schriften, selbst gehostet (OFL) ──────────── */
@font-face {
  font-family: 'Host Grotesk';
  src: url('../fonts/host-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 800; 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: 'Host Grotesk';
  src: url('../fonts/host-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 300 800; 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: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800; 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: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 800; 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;
}

/* ──────────── Seiten-Tokens ──────────── */
:root {
  --user-font-scale: 1;

  /* Schrift: dunkel ist alles gelb wie in der Vorlage, hell dunkles Tegel. */
  --ink:      light-dark(var(--base-ultra-dark), var(--primary));
  --ink-soft: light-dark(var(--neutral-dark), var(--primary-semi-dark));
  /* Gelbe Fläche mit dunkler Schrift, in beiden Modi gleich. */
  --plate:    var(--primary);
  --on-plate: var(--base-ultra-dark);
  /* Fotoflächen bleiben in beiden Modi dunkel, Schrift darauf gelb. */
  --on-photo: var(--primary);
  --photo-veil: oklch(0.17 0.012 250 / 0.55);
  --surface:  light-dark(var(--base-light), var(--base-dark));
  --line:     light-dark(var(--neutral-light), color-mix(in oklch, var(--primary) 22%, var(--base-ultra-dark)));
  --line-strong: light-dark(var(--neutral-semi-dark), color-mix(in oklch, var(--primary) 55%, var(--base-ultra-dark)));
  --rule: 1px solid var(--line);

  --clr-text: var(--ink);
  --clr-text-muted: var(--ink-soft);
  --clr-link: var(--ink);
  --clr-link-hover: var(--ink);

  /* Display-Stufen über der Engine-Skala, alle mit rem-Anteil für das Barrieretool. */
  --d-hero: calc(clamp(2.5rem, 1rem + 4.4vw, 6.25rem) * var(--user-font-scale));
  --d-xl:   calc(clamp(2.75rem, 1rem + 5.4vw, 7.5rem) * var(--user-font-scale));
  --d-l:    calc(clamp(1.75rem, 1rem + 2.3vw, 3.4rem) * var(--user-font-scale));
  --d-m:    calc(clamp(1.5rem, 1rem + 1.5vw, 2.6rem) * var(--user-font-scale));
  --d-s:    calc(clamp(1.2rem, 1rem + 0.7vw, 1.7rem) * var(--user-font-scale));
  --t-body: calc(var(--text-m) * var(--user-font-scale));
  --t-small: calc(var(--text-s) * var(--user-font-scale));
  --t-mono: calc(clamp(0.68rem, 0.64rem + 0.15vw, 0.78rem) * var(--user-font-scale));

  --shell-pad: clamp(1rem, 0.4rem + 2.2vw, 2.75rem);
  --section: clamp(5rem, 3rem + 7vw, 10rem);
  --ease-hop: cubic-bezier(0.9, 0, 0.1, 1);
  --a11y-size: 3.3rem;
}

html { scroll-padding-top: 6rem; background: var(--clr-bg); }

body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  background: var(--clr-bg);
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
/* Das schräge Absperrband ragt über den Rand; clip statt hidden, damit sticky bleibt. */
main, .site-foot { overflow-x: clip; }

h1, h2, h3, h4 { font-weight: 450; line-height: 1.04; letter-spacing: -0.035em; margin: 0; color: inherit; }
p { margin: 0; }
p:is(.hero__mono, .hero__links, .sheet__head, .site-foot__demo) { max-inline-size: none; }
img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
a, a:hover { color: inherit; }
.prose a, .acc__body a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ──────────── Bausteine ──────────── */
.shell {
  inline-size: 100%;
  max-inline-size: 120rem;
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.section { padding-block: var(--section); }

.label {
  font-family: var(--ff-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0;
}

.skip-link {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transform: translateY(-120%);
  z-index: 3000;
  padding: var(--space-s) var(--space-m);
  background: var(--plate); color: var(--on-plate);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Zeilenreveal: Ausgangszustand SICHTBAR, ohne JS bleibt der Text lesbar. */
.reveal .line { padding-block-end: 0.1em; margin-block-end: -0.1em; }
.indent { display: inline-block; inline-size: clamp(2rem, 8vw, 9rem); }

/* Abschnittskopf wie in der Vorlage: ↳ Titel */
.sec-head {
  display: flex; align-items: center; gap: 0.6em;
  font-size: var(--d-s); letter-spacing: -0.02em; line-height: 1.2;
  margin-block-end: clamp(2rem, 1rem + 3vw, 4rem);
}
.sec-head svg { inline-size: 1.15em; block-size: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Unterstrichener Textlink, die Linie zieht sich beim Hover neu (Vorlage „Btn"). */
.ulink {
  display: inline-block;
  text-decoration: none;
  padding-block-end: 0.15em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.ulink:hover { animation: ulink 0.7s var(--ease-out); }
@keyframes ulink {
  0%   { background-size: 100% 1.5px; background-position: 100% 100%; }
  45%  { background-size: 0% 1.5px;   background-position: 100% 100%; }
  46%  { background-size: 0% 1.5px;   background-position: 0 100%; }
  100% { background-size: 100% 1.5px; background-position: 0 100%; }
}
.ulink--strong { font-weight: 600; }

/* Knöpfe: rechteckig wie ein Schild. Gelb hat im hellen Modus einen dunklen Rand. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-block-size: 3.25rem;
  padding: 0.9em 1.5em;
  border: 0; border-radius: 0.25rem;
  font: inherit; font-weight: 550; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}
.btn--plate {
  background: var(--plate); color: var(--on-plate);
  box-shadow: inset 0 0 0 2px light-dark(var(--base-ultra-dark), transparent);
}
.btn--plate:hover { background: var(--primary-hover); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line:hover { background: var(--ink); color: var(--clr-bg); }

/* Liste mit Pfeilen (Merkmale der Karten) */
.arrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.arrows li { position: relative; padding-inline-start: 1.6em; }
.arrows li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.32em;
  inline-size: 1em; block-size: 1em; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-xl);
  align-items: start;
}
.split > .sec-head { margin: 0; }
.split__lede { font-size: var(--d-s); line-height: 1.3; letter-spacing: -0.015em; margin-block-end: 2.5rem; max-inline-size: 36ch; }

/* ──────────── Kopfleiste ──────────── */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 0.6rem + 1.4vw, 2.2rem) var(--shell-pad);
  color: var(--ink);
  --cut: var(--clr-bg);
  transition: background-color 0.4s, color 0.4s, padding 0.4s;
}
.topbar.is-scrolled {
  background: color-mix(in oklch, var(--clr-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  padding-block: 0.9rem;
}
/* Über dem dunklen Foto oben auf Start und Referenzen: gelb in beiden Modi. */
[data-hero='photo'] .topbar:not(.is-scrolled) { color: var(--on-photo); --cut: var(--base-ultra-dark); }
body.menu-open .topbar { color: var(--on-plate); --cut: var(--plate); background: transparent; backdrop-filter: none; }

.mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 650; letter-spacing: 0.04em; font-size: calc(1.05rem * var(--user-font-scale)); }
.mark__icon { inline-size: 1.9rem; block-size: 1.9rem; flex: none; }
.mark__icon rect { fill: currentColor; }
.mark__icon path { stroke: var(--cut, var(--clr-bg)); stroke-width: 3; }

.topbar__end { display: flex; align-items: center; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.topbar__call {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ff-mono); font-size: var(--t-mono); text-decoration: none;
}
.topbar__call svg { inline-size: 1.1rem; block-size: 1.1rem; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-block-size: 2.75rem;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; font-family: var(--ff-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.02em;
}
.menu-toggle__mask { display: block; overflow: hidden; }
.menu-toggle__text { display: block; }
/* Zwei Linien, die beim Öffnen zum X werden: das Schließen ist sichtbar. */
.menu-toggle__icon {
  position: relative; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 0.4s, color 0.4s;
}
.menu-toggle__icon span {
  position: absolute; inline-size: 1.1rem; block-size: 1.5px; background: currentColor;
  transition: transform 0.6s var(--ease-hop);
}
.menu-toggle__icon span:first-child { transform: translateY(-3.5px); }
.menu-toggle__icon span:last-child  { transform: translateY(3.5px); }
.menu-toggle[aria-expanded='true'] .menu-toggle__icon span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__icon span:last-child  { transform: rotate(-45deg); }
.menu-toggle:hover .menu-toggle__icon { background: currentColor; }
.menu-toggle:hover .menu-toggle__icon span { background: var(--cut, var(--clr-bg)); }


/* ──────────── Menü: wischt von unten auf (Vorlage) ────────────
   Fläche 1,25 s mit der hop-Kurve, die Seite fährt 250 px mit nach oben,
   danach steigen die Zeilen gestaffelt aus ihrer Maske. Beim Schließen
   wischt die Fläche nach oben weg, Inhalt und Seite fahren gleichzeitig. */
.menu {
  position: fixed; inset: 0; z-index: 900;
  background: var(--plate); color: var(--on-plate);
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  visibility: hidden;
  overflow: hidden;
}
.menu[data-open='true'] { visibility: visible; }
.menu :focus-visible { outline-color: var(--on-plate); }
.menu__body { position: relative; block-size: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.menu__grid {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl);
  align-items: end;
  padding-block: 7rem 2.5rem;
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__item::after {
  content: ''; position: absolute; inset: auto 0 0; block-size: 1px; background: currentColor; opacity: 0.35;
  transform: scaleX(var(--rule, 1)); transform-origin: left;
}
.menu__link {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline;
  padding-block: 0.15em 0.05em;
  font-size: calc(clamp(2.1rem, 1rem + 3.6vw, 5rem) * var(--user-font-scale));
  letter-spacing: -0.04em; line-height: 1.04; text-decoration: none;
}
.menu__num { font-family: var(--ff-mono); font-size: var(--t-mono); letter-spacing: 0.02em; align-self: center; }
.menu__mask { display: block; overflow: hidden; padding-block-end: 0.06em; }
.menu__line { display: block; transition: transform 0.6s var(--ease-out); }
.menu__mask .menu__line { transform-origin: left; }
.menu__link::before {
  content: ''; position: absolute; inset: 0 calc(-1 * var(--shell-pad)); z-index: -1;
  background: var(--on-plate); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease-out);
}
.menu__link:hover, .menu__link:focus-visible { color: var(--plate); }
.menu__link:hover::before, .menu__link:focus-visible::before { transform: scaleY(1); }
.menu__link:hover .menu__mask .menu__line { transform: translateX(0.4em); }
.menu__link[aria-current='page'] .menu__num::after { content: ' ●'; }
.menu__side { display: grid; gap: 2.5rem; align-content: end; }
.menu__actions { display: grid; gap: 0.75rem; }
.menu__act {
  display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem;
  box-shadow: inset 0 0 0 1.5px currentColor; text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.menu__act-big { font-size: var(--d-s); letter-spacing: -0.02em; line-height: 1.1; }
.menu__act--dark { background: var(--on-plate); color: var(--plate); }
.menu__act:hover { background: var(--on-plate); color: var(--plate); }
.menu__act--dark:hover { background: transparent; color: var(--on-plate); }
.menu__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--space-l); }
.menu__sub p { overflow: hidden; }
.menu__sub .label { margin-block-end: 0.4rem; }

/* ──────────── Absperrband (Ticker) ────────────
   Läuft endlos; Tempo und Richtung folgen dem Scrollen. Ohne JS und bei
   reduzierter Bewegung steht es still. */
.ticker {
  position: relative; overflow: hidden; white-space: nowrap;
  background: var(--plate); color: var(--on-plate);
  border-block: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--on-plate) 0 10px, var(--plate) 10px 20px) 6;
  font-size: var(--d-m); letter-spacing: -0.03em; line-height: 1;
  padding-block: 0.9rem;
}
.ticker__track { display: inline-flex; will-change: transform; }
.ticker__track span { display: inline-flex; align-items: center; gap: 1.25rem; padding-inline-end: 1.25rem; }
.ticker__track span::after { content: ''; inline-size: 0.55em; block-size: 0.55em; background: currentColor; transform: rotate(45deg); }
.ticker--tape { transform: rotate(-1.5deg) scale(1.03); margin-block: clamp(-1rem, -1vw, -0.5rem); z-index: 2; }
.ticker--menu { flex: none; font-size: var(--d-s); background: var(--on-plate); color: var(--plate); border-image: repeating-linear-gradient(-45deg, var(--plate) 0 10px, var(--on-plate) 10px 20px) 6; }
.site-foot > .ticker { margin-block: calc(-1 * clamp(3rem, 2rem + 3vw, 5rem)) clamp(3rem, 2rem + 3vw, 5rem); }

/* ──────────── Bodenprofil (Was wir machen) ────────────
   Feste Tegel-Töne in beiden Modi, wie die gelben Flächen. Oben hell, unten
   tief; die oberen drei mit dunkler Schrift, die unteren mit Gelb. */
.profile__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; margin-block-end: clamp(2rem, 1rem + 3vw, 4rem); }
.profile__head .sec-head { margin: 0; }
.profile__lede { font-size: var(--d-s); line-height: 1.25; letter-spacing: -0.015em; max-inline-size: 30ch; }
.profile__list { list-style: none; margin: 0; padding: 0; }
.stratum { --s-bg: oklch(0.88 0.010 250); --s-ink: var(--base-ultra-dark); position: relative; background: var(--s-bg); color: var(--s-ink); transform-origin: left; }
.stratum--1 { --s-bg: oklch(0.90 0.010 250); --s-pad: 1.6rem; }
.stratum--2 { --s-bg: oklch(0.80 0.012 250); --s-pad: 2.4rem; }
.stratum--3 { --s-bg: oklch(0.70 0.014 250); --s-pad: 1.9rem; }
.stratum--4 { --s-bg: oklch(0.34 0.014 250); --s-ink: var(--primary); --s-pad: 3rem; }
.stratum--5 { --s-bg: oklch(0.24 0.012 250); --s-ink: var(--primary); --s-pad: 3.6rem; }
.stratum :focus-visible { outline-color: var(--s-ink); outline-offset: -4px; }
.stratum__link {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 6rem 7rem minmax(0, 1.3fr) minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--space-m);
  padding: var(--s-pad) clamp(1rem, 0.5rem + 1.5vw, 2rem);
  text-decoration: none;
}
.stratum__depth { opacity: 0.8; }
.stratum__name { font-size: var(--d-m); letter-spacing: -0.035em; line-height: 1.05; transition: transform 0.6s var(--ease-out); }
.stratum__note { transition: opacity 0.4s; }
.stratum__arrow { inline-size: 2rem; block-size: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.6s var(--ease-out); }
/* Foto schiebt sich beim Hover von rechts in die Schicht. */
.stratum__img {
  position: absolute; inset: 0 0 0 auto; inline-size: 32%; z-index: -1;
  clip-path: inset(0 0 0 100%); transition: clip-path 0.8s var(--ease-hop);
}
.stratum__img::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, var(--s-bg) 0%, color-mix(in oklch, var(--s-bg) 78%, transparent) 45%, color-mix(in oklch, var(--s-bg) 55%, transparent) 100%); }
:is(.stratum--4, .stratum--5) .stratum__img::after { background: linear-gradient(90deg, var(--s-bg) 0%, color-mix(in oklch, var(--s-bg) 86%, transparent) 45%, color-mix(in oklch, var(--s-bg) 74%, transparent) 100%); }
.stratum__img img { transform: scale(1.25); transition: transform 1.1s var(--ease-hop); }
.stratum__link:hover .stratum__img, .stratum__link:focus-visible .stratum__img { clip-path: inset(0 0 0 0); }
.stratum__link:hover .stratum__img img { transform: scale(1); }
.stratum__link:hover .stratum__name { transform: translateX(1rem); }
.stratum__link:hover .stratum__arrow { transform: rotate(-45deg); }

/* ──────────── Dock: Barrieretool, Anrufen, Nach oben ──────────── */
.dock {
  position: fixed; z-index: 1100; inset-block-end: 2rem; inset-inline-end: var(--shell-pad);
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.75rem;
}
.is-mockup .dock { display: none; }
.dock__call { display: none; }
.a11y { position: relative; }
.to-top {
  display: grid; place-items: center;
  inline-size: var(--a11y-size); block-size: var(--a11y-size); border-radius: 50%;
  background: var(--clr-bg); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px currentColor, var(--shadow-md);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, opacity 0.4s, transform 0.5s var(--ease-out), visibility 0.4s;
}
.to-top:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(1rem); }
.to-top:hover { background: var(--ink); color: var(--clr-bg); }
.to-top svg { inline-size: 1.3rem; block-size: 1.3rem; }
body.menu-open .dock { visibility: hidden; }

/* ──────────── Knöpfe: Füllung wischt beim Hover von unten ──────────── */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease-out); }
.btn--plate::before { background: var(--base-ultra-dark); }
.btn--plate:hover { background: var(--plate); color: var(--primary); }
.btn--plate:hover::before { transform: scaleY(1); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { background: transparent; color: var(--clr-bg); }
.btn--line:hover::before { transform: scaleY(1); }

/* Wortfüllung des großen Satzes: Wörter starten gedämpft (nur mit JS, siehe main.js). */
.statement__text .w { transition: none; }

.page { position: relative; }

/* ──────────── Seitenwechsel ────────────
   Wie in der Vorlage öffnet sich die neue Seite als Rechteck aus einer Linie
   im unteren Drittel. Native View Transitions zwischen Dokumenten. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.dock { view-transition-name: dock; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: 1.4s var(--ease-hop) both vt-open; }
@keyframes vt-open {
  from { clip-path: inset(75% 25% 25% 25%); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ──────────── Preloader ──────────── */
.loader {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--base-ultra-dark); color: var(--primary);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.loader[hidden] { display: none; }
.loader__mark { inline-size: clamp(4rem, 3rem + 4vw, 7rem); block-size: auto; }
.loader__mark rect { fill: currentColor; }
.loader__mark path { stroke: var(--base-ultra-dark); stroke-width: 3; }
.loader__bar { position: absolute; inset: auto 0 0; block-size: 4px; background: currentColor; transform: scaleX(0); transform-origin: left; }
.loader__skip {
  position: absolute; inset-block-end: 2rem; inset-inline-end: var(--shell-pad);
  padding: 0.7em 1.2em; border: 0; border-radius: 0.25rem;
  background: transparent; box-shadow: inset 0 0 0 1px currentColor;
  color: inherit; font-family: var(--ff-mono); font-size: var(--t-mono); text-transform: uppercase; cursor: pointer;
}

/* ──────────── Hero (Startseite) ──────────── */
.hero {
  position: relative; block-size: 100svh; min-block-size: 40rem;
  color: var(--on-photo); overflow: hidden;
  background: var(--base-ultra-dark);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg picture { display: block; block-size: 100%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, oklch(0.17 0.012 250 / 0.9) 0%, oklch(0.17 0.012 250 / 0.35) 45%, oklch(0.17 0.012 250 / 0.5) 100%),
    radial-gradient(ellipse 70% 60% at 85% 35%, oklch(0.17 0.012 250 / 0.5), transparent 70%);
}
.hero__grid {
  position: relative; block-size: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto;
  column-gap: var(--space-m);
  padding-block: 9rem clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
}
.hero__title {
  grid-column: 1 / span 7; grid-row: 2; align-self: end;
  font-size: var(--d-hero); font-weight: 450; letter-spacing: -0.045em; line-height: 1.02;
  text-wrap: balance;
}
.hero__aside {
  grid-column: 9 / -1; grid-row: 1; align-self: center;
  display: grid; gap: 2rem; max-inline-size: 26rem;
  font-size: var(--d-s); line-height: 1.25; letter-spacing: -0.015em;
}
.hero__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--t-body); letter-spacing: 0; }
.hero__mono {
  grid-column: 1 / -1; grid-row: 3; margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ──────────── Gestapelte Karten (Vorlage „First Principles") ──────────── */
.stack__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-l); align-items: start; }
.stack__grid > :nth-child(even) { margin-block-start: clamp(4rem, 2rem + 6vw, 10rem); }
.pcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  min-block-size: clamp(32rem, 24rem + 22vw, 50rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 3rem);
  scroll-margin-block-start: 7rem;
}
.pcard--plate { background: var(--plate); color: var(--on-plate); }
.pcard--plate :focus-visible { outline-color: var(--on-plate); }
.pcard--photo { color: var(--on-photo); background: var(--base-ultra-dark); }
.pcard--photo :focus-visible { outline-color: var(--on-photo); }
.pcard__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pcard__bg::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(oklch(0.17 0.012 250 / 0.84), oklch(0.17 0.012 250 / 0.72) 50%, oklch(0.17 0.012 250 / 0.88)); }
.pcard__top { display: grid; gap: 2.5rem; }
.pcard__symbol { inline-size: clamp(2.6rem, 2rem + 1.4vw, 3.6rem); block-size: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: left top; }
.pcard__intro { display: grid; gap: 1.25rem; }
.pcard__title { font-size: var(--d-m); letter-spacing: -0.035em; }
.pcard__desc { font-size: var(--d-s); line-height: 1.28; letter-spacing: -0.015em; max-inline-size: 30ch; }
.pcard__features { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem; }
.pcard__flabel { font-size: var(--d-s); letter-spacing: -0.015em; line-height: 1.2; }

/* ──────────── Großer Satz ──────────── */
.statement__text {
  max-inline-size: 58rem; margin-inline-start: auto;
  font-size: var(--d-l); line-height: 1.12; letter-spacing: -0.035em;
}

/* ──────────── Kacheln (Kennzahlen) ──────────── */
.figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-block-size: clamp(18rem, 12rem + 16vw, 32rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 3rem);
  list-style: none;
}
.tile--wide { grid-column: 1 / -1; min-block-size: clamp(16rem, 10rem + 12vw, 26rem); }
.tile--photo { color: var(--on-photo); background: var(--base-ultra-dark); }
.tile--photo img { position: absolute; inset: 0; z-index: -2; }
.tile--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(0.17 0.012 250 / 0.85), oklch(0.17 0.012 250 / 0.35)); }
.tile--plate { background: var(--plate); color: var(--on-plate); }
.tile--line { box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile__label { font-size: var(--d-s); line-height: 1.2; letter-spacing: -0.015em; max-inline-size: 22ch; }
.tile__num { font-size: calc(clamp(3.5rem, 1.5rem + 6.5vw, 9rem) * var(--user-font-scale)); line-height: 0.9; letter-spacing: -0.06em; font-weight: 400; font-variant-numeric: tabular-nums; }
.figures__note { margin-block-start: 1.25rem; color: var(--ink-soft); }

/* ──────────── Referenz-Teaser ──────────── */
.teasers__list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.teaser__link { display: grid; gap: 0.8rem; text-decoration: none; }
.teaser__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.teaser__img img { transition: transform 1.2s var(--ease-out); }
.teaser__link:hover .teaser__img img { transform: scale(1.06); }
.teaser__link .label { color: var(--ink-soft); margin-block-start: 0.4rem; }
.teaser__title { font-size: var(--d-s); letter-spacing: -0.02em; line-height: 1.2; }
.teaser__link:hover .teaser__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }

/* ──────────── Abschluss ──────────── */
.closer { display: grid; gap: 2.5rem; justify-items: start; }
.closer__title { font-size: var(--d-xl); letter-spacing: -0.05em; line-height: 0.98; max-inline-size: 14ch; }
.closer__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.closer__note { color: var(--ink-soft); }

/* ──────────── Seitenkopf (Unterseiten) ──────────── */
.phead { padding-block-start: clamp(9rem, 6rem + 10vw, 16rem); }
.phead__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl);
  align-items: end; padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.phead__title { font-size: var(--d-xl); letter-spacing: -0.055em; line-height: 0.96; }
.phead__text { font-size: var(--d-s); line-height: 1.28; letter-spacing: -0.015em; max-inline-size: 34ch; }
.phead__img { block-size: clamp(22rem, 14rem + 30vw, 52rem); overflow: hidden; background: var(--base-ultra-dark); }

/* Parallax: das Bild ist größer als sein Rahmen und gleitet beim Scrollen. */
html.js .parallax img { block-size: 120%; }

/* ──────────── Kreislauf: Zusagen ──────────── */
.proof__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; margin-block-end: clamp(3rem, 2rem + 4vw, 6rem); }
.proof__title { font-size: var(--d-l); letter-spacing: -0.035em; line-height: 1.1; max-inline-size: 18ch; }
.proof__img { margin: 0; aspect-ratio: 3 / 4; max-inline-size: 24rem; justify-self: end; inline-size: 100%; overflow: hidden; }
.proof__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.proof__cols li { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; min-block-size: 16rem; padding-inline-start: 1.5rem; border-inline-start: var(--rule); }
.proof__num { font-size: var(--d-l); letter-spacing: -0.04em; line-height: 1; }

/* ──────────── Kreislauf: gepinnter Slider ────────────
   Ohne JS: vier Bilder mit Text untereinander. Mit JS: eine stehende Bühne,
   die Bilder wechseln mit dem Scrollen. */
.slider { color: var(--on-photo); background: var(--base-ultra-dark); }
.slider__list { list-style: none; margin: 0; padding: 0; }
.slider__slide { position: relative; isolation: isolate; min-block-size: 80svh; display: grid; align-items: center; overflow: hidden; }
.slider__slide img { position: absolute; inset: 0; z-index: -2; }
.slider__slide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(0.17 0.012 250 / 0.88) 0%, oklch(0.17 0.012 250 / 0.6) 55%, oklch(0.17 0.012 250 / 0.35) 100%); }
.slider__text {
  inline-size: min(100%, 52rem); padding-inline: var(--shell-pad); margin-inline: max(0px, calc((100% - 120rem) / 2));
  font-size: var(--d-l); line-height: 1.12; letter-spacing: -0.035em;
}
.slider__text .label { display: block; margin-block-end: 1.5rem; letter-spacing: 0.02em; line-height: 1.5; }
.slider__ind { display: none; }
html.js .slider { block-size: calc(4 * 90svh); }
html.js .slider__sticky { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; }
html.js .slider__list { position: absolute; inset: 0; }
html.js .slider__slide { position: absolute; inset: 0; min-block-size: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
html.js .slider__slide.is-active { opacity: 1; visibility: visible; }
html.js .slider__slide img { transition: transform 1.2s var(--ease-out); transform: scale(1.08); }
html.js .slider__slide.is-active img { transform: scale(1); }
html.js .slider__ind {
  display: flex; gap: 1rem; align-items: stretch;
  position: absolute; inset-inline-end: var(--shell-pad); inset-block-start: 50%; translate: 0 -50%;
}
.slider__idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; font-family: var(--ff-mono); font-size: var(--t-mono); }
.slider__idx li { opacity: 0.45; transition: opacity 0.3s; position: relative; }
.slider__idx li.is-active { opacity: 1; }
.slider__idx li.is-active::before { content: ''; position: absolute; inset-inline-end: calc(100% + 0.6rem); inset-block-start: 50%; inline-size: 1rem; block-size: 1px; background: currentColor; }
.slider__bar { inline-size: 2px; background: color-mix(in oklch, var(--primary) 30%, transparent); }
.slider__bar span { display: block; block-size: 100%; background: currentColor; transform: scaleY(0); transform-origin: top; }

/* ──────────── Kreislauf: Arbeitszeiten ──────────── */
.hours__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.hours__lede { font-size: var(--d-s); line-height: 1.28; letter-spacing: -0.015em; max-inline-size: 34ch; margin-block-end: 2.5rem; }
.hours__list { margin: 0; display: grid; border-block-start: var(--rule); }
.hours__list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding-block: 1rem; border-block-end: var(--rule); }
.hours__list dt { color: var(--ink-soft); padding-block-start: 0.25em; }
.hours__list dd { margin: 0; }
.clock { margin: 0; justify-self: center; display: grid; gap: 1rem; justify-items: center; inline-size: min(100%, 28rem); padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--plate); color: var(--on-plate); }
.clock svg { inline-size: 100%; block-size: auto; overflow: visible; }
.clock__face { fill: none; stroke: currentColor; stroke-width: 1.5; }
.clock__arc { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: butt; opacity: 0.85; }
.clock__ticks line { stroke: currentColor; stroke-width: 1.5; }
.clock__num { font-family: var(--ff-mono); font-size: 13px; fill: currentColor; text-anchor: middle; dominant-baseline: middle; }
.clock__hand { stroke: currentColor; stroke-linecap: round; }
.clock__hand--h { stroke-width: 6; }
.clock__hand--m { stroke-width: 3; }
.clock__pin { fill: currentColor; }

/* ──────────── Tabellen (Fuhrpark, Referenzliste) ──────────── */
.fleet__table, .reflist__table { inline-size: 100%; border-collapse: collapse; }
:is(.fleet__table, .reflist__table) :is(th, td) { text-align: start; padding: 1rem 1rem 1rem 0; border-block-end: var(--rule); vertical-align: baseline; font-weight: 400; }
:is(.fleet__table, .reflist__table) thead th { font-family: var(--ff-mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--ink-soft); border-block-end: 1px solid var(--line-strong); }
:is(.fleet__table, .reflist__table) tbody th { font-size: calc(var(--text-l) * var(--user-font-scale)); letter-spacing: -0.015em; }
.fleet__table td:nth-child(2), .reflist__table td { font-family: var(--ff-mono); font-size: var(--t-mono); white-space: nowrap; }
.fleet__table td:last-child { color: var(--ink-soft); }
.reflist__note { margin-block-start: 1.25rem; color: var(--ink-soft); }

/* ──────────── Akkordeon (FAQ, Stellen) ──────────── */
.acc { border-block-end: var(--rule); }
.acc__item { border-block-start: var(--rule); }
.acc__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center;
  padding-block: clamp(1.2rem, 0.9rem + 1vw, 2rem);
  cursor: pointer; list-style: none;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__q { font-size: var(--d-m); letter-spacing: -0.03em; line-height: 1.12; }
.acc__meta { display: block; margin-block-start: 0.6rem; letter-spacing: 0.02em; color: var(--ink-soft); }
.acc__icon { position: relative; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 0.8rem; block-size: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate 0.4s var(--ease-out); }
.acc__icon::after { rotate: 90deg; }
.acc__item[open] .acc__icon::after { rotate: 0deg; }
.acc__body { padding-block-end: 2rem; max-inline-size: 62ch; color: var(--ink-soft); }
.acc__body p + p { margin-block-start: 1em; }
.job { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; max-inline-size: none; color: var(--ink); }
.job h3 { margin-block-end: 0.8rem; color: var(--ink-soft); }
.job__pay { grid-column: 1 / -1; display: grid; gap: 0.3rem; padding-block-start: 1rem; border-block-start: var(--rule); }
.job__pay .label { color: var(--ink-soft); }

/* ──────────── Raster „Für wen" ──────────── */
.serves__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-l); }
.serves__item { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-block-size: clamp(14rem, 10rem + 10vw, 24rem); padding-inline-start: 1.5rem; border-inline-start: var(--rule); }
.serves__item h3 { font-size: var(--d-s); letter-spacing: -0.02em; line-height: 1.15; }
.serves__item p { font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.35; letter-spacing: -0.01em; }

/* ──────────── Referenzen: Karussell ────────────
   Ohne JS: alle Referenzen untereinander, jede mit Bild. */
.carousel { position: relative; background: var(--base-ultra-dark); color: var(--on-photo); }
.carousel :focus-visible { outline-color: var(--on-photo); }
.carousel__slide { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: 80svh; padding: 8rem var(--shell-pad) 3rem; overflow: hidden; scroll-margin-block-start: 0; }
.carousel__slide img { position: absolute; inset: 0; z-index: -2; }
.carousel__slide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.17 0.012 250 / 0.92) 0%, oklch(0.17 0.012 250 / 0.45) 50%, oklch(0.17 0.012 250 / 0.6) 100%); }
.carousel__info { display: grid; gap: 0.9rem; justify-items: start; max-inline-size: 34rem; }
.carousel__title { font-size: var(--d-m); letter-spacing: -0.03em; line-height: 1.08; }
.carousel__years, .carousel__bar { display: none; }
html.js .carousel { block-size: 100svh; min-block-size: 40rem; overflow: hidden; }
html.js .carousel__slides { position: absolute; inset: 0; }
html.js .carousel__slide { position: absolute; inset: 0; min-block-size: 0; padding-block-end: 9.5rem; visibility: hidden; clip-path: inset(0 0 0 100%); }
html.js .carousel__slide.is-active { visibility: visible; clip-path: inset(0 0 0 0); z-index: 1; }
html.js .carousel__slide.is-leaving { visibility: visible; }
html.js .carousel__years {
  display: flex; justify-content: space-between; gap: 1rem;
  position: absolute; z-index: 3; inset-inline: var(--shell-pad); inset-block-start: 42%;
}
.carousel__year {
  border: 0; background: none; padding: 0.4rem 0; cursor: pointer;
  color: var(--primary-semi-dark); font: inherit;
  font-size: var(--d-m); letter-spacing: -0.04em; line-height: 1;
  transition: color 0.3s;
}
.carousel__year sup { font-family: var(--ff-mono); font-size: var(--t-mono); letter-spacing: 0.02em; text-transform: uppercase; vertical-align: top; margin-inline-start: 0.35em; }
.carousel__year { position: relative; }
.carousel__year::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: -0.1em; inline-size: 2.2ch; block-size: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.carousel__year[aria-pressed='true'] { color: var(--on-photo); }
.carousel__year[aria-pressed='true']::after { transform: scaleX(1); }
.carousel__year:hover { color: var(--on-photo); }
html.js .carousel__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-m);
  position: absolute; z-index: 3; inset-inline: var(--shell-pad) calc(var(--shell-pad) + var(--a11y-size) + 1.25rem); inset-block-end: clamp(1.25rem, 1rem + 1vw, 2.5rem);
}
.carousel__progress { block-size: 2px; background: color-mix(in oklch, var(--primary) 30%, transparent); max-inline-size: 22rem; }
.carousel__progress span { display: block; block-size: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
.carousel__ctrl { display: flex; gap: 0.5rem; }
.carousel__btn {
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1px currentColor;
}
.carousel__btn:hover { background: var(--on-photo); color: var(--base-ultra-dark); }
.carousel__btn svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn .i-play { display: none; }
.carousel__btn[aria-pressed='true'] .i-play { display: block; fill: currentColor; }
.carousel__btn[aria-pressed='true'] .i-pause { display: none; }
.carousel__thumb { inline-size: clamp(8rem, 6rem + 6vw, 13rem); aspect-ratio: 16 / 9; overflow: hidden; }

/* ──────────── Eine Referenz ──────────── */
.rmeta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.rmeta__main { display: grid; gap: 1.25rem; }
.rmeta__title { font-size: var(--d-xl); letter-spacing: -0.055em; line-height: 0.96; }
.rmeta__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.rmeta__list dt { color: var(--ink-soft); margin-block-end: 0.3rem; }
.rmeta__list dd { margin: 0; font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.25; letter-spacing: -0.01em; }
.prose { max-inline-size: 62ch; display: grid; gap: 1.2em; }
.prose__lead { font-size: var(--d-s); line-height: 1.28; letter-spacing: -0.015em; }

/* Bautagebuch (Vorlage „Minimap"): Ohne JS ein Raster aller Tage. Mit JS
   steht die Bühne, Bild und Text wechseln mit dem Scrollen, rechts die Daumen. */
.diary { padding-block-start: var(--section); }
.diary__list { list-style: none; margin: 0 auto; padding: 0 var(--shell-pad); max-inline-size: 120rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
.diary__entry figure { margin: 0; display: grid; gap: 1rem; }
.diary__entry img { aspect-ratio: 4 / 3; }
.diary__entry figcaption { display: grid; gap: 0.4rem; max-inline-size: 34ch; font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.3; }
.diary__entry figcaption .label { color: var(--ink-soft); }
.diary__thumbs { display: none; }
html.js .diary { block-size: auto; }
html.js .diary__body { block-size: calc(8 * 60svh); }
html.js .diary__sticky { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; }
html.js .diary__list { position: absolute; inset: 0; display: block; max-inline-size: none; padding: 0; }
html.js .diary__entry { position: absolute; inset: 0; visibility: hidden; }
html.js .diary__entry.is-active { visibility: visible; }
html.js .diary__entry figure {
  block-size: 100%; inline-size: 100%; max-inline-size: 120rem; margin-inline: auto; padding: 7rem var(--shell-pad) 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: var(--space-l);
}
html.js .diary__entry img { grid-column: 2; grid-row: 1; block-size: min(70svh, 44rem); aspect-ratio: auto; object-fit: contain; }
html.js .diary__entry figcaption { grid-column: 1; grid-row: 1; }
html.js .diary__entry:not(.is-active) img { opacity: 0; }
html.js .diary__thumbs {
  display: grid; gap: 0.6rem; align-content: center;
  position: absolute; z-index: 2; inset-block: 0; inset-inline-end: max(var(--shell-pad), calc((100% - 120rem) / 2 + var(--shell-pad)));
  inline-size: 5.5rem;
}
.diary__thumb { display: block; aspect-ratio: 7 / 5; padding: 0; border: 0; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; background: none; }
.diary__thumb.is-active { opacity: 1; outline: 2px solid var(--ink); outline-offset: 3px; }

.result__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
.result__grid .tile { min-block-size: clamp(14rem, 10rem + 8vw, 22rem); }
.result__grid .tile__num { font-size: calc(clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem) * var(--user-font-scale)); }

/* Nächste Referenz / Jobs-Hinweis: Vollbild-Link */
.next { color: var(--on-photo); }
.next :focus-visible { outline-color: var(--on-photo); outline-offset: -6px; }
.next__link { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: clamp(24rem, 16rem + 25vw, 44rem); overflow: hidden; text-decoration: none; background: var(--base-ultra-dark); }
.next__link img { position: absolute; inset: 0; z-index: -2; transition: transform 1.4s var(--ease-out); }
.next__link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.17 0.012 250 / 0.9), oklch(0.17 0.012 250 / 0.35)); }
.next__link:hover img { transform: scale(1.05); }
.next__inner { display: grid; gap: 1rem; padding-block: 3rem; }
.next__title { font-size: var(--d-l); letter-spacing: -0.04em; line-height: 1.05; max-inline-size: 20ch; }
.next__link:hover .next__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* ──────────── Jobs ──────────── */
.jhead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
.jhead__copy { display: grid; gap: 1.75rem; justify-items: start; }
.jhead .phead__title { font-size: var(--d-l); line-height: 1.04; letter-spacing: -0.045em; max-inline-size: 16ch; }
.jhead__img { margin: 0; aspect-ratio: 1; overflow: hidden; }
.apply__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; }
.apply__copy { display: grid; gap: 1.5rem; }
.apply__title { font-size: var(--d-l); letter-spacing: -0.04em; line-height: 1.05; max-inline-size: 14ch; }
.apply__copy > p { font-size: var(--d-s); line-height: 1.28; letter-spacing: -0.015em; max-inline-size: 32ch; color: var(--ink-soft); }
.apply__img { margin: 1rem 0 0; max-inline-size: 22rem; aspect-ratio: 3 / 4; overflow: hidden; }

/* ──────────── Formulare ──────────── */
.form { display: grid; gap: 1.75rem; align-content: start; }
.form__set { border: 0; margin: 0; padding: 0; display: grid; gap: 0.9rem; min-inline-size: 0; }
.form__set legend { padding: 0; margin-block-end: 0.9rem; color: var(--ink-soft); }
.field { display: grid; gap: 0.55rem; }
.field > label { font-weight: 500; }
.field__opt, .field__hint { color: var(--ink-soft); font-weight: 400; }
.field__hint { font-size: var(--t-small); }
.field input:not([type='range']):not([type='file']), .field select, .field textarea {
  inline-size: 100%; min-block-size: 3.25rem;
  padding: 0.8em 1em;
  border: 0; border-radius: 0.25rem;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: inherit;
}
.field textarea { resize: vertical; }
.field input[type='file'] { font: inherit; color: var(--ink-soft); }
.field input[type='file']::file-selector-button { font: inherit; margin-inline-end: 1rem; padding: 0.7em 1.1em; border: 0; border-radius: 0.25rem; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { padding: 0.7em 1.1em; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 0.2s, color 0.2s; }
.chip input:checked + span { background: var(--plate); color: var(--on-plate); box-shadow: inset 0 0 0 2px light-dark(var(--base-ultra-dark), var(--plate)); font-weight: 550; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.range { display: flex; align-items: center; gap: 1.25rem; }
.range input { flex: 1; accent-color: light-dark(var(--base-ultra-dark), var(--primary)); block-size: 2rem; }
.range output { font-family: var(--ff-mono); font-size: var(--t-mono); min-inline-size: 4.5rem; text-align: end; }
.form__err { color: light-dark(var(--accent-dark), var(--accent-light)); font-weight: 500; }
.form__note { color: var(--ink-soft); font-size: var(--t-small); }
.form__done[hidden] { display: none; }
.form__done { padding: 1.5rem; background: var(--plate); color: var(--on-plate); display: grid; gap: 0.5rem; }
.form__done:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.form__done-title { font-size: var(--d-s); letter-spacing: -0.02em; }
.form > .btn { justify-self: start; }

/* ──────────── Kontakt ──────────── */
.chead { display: grid; gap: 2rem; padding-block-end: clamp(3rem, 2rem + 4vw, 6rem); }
.chead__title { font-size: var(--d-xl); letter-spacing: -0.055em; line-height: 0.96; max-inline-size: 14ch; }
.chead__mark { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--d-s); letter-spacing: -0.02em; --cut: var(--clr-bg); }
.chead__mark .mark__icon { inline-size: 2.4rem; block-size: 2.4rem; }
.cblocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); padding-block: 2.5rem; border-block-start: var(--rule); }
.cblock { display: grid; gap: 0.8rem; align-content: start; }
.cblock .label { color: var(--ink-soft); font-weight: 400; letter-spacing: 0.02em; }
.cblock p { font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.35; }
.cblock a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.inquiry__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; scroll-margin-block-start: 6rem; }
.sheet { position: sticky; inset-block-start: 6.5rem; }
.sheet__inner { background: var(--plate); color: var(--on-plate); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); display: grid; gap: 1.5rem; }
.sheet__head { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 2px solid currentColor; }
.sheet__rows { margin: 0; display: grid; }
.sheet__rows div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 0.75rem; border-block-end: 1px dashed color-mix(in oklch, var(--on-plate) 40%, transparent); }
.sheet__rows dt { padding-block-start: 0.2em; }
.sheet__rows dd { margin: 0; font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.3; letter-spacing: -0.01em; }
.sheet__machine dd { font-weight: 600; }
.sheet__foot { display: grid; gap: 0.3rem; }
.sheet__foot strong { font-size: var(--d-s); font-weight: 550; letter-spacing: -0.02em; }
.area__map { margin: 0; display: grid; gap: 1rem; }
.area__map img { aspect-ratio: 900 / 640; block-size: auto; box-shadow: 0 0 0 1px var(--line); }
.area__map figcaption { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: var(--t-small); color: var(--ink-soft); }
.area__map figcaption a { color: var(--ink); }

/* ──────────── Fuß ──────────── */
.site-foot { border-block-start: var(--rule); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.site-foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-xl); align-items: start; min-block-size: clamp(16rem, 10rem + 18vw, 30rem); }
.site-foot__mark { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; font-size: var(--d-l); letter-spacing: -0.04em; transform-origin: left center; --cut: var(--clr-bg); }
.site-foot__mark .mark__icon { inline-size: 0.9em; block-size: 0.9em; }
.site-foot__nav { font-size: var(--d-l); letter-spacing: -0.04em; line-height: 1.12; }
.site-foot__nav a { text-decoration: none; }
.site-foot__nav a:hover, .site-foot__nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.site-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; padding-block: 2rem; }
.site-foot__demo { color: var(--ink-soft); font-size: var(--t-small); max-inline-size: 82ch; margin-inline: 0; padding-block-end: 1rem; }
.site-foot__demo code { font-family: var(--ff-mono); font-size: 0.85em; }

/* ──────────── Barrieretool ──────────── */
.a11y__btn {
  inline-size: var(--a11y-size); block-size: var(--a11y-size);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--plate); color: var(--on-plate);
  box-shadow: inset 0 0 0 2px light-dark(var(--base-ultra-dark), transparent), var(--shadow-md); cursor: pointer;
}
.a11y__btn:focus-visible { outline-color: var(--ink); }
.a11y__btn svg { inline-size: 1.4rem; block-size: 1.4rem; }
.a11y__panel {
  position: absolute; inset-block-end: calc(100% + var(--space-s)); inset-inline-end: 0;
  inline-size: min(20rem, calc(100vw - 2 * var(--space-m)));
  display: grid; gap: var(--space-m);
  padding: var(--space-m);
  border-radius: 0.5rem;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-strong);
  font-size: var(--t-body);
}
.a11y__panel[hidden] { display: none; }
.a11y__title { font-family: var(--ff-mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.a11y__group { display: grid; gap: var(--space-xs); }
.a11y__lab { font-size: var(--t-small); color: var(--ink-soft); }
.a11y__seg { display: flex; gap: 0.25rem; }
.a11y__seg-btn, .a11y__toggle, .a11y__reset {
  padding: 0.55em 0.8em;
  border: 0; border-radius: 0.25rem;
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink); font: inherit; font-size: var(--t-small);
  cursor: pointer;
}
.a11y__seg-btn { flex: 1; }
.a11y__toggle { inline-size: 100%; text-align: start; }
.a11y__seg-btn[aria-pressed='true'], .a11y__toggle[aria-pressed='true'] {
  background: var(--plate); color: var(--on-plate); box-shadow: inset 0 0 0 2px light-dark(var(--base-ultra-dark), var(--plate)); font-weight: 600;
}
.a11y__reset { justify-self: start; font-size: var(--t-mono); font-family: var(--ff-mono); text-transform: uppercase; }

/* Hoher Kontrast: reines Schwarz/Weiß, im jeweiligen Farbmodus. Die Leitern
   werden auf zwei Werte gelegt; alles, was auf Tokens steht, folgt. */
:root[data-contrast='high'] {
  --bw-white: oklch(1 0 0);
  --bw-black: oklch(0 0 0);
  --primary-ultra-light: var(--bw-white); --primary-light: var(--bw-white); --primary-semi-light: var(--bw-white);
  --primary: var(--bw-white); --primary-hover: var(--bw-white); --primary-semi-dark: var(--bw-white);
  --primary-dark: var(--bw-black); --primary-ultra-dark: var(--bw-black);
  --accent-light: var(--bw-white); --accent-dark: var(--bw-black);
  --base-ultra-light: var(--bw-white); --base-light: var(--bw-white); --base-semi-light: var(--bw-white);
  --base-semi-dark: var(--bw-black); --base-dark: var(--bw-black); --base-ultra-dark: var(--bw-black);
  --neutral-light: var(--bw-black); --neutral-semi-dark: var(--bw-black); --neutral-dark: var(--bw-black);
  --surface: light-dark(var(--bw-white), var(--bw-black));
  --line: light-dark(var(--bw-black), var(--bw-white));
  --line-strong: var(--line);
  --photo-veil: oklch(0 0 0 / 0.8);
}
:root[data-contrast='high'] .hero__scrim { background: oklch(0 0 0 / 0.82); }
:root[data-contrast='high'] .pcard__bg::after,
:root[data-contrast='high'] .slider__slide::before,
:root[data-contrast='high'] .carousel__slide::before,
:root[data-contrast='high'] .next__link::before,
:root[data-contrast='high'] .tile--photo::before { background: oklch(0 0 0 / 0.82); }
:root[data-contrast='high'] :is(.pcard--plate, .tile--plate, .sheet__inner, .clock, .menu, .form__done) { box-shadow: inset 0 0 0 2px var(--bw-black); }
:root[data-contrast='high'] .carousel__year { color: var(--bw-white); }

/* ──────────── Bewegung aus ────────────
   Gilt für Systemwunsch UND für den Schalter im Barrieretool. */
:root[data-motion='reduce'] *,
:root[data-motion='reduce'] *::before,
:root[data-motion='reduce'] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ──────────── Schmale Viewports (Vorlage: 1000px) ──────────── */
@media (max-width: 62.5rem) {
  .hero__grid { grid-template-rows: 1fr auto auto auto; padding-block-start: 7rem; }
  .hero__title { grid-column: 1 / -1; grid-row: 2; }
  .hero__aside { grid-column: 1 / -1; grid-row: 3; align-self: start; margin-block-start: 2rem; font-size: calc(var(--text-l) * var(--user-font-scale)); gap: 1.25rem; }
  .hero__mono { grid-row: 4; }
  .hero__scrim { background: linear-gradient(to top, oklch(0.17 0.012 250 / 0.92) 0%, oklch(0.17 0.012 250 / 0.7) 55%, oklch(0.17 0.012 250 / 0.55) 100%); }
  .tile--photo::before { background: oklch(0.17 0.012 250 / 0.72); }
  .carousel__slide::before { background: linear-gradient(to top, oklch(0.17 0.012 250 / 0.94) 0%, oklch(0.17 0.012 250 / 0.7) 60%, oklch(0.17 0.012 250 / 0.6) 100%); }
  .stack__grid, .figures__grid, .teasers__list, .proof__cols, .split, .phead__grid, .proof__top, .hours__grid, .rmeta, .jhead, .apply__grid, .inquiry__grid, .site-foot__top { grid-template-columns: minmax(0, 1fr); }
  .stack__grid > :nth-child(even) { margin-block-start: 0; }
  .pcard { min-block-size: 0; }
  .pcard__features { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .tile--wide { grid-column: auto; }
  .proof__img { justify-self: start; max-inline-size: 16rem; }
  .proof__cols li { min-block-size: 0; gap: 1.5rem; }
  .serves__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cblocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__grid { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: space-between; gap: 2rem; padding-block: 5.5rem 1.5rem; }
  .menu__link { grid-template-columns: 2.25rem minmax(0, 1fr); font-size: calc(clamp(2rem, 1.2rem + 4.5vw, 3rem) * var(--user-font-scale)); padding-block: 0.3em 0.15em; }
  .profile__head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .stratum__link { grid-template-columns: 4.5rem minmax(0, 1fr) 1.75rem; row-gap: 0.4rem; }
  .stratum__depth { grid-column: 1; grid-row: 1; }
  .stratum__num { display: none; }
  .stratum__name { grid-column: 2; grid-row: 1; }
  .stratum__note { grid-column: 2; grid-row: 2; font-size: var(--t-small); }
  .stratum__arrow { grid-column: 3; grid-row: 1 / span 2; inline-size: 1.5rem; }
  .stratum__img { inline-size: 45%; }
  .sheet { position: static; }
  html.js .slider__ind { display: none; }
  html.js .carousel__years { inset-block-start: auto; inset-block-end: 6.5rem; justify-content: flex-start; overflow-x: auto; gap: 1.5rem; }
  .carousel__year sup { display: none; }
  html.js .carousel__slide { padding-block-end: 11rem; }
  html.js .carousel__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .carousel__thumb { display: none; }
  html.js .diary__entry figure { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; padding-block: 6rem 2rem; padding-inline-end: calc(var(--shell-pad) + 4.5rem); gap: 1rem; }
  html.js .diary__entry img { grid-column: 1; grid-row: 1; block-size: min(55svh, 30rem); }
  html.js .diary__entry figcaption { grid-column: 1; grid-row: 2; }
  html.js .diary__thumbs { inline-size: 3.5rem; gap: 0.4rem; }
  .diary__list { grid-template-columns: minmax(0, 1fr); }
  .job { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  /* Anrufen sitzt am Handy in der Leiste unten. */
  .topbar__call { display: none; }
  .menu-toggle { gap: 0.6rem; }
  .menu__meta { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  /* Leiste unten: links Barrieretool, Mitte Anrufen, rechts Nach oben. */
  .dock {
    inset: auto 0 0 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--base-ultra-dark); color: var(--primary);
    box-shadow: 0 -1px 0 color-mix(in oklch, var(--primary) 25%, transparent);
  }
  .dock__call {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-block-size: var(--a11y-size); border-radius: 0.25rem;
    background: var(--plate); color: var(--on-plate); text-decoration: none; font-weight: 600;
  }
  .dock__call svg { inline-size: 1.2rem; block-size: 1.2rem; }
  .dock .to-top { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px currentColor; }
  .dock .to-top:not(.is-shown) { transform: none; }
  .dock .a11y__btn { box-shadow: none; }
  .dock .a11y__panel { inset-inline: 0 auto; }
  .dock :focus-visible { outline-color: var(--primary); }
  body { padding-block-end: calc(var(--a11y-size) + 1.2rem + env(safe-area-inset-bottom)); }
  .serves__grid, .result__grid, .cblocks, .field-row { grid-template-columns: minmax(0, 1fr); }
  .serves__item { min-block-size: 0; }
  .menu__meta { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .fleet__table thead { display: none; }
  .fleet__table tr { display: grid; grid-template-columns: 1fr auto; padding-block: 0.9rem; border-block-end: var(--rule); }
  .fleet__table :is(th, td) { border: 0; padding: 0; }
  .fleet__table td:last-child { grid-column: 1 / -1; margin-block-start: 0.3rem; }
  .reflist__table th[scope='col']:nth-child(3), .reflist__table td:nth-child(3) { display: none; }

}

/* ──────────── Druck ──────────── */
@media print {
  .topbar, .menu, .dock, .ticker, .loader, .carousel__bar, .carousel__years, .diary__thumbs { display: none !important; }
}

/* ──────────── Ohne JS ────────────
   Das Menü braucht Skript; ohne JS trägt der Fuß die Navigation. */
html:not(.js) :is(.menu-toggle, .menu) { display: none; }