/* ==========================================================================
   greenscan consulting — seitenspezifische Layouts

   Kopfzeile, Menue und Fusszeile folgen dem Muster von 2nd look. Die Regeln
   stehen hier bewusst noch einmal und nicht in shared/: die 2nd-look-Seite ist
   bereits abgenommen, ein Umzug wuerde sie anfassen. Sobald an beiden Seiten
   gleichzeitig gearbeitet wird, gehoert dieser Block nach shared/.
   ========================================================================== */

@layer layout {

  /* --- Zweitton dieser Einheit: kuehles Stahlblau -------------------------
     greenscan consulting ist B2B und technisch — der Ton ist kuehl und
     sachlich, im Gegensatz zum warmen Sand der Dachseite und dem tiefen
     Petrol von 2nd look. Die Limette bleibt als Klammer der Dachmarke.
     Nachgerechnet: Text 8,21:1 auf Weiss, Limette 6,78:1 auf der tiefen
     Flaeche, heller Text darauf 10,43:1. */
  body {
    --ton-flaeche: #eef2f6;
    --ton-linie: #b8c9d8;
    --ton-text: #2d5271;
    --ton-tief: #1b3348;
    --auf-ton-tief: #e6ecf2;
    --auf-ton-tief-leise: #a6b4c4;
  }

  /* --- Kopfzeile --------------------------------------------------------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    min-block-size: var(--header-h);
  }

  .site-header__logo img {
    inline-size: clamp(9.5rem, 7.5rem + 4vw, 13.125rem);
    block-size: auto;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__list a {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    padding-block-end: 3px;
    border-block-end: 2px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--ink);
    border-block-end-color: var(--lime);
  }

  .site-header__cta {
    padding: var(--sp-2xs) var(--sp-sm);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  /* Ausklappmenue: <details> statt Skript — funktioniert ohne JavaScript */
  .site-nav__toggle {
    display: none;
    align-items: center;
    gap: var(--sp-2xs);
    padding: var(--sp-2xs) var(--sp-xs);
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    cursor: pointer;
    list-style: none;
  }

  .site-nav__toggle::-webkit-details-marker { display: none; }

  .site-nav__burger {
    position: relative;
    inline-size: 1rem;
    block-size: 2px;
    background: var(--ink);
  }

  .site-nav__burger::before,
  .site-nav__burger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: var(--ink);
  }

  .site-nav__burger::before { inset-block-start: -5px; }
  .site-nav__burger::after { inset-block-start: 5px; }

  @media (max-width: 61.25rem) {          /* 980px — ab hier wird der Kopf eng */
    /* backdrop-filter macht den Kopf zum Bezugsrahmen fuer position:fixed —
       das Vollbildmenue kaeme sonst nicht ueber die Kopfzeile hinaus. */
    .site-header { backdrop-filter: none; background: var(--paper); }

    .site-nav__toggle {
      display: flex;
      position: relative;
      z-index: 70;
    }

    /* Vollflaechiges Menue — nur wenn JavaScript laeuft. Ohne Skript bleibt
       die Navigation als normale Liste im Fluss stehen. */
    .js .site-nav__list {
      position: fixed;
      inset: 0;
      z-index: 65;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2xs);
      padding: var(--sp-2xl) var(--sp-md);
      background: rgb(255 255 255 / 0.55);
      backdrop-filter: blur(28px) saturate(130%);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      min-inline-size: 0;
      overflow-y: auto;
    }

    @supports not (backdrop-filter: blur(1px)) {
      .js .site-nav__list { background: rgb(255 255 255 / 0.96); }
    }

    .js .site-nav__list li { inline-size: 100%; }

    .js .site-nav__list a {
      display: block;
      padding: var(--sp-3xs) var(--sp-sm);
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
      color: var(--ink);
      text-align: center;
      /* Lange Punkte wie "Radiologische Zusatzgutachten" passen bei 375 px
         nicht mehr in eine Zeile — sie duerfen umbrechen statt ueberzulaufen. */
      max-inline-size: 100%;
      text-wrap: balance;
      text-shadow: 0 1px 10px rgb(255 255 255 / 0.9), 0 0 22px rgb(255 255 255 / 0.7);
      border: 0;
      border-block-end: 3px solid transparent;
      inline-size: fit-content;
      margin-inline: auto;
      transition:
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
    }

    .js .site-nav__list a:hover,
    .js .site-nav__list a:focus-visible {
      color: var(--ink);
      border-block-end-color: var(--lime);
    }

    /* Ohne JavaScript: schlichte Liste unter dem Logo */
    .site-nav__list {
      position: static;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-2xs);
      padding: var(--sp-sm) 0 0;
      background: none;
      border: 0;
      box-shadow: none;
      min-inline-size: 0;
    }

    .site-header__inner { flex-wrap: wrap; }

    /* Der Burger wird im offenen Zustand zum Kreuz */
    .site-nav__disclosure[open] .site-nav__burger { background: transparent; }

    .site-nav__disclosure[open] .site-nav__burger::before {
      inset-block-start: 0;
      transform: rotate(45deg);
    }

    .site-nav__disclosure[open] .site-nav__burger::after {
      inset-block-start: 0;
      transform: rotate(-45deg);
    }

    .site-nav__burger,
    .site-nav__burger::before,
    .site-nav__burger::after {
      transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .site-nav__disclosure[open] .site-nav__toggle-label { display: none; }

    .site-nav__disclosure[open] .site-nav__toggle {
      padding: var(--sp-2xs);
      border-radius: 50%;
      aspect-ratio: 1;
      justify-content: center;
    }
  }

  @media (max-width: 30rem) {             /* 480px */
    .site-header__cta { display: none; }
  }

  /* --- Hero --------------------------------------------------------------
     Ohne Foto. Das gelieferte Bildmaterial taugt nicht als Motiv, deshalb
     traegt der Hero rein typografisch, mit einer weichen Limette-Flaeche
     rechts als einzigem Schmuck. */
  .hero {
    position: relative;
    overflow-x: clip;
    padding-block: var(--sp-3xl) var(--sp-2xl);
    background: linear-gradient(180deg, var(--ton-flaeche) 0%, var(--paper) 100%);
    border-block-end: 1px solid var(--ton-linie);
  }

  /* Der Container haelt die Bahn, die Breitenbegrenzung sitzt eine Ebene
     tiefer — sonst schrumpft die Bahn selbst und der Text rutscht zur Mitte. */
  .hero__raster {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-gap);
    align-items: center;
  }

  /* Die Textspalte bekommt mehr Raum als das Bild, dazu ein groesserer
     Spaltenabstand — sonst laeuft die Ueberschrift optisch ins Motiv. */
  @media (min-width: 62rem) {
    .hero__raster {
      grid-template-columns: 1.2fr 1fr;
      column-gap: var(--sp-2xl);
    }
  }

  .hero__text { max-inline-size: 38rem; }

  .hero__bild {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .hero__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .fliesstext { max-inline-size: var(--measure); }

  .fliesstext p + p { margin-block-start: var(--sp-sm); }

  .hero h1 {
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    /* pretty statt balance: balance verteilt auf gleich lange Zeilen und
       erzeugt dabei eher eine Zeile mehr. */
    text-wrap: pretty;
  }

  /* Limette taugt auf Weiss nicht als Textfarbe (1,92:1). Die Hervorhebung
     laeuft deshalb ueber eine Unterstreichung, nicht ueber die Schriftfarbe. */
  .hero__hervor {
    display: inline;
    box-shadow: inset 0 -0.14em 0 var(--lime);
  }

  .hero__person {
    margin-block-start: var(--sp-sm);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--green);
  }

  .hero__sub {
    margin-block-start: var(--sp-xs);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--grey);
    max-inline-size: var(--measure);
  }

  .hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-block-start: var(--sp-lg);
  }

  /* Der Hero baut sich beim Laden von oben nach unten auf. Keine Reveal-Logik
     noetig — er steht ohnehin im Blickfeld, die Animation laeuft einmal ab.
     Ohne JS fehlt die js-Klasse und alles steht sofort. */
  @media (prefers-reduced-motion: no-preference) {
    .js .hero__text > *,
    .js .hero__bild {
      animation: hero-auf 700ms var(--ease) backwards;
    }

    .js .hero__text > :nth-child(1) { animation-delay: 60ms; }
    .js .hero__text > :nth-child(2) { animation-delay: 140ms; }
    .js .hero__text > :nth-child(3) { animation-delay: 220ms; }
    .js .hero__text > :nth-child(4) { animation-delay: 300ms; }
    .js .hero__text > :nth-child(5) { animation-delay: 380ms; }
    .js .hero__bild { animation-delay: 200ms; animation-duration: 900ms; }
  }

  @keyframes hero-auf {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  /* Weiche Flaeche rechts oben — bleibt hinter dem Text und wird auf
     schmalen Fenstern ausgeblendet, damit sie die Schrift nicht stoert. */
  .hero__flaeche {
    position: absolute;
    inset-block-start: -18%;
    inset-inline-end: -6%;
    inline-size: min(38rem, 46vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgb(184 196 23 / 0.22) 0%,
      rgb(184 196 23 / 0.10) 55%,
      rgb(184 196 23 / 0) 72%);
    pointer-events: none;
  }

  @media (max-width: 48rem) {
    .hero__flaeche { display: none; }
    .hero { padding-block: var(--sp-2xl) var(--sp-xl); }
  }

  /* --- Sektionsueberschrift mit Limette-Unterstreichung ------------------- */
  .section-title {
    display: inline-block;
    border-block-end: 4px solid var(--lime);
    padding-block-end: var(--sp-2xs);
    margin-block-end: var(--sp-md);
  }

  .measure p + p { margin-block-start: var(--sp-sm); }

  /* --- Fusszeile ---------------------------------------------------------- */
  .site-footer {
    background: var(--ton-tief);
    color: var(--auf-ton-tief);
    padding-block: var(--sp-2xl) var(--sp-lg);
  }

  .site-footer__oben {
    text-align: center;
    margin-block-end: var(--sp-xl);
  }

  .site-footer__claim {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--paper);
    max-inline-size: 34rem;
    margin-inline: auto;
    text-wrap: balance;
  }

  .site-footer__unten {
    display: grid;
    gap: var(--sp-lg);
    font-size: var(--fs-sm);
  }

  @media (min-width: 34rem) {
    .site-footer__unten { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 56rem) {
    .site-footer__unten { grid-template-columns: 2fr 1fr 1fr; }
  }

  .site-footer__label {
    display: block;
    color: var(--lime);
    font-weight: var(--fw-semi-bold);
    margin-block-end: var(--sp-2xs);
  }

  .site-footer__adresse {
    font-style: normal;
    line-height: 1.7;
    margin-block-end: var(--sp-sm);
  }

  .site-footer__kontaktzeile {
    display: flex;
    align-items: center;
    gap: var(--sp-2xs);
    inline-size: fit-content;
    margin-block-start: var(--sp-2xs);
    color: var(--auf-ton-tief);
    text-decoration: none;
  }

  .site-footer__kontaktzeile:hover,
  .site-footer__kontaktzeile:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }

  /* Die Wortmarke traegt Grau auf Dunkel und verschwindet fast. Ein heller
     Grund hinter dem Logo haelt sie lesbar. */
  .site-footer__logo {
    display: block;
    inline-size: 11.25rem;
    max-inline-size: 100%;
    block-size: auto;
    margin-block-start: var(--sp-md);
    padding: var(--sp-2xs) var(--sp-xs);
    background: var(--paper);
    border-radius: var(--radius-sm);
  }

  .site-footer__liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-footer__liste a {
    color: var(--auf-ton-tief);
    text-decoration: none;
  }

  .site-footer__liste a:hover,
  .site-footer__liste a:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }

  .site-footer__meta {
    margin-block-start: var(--sp-xl);
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2xs) var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--auf-ton-tief-leise);
  }

  @media (max-width: 34rem) {
    .site-footer__meta {
      flex-direction: column;
      text-align: center;
    }
  }

  .site-footer__meta-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2xs) var(--sp-md);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-footer__meta a {
    color: var(--auf-ton-tief-leise);
    text-decoration: none;
  }

  .site-footer__meta a:hover,
  .site-footer__meta a:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }
}

@layer components {

  /* --- Kennzahlenleiste ---------------------------------------------------
     Steht direkt unter dem Hero und liefert den Beleg, bevor der Text
     ausholt. Jeder Wert stammt aus einem Kundendokument. */
  .kennzahlen {
    padding-block: var(--sp-xl);
    background: var(--ton-flaeche);
    border-block-end: 1px solid var(--ton-linie);
  }

  .kennzahlen__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--sp-md) var(--sp-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .kennzahlen__liste li {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3xs);
    padding-inline-start: var(--sp-sm);
    border-inline-start: var(--border-w) solid var(--lime);
  }

  /* Die Limette-Kante faehrt von oben ein, die vier Werte nacheinander. */
  .js .kennzahlen__liste li {
    background-image: linear-gradient(var(--lime), var(--lime));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: var(--border-w) 0;
    border-inline-start-color: transparent;
    transition: background-size 600ms var(--ease);
  }

  .js .kennzahlen.is-visible li { background-size: var(--border-w) 100%; }

  .js .kennzahlen.is-visible li:nth-child(2) { transition-delay: 120ms; }
  .js .kennzahlen.is-visible li:nth-child(3) { transition-delay: 240ms; }
  .js .kennzahlen.is-visible li:nth-child(4) { transition-delay: 360ms; }

  /* Zahl und Einheit bleiben in einer Zeile — sonst rutscht das Euro-Zeichen
     unter die Ziffern. Der Wert selbst darf dafuer etwas kleiner sein als die
     grosse Displaystufe. */
  .kennzahlen__wert {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-heading);
    color: var(--ink);
  }

  .kennzahlen__einheit {
    font-size: 0.6em;
    font-weight: var(--fw-semi);
    color: var(--lime-text);
  }

  .kennzahlen__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-lead);
    color: var(--grey);
  }

  /* --- Text neben Bild ----------------------------------------------------- */
  .text-bild {
    display: grid;
    gap: var(--sp-gap);
    align-items: start;
  }

  /* Bild und Text wechseln von Block zu Block die Seite. Beim Tausch wandern
     auch die Spaltenbreiten mit — sonst bekaeme das Bild die breite Spalte
     und der Text die schmale. */
  @media (min-width: 56rem) {
    .text-bild { grid-template-columns: 1fr 0.72fr; }

    .text-bild--umgekehrt {
      grid-template-columns: 0.72fr 1fr;
    }

    .text-bild--umgekehrt .text-bild__bild { order: -1; }
  }

  .text-bild__text { max-inline-size: var(--measure); }

  .text-bild__text p + p { margin-block-start: var(--sp-sm); }

  .text-bild__bild {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .text-bild__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* Zwei Bilder uebereinander in der Bildspalte — jedes traegt Rahmen und
     Schatten selbst, der Stapel bleibt offen. */
  .text-bild__bild--stapel {
    display: grid;
    gap: var(--sp-md);
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .text-bild__bild--stapel figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  /* --- Hebel-Liste: die fuenf Stellhebel als kompakte Aufzaehlung ---------- */
  .text-bild:has(.hebel-liste) { align-items: center; }

  .hebel-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-sm);
  }

  .hebel-liste li {
    position: relative;
    padding-inline-start: var(--sp-md);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    line-height: var(--lh-heading);
    color: var(--ink);
  }

  .hebel-liste li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 0.85rem;
    block-size: 0.2rem;
    background: var(--lime);
  }

  /* --- Datengrafiken -------------------------------------------------------
     Als SVG im Markup, nicht als Bilddatei: scharf in jeder Groesse, wenige
     Byte, in Markenfarben — und aenderbar, sobald der Kunde eine Zahl
     korrigiert. Die Textalternative steht im aria-label des SVG. */
  .grafik {
    margin: var(--sp-xl) 0 0;
    padding: var(--sp-md);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-inline-size: 46rem;
  }

  .grafik--breit { max-inline-size: 52rem; }

  .grafik__titel {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--ink);
    margin-block-end: var(--sp-sm);
  }

  .grafik__quelle {
    margin-block-start: var(--sp-md);
    font-size: var(--fs-xs);
    line-height: var(--lh-lead);
    color: var(--grey);
  }

  /* --- Balkendiagramm ------------------------------------------------------
     Aus HTML statt aus SVG: Beschriftung in normaler Schriftgroesse, die
     umbrechen darf. Ein skaliertes SVG haette den Text auf schmalen Fenstern
     auf unter acht Pixel gedrueckt. Die Anteile stehen als Modifier im CSS,
     nicht als Inline-Style. */
  .balken {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .balken__zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label zahl"
      "spur  spur";
    gap: var(--sp-3xs) var(--sp-sm);
    align-items: baseline;
  }

  .balken__label {
    grid-area: label;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--ink);
  }

  .balken__zahl {
    grid-area: zahl;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--ink);
    white-space: nowrap;
  }

  .balken__spur {
    grid-area: spur;
    display: block;
    inline-size: 100%;
    block-size: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--paper-soft);
    overflow: hidden;
  }

  .balken__flaeche {
    display: block;
    block-size: 100%;
    border-radius: var(--radius-sm);
  }

  .balken__flaeche--lime { background: var(--lime); }
  .balken__flaeche--grau { background: #c9ccc7; }

  .balken__flaeche--voll { inline-size: 100%; }
  .balken__flaeche--fuenfsiebzig { inline-size: 74.6%; }   /* 23 von 30,82 */
  .balken__flaeche--drei { inline-size: 3%; min-inline-size: 6px; }

  /* Die Balken wachsen von links, sobald der Block ins Bild kommt. Ueber
     transform statt inline-size, damit der gemessene Wert im CSS unangetastet
     bleibt und der Browser die Bewegung auf der GPU rechnet. Nur mit JS —
     ohne Skript stehen die Balken sofort in voller Laenge. */
  .js .balken__flaeche {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--ease);
  }

  .js [data-reveal].is-visible .balken__flaeche { transform: scaleX(1); }

  /* Der zweite Balken folgt dem ersten mit kurzem Abstand — so liest man den
     Vergleich in der Reihenfolge, in der er gemeint ist. */
  .js [data-reveal].is-visible .balken__zeile:nth-child(2) .balken__flaeche {
    transition-delay: 220ms;
  }

  /* --- Werteliste unter dem Diagramm --------------------------------------- */
  .werte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: var(--sp-sm) var(--sp-md);
    margin: var(--sp-lg) 0 0;
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid var(--border-soft);
  }

  .werte__paar {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .werte dt {
    font-size: var(--fs-xs);
    color: var(--grey);
  }

  .werte dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--ink);
  }

  /* --- Kette: Aufbau der netzunabhaengigen Einheit -------------------------
     Als Liste statt als SVG-Diagramm, damit die Beschriftung umbrechen kann
     und auf schmalen Fenstern lesbar bleibt. */
  .kette {
    display: grid;
    gap: var(--sp-sm);
    list-style: none;
    margin: var(--sp-md) 0 0;
    padding: 0;
    counter-reset: kette;
  }

  .kette__glied {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    grid-template-areas:
      "nummer titel"
      "nummer wert"
      "nummer text";
    column-gap: var(--sp-sm);
    padding-block-end: var(--sp-sm);
  }

  /* Verbindungslinie zum naechsten Glied */
  .kette__glied:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.06rem;
    inset-block: 2.5rem 0;
    inline-size: 2px;
    background: var(--lime-line);
  }

  .kette__nummer {
    grid-area: nummer;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--lime);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--lime-text);
  }

  .kette__titel {
    grid-area: titel;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    line-height: 1.3;
  }

  .kette__wert {
    grid-area: wert;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--lime-text);
  }

  .kette__text {
    grid-area: text;
    font-size: var(--fs-sm);
    line-height: var(--lh-lead);
    color: var(--grey);
  }

  .kette__fuss {
    margin-block-start: var(--sp-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink);
  }

  /* Die Kette baut sich Glied fuer Glied auf — erst der Ring, dann die
     Linie zum naechsten. Das bildet den Weg des Stroms nach. */
  .js .kette__glied {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 500ms var(--ease),
      transform 500ms var(--ease);
  }

  .js .kette__glied:not(:last-child)::before {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 400ms var(--ease);
  }

  .js [data-reveal].is-visible .kette__glied {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal].is-visible .kette__glied:not(:last-child)::before {
    transform: scaleY(1);
  }

  .js [data-reveal].is-visible .kette__glied:nth-child(2) { transition-delay: 180ms; }
  .js [data-reveal].is-visible .kette__glied:nth-child(3) { transition-delay: 360ms; }
  .js [data-reveal].is-visible .kette__glied:nth-child(4) { transition-delay: 540ms; }

  .js [data-reveal].is-visible .kette__glied:nth-child(1)::before { transition-delay: 120ms; }
  .js [data-reveal].is-visible .kette__glied:nth-child(2)::before { transition-delay: 300ms; }
  .js [data-reveal].is-visible .kette__glied:nth-child(3)::before { transition-delay: 480ms; }

  /* --- Gestaffeltes Erscheinen der Beratungskarten ------------------------- */
  .js .card-grid > .card {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 500ms var(--ease),
      transform 500ms var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  .js [data-reveal].is-visible .card-grid > .card {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal].is-visible .card-grid > .card:nth-child(2) { transition-delay: 110ms; }
  .js [data-reveal].is-visible .card-grid > .card:nth-child(3) { transition-delay: 220ms; }

  /* Hover soll die Karte weiter anheben duerfen, auch nach dem Einblenden. */
  .js [data-reveal].is-visible .card-grid > .card:hover,
  .js [data-reveal].is-visible .card-grid > .card:focus-within {
    transform: translateY(-4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .js .balken__flaeche,
    .js .kette__glied,
    .js .kette__glied::before,
    .js .card-grid > .card {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .js .kennzahlen__liste li {
      background-size: var(--border-w) 100%;
      transition: none;
    }
  }

  /* --- Symbol in der Beratungskarte --------------------------------------- */
  .card__icon {
    display: grid;
    place-items: center;
    inline-size: 3.75rem;
    block-size: 3.75rem;
    margin-block-end: var(--sp-2xs);
    border-radius: 50%;
    background: var(--lime-soft);
    color: var(--lime-text);
  }

  /* --- Lizenzblock -------------------------------------------------------- */
  .lizenz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-lg);
    background: var(--paper);
    border: var(--border-w) solid var(--lime);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .lizenz__body { max-inline-size: var(--measure); }

  .lizenz__titel {
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    margin-block-end: var(--sp-2xs);
  }

  .lizenz__text {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink);
  }

  .lizenz__cta { flex: none; }

  @media (max-width: 40rem) {
    .lizenz { padding: var(--sp-md); }
    .lizenz__cta { inline-size: 100%; }
  }

  /* --- Publikationen ------------------------------------------------------ */
  .pub-liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    list-style: none;
    margin: var(--sp-lg) 0 0;
    padding: 0;
    max-inline-size: var(--measure);
  }

  .pub-liste li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--sp-xs);
    padding-block-end: var(--sp-sm);
    border-block-end: 1px solid var(--border-soft);
  }

  .pub-liste li:last-child { border-block-end: 0; padding-block-end: 0; }

  .pub-liste__jahr {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--lime-text);
  }

  .pub-liste__quelle {
    font-size: var(--fs-sm);
    line-height: var(--lh-lead);
    color: var(--ink);
  }

  @media (max-width: 30rem) {
    .pub-liste li { grid-template-columns: 1fr; gap: var(--sp-3xs); }
  }

  .pub-mehr { margin-block-start: var(--sp-lg); }

  /* --- Vollstaendige Publikationsliste ------------------------------------ */
  .pub-block + .pub-block { margin-block-start: var(--sp-2xl); }

  .pub-block .section-title { margin-block-start: var(--sp-lg); }

  /* Der Reset nimmt der Liste den Zaehler. Statt ihn zurueckzuholen — bei
     136 Eintraegen liest sich eine Nummernkolonne muehsam — steht jeder
     Eintrag buendig, getrennt nur durch Abstand und eine Limette-Marke. */
  .pub-voll {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    max-inline-size: 52rem;
  }

  .pub-voll li {
    position: relative;
    padding-inline-start: var(--sp-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-lead);
    color: var(--ink);
  }

  .pub-voll li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: 8px;
    block-size: 2px;
    background: var(--lime);
  }

  /* --- Rechtstexte -------------------------------------------------------- */
  /* Die Unterstreichung folgt dem Text, nicht der Spaltenbreite — sonst
     zieht sie eine Linie quer durch die Seite. */
  .rechtstext h2 {
    display: inline-block;
    margin-block: var(--sp-xl) var(--sp-sm);
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    border-block-end: 4px solid var(--lime);
    padding-block-end: var(--sp-2xs);
  }

  .rechtstext h3 {
    margin-block: var(--sp-md) var(--sp-2xs);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
  }

  .rechtstext p,
  .rechtstext address {
    margin-block-start: var(--sp-2xs);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
  }

  .rechtstext address { font-style: normal; }

  .rechtstext .dot-list { margin-block-start: var(--sp-2xs); }

  .rechtstext__copy {
    margin-block-start: var(--sp-xl);
    color: var(--grey);
  }

  /* --- Zeitleiste: Verweise ----------------------------------------------- */
  .timeline__text a {
    display: inline-block;
    margin-block-start: var(--sp-3xs);
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-underline-offset: 3px;
  }

  .timeline__text a:hover,
  .timeline__text a:focus-visible {
    color: var(--green-dark);
    text-decoration-color: var(--green);
  }

  /* --- Partnerleiste ------------------------------------------------------ */
  .partner-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-xs) var(--sp-lg);
    list-style: none;
    margin: var(--sp-md) 0 0;
    padding: 0;
  }

  .partner-liste li {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--grey);
  }

  /* --- Kontaktblock -------------------------------------------------------- */
  .kontakt {
    display: grid;
    gap: var(--sp-gap);
    padding: var(--sp-lg);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 48rem) {
    .kontakt { grid-template-columns: 3fr 2fr; align-items: start; }
  }

  .kontakt__titel {
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    text-wrap: balance;
  }

  .kontakt__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-block-start: var(--sp-md);
  }

  .button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2xs);
  }

  .kontakt__anfahrt {
    padding-inline-start: var(--sp-md);
    border-inline-start: var(--border-w) solid var(--lime-line);
  }

  @media (max-width: 47.9375rem) {
    .kontakt__anfahrt {
      padding-inline-start: 0;
      padding-block-start: var(--sp-md);
      border-inline-start: 0;
      border-block-start: var(--border-w) solid var(--lime-line);
    }
    .kontakt__aktionen .button { inline-size: 100%; }
  }

  .kontakt__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--grey);
    margin-block-end: var(--sp-2xs);
  }

  .kontakt__adresse {
    font-style: normal;
    line-height: 1.7;
    font-size: var(--fs-sm);
  }

  .kontakt__fax {
    margin-block-start: var(--sp-2xs);
    font-size: var(--fs-sm);
    color: var(--grey);
  }

  .kontakt__route {
    display: inline-block;
    margin-block-start: var(--sp-sm);
    color: var(--green);
    font-weight: var(--fw-semi);
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-underline-offset: 4px;
  }

  .kontakt__route:hover,
  .kontakt__route:focus-visible {
    color: var(--green-dark);
    text-decoration-color: var(--green);
  }
}

@layer layout {

  /* --- Aktiver Menuepunkt (Scrollspy) --------------------------------------
     Markiert den Abschnitt, der gerade gelesen wird. Nur Farbe und Linie
     wechseln — ein Wechsel der Schriftstaerke wuerde die Menuebreite
     veraendern und die Punkte springen lassen.

     Bewusst in @layer layout, nicht in components: die Reihenfolgezeile im
     <head> steht hinter den Stylesheets und legt deshalb nichts fest. Die
     tatsaechliche Reihenfolge endet auf layout — eine Regel in components
     wuerde von der Basisregel ueberschrieben. */
  .site-nav__list a[aria-current] {
    color: var(--green);
    border-block-end-color: var(--lime);
  }

  @media (max-width: 61.25rem) {
    .js .site-nav__list a[aria-current] {
      color: var(--green);
      border-block-end-color: var(--lime);
    }
  }
}