/* ==========================================================================
   apollo consulting — Komponenten-Ebene

   Setzt auf css/tokens.css auf. HIER STEHT KEIN HEX-WERT.
   Alles zieht aus den semantischen Tokens (--text-*, --surface-*, --btn-*).

   Aufbau:
     1  Reset & Grundtypografie
     2  Layout: Container, Sektions-Tiers, Naht-Kollaps
     3  Buttons
     4  Header & Navigation
     5  Karten
     6  Bausteine: Capsule, Badges, Testimonial, Logo-Leiste, FAQ
     7  Kontaktleiste (Desktop)
     8  Footer
     9  Cookie-Banner
    10  Bewegung & Reduced Motion

   Layout-Regeln, die nicht wegdiskutiert werden (Herkunft: SEOGEO
   LAYOUT-STANDARD.md, siehe ~/.claude/skills/website-bauen/references/
   bau-stolpersteine.md Abschnitt A):
     - EIN Sektionsrhythmus ueber --section-pad, keine Sonderwerte
     - gleichfarbige Naehte kollabieren auf --section-pad-seam
     - Lesebreite klassen-gezielt kappen, nie als Blanket-Regel
     - kein horizontaler Ueberlauf, in keiner Ansicht
   ========================================================================== */

/* ── 1 · Reset & Grundtypografie ─────────────────────────────────────────── */

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

html {
  /* clip statt hidden: hidden wuerde position:sticky brechen (Sticky-Stack mobil) */
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

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

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
li { margin-bottom: var(--space-2); }

strong, b { font-weight: var(--fw-semibold); color: var(--text-heading); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-dark); color: var(--text-on-dark);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; }

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

/* ── 2 · Layout ──────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-md { max-width: var(--container-md); }

.section { padding-block: var(--section-pad); }
.section-light { background: var(--surface-subtle); }
.section-dark  { background: var(--surface-dark); color: var(--text-on-dark); }

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-inverse); }
.section-dark strong { color: var(--text-inverse); }
/* VORSORGE fuer Bausteine mit EIGENEM HELLEM Grund in einer dunklen Sektion.
   Die Regel darueber faerbt ALLE <strong> weiss — auf einer hellen Karte waere
   das weiss auf weiss. Beim Dunkel-Entwurf vom 17.08.2026 verschwand so der
   Name "Peter Walch" spurlos.

   BEDINGUNG, 22.08.2026: Hier standen frueher auch Testimonial-Karten. Die sind
   aber per Baustein-Definition DUNKEL (.testimonial-card traegt --surface-dark).
   In einer dunklen Sektion faerbte die Vorsorge den Namen deshalb fast-schwarz
   auf fast-schwarz — "Laurenz Resch" war auf /energiemanagement/ unlesbar und
   musste dort seitenlokal zurueckgenommen werden. Eine Vorsorge-Regel ohne
   Bedingung ist selbst eine Falle.

   REGEL FUER SPAETER: Hier gehoert NUR hinein, was einen HELLEN Eigengrund hat.
   Wer einen Baustein eintraegt, prueft vorher dessen background. */
.section-dark .trust-note strong,
.section-dark .logo-wall strong { color: var(--text-heading); }

/* ── Muted-Rolle kippt auf dunklem Grund ──────────────────────────────────────
   --text-muted-aa haelt seine 4,5:1 auf hellen Flaechen. Auf dunklem Grund ist
   derselbe Wert falsch (3,3-4,0:1). Statt in jedem dunklen Baustein einzeln die
   Farbe zu ueberschreiben, wird hier die ROLLE umdefiniert: jeder Baustein, der
   var(--text-muted-aa) benutzt, bekommt darin automatisch den richtigen Wert.
   Das faengt auch Bausteine, die den Token ueber eine generische Regel erben —
   .s3bar erbte ihn ueber `.figure figcaption` und wusste selbst nichts davon.

   NICHT `.section-dark` allein: in einer dunklen Sektion koennen Karten mit
   hellem Eigengrund stehen (FAQ, Leistungskarten). Deshalb Gegenstueck unten. */
.section-dark,
.site-footer,
.testimonial-card,
.s3bar { --text-muted-aa: var(--text-on-dark-muted); }

/* Gegenstueck: Bausteine mit HELLEM Eigengrund holen die dunkle Stufe zurueck.
   Dieselbe Pflege wie bei der <strong>-Vorsorge oben — wer einen hellgrundigen
   Baustein baut, der in eine dunkle Sektion kann, traegt ihn hier ein. */
.section-dark .card,
.section-dark .faq details,
.section-dark .leistungs-card,
.section-dark .frager__seite { --text-muted-aa: #686868; }

/* ── Getoente Flaeche traegt das CI-Grau nicht ────────────────────────────────
   #706f6f auf --surface-tint sind 4,18:1. Die getoenten Bausteine schalten
   deshalb auf die eine Stufe dunklere Ableitung um (4,64:1). Der CI-Wert selbst
   bleibt unangetastet — geaendert wird nur, welche Rolle auf welcher Flaeche
   gilt. Neue Bausteine mit --surface-tint gehoeren hier ergaenzt. */
.falle__seite--apollo { --text-primary: var(--text-primary-tint); }
/* Buttons ausnehmen: sonst faerbt die Link-Regel den Text auf dem Signal-Button
   gelbgruen — gemessen 1,63:1 auf Gruen. Buttons tragen ihre eigene Farbe. */
.section-dark a:not(.btn) { color: var(--color-accent-hi); }
.section-dark a:not(.btn):hover { color: var(--text-inverse); }

/* Gleichfarbige Naehte kollabieren — sonst addieren sich zwei volle Paddings
   zu einem leeren Doppelband. Je Farb-Tier ein Selektorpaar. */
.section-dark + .section-dark,
.section-light + .section-light,
.section:not(.section-light):not(.section-dark) + .section:not(.section-light):not(.section-dark) {
  padding-top: var(--section-pad-seam);
}
.section-dark:has(+ .section-dark),
.section-light:has(+ .section-light),
.section:not(.section-light):not(.section-dark):has(+ .section:not(.section-light):not(.section-dark)) {
  padding-bottom: var(--section-pad-seam);
}

/* Lesebreite — klassen-gezielt, NIE als .container > p Pauschalregel
   (die verschiebt kurze zentrierte Zeilen nach links) */
.section-intro,
.prose p,
.block-text { max-width: var(--measure); }
.section-intro-center { max-width: 68ch; margin-inline: auto; text-align: center; }

/* 48 -> 32 px am 23.08.2026 (Adrian: die Seite sei total langgezogen).
   Zwischen Ueberschrift und erstem Absatz stand eine ganze Leerzeile mehr,
   als der Rhythmus sonst irgendwo verwendet. Zwoelf Sektionen mal 16 px
   sind auf einer Leistungsseite rund 190 px. */
.section-head { margin-bottom: var(--space-6); }
.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-brand);
}
.section-dark .eyebrow { color: var(--color-accent-hi); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Marken-Hairline als Trenner — der Verlauf ist Akzent, nie Flaeche */
.hairline { height: 4px; background: var(--ac-gradient); border: 0; margin: 0; }

/* ── 3 · Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 48px;                 /* Touch-Target */
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: var(--fw-semibold);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primaer auf hellem Grund: Petrol + Weiss = 5,99:1 */
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); box-shadow: var(--shadow-md); }

/* Sekundaer auf hellem Grund */
.btn-secondary { background: transparent; color: var(--color-brand-strong); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--surface-subtle); color: var(--color-brand-strong); border-color: var(--color-brand); }

/* Signal-Button: Gruen traegt NUR dunkle Schrift (7,61:1). Weiss auf Gruen = 2,38:1, gesperrt.
   Das ist der auffaellige CTA. Globale Regel, ohne Ausnahme:
       dunkler Sektionsgrund  → Signal-Gruen mit dunkler Schrift
       heller Sektionsgrund   → Marken-Petrol mit weisser Schrift
   Farbe folgt dem Hintergrund, nicht dem Inhalt. */
.btn-accent { background: var(--btn-accent-bg); color: var(--btn-accent-text); font-weight: var(--fw-bold); }
.btn-accent:hover { background: var(--btn-accent-bg-hover); color: var(--btn-accent-text); box-shadow: 0 12px 32px rgba(222,220,0,.35); }

/* Ghost auf dunklem Grund — die Hero-Variante der Design-Vorlage */
.btn-ghost {
  background: transparent; color: var(--text-inverse);
  border-color: var(--btn-ghost-border);
  padding: 10px 10px 10px var(--space-6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--btn-ghost-bg-hover); color: var(--text-inverse); }
/* Pfeilkreis: der einzige Ort, an dem der Verlauf im Button auftaucht */
.btn-ghost .btn-arrow,
.btn .btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--ac-gradient-diag);
  color: var(--ac-white);
}
.btn-primary .btn-arrow { background: rgba(255,255,255,.18); }
/* Signal-Button: dunkler Kreis statt Verlauf — Gruen auf Gruen verschwindet. */
.btn-accent .btn-arrow { background: var(--ac-black); color: var(--ac-white); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cta-note { font-size: var(--fs-body-sm); color: var(--text-muted-aa); margin: var(--space-3) 0 0; }
.section-dark .cta-note { color: var(--text-on-dark-muted); }

/* ── 4 · Header & Navigation ─────────────────────────────────────────────── */

.site-header {
  position: absolute; inset-inline: 0; top: 0; z-index: 50;
  background: transparent;
}
/* Auf Seiten ohne dunklen Hero traegt der Header selbst die dunkle Flaeche */
.site-header.is-solid { position: sticky; background: var(--surface-dark); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding: var(--space-5) clamp(20px, 4vw, 56px);
  box-sizing: border-box;        /* sonst laeuft die Nav aus dem Viewport */
}
.brand { display: inline-flex; flex: none; }
/* Volker Loibl, 11.08.2026: "Apollo Logo ist recht klein dargestellt. Geht das
   eine Nuance groesser?" Damals 58 -> 66 px. Adrian am 16.09.2026: das war zu
   wenig, das Logo ist zugleich der Knopf zur Startseite und soll deutlich
   groesser sein. Jetzt 88 px (Desktop) und 56 px (Handy).
   Die Kopfleiste waechst dadurch nicht mit: ihre Hoehe ergibt sich aus
   Logo + Polsterung, und die Polsterung ist entsprechend zurueckgenommen.
   Gemessen: Desktop 114 -> 124 px, Handy 96 -> 96 px. Die 96 px auf dem Handy
   sind Pflicht — die Falz-Budgets von /kuenstliche-intelligenz/ (7 px Reserve)
   und /ueber-uns/ (18 px) haengen daran. Wer das Logo weiter vergroessert,
   nimmt die Pixel aus der Polsterung und misst beide Seiten danach nach. */
.brand-logo { height: 88px; width: auto; }
.header-inner { padding-block: 18px; }
@media (max-width: 600px) {
  .brand-logo { height: 56px; }
  .header-inner { padding-block: 20px; }
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav > a, .nav-trigger {
  /* min-height 44: Touch-Target-Mindestmass, gilt auch fuer die Nav */
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-heading);
  /* 600 statt 500: das Zwischengewicht kam site-weit nur in der Navigation
     und in zwei Chips vor und zog dafuer eine eigene 18-KB-Schriftdatei.
     Gemessen 10.08.2026 — jeder eingesparte Schnitt bringt rund 95 ms. */
  font-size: 0.9375rem; font-weight: var(--fw-semibold);
  color: var(--text-on-dark-muted);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-slow) var(--ease-standard);
}
.nav > a:hover, .nav-trigger:hover,
.nav > a[aria-current="page"] { color: var(--text-inverse); text-decoration: none; }

.nav-item-dropdown { position: relative; }
.nav-trigger::after {
  content: ''; display: inline-block; margin-left: 8px;
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav-trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 340px; padding: var(--space-5);
  background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.nav-dropdown[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-group-label {
  display: block; margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading); font-size: var(--fs-overline);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--color-accent-hi);
}
.nav-group-label:first-child { margin-top: 0; }
.nav-dropdown ul { list-style: none; margin: 0; padding: 0; }
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block; padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark); font-weight: var(--fw-semibold);
}
.nav-dropdown a:hover { background: rgba(255,255,255,.07); color: var(--text-inverse); text-decoration: none; }
.nav-dropdown a small {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-regular);
  color: var(--text-on-dark-muted);
}

.nav-cta { color: var(--btn-primary-text) !important; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; width: 26px; background: var(--text-inverse); transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  /* Der Burger MUSS ueber dem offenen Panel liegen, sonst faengt das Panel den
     Klick ab, der es schliessen soll — er steht im HTML vor der Nav und laege
     sonst darunter. Belegt am 21.08.2026: elementFromPoint traf auf der
     Burger-Mitte nav.nav statt den Knopf, auf 390 und 768 px. Das Panel laesst
     oben schon 96 px frei, damit der Burger sichtbar bleibt — es fehlte allein
     die Stapelreihenfolge. */
  .burger { display: flex; position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--space-2);
    padding: 96px var(--space-5) var(--space-7);
    background: var(--surface-dark);
    border-left: 1px solid var(--border-on-dark);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav > a, .nav-trigger { font-size: 1.0625rem; padding: var(--space-3) 0; text-align: left; }
  .nav-item-dropdown { position: static; }
  .nav-dropdown {
    position: static; transform: none; min-width: 0; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 0 var(--space-4);
    display: none;
  }
  .nav-dropdown[data-open="true"] { display: block; transform: none; }
  .nav-cta { margin-top: var(--space-4); }
}

/* ── 5 · Karten ──────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--text-primary); }

/* Leistungsfeld-Karte: ganze Karte bleibt klickbar, aber der Ankertext ist nur
   noch die Schlusszeile (.card-more). Vorher umschloss das <a> die komplette
   Karte — damit wurde der ganze Kartentext zum Ankertext, bis zu 292 Zeichen,
   und das Keyword ging darin unter. Jetzt sagt der Anker, wofuer die Zielseite
   steht; die Klickflaeche uebernimmt die Deckflaeche unten. */
.leistungs-card { padding: 0; }
.leistungs-card__inhalt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
  height: 100%; padding: var(--space-6);
}
.leistungs-card .card-icon {
  width: 44px; height: 44px; flex: none;
  color: var(--color-brand);
}
/* Watermark: dasselbe Symbol gross und dezent im Hintergrund — Wiedererkennung */
.leistungs-card .card-watermark {
  position: absolute; right: -18px; bottom: -18px;
  width: 132px; height: 132px;
  color: var(--color-brand);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

.leistungs-card .card-more {
  /* position: static ist Absicht: die Deckflaeche unten ankert dadurch an
     .leistungs-card__inhalt und deckt die ganze Karte ab, nicht nur die Zeile. */
  position: static;
  text-decoration: none;
  margin-top: auto; padding-top: var(--space-4);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-brand);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
/* Deckflaeche: macht die ganze Karte anklickbar, ohne den Ankertext zu
   verlaengern. Muss ::before sein — ::after traegt schon den Pfeil. */
.leistungs-card .card-more::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
/* Fokusring um die GANZE Karte statt nur um die Schlusszeile: Der Ring soll
   zeigen, was beim Druecken passiert, und gedrueckt wird die ganze Karte.
   Die Deckflaeche hat ohnehin schon die Kartenmasse, also traegt sie ihn.
   Der Ring am Link selbst wird dafuer unterdrueckt, sonst sind es zwei. */
.leistungs-card .card-more:focus-visible { outline: none; }
.leistungs-card .card-more:focus-visible::before {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  border-radius: var(--radius-lg);
}
.leistungs-card .card-more::after {
  content: ''; width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .leistungs-card:hover .card-more::after { transform: rotate(45deg) translate(3px, -3px); }
}

/* Sticky-Stack-Container: Karten darin sind vom Reveal ausgenommen (animations.js) */
.leistungs-stack { display: grid; gap: var(--space-5); }

/* ── 6 · Bausteine ───────────────────────────────────────────────────────── */

/* Citation Capsule — der Block, den KI-Systeme zitieren */
.capsule {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 4px);
  background: var(--surface-tint);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.capsule::before {
  content: ''; position: absolute; inset-block: 0; left: 0; width: 4px;
  background: var(--ac-gradient-diag);
}
.capsule p { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-heading); }
.capsule .capsule-stand { display: block; margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted-aa); }

/* Trust-Baustein (Auditoren-Tiefe) */
/* Volker Loibl, 11.08.2026: "Kann der Kasten 'Auditoren-Tiefe' etwas deutlicher
   abgesetzt werden?" Zwei Ursachen: er sass mit space-6 dicht am Fliesstext
   darueber, und weiss auf der hellgrauen Sektion ist fast kein Unterschied.
   Deshalb mehr Luft oben plus ein dezenter Schatten. Der linke Markenbalken
   bleibt; ein zusaetzlicher Farbakzent wuerde Volkers Wunsch nach weniger
   Farbwechseln widersprechen. */
.trust-note {
  display: flex; gap: var(--space-4); align-items: flex-start;
  margin-top: var(--space-7); padding: var(--space-5);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-sm);
}
.trust-note strong { display: block; font-family: var(--font-heading); }
.trust-note svg { width: 26px; height: 26px; flex: none; color: var(--color-brand); }

/* Outcome-Liste mit Haken */
.outcome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.outcome-list li { position: relative; margin: 0; padding-left: 38px; }
.outcome-list li::before {
  content: ''; position: absolute; left: 0; top: .3em;
  width: 20px; height: 11px;
  border-left: 3px solid var(--color-accent); border-bottom: 3px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* Auszeichnungs-/Badge-Zeile — gross und zentriert, nicht als Mini-Reihe */
.awards { text-align: center; }
.awards-label {
  display: block; margin-bottom: var(--space-5);
  font-family: var(--font-heading); font-size: var(--fs-overline);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--text-muted-aa);
}
.section-dark .awards-label { color: var(--text-on-dark-muted); }
.awards-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 44px);
}
/* Groesser gestellt am 17.08.2026 (Wunsch Adrian): 96 -> 132 px. Die Siegel sind
   der einzige Fremdbeleg auf der Seite — apollo hat keine Google-Bewertungen,
   die Trust tragen koennten. Zu klein erledigen sie ihre Aufgabe nicht.
   Die Bilddateien wurden dafuer von 222 auf 320 px Hoehe neu gebaut, sonst
   liefen sie auf Retina unter die 2-fache Aufloesung. */
.awards-logos img { height: 132px; width: auto; }
@media (max-width: 900px) { .awards-logos img { height: 104px; } }
@media (max-width: 600px) { .awards-logos img { height: 82px; } }

/* Hervorhebung einzelner Kennwerte, die im Text ohnehin stehen.
   Sparsam einsetzen: hoechstens eine Hervorhebung je Sektion, sonst wird aus
   dem Akzent Rauschen. Kein neuer Text, nur Auszeichnung. */
.mark {
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  white-space: nowrap;
}
.section-dark .mark, .hero-follow .mark { color: var(--color-accent-hi); }
/* Im Hero traegt der Kicker bereits Gelbgruen — die Hervorhebungen nehmen
   deshalb das Marken-Gruen (7,61:1 auf dem Hero-Grund), sonst konkurrieren
   zwei gleiche Akzente um dieselbe Aufmerksamkeit. */
.hero .mark { color: var(--color-accent); }
.mark--underline {
  white-space: normal;
  background-image: var(--ac-gradient);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

/* Farbe je Leistungskarte — die sechs Karten laufen die Marken-Rampe entlang
   (Blau → Grün, „Klarheit → Klimafreundlichkeit"). Das ist die Logik der CI,
   nicht Dekoration: das Raster wiederholt den Verlauf der Bildmarke.
   Dosierung: Karte bleibt WEISS. Farbe traegt nur die Icon-Plakette und eine
   3-px-Oberkante — sonst waeren es sechs Hintergrundfarben auf einer Seite. */
.leistungs-card { --k: var(--ac-petrol); }
.leistungs-card:nth-child(1) { --k: var(--ac-cobalt); }
.leistungs-card:nth-child(2) { --k: var(--ac-petrol); }
.leistungs-card:nth-child(3) { --k: var(--ac-teal); }
.leistungs-card:nth-child(4) { --k: var(--ac-green-700); }
.leistungs-card:nth-child(5) { --k: var(--ac-green); }
.leistungs-card:nth-child(6) { --k: var(--ac-lime-700); }

.leistungs-card::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--k);
  z-index: 2;
}

.leistungs-card .card-icon {
  box-sizing: content-box;
  padding: 11px;
  border-radius: var(--radius-md);
  /* Tint aus der Kartenfarbe statt fester Flaeche — bleibt automatisch hell
     genug fuer das dunkle Icon darauf. */
  background: color-mix(in srgb, var(--k) 12%, #ffffff);
  color: var(--k);
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
/* Die Karte traegt ihre Rampenfarbe an Oberkante und Icon-Plakette. Der
   Textlink darunter darf sie NICHT ungefiltert uebernehmen: die helle Haelfte
   der Rampe traegt auf Weiss keinen Text (Gruen 2,38:1, Gelbgruen-700 2,53:1,
   Tuerkis 3,78:1, Gruen-700 4,18:1 — vier von sechs Karten unter dem Soll).
   Deshalb eine zweite Variable je Karte: --k-text, dieselbe Farbe eine Stufe
   dunkler, bis sie AA auf Weiss haelt. Farbton und Saettigung bleiben, die
   Rampe bleibt als Reihenfolge lesbar. Werte gemessen, nicht geschaetzt. */
.leistungs-card { --k-text: var(--k); }
.leistungs-card:nth-child(3) { --k-text: #17818a; } /* Tuerkis   4,62:1 */
.leistungs-card:nth-child(4) { --k-text: #4b8236; } /* Gruen-700 4,62:1 */
.leistungs-card:nth-child(5) { --k-text: #4c8237; } /* Gruen     4,61:1 */
.leistungs-card:nth-child(6) { --k-text: #7a7900; } /* Gelbgruen 4,60:1 */
/* a.card-more statt .card-more: Seit die Schlusszeile ein Link ist, greift sonst
   .section-dark a:not(.btn) (Zeile 163) — die Gelb-Regel fuer Links auf DUNKLEM
   Grund. Die Karte ist aber weiss: gemessen 1,46:1, im Hover 1,0:1 (unsichtbar).
   a.card-more hat dieselbe Spezifitaet (0,2,1) und steht spaeter, also gewinnt es.
   Der Hover wird mitgesetzt, sonst faerbt Zeile 164 den Text weiss. */
.leistungs-card a.card-more { color: var(--k-text); }
.leistungs-card a.card-more:hover { color: var(--k-text); }
.leistungs-card .card-watermark { color: var(--k); opacity: .07; }

@media (hover: hover) {
  .leistungs-card:hover { border-color: color-mix(in srgb, var(--k) 45%, #ffffff); }
  .leistungs-card:hover .card-icon { background: var(--k); color: var(--ac-white); }
}
/* Gruen und Gelbgruen tragen keinen weissen Text (2,38:1 bzw. 1,46:1) —
   dort bleibt die Schrift dunkel. Gemessen, nicht geschaetzt. */
.leistungs-card:nth-child(5):hover .card-icon,
.leistungs-card:nth-child(6):hover .card-icon { color: var(--ac-black); }

/* Trust-Chips (Textbadges im Hero) */
.trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.trust-chips li {
  margin: 0; list-style: none;
  /* Eine Stufe groesser als der uebrige Kleintext — "Titel der Auszeichnungen"
     aus Volkers Grundsatzfrage vom 11.08.2026. Traegt kein Ueberschriften-Tag. */
  font-family: var(--font-heading); font-size: var(--fs-body);
  color: var(--text-on-dark-muted);
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.trust-chips li + li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent-hi); opacity: .8;
}

/* ── Hervorhebungs-Stufe fuer einzelne Absaetze ───────────────────────────
   Antwort auf Volkers Grundsatzfrage (11.08.2026): "Schriftgrad leicht
   erhoehen, um Dinge hervorzuheben, OHNE in das H1/H2-Regime zu rutschen."
   Genau EINE Stufe, site-weit gleich eingesetzt. Bewusst keine weiteren
   Sonderfaelle — werden viele Stellen hervorgehoben, sticht keine mehr hervor,
   und Volker fordert an anderer Stelle ausdruecklich mehr Ruhe.
   Traegt kein Ueberschriften-Tag, aendert also die SEO-Struktur nicht. */
.absatz-betont {
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--text-heading);
}
.section-dark .absatz-betont,
.kennzahl--auf-dunkel .absatz-betont { color: var(--text-inverse); }
/* Variante fuer volle Sektionsbreite (Wunsch Volker, Foerder-Absatz CO2-Seite) */
.absatz-betont--breit { max-width: none; }


/* ══════════════════════════════════════════════════════════════════════════
   MATERIALITÄT — site-weit, eingeführt am 22.08.2026

   Befund Adrian: „insgesamt ist hier mehr weiß als schwarz" und „das Grau
   wirkt auch zu weiß". Gemessen über alle fünf gebauten Seiten stimmte
   beides: die Flächenanteile lagen zwischen 17 und 53 % dunkel, und der
   getönte Ton war mit 98 % Helligkeit von Weiß nicht zu unterscheiden.

   Drei Antworten, alle hier gebündelt:
     1. Der getönte Ton ist sichtbar geworden (tokens.css, --surface-subtle).
     2. Flächen bekommen Material statt Farbe — Licht, Tiefe, Kante.
     3. Jeder Sektionswechsel bekommt seine Naht, nicht nur die dunklen.

   Bewusst NICHT gemacht: zusätzliche Farben, Muster oder Verläufe in der
   Fläche. Was hier passiert, verstärkt nur, was die CI ohnehin vorgibt —
   deshalb kollidiert es nie mit ihr und altert nicht.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Das CI-Grau trägt den neuen getönten Ton nicht ────────────────────
   #706f6f auf #eceae7 sind 4,17:1. Dieselbe Falle wie bei --surface-tint,
   dieselbe Lösung: die eine Stufe dunklere Ableitung übernimmt. Wer einen
   Baustein mit getöntem Eigengrund baut, trägt ihn hier ein. */
.section-light,
.capsule-band,
.logo-section,
.cta-zwischen,
.novelle,
.faq,
.frager__seite,
.leistungs-card,
.falle__seite--apollo,
.minicase,
.vergleich tbody tr:nth-child(odd),
.inventar tbody tr:nth-child(even) {
  /* BEIDES ist noetig, und das ist der Punkt: Eine Custom Property neu zu
     definieren aendert nichts an einer bereits GEERBTEN color. Der Absatz in
     einem dieser Bausteine hat seine Farbe von <body> geerbt, wo
     --text-primary laengst zu #706f6f aufgeloest war. Das Kipp-Muster, das
     bei --text-muted-aa funktioniert, greift hier deshalb nur zusammen mit
     einer echten color-Zuweisung (gefunden am Render, 22.08.2026: acht
     Stellen meldeten weiter 4,17:1, obwohl die Variable umdefiniert war). */
  --text-primary: var(--text-primary-tint);
  color: var(--text-primary-tint);
}
/* An der Wurzel statt je Baustein: Wer die getoente Flaeche traegt, gibt die
   dunklere Textrolle an ALLE Kinder weiter. Einzellisten waren der erste
   Versuch und liessen jedes Mal einen Baustein uebrig (Listen in Kaesten,
   Bildunterschriften, Aufzaehlungen). */
.section-light, .section-light :is(p, li, dd, figcaption, small, td, blockquote) {
  color: var(--text-primary-tint);
}

/* Gegenstueck: .cta-zwischen faerbt sich auf dunklem Grund selbst um. Die
   Textrolle muss mit — sonst steht die dunkle Stufe auf dunkler Flaeche
   (2,8:1, gemessen 22.08.2026). */
.section-dark .cta-zwischen,
.section-dark .cta-zwischen p { color: var(--text-on-dark); }

/* Tabellen in dunklen Sektionen sind HELLGRUNDIGE Bausteine: ihre Zeilen
   tragen --surface-subtle als Zebrastreifen. Ein erster Versuch faerbte sie
   wie Text auf Sektionsgrund — das ergab weisse Zahlen auf hellem Grau
   (1,19:1). Sie behalten deshalb die dunkle Textrolle; nur Kopfzeile und
   Gruppenkopf stehen auf einer eigenen Markenflaeche und bleiben weiss. */
.section-dark :is(.inventar, .vergleich) {
  --text-primary: var(--text-primary-tint);
  color: var(--text-primary-tint);
}
/* Der eigentliche Grund, warum diese Tabellen beim Helligkeitswechsel
   umfallen: ihre Zebrastreifen faerben nur JEDE ZWEITE Zeile: die uebrigen
   sind durchsichtig und nehmen den Sektionsgrund an. In einer dunklen
   Sektion steht dieselbe Tabelle dadurch halb auf Hell und halb auf Dunkel.
   Auf dunklem Grund bekommt sie deshalb einen durchgehenden hellen Koerper,
   und der Streifen entsteht ueber eine zweite Stufe. */
.section-dark :is(.inventar, .vergleich) tbody tr { background: var(--ac-white); }
.section-dark .inventar tbody tr:nth-child(even),
.section-dark .vergleich tbody tr:nth-child(odd) { background: var(--surface-subtle); }
.section-dark :is(.inventar, .vergleich) caption { color: var(--text-on-dark); }
.section-dark :is(.inventar, .vergleich) :is(caption, td, tbody th, span) {
  color: var(--text-primary-tint);
}
.section-dark :is(.inventar, .vergleich) :is(thead th, th[class*="gruppe"]) {
  color: var(--text-inverse);
}
/* Beschriftung und Quellenzeile stehen AUSSERHALB des hellen Tabellenkoerpers,
   auf dem dunklen Sektionsgrund. Sie muessen nach der Koerper-Regel stehen —
   sonst gewinnt bei gleicher Spezifitaet die spaetere und faerbt sie dunkel
   auf dunkel (3,26:1, gemessen 22.08.2026). Dieselbe Reihenfolgen-Falle wie
   Lehre M-13. */
/* Quellen- und Beschriftungszeilen von Grafiken, die auf dem SEKTIONSGRUND
   stehen (nicht im hellen Tabellenkoerper). Sammelregel statt Einzelfaelle:
   jede .quelle und jede Grafik-Bildunterschrift in einer dunklen Sektion. */
/* Doppelte Klasse fuer hoehere Spezifitaet: die Bildunterschriften der
   CO2-Seite tragen seitenlokale Farbregeln, die sonst gewinnen. <caption>
   gehoert mit dazu — es steht ausserhalb des Tabellenkoerpers auf dem
   Sektionsgrund. */
.section-dark.section-dark :is(caption, .quelle, figcaption) {
  color: var(--text-on-dark-muted);
}
.section-dark.section-dark :is(.inventar, .vergleich) tbody :is(.quelle, figcaption) {
  color: var(--text-muted-aa);
}
.section-dark :is(.inventar, .vergleich) tbody :is(.quelle, figcaption) {
  color: var(--text-muted-aa);
}

/* Zwei Bausteine der CO2-Seite mit eigenem getoenten Grund, die nicht in
   einer .section-light stehen und deshalb von der Wurzel-Regel nicht erfasst
   werden: die Reflex-Seite der Fallen-Gegenueberstellung und die
   Zeilenkoepfe der Inventar-Tabelle. Beide tragen jetzt die Rolle, die zu
   ihrer eigenen Flaeche passt. */
.falle__seite--reflex,
.falle__seite--reflex :is(p, li, span) { color: var(--text-primary-tint); }
.inventar tbody th { color: var(--text-heading); }
.section-dark .inventar tbody th { color: var(--text-heading); }

/* Ueberschriften und Hervorhebungen behalten ihre eigene, dunklere Rolle. */
.section-light :is(h1,h2,h3,h4,strong,b),
.capsule-band :is(h2,h3,strong,b),
.cta-zwischen :is(strong,b),
.novelle :is(strong,b),
.minicase :is(strong,b) { color: var(--text-heading); }

/* ── 1b · Hellgrundige Bausteine IN dunklen Sektionen ──────────────────────
   Die Lehre vom 22.08.2026 (Seite 4): Sechs FAQ-Karten standen leer da, weil
   `.section-dark h3` die Fragen weiss faerbte — auf weissem Kartengrund.
   Beim Hell/Dunkel-Umbau am selben Tag traf es die Leistungskarten der
   Startseite genauso: sechs Ueberschriften mit 1:1 auf Weiss.

   Hier stehen NUR Bausteine, die ihren hellen Grund auch in einer dunklen
   Sektion behalten. Wer sich selbst umfaerbt, gehoert NICHT hierher —
   .cta-zwischen etwa wird auf dunkel selbst dunkel (Zeile weiter unten), und
   stand nach einem ersten Versuch mit 2,8:1 grau auf grau da.
   Ebenso ausgenommen: Tabellenkoepfe. Die tragen eine eigene Markenflaeche
   und darauf korrekt Weiss — sie dunkel zurueckzufaerben ergab 1,43:1. */
.section-dark :is(.card, .leistungs-card, .faq details, .frager__seite,
                  .novelle, .befreiung, .falle__seite--apollo,
                  .gewichtung > li) {
  --text-muted-aa: #686868;
  --text-primary: var(--text-primary-tint);
  color: var(--text-primary-tint);
}
.section-dark :is(.card, .leistungs-card, .faq details, .frager__seite,
                  .novelle, .befreiung, .falle__seite--apollo,
                  .gewichtung > li)
  :is(h2, h3, h4, strong, b, summary) {
  color: var(--text-heading);
}

/* ── 2 · Die getönte Fläche als weicher Verlauf statt Vollton ──────────────
   Oben eine Spur heller, unten eine Spur dunkler. Der Übergang ist nicht zu
   benennen, aber er nimmt der Fläche das Papierhafte. */
.section-light {
  background: linear-gradient(180deg, #f4f2ef 0%, #eceae7 46%, #e4e0da 100%);
}
.capsule-band { background: linear-gradient(180deg, #f0eeea, #e8e4de); }

/* ── 3 · Lichtbogen über den dunklen Flächen ───────────────────────────────
   Wird dem vorhandenen Sternenfeld beigemischt, NICHT über ::after gelegt —
   dort sitzt der Marken-Nebel. Zwei Ebenen auf einem Pseudo-Element
   auszutragen war der Fehler vom 09.08.2026 (Hairline gegen Sterne). */
.section-dark::before, .hero-follow::before {
  background-image:
    linear-gradient(168deg, rgba(255,255,255,.085) 0%,
                            rgba(255,255,255,.012) 26%,
                            rgba(255,255,255,0) 46%),
    radial-gradient(120% 60% at 50% -18%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(2px 2px     at 12% 18%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(1.5px 1.5px at 27% 62%, rgba(255,255,255,.7),  transparent 62%),
    radial-gradient(2.4px 2.4px at 41% 28%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(1.4px 1.4px at 55% 78%, rgba(255,255,255,.62), transparent 62%),
    radial-gradient(2px 2px     at 68% 14%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(1.5px 1.5px at 79% 52%, rgba(255,255,255,.66), transparent 62%),
    radial-gradient(2.2px 2.2px at 88% 82%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(1.4px 1.4px at 94% 34%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.8px 1.8px at 6% 74%,  rgba(255,255,255,.72), transparent 62%),
    radial-gradient(1.5px 1.5px at 34% 92%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.7px 1.7px at 19% 44%, rgba(255,255,255,.68), transparent 62%),
    radial-gradient(1.3px 1.3px at 48% 8%,  rgba(255,255,255,.55), transparent 62%),
    radial-gradient(2px 2px     at 61% 40%, rgba(255,255,255,.8),  transparent 62%),
    radial-gradient(1.4px 1.4px at 73% 70%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.9px 1.9px at 84% 22%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(1.3px 1.3px at 3% 30%,  rgba(255,255,255,.55), transparent 62%);
}

/* ── 4 · Karten bekommen Material ──────────────────────────────────────────
   Die Schatten-Tokens tragen die Aufwertung schon (tokens.css). Hier stehen
   die Bausteine, die bisher gar keinen Schatten hatten — sie lagen als reine
   Rahmen auf der Fläche. Klassenliste über alle Seiten des Laufs; wer einen
   neuen Karten-Baustein baut, trägt ihn hier ein. */
.schwellen li, .nutzen li, .rollen__feld, .beleg-zahl, .novelle,
.saeulen li, .esrs__kopf li, .esrs__karten li, .board__saeulen > li,
.schwelle-und__feld, .cap__stufe, .cap__deckel, .etappen__inhalt,
.belege li, .gegen__feld, .minicase, .pdca__phase, .normen li,
.wege__weg, .wege__ziel, .standards-tabelle, .befreiung,
.bereiche > li, .bereiche-fuss > div, .kaskade li, .gewichtung > li,
.basis__rating, .basis__grund {
  box-shadow: var(--shadow-md);
}
.section-dark .schwellen li, .section-dark .nutzen li, .section-dark .rollen__feld,
.section-dark .saeulen li, .section-dark .esrs__kopf li, .section-dark .esrs__karten li,
.section-dark .board__saeulen > li, .section-dark .schwelle-und__feld,
.section-dark .cap__stufe, .section-dark .cap__deckel, .section-dark .etappen__inhalt,
.section-dark .minicase, .section-dark .standards-tabelle,
.belege li, .gegen__feld, .pdca__phase, .normen li, .wege__weg, .wege__ziel,
.tool-fluss, .kontrast__feld, .staffel li, .teile__feld,
.section-dark .gewichtung > li {
  box-shadow: var(--shadow-md-dark);
}

/* ── 4b · Prozess-Schiene auf dunklem Grund ───────────────────────────────
   Die Schiene ist fuer helle Sektionen gebaut: ihr Text traegt
   --text-primary (#706f6f). Auf dunklem Grund sind das 3,62:1 — unter AA
   und im Screenshot grau auf Dunkelblau. Die drei Zeilen standen bisher
   seitenlokal auf zwei Seiten und wurden auf einer dritten vergessen
   (22.08.2026). Sie gehoeren hierher. */
.section-dark .prozess-rail__schritt h3 { color: var(--text-inverse); }
.section-dark .prozess-rail__schritt p  { color: var(--text-on-dark); }
.section-dark .prozess-rail__ergebnis   { color: var(--color-accent-hi); }
.section-dark .stand-zeile              { color: var(--text-on-dark-muted); }

/* ── 5 · Fotos und Tafeln bekommen Rahmenlicht ─────────────────────────────
   Ein Bild ohne Schatten klebt auf der Seite. Mit Tiefe steht es darin. */
.board img, .lotsen-foto img, .closer-foto img, .zitat-gruender__bild img,
.zitat-werk__bild img, .testimonial-card {
  box-shadow: 0 16px 34px rgba(20,22,26,.26);
}

/* ── 6 · Der Signal-Knopf bekommt Materialität, ohne zu leuchten ───────────*/
.btn-accent {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
              0 6px 16px rgba(222,220,0,.30);
}

/* ── 7 · Die Naht an JEDEM Sektionswechsel ─────────────────────────────────
   Bisher trug nur .seam-top den Marken-Verlauf, und die steht nur an
   dunklen Sektionen. Zwei helle Flächen gingen dadurch ohne Kante
   ineinander über — genau die Stelle, an der eine Seite beliebig wirkt.
   Der Hero bleibt ausgenommen: er trägt seine Kante selbst. */
main > .section-light,
main > .section:not(.section-dark):not(.section-light),
main > .capsule-band {
  border-top: 2px solid transparent;
  border-image: var(--ac-gradient) 1;
}
main > .hero-follow + * { border-top: 0; }

/* ══ TESTIMONIAL — Projekt-Standard apollo consulting ════════════════════════
   Festgelegt am 17.08.2026 von Adrian: "grundsaetzlich ist das fuer dieses
   Projekt jetzt die Art, wie wir die Testimonials anzeigen." Gilt fuer alle
   13 Seiten — neue Kundenstimmen bitte nach diesem Muster bauen.

   Aufbau (Reihenfolge im Markup):
     1. Kundenlogo auf heller Kachel  — sagt sofort, WER spricht
     2. Zitat gross                    — die Aussage traegt die Karte
     3. Trennlinie
     4. Portraet + Name, Funktion, Thema

   Warum dunkel: Die Karte ist ein Akzent auf heller Seite. Die Sternen-Textur
   ist dieselbe wie in den dunklen Sektionen und bindet sie an das Apollo-Motiv,
   statt sie zu einem schwarzen Balken zu machen (Adrian, 17.08.2026).

   Was hier bewusst NICHT steht: ein Farbstreifen an der Kante. Der erste
   Entwurf hatte die Marken-Rampe links — Adrian: "der gruene Strich gehoert gar
   nicht" dahin. Nicht wieder einbauen.

   Rechtliches zum Logo: Es steht in ORIGINALFARBEN auf einer hellen Kachel.
   Ein Einfaerben per Filter waere eine Aenderung der Bildmarke und ist von den
   Freigaben nicht gedeckt (Volker Loibl, 11.08.2026). */
.testimonial-card {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0; padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius-lg); background: var(--surface-dark);
}
.testimonial-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px     at 12% 18%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(1.5px 1.5px at 27% 62%, rgba(255,255,255,.6), transparent 62%),
    radial-gradient(2.4px 2.4px at 41% 28%, rgba(255,255,255,.8), transparent 62%),
    radial-gradient(1.4px 1.4px at 63% 78%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(2px 2px     at 78% 22%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(1.6px 1.6px at 88% 58%, rgba(116,185,89,.5), transparent 62%);
  background-size: 320px 280px, 210px 250px, 450px 360px, 280px 230px, 360px 320px, 240px 300px;
  /* Grundschicht: stillstehende Sterne. Sie traegt die Karte auch dann, wenn
     JavaScript aus ist oder der Besucher Bewegung abgestellt hat. Bewusst
     schwaecher als frueher (.5 -> .32), weil darueber die bewegte Ebene liegt. */
  opacity: .32;
}
/* Bewegte Apollo-Sterne (Adrian, 21.08.2026: "es sind aber keine beweglichen
   Apollo-Sterne in den Testimonials").
   Der erste Versuch war nur eine Helligkeitsschwankung ueber 11 Sekunden — die
   Sterne standen still und der Effekt war praktisch unsichtbar. Jetzt laeuft
   derselbe Canvas-Baustein wie in den dunklen Sektionen (js/interaktiver-
   hintergrund.js), damit Karte und Sektionen dieselbe Bildsprache haben.
   Dichte bewusst duenner als in den Sektionen (18000 statt 9000 — der Wert ist
   Flaeche PRO Partikel, hoeher heisst weniger): eine Karte ist klein, die
   Sektions-Dichte wirkt darin wie Konfetti und konkurriert mit dem Zitat. */
.testimonial-card > .ihg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --ihg-punkt:   255,255,255;
  --ihg-linie-a: 26,145,154;
  --ihg-linie-b: 116,185,89;
  --ihg-glanz:   116,185,89;
}
/* Inhalt ueber den Canvas. Ohne das liegt die Textur auf dem Zitat. */
.testimonial-card > *:not(.ihg) { position: relative; z-index: 1; }
.testimonial-card__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 var(--space-4); margin-bottom: var(--space-5);
  background: #fff; border-radius: var(--radius-md);
}
/* Auf 320 px ist der Kasten schmaler als das Logo breit ist. Mit fester
   Hoehe und `max-width: 100%` staucht der Browser es dann horizontal —
   gemessen 184x28 statt 226x28, also 18 % zu schmal. `contain` laesst
   das Logo stattdessen mitschrumpfen und haelt das Verhaeltnis. */
.testimonial-card__logo img { height: 28px; width: auto; display: block;
  max-width: 100%; object-fit: contain; object-position: left center; }
.testimonial-card blockquote {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.2; font-weight: 800;
  color: #fff; text-wrap: balance;
}
.testimonial-card blockquote p { margin: 0; font: inherit; color: inherit; }
.testimonial-card__fuss {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Portraet: quadratisch beschnitten und rund. Gilt fuer beide Einbauvarianten —
   Bild direkt im Container ODER in einem <picture>. Ohne die zweite Zeile
   schrumpft das <picture> und aus dem Kreis wird eine Ellipse (Fehler vom
   17.08.2026, von Volker als "Profilbild verunglueckt" gemeldet). */
/* Portraet 60 -> 120 px (Adrian, 17.08.2026, zweimal nachgeschaerft:
   "das Bild kann groesser" / "der Kreis mit der Frau kann groesser, auch bei
   Peter"). Die Quelldatei hat 252 px, das traegt 120 px auf Retina noch mit
   2.1-fach. Deutlich groesser ginge nur mit neu gebauten Portraets.
   Mobil 96 px: dort steht der Kreis ueber dem Text, nicht daneben. */
.testimonial-card__fuss > img,
.testimonial-card__fuss > picture { width: 148px; height: 148px; flex: none; }
@media (max-width: 560px) {
  .testimonial-card__fuss > img,
  .testimonial-card__fuss > picture { width: 112px; height: 112px; }
}
.testimonial-card__fuss > picture { display: block; }
.testimonial-card__fuss > picture img { width: 100%; height: 100%; }
.testimonial-card__fuss img {
  border-radius: 50%; object-fit: cover; object-position: center top;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
/* Name und Funktion eine Stufe groesser (Adrian, 17.08.2026: "Titel und Name
   kann auch groesser, Platz ist ja genug da"). Die Zuschreibung traegt die
   Glaubwuerdigkeit — wer spricht, muss ohne Hinsehen lesbar sein.
   Die Themenzeile darunter bleibt bewusst kleiner: sie praezisiert, sie
   konkurriert nicht mit dem Namen. */
.testimonial-card cite {
  font-style: normal; font-size: var(--fs-body); color: rgba(255,255,255,.72);
}
.testimonial-card cite strong {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: #fff; margin-bottom: .1rem;
}
.testimonial-card cite span {
  display: block; margin-top: .3rem; max-width: 52ch;
  font-size: var(--fs-body-sm); color: rgba(255,255,255,.6);
}
/* Auf schmalen Schirmen blieben neben dem Portraet nur rund 180 px fuer den
   Text — die Themenzeile zerriss in sechs Zeilen. Deshalb dort untereinander. */
@media (max-width: 560px) {
  .testimonial-card__fuss { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* Kundenlogo-Leiste — Originalfarben auf einheitlichen Kacheln.
   ACHTUNG, nicht zurueckdrehen: Die Logos duerfen NICHT entfaerbt werden.
   Die Freigaben der Markeninhaber gelten laut Volker Loibl (11.08.2026)
   ausdruecklich nur fuer die unveraenderte Bildmarke — Umfaerben waere eine
   Aenderung und muesste neu freigegeben werden. Zweiter Grund: der
   Wiedererkennungswert ist in Farbe deutlich hoeher.
   Die Kachel ersetzt den frueheren Graustufen-Filter als Ruhe-Element: sie
   fasst bunte Logos und Logos mit eigener Hintergrundfarbe (z. B. SENNEBOGEN
   weiss auf gruen) auf eine gemeinsame Flaeche gleicher Groesse. */
/* Flexbox statt Grid, damit die LETZTE Reihe zentriert bricht. Bei Grid stehen
   uebrige Kacheln linksbuendig und die Zeile sieht unfertig aus — bei 14 Logos
   waren das vier Luecken. Volker will "am liebsten ALLE Kundenlogos", die Zahl
   wird also wachsen und nie glatt aufgehen. */
.logo-wall {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 2.5vw, 28px);
}
.logo-wall > * {
  flex: 1 1 150px; max-width: 220px;
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  padding: var(--space-4) var(--space-5);
  background: var(--ac-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
.logo-wall img {
  max-height: 48px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .logo-wall > *:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-wall > * { transition: none; }
  .logo-wall > *:hover { transform: none; }
}

/* Zwischen-CTA — eine ruhige Zeile am Ende einer Sektion.

   Gebaut am 21.08.2026, weil auf der CO2-Seite zwischen dem Kopfbereich und dem
   Abschluss 19,6 Bildschirmlaengen ohne eine einzige Handlungsaufforderung lagen
   (gemessen auf 390 px). Der Wortlaut kam nur an zwei Stellen aus dem Text-Konzept
   — Hero und Abschluss —, der Bau hat das korrekt umgesetzt. Die Luecke steckte
   also im Konzept, nicht im HTML.

   Bewusst KEIN grosser Kasten und keine dunkle Flaeche: Der Baustein sitzt
   mitten im Lesefluss und soll ihn nicht unterbrechen, sondern eine Tuer
   danebenstellen. Wer weiterliest, wird nicht gestoert; wer bereit ist, findet
   den Weg ohne zu suchen. */
.cta-zwischen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  flex-wrap: wrap;
  max-width: var(--container-md); margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--ac-lime);
  border-radius: var(--radius-md);
}
.cta-zwischen p {
  flex: 1 1 320px; margin: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.cta-zwischen .btn { flex: none; }
/* Auf dem Handy untereinander und der Knopf ueber die volle Breite — sonst
   steht er halb im Nichts und ist als Tap-Ziel zu schmal.

   `flex: 0 1 auto` beim Absatz ist Pflicht, nicht Feinschliff: In der
   Spaltenrichtung wirkt die flex-basis von 320 px als HOEHE. Ohne diese Zeile
   riss der Kasten rund 230 px leeren Raum zwischen Text und Knopf auf.
   Gemessen am 21.08.2026 auf 390 px. */
@media (max-width: 600px) {
  .cta-zwischen {
    flex-direction: column; align-items: stretch;
    justify-content: flex-start; text-align: left;
  }
  .cta-zwischen p { flex: 0 1 auto; }
  .cta-zwischen .btn { width: 100%; justify-content: center; }
}
/* Kundenregel UE-04 (Volker, 05.09.2026): "In manchen Faellen geht der CTA
   fast unter, weil der Box-Hintergrund dem Farbmuster des Seiten-Segments sehr
   nahe kommt. Letztlich ist das oberste Ziel der gesamten Veranstaltung, dass
   jemand Hallo sagt."

   Gemessen am gerenderten Stand: Die Flaeche lag bei 6 % Weiss auf #14161a,
   also rgb(34,36,40) — eine Abhebung von 1,17:1. Praktisch unsichtbar.

   Dazu ein Fehler in der Kurzform: `border-color` setzt ALLE vier Seiten und
   hat damit auch den gelben Signalbalken links weiss gefaerbt, den die helle
   Variante traegt. Auf dunklem Grund fehlte der Marken-Anker komplett.

   Geloest ohne neue Farbe — genau der Zielkonflikt, den Volker selbst
   benennt ("das provoziert einen Zielkonflikt mit zu bunt"): Der Balken wird
   wieder gelb und etwas breiter, die Flaeche minimal heller. Gelb ist nach
   UE-05 ohnehin die einzige zugelassene Hervorhebungsfarbe. */
.section-dark .cta-zwischen {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  border-inline-start-color: var(--ac-lime);
  border-inline-start-width: 4px;
}

/* Laufendes Logo-Band — Volkers Wunsch "am liebsten ALLE Kundenlogos", ohne die
   Startseite mit einem Logo-Teppich zu belegen. Nur auf der Startseite; die
   Unterseiten behalten die ruhige, umbrechende Wand oben.

   Aufbau in drei Zustaenden, absteigend:
     1. ohne JS  → die Spur steht still und ist von Hand seitlich scrollbar.
                   Alle Logos sind im Quelltext, jedes genau einmal.
     2. mit JS   → .is-laufend: JS haengt EINE Kopie der Spur an (aria-hidden,
                   leere alt-Texte) und das Band laeuft nahtlos endlos.
     3. reduced-motion → JS startet gar nicht erst, es bleibt bei Zustand 1.
   Zeigen auf ein Logo (oder Tastaturfokus) haelt das Band an. */
.logo-band {
  --band-dauer: 55s;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Weiche Kanten: sonst wirken die Logos an den Raendern abgeschnitten.
     6 % Auslauf reicht, um den Schnitt zu verdecken, ohne ein Logo zu
     verschlucken — eine Kachel ist rund 200 px breit. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-band::-webkit-scrollbar { display: none; }
.logo-band__spur {
  display: flex;
  width: max-content;
  gap: clamp(16px, 2.5vw, 28px);
}
.logo-band .logo-wall {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
}
/* Feste Kachelbreite: im Band darf sich nichts dehnen, sonst ruckelt der Lauf,
   weil beide Spurhaelften unterschiedlich breit werden. */
.logo-band .logo-wall > * { flex: 0 0 auto; width: clamp(150px, 15vw, 200px); }

.logo-band.is-laufend { overflow-x: hidden; }
.logo-band.is-laufend .logo-band__spur {
  animation: logoband var(--band-dauer) linear infinite;
  will-change: transform;
}
@media (hover: hover) {
  .logo-band.is-laufend:hover .logo-band__spur { animation-play-state: paused; }
}
.logo-band.is-laufend:focus-within .logo-band__spur { animation-play-state: paused; }

/* -50 %: genau eine Spurhaelfte. Deshalb muss JS exakt EINE Kopie anhaengen. */
@keyframes logoband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-band.is-laufend { overflow-x: auto; }
  .logo-band.is-laufend .logo-band__spur { animation: none; }
}

/* FAQ */
.faq { max-width: var(--container-md); margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--border-subtle);
}
.faq details:first-of-type { border-top: 1px solid var(--border-subtle); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold);
  line-height: var(--lh-heading); color: var(--text-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; margin-top: .45em;
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--color-brand); }
.faq .faq-answer { padding: 0 0 var(--space-5); max-width: var(--measure); }

/* Einklapper fuer lange Textblöcke — Text bleibt IM DOM, nur visuell gekuerzt */
/* Einklapp-Block. Bis 17.08.2026 griff das Einklappen NUR bis 767 px — auf dem
   Desktop stand alles offen. Beim Automobilzulieferer-Block sind das 190 Woerter
   in drei Absaetzen am Stueck; Adrian: "so erschlaegt es einen".
   Jetzt auf allen Breiten eingeklappt, aber grosszuegiger als auf dem Handy:
   Ziel ist anlesen, nicht verstecken — der Anfang muss den Rest verkaufen.
   Der Verlauf am unteren Rand zeigt, dass es weitergeht; ohne ihn wirkt der
   Abschnitt schlicht abgeschnitten. */
.capsule-body { position: relative; }
.capsule-body:not(.is-expanded) {
  /* 11em zeigt beim Automobilzulieferer-Block rund zwei Drittel des Textes und
     schneidet das letzte Drittel ab — gemessen: 190 Woerter ergeben auf 1440 px
     288 px Hoehe. Bei 19em (dem ersten Versuch) passte alles hinein und es
     wurde gar nicht eingeklappt. */
  max-height: 11em; overflow: hidden;
}
.capsule-body:not(.is-expanded)::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 5em;
  background: linear-gradient(to bottom, transparent, var(--surface-page));
  pointer-events: none;
}
.section-light .capsule-body:not(.is-expanded)::after {
  background: linear-gradient(to bottom, transparent, var(--surface-subtle));
}
.section-dark .capsule-body:not(.is-expanded)::after {
  background: linear-gradient(to bottom, transparent, var(--surface-dark));
}
/* Der Block sitzt auf der CO2-Seite in einem eigenen Kasten mit eigener
   Flaeche — dort muss der Verlauf dessen Farbe treffen, nicht die der Sektion. */
.foerder-box .capsule-body:not(.is-expanded)::after {
  background: linear-gradient(to bottom, transparent, var(--surface-dark-raised));
}
@media (max-width: 767px) {
  .capsule-body:not(.is-expanded) { max-height: 15em; }
}
.capsule-toggle {
  display: none;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-5);
  min-height: 44px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
  color: var(--color-brand); background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  cursor: pointer;
}
/* Der Knopf war bis 17.08.2026 nur auf dem Handy sichtbar — passend dazu, dass
   nur dort eingeklappt wurde. Jetzt ueberall, sonst gaebe es einen
   abgeschnittenen Text ohne Weg zum Rest. */
.capsule-toggle { display: inline-block; }
.section-dark .capsule-toggle { color: var(--color-accent-hi); border-color: var(--border-on-dark); }

/* Leitsatz-Sektion (Volker + Melanie) */
.leitsatz { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.leitsatz-figure { position: relative; }
.leitsatz-figure img { width: 100%; max-width: 520px; margin-inline: auto; }
.leitsatz-kicker { font-family: var(--font-heading); font-size: var(--fs-body-lg); color: var(--text-on-dark-muted); margin-bottom: var(--space-2); }
.leitsatz-claim { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--text-inverse); margin: 0; }
.leitsatz-names { margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }
.leitsatz-names strong { color: var(--text-inverse); display: inline; }
@media (max-width: 860px) { .leitsatz { grid-template-columns: 1fr; } .leitsatz-figure { order: -1; } }

/* Zweispalter Text | Medium — gegen tote Flaechen rechts */
.split {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.split--media-first .split__media { order: -1; }
/* Bilder im Zweispalter werden auf ein ruhiges Format beschnitten, statt in
   ihrer Originalhoehe zu stehen — ein hochkantes Shooting-Foto wuerde die
   Sektion sonst erschlagen (gemessen: 887 px neben 3 Absaetzen Text). */
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  max-height: 560px;          /* Deckel: kein Bild erschlaegt seinen Textnachbarn */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split__media--hoch img { aspect-ratio: 4 / 5; object-position: center 24%; }

/* Kundenregel UE-02 (Volker, 05.09.2026): "Bitte immer die vollstaendige
   Bilddatei implementieren. Im Idealfall mehr Raum dafuer nutzen, oder falls
   das nicht moeglich ist, die Bilder kleiner skalieren."
   Pflicht bei allen Motiven mit eingebranntem KI-Vermerk — der sitzt am
   Bildrand und faellt bei jedem Beschnitt weg. Seit UE-01 ist er die
   einzige Kennzeichnung. Statt zu beschneiden wird die Hoehe begrenzt. */
.split__media--voll img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 30rem;
  margin-inline: auto;
  display: block;
}
.split__text > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--media-first .split__media { order: 0; }
}

/* Absender-Grafik: „Vier Absender, ein Adressat: Sie." — visualisiert genau
   diesen Satz aus dem Text, erfindet nichts dazu. */
.absender {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.absender__col { display: grid; gap: var(--space-3); }
.absender__chip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); color: var(--text-heading);
}
.absender__chip svg { width: 20px; height: 20px; flex: none; color: var(--color-brand); }
.absender__arrows { width: 46px; height: 132px; color: var(--border-strong); }
.absender__ziel {
  display: grid; place-items: center; gap: var(--space-2);
  aspect-ratio: 1; width: 100%; max-width: 168px; margin-inline: auto;
  border-radius: 50%;
  background: var(--surface-dark); color: var(--text-inverse);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.absender__ziel b {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--fs-h2); line-height: 1; color: var(--text-inverse);
}
.absender__ziel span { font-size: var(--fs-caption); color: var(--text-on-dark-muted); max-width: 16ch; }
@media (max-width: 560px) {
  .absender { grid-template-columns: 1fr; }
  .absender__arrows { width: 100%; height: 34px; transform: rotate(90deg); justify-self: center; }
}

/* Kennzahl-Kachel: hebt eine Zahl heraus, die im Text steht */
.kennzahl {
  display: grid; gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  background: var(--surface-dark); color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative; overflow: hidden;
}
.kennzahl::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: var(--ac-gradient);
  z-index: 2;
}
/* Motiv hinter der Kennzahl. Auf dem fast schwarzen Grund kommt der helle
   Satellitenbild-Freisteller erst richtig heraus — und hier liegt kein
   Fliesstext darueber, nur grosse Schrift (fuer die gilt 3:1 statt 4,5:1). */
.kennzahl::before {
  content: '';
  position: absolute; z-index: 0;
  right: -20%; bottom: -16%;
  width: 76%; aspect-ratio: 1;
  /* Zwei Ebenen in EINEM Pseudo: oben ein Scrim, der nach links hin abdunkelt
     (dort steht der Text), unten das Motiv. Ohne den Scrim fiel der Kontrast
     des Kleintexts auf 1,34:1 (an den Pixeln gemessen). */
  background:
    linear-gradient(100deg,
      var(--surface-dark) 0%, rgba(20,22,26,.94) 34%,
      rgba(20,22,26,.55) 58%, rgba(20,22,26,.1) 82%, transparent 100%),
    url('/assets/motive/erd-hand.webp') no-repeat center / contain;
  opacity: .95;
  transform: rotate(8deg);
  pointer-events: none;
}
.kennzahl > * { position: relative; z-index: 1; }
.kennzahl__wert {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1;
  color: var(--color-accent-hi);
}
.kennzahl__label { font-family: var(--font-heading); font-size: var(--fs-body-lg); color: var(--text-inverse); }
.kennzahl__note { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); max-width: 34ch; margin-inline: auto; }

/* Bild-Abschluss: dunkle CTA-Sektion mit dezentem Motiv */
.section-dark.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.section-dark.has-bg > .section-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section-dark.has-bg > .section-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.section-dark.has-bg > .section-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--surface-dark) 0%, rgba(20,22,26,.72) 45%, var(--surface-dark) 100%);
}

/* Abbinder */
.abbinder {
  margin-top: var(--space-7); padding-top: var(--space-6);
  border-top: 1px solid var(--border-on-dark);
  text-align: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); color: var(--text-inverse);
}

/* ── 7 · Kontaktleiste (Desktop) ─────────────────────────────────────────── */

.contact-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.contact-rail.is-visible { opacity: 1; pointer-events: auto; }
.contact-rail a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--color-brand); color: var(--ac-white);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.contact-rail a + a { border-top: 1px solid rgba(255,255,255,.16); }
.contact-rail a:hover { background: var(--color-brand-strong); text-decoration: none; }
.contact-rail svg { width: 21px; height: 21px; }
/* Erst ab 1400 px einblenden: darunter ist zwischen Container (max 1200 px)
   und Viewport-Rand kein Platz, die Leiste wuerde Inhalt ueberdecken —
   auf 1280 px waren es die letzten beiden Kundenlogos. */
@media (max-width: 1399px), (hover: none) { .contact-rail { display: none; } }

/* ── 8 · Footer ──────────────────────────────────────────────────────────── */

/* Kompakter gestellt am 23.08.2026 (Adrian: „der Footer kann generell noch
   deutlich kompakter"). Gemessen bei 1440 px: 644 px vorher. Angefasst sind
   nur Abstaende, keine Schriftgroessen und keine Inhalte — und NICHTS in den
   980-px-Bloecken darunter: dort sitzt der Tap-Ziel-Ausbau vom 22.08.2026,
   der die Trefferflaechen von 19 auf 45 px gebracht hat.
   Die Fusszeile ist keine Sektion. Sie braucht deshalb auch nicht das volle
   Sektionspolster im Kopf. */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-7) var(--space-5);
  border-top: 4px solid transparent;
  border-image: var(--ac-gradient) 1;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--text-on-dark-muted); }
.footer-col a:hover { color: var(--text-inverse); }
.footer-col-eyebrow {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-heading); font-size: var(--fs-overline);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--color-accent-hi);
}
.footer-col-brand img { height: 52px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { color: var(--text-on-dark-muted); max-width: 38ch; }
.footer-claim {
  margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: var(--fw-extra);
  letter-spacing: .06em; color: var(--color-accent-hi);
}
.footer-contact li { color: var(--text-on-dark-muted); line-height: var(--lh-body); }
.footer-linkedin { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); min-height: 44px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border-on-dark);
  font-size: var(--fs-body-sm); color: var(--text-on-dark-muted);
}
.footer-bottom a { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: var(--text-inverse); }

/* Tap-Ziele der LINKSPALTEN. Gemessen am 22.08.2026 auf 390, 768 und 320 px:
   jeder Fusszeilen-Link 19 px hoch, 19 px Abstand zum naechsten. Das Mobil-Gate
   liess das bisher als Hinweis durchgehen, weil unter 44 px mit mindestens 8 px
   Abstand erlaubt ist — 19 px Hoehe bleiben aber 19 px Hoehe. Sieben Leistungs-
   links untereinander sind die laengste Liste der Seite und damit die Stelle,
   an der man am sichersten danebentippt.
   Dieselbe Loesung wie unten bei den Rechtslinks: Innenabstand statt groesserer
   Schrift. Die Zeile sieht unveraendert aus, die Trefferflaeche waechst auf
   45 px. Der bisherige Aussenabstand der Listenpunkte (12 px) wird dabei zu
   4 px, sonst wuerde die Spalte um die Haelfte laenger.
   Nur bis 980 px: am Desktop wird nicht getippt, und die kompakte Spalte
   bleibt erhalten. */
@media (max-width: 980px) {
  .footer-col li { margin-bottom: var(--space-1); }
  .footer-col a,
  .footer-contact a {
    display: inline-block;
    padding-block: 13px;   /* 19 px Textzeile + 2x13 = 45 px */
  }
  /* Der LinkedIn-Knopf traegt sein Mass schon selbst (min-height 44) — ohne
     diese Zeile addiert sich beides zu 70 px. */
  .footer-linkedin { padding-block: 0; }
}

/* ── Auszeichnungen in der Fusszeile ──────────────────────────────────────────
   Die drei Siegel standen bis 22.08.2026 nur auf der Startseite. Der Footer
   laeuft auf allen dreizehn Seiten — damit traegt jede Unterseite denselben
   Fremdbeleg. Deutlich kleiner als im Hero (56 statt 132 px): hier sind sie
   Beleg, nicht Blickfang. Originalfarben, kein Filter — es gilt dieselbe Regel
   wie fuer die Kundenlogos, die Freigaben decken nur die unveraenderte
   Bildmarke. */
.footer-awards {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  display: flex; align-items: center; gap: var(--space-6);
}
/* Beschriftung NEBEN den Siegeln statt darueber: spart eine ganze Zeile und
   liest sich als Bildunterschrift statt als eigener Abschnitt. Unter 600 px
   klappt der Block wieder untereinander (Regel weiter unten). */
.footer-awards .awards-label { margin-bottom: 0; text-align: left; flex: none; }
.footer-awards .awards-logos { justify-content: flex-start; gap: clamp(18px, 3vw, 32px); }
.footer-awards .awards-logos img { height: 56px; width: auto; }
/* Der Baustein bringt aus dem Hero eine ganze Inszenierung mit: Schweben,
   Halo, Licht-Sweep, Maus-Tilt. Im Hero ist das richtig, in der Fusszeile
   waere es genau das, was die Siegel hier NICHT sein sollen — Blickfang statt
   Beleg. Der Halo zog ausserdem ein leeres Band unter die Reihe. Hier stehen
   sie still. Die Bildmarke selbst bleibt unangetastet: entfernt wird nur, was
   um sie herum passiert, kein Filter auf dem Siegel. */
.footer-awards .award { animation: none; filter: none; }
.footer-awards .award::before,
.footer-awards .award::after { display: none; }
/* Ohne diese Zeile addieren sich der eigene Abstand der Siegelreihe und die
   64 px der Copyright-Zeile zu einem leeren Band von rund 100 px. */
.footer-awards + .footer-bottom { margin-top: var(--space-4); }
@media (max-width: 600px) {
  /* Drei Siegel neben vier gestapelten Linkspalten machen die Fusszeile sonst
     zur eigenen Seite. Eine Stufe kleiner und mittig ueber der Copyright-Zeile.
     Die Beschriftung steht hier wieder DARUEBER: nebeneinander bliebe fuer die
     Siegel auf 390 px keine Breite. */
  .footer-awards { text-align: center; flex-direction: column; gap: var(--space-3); }
  .footer-awards .awards-label { text-align: center; }
  .footer-awards .awards-logos { justify-content: center; }
  .footer-awards .awards-logos img { height: 46px; }
}

/* Tap-Ziele der Rechtslinks. Gemessen am 21.08.2026 auf 390 px: "Impressum"
   70x17 px, "Cookie-Einstellungen" 134x17 px, dazwischen 5 px — mit dem Daumen
   trifft man zuverlaessig daneben. Die Loesung ist Innenabstand, nicht groessere
   Schrift: die Zeile sieht unveraendert aus, die Flaeche waechst auf 44 px Hoehe.
   Nur bis 980 px, damit die kompakte Desktop-Zeile bleibt. */
@media (max-width: 980px) {
  /* Kein negativer Aussenabstand: der holte die Zeile optisch zurueck, liess
     die Trefferflaechen aber uebereinanderlaufen (gemessen 21.08.2026: eine
     Ueberlappung). Ueberlappende Ziele sind schlechter als kleine — man tippt
     dann sicher auf das falsche. Stattdessen darf die Zeile hoeher werden. */
  .footer-bottom { row-gap: var(--space-4); line-height: 1.2; }
  .footer-bottom a {
    display: inline-block;
    padding-block: 14px;      /* 17 px Textzeile + 2x14 = 45 px */
    margin-block: 4px;        /* 8 px Luft zwischen zwei Zeilen: ohne das
                                 stossen die Flaechen auf 0 px aneinander und
                                 man tippt am Rand auf den falschen Link */
  }
}

/* ── 9 · Cookie-Banner ───────────────────────────────────────────────────── */

.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 100;
  background: var(--surface-dark-raised); color: var(--text-on-dark);
  border-top: 1px solid var(--border-on-dark);
  box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--max-width); margin-inline: auto;
  padding: var(--space-5) var(--gutter);
}
.cookie-banner-text p { margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); max-width: 60ch; }
.cookie-banner-text strong { color: var(--text-inverse); font-family: var(--font-heading); }
.cookie-banner-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-banner .btn-secondary { color: var(--text-on-dark); border-color: var(--border-on-dark); }
.cookie-banner .btn-secondary:hover { background: rgba(255,255,255,.08); color: var(--text-inverse); }

/* ── 10 · Bewegung ───────────────────────────────────────────────────────── */

/* animations.js injiziert .reveal/.in-view selbst. Hier nur, was das Markup
   zusaetzlich braucht: Sektions-Reveal fuer Nicht-Card-Blöcke. */
.reveal-block { opacity: 0; transform: translateY(24px); }
.reveal-block.in-view,
.no-js .reveal-block { opacity: 1; transform: none; }
.reveal-block {
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-block { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ══ Kosmische Akzente ══════════════════════════════════════════════════════
   „apollo" ist der Markenname, der Hero zeigt die Erde aus dem Orbit — der
   Rest der Seite darf das leise aufgreifen. Bewusst dezent und CSS-only:
   keine zusaetzlichen Bilder, keine Requests, kein Gewicht.
   Drei Platzierungen, mehr nicht:
     1 Sternenfeld auf den dunklen Flaechen
     2 Orbit-Ringe hinter dem „Sie"-Ziel der Absender-Grafik
     3 Punktekranz der Bildmarke als grosses, sehr blasses Watermark
   ========================================================================= */

/* 1 · Sternenfeld — feine Punkte in unregelmaessigem Raster, zwei Ebenen fuer
       Tiefe. Liegt hinter dem Inhalt und faengt keine Klicks. */
.section-dark, .hero-follow { position: relative; isolation: isolate; }
.section-dark::before, .hero-follow::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px     at 12% 18%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(1.5px 1.5px at 27% 62%, rgba(255,255,255,.7),  transparent 62%),
    radial-gradient(2.4px 2.4px at 41% 28%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(1.4px 1.4px at 55% 78%, rgba(255,255,255,.62), transparent 62%),
    radial-gradient(2px 2px     at 68% 14%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(1.5px 1.5px at 79% 52%, rgba(255,255,255,.66), transparent 62%),
    radial-gradient(2.2px 2.2px at 88% 82%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(1.4px 1.4px at 94% 34%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.8px 1.8px at 6% 74%,  rgba(255,255,255,.72), transparent 62%),
    radial-gradient(1.5px 1.5px at 34% 92%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.7px 1.7px at 19% 44%, rgba(255,255,255,.68), transparent 62%),
    radial-gradient(1.3px 1.3px at 48% 8%,  rgba(255,255,255,.55), transparent 62%),
    radial-gradient(2px 2px     at 61% 40%, rgba(255,255,255,.8),  transparent 62%),
    radial-gradient(1.4px 1.4px at 73% 70%, rgba(255,255,255,.6),  transparent 62%),
    radial-gradient(1.9px 1.9px at 84% 22%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(1.3px 1.3px at 3% 30%,  rgba(255,255,255,.55), transparent 62%);
  background-repeat: no-repeat;
  opacity: 1;
  animation: sternenAtem 9s ease-in-out infinite;
}
/* Zweite, weitere Ebene mit Marken-Nebel: gibt der Flaeche Tiefe statt Flachheit */
.section-dark::after, .hero-follow::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 62% at 88% 6%,  rgba(26,145,154,.22), transparent 70%),
    radial-gradient(52% 58% at 6% 96%,  rgba(62,86,152,.26),  transparent 72%);
}
/* Der Abschluss-CTA traegt bereits ein Erd-Foto — dort kein Nebel doppelt */
.section-dark.has-bg::after { display: none; }

@keyframes sternenAtem {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* 2 · Orbit-Ringe hinter dem Ziel der Absender-Grafik.
       Inhaltlich passend: ein Zentrum, alles laeuft darauf zu. */
.absender__ziel { position: relative; }
.absender__ziel::before,
.absender__ziel::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.absender__ziel::before { width: 132%; height: 132%; }
.absender__ziel::after  { width: 168%; height: 168%; border-style: dashed; opacity: .6; }

/* 3 · Punktekranz der Bildmarke als grosses, sehr blasses Watermark.
       Nur EINMAL auf der Seite — sonst wird aus dem Akzent Tapete. */
.section--marke { position: relative; overflow: hidden; }
.section--marke::before {
  content: '';
  position: absolute; z-index: 0;
  right: -14%; top: 50%; transform: translateY(-50%);
  width: min(760px, 62vw); aspect-ratio: 1;
  /* Nur die Punkte-Bildmarke, ohne Wortmarke — sonst schimmert Schrift durch
     und es wirkt wie ein Fleck statt wie eine Textur. */
  background: url('/assets/logo/apollo-bildmarke.webp') no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
}
.section--marke > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .section-dark::before, .hero-follow::before { animation: none; opacity: .85; }
}

/* ══ Nachschärfungen 09.08.2026 (Punkte 1–5 aus der Gestaltungs-Durchsicht) ══ */

/* 1 · FAQ bekommt Kontur: Nummer, Karten-Optik, farbige Kante bei offener Frage.
      Vorher war der Block 785 px reine Typografie ohne visuellen Anker. */
.faq { counter-reset: faq; }
.section:has(> .container > .faq) .section-head { text-align: center; }
.faq details {
  counter-increment: faq;
  position: relative;
  margin-bottom: var(--space-3);
  padding-left: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}
.faq details:first-of-type { border-top: 1px solid var(--border-subtle); }
.faq details::before {
  content: '0' counter(faq);
  position: absolute; left: var(--space-5); top: var(--space-5);
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--fs-h4); line-height: 1;
  color: var(--border-strong);
  transition: color var(--dur-base) var(--ease-standard);
}
.faq details[open] {
  border-left-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}
.faq details[open]::before { color: var(--color-brand); }
@media (hover: hover) {
  .faq details:hover { border-left-color: var(--color-brand); }
}
.faq summary { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.faq .faq-answer { padding: 0 var(--space-5) var(--space-5) 0; }
@media (max-width: 600px) {
  .faq details { padding-left: var(--space-7); }
  .faq details::before { left: var(--space-4); font-size: var(--fs-body); }
}

/* 2 · Hero-Anschluss: die drei Ergebnisse als eigenstaendige Kacheln.
      Sie laufen dieselbe Marken-Rampe wie die Leistungskarten weiter — so
      liest die Seite als ein Stueck und nicht als zwei Systeme. */
.outcome-cards {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  counter-reset: outcome;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.outcome-cards li {
  counter-increment: outcome;
  --k: var(--ac-teal);
  position: relative; overflow: hidden;
  margin: 0; padding: var(--space-7) var(--space-6) var(--space-6);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.outcome-cards li:nth-child(1) { --k: var(--ac-petrol); }
.outcome-cards li:nth-child(2) { --k: var(--ac-teal); }
.outcome-cards li:nth-child(3) { --k: var(--ac-green); }

/* Oberkante in der Kartenfarbe — dasselbe Motiv wie bei den Leistungskarten */
.outcome-cards li::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--k);
}

/* Grosse, blasse Nummer als Tiefenebene */
.outcome-cards li::before {
  content: '0' counter(outcome);
  position: absolute; right: -14px; bottom: -40px;
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: 8.5rem; line-height: 1;
  color: var(--k);
  opacity: .16;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}

/* Haken in einer Plakette statt frei stehend */
.outcome-cards .haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--k) 26%, transparent);
  color: var(--k);
  position: relative; z-index: 1;
}
.outcome-cards .haken svg { width: 21px; height: 21px; }
.outcome-cards li span:not(.haken) { position: relative; z-index: 1; display: block; }

@media (hover: hover) {
  .outcome-cards li:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--k) 55%, transparent);
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
  }
  .outcome-cards li:hover::before { opacity: .22; }
}
@media (max-width: 860px) { .outcome-cards { grid-template-columns: 1fr; } }

/* Der Einleitungsabsatz wird zum Lead: groesser, mit Akzentkante */
.hero-follow-intro {
  position: relative;
  padding-left: var(--space-6);
  max-width: 72ch;
}
.hero-follow-intro::before {
  content: ''; position: absolute; left: 0; top: .25em; bottom: .25em;
  width: 3px; border-radius: 2px;
  background: var(--ac-gradient-diag);
}
.hero-follow-intro p {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-on-dark);
}
@media (max-width: 600px) {
  .hero-follow-intro { padding-left: var(--space-5); }
  .outcome-cards li::before { font-size: 5.5rem; }
}

/* 3 · Kundenlogo-Sektion als eigener Vertrauensblock statt Anhang */
.logo-section { background: var(--surface-subtle); }
.logo-section .logo-heading {
  margin: 0 0 var(--space-7);
  text-align: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); color: var(--text-heading);
}

/* 4 · Abbinder gross setzen — das ist die Marken-Signatur, keine Fusszeile */
.abbinder {
  margin-top: var(--space-9); padding-top: var(--space-7);
  border-top: 1px solid var(--border-on-dark);
  text-align: center;
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.15; letter-spacing: var(--ls-tight);
  color: var(--text-inverse);
  text-wrap: balance;
}
.abbinder em {
  font-style: normal;
  background: var(--ac-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* 5 · Marken-Hairline an weiteren Naehten — gibt dem Scrollen Takt.
      Sparsam: nur an den drei Wechseln, die eine Zaesur sind. */
.seam-top {
  position: relative;
  /* border-image statt ::before: das Pseudo-Element wird vom Sternenfeld der
     dunklen Sektionen belegt. Beides auf ::before = die Hairline gewinnt und
     die Sterne verschwinden (Fehler vom 09.08.2026). */
  border-top: 3px solid transparent;
  border-image: var(--ac-gradient) 1;
}

/* ══ Satellitenbild-Motive (Fussabdruck, Hand) ══════════════════════════════
   Beide Motive sind fuer spaetere Heroes vorgesehen (Fussabdruck laut
   Masterdatei fuer die CO2-Bilanz-Seite). Auf der Startseite deshalb bewusst
   klein und leise — sie sollen wiedererkennbar sein, nicht dominieren. */

/* Fussabdruck als Watermark der CO2-Bilanz-Karte. Inhaltlich exakt: der
   Carbon Footprint IST ein Fussabdruck. Ersetzt dort das Icon-Watermark. */
.leistungs-card--footprint .card-watermark { display: none; }
.leistungs-card--footprint::after {
  content: '';
  position: absolute; right: -6%; bottom: -8%;
  width: 62%; aspect-ratio: 1.56;
  background: url('/assets/motive/erd-fussabdruck.webp') no-repeat right bottom / contain;
  opacity: .16;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .leistungs-card--footprint:hover::after { opacity: .3; transform: translateY(-4px); }
}

/* Hand als sehr blasses Hintergrundmotiv in der Wert-statt-Pflicht-Sektion.
   Liegt hinter dem Text, nimmt ihm keinen Kontrast. */
.section--hand { position: relative; overflow: hidden; }
.section--hand::after { content: none; }   /* ersetzt: Hand sitzt jetzt in der Kachel */
.section--hand > .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .section--hand::after { display: none; } }

/* Interaktiver Canvas-Hintergrund (js/interaktiver-hintergrund.js).
   Skill: ~/.claude/skills/interaktiver-hintergrund/
   Das Skript ist CI-neutral — die Farben kommen ausschliesslich von hier. */
.ihg {
  position: absolute; inset: 0; z-index: 0;
  --ihg-punkt:   255,255,255;   /* Sterne */
  --ihg-linie-a: 26,145,154;    /* --ci-tuerkis-hell */
  --ihg-linie-b: 116,185,89;    /* --ci-gruen */
  --ihg-glanz:   116,185,89;    /* Halo unter der Maus */
}
.section-dark > .container,
.hero-follow > .container { position: relative; z-index: 1; }
/* Wo das Canvas laeuft, wird das statische CSS-Sternenfeld ausgeblendet —
   der Marken-Nebel (::after) bleibt. Ohne Canvas (reduced-motion, Touch)
   bleibt das CSS-Feld als Ersatz stehen. */
[data-ihg-aktiv]::before { background-image: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SEKTIONS-BAUSTEINE — zuerst gebraucht auf /co2-bilanz/, bewusst global

   Diese Bausteine stehen hier und nicht im Seiten-Stilblock, damit die sechs
   weiteren Leistungsseiten sie erben. Alle Farben ueber Rollen-Tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Naht Hero -> erste dunkle Sektion ─────────────────────────────────────
   Die :has()-Regel weiter oben greift hier nicht, weil der Unterseiten-Hero
   kein .section-dark ist. Ohne das entstuende eine doppelte Polsterung. */
.section-dark--nach-hero { padding-top: var(--section-pad-seam); }

/* ── Citation Capsule auf dunklem Grund ───────────────────────────────────
   Die helle .capsule wuerde hier dunkelgrauen Text auf Schwarz rendern. */
.capsule--dunkel {
  background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark);
}
.capsule--dunkel p { color: var(--text-on-dark); }
.capsule--dunkel .capsule-stand { color: var(--text-on-dark-muted); }

/* ── Scope-Baender ─────────────────────────────────────────────────────────
   Drei Baender, Farbe aus der Marken-Rampe, Nummer als Plakette. Der Text
   steht als echtes HTML im Dokument — Text in einer Grafik sehen weder
   Google noch KI-Systeme. */
.scope-stack { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3); counter-reset: none; }
.scope-stack__item { position: relative; display: flex; gap: var(--space-4);
  align-items: flex-start; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark); overflow: hidden; }
.scope-stack__item::before { content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px; }
.scope-stack__item--1::before { background: var(--ac-petrol); }
.scope-stack__item--2::before { background: var(--ac-teal); }
.scope-stack__item--3::before { background: var(--ac-green); }
/* Volker Loibl, 11.08.2026 (Farb-Beispiel 1): "Hier sind die Zahlen in einer
   anderen Farbe als der Strich daneben. Bitte entweder gleiche Farbe, oder die
   Zahlen einfach weiss und die Striche bleiben. Weniger Farbwechsel bringt mehr
   Ruhe in das Ganze."
   Er hatte recht, und der Grund war ein Versatz: Strich 1 war petrol, Zahl 1
   aber teal — also die Farbe von Strich 2. Umgesetzt ist seine zweite Option:
   Zahlen einheitlich weiss, die drei Striche behalten die Marken-Rampe. Weiss
   auf dem dunklen Kaestchen (rgba(255,255,255,.07) auf surface-dark-raised) ist
   kontraststark; die frueheren Lime-Zahlen lagen deutlich niedriger. */
.scope-stack__nr { flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--text-inverse);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
.scope-stack__txt { min-width: 0; }
.scope-stack__txt h3 { margin: 0 0 .2rem; font-size: var(--fs-h4);
  color: var(--text-inverse); }
.scope-stack__txt p { margin: 0; color: var(--text-on-dark); max-width: var(--measure); }

/* Anteilsspur Scope 3: waechst beim Einblenden auf 80 %. Der Wert steht als
   Text daneben, die Spur ist reine Veranschaulichung (deshalb role="img"
   mit sprechendem Label am Elternelement). */
.scope-stack__spur { margin-top: var(--space-3); height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.09); overflow: hidden; }
.scope-stack__spur-wert { display: block; height: 100%; width: 80%;
  border-radius: 999px; background: var(--ac-gradient);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease-out) .2s; }
.in-view .scope-stack__spur-wert,
.scope-stack.in-view .scope-stack__spur-wert { transform: scaleX(1); }

/* ── Abbildungen mit Bildunterschrift ─────────────────────────────────────── */
.figure { margin: var(--space-6) 0 0; }
.figure picture { display: block; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.figure figcaption { margin-top: var(--space-3); font-size: var(--fs-body-sm);
  line-height: 1.55; color: var(--text-muted-aa); max-width: var(--measure); }
.figure .quelle { display: block; margin-top: .25rem; font-size: var(--fs-caption); }
/* Volkers Grafiken tragen schwarzen Grund — auf heller Flaeche brauchen sie
   ein dunkles Panel, sonst steht ein schwarzer Block im weissen Raum. */
.figure--dunkel img, .figure--beleg img { background: var(--surface-dark);
  padding: var(--space-3); border: 1px solid var(--border-on-dark); }
.figure--dunkel figcaption { color: var(--text-on-dark-muted); }
.beleg-paar { margin-top: var(--space-6); }

/* Aufklappbare Vollansicht (Volkers Original in voller Aufloesung) */
.aufklapp { margin-top: var(--space-4); }
.aufklapp > summary { cursor: pointer; display: inline-flex; align-items: center;
  gap: .55rem; min-height: 44px; font-family: var(--font-heading);
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-on-dark);
  list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.aufklapp[open] > summary::before { transform: rotate(-135deg); }
.aufklapp > summary:hover span { text-decoration: underline; }

/* ── Wer fragt was an (CCF gegen PCF) ─────────────────────────────────────── */
.frager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin: var(--space-6) 0 0; }
.frager__seite { display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-subtle); border: 1px solid var(--border-subtle);
  text-align: center; }
.frager__label { font-family: var(--font-heading); font-size: var(--fs-overline);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted-aa); }
.frager__chips { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .5rem; justify-content: center; }
.frager__chips li { padding: .4rem .8rem; border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm); background: var(--surface-card);
  border: 1px solid var(--border-default); color: var(--text-primary); }
.frager__pfeil { width: 2px; height: 26px; background: var(--ac-gradient); }
.frager__ziel { font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 800; line-height: 1; padding: .5rem 1.2rem;
  border-radius: var(--radius-md); color: var(--text-inverse); }
.frager__seite--ccf .frager__ziel { background: var(--ac-cobalt); }
.frager__seite--pcf .frager__ziel { background: var(--ac-green); color: var(--ac-black); }
.card--ccf { border-top: 3px solid var(--ac-cobalt); }
.card--pcf { border-top: 3px solid var(--ac-green); }

/* ── Vergleichstabelle ─────────────────────────────────────────────────────
   Echte Tabelle: „Unterschied CCF PCF" ist die Geld-Suchanfrage dieser Seite,
   und dieses Format uebernehmen Suchergebnisse und KI-Systeme am
   zuverlaessigsten. Gestaltet statt Standard-Look, aber semantisch korrekt. */
.vergleich-wrap { margin: var(--space-6) 0 0; overflow-x: auto; }
.vergleich { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm);
  min-width: 34rem; }
.vergleich thead th { padding: var(--space-3) var(--space-4); text-align: left;
  font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 700;
  color: var(--text-inverse); border-bottom: 2px solid transparent; }
.vergleich__ccf { background: var(--ac-cobalt); }
.vergleich__pcf { background: var(--ac-green); color: var(--ac-black) !important; }
.vergleich tbody th { padding: var(--space-3) var(--space-4); text-align: left;
  font-weight: 600; color: var(--text-heading); width: 12rem; }
.vergleich tbody td { padding: var(--space-3) var(--space-4);
  color: var(--text-primary); vertical-align: top; }
.vergleich tbody tr:nth-child(odd) { background: var(--surface-subtle); }
/* keine senkrechten Linien — Trennung entsteht durch Flaeche, nicht durch Striche */
@media (max-width: 640px) {
  .vergleich, .vergleich thead, .vergleich tbody, .vergleich tr,
  .vergleich th, .vergleich td { display: block; min-width: 0; }
  .vergleich thead { display: none; }
  .vergleich tbody tr { margin-bottom: var(--space-4); border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); overflow: hidden; }
  .vergleich tbody th { background: var(--surface-subtle); width: auto; }
  .vergleich tbody td::before { content: attr(data-label) ": ";
    font-weight: 700; color: var(--text-heading); }
}

/* ── Testimonial ohne Portraet ─────────────────────────────────────────────
   Bild liegt nicht vor (Peter Walch, bei Volker angefragt). Die Karte darf
   deshalb keinen leeren Bildplatz zeigen. */
.testimonial-card--ohne-bild { grid-template-columns: 1fr; }
/* Hier stand bis 22.08.2026 eine zweite, vollstaendige .testimonial-card cite span
   Regel. Sie war als Detail der Ohne-Bild-Variante gedacht, war aber gleich
   selektiert wie das Original weiter oben — und ueberschrieb es deshalb auf der
   GANZEN Site, samt Farbe: statt rgba(255,255,255,.6) (7,1:1 auf der dunklen
   Karte) stand dort --text-muted-aa und damit 3,99:1. Der Startprompt dieses
   Durchgangs nannte als Ursache noch den .6-Wert selbst — der war unschuldig,
   er kam nie zur Anwendung. Regel geloescht, das Original gilt wieder. */

/* ── Lebenszyklus-Schiene ─────────────────────────────────────────────────── */
.lca-rail { position: relative; padding: var(--space-5) 0; }
.lca-rail__liste { list-style: none; margin: 0; padding: 0 0 0 var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
/* die Linie: waechst beim Einblenden von oben nach unten */
.lca-rail__liste::before { content: ""; position: absolute; left: 7px; top: 6px;
  bottom: 6px; width: 2px; background: var(--ac-gradient);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1s var(--ease-out); }
.in-view .lca-rail__liste::before { transform: scaleY(1); }
.lca-rail__liste li { position: relative; font-family: var(--font-heading);
  font-size: var(--fs-body); font-weight: 600; color: var(--text-heading); }
/* Zusatz-Hinweis an einer Station (vor-/nachgelagerte Transporte). Bewusst
   leiser als die Station selbst: er praezisiert sie, ersetzt sie nicht. */
.lca-rail__zusatz { display: block; font-family: var(--font-body);
  font-size: var(--fs-body-sm); font-weight: 400; color: var(--text-muted-aa); }
.lca-rail__punkt { position: absolute; left: calc(var(--space-6) * -1); top: .35rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-page); border: 2px solid var(--color-accent);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.in-view .lca-rail__punkt { opacity: 1; transform: scale(1); }
.lca-rail__liste li:nth-child(1) .lca-rail__punkt { transition-delay: .30s; }
.lca-rail__liste li:nth-child(2) .lca-rail__punkt { transition-delay: .40s; }
.lca-rail__liste li:nth-child(3) .lca-rail__punkt { transition-delay: .50s; }
.lca-rail__liste li:nth-child(4) .lca-rail__punkt { transition-delay: .60s; }
.lca-rail__liste li:nth-child(5) .lca-rail__punkt { transition-delay: .70s; }
.lca-rail__liste li:nth-child(6) .lca-rail__punkt { transition-delay: .80s; }
.lca-rail__liste li:nth-child(7) .lca-rail__punkt { transition-delay: .90s; }
.norm-chips { list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.norm-chips li { padding: .35rem .8rem; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: .04em; background: var(--surface-tint);
  border: 1px solid var(--border-default); color: var(--text-heading); }

/* ── Gruender-Zitat mit Bild ──────────────────────────────────────────────── */
.zitat-gruender { display: grid; grid-template-columns: 200px 1fr;
  gap: var(--space-5); align-items: center; margin: var(--space-6) 0 0;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-dark); }
.zitat-gruender__bild img { display: block; width: 100%; height: auto; }
/* Freigestellte Fassung (Bild 11 frei): ein rechteckiger Schatten um eine
   transparente Flaeche zeichnet einen Rahmen, wo keiner ist. Der Umriss steht
   direkt in der schwarzen Karte. */
.zitat-gruender__bild--frei img { box-shadow: none; }
/* Ein freigestellter Umriss endet unten hart an der Guertellinie. Frei in der
   Karte schwebend liest sich das als abgeschnitten — genau Volkers Kritik am
   Passfoto-Ausschnitt. Deshalb steht die Figur auf der Kartenkante: der Schnitt
   faellt mit dem Rand zusammen. Nur ab der zweispaltigen Breite, einspaltig
   liegt darunter der Text. */
@media (min-width: 861px) {
  .zitat-gruender__bild--frei { align-self: end;
    margin-block-end: calc(-1 * var(--space-5)); }
}
.zitat-gruender blockquote { margin: 0; }
/* 700 statt 600: Extra Condensed 600 kam auf der ganzen Seite nur hier vor und
   kostete dafuer eine eigene Schriftdatei von 18 KB. 700 ist ohnehin geladen
   (Kicker, Buttons, Tabellenkoepfe). Gemessen 10.08.2026. */
.zitat-gruender blockquote p { margin: 0; font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.3;
  color: var(--text-inverse); }
.zitat-gruender blockquote p::before { content: "\201E"; }
.zitat-gruender blockquote p::after  { content: "\201C"; }
.zitat-gruender figcaption { margin-top: var(--space-3);
  font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }
.zitat-gruender figcaption a { color: var(--color-accent-hi); }
@media (max-width: 700px) {
  .zitat-gruender { grid-template-columns: 1fr; text-align: center; }
  .zitat-gruender__bild { max-width: 180px; margin-inline: auto; }
}

/* ── Zwei-Zustands-Grafik: Reflex gegen unser Vorgehen ────────────────────── */
.falle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin: var(--space-6) 0 0; }
.falle__seite { padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.falle__seite--apollo { background: var(--surface-tint);
  border-color: var(--color-accent); }
.falle__label { display: block; font-family: var(--font-heading);
  font-size: var(--fs-overline); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted-aa); margin-bottom: var(--space-3); }
.falle__schritte { margin: 0; padding-left: 1.2rem; display: flex;
  flex-direction: column; gap: .4rem; color: var(--text-primary);
  font-size: var(--fs-body-sm); }
.falle__folge { display: block; margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle); font-weight: 600;
  color: var(--text-heading); }
.falle__seite--apollo .falle__folge { color: var(--color-brand); }
@media (max-width: 640px) { .falle, .frager { grid-template-columns: 1fr; } }

/* ── Prozess-Zeitstrahl ───────────────────────────────────────────────────── */
.prozess-rail { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  position: relative; }
.prozess-rail::before { content: ""; position: absolute; left: 20px; right: 20px;
  top: 21px; height: 2px; background: var(--ac-gradient);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease-out); }
.prozess-rail.in-view::before { transform: scaleX(1); }
.prozess-rail__schritt { min-width: 0; }
.prozess-rail__nr { display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; font-family: var(--font-display); font-size: 1.3rem;
  font-weight: 800; line-height: 1; color: var(--text-inverse);
  background: var(--color-brand); position: relative; z-index: 1;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.prozess-rail.in-view .prozess-rail__nr { opacity: 1; transform: scale(1); }
/* Volker Loibl, 11.08.2026 (Farb-Beispiel 2): "Links die Bubbels fuer 1 und 2
   passen zum Strich, die 3 und 4 sind andersfarbig als der Strich, die Zahlen
   sind schwarz und weis. Echt bunt…"
   Zwei Ursachen: vier verschiedene Kreisfarben (brand/teal/green/lime) UND
   wechselnde Schriftfarbe. Letztere war kein Schlamperei, sondern Kontrast-Not:
   auf dem hellen Gruen und Lime hat weisse Schrift zu wenig Kontrast, deshalb
   standen 3 und 4 auf Schwarz.
   Loesung, die beides aufloest: alle vier Kreise auf die dunkle Markenfarbe,
   damit sind weisse Zahlen durchgehend kontraststark. Die Marken-Rampe von Blau
   nach Gruen bleibt sichtbar — sie liegt im Verbindungsstrich darunter, wo sie
   nicht mit Text konkurriert. Nur die Einblend-Verzoegerung bleibt gestaffelt. */
.prozess-rail__schritt:nth-child(1) .prozess-rail__nr { transition-delay: .35s; }
.prozess-rail__schritt:nth-child(2) .prozess-rail__nr { transition-delay: .50s; }
.prozess-rail__schritt:nth-child(3) .prozess-rail__nr { transition-delay: .65s; }
.prozess-rail__schritt:nth-child(4) .prozess-rail__nr { transition-delay: .80s; }
.prozess-rail__schritt h3 { margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-h4); }
.prozess-rail__schritt p { margin: 0 0 var(--space-2); font-size: var(--fs-body-sm);
  color: var(--text-primary); }
.prozess-rail__ergebnis { font-weight: 600; color: var(--text-heading); }
@media (max-width: 900px) {
  .prozess-rail { grid-template-columns: 1fr; gap: var(--space-6); }
  .prozess-rail::before { left: 21px; right: auto; top: 20px; bottom: 20px;
    width: 2px; height: auto; transform: scaleY(0); transform-origin: top center; }
  .prozess-rail.in-view::before { transform: scaleY(1); }
  .prozess-rail__schritt { padding-left: 64px; position: relative; }
  .prozess-rail__nr { position: absolute; left: 0; top: 0; }
  .prozess-rail__schritt h3 { margin-top: .35rem; }
}

/* ── Prozess-Zeitstrahl, Variante "Stationen" ─────────────────────────────
   Fuer Prozesse mit fuenf oder mehr Schritten. Die vierspaltige Grundform
   oben bricht ab fuenf Schritten in eine zweite Zeile um: der letzte Schritt
   steht allein, daneben ein Loch, und der Verbindungsstrich laeuft ins Leere.
   Diese Variante folgt stattdessen dem Aufbau von Volkers Originalgrafik —
   Nummer, Titelkasten, Erlaeuterung daneben, durchgehende Linie durch alle
   Stationen. Sie waechst mit jeder weiteren Station, ohne enger zu werden.
   Die vierspaltige Form bleibt unveraendert fuer die Folgeseiten. */
.prozess-rail--stationen { grid-template-columns: 1fr; gap: var(--space-5); }
.prozess-rail--stationen::before { left: 21px; right: auto; top: 22px; bottom: 22px;
  width: 2px; height: auto; transform: scaleY(0); transform-origin: top center; }
.prozess-rail--stationen.in-view::before { transform: scaleY(1); }
.prozess-rail--stationen .prozess-rail__schritt {
  display: grid; grid-template-columns: 44px minmax(11rem, 15rem) 1fr;
  column-gap: var(--space-5); align-items: start; }
.prozess-rail--stationen .prozess-rail__nr { grid-column: 1; grid-row: 1; }
.prozess-rail--stationen .prozess-rail__schritt h3 { grid-column: 2; grid-row: 1;
  margin: 0; padding: .62rem .9rem .62rem calc(.9rem + 4px); border-radius: var(--radius-md);
  background: var(--ac-teal-100); color: var(--text-heading);
  font-size: var(--fs-body-lg); line-height: 1.25;
  position: relative; overflow: hidden; }
/* Farbstreifen am Titelkasten: die Marken-Rampe wandert Station fuer Station
   weiter, so wie sie im Verbindungsstrich verlaeuft. */
.prozess-rail--stationen .prozess-rail__schritt h3::before { content: "";
  position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--color-brand); }
.prozess-rail--stationen .prozess-rail__schritt:nth-child(2) h3::before { background: var(--ac-petrol); }
.prozess-rail--stationen .prozess-rail__schritt:nth-child(3) h3::before { background: var(--ac-teal); }
.prozess-rail--stationen .prozess-rail__schritt:nth-child(4) h3::before { background: var(--ac-green); }
.prozess-rail--stationen .prozess-rail__schritt:nth-child(5) h3::before { background: var(--ac-lime); }
/* Die Absaetze stehen in einem eigenen Block. Ohne diese Klammer saessen sie in
   getrennten Grid-Zeilen und rissen eine Luecke auf, sobald der Titel daneben
   zweizeilig umbricht. */
.prozess-rail--stationen .prozess-rail__text { grid-column: 3; grid-row: 1; }
.prozess-rail--stationen .prozess-rail__text p { margin: 0 0 var(--space-3); }
.prozess-rail--stationen .prozess-rail__text p:last-child { margin-bottom: 0; }
.prozess-rail--stationen .prozess-rail__schritt:nth-child(5) .prozess-rail__nr { transition-delay: .95s; }
@media (max-width: 900px) {
  /* Zwei Spalten statt drei: Nummer und Titelkasten nebeneinander, der Text
     darunter ueber die volle Breite. Die Nummer laeuft hier im Fluss mit — die
     absolute Position der Grundform wuerde den Titelkasten ueberdecken. */
  .prozess-rail--stationen .prozess-rail__schritt { grid-template-columns: 44px 1fr;
    column-gap: var(--space-4); padding-left: 0; }
  .prozess-rail--stationen .prozess-rail__nr { position: static; grid-column: 1; grid-row: 1; }
  .prozess-rail--stationen .prozess-rail__schritt h3 { grid-column: 2; grid-row: 1;
    align-self: center; }
  .prozess-rail--stationen .prozess-rail__text { grid-column: 1 / -1; grid-row: 2;
    padding-left: calc(44px + var(--space-4)); margin-top: var(--space-3); }
}
@media (max-width: 460px) {
  /* Die Einrueckung bleibt auch hier: ohne sie laeuft die Verbindungslinie
     mitten durch den Text. Etwas schmaler, dafuer sauber. */
  .prozess-rail--stationen .prozess-rail__text { padding-left: calc(28px + var(--space-3)); }
  .prozess-rail--stationen .prozess-rail__schritt { grid-template-columns: 36px 1fr;
    column-gap: var(--space-3); }
  .prozess-rail--stationen .prozess-rail__nr { width: 36px; height: 36px; font-size: 1.05rem; }
  .prozess-rail--stationen::before { left: 17px; }
}

/* ── Ablauf-Phasen "Behind the scenes" (Nachbau von Volkers Grafik) ────────
   Volkers Grafik steht auf der alten Website am Fuss von zwei Leistungsseiten,
   jeweils vor dem Kontakt-Aufruf. Diese Reihenfolge bleibt: erst die drei
   Phasen, dann der Abschluss mit dem Knopf — die Grafik erklaert, der Knopf
   entscheidet, und die Grafik steht nicht daneben, sondern davor.
   Bewusst andere Optik als der Prozess-Zeitstrahl weiter oben auf derselben
   Seite: drei Karten nebeneinander statt Stationen untereinander, sonst sieht
   die Seite zweimal gleich aus. */
.phasen { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  align-items: start; }
/* Kein Kasten um die Phasen: die dritte hat in Volkers Vorlage deutlich
   weniger Punkte als die erste: in gleich hohen Kaesten stuende dort ein
   halbleerer Rahmen. Jede Phase traegt stattdessen oben ihren eigenen
   Farbbalken aus der Marken-Rampe; ungleiche Laengen fallen dann nicht auf. */
.phase { position: relative; padding-top: var(--space-5); }
.phase::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 2px; background: var(--color-brand-strong);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease-out) var(--balken-delay, 0ms); }
.phasen.in-view .phase::before { transform: scaleX(1); }
.phase:nth-child(2)::before { background: var(--ac-teal); --balken-delay: 140ms; }
.phase:nth-child(3)::before { background: var(--ac-green); --balken-delay: 280ms; }
.phase__nr { display: block; font-family: var(--font-heading); font-size: .74rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-brand); margin-bottom: .35rem; }
.phase__titel { margin: 0 0 .25rem; font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 700; color: var(--text-heading);
  line-height: 1.15; }
.phase__was { margin: 0 0 var(--space-4); font-size: var(--fs-body-sm);
  font-weight: 600; color: var(--color-brand); }
.phase__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.phase__liste li { position: relative; padding-left: 1.05rem;
  font-size: var(--fs-body-sm); color: var(--text-primary); line-height: 1.5; }
.phase__liste li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 2px; border-radius: 1px; background: var(--color-accent); }
@media (max-width: 900px) {
  .phasen { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .phase::before { transition: none; transform: scaleX(1); }
}

/* Kopf der Phasen-Sektion: Text links, Bild rechts. Ohne das Bild wirkte der
   Abschnitt duenn (Adrian, 21.08.2026) — drei kurze Listen auf viel Weissraum.
   Das Foto zeigt eine echte Arbeitssituation und traegt damit dieselbe Aussage
   wie der Text darunter. */
.phasen-kopf { display: grid; grid-template-columns: 1fr minmax(0, 42%);
  gap: var(--space-6); align-items: center; }
.phasen-kopf h2 { margin-top: 0; }
.phasen-kopf__text > :last-child { margin-bottom: 0; }
.phasen-kopf__bild { margin: 0; }
.phasen-kopf__bild img { display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); }
/* Pflichtvermerk zur KI-Nutzung: steht klein im Bild und wuerde bei jedem
   Zuschnitt verschwinden. Deshalb zusaetzlich als echter Text. */
.bildvermerk { margin: .45rem 0 0; font-size: var(--fs-caption);
  color: var(--text-muted-aa); }
@media (max-width: 900px) {
  .phasen-kopf { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ── Foerder-Block ────────────────────────────────────────────────────────── */
.foerder-zahlen { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
/* Eigene Kachel, NICHT von .kennzahl abgeleitet: die traegt ein Hand-Motiv im
   ::before, das hier als Satellitenbild hinter den Foerderzahlen auftauchte
   (gemessen am Screenshot 10.08.2026). Deshalb bewusst ein eigener Baustein
   statt eines Modifiers. */
.kennzahl--auf-dunkel { display: flex; flex-direction: column; gap: .3rem;
  text-align: center; padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-dark-raised); border: 1px solid var(--border-on-dark); }
.kennzahl--auf-dunkel .kennzahl__wert { font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3rem); font-weight: 800; line-height: 1;
  color: var(--color-accent-hi); }
.kennzahl--auf-dunkel .kennzahl__label { font-family: var(--font-heading);
  font-weight: 600; color: var(--text-inverse); }
.kennzahl--auf-dunkel .kennzahl__note { font-size: var(--fs-body-sm);
  color: var(--text-on-dark-muted); }
/* Bezugs-Marke ueber der Foerderzahl: sagt, WELCHE Bilanz gefoerdert wird.
   Sachlich zwingend — die 100 % gelten fuer den Produkt-Fussabdruck (PCF),
   nicht fuer die Unternehmensbilanz (CCF). Ohne diese Marke liest die Kachel
   sich als CCF-Foerderung und die Seite behauptet etwas Falsches
   (Befund Volker Loibl, 11.08.2026). */
.kennzahl__bezug {
  align-self: center;
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .18rem .55rem; margin-bottom: .2rem;
  border-radius: 999px;
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--color-brand) 30%, transparent);
  border: 1px solid var(--border-on-dark);
}
.kennzahl__bezug--pcf {
  background: color-mix(in srgb, var(--color-accent-hi) 26%, transparent);
}
@media (max-width: 760px) { .foerder-zahlen { grid-template-columns: 1fr; } }

.foerder-box { margin: var(--space-6) 0 0; padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark); position: relative; overflow: hidden; }
.foerder-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 4px; background: var(--ac-gradient); }
.foerder-box h3 { margin: 0 0 var(--space-4); color: var(--text-inverse); }
.foerder-box p { color: var(--text-on-dark); }
.foerder-box a { color: var(--color-accent-hi); }
.foerder-box__frist { margin-top: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius-md); background: rgba(176,48,48,.14);
  border-left: 3px solid #d66; }
.foerder-box__frist strong { color: var(--text-inverse); }

/* ── Signatur „der Fussabdruck wandert" ───────────────────────────────────
   Sehr blasse Abdruecke an den Sektionsnaehten, abwechselnd links und rechts,
   immer AUSSERHALB der Textspalte. Reines CSS, kein Skript. Unter 1100 px
   komplett aus — dort gibt es neben dem Text keinen freien Rand. */
.fussspur { position: absolute; pointer-events: none; z-index: 0;
  background: url("/assets/motive/erd-fussabdruck-spur-160.webp") no-repeat center / contain;
  opacity: 0; transition: opacity 1.2s var(--ease-out); }
.section { position: relative; overflow-x: clip; }
/* Deutlich groesser als im ersten Ansatz: bei 72 px war der Abdruck nicht mehr
   als solcher zu erkennen und wirkte wie ein Schmutzfleck (gemessen am
   Screenshot 10.08.2026). Ab etwa 140 px liest man die Form. */
.fussspur--a { width: 150px; height: 79px; left: 1%;  bottom: 7%;  rotate: -14deg; }
.fussspur--b { width: 132px; height: 69px; right: 2%; bottom: 11%; rotate: 12deg; }
.fussspur--c { width: 158px; height: 83px; left: 2%;  bottom: 5%;  rotate: -8deg; }
.fussspur--d { width: 138px; height: 72px; right: 1%; bottom: 13%; rotate: 16deg; }
.fussspur--e { width: 190px; height: 100px; left: 3%; bottom: 6%;  rotate: -10deg; }
.section:has(.in-view) .fussspur { opacity: .11; }
.section-dark:has(.in-view) .fussspur { opacity: .15; }
@media (max-width: 1100px) { .fussspur { display: none; } }

/* ── Vierer-Raster in langen FAQ-Antworten ────────────────────────────────── */
.erfolg-raster { list-style: none; counter-reset: erfolg; margin: var(--space-4) 0 0;
  padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.erfolg-raster li { counter-increment: erfolg; position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius-md); background: var(--surface-card);
  border: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
.erfolg-raster li::before { content: counter(erfolg); position: absolute;
  left: var(--space-4); top: var(--space-4); font-family: var(--font-display);
  font-weight: 800; color: var(--color-accent); }
@media (max-width: 700px) { .erfolg-raster { grid-template-columns: 1fr; } }

/* ── Hero-Anschluss: Druck links, Ruhe rechts ─────────────────────────────
   Der Anschlussblock hatte rechts tote Flaeche, weil nur ein Absatz darin
   stand (Lesson I-12). Der Vertrauens-Text aus dem Hero-Slot fuellt sie. */
.hero-follow__paar { display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hero-follow__ruhe { padding-left: var(--space-5);
  border-left: 2px solid var(--border-on-dark);
  font-size: var(--fs-body) !important; color: var(--text-on-dark-muted) !important; }
@media (max-width: 900px) {
  .hero-follow__paar { grid-template-columns: 1fr; }
  .hero-follow__ruhe { padding-left: var(--space-4); }
}

/* ── Bruecken-Saetze zwischen den Bloecken ────────────────────────────────
   Die kurzen Ueberleitungen („Bleibt die Frage, wie so ein Projekt konkret
   ablaeuft.") standen linksbuendig auf halber Breite, rechts blieb die Haelfte
   leer — genau die tote Flaeche aus Lesson I-12. Als eigenes Element mittig
   gesetzt tragen sie den Rhythmus, statt eine Luecke zu hinterlassen. */
.bruecke { max-width: 60ch; margin-inline: auto; text-align: center;
  font-size: var(--fs-body-lg); color: var(--text-muted-aa);
  padding-block: var(--space-2); }
.section-dark .bruecke { color: var(--text-on-dark-muted); }

/* Die Leucht-Kopie des Hero-Motivs wird nur mit feinem Zeiger sichtbar. Unter
   900 px gibt es keinen, also gar nicht erst rendern: derselbe Bild-Request,
   aber ein zweiter Dekodier-Vorgang, und der kostet auf gedrosselter CPU
   messbar Ladezeit (LCP 2840 ms vor dieser Regel, gemessen 10.08.2026). */
@media (max-width: 900px) { .hero-fp__pic--hell { display: none; } }

/* ══ Scope-3-Branchengrafik, gebaut statt Bild (17.08.2026) ═══════════════════
   Ersetzt das PNG von Volker. Grund ist nicht Optik, sondern Lesbarkeit fuer
   Maschinen: In einem Bild sind Branchennamen, Prozentwerte und die Kernaussage
   fuer Google und KI-Systeme unsichtbar. Genau diese Aussage — "in fast allen
   produzierenden Branchen liegt Scope 3 ueber 80 Prozent" — ist der Beleg, um
   den es auf dieser Seite geht.
   Die 16 Werte sind nicht geschaetzt: sie wurden aus Volkers Originaldatei
   (3968 px) am Pixelraster gemessen. Alle 16 blauen Balken enden exakt auf
   demselben x-Wert (Streuung 0 px) und alle Anteile fallen auf glatte ganze
   Prozent — bei ungenauer Messung kaemen krumme Werte heraus. Der Inhalt ist
   damit identisch zur Vorlage, nur die Prozentzahlen stehen jetzt zusaetzlich
   als Text daneben; im Bild waren sie nur ueber die Achse ablesbar.
   Farben ausschliesslich aus den CI-Tokens. */
.s3bar { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-dark-raised); border: 1px solid var(--border-on-dark); }
.s3bar__titel { margin: 0 0 var(--space-5); font-family: var(--font-heading);
  font-size: var(--fs-body-lg); font-weight: 700; color: var(--text-inverse);
  text-align: left; text-wrap: balance; }
.s3bar__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.s3bar__liste li { display: grid; grid-template-columns: minmax(0, 11.5rem) 1fr;
  align-items: center; gap: var(--space-4); }
.s3bar__name { font-size: var(--fs-body-sm); color: var(--text-on-dark);
  overflow-wrap: anywhere; }
/* Die Spur ist der Gesamtbalken (100 %), der gefuellte Teil ist Scope 3. */
.s3bar__spur { position: relative; display: block; height: 20px; border-radius: 4px;
  background: var(--ac-petrol); overflow: hidden; }
.s3bar__spur::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w); background: var(--ac-lime); border-radius: 4px 0 0 4px; }
.s3bar__wert { position: absolute; top: 50%; translate: 0 -50%; left: .55rem;
  font-family: var(--font-heading); font-size: .74rem; font-weight: 700;
  color: var(--ac-black); z-index: 1; }
/* Sonderregel fuer kurze Balken entfernt (17.08.2026): sie war unnoetig — auch
   der kuerzeste Balken (43 %) ist rund 300 px breit und traegt die Zahl locker.
   Sie sorgte nur dafuer, dass zwei von 16 Zeilen anders aussahen als der Rest.
   "Stringenz trumpft" (Volker Loibl): alle 16 Werte stehen gleich. */
.s3bar__legende { display: flex; align-items: center; gap: .4rem;
  margin: var(--space-5) 0 0; font-size: var(--fs-body-sm);
  color: var(--text-on-dark-muted); flex-wrap: wrap; }
.s3bar__key { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.s3bar__key--s3 { background: var(--ac-lime); }
.s3bar__key--s12 { background: var(--ac-petrol); margin-left: var(--space-4); }
.s3bar__quelle { margin: var(--space-4) 0 0; font-size: var(--fs-body-sm);
  color: var(--text-on-dark-muted); text-align: left; }
@media (max-width: 640px) {
  .s3bar { padding: var(--space-5) var(--space-4); }
  .s3bar__liste li { grid-template-columns: 1fr; gap: .15rem; }
  .s3bar__name { font-size: .8rem; }
  .s3bar__spur { height: 18px; }
}

/* ── GHG-Wertschoepfungskette (Nachbau von Volkers Grafik C31) ─────────────
   Ersetzt das eingebettete Bild (1121x532). Grund: Auf Handybreite war die
   Beschriftung nicht mehr lesbar, und der Text in einer Bilddatei ist fuer
   Google und die KI-Systeme unsichtbar — genau diese Scope-Definitionen
   sollen aber zitiert werden. Inhalt eins zu eins uebernommen: dieselben drei
   Abschnitte, dieselben Emissionsarten in derselben Reihenfolge, dieselben
   Treibhausgase. Farben ausschliesslich aus den CI-Tokens; die Rampe laeuft
   wie im Original von Gruen (vorgelagert) ueber die Unternehmensmitte zurueck
   zu Gruen (nachgelagert). Weisser Text steht nie auf Gruen oder Lime. */
.ghgkette { position: relative; margin: 0; padding: var(--space-6);
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(0,105,157,.20), transparent 62%),
    radial-gradient(110% 80% at 92% 108%, rgba(116,185,89,.14), transparent 60%),
    var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark); }
.ghgkette::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--ac-gradient); }
.figure .ghgkette__titel { margin: 0 0 var(--space-5); font-family: var(--font-heading);
  font-size: var(--fs-body-lg); font-weight: 700; color: var(--text-inverse);
  text-align: left; text-wrap: balance; max-width: none; }
/* Treibhausgase: im Original als Wolken ueber der Kette. Hier als Chip-Zeile,
   inhaltlich dieselbe Aussage ("diese Gase werden bilanziert"). */
.ghgkette__gase { display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.ghgkette__gas { font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
  letter-spacing: .01em; color: var(--text-on-dark); background: rgba(255,255,255,.07);
  border: 1px solid var(--border-on-dark); border-radius: 999px; padding: .22rem .66rem; }
.ghgkette__gase::before { content: "Bilanziert werden"; align-self: center;
  margin-right: .2rem; font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }
.ghgkette__gas sub { font-size: .68em; }
.ghgkette__spalten { display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@keyframes ghgkette-ein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
details[open] .ghgkette__spalten > li { animation: ghgkette-ein .5s var(--ease-out) backwards; }
details[open] .ghgkette__spalten > li:nth-child(1) { animation-delay: .05s; }
details[open] .ghgkette__spalten > li:nth-child(2) { animation-delay: .17s; }
details[open] .ghgkette__spalten > li:nth-child(3) { animation-delay: .29s; }
/* Der Pfeil zwischen den Spalten erscheint, wenn beide Nachbarn stehen. */
details[open] .ghgkette__spalten > li:not(:last-child)::after {
  animation: ghgkette-ein .4s var(--ease-out) .34s backwards; }
/* Die mittlere Spalte ist im Original gestrichelt umrandet: das berichtende
   Unternehmen. Diese Trennung ist die Kernaussage der Grafik. */
.ghgkette__spalte { position: relative; display: flex; flex-direction: column;
  gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
  border-radius: var(--radius-md); background: rgba(255,255,255,.045);
  border: 1px solid var(--border-on-dark); }
.ghgkette__spalte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--ac-green); }
.ghgkette__spalte--eigen::before { background: linear-gradient(180deg,
  var(--ac-petrol) 0%, var(--ac-petrol) 50%, var(--ac-lime) 50%, var(--ac-lime) 100%); }
.ghgkette__spalte--eigen { border-style: dashed; border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.07); }
.ghgkette__klapp { margin: 0; }
.ghgkette__phase { font-family: var(--font-heading); font-size: var(--fs-body-sm);
  font-weight: 700; color: var(--text-inverse); margin: 0 0 var(--space-3);
  list-style: none; }
.ghgkette__phase::-webkit-details-marker { display: none; }
/* Auf breiten Schirmen stehen alle drei Abschnitte offen nebeneinander — dort
   ist die Zeile eine Ueberschrift, kein Bedienelement. */
@media (min-width: 861px) { .ghgkette__phase { pointer-events: none; cursor: default; } }
.ghgkette__gruppe { margin: 0; }
.ghgkette__gruppe + .ghgkette__gruppe { margin-top: var(--space-2);
  padding-top: var(--space-4); border-top: 1px solid var(--border-on-dark); }
/* Scope-Chip: traegt die Farbe. Dunkle Schrift auf Gruen/Lime (7,61:1 bzw.
   12,37:1), weisse Schrift auf Petrol (5,99:1). */
.ghgkette__scope { display: inline-flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
  border-radius: 4px; padding: .16rem .5rem; margin: 0 0 .5rem; }
.ghgkette__scope span { font-weight: 400; opacity: .82; }
.ghgkette__scope--s3 { background: var(--ac-green); color: var(--ac-black); }
.ghgkette__scope--s2 { background: var(--ac-petrol); color: var(--ac-white); }
.ghgkette__scope--s1 { background: var(--ac-lime); color: var(--ac-black); }
/* .82rem waren 13,1 px — als kursiver Text auf dunklem Grund die schlechteste
   Kombination fuer Lesbarkeit. Auf das Kleingedruckten-Token (15 px), damit es
   in der Hierarchie unter dem Fliesstext bleibt, aber lesbar wird. */
.ghgkette__was { margin: 0 0 .5rem; font-size: var(--fs-body-sm); font-style: italic;
  color: var(--text-on-dark-muted); }
.ghgkette__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ghgkette__liste li { position: relative; padding-left: .95rem;
  font-size: var(--fs-body-sm); color: var(--text-on-dark); line-height: 1.4;
  overflow-wrap: anywhere; }
.ghgkette__liste li::before { content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .5; }
.ghgkette__spalten > li:not(:last-child)::after { content: ""; position: absolute;
  right: calc(var(--space-4) / -2); top: 50%; width: 9px; height: 9px;
  translate: 50% -50%; rotate: 45deg; z-index: 1;
  border: solid var(--text-on-dark-muted); border-width: 2px 2px 0 0; }
/* Die drei grossen Flusspfeile am Fuss des Originals sind nicht nachgebaut:
   ihre Beschriftung ist identisch mit den Spaltenkoepfen. Die Flussrichtung
   steht stattdessen als Satz in der Bildunterschrift — dieselbe Aussage,
   ohne dieselben drei Begriffe zweimal auf engem Raum. */
.figure .ghgkette__quelle { margin: var(--space-5) 0 0; font-size: var(--fs-body-sm);
  color: var(--text-on-dark); text-align: left; max-width: var(--measure); }
.figure .ghgkette__quelle .quelle { color: var(--text-on-dark-muted); }
@media (prefers-reduced-motion: reduce) {
  details[open] .ghgkette__spalten > li,
  details[open] .ghgkette__spalten > li:not(:last-child)::after { animation: none; }
  .inventar__anteil::after { transition: none; transform: scaleX(1); }
}
@media (max-width: 860px) {
  .ghgkette__spalten { grid-template-columns: 1fr; }
  .ghgkette__phase { position: relative; display: flex; align-items: center;
    min-height: 44px; margin: 0; padding-right: 2rem; cursor: pointer;
    font-size: var(--fs-body); }
  .ghgkette__phase::after { content: ""; position: absolute; right: .3rem; top: 50%;
    width: 8px; height: 8px; translate: 0 -65%; rotate: 135deg;
    border: solid var(--text-on-dark-muted); border-width: 2px 2px 0 0;
    transition: rotate .25s var(--ease-out); }
  .ghgkette__klapp[open] > .ghgkette__phase { margin-bottom: var(--space-3); }
  .ghgkette__klapp[open] > .ghgkette__phase::after { rotate: -45deg; translate: 0 -35%; }
  .ghgkette__klapp > .ghgkette__phase:focus-visible { outline: 2px solid var(--focus-ring);
    outline-offset: 3px; border-radius: 4px; }
  .ghgkette__spalten > li:not(:last-child)::after { right: 50%; top: auto;
    bottom: calc(var(--space-4) / -2); translate: 50% 50%; rotate: 135deg; }
  .ghgkette__spalte { padding: calc(var(--space-4) + 3px) var(--space-4) var(--space-4); }
  .ghgkette__spalte::before { inset: 0 0 auto 0; width: auto; height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .ghgkette__spalte--eigen::before { background: linear-gradient(90deg,
    var(--ac-petrol) 0%, var(--ac-petrol) 50%, var(--ac-lime) 50%, var(--ac-lime) 100%); }
  .ghgkette { padding: var(--space-5) var(--space-4); }
  .ghgkette__fluss li { text-align: left; }
}

/* ── Inventar-Tabelle (Nachbau von Volkers Grafik A46) ─────────────────────
   Ersetzt das eingebettete Bild (1056x482). Es war ohnehin eine Tabelle, nur
   abfotografiert: als echte Tabelle ist sie scharf, auf dem Handy scrollbar
   statt geschrumpft, und die Zahlen sind vorlesbar und auswertbar. Werte eins
   zu eins uebernommen, inklusive der Rundung in der Summenzeile. */
.inventar { margin: 0; }
.inventar__rahmen { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20,22,26,.05), 0 8px 24px -18px rgba(20,22,26,.45); }
/* Marken-Hairline als Abschluss oben — laut CI als Akzent erlaubt. */
.inventar__rahmen::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--ac-gradient); z-index: 2; }
.inventar table { width: 100%; border-collapse: collapse; min-width: 34rem;
  font-variant-numeric: tabular-nums; }
/* Die Tabellen-Ueberschrift gehoert zur Tabelle und war damit so breit wie
   diese (min-width 34rem = 544 px) — im waagerecht scrollbaren Rahmen ragte sie
   auf 390 px um 203 px, auf 320 px um 273 px aus dem Bild. Man musste seitlich
   wischen, um die Ueberschrift zu Ende zu lesen. `sticky` haelt sie am linken
   Rand des Rahmens, die Deckelung auf die Fensterbreite laesst sie umbrechen.
   max-width muss in vw rechnen: Prozentwerte beziehen sich hier auf die
   Tabellenbreite, nicht auf den sichtbaren Rahmen. */
.inventar caption { caption-side: top; text-align: left; padding: 0 0 var(--space-3);
  font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 700;
  color: var(--text-heading);
  position: sticky; left: 0;
  width: fit-content;
  max-width: calc(100vw - 2 * var(--gutter) - 2px); }
.inventar th, .inventar td { padding: .6rem .8rem; text-align: right;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border-subtle); }
.inventar thead th { background: var(--ac-petrol); color: var(--ac-white);
  font-family: var(--font-heading); font-weight: 700; border-bottom: none; }
.inventar thead th:first-child, .inventar tbody th, .inventar tfoot th { text-align: left; }
/* Die Klammer "GHG-Protokoll Allokation" ueber Scope 1-3 aus dem Original. */
.inventar thead .inventar__gruppe { text-align: center; font-weight: 600;
  background: var(--ac-petrol-700); border-bottom: 1px solid rgba(255,255,255,.22); }
.inventar tbody th { font-weight: 600; color: var(--text-heading);
  font-family: var(--font-heading); overflow-wrap: anywhere; }
.inventar tbody tr:hover { background: var(--ac-teal-100); }
.inventar tbody tr:nth-child(even) { background: var(--surface-subtle); }
/* Anteil am Gesamtergebnis als feine Spur unter der Zahl: macht die Hotspots
   sichtbar (Pareto), ohne die Zahl zu ueberlagern. Reine Veranschaulichung —
   der Wert steht als Text daneben, die Spur traegt keine eigene Information. */
.inventar__anteil { position: relative; padding-bottom: .95rem; }
.inventar__anteil::after { content: ""; position: absolute; right: .8rem; bottom: .55rem;
  width: var(--anteil); height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ac-petrol), var(--ac-green));
  min-width: 3px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .9s var(--ease-out) var(--spur-delay, 0ms); }
.inventar.in-view .inventar__anteil::after,
.in-view .inventar__anteil::after { transform: scaleX(1); }
.inventar tbody tr:nth-child(1) .inventar__anteil { --spur-delay: 120ms; }
.inventar tbody tr:nth-child(2) .inventar__anteil { --spur-delay: 200ms; }
.inventar tbody tr:nth-child(3) .inventar__anteil { --spur-delay: 280ms; }
.inventar tbody tr:nth-child(4) .inventar__anteil { --spur-delay: 360ms; }
.inventar tbody tr:nth-child(5) .inventar__anteil { --spur-delay: 440ms; }
.inventar__anteil > span { position: relative; }
.inventar tfoot th, .inventar tfoot td { background: var(--ac-gray-100);
  font-family: var(--font-heading); font-weight: 700; color: var(--text-heading);
  border-bottom: none; border-top: 2px solid var(--ac-petrol); font-size: var(--fs-body); }
.inventar tfoot .inventar__summe { color: var(--ac-petrol); }
.inventar__leer { color: var(--text-primary); }
.inventar__wisch { display: none; margin: 0 0 var(--space-2);
  font-size: var(--fs-body-sm); color: var(--text-primary); }
@media (max-width: 640px) { .inventar__wisch { display: block; } }

/* Abschlussblock zweispaltig — Foto links, Einladung rechts.

   Vorher stand das Foto ueber einer zentrierten Ueberschrift, darunter mittig
   gesetzter Text und links davon der Knopf. Drei verschiedene Ausrichtungen
   auf engem Raum: unruhig, und die Sektion wurde unnoetig lang (Adrian,
   21.08.2026). Zwei Spalten loesen beides — kompakter und eine einzige
   Leserichtung.

   Der Umbruchpunkt liegt bei 860 px statt der ueblichen 767: darunter wird die
   Textspalte so schmal, dass die Ueberschrift vierzeilig bricht. */
.closer-split {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: var(--container-lg);
  margin-inline: auto;
}
.closer-foto { margin: 0; }
.closer-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  outline: 1px solid rgba(255,255,255,.12);
  outline-offset: -1px;
}
.closer-foto figcaption {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-muted);
}
.closer-foto figcaption strong { color: var(--text-on-dark); font-weight: var(--fw-bold); }

/* Eine Ausrichtung fuer alles in der Textspalte — auch fuer die Hinweiszeilen,
   die sonst die zentrierte Vorgabe der Sektion erben und aus der Kante fallen. */
.closer-text { text-align: left; }
.closer-text h2 { margin-top: 0; margin-bottom: var(--space-4); }
.closer-text > p { max-width: 62ch; margin: 0 0 var(--space-5); }
.closer-text .cta-row { justify-content: flex-start; margin-bottom: var(--space-4); }
.closer-text .cta-note { margin: var(--space-2) 0 0; }

@media (max-width: 860px) {
  .closer-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .closer-foto { max-width: 520px; margin-inline: auto; }
}

/* Auszeichnungs-Siegel in der Textspalte von Block 6.

   Sie standen bis zum 21.08.2026 als eigene, mittige Zeile UNTER dem
   Bild-Text-Block. Zwei Nachteile: rechts neben dem 440 px hohen Foto blieben
   unter dem dreizeiligen Text rund 200 px leer, und der Beleg stand zwei
   Absaetze von der Behauptung entfernt ("drei unabhaengige Auszeichnungen").
   Jetzt stehen Aussage und Beleg zusammen und die Flaeche ist gefuellt. */
.awards-inline { margin-top: var(--space-6); }
.awards-inline .awards-label { text-align: left; margin-bottom: var(--space-4); }
.awards-inline .awards-logos { justify-content: flex-start; }
@media (max-width: 900px) {
  /* Gestapelt sitzt der Block wieder unter dem Bild — dort ist mittig richtig,
     weil die Spalte die volle Breite einnimmt. */
  .awards-inline .awards-label { text-align: center; }
  .awards-inline .awards-logos { justify-content: center; }
}

/* ── Cookie-Banner: der Datenschutz-Link als echtes Tipp-Ziel ───────────────
   Angehaengt am 24.08.2026 beim Bau der drei Vertrauensseiten.

   Der Link ist 149x18 px gross — als Tipp-Ziel deutlich unter den 44 px, die
   das Mobil-Gate verlangt. Der Punkt stand seit dem 23.08.2026 in
   website-doku/STAND.md als bekannt und offen. Auf den sieben gebauten Seiten
   lief er als HINWEIS durch, weil dort zufaellig 27 px Abstand zum naechsten
   Element lagen; auf /referenzen/ und /kontakt/ ist der Nachbar naeher, und
   damit wird aus demselben Befund ein FEHLER. Gemessen: auf beiden Seiten
   exakt dieselben 149x18 px, im selben Baustein — es ist site-weit, nicht
   seitenlokal.

   Bewusst ANGEHAENGT statt in den Baustein hineingeschrieben: an dieser Datei
   arbeiten mehrere Chats gleichzeitig. Ein Anhang kann nichts ueberschreiben.
   Die Zeilenhoehe geht mit, sonst ueberlappen die vergroesserten Flaechen. */
.cookie-banner-text p { line-height: 1.9; }
.cookie-banner-text a { display: inline-block; padding-block: .85rem; }

/* ── Hervorhebung im Zwischen-CTA auf dunklem Grund ─────────────────────────
   Angehaengt am 24.08.2026, freigegeben von Adrian.

   Weiter oben in dieser Datei stehen zwei Regeln, die einander widersprechen,
   und die SPAETERE gewinnt:
     · `.section-dark .cta-zwischen { color: var(--text-on-dark) }`
     · `.cta-zwischen :is(strong,b) { color: var(--text-heading) }`  ← spaeter
   Ein <strong> in einem Zwischen-CTA auf dunklem Grund landet damit bei
   1,23:1 — fast-schwarz auf fast-schwarz. Dieselbe Mechanik wie Lehre M-13.

   Keine der gebauten Seiten hatte die Kombination (elf Zwischen-CTAs auf
   dunklem Grund nachgezaehlt, keiner mit Hervorhebung darin) — es war eine
   Falle, kein Schaden. Sie wird hier geschlossen, statt sie liegen zu lassen.
   Angehaengt statt hineingeschrieben: an dieser Datei arbeiten parallele
   Chats, und ein Anhang kann nichts ueberschreiben. */
.section-dark .cta-zwischen :is(strong, b) { color: var(--text-inverse); }

/* ── Kundenregel UE-06: Luft nach abgeschlossenen Bausteinen ────────────────
   Volker, 05.09.2026: "Sehr haeufig ist der erste Absatz nach dem farbigen
   Trennstrich, oder einer Tabelle etc. direkt darunter ohne Leerzeile. Das
   sieht (ohne Not) mega gequetscht aus. Bitte einfach eine oder zwei
   Leerzeilen dazwischen."

   Am gerenderten Stand nachgemessen: allein auf /co2-bilanz/ standen zehn
   Absaetze mit 0 px Abstand zum Baustein darueber, zwei davon sogar mit -4 px,
   also ueberlappend. Er hat es an sieben Stellen einzeln markiert; die Ursache
   ist aber immer dieselbe — ein <p> direkt nach einem Block-Baustein erbt
   keinen oberen Abstand.

   Zentral geloest statt siebenmal einzeln. --space-6 sind 32 px und
   entsprechen bei der Fliesstext-Zeilenhoehe gut einer Leerzeile.
   Bewusst NICHT erfasst: .cta-note nach .cta-row (die 16 px sind dort
   gewollt, der Hinweis gehoert eng an den Knopf). */
.section :is(figure, table, ul, ol) + p:not(.cta-note):not([class*="quelle"]),
.section :is([class*="grid"], [class*="paar"], [class*="box"], [class*="wrap"],
             [class*="capsule"], [class*="raster"], [class*="zahlen"],
             .cta-zwischen, .aufklapp) + p:not(.cta-note) {
  margin-block-start: var(--space-6);
}

/* ── Merksatz: der eine Satz, der haengenbleiben soll ───────────────────────
   Volker hat in Runde 4 an vier Stellen "Absatz, Fett, Farbe" verlangt, einmal
   mit dem Zusatz "das ist mal ein Statement!". Bisher gab es dafuer keinen
   Baustein — nur den grossen .leitsatz mit Bild, der im Fliesstext nicht passt.

   Die Farbe ist Gelb, nicht frei gewaehlt: Nach UE-05 ist Gelb die einzige
   zugelassene Hervorhebungsfarbe. Derselbe Balken wie am Zwischen-CTA, damit
   die Seite eine Sprache spricht statt zwei. */
.merksatz {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--ac-lime);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.section-dark .merksatz {
  background: rgba(255,255,255,.08);
  color: var(--text-on-dark);
}