/* =========================================================================
   VARELOR — Designsystem
   Built on Precision.
   Reihenfolge: Tokens · Reset · Basis · Layout · Komponenten · Sektionen · Utilities · Responsive
   ========================================================================= */

/* Lokal bereitgestellte Markenschriften: keine Verbindung zu Google Fonts. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Tokens (CSS-Variablen)
   ------------------------------------------------------------------------- */
:root {
  /* Markenfarben */
  --c-black: #111111;       /* Varelor Black */
  --c-charcoal: #2B2B2B;    /* Charcoal */
  --c-slate: #6B6B6B;       /* Slate Gray - dunkler fuer AA-Kontrast */
  --c-off-white: #FAFAFA;   /* Off White */
  --c-white: #FFFFFF;       /* Pure White */

  /* Abgeleitete Haarlinien & Overlays (bleiben monochrom) */
  --line: rgba(17, 17, 17, 0.14);
  --line-strong: rgba(17, 17, 17, 0.26);
  --line-faint: rgba(17, 17, 17, 0.07);
  --line-light: rgba(255, 255, 255, 0.20);
  --line-light-faint: rgba(255, 255, 255, 0.10);

  /* Schriftfamilien
     Manrope traegt die gesamte Ueberschriftenebene, Inter alles Laufende.
     Eine dritte Display-Schrift gibt es bewusst nicht mehr. */
  --font-heading: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  /* Laufweiten: grosse Groessen brauchen engere Spationierung */
  --ls-display: -0.032em;
  --ls-heading: -0.022em;

  /* Schriftgrössen (fluid) */
  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --fs-display-sm: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --fs-display: clamp(2.15rem, 1.6rem + 2.4vw, 3.25rem);

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --section-y: clamp(5rem, 3.2rem + 7.5vw, 10rem);

  /* Layout */
  --max-width: 1240px;
  --max-width-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --nav-h: 4.75rem;

  /* Radien */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 6px;

  /* Übergänge */
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --t-fast: 160ms var(--ease);
  --t: 280ms var(--ease);
  --t-slow: 620ms var(--ease);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-charcoal);
  background-color: var(--c-off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-off-white);
}

/* -------------------------------------------------------------------------
   3. Basis-Typografie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--ls-heading);
  color: var(--c-black);
  text-wrap: balance;
  /* Sicherheitsnetz gegen deutsche Langkomposita auf schmalen Displays */
  overflow-wrap: break-word;
}

h1, h2 { line-height: 1.08; }

p { text-wrap: pretty; }

strong { font-weight: 600; color: var(--c-black); }

/* Grosse Leitaussagen: Manrope, kraeftig und eng gesetzt */
.display {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  font-size: var(--fs-display);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-slate);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.eyebrow--center { justify-content: center; }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--max-width-narrow); }

.section { padding-block: var(--section-y); }

.section--dark {
  background: var(--c-black);
  color: var(--c-off-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--c-white); }

.section--dark .eyebrow { color: rgba(250, 250, 250, 0.6); }

.section--off { background: var(--c-off-white); }
.section--white { background: var(--c-white); }

.section__head { max-width: 46rem; margin-bottom: var(--space-6); }

.section__title { font-size: var(--fs-h2); margin-top: var(--space-3); }

.section__intro {
  margin-top: var(--space-3);
  color: var(--c-slate);
  font-size: var(--fs-lead);
}

main { display: block; }

/* -------------------------------------------------------------------------
   5. Logo
   ------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--c-black);
  line-height: 1;
  white-space: nowrap;
}

/* Waagrechte Markensignatur in der Kopfzeile.
   Die Pfade liegen direkt im Dokument und nehmen die Textfarbe an. Dadurch
   ist die Marke auf jeder Flaeche lesbar, auf jeder Aufloesung scharf und
   kann nicht als fehlendes Bild erscheinen. */
.logo__mark {
  display: block;
  height: 1.6rem;
  width: auto;
  flex: 0 0 auto;
  transition: color var(--dur-theme, 620ms) var(--ease-inout, ease);
}

/* Auf der Marke liegt beim Zeigen ein sehr ruhiger Zustandswechsel */
.logo--header .logo__mark { transform-origin: left center; }
.logo--header:hover .logo__mark { opacity: 0.72; }
.logo--header .logo__mark { transition: opacity var(--dur-hover, 220ms) var(--ease-out, ease), color var(--dur-theme, 620ms) var(--ease-inout, ease); }

.logo--light { color: var(--c-white); }

.logo--footer { display: inline-block; }

.logo__full {
  display: block;
  width: 10.5rem;
  height: auto;
  max-width: 100%;
}

@media (max-width: 30rem) {
  .logo__mark { height: 1.4rem; }
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */
.btn {
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
  text-align: center;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-black);
  color: var(--c-white);
  border-color: var(--c-black);
}
.btn--primary:hover { background: var(--c-charcoal); border-color: var(--c-charcoal); }

.btn--ghost {
  background: transparent;
  color: var(--c-black);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--c-black); background: var(--c-black); color: var(--c-white); }

.btn--on-dark {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}
.btn--on-dark:hover { background: transparent; color: var(--c-white); }

.btn--block { width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-black);
  transition: gap var(--t-fast);
}
.btn-link .btn-link__arrow { transition: transform var(--t-fast); }
.btn-link:hover .btn-link__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   7. Header / Navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(250, 250, 250, 0.92);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--nav-h);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2.4rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-charcoal);
  padding: 0.4rem 0;
  transition: color var(--t-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}

.nav__link:hover { color: var(--c-black); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--c-black); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Burger */
.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius);
}

.nav__toggle span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--c-black);
  transform: translateX(-50%);
  transition: transform var(--t), opacity var(--t-fast);
}
.nav__toggle span:nth-child(1) { top: calc(50% - 5px); }
.nav__toggle span:nth-child(2) { top: 50%; }
.nav__toggle span:nth-child(3) { top: calc(50% + 5px); }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }

/* Mobiles Overlay-Panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-off-white);
  padding: calc(var(--nav-h) + var(--space-6)) var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-slow), opacity var(--t), visibility var(--t);
}

.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.mobile-nav__menu { display: flex; flex-direction: column; gap: 0; }

.mobile-nav__link {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--c-black);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__link[aria-current="page"] { color: var(--c-slate); }

.mobile-nav__footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }

body.no-scroll { overflow: hidden; }

/* -------------------------------------------------------------------------
   8. Hero
   Asymmetrisches Raster: links die Aussage, rechts das Systemschema als
   dunkles Objekt. Darunter eine Fussleiste mit den drei Bereichen.
   Bewegung ausschliesslich ueber transform und opacity.
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(calc(100svh - var(--header-h, 4.75rem)), 50rem);
  padding-block: clamp(2rem, 1rem + 3.5vw, 3.75rem) 0;
  overflow: hidden;
  background: var(--c-off-white);
}

/* Feines Raster, das nach unten und rechts ausblendet */
.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 100% 5.5rem,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 5.5rem 100%;
  -webkit-mask-image: radial-gradient(115% 90% at 76% 34%, #000 0%, rgba(0, 0, 0, 0.45) 46%, transparent 78%);
  mask-image: radial-gradient(115% 90% at 76% 34%, #000 0%, rgba(0, 0, 0, 0.45) 46%, transparent 78%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
  align-items: center;
  flex: 1 1 auto;
  padding-block: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}

.hero__eyebrow { margin-bottom: var(--space-4); }

/* Der H1 traegt die Seite: eigene fluide Skala, enge Laufweite,
   ruhiger Umbruch auf allen Breiten. */
.hero__title {
  font-size: clamp(1.95rem, 1.35rem + 2.15vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
  margin-bottom: var(--space-4);
  max-width: 19ch;
  text-wrap: balance;
}

.hero__sub {
  max-width: 33rem;
  color: var(--c-charcoal);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hero__note {
  font-size: var(--fs-small);
  color: var(--c-slate);
  letter-spacing: 0.01em;
}

/* --- Fussleiste: die drei Bereiche als ruhiger Index --------------------- */
.hero__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
  border-top: 1px solid var(--line);
}

.hero__index {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 0.6rem + 2.2vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-charcoal);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}

.hero__index a span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-hover) var(--ease-out);
}

.hero__index a:hover,
.hero__index a:focus-visible { color: var(--c-black); }
.hero__index a:hover span { color: var(--c-black); }

/* Scrollhinweis: eine Linie, in der ein Punkt ruhig nach unten laeuft */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.hero__cue-text {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.hero__cue-rail {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;
}

.hero__cue-dot {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 1.1rem;
  background: var(--c-black);
  animation: hero-cue 2.6s var(--ease-inout) infinite;
}

@keyframes hero-cue {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(210%); }
  100% { transform: translateX(210%); }
}

/* -------------------------------------------------------------------------
   8b. Hero-Systemschema
   Drei benannte Module haengen an einer gemeinsamen Achse. Ein Signal laeuft
   die Achse entlang, aktiviert der Reihe nach die Module und laeuft unten im
   Kern zusammen. Nur HTML und CSS, Bewegung ueber transform und opacity.
   ------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 32rem;
}

/* Versetzte zweite Ebene statt eines weichen Schlagschattens */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 1.15rem 0 -1.15rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.hero-system {
  --sys-cycle: 7.2s;       /* Dauer eines vollstaendigen Durchlaufs */
  --sys-rail: 2.25rem;     /* Abstand Achse <-> Modulkante */
  --sys-node: 7px;
  --sys-bg: #121215;
  --sys-ink: #F5F5F6;
  --sys-ink-muted: rgba(245, 245, 246, 0.58);
  --sys-line: rgba(245, 245, 246, 0.16);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 0.75rem + 0.6vw, 1.35rem);
  padding: clamp(1.15rem, 0.85rem + 1.1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--sys-bg);
  overflow: hidden;
}

/* Sehr zurueckhaltendes Markenzeichen im Hintergrund */
.hero-system::after {
  content: "V";
  position: absolute;
  right: -1.5rem;
  bottom: -4.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--sys-ink);
  opacity: 0.045;
  pointer-events: none;
}

.hero-system__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sys-line);
}

.hero-system__tick {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sys-ink-muted);
}

/* Die Achse liegt links ausserhalb der Module, die Module haengen daran. */
.hero-system__body {
  position: relative;
  padding-left: var(--sys-rail);
}

.hero-system__spine {
  position: absolute;
  inset-block: 0;
  left: calc(var(--sys-rail) / 2);
  width: 1px;
  background: var(--sys-line);
  overflow: hidden;
}

.hero-system__pulse {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent, var(--sys-ink));
  opacity: 0;
  animation: hero-sys-pulse var(--sys-cycle) linear infinite;
}

.hero-system__modules {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-system__module {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
  padding: 0.7rem 0.9rem 0.75rem;
  border: 1px solid var(--sys-line);
  border-radius: var(--radius);
  background: rgba(245, 245, 246, 0.035);
}

/* Stichleitung von der Achse zur Modulkante */
.hero-system__trace {
  position: absolute;
  top: 1.2rem;
  left: calc(var(--sys-rail) / -2);
  width: calc(var(--sys-rail) / 2);
  height: 1px;
  background: var(--sys-ink);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-sys-trace var(--sys-cycle) var(--ease-out) infinite;
  animation-delay: var(--sys-t, 0s);
}

/* Knoten auf der Achse */
.hero-system__node {
  position: absolute;
  top: 1.2rem;
  left: calc(var(--sys-rail) / -2);
  width: var(--sys-node);
  height: var(--sys-node);
  margin: calc(var(--sys-node) / -2) 0 0 calc(var(--sys-node) / -2);
  background-color: var(--sys-bg);
  border: 1px solid var(--sys-ink-muted);
  transform: rotate(45deg);
  animation: hero-sys-node var(--sys-cycle) var(--ease-out) infinite;
  animation-delay: var(--sys-t, 0s);
}

.hero-system__index {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sys-ink-muted);
  font-variant-numeric: tabular-nums;
}

.hero-system__label {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--sys-ink);
}

.hero-system__meta {
  grid-column: 2;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--sys-ink-muted);
}

/* Kern: hier laufen die drei Bereiche zusammen */
.hero-system__core {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.9rem 0.9rem 0 var(--sys-rail);
  border-top: 1px solid var(--sys-line);
}

.hero-system__core-mark {
  position: absolute;
  top: 1.45rem;
  left: calc(var(--sys-rail) / 2);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--sys-ink);
  transform: rotate(45deg) scale(0.7);
  opacity: 0.35;
  animation: hero-sys-core var(--sys-cycle) var(--ease-out) infinite;
  animation-delay: 5.04s;
}

.hero-system__core-label {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--sys-ink);
}

.hero-system__core-note {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-ink-muted);
}

@keyframes hero-sys-pulse {
  0%   { opacity: 0; transform: translateY(-100%); }
  5%   { opacity: 0.9; }
  62%  { opacity: 0.9; }
  72%  { opacity: 0; transform: translateY(400%); }
  100% { opacity: 0; transform: translateY(400%); }
}

@keyframes hero-sys-trace {
  0%   { transform: scaleX(0); }
  7%   { transform: scaleX(1); }
  84%  { transform: scaleX(1); }
  94%  { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

@keyframes hero-sys-node {
  0%   { transform: rotate(45deg) scale(1); background-color: var(--sys-bg); }
  5%   { transform: rotate(45deg) scale(1.45); background-color: var(--sys-ink); }
  14%  { transform: rotate(45deg) scale(1); background-color: var(--sys-ink); }
  84%  { transform: rotate(45deg) scale(1); background-color: var(--sys-ink); }
  94%  { transform: rotate(45deg) scale(1); background-color: var(--sys-bg); }
  100% { transform: rotate(45deg) scale(1); background-color: var(--sys-bg); }
}

@keyframes hero-sys-core {
  0%   { opacity: 0.35; transform: rotate(45deg) scale(0.7); }
  10%  { opacity: 1;    transform: rotate(45deg) scale(1.15); }
  22%  { opacity: 1;    transform: rotate(45deg) scale(1); }
  74%  { opacity: 1;    transform: rotate(45deg) scale(1); }
  88%  { opacity: 0.35; transform: rotate(45deg) scale(0.7); }
  100% { opacity: 0.35; transform: rotate(45deg) scale(0.7); }
}

/* Ohne JavaScript laufen die Animationen durchgehend. Mit JavaScript
   pausieren sie ausserhalb des Sichtbereichs (siehe .sysviz--managed). */
.hero-system.sysviz--managed .hero-system__pulse,
.hero-system.sysviz--managed .hero-system__trace,
.hero-system.sysviz--managed .hero-system__node,
.hero-system.sysviz--managed .hero-system__core-mark { animation-play-state: paused; }
.hero-system.sysviz--managed.is-inview .hero-system__pulse,
.hero-system.sysviz--managed.is-inview .hero-system__trace,
.hero-system.sysviz--managed.is-inview .hero-system__node,
.hero-system.sysviz--managed.is-inview .hero-system__core-mark { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .hero__cue-dot { animation: none; transform: translateX(50%); }
  .hero-system__pulse { animation: none; opacity: 0; }
  .hero-system__trace { animation: none; transform: scaleX(1); }
  .hero-system__node { animation: none; background-color: var(--sys-ink); }
  .hero-system__core-mark { animation: none; opacity: 1; transform: rotate(45deg) scale(1); }
}

/* -------------------------------------------------------------------------
   8c. Seiteneintritt
   Elemente mit data-enter erscheinen beim Laden nacheinander. Die Reihenfolge
   steuert --enter-i. Reine CSS-Animation: ohne JavaScript identisch, bei
   reduzierter Bewegung sofort im Endzustand.
   ------------------------------------------------------------------------- */
[data-enter] {
  animation: page-enter var(--dur-reveal) var(--ease-entry) both;
  animation-delay: calc(var(--enter-i, 0) * 85ms);
}

@keyframes page-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-enter] { animation: none; }
}

/* -------------------------------------------------------------------------
   8d. Loesungsuebersicht
   Drei Bereiche an einer gemeinsamen Achse. Greift die Knoten- und
   Linienlogik des Hero-Systemdiagramms auf, statt drei Icon-Karten zu
   wiederholen. Asymmetrie: breite Erklaerspalte, schmalere Nutzenspalte.
   ------------------------------------------------------------------------- */
.solutions {
  --sol-rail: 3.25rem;   /* Breite der Achsenspalte */
  --sol-node: 9px;
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.solutions__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--sol-rail) minmax(0, 1.35fr) minmax(0, 0.9fr);
  column-gap: clamp(1.5rem, 0.9rem + 2.2vw, 3.5rem);
  row-gap: var(--space-4);
  align-items: start;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  padding-right: var(--space-3);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t);
}

/* Durchgehende Achse ueber alle drei Bereiche */
.solutions__item::before {
  content: "";
  position: absolute;
  left: calc(var(--sol-rail) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.solutions__item:hover,
.solutions__item:focus-within { background-color: var(--c-off-white); }

/* Knoten auf der Achse - dieselbe Formsprache wie im Hero-Diagramm */
.solutions__node {
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: start;
  margin-top: 0.32rem;
  width: var(--sol-node);
  height: var(--sol-node);
  background: var(--c-white);
  border: 1px solid var(--c-black);
  transform: rotate(45deg);
  transition: background-color var(--t);
}

.solutions__item:hover .solutions__node,
.solutions__item:focus-within .solutions__node { background: var(--c-black); }

.solutions__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}

.solutions__num {
  font-variant-numeric: tabular-nums;
  color: var(--c-black);
}

.solutions__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
  max-width: 22ch;
}

.solutions__text {
  color: var(--c-charcoal);
  max-width: 44ch;
  margin-bottom: var(--space-4);
}

.solutions__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-top: 1.95rem;  /* schwenkt auf die Hoehe des Bereichstitels ein */
}

.solutions__points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  line-height: 1.5;
}

.solutions__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 1px;
  background: var(--c-slate);
}

.solutions__footer {
  margin-top: var(--space-5);
  padding-left: var(--sol-rail);
}

/* -------------------------------------------------------------------------
   9. Trust-Bar
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   10. Karten-Raster (generisch)
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(17, 17, 17, 0.45);
}

.card__index {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--c-slate);
}

.card__title { font-size: var(--fs-h3); margin-block: var(--space-2) var(--space-2); }
.card__text { color: var(--c-slate); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   11. Leistungspakete (Pricing)
   ------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.plan:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -30px rgba(17, 17, 17, 0.5);
}

.plan--featured {
  border-color: var(--c-black);
  box-shadow: 0 22px 48px -30px rgba(17, 17, 17, 0.5);
}

.plan__badge {
  position: absolute;
  top: -0.7rem;
  left: var(--space-5);
  background: var(--c-black);
  color: var(--c-white);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
}

.plan__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: var(--ls-heading); }
.plan__price { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 0.2rem; }
.plan__price strong { font-family: var(--font-heading); font-size: 1.4rem; color: var(--c-black); letter-spacing: -0.02em; line-height: 1.1; }
.plan__price span { font-size: var(--fs-small); color: var(--c-slate); }

.plan__divider { height: 1px; background: var(--line); margin-block: var(--space-4); }

.plan__features, .offer__features { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.plan__features li, .offer__features li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-small);
  color: var(--c-charcoal);
}
.plan__features li::before, .offer__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.55rem;
  height: 1px;
  background: var(--c-slate);
}

/* -------------------------------------------------------------------------
   12. Split / Vorteile
   ------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.feature-list { display: grid; gap: 0; }
.feature-list__item {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.feature-list__item:last-child { border-bottom: 1px solid var(--line); }
.feature-list__num {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--c-slate);
  min-width: 1.8rem;
}
.feature-list__body h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.feature-list__body p { font-size: var(--fs-small); color: var(--c-slate); }

/* -------------------------------------------------------------------------
   13. Branchen
   ------------------------------------------------------------------------- */
.sector {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.sector:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.sector__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.sector__text { color: var(--c-slate); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   14. Prozess-Timeline

   Der Abschnitt hat frueher ausschliesslich auf dunkler Flaeche gestanden
   und dafuer feste helle Farbwerte getragen. Seit die Reihenfolge der
   Startseite geaendert wurde, steht er auf heller Flaeche. Die Komponente
   arbeitet deshalb ab hier ausschliesslich mit den Marken-Variablen und
   funktioniert dadurch auf beiden Flaechen.

   Hierarchie: Nummer zurueckhaltend, Titel klar, Beschreibung ruhig,
   Zeitachse als feine Linie, Prozesspunkt als Zustandsmarke.

   Die Achse baut sich mit dem Scrollfortschritt auf. Ohne JavaScript und
   bei reduzierter Bewegung steht --prozess auf 1: Achse voll, alle Punkte
   gesetzt, jeder Text lesbar.
   ------------------------------------------------------------------------- */
.process {
  --prozess: 1;
  --prozess-knoten: 9px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-top: 1px;
}

/* Ruhige Zeitachse ueber alle Schritte */
.process::before,
.process::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}
.process::before { background: var(--line); }
.process::after {
  background: var(--c-black);
  transform: scaleX(var(--prozess));
  transform-origin: left center;
}

.process__step {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4) 0;
}

/* Prozesspunkt auf der Achse */
.process__step::before {
  content: "";
  position: absolute;
  top: calc(var(--prozess-knoten) / -2);
  left: 0;
  z-index: 1;
  width: var(--prozess-knoten);
  height: var(--prozess-knoten);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}
.process__step.ist-aktiv::before {
  background: var(--c-black);
  border-color: var(--c-black);
  transform: scale(1.15);
}

.process__num {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--c-slate);
  line-height: 1;
  transition: color var(--dur-state) var(--ease-out);
}
.process__step.ist-aktiv .process__num { color: var(--c-black); }

.process__title {
  color: var(--c-black);
  font-size: var(--fs-h3);
  margin-block: var(--space-3) var(--space-2);
}

.process__text {
  font-size: var(--fs-small);
  color: var(--c-slate);
  padding-right: var(--space-3);
  max-width: 32ch;
}

@media (prefers-reduced-motion: reduce) {
  .process { --prozess: 1; }
  .process__step::before {
    background: var(--c-black);
    border-color: var(--c-black);
    transform: none;
  }
  .process__num { color: var(--c-black); }
}

/* -------------------------------------------------------------------------
   15. Projekte
   ------------------------------------------------------------------------- */
.project {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-white);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.project:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 20px 44px -30px rgba(17,17,17,0.5); }

/* Projektvisualisierungen: eigenständige, rein typografische Konzeptstudien */
.project__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-off-white);
  overflow: hidden;
}
.project__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 100% 1.5rem,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 1.5rem 100%;
}
.project__visual--b { background: var(--c-charcoal); }
.project__visual--b::before { background:
    linear-gradient(var(--line-light-faint) 1px, transparent 1px) 0 0 / 100% 1.5rem,
    linear-gradient(90deg, var(--line-light-faint) 1px, transparent 1px) 0 0 / 1.5rem 100%; }
.project__visual--consulting { background: #ebe9e4; }
.project-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3.6rem clamp(1.5rem, 4vw, 2.25rem) 2rem;
  color: var(--c-black);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.project__visual:hover .project-preview { transform: scale(1.025); }
.project-preview__kicker,
.project-preview__meta {
  font-family: var(--font-body);
  font-size: clamp(0.48rem, 1.25vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.project-preview__kicker {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  max-width: 48%;
  margin: 0;
  text-align: right;
}
.project-preview__meta { margin-top: clamp(0.9rem, 2.5vw, 1.4rem); opacity: 0.58; }
.project-preview strong {
  max-width: 92%;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: inherit;
}
.project-preview--property::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 14%;
  width: 24%;
  height: 72%;
  border: 1px solid rgba(17,17,17,0.16);
  border-bottom: 0;
}
.project-preview--automotive { color: var(--c-white); }
.project-preview--automotive::after {
  content: "";
  position: absolute;
  right: -7%;
  bottom: -12%;
  width: 57%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
}
.project-preview--consulting::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 15%;
  width: 1px;
  height: 70%;
  background: rgba(17,17,17,0.2);
  box-shadow: 0.75rem 0 0 rgba(17,17,17,0.08), 1.5rem 0 0 rgba(17,17,17,0.05);
}
.project__tag {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(17, 17, 17, 0.9);
  color: var(--c-white);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
}
.project__body { padding: var(--space-5); }
.project__sector { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-slate); font-weight: 600; }
.project__title { font-size: var(--fs-h3); margin-block: var(--space-2) var(--space-2); }
.project__text { font-size: var(--fs-small); color: var(--c-slate); }

/* -------------------------------------------------------------------------
   16. Über / Team-Platzhalter
   ------------------------------------------------------------------------- */
.about-statement p { font-size: var(--fs-lead); line-height: 1.55; margin-bottom: var(--space-4); }
.about-statement p:last-child { margin-bottom: 0; }
.about-statement blockquote {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--c-black);
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--c-black);
}

/* Über Varelor — Intro und Ansatz */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.about-intro__lead {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.about-intro__title {
  margin-top: var(--space-3);
  font-size: var(--fs-display-sm);
  max-width: 9ch;
}
.about-intro__content {
  border-left: 1px solid var(--line-strong);
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}
.about-intro__statement {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.45;
  color: var(--c-black);
  margin-bottom: var(--space-6);
}
.about-intro__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.about-intro__details p {
  color: var(--c-slate);
  font-size: var(--fs-body);
}

.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.approach-grid__head {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.approach-grid__intro {
  margin-top: var(--space-4);
  max-width: 30rem;
  color: var(--c-slate);
}
.approach-steps {
  border-top: 1px solid var(--line-strong);
}
.approach-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-strong);
}
.approach-step__index {
  font-size: var(--fs-small);
  color: var(--c-slate);
  letter-spacing: 0.12em;
  padding-top: 0.2rem;
}
.approach-step__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}
.approach-step p {
  color: var(--c-slate);
  max-width: 38rem;
}

@media (max-width: 52rem) {
  .about-intro,
  .approach-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about-intro__lead,
  .approach-grid__head {
    position: static;
  }
  .about-intro__title { max-width: 14ch; }
  .about-intro__content {
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-left: 0;
    padding-top: var(--space-5);
  }
}

@media (max-width: 38rem) {
  .about-intro__details { grid-template-columns: 1fr; }
  .approach-step { grid-template-columns: 2.25rem 1fr; gap: var(--space-3); }
}

/* -------------------------------------------------------------------------
   17. CTA-Sektion
   ------------------------------------------------------------------------- */
.cta-block { text-align: center; max-width: 42rem; margin-inline: auto; }
.cta-block__title { font-size: var(--fs-display-sm); font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1.06; }
.cta-block__text { margin-block: var(--space-4) var(--space-5); color: rgba(250,250,250,0.72); font-size: var(--fs-lead); }
.cta-block__note { margin-top: var(--space-4); font-size: var(--fs-small); color: rgba(250,250,250,0.55); }

/* -------------------------------------------------------------------------
   18. Formular
   ------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }

.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--c-black); }
.field__label .req { color: var(--c-slate); font-weight: 400; }
.field__help { font-size: 0.8125rem; color: var(--c-slate); line-height: 1.45; }

.field__control {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--c-black);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__control::placeholder { color: var(--c-slate); }
.field__control:focus {
  outline: none;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
textarea.field__control { resize: vertical; min-height: 9rem; }
select.field__control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7A7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.field__error { font-size: 0.8125rem; color: var(--c-black); font-weight: 600; min-height: 1px; display: none; }
.field.has-error .field__control { border-color: var(--c-black); box-shadow: 0 0 0 3px rgba(17,17,17,0.1); }
.field.has-error .field__error { display: block; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-small);
  color: var(--c-charcoal);
}
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--c-black); }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; }

.form__status {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  border: 1px solid var(--line-strong);
}
.form__status.is-visible { display: block; }

.form__note {
  font-size: var(--fs-small);
  color: var(--c-slate);
  letter-spacing: 0.01em;
  margin-top: calc(var(--space-2) * -1);
}

/* -------------------------------------------------------------------------
   19. Kontaktinfo-Block
   ------------------------------------------------------------------------- */
.contact-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-aside__item h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.contact-aside__item p { color: var(--c-slate); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   20. Rechtstexte (Impressum / Datenschutz)
   ------------------------------------------------------------------------- */
.legal { max-width: 50rem; }
.legal h2 { font-size: var(--fs-h3); margin-block: var(--space-6) var(--space-3); }
.legal h2:first-of-type { margin-top: var(--space-4); }
.legal p, .legal li { color: var(--c-charcoal); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.legal ul { list-style: none; }
.legal ul li { position: relative; padding-left: 1.4rem; }
.legal ul li::before { content: "—"; position: absolute; left: 0; color: var(--c-slate); }

/* -------------------------------------------------------------------------
   21. Danke / 404 (zentrierte Statusseiten)
   ------------------------------------------------------------------------- */
.status-page {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
}
.status-page__inner {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}
.status-page__mark {
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--c-black);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.status-page__mark--logo {
  display: block;
  width: clamp(4.5rem, 8vw, 6rem);
  height: auto;
  margin-inline: auto;
}
.status-page__title { font-size: var(--fs-display-sm); font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--ls-display); margin-bottom: var(--space-4); }
.status-page__text { color: var(--c-slate); font-size: var(--fs-lead); margin-bottom: var(--space-5); }
.status-page__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   22. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--c-black); color: rgba(250,250,250,0.7); padding-block: var(--space-8) var(--space-5); }
.footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-light);
}
.footer__brand-desc { margin-top: var(--space-4); font-size: var(--fs-small); color: rgba(250,250,250,0.6); max-width: 26rem; }
.footer__col-title { font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-white); margin-bottom: var(--space-4); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__links a { font-size: var(--fs-small); color: rgba(250,250,250,0.7); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--c-white); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--fs-small);
  color: rgba(250,250,250,0.5);
}

/* -------------------------------------------------------------------------
   23. Scroll-Reveal
   ------------------------------------------------------------------------- */
/* Die Reveal-Regeln stehen vollstaendig in Abschnitt 37. */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------------------
   24. Utilities
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 200;
  background: var(--c-black);
  color: var(--c-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-3); }

.page-hero { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem) var(--space-6); border-bottom: 1px solid var(--line); }
.page-hero__title { font-size: var(--fs-display-sm); font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1.06; margin-block: var(--space-3) var(--space-3); max-width: 20ch; }
.page-hero__intro { max-width: 42rem; color: var(--c-slate); font-size: var(--fs-lead); }

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.text-center { text-align: center; }
.section__intro--center { margin-inline: auto; }

/* -------------------------------------------------------------------------
   25. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__title { max-width: 20ch; }
  .hero__visual { justify-self: stretch; max-width: 34rem; }
}

@media (max-width: 900px) {
  .solutions__item { grid-template-columns: var(--sol-rail) minmax(0, 1fr); }
  .solutions__points { grid-column: 2; padding-top: 0; }
  .solutions__text { max-width: 60ch; }
}

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .case-grid { grid-template-columns: 1fr; }
  .case-meta { position: static; }
}

@media (max-width: 760px) {
  .nav__menu,
  .nav__actions .btn { display: none; }
  .nav__toggle { display: block; }
  .nav__actions { gap: 0; }

  /* Systemschema auf kleinen Geraeten enger, aber vollstaendig lesbar */
  .hero { padding-block: clamp(2.25rem, 1.5rem + 4vw, 3.5rem) 0; }
  .hero__title { max-width: none; }
  .hero__visual::before { inset: 0.7rem 0 -0.7rem 0.7rem; }
  .hero-system { --sys-rail: 1.75rem; }
  .hero-system::after { font-size: 11rem; bottom: -3rem; }
  .hero-system__module { padding: 0.6rem 0.7rem 0.65rem 0; }
  .hero-system__core { padding: 0.7rem 0.7rem 0.7rem 0; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero__index { gap: 1rem 1.5rem; }

  .solutions { --sol-rail: 2.25rem; }
  .solutions__title { max-width: none; }

  .grid--3 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 761px) {
  .mobile-nav { display: none; }
}

/* =========================================================================
   REVISION — ergänzende Komponenten (Care, Zusatzleistungen, Redesign,
   Projekt-Detailseiten, Formular-Infobox, Kontaktzeilen)
   ========================================================================= */

/* Preis-Label (Care / Redesign) */
.price-tag {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--c-black);
}
.price-tag small { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; color: var(--c-slate); letter-spacing: 0; }
.price-hint { font-size: var(--fs-small); color: var(--c-slate); }

/* Varelor Care — drei Stufen */

/* Redesign-Band */
@media (max-width: 760px) { .redesign { grid-template-columns: 1fr; } }

/* Zusatzleistungen */

/* Projektkarten — aufgewertet */
.project__goal { font-size: var(--fs-small); color: var(--c-charcoal); margin-top: var(--space-2); }
.project__goal strong { font-weight: 600; }
.project__link { margin-top: var(--space-4); display: inline-flex; }
.project__body .btn-link { margin-top: var(--space-4); }

/* Projekt-Detailseiten (Case) */
.case-visual {
  position: relative;
  aspect-ratio: 16 / 6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-off-white);
  border: 1px solid var(--line);
  margin-bottom: var(--space-6);
}
.case-visual::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 100% 2rem,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 2rem 100%;
}
.case-visual--dark { background: var(--c-charcoal); border-color: transparent; }
.case-visual--dark::before {
  background:
    linear-gradient(var(--line-light-faint) 1px, transparent 1px) 0 0 / 100% 2rem,
    linear-gradient(90deg, var(--line-light-faint) 1px, transparent 1px) 0 0 / 2rem 100%;
}
.case-visual__mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-size: clamp(4rem, 12vw, 9rem); color: var(--c-black); opacity: 0.10; }
.case-visual--dark .case-visual__mark { color: var(--c-white); opacity: 0.16; }
.case-visual__tag {
  position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4);
  background: rgba(17,17,17,0.9); color: var(--c-white);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-sm);
}
.case-visual--dark .case-visual__tag { background: rgba(255,255,255,0.14); }

.case-visual--consulting { background: #ebe9e4; }
.case-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--space-2);
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--c-black);
}
.case-preview__kicker {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.case-preview strong {
  max-width: 78%;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.034em;
}
.case-preview > span:last-child {
  max-width: 30rem;
  color: var(--c-slate);
  font-size: var(--fs-small);
}
.case-preview--property::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 16%;
  width: 16%;
  height: 68%;
  border: 1px solid rgba(17,17,17,0.16);
  border-bottom: 0;
}
.case-preview--automotive { color: var(--c-white); }
.case-preview--automotive > span:last-child { color: rgba(255,255,255,0.62); }
.case-preview--automotive::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -75%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
}
.case-preview--consulting::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 16%;
  width: 1px;
  height: 68%;
  background: rgba(17,17,17,0.22);
  box-shadow: 1rem 0 0 rgba(17,17,17,0.1), 2rem 0 0 rgba(17,17,17,0.05);
}

.study-disclosure {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--c-black);
  border-radius: var(--radius);
  background: var(--c-white);
}
.study-disclosure strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.study-disclosure p { color: var(--c-charcoal); font-size: var(--fs-small); }

.case-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.case-meta { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: var(--space-4); }
.case-meta__row { display: grid; gap: 0.2rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.case-meta__label { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-slate); font-weight: 600; }
.case-meta__value { color: var(--c-black); font-weight: 500; }

.case-body { display: grid; gap: var(--space-6); }
.case-section h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.case-section p { color: var(--c-charcoal); }
.case-section ul { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.case-section ul li { position: relative; padding-left: 1.5rem; color: var(--c-charcoal); font-size: var(--fs-small); }
.case-section ul li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 0.6rem; height: 1px; background: var(--c-slate); }

@media (max-width: 760px) {
  .project-preview { padding: 3.35rem 1.5rem 1.5rem; }
  .project-preview strong { font-size: clamp(1.65rem, 8vw, 2.2rem); }
  .project-preview__kicker { top: 0.95rem; right: 0.95rem; }
  .case-visual { aspect-ratio: 4 / 3; }
  .case-preview { padding: 1.75rem; }
  .case-preview strong { max-width: 88%; font-size: clamp(2rem, 10vw, 3rem); }
  .case-preview > span:last-child { max-width: 78%; }
}

/* Formular-Infobox (Testbetrieb) */
.form__status a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.form__status--info { background: var(--c-white); border-color: var(--line-strong); color: var(--c-charcoal); }

/* Projektstart: deaktivierte Felder */

/* Kontaktzeilen (Footer-Kontaktspalte) */
.footer__contact { display: grid; gap: var(--space-2); }
.footer__contact dt { font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,250,250,0.5); }
.footer__contact dd { font-size: var(--fs-small); color: rgba(250,250,250,0.8); }
.footer__contact dd a { color: inherit; }
.footer__contact dd a:hover { color: var(--c-white); }

/* =========================================================================
   REVISION 2 — Projektstart-Auswahl, Vorlagen-Hinweis, sr-only, 3-Spalten-Footer
   ========================================================================= */

/* Screenreader-only (sichtbar unsichtbar) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Projektstart: Fieldset + bedingte Monat/Jahr-Felder */

/* Vorlagen-Hinweis (Impressum/Datenschutz) */
.template-note {
  display: block;
  border: 1px solid var(--line-strong);
  background: var(--c-off-white);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  margin-bottom: var(--space-5);
}
.template-note strong { color: var(--c-black); }

/* Projektkarten-Fix: Visualbereich als echtes Blockelement rendern */
.project__visual {
  display: block;
  width: 100%;
  min-height: 14rem;
  aspect-ratio: 4 / 3;
}

.project__tag {
  z-index: 2;
}

.project__visual-mark {
  z-index: 1;
}

@media (max-width: 760px) {
  .project__visual {
    min-height: 13rem;
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================================
   26. Responsive-Nachtrag
   Die Revisionskomponenten (Care, Zusatzleistungen, Case-Layout) stehen in
   der Quelldatei hinter dem Responsive-Abschnitt und haben dessen Regeln
   ueberschrieben. Dieser Block stellt das Umbruchverhalten wieder her.
   ========================================================================= */
@media (max-width: 980px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-meta { position: static; }
}

/* =========================================================================
   27. Leistungsseite 2.0
   Ankernavigation, vier Website-Pakete, Angebotskarten mit zweistufiger
   Preislogik, Betriebsmodell, Digital Review.
   ========================================================================= */

/* Sanftes Scrollen zu Ankern, Versatz unter der fixen Navigation */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Der Versatz unter der fixen Navigation wird ausschliesslich über
   scroll-padding-top am Wurzelelement gesteuert (siehe Abschnitt 2).
   Ein zusätzliches scroll-margin-top an den Zielen hätte sich addiert und
   führte zu einem doppelten Versatz von 184 px statt 92 px. */

/* Hero-Aktionen der Unterseiten */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Ankernavigation */
.subnav {
  background: var(--c-white);
  border-bottom: 1px solid var(--line);
}
.subnav__list {
  display: flex;
  gap: clamp(1rem, 0.4rem + 2vw, 2.5rem);
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link {
  display: inline-block;
  padding: 0.9rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-charcoal);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.subnav__link:hover { color: var(--c-black); border-bottom-color: var(--line-strong); }

/* Bereichslabel (Fortsetzung der Loesungsuebersicht der Startseite) */
.svc-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-3);
}
.svc-label__num { font-variant-numeric: tabular-nums; color: var(--c-black); }

/* Kompakte Umfangs-Listen */
.scope {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
  max-width: 56rem;
}
.scope li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  line-height: 1.5;
}
.scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 1px;
  background: var(--c-slate);
}
.scope--plain { margin: 0; grid-template-columns: 1fr 1fr; max-width: none; }

/* Vier Website-Pakete */
.plan__price-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.plan__care {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--c-slate);
}
.plan__care strong { color: var(--c-black); font-weight: 600; white-space: nowrap; }

.section-cta { margin-top: var(--space-5); }

/* Angebotskarten mit zweistufiger Preislogik */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.offer__name {
  font-size: 1.3125rem;
  margin-bottom: var(--space-4);
}
.price-duo {
  margin: 0 0 var(--space-4);
  border-block: 1px solid var(--line-strong);
}
.price-duo__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 0.6rem;
}
.price-duo__row + .price-duo__row { border-top: 1px solid var(--line); }
.price-duo dt { font-size: var(--fs-small); color: var(--c-slate); }
.price-duo dd {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--c-black);
  text-align: right;
  white-space: nowrap;
}
.offer__list-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}
.offer__features { margin-bottom: var(--space-4); }
.offer__hint {
  font-size: var(--fs-small);
  color: var(--c-slate);
  margin-bottom: var(--space-4);
}
.offer__cta { margin-top: auto; }

/* Hinweisboxen und Kleingedrucktes */
.more-box {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--c-off-white);
}
.section--off .more-box { background: var(--c-white); }
.more-box p { font-size: var(--fs-small); color: var(--c-charcoal); }
.more-box__price { margin-top: var(--space-2); color: var(--c-slate); }
.more-box__price strong { color: var(--c-black); }

.fineprint {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-1);
  max-width: 56rem;
}
.fineprint li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.8125rem;
  color: var(--c-slate);
  line-height: 1.55;
}
.fineprint li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--c-slate);
}

/* Betriebsmodell in drei Schritten */

.group-title {
  font-size: 1.125rem;
  margin: var(--space-7) 0 var(--space-4);
}
.group-title:first-of-type { margin-top: 0; }
.group-title--tight { margin: 0 0 var(--space-2); }

.price-disclaimer {
  margin-top: var(--space-5);
  font-size: 0.8125rem;
  color: var(--c-slate);
  max-width: 56rem;
}

/* Digital Review */
.review-card {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  border: 1px solid var(--c-black);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  background: var(--c-white);
}
.review-card__title { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.review-card__price { margin-bottom: var(--space-4); }
.review-card__text { color: var(--c-charcoal); margin-bottom: var(--space-3); max-width: 52ch; }
.review-card__cta { margin-top: var(--space-2); }
.review-card__aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.review-card__aside .offer__features { margin-bottom: 0; }

/* CTA-Block mit zwei Aktionen */
.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.btn--ghost-dark {
  background: transparent;
  color: var(--c-white);
  border-color: var(--line-light);
}
.btn--ghost-dark:hover { border-color: var(--c-white); background: var(--c-white); color: var(--c-black); }
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }
  .scope { grid-template-columns: 1fr 1fr; }
  .review-card { grid-template-columns: 1fr; }
  .review-card__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-4); }
}
@media (max-width: 760px) {
  .scope { grid-template-columns: 1fr; }
  .scope--plain { grid-template-columns: 1fr; }
  .price-duo dd { white-space: normal; }
}

/* =========================================================================
   28. Systemvisualisierungen (Leistungsseite)
   Drei eigenstaendige Prozessansichten: Anfrage-Automation, KI-FAQ-Assistent,
   Varelor Digital Review. Ausschliesslich bestehende Tokens, keine neuen
   Akzentfarben, keine externen Abhaengigkeiten. Die Knoten- und Linienlogik
   setzt die Formsprache des Hero-Systemdiagramms fort.
   Alle Inhalte sind ohne JavaScript und ohne Animation vollstaendig sichtbar.
   ========================================================================= */

/* --- Rahmengeruest: Erklaerspalte + Visualisierung ------------------------ */
.sysviz {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  margin-bottom: var(--space-7);
}

/* Wechselnde Anordnung: Visualisierung links, Text rechts.
   Die Textspalte steht im Quelltext zuerst und bleibt auf Mobilgeraeten oben. */
.sysviz--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.sysviz--flip .sysviz__aside { order: 2; }
.sysviz--flip .sysviz__panel { order: 1; }

/* Breite Variante: Kopfzeile oben, Auswertung ueber die volle Spaltenbreite */
.sysviz--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  margin-bottom: 0;
}

.sysviz__head { max-width: 46rem; }

.sysviz__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}

.sysviz__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
  max-width: 24ch;
}
.sysviz--wide .sysviz__title { max-width: none; }

.sysviz__text {
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  max-width: 46ch;
}

.sysviz__note {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--c-slate);
}

/* Panel: gleiche Kartenlogik wie .offer, damit es auf hellem und
   Off-White-Hintergrund identisch sitzt */
.sysviz__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  overflow: hidden;
}

.sysviz__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.sysviz__bar-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-black);
}

.sysviz__chip {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

/* Abschlussband: schwarzer Zustandsblock am Ende eines Ablaufs */
.sysviz__final {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--c-black);
}
.sysviz__final-label {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-white);
  line-height: 1.3;
}
.sysviz__final-note {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.62);
}

/* -------------------------------------------------------------------------
   28c. Varelor Digital Review — Beispielanalyse
   ------------------------------------------------------------------------- */
.dr {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

.dr__score {
  padding-right: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  border-right: 1px solid var(--line);
}
.dr__score-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.dr__score-value {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: var(--space-2);
}
.dr__score-value strong {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-black);
}
.dr__score-value span { font-size: var(--fs-small); color: var(--c-slate); }

.dr__meter,
.dr__bar {
  display: block;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.dr__meter { margin-top: var(--space-3); }

.dr__meter-fill,
.dr__bar-fill {
  display: block;
  height: 100%;
  background: var(--c-black);
  transform-origin: left center;
  transform: scaleX(var(--dr-v, 1));
}

.dr__subject {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--c-slate);
}

.dr__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.dr__pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.dr__pillar:last-child { padding-bottom: 0; border-bottom: 0; }
.dr__pillar-index {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate);
}
.dr__pillar-name {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-black);
  line-height: 1.4;
}
.dr__pillar-score {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-black);
  white-space: nowrap;
}
.dr__pillar-score span { color: var(--c-slate); font-weight: 500; }
.dr__bar {
  grid-column: 2 / -1;
  align-self: center;
}

.dr__insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.dr__insight-title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}
.dr__list { display: grid; gap: 0.45rem; margin: 0; padding: 0; }
.dr__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.dr__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--c-slate);
}

.dr__disclaimer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--c-slate);
}

.sysviz--managed .dr__meter-fill,
.sysviz--managed .dr__bar-fill {
  transform: scaleX(0);
  transition: transform 900ms var(--ease);
}
.sysviz--managed.is-seen .dr__meter-fill,
.sysviz--managed.is-seen .dr__bar-fill { transform: scaleX(var(--dr-v, 1)); }
.sysviz--managed .dr__pillar:nth-child(1) .dr__bar-fill { transition-delay: 140ms; }
.sysviz--managed .dr__pillar:nth-child(2) .dr__bar-fill { transition-delay: 260ms; }
.sysviz--managed .dr__pillar:nth-child(3) .dr__bar-fill { transition-delay: 380ms; }
.sysviz--managed .dr__pillar:nth-child(4) .dr__bar-fill { transition-delay: 500ms; }
.sysviz--managed .dr__pillar:nth-child(5) .dr__bar-fill { transition-delay: 620ms; }

/* Reduzierte Bewegung: alles statisch im Endzustand */
@media (prefers-reduced-motion: reduce) {
  .sysviz--managed .dr__meter-fill,
  .sysviz--managed .dr__bar-fill { transform: scaleX(var(--dr-v, 1)); transition: none; }
}

/* -------------------------------------------------------------------------
   28e. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sysviz,
  .sysviz--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  /* Auf schmalen Breiten steht der Text immer zuerst */
  .sysviz--flip .sysviz__aside,
  .sysviz--flip .sysviz__panel { order: 0; }
  .sysviz__title,
  .sysviz__text { max-width: none; }

  .dr { grid-template-columns: minmax(0, 1fr); }
  .dr__score {
    padding-right: 0;
    padding-bottom: var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 34rem) {
  .dr__insights { grid-template-columns: 1fr; }
}

/* =========================================================================
   29. Technische Korrekturen v4.7
   Ausschliesslich messbar begruendete Korrekturen. Keine gestalterischen
   Aenderungen: Farben, Schriften, Raster und Komponenten bleiben unveraendert.
   ========================================================================= */

/* WCAG 2.2 AA, 2.5.8 Zielgroesse (Minimum):
   Die Kontaktlinks in der Fusszeile waren als reine Inline-Links 17 px hoch
   und lagen 22.2 px auseinander. Sie erhalten eine Mindesthoehe von 24 px und
   genuegend Zeilenabstand, damit sich benachbarte Ziele nicht ueberlagern.
   Schriftgroesse, Farbe und Position der Fusszeile bleiben unveraendert. */
.footer__contact dd { line-height: 1.95; }

.footer__contact dd a {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.22rem;
  line-height: 1.35;
}

/* =========================================================================
   30. Iteration v4.8 — Positionierung, Menschen, Digital Review
   Neue Bausteine auf Basis der bestehenden Tokens. Keine neuen Farben,
   keine neuen Schriften, keine neuen Abhaengigkeiten.
   ========================================================================= */

/* Anwendungsfaelle: ersetzt die frueheren Preiskarten der Bereiche 02 und 03
   durch eine ruhige, wertfreie Aufzaehlung typischer Ausgangslagen. */
.usecases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.usecases article {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-3);
}
.usecase__index {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate);
  line-height: 1;
}
.usecase__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--c-black);
  margin-top: var(--space-2);
}
.usecase__text {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--c-slate);
  line-height: 1.55;
}

/* Einspaltige Variante der kompakten Umfangsliste */
.scope--single { grid-template-columns: minmax(0, 1fr); }

/* Digital Review: Bereichsuebersicht in der Einstiegskarte */
.dr-pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.dr-pillars-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--c-charcoal);
}
.dr-pillars-list em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate);
  white-space: nowrap;
}
.dr-pillars-total {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-black);
}

/* Digital Review: Leitfrage je Bereich und Kurzurteil */
.dr__pillar-question {
  grid-column: 2 / -1;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--c-slate);
}
.dr__verdict {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-black);
  line-height: 1.35;
}

/* Der Gruenderbereich.
   Portrait und Text stehen nebeneinander, das Bild traegt dieselbe
   versetzte Rahmenkante wie das Systemschema im Auftritt der Startseite.
   Auf schmalen Geraeten steht das Bild oben und bleibt bewusst begrenzt,
   damit der Text nicht nach unten gedraengt wird. */
.gruender {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .gruender { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
}

/* --- Portrait ------------------------------------------------------- */
.gruender__figur {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 22rem;
}

@media (min-width: 62rem) {
  .gruender__figur { max-width: 28rem; }
}

/* Versetzte zweite Ebene, gleiche Formsprache wie im Hero */
.gruender__figur::before {
  content: "";
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.gruender__bild {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Der Blick sitzt im oberen Drittel: so bleibt das Gesicht in jedem
     Zuschnitt richtig im Bild. */
  object-position: 50% 22%;
  border-radius: var(--radius-lg);
  background: var(--c-off-white);
}

/* --- Text ------------------------------------------------------------ */
.gruender__text { padding-top: var(--space-2); }

.gruender__rolle {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}

.gruender__name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--c-black);
  margin-bottom: var(--space-4);
}

.gruender__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-charcoal);
  max-width: 46ch;
}

.gruender__note {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 1px solid var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-black);
  max-width: 44ch;
}

.gruender__kontakt {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-4);
  font-size: var(--fs-small);
}

.gruender__kontakt a {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.15rem;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-hover) var(--ease-out);
}
.gruender__kontakt a:hover,
.gruender__kontakt a:focus-visible { text-decoration-color: var(--c-black); }

@media (max-width: 30rem) {
  .gruender__figur::before { inset: 0.7rem -0.7rem -0.7rem 0.7rem; }
}

/* Primaerer Kontaktweg auf der Kontaktseite */
.contact-primary {
  border: 1px solid var(--c-black);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  padding: var(--space-4);
}
.contact-primary__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-2);
}
.contact-primary__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--c-black);
}
.contact-primary__role {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--c-slate);
}
.contact-primary__lines {
  margin-top: var(--space-3);
  display: grid;
  gap: 0.15rem;
  font-size: var(--fs-small);
}
.contact-primary__lines a {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.15rem;
  color: var(--c-black);
}
.contact-primary__lines a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hinweisbox ueber dem Kontaktformular */
.form-intro {
  border-left: 2px solid var(--c-black);
  padding-left: var(--space-4);
  margin-bottom: var(--space-5);
}
.form-intro strong { display: block; margin-bottom: 0.2rem; }
.form-intro p { font-size: var(--fs-small); color: var(--c-charcoal); }

/* Responsive */
@media (max-width: 980px) {
  .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
}
@media (max-width: 560px) {
  .usecases { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* Unsichtbare Sprungmarken für ältere externe Links.
   Sie erzeugen keinen Platz und keine Darstellung, sondern nur ein Ziel. */
.anchor-alias {
  display: block;
  height: 0;
  overflow: hidden;
}

/* =========================================================================
   31. VARELOR DESIGNSYSTEM v5
   Semantische Flaechen, Motion-Tokens, Theme-Wechsel.

   Grundgedanke: Die Marken-Variablen werden innerhalb eines dunklen
   Bereichs umdefiniert. Dadurch wird die gesamte bestehende Komponenten-
   bibliothek in einem Zug themefaehig, ohne dass jede einzelne Regel
   angefasst werden muss. Flaechen, die immer dunkel bleiben muessen,
   verwenden die festen --brand-* Konstanten.
   ========================================================================= */

:root {
  /* Feste Markenkonstanten. Diese kippen nie. */
  --brand-black: #111111;
  --brand-ink: #0D0D10;      /* tiefste Flaeche: dunkle Abschnitte und Abschluss */
  --brand-charcoal: #2B2B2B;
  --brand-white: #FFFFFF;
  --brand-off-white: #FAFAFA;

  /* Flaechen des aktuellen Themes */
  --surface: #FAFAFA;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2F2F3;

  /* Motion. Ein einziges Vokabular fuer die ganze Website. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-hover: 220ms;
  --dur-state: 320ms;
  --dur-reveal: 720ms;
  --dur-theme: 620ms;

  /* Typografie: grosszuegiger auf grossen Displays, ruhig auf kleinen */
  --fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.75rem);
  --fs-display-sm: clamp(1.95rem, 1.4rem + 2.4vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 1.35rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.06rem + 0.6vw, 1.55rem);

  /* Layout: begrenzte Zeilenlaenge auch auf 4K */
  --max-width: 1280px;
  --max-width-wide: 1560px;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 0.4rem + 3.4vw, 4rem);
  --section-y: clamp(5.5rem, 3rem + 8vw, 11rem);
}

@media (min-width: 1800px) {
  :root { --max-width: 1400px; --gutter: 5rem; }
}

/* --- Dunkles Theme -------------------------------------------------------
   .section--dark bleibt als Alias bestehen, damit vorhandenes Markup
   unveraendert weiterfunktioniert. */
[data-theme="dark"],
.section--dark {
  --c-black: #F5F5F6;
  --c-charcoal: rgba(245, 245, 246, 0.80);
  --c-slate: rgba(245, 245, 246, 0.60);
  --c-white: #121215;
  --c-off-white: #1A1A1E;

  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.26);
  --line-faint: rgba(255, 255, 255, 0.06);

  --surface: var(--brand-ink);
  --surface-raised: #141418;
  --surface-sunken: #08080A;

  color: var(--c-charcoal);
}

[data-theme="light"] {
  --surface: #FAFAFA;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2F2F3;
}

/* Flaechen anwenden */
.section[data-theme] { background: var(--surface); }
.section--dark { background: var(--surface); }
.section--off  { --surface: #FAFAFA; --surface-raised: #FFFFFF; background: var(--surface); }
.section--white { --surface: #FFFFFF; --surface-raised: #FAFAFA; background: var(--surface); }

/* Die alten Sonderregeln fuer dunkle Bereiche werden neutralisiert:
   Ueberschriften nehmen jetzt die umgedrehte Tintenfarbe. */
.section--dark h1,
.section--dark h2,
.section--dark h3,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--c-black); }

.section--dark .eyebrow,
[data-theme="dark"] .eyebrow { color: var(--c-slate); }

/* Der Seitenhintergrund folgt dem Theme des aktuell sichtbaren Bereichs.
   Das verhindert helle Raender ueber und unter dunklen Abschnitten. */
html { background: var(--page-surface, #FAFAFA); }
body {
  background: var(--page-surface, #FAFAFA);
  transition: background-color var(--dur-theme) var(--ease-inout);
}

/* --- Flaechen, die immer dunkel bleiben --------------------------------- */
.project__visual--b,
.case-visual--dark { background: var(--brand-charcoal); }
.project__tag,
.case-visual__tag { background: rgba(17, 17, 17, 0.9); color: var(--brand-white); }
.case-visual--dark .case-visual__tag { background: rgba(255, 255, 255, 0.14); }
.project-preview--automotive,
.case-preview--automotive { color: var(--brand-white); }

/* =========================================================================
   32. Navigation, die dem Theme folgt
   Die Kopfzeile uebernimmt Flaeche, Tinte und Haarlinie des Bereichs,
   ueber dem sie gerade liegt. Der Wechsel laeuft weich mit.
   ========================================================================= */
.site-header {
  background: color-mix(in srgb, var(--page-surface, #FAFAFA) 84%, transparent);
  transition:
    background-color var(--dur-theme) var(--ease-inout),
    border-color var(--dur-theme) var(--ease-inout),
    color var(--dur-theme) var(--ease-inout);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--page-surface, #FAFAFA) 93%, transparent);
  border-bottom-color: var(--page-line, rgba(17, 17, 17, 0.14));
}

/* Tinte der Kopfzeile folgt dem Theme */
.site-header .logo { color: var(--page-ink, #111111); }
.nav__link { color: var(--page-ink-muted, #2B2B2B); }
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--page-ink, #111111); }
.nav__link::after { background: var(--page-ink, #111111); }
.nav__toggle span { background: var(--page-ink, #111111); }

/* Der Hauptbutton in der Kopfzeile dreht sich mit */
.site-header .btn--primary {
  background: var(--page-ink, #111111);
  border-color: var(--page-ink, #111111);
  color: var(--page-surface, #FAFAFA);
}
.site-header .btn--primary:hover {
  background: transparent;
  color: var(--page-ink, #111111);
}

/* Die Signatur in der Kopfzeile braucht keine zweite Datei und keinen
   Invertierungstrick: sie uebernimmt die Tinte des aktuellen Themes. */

/* Mobiles Panel uebernimmt ebenfalls das Theme */
.mobile-nav {
  background: var(--page-surface, #FAFAFA);
  transition:
    transform var(--dur-reveal) var(--ease-out),
    opacity var(--dur-state) var(--ease-out),
    visibility var(--dur-state) var(--ease-out),
    background-color var(--dur-theme) var(--ease-inout);
}
.mobile-nav__link {
  color: var(--page-ink, #111111);
  border-bottom-color: var(--page-line, rgba(17, 17, 17, 0.14));
}
.mobile-nav__link[aria-current="page"] { color: var(--page-ink-muted, #6B6B6B); }
.mobile-nav .btn--primary {
  background: var(--page-ink, #111111);
  border-color: var(--page-ink, #111111);
  color: var(--page-surface, #FAFAFA);
}

/* Fokusring folgt ebenfalls dem Theme */
:focus-visible { outline-color: var(--page-ink, #111111); }
[data-theme="dark"] :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-black); }

/* Ohne Farbmisch-Unterstuetzung bleibt die Kopfzeile schlicht deckend */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--page-surface, #FAFAFA); }
}

/* =========================================================================
   33. Automation-Demo
   Ein bedienbares Beispielsystem: Auswahl treffen, Ablauf starten,
   Schritte einzeln oeffnen, Ablauf wiederholen.
   Ohne JavaScript bleibt der Ablauf als statische Liste lesbar.
   ========================================================================= */
.autodemo {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  align-items: start;
}

/* --- Eingabeseite ------------------------------------------------------- */
.autodemo__input {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--c-off-white);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.autodemo__legend {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-3);
}
.autodemo__field { margin-bottom: var(--space-3); }
.autodemo__label {
  display: block;
  font-size: 0.75rem;
  color: var(--c-slate);
  margin-bottom: 0.4rem;
}

/* Auswahl als Segmentgruppe statt als Formularfeld */
.autodemo__choices { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.autodemo__choice {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.autodemo__choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.autodemo__choice[aria-pressed="true"] {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.autodemo__note {
  font-size: 0.75rem;
  color: var(--c-black);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
}

.autodemo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.autodemo__run {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-black);
  border: 1px solid var(--c-black);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background-color var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
.autodemo__run:hover { background: var(--c-charcoal); }
.autodemo__run[disabled] { opacity: 0.45; cursor: default; }
.autodemo__run-arrow { transition: transform var(--dur-hover) var(--ease-out); }
.autodemo__run:hover .autodemo__run-arrow { transform: translateX(3px); }

.autodemo__reset {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.autodemo__reset:hover { border-color: var(--c-black); color: var(--c-black); }
.autodemo__reset[hidden] { display: none; }

/* --- Ablaufseite -------------------------------------------------------- */
.autodemo__flow {
  --step-rail: 1.6rem;
  position: relative;
  padding-left: var(--step-rail);
}
.autodemo__rail {
  position: absolute;
  left: 0; top: 1.15rem; bottom: 1.15rem;
  width: 1px;
  background: var(--line);
}
/* Der gefuellte Teil waechst mit dem Fortschritt */
.autodemo__rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-black);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  transition: transform var(--dur-reveal) var(--ease-inout);
}

.autodemo__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.autodemo__step { position: relative; }

.autodemo__node {
  position: absolute;
  left: calc(-1 * var(--step-rail));
  top: 1.15rem;
  width: 7px; height: 7px;
  margin-left: -3.5px; margin-top: -3.5px;
  background: var(--c-white);
  border: 1px solid var(--line-strong);
  transform: rotate(45deg);
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}
.autodemo__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--step-rail));
  top: 1.15rem;
  width: var(--step-rail); height: 1px;
  background: var(--line);
  transition: background-color var(--dur-state) var(--ease-out);
}

/* Der Kopf eines Schritts ist eine echte Schaltflaeche */
.autodemo__head {
  font: inherit;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  background: var(--c-off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.autodemo__head:hover { border-color: var(--line-strong); transform: translateY(-1px); }

.autodemo__index {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums; color: var(--c-slate);
  transition: color var(--dur-state) var(--ease-out);
}
.autodemo__name {
  font-family: var(--font-heading);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--c-black); line-height: 1.35;
}
.autodemo__state {
  justify-self: end;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-slate);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
  transition:
    color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}

/* Zustaende */
.autodemo__step[data-state="laeuft"] .autodemo__node { background: var(--c-black); border-color: var(--c-black); transform: rotate(45deg) scale(1.25); }
.autodemo__step[data-state="laeuft"] .autodemo__head { border-color: var(--line-strong); }
.autodemo__step[data-state="laeuft"] .autodemo__state { color: var(--c-black); border-color: var(--line-strong); }

.autodemo__step[data-state="fertig"] .autodemo__node { background: var(--c-black); border-color: var(--c-black); }
.autodemo__step[data-state="fertig"] .autodemo__index { color: var(--c-black); }
.autodemo__step[data-state="fertig"]::before { background: var(--line-strong); }
.autodemo__step[data-state="fertig"] .autodemo__state {
  color: var(--c-white); background: var(--c-black); border-color: var(--c-black);
}

/* Detailfeld je Schritt */
.autodemo__detail {
  overflow: hidden;
  border-left: 1px solid var(--line);
  margin-left: 0.45rem;
  padding-left: 0.9rem;
}
.autodemo__detail[hidden] { display: none; }
.autodemo__detail-inner {
  padding-block: var(--space-3);
  animation: autodemo-open 420ms var(--ease-out) both;
}
@keyframes autodemo-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Kleine Systemansichten innerhalb der Details */
.autodemo__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--c-white);
  padding: 0.75rem 0.9rem;
}
.autodemo__panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  padding-bottom: 0.5rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-slate);
}
.autodemo__rows { display: grid; margin: 0; }
.autodemo__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding-block: 0.35rem;
  font-size: 0.75rem;
}
.autodemo__row + .autodemo__row { border-top: 1px solid var(--line); }
.autodemo__row dt { color: var(--c-slate); }
.autodemo__row dd { color: var(--c-black); font-weight: 500; text-align: right; }
.autodemo__mail p { font-size: 0.75rem; color: var(--c-charcoal); line-height: 1.55; }
.autodemo__mail p + p { margin-top: 0.4rem; }
.autodemo__hint { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--c-slate); }

/* Abschlussband */
.autodemo__result {
  margin-top: var(--space-4);
  margin-left: var(--step-rail);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out);
}
.autodemo.is-done .autodemo__result { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .autodemo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .autodemo__head { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.5rem; }
  .autodemo__state { grid-column: 2; justify-self: start; }
}

/* Reduzierte Bewegung: alles ohne Uebergaenge, Inhalte bleiben bedienbar */
@media (prefers-reduced-motion: reduce) {
  .autodemo__detail-inner { animation: none; }
  .autodemo__rail-fill { transition: none; }
}

/* Mehr Luft im Schrittkopf: Name und Statusfeld sollen sich nie beruehren. */
.autodemo__head { column-gap: var(--space-4); padding: 0.8rem 1rem; }
.autodemo__name { padding-right: 0.25rem; }
.autodemo__state { font-size: 0.5625rem; letter-spacing: 0.1em; padding: 0.22rem 0.5rem; }

/* =========================================================================
   34. KI-Demo
   Eine kontrollierte Demonstration: Frage waehlen, Wissensabgleich sehen,
   Antwort aus freigegebenem Wissen erhalten oder an einen Menschen
   uebergeben werden. Kein frei laufender Chat, kein vorgetaeuschtes
   Tippen ueber Minuten.
   ========================================================================= */
.kidemo { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Freigegebenes Wissen ---------------------------------------------- */
.kidemo__sources {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.kidemo__sources-label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-slate);
}
.kidemo__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.kidemo__chip {
  font-size: 0.75rem; color: var(--c-charcoal);
  background: var(--c-off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out);
}
/* Die gerade geprüfte Quelle hebt sich hervor */
.kidemo__chip.is-pruefend { border-color: var(--line-strong); }
.kidemo__chip.is-treffer {
  background: var(--c-black); border-color: var(--c-black); color: var(--c-white);
}

/* --- Verlauf ------------------------------------------------------------ */
.kidemo__thread {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 8.5rem;
}
.kidemo__empty {
  font-size: 0.8125rem; color: var(--c-slate); line-height: 1.6;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}

.kidemo__line { animation: kidemo-in 420ms var(--ease-out) both; }
@keyframes kidemo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.kidemo__msg {
  max-width: 92%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kidemo__msg--in { margin-right: auto; background: var(--c-off-white); }
.kidemo__msg--out {
  margin-left: auto; background: var(--c-white);
  border-color: var(--line-strong);
  border-left: 2px solid var(--c-black);
}
.kidemo__who {
  display: block; font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-slate); margin-bottom: 0.3rem;
}
.kidemo__msg p { font-size: 0.8125rem; line-height: 1.55; color: var(--c-charcoal); }
.kidemo__msg--out p { color: var(--c-black); }

/* Verarbeitungszeile: zeigt, was das System gerade tut */
.kidemo__step {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; color: var(--c-slate);
}
.kidemo__step::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.kidemo__node {
  flex: 0 0 auto; width: 7px; height: 7px;
  background: var(--c-white); border: 1px solid var(--c-black);
  transform: rotate(45deg);
  transition: background-color var(--dur-state) var(--ease-out);
}
.kidemo__step--treffer .kidemo__node { background: var(--c-black); }
.kidemo__step--offen .kidemo__node { background: var(--c-white); }

/* Pulsierender Punkt nur waehrend der Verarbeitung */
.kidemo__step--pruefend .kidemo__node { animation: kidemo-puls 1.1s var(--ease-inout) infinite; }
@keyframes kidemo-puls {
  0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
  50%      { transform: rotate(45deg) scale(1.35); opacity: 0.55; }
}

/* Uebergabe an einen Menschen: klarer Abschluss, kein Fehlerzustand */
.kidemo__handover {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--c-black);
}
.kidemo__handover-label {
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--c-white); line-height: 1.3;
}
.kidemo__handover-note {
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-white); opacity: 0.62;
}

/* --- Fragen ------------------------------------------------------------- */
.kidemo__ask { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.kidemo__ask-label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-slate); margin-bottom: var(--space-2);
}
.kidemo__questions { display: grid; gap: 0.4rem; }
.kidemo__question {
  font: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  text-align: left;
  font-size: 0.8125rem; color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.kidemo__question:hover {
  border-color: var(--line-strong);
  color: var(--c-black);
  transform: translateY(-2px);
}
.kidemo__question[disabled] { opacity: 0.4; cursor: default; transform: none; }
.kidemo__question.is-beantwortet { opacity: 0.5; }
.kidemo__question-arrow {
  color: var(--c-slate);
  transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.kidemo__question:hover .kidemo__question-arrow { transform: translateX(4px); color: var(--c-black); }

.kidemo__reset {
  font: inherit; margin-top: var(--space-3);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-charcoal); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.55rem 0.9rem; cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.kidemo__reset:hover { border-color: var(--c-black); color: var(--c-black); }
.kidemo__reset[hidden] { display: none; }

.kidemo__fallback p { font-size: 0.8125rem; color: var(--c-charcoal); line-height: 1.6; }
.kidemo__fallback p + p { margin-top: var(--space-2); }

@media (max-width: 30rem) {
  .kidemo__msg { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kidemo__line { animation: none; }
  .kidemo__step--pruefend .kidemo__node { animation: none; }
}

/* =========================================================================
   35. Digital Review, interaktiv
   Die fuenf Bereiche sind waehlbar. Jeder oeffnet eine Beobachtung und
   einen moeglichen naechsten Schritt. Punktelogik und Beispielkenn-
   zeichnung bleiben unveraendert.
   ========================================================================= */
.dr__areas { display: grid; gap: var(--space-4); }

.dr__pick {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--c-slate);
}

/* Der Bereich wird zur Schaltflaeche, behaelt aber sein ruhiges Aussehen */
.dr__pillar { padding-bottom: 0; border-bottom: 0; }
.dr__pillar + .dr__pillar { margin-top: 0.15rem; }

.dr__pillar-btn {
  font: inherit;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: 0.4rem;
  padding: 0.7rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.dr__pillar:last-child .dr__pillar-btn { border-bottom-color: transparent; }
.dr__pillar-btn:hover {
  background: var(--c-off-white);
  border-color: var(--line);
  transform: translateX(2px);
}
.dr__pillar-btn[aria-selected="true"] {
  background: var(--c-off-white);
  border-color: var(--line-strong);
  transform: none;
}
.dr__pillar-btn[aria-selected="true"] .dr__pillar-index { color: var(--c-black); }

/* Der Balken bekommt im gewaehlten Zustand mehr Gewicht */
.dr__bar { transition: height var(--dur-state) var(--ease-out); }
.dr__pillar-btn[aria-selected="true"] .dr__bar { height: 3px; }

/* Detailpanel */
.dr__panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--c-off-white);
  padding: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  animation: dr-panel-in 380ms var(--ease-out) both;
}
.dr__panel[hidden] { display: none; }
@keyframes dr-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dr__panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  padding-bottom: 0.5rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-slate);
}
.dr__panel-head span:last-child {
  font-variant-numeric: tabular-nums; color: var(--c-black);
}
.dr__panel-obs, .dr__panel-fix {
  font-size: 0.8125rem; line-height: 1.6; color: var(--c-charcoal);
}
.dr__panel-fix { margin-top: 0.5rem; }
.dr__panel-obs strong, .dr__panel-fix strong { color: var(--c-black); }

/* Score zaehlt beim Eintritt ruhig hoch, ohne Layoutsprung */
.dr__score-value strong { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .dr__areas { gap: var(--space-3); }
}
@media (max-width: 30rem) {
  .dr__pillar-btn { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
  .dr__pillar-score { grid-column: 2; justify-self: start; }
  .dr__pillar-question { grid-column: 2; }
  .dr__bar { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .dr__panel { animation: none; }
}

/* =========================================================================
   36. Microinteractions
   Ein einziges Vokabular fuer alle Zustaende: eine Flaeche laeuft von unten
   ein, eine Haarlinie zeichnet sich von links, ein Knoten fuellt sich.
   Alles laeuft ueber transform und opacity und bleibt bei reduzierter
   Bewegung im Endzustand ohne Animation.
   ========================================================================= */

/* --- Schaltflaechen: die Gegenfarbe laeuft von unten ein ------------------ */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.btn--primary::before,
.btn--ghost::before,
.btn--ghost-dark::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-state) var(--ease-out);
}

.btn--primary::before { background: var(--c-charcoal); }
.btn--ghost::before { background: var(--c-black); }
.btn--ghost-dark::before { background: var(--c-white); }

.btn--primary:hover::before,
.btn--primary:focus-visible::before,
.btn--ghost:hover::before,
.btn--ghost:focus-visible::before,
.btn--ghost-dark:hover::before,
.btn--ghost-dark:focus-visible::before { transform: scaleY(1); }

/* Die Grundfarben bleiben stehen, nur die Schriftfarbe wechselt mit. */
.btn--primary:hover { background: var(--c-black); border-color: var(--c-black); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: transparent; border-color: var(--c-black); color: var(--c-white); }
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible { background: transparent; border-color: var(--c-white); color: var(--c-black); }

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* --- Textlink mit Pfeil: die Linie zeichnet sich, der Pfeil ruecktvor ---- */
.btn-link { position: relative; gap: 0.55rem; }

.btn-link__text {
  position: relative;
  display: inline-block;
}
.btn-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-state) var(--ease-out);
}
.btn-link:hover .btn-link__text::after,
.btn-link:focus-visible .btn-link__text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn-link .btn-link__arrow {
  opacity: 0.6;
  transition:
    transform var(--dur-state) var(--ease-out),
    opacity var(--dur-state) var(--ease-out);
}
.btn-link:hover .btn-link__arrow,
.btn-link:focus-visible .btn-link__arrow { transform: translateX(5px); opacity: 1; }

/* --- Knotenmarke: der wiederkehrende Zustandswechsel --------------------- */
.node-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  transform: rotate(45deg);
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}

.card:hover .node-mark,
.card:focus-within .node-mark,
.sector:hover .node-mark,
.project:hover .node-mark,
.project:focus-within .node-mark,
.usecases article:hover .node-mark,
.feature-list__item:hover .node-mark {
  background: var(--c-black);
  border-color: var(--c-black);
  transform: rotate(45deg) scale(1.2);
}

/* --- Karten: Haarlinie oben statt weichem Schlagschatten ----------------- */
.card,
.sector,
.project {
  position: relative;
  transition:
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out);
}

.card::after,
.sector::after,
.project::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-state) var(--ease-out);
  pointer-events: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card:hover::after,
.card:focus-within::after,
.sector:hover::after,
.project:hover::after,
.project:focus-within::after { transform: scaleX(1); }

.card:hover,
.card:focus-within,
.sector:hover,
.project:hover,
.project:focus-within {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -22px rgba(17, 17, 17, 0.55);
}

.card__index {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: color var(--dur-state) var(--ease-out);
}
.usecase__index {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: color var(--dur-state) var(--ease-out);
}
.card:hover .card__index,
.usecases article:hover .usecase__index { color: var(--c-black); }

/* Anwendungsfaelle: die obere Linie faerbt sich, statt die Karte zu heben */
.usecases article {
  position: relative;
  transition: border-color var(--dur-state) var(--ease-out);
}
.usecases article::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-state) var(--ease-out);
}
.usecases article:hover::after { transform: scaleX(1); }

/* Leistungsliste: die Zeile ruecktvor, die Nummer wird deutlicher */
.feature-list__item {
  transition:
    background-color var(--dur-state) var(--ease-out),
    padding-left var(--dur-state) var(--ease-out);
}
.feature-list__item:hover { background: var(--c-off-white); }
.feature-list__num { transition: color var(--dur-state) var(--ease-out); }
.feature-list__item:hover .feature-list__num { color: var(--c-black); }

/* --- Navigation und Verweise -------------------------------------------- */
.subnav__link { position: relative; }
.subnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-state) var(--ease-out);
}
.subnav__link:hover::after,
.subnav__link:focus-visible::after,
.subnav__link[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.footer__links a,
.footer__contact dd a {
  position: relative;
  transition: color var(--dur-hover) var(--ease-out);
}
.footer__links a::after,
.footer__contact dd a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-state) var(--ease-out);
}
.footer__links a:hover::after,
.footer__links a:focus-visible::after,
.footer__contact dd a:hover::after,
.footer__contact dd a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Formularfelder ------------------------------------------------------ */
.field__control {
  transition:
    border-color var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}
.field__control:hover:not(:focus) { border-color: var(--c-charcoal); }
.field__label { transition: color var(--dur-state) var(--ease-out); }
.field:focus-within .field__label { color: var(--c-black); }

/* --- Reduzierte Bewegung ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active { transform: none; }
  .card:hover,
  .card:focus-within,
  .sector:hover,
  .project:hover,
  .project:focus-within { transform: none; }
  .btn-link:hover .btn-link__arrow { transform: none; }
  .node-mark,
  .card:hover .node-mark,
  .project:hover .node-mark { transform: rotate(45deg); }
}

/* --- Branchenzeichen: gezeichnetes Piktogramm mit Zustandswechsel -------- */
.sector__icon {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--c-slate);
  transition: color var(--dur-state) var(--ease-out);
}
.sector__icon svg { display: block; overflow: visible; }

.sector__icon-fill {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition:
    opacity var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}

.sector:hover .sector__icon,
.sector:focus-within .sector__icon { color: var(--c-black); }
.sector:hover .sector__icon-fill,
.sector:focus-within .sector__icon-fill { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .sector__icon-fill { transform: none; }
  .sector:hover .sector__icon-fill { transform: none; }
}

/* =========================================================================
   37. Scroll-Reveal und Seitenuebergaenge

   Reveal: eine Grundbewegung, drei Abstufungen. Geschwister im gleichen
   Raster erscheinen nacheinander; die Reihenfolge setzt JavaScript ueber
   --reveal-i. Ohne JavaScript ist alles sofort sichtbar (siehe noscript).

   Uebergang: Browser mit dokumentuebergreifenden View Transitions blenden
   selbst weich um. Alle anderen bekommen denselben Effekt ueber eine
   kurze Abblende beim Verlassen der Seite.
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-entry),
    transform var(--dur-reveal) var(--ease-entry);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Grosse Flaechen kommen etwas weiter von unten, kleine Zeilen weniger */
.reveal[data-reveal="weit"] { transform: translate3d(0, 34px, 0); }
.reveal[data-reveal="ruhig"] { transform: translate3d(0, 10px, 0); }
.reveal[data-reveal="blende"] { transform: none; }

/* --- Seitenuebergang ------------------------------------------------------
   Erste Wahl: der Browser blendet selbst um. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: seite-aus 240ms var(--ease-inout) both;
}
::view-transition-new(root) {
  animation: seite-ein 420ms var(--ease-entry) both;
}

@keyframes seite-aus {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0, -8px, 0); }
}
@keyframes seite-ein {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Der Kopfbereich bleibt beim Wechsel stehen. Der Fussbereich bekommt
   bewusst keinen eigenen Namen, weil er auf jeder Seite an einer anderen
   Stelle steht und sonst quer ueber den Bildschirm wandern wuerde. */
.site-header { view-transition-name: kopfbereich; }

/* Zweite Wahl: kurze Abblende, von JavaScript ausgeloest. Die Klasse wird
   nur gesetzt, wenn der Browser keine View Transitions kennt. */
.seitenwechsel-bereit main,
.seitenwechsel-bereit .site-footer {
  transition:
    opacity 200ms var(--ease-inout),
    transform 200ms var(--ease-inout);
}
.seitenwechsel-laeuft main,
.seitenwechsel-laeuft .site-footer {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .seitenwechsel-laeuft main,
  .seitenwechsel-laeuft .site-footer { opacity: 1; transform: none; }
}

/* =========================================================================
   38. Ausbaustufen auf der Startseite
   Vier Stationen, drei Ausbaustufen. Sichtbar wird, was von Hand passiert
   und was das System uebernimmt. Ohne JavaScript stehen alle drei Stufen
   untereinander, die Auswahl bleibt ausgeblendet.
   ========================================================================= */
.stufen {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Ohne JavaScript gibt es keine Auswahlspalte. Die Stufen nehmen dann
   die volle Breite ein, statt in der schmalen Spalte zu stehen. */
.stufen:not(.stufen--interaktiv) { grid-template-columns: minmax(0, 1fr); }

/* --- Auswahl ------------------------------------------------------------- */
.stufen__wahl { position: sticky; top: calc(var(--nav-h) + 2rem); }
.stufen__wahl[hidden] { display: none; }

.stufen__wahl-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--space-3);
}

.stufen__buttons {
  display: grid;
  gap: 0.4rem;
}

.stufen__btn {
  font: inherit;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  color: var(--c-charcoal);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.stufen__btn:hover { border-color: var(--line-strong); transform: translateX(2px); }
.stufen__btn[aria-checked="true"] {
  background: var(--c-off-white);
  border-color: var(--line-strong);
  color: var(--c-black);
  transform: none;
}

.stufen__btn-num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-state) var(--ease-out);
}
.stufen__btn[aria-checked="true"] .stufen__btn-num { color: var(--c-black); }

.stufen__btn-name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.stufen__hint {
  margin-top: var(--space-4);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-slate);
}

/* --- Stationen ----------------------------------------------------------- */
.stufen__panels { display: grid; gap: var(--space-5); }
.stufen__panel[hidden] { display: none; }
.stufen__panel { animation: stufen-ein 420ms var(--ease-out) both; }

@keyframes stufen-ein {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Der Titel steht nur da, wenn alle Stufen untereinander sichtbar sind. */
.stufen__panel-title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--c-black);
}
.stufen__panel-num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
}
.stufen--interaktiv .stufen__panel-title { display: none; }

.stufen__stationen {
  --st-rail: 2.4rem;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stufen__station {
  position: relative;
  display: grid;
  grid-template-columns: var(--st-rail) minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: 0.35rem;
  align-items: baseline;
  padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.3rem) 0;
  border-top: 1px solid var(--line);
}
.stufen__station:last-child { border-bottom: 1px solid var(--line); }

/* Durchgehende Achse durch alle vier Stationen */
.stufen__station::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--st-rail) / 2);
  width: 1px;
  background: var(--line);
}
.stufen__station:first-child::before { top: 50%; }
.stufen__station:last-child::before { bottom: 50%; }

.stufen__station-index {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding-block: 0.15rem;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
}

.stufen__station-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--c-black);
}

.stufen__station-note {
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-slate);
  max-width: 46ch;
}

/* Zustandsmarke: von Hand bleibt zurueckhaltend, das System wird markiert */
.stufen__station-state {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
  white-space: nowrap;
}
.stufen__station-state::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.stufen__station-state.is-system {
  border-color: var(--line-strong);
  color: var(--c-black);
}
.stufen__station-state.is-system::before { background: currentColor; }
.stufen__station-state.is-assist {
  border-color: var(--line-strong);
  color: var(--c-black);
}
.stufen__station-state.is-assist::before {
  background: linear-gradient(135deg, currentColor 0 50%, transparent 50% 100%);
}

.stufen__link { margin-top: clamp(2rem, 1.2rem + 2vw, 3rem); }

@media (max-width: 980px) {
  .stufen { grid-template-columns: 1fr; }
  .stufen__wahl { position: static; }
  .stufen__buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .stufen__buttons { grid-template-columns: 1fr; }
  .stufen__stationen { --st-rail: 1.9rem; }
  .stufen__station {
    grid-template-columns: var(--st-rail) minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .stufen__station-state {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
  .stufen__station-note { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .stufen__panel { animation: none; }
  .stufen__btn:hover { transform: none; }
}

/* =========================================================================
   39. Dunkle Flaechen: Schaltflaechen und Abschluss

   Erstens: .btn--on-dark und .btn--ghost-dark waren schon vor dem
   Themewechsel fuer dunkle Flaechen gedacht. Innerhalb eines dunklen
   Bereichs werden die Marken-Variablen umgedreht, dadurch wurden beide
   ein zweites Mal invertiert. Sie arbeiten deshalb ab hier mit den festen
   Markenkonstanten und sind vom Themewechsel unabhaengig.

   Zweitens: der Footer wird zum bewussten Abschluss der Seite.
   ========================================================================= */

/* --- Schaltflaechen auf dunklen Flaechen ---------------------------------- */
.btn--on-dark {
  background: var(--brand-off-white);
  color: var(--brand-black);
  border-color: var(--brand-off-white);
}
.btn--on-dark::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--brand-black);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-state) var(--ease-out);
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background: var(--brand-off-white);
  color: var(--brand-off-white);
  border-color: var(--brand-off-white);
}
.btn--on-dark:hover::before,
.btn--on-dark:focus-visible::before { transform: scaleY(1); }

.btn--ghost-dark {
  background: transparent;
  color: var(--brand-off-white);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--ghost-dark::before { background: var(--brand-off-white); }
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  background: transparent;
  color: var(--brand-black);
  border-color: var(--brand-off-white);
}

/* --- Abschluss der Seite -------------------------------------------------- */
.site-footer {
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem) var(--space-5);
}

.footer__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line-light);
}

.footer__claim {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.036em;
  color: var(--brand-white);
  max-width: 16ch;
}

.footer__cta { flex: none; }

/* Die Spalten bekommen mehr Luft und eine ruhigere Verteilung */
.footer__top {
  grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.footer__col-title { color: var(--brand-white); }
.footer__brand-desc { max-width: 24rem; line-height: 1.6; }

.footer__bottom { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

.footer__top-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: rgba(250, 250, 250, 0.5);
  transition: color var(--dur-hover) var(--ease-out);
}
.footer__top-link span {
  display: inline-block;
  transition: transform var(--dur-state) var(--ease-out);
}
.footer__top-link:hover,
.footer__top-link:focus-visible { color: var(--brand-white); }
.footer__top-link:hover span { transform: translateY(-3px); }

@media (max-width: 980px) {
  .footer__lead { align-items: flex-start; }
  .footer__claim { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__top-link:hover span { transform: none; }
}

/* Der Abschluss verwendet dieselbe tiefste Flaeche wie die dunklen
   Abschnitte. Folgt er direkt auf einen dunklen Abschnitt, trennt eine
   Haarlinie statt eines Farbsprungs, und der Abstand faellt kuerzer aus. */
.site-footer { background: var(--brand-ink); }

.section--dark + .site-footer,
[data-theme="dark"] + .site-footer {
  border-top: 1px solid var(--line-light);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* =========================================================================
   40. Seitenkopf der Unterseiten
   Gleiche Formsprache wie der Auftritt der Startseite, aber bewusst
   zurueckhaltender: dasselbe feine Raster im Hintergrund, groesserer
   Titel, ruhiger Abschluss nach unten.
   ========================================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem) clamp(2.5rem, 1.75rem + 3vw, 4rem);
  background: var(--c-off-white);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 100% 5.5rem,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 5.5rem 100%;
  -webkit-mask-image: radial-gradient(105% 120% at 82% 12%, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 80%);
  mask-image: radial-gradient(105% 120% at 82% 12%, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 80%);
}

.page-hero > .container { position: relative; }

.page-hero__title {
  font-size: clamp(1.95rem, 1.35rem + 2.15vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
  max-width: 19ch;
  text-wrap: balance;
}

.page-hero__intro {
  max-width: 44rem;
  color: var(--c-charcoal);
  line-height: 1.55;
}

/* Fuenf Werte in zwei Reihen: die zweite Reihe steht mittig unter der
   ersten, statt links liegen zu bleiben. */
.grid--werte { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--werte > * { grid-column: span 2; }
.grid--werte > *:nth-child(4) { grid-column: 2 / span 2; }

@media (max-width: 900px) {
  .grid--werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--werte > * { grid-column: auto; }
  .grid--werte > *:nth-child(4) { grid-column: auto; }
  .grid--werte > *:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .grid--werte { grid-template-columns: minmax(0, 1fr); }
  .grid--werte > *:nth-child(5) { grid-column: auto; }
}

/* =========================================================================
   41. Zeilenmasken und Zeigersteuerung

   Zeilenmaske: Ueberschriften fahren zeilenweise aus einem Fenster herein.
   Die Zerlegung setzt JavaScript; ohne JavaScript bleibt der Text normal.

   Zeigersteuerung: das Systemschema im Hero antwortet auf die Naehe des
   Zeigers. Der Grundzustand bleibt ruhig, die Reaktion entsteht erst,
   wenn jemand mit der Seite arbeitet.
   ========================================================================= */

/* --- Zeilenmaske ---------------------------------------------------------- */
.ist-maskiert .zeile {
  display: block;
  overflow: hidden;
  /* Platz fuer Unterlaengen, ohne den Zeilenabstand zu veraendern */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.ist-maskiert .zeile__innen {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 860ms var(--ease-entry);
  transition-delay: calc(var(--zeile-i, 0) * 85ms);
}

/* Freigabe: im Seitenkopf beim Laden, sonst sobald der umgebende
   Abschnitt sichtbar wird. */
.hero__title.ist-maskiert .zeile__innen,
.page-hero__title.ist-maskiert .zeile__innen,
.is-visible.ist-maskiert .zeile__innen,
.is-visible .ist-maskiert .zeile__innen { transform: none; }

/* Ist die Maske aktiv, uebernimmt sie den Auftritt der Ueberschrift.
   Die Blockbewegung des Seiteneintritts entfaellt dann. */
.hero__title.ist-maskiert,
.page-hero__title.ist-maskiert {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Der Abschnittskopf blendet nicht zusaetzlich als Block ein, sonst
   ueberlagern sich zwei Bewegungen. */
.section__head .section__title.ist-maskiert { opacity: 1; }

/* --- Zeigersteuerung des Systemschemas ------------------------------------ */
.hero-system__glanz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  background: radial-gradient(
    16rem circle at var(--px, 50%) var(--py, 50%),
    rgba(245, 245, 246, 0.085),
    rgba(245, 245, 246, 0) 68%
  );
}
.hero-system.ist-nah .hero-system__glanz { opacity: 1; }

.hero-system__modules { z-index: 1; }

.hero-system__module {
  --naehe: 0;
  z-index: 1;
  background-color: rgba(245, 245, 246, calc(0.035 + var(--naehe) * 0.055));
  transform: translate3d(calc(var(--naehe) * 4px), 0, 0);
  transition:
    background-color 280ms var(--ease-out),
    transform 280ms var(--ease-out);
}

/* Randmarke: waechst mit der Naehe des Zeigers */
.hero-system__module::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: var(--sys-ink);
  transform: scaleY(var(--naehe));
  transform-origin: center;
  transition: transform 280ms var(--ease-out);
  pointer-events: none;
}

/* Rahmen tritt hervor, ohne die Grundfarbe zu ersetzen */
.hero-system__module::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--sys-ink);
  border-radius: inherit;
  opacity: calc(var(--naehe) * 0.42);
  transition: opacity 280ms var(--ease-out);
  pointer-events: none;
}

/* Beschriftung wird bei Naehe klarer */
.hero-system__meta {
  color: rgba(245, 245, 246, calc(0.58 + var(--naehe) * 0.3));
  transition: color 280ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .ist-maskiert .zeile__innen { transform: none; transition: none; }
  .hero-system__module { transform: none; }
  .hero-system__module::before { transform: scaleY(0); }
  .hero-system__glanz { display: none; }
}

/* =========================================================================
   42. Scrollgekoppelte Signalachse im Systemabschnitt
   Die Achse fuellt sich mit dem Scrollfortschritt. Erreicht sie eine
   Station, wechselt deren Marke sichtbar den Zustand. Ohne JavaScript und
   bei reduzierter Bewegung stehen alle Stationen im Endzustand.
   ========================================================================= */
.stufen { --achse: 1; }

.stufen__stationen { position: relative; }

/* Gefuellter Teil der Achse liegt ueber der ruhigen Grundlinie */
.stufen__stationen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--st-rail) / 2);
  width: 1px;
  background: var(--c-black);
  transform: scaleY(var(--achse));
  transform-origin: top center;
  pointer-events: none;
}

/* Stationsmarke: ruhig, bis die Achse sie erreicht */
.stufen__station-index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.stufen__station-index::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transform: rotate(45deg) scale(0.9);
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}
.stufen__station.ist-erreicht .stufen__station-index::before {
  background: var(--c-black);
  border-color: var(--c-black);
  transform: rotate(45deg) scale(1.15);
}
.stufen__station-index { color: var(--c-slate); transition: color var(--dur-state) var(--ease-out); }
.stufen__station.ist-erreicht .stufen__station-index { color: var(--c-black); }

/* Ohne Scrollkopplung ist alles erreicht */
@media (prefers-reduced-motion: reduce) {
  .stufen__stationen::before { transform: scaleY(1); }
  .stufen__station-index::before {
    background: var(--c-black);
    border-color: var(--c-black);
    transform: rotate(45deg) scale(1.15);
  }
  .stufen__station-index { color: var(--c-black); }
}

/* =========================================================================
   43. Zustandswechsel verstaerkt
   Karten heben deutlicher, Flaeche und Rahmen wechseln mit, das Zeichen
   schaltet sichtbar von Kontur auf Flaeche. Die Linie des Abschnittslabels
   zeichnet sich beim Sichtkontakt. Alles ueber transform und opacity.
   ========================================================================= */

/* --- Linie des Abschnittslabels zeichnet sich ---------------------------- */
.eyebrow::before {
  transform-origin: left center;
  transition: transform 620ms var(--ease-entry) 60ms;
}
.reveal .eyebrow::before,
.reveal.eyebrow::before { transform: scaleX(0); }
.reveal.is-visible .eyebrow::before,
.reveal.is-visible.eyebrow::before { transform: scaleX(1); }

/* --- Karten: deutlicher Zustandswechsel ---------------------------------- */
.card,
.sector,
.project {
  transition:
    border-color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out);
}

.card:hover,
.card:focus-within,
.sector:hover,
.sector:focus-within,
.project:hover,
.project:focus-within {
  transform: translate3d(0, -6px, 0);
  background-color: var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: 0 16px 32px -26px rgba(17, 17, 17, 0.55);
}

/* Die obere Haarlinie wird kraeftiger und zeichnet sich schneller */
.card::after,
.sector::after,
.project::after {
  height: 2px;
  transition: transform 420ms var(--ease-entry);
}

/* Der Titel ruecktvor, sobald die Karte reagiert */
.card__title,
.sector__title,
.project__title,
.usecase__title {
  transition: transform var(--dur-state) var(--ease-out);
}
.card:hover .card__title,
.sector:hover .sector__title,
.project:hover .project__title,
.usecases article:hover .usecase__title { transform: translateX(3px); }

/* Innerhalb einer Projektkarte reagiert auch der Textlink mit */
.project:hover .btn-link__arrow,
.project:focus-within .btn-link__arrow { transform: translateX(5px); opacity: 1; }
.project:hover .btn-link__text::after,
.project:focus-within .btn-link__text::after { transform: scaleX(1); transform-origin: left center; }

/* --- Zeichen: Kontur wird zur Flaeche ------------------------------------ */
.sector__icon svg {
  transition: transform var(--dur-state) var(--ease-out);
}
.sector__icon svg > * {
  transition: stroke-width var(--dur-state) var(--ease-out);
}
.sector:hover .sector__icon svg,
.sector:focus-within .sector__icon svg { transform: scale(1.06); }
.sector:hover .sector__icon svg > *,
.sector:focus-within .sector__icon svg > * { stroke-width: 1.45; }

.sector__icon-fill {
  transition:
    opacity 260ms var(--ease-out),
    transform 380ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* --- Knotenmarke deutlicher ---------------------------------------------- */
.card:hover .node-mark,
.card:focus-within .node-mark,
.sector:hover .node-mark,
.project:hover .node-mark,
.project:focus-within .node-mark,
.usecases article:hover .node-mark,
.feature-list__item:hover .node-mark { transform: rotate(135deg) scale(1.25); }

.node-mark { transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out), transform 420ms cubic-bezier(0.34, 1.3, 0.5, 1); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within,
  .sector:hover, .sector:focus-within,
  .project:hover, .project:focus-within { transform: none; }
  .card:hover .card__title,
  .sector:hover .sector__title,
  .project:hover .project__title,
  .usecases article:hover .usecase__title { transform: none; }
  .sector:hover .sector__icon svg { transform: none; }
  .card:hover .node-mark,
  .sector:hover .node-mark,
  .project:hover .node-mark { transform: rotate(45deg); }
  .eyebrow::before,
  .reveal .eyebrow::before,
  .reveal.is-visible .eyebrow::before { transform: scaleX(1); transition: none; }
}

/* =========================================================================
   44. Anfrage-Automation: sichtbarer Datenfluss
   Ein Paket wandert die Achse entlang und zeigt, wo sich die Anfrage gerade
   befindet. Die Werte in den Panels erscheinen erst, wenn ihr Schritt
   ausgefuehrt ist. Ohne JavaScript bleibt alles im Endzustand sichtbar.
   ========================================================================= */
.autodemo__paket {
  position: absolute;
  left: 0;
  top: 1.15rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transform: translate3d(0, var(--paket-y, 0px), 0);
  transition: transform 560ms var(--ease-inout), opacity 320ms var(--ease-out);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.autodemo--laeuft .autodemo__paket,
.autodemo--fertig .autodemo__paket { opacity: 1; }

.autodemo__paket-kern {
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  margin-top: -5.5px;
  flex: none;
  background: var(--c-black);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--c-white);
}

/* Werte erscheinen erst, wenn ihr Schritt ausgefuehrt ist ---------------- */
.autodemo--gesteuert .autodemo__step[data-state="offen"] .autodemo__row dd,
.autodemo--gesteuert .autodemo__step[data-state="offen"] .autodemo__mail p {
  opacity: 0;
  transform: translate3d(0, 5px, 0);
}
.autodemo--gesteuert .autodemo__row dd,
.autodemo--gesteuert .autodemo__mail p {
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
.autodemo__row:nth-child(1) dd, .autodemo__mail p:nth-child(1) { transition-delay: 60ms; }
.autodemo__row:nth-child(2) dd, .autodemo__mail p:nth-child(2) { transition-delay: 150ms; }
.autodemo__row:nth-child(3) dd, .autodemo__mail p:nth-child(3) { transition-delay: 240ms; }
.autodemo__row:nth-child(4) dd, .autodemo__mail p:nth-child(4) { transition-delay: 330ms; }
.autodemo__row:nth-child(5) dd, .autodemo__mail p:nth-child(5) { transition-delay: 420ms; }

/* Der laufende Schritt bekommt mehr Gewicht */
.autodemo__step[data-state="laeuft"] .autodemo__head { background: var(--c-off-white); }
.autodemo__step[data-state="laeuft"] .autodemo__name { color: var(--c-black); }

@media (prefers-reduced-motion: reduce) {
  .autodemo__paket { transition: none; }
  .autodemo--gesteuert .autodemo__step[data-state="offen"] .autodemo__row dd,
  .autodemo--gesteuert .autodemo__step[data-state="offen"] .autodemo__mail p {
    opacity: 1;
    transform: none;
  }
}

/* Spur ueber der Marke: macht die Laufrichtung sichtbar */
.autodemo__paket-spur {
  position: absolute;
  left: -1px;
  bottom: 0.35rem;
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(to top, var(--c-black), transparent);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.autodemo--laeuft .autodemo__paket-spur { opacity: 0.5; }

/* Schrittkopf: der Name bekommt Vorrang vor der Zustandsmarke, damit
   lange Woerter in eine Zeile passen. */
.autodemo__name {
  min-width: 0;
  font-size: 0.9375rem;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
}
.autodemo__state { padding-inline: 0.4rem; letter-spacing: 0.1em; }

/* Die Ablaufseite bekommt mehr Raum als die Eingabeseite: dort passiert
   das Sichtbare, und die Schrittnamen sollen einzeilig bleiben.
   Nur ab der Breite, in der beide Spalten nebeneinander stehen. */
@media (min-width: 60rem) {
  .autodemo { grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); }
}
.autodemo__state { font-size: 0.5625rem; padding: 0.22rem 0.42rem; }
.autodemo__run { letter-spacing: 0.06em; font-size: 0.6875rem; }

/* =========================================================================
   45. Digital Review als Analyseinstrument
   Die Gesamtskala wird in die fuenf Gewichtungen unterteilt: 15, 20, 20,
   25 und 20 Punkte. Die Trennstege liegen genau auf den Grenzen, dadurch
   ist die Bewertungslogik direkt ablesbar. Die Bereichsbalken bekommen
   eine feine Teilung und wirken wie eine Messskala.
   Die Punktwerte selbst bleiben unveraendert.
   ========================================================================= */
.dr__meter { position: relative; }

/* Trennstege auf 15, 35, 55 und 80 Prozent: die Grenzen der Gewichtung */
.dr__meter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0 calc(15% - 1px), var(--surface) calc(15% - 1px) 15%,
    transparent 15% calc(35% - 1px), var(--surface) calc(35% - 1px) 35%,
    transparent 35% calc(55% - 1px), var(--surface) calc(55% - 1px) 55%,
    transparent 55% calc(80% - 1px), var(--surface) calc(80% - 1px) 80%,
    transparent 80% 100%
  );
}

/* Bereichsbalken als feine Skala */
.dr__bar { position: relative; }
.dr__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    var(--surface) 5px 6px
  );
  opacity: 0.85;
}

/* Der gewaehlte Bereich zeigt seine Skala kraeftiger */
.dr__pillar-btn[aria-selected="true"] .dr__bar::after { opacity: 1; }

/* Gesamtwert bekommt mehr Gewicht */
.dr__score-value strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* =========================================================================
   46. KI-Demo: Wissensbasis mit sichtbaren Zustaenden
   Jede freigegebene Quelle traegt eine Zustandsmarke: ruhig im Ausgangs-
   zustand, wandernd waehrend der Pruefung, gefuellt beim Treffer. So wird
   sichtbar, dass die Antwort aus kontrolliertem Wissen stammt und nicht
   frei erzeugt wird.
   ========================================================================= */
.kidemo__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}

.kidemo__chip::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
  transition:
    background-color var(--dur-state) var(--ease-out),
    opacity var(--dur-state) var(--ease-out),
    transform var(--dur-state) var(--ease-out);
}

.kidemo__chip.is-pruefend {
  border-color: var(--line-strong);
  color: var(--c-black);
  transform: translateY(-1px);
}
.kidemo__chip.is-pruefend::before {
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

.kidemo__chip.is-treffer::before {
  background: currentColor;
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

/* Die Uebergabe an eine Person bekommt mehr Gewicht */
.kidemo__handover {
  border-left: 2px solid var(--c-black);
  padding-left: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .kidemo__chip.is-pruefend { transform: none; }
  .kidemo__chip::before,
  .kidemo__chip.is-pruefend::before,
  .kidemo__chip.is-treffer::before { transform: rotate(45deg); }
}

/* =========================================================================
   47. Prozess auf schmalen Geraeten
   Aus der waagrechten Zeitachse wird eine senkrechte. Die Punkte sitzen
   auf der Achse, die Texte stehen rechts daneben. Ohne JavaScript ist die
   Achse voll und alle Punkte sind gesetzt.
   ========================================================================= */
@media (max-width: 980px) {
  .process {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
    padding-left: 1.9rem;
  }
  .process::before,
  .process::after {
    top: 0.6rem;
    bottom: 0.6rem;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .process::after {
    transform: scaleY(var(--prozess));
    transform-origin: top center;
  }
  .process__step {
    padding: 0 0 var(--space-5) 0;
  }
  .process__step:last-child { padding-bottom: 0; }
  .process__step::before {
    top: 0.35rem;
    left: calc(-1.9rem);
  }
  .process__num { font-size: 1.125rem; }
  .process__title { margin-block: var(--space-2) var(--space-2); }
  .process__text { padding-right: 0; max-width: none; }
}

/* =========================================================================
   48. VARELOR BUTTON INTERACTION SYSTEM

   Eine Mechanik fuer alle echten Bedienknoepfe: beim Zeigen faehrt die
   Gegenflaeche von unten herein, Schrift und Rahmen wechseln synchron mit,
   der Knopf hebt sich um ein Pixel. Beim Verlassen laeuft alles denselben
   Weg zurueck.

   Zwei Familien:
   - gefuellt  : dunkle Flaeche, helle Schrift -> helle Gegenflaeche
   - kontur    : offene Flaeche, dunkle Schrift -> dunkle Gegenflaeche

   Textlinks, Reiter, Auswahlfelder und Ablaufschritte behalten bewusst
   ihre eigenen Zustaende, sprechen aber dieselbe Zeit- und Kurvensprache.
   ========================================================================= */

.btn,
.autodemo__run,
.autodemo__reset,
.kidemo__reset,
.kidemo__question {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.btn::before,
.autodemo__run::before,
.autodemo__reset::before,
.kidemo__reset::before,
.kidemo__question::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-state) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before,
.autodemo__run:hover::before,
.autodemo__run:focus-visible::before,
.autodemo__reset:hover::before,
.autodemo__reset:focus-visible::before,
.kidemo__reset:hover::before,
.kidemo__reset:focus-visible::before,
.kidemo__question:hover::before,
.kidemo__question:focus-visible::before { transform: scaleY(1); }

.btn:hover,
.autodemo__run:hover,
.autodemo__reset:hover,
.kidemo__reset:hover,
.kidemo__question:hover { transform: translateY(-1px); }

.btn:active,
.autodemo__run:active,
.autodemo__reset:active,
.kidemo__reset:active,
.kidemo__question:active { transform: translateY(1px); }

/* --- Familie „gefuellt": helle Gegenflaeche faehrt ein ------------------- */
.btn--primary::before,
.autodemo__run::before { background: var(--c-white); }

.btn--primary:hover,
.btn--primary:focus-visible,
.autodemo__run:hover,
.autodemo__run:focus-visible {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-black);
}

/* --- Familie „kontur": dunkle Gegenflaeche faehrt ein -------------------- */
.btn--ghost::before,
.autodemo__reset::before,
.kidemo__reset::before,
.kidemo__question::before { background: var(--c-black); }

.btn--ghost:hover,
.btn--ghost:focus-visible,
.autodemo__reset:hover,
.autodemo__reset:focus-visible,
.kidemo__reset:hover,
.kidemo__reset:focus-visible,
.kidemo__question:hover,
.kidemo__question:focus-visible {
  background: transparent;
  border-color: var(--c-black);
  color: var(--c-white);
}

/* Der Pfeil im Fragenknopf laeuft mit */
.kidemo__question-arrow { transition: transform var(--dur-state) var(--ease-out); }
.kidemo__question:hover .kidemo__question-arrow,
.kidemo__question:focus-visible .kidemo__question-arrow { transform: translateX(4px); }

/* Beantwortete Frage bleibt erkennbar und uebernimmt die Mechanik nicht */
.kidemo__question.is-beantwortet::before { transform: scaleY(0); }
.kidemo__question:disabled { transform: none; }
.kidemo__question:disabled::before { transform: scaleY(0); }

/* --- Auf dunklen Flaechen dreht sich die Richtung ------------------------
   Die Marken-Variablen sind dort bereits umgedreht, deshalb stimmen die
   Regeln oben von selbst. Nur die beiden bewusst festen Varianten fuer
   dunkle Flaechen behalten ihre eigenen Konstanten. */
.btn--on-dark::before { background: var(--brand-black); }
.btn--ghost-dark::before { background: var(--brand-off-white); }

/* --- Kopfzeile: eine Regel fuer beide Themes ----------------------------- */
.site-header .btn--primary::before { background: var(--page-surface, #FAFAFA); }
.site-header .btn--primary:hover,
.site-header .btn--primary:focus-visible {
  background: var(--page-ink, #111111);
  border-color: var(--page-ink, #111111);
  color: var(--page-ink, #111111);
}

/* --- Auswahlfelder: eigener Zustand, gleiche Zeitsprache ---------------- */
.autodemo__choice,
.stufen__btn,
.dr__pillar-btn,
.autodemo__head {
  transition:
    color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.autodemo__choice:hover { transform: translateY(-1px); }
.autodemo__choice:active { transform: translateY(1px); }

/* --- Beruehrung: kein haengender Zeigezustand ---------------------------- */
@media (hover: none) {
  .btn:hover,
  .autodemo__run:hover,
  .autodemo__reset:hover,
  .kidemo__reset:hover,
  .kidemo__question:hover,
  .autodemo__choice:hover { transform: none; }

  .btn:hover::before,
  .autodemo__run:hover::before,
  .autodemo__reset:hover::before,
  .kidemo__reset:hover::before,
  .kidemo__question:hover::before { transform: scaleY(0); }

  /* Beim Antippen laeuft die Gegenflaeche trotzdem kurz ein */
  .btn:active::before,
  .autodemo__run:active::before,
  .autodemo__reset:active::before,
  .kidemo__reset:active::before,
  .kidemo__question:active::before { transform: scaleY(1); }

  .btn--primary:hover,
  .autodemo__run:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
  .btn--ghost:hover,
  .autodemo__reset:hover,
  .kidemo__reset:hover,
  .kidemo__question:hover { color: var(--c-black); }
  .site-header .btn--primary:hover {
    background: var(--page-ink, #111111);
    color: var(--page-surface, #FAFAFA);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active,
  .autodemo__run:hover, .autodemo__run:active,
  .autodemo__reset:hover, .autodemo__reset:active,
  .kidemo__reset:hover, .kidemo__reset:active,
  .kidemo__question:hover, .kidemo__question:active,
  .autodemo__choice:hover, .autodemo__choice:active { transform: none; }
  .kidemo__question:hover .kidemo__question-arrow { transform: none; }
}