/* Accelit – gebündelt aus site/assets/css (eleventy.config.js) */

/* ── tokens.css ── */
/* Accelit – Design-Tokens (einzige Quelle für Werte)
   Welt: Konzernqualität mit Gesicht – Nacht und Graphit, helle Flächen (Licht), Akzent Türkis (Logofarbe, aus dem Relaunch-Dummy).
   Primitive (--p-*) nur hier verwenden; Blöcke nutzen ausschließlich die semantischen Tokens. */

:root {
  /* ── Primitive: Farben (BRAND.md) ── */
  --p-nacht-1000: #0E1114;
  --p-graphit-950: #16191D;
  --p-graphit-900: #1D2126;
  --p-graphit-800: #262B31;
  --p-schiefer-700: #3A3F46;
  --p-stein-500: #78818A;
  --p-stein-400: #959CA4;
  --p-nebel-300: #C3C9CE;
  --p-wand-200: #E3E6E9;
  --p-licht-100: #F1F3F4;
  --p-weiss: #FFFFFF;
  --p-tuerkis-300: #4BBCD1;  /* Hover auf Türkisflächen (dunkle Schrift 7,9:1) */
  --p-tuerkis-400: #16A6BC;  /* Logofarbe (Dummy): Fläche mit dunkler Schrift 6,1:1, auf Nacht 6,5:1 */
  --p-tuerkis-500: #06899C;  /* Fokus: ≥ 3:1 auf Hell und Dunkel */
  --p-tuerkis-600: #007080;  /* Text auf Hell: 5,8:1 zu Weiß, 5,2:1 zu Licht */
  --p-fehler: #B3261E;
  --p-erfolg: #2E6B4F;

  /* ── Semantisch: Flächen und Text ── */
  --color-bg: var(--p-licht-100);              /* Wand */
  --color-bg-alt: var(--p-wand-200);           /* Wand, zweiter Ton */
  --color-surface: var(--p-weiss);             /* Formular, Bildträger */
  --color-text: var(--p-graphit-950);
  --color-text-muted: #545B63;                 /* 6,4:1 auf Licht */
  --color-line: #C9CED3;
  --color-line-strong: var(--p-graphit-950);

  --color-night: var(--p-nacht-1000);         /* Bühne, tiefste Fläche */
  --color-panel: var(--p-graphit-950);         /* dunkle Fläche */
  --color-panel-2: var(--p-graphit-900);
  --color-panel-text: var(--p-licht-100);
  --color-panel-muted: #A9B0B7;                /* 7,9:1 auf Graphit */
  --color-panel-line: rgba(241, 243, 244, .14);
  --color-panel-raised: var(--p-graphit-800);   /* Tafelzeile vor dem „Einschalten“ */

  --color-accent: var(--p-tuerkis-400);        /* Flächen, Linien, Marken – keine Schrift auf Hell */
  --color-accent-text: var(--p-tuerkis-600);   /* Schrift in Akzentfarbe auf Hell */
  --color-accent-on-dark: var(--p-tuerkis-400); /* Akzent und Schrift auf Graphit und Nacht */
  --color-accent-strong: var(--p-tuerkis-300); /* Hover auf Türkisflächen */
  --color-accent-contrast: var(--p-graphit-950); /* Schrift auf Türkis: dunkel, nicht weiß */
  --color-accent-fill: var(--p-tuerkis-400);   /* Türkisflächen, auf denen Text steht */
  --color-field: var(--p-tuerkis-400);         /* Türkisfeld mit dunkler Schrift (6,1:1) */

  /* Illustration Flur (Platzhalter, bis das Foto da ist) */
  --color-illu-boden: var(--p-nebel-300);
  --color-illu-rahmen: var(--p-stein-400);
  --color-illu-tuer: var(--p-licht-100);
  --color-illu-tuer-accelit: var(--p-schiefer-700);
  --color-illu-rahmen-accelit: var(--p-graphit-950);
  --color-illu-licht: var(--p-tuerkis-400);
  --color-illu-schild: var(--p-stein-500);

  --color-error: var(--p-fehler);
  --color-success: var(--p-erfolg);
  --color-focus: var(--p-tuerkis-500);

  /* ── Schrift: Archivo variabel (wght 100–900, wdth 62–125) ── */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wdth-schild: 75%;     /* Raumnummern, Etagenziffern */
  --wdth-text: 100%;
  --wdth-titel: 106%;
  --wdth-weit: 125%;      /* Schilderbeschriftung, wie die Wortmarke */

  /* Fluide Stufen (390 → 1440 px) */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.3rem + 0.95vw, 2.125rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --step-5: clamp(2.25rem, 1.65rem + 2.7vw, 4rem);
  --step-6: clamp(2.75rem, 1.7rem + 4.4vw, 5.75rem);
  --step-zahl: clamp(3rem, 1.9rem + 4.8vw, 6.25rem);
  --step-7: clamp(3.1rem, 1.5rem + 6.6vw, 7.75rem);

  --lh-tight: 1.02;
  --lh-titel: 1.08;
  --lh-text: 1.6;

  /* ── Abstände ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.8rem + 3vw, 5rem);
  --space-3xl: clamp(4.5rem, 3.2rem + 5.5vw, 8rem);
  --section-space-s: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
  --section-space-m: clamp(4.5rem, 3.4rem + 4.6vw, 7.5rem);
  --section-space-l: clamp(5.5rem, 3.8rem + 7vw, 10rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --max-width: 90rem;
  --text-width: 38rem;

  /* ── Form ── */
  --radius-schild: 3px;   /* Schildertafeln haben kleine, echte Radien */
  --radius-feld: 2px;
  --border-hair: 1px;
  --border-schild: 2px;

  /* ── Bewegung ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-licht: 700ms;

  --header-h: 4.5rem;
}

/* ── base.css ── */
/* Accelit – Basis: Schrift, Reset, Typografie, Grundbausteine (Knopf, Pfeil, Formularfelder) */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-vf-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "Archivo";
  src: url("../fonts/archivo/archivo-vf-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
  -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-stretch: var(--wdth-text);
  line-height: var(--lh-text);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-titel);
  font-weight: 640;
  line-height: var(--lh-titel);
  letter-spacing: -0.018em;
  text-wrap: balance;
  hyphens: manual;
}
p, li, dd { hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }

a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--color-text); }
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-feld); }

::selection { background: var(--color-accent-on-dark); color: var(--color-text); }

/* ── Grundausstattung ── */
.container { width: min(100% - 2 * var(--gutter), var(--max-width)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-s); top: -10rem; z-index: 100;
  background: var(--color-panel); color: var(--color-panel-text); padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-schild); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-s); }

/* ── Pfeil (Leitsystem-Pfeil, Symbol im Sprite) ── */
.pfeil { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.pfeil--hoch { rotate: -90deg; }
.pfeil--runter { rotate: 90deg; }
.pfeil--links { rotate: 180deg; }

/* ── Knopf: Richtungsschild mit Pfeil ── */
.knopf {
  --knopf-bg: var(--color-accent-fill);
  --knopf-text: var(--color-accent-contrast);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 3.25rem; padding: 0.8rem 1.25rem 0.8rem 1.4rem;
  background: var(--knopf-bg); color: var(--knopf-text);
  border: var(--border-schild) solid var(--knopf-bg); border-radius: var(--radius-schild);
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 620; font-stretch: var(--wdth-titel);
  line-height: 1.15; letter-spacing: 0; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.knopf .pfeil { transition: translate var(--dur-base) var(--ease-out); }
.knopf:active { translate: 0 1px; }
.knopf--ruhig { --knopf-bg: transparent; --knopf-text: var(--color-text); border-color: var(--color-line-strong); }
.knopf--tafel { --knopf-bg: var(--color-panel); --knopf-text: var(--color-panel-text); }
.knopf--hell { --knopf-bg: var(--p-licht-100); --knopf-text: var(--color-text); }
.knopf--hell-kontur { --knopf-bg: transparent; --knopf-text: var(--color-panel-text); border-color: rgba(241, 243, 244, .45); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { --knopf-bg: var(--color-accent-strong); color: var(--color-accent-contrast); border-color: var(--color-accent-strong); }
  .knopf:hover .pfeil { translate: 0.25rem 0; }
  .knopf:hover .pfeil--runter { translate: 0 0.25rem; }
  .knopf:hover .pfeil--hoch { translate: 0 -0.25rem; }
  .knopf:hover .pfeil--links { translate: -0.25rem 0; }
  .knopf--ruhig:hover { --knopf-bg: var(--color-panel); color: var(--color-panel-text); border-color: var(--color-panel); }
  .knopf--hell-kontur:hover { --knopf-bg: var(--p-licht-100); border-color: var(--p-licht-100); color: var(--color-text); }
  .knopf--tafel:hover, .knopf--hell:hover { --knopf-bg: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-accent-contrast); }
}

/* ── Schilderbeschriftung (Versalien, weit, wie die Wortmarke) ── */
.schild-text {
  font-family: var(--font-display); font-stretch: var(--wdth-weit); font-weight: 560;
  font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3;
}

/* ── Raumnummer (schmal, kräftig, Tabellenziffern) ── */
.raumnummer {
  font-family: var(--font-display); font-stretch: var(--wdth-schild); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1;
}

/* ── Präsenz-Marke: gefüllt = vor Ort, Kontur = remote ── */
.marke { display: inline-block; width: 0.62em; height: 0.62em; flex: none; border: 2px solid var(--color-accent); background: var(--color-accent); }
.marke--remote { background: transparent; }

/* ── Formularfelder (Basis) ── */
.feld { display: grid; gap: var(--space-2xs); }
.feld__label { font-weight: 600; font-size: var(--step--1); }
.feld__label small { font-weight: 400; color: var(--color-text-muted); font-size: inherit; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  font-size: max(16px, var(--step-0)); line-height: 1.4;
  background: var(--color-surface); color: var(--color-text);
  border: var(--border-hair) solid #8E969E; border-radius: var(--radius-feld);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.3rem, calc(100% - 0.8rem) 1.3rem; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent); }
.feld [aria-invalid="true"] { border-color: var(--color-error); }
.feld__fehler { color: var(--color-error); font-size: var(--step--1); font-weight: 560; }
.feld__fehler:empty { display: none; }
.feld__hilfe { font-size: var(--step--1); color: var(--color-text-muted); }
.feld input[type="file"] { padding: 0.55rem 0.6rem; cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  margin-right: var(--space-s); padding: 0.5rem 0.9rem; border: 0; border-radius: var(--radius-feld);
  background: var(--color-panel); color: var(--color-panel-text); font: inherit; font-weight: 600; cursor: pointer;
}

/* ── SVG-Sprite (unsichtbar, nur Symbole) ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Gestalteter Platzhalter: Bildbeschreibung sichtbar, bis das Foto da ist ── */
[data-placeholder] { position: relative; }
[data-placeholder]::after {
  content: "Platzhalter · " attr(data-placeholder);
  position: absolute; left: var(--space-xs); top: var(--space-xs); max-width: calc(100% - 2 * var(--space-xs));
  padding: 0.3rem 0.55rem; background: rgba(22, 25, 29, .78); color: var(--p-licht-100);
  font-size: var(--step--2); line-height: 1.35; border-radius: var(--radius-feld);
}

/* ── KI-Kennzeichnung: Etikett oben rechts im Bild (Symbolbild · KI / KI-bearbeitet) – Elternteil braucht position ── */
.ki-hinweis {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; pointer-events: none;
  padding: 0.3rem 0.55rem; border-radius: var(--radius-feld);
  background: rgba(14, 17, 20, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--color-panel-text); font-size: 0.6875rem; font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase;
}

/* ── blocks/site-header.css ── */
/* Theme-Teil: Kopf – transparent über der Bühne, beim Scrollen eine ruhige Nachtfläche */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top);
  color: var(--color-panel-text);
  background: transparent;
  border-bottom: var(--border-hair) solid transparent;
  transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.site-header[data-fest] { background: rgba(14, 17, 20, .94); border-bottom-color: var(--color-panel-line); }
@supports (backdrop-filter: blur(1px)) { .site-header[data-fest] { background: rgba(14, 17, 20, .86); backdrop-filter: blur(14px) saturate(1.1); } }
.no-js .site-header { position: absolute; }

.site-header__inner { display: flex; align-items: center; gap: var(--space-l); min-height: var(--header-h); }
.site-header__logo { flex: none; display: block; border-radius: var(--radius-feld); }
.site-header__logo img { width: auto; height: 1.5rem; }

.site-header__nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-xl); }
.site-header__nav ul { display: flex; gap: var(--space-l); margin: 0; }
.site-header__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--color-panel-text); text-decoration: none; font-size: var(--step--1); font-weight: 520; letter-spacing: 0.01em;
}
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px;
  background: var(--color-accent-on-dark); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header__nav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .site-header__nav a:hover::after { transform: scaleX(1); } }

.site-header__sprache { display: flex; align-items: center; gap: 0.35rem; font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; }
.site-header__sprache-folgt { color: var(--color-panel-muted); cursor: default; }
.site-header__sprache > * + *::before { content: "·"; margin-right: 0.35rem; color: var(--color-panel-muted); }   /* Trenner zwischen allen Sprachen */
.site-header__sprache-link { color: var(--color-panel-muted); text-decoration: none; }
/* Sprach-Links erben sonst Größe/Breite der Menü-Links (im Handymenü volle Breite) – Spezifität über `.js .site-header__nav a` */
.site-header__nav .site-header__sprache .site-header__sprache-link {
  width: auto; min-height: 2.75rem; color: var(--color-panel-muted);
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
.site-header__nav .site-header__sprache .site-header__sprache-link::after { display: none; }
@media (hover: hover) and (pointer: fine) { .site-header__sprache-link:hover { color: var(--color-panel-text); } }

.site-header__cta { flex: none; min-height: 2.75rem; padding-block: 0.55rem; font-size: var(--step--1); }
.site-header__cta-kurz { display: none; }

.site-header__menueknopf {
  display: none; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 0.75rem; margin-left: auto;
  background: transparent; color: inherit; border: var(--border-hair) solid rgba(241, 243, 244, .4);
  border-radius: var(--radius-schild); font-size: var(--step--1); font-weight: 600; cursor: pointer;
}
.site-header__menuestriche, .site-header__menuestriche::before, .site-header__menuestriche::after {
  display: block; width: 1rem; height: 2px; background: currentColor;
  transition: translate var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.site-header__menuestriche { position: relative; }
.site-header__menuestriche::before, .site-header__menuestriche::after { content: ""; position: absolute; left: 0; }
.site-header__menuestriche::before { translate: 0 -5px; }
.site-header__menuestriche::after { translate: 0 5px; }
.site-header__menueknopf[aria-expanded="true"] .site-header__menuestriche { background: transparent; }
.site-header__menueknopf[aria-expanded="true"] .site-header__menuestriche::before { translate: 0 0; rotate: 45deg; }
.site-header__menueknopf[aria-expanded="true"] .site-header__menuestriche::after { translate: 0 0; rotate: -45deg; }

@media (max-width: 63.99rem) {
  .site-header__inner { gap: var(--space-s); }
  .site-header__cta-lang { display: none; }
  .site-header__cta-kurz { display: inline; }
  .js .site-header__menueknopf { display: inline-flex; }
  .site-header__nav { margin-left: 0; }
  .js .site-header__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: var(--space-m);
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: var(--color-night); border-bottom: var(--border-hair) solid var(--color-panel-line);
    opacity: 0; translate: 0 -0.5rem;
    transition: opacity 120ms var(--ease-out), translate 120ms var(--ease-out), display 120ms allow-discrete;
  }
  .js .site-header__nav[data-offen] {
    display: flex; opacity: 1; translate: 0 0; transition-duration: var(--dur-base);
    @starting-style { opacity: 0; translate: 0 -0.5rem; }
  }
  .js .site-header:has([data-offen]) { background: var(--color-night); }
  .js .site-header__nav ul { flex-direction: column; gap: 0; }
  .js .site-header__nav li + li { border-top: var(--border-hair) solid var(--color-panel-line); }
  .js .site-header__nav a { width: 100%; min-height: 3.25rem; font-size: var(--step-1); }
  .js .site-header__nav a::after { display: none; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-xs); }
  .no-js .site-header__nav { order: 3; width: 100%; }
  .no-js .site-header__nav ul { flex-wrap: wrap; gap: 0 var(--space-m); }
}
@media (max-width: 25.99rem) {
  .site-header__cta { display: none; }
  .site-header__logo img { height: 1.3rem; }
}

/* ── blocks/hero.css ── */
/* Block hero · Variante buehne: Architekturbild, Aussage links (Dachzeile, Hauptzeile, Text, Knöpfe), Zahlen, Ortsband –
   alles im ersten Bildschirm */

.b-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); /* minmax: das Ortsband darf die Spalte nicht verbreitern */
  min-height: max(38rem, 100svh);
  background: var(--color-night); color: var(--color-panel-text);
}
.b-hero__bild { position: absolute; inset: 0; z-index: -1; }
.b-hero__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  animation: hero-bild 2200ms var(--ease-out) both;
}
.b-hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 17, 20, .92) 0%, rgba(14, 17, 20, .7) 34%, rgba(14, 17, 20, .2) 68%, rgba(14, 17, 20, .3) 100%),
    linear-gradient(180deg, rgba(14, 17, 20, .55) 0%, rgba(14, 17, 20, 0) 22%, rgba(14, 17, 20, 0) 55%, rgba(14, 17, 20, .92) 100%);
}
@keyframes hero-bild { from { scale: 1.07; } }
@media (max-width: 59.99rem) {   /* Text läuft über das ganze Bild: gleichmäßig abdunkeln */
  .b-hero__bild::after { background: linear-gradient(180deg, rgba(14, 17, 20, .62) 0%, rgba(14, 17, 20, .74) 45%, rgba(14, 17, 20, .95) 100%); }
}

.b-hero__inner {
  display: grid; align-content: end; justify-items: start; gap: var(--space-l);
  padding-top: calc(var(--header-h) + var(--space-xl)); padding-bottom: var(--space-xl);
}
.b-hero__dachzeile {
  font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-on-dark);
}
.b-hero__titel {
  max-width: 15ch; margin-top: calc(-1 * var(--space-2xs));
  font-size: var(--step-6); font-weight: 680; font-stretch: 100%;
  line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance;
  animation: hero-titel 1100ms var(--ease-out) 120ms both;
}
@keyframes hero-titel { from { opacity: 0; translate: 0 1.5rem; } }
.b-hero__text { font-size: var(--step-1); line-height: 1.5; color: rgba(241, 243, 244, .86); max-width: 36rem; hyphens: manual; }
.b-hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* Zahlen */
.b-hero__fuss { min-width: 0; border-top: var(--border-hair) solid var(--color-panel-line); background: rgba(14, 17, 20, .55); }
.b-hero__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 0; }
@media (min-width: 52rem) { .b-hero__zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-hero__zahlen li {
  display: grid; gap: 0.35rem; padding: var(--space-m) var(--space-m) var(--space-m) 0;
}
@media (min-width: 52rem) {
  .b-hero__zahlen li { padding: var(--space-l) var(--space-l) var(--space-l) 0; }
  .b-hero__zahlen li + li { padding-left: var(--space-l); border-left: var(--border-hair) solid var(--color-panel-line); }
}
.b-hero__wert {
  font-size: var(--step-4); font-weight: 640; font-stretch: 100%; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.b-hero__plus { color: var(--color-accent-on-dark); margin-left: 0.04em; }
.b-hero__label { font-size: var(--step--1); color: var(--color-panel-muted); }

/* Ortsband */
.b-hero__orte { overflow-x: auto; scrollbar-width: none; border-top: var(--border-hair) solid var(--color-panel-line); }
.b-hero__orte::-webkit-scrollbar { display: none; }
.js .b-hero__orte[data-laeuft] { overflow: hidden; }
.b-hero__ortsband {
  display: flex; flex-wrap: nowrap; width: max-content; gap: 0.25rem var(--space-l); margin: 0;
  padding: var(--space-s) var(--gutter);
  font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-panel-muted);
}
.b-hero__ortsband li { display: inline-flex; align-items: center; gap: var(--space-l); white-space: nowrap; }
.b-hero__ortsband li::after { content: ""; width: 4px; height: 4px; background: var(--color-accent-on-dark); }
.js .b-hero__orte[data-laeuft] .b-hero__ortsband { flex-wrap: nowrap; width: max-content; padding-inline: 0; animation: hero-band 70s linear infinite; }
.js .b-hero__orte[data-laeuft] .b-hero__ortsband li { padding-right: var(--space-l); }
@media (hover: hover) { .b-hero__orte:hover .b-hero__ortsband { animation-play-state: paused; } }
@keyframes hero-band { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .b-hero__orte[data-laeuft] .b-hero__ortsband { animation: none; padding-inline: var(--gutter); }
  .js .b-hero__orte[data-laeuft] { overflow-x: auto; }
  .b-hero__ortsband [data-kopie] { display: none; }
}

@media (max-width: 37.5rem) {
  .b-hero__bild img { object-position: 62% 60%; }
  .b-hero__aktionen .knopf { width: 100%; justify-content: space-between; }
}

/* ── blocks/intro.css ── */
/* Block intro · Variante zahl: riesige Zahl (25), Aussage mit farbigem Schlüsselsatz, drei Grundsätze mit Bildern */

.b-intro { background: var(--color-surface); padding-block: var(--section-space-l) var(--section-space-m); }
.b-intro__kopf { display: grid; gap: var(--space-l); align-items: end; }
@media (min-width: 60rem) { .b-intro__kopf { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); } }
.b-intro__zahl {
  font-size: clamp(9rem, 5rem + 17vw, 24rem); font-weight: 700; font-stretch: var(--wdth-schild);
  line-height: 0.74; letter-spacing: -0.06em; color: var(--color-text);
  margin-bottom: -0.04em;
}
.b-intro__aussage {
  max-width: 26ch; padding-bottom: 0.15em;
  font-size: clamp(1.75rem, 1.05rem + 2.4vw, 3.4rem); font-weight: 540; font-stretch: 100%; line-height: 1.14; letter-spacing: -0.025em;
}
.b-intro__aussage em { font-style: normal; color: var(--color-accent-text); }

.b-intro__punkte { display: grid; gap: var(--space-xl); margin: var(--space-3xl) 0 0; counter-reset: punkt; }
@media (min-width: 48rem) { .b-intro__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); } }
.b-intro__punkt { position: relative; counter-increment: punkt; display: grid; gap: var(--space-xs); align-content: start; }
.b-intro__punkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fokus, 50% 50%); border-radius: var(--radius-schild); margin-bottom: var(--space-s); }
.b-intro__punkt h3 { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; }
.b-intro__punkt h3::before { content: "0" counter(punkt); font-size: var(--step--1); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.1em; color: var(--color-accent-text); }
.b-intro__punkt p { color: var(--color-text-muted); font-size: var(--step-1); }

/* ── blocks/vergleich.css ── */
/* Block vergleich · Variante wege: „Üblich“ gegen „Accelit“, ruhige Tabelle auf der Nachtfläche */

.b-vergleich { background: var(--color-night); color: var(--color-panel-text); padding-block: var(--section-space-l); }
.b-vergleich__titel { font-size: var(--step-5); max-width: 14ch; line-height: 1.04; letter-spacing: -0.032em; margin-bottom: var(--space-2xl); }
.b-vergleich__tabelle { width: 100%; border-collapse: collapse; font-size: var(--step-1); }
.b-vergleich__tabelle th, .b-vergleich__tabelle td { text-align: left; vertical-align: top; padding: var(--space-m) var(--space-m) var(--space-m) 0; border-bottom: var(--border-hair) solid var(--color-panel-line); }
.b-vergleich__tabelle thead th {
  padding-block: 0 var(--space-s);
  font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-panel-muted);
}
.b-vergleich__tabelle thead th:last-child { color: var(--color-accent-on-dark); }
.b-vergleich__tabelle tbody th { width: 24%; font-weight: 600; color: var(--color-panel-text); font-size: var(--step-0); padding-top: calc(var(--space-m) + 0.15em); }
.b-vergleich__tabelle td { width: 38%; color: var(--color-panel-muted); }
.b-vergleich__tabelle td:last-child {
  position: relative; color: var(--color-panel-text); font-weight: 520; padding-left: var(--space-l);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-on-dark) 10%, transparent), transparent 70%);
}
.b-vergleich__tabelle td:last-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px; background: var(--color-accent-on-dark); }
.b-vergleich__tabelle thead th:last-child { padding-left: var(--space-l); }

@media (max-width: 47.99rem) {
  .b-vergleich__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .b-vergleich__tabelle tr { display: grid; gap: var(--space-2xs); padding-block: var(--space-m); border-bottom: var(--border-hair) solid var(--color-panel-line); }
  .b-vergleich__tabelle th, .b-vergleich__tabelle td { width: auto; padding: 0; border: 0; }
  .b-vergleich__tabelle td:first-of-type::before { content: "Üblich: "; color: var(--color-panel-muted); }
  .b-vergleich__tabelle td:last-child { padding: var(--space-2xs) var(--space-s); }
}

/* ── blocks/text-bild.css ── */
/* Block text-bild · Variante vor-ort: Bild randabfallend über die halbe Breite, Text daneben */

.b-text-bild { display: grid; background: var(--color-bg); }
@media (min-width: 60rem) {
  .b-text-bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); min-height: min(52rem, 92svh); }
}
.b-text-bild__bild { position: relative; margin: 0; min-height: 22rem; overflow: hidden; }
.b-text-bild__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
@supports (animation-timeline: view()) {
  .b-text-bild__bild img { scale: 1.12; animation: text-bild-zug linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes text-bild-zug { from { translate: 0 -4%; } to { translate: 0 4%; } }
}
.b-text-bild__notiz {
  position: absolute; left: var(--space-m); bottom: var(--space-m);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.6rem 0.9rem; background: rgba(14, 17, 20, .78); color: var(--color-panel-text);
  border-radius: var(--radius-schild); font-size: var(--step--1); font-weight: 560;
}
.b-text-bild__notiz::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--color-accent-on-dark); flex: none; }

.b-text-bild__text {
  display: grid; align-content: center; gap: var(--space-l);
  padding: var(--section-space-m) var(--gutter);
}
@media (min-width: 60rem) { .b-text-bild__text { padding-inline: var(--space-3xl) var(--gutter); } }
.b-text-bild__titel { font-size: var(--step-5); max-width: 12ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-text-bild__lead { font-size: var(--step-1); color: var(--color-text-muted); max-width: 30rem; }
.b-text-bild__kennwerte { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-xl); margin: var(--space-s) 0 0; padding-top: var(--space-l); border-top: var(--border-hair) solid var(--color-line); }
.b-text-bild__kennwerte li { display: grid; gap: var(--space-2xs); max-width: 12rem; font-size: var(--step--1); color: var(--color-text-muted); }
.b-text-bild__wert { font-size: var(--step-4); font-weight: 640; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); }

/* ── blocks/tag-nacht.css ── */
/* Block tag-nacht · Variante geteilt: links Tag (hell, vor Ort), rechts Nacht (dunkel, Verbund) */

.b-tag-nacht { background: var(--color-bg); padding-top: var(--section-space-m); }
.b-tag-nacht__titel {
  width: min(100% - 2 * var(--gutter), var(--max-width)); margin: 0 auto var(--space-2xl);
  font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; max-width: 20ch; margin-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2));
}
.b-tag-nacht__haelften { display: grid; }
@media (min-width: 52rem) { .b-tag-nacht__haelften { grid-template-columns: 1fr 1fr; } }
.b-tag-nacht__haelfte { position: relative; isolation: isolate; display: grid; align-content: end; min-height: clamp(26rem, 60vw, 42rem); overflow: hidden; }
.b-tag-nacht__haelfte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); transition: scale 1200ms var(--ease-out); }
.b-tag-nacht__haelfte::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.b-tag-nacht__haelfte--tag::before { background: linear-gradient(180deg, rgba(241, 243, 244, 0) 30%, rgba(241, 243, 244, .94) 82%); }
.b-tag-nacht__haelfte--nacht { color: var(--color-panel-text); }
.b-tag-nacht__haelfte--nacht::before { background: linear-gradient(180deg, rgba(14, 17, 20, .1) 20%, rgba(14, 17, 20, .92) 80%); }
@media (hover: hover) and (pointer: fine) { .b-tag-nacht__haelfte:hover img { scale: 1.03; } }
.b-tag-nacht__text { display: grid; gap: var(--space-xs); padding: var(--space-xl) var(--gutter); max-width: 34rem; }
@media (min-width: 52rem) { .b-tag-nacht__text { padding: var(--space-2xl) var(--space-xl); } }
.b-tag-nacht__zeit { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); }
.b-tag-nacht__haelfte--nacht .b-tag-nacht__zeit { color: var(--color-accent-on-dark); }
.b-tag-nacht__text h3 { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.05; }
.b-tag-nacht__text p:last-child { font-size: var(--step-1); }
.b-tag-nacht__haelfte--tag .b-tag-nacht__text p:last-child { color: var(--color-text-muted); }
.b-tag-nacht__haelfte--nacht .b-tag-nacht__text p:last-child { color: rgba(241, 243, 244, .82); }

/* ── blocks/prozess.css ── */
/* Block prozess · Varianten tagesablauf (Zeitstrahl eines Tages) und start (vier Schritte zum Pilotstandort) */

.b-prozess { padding-block: var(--section-space-l); }
.b-prozess--tagesablauf { background: var(--color-surface); }
.b-prozess--start { background: var(--color-bg); }
.b-prozess__kopf { display: grid; gap: var(--space-s); margin-bottom: var(--space-2xl); }
@media (min-width: 60rem) { .b-prozess__kopf { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: var(--space-3xl); } }
.b-prozess__titel { font-size: var(--step-5); max-width: 15ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-prozess__text { color: var(--color-text-muted); font-size: var(--step-1); }

.b-prozess__schritte { display: grid; gap: var(--space-l); margin: 0; position: relative; }
.b-prozess__schritte li { position: relative; display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-l); }
.b-prozess__schritte li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0.75rem; height: 0.75rem; translate: 0 -50%;
  background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: 50%;
}
.b-prozess__schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-line); }
.b-prozess__marke { font-size: var(--step-3); font-weight: 640; font-stretch: var(--wdth-schild); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.b-prozess__schritte h3 { font-size: var(--step-1); font-weight: 620; margin-top: var(--space-2xs); }
.b-prozess__schritte p:last-child { color: var(--color-text-muted); }
@media (min-width: 52rem) {
  .b-prozess--tagesablauf .b-prozess__schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .b-prozess--start .b-prozess__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (max-width: 51.99rem) {
  .b-prozess__schritte::before { left: 0.33rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .b-prozess__schritte li { padding: 0 0 0 var(--space-xl); }
  .b-prozess__schritte li::before { top: 0.65em; translate: 0 0; }
}
.b-prozess--start .b-prozess__marke { color: var(--color-accent-text); }
.b-prozess--start .b-prozess__schritte li::before { background: var(--color-accent); }
.b-prozess--start .b-prozess__schritte li::before, .b-prozess--start .b-prozess__schritte::before { }
.b-prozess--start .b-prozess__schritte li { background: var(--color-surface); padding: var(--space-l); border-radius: var(--radius-schild); }
.b-prozess--start .b-prozess__schritte::before { display: none; }
.b-prozess--start .b-prozess__schritte li::before { left: var(--space-l); top: 0; }
.b-prozess__cta { margin-top: var(--space-xl); }

/* ── blocks/leistungen.css ── */
/* Block leistungen · Variante bildwechsel: Liste mit aufklappbaren Einträgen, Bild wechselt mit (dunkel) */

.b-leistungen { background: var(--color-night); color: var(--color-panel-text); padding-block: var(--section-space-l); }
.b-leistungen__kopf { display: grid; gap: var(--space-m); margin-bottom: var(--space-2xl); }
@media (min-width: 60rem) { .b-leistungen__kopf { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: var(--space-3xl); } }
.b-leistungen__titel { font-size: var(--step-5); max-width: 14ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-leistungen__text { color: var(--color-panel-muted); font-size: var(--step-1); max-width: 28rem; }

.b-leistungen__liste { margin: 0; counter-reset: leistung; border-top: var(--border-hair) solid var(--color-panel-line); }
.b-leistungen__name { counter-increment: leistung; }
.b-leistungen__eintrag { border-bottom: var(--border-hair) solid var(--color-panel-line); }
.b-leistungen__name { font-size: inherit; }
.b-leistungen__schalter {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-s);
  width: 100%; padding: var(--space-m) 0; background: none; border: 0; color: var(--color-panel-muted); text-align: left; cursor: pointer;
  font-size: var(--step-3); font-weight: 560; letter-spacing: -0.02em; line-height: 1.15;
  transition: color var(--dur-base) var(--ease-out);
}
.b-leistungen__schalter::before {
  content: counter(leistung, decimal-leading-zero);
  font-size: var(--step--1); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.1em; color: var(--color-panel-muted);
}
.b-leistungen__modus {
  align-self: center; padding: 0.25rem 0.55rem; border: var(--border-hair) solid var(--color-panel-line); border-radius: var(--radius-feld);
  font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.b-leistungen__eintrag[data-option-modus="vor-ort"] .b-leistungen__modus { border-color: var(--color-accent-on-dark); color: var(--color-accent-on-dark); }
.b-leistungen__eintrag[data-aktiv] .b-leistungen__schalter, .no-js .b-leistungen__schalter { color: var(--color-panel-text); }
.b-leistungen__eintrag[data-aktiv] .b-leistungen__schalter::before { color: var(--color-accent-on-dark); }
@media (hover: hover) and (pointer: fine) { .b-leistungen__schalter:hover { color: var(--color-panel-text); } }

.b-leistungen__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.b-leistungen__detail > p { overflow: hidden; min-height: 0; padding-left: calc(3rem + var(--space-s)); color: var(--color-panel-muted); max-width: 40rem; }
.b-leistungen__eintrag[data-aktiv] .b-leistungen__detail, .no-js .b-leistungen__detail { grid-template-rows: 1fr; }
.b-leistungen__eintrag[data-aktiv] .b-leistungen__detail > p, .no-js .b-leistungen__detail > p { padding-bottom: var(--space-m); }

.b-leistungen__bild { display: none; position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-schild); }
.b-leistungen__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }

/* Breit: Liste links, Bild rechts mitlaufend (alle Bilder in einer Zelle gestapelt) */
@media (min-width: 60rem) {
  .b-leistungen__liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); column-gap: var(--space-3xl); border-top: 0; }
  .b-leistungen__eintrag { display: contents; }
  .b-leistungen__name, .b-leistungen__detail { grid-column: 1; }
  .b-leistungen__name { border-top: var(--border-hair) solid var(--color-panel-line); }
  .b-leistungen__eintrag:last-child .b-leistungen__detail { border-bottom: var(--border-hair) solid var(--color-panel-line); }
  .b-leistungen__bild {
    display: block; grid-column: 2; grid-row: 1 / span 16; align-self: start;
    position: sticky; top: calc(var(--header-h) + var(--space-l));
    width: 100%; height: min(36rem, 72svh);
    opacity: 0; scale: 1.03; transition: opacity var(--dur-slow) var(--ease-out), scale 900ms var(--ease-out);
  }
  .b-leistungen__eintrag[data-aktiv] .b-leistungen__bild,
  .no-js .b-leistungen__eintrag:first-child .b-leistungen__bild { opacity: 1; scale: 1; }
}
/* Schmal: Bild des aktiven Eintrags unter dem Text */
@media (max-width: 59.99rem) {
  .b-leistungen__schalter { font-size: var(--step-2); grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .b-leistungen__detail > p { padding-left: calc(2.25rem + var(--space-s)); }
  .b-leistungen__eintrag[data-aktiv] .b-leistungen__bild {
    display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: var(--space-m);
  }
}

/* ── blocks/referenzen-teaser.css ── */
/* Block referenzen-teaser · Variante anonym: Börsensegment als große Typografie, Name bleibt vertraulich */

.b-referenzen-teaser { background: var(--color-surface); padding-block: var(--section-space-l); }
.b-referenzen-teaser__kopf { display: grid; gap: var(--space-m); align-items: end; margin-bottom: var(--space-2xl); }
@media (min-width: 60rem) { .b-referenzen-teaser__kopf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-3xl); } }
.b-referenzen-teaser__titel { font-size: var(--step-5); max-width: 17ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-referenzen-teaser__text { color: var(--color-text-muted); font-size: var(--step-1); }

.b-referenzen-teaser__liste { display: grid; gap: var(--space-xl); margin: 0; }
@media (min-width: 52rem) { .b-referenzen-teaser__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); } }
.b-referenzen-teaser__eintrag {
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: var(--space-l) 0 0; border-top: var(--border-schild) solid var(--color-line-strong);
}
.b-referenzen-teaser__boerse {
  font-size: clamp(2.5rem, 1.4rem + 3.1vw, 4.25rem); font-weight: 700; font-stretch: var(--wdth-weit);
  letter-spacing: -0.02em; line-height: 0.95; color: var(--color-text);
}
.b-referenzen-teaser__boerse::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: var(--space-m); background: var(--color-accent); }
.b-referenzen-teaser__projekt { font-size: var(--step-2); margin-top: var(--space-xs); }
.b-referenzen-teaser__beschreibung { color: var(--color-text-muted); max-width: 34ch; }
.b-referenzen-teaser__marken {
  margin-top: auto; padding-top: var(--space-s);
  font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);
}

/* ── blocks/feature-raster.css ── */
/* Block feature-raster · Varianten branchen (drei Bildkarten), vier (vier Punkte ohne Bild), liste (Titel + Haken-Liste auf Graphit) */

.b-feature-raster { background: var(--color-bg); padding-block: var(--section-space-l); }
.b-feature-raster__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; margin-bottom: var(--space-2xl); }
.b-feature-raster__liste { display: grid; gap: var(--space-m); margin: 0; }
@media (min-width: 52rem) { .b-feature-raster__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-feature-raster__karte {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
  min-height: clamp(22rem, 38vw, 34rem); border-radius: var(--radius-schild); color: var(--color-panel-text);
}
.b-feature-raster__karte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1000ms var(--ease-out); }
.b-feature-raster__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 17, 20, 0) 35%, rgba(14, 17, 20, .88) 92%); }
@media (hover: hover) and (pointer: fine) { .b-feature-raster__karte:hover img { scale: 1.04; } }
.b-feature-raster__text { display: grid; gap: var(--space-2xs); padding: var(--space-l); }
.b-feature-raster__text h3 { font-size: var(--step-3); letter-spacing: -0.025em; }
.b-feature-raster__text p { color: rgba(241, 243, 244, .82); }

/* Variante vier: vier Punkte ohne Bild */
.b-feature-raster__punkte { display: grid; gap: var(--space-xl) var(--space-l); margin: 0; }
@media (min-width: 37.5rem) { .b-feature-raster__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .b-feature-raster__punkte { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); } }
.b-feature-raster__punkte li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-m); border-top: 3px solid var(--color-accent); }
.b-feature-raster__punkte h3 { font-size: var(--step-2); letter-spacing: -0.02em; }
.b-feature-raster__punkte p { color: var(--color-text-muted); }

/* Variante liste: Titel links, Haken-Liste rechts, auf Graphit */
.b-feature-raster--liste { background: var(--color-panel); color: var(--color-panel-text); }
.b-feature-raster--liste .b-feature-raster__inner { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) {
  .b-feature-raster--liste .b-feature-raster__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); }
  .b-feature-raster--liste .b-feature-raster__titel { margin-bottom: 0; }
}
.b-feature-raster__haken { display: grid; margin: 0; border-top: var(--border-hair) solid var(--color-panel-line); }
.b-feature-raster__haken li { position: relative; padding: var(--space-m) 0 var(--space-m) var(--space-xl); font-size: var(--step-1); border-bottom: var(--border-hair) solid var(--color-panel-line); }
.b-feature-raster__haken li::before { content: ""; position: absolute; left: 0.15rem; top: calc(var(--space-m) + 0.35em); width: 0.95rem; height: 0.5rem;
  border-left: 2px solid var(--color-accent-on-dark); border-bottom: 2px solid var(--color-accent-on-dark); rotate: -45deg; }

/* ── blocks/standorte.css ── */
/* Block standorte · Varianten karte (Punktraster-Karte mit Orten und Verbundbögen) und laender (je Land eine Karte) */

.b-standorte { background: var(--color-panel); color: var(--color-panel-text); padding-block: var(--section-space-l); overflow: hidden; }
.b-standorte__inner { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .b-standorte__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); } }

.b-standorte__text { display: grid; gap: var(--space-l); align-content: start; }
.b-standorte__titel { font-size: var(--step-5); max-width: 12ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-standorte__lead { color: var(--color-panel-muted); font-size: var(--step-1); max-width: 28rem; hyphens: manual; }

.b-standorte__gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-l); margin: var(--space-s) 0 0; }
.b-standorte__gruppen li { padding-top: var(--space-s); border-top: var(--border-hair) solid var(--color-panel-line); }
.b-standorte__gruppen h3 { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--step-1); font-weight: 620; }
.b-standorte__gruppen h3::before { content: ""; width: 0.55rem; height: 0.55rem; flex: none; background: var(--color-accent-on-dark); border: 2px solid var(--color-accent-on-dark); }
.b-standorte__gruppen [data-option-modus="remote"] h3::before { background: transparent; }
.b-standorte__gruppen p { margin-top: var(--space-3xs); font-size: var(--step--1); color: var(--color-panel-muted); }

.b-standorte__legende { display: flex; align-items: center; gap: 0.45rem; font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-panel-muted); }
.b-standorte__legende .marke--remote { margin-left: var(--space-s); }
.b-standorte .marke { border-color: var(--color-accent-on-dark); background: var(--color-accent-on-dark); }
.b-standorte .marke--remote { background: transparent; }

.b-standorte__anfrage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); padding-top: var(--space-l); border-top: var(--border-hair) solid var(--color-panel-line); }
.b-standorte__anfrage p { max-width: 24rem; color: var(--color-panel-muted); }
.b-standorte__anfrage strong { color: var(--color-panel-text); font-weight: 620; }

/* Karte */
.b-standorte__karte { position: relative; margin: 0 calc(-1 * var(--gutter)) 0 0; view-timeline: --karte block; }
@media (max-width: 59.99rem) { .b-standorte__karte { margin-inline: calc(-1 * var(--gutter)); } }
.b-standorte__karte > img { width: 100%; height: auto; }
.b-standorte__punkte, .b-standorte__regionen { position: absolute; inset: 0; margin: 0; }
.b-standorte__verbund { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-standorte__verbund path { fill: none; stroke: var(--color-accent-on-dark); stroke-opacity: .6; stroke-width: 2; }
.b-standorte__punkte li {
  position: absolute; left: var(--x); top: var(--y); width: 0.7rem; height: 0.7rem; translate: -50% -50%;
  background: var(--color-accent-on-dark); border: 2px solid var(--color-accent-on-dark); border-radius: 50%;
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-accent-on-dark) 16%, transparent);
}
.b-standorte__punkte [data-option-modus="remote"] { background: var(--color-panel); }
@supports (animation-timeline: view()) {
  .b-standorte__punkte li {
    animation: standort-an linear both; animation-timeline: --karte;
    animation-range: cover calc(8% + var(--i) * 1.6%) cover calc(22% + var(--i) * 1.6%);
  }
  @keyframes standort-an { from { scale: 0.2; opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-on-dark) 50%, transparent); } }
  .b-standorte__verbund path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: standort-bogen linear both; animation-timeline: --karte;
    animation-range: cover calc(24% + var(--i) * 3%) cover calc(46% + var(--i) * 3%);
  }
  @keyframes standort-bogen { to { stroke-dashoffset: 0; } }
}
.b-standorte__regionen li {
  position: absolute; left: var(--x); top: var(--y); translate: 0.9rem -50%;
  font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-panel-text); white-space: nowrap; text-shadow: 0 1px 8px rgba(22, 25, 29, .9);
}
.b-standorte__regionen li[data-seite="links"] { translate: calc(-100% - 0.9rem) -50%; }
@media (max-width: 37.5rem) { .b-standorte__regionen li { font-size: 0.625rem; letter-spacing: 0.08em; } }
@media (prefers-reduced-motion: reduce) {
  .b-standorte__punkte li, .b-standorte__verbund path { animation: none; stroke-dashoffset: 0; }
}

/* Variante laender: je Land eine Karte (vor Ort / remote / seit) */
.b-standorte--laender { background: var(--color-bg); color: var(--color-text); padding-block: var(--section-space-l); }
.b-standorte--laender .b-standorte__inner { display: block; }
.b-standorte--laender .b-standorte__titel { max-width: none; margin-bottom: var(--space-2xl); }
.b-standorte__laender { display: grid; gap: var(--space-m); margin: 0; }
@media (min-width: 40rem) { .b-standorte__laender { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .b-standorte__laender { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-standorte__land { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-l); background: var(--color-surface); border-top: 3px solid var(--color-accent); border-radius: var(--radius-schild); }
.b-standorte__land h3 { font-size: var(--step-3); letter-spacing: -0.02em; margin-bottom: var(--space-2xs); }
.b-standorte__land p { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xs); align-items: baseline; }
.b-standorte__land .marke { align-self: center; border-color: var(--color-accent); background: var(--color-accent); }
.b-standorte__land .marke--remote { background: transparent; }
.b-standorte__modus { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.b-standorte__land p > span[data-field] { grid-column: 2; }
.b-standorte__seit { display: block !important; margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-accent-text); font-weight: 600; }

/* ── blocks/team.css ── */
/* Block team · Variante gruender: Gründerfoto frei auf Weiß, Text, Leitsatz, Namen */

.b-team { background: var(--color-bg); padding-block: var(--section-space-l); overflow: hidden; }
.b-team__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 60rem) { .b-team__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: var(--space-2xl); } }
.b-team__bild { margin: 0; order: 2; }
@media (min-width: 60rem) { .b-team__bild { order: 0; } }
.b-team__bild img { width: 100%; height: auto; border-radius: var(--radius-schild); box-shadow: 0 40px 70px -50px rgba(22, 25, 29, .55); }

.b-team__text { display: grid; gap: var(--space-l); }
.b-team__titel { font-size: var(--step-5); max-width: 16ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-team__lead { font-size: var(--step-1); color: var(--color-text-muted); max-width: 32rem; }
.b-team__zitat { margin: var(--space-s) 0 0; padding-left: var(--space-m); border-left: 3px solid var(--color-accent); }
.b-team__zitat p { font-size: var(--step-3); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; max-width: 22ch; }
.b-team__personen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); margin: var(--space-s) 0 0; }
.b-team__personen li { display: grid; gap: 0.15rem; padding-top: var(--space-s); border-top: var(--border-hair) solid var(--color-line-strong); }
.b-team__name { font-size: var(--step-1); font-weight: 620; }
.b-team__funktion { font-size: var(--step--1); color: var(--color-text-muted); line-height: 1.4; }

/* ── blocks/geschichte.css ── */
/* Block geschichte · Variante zeitleiste: Jahreszahlen als Meilensteine */

.b-geschichte { background: var(--color-bg); padding-block: 0 var(--section-space-l); }
.b-geschichte__titel { font-size: var(--step-4); letter-spacing: -0.03em; margin-bottom: var(--space-xl); padding-top: var(--space-xl); border-top: var(--border-hair) solid var(--color-line); }
.b-geschichte__liste { display: grid; gap: var(--space-l); margin: 0; }
@media (min-width: 52rem) { .b-geschichte__liste { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }   /* passt sich der Zahl der Meilensteine an */
.b-geschichte__liste li { display: grid; gap: var(--space-2xs); align-content: start; }
.b-geschichte__jahr {
  font-size: var(--step-zahl); font-weight: 700; font-stretch: var(--wdth-schild); line-height: 0.9; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-text);
}
.b-geschichte__liste li:last-child .b-geschichte__jahr { color: var(--color-accent-text); -webkit-text-stroke: 0; }
.b-geschichte__liste h3 { font-size: var(--step-1); font-weight: 620; margin-top: var(--space-xs); }
.b-geschichte__liste p:last-child { color: var(--color-text-muted); max-width: 30ch; }

/* ── blocks/cta.css ── */
/* Block cta · Variante karriere: Akzentfeld mit Text, Bild randabfallend */

.b-cta--karriere { display: grid; background: var(--color-field); color: var(--color-accent-contrast); overflow: hidden; }
@media (min-width: 60rem) { .b-cta--karriere { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); min-height: 36rem; } }
.b-cta__text {
  position: relative; isolation: isolate; display: grid; align-content: center; justify-items: start; gap: var(--space-l);
  padding: var(--section-space-m) var(--gutter);
}
@media (min-width: 60rem) { .b-cta__text { padding-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2)); padding-right: var(--space-3xl); } }
.b-cta__titel { font-size: var(--step-6); line-height: 1; letter-spacing: -0.036em; max-width: 11ch; }
.b-cta__lead { font-size: var(--step-1); max-width: 30rem; color: color-mix(in srgb, var(--color-accent-contrast) 88%, transparent); }
.b-cta__bild { position: relative; margin: 0; min-height: 20rem; }
.b-cta__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 35%); }
@media (hover: hover) and (pointer: fine) {
  .b-cta--karriere .knopf--tafel:hover { --knopf-bg: var(--color-bg); border-color: var(--color-bg); color: var(--color-text); }
}

/* ── blocks/faq.css ── */
/* Block faq · Variante liste: Titel links, Fragen als <details> rechts */

.b-faq { background: var(--color-surface); padding-block: var(--section-space-l); }
.b-faq__inner { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .b-faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); align-items: start; } }
.b-faq__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; }
@media (min-width: 60rem) { .b-faq__titel { position: sticky; top: calc(var(--header-h) + var(--space-xl)); } }
.b-faq__liste { border-top: var(--border-hair) solid var(--color-line-strong); }
.b-faq__frage { border-bottom: var(--border-hair) solid var(--color-line); }
.b-faq__frage summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-m);
  min-height: 3.5rem; padding-block: var(--space-m); cursor: pointer; list-style: none;
  font-size: var(--step-2); font-weight: 560; letter-spacing: -0.015em; line-height: 1.25;
}
.b-faq__frage summary::-webkit-details-marker { display: none; }
.b-faq__frage summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--color-accent-text); transition: rotate var(--dur-base) var(--ease-out);
}
.b-faq__frage[open] summary::after { rotate: 45deg; }
.b-faq__antwort { padding-bottom: var(--space-l); max-width: 44rem; color: var(--color-text-muted); font-size: var(--step-1); }
.b-faq__luecke { padding: var(--space-s) var(--space-m); border: var(--border-hair) dashed var(--color-accent); border-radius: var(--radius-feld); color: var(--color-accent-text); font-size: var(--step-0); }
@media (hover: hover) and (pointer: fine) { .b-faq__frage summary:hover { color: var(--color-accent-text); } }

/* ── blocks/kontakt.css ── */
/* Block kontakt · Variante formular: Flurbild im Hintergrund, Text und Gesprächspartner links, Formular rechts */

.b-kontakt { position: relative; isolation: isolate; background: var(--color-night); color: var(--color-panel-text); padding-block: var(--section-space-l); }
.b-kontakt__hintergrund { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.b-kontakt__hintergrund img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.b-kontakt__hintergrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 20, .55), rgba(14, 17, 20, .9)); }

.b-kontakt__inner { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) { .b-kontakt__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; } }
.b-kontakt__text { display: grid; gap: var(--space-l); align-content: start; }
.b-kontakt__titel { font-size: var(--step-5); max-width: 15ch; line-height: 1.04; letter-spacing: -0.032em; }
.b-kontakt__lead { font-size: var(--step-1); color: rgba(241, 243, 244, .82); max-width: 32rem; }

/* Gesprächspartner: Porträt 4:5 und Name */
.b-kontakt__person { display: grid; grid-template-columns: clamp(7rem, 5rem + 8vw, 10.5rem) minmax(0, 1fr); gap: var(--space-m); align-items: end; margin: var(--space-2xs) 0 0; }
.b-kontakt__person-bild { position: relative; }
/* KI-Etikett unten im Porträt, nie über dem Gesicht (Kundenhinweis 2026-10-12: mobil hing es über dem Kopf) */
.b-kontakt__person .ki-hinweis { top: auto; right: auto; bottom: 0.35rem; left: 0.35rem; max-width: calc(100% - 0.7rem); padding: 0.2rem 0.35rem; font-size: 0.625rem; font-stretch: normal; letter-spacing: 0.04em; }
.b-kontakt__person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-schild); }
.b-kontakt__person figcaption { display: grid; gap: 0.2rem; padding-bottom: var(--space-2xs); }
.b-kontakt__person-label { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-on-dark); }
.b-kontakt__person-name { font-size: var(--step-2); font-weight: 620; letter-spacing: -0.01em; }
.b-kontakt__person-rolle { font-size: var(--step--1); color: var(--color-panel-muted); }

.b-kontakt__daten { margin: var(--space-s) 0 0; border-top: var(--border-hair) solid var(--color-panel-line); }
.b-kontakt__daten > div {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-s); border-bottom: var(--border-hair) solid var(--color-panel-line);
}
.b-kontakt__daten dt { font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-panel-muted); }
.b-kontakt__daten dd { font-size: var(--step-1); font-weight: 520; }
.b-kontakt__daten a { display: inline-block; padding-block: 0.55rem; margin-block: -0.55rem; color: var(--color-panel-text); text-decoration-color: var(--color-accent-on-dark); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .b-kontakt__daten a:hover { color: var(--color-accent-on-dark); } }

.b-kontakt__formular { padding: var(--space-l); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-schild); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
@media (min-width: 40rem) { .b-kontakt__formular { padding: var(--space-xl); } }
.b-kontakt__felder { display: grid; gap: var(--space-m); }
@media (min-width: 40rem) {
  .b-kontakt__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-kontakt__felder .feld--breit { grid-column: 1 / -1; }
}
.b-kontakt__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.b-kontakt__hinweis { margin-top: var(--space-m); font-size: var(--step--1); color: var(--color-text-muted); }
.b-kontakt__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--space-m); }
.b-kontakt__status { font-weight: 600; font-size: var(--step--1); }
.b-kontakt__status[data-zustand="fehler"] { color: var(--color-error); }
.b-kontakt__status[data-zustand="erfolg"] { color: var(--color-success); }
@media (max-width: 39.99rem) { .b-kontakt__absenden .knopf { width: 100%; justify-content: space-between; } }

/* ── blocks/seitenkopf.css ── */
/* Block seitenkopf · Varianten bild (Text links, Bild rechts randabfallend, mobil oben) und schlicht (ohne Bild, Zahlenleiste) */

.b-seitenkopf { position: relative; display: grid; background: var(--color-night); color: var(--color-panel-text); overflow: hidden; }
.b-seitenkopf__inner { position: relative; z-index: 1; display: grid; align-content: end;
  padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.b-seitenkopf__text { display: grid; gap: var(--space-l); justify-items: start; max-width: 36rem; }
.b-seitenkopf__dachzeile { text-wrap: balance; font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-on-dark); }
.b-seitenkopf__titel { font-size: var(--step-6); font-weight: 680; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; margin-top: calc(-1 * var(--space-2xs)); }
.b-seitenkopf__lead { font-size: var(--step-1); line-height: 1.5; color: rgba(241, 243, 244, .86); }
.b-seitenkopf__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.b-seitenkopf__bild { position: relative; margin: 0; order: -1; aspect-ratio: 16 / 10; }
.b-seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.b-seitenkopf__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 20, .55) 0%, rgba(14, 17, 20, 0) 30%, rgba(14, 17, 20, 0) 70%, var(--color-night) 100%); }
.b-seitenkopf__bild .ki-hinweis { top: calc(var(--header-h) + var(--space-s)); z-index: 1; }
@media (min-width: 60rem) {
  .b-seitenkopf { min-height: clamp(34rem, 78svh, 48rem); }
  .b-seitenkopf__inner { padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-3xl); }
  .b-seitenkopf__text { max-width: min(36rem, 46%); }
  .b-seitenkopf__bild { position: absolute; inset: 0 0 0 46%; order: 0; aspect-ratio: auto; }
  .b-seitenkopf__bild::after { background: linear-gradient(90deg, var(--color-night) 0%, rgba(14, 17, 20, 0) 35%), linear-gradient(180deg, rgba(14, 17, 20, .5) 0%, rgba(14, 17, 20, 0) 25%); }
}
@media (max-width: 37.5rem) { .b-seitenkopf__aktionen .knopf { width: 100%; justify-content: space-between; } }

/* Variante schlicht: ohne Bild, mit Zahlenleiste */
.b-seitenkopf--schlicht .b-seitenkopf__inner { padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-2xl); gap: var(--space-2xl); }
.b-seitenkopf--schlicht .b-seitenkopf__text { max-width: 44rem; }
.b-seitenkopf__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--border-hair) solid var(--color-panel-line); max-width: 44rem; }
.b-seitenkopf__zahlen li { display: grid; gap: 0.3rem; padding: var(--space-m) var(--space-m) 0 0; }
.b-seitenkopf__zahlen li + li { padding-left: var(--space-m); border-left: var(--border-hair) solid var(--color-panel-line); }
.b-seitenkopf__wert { font-size: var(--step-4); font-weight: 640; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.b-seitenkopf__label { font-size: var(--step--1); color: var(--color-panel-muted); }

/* ── blocks/stellen.css ── */
/* Block stellen · Variante liste: offene Stellen als Karten (aus src/stellen/), leer: Hinweis auf Initiativbewerbung */

.b-stellen { background: var(--color-surface); padding-block: var(--section-space-l); }
.b-stellen__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; margin-bottom: var(--space-2xl); }
.b-stellen__liste { display: grid; gap: var(--space-m); margin: 0; }
@media (min-width: 52rem) { .b-stellen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-stellen__karte {
  position: relative; display: grid; gap: var(--space-2xs); align-content: start; height: 100%;
  padding: var(--space-l) calc(var(--space-l) + 2.5rem) var(--space-l) var(--space-l);
  background: var(--color-bg); border: var(--border-hair) solid var(--color-line); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-schild); color: var(--color-text); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.b-stellen__ort { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); }
.b-stellen__name { font-size: var(--step-2); font-weight: 620; letter-spacing: -0.015em; line-height: 1.2; }
.b-stellen__eckdaten { color: var(--color-text-muted); font-size: var(--step--1); }
.b-stellen__entwurf { justify-self: start; margin-top: var(--space-2xs); padding: 0.2rem 0.5rem; background: #FDECEC; color: var(--color-error); font-size: var(--step--2); font-weight: 600; border-radius: var(--radius-feld); }
.b-stellen__karte .pfeil { position: absolute; right: var(--space-l); top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; color: var(--color-accent-text); transition: translate var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .b-stellen__karte:hover { background: var(--color-surface); border-color: var(--color-line-strong); }
  .b-stellen__karte:hover .pfeil { translate: 0.3rem -50%; }
}
.b-stellen__leer { display: grid; gap: var(--space-l); justify-items: start; max-width: 40rem; padding: var(--space-l); background: var(--color-bg); border-radius: var(--radius-schild); }
.b-stellen__leer p { font-size: var(--step-1); }

/* ── blocks/stelle.css ── */
/* Block stelle · Variante anzeige: Stellenanzeige – Kopf auf Nacht, Text mit Eckdaten-Spalte (Desktop mitlaufend) */

.b-stelle__kopf { background: var(--color-night); color: var(--color-panel-text); padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-2xl); }
.b-stelle__kopf-inner { display: grid; gap: var(--space-m); justify-items: start; }
.b-stelle__zurueck { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.75rem; color: var(--color-panel-muted); text-decoration: none; font-size: var(--step--1); font-weight: 600; margin-block: -0.5rem; }
.b-stelle__zurueck .pfeil { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .b-stelle__zurueck:hover { color: var(--color-panel-text); } }
.b-stelle__ort { margin-top: var(--space-l); font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-on-dark); }
.b-stelle__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; max-width: 22ch; text-wrap: balance; }
.b-stelle__marken { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-2xs) 0 var(--space-s); }
.b-stelle__marken li { padding: 0.3rem 0.6rem; border: var(--border-hair) solid var(--color-panel-line); border-radius: var(--radius-feld);
  font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-panel-muted); }
.b-stelle__marken .b-stelle__entwurf { border-color: var(--color-error); color: #F2B8B5; }

.b-stelle__inner { display: grid; gap: var(--space-2xl); padding-block: var(--section-space-m); }
@media (min-width: 60rem) { .b-stelle__inner { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-3xl); align-items: start; } }
.b-stelle__inhalt { max-width: 42rem; }
.b-stelle__inhalt > p:first-child { font-size: var(--step-1); color: var(--color-text-muted); }
.b-stelle__inhalt h2 { font-size: var(--step-3); letter-spacing: -0.02em; margin: var(--space-xl) 0 var(--space-s); }
.b-stelle__inhalt ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.b-stelle__inhalt li { position: relative; padding-left: var(--space-l); }
.b-stelle__inhalt li::before { content: ""; position: absolute; left: 0.2rem; top: 0.68em; width: 0.45rem; height: 0.45rem; background: var(--color-accent); }

.b-stelle__eckdaten { display: grid; gap: var(--space-m); padding: var(--space-l); background: var(--color-surface); border-top: 3px solid var(--color-accent); border-radius: var(--radius-schild); }
@media (min-width: 60rem) { .b-stelle__eckdaten { position: sticky; top: calc(var(--header-h) + var(--space-l)); } }
.b-stelle__eckdaten-titel { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.b-stelle__eckdaten dl { display: grid; gap: var(--space-s); margin: 0; }
.b-stelle__eckdaten dt { font-size: var(--step--1); color: var(--color-text-muted); }
.b-stelle__eckdaten dd { margin: 0; font-weight: 560; }
.b-stelle__eckdaten .knopf { justify-content: space-between; }

/* ── blocks/bewerbung.css ── */
/* Block bewerbung · Variante formular: Text und Ansprechpartner links auf Nacht, Formular mit PDF-Upload rechts auf Weiß */

.b-bewerbung { background: var(--color-night); color: var(--color-panel-text); padding-block: var(--section-space-l); }
.b-bewerbung__inner { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) { .b-bewerbung__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: start; } }
.b-bewerbung__text { display: grid; gap: var(--space-l); align-content: start; }
.b-bewerbung__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; }
.b-bewerbung__lead { font-size: var(--step-1); color: rgba(241, 243, 244, .82); max-width: 30rem; }

.b-bewerbung__person { display: grid; grid-template-columns: clamp(7rem, 5rem + 8vw, 10.5rem) minmax(0, 1fr); gap: var(--space-m); align-items: end; margin: var(--space-2xs) 0 0; }
.b-bewerbung__person-bild { position: relative; }
.b-bewerbung__person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-schild); }
/* KI-Etikett unten im Porträt, nie über dem Gesicht (wie Kontakt) */
.b-bewerbung__person .ki-hinweis { top: auto; right: auto; bottom: 0.35rem; left: 0.35rem; max-width: calc(100% - 0.7rem); padding: 0.2rem 0.35rem; font-size: 0.625rem; font-stretch: normal; letter-spacing: 0.04em; }
.b-bewerbung__person figcaption { display: grid; gap: 0.2rem; padding-bottom: var(--space-2xs); }
.b-bewerbung__person-label { font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-on-dark); }
.b-bewerbung__person-name { font-size: var(--step-2); font-weight: 620; letter-spacing: -0.01em; }
.b-bewerbung__person-rolle { font-size: var(--step--1); color: var(--color-panel-muted); }

.b-bewerbung__formular { padding: var(--space-l); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-schild); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
@media (min-width: 40rem) { .b-bewerbung__formular { padding: var(--space-xl); } }
.b-bewerbung__felder { display: grid; gap: var(--space-m); }
@media (min-width: 40rem) { .b-bewerbung__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-bewerbung__felder .feld--breit { grid-column: 1 / -1; } }
.b-bewerbung__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.b-bewerbung__hinweis { margin-top: var(--space-m); font-size: var(--step--1); color: var(--color-text-muted); }
.b-bewerbung__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--space-m); }
.b-bewerbung__status { font-weight: 600; font-size: var(--step--1); }
.b-bewerbung__status[data-zustand="fehler"] { color: var(--color-error); }
.b-bewerbung__status[data-zustand="erfolg"] { color: var(--color-success); }
.b-bewerbung__formular[aria-busy="true"] .knopf { opacity: .6; cursor: progress; }
@media (max-width: 39.99rem) { .b-bewerbung__absenden .knopf { width: 100%; justify-content: space-between; } }

/* ── blocks/leistung.css ── */
/* Block leistung · Variante detail: Leistungen ausführlich – Bild und Text abwechselnd, Nummer + Modus, „Typisch dafür“ */

.b-leistung { background: var(--color-bg); padding-block: var(--section-space-l); }
.b-leistung__titel { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.032em; margin-bottom: var(--space-2xl); }
.b-leistung__liste { display: grid; gap: var(--space-3xl); margin: 0; }
.b-leistung__eintrag { display: grid; gap: var(--space-l); align-items: center; scroll-margin-top: calc(var(--header-h) + var(--space-m)); }
@media (min-width: 60rem) {
  .b-leistung__eintrag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .b-leistung__eintrag:nth-child(even) .b-leistung__bild { order: 2; }
}
.b-leistung__bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-schild); aspect-ratio: 4 / 3; }
.b-leistung__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.b-leistung__text { display: grid; gap: var(--space-s); align-content: center; max-width: 34rem; }
.b-leistung__kopfzeile { display: flex; align-items: center; gap: var(--space-s); }
.b-leistung__nummer { font-size: var(--step--1); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.1em; color: var(--color-accent-text); }
.b-leistung__modus { padding: 0.25rem 0.55rem; border: var(--border-hair) solid var(--color-line-strong); border-radius: var(--radius-feld);
  font-size: var(--step--2); font-weight: 560; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; }
.b-leistung__name { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.05; }
.b-leistung__lead { font-size: var(--step-1); color: var(--color-text-muted); }
.b-leistung__typisch { margin-top: var(--space-xs); font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.b-leistung__punkte { display: grid; gap: var(--space-2xs); margin: 0; border-top: var(--border-hair) solid var(--color-line); }
.b-leistung__punkte li { position: relative; padding: var(--space-xs) 0 var(--space-xs) var(--space-l); border-bottom: var(--border-hair) solid var(--color-line); }
.b-leistung__punkte li::before { content: ""; position: absolute; left: 0.2rem; top: calc(var(--space-xs) + 0.62em); width: 0.45rem; height: 0.45rem; background: var(--color-accent); }

/* ── blocks/zahlen.css ── */
/* Block zahlen · Variante band: Titel und große Zahlen auf Nacht (wie die Zahlenleiste der Bühne) */

.b-zahlen { background: var(--color-night); color: var(--color-panel-text); padding-block: var(--section-space-m); }
.b-zahlen__titel { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.05; max-width: 20ch; margin-bottom: var(--space-xl); }
.b-zahlen__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: var(--border-hair) solid var(--color-panel-line); }
@media (min-width: 52rem) { .b-zahlen__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.b-zahlen__liste li { display: grid; gap: 0.35rem; padding: var(--space-l) var(--space-m) var(--space-m) 0; }
@media (min-width: 52rem) { .b-zahlen__liste li + li { padding-left: var(--space-l); border-left: var(--border-hair) solid var(--color-panel-line); } }
.b-zahlen__wert { font-size: var(--step-4); font-weight: 640; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.b-zahlen__plus { color: var(--color-accent-on-dark); margin-left: 0.04em; }
.b-zahlen__label { font-size: var(--step--1); color: var(--color-panel-muted); }

/* ── blocks/rechtstext.css ── */
/* Block rechtstext · Variante seite: Impressum, Datenschutz – Kopf auf Nacht, ruhiger Lesetext. Lücken sichtbar markiert. */

.b-rechtstext__kopf { background: var(--color-night); color: var(--color-panel-text); padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-xl); }
.b-rechtstext__titel { font-size: var(--step-6); line-height: 1; letter-spacing: -0.04em; }
.b-rechtstext__stand { margin-top: var(--space-s); color: var(--color-panel-muted); font-size: var(--step--1); }
.b-rechtstext__hinweis { margin-top: var(--space-2xs); max-width: 60ch; color: var(--color-panel-muted); font-size: var(--step--1); }
.b-rechtstext__hinweis a { color: var(--color-panel-text); text-decoration-color: var(--color-accent-on-dark); }
.b-rechtstext__inhalt { padding-block: var(--section-space-m); }
.b-rechtstext__inhalt > * { max-width: 46rem; }
.b-rechtstext__inhalt h2 { font-size: var(--step-2); letter-spacing: -0.015em; margin: var(--space-xl) 0 var(--space-xs); }
.b-rechtstext__inhalt h2:first-child { margin-top: 0; }
.b-rechtstext__inhalt p + p { margin-top: var(--space-s); }
.b-rechtstext__inhalt ul { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0 0; padding-left: 1.2rem; }
.b-rechtstext__inhalt a { overflow-wrap: anywhere; }
.luecke { display: block; margin-top: var(--space-s); padding: var(--space-xs) var(--space-s); background: #FFF4CE; color: #5C4400; border-left: 3px solid #E0A800; border-radius: var(--radius-feld); font-size: var(--step--1); }

/* ── blocks/hinweis.css ── */
/* Block hinweis · Variante seite: kurze Systemseite (Danke, 404) auf Nacht, unter dem festen Kopf */

.b-hinweis { min-height: 72svh; display: grid; align-items: center; background: var(--color-night); color: var(--color-panel-text);
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-3xl); }
.b-hinweis__inner { display: grid; gap: var(--space-l); justify-items: start; }
.b-hinweis__titel { font-size: var(--step-6); line-height: 1; letter-spacing: -0.04em; max-width: 16ch; text-wrap: balance; }
.b-hinweis__text { font-size: var(--step-1); color: var(--color-panel-muted); max-width: 34rem; }

/* ── blocks/site-footer.css ── */
/* Theme-Teil: Fuß auf der Nachtfläche */

.site-footer { background: var(--color-night); color: var(--color-panel-muted); padding-block: var(--space-2xl) calc(var(--space-l) + env(safe-area-inset-bottom)); font-size: var(--step--1); border-top: var(--border-hair) solid var(--color-panel-line); }
.site-footer__inner { display: grid; gap: var(--space-xl) var(--space-l); }
@media (min-width: 48rem) { .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer__inner { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.site-footer__marke { display: grid; gap: var(--space-s); align-content: start; }
@media (min-width: 48rem) and (max-width: 63.99rem) { .site-footer__marke { grid-column: 1 / -1; } }
.site-footer__marke img { width: auto; height: 1.5rem; }
.site-footer__marke p { max-width: 30ch; }
.site-footer__titel { color: var(--color-panel-text); margin-bottom: var(--space-s); font-size: var(--step--2); font-weight: 600; font-stretch: var(--wdth-weit); letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer ul { margin: 0; display: grid; gap: 0.15rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-panel-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--color-accent-on-dark); } }
.site-footer__copy { grid-column: 1 / -1; padding-top: var(--space-m); border-top: var(--border-hair) solid var(--color-panel-line); }
.site-footer__bildnachweis { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-s)); font-size: var(--step--2); color: var(--color-panel-muted); max-width: 60rem; }