/* ==========================================================================
   Purinto GmbH — Stylesheet
   Aufbau: Reset · Layout · Typografie · Komponenten · Seiten · Utilities
   Konvention: eine Klasse pro Komponente, Abstände gehören dem Container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Reset und Basis
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sicherheitsnetz gegen lange Fachbegriffe und E-Mail-Adressen auf
     schmalen Displays. */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

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

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

a {
  color: var(--flieder-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--flieder-900);
}

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

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.sprungmarke {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--anthrazit-900);
  color: var(--text-invers);
  border-radius: var(--r-2);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dauer) var(--kurve);
}

.sprungmarke:focus {
  transform: translateY(0);
  color: var(--text-invers);
}

/* --------------------------------------------------------------------------
   2 · Layout
   -------------------------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.huelle--eng {
  max-width: calc(var(--breite-eng) + var(--rand) * 2);
}

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

.sektion--knapp {
  padding-block: calc(var(--sektion-y) * 0.6);
}

.sektion--dunkel {
  background: var(--bg-dunkel);
  color: var(--text-invers);
}

.sektion--salbei {
  background: var(--bg-salbei);
}

.sektion--linie {
  border-top: 1px solid var(--linie);
}

.sektion__kopf {
  max-width: 62ch;
  margin-bottom: var(--s-7);
}

.sektion__kopf--breit {
  max-width: 78ch;
}

.raster {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 640px) {
  .raster--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .raster--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .raster--3,
  .raster--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Grid-Kinder haben implizit min-width:auto und schrumpfen nicht unter ihre
   min-content-Breite. Lange deutsche Komposita ("Konstruktionsbegleitung")
   und <select>-Elemente, die sich nach ihrer breitesten Option bemessen,
   sprengen damit auf schmalen Displays das Raster. min-width:0 hebt das auf. */
.raster > *,
.feld-paar > *,
.formular > *,
.leistung__raster > *,
.kontakt-raster > *,
.achse__werte > *,
.nachhaltig > *,
.nachhaltig__punkt > *,
.ablauf > *,
.fuss__raster > *,
.profil > *,
.datenzeile > *,
.zeitstrahl > *,
.seitenspalte > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3 · Typografie
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 118%;
  line-height: var(--lh-kopf);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  /* Deutsche Komposita wie "Datenschutzerklärung" passen auf 375px nicht in
     eine Zeile und ragen sonst aus dem Layout. hyphens greift nur, wenn das
     Wort tatsächlich zu lang ist — lang="de-AT" liefert die Trennmuster. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.t-hero {
  font-size: var(--t-3xl);
  line-height: var(--lh-eng);
  text-wrap: pretty;
}

.t-2xl {
  font-size: var(--t-2xl);
}

.t-xl {
  font-size: var(--t-xl);
}

.t-lg {
  font-size: var(--t-lg);
  line-height: 1.5;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  /* salbei-700 ergäbe auf .sektion--salbei nur 4,24:1 — knapp unter AA. */
  color: var(--salbei-800);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: var(--salbei-500);
}

.sektion--dunkel .eyebrow {
  color: var(--salbei-300);
}

.sektion--dunkel .eyebrow::before {
  background: var(--salbei-500);
}

.lead {
  max-width: 58ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--anthrazit-700);
}

/* Überschrift und Lead brauchen Luft. Die Randzusammenfassung mit dem
   margin-bottom der .eyebrow ist gewollt — dort bleibt der Abstand gleich. */
.sektion__kopf .lead,
.achse-band__kopf .lead {
  margin-top: var(--s-5);
}

.sektion--dunkel .lead {
  color: var(--text-invers-leise);
}

.fliess {
  max-width: 66ch;
}

.fliess > * + * {
  margin-top: var(--s-4);
}

.leise {
  color: var(--text-leise);
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}

/* Überschriften in der Display-Schrift, die nicht .display tragen, brauchen
   dieselbe Silbentrennung — sonst stehen Komposita über den Rand. */
.karte__titel,
.projekt__titel,
.etappe__titel,
.branche__titel,
.ablauf__titel,
.leistung__nummer {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Ein einziger Akzent in der Leitheadline: Flieder-Unterstreichung.
   Bewusst als eigener Hintergrund statt z-index:-1 gelöst — sonst
   verschwindet der Strich hinter dem Verlauf der Hero-Sektion. */
.hervor {
  padding-inline: 0.05em;
  background-image: linear-gradient(var(--flieder-400), var(--flieder-400));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.15em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4 · Kopfzeile und Navigation
   -------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--dunst) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve),
    background var(--dauer) var(--kurve);
}

.kopf.ist-gescrollt {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--dunst) 96%, transparent);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  flex: none;
}

.marke__zeichen {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
}

.marke__wort {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav__link {
  display: inline-block;
  padding-block: var(--s-2);
  color: var(--anthrazit-700);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__link:hover {
  color: var(--text);
  border-bottom-color: var(--salbei-400);
}

.nav__link[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--flieder-600);
}

.nav__schalter {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.nav__balken {
  position: relative;
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
}

.nav__balken::before,
.nav__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dauer) var(--kurve);
}

.nav__balken::before {
  top: -5px;
}

.nav__balken::after {
  top: 5px;
}

@media (max-width: 899px) {
  .nav__schalter {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--rand) var(--s-6);
    background: var(--dunst);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dauer) var(--kurve),
      transform var(--dauer) var(--kurve), visibility var(--dauer);
  }

  .nav.ist-offen {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding-block: var(--s-4);
    font-size: var(--t-lg);
    border-bottom: 1px solid var(--linie-zart);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    border-bottom-color: var(--linie-zart);
    color: var(--flieder-800);
  }

  .nav .knopf {
    margin-top: var(--s-5);
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   5 · Knöpfe
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve);
}

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

.knopf--primaer {
  background: var(--akzent);
  color: #fff;
}

.knopf--primaer:hover {
  background: var(--akzent-hover);
  color: #fff;
}

.knopf--sekundaer {
  background: transparent;
  border-color: var(--anthrazit-300);
  color: var(--text);
}

.knopf--sekundaer:hover {
  border-color: var(--anthrazit-700);
  color: var(--text);
}

.knopf--hell {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--text-invers);
}

.knopf--hell:hover {
  border-color: var(--text-invers);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-invers);
}

.knopf--voll {
  width: 100%;
}

.knopf[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Textlink mit Pfeil, für Karten und Teaser */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.pfeil-link::after {
  content: "→";
  transition: transform var(--dauer) var(--kurve);
}

.pfeil-link:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6 · Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) clamp(2.5rem, 1rem + 5vw, 5rem);
  overflow: hidden;
  /* Das Logo ist so groß wie der Headline-Block: Schriftgröße x Zeilenhöhe x
     Zeilenanzahl. Alles über dieselben Token gebunden, damit beide bei einer
     Änderung im Gleichschritt bleiben. Gestapelt über der Headline reichen
     zwei Zeilen — drei wären auf einem Telefon erschlagend. */
  --logo-groesse: calc(var(--t-3xl) * var(--lh-eng) * 2);
}

@media (min-width: 700px) {
  .hero {
    --logo-groesse: calc(var(--t-3xl) * var(--lh-eng) * 3);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 88% 0%,
    var(--salbei-100) 0%,
    transparent 62%
  );
  pointer-events: none;
}

.hero__innen {
  position: relative;
}

/* Logo-Platzhalter im Hero. Bewusst ruhig gehalten: Der Blickfang der Seite
   ist die Stückzahl-Achse, nicht die Wortmarke.
   Auf schmalen Displays steht das Logo im Fluss über der Eyebrow-Zeile, ab
   760px rückt es in die obere rechte Ecke des Hero. */
.hero__logo {
  display: grid;
  place-items: center;
  /* Auf schmalen Displays über der Headline, quadratisch. */
  order: -1;
  justify-self: start;
  width: var(--logo-groesse);
  aspect-ratio: 1;
  background: var(--anthrazit-700);
  color: var(--dunst);
  border-radius: var(--r-3);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: calc(var(--logo-groesse) * 0.62);
  line-height: 1;
  /* Versalien sitzen in der Mitte optisch zu tief. */
  padding-bottom: 0.06em;
}

@media (min-width: 700px) {
  .hero__logo {
    order: 0;
    /* Breite aus der Spalte, Höhe aus der Zeile — und die Zeile ist die
       Headline. Damit ist das Logo immer exakt so hoch wie sie. */
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    font-size: calc(var(--logo-groesse) * 0.62);
  }
}

/* Ersetzt jemand das <div> durch ein <img>, soll die Kachel-Optik weichen.
   Die Breite folgt der Höhe, damit das Seitenverhältnis eines querformatigen
   Logos erhalten bleibt. */
img.hero__logo {
  display: block;
  width: auto;
  height: var(--logo-groesse);
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  background: none;
  border-radius: 0;
  padding-bottom: 0;
}

/* Headline und Logo teilen sich eine Grid-Zeile. Dadurch stretcht das Logo
   auf die tatsächliche Headline-Höhe — egal ob sie drei oder vier Zeilen
   läuft. Eine feste Zeilenannahme wäre zirkulär: Das Logo verengt die
   Textspalte und verändert damit die Höhe, an die es gebunden ist. */
.hero__kopf {
  display: grid;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

/* Keine max-width: Die Zeilenaufteilung steuern die festen Umbrüche im HTML.
   Eine zusätzliche Breitengrenze würde nur weitere Umbrüche erzwingen. */
.hero__titel {
  max-width: none;
}

/* Unter 500px die festen Umbrüche aufheben: Ein ausgeblendetes <br> erzeugt
   keinen Zeilenumbruch mehr, die Headline bricht dann frei und ausgewogen auf
   vier Zeilen um. Mit den Umbrüchen entstünde stattdessen "Zwischen" /
   "Prototyp" — zwei kurze Zeilen über zwei langen. */
@media (max-width: 499px) {
  .hero__umbruch {
    display: none;
  }

  /* Ohne Ausgleich bliebe "Zwischen" als Einzelwort auf Zeile 1 stehen —
     "Zwischen Prototyp" ist hier um Haaresbreite zu lang für eine Zeile.
     balance verteilt die vier Zeilen gleichmäßig. */
  .hero__titel {
    text-wrap: balance;
  }
}

/* Ab 700px steht das Logo rechts neben der Headline und ist über align-self:
   stretch exakt so hoch wie sie. Darunter wird gestapelt: Ein Quadrat in
   Headline-Höhe verengt die Textspalte, die Headline bricht dadurch weiter um
   und macht das Logo noch größer. Ab 700px pendelt sich das ein, bei 600px
   nicht mehr (dort wächst die Headline auf acht Zeilen). */
@media (min-width: 700px) {
  .hero__kopf {
    /* Die Logospalte bekommt eine feste Breite. Mit "auto" bemisst sie sich am
       Buchstaben statt am gestreckten Quadrat — das Logo ragte dann nach links
       über die Headline. */
    grid-template-columns: minmax(0, 1fr) var(--logo-groesse);
    align-items: stretch;
    column-gap: var(--s-6);
  }
}

.hero__lead {
  margin-bottom: var(--s-6);
}

.hero__spektrum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linie);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

.hero__spektrum li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.hero__spektrum li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--salbei-500);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   7 · Stückzahl-Achse — das Signature-Element
   -------------------------------------------------------------------------- */

.achse-band {
  position: relative;
  background: var(--bg-dunkel);
  color: var(--text-invers);
  overflow: hidden;
}

.achse-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--schichten);
  opacity: 0.6;
  pointer-events: none;
}

.achse-band__innen {
  position: relative;
}

.achse-band__kopf {
  max-width: 60ch;
  margin-bottom: var(--s-8);
}

.achse {
  --zone-a: 40%;
  --zone-b: 60%;
  --marke: 12%;
  margin-bottom: var(--s-7);
}

.achse__zonen {
  position: relative;
  display: flex;
  height: 2.5rem;
  margin-bottom: var(--s-2);
}

.achse__zone {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 0 var(--s-2) var(--s-3);
  border-left: 1px solid var(--linie-invers);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-invers-leise);
  transition: color var(--dauer) var(--kurve);
}

.achse__zone:last-child {
  border-right: 1px solid var(--linie-invers);
}

.achse__zone.ist-aktiv {
  color: var(--flieder-300);
}

/* Die dritte Zone ist Partnerleistung, kein Kerngeschäft:
   Kontur statt Fläche, gedämpft. Das ist eine inhaltliche Aussage. */
.achse__zone--partner {
  color: var(--text-invers-schwach);
}

.achse__spur {
  position: relative;
  height: 0.75rem;
  background: var(--anthrazit-800);
  border-radius: var(--r-1);
  cursor: pointer;
  touch-action: none;
}

.achse__flaeche {
  position: absolute;
  inset-block: 0;
  border-radius: var(--r-1);
}

.achse__flaeche--druck {
  left: 0;
  right: calc(100% - var(--zone-a));
  background: var(--salbei-600);
}

.achse__flaeche--bridge {
  left: var(--zone-a);
  right: calc(100% - var(--zone-b));
  background: var(--salbei-400);
}

.achse__flaeche--partner {
  left: var(--zone-b);
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(174, 181, 183, 0.32) 0 2px,
    transparent 2px 7px
  );
  border: 1px solid rgba(174, 181, 183, 0.36);
}

.achse__griff {
  position: absolute;
  top: 50%;
  left: var(--marke);
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  background: var(--flieder-300);
  border: 3px solid var(--anthrazit-700);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: box-shadow var(--dauer) var(--kurve);
}

.achse__griff:active {
  cursor: grabbing;
}

.achse__griff:hover,
.achse__griff:focus-visible {
  box-shadow: 0 0 0 6px rgba(198, 181, 227, 0.22);
}

/* Die Skala wird absolut positioniert, nicht gleichverteilt: Auf einer
   logarithmischen Achse müssen die Beschriftungen exakt über ihren
   Zonengrenzen sitzen, sonst zeigt das Instrument etwas Falsches an. */
.achse__skala {
  position: relative;
  height: 1.2rem;
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  color: var(--text-invers-schwach);
}

.achse__skala li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.achse__skala li:first-child {
  transform: none;
}

.achse__skala li:last-child {
  transform: translateX(-100%);
}

.achse__tafel {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-6);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--linie-invers);
  border-radius: var(--r-3);
}

@media (min-width: 900px) {
  .achse__tafel {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s-8);
    padding: var(--s-7);
  }
}

.achse__ausgabe {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}

/* Absolute Größe, nicht em: Die Einheit steht als Geschwister neben
   .achse__ausgabe, nicht darin — em würde gegen die 17px des Containers
   rechnen und die Angabe auf 7px schrumpfen. */
.achse__ausgabe-einheit {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-invers-leise);
}

.achse__verfahren {
  margin-top: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--flieder-300);
}

.achse__hinweis {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-invers-leise);
}

.achse__werte {
  display: grid;
  gap: var(--s-5);
  margin: 0;
}

@media (min-width: 560px) {
  .achse__werte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.achse__wert dt {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  /* Die Tafel liegt auf einer leicht aufgehellten Fläche; --text-invers-schwach
     käme dort nur auf 4,26:1. */
  color: var(--text-invers-leise);
}

.achse__wert dd {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.achse__fussnote {
  margin-top: var(--s-6);
  max-width: 74ch;
  font-size: var(--t-xs);
  color: var(--text-invers-schwach);
}

/* --------------------------------------------------------------------------
   8 · Karten
   -------------------------------------------------------------------------- */

.karte {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--bg-karte);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-3);
  transition: border-color var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}

.karte:hover {
  border-color: var(--salbei-400);
  box-shadow: var(--schatten-1);
  transform: translateY(-2px);
}

.karte__marke {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--salbei-800);
}

.karte__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.karte__text {
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

.karte__fuss {
  margin-top: auto;
  padding-top: var(--s-3);
}

.karte--flach:hover {
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   9 · Verfahrensmatrix
   -------------------------------------------------------------------------- */

.matrix-huelle {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--bg-karte);
}

.matrix {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.matrix th,
.matrix td {
  padding: var(--s-4) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie-zart);
}

.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--anthrazit-100);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-sm);
  letter-spacing: -0.008em;
  border-bottom: 1px solid var(--linie);
}

.matrix tbody th {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
  white-space: nowrap;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td {
  border-bottom: none;
}

/* Partnerleistung optisch abgesetzt – gleiche Aussage wie in der Achse. */
.matrix .ist-partner {
  background: color-mix(in srgb, var(--anthrazit-100) 45%, transparent);
  color: var(--anthrazit-600);
}

.matrix__partnermarke {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

/* --------------------------------------------------------------------------
   10 · Branchen, Nachhaltigkeit, Ablauf
   -------------------------------------------------------------------------- */

.branche {
  padding: var(--s-6) 0 0;
  border-top: 2px solid var(--salbei-400);
}

.branche__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.08rem;
  line-height: 1.25;
  margin-bottom: var(--s-3);
}

.branche__text {
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

.nachhaltig {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 700px) {
  .nachhaltig {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nachhaltig__punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
}

.nachhaltig__zeichen {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--salbei-700);
}

.nachhaltig__titel {
  font-weight: 700;
  margin-bottom: var(--s-1);
}

.nachhaltig__text {
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

/* Nummerierung nur hier – der Ablauf ist eine echte Reihenfolge. */
.ablauf {
  counter-reset: schritt;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 640px) {
  .ablauf {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .ablauf {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ablauf__schritt {
  counter-increment: schritt;
  padding-top: var(--s-5);
  border-top: 1px solid var(--linie);
}

.ablauf__schritt::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  color: var(--flieder-700);
}

.ablauf__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.05rem;
  margin-bottom: var(--s-2);
}

.ablauf__text {
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

/* --------------------------------------------------------------------------
   11 · CTA-Band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--bg-dunkel-tief);
  color: var(--text-invers);
}

.cta-band__innen {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__innen {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

.cta-band__text {
  max-width: 52ch;
  margin-top: var(--s-4);
  color: var(--text-invers-leise);
}

/* --------------------------------------------------------------------------
   12 · Dienstleistungen
   -------------------------------------------------------------------------- */

.sprungnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-block: 1px solid var(--linie);
}

.sprungnav__link {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--anthrazit-600);
  text-decoration: none;
  transition: border-color var(--dauer) var(--kurve),
    color var(--dauer) var(--kurve), background var(--dauer) var(--kurve);
}

.sprungnav__link:hover {
  background: var(--salbei-100);
  border-color: var(--salbei-400);
  color: var(--anthrazit-900);
}

.leistung {
  padding-block: var(--sektion-y);
  border-top: 1px solid var(--linie);
}

.leistung__kopf {
  margin-bottom: var(--s-6);
}

.leistung__nummer {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  color: var(--salbei-700);
}

.leistung__raster {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .leistung__raster {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-8);
  }
}

.block__titel {
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

.block + .block {
  margin-top: var(--s-6);
}

.haken {
  display: grid;
  gap: var(--s-3);
}

.haken li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-sm);
  line-height: 1.5;
}

.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 1px;
  background: var(--salbei-600);
}

.datenzeile {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--salbei-100);
  border-left: 2px solid var(--salbei-500);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}

@media (min-width: 560px) {
  .datenzeile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datenzeile dt {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--salbei-800);
}

.datenzeile dd {
  margin: var(--s-1) 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
}

/* Abgesetzter Hinweiskasten, u. a. für die Partnerleistung Stahlwerkzeug */
.hinweis {
  padding: var(--s-5);
  background: var(--bg-karte);
  border: 1px dashed var(--anthrazit-300);
  border-radius: var(--r-3);
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

.hinweis__titel {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

/* --------------------------------------------------------------------------
   13 · Projekte
   -------------------------------------------------------------------------- */

.filter {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block: 1px solid var(--linie);
}

@media (min-width: 700px) {
  .filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

.filter__gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.filter__titel {
  margin-right: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

.filter__knopf {
  padding: 0.4rem 0.8rem;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--anthrazit-600);
  cursor: pointer;
  transition: background var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}

.filter__knopf:hover {
  border-color: var(--salbei-500);
  color: var(--text);
}

.filter__knopf[aria-pressed="true"] {
  background: var(--flieder-800);
  border-color: var(--flieder-800);
  color: #fff;
}

.projekt {
  display: flex;
  flex-direction: column;
  background: var(--bg-karte);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve);
}

.projekt:hover {
  border-color: var(--salbei-400);
  box-shadow: var(--schatten-1);
}

.projekt.ist-versteckt {
  display: none;
}

.projekt__bild {
  aspect-ratio: 4 / 3;
  background: var(--anthrazit-100);
  border-bottom: 1px solid var(--linie-zart);
}

.projekt__bild img,
.projekt__bild svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projekt__innen {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
}

.projekt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tag {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-1);
  background: var(--salbei-100);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--salbei-800);
}

.tag--branche {
  background: var(--flieder-100);
  color: var(--flieder-900);
}

.projekt__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.12rem;
  line-height: 1.25;
}

.projekt__block {
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

.projekt__block b {
  display: block;
  color: var(--anthrazit-800);
  font-weight: 600;
}

.projekt__ergebnis {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--linie-zart);
  font-size: var(--t-sm);
}

.projekt__kennzahl {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--flieder-800);
}

.leer-hinweis {
  padding: var(--s-7) 0;
  text-align: center;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   14 · Über uns — Zeitstrahl
   -------------------------------------------------------------------------- */

.zeitstrahl {
  position: relative;
  display: grid;
  gap: var(--s-7);
  padding-left: var(--s-6);
}

.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--linie);
}

.etappe {
  position: relative;
}

.etappe::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6));
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--salbei-500);
}

.etappe--jetzt::before {
  background: var(--flieder-700);
  box-shadow: 0 0 0 4px var(--flieder-100);
}

.etappe__jahr {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  color: var(--flieder-700);
}

.etappe__titel {
  margin: var(--s-2) 0 var(--s-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.16rem;
  line-height: 1.25;
}

.etappe__text {
  max-width: 60ch;
  font-size: var(--t-sm);
  color: var(--anthrazit-600);
}

.profil {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 700px) {
  .profil {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-8);
  }
}

.profil__bild {
  aspect-ratio: 4 / 5;
  background: var(--anthrazit-100);
  border-radius: var(--r-3);
  overflow: hidden;
}

.profil__bild img,
.profil__bild svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   15 · Formular
   -------------------------------------------------------------------------- */

.kontakt-raster {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

@media (min-width: 900px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
}

.formular {
  display: grid;
  gap: var(--s-5);
}

.feld-paar {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 560px) {
  .feld-paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feld {
  display: grid;
  gap: var(--s-2);
}

.feld__label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.feld__pflicht {
  color: var(--flieder-700);
}

.feld__eingabe {
  width: 100%;
  padding: 0.72rem 0.9rem;
  background: var(--papier);
  border: 1px solid var(--anthrazit-300);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  transition: border-color var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve);
}

.feld__eingabe:hover {
  border-color: var(--anthrazit-500);
}

.feld__eingabe:focus {
  outline: none;
  border-color: var(--flieder-700);
  box-shadow: 0 0 0 3px var(--flieder-200);
}

.feld__eingabe[aria-invalid="true"] {
  border-color: #a4402f;
  background: #fdf6f5;
}

textarea.feld__eingabe {
  min-height: 9rem;
  resize: vertical;
}

select.feld__eingabe {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--anthrazit-600) 50%),
    linear-gradient(135deg, var(--anthrazit-600) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - 0.75rem) 1.15rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.feld__fehler {
  display: none;
  font-size: var(--t-xs);
  color: #a4402f;
}

.feld__fehler.ist-sichtbar {
  display: block;
}

.feld__hilfe {
  font-size: var(--t-xs);
  color: var(--text-leise);
}

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}

.zustimmung input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--flieder-800);
}

.zustimmung__text {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--anthrazit-600);
}

/* Honeypot: für Menschen unsichtbar, für Bots verlockend. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  display: none;
  padding: var(--s-5);
  border-radius: var(--r-3);
  font-size: var(--t-sm);
}

.meldung.ist-sichtbar {
  display: block;
}

.meldung--erfolg {
  background: var(--salbei-100);
  border: 1px solid var(--salbei-400);
  color: var(--salbei-800);
}

.meldung--fehler {
  background: #fdf6f5;
  border: 1px solid #d9a79e;
  color: #8c3527;
}

.meldung__titel {
  display: block;
  margin-bottom: var(--s-2);
  font-weight: 700;
}

.seitenspalte {
  display: grid;
  gap: var(--s-7);
  padding: var(--s-6);
  background: var(--bg-karte);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-3);
}

.kontaktliste {
  display: grid;
  gap: var(--s-4);
}

.kontaktliste dt {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

.kontaktliste dd {
  margin: var(--s-1) 0 0;
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   16 · Fußzeile
   -------------------------------------------------------------------------- */

.fuss {
  padding-block: var(--s-8) var(--s-6);
  background: var(--anthrazit-900);
  color: var(--text-invers-leise);
  font-size: var(--t-sm);
}

.fuss__raster {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--linie-invers);
}

@media (min-width: 700px) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-8);
  }
}

.fuss__marke {
  color: var(--text-invers);
}

.fuss__text {
  max-width: 34ch;
  margin-top: var(--s-4);
}

.fuss__titel {
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-invers-schwach);
}

.fuss__liste {
  display: grid;
  gap: var(--s-3);
}

.fuss a {
  color: var(--text-invers-leise);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--text-invers);
  text-decoration: underline;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: var(--text-invers-schwach);
}

.fuss__rechtlich {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

/* --------------------------------------------------------------------------
   17 · Seitenkopf für Unterseiten
   -------------------------------------------------------------------------- */

.seitenkopf {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}

.seitenkopf__titel {
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

/* --------------------------------------------------------------------------
   18 · Platzhalter-Kennzeichnung
   Alles, was die Auftraggeberin noch ersetzen muss, ist sichtbar markiert.
   -------------------------------------------------------------------------- */

.platzhalter {
  background: var(--flieder-100);
  border-bottom: 1px dashed var(--flieder-600);
  padding: 0 0.15em;
  color: var(--flieder-900);
}

/* Auf dunklem Grund muss die Markierung umgedreht werden: sonst trifft die
   helle Linkfarbe der Fußzeile auf den hellen Flieder-Hintergrund und der
   Text wird unlesbar (gemessen 1,58:1). */
.fuss .platzhalter,
.sektion--dunkel .platzhalter,
.cta-band .platzhalter {
  background: rgba(198, 181, 227, 0.15);
  border-bottom-color: var(--flieder-400);
  color: var(--flieder-300);
}

/* --------------------------------------------------------------------------
   19 · Rechtstexte (Impressum, Datenschutz)
   Höhere Spezifität bei den Überschriften als beim Fluss-Abstand, damit
   die Abstände sich nicht gegenseitig aufheben.
   -------------------------------------------------------------------------- */

.rechtstext {
  max-width: 68ch;
}

.rechtstext > * + * {
  margin-top: var(--s-4);
}

.rechtstext h2 {
  margin-top: var(--s-8);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.28rem;
  line-height: 1.25;
}

.rechtstext h3 {
  margin-top: var(--s-6);
  font-size: 1.02rem;
  font-weight: 700;
}

.rechtstext ul {
  display: grid;
  gap: var(--s-2);
  padding-left: 1.15rem;
  list-style: disc;
}

.rechtstext dl {
  display: grid;
  gap: var(--s-3);
}

.rechtstext dt {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--anthrazit-500);
}

.rechtstext dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   20 · Utilities und Motion
   -------------------------------------------------------------------------- */

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

.stapel-4 > * + * {
  margin-top: var(--s-4);
}

.stapel-5 > * + * {
  margin-top: var(--s-5);
}

.stapel-6 > * + * {
  margin-top: var(--s-6);
}

.mt-6 {
  margin-top: var(--s-6);
}

.mt-7 {
  margin-top: var(--s-7);
}

/* Dezente Einblendung beim Scrollen. JS setzt .ist-sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
}

.reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Orchestrierte Hero-Sequenz beim Laden — die einzige Ladeanimation der Seite */
.anlauf > * {
  animation: anlauf 720ms var(--kurve) backwards;
}

.anlauf > *:nth-child(1) {
  animation-delay: 60ms;
}
.anlauf > *:nth-child(2) {
  animation-delay: 150ms;
}
.anlauf > *:nth-child(3) {
  animation-delay: 240ms;
}
.anlauf > *:nth-child(4) {
  animation-delay: 330ms;
}
.anlauf > *:nth-child(5) {
  animation-delay: 420ms;
}

@keyframes anlauf {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .knopf:hover {
    transform: none;
  }
}

@media print {
  .kopf,
  .cta-band,
  .sprungmarke {
    display: none;
  }

  body {
    background: #fff;
  }
}