@charset "UTF-8";
/* ==========================================================================
   Klimt Energieberatung — Design-System
   Konzept „Morgenlicht & Messwert": warmes Papier + Instrumenten-Präzision.
   Archivo für alles: Semibold (620) in den Überschriften, Regular im Text.
   ========================================================================== */

/* --- Schriften (selbst gehostet, DSGVO-konform) ---------------------------
   Eine Schrift, zwei Rollen: Archivo ist eine sachliche Grotesk mit
   tabellarischen Ziffern — passend für Messwerte, Fördersätze und
   Gutachtenzahlen. Kundenentscheid vom 30.07.2026 (Variante D aus dem
   Schriftvergleich); die frühere Serifenschrift Source Serif 4 ist damit
   entfallen, siehe Block am Dateiende. Lizenz: OFL, siehe
   assets/fonts/LIZENZEN.txt. Variable Achse auf wght 400–700 beschnitten.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Farben */
  --paper: #f7f6f2;
  --paper-2: #efece3;
  --paper-3: #e5e1d5;
  --ink: #22261f;
  --ink-soft: #3a3a3a;
  --muted: #6b6e66;
  --green: #3d8b37;
  --green-bright: #6ab04c;
  --green-deep: #26522a;
  --green-wash: #eef3e9;
  --amber: #d9822b;
  --amber-wash: #fbf1e4;
  --thermal: #2a2438; /* entsättigt (vorher #2b2450): Unterton statt Lila-Block, das Wärmebild-Foto trägt die Farbe */
  --thermal-2: #4b3d7a;
  --line: rgba(34, 38, 31, 0.14);
  --line-soft: rgba(34, 38, 31, 0.08);
  --line-dark: rgba(247, 246, 242, 0.16);

  /* Typografie */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: var(--sans);

  --t-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
  --t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.094rem);
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.313rem);
  --t-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.42rem + 1.55vw, 2.8rem);
  --t-3xl: clamp(2.1rem, 1.35rem + 3.2vw, 4rem);
  /* Steile Kurve: die Zeile „Ich zeige Ihnen, wo." läuft im Hero mit
     white-space:nowrap. Sie muss auf 320-px-Displays passen (min 2rem) und
     bei voller Shell-Breite unter 1240 px bleiben (max 5.4rem ≈ 760 px). */
  --t-4xl: clamp(2rem, 0.7rem + 6.2vw, 5.4rem);

  /* Raster & Abstände */
  --shell: 1240px;
  --shell-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: clamp(3rem, 1.9rem + 4.6vw, 6rem);
  --s-7: clamp(4.25rem, 2.6rem + 7.1vw, 9rem);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;

  /* Isothermen-Muster (Markenmotiv „Wärmebild"): dezente Höhenlinien als
     Hintergrund. Zwei Varianten — Tinte auf Papier, Papier auf Dunkel. */
  --contours-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='none' stroke='%2322261f' stroke-opacity='.05' stroke-width='1'%3E%3Cellipse cx='450' cy='150' rx='42' ry='34' transform='rotate(-14 450 150)'/%3E%3Cellipse cx='442' cy='158' rx='84' ry='66' transform='rotate(-12 442 158)'/%3E%3Cellipse cx='434' cy='166' rx='128' ry='100' transform='rotate(-9 434 166)'/%3E%3Cellipse cx='428' cy='174' rx='174' ry='138' transform='rotate(-6 428 174)'/%3E%3Cellipse cx='422' cy='182' rx='222' ry='178' transform='rotate(-3 422 182)'/%3E%3Cellipse cx='130' cy='500' rx='36' ry='28' transform='rotate(18 130 500)'/%3E%3Cellipse cx='138' cy='492' rx='74' ry='58' transform='rotate(15 138 492)'/%3E%3Cellipse cx='146' cy='484' rx='116' ry='92' transform='rotate(12 146 484)'/%3E%3C/g%3E%3C/svg%3E");
  --contours-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='none' stroke='%23f7f6f2' stroke-opacity='.05' stroke-width='1'%3E%3Cellipse cx='450' cy='150' rx='42' ry='34' transform='rotate(-14 450 150)'/%3E%3Cellipse cx='442' cy='158' rx='84' ry='66' transform='rotate(-12 442 158)'/%3E%3Cellipse cx='434' cy='166' rx='128' ry='100' transform='rotate(-9 434 166)'/%3E%3Cellipse cx='428' cy='174' rx='174' ry='138' transform='rotate(-6 428 174)'/%3E%3Cellipse cx='422' cy='182' rx='222' ry='178' transform='rotate(-3 422 182)'/%3E%3Cellipse cx='130' cy='500' rx='36' ry='28' transform='rotate(18 130 500)'/%3E%3Cellipse cx='138' cy='492' rx='74' ry='58' transform='rotate(15 138 492)'/%3E%3Cellipse cx='146' cy='484' rx='116' ry='92' transform='rotate(12 146 484)'/%3E%3C/g%3E%3C/svg%3E");

  --radius: 3px;
  --radius-lg: 6px;
  --shadow-1: 0 1px 2px rgba(34, 38, 31, 0.06), 0 6px 20px -12px rgba(34, 38, 31, 0.22);
  --shadow-2: 0 2px 4px rgba(34, 38, 31, 0.05), 0 24px 50px -28px rgba(34, 38, 31, 0.4);
}

/* --- Reset & Basis -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.09;
  letter-spacing: -0.013em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Deutsche Komposita („Zuwendungsbescheid", „Datenschutzerklärung") sind
   breiter als so manche Überschriftenspalte — und zwar auf jedem Display,
   nicht nur auf dem Handy. Ohne Silbentrennung greift dann das
   overflow-wrap von oben und bricht mitten im Wort, ohne Trennstrich. */
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.16; }
h4 { font-size: var(--t-lg); line-height: 1.25; }
p { text-wrap: pretty; }
::selection { background: var(--green-bright); color: #fff; }

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

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-sm);
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* Feines Papierkorn über der ganzen Seite */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* --- Layout --------------------------------------------------------------- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}
.shell-narrow { width: min(100% - var(--gutter) * 2, var(--shell-narrow)); margin-inline: auto; }
.section { padding-block: var(--s-7); position: relative; }

/* Kapitelziffern: riesige, fast unsichtbare Serifenzahlen oben rechts geben
   der Seite einen redaktionellen Rhythmus. Dekorativ, daher aria-hidden. */
.ghost-num {
  position: absolute;
  top: clamp(0.5rem, 2.5vw, 2.25rem);
  right: clamp(0.75rem, 3vw, 3rem);
  z-index: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 2.4rem + 10.5vw, 13rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.section--dark .ghost-num, .section--thermal .ghost-num { color: #fff; opacity: 0.07; }
.section--tight { padding-block: var(--s-6); }
/* Dunkle Sektionen definieren Sekundärfarbe und Linien neu — dadurch erben
   alle Bausteine (Fließtext, Bildunterschriften, Tabellen) automatisch
   ausreichenden Kontrast, ohne dass jede Regel doppelt gepflegt wird. */
.section--dark {
  background: var(--ink);
  color: var(--paper);
  --muted: rgba(247, 246, 242, 0.72);
  --line: rgba(247, 246, 242, 0.16);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--thermal {
  background: var(--thermal);
  color: #efeaff;
  --muted: rgba(239, 234, 255, 0.76);
  --line: rgba(239, 234, 255, 0.18);
  position: relative;
}
.section--thermal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(52rem 30rem at 50% 55%, rgba(217, 130, 43, 0.1), transparent 65%),
    var(--contours-paper);
  background-size: auto, 44rem;
  /* Muster läuft nach unten aus: im Fußbereich der Sektion (Trennlinie +
     „Messen statt schätzen") würden sich Bögen und Linie sonst stapeln. */
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 84%);
}
.section--thermal > .shell { position: relative; z-index: 1; }
.section--thermal h1, .section--thermal h2, .section--thermal h3 { color: #f6f3ff; }
/* Hinweisboxen behalten ihren hellen Grund und damit ihre eigenen Farben. */
.section--dark .note, .section--thermal .note { --muted: var(--ink-soft); }
.divider { height: 1px; background: var(--line); border: 0; }

/* --- Auszeichnungen -------------------------------------------------------
   Achtung: .eyebrow ist ein <p>. Jede Container-Regel der Form „.xyz p"
   ist spezifischer als „.eyebrow" und würde Größe und Farbe überschreiben.
   Solche Regeln deshalb konsequent mit :not(.eyebrow) schreiben.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  margin-top: 0.62em;
  background: var(--green-bright);
  flex: none;
}
.section--dark .eyebrow, .section--thermal .eyebrow { color: var(--green-bright); }
.eyebrow--num::before { display: none; }
.eyebrow--num { gap: 0.9rem; }

.section-head {
  display: grid;
  gap: var(--s-3);
  max-width: 46rem;
  margin-bottom: var(--s-5);
}
.section-head p:not(.eyebrow) { color: var(--muted); font-size: var(--t-lg); line-height: 1.55; }
.section--dark .section-head p:not(.eyebrow),
.section--thermal .section-head p:not(.eyebrow) { color: rgba(247, 246, 242, 0.72); }

.lead { font-size: var(--t-lg); color: var(--muted); }
.section--dark .lead { color: rgba(247, 246, 242, 0.74); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform 160ms var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); box-shadow: none; }
.section--dark .btn--ghost, .section--thermal .btn--ghost {
  --btn-fg: var(--paper);
  border-color: var(--line-dark);
}
.section--dark .btn--ghost:hover { border-color: var(--paper); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--light:hover { background: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 139, 55, 0.35);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--green); border-color: var(--green); }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--green-bright); border-color: rgba(106, 176, 76, 0.4); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(247, 246, 242, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(247, 246, 242, 0.94); }
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 4.75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand img { width: 2.6rem; height: auto; }
.brand-type { display: grid; line-height: 1; }
.brand-type b {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
}
.brand-type span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.235em;
  color: var(--muted);
  margin-top: 0.28rem;
}

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav > li { list-style: none; position: relative; }
.nav a {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--green-deep); background: rgba(61, 139, 55, 0.07); }
.nav a[aria-current='page'] { color: var(--green-deep); }
.nav a[aria-current='page']::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--green-bright);
  margin-top: 0.2rem;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  background: none;
  border: 0;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-toggle:hover, .nav-toggle[aria-expanded='true'] { color: var(--green-deep); background: rgba(61, 139, 55, 0.07); }
.nav-toggle svg { transition: transform var(--dur) var(--ease); }
.nav-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -0.5rem;
  min-width: 21rem;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
.nav-toggle[aria-expanded='true'] + .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
}
.submenu a span { font-size: var(--t-xs); color: var(--muted); font-weight: 400; line-height: 1.4; }
.submenu a:hover span { color: var(--muted); }

.header-cta { flex: none; }
.burger {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 260ms var(--ease), opacity 160ms var(--ease);
}
.burger span:nth-child(1) { top: 1rem; }
.burger span:nth-child(2) { top: 1.4rem; }
.burger span:nth-child(3) { top: 1.8rem; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translate(-50%, 0.4rem) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translate(-50%, -0.4rem) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 4.75rem 0 0;
  z-index: 490;
  background: var(--paper);
  padding: var(--s-4) var(--gutter) var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--display);
  font-size: 1.4rem;
  text-decoration: none;
}
.mobile-nav .sub { padding-left: 0.9rem; border-left: 2px solid var(--green-wash); margin-bottom: 0.9rem; }
.mobile-nav .sub a { font-family: var(--sans); font-size: 0.98rem; padding: 0.5rem 0; color: var(--muted); }
.mobile-nav .btn { width: 100%; margin-top: var(--s-3); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(0.75rem, 2.6vw, 2.75rem); overflow: hidden; }
/* Morgenlicht + Isothermen: warmer Schein hinter der Headline, darüber das
   Höhenlinien-Muster — beides läuft nach unten aus, bevor die Trustbar kommt. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(46rem 30rem at 10% -8%, rgba(106, 176, 76, 0.09), transparent 62%),
    var(--contours-ink);
  background-size: auto, 40rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}
.hero > .shell { position: relative; z-index: 1; }
/* Editorial-Aufbau: Headline läuft über die volle Breite, darunter teilen
   sich Lead-Text und ein größeres Bild die Zeile. Beim Laden treten die
   Elemente gestaffelt auf (rise), das Bild blendet leicht skaliert ein. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroMedia {
  from { opacity: 0; transform: scale(0.975) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero-head {
  display: grid;
  gap: var(--s-3);
  padding-top: clamp(0.75rem, 2.6vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3.6vw, 3.25rem);
}
.hero-head .eyebrow { animation: rise 0.7s var(--ease-out) both; }
.hero-head h1 { animation: rise 0.8s 0.1s var(--ease-out) both; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}
.hero-copy {
  display: grid;
  gap: var(--s-3);
  max-width: 33rem;
  padding-bottom: clamp(0.5rem, 1.6vw, 1.5rem);
}
.hero-copy > * { animation: rise 0.7s 0.22s var(--ease-out) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.32s; }
.hero-media { animation: heroMedia 0.9s 0.26s var(--ease-out) both; }
.hero h1 { font-size: var(--t-4xl); font-weight: 400; letter-spacing: -0.025em; line-height: 1.03; }
.hero h1 em {
  font-style: normal;
  color: var(--green);
  position: relative;
  white-space: nowrap;
}
/* „Wärme" als Farbverlauf: vom Klimt-Grün ins Thermal-Amber. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 em {
    background: linear-gradient(93deg, var(--green-deep) 4%, var(--green) 42%, var(--amber) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.09em;
  background: var(--green-bright);
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 900ms 600ms var(--ease-out) forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
/* :not(.eyebrow) ist Absicht: die Auszeichnungszeile ist ein <p> und würde
   sonst von dieser Regel überschrieben (höhere Spezifität als .eyebrow). */
.hero p:not(.eyebrow) { font-size: var(--t-lg); line-height: 1.5; color: var(--muted); max-width: 32rem; }
.hero .btn-row { margin-top: var(--s-2); }

.hero-media { position: relative; align-self: center; }
.hero-shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #8a8577;
  box-shadow: var(--shadow-2);
}
.hero-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Leichte Abdunklung am unteren Rand erdet das Foto und hebt den Chip. */
.hero-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(34, 38, 31, 0.2), transparent 38%);
}
.hero-chip {
  position: absolute;
  left: clamp(-3.5rem, -4vw, -1.5rem);
  bottom: -1.6rem;
  width: clamp(9rem, 15vw, 12.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 5px solid var(--paper);
  box-shadow: var(--shadow-2);
  background: var(--thermal);
}
.hero-chip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-chip figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.55rem 0.6rem 0.45rem;
  background: linear-gradient(to top, rgba(20, 16, 40, 0.9), transparent);
  color: #fff;
  /* Muss einzeilig bleiben — auf schmalen Displays ist die Karte nur 9rem breit. */
  font-size: clamp(0.56rem, 0.44rem + 0.32vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Vertrauensleiste unter dem Hero */
.trustbar {
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  margin-top: var(--s-5);
}
/* Raster statt Flexbox: vier Punkte passen nie in eine Zeile, im Flex-Umbruch
   bleibt sonst ein einzelner Punkt allein auf der zweiten Zeile stehen. */
.trustbar ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.7rem var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.trustbar li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
}
.trustbar li svg { margin-top: 0.12em; }
.trustbar svg { color: var(--green); flex: none; }

/* --- Leistungs-Laufband ----------------------------------------------------
   Konturschrift, die langsam durchläuft — zwei identische Hälften, die
   Animation verschiebt um exakt 50 %, dadurch ist die Schleife nahtlos. */
.ticker { overflow: hidden; padding-block: clamp(0.85rem, 1.7vw, 1.25rem); }
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 52s linear infinite;
}
.ticker-half { display: flex; align-items: baseline; white-space: nowrap; }
.ticker-half span {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(34, 38, 31, 0.22);
  margin-right: 1.2rem;
}
@supports (-webkit-text-stroke: 1px black) {
  .ticker-half span {
    color: transparent;
    -webkit-text-stroke: 0.75px rgba(34, 38, 31, 0.38);
  }
}
.ticker-half i {
  font-style: normal;
  color: var(--green-bright);
  font-size: 0.85rem;
  margin-right: 1.2rem;
  align-self: center;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --- Lesefortschritt -------------------------------------------------------
   Haarfeiner Balken an der Oberkante, im Markenverlauf Grün → Amber.
   Wird von site.js über transform: scaleX() gesteuert. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  z-index: 600;
  background: linear-gradient(90deg, var(--green-deep), var(--green) 55%, var(--amber));
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

/* --- Kennzahlen ----------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--paper); padding: var(--s-3) var(--s-3) var(--s-4); }
.section--dark .stats { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .stat { background: var(--ink); }
.stat { padding: var(--s-4) var(--s-3); }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.section--dark .stat b { color: var(--green-bright); }
.stat > span { display: block; margin-top: 0.7rem; font-size: var(--t-sm); color: var(--muted); }
.section--dark .stat > span { color: rgba(247, 246, 242, 0.65); }
/* Die Null-Euro-Zahl ist die Pointe der Sektion — sie warnt in Amber. */
.stat--warn b, .section--dark .stat--warn b { color: var(--amber); }
/* Kontext-Label über der Zahl + Mini-Balken darunter: aus der Zahlenreihe
   wird eine ablesbare Skala. Balken füllen sich mit dem Reveal. */
.stat-label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat--warn .stat-label { color: var(--amber); }
.stat-bar {
  display: block;
  height: 4px;
  margin-top: 1rem;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}
.stat-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--green);
  transition: width 1100ms var(--ease-out) 300ms;
}
.section--dark .stat-bar i { background: var(--green-bright); }
.stat--warn .stat-bar i, .section--dark .stat--warn .stat-bar i { background: var(--amber); }
[data-reveal].is-in .stat-bar i { width: var(--w, 0%); }

/* --- Leistungskarten ------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: rgba(61, 139, 55, 0.45); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.card-media { overflow: hidden; background: var(--paper-3); position: relative; }
/* Laufende Nummer auf dem Kartenbild — „Sieben Bausteine", durchgezählt. */
.card-num {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  padding: 0.3rem 0.5rem 0.24rem;
  background: rgba(247, 246, 242, 0.92);
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.035); }
.card-body { display: grid; gap: 0.6rem; padding: var(--s-3) var(--s-3) var(--s-3); flex: 1; }
.card-body h3 { font-size: var(--t-lg); }
.card-body p { font-size: var(--t-sm); color: var(--muted); }
/* „Mehr erfahren" als Fußzeile der Karte: Hairline oben, Pfeil rechtsbündig —
   gibt allen Karten eine gemeinsame, ruhige Unterkante. */
.card-body .link-arrow {
  margin-top: auto;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
  padding-bottom: 0;
}
.card:hover .link-arrow { color: var(--green); }
.card:hover .link-arrow svg { transform: translateX(3px); }
.card a.stretch::after { content: ''; position: absolute; inset: 0; }
/* Kernleistung: grüne Akzentkante auf der breiten Bühne. */
.cards--lead .card:first-child { border-top: 3px solid var(--green); }
.card-tag {
  justify-self: start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-wash);
  padding: 0.28rem 0.55rem;
  border-radius: 100px;
}

/* Leit-Raster: Bei sieben Karten blieb die letzte allein in ihrer Zeile.
   Die erste Leistung (Kernangebot) läuft deshalb als breite Bühne über die
   volle Zeile — darunter gehen 3 + 3 sauber auf. */
@media (min-width: 48rem) {
  .cards--lead .card:first-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .cards--lead .card:first-child .card-media { width: 50%; flex: none; }
  .cards--lead .card:first-child .card-media img { height: 100%; aspect-ratio: auto; }
  .cards--lead .card:first-child .card-body {
    padding: var(--s-4) clamp(var(--s-3), 4vw, var(--s-5));
    align-content: center;
    gap: 0.8rem;
  }
  .cards--lead .card:first-child h3 { font-size: var(--t-xl); }
  .cards--lead .card:first-child p { font-size: var(--t-base); max-width: 40rem; }
}

/* --- Vergleichs-Slider („Der Klimt-Scan") --------------------------------- */
.compare {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--thermal);
  box-shadow: var(--shadow-2);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.compare img { width: 100%; display: block; pointer-events: none; }
.compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.compare-after img { width: 100%; height: 100%; object-fit: cover; }
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--green-bright);
  box-shadow: 0 0 0 1px rgba(20, 16, 40, 0.35), 0 0 26px 3px rgba(106, 176, 76, 0.55);
  pointer-events: none;
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  translate: -50% -50%;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--green-bright);
  box-shadow: 0 6px 24px rgba(20, 16, 40, 0.45);
  cursor: ew-resize;
  transition: scale 200ms var(--ease);
}
.compare:hover .compare-handle, .compare-handle:focus-visible { scale: 1.07; }
.compare-handle svg { color: var(--green-deep); pointer-events: none; }
.compare-label {
  position: absolute;
  top: 0.9rem;
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  background: rgba(20, 16, 40, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.compare-label--l { left: 0.9rem; }
.compare-label--r { right: 0.9rem; }
.compare-hint {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  translate: -50% 0;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: rgba(20, 16, 40, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.7rem;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.compare.is-touched .compare-hint { opacity: 0; }
.compare-figure { margin: 0; display: grid; gap: var(--s-2); }
.compare-figure figcaption { font-size: var(--t-sm); color: var(--muted); }
.section--thermal .compare-figure figcaption { color: rgba(239, 234, 255, 0.7); }
/* Alleinstehende Slider liefen bisher über die volle Shell (1240 px) und
   wurden dabei höher als ein Bildschirm. Gedeckelt und zentriert bleiben sie
   das größte Element der Seite — ohne zu erschlagen. */
.compare-figure--wide { max-width: 64rem; margin-inline: auto; width: 100%; }

/* --- Instrumenten-Rahmen um den Klimt-Scan --------------------------------
   Messgeräte-Chrome: schmale Kopfleiste mit Beschriftung, darunter der
   Slider, darüber vier Sucher-Ecken. Reines Dekor (aria-hidden). */
.scan-frame { position: relative; }
.scan-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.55rem 1rem 0.5rem;
  background: rgba(20, 16, 40, 0.55);
  border: 1px solid rgba(239, 234, 255, 0.16);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239, 234, 255, 0.72);
}
.scan-bar b { color: var(--green-bright); font-weight: 700; }
.scan-frame .compare { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.scan-corners {
  position: absolute;
  inset: -7px;
  pointer-events: none;
  --c: rgba(239, 234, 255, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) left top / 1.4rem 2px,
    linear-gradient(var(--c), var(--c)) left top / 2px 1.4rem,
    linear-gradient(var(--c), var(--c)) right top / 1.4rem 2px,
    linear-gradient(var(--c), var(--c)) right top / 2px 1.4rem,
    linear-gradient(var(--c), var(--c)) left bottom / 1.4rem 2px,
    linear-gradient(var(--c), var(--c)) left bottom / 2px 1.4rem,
    linear-gradient(var(--c), var(--c)) right bottom / 1.4rem 2px,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 1.4rem;
  background-repeat: no-repeat;
}
@media (max-width: 46rem) {
  .scan-bar { letter-spacing: 0.1em; font-size: 0.56rem; }
  .scan-bar span:last-child { display: none; }
}

/* Messpunkt-Marker auf dem Wärmebild */
.scan-points { list-style: none; padding: 0; margin: 0; }
.scan-points li {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(20, 16, 40, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.compare.reveal-points .scan-points li { opacity: 1; }
.scan-points i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ffd27d;
  box-shadow: 0 0 0 3px rgba(255, 210, 125, 0.3), 0 0 12px 2px rgba(255, 170, 60, 0.9);
  flex: none;
}

/* --- Prozess-Schritte ----------------------------------------------------- */
.steps { display: grid; gap: var(--s-5); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  position: relative;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }

/* Timeline-Variante: durchgehende Linie links, grüne Marker je Schritt.
   Der Lichthof um den Punkt „stanzt" die Linie aus — Farbe muss zur
   Sektionsfläche passen (Standard Papier, --steps-halo überschreibt). */
.steps--line {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
}
.steps--line .step { border-bottom: 0; padding-bottom: 0; }
.steps--line .step::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.4rem, 3vw, 2.4rem) * -1);
  top: 0.55rem;
  translate: -50% 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 5px var(--steps-halo, var(--paper));
}
.section--paper2 .steps--line { --steps-halo: var(--paper-2); }
.step-num {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 0.9;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.step-num small { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.35; color: var(--muted); margin-top: 0.4rem; }
.step-body { display: grid; gap: 0.6rem; }
.step-body p { color: var(--muted); max-width: 42rem; }
.step-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); margin-top: var(--s-2); }
.step-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Variante mit Bild rechts neben dem Text (Ablauf-Seite) */
.step-body--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.step-text { display: grid; gap: 0.6rem; }
.step-text p { color: var(--muted); }
.step-body--split .step-media { margin-top: 0.35rem; }
@media (max-width: 62rem) {
  .step-body--split { grid-template-columns: minmax(0, 1fr); }
  .step-body--split .step-media { max-width: 34rem; }
}

/* --- Split-Sektion (Text ⟷ Bild) ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split-copy { display: grid; gap: var(--s-3); max-width: 38rem; }
.split-copy p:not(.eyebrow) { color: var(--muted); }
.split-media { position: relative; }
/* Split-Bilder auf ein ruhiges Querformat beschnitten: quadratische und
   hochformatige Quellen machten die Bildspalte sonst deutlich höher als den
   Text daneben („großes Bild, zwei Sätze"). */
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}
.split--flip .split-media { order: -1; }
@media (max-width: 60rem) { .split--flip .split-media { order: 0; } }

/* Hochformat-Variante (Porträts): schmaler, zentriert, mit Passepartout. */
.split-media--tall { max-width: min(26rem, 100%); justify-self: center; }
.split-media--tall img { aspect-ratio: 4 / 5; }

/* Lange Begleitspalten (z. B. Schrittlisten) laufen an der kurzen Textspalte
   vorbei — die bleibt dann im Blick, statt oben zu verwaisen. */
@media (min-width: 62rem) {
  .split--sticky { align-items: start; }
  .split--sticky .split-copy { position: sticky; top: 7rem; }
}

.figure { margin: 0; display: grid; gap: 0.7rem; }
.figure img { border-radius: var(--radius-lg); background: var(--paper-3); }
.figure figcaption { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }

/* --- Porträt mit Passepartout und Namensschild ---------------------------- */
.portrait-frame { position: relative; margin: 0; }
.portrait-frame::before {
  content: '';
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  background: var(--paper-3);
  border-radius: var(--radius-lg);
}
.portrait-frame img { position: relative; box-shadow: var(--shadow-2); }
.portrait-frame figcaption {
  position: absolute;
  left: -0.9rem;
  bottom: 1.4rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 1rem 0.55rem;
  background: var(--paper);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-1);
}
.portrait-frame figcaption b { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.portrait-frame figcaption span { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.04em; }

/* --- Kompakte Schlusszeile unter dem Scan-Slider -------------------------- */
.thermal-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  max-width: 64rem;
  margin: var(--s-5) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.thermal-note h3 { margin-bottom: 0.5rem; }
.thermal-note p { color: var(--muted); max-width: 44rem; }
@media (max-width: 48rem) { .thermal-note { grid-template-columns: minmax(0, 1fr); } }

/* --- Listen -------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start; }
.ticks li::before {
  content: '';
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.24rem;
  border-radius: 50%;
  background: var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d8b37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.section--dark .ticks li::before { background-color: rgba(106, 176, 76, 0.16); }
.ticks--tight { gap: 0.45rem; font-size: var(--t-sm); }

.facts { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 1.4fr);
  gap: var(--s-2);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
}
.facts dt svg { flex: none; color: var(--green); }
.facts dd { margin: 0; font-size: var(--t-sm); }
.section--dark .facts, .section--dark .facts > div { border-color: var(--line-dark); }
.section--dark .facts dt { color: rgba(247, 246, 242, 0.6); }

/* --- Hinweisboxen --------------------------------------------------------- */
.note {
  display: grid;
  gap: 0.4rem;
  padding: var(--s-3);
  border-left: 3px solid var(--green);
  background: var(--green-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
}
.note b { font-weight: 600; }
.note--amber { border-left-color: var(--amber); background: var(--amber-wash); }
.note--plain { border-left-color: var(--line); background: var(--paper-2); }
.note p { color: var(--ink-soft); }

/* --- Energieklassen-Skala (Markenmotiv) ----------------------------------- */
.scale { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.scale li {
  display: grid;
  grid-template-columns: 62% minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.scale i {
  height: 1.45rem;
  border-radius: 2px 100px 100px 2px;
  display: flex;
  align-items: center;
  padding-left: 0.6rem;
  font-style: normal;
  letter-spacing: 0.05em;
}
.scale span {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.scale li.is-active { position: relative; }
.scale li.is-active::after {
  content: '';
  position: absolute;
  left: -0.75rem;
  width: 0;
  height: 0;
  border: 0.35rem solid transparent;
  border-left-color: var(--ink);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 1.15rem 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.28;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-deep); }
.faq summary::after {
  content: '';
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.22rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8b37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-answer { padding-bottom: 1.35rem; max-width: 46rem; display: grid; gap: 0.8rem; }
.faq-answer p, .faq-answer li { color: var(--muted); font-size: var(--t-sm); }

/* --- Formular ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(34, 38, 31, 0.28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 139, 55, 0.16);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); }
.field-error { font-size: var(--t-xs); color: #b3261e; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.field.has-error .field-error { display: block; }
.check { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; align-items: start; font-size: var(--t-xs); color: var(--muted); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--green); }
.check a { color: var(--green-deep); }
.form-status { font-size: var(--t-sm); padding: var(--s-2) var(--s-3); border-radius: var(--radius); display: none; }
.form-status.is-visible { display: block; }
.form-status[data-state='ok'] { background: var(--green-wash); color: var(--green-deep); }
.form-status[data-state='err'] { background: #fdecea; color: #8c1d18; }

/* --- Förderrechner -------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.calc-controls { display: grid; gap: var(--s-3); align-content: start; }
.calc-out { display: grid; gap: var(--s-3); align-content: start; }
.calc-total {
  padding: var(--s-3);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0.35rem;
}
.calc-total b {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green-bright);
  font-variant-numeric: tabular-nums;
}
.calc-total span { font-size: var(--t-xs); color: rgba(247, 246, 242, 0.7); }
.calc-bars { display: grid; gap: 0.55rem; margin: 0; }
.calc-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; align-items: center; }
.calc-bars dt { font-size: var(--t-xs); color: var(--muted); }
.calc-bars dd { margin: 0; font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-bars .bar { grid-column: 1 / -1; height: 5px; border-radius: 100px; background: var(--paper-3); overflow: hidden; }
.calc-bars .bar i { display: block; height: 100%; background: var(--green); border-radius: 100px; transition: width 500ms var(--ease-out); }
.calc-bars .bar.is-off i { background: var(--paper-3); }
.calc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.calc legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: 0.3rem; }

/* --- Zitat / Aussage ------------------------------------------------------ */
.quote {
  display: grid;
  gap: var(--s-3);
  max-width: 44rem;
}
.quote blockquote {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.quote cite { font-style: normal; font-size: var(--t-sm); color: var(--muted); display: flex; align-items: center; gap: 0.8rem; }
.quote cite img { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; }
.section--dark .quote cite { color: rgba(247, 246, 242, 0.65); }

/* --- CTA-Band ------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--contours-paper);
  background-size: 44rem;
  background-position: 55% 30%;
}
.cta-band .shell { position: relative; z-index: 1; }
.cta-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-4);
  align-items: center;
}
/* Poster-Format: sehr große Zeile, Telefonnummer als zweite Displayzeile. */
.cta-inner h2 {
  max-width: 17ch;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  letter-spacing: -0.02em;
}
.cta-inner p { color: rgba(247, 246, 242, 0.72); max-width: 34rem; }
.cta-actions { display: grid; gap: var(--s-2); justify-items: start; }
@media (min-width: 60rem) { .cta-actions { justify-items: end; text-align: right; } }
.cta-phone {
  font-family: var(--display);
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  font-variant-numeric: tabular-nums;
}
.cta-phone:hover { border-color: var(--green-bright); color: var(--green-bright); }

/* --- Seitenkopf (Unterseiten) --------------------------------------------- */
.page-hero {
  padding-block: clamp(1.25rem, 3.4vw, 3rem) var(--s-6);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(40rem 26rem at 8% -10%, rgba(106, 176, 76, 0.08), transparent 62%),
    var(--contours-ink);
  background-size: auto, 40rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
}
.page-hero > .shell { position: relative; z-index: 1; }
.page-hero h1 { letter-spacing: -0.022em; }
.page-hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .page-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; } }
.page-hero h1 { max-width: 21ch; }
.page-hero .lead { max-width: 40rem; }
.page-hero-copy { display: grid; gap: var(--s-3); align-content: center; }
.page-hero-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
  box-shadow: var(--shadow-1);
}
.page-hero-media--portrait { max-width: min(24rem, 100%); justify-self: center; }
.page-hero-media--portrait img { aspect-ratio: 4 / 5; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 var(--s-3); font-size: var(--t-xs); color: var(--muted); }
.breadcrumb a { text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--green-deep); border-color: currentColor; }
.breadcrumb li + li::before { content: '›'; margin-right: 0.4rem; color: var(--line); }

/* --- Fließtext (Impressum, Datenschutz) ----------------------------------- */
.prose { max-width: 46rem; display: grid; gap: var(--s-3); }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-4); }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-3); }
.prose p, .prose li { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose a { color: var(--green-deep); }
.prose strong { font-weight: 600; color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */
/* Die Trennlinie oben verhindert, dass CTA-Band und Footer zu einer
   durchgehenden dunklen Fläche verschmelzen. */
.site-footer {
  background: var(--ink);
  color: rgba(247, 246, 242, 0.72);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand { display: grid; gap: var(--s-2); align-content: start; max-width: 22rem; }
.footer-brand img { width: 3.1rem; }
.footer-brand p { font-size: var(--t-sm); }
.site-footer h2 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: rgba(247, 246, 242, 0.72); text-decoration: none; font-size: var(--t-sm); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--green-bright); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: rgba(247, 246, 242, 0.5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer-note { font-size: var(--t-xs); color: rgba(247, 246, 242, 0.45); max-width: 58rem; margin-top: var(--s-3); line-height: 1.6; }

/* --- Scroll-Reveal -------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

/* --- Responsiv ------------------------------------------------------------ */
@media (max-width: 68rem) {
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .hero-copy { max-width: 40rem; padding-bottom: var(--s-3); }
  .hero-chip { left: auto; right: 1rem; bottom: -1.2rem; }
}
@media (max-width: 46rem) {
  html { scroll-padding-top: 5.5rem; }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .step-num { font-size: 1.7rem; display: flex; align-items: baseline; gap: 0.6rem; }
  .step-num small { margin-top: 0; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .compare-handle { width: 2.6rem; height: 2.6rem; }
  .compare-label { font-size: 0.6rem; top: 0.6rem; }
  .compare-label--l { left: 0.6rem; }
  .compare-label--r { right: 0.6rem; }
  .scan-points li { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 em::after { transform: scaleX(1); }
}

@media print {
  .site-header, .mobile-nav, .cta-band, .compare-handle, .burger { display: none !important; }
  body::after { display: none; }
  body { background: #fff; }
}

/* Förderbilanz (Startseite, Sektion 04): Papier-Karte auf dunkler Sektion —
   das Blatt, das der Gutachter hinlegt. Die Balkenspur zitiert die
   Energieausweis-Skala; die 0-€-Zeile bleibt bewusst leer. Die Karte setzt
   --line/--muted auf die Hell-Werte zurück, die die dunkle Sektion überschreibt. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bilanz {
  --line: rgba(34, 38, 31, 0.14);
  --muted: #6b6e66;
  max-width: 64rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.15rem, 3vw, 2.4rem) clamp(1.1rem, 2.4vw, 1.8rem);
}
.bilanz-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem var(--s-3);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.bilanz-title {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.bilanz-stand { color: var(--muted); font-size: var(--t-sm); }
.bilanz-rows { list-style: none; margin: 0; padding: 0; }
.bilanz-rows li { padding: 1.05rem 0 1.15rem; }
.bilanz-rows li + li { border-top: 1px solid var(--line); }
.bilanz-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.bilanz-label { font-weight: 500; }
.bilanz-wert {
  font-family: var(--display);
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--green-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bilanz-wert small {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  margin-right: 0.15rem;
}
.bilanz-bar {
  display: block;
  height: 0.5rem;
  margin-top: 0.7rem;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.bilanz-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--green);
  transition: width 600ms var(--ease-out);
}
[data-reveal].is-in .bilanz-bar i { width: var(--w, 0%); }
.bilanz-rows li:nth-child(2) .bilanz-bar i { transition-delay: 90ms; }
.bilanz-rows li:nth-child(3) .bilanz-bar i { transition-delay: 180ms; }
.bilanz-rows li:nth-child(4) .bilanz-bar i { transition-delay: 270ms; }
.bilanz-cond { margin-top: 0.55rem; color: var(--muted); font-size: var(--t-sm); }
.bilanz-warn .bilanz-label { font-weight: 600; }
.bilanz-warn .bilanz-wert { color: var(--amber); }
.bilanz-warn .bilanz-bar { background: var(--amber-wash); }
.bilanz-note {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-xs);
}
@media (max-width: 40rem) {
  .bilanz-top { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .bilanz-rows li { padding: 0.95rem 0 1.05rem; }
}

/* ==========================================================================
   Unterseiten-Angleichung ans Bold-Redesign der Startseite (28.07.2026).
   Kaskadenfähig ans Dateiende gestellt — die Regeln oben bleiben unverändert,
   damit backup-startseite-v1/ weiter mit derselben Datei funktioniert.
   ========================================================================== */

/* --- Seitenkopf im Startseiten-Aufbau --------------------------------------
   Wie der Hero: Headline läuft über die volle Breite, darunter teilen sich
   Lead-Text und Bild die Zeile. Auftritt beim Laden (rise/heroMedia) statt
   Scroll-Reveal — der Kopf ist beim Laden ohnehin im Viewport. */
.page-hero .breadcrumb { animation: rise 0.6s var(--ease-out) both; }
.page-hero-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(1.5rem, 3.2vw, 2.75rem);
}
.page-hero-head .eyebrow { animation: rise 0.7s var(--ease-out) both; }
.page-hero-head h1 {
  font-size: clamp(2.2rem, 1.26rem + 4.2vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.05;
  max-width: 24ch;
  animation: rise 0.8s 0.1s var(--ease-out) both;
}
.page-hero-copy > * { animation: rise 0.7s 0.22s var(--ease-out) both; }
.page-hero-copy > *:nth-child(2) { animation-delay: 0.3s; }
.page-hero-media { animation: heroMedia 0.9s 0.26s var(--ease-out) both; }
/* Kopf trägt die Headline bereits — das Grid darunter bekommt die
   Startseiten-Gewichtung: schmaler Text, größeres Bild. */
@media (min-width: 62rem) {
  .page-hero-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .page-hero-grid .page-hero-copy { max-width: 33rem; padding-bottom: clamp(0.25rem, 1.2vw, 1rem); }
}
/* Porträt-Köpfe (Über mich) behalten ihre schmale Bildspalte. */
@media (min-width: 62rem) {
  .page-hero-grid--portrait { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Zentrierte Variante (404): kein Trennstrich, alles mittig. */
.page-hero--center { border-bottom: 0; padding-bottom: var(--s-6); }
.page-hero--center .page-hero-head { justify-items: center; text-align: center; margin-bottom: var(--s-3); }
.page-hero--center .page-hero-copy { justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.page-hero--center .btn-row { justify-content: center; }

/* --- Förderbilanz, Variante „Beispielrechnung" (Förderseite) ---------------
   Dieselbe Papier-Karte wie auf der Startseite, ergänzt um eine Fall-Zeile
   unter dem Kopf und eine Summenzeile mit Gutachten-Summenstrich. */
.bilanz-fall {
  padding: 0.85rem 0 0.95rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.bilanz-rows .bilanz-sum { border-top: 2px solid var(--ink); margin-top: 0.35rem; }
.bilanz-sum .bilanz-wert { color: var(--ink); }

/* ==========================================================================
   Startseiten-Feinschliff v3 (28.07.2026): Mobile-Hero + Sektions-Politur.
   Kaskadenfähig ans Dateiende gestellt — die Regeln oben bleiben unverändert,
   damit backup-startseite-v1/ weiter mit derselben Datei funktioniert.
   ========================================================================== */

/* --- Mobile-Hero: Foto direkt nach der Headline ---------------------------
   Auf dem Handy stand das Foto unter Text und Buttons — beim Laden war
   Fernando nur halb zu sehen. Neue Reihenfolge: Headline → Foto → Text →
   Buttons. Das Foto wird dafür 4:3 beschnitten (Fernando deutlich größer);
   42 % rückt ihn auf die klassische Drittel-Position. */
@media (max-width: 68rem) {
  .hero-media { order: -1; animation-delay: 0.14s; }
  .hero-shot img { aspect-ratio: 4 / 3; object-position: 42% 50%; }
  .hero-copy > * { animation-delay: 0.3s; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.4s; }
}

/* --- Vertrauensleiste als Messleiste ---------------------------------------
   Ab voller Breite trennen Hairlines die vier Zusagen — die Zeile liest
   sich als ein Instrument, nicht als lose Streuung. */
@media (min-width: 76rem) {
  .trustbar ul { grid-template-columns: repeat(4, 1fr); gap: 0 var(--s-4); }
  .trustbar li + li { border-left: 1px solid var(--line); padding-left: var(--s-4); }
}

/* --- Der Klimt-Scan als laufendes Gerät ------------------------------------
   Der Statuspunkt in der Kopfleiste pulsiert, die Sucher-Ecken rasten beim
   Reveal der Sektion einmal ein („Autofokus sitzt"). Beides rein dekorativ;
   prefers-reduced-motion stoppt beide über die globale Regel. */
.scan-bar b { display: inline-block; animation: scanPulse 2.4s var(--ease) infinite; }
@keyframes scanPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.section--thermal .section-head.is-in + .compare-figure .scan-corners {
  animation: cornersLock 700ms 150ms var(--ease-out) both;
}
@keyframes cornersLock {
  from { inset: 10px; opacity: 0; }
  to { inset: -7px; opacity: 1; }
}

/* --- Editorial-Sektionskopf als Treppe -------------------------------------
   Variante für bildstarke Sektionen (Leistungen, Ergebnis): Headline links,
   der Begleittext rückt rechtsbündig unter die Headline. Die Diagonale führt
   ins Raster darunter — und die Kapitelziffer oben rechts bleibt frei. */
.section-head--row { max-width: none; }
.section-head-main { display: grid; gap: var(--s-3); max-width: 46rem; }
.section-head-aside { display: grid; gap: 0.9rem; justify-items: start; }
@media (min-width: 62rem) {
  .section-head--row .section-head-aside {
    max-width: 32rem;
    justify-self: end;
    margin-top: 0.4rem;
  }
}

/* --- Leistungskarten: Nummern in Serifen, Lead-Karte mit Schlagzeile ------- */
.card-num {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.24rem 0.55rem 0.16rem;
}
.cards--lead .card:first-child h3 { font-size: var(--t-2xl); letter-spacing: -0.02em; }

/* --- Ablauf: Zeitleiste führt vom Anruf zum Geld ---------------------------
   Die Linie läuft Grün → Amber, die letzte Station (Bescheid, Auszahlung)
   trägt den Amber-Punkt — dieselbe Erzählung wie der Hero-Verlauf.
   Die Dauer-Angaben werden zu kleinen Mess-Pills. */
.steps--line {
  border-left: 1px solid transparent;
  border-image: linear-gradient(to bottom, var(--green-bright), var(--green) 55%, var(--amber) 96%) 1;
}
.steps--line .step:last-child::before { background: var(--amber); }
/* Dauer-Pills nur auf der Startseite (kurze Labels); /ablauf/ behält seine
   mehrzeiligen Zeitangaben als schlichte Textzeile. */
.steps--pills .step-num small {
  width: max-content;
  margin-top: 0.55rem;
  padding: 0.24rem 0.6rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  letter-spacing: 0.09em;
  color: var(--muted);
}
@media (max-width: 46rem) { .steps--pills .step-num small { margin-top: 0; } }

/* --- Ergebnis-Duo im Editorial-Versatz -------------------------------------
   Die zweite Tafel hängt eine Stufe tiefer, die Bildunterschriften tragen
   Kicker-Zeilen über Hairline statt Fettauftakt im Fließtext. */
@media (min-width: 60rem) {
  .split--stagger { align-items: start; }
  .split--stagger > figure:nth-child(2) { margin-top: var(--s-6); }
}
.split--stagger .compare-figure figcaption { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.split--stagger figcaption b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.35rem;
}

/* --- Über mich: der Auftakt als Standpunkt --------------------------------- */
.split-copy p.statement {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* --- FAQ: Plus im Hairline-Kreis, offene Frage färbt sich grün ------------- */
.faq summary::after {
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0.05rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background-size: 0.85rem;
  background-position: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.faq summary:hover::after { border-color: var(--green); }
.faq details[open] summary { color: var(--green-deep); }
.faq details[open] summary::after { background-color: var(--green-wash); border-color: var(--green); }

/* --- CTA-Band: Morgenlicht auch am Schluss ---------------------------------
   Feiner grüner Schein hinter der Poster-Zeile — dieselbe Lichtführung wie
   im Hero, als Klammer um die Seite. */
.cta-band::before {
  background-image: radial-gradient(42rem 26rem at 14% 8%, rgba(106, 176, 76, 0.12), transparent 62%),
    var(--contours-paper);
  background-size: auto, 44rem;
  background-position: 0 0, 55% 30%;
}

/* --- Typo-Feinschliff (29.07.2026) -----------------------------------------
   Kundenfeedback: Headlines auf Desktop zu groß, Silbentrennung wirkt
   abgehackt, Seitenkopf-H1 stauchte sich durch max-width 21ch auf 3–4
   kurze Zeilen. Kaskadenfähig am Dateiende, v1-Backup bleibt unberührt. */

/* Keine automatische Silbentrennung mehr in großen Überschriften — dort ist
   Platz für ganze Wörter, der Trennstrich wirkte „abgeschnitten". In h3
   bleibt sie an: Karten-Spalten sind schmal, Komposita wie
   „Fördermittelberatung" brauchen den Ausweg. */
h1, h2 { -webkit-hyphens: manual; hyphens: manual; }

/* Start-Hero: eine Stufe zurückgenommen (vorher 5.4rem ≈ 86 px). */
:root { --t-4xl: clamp(2rem, 0.9rem + 4.6vw, 4.4rem); }

/* Seitenköpfe der Unterseiten: kleiner (vorher 4.6rem) und wieder über die
   volle Breite — mit text-wrap: balance ergeben lange H1s zwei gleichmäßige
   Zeilen statt vier gestauchter. */
.page-hero h1 { max-width: none; }
.page-hero-head h1 { font-size: clamp(2.1rem, 1.32rem + 2.6vw, 3.4rem); }

/* CTA-Band: Posterzeile bleibt, aber unterhalb der Seitenkopf-H1. */
.cta-inner h2 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); }

/* --- Mobile-Menü-Feinschliff (29.07.2026) ----------------------------------
   Der CTA-Button erbte die Block-Link-Regel (.mobile-nav a) — display:block
   drückte das Pfeil-SVG in eine zweite Zeile. Dazu: Ordnungsziffern im Stil
   der Kapitel-Nummern, CTA-Zone mit Telefon, Konturen-Grund, Stagger. */
.mobile-nav {
  background-color: var(--paper);
  background-image:
    radial-gradient(30rem 22rem at 92% -8%, rgba(61, 139, 55, 0.09), transparent 62%),
    var(--contours-ink);
  background-size: auto, 44rem;
  background-position: 0 0, 84% 116%;
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}
/* Die alte Hairline-Regel (.mobile-nav > ul > li) griff nie — das ul steckt
   in einem nav. Hier mit korrektem Pfad. */
.mobile-nav > nav > ul > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav > nav > ul > li:last-child { border-bottom: 0; }
.mobile-nav > nav > ul > li > a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  padding: 1.05rem 0.25rem;
}
.mobile-nav a i {
  flex: none;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.mobile-nav .sub {
  margin: -0.4rem 0 1rem 0.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--green-wash);
}
.mobile-nav .sub a { font-size: 0.95rem; padding: 0.48rem 0; }
.mobile-nav-cta {
  display: grid;
  gap: 0.65rem;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.mobile-nav-cta .btn { width: 100%; margin-top: 0; }
.mobile-nav a.btn {
  display: inline-flex;
  font-family: var(--sans);
  font-size: var(--t-sm);
  padding: 0.8rem 1.6rem;
}
.mobile-nav-cta p {
  margin: 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav.is-open > nav > ul > li,
  .mobile-nav.is-open .mobile-nav-cta { animation: rise 0.45s var(--ease-out) both; }
  .mobile-nav.is-open > nav > ul > li:nth-child(2) { animation-delay: 40ms; }
  .mobile-nav.is-open > nav > ul > li:nth-child(3) { animation-delay: 80ms; }
  .mobile-nav.is-open > nav > ul > li:nth-child(4) { animation-delay: 120ms; }
  .mobile-nav.is-open > nav > ul > li:nth-child(5) { animation-delay: 160ms; }
  .mobile-nav.is-open > nav > ul > li:nth-child(6) { animation-delay: 200ms; }
  .mobile-nav.is-open > nav > ul > li:nth-child(7) { animation-delay: 240ms; }
  .mobile-nav.is-open .mobile-nav-cta { animation-delay: 300ms; }
}

/* --- Schriftwechsel „Variante D" (30.07.2026) --------------------------------
   Kundenentscheid aus dem Schriftvergleich: Überschriften laufen nicht mehr in
   der Serifenschrift, sondern in Archivo Semibold. Der Zwischenwert 620 der
   variablen Achse ist der Punkt, an dem eine Überschrift Gewicht hat, ohne in
   Werbe-Fettschrift zu kippen; der etwas engere Satz (-0.028em) hält lange
   deutsche Wörter zusammen.

   Warum die Einzelfälle mit aufgeführt sind: `.hero h1` und `.page-hero-head
   h1` setzen weiter oben ausdrücklich Gewicht 400, `.page-hero h1` und
   `.cta-inner h2` eigene Laufweiten. Ein nackter h1-Selektor verliert gegen
   diese Klassen — deshalb hier mit gleicher Spezifität und am Dateiende. */
h1, h2, h3, h4,
.hero h1,
.page-hero h1,
.page-hero-head h1,
.cta-inner h2 {
  font-weight: 620;
  letter-spacing: -0.028em;
}

/* Ausnahme: die Fußzeilen-Überschriften sind gesperrte Versalien-Labels
   („LEISTUNGEN", „KONTAKT"), keine Überschriften im typografischen Sinn —
   negative Laufweite würde sie zusammenkleben. */
.site-footer h2 { font-weight: 700; letter-spacing: 0.14em; }

/* =========================================================================
   Der Klimt-Check — Förder-Vorprüfung in fünf Schritten
   Karten statt Radiobuttons: große Klickflächen, eine Entscheidung pro
   Bildschirm. Ohne JS sind alle Schritte sichtbar (kein `hidden`-Toggle),
   die Seite bleibt dann eine lange, bedienbare Liste.
   ========================================================================= */
.kc-page { padding-block: var(--s-6); }
.kc-intro { text-align: center; margin-bottom: var(--s-5); }
.kc-intro h1 { margin-top: 0.4rem; }
.kc-lead {
  max-width: 44rem;
  margin: var(--s-3) auto 0;
  color: var(--ink-soft);
  font-size: var(--t-lg);
}

.kc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.kc-progress { height: 3px; background: var(--paper-3); }
.kc-progress-bar { display: block; height: 100%; }
.kc-progress-bar i {
  display: block;
  width: var(--p, 20%);
  height: 100%;
  background: var(--green);
  transition: width 320ms var(--ease-out);
}

.kc-form { padding: clamp(1.5rem, 4vw, 3rem); }
.kc-step { border: 0; padding: 0; margin: 0; }
.kc-step-head { display: block; width: 100%; padding: 0; margin-bottom: var(--s-4); }
.kc-step-count {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.kc-step-frage {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-xl);
  font-weight: 620;
  letter-spacing: -0.02em;
}
.kc-step-hilfe { display: block; margin-top: 0.4rem; color: var(--muted); font-size: var(--t-sm); }

/* --- Antwortkarten -------------------------------------------------------- */
.kc-options { display: grid; gap: 0.6rem; }
@media (min-width: 46rem) {
  .kc-options--multi { grid-template-columns: 1fr 1fr; }
}

.kc-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform 160ms var(--ease);
}
.kc-option:hover { border-color: rgba(34, 38, 31, 0.3); background: var(--paper-2); }
.kc-option:active { transform: translateY(1px); }

/* Der echte Input bleibt bedienbar (Tastatur, Screenreader), ist aber
   visuell durch die Karte ersetzt. */
.kc-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.kc-option:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.kc-option:has(input:checked) {
  border-color: var(--green);
  background: var(--green-wash);
}

.kc-option-body { display: grid; gap: 0.15rem; flex: 1; }
.kc-option-label { font-weight: 600; font-size: var(--t-base); }
.kc-option-hint { color: var(--muted); font-size: var(--t-sm); }

.kc-option-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kc-option-mark svg { width: 0.9rem; height: 0.9rem; }
.kc-option:has(input:checked) .kc-option-mark {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.kc-multi-note { margin-top: 0.8rem; font-size: var(--t-xs); color: var(--muted); }

/* --- Navigation ----------------------------------------------------------- */
.kc-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.kc-nav [data-kc-back] { margin-right: auto; }
.kc-nav [data-kc-next] { margin-left: auto; }
.kc-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Ergebnis ------------------------------------------------------------- */
.kc-result-lead { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s-3); }
.kc-treffer-liste { list-style: none; display: grid; gap: 0.7rem; margin: 0 0 var(--s-3); padding: 0; }
.kc-treffer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--green-wash);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.kc-treffer-wert {
  grid-row: span 2;
  align-self: center;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green-deep);
  white-space: nowrap;
}
.kc-treffer-titel { font-weight: 600; }
.kc-treffer-text { color: var(--ink-soft); font-size: var(--t-sm); }

.kc-hinweis {
  padding: 1rem 1.1rem;
  margin-bottom: 0.7rem;
  background: var(--paper-2);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.kc-hinweis--warn { background: var(--amber-wash); border-left: 3px solid var(--amber); }
.kc-hinweis b { display: block; margin-bottom: 0.3rem; color: var(--ink); }

.kc-contact {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.kc-contact h3 { font-size: var(--t-lg); }
.kc-contact > p { color: var(--ink-soft); margin-top: -0.6rem; }
.kc-contact .btn { justify-self: start; }

.kc-stop { text-align: center; padding: var(--s-4) 0; }
.kc-stop h2 { font-size: var(--t-xl); }
.kc-stop p { max-width: 34rem; margin: var(--s-3) auto var(--s-4); color: var(--ink-soft); }

.kc-disclaimer {
  margin-top: var(--s-4);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Ohne JavaScript stehen alle Schritte untereinander und brauchen Luft.
   Mit JavaScript ist immer nur einer sichtbar, dann greift der Abstand nicht. */
.kc-step + .kc-step { margin-top: var(--s-5); }

/* =========================================================================
   Schwerpunkte auf der Startseite (iSFP · Förderanträge · Baubegleitung)
   ========================================================================= */
.fokus { display: grid; gap: var(--s-5); }
.fokus-item { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 54rem) {
  .fokus-item { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .fokus-item--flip .fokus-media { order: 2; }
}

.fokus-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.fokus-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fokus-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.8rem;
  background: rgba(34, 38, 31, 0.82);
  color: var(--paper);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}

.fokus-body h3 { font-size: var(--t-xl); margin: 0.3rem 0 0.7rem; letter-spacing: -0.02em; }
.fokus-body p { color: var(--ink-soft); margin-bottom: var(--s-3); }

.hero-note {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 32rem;
}

/* ==========================================================================
   Desktop-Maßstab (02.09.2026)
   Anlass: Vergleich mit der Agentur-Referenz (wolter-digitalberatung). Auf
   großen Displays war die Seite zu laut: 190-px-Kapitelziffern liefen in
   Überschriften, 64-px-Werte in der Förderbilanz, 600-px-Bilder neben sechs
   Zeilen Text, ein Wärmebild-Chip unter dem Hero-Foto. Alles kaskadenfähig
   am Dateiende; das v1-Backup bleibt mit derselben Datei lauffähig.
   ========================================================================== */

/* --- Kapitelziffern: kleiner und ÜBER dem Inhalt, nicht dahinter ----------
   Mit 13rem reichte die Ziffer bis 250 px tief und lag hinter der ersten
   Zeile rechter Spalten (Ablauf-Schritt 01, erste FAQ-Frage). Jetzt endet
   die Ziffer vor der Inhaltskante (Sektions-Padding 144 px). */
.ghost-num {
  top: 1rem;
  right: clamp(0.75rem, 3vw, 2.5rem);
  font-size: clamp(4rem, 1.5rem + 7.5vw, 9.5rem);
}

/* --- Hero: Foto läuft bis zum rechten Bildschirmrand ----------------------
   Der Wärmebild-Chip ist raus (Kundenwunsch). Statt Karte-im-Karton wird das
   Foto zur rechten Seite hin randlos und so hoch wie die Textspalte. */
.hero-chip { display: none; }
.hero-shot::after { display: none; }
.hero-copy { max-width: 34rem; }
.hero p.hero-pointe {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  max-width: 30rem;
}
.hero-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin: -0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.hero-micro li + li::before { content: '·'; margin-right: 0.55rem; }

/* Kennzahlen-Zeilen: Zahl links, Erklärung rechts, Hairlines dazwischen —
   die Messleiste, die vorher als Vertrauensleiste unter dem Hero stand. */
.hero-stats {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hero-stats li {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: 0.3rem var(--s-3);
  align-items: baseline;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line);
}
.hero-stats b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hero-stats b small {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.hero-stats b small:first-child { margin-right: 0.3rem; }
.hero-stats b small:last-child { margin-left: 0.25rem; }
.hero-stats span { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }

@media (min-width: 68.01rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: stretch;
  }
  .hero-copy { align-self: center; padding-bottom: 0; }
  .hero-media {
    align-self: stretch;
    /* bis zum Viewport-Rand: Abstand Shell-Kante → Rand, negativ */
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--shell)) / 2));
  }
  .hero-shot {
    height: 100%;
    min-height: 29rem;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: none;
  }
  .hero-shot img { height: 100%; aspect-ratio: auto; object-position: 42% 50%; }
}
@media (max-width: 68rem) {
  .hero-stats li { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* Laufband rückt an die Stelle der alten Vertrauensleiste. */
.ticker {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-block: 1px solid var(--line);
}

/* --- Förderung: Text und Bilanz-Karte nebeneinander ----------------------
   Die Karte stand allein auf 64rem links, rechts blieb eine leere Fläche.
   Jetzt teilt sie sich die Zeile mit dem Sektionskopf, der beim Scrollen
   an der Karte entlang stehen bleibt. */
.foerder-grid { display: grid; gap: var(--s-4); align-items: start; }
.foerder-grid .section-head { margin-bottom: 0; }
.foerder-copy { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 62rem) {
  .foerder-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .foerder-copy { position: sticky; top: 7rem; }
}
/* Schmal: Text, dann die Karte, dann erst der Button — der Hüllen-Container
   löst sich auf (display: contents), damit die Karte dazwischenrutscht. */
@media (max-width: 61.99rem) {
  .foerder-copy { display: contents; }
  .foerder-grid .bilanz { order: 1; }
  .foerder-copy > .btn-row { order: 2; }
}
.bilanz { max-width: none; }
.bilanz-wert { font-size: var(--t-2xl); }
.bilanz-rows li { padding: 0.9rem 0 1rem; }

/* --- Schwerpunkte: Bild und Text im Gleichgewicht -------------------------
   Vorher 600-px-Bilder neben sechs Zeilen Text. Jetzt 4:3-Bilder in der
   schmaleren Spalte, der Text bekommt eine Zeile mit den zwei Zahlen, die
   für den Eigentümer den Unterschied machen (statt Badge auf dem Foto). */
.fokus { gap: clamp(3rem, 6vw, 5.5rem); }
@media (min-width: 54rem) {
  .fokus-item {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .fokus-item--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.fokus-media { box-shadow: none; }
.fokus-media img { aspect-ratio: 4 / 3; }
.fokus-badge { display: none; }
.fokus-body { display: grid; gap: 0.75rem; max-width: 34rem; }
.fokus-body h3 { margin: 0; }
.fokus-body p { margin: 0; }
.fokus-facts {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.fokus-facts li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.36fr) minmax(0, 1fr);
  gap: 0.2rem var(--s-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.fokus-facts li > span:first-child { color: var(--muted); }
.fokus-facts li > span:last-child { color: var(--ink); font-weight: 600; }
.fokus-body .link-arrow { justify-self: start; margin-top: 0.35rem; }
@media (max-width: 40rem) {
  .fokus-facts li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* --- Weitere Leistungen: vier gleich große Karten -------------------------
   Die breite Bühne für die erste Karte ergab auf der Startseite keinen Sinn
   mehr, seit die drei Schwerpunkte eine eigene Sektion haben. */
@media (min-width: 62rem) {
  .cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cards--four .card-body { padding: var(--s-3) var(--s-3) var(--s-3); }
.cards--four .card-body h3 { font-size: var(--t-lg); }

/* --- Sektionskopf mit Begleittext: eine Zeile, unten bündig ---------------
   Die Treppe (Begleittext rechts UNTER der Headline) ließ eine Lücke, die wie
   ein Layoutfehler wirkte. Jetzt stehen Headline und Begleittext auf einer
   Grundlinie; die kleinere Kapitelziffer kollidiert nicht mehr. */
@media (min-width: 62rem) {
  .section-head--row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--s-3) var(--s-6);
  }
  .section-head--row .section-head-aside {
    margin-top: 0;
    max-width: 26rem;
    padding-bottom: 0.4rem;
  }
  .section-head--row p.section-head-aside,
  .section-head--row .section-head-aside p { font-size: var(--t-base); line-height: 1.55; }
}

/* --- Maßstab einzelner Elemente ------------------------------------------- */
.compare-figure--wide { max-width: 58rem; }
.split-copy p.statement { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; }
.section-head p:not(.eyebrow) { max-width: 40rem; }

/* --- Klimt-Check: „hidden" muss gewinnen ----------------------------------
   `.btn { display: inline-flex }` überstimmte das hidden-Attribut — auf
   Schritt 1 stand „Zurück", auf dem letzten Schritt „Weiter". */
[hidden] { display: none !important; }

/* ==========================================================================
   Startseite „Förderung zuerst" (02.09.2026)
   Anlass: Fernandos Sprachnotizen vom 20.08. und der Vergleich mit
   kontakt.jan-mertens.com. Die Startseite erklärt seitdem ein Angebot
   (Förderanträge, Sanierungsfahrplan, Baubegleitung) und führt zum
   Klimt-Check. Alles kaskadenfähig am Dateiende; die Sicherung des
   vorherigen Stands liegt in backup-startseite-v3/.
   ========================================================================== */

/* --- Hero: Überschrift darf auf schmalen Displays umbrechen ---------------
   Die Förder-Überschrift ist länger als „Ich zeige Ihnen, wo." Auf dem
   Desktop bleibt die Verlaufszeile einzeilig mit der gezeichneten Linie;
   mobil bricht sie um und trägt eine ruhige Unterstreichung. */
.hero h1 { font-size: clamp(2rem, 0.65rem + 5.7vw, 4.1rem); }
@media (max-width: 52rem) {
  .hero h1 em {
    white-space: normal;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.1em;
    text-decoration-color: rgba(106, 176, 76, 0.4);
  }
  .hero h1 em::after { display: none; }
}

/* --- Hero: Nutzen-Zeilen statt Kennzahlen-Tabelle -------------------------
   Drei Zusagen mit Haken, fette Einleitung in Tinte, Rest gedämpft. Die
   Kennzahlen (70 % · Festpreis · 15 Min.) wanderten in die Förderbilanz
   und nach „Über mich", damit im Hero nichts doppelt steht. */
.ticks--hero { gap: 0.9rem; max-width: 34rem; margin-top: 0.15rem; }
.ticks--hero li {
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--muted);
}
.ticks--hero li::before {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.16rem;
  background-color: transparent;
  background-size: 0.85rem;
  border: 1px solid var(--line);
}
.ticks--hero b { color: var(--ink); font-weight: 600; }
.hero .btn-row { margin-top: 0.35rem; }

/* --- Button-Zeile mit Textlink daneben ------------------------------------ */
.btn-row--mixed { align-items: center; gap: 0.75rem var(--s-4); }

/* --- Hürden: vier Punkte neben dem Sektionskopf --------------------------- */
.huerden-split { align-items: start; }
@media (min-width: 60rem) {
  .huerden-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .huerden-split > .split-copy { position: sticky; top: 7rem; }
}
.huerden { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4) var(--s-5); }
@media (min-width: 40rem) { .huerden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.huerden li {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.huerden h3 { font-size: var(--t-lg); line-height: 1.25; }
.huerden p { margin: 0; color: var(--muted); font-size: var(--t-base); line-height: 1.55; }
.huerden-schluss {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  max-width: 36rem;
}

/* --- Angebot: Abschluss mit einem einzigen Weg weiter --------------------- */
.fokus-cta {
  display: grid;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 56rem) {
  .fokus-cta { grid-template-columns: minmax(0, 1fr) auto; }
}
.fokus-cta p { margin: 0; color: var(--muted); max-width: 34rem; line-height: 1.55; }

/* --- Über mich: Zusagen als Gutachten-Zeilen ------------------------------ */
.split-copy .facts { margin-top: 0.25rem; }
.split-copy .facts > div { grid-template-columns: minmax(7rem, 0.34fr) minmax(0, 1fr); }
.split-copy .facts dd { color: var(--ink-soft); line-height: 1.5; }

/* Textspalte einen Hauch breiter, damit Klimt-Check-Button und Telefon-
   Button nebeneinander passen (vorher 479 px, die Buttons brauchen ~495). */
@media (min-width: 68.01rem) {
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* ==========================================================================
   Review 02.09.2026 (abends) — Startseite
   Kundenfeedback nach dem „Förderung zuerst"-Umbau: Hero-Headline weniger
   forsch, „Das Problem" durch den scrollgesteuerten „Weg zum Zuschuss"
   ersetzt, Linien-Tabellen in den Schwerpunkten raus, Thermografie und
   Kapitelziffern von der Startseite entfernt. Alles kaskadenfähig am
   Dateiende, damit backup-startseite-v3/ weiter kompatibel bleibt.
   ========================================================================== */

/* --- Schwerpunkt-Fakten ohne Linien ---------------------------------------
   Die Hairline über und unter jeder Zeile las sich wie eine Tabelle und war
   dem Kunden zu unruhig („das mit den Linien oben und unten"). Jetzt tragen
   nur Typografie und ein Quadrat in Klimt-Grün die Struktur: Mikro-Label
   darüber, Wert darunter, nebeneinander statt gestapelt.
   -------------------------------------------------------------------------- */
.fokus-facts {
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--s-3) var(--s-4);
  margin-top: 0.55rem;
}
.fokus-facts li {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border-bottom: 0;
  font-size: var(--t-sm);
}
.fokus-facts li > span:first-child {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--green);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.fokus-facts li > span:first-child::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.5rem;
  vertical-align: 0.1em;
  background: var(--green);
}
.fokus-facts li > span:last-child {
  display: block;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}
@media (max-width: 40rem) {
  .fokus-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}

/* --- scrollcraft: die Geräte ----------------------------------------------
   Das Minimum, das die Engine (assets/js/scrollcraft.js, Skill
   „nateherk-design:scrollcraft") zum Arbeiten braucht. Der Taste-Floor der
   Engine (scrollcraft.css) ist bewusst NICHT übernommen: er bringt eigene
   Farbtokens, eigene Schriften, einen dunklen Grund und einen vollständigen
   Reset mit und würde das Klimt-Design überschreiben. Die Engine selbst
   erzeugt kein Markup und keine Farben — sie liest data-sc-*-Attribute und
   treibt sie aus EINEM Scrollwert in EINER rAF-Schleife.
   -------------------------------------------------------------------------- */
[data-sc-pan] { will-change: transform; }
/* isolation: eigener Stapelkontext für die Lichtschicht.
   position nur mit :where() (Spezifität 0), damit eine spätere, konkretere
   Regel sie nicht still überschreibt. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }

/* --- „Der Weg zum Zuschuss" als Filmstreifen ------------------------------
   Vier Stationen, an denen sich die Fördersumme entscheidet — und an jeder
   steht, was Fernando übernimmt und was es bringt.

   Umbau 03.09.2026 nach Kundenfeedback: Vorher blendeten vier Textblöcke an
   derselben Stelle ineinander über. Das las sich für ältere Besucher wie eine
   hängende Seite („alles sieht gleich aus, es kommt nichts Neues"). Jetzt
   liegen vier ECHTE Karten nebeneinander auf einem Streifen, der beim
   Scrollen seitwärts wandert (Engine: data-sc-act="pan"). Damit bewegt sich
   immer etwas, die nächste Karte schiebt sich sichtbar ins Bild, und dass es
   vier verschiedene sind, sieht man an Rand, Schatten, Symbol und Zähler.

   Zwei Fassungen:
   • gestapelt — der GRUNDZUSTAND: vier Karten schlicht untereinander, ohne
     Bühne, ohne Leiste. Das ist auch die Fassung ohne JavaScript, auf
     schmalen Displays und bei reduzierter Bewegung.
   • Filmstreifen — nur mit der Klasse .weg--film, die site.js setzt, wenn
     Fenster breit genug (62 rem) und hoch genug ist. Die Klasse ist bewusst
     eine Zuschaltung und keine Abschaltung: Ohne JS bliebe die Sektion sonst
     ab 62 rem im Streifenlayout stehen, ohne dass etwas den Streifen bewegt
     — sichtbar wäre dann nur die erste Karte.
   -------------------------------------------------------------------------- */
.weg { padding-bottom: var(--s-6); }
.weg-head { max-width: 48rem; }

/* Die Engine schreibt die Bühnenhöhe als Inline-Style auf die Sektion. In der
   gestapelten Fassung muss sie weg — !important im Stylesheet schlägt einen
   normalen Inline-Style, deshalb steht hier keine JS-Aufräumarbeit. */
.weg:not(.weg--film) { height: auto !important; }
.weg-stage {
  /* sticky statt static: ohne Versatz verhält es sich wie relative, aber die
     Engine erkennt die Bühne als anheftbar und warnt nicht in der Konsole. */
  position: sticky;
  top: auto;
}
.weg-bar { display: none; }
.weg-strip {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
/* Die Engine schreibt die Verschiebung des Streifens als Inline-Style und
   räumt sie nicht wieder ab, wenn die Strecke wegfällt. Beim Wechsel zurück
   in die gestapelte Fassung (Fenster verkleinert, Tablet gedreht) stünden die
   Karten sonst weit links außerhalb des Bildes. !important schlägt den
   Inline-Style. */
.weg:not(.weg--film) .weg-strip { transform: none !important; }

/* Auftritt der Karten: IntersectionObserver der Engine (data-sc-in +
   data-sc-stagger), feuert einmal und bleibt dann stehen. Die Deckkraft läuft
   über --karte-o, damit die Abblendung der unscharfen Nachbarkarten weiter
   unten nicht mit dieser Regel um dieselbe Eigenschaft streitet. */
.weg-strip > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.weg-strip > .sc-in { opacity: var(--karte-o, 1); transform: none; }

/* --- Die Karte ------------------------------------------------------------ */
.weg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* Lichtschein unter dem Zeiger (data-sc-spotlight). Nur an Geräten mit
   feinem Zeiger — die Engine schreibt --sc-mx/--sc-my sonst nie. */
.weg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(20rem 20rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    rgba(106, 176, 76, 0.16), transparent 68%);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.weg-card:hover::after { opacity: 1; }

/* Kopfleiste: Symbol, Standanzeige, Zeitpunkt. Die drei zusammen sind der
   Grund, warum man die Karten auseinanderhält. */
.weg-card-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-2);
  row-gap: 0.15rem;
  padding: var(--s-3) var(--s-3) calc(var(--s-3) - 0.15rem);
  background: var(--green-wash);
  border-bottom: 1px solid var(--line-soft);
}
.weg-symbol {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(61, 139, 55, 0.28);
  color: var(--green);
}
.weg-symbol svg { width: 1.3rem; height: 1.3rem; }
.weg-zaehler {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.weg-zaehler b { font-size: var(--t-lg); font-weight: 700; line-height: 1; }
.weg-wann {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Flex-Spalte, damit die zwei Felder unten am Kartenrand kleben:
   alle Karten sind gleich hoch (align-items: stretch), der Text ist es nicht. */
.weg-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-4);
  flex: 1;
}
.weg-card-body h3 { font-size: var(--t-xl); line-height: 1.22; }
.weg-card-body > p { color: var(--ink-soft); max-width: 46ch; }

/* Zwei weiche Felder statt Aufzählung: links die Arbeit, rechts das Geld. */
.weg-pair { display: grid; gap: var(--s-1); margin-top: auto; padding-top: 0.4rem; }
@media (min-width: 34rem) {
  .weg-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
}
.weg-box { padding: var(--s-2) var(--s-3) calc(var(--s-2) + 0.15rem); border-radius: var(--radius); }
.weg-box--tue { background: rgba(34, 38, 31, 0.045); }
.weg-box--geld { background: var(--green-wash); }
.weg-box-k {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.weg-box--geld .weg-box-k { color: var(--green-deep); }
.weg-box p { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.weg-box--geld b { color: var(--green-deep); font-weight: 600; }

/* Die letzte Karte ist der Moment, in dem das Geld fließt. Sie ist als
   einzige dunkel und markiert damit sichtbar das Ende des Wegs. */
.weg-card--finale {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  --muted: rgba(247, 246, 242, 0.66);
  --ink-soft: rgba(247, 246, 242, 0.78);
}
.weg-card--finale .weg-card-kopf {
  background: rgba(247, 246, 242, 0.06);
  border-bottom-color: rgba(247, 246, 242, 0.14);
}
.weg-card--finale .weg-symbol {
  background: transparent;
  border-color: rgba(106, 176, 76, 0.5);
  color: var(--green-bright);
}
.weg-card--finale .weg-zaehler,
.weg-card--finale .weg-box--geld .weg-box-k { color: var(--green-bright); }
.weg-card--finale .weg-wann,
.weg-card--finale h3 { color: var(--paper); }
.weg-card--finale .weg-box--tue { background: rgba(247, 246, 242, 0.06); }
.weg-card--finale .weg-box--geld { background: rgba(106, 176, 76, 0.14); }
.weg-card--finale .weg-box p { color: var(--paper); }
.weg-card--finale .weg-box--geld b { color: var(--green-bright); }
.weg-card--finale::after {
  background: radial-gradient(20rem 20rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    rgba(106, 176, 76, 0.2), transparent 68%);
}

/* Schlusstafel: gestapelt ein Absatz unter den Karten, im Filmstreifen die
   fünfte Tafel rechts neben der letzten Karte. */
.weg-outro {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  align-content: center;
  padding-top: var(--s-2);
}
.weg-schluss {
  max-width: 42rem;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ==== Filmstreifen (ab 62 rem, solange genug Fensterhöhe da ist) ========== */
@media (min-width: 62rem) {
  .weg--film { padding-bottom: 0; }
  .weg--film .weg-head { margin-bottom: var(--s-4); }

  .weg--film .weg-stage {
    position: sticky;
    top: 4.8rem;
    min-height: calc(100vh - 4.8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 3.4vh, 2.5rem);
    padding-block: clamp(1rem, 3vh, 2.25rem);
    /* Der Streifen ragt links und rechts aus dem Fenster — hier wird er
       beschnitten, nicht am <body>. */
    overflow: clip;
  }

  /* Stationsleiste: eine Linie, vier nummerierte Punkte, grüner Füllstand.
     Der Füllstand hängt an --sc-p, dem Fortschritt, den die Engine auf die
     Sektion schreibt: die Leiste läuft also exakt synchron zum Streifen. */
  .weg--film .weg-bar {
    display: block;
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--shell));
    margin-inline: auto;
  }
  .weg-nav {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    padding: 0;
  }
  .weg-line {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 0.875rem;
    height: 2px;
    margin-top: -1px;
    background: var(--line);
    overflow: hidden;
  }
  .weg-line i {
    display: block;
    height: 100%;
    background: var(--green);
    transform: scaleX(var(--sc-p, 0));
    transform-origin: left;
  }

  .weg--film .weg-strip {
    width: max-content;
    margin-inline: 0;
    display: flex;
    align-items: stretch;
    gap: var(--s-3);
    /* Erste Karte bündig unter der Überschrift; site.js misst den Einzug an
       der .shell und schreibt ihn als --weg-inset. */
    padding-inline: var(--weg-inset, var(--gutter));
  }
  /* Breite der Schlusstafel: so bemessen, dass die letzte Karte am Ende der
     Strecke genau auf der Leselinie steht und rechts derselbe Rand bleibt wie
     links. site.js rechnet den Wert aus, weil er von der Fensterbreite
     abhängt (siehe dort: masse()). */
  .weg--film .weg-outro {
    flex: none;
    width: var(--weg-outro-w, 30rem);
    padding-top: 0;
  }
  .weg--film .weg-card {
    flex: none;
    width: min(41rem, 62vw);
  }
  /* Die Nachbarkarten bleiben lesbar, treten aber zurück. Kein Verkleinern:
     ein transform hier würde mit dem Auftritt der Engine kollidieren. */
  .weg--film .weg-card:not(.is-on) { --karte-o: 0.55; }
  .weg--film .weg-card.is-on {
    box-shadow: var(--shadow-2);
    border-color: rgba(61, 139, 55, 0.35);
  }
  .weg--film .weg-card--finale.is-on { border-color: rgba(106, 176, 76, 0.45); }

  /* Messfassung: site.js baut die Streifen-Fassung kurz ohne Mindesthöhe auf,
     um zu prüfen, ob die Bühne ins Fenster passt. Passiert innerhalb eines
     Frames, wird also nie gezeichnet. */
  .weg--messen .weg-stage { min-height: 0 !important; }
}

/* Gestapelt auf breiten Fenstern (Filmstreifen passt nicht in die Höhe):
   zwei Spalten statt vier Karten in voller Seitenbreite. */
@media (min-width: 62rem) {
  .weg:not(.weg--film) .weg-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weg:not(.weg--film) .weg-outro { grid-column: 1 / -1; }
}

/* Flache Fenster (13-/14-Zoll-Notebook mit Browserleisten): die Karte auf das
   Nötige zusammenziehen, damit die Bühne zwischen Kopfzeile und Fensterkante
   passt und der Filmstreifen überhaupt läuft. Ohne diesen Block fällt genau
   die häufigste Notebook-Größe in die gestapelte Fassung zurück. */
@media (min-width: 62rem) and (max-height: 46rem) {
  .weg--film .weg-card-kopf { padding-block: var(--s-2); }
  .weg--film .weg-card-body {
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3) var(--s-3);
  }
  .weg--film .weg-card-body h3 { font-size: var(--t-lg); }
  .weg--film .weg-box { padding: var(--s-1) var(--s-2) calc(var(--s-1) + 0.1rem); }
  .weg--film .weg-card { width: min(44rem, 64vw); }
}

/* --- Stationsknöpfe -------------------------------------------------------- */
.weg-station {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  width: 100%;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.35;
  transition: color var(--dur) var(--ease);
}
.weg-dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(34, 38, 31, 0.22);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.weg-station:hover { color: var(--ink); }
.weg-station.is-done .weg-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.weg-station[aria-current='true'] { color: var(--ink); font-weight: 600; }
.weg-station[aria-current='true'] .weg-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 5px var(--green-wash);
}
.weg-station:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 2px; }

/* --- Ohne Bewegung -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .weg { height: auto !important; }
  .weg-strip { transform: none !important; }
  .weg-strip > * { transform: none; transition-duration: 220ms; }
}

/* ==========================================================================
   Mobile-Feinschliff (03.09.2026)
   Anlass: Kundenreview auf dem Handy. Die Startseiten-Headline lief in vier
   gleich großen Zeilen, Texte und Buttons standen links am Rand, die Zeile
   „Vier Fragen · ohne Anmeldung" hing verloren darunter.

   Die Regel, nach der hier zentriert wird — und nach der auch alles Neue
   entschieden werden sollte:

     ZENTRIERT wird, was man ANSIEHT: Auszeichnungszeile, Überschrift, EIN
     kurzer Satz darunter, Buttons, Mikro-Zeilen unter Buttons, Zahlen.
     Das sind kurze Elemente ohne zweite Zeile Fließtext — sie wirken als
     Aushang, und ein Aushang steht mittig.

     LINKSBÜNDIG bleibt, was man LIEST: jeder Absatz ab zwei Sätzen, alle
     Aufzählungen, Karten, Formularfelder, Tabellen, Fußzeile. Zentrierter
     Fließtext zwingt das Auge, den Zeilenanfang jedes Mal neu zu suchen —
     bei 40 Zeichen pro Zeile auf dem Handy ist das der schnellste Weg, eine
     Seite unlesbar zu machen. Aufzählungen mit Symbol (Haken, Ziffer) sind
     immer linksbündig, sonst steht die Reihe der Symbole schief.

   Breakpoint 52 rem (832 px): unterhalb liegt alles einspaltig, oberhalb
   beginnt das zweispaltige Raster. Derselbe Punkt, an dem der Hero-Umbruch
   schon vorher gesetzt wurde.
   ========================================================================== */
/* Der Auftakt-Satz ersetzt das frühere <br> in der Hero-Überschrift: als
   Block bricht die Zeile am Desktop genau wie vorher, und auf dem Handy
   lässt sich der Satz getrennt vom Rest gestalten. Ohne diese Zeile liefen
   beide Sätze ohne Leerzeichen ineinander („… mit.Ich rechne aus …"). */
.h1-auftakt { display: block; }

@media (max-width: 52rem) {

  /* --- Hero-Kopf: aus vier gleich großen Zeilen wird eine Staffel ----------
     Vorher liefen beide Sätze in derselben Größe (2 rem) über vier Zeilen —
     ohne Rangfolge, dafür mit viel Höhe. Jetzt trägt der erste Satz eine
     kleinere, ruhigere Schrift (die Nachricht), der zweite die große
     Verlaufszeile (das Angebot). Man sieht in einem Blick, was das Wichtige
     ist, und der Kopf wird flacher, obwohl der Text derselbe bleibt.
     ---------------------------------------------------------------------- */
  .hero-head {
    justify-items: center;
    text-align: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
  }
  /* Der grüne Strich der Auszeichnungszeile entfällt hier: zentriert würde er
     entweder den Text anschieben oder als zweite Trennlinie mit der Linie
     über dem Lead-Satz konkurrieren. Versalien, Sperrung und Grün reichen. */
  .hero-head .eyebrow {
    display: block;
    max-width: 24rem;
    line-height: 1.5;
    letter-spacing: 0.11em;
  }
  .hero-head .eyebrow::before { display: none; }

  .hero-head h1 { letter-spacing: normal; }
  /* Größe des Auftakts, zweiter Anlauf (04.09.2026): die erste Fassung war
     mit gut 16 px zu klein — der Satz sah aus wie eine Bildunterschrift und
     nicht wie der erste Satz der Überschrift. Jetzt rund 22 px: deutlich
     größer, aber weiterhin gut ein Drittel unter der Verlaufszeile, damit
     die Rangfolge erhalten bleibt. `max-width` ist in ch angegeben und
     wächst deshalb mit der Schriftgröße mit — die Zeile bricht weiter nach
     „bei", die Spalte bleibt bei 375 px 220 px breit und läuft nicht an. */
  .h1-auftakt {
    display: block;
    max-width: 19ch;
    margin-inline: auto;
    margin-bottom: 0.55rem;
    font-size: clamp(1.4rem, 1rem + 1.7vw, 1.85rem);
    font-weight: 500;
    line-height: 1.26;
    letter-spacing: -0.008em;
    color: var(--ink-soft);
  }
  .hero h1 em {
    display: block;
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(2rem, 1.06rem + 4.1vw, 2.85rem);
    font-weight: 620;
    line-height: 1.14;
    letter-spacing: -0.03em;
    /* Unterstreichung, Kundenwunsch 04.09.2026. Am Desktop zeichnet das
       ::after eine Linie unter die einzeilige Zeile; mobil bricht der Satz
       um, deshalb text-decoration — die folgt jedem Zeilenende einzeln.
       Dünner und tiefer gesetzt als die Voreinstellung des Browsers: bei
       32 px Schrift wirkt eine satte Linie sonst wie ein Link. Die
       line-height oben ist dafür von 1.08 auf 1.14 gegangen, sonst sitzt
       die Linie der ersten Zeile auf den Oberlängen der zweiten. */
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-underline-offset: 0.16em;
    text-decoration-color: rgba(106, 176, 76, 0.45);
  }

  /* --- Der Satz unter dem Foto --------------------------------------------
     Auf dem Handy steht das Foto zwischen Überschrift und Text (Reihenfolge
     seit 28.07.: Headline → Foto → Text → Buttons). Dieser eine Satz sagt,
     was Fernando tut — er ist die Brücke zwischen Bild und Angebot und war
     bisher grau und linksbündig wie jeder Fließtext. Jetzt: kurze grüne
     Linie als Auftakt, Tinte statt Grau, eine Spur größer und mittig. Die
     Linie ist gleichzeitig die Naht zwischen Bild und Text.
     ---------------------------------------------------------------------- */
  .hero p.hero-lead {
    position: relative;
    max-width: 28rem;
    margin-inline: auto;
    padding-top: 1.35rem;
    text-align: center;
    text-wrap: balance;
    font-size: clamp(1.05rem, 0.97rem + 0.36vw, 1.2rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .hero p.hero-lead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.75rem;
    height: 2px;
    margin-left: -1.375rem;
    background: var(--green-bright);
  }

  /* --- Die drei Zusagen: Satz eins bekommt eine eigene Zeile ---------------
     „Alle Zuschüsse, die Ihnen zustehen. Ich prüfe die Programme …" lief
     als ein Fließtext, in dem der fette Auftakt mitten in der Zeile endete
     und der zweite Satz direkt dahinter weiterlief. Als Block gesetzt wird
     aus jeder Zusage eine Überschrift mit Erklärung — auf 40 Zeichen
     Zeilenbreite der Unterschied zwischen Textwand und Liste.
     Linksbündig, weil die Haken sonst schief stehen.
     ---------------------------------------------------------------------- */
  .ticks--hero { gap: 1.05rem; }
  .ticks--hero b {
    display: block;
    margin-bottom: 0.1rem;
    line-height: 1.35;
  }

  /* --- Die Zeile unter den Buttons ---------------------------------------- */
  .hero-micro { justify-content: center; text-align: center; }

  /* --- Buttons: mittig, auf einer eigenen Zeile, gleiche Breite -----------
     Zwei Buttons nebeneinander werden auf dem Handy verschieden breit und
     stehen dann beide links — das liest sich wie ein Umbruchunfall. Ganze
     Breite (gedeckelt auf 22 rem, damit sie auf Tablets nicht auseinander-
     laufen) und mittig ergibt eine saubere Achse, und der Daumen trifft
     jeden Button sicher.
     ---------------------------------------------------------------------- */
  .btn-row,
  .cta-actions,
  .fokus-cta,
  .weg-outro,
  .kc-stop,
  .form .btn-row { justify-content: center; justify-items: center; text-align: center; }

  .btn-row > .btn,
  .mobile-nav-cta .btn,
  .kc-contact > .btn,
  .cta-actions > .btn,
  .fokus-cta > .btn,
  .weg-outro > .btn {
    width: 100%;
    max-width: 22rem;
    justify-self: center;
  }
  /* .kc-contact .btn setzt weiter oben justify-self: start — hier gewinnt die
     spätere Regel, aber nur mit gleicher Spezifität, deshalb ausgeschrieben. */
  .kc-contact .btn { justify-self: center; }
  .btn-row > .link-arrow { justify-content: center; }

  /* „Zurück“ und „Weiter“ bleiben nebeneinander — sie sind ein Paar und
     bekommen deshalb keine volle Breite, sondern nur eine ruhige Mitte. */
  .kc-nav { justify-content: center; gap: 0.75rem; }
  .kc-nav [data-kc-back] { margin-right: 0; }
  .kc-nav [data-kc-next] { margin-left: 0; }
  .kc-nav .btn { flex: 1 1 0; max-width: 12rem; }

  /* --- CTA-Band und Seitenköpfe folgen derselben Regel -------------------- */
  .cta-inner { text-align: center; }
  .cta-inner h2 { text-wrap: balance; }
  .cta-actions { justify-items: center; }

  .page-hero-head { justify-items: center; text-align: center; }
  .page-hero-head .eyebrow { display: block; letter-spacing: 0.11em; }
  .page-hero-head .eyebrow::before { display: none; }
  .page-hero-head h1 {
    font-size: clamp(1.75rem, 1.12rem + 2.7vw, 2.4rem);
    line-height: 1.12;
    text-wrap: balance;
  }
  /* Der Lead darunter bleibt linksbündig: das sind drei bis vier Sätze
     Fließtext, und die liest man nicht mittig. */
  .page-hero-copy .lead, .page-hero-copy p { text-align: left; }

  /* Der Klimt-Check-Kopf ist schon zentriert (siehe oben, .kc-intro) —
     hier nur die Überschrift auf dieselbe Größe wie die Seitenköpfe. */
  .kc-intro h1 { font-size: clamp(1.75rem, 1.12rem + 2.7vw, 2.4rem); line-height: 1.12; }
  .kc-lead { text-align: left; }
}

/* --- WhatsApp-Button ------------------------------------------------------
   Ersetzt seit 03.09.2026 den Telefon-Button. Bewusst KEIN WhatsApp-Grün:
   #25D366 neben dem Klimt-Grün ergibt zwei Grüntöne, die sich streiten. Die
   Silhouette des Symbols erkennt jeder auch einfarbig; alles andere bleibt
   die vertraute Button-Form der Seite.
   -------------------------------------------------------------------------- */
.btn--wa svg { width: 1.05rem; height: 1.05rem; }
.btn--wa:hover svg { transform: none; }

/* --- Bild-Hinweis „AI modified" -------------------------------------------
   Die Fotos auf der Seite sind digital erzeugte Symbolbilder. Der Hinweis
   stand bisher nur als Fließtext in der Fußzeile — gesehen hat ihn dort
   niemand. Als kleines Schild in der Bildecke ist er da, wo er hingehört,
   ohne das Bild zu zerschneiden: halbtransparentes Dunkel, Versalien, sehr
   klein. Das Schild ist Teil des Bildes (nicht des Textes) und deshalb
   aria-hidden; die Bildunterschrift und der Fußzeilen-Hinweis tragen die
   Aussage weiterhin für Screenreader.

   Wortlaut „AI modified" (Kundenentscheid 04.09.2026, vorher „KI-generiert"):
   die Bilder sind aus Referenzmaterial abgewandelt, nicht aus dem Nichts
   erfunden. Die Wortmarke steht an ZWEI Stellen — hier in `.compare::after`
   und in `img()` in layout.mjs. Beide zusammen ändern.
   -------------------------------------------------------------------------- */
/* height: 100% reicht die Höhe des Bildrahmens durch. Ohne diese Zeile
   bricht die Kette an zwei Stellen, an denen ein Bild die Höhe seines
   Rahmens füllt statt sein eigenes Seitenverhältnis zu behalten (Hero-Foto
   am Desktop, erste Leistungskarte in .cards--lead): der Wrapper hätte dort
   „auto", und das img fiele auf seine natürliche Höhe zurück — sichtbar als
   grauer Streifen unter dem Foto. Bei Rahmen ohne feste Höhe ergibt
   height: 100 % wieder auto, dort ändert die Zeile also nichts. */
.ki-shot { position: relative; display: block; height: 100%; }
/* Die beiden Hochformat-Rahmen haben nur max-width und richten sich sonst
   nach der Breite ihres Inhalts. Solange das Bild noch nicht geladen ist,
   steuert es dazu nichts bei — der Rahmen fällt dann auf 0 zusammen und
   springt beim Laden auf. Eine feste Breite (gedeckelt durch das bestehende
   max-width) nimmt der Anordnung diese Abhängigkeit vom Ladezustand. */
.split-media--tall,
.page-hero-media--portrait { width: 100%; }
.ki-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.2rem 0.42rem;
  border-radius: 2px;
  background: rgba(20, 22, 18, 0.52);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
@media (max-width: 40rem) {
  .ki-badge { right: 0.35rem; bottom: 0.35rem; font-size: 0.52rem; padding: 0.18rem 0.36rem; }
}

/* Vorher/Nachher-Regler: das Schild kommt hier aus dem CSS, weil im Regler
   zwei Bilder übereinanderliegen und ein Schild pro Bild doppelt erschiene.
   Bottom-center ist vom Bedien-Hinweis belegt, deshalb rechts. */
.compare::after {
  content: 'AI modified';
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  padding: 0.2rem 0.42rem;
  border-radius: 2px;
  background: rgba(20, 22, 18, 0.52);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

/* --- Spam-Falle (Honeypot) ------------------------------------------------
   Das Feld „_gotcha" muss für Menschen unsichtbar sein und für Bots
   ausfüllbar bleiben (display:none füllen viele Bots nicht aus). Im
   Kontaktformular erledigt das ein Inline-Style, im Klimt-Check fehlte die
   Regel — dort stand ein leeres Eingabefeld sichtbar über dem Absende-Button.
   -------------------------------------------------------------------------- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Danke-Seite (03.09.2026)
   Ziel nach dem Absenden von Kontaktformular und Klimt-Check. Ruhig gehalten:
   der Besucher hat gerade gehandelt, jetzt ist Bestätigen wichtiger als
   Verkaufen. Deshalb keine Wiederholung des CTA-Bands, sondern drei Schritte,
   ein Notausgang (WhatsApp) und drei Lesetipps.
   ========================================================================== */
.danke-hero { text-align: center; }
.danke-mark {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  background: var(--green-wash);
  border: 1px solid rgba(61, 139, 55, 0.3);
  color: var(--green);
}
.danke-mark svg { width: 2rem; height: 2rem; stroke-width: 1.6; }
.danke-hero .page-hero-copy { justify-items: center; }
.danke-hero .lead { max-width: 34rem; margin-inline: auto; text-align: center; }

.danke-steps {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: none;
}
.danke-steps li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.danke-steps li:last-child { border-bottom: 1px solid var(--line); }
.danke-num {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.danke-zeit {
  display: block;
  margin-bottom: 0.15rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.danke-steps h3 { font-size: var(--t-lg); line-height: 1.25; }
.danke-steps p { margin-top: 0.35rem; color: var(--ink-soft); font-size: var(--t-base); line-height: 1.55; }

.danke-eilig {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-6);
}
@media (min-width: 48rem) {
  .danke-eilig { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); }
}
.danke-eilig h2 { font-size: var(--t-xl); margin-bottom: 0.4rem; }
.danke-eilig p { color: var(--ink-soft); font-size: var(--t-base); line-height: 1.55; }
.danke-eilig .btn { white-space: nowrap; }

.danke-weiter { display: grid; gap: var(--s-2); justify-items: start; }
.danke-weiter > p { color: var(--muted); font-size: var(--t-sm); }
.danke-weiter ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: 0.55rem; }
.danke-weiter a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 139, 55, 0.3);
  padding-bottom: 2px;
}
.danke-weiter a:not(.btn):hover { border-color: var(--green); }

@media (max-width: 52rem) {
  .danke-eilig { text-align: center; justify-items: center; }
  .danke-eilig .btn { width: 100%; max-width: 22rem; }
  .danke-weiter { justify-items: center; text-align: center; }
  .danke-weiter .btn { width: 100%; max-width: 22rem; }
  .danke-steps li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* ==========================================================================
   Review 04.09.2026 — Über mich: das Porträt nach oben
   Anlass: Kundenreview auf dem Handy. In der einspaltigen Fassung stand
   Fernandos Porträt ganz unten in der Sektion — erst Auszeichnungszeile,
   Überschrift, drei Absätze und beide Buttons, dann das Bild. Wer sich
   fragt „mit wem rede ich da eigentlich", sieht die Antwort damit zuletzt,
   und die Buttons stehen mitten in der Sektion statt an ihrem Ende.

   Neue Reihenfolge — dieselbe wie im Hero (Überschrift → Foto → Text →
   Buttons): Über mich · Überschrift · Porträt · drei Absätze · Buttons.

   Umsetzung: `display: contents` hebt die Textspalte als Kasten auf, ihre
   Kinder werden damit selbst Zellen des Split-Rasters und lassen sich mit
   `order` einzeln einsortieren. Zwei Nebenwirkungen, beide abgefangen:
     – Der Zeilenabstand kommt jetzt vom Split (2 rem) statt von der
       Textspalte (--s-3). Deshalb wird der Split-Abstand hier auf --s-3
       zurückgesetzt, sonst stünden die Absätze so weit auseinander wie
       sonst Bild und Text.
     – `order: 0` ist die Voreinstellung, also bekommt zuerst ALLES eine
       hohe Ordnungszahl; die drei Elemente, die vorne stehen sollen,
       überschreiben sie danach.
   Das `data-reveal` auf der Textspalte läuft hier ins Leere (ein Element
   ohne Kasten kennt keine Deckkraft) — der Inhalt ist damit sofort
   sichtbar statt eingeblendet. Das ist gewollt: eine halbe Animation wäre
   schlimmer als keine.

   Grenze 50 rem: genau dort schaltet das auto-fit-Raster des Splits von
   zwei Spalten auf eine (gemessen: 800 px einspaltig, 810 px zweispaltig).
   Die Spaltenangabe steht sicherheitshalber trotzdem hier — sonst hinge
   die Reihenfolge an einer Rechnung, die eine spätere Änderung an
   Schriftgröße oder Innenabstand verschieben würde.
   ========================================================================== */
@media (max-width: 50rem) {
  .split--portraet {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  .split--portraet .split-copy { display: contents; }
  .split--portraet .split-copy > * { order: 4; }
  .split--portraet .split-copy > .eyebrow { order: 1; }
  .split--portraet .split-copy > h2 { order: 2; }
  .split--portraet .split-media {
    order: 3;
    /* Das Bild bekommt etwas mehr Luft als der Zeilenabstand hergibt: es
       trennt Überschrift und Fließtext und soll nicht wie ein weiterer
       Absatz in der Reihe stehen. */
    margin-block: 0.35rem 0.6rem;
  }
}