.skip-link {
  position: fixed;
  z-index: 40;
  top: 14px;
  left: var(--pad);
  padding: 10px 14px;
  /* Fokus/Interaktion = Mint. Hier zahlt der hoehere Kontrast direkt auf A11y ein. */
  border: 2px solid var(--mint-400);
  border-radius: var(--radius);
  color: var(--on-navy);
  background: var(--navy-900);
  font-weight: 750;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-target {
  position: relative;
  top: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-target:focus {
  outline: none;
}

.story-section {
  position: relative;
  color: var(--ink);
  background: var(--paper);
  padding: clamp(86px, 12vw, 172px) var(--pad);
  overflow: clip;
}

.site-footer {
  color: var(--ink);
  background: var(--paper);
}

.story-section--light {
  color: var(--ink);
  background: var(--paper);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 720;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--green-400);
}

/*
  Laufende Kapitelmarke (01.08.2026)

  Gemessen mit Playwright in 60-px-Scrollschritten; als Kopf zaehlte, was eine GRUPPE
  benennt (Sektionslabel, Sektions-h2, Stationskopf der Szene, Regionsmarke, chapter-stop),
  nicht der Titel einer einzelnen Karte oder Registerzeile:

    geschaeftsfelder.html  Desktop 0 %   ohne Kopf  |  mobil 26 %, groesste Luecke 2,27 vh
    referenzen.html        Desktop 10 %             |  mobil 24 %, groesste Luecke 1,48 vh
    index.html             Desktop 23 %, 1,00 vh    |  mobil 27 %, groesste Luecke 2,13 vh

  Die 0 % am Desktop sind der `.chapter-stop` weiter unten — er klebt und traegt das
  Kapitel durch die ganze Liste. Mobil stellt die Media-Query bei 980px ihn auf
  `position: relative` zurueck, und genau dort entsteht die groesste Luecke der ganzen
  Website: vier Registerzeilen ohne einen einzigen Kopf.

  Die Marke ist die schmale Antwort darauf — eine Zeile, die den Kapitelnamen stehen
  laesst, waehrend Karten oder Zeilen darunter durchlaufen. Sie traegt keinen eigenen
  Text, sondern denselben i18n-Schluessel wie das Sektionslabel darueber; deshalb
  `aria-hidden` im Markup, die Vorlesereihenfolge hat den Kopf bereits.

  Selektor MIT Element-Teil (0-2-1): `.story-section p` (0-1-1) schlaegt sonst jede reine
  Klasse — dieselbe Falle wie bei `.closing-section__point` und `.reference-register__region`.
  Der Element-Teil gehoert auch in die Variante und in die Media-Query, nicht nur hierher.
*/
.story-section p.chapter-marke {
  position: sticky;
  top: calc(var(--topline-h, 76px) + 10px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 0 16px;
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Der Verlauf statt einer Flaeche: die Zeile deckt den durchlaufenden Inhalt ab, ohne
     als Balken zu lesen. `--paper` ist tokenisiert und wechselt mit dem Farbmodus mit. */
  background: linear-gradient(180deg, var(--paper) 66%, transparent);
}

.story-section p.chapter-marke::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--green-400);
}

/*
  Die Marke gilt nur, wo sie nichts wegnimmt.

  Zwei Gruende, sie am Desktop zurueckzuhalten:
  - `geschaeftsfelder.html` braucht sie dort nicht, der volle `.chapter-stop` klebt selbst
    (gemessen 0 % ohne Kopf). Erst wenn die Media-Query bei 980px den Stop loest, wird sie
    gebraucht.
  - `index.html` darf sie am Desktop nicht tragen: `kontrast.py` fiel auf 1,90:1 und 1,00:1,
    und der Screenshot bestaetigte den Befund — der Verlauf legte sich ueber die Kartentitel
    "AutarkyGlobe" und "CityHeat" im dreispaltigen Bento-Raster. Mobil ist dasselbe Raster
    einspaltig, die Marke sitzt im Kachelabstand und deckt nichts ab. Ein sticky Band vertraegt
    sich mit durchlaufenden Textzeilen, nicht mit randlosen Bildkacheln.
*/
.story-section p.chapter-marke--ab-mobil {
  display: none;
}

@media (max-width: 980px) {
  .story-section p.chapter-marke--ab-mobil {
    display: flex;
  }
}

/*
  Abstand, Haarlinie und Grundmasse teilen sich Kapitelueberschrift und Fusszeile.
  Die Flex-Verteilung tut das NICHT — sie gehoert allein in die Fusszeile, wo zwei
  Copyright und Versionsstand stehen gemeinsam links in einer Zeile.

  Auf einer h2 war sie ein Fehler mit spaeter Zuendung: solange die Ueberschrift aus
  einem einzigen Textknoten besteht, faellt nichts auf. reveal.js zerlegt sie fuer die
  Einblendung aber in ein <span> je Wort — und `space-between` schob die Woerter
  daraufhin an die Zeilenraender. "Anlagenbau und Abwassertechnik seit 2011" stand mit
  432px Luecke zwischen "seit" und "2011"; die Wortzwischenraeume selbst fielen als
  leere Flex-Items aus, weshalb anderswo Woerter aneinanderklebten. Betroffen waren
  alle 13 h2 in .story-section.
*/
.story-section h2,
.site-footer__meta {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--hairline, rgba(127, 127, 127, .28));
  font-size: clamp(.78rem, 1.1vw, .92rem);
  line-height: 1.5;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: center;
}

.site-footer__version {
  /* Fortlaufende Auslieferungsnummer. Bei jeder neuen ausgelieferten Fassung
     erhoehen - nie zuruecksetzen, nie doppelt vergeben, immer grosses V. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  opacity: .75;
}

.site-footer h2 {
  margin: 0;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  /* 19ch statt 16ch: "Abwassertechnik" brauchte bei 1920px 864px Zeilenbreite,
     hatte aber nur 775px — der Notnagel trennte es zu "Abwassertech-/nik". */
  max-width: 19ch;
  hyphens: manual;
  /* Notnagel gegen Ueberlauf langer Komposita ("Abwassertechnik"). Greift nur,
     wenn ein Wort sonst aus dem Container liefe — Trennstriche bleiben so die
     Ausnahme statt der Regel. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

.story-section h2 {
  /* 6vw ergab bei 1920px 104px Schrift; "Abwassertechnik" braucht dann 864px,
     die 7-Spalten-Zeile bietet aber nur 775px. 5.7vw haelt das laengste Wort in
     einer Zeile — der Engpass ist die Spaltenbreite, nicht die max-width. */
  font-size: clamp(2rem, 5.7vw, 5.7rem);
  line-height: .94;
}

.story-section h3 {
  margin: 0;
  color: inherit;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.05rem, 2vw, 2.05rem);
  line-height: 1.04;
  max-width: 20ch;
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.story-section p {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.58;
  /* `break-word` bricht ein Wort nur, wenn es sonst aus dem Container liefe —
     anders als `anywhere`, das auch die intrinsische Breite beeinflusst und
     deshalb "Energiegewinnu/ng" schon in halbwegs breiten Spalten zerriss.
     Zusammen mit den korrigierten max-width-Werten bleibt es ein Notnagel. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.story-section img,
.site-footer img {
  display: block;
  max-width: 100%;
}

.origin-section {
  background:
    linear-gradient(180deg, var(--paper), var(--surface));
}

.origin-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-width: var(--max);
  margin: 0 auto;
  row-gap: clamp(34px, 6vw, 76px);
}

.origin-section .section-label {
  max-width: var(--max);
  margin-inline: auto;
}

.origin-section__statement {
  grid-column: 2 / span 7;
  padding-left: clamp(0px, 4vw, 62px);
  border-left: 3px solid var(--green-400);
}

.origin-section__statement p {
  /* 13ch bei 5.4rem ergab ~13 Zeichen je Zeile — "Energiegewinnung" (16 Zeichen)
     passte nicht hinein und wurde zerrissen. Der Kernsatz hat 96 Zeichen und
     braucht ~28 Zeichen je Zeile, damit er in vier ruhige Zeilen faellt. */
  max-width: 28ch;
  margin-top: 28px;
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 2.9vw, 3rem);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.origin-section__proof {
  grid-column: 8 / span 4;
  align-self: end;
  max-width: 32rem;
  color: var(--muted);
}

.origin-section__numbers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(12px, 3vw, 42px);
}

.metric-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-card--green {
  background: var(--green-400);
  color: var(--navy-900);
}

.metric-card--wide {
  border-top: 5px solid var(--green-400);
}

.metric-card strong {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.1rem, 8vw, 8rem);
  line-height: .78;
  letter-spacing: 0;
}

.metric-card span {
  max-width: 17rem;
  font-size: clamp(.95rem, 1.2vw, 1.16rem);
  font-weight: 720;
  line-height: 1.28;
}

.fields-section__header,
.proof-section__header {
  max-width: var(--max);
  margin: 0 auto clamp(42px, 7vw, 92px);
}

.fields-section__header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.fields-section__header .section-label,
.fields-section__header h2 {
  grid-column: 1 / span 7;
}

.fields-section__header p {
  grid-column: 8 / span 4;
  color: var(--muted);
}

.field-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}

.field-card {
  position: relative;
  min-height: 260px;
  display: grid;
  align-content: end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /*
    Dunkle Grundflaeche, nicht --surface. Alle sieben Karten tragen ein Bild und darauf Text
    in --on-navy (hell). Solange das lazy geladene Bild fehlt, stand heller Text auf hellem
    --surface — auf langsamer Verbindung ein real unlesbarer Zwischenzustand. Die Flaeche
    unter dem Bild muss den Kontrast allein tragen koennen.
    (Vorsorglich, nicht als Fehlerbehebung: der Kontrastbefund vom 31.07.2026 an dieser
    Karte hatte eine andere Ursache — verdeckter Text hinter der Kopfzeile, siehe
    tools/kontrast.py.)
  */
  background: var(--navy-800);
}

.field-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}

.field-card picture,
.factory-section__image picture,
.proof-card picture {
  display: block;
}

.field-card picture {
  position: absolute;
  inset: 0;
}

.field-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 90%, transparent), color-mix(in srgb, var(--navy-900) 6%, transparent) 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--navy-700) 26%, transparent), transparent);
}

/*
  Auf schmalen Viewports deckt der Verlauf weiter nach oben.

  Der Verlauf oben ist auf das dreispaltige Raster gerechnet: dort sitzt der Text im
  unteren Drittel, wo `--navy-900` mit 90 % liegt. Einspaltig wird jede Kachel breiter
  und flacher, der Text rutscht in den hellen Teil ab 62 %. Gemessen am 01.08.2026 beim
  ersten mobilen Lauf von `tools/kontrast.py`: 3,74:1 auf "City Biogas" und 4,31:1 auf
  "WasteCon", gefordert sind 4,5:1.

  Deshalb bleibt der Verlauf hier bis nach oben wirksam (22 % statt 6 %) statt die
  Schriftfarbe zu aendern — die traegt in beiden Rastern dieselbe Rolle.
*/
@media (max-width: 980px) {
  .field-card::after {
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--navy-900) 94%, transparent),
        color-mix(in srgb, var(--navy-900) 62%, transparent) 58%,
        color-mix(in srgb, var(--navy-900) 22%, transparent)),
      linear-gradient(90deg, color-mix(in srgb, var(--navy-700) 26%, transparent), transparent);
  }
}

.field-card > div {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 2.6vw, 34px);
  color: var(--on-navy);
}

.field-card p {
  max-width: 30rem;
  margin-top: 12px;
  color: var(--on-navy-muted);
}

.field-card--large {
  grid-column: span 6;
  min-height: 520px;
}

.field-card--portrait {
  min-height: 620px;
}

.field-card--medium {
  grid-column: span 4;
  min-height: 390px;
}

.field-card--wide {
  grid-column: span 8;
  min-height: 360px;
}

.field-card--small {
  grid-column: span 4;
  min-height: 280px;
}

.field-card--text {
  background:
    linear-gradient(135deg, var(--navy-700), var(--navy-900));
}

.field-card--text::after {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--green-400) 18%, transparent)),
    linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 56%, transparent), transparent);
}

.field-card--photo img {
  object-position: 50% 64%;
}

.field-card--labtool img {
  object-position: 50% 43%;
}

.field-card--wastecon img {
  object-position: 50% 46%;
}

.field-card--citybiogas img {
  object-position: 50% 50%;
}

.factory-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: clamp(30px, 4vw, 58px);
  max-width: var(--max);
  margin-inline: auto;
  background: var(--paper);
}


.factory-section__image picture {
  width: 100%;
  height: 100%;
  min-height: inherit;
}


.factory-section__copy {
  grid-column: 1 / span 7;
}

.factory-section__copy h2 {
  /* Der Kasten ist nur 5 von 12 Spalten breit (~600px). Die globale H2-Groesse
     von bis zu 6.5rem macht allein das Wort "BioWasserstoff-" ~1000px breit —
     es lief links aus dem Kasten heraus und war abgeschnitten ("...erstoff-").
     Silbentrennung ist hier keine Loesung, sondern ein Groessenproblem:
     die Schrift muss zur Spaltenbreite passen, nicht umgekehrt. */
  max-width: 100%;
  /* Gemessen: "BioWasserstoff-Fabrik" brauchte bei 46px Schrift 494px, der Kasten
     bietet 438px. Bei 2.7vw sind es ~39px und das Wort passt in eine Zeile. */
  font-size: clamp(1.4rem, 2.7vw, 2.6rem);
  line-height: 1.02;
}

.factory-section__copy p {
  max-width: 33rem;
  margin-top: 24px;
  color: var(--muted);
}

.proof-section__header {
  padding-left: min(12vw, 160px);
}

.proof-section__header h2 {
  max-width: 14ch;
}

.proof-section__header p {
  max-width: 34rem;
  margin-top: 18px;
  color: var(--muted);
}

.proof-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(255px, auto);
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}

.proof-card {
  grid-column: span 4;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.proof-card h3 + p {
  margin-top: 14px;
}

.proof-card p {
  color: var(--muted);
}

.proof-card--image {
  grid-column: span 4;
  /* span 2 machte die Karte 1717px hoch, waehrend das nahezu quadratische Bild
     nur ~490px fuellt — der Rest war dunkle Leerflaeche ueber und unter dem Bild.
     Eine Reihe, und die Karte endet dort, wo ihr Inhalt endet. */
  grid-row: span 1;
  align-self: start;
  padding: 0;
  overflow: hidden;
}

.proof-card--image img {
  width: 100%;
  /* `height: auto` ist Pflicht: ohne das gewinnt das HTML-Attribut height="1462"
     und das Bild wurde 1462px hoch, statt der aspect-ratio zu folgen. Genau das
     hat die Karte auf 1717px aufgeblasen. */
  height: auto;
  aspect-ratio: 1 / .96;
  object-fit: contain;
  object-position: 50% 50%;
  background: var(--navy-900);
  filter: saturate(.82) contrast(1.04);
}

.proof-card--image h3,
.proof-card--image p {
  margin-inline: clamp(20px, 2.5vw, 34px);
}

.proof-card--image h3 {
  margin-top: clamp(20px, 2.5vw, 34px);
}

.proof-card--image p {
  margin-top: 12px;
  margin-bottom: clamp(20px, 2.5vw, 34px);
}

.proof-card--small-image {
  grid-column: span 3;
  min-height: 0;
  padding: 12px;
}

.proof-card--small-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  filter: saturate(.8) contrast(1.05);
}

.proof-card--crane img {
  aspect-ratio: 16 / 9;
}

.proof-card--small-image p {
  margin-top: 12px;
  font-size: .92rem;
  line-height: 1.38;
}

.proof-card--dark {
  grid-column: span 4;
  color: var(--on-navy);
  background: var(--navy-800);
}

.proof-card--dark p {
  color: var(--on-navy-muted);
}

.proof-card--green {
  color: var(--navy-900);
  background: var(--green-400);
}

.proof-card--green p {
  color: var(--navy-900);
}

.closing-section {
  padding-top: clamp(98px, 14vw, 190px);
  padding-bottom: clamp(98px, 14vw, 190px);
  background:
    linear-gradient(135deg, var(--surface), var(--paper) 64%);
}

.closing-section__copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-width: var(--max);
  margin: 0 auto;
}

/* Selektor MIT Element-Teil, sonst gewinnt `.story-section p` (0-1-1) gegen eine
   reine Klasse (0-1-0): die Schlusspointe stand dadurch in 18px statt als Display-
   Zeile — und in einer 15ch-Spalte, die jedes laengere Wort zerriss. */
.story-section p.closing-section__point {
  grid-column: 2 / span 9;
  max-width: 26ch;
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 3.6rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.closing-section h2 {
  grid-column: 7 / span 4;
  margin-top: clamp(52px, 7vw, 96px);
  color: var(--green-ink);
  font-size: clamp(1.6rem, 3.6vw, 4.1rem);
}

.closing-section h2 + p {
  grid-column: 7 / span 4;
  margin-top: 18px;
  color: var(--muted);
}

.contact-link {
  grid-column: 7 / span 4;
  justify-self: start;
  margin-top: 26px;
  padding: 13px 18px;
  border: 1px solid var(--green-400);
  border-radius: var(--radius);
  color: var(--navy-900);
  background: var(--green-400);
  font-weight: 780;
  text-decoration: none;
}

.site-footer {
  padding: clamp(44px, 7vw, 82px) var(--pad) 36px;
  border-top: 1px solid var(--line);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}

.site-footer h2 {
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 2.2rem);
}

.site-footer p,
.site-footer a {
  color: var(--muted);
  font-style: normal;
  line-height: 1.58;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
}

.site-footer a:focus-visible,
.contact-link:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--green-400);
  outline-offset: 3px;
}

.legal-page {
  min-height: 100vh;
  padding-top: clamp(132px, 14vw, 188px);
}

.legal-page__inner {
  max-width: 70ch;
  margin: 0 auto;
}

.legal-page h1 {
  margin: 0 0 clamp(38px, 5vw, 64px);
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height: .94;
  letter-spacing: 0;
  text-wrap: balance;
}

.legal-section {
  padding-block: clamp(24px, 4vw, 42px);
  border-top: 1px solid var(--line);
}

.legal-section h2,
.legal-section h3 {
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.06;
  letter-spacing: 0;
}

.legal-section h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
}

.legal-section h3 {
  margin-top: 28px;
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
}

.legal-section p,
.legal-section address {
  max-width: 70ch;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.7;
}

.legal-section address {
  font-style: normal;
}

.legal-section a {
  color: var(--green-ink);
  font-weight: 720;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.legal-section code {
  padding: .12em .35em;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--surface);
  font-size: .92em;
}

.funding-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: var(--max);
  margin: 42px auto 0;
}

.funding-logos img {
  width: 100%;
  height: 84px;
  object-fit: contain;
  padding: 12px;
  border-radius: var(--radius);
  background: #f7f8fa;
}

@media (max-width: 980px) {
  .origin-section__statement,
  .origin-section__proof,
  .fields-section__header .section-label,
  .fields-section__header h2,
  .fields-section__header p,
  .factory-section__image,
  .factory-section__copy,
  .closing-section__point,
  .closing-section h2,
  .closing-section h2 + p,
  .contact-link {
    grid-column: 1 / -1;
  }

  .origin-section__proof,
  .fields-section__header p {
    max-width: 42rem;
  }

  .origin-section__numbers {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 170px;
  }

  .field-card--large,
  .field-card--medium,
  .field-card--wide,
  .field-card--small,
  .proof-card,
  .proof-card--small-image,
  .proof-card--dark {
    grid-column: span 4;
  }

  .proof-card--image {
    grid-column: span 4;
  }

  .factory-section {
    row-gap: 0;
  }

  .factory-section__image {
    margin-right: calc(var(--pad) * -1);
    min-height: 430px;
    border-radius: 0;
  }

  .factory-section__copy {
    margin-top: -84px;
    box-shadow: 0 18px 0 color-mix(in srgb, var(--green-400) 18%, transparent);
  }

  .closing-section__copy {
    display: block;
  }

  .closing-section h2,
  .closing-section h2 + p,
  .contact-link {
    display: block;
    max-width: 42rem;
  }

  .contact-link {
    width: fit-content;
  }
}

@media (max-width: 620px) {
  .topline {
    padding-top: 14px;
  }

  .topline__brand {
    max-width: 13rem;
    font-size: .76rem;
  }

  .story-section {
    padding-block: clamp(70px, 19vw, 104px);
  }

  .origin-section__grid,
  .fields-section__header,
  .factory-section,
  .closing-section__copy,
  .proof-stage,
  .field-mosaic,
  .site-footer__grid,
  .funding-logos {
    display: block;
  }

  .origin-section__statement {
    padding-left: 18px;
  }

  /* 11ch ergibt bei dieser Schriftgroesse nur ~137px — "Energiegewinnung"
     allein braucht 172px und wurde deshalb zerrissen. Auf Mobil zaehlt die
     Containerbreite, nicht eine ch-Zahl. */
  .origin-section__statement p,
  .story-section p.closing-section__point {
    max-width: 100%;
  }

  .metric-card,
  .field-card,
  .proof-card,
  .funding-logos img {
    margin-top: 14px;
  }

  .field-card,
  .field-card--large,
  .field-card--medium,
  .field-card--wide,
  .field-card--small {
    min-height: 300px;
  }

  .field-card--portrait {
    min-height: 520px;
  }

  .proof-card--image img,
  .proof-card--small-image img {
    aspect-ratio: 4 / 3;
  }

  .proof-section__header {
    padding-left: 0;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }
}

/* ---- Footer-Logo, a11y-Helfer und Foerderpublizitaet (28.07.2026) ---- */

/* Das Firmenlogo ist dunkelblau/gruen und war urspruenglich auf weissem Grund.
   Freigestellt steht es auf Navy zu kontrastarm, deshalb eine helle Kachel —
   dieselbe Behandlung wie bei den Foerderlogos darunter. */
.site-footer__logo {
  width: clamp(300px, 24vw, 420px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Der Firmenname bleibt als h2 im Dokument (Ueberschriften-Hierarchie, Screenreader),
   sichtbar traegt ihn jetzt das Logo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.funding-notes {
  max-width: var(--max);
  margin: clamp(26px, 4vw, 44px) auto 0;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

.funding-notes p {
  margin: 0;
  max-width: 78ch;
  /* Der EFRE-Publizitaetsleitfaden (Stand 03/2023, Abschnitt 4.5) nennt fuer die
     Finanzierungserklaerung Arial und als weitere zulaessige Schriften Auto,
     Calibri, Garamond, Tahoma, Trebuchet, Ubuntu und Verdana. Figtree gehoert
     nicht dazu — dieser Block laeuft deshalb bewusst auf Verdana/Tahoma. */
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.funding-notes strong {
  color: var(--ink);
  font-weight: 700;
}

/* Das Cockpit-Rendering ist mit 2,4:1 sehr flach und steht auf hellem Grund.
   `contain` statt `cover`, damit der Container nicht angeschnitten wird, und
   die Karte bekommt eine hellere Grundflaeche als die Foto-Karten. */
.field-card--cockpit {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
}

.field-card--cockpit img {
  object-fit: contain;
  object-position: 50% 32%;
  padding: 8% 6% 0;
}

.field-card--cockpit::after {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 94%, transparent) 26%, transparent 62%);
}

/* Unter 620px traegt das 12-Spalten-Raster keine Textspalte mehr: die
   7-Spalten-Breite schrumpft auf ~137px, in die kein "Energiegewinnung" passt.
   Ab hier laufen die Textbloecke ueber die volle Breite. */
@media (max-width: 620px) {
  .origin-section__statement,
  .origin-section__proof,
  .story-section p.closing-section__point,
  .closing-section h2,
  .closing-section h2 + p,
  .contact-link {
    grid-column: 1 / -1;
  }

  .origin-section__statement {
    padding-left: 18px;
  }

  .origin-section__numbers {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Das Schaubild ist eine Infografik mit Beschriftungen, kein Foto: es muss
   vollstaendig und lesbar bleiben. Deshalb `contain` statt `cover`, heller
   Grund (die Grafik ist auf Weiss angelegt) und volle Rasterbreite — bei
   halber Breite waeren die Labels nicht mehr zu entziffern. */
.factory-section__schema {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(14px, 2vw, 30px);
  border-radius: var(--radius);
  background: var(--paper);
}

.factory-section__schema img {
  width: 100%;
  height: auto;
  max-height: 78svh;
  object-fit: contain;
}

.factory-section__schema figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .factory-section__copy {
    grid-column: 1 / -1;
  }
}

/* ── CTA-Panel ────────────────────────────────────────────────────────────────
   Der eine Baustein, in dem Signalblau und Mint zusammen auftreten (Referenz
   "Blue and mint", Wunsch Olaf 28.07.2026). Bewusst auf EINEN Bausteintyp
   begrenzt: Kontakt-/Handlungsaufforderung und Formularbloecke. Wird er ueber
   die Seite verstreut, ist es die dritte Farbe, die die Spec verbietet.

   Kontraste (gerechnet, nicht geschaetzt):
     weisse Schrift auf --blue-500      5,26:1  ok fuer Fliesstext
     Navy-Text auf Mint-Button         13,85:1  ok
     Mint-Text auf Blau direkt          3,93:1  GESPERRT — nie Text in Mint auf dem Panel
   Deshalb traegt Mint hier ausschliesslich Flaechen (Button, Bogen), nie Buchstaben. */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 68px);
  border-radius: var(--radius);
  color: #fff;
  background: var(--blue-500);
}

/* Der Mint-Bogen aus der Referenz — ein einziges grosses Element, kein Muster.
   Sitzt hinter dem Text und wird bei schmalen Viewports nicht mitgeschleppt. */
.cta-panel::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -38%;
  width: min(38%, 340px);
  aspect-ratio: 1;
  border: clamp(14px, 2.1vw, 28px) solid var(--mint-400);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  opacity: .82;
  transform: rotate(-28deg);
  pointer-events: none;
}

/* Auf dem Panel wird der Label-Strich weiss. Sonst steht das Logo-Gruen (Hue 103)
   direkt neben dem Mint (Hue 164) auf blauem Grund — drei Signalfarben auf einer
   Flaeche, und genau die Waisenfarbe, die die Spec als BEV-Fehler protokolliert. */
.cta-panel .section-label {
  color: #fff;
}

.cta-panel .section-label::before {
  background: #fff;
}

.cta-panel > * {
  position: relative;
  z-index: 1;
}

.cta-panel h2 {
  max-width: 18ch;
  color: #fff;
}

.cta-panel p {
  max-width: 46ch;
  color: color-mix(in srgb, #fff 88%, transparent);
}

.cta-panel__action {
  --magnet-x: 0px;
  --magnet-y: 0px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 2.4vw, 32px);
  padding: 14px 26px;
  border-radius: 999px;
  color: var(--navy-900);
  background: var(--mint-400);
  font-weight: 780;
  text-decoration: none;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.cta-panel__action:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--mint-400) 42%, transparent);
}

.cta-panel__action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .cta-panel::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-panel__action { transition: none; }
  .cta-panel__action:hover { transform: none; }
}

/* ---- Unterseite Referenzen und Projekte (28.07.2026) ---- */

.signature--regionen {
  min-height: auto;
}

.signature--regionen .signature__fallback-picture:nth-child(3) img,
.signature--regionen .signature__fallback-picture:nth-child(4) img {
  object-position: 50% 50%;
}

.signature--regionen .signature__content {
  margin-top: -100svh;
}

.reference-region.signature__panel,
.reference-region.signature__panel:nth-child(even) {
  min-height: 100svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-block: clamp(104px, 14svh, 160px) clamp(72px, 10svh, 128px);
}

.signature--regionen h1,
.signature--regionen h2 {
  max-width: 13ch;
  letter-spacing: 0;
}

.signature--regionen h1 {
  max-width: 11ch;
  font-size: clamp(4.4rem, 13.5vw, 13rem);
  line-height: .82;
}

.reference-example {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 4px 14px;
  max-width: min(100%, 30rem);
  margin-top: clamp(24px, 3vw, 38px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid color-mix(in srgb, var(--on-navy) 22%, transparent);
  color: var(--on-navy);
}

.reference-example__number {
  grid-row: 1 / span 2;
  color: var(--mint-400);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 760;
  line-height: 1.2;
}

.reference-example strong {
  color: var(--on-navy);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.08;
}

.reference-example span:last-child {
  color: color-mix(in srgb, var(--on-navy) 72%, transparent);
  font-size: .95rem;
  line-height: 1.35;
}

.reference-list {
  color: var(--ink);
  background: var(--paper);
  padding-block: clamp(72px, 9vw, 132px);
}

.reference-list > .section-label,
.reference-list > h2,
.reference-list .reference-register {
  max-width: var(--max);
  margin-inline: auto;
}

.reference-list h2 {
  margin-top: 0;
  color: var(--ink);
}

.reference-list .reference-register {
  margin-top: clamp(28px, 4vw, 56px);
}

.reference-register {
  width: 100%;
}

/*
  Selektor MIT Element-Teil (0-2-1), sonst gewinnt `.story-section p` (0-1-1) — dieselbe Falle
  wie bei `.closing-section__point` weiter oben. Ohne den `p`-Teil standen beide Kopfebenen
  gemessen auf 18px statt 46,1px bzw. 12,2px UND auf `margin: 0`: die Regionsgliederung der
  Referenzenseite war typografisch gar nicht vorhanden, die Koepfe lasen sich als Fliesstext.
  Aufgefallen erst, als die Reveal-Variante `marke` auf genau diese Koepfe gelegt wurde —
  eine Bewegung, die die Gliederung fuehren soll, fuehrt auf einem 18px-Absatz nichts.
*/
.story-section p.reference-register__region {
  margin: clamp(48px, 6vw, 78px) 0 clamp(16px, 2vw, 26px);
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 3.6rem);
  font-weight: 760;
  line-height: .95;
  letter-spacing: 0;
}

.story-section p.reference-register__region:first-child {
  margin-top: 0;
}

.story-section p.reference-register__group {
  margin: clamp(20px, 3vw, 42px) 0 10px;
  color: var(--muted);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story-section p.reference-register__group:first-child {
  margin-top: 0;
}

.reference-row {
  position: relative;
  display: grid;
  /* Meta-Spalte 175px statt 110px: "Trockenfermentation" braucht 162px und lief sonst in
     die Beschreibungsspalte (gemessen mit tools/wortbreite.py, das die Meta-Spalte
     zunaechst gar nicht geprueft hat). */
  grid-template-columns: 44px minmax(400px, 1.4fr) minmax(175px, .6fr) minmax(180px, 1fr);
  gap: clamp(12px, 1vw, 20px);
  align-items: start;
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out);
}

.reference-row:last-child {
  border-bottom: 1px solid var(--line);
}

.reference-row::before {
  content: "";
  position: absolute;
  left: -16px;
  top: clamp(18px, 2vw, 26px);
  width: 3px;
  height: calc(100% - clamp(36px, 4vw, 52px));
  background: var(--mint-400);
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: top;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.reference-row:hover,
.reference-row:focus-visible {
  transform: translateX(8px);
}

.reference-row:hover::before,
.reference-row:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.reference-row:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 8px;
}

.reference-row__number {
  color: var(--mint-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 760;
  line-height: 1.1;
}

.reference-row h3 {
  margin: 0;
  max-width: 100%;
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.05vw, 2.05rem);
  line-height: 1.02;
  letter-spacing: 0;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

.reference-row p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  line-height: 1.48;
}

.reference-row .reference-row__meta {
  color: var(--muted);
}

.reference-cta {
  padding-top: clamp(64px, 8vw, 118px);
}

.reference-cta .cta-panel,
.publizitaet > .section-label,
.publizitaet > h2,
.publizitaet .funding-notes,
.publizitaet .funding-logos {
  max-width: var(--max);
  margin-inline: auto;
}

.publizitaet {
  background: var(--paper);
}

.publizitaet h2 {
  color: var(--ink);
}

@media (max-width: 1279px) {
  .reference-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .reference-row__number {
    grid-row: 1 / span 3;
  }
}


@media (max-width: 980px) {
  .reference-region.signature__panel,
  .reference-region.signature__panel:nth-child(even) {
    align-content: start;
  }
}

@media (max-width: 720px) {
  .reference-list {
    padding-block: clamp(56px, 15vw, 92px);
  }

  .reference-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 18px;
  }

  .reference-row::before {
    left: -10px;
  }

  .reference-row:hover,
  .reference-row:focus-visible {
    transform: translateX(4px);
  }

  .reference-row h3 {
    /* 7vw statt 8vw: bei 380px Viewport bleiben 292px Textbreite, 8vw ergeben dort aber
       30,4px Schrift — "Forschungscontainer" braucht damit 314px und wird mitten im Wort
       getrennt (gemessen mit tools/wortbreite.py). 7vw bringt es auf 275px.
       Der Engpass ist die Spaltenbreite, nicht die max-width. */
    font-size: clamp(1.12rem, 7vw, 2.05rem);
  }
}

@media (max-width: 620px) {
  .signature--regionen {
    min-height: auto;
  }

  .reference-region.signature__panel,
  .reference-region.signature__panel:nth-child(even) {
    min-height: 100svh;
  }

  .signature--regionen h1 {
    font-size: clamp(4rem, 23vw, 7.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-row,
  .reference-row::before {
    transition: none;
  }

  .reference-row:hover,
  .reference-row:focus-visible {
    transform: none;
  }
}

/* ---- Unterseite Geschäftsfelder (30.07.2026) ---- */

.signature--schnitt {
  min-height: auto;
}

/*
  Diese Seite traegt den Monotonie-Bruch: Arbeitstageslicht statt blauer Stunde. Im Shader ist
  das ueber tint: 0 umgesetzt — ein Navy-Schleier in CSS haette denselben Bruch wieder zugezogen,
  nur an anderer Stelle. Deshalb hier KEIN seitlicher und kein oberer Gradient, sondern nur ein
  Fuss: er traegt die Gassaeulen-Labels und die Layer-Marke am unteren Rand.
  Denis' Entscheidung vom 30.07.2026 nach einem Vergleich dreier Staerken im Browser.
  Die Texttraeger brauchen den Shade nicht, sie haben ihre eigene Flaeche (10,9:1 gemessen).
*/
.signature--schnitt .signature__shade {
  background: linear-gradient(0deg, rgba(4, 18, 47, .30), transparent 30%);
}

.signature--schnitt .signature__content {
  margin-top: -100svh;
}

.business-layer.signature__panel,
.business-layer.signature__panel:nth-child(even) {
  min-height: 100svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-block: clamp(104px, 14svh, 160px) clamp(72px, 10svh, 128px);
}

/*
  DIE BILDMITTE BLEIBT FREI — das ist auf dieser Seite keine Geschmacksfrage.
  Der Durchstich waechst kreisrund aus dem Punkt (50 %, 52 % von oben). Die geerbte
  Regel `grid-column: 2 / span 7` legte den Texttraeger von 8 % bis 66 % der Breite und
  damit genau ueber diesen Punkt: der Effekt kam hinter dem Text hervor statt vor ihm.
  Die Traeger sitzen deshalb in je einer Haelfte und wechseln die Seite, sodass der
  Durchstich immer in der offenen Haelfte beginnt.
*/
.signature--schnitt .signature__copy {
  grid-column: 1 / span 6;
}

.business-layer.signature__panel:nth-child(even) .signature__copy {
  grid-column: 7 / span 6;
  justify-self: end;
}

.signature--schnitt .signature__copy {
  /*
    Breiter als die Daemmerungsseiten (36rem), weil die Ueberschriften dieser Seite
    laengere Woerter tragen: "Gesteuerte", "Komplette", "Verfahrenstechnik". Der Engpass
    ist die Spaltenbreite, nicht die max-width der Ueberschrift — gemessen mit
    tools/wortbreite.py.
  */
  max-width: min(100%, 40rem);
  /* Knapperes Innenmass als auf den anderen Seiten: die Spalte ist hier auf eine Bildhaelfte
     begrenzt, damit die Bildmitte frei bleibt — jeder Pixel Innenabstand fehlt der Zeile. */
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid rgba(247, 248, 250, .22);
  border-radius: var(--radius);
  color: var(--on-navy);
  background: rgba(4, 18, 47, .82);
  box-shadow: 0 24px 64px rgba(4, 18, 47, .22);
  backdrop-filter: blur(8px);
}

.signature--schnitt .signature__kicker {
  color: rgba(247, 248, 250, .82);
}

.signature--schnitt .signature__kicker::before,
.signature--schnitt .signature__station-line {
  background: rgba(247, 248, 250, .58);
}

.signature--schnitt h1,
.signature--schnitt h2 {
  max-width: 12ch;
  color: var(--on-navy);
  letter-spacing: 0;
}

/*
  Kleiner gedeckelt als auf den Daemmerungsseiten. Bei 9rem lief "Gesteuerte" mit 722px
  aus einer 498px breiten Spalte heraus — sichtbar ueber den Rand des Texttraegers hinaus.
  Der Deckel ist gemessen, nicht geschaetzt: tools/wortbreite.py meldet fuer diese Werte
  keinen Ueberlauf mehr in allen vier Breiten.
*/
.signature--schnitt h1 {
  font-size: clamp(3.4rem, 7.6vw, 6.1rem);
  line-height: .86;
}

.signature--schnitt h2 {
  font-size: clamp(3rem, 7.4vw, 5.9rem);
  line-height: .86;
}

.signature--schnitt .signature__text {
  max-width: 31rem;
  color: rgba(247, 248, 250, .86);
}

.signature--schnitt .signature__meta span:first-child {
  color: rgba(247, 248, 250, .78);
}

.business-hotspots {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.business-hotspot {
  position: absolute;
  left: var(--hotspot-x);
  top: var(--hotspot-y);
  display: grid;
  grid-template-columns: 18px minmax(0, 15rem);
  gap: 12px;
  align-items: start;
  color: var(--on-navy);
  opacity: 0;
  transform: translate(-9px, -50%);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.business-hotspot.is-active {
  opacity: 1;
  transform: translate(0, -50%);
}

.business-hotspot__mark {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: .42em;
  border: 2px solid var(--on-navy);
  border-radius: 50%;
  background: var(--green-400);
  box-shadow: 0 0 0 8px rgba(63, 158, 24, .22), 0 8px 28px rgba(4, 18, 47, .42);
}

.business-hotspot.is-active .business-hotspot__mark {
  width: 17px;
  height: 17px;
  margin-left: -2px;
  margin-top: .32em;
}

.business-hotspot__text {
  display: block;
  padding: .62rem .78rem;
  border: 1px solid rgba(247, 248, 250, .22);
  border-radius: var(--radius);
  background: rgba(4, 18, 47, .76);
  box-shadow: 0 18px 42px rgba(4, 18, 47, .24);
  backdrop-filter: blur(7px);
  font-size: clamp(.82rem, .92vw, .96rem);
  font-weight: 730;
  line-height: 1.28;
}

.business-hotspots-fallback {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: clamp(24px, 5vw, 48px) var(--pad);
  color: var(--on-navy);
  background: var(--navy-900);
}

.signature--schnitt.has-hotspot-motion .business-hotspots-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.business-hotspots-fallback h2 {
  max-width: 28ch;
  margin: 0 auto 18px;
  color: var(--on-navy);
  font-size: clamp(1.3rem, 2.4vw, 2.4rem);
  line-height: 1.02;
}

.business-hotspots-fallback ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.business-hotspots-fallback li {
  padding-left: 18px;
  border-left: 3px solid var(--green-400);
  color: var(--on-navy-muted);
  line-height: 1.45;
}

.business-proof {
  max-width: 30rem;
  margin: clamp(18px, 2.3vw, 28px) 0 0;
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(247, 248, 250, .22);
  color: rgba(247, 248, 250, .82);
  font-size: clamp(.96rem, 1.05vw, 1.08rem);
  font-weight: 700;
  line-height: 1.38;
}

.business-list {
  color: var(--ink);
  background: var(--paper);
  padding-block: clamp(72px, 9vw, 132px);
}

.business-list > .chapter-stop,
.business-list .business-register {
  max-width: var(--max);
  margin-inline: auto;
}

.business-list h2 {
  margin-top: 0;
  color: var(--ink);
}

.chapter-stop {
  position: sticky;
  z-index: 2;
  top: calc(var(--topline-h, 76px) + 18px);
}

/*
  Der Kapitelkopf klebt, waehrend die Kacheln unter ihm durchlaufen — dafuer muss sein
  Grund decken, solange Text darauf steht. Der Verlauf endete bei 74 % und damit noch
  im Textkoerper: gemessen ueber 12 Scrollproben schoben sich die Kacheln bis zu 288 px
  weit sichtbar hinter die Ueberschrift, "Biogasanlagen" stand mitten in "Vom Gehaeuse
  in die Leistung". Der deckende Teil reicht jetzt bis unter die letzte Textzeile, und
  erst das Polster darunter blendet aus.
*/
.chapter-stop--register {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding-bottom: clamp(28px, 5vw, 68px);
  background: linear-gradient(180deg,
    var(--paper) 0,
    var(--paper) calc(100% - clamp(28px, 5vw, 68px)),
    transparent 100%);
}

.chapter-stop--register .section-label,
.chapter-stop--register h2 {
  grid-column: 1 / span 7;
}

.chapter-stop--register p {
  grid-column: 8 / span 4;
  max-width: 30rem;
  color: var(--muted);
}

/*
  Anders als der Kapitelkopf klebt dieser Stop NICHT. Er erbt `position: sticky` von
  `.chapter-stop`, und das ergibt hier keinen Sinn: direkt darunter folgt das blaue
  Kontaktpanel, ueber dem der Stop dann haengenblieb — gruener Kicker auf Blau, der
  graue Absatz darauf praktisch unlesbar. Unter 980px war das schon abgeschaltet; die
  Begruendung gilt in jeder Breite.
*/
.chapter-stop--cta {
  position: relative;
  top: auto;
  max-width: var(--max);
  margin: 0 auto clamp(24px, 4vw, 42px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

/*
  `>` ist hier tragend, kein Schoenheitsfehler. Gemeint ist allein der Kicker, also das
  unmittelbare Kind. Ohne den Kombinator traf die Regel auch jedes <span class="reveal-word">,
  das reveal.js in den Absatz daneben setzt: alle Woerter wurden 67px gross, gruen und
  bekamen dieselbe `grid-column: 1 / span 5`. Sie stapelten sich damit uebereinander,
  verloren ihre Wortzwischenraeume ("imLabor", "Anlagegeplant") und legten sich ueber das
  blaue Kontaktpanel darunter. Sichtbar wurde das erst nach dem Wort-Split, also nie im
  rohen Markup — dieselbe Falle wie bei `.story-section h2` weiter oben.
*/
.chapter-stop--cta > span {
  grid-column: 1 / span 5;
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 4.2vw, 4.8rem);
  font-weight: 680;
  line-height: .92;
}

.chapter-stop--cta p {
  grid-column: 8 / span 4;
  max-width: 30rem;
  color: var(--muted);
}

.business-register {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  background: var(--line);
}

.business-register--editorial {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  border: 0;
  background: transparent;
}

.business-row {
  position: relative;
  min-height: 300px;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(22px, 3vw, 38px);
  color: var(--ink);
  background: var(--surface);
}

.business-register--editorial .business-row {
  min-height: clamp(180px, 18vw, 290px);
  border: 1px solid var(--line);
}

.business-register--editorial .business-row:nth-child(-n+6) {
  grid-column: span 6;
}

.business-register--editorial .business-row:nth-child(2),
.business-register--editorial .business-row:nth-child(4),
.business-register--editorial .business-row:nth-child(6) {
  transform: translateY(clamp(18px, 2.4vw, 34px));
}

.business-register--editorial .business-row:nth-child(7) {
  grid-column: span 12;
}

/* Akzent auf 04: Labortechnik ist die Bruecke zwischen Substratversuch und Anlagenpraxis. */
.business-register--editorial .business-row:nth-child(4) {
  background: var(--navy-800);
  color: var(--on-navy);
}

.business-register--editorial .business-row:nth-child(4) h3,
.business-register--editorial .business-row:nth-child(4) .business-row__number {
  color: var(--on-navy);
}

.business-register--editorial .business-row:nth-child(4) p {
  color: var(--on-navy-muted);
}

.business-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--green-400);
  transform-origin: top;
  transition: transform 120ms ease-out;
}

html.is-reveal-armed .business-row[data-reveal="reihe"]:not(.is-reveal-visible)::before {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.is-reveal-armed .business-row[data-reveal="reihe"]:not(.is-reveal-visible)::before {
    transform: scaleY(1);
  }
}

.business-row__number {
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 760;
  line-height: 1;
}

/*
  Die gemessenen Ueberschriften passen in ihre Spalten. Manuelle Trennung verhindert
  Browser-Hyphen bei normalen Umbruechen; balance verteilt mehrzeilige Titel ruhiger.
*/
.business-row h3 {
  max-width: 26ch;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0;
  hyphens: manual;
  text-wrap: balance;
}

.business-row p {
  max-width: 44rem;
  color: var(--muted);
  font-size: clamp(.98rem, 1.08vw, 1.12rem);
  line-height: 1.55;
}

.business-row--huelle::before {
  opacity: .95;
}

.business-row--technik::before {
  opacity: .72;
}

.business-row--reaktor::before {
  opacity: .52;
}

@media (max-width: 980px) {
  .business-layer.signature__panel,
  .business-layer.signature__panel:nth-child(even) {
    align-content: start;
  }

  .business-register,
  .business-register--editorial {
    grid-template-columns: minmax(0, 1fr);
  }

  .chapter-stop,
  .chapter-stop--register,
  .chapter-stop--cta {
    position: relative;
    top: auto;
    display: block;
  }

  .chapter-stop--register p,
  .chapter-stop--cta p {
    max-width: 42rem;
    margin-top: 18px;
  }

  .business-register--editorial .business-row,
  .business-register--editorial .business-row:nth-child(n) {
    grid-column: 1 / -1;
    transform: none;
  }
}

@media (max-width: 620px) {
  .signature--schnitt {
    min-height: auto;
  }

  .business-layer.signature__panel,
  .business-layer.signature__panel:nth-child(even) {
    min-height: 100svh;
  }

  .signature--schnitt .signature__copy {
    padding: 20px;
  }

  /* 16vw liess "Gesteuerte" bei 380px um 29px aus der Spalte laufen. Gemessen, nicht geschaetzt. */
  .signature--schnitt h1,
  .signature--schnitt h2 {
    font-size: clamp(2.4rem, 13.6vw, 5.8rem);
  }

  .business-hotspots {
    display: none;
  }

  .business-hotspots-fallback ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

.signature--kontakt {
  min-height: 100svh;
}

.signature--kontakt .signature__stage {
  position: sticky;
  height: 100svh;
}

.signature--kontakt .signature__content {
  margin-top: -100svh;
}

.signature--kontakt .signature__panel {
  min-height: 100svh;
  padding-top: clamp(116px, 17svh, 174px);
  padding-bottom: clamp(72px, 10svh, 120px);
  align-items: center;
}

.signature--kontakt .signature__copy {
  grid-column: 2 / span 8;
}

.signature--kontakt .signature__fallback-picture,
.signature--kontakt .signature__fallback-picture:nth-child(1) {
  --fallback-opacity: 1;
}

.signature--kontakt .signature__fallback-picture img {
  object-position: 50% 8%;
}

.signature--kontakt .signature__shade {
  background:
    linear-gradient(90deg, rgba(4, 18, 47, .72), rgba(4, 18, 47, .2) 52%, rgba(4, 18, 47, .42)),
    linear-gradient(0deg, rgba(4, 18, 47, .76), transparent 45%, rgba(4, 18, 47, .28));
}

.signature--kontakt h1 {
  max-width: min(8.8ch, calc(100vw - 2 * var(--pad)));
}

.contact-page {
  min-height: 100svh;
  padding-top: clamp(82px, 10vw, 132px);
  background:
    linear-gradient(180deg, var(--paper), var(--surface));
}

.contact-page__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.contact-page__header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(38px, 6vw, 88px);
}


.contact-page__header p {
  grid-column: 8 / span 4;
  color: var(--muted);
  max-width: 34rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
}

.contact-reach,
.contact-form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 82%, var(--surface));
}

.contact-reach {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 3vw, 42px);
  border-left: 4px solid var(--green-400);
}

.contact-form-panel {
  padding: clamp(24px, 4vw, 52px);
  box-shadow: 0 22px 68px color-mix(in srgb, var(--navy-900) 12%, transparent);
}

.contact-reach h2,
.contact-form-panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 2.25rem);
  line-height: 1;
  max-width: none;
}

.contact-details {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-style: normal;
}

.contact-details__label {
  color: var(--green-ink);
  font-size: .78rem;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-details a,
.form-consent a {
  color: var(--mint-ink);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.contact-details a:focus-visible,
.form-consent a:focus-visible {
  outline: 2px solid var(--mint-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label,
.form-consent,
.form-required {
  color: var(--ink);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.35;
}

.form-field input,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, var(--surface));
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.form-field textarea {
  min-height: 190px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-consent input:focus-visible,
.contact-form__submit:focus-visible {
  outline: 3px solid var(--mint-ink);
  outline-offset: 3px;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--mint-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint-ink) 18%, transparent);
}

.form-security {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, var(--paper));
}

.form-security strong {
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* Selektor MIT Element-Teil (0-2-1), sonst gewinnt `.story-section p` (0-1-1)
   bei margin, font-size und line-height — dieselbe Falle wie bei
   `.reference-register__region`. Die Kontaktseite ist eine `.story-section`. */
.story-section p.form-security-status {
  margin: 6px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 62%, var(--paper));
  font-size: .95rem;
  line-height: 1.45;
}

.form-security-status[data-state="error"] {
  border-color: var(--danger-line);
  color: var(--danger-ink);
  background: var(--danger-surface);
}

.form-security-status[data-state="ready"] {
  border-color: color-mix(in srgb, var(--mint-ink) 42%, transparent);
  color: var(--mint-ink);
}

.form-trap {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.form-consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--green-500);
}

.form-required {
  color: var(--danger-ink);
}

.contact-form__submit {
  justify-self: start;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius);
  color: var(--navy-900);
  background: linear-gradient(135deg, var(--green-400), var(--mint-400));
  padding: 14px 22px;
  font: inherit;
  font-weight: 820;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}

.contact-form__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

.contact-form__submit:disabled {
  color: var(--disabled-ink);
  background: var(--disabled-fill);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

@media (max-width: 900px) {
  .signature--kontakt .signature__copy {
    grid-column: 1 / -1;
  }

  .contact-page__header,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-page__header p {
    grid-column: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .form-field input,
  .form-field textarea,
  .contact-form__submit {
    transition: none;
  }
}

/* Geschaeftsfelder-Profil: ergaenzt die Inhaltssektionen unterhalb der Schnitt-Signature. */
.business-profile,
.business-usp,
.business-research {
  color: var(--ink);
  background: var(--paper);
}

.business-profile {
  padding-block: clamp(76px, 9vw, 136px) clamp(54px, 7vw, 104px);
}

.business-profile__inner,
.business-usp__inner,
.business-research__inner {
  max-width: var(--max);
  margin-inline: auto;
}

.business-profile__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
  align-items: start;
}

.business-profile__inner > .section-label {
  grid-column: 1 / span 3;
}

.business-profile__copy {
  grid-column: 4 / span 7;
}

.business-profile__copy h2,
.business-usp h2,
.business-research h2 {
  margin-top: 0;
}

.business-profile__copy p {
  max-width: 52rem;
}

.business-profile__facts {
  grid-column: 4 / span 8;
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 1px;
  margin: clamp(10px, 2vw, 22px) 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.business-profile__facts div {
  min-width: 0;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--surface);
}

.business-profile__facts dt {
  color: var(--green-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 760;
  line-height: 1.05;
}

.business-profile__facts dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 720;
  line-height: 1.35;
}

.business-usp {
  padding-block: clamp(58px, 7vw, 108px);
}

.business-usp__inner > h2 {
  max-width: 16ch;
}

.business-usp__grid,
.business-research__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 58px);
  border: 1px solid var(--line);
  background: var(--line);
}

.business-usp__grid article,
.business-research__grid article {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--surface);
}

/*
  Fuenf Kacheln in zwoelf Spalten gehen nur in einem Muster auf, das die Fuenf
  einkalkuliert. Die vorige Verteilung (8+4, dann 4+6, dann 6) liess in zwei von drei
  Reihen Spalten offen — daher die ungleichen Breiten und die Loecher rechts.
  Jetzt: drei Zweierreihen-Logik wie im Leistungsregister, die letzte Kachel schliesst
  ueber die volle Breite ab.
*/
.business-usp__grid article {
  grid-column: span 6;
}

.business-usp__grid article:last-child {
  grid-column: span 12;
}

.business-usp__grid h3,
.business-research__grid h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.55vw, 1.65rem);
  line-height: 1.05;
  hyphens: manual;
  text-wrap: balance;
}

.business-usp__grid p,
.business-research__grid p {
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(.96rem, 1vw, 1.05rem);
  line-height: 1.5;
}

.business-list {
  padding-top: clamp(62px, 8vw, 118px);
}

.business-register--editorial .business-row:nth-child(1) {
  grid-column: span 6;
}

.business-register--editorial .business-row:nth-child(2),
.business-register--editorial .business-row:nth-child(4),
.business-register--editorial .business-row:nth-child(6) {
  grid-column: span 6;
  transform: translateY(clamp(18px, 2.4vw, 34px));
}

.business-register--editorial .business-row:nth-child(3),
.business-register--editorial .business-row:nth-child(5),
.business-register--editorial .business-row:nth-child(7) {
  grid-column: span 6;
}

.business-register--editorial .business-row:nth-child(7) {
  grid-column: span 12;
}

.business-research {
  padding-block: clamp(68px, 8vw, 128px);
}

.business-research__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 46px);
}

.business-research__intro {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--topline-h, 76px) + 18px);
  align-self: start;
}

.business-research__intro p {
  max-width: 34rem;
  color: var(--muted);
}

.business-research__grid {
  grid-column: 7 / span 6;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.business-research__link {
  grid-column: 7 / span 6;
  margin: 0;
}

.business-research__link a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--mint-ink);
  font-weight: 820;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.business-research__link a:focus-visible {
  outline: 2px solid var(--mint-ink);
  outline-offset: 5px;
  border-radius: 2px;
}

@media (max-width: 980px) {
  .business-profile__inner,
  .business-research__inner {
    display: block;
  }

  .business-profile__copy,
  .business-profile__facts,
  .business-research__grid,
  .business-research__link {
    margin-top: clamp(22px, 5vw, 34px);
  }

  .business-profile__facts,
  .business-usp__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-usp__grid article,
  .business-usp__grid article:first-child,
  .business-usp__grid article:nth-child(4),
  .business-usp__grid article:nth-child(5) {
    grid-column: 1 / -1;
  }

  .business-research__intro {
    position: relative;
    top: auto;
  }

  .business-register--editorial .business-row:nth-child(n) {
    grid-column: 1 / -1;
    transform: none;
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .business-usp__grid,
  .business-research__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* V11: eindeutiges, zentriertes Footerlayout; überschreibt ältere Responsive-Regeln. */
.site-footer__grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.site-footer__grid > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-footer nav {
  justify-content: center;
  margin: 0;
}
.site-footer__logo {
  display: block;
  margin: 0 auto 6px;
}
.site-footer__meta {
  justify-content: center !important;
  text-align: center;
}