/* =========================================================================
   Pfad A — Design-System
   Marke: Lime #C2E812 + Slate #4B4F54 (von pfad-a.de verifiziert)
   Signatur: die Energieeffizienzklassen-Skala — alle Bänder grau, nur A trägt Lime.
   ========================================================================= */

/* --- Schriften (selbst gehostet, DSGVO) ---------------------------------
   Poppins trägt Überschriften und Fließtext — dieselbe Schrift wie bisher,
   geometrisch und rund wie die Buchstaben im Logo.
   IBM Plex Mono trägt alles Technische: Eyebrows, Effizienzklassen,
   Datenblätter, Kennzahlen. Der Kontrast der beiden macht den Ton aus. */
@font-face { font-family: 'Poppins';       src: url('assets/fonts/Poppins-400.woff2')     format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins';       src: url('assets/fonts/Poppins-500.woff2')     format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins';       src: url('assets/fonts/Poppins-600.woff2')     format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins';       src: url('assets/fonts/Poppins-700.woff2')     format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Marke */
  --lime:      #C2E812;
  --lime-deep: #A9CC0B;
  --lime-wash: #F2FAD5;
  --slate:     #4B4F54;
  --ink:       #14171A;
  --muted:     #7E858C;
  --paper:     #FFFFFF;
  --mist:      #F1F3EE;
  --carbon:    #16181A;
  --line:      rgba(20, 23, 26, .11);
  --line-soft: rgba(20, 23, 26, .06);

  /* Schrift */
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Skala — auf Poppins abgestimmt: die Schrift läuft breiter als ein
     Grotesk, darum sind die Maxima etwas kleiner. */
  --step-h1:   clamp(2.3rem, 4.9vw, 4.1rem);
  --step-h2:   clamp(1.8rem, 3.1vw, 2.7rem);
  --step-h3:   clamp(1.1rem, 1.4vw, 1.28rem);
  --step-lead: clamp(1.02rem, 1.3vw, 1.15rem);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 9vw, 132px);

  --r-lg: 26px; --r-md: 16px; --r-sm: 10px; --r-pill: 999px;
  --shadow-sm: 0 4px 18px rgba(20, 23, 26, .06);
  --shadow-md: 0 18px 46px rgba(20, 23, 26, .10);
  --shadow-lg: 0 34px 80px rgba(20, 23, 26, .16);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--ff-body);
  font-size: 1rem;
  /* Poppins hat eine große x-Höhe — etwas weniger Durchschuss als bei
     einer Grotesk, sonst zerfällt der Absatz. */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--ink);
  font-weight: 600;
  /* Poppins ist geometrisch und rund: enge Laufweite drückt die Formen
     zusammen. Deutlich weniger negativ als bei einer Grotesk. */
  letter-spacing: -.012em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-h1); letter-spacing: -.02em; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.3; letter-spacing: -.005em; }
/* Sicherheitsnetz für deutsche Komposita: bricht nur, wenn ein Wort
   wirklich nicht passt — sonst nie. */
h1, h2, h3, h4, p, dd, li { overflow-wrap: break-word; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--lime); color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--r-pill); font-size: .9rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout-Helfer ------------------------------------------------------ */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section__head { max-width: 46rem; }
.section__lead {
  font-size: var(--step-lead);
  color: var(--slate);
  margin-top: var(--s-5);
  text-wrap: pretty;
}

/* Eyebrow: Mono, wie in einem technischen Dokument — kein Zierstück. */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s-5);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--lime);
  border-radius: 2px;
  flex: none;
}
.eyebrow--light { color: rgba(255, 255, 255, .72); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--lime);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Das Chevron aus dem Logo — als Badge im Button. */
.btn__chev {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--lime);
  border-radius: 50%;
  flex: none;
  transition: transform .3s var(--ease);
}
.btn__chev svg { width: 9px; height: 9px; }
.btn:hover .btn__chev { transform: translateX(3px); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--light .btn__chev { background: var(--ink); color: var(--paper); }
.btn--dark  { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--dark .btn__chev { background: var(--lime); color: var(--ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  padding: 11px 24px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost-light {
  --btn-bg: transparent; --btn-fg: #fff;
  padding: 11px 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1px #fff; }
.btn--block { width: 100%; justify-content: center; padding-left: 24px; }

/* Textlink mit Chevron */
.link-chev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s var(--ease);
}
.link-chev svg { width: 8px; height: 8px; transition: transform .3s var(--ease); }
.link-chev:hover { background-size: 100% 2px; }
.link-chev:hover svg { transform: translateX(4px); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 18px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.brand { flex: none; display: block; line-height: 0; }
.brand svg, .brand img { width: 148px; height: auto; }
.brand__light { display: block; }
.brand__dark  { display: none; }

.nav {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.nav a {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: rgba(255, 255, 255, .16); }
.nav a[aria-current='page'] { background: #fff; color: var(--ink); }
.site-header .btn { flex: none; }

/* Untermenü — Leistungen und Lösungen. Maus öffnet per Hover,
   Tastatur per Klick/Enter. Escape schließt. */
.nav__group { position: relative; display: flex; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__toggle svg { width: 8px; height: 8px; transform: rotate(90deg); transition: transform .25s var(--ease); }
.nav__toggle:hover { background: rgba(255, 255, 255, .16); }
.nav__group:hover .nav__toggle svg,
.nav__toggle[aria-expanded='true'] svg { transform: rotate(-90deg); }
.nav__toggle[aria-current='page'] { background: #fff; color: var(--ink); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 258px;
  padding: 8px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  translate: -50% 6px;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;
}
/* Kein :focus-within — sonst öffnet das Menü, sobald der Knopf den Fokus hat,
   und Escape wirkt nicht mehr: Escape gibt den Fokus zurück, das Menü ginge
   sofort wieder auf. Maus öffnet per Hover, Tastatur per Enter/Space
   (aria-expanded). Bei geschlossenem Menü nimmt visibility:hidden die Links
   aus der Tab-Reihenfolge. */
.nav__group:hover .nav__menu,
.nav__toggle[aria-expanded='true'] + .nav__menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
.nav__menu a {
  padding: 10px 14px;
  border-radius: 11px;
  font-size: .9rem;
  color: var(--slate);
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--mist); color: var(--ink); }
.nav__menu a[aria-current='page'] { background: var(--ink); color: #fff; }
.nav__menu hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line-soft); }

.site-header.is-solid .nav__toggle { color: var(--slate); }
.site-header.is-solid .nav__toggle:hover { background: rgba(20, 23, 26, .06); color: var(--ink); }
.site-header.is-solid .nav__toggle[aria-current='page'] { background: var(--ink); color: #fff; }

/* Untermenü im mobilen Menü: flach ausgeklappt, kein Aufklapp-Spiel */
.mobile-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 12px 16px;
  border-left: 2px solid var(--lime);
  margin-bottom: 8px;
}
.mobile-menu__sub a {
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--slate);
  padding: 7px 0;
  border: 0;
}

/* Scroll-Zustand: aus Glas wird Papier */
.site-header.is-solid {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line-soft), var(--shadow-sm);
  padding-block: 12px;
}
.site-header.is-solid .brand__light { display: none; }
.site-header.is-solid .brand__dark  { display: block; }
.site-header.is-solid .nav {
  background: rgba(20, 23, 26, .04);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.site-header.is-solid .nav a { color: var(--slate); }
.site-header.is-solid .nav a:hover { background: rgba(20, 23, 26, .06); color: var(--ink); }
.site-header.is-solid .nav a[aria-current='page'] { background: var(--ink); color: #fff; }

/* Seiten ohne Hero starten direkt im Papier-Zustand */
.site-header--solid { background: rgba(255, 255, 255, .88); }

/* Burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 13px;
  width: 18px; height: 1.5px;
  background: #fff;
  /* Trägt den Kontrast auch, wenn hinter dem Hero eine helle Fassade liegt. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.site-header.is-solid .nav-toggle span { filter: none; }
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.site-header.is-solid .nav-toggle { background: rgba(20, 23, 26, .06); }
.site-header.is-solid .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: 104px var(--gutter) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-family: var(--ff-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .btn { margin-top: var(--s-5); align-self: start; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: 140px calc(var(--s-9) + 40px);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Oben: trägt Logo und Navigation. Ohne diesen Verlauf verschwinden
       weiße Glas-Elemente auf hellen Fassaden. */
    linear-gradient(to bottom, rgba(11, 14, 16, .5) 0%, rgba(11, 14, 16, .12) 16%, rgba(11, 14, 16, 0) 30%),
    linear-gradient(to top, rgba(11, 14, 16, .88) 0%, rgba(11, 14, 16, .45) 42%, rgba(11, 14, 16, .12) 72%),
    linear-gradient(to right, rgba(11, 14, 16, .55) 0%, rgba(11, 14, 16, 0) 62%);
}
/* Feines Vertikalraster — technische Textur, keine Deko */
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    to right, rgba(255, 255, 255, .07) 0 1px, transparent 1px calc(100% / 6)
  );
  mask-image: linear-gradient(to top, transparent, #000 30%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-7);
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  /* Flex-Kind: ohne min-width:0 wächst es auf die min-content-Breite der
     nowrap-Buttons und läuft auf dem Handy rechts aus dem Bild. */
  min-width: 0;
}
.hero h1 { color: #fff; }
.hero__aside { display: flex; flex-direction: column; gap: var(--s-5); }
.hero__text { color: rgba(255, 255, 255, .82); font-size: 1.02rem; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =========================================================================
   SIGNATUR — Energieeffizienzklassen-Skala
   Das Instrument des Fachs. Alle Klassen grau, nur A und A+ tragen Lime:
   Das Markengrün ist die Farbe des Ziels, nicht bloß ein Akzent.
   ========================================================================= */
.scale-wrap { position: relative; background: var(--paper); }
.scale-card {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin: -80px auto 0;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.scale-card__title { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.scale-card__text { margin-top: var(--s-4); font-size: .95rem; color: var(--muted); text-wrap: pretty; }

.scale__legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.scale__legend b { color: var(--ink); font-weight: 500; }

.scale__bands {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}
.scale__band {
  position: relative;
  height: 62px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: .82rem;
  font-weight: 500;
  color: rgba(20, 23, 26, .52);
  /* Grauverlauf: H ist am schwersten, Richtung B wird es leichter. */
  background: hsl(90 5% calc(63% + var(--i) * 4.4%));
}
/* Das Ziel — und die einzige Stelle auf der Skala, die Farbe trägt. */
.scale__band--goal { background: var(--lime); color: var(--ink); }

/* Der Läufer wandert beim Sichtbarwerden von der Ist- zur Zielklasse. */
.scale__runner {
  position: relative;
  height: 26px;
  margin-top: 12px;
}
.scale__runner::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 12px;
  height: 1px;
  background: var(--line);
}
.scale__knob {
  position: absolute;
  top: 0;
  left: var(--pos, 27.8%);
  transform: translateX(-50%);
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px var(--paper);
  transition: left 1.9s var(--ease);
}
.scale__knob svg { width: 9px; height: 9px; color: var(--ink); }
.scale.is-live .scale__knob { left: var(--pos-to, 83.3%); }

/* --- Trust-Leiste ------------------------------------------------------- */
.trust { padding-block: var(--s-9); }
.trust__label {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--s-6);
}
.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
}
.trust__list img {
  height: 46px;
  width: auto;
  object-fit: contain;
  /* multiply schluckt die weißen Kästen der Badge-Dateien */
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: .48;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.trust__list img:hover { filter: grayscale(0); opacity: 1; }

/* --- Intro + USP-Chips -------------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.intro__body { display: flex; flex-direction: column; gap: var(--s-5); }
.intro__body p { text-wrap: pretty; }
.intro__result {
  padding: var(--s-5) var(--s-6);
  background: var(--lime-wash);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: .98rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
}
.chip svg { width: 8px; height: 8px; color: var(--lime); flex: none; }
.section--mist .chip { background: var(--paper); box-shadow: none; }

.metric { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-7); }
.metric__value {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 4.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  /* Keine Tabellenziffern auf einer großen Einzelzahl — gleich breite
     Ziffern lassen sie im Schaugrad locker und zerfahren wirken.
     Tabellenziffern nur dort, wo Zahlen untereinander fluchten. */
  font-variant-numeric: proportional-nums;
}
.metric__label { font-size: .95rem; color: var(--muted); max-width: 22rem; }

/* --- Leistungen: Sticky-Intro + Kartengrid ------------------------------ */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.services__aside { position: sticky; top: 120px; }
.services__aside .btn { margin-top: var(--s-6); }
.services__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.service-card__body p { font-size: .92rem; color: var(--muted); flex: 1; text-wrap: pretty; }
.service-card__body .link-chev { align-self: start; margin-top: var(--s-2); }
.service-card--wide { grid-column: 1 / -1; }
.service-card--wide { flex-direction: row; }
.service-card--wide .service-card__media { aspect-ratio: auto; flex: 0 0 42%; }
.service-card--wide .service-card__body { justify-content: center; padding: var(--s-7); }

/* --- Warum Pfad A ------------------------------------------------------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.why-card {
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.why-card h3 { margin-bottom: var(--s-3); }
.why-card p { font-size: .92rem; color: var(--muted); text-wrap: pretty; }
.why-card__chev {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--lime-wash);
  color: var(--ink);
  margin-bottom: var(--s-5);
}
.why-card__chev svg { width: 10px; height: 10px; }

/* --- CTA-Band ----------------------------------------------------------- */
.cta-band { padding-block: var(--section-y); }
.cta-band__inner {
  position: relative;
  overflow: hidden;
  background: var(--carbon);
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
.cta-band__inner::after {
  content: '';
  position: absolute;
  right: -10%; bottom: -60%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(194, 232, 18, .16), transparent 65%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .7); text-wrap: pretty; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }

/* --- Referenzen --------------------------------------------------------- */
.refs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.ref-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.ref-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: .74rem;
  line-height: 1.6;
  color: var(--muted);
}
.ref-card__meta b { color: var(--ink); font-weight: 500; }
.ref-card blockquote {
  margin: 0;
  font-size: 1.02rem;
  color: var(--slate);
  flex: 1;
  text-wrap: pretty;
}
.ref-card__who { display: flex; align-items: baseline; gap: var(--s-3); }
.ref-card__who strong { font-family: var(--ff-display); font-size: 1rem; color: var(--ink); }
.ref-card__who span {
  font-family: var(--ff-mono);
  font-size: .74rem;
  color: var(--ink);
  background: var(--lime);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;   /* Badge bleibt einzeilig — sonst rutscht die Zahl auf schmalen Screens allein nach oben */
  flex-shrink: 0;        /* nicht vom langen Rollennamen zusammengedrückt werden */
}

/* --- FAQ ---------------------------------------------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq__list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}
.faq-item__icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
  transition: transform .35s var(--ease), background .25s var(--ease);
}
.faq-item__icon svg { width: 9px; height: 9px; }
.faq-item__q[aria-expanded='true'] .faq-item__icon {
  transform: rotate(90deg);
  background: var(--lime);
}
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq-item__q[aria-expanded='true'] + .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding-bottom: var(--s-5); font-size: .96rem; color: var(--muted); text-wrap: pretty; }
.faq-item__a ul { padding-bottom: var(--s-5); display: flex; flex-direction: column; gap: 10px; }
.faq-item__a li {
  display: flex; gap: 10px;
  font-size: .96rem; color: var(--muted);
}
.faq-item__a li svg { width: 8px; height: 8px; margin-top: 8px; color: var(--lime); flex: none; }
.faq-item__a .btn { margin-bottom: var(--s-6); }

/* --- Video / Interview -------------------------------------------------- */
.video__frame {
  position: relative;
  margin-top: var(--s-8);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--carbon);
  box-shadow: var(--shadow-md);
}
.video__frame video { width: 100%; height: auto; display: block; }

/* --- Magazin ------------------------------------------------------------ */
.mag__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); }
.mag__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.mag-card { display: flex; flex-direction: column; gap: var(--s-4); text-decoration: none; }
.mag-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
}
.mag-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mag-card:hover .mag-card__media img { transform: scale(1.05); }
.mag-card h3 { font-size: 1.05rem; }
.mag-card p { font-size: .9rem; color: var(--muted); text-wrap: pretty; }
.mag-card .link-chev { margin-top: auto; padding-top: var(--s-2); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--carbon); color: rgba(255, 255, 255, .62); padding-block: var(--s-9) var(--s-6); }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}
.site-footer .brand svg, .site-footer .brand img { width: 168px; }
.site-footer__intro { margin-top: var(--s-5); font-size: .93rem; max-width: 28rem; text-wrap: pretty; }
.site-footer h4 {
  font-family: var(--ff-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: var(--s-5);
}
.site-footer ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer a { text-decoration: none; font-size: .93rem; transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--lime); }
.site-footer__legal {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  font-size: .84rem;
}
.site-footer__legal ul { flex-direction: row; gap: var(--s-5); }

/* --- Kontaktformular ---------------------------------------------------- */
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--ff-body);
  font-size: .98rem;
  color: var(--ink);
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime-wash);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true'] {
  border-color: #C0392B;
}
.field__error { font-size: .8rem; color: #C0392B; min-height: 1em; }
.field--hp { position: absolute; left: -9999px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--lime); }
.consent a { color: var(--ink); }

.form__note {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.form__status {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--lime-wash);
  color: var(--ink);
  font-size: .95rem;
}
.form__status[hidden] { display: none; }

.contact-cards { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.contact-card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--lime-wash);
  color: var(--ink);
  flex: none;
}
.contact-card__icon svg { width: 16px; height: 16px; }
.contact-card dt {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card dd { margin: 2px 0 0; font-size: 1rem; font-weight: 500; color: var(--ink); }

/* --- Innenseiten-Kopf --------------------------------------------------- */
.page-hero {
  padding-block: calc(var(--s-10) + 40px) var(--section-y);
  background: var(--mist);
}
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
.page-hero p { font-size: var(--step-lead); text-wrap: pretty; }

/* Ankernavigation der Leistungsseite */
.anchors {
  position: sticky;
  top: 82px;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 12px;
}
.anchors ul { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.anchors ul::-webkit-scrollbar { display: none; }
.anchors a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.anchors a:hover { background: var(--mist); color: var(--ink); }
.anchors a.is-active { background: var(--ink); color: #fff; }

/* Leistungs-Detailblock */
.leistung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 140px;
}
.leistung:last-of-type { border-bottom: 0; }
.leistung:nth-of-type(even) .leistung__media { order: -1; }
.leistung__media { border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.leistung__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* align-items:start würde die Kinder auf ihre Inhaltsbreite ziehen — lange
   Komposita wie „Fördermittelmanagement" sprengen dann das Handy. */
.leistung__body { display: flex; flex-direction: column; gap: var(--s-5); align-items: stretch; }
.leistung__body > .btn { align-self: flex-start; }
.leistung__body p { text-wrap: pretty; }
.leistung__list { display: flex; flex-direction: column; gap: 12px; }
.leistung__list li { display: flex; gap: 12px; font-size: .96rem; }
.leistung__list svg { width: 8px; height: 8px; margin-top: 8px; color: var(--lime); flex: none; }

/* Datenblatt „Auf einen Blick" — das Register eines technischen Dokuments. */
.spec { border-top: 1px solid var(--line); width: 100%; }
.spec__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec dt {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.spec dd { margin: 0; font-size: .93rem; color: var(--ink); text-wrap: pretty; }

/* Vier Zusagen (Leistungsseite) */
.pledges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.pledge { padding-top: var(--s-5); border-top: 2px solid var(--lime); }
.pledge h3 { font-size: 1.02rem; margin-bottom: var(--s-3); }
.pledge p { font-size: .92rem; color: var(--muted); text-wrap: pretty; }

/* Prozess — die einzige Stelle mit Nummern, weil die Reihenfolge hier
   wirklich Information trägt. Die Chevron-Kette ist der Pfad. */
.process {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.process__step { position: relative; padding-top: 40px; }
.process__step::before {
  content: '';
  position: absolute;
  top: 11px; left: 0;
  width: 100%; height: 1px;
  background: var(--line);
}
.process__step:last-child::before { width: 24px; }
.process__chev {
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 0 0 5px var(--paper);
}
.process__chev svg { width: 8px; height: 8px; }
.process__num {
  display: block;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 8px;
}
.process__step h3 { font-size: 1rem; }

/* Benefit-Liste mit Chevron-Bullets */
.bullets { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); }
.bullets li { display: flex; gap: 12px; text-wrap: pretty; }
.bullets li > svg { width: 8px; height: 8px; margin-top: 9px; color: var(--lime); flex: none; }
.bullets b { color: var(--ink); font-weight: 600; }

/* Kompakte Vorteils-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.tile {
  display: flex; align-items: center; gap: 12px;
  padding: var(--s-5);
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink);
}
.tile svg { width: 8px; height: 8px; color: var(--lime); flex: none; }

/* =========================================================================
   Diagramm — Verteilung der Energieeffizienzklassen
   Dunkle Karte, weil der Validator es verlangt: Lime erreicht auf hellem
   Grund nur 1,38:1, auf dunklem 10,9:1. Und ausgerechnet A und A+ sind die
   zwei kleinsten Balken — auf Weiß wären sie die schwächsten Marken im Bild.
   Eine Datenreihe, eine neutrale Farbe, Lime nur als Hervorhebung des Ziels.
   Jeder Wert ist direkt beschriftet: die Farbe trägt nie allein.
   ========================================================================= */
.chart {
  --max: 20;                       /* Skalenobergrenze, H liegt bei 18,44 */
  margin: 0;
  background: var(--carbon);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 44px);
}
.chart__title {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: #fff;
  margin-bottom: var(--s-6);
  max-width: 34rem;
}
.chart__rows { display: flex; flex-direction: column; gap: 8px; }
.chart__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 68px;
  align-items: center;
  gap: var(--s-4);
}
.chart__key {
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
}
.chart__track {
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: background .2s var(--ease);
}
.chart__row:hover .chart__track { background: rgba(255, 255, 255, .12); }
.chart__bar {
  display: block;
  height: 100%;
  width: 0;                                    /* wächst beim Sichtbarwerden */
  background: #C6CAC1;                         /* neutrale Datenreihe */
  border-radius: 0 4px 4px 0;                  /* nur das Wertende gerundet */
  transition: width 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in .chart__bar { width: calc(var(--v) / var(--max) * 100%); }
/* Das Ziel — die einzige Stelle im Diagramm, die Farbe trägt. */
.chart__row--goal .chart__bar { background: var(--lime); }
.chart__row--goal .chart__key { color: #fff; }
.chart__val {
  font-family: var(--ff-mono);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;          /* Zahlen fluchten untereinander */
  text-align: right;
  color: rgba(255, 255, 255, .78);
}
.chart__foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
  text-wrap: pretty;
}

/* Kennzahl als eigenständige Aussage — kein Balken für eine einzelne Zahl.
   Bleibt hell: nur das Diagramm braucht den dunklen Grund, diese Zahl nicht. */
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: var(--s-9);
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.stat__value {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: proportional-nums;
  white-space: nowrap;
}
.stat__label { font-size: var(--step-lead); color: var(--slate); text-wrap: pretty; }
.section--mist .stat { background: var(--paper); }

/* --- Team (Über uns) ---------------------------------------------------- */
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.team-card {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.team-card__media { aspect-ratio: 4 / 5; background: var(--mist); overflow: hidden; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Ohne Foto: das Chevron aus dem Logo trägt die Fläche, kein Platzhalter-Avatar. */
.team-card__media--leer {
  display: grid;
  place-items: center;
  background: var(--mist);
  color: rgba(20, 23, 26, .12);
}
.team-card__media--leer svg { width: 54px; height: 54px; }
.team-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.team-card__body h3 { margin-bottom: 6px; }
.team-card__body p { font-size: .9rem; color: var(--muted); text-wrap: pretty; }

/* --- Partnerbetriebe ---------------------------------------------------- */
.partner__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner-card h3 { text-wrap: balance; }
.partner-card > p { font-size: .92rem; color: var(--muted); flex: 1; text-wrap: pretty; }
.partner-card dl { margin: 0; border-top: 1px solid var(--line-soft); padding-top: var(--s-5); }
.partner-card dt {
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.partner-card dd { margin: 3px 0 var(--s-4); font-size: .9rem; color: var(--ink); }
.partner-card dd:last-child { margin-bottom: 0; }
.partner-card__seit {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .74rem;
  color: var(--ink);
  background: var(--lime);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}

/* --- Aufklappbare Blöcke (Investoren: Analyse / Umsetzung / Mehrwert) ---- */
.stack { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-8); }
.stack__item {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
}
.stack__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.stack__head .faq-item__icon { background: var(--mist); }
.stack__head[aria-expanded='true'] .faq-item__icon { transform: rotate(90deg); background: var(--lime); }
.stack__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.stack__head[aria-expanded='true'] + .stack__body { grid-template-rows: 1fr; }
.stack__body > div { overflow: hidden; }
.stack__body ul { padding: 0 var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: 12px; }
.stack__body li { display: flex; gap: 12px; font-size: .95rem; color: var(--muted); text-wrap: pretty; }
.stack__body li svg { width: 8px; height: 8px; margin-top: 8px; color: var(--lime); flex: none; }

/* --- Magazin-Übersicht -------------------------------------------------- */
.mag-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-8);
}
.mag-list__meta {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Archiv: 132 Beiträge als Zeilen — Datum, Titel, Chevron. Kein Bild pro
   Zeile, sonst wird die Seite zur Bilderflut. */
.archiv__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: padding-left .25s var(--ease), background .2s var(--ease);
}
.archiv__row:hover { padding-left: var(--s-4); background: rgba(255, 255, 255, .55); }
.archiv__datum {
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.archiv__titel { font-size: .96rem; color: var(--ink); text-wrap: pretty; }
.archiv__chev { color: var(--muted); transition: transform .25s var(--ease), color .2s var(--ease); }
.archiv__chev svg { width: 8px; height: 8px; }
.archiv__row:hover .archiv__chev { transform: translateX(4px); color: var(--ink); }

/* Hinweis-Fußnote */
.disclaimer {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Scroll-Reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .site-header .btn { display: none; }
  .nav-toggle { display: block; }
  .hero__inner,
  .intro__grid,
  .services__grid,
  .faq__grid,
  .form__grid,
  .page-hero__inner,
  .scale-card,
  .leistung,
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .services__aside { position: static; }
  .why__grid, .mag__grid, .pledges, .team__grid, .partner__grid, .mag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { grid-template-columns: minmax(0, 1fr); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-7); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__actions { justify-content: flex-start; }
  .leistung:nth-of-type(even) .leistung__media { order: 0; }
  .scale-card { margin-top: -48px; }
}

@media (max-width: 720px) {
  .services__cards, .why__grid, .mag__grid, .refs__grid, .pledges,
  .team__grid, .partner__grid, .mag-list { grid-template-columns: minmax(0, 1fr); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .archiv__row { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px; }
  .archiv__datum { grid-column: 1 / -1; }
  .service-card--wide { flex-direction: column; }
  .service-card--wide .service-card__media { flex: none; aspect-ratio: 4 / 3; }
  .service-card--wide .service-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 88vh; }
  /* Auf schmalen Schirmen dürfen Buttons umbrechen statt zu überlaufen. */
  .btn { white-space: normal; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .scale__bands { gap: 3px; }
  .chart__row { grid-template-columns: 22px minmax(0, 1fr) 56px; gap: 10px; }
  .chart__val { font-size: .68rem; }
  .scale__band { height: 48px; font-size: .7rem; }
  .trust__list img { height: 34px; }
}

/* --- Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .scale__knob { transition: none; }
}

/* --- Karriere: Textlinks nebeneinander -------------------------------- */
.karriere-links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }

/* --- Bewerbungsformular: einspaltiges Raster, mittig begrenzt --------- */
.form__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }

/* --- Datei-Upload (Bewerbungsformular) ------------------------------- */
.upload { display: flex; flex-direction: column; gap: 12px; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload__zone {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--mist);
  padding: var(--s-6);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload__zone:hover { border-color: var(--ink); }
.upload__zone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.upload__zone.is-over { border-color: var(--ink); background: #fff; }
.upload__link { text-decoration: underline; font-weight: 600; }
.upload__list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.upload__file { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: .92rem; }
.upload__file span { overflow-wrap: anywhere; }
.upload__remove { border: 0; background: none; cursor: pointer; font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .04em; text-decoration: underline; color: var(--muted); flex: none; }
.upload__remove:hover { color: var(--ink); }
.upload__hint { font-size: .82rem; color: var(--muted); }

/* --- Prozess mit genau drei Schritten -------------------------------- */
/* Eigenes 3-Spalten-Raster (höhere Spezifität als .process), damit die
   allgemeinen .process-Umbrüche bei 1080/720 px nicht dazwischenfunken.
   Auf Mobil gestapelt. */
.process--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .process--drei { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kopf-CTA nur zeigen, wenn der Kopf breit genug ist --------------- */
/* Mit acht Navigationspunkten passt der „Kostenfreies Erstgespräch"-Button
   erst ab ~1360 px neben die Navigation. Darunter (Navigation weiter
   sichtbar, „Kontakt" steht in der Leiste) wird der redundante Button
   ausgeblendet, statt abgeschnitten zu werden. Unter 1080 px übernimmt das
   Burger-Menü (dort liegt der CTA im aufgeklappten Menü). */
@media (max-width: 1359px) {
  .site-header .btn { display: none; }
}

/* --- Rechtstexte (Impressum, Datenschutz) ---------------------------------
   Schlichte Lesespalte. Der Basis-Reset nimmt Absätzen und Listen ihre
   Abstände — im Fließtext geben wir sie gezielt zurück. */
.legal { max-width: 46rem; }
.legal > * + * { margin-top: var(--s-4); }
.legal h2 {
  margin-top: var(--s-8);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -.008em;
}
.legal > h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--slate); text-wrap: pretty; }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(20, 23, 26, .32);
  transition: text-decoration-color .18s var(--ease);
}
.legal a:hover { text-decoration-color: var(--lime-deep); }
.legal ul {
  list-style: disc;
  padding-left: 1.35em;
  margin-top: var(--s-3);
}
.legal li + li { margin-top: var(--s-2); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__stand {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: .82rem;
  color: var(--muted);
}

/* --- Magazin-Artikel -------------------------------------------------- */
.article-header { padding-top: var(--section-y); }
.article-header .eyebrow { margin-bottom: var(--s-4); }
.article-header h1 { max-width: 20ch; }
.article__meta { margin-top: var(--s-4); font-family: var(--ff-mono); font-size: .82rem; color: var(--muted); }
.article-hero { margin-top: var(--s-6); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article { max-width: 46rem; margin-top: var(--s-7); }
.article > * + * { margin-top: var(--s-4); }
.article h2 { margin-top: var(--s-8); font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.article h3 { margin-top: var(--s-6); }
.article p, .article li { color: var(--slate); text-wrap: pretty; }
.article ul { list-style: disc; padding-left: 1.35em; margin-top: var(--s-3); }
.article li + li { margin-top: var(--s-2); }
.article-more { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.article-back { display: inline-block; margin-top: var(--s-7); font-family: var(--ff-mono); font-size: .85rem; }