/* ==========================================================================
   RAMPENLICHT — Designsystem
   Abgeleitet aus ecomhouse.com/checkliste (Analyse 28.07.2026).
   Übersetzte Farbrollen (Festlegung Moritz 28.07.2026): Coral = Kosten/Schmerz,
   Grün = Ersparnis/Beweis, CTA = Inversionsknopf (höchster Kontrast der Seite).
   Overrides gegen die Referenz bzw. gegen die Landingpage-Recherche sind mit
   [O…] markiert und in design-system.md begründet.
   ========================================================================== */

/* --- Schriften: self-hosted, keine CDN-Runtime-Abhängigkeit [O1] ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Bühnen: harte Flächenwechsel, keine Verläufe --------------------- */
  --stage:            #000000;   /* die dunkle Bühne */
  --stage-soft:       #0b0b0c;   /* zweite dunkle Fläche, kaum unterscheidbar */
  --surface-dark:     #2c2c2f;   /* Karte / Statistikband auf Dunkel */
  --surface-row:      #151515;   /* FAQ-Zeile auf Dunkel */
  --paper:            #ffffff;   /* die helle Bühne */
  --paper-soft:       #f2f2f2;   /* zweite helle Fläche */

  /* --- Text ------------------------------------------------------------- */
  --ink:              #000000;   /* Überschriften auf Hell */
  --ink-body:         #1c1c1e;   /* Fließtext auf Hell */
  --ink-muted:        #6b6b6b;   /* gedämpft auf Hell — 5,33:1 [O2] */
  --on-dark:          #ffffff;   /* Text auf Dunkel */
  --on-dark-muted:    #a3a3a3;   /* gedämpft auf Dunkel — 7,4:1 */

  /* --- Signalfarben: sie argumentieren, sie dekorieren nicht ------------ */
  --cost:             #ff523f;   /* Kosten/Schmerz — nur auf Dunkel (6,5:1) */
  --cost-ink:         #d9331c;   /* Kosten/Schmerz auf Hell (4,7:1) [O3] */
  --cost-wash:        #fff4f2;   /* getönte Fläche der Verlierer-Karte */
  --save:             #53b37f;   /* Ersparnis/Beweis — nur auf Dunkel (8,1:1) */
  --save-ink:         #1e7a4c;   /* Ersparnis/Beweis auf Hell (5,3:1) [O3] */
  --save-wash:        #f2fbf6;   /* getönte Fläche der Gewinner-Karte */

  /* --- Linien und Fokus -------------------------------------------------- */
  --hairline:         #e3e3e3;
  --hairline-dark:    rgba(255, 255, 255, .12);
  --border-control:   #767676;   /* Bedienelemente ≥ 3:1 (WCAG 1.4.11) [O4] */
  --focus:            #1e7a4c;

  /* --- Typografie -------------------------------------------------------- */
  --font-display: 'Outfit', 'Trebuchet MS', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --display-hero:  clamp(2.25rem, 5vw,   3.5rem);    /* 36 → 56 px */
  --display-sect:  clamp(1.875rem, 4vw,  2.875rem);  /* 30 → 46 px */
  --display-sub:   clamp(1.375rem, 2.2vw, 1.75rem);  /* 22 → 28 px */
  --display-card:  clamp(1.125rem, 1.6vw, 1.375rem); /* 18 → 22 px */
  --display-figure: clamp(2.5rem, 4.5vw, 3.25rem);   /* 40 → 52 px, Beweiszahlen */

  --text-lead:     clamp(1.0625rem, 1.4vw, 1.25rem); /* 17 → 20 px */
  --text-base:     1.0625rem;                        /* 17 px */
  --text-small:    0.9375rem;                        /* 15 px */
  --text-micro:    0.8125rem;                        /* 13 px */

  --lh-display:    1.12;
  --lh-body:       1.6;                              /* ≥ 1,5 (WCAG 1.4.8) [O5] */
  --para-gap:      1.5em;                            /* ≥ 1,5 × Zeilenhöhe */
  --track-display: -0.02em;

  /* --- Raster und Abstände (Basiseinheit 4 px) --------------------------- */
  --space-xs:   .25rem;  --space-sm:  .5rem;   --space-md:  .75rem;
  --space-lg:   1rem;    --space-xl:  1.5rem;  --space-2xl: 2rem;
  --space-3xl:  2.5rem;  --space-4xl: 3.5rem;  --space-5xl: 5rem;
  --space-band: clamp(3.5rem, 7vw, 6.25rem);        /* Bandpolster oben/unten */

  --container:  1170px;                              /* wie Referenz */
  --container-text: 960px;                           /* textführende Raster */
  --measure:    50ch;                                /* ≈ 68 echte Zeichen [O6] */
  --gutter:     clamp(1.25rem, 4vw, 2rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-card: 20px;    /* Inhalte sind weich */
  --radius-ctl:  3px;     /* Bedienelemente sind hart — der Bruch ist Absicht */
  --radius-pill: 999px;

  /* --- Motion (Werte; die Ebene selbst liegt in motion.css) -------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 520ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  text-align: left;              /* kein Blocksatz, linksbündig als Default */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display-hero); }
h2 { font-size: var(--display-sect); }
h3 { font-size: var(--display-sub); }
h4 { font-size: var(--display-card); }
/* <em> markiert im Display die farbtragende Passage — kursiv wäre hier
   synthetische Schräglage, Outfit hat keinen Kursivschnitt. */
h1 em, h2 em, h3 em, h4 em { font-style: normal; }

p { margin: 0 0 var(--para-gap); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

a { color: inherit; }
a:not([class]) { text-decoration: underline; text-underline-offset: .18em; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.tnum { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Bänder — der Polaritätswechsel ist das Tiefenmittel, nicht der Schatten
   ========================================================================== */
.rl-band { padding: var(--space-band) 0; }
.rl-band--stage      { background: var(--stage);      color: var(--on-dark); }
.rl-band--stage-soft { background: var(--stage-soft); color: var(--on-dark); }
.rl-band--paper      { background: var(--paper);      color: var(--ink-body); }
.rl-band--paper-soft { background: var(--paper-soft); color: var(--ink-body); }

.rl-band--stage h1, .rl-band--stage h2, .rl-band--stage h3, .rl-band--stage h4,
.rl-band--stage-soft h1, .rl-band--stage-soft h2,
.rl-band--stage-soft h3, .rl-band--stage-soft h4 { color: var(--on-dark); }

.rl-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.rl-wrap--text { max-width: var(--container-text); }

/* ==========================================================================
   Sektionskopf — zentrierte Achse, aber nur für kurze Blöcke [O7]
   ========================================================================== */
.rl-head { text-align: center; margin-bottom: var(--space-4xl); }
.rl-head h2 { max-width: 24ch; margin-inline: auto; }
.rl-head--wide h2 { max-width: 32ch; }
.rl-head .rl-lead {
  font-size: var(--text-lead);
  color: var(--ink-muted);
  max-width: 58ch;
  margin: var(--space-xl) auto 0;
}
.rl-band--stage .rl-head .rl-lead,
.rl-band--stage-soft .rl-head .rl-lead { color: var(--on-dark-muted); }

.rl-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  color: var(--ink-muted);
}
.rl-eyebrow--cost { color: var(--cost-ink); }
.rl-eyebrow--save { color: var(--save-ink); }
.rl-band--stage .rl-eyebrow, .rl-band--stage-soft .rl-eyebrow { color: var(--on-dark-muted); }
.rl-band--stage .rl-eyebrow--cost, .rl-band--stage-soft .rl-eyebrow--cost { color: var(--cost); }
.rl-band--stage .rl-eyebrow--save, .rl-band--stage-soft .rl-eyebrow--save { color: var(--save); }

/* Farbige Wörter in Überschriften — die Farbe trägt das Argument */
.rl-hl-cost { color: var(--cost-ink); }
.rl-hl-save { color: var(--save-ink); }
.rl-band--stage .rl-hl-cost, .rl-band--stage-soft .rl-hl-cost { color: var(--cost); }
.rl-band--stage .rl-hl-save, .rl-band--stage-soft .rl-hl-save { color: var(--save); }
/* Die Polarität hängt an der FLÄCHE, nicht nur am Band: eine dunkle Karte auf
   einem hellen Band ist eine dunkle Fläche. Ohne diesen Zweig steht die
   -ink-Variante auf #2c2c2f bzw. #000 und fällt auf 2,9 : 1 — genau der Fall,
   den [O3] verhindern soll. Für `.rl-mark--*` und die Listenzeichen ist der
   Zweig unten längst mitgeschrieben; hier hat er gefehlt. */
.rl-card--dark .rl-hl-cost, .rl-rechne .rl-hl-cost { color: var(--cost); }
.rl-card--dark .rl-hl-save, .rl-rechne .rl-hl-save { color: var(--save); }
.rl-card--dark .rl-eyebrow, .rl-rechne .rl-eyebrow { color: var(--on-dark-muted); }
.rl-card--dark .rl-eyebrow--cost, .rl-rechne .rl-eyebrow--cost { color: var(--cost); }
.rl-card--dark .rl-eyebrow--save, .rl-rechne .rl-eyebrow--save { color: var(--save); }

/* ==========================================================================
   Der Inversionsknopf — auf jeder Bühne die Gegenfarbe, immer 21:1 [O8]
   ========================================================================== */
.rl-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px;
  padding: var(--space-lg) var(--space-3xl);
  border: 0; border-radius: var(--radius-ctl);
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rl-btn__note {
  display: block; margin-top: 2px;
  font-size: var(--text-micro); font-weight: 500; opacity: .82;
}
.rl-btn--on-paper { background: var(--ink); color: var(--paper); }
.rl-btn--on-paper:hover { background: #2a2a2a; }
.rl-btn--on-stage { background: var(--paper); color: var(--ink); }
.rl-btn--on-stage:hover { background: #e6e6e6; }
.rl-btn--ghost {
  background: transparent; color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.rl-btn--block { display: flex; width: 100%; }

/* --- Die CTA-Zusage: eigene Zeile UNTER dem Knopf ------------------------
   Nicht zu verwechseln mit `.rl-btn__note` oben, das im Knopf sitzt (das
   Preiszusatz-Muster der Referenz). Die Zusage ist die Antwort auf die Frage,
   die den Klick bremst — „und dann?" — und gehört deshalb an den
   Friktionspunkt, nicht in die Schaltfläche. Wortlaut und Platzierung sind
   Festlegung Moritz (28.07.2026), begründet in design-system.md §6.1. */
.rl-btn-note {
  font-size: var(--text-micro); color: var(--ink-muted);
  margin: var(--space-md) 0 0; max-width: none;
}
.rl-band--stage .rl-btn-note, .rl-band--stage-soft .rl-btn-note { color: var(--on-dark-muted); }

/* Knopf und Zusage sind EIN Rasterfeld des Formulars. Ohne den Wrapper addieren
   sich der Rasterabstand des Formulars (--space-xl) und der eigene Rand der
   Zeile (--space-md) zu einem Loch unter dem Knopf. Der Knopf ist dort
   blockbreit (`--block`), die Zeile darunter steht deshalb zentriert — das
   stand bis zum 29.07.2026 als `style="text-align:center"` fünfmal im Markup. */
.rl-form__submit { display: grid; }
.rl-form__submit .rl-btn-note { text-align: center; }

/* Zwischen-CTA im Fließtext: der Knopf steht auf der zentrierten Achse, ohne
   Zusagezeile — die trägt nur der Hero- und der Formular-Knopf (§6.1). */
.rl-cta-block { text-align: center; }
.rl-cta-block p { margin-inline: auto; }

/* ==========================================================================
   Navigation — Kampagnenseite: Logo + Anker + ein CTA, keine Seiten-Links [O9]
   ========================================================================== */
.rl-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--stage); color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.rl-nav.is-past { background: var(--paper); color: var(--ink); border-bottom-color: var(--hairline); }
.rl-nav__inner {
  display: flex; align-items: center; gap: var(--space-2xl);
  min-height: 68px;
}
.rl-nav__logo { flex: 0 0 auto; display: flex; }
/* Die Wortmarke ist dunkelblau — auf der dunklen Bühne wird sie weiß gesetzt,
   auf der hellen bleibt sie im Original. */
.rl-nav__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.rl-nav.is-past .rl-nav__logo img { filter: none; }
.rl-nav__links { display: flex; gap: var(--space-xl); margin-left: auto; }
.rl-nav__links a {
  font-size: var(--text-small); font-weight: 500; text-decoration: none;
  opacity: .78; transition: opacity var(--dur-1) var(--ease);
}
.rl-nav__links a:hover { opacity: 1; }
.rl-nav__cta {
  min-height: 40px; padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-small);
}
.rl-nav .rl-btn--on-stage { background: var(--paper); color: var(--ink); }
.rl-nav.is-past .rl-nav__cta { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) {
  .rl-nav__links { display: none; }
  .rl-nav__cta { display: none; }
}

/* --------------------------------------------------------------------------
   Hub-Variante — nur die Startseite (ergänzt 29.07.2026)
   Die Kampagnen-LPs tragen Logo + Anker + einen CTA; mobil brauchen sie kein
   Menü, weil die Sticky-Leiste zum einzigen Ziel führt. Der Hub ist das
   Gegenteil: Verteilen IST seine Aufgabe, also trägt er echte Seiten-Links
   (drei Persona-LPs, Referenzen-Anker, Blog) — und muss sie auch mobil
   erreichbar halten. Deshalb hier, und nur hier, ein Ausklappmenü.
   Es läuft über <details>/<summary> ohne eine Zeile JavaScript: Die Regel
   „ohne JS vollständig lesbar" gilt damit auch für die Navigation.
   Die Linkzeile bricht später um als bei den LPs (1040 statt 860 px), weil
   fünf Links plus CTA mehr Platz brauchen als vier Anker plus CTA.
   -------------------------------------------------------------------------- */
.rl-nav--hub .rl-nav__links { gap: clamp(var(--space-md), 1.7vw, var(--space-xl)); }

.rl-navmenu { display: none; margin-left: auto; position: relative; }
.rl-navmenu__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;                 /* Zielgröße für den Daumen */
  cursor: pointer; list-style: none;
}
.rl-navmenu__toggle::-webkit-details-marker { display: none; }

/* Drei Balken aus einem Element: der mittlere ist das Element selbst, die
   äußeren seine Pseudoelemente. Im offenen Zustand wird der mittlere
   unsichtbar und die äußeren kreuzen sich — dieselbe Geste wie das Schließen. */
.rl-navmenu__bars { position: relative; }
.rl-navmenu__bars,
.rl-navmenu__bars::before,
.rl-navmenu__bars::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}
.rl-navmenu__bars::before, .rl-navmenu__bars::after { content: ''; position: absolute; left: 0; }
.rl-navmenu__bars::before { top: -7px; }
.rl-navmenu__bars::after  { top: 7px; }
.rl-navmenu[open] .rl-navmenu__bars { background: transparent; }
.rl-navmenu[open] .rl-navmenu__bars::before { top: 0; transform: rotate(45deg); }
.rl-navmenu[open] .rl-navmenu__bars::after  { top: 0; transform: rotate(-45deg); }

/* Das Feld trägt die Polarität der Leiste mit — auf der dunklen Bühne dunkel,
   nach dem Hero-Ende hell. Einziger Schatten außerhalb der Sticky-Leiste:
   Das Feld schwebt über dem Inhalt und muss sich von ihm lösen. */
.rl-navmenu__panel {
  position: absolute; top: calc(100% + var(--space-md)); right: 0;
  min-width: min(80vw, 20rem);
  display: grid; gap: 2px;
  padding: var(--space-lg);
  background: var(--stage); color: var(--on-dark);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.rl-navmenu__panel a:not(.rl-btn) {
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-base); font-weight: 500; text-decoration: none;
  border-radius: var(--radius-ctl);
}
.rl-navmenu__panel a:not(.rl-btn):hover { background: rgba(255, 255, 255, .07); }
.rl-navmenu__panel .rl-btn { margin-top: var(--space-md); }
.rl-nav.is-past .rl-navmenu__panel {
  background: var(--paper); color: var(--ink);
  border-color: var(--hairline);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}
.rl-nav.is-past .rl-navmenu__panel a:not(.rl-btn):hover { background: var(--paper-soft); }

@media (max-width: 1040px) {
  .rl-nav--hub .rl-nav__links, .rl-nav--hub .rl-nav__cta { display: none; }
  .rl-nav--hub .rl-navmenu { display: block; }
}

/* ==========================================================================
   Karten — 20 px Radius, flach; Tiefe kommt aus der Fläche, nicht aus Schatten
   ========================================================================== */
.rl-card {
  border-radius: var(--radius-card);
  padding: var(--space-2xl);
  background: var(--paper-soft);
  color: var(--ink-body);
}
.rl-card > *:last-child { margin-bottom: 0; }
.rl-card h3, .rl-card h4 { margin-bottom: var(--space-md); }
.rl-card p { color: var(--ink-muted); }

.rl-card--dark   { background: var(--surface-dark); color: var(--on-dark); }
.rl-card--dark p { color: var(--on-dark-muted); }
.rl-card--dark h3, .rl-card--dark h4 { color: var(--on-dark); }
.rl-card--paper  { background: var(--paper); }

/* Eine helle Karte auf der dunklen Bühne erbt sonst die weiße Schrift des
   Bandes — hier wird die Polarität innerhalb der Karte zurückgedreht. */
.rl-band--stage .rl-card:not(.rl-card--dark),
.rl-band--stage-soft .rl-card:not(.rl-card--dark) { color: var(--ink-body); }
.rl-band--stage .rl-card:not(.rl-card--dark) :is(h1, h2, h3, h4),
.rl-band--stage-soft .rl-card:not(.rl-card--dark) :is(h1, h2, h3, h4) { color: var(--ink); }
.rl-band--stage .rl-card:not(.rl-card--dark) :is(p, .rl-btn-note, .rl-note),
.rl-band--stage-soft .rl-card:not(.rl-card--dark) :is(p, .rl-btn-note, .rl-note) { color: var(--ink-muted); }
.rl-card--cost   { background: var(--cost-wash); box-shadow: inset 0 0 0 1px #f7d6d0; }
.rl-card--save   { background: var(--save-wash); box-shadow: inset 0 0 0 2px var(--save-ink); }

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

/* Markenzeichen der Karte: die Signalmarke oben */
.rl-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
  box-shadow: inset 0 0 0 2px currentColor;
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.rl-mark--cost { color: var(--cost-ink); }
.rl-mark--save { color: var(--save-ink); }
.rl-band--stage .rl-mark--cost, .rl-card--dark .rl-mark--cost { color: var(--cost); }
.rl-band--stage .rl-mark--save, .rl-card--dark .rl-mark--save { color: var(--save); }

/* ==========================================================================
   Statistikband — die dunkle Kachel der Referenz, hier für die Beweiszahlen
   ========================================================================== */
.rl-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: center;
  background: var(--surface-dark); color: var(--on-dark);
  border-radius: var(--radius-card);
  padding: var(--space-2xl) var(--space-3xl);
}
.rl-stats__label { font-family: var(--font-display); font-weight: 800; font-size: var(--display-card); }
.rl-stat { text-align: center; }
.rl-stat__value {
  font-family: var(--font-display); font-weight: 800; font-size: var(--display-sub);
  letter-spacing: var(--track-display); color: var(--save);
}
.rl-stat__caption { font-size: var(--text-small); color: var(--on-dark-muted); }
@media (max-width: 760px) {
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
  .rl-stats__label { grid-column: 1 / -1; text-align: center; }
}

/* ==========================================================================
   Ikonen-Raster mit Haarlinien-Zeilen (Referenz: „12 Bereiche")
   ========================================================================== */
.rl-iconrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-iconrow > * {
  padding: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--hairline);
}
.rl-iconrow > *:nth-child(-n+3) { border-top: 0; }
.rl-band--stage .rl-iconrow > * { border-top-color: var(--hairline-dark); }
@media (max-width: 760px) {
  .rl-iconrow { grid-template-columns: minmax(0, 1fr); }
  .rl-iconrow > *:nth-child(-n+3) { border-top: 1px solid var(--hairline); }
  .rl-iconrow > *:first-child { border-top: 0; }
}

/* ==========================================================================
   Merkmalliste — Offer-Stack, Risikoumkehr, Für-wen
   ========================================================================== */
/* Der Block sitzt auf der zentrierten Achse, der Text darin bleibt linksbündig
   — so überlebt das Front-Loading die Zentrierung [O7]. */
.rl-list { display: grid; gap: var(--space-xl); max-width: calc(var(--measure) + 2.6rem); margin-inline: auto; }
/* Die Zeile selbst trägt das Maß — sonst läuft der Text bei einspaltigen
   Listen über die volle Containerbreite (Typografie-Gesetz: ~70 Zeichen). */
/* Die Spalte ist auf die Glyphenbreite gesetzt (gemessen 15 px), damit die
   Marke am Text klebt statt in einer halbleeren Spalte zu stehen. */
.rl-list li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr);
  gap: var(--space-md); align-items: start;
  max-width: calc(var(--measure) + 1.85rem);
}
.rl-list__icon {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.5;
  color: var(--save-ink);
}
.rl-list--cost .rl-list__icon { color: var(--cost-ink); }
.rl-band--stage .rl-list__icon, .rl-card--dark .rl-list__icon { color: var(--save); }
.rl-band--stage .rl-list--cost .rl-list__icon,
.rl-card--dark .rl-list--cost .rl-list__icon { color: var(--cost); }
.rl-list__body > *:last-child { margin-bottom: 0; }
.rl-list__title { display: block; font-weight: 700; margin-bottom: var(--space-xs); }
.rl-list p { color: var(--ink-muted); }
.rl-band--stage .rl-list p, .rl-card--dark .rl-list p { color: var(--on-dark-muted); }

/* ==========================================================================
   Ablaufprotokoll — nummerierte Schritte in einer Spalte
   ========================================================================== */
/* Protokollspalte: zentriert und auf das Maß begrenzt, damit die fünf Schritte
   lesbare Zeilen behalten statt über die volle Bühnenbreite zu laufen.
   Die Zahlenspalte ist auf die gemessene Ziffernbreite gesetzt (33 px), damit
   die Schrittzahl am Text steht und nicht in einer halbleeren Spalte. */
.rl-steps { display: grid; gap: 0; max-width: calc(var(--measure) + 5rem); margin-inline: auto; }
.rl-steps li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--hairline-dark);
}
.rl-band--paper .rl-steps li, .rl-band--paper-soft .rl-steps li { border-top-color: var(--hairline); }
.rl-steps li:first-child { border-top: 0; }
.rl-steps__num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--display-sub);
  line-height: 1.1; color: var(--save);
}
.rl-band--paper .rl-steps__num, .rl-band--paper-soft .rl-steps__num { color: var(--save-ink); }
.rl-steps__body > *:last-child { margin-bottom: 0; }
.rl-steps h3 { font-size: var(--display-card); margin-bottom: var(--space-sm); }
@media (max-width: 620px) { .rl-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-md); } }

/* ==========================================================================
   Modellvergleich — drei Karten, die eigene Spalte gewinnt sichtbar
   ========================================================================== */
.rl-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
/* Weiß, damit die Karte sich vom hellgrauen Band abhebt — auf weißem Band
   trägt die Variante --on-paper die Gegenfläche. */
.rl-compare__col { border-radius: var(--radius-card); padding: var(--space-2xl); background: var(--paper); }
.rl-band--paper .rl-compare__col { background: var(--paper-soft); }
.rl-compare__col--win,
.rl-band--paper .rl-compare__col--win { background: var(--save-wash); box-shadow: inset 0 0 0 2px var(--save-ink); }
/* Leerer Platzhalter, damit die Kriterienzeilen aller drei Spalten fluchten. */
.rl-compare__badge--empty { visibility: hidden; }
.rl-compare__title { font-size: var(--display-card); margin-bottom: var(--space-xs); }
.rl-compare__col--win .rl-compare__title { color: var(--save-ink); }
.rl-compare__crit {
  display: block; margin-top: var(--space-xl);
  font-size: var(--text-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.rl-compare__val { margin: var(--space-xs) 0 0; font-size: var(--text-small); color: var(--ink-body); }
/* Die Risikozeile trägt die Signalfarbe — sie muss die Grundfarbe schlagen. */
.rl-compare__val.rl-hl-cost { color: var(--cost-ink); }
.rl-compare__val.rl-hl-save { color: var(--save-ink); }
.rl-compare__badge {
  display: inline-block; margin-bottom: var(--space-lg);
  padding: 4px 10px; border-radius: var(--radius-ctl);
  font-size: var(--text-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--save-ink); color: #fff;
}
@media (max-width: 900px) { .rl-compare { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Case-Karten — Gründerfoto, Marke, Ersparnis als dominantes Element
   ========================================================================== */
.rl-case {
  background: var(--paper); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.rl-case__photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.rl-case__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); flex: 1; }
.rl-case__logo { height: 22px; width: auto; object-fit: contain; object-position: left center; }
.rl-case__product { font-size: var(--text-small); color: var(--ink-muted); margin: 0; }
.rl-case__figure {
  font-family: var(--font-display); font-weight: 800; font-size: var(--display-figure);
  line-height: 1; letter-spacing: var(--track-display); color: var(--save-ink);
  margin-top: auto;
}
.rl-case__outcome {
  font-size: var(--text-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   FAQ — Zeilen auf der dunklen Bühne
   ========================================================================== */
.rl-faq { display: grid; gap: var(--space-md); max-width: var(--container-text); margin-inline: auto; }
.rl-faq details {
  background: var(--surface-row); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-ctl);
}
.rl-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-xl); cursor: pointer; list-style: none;
  font-weight: 500; color: var(--on-dark);
}
.rl-faq summary::-webkit-details-marker { display: none; }
/* Der Pfeil bedeutet nichts außer „aufklappen" — er ist deshalb kein
   Kostensignal, sondern läuft mit den übrigen Bedienzeichen in Grün. */
.rl-faq summary::after {
  content: ''; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--save); border-bottom: 2px solid var(--save);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-2) var(--ease);
}
.rl-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.rl-faq__answer { padding: 0 var(--space-xl) var(--space-xl); }
.rl-faq__answer p { color: var(--on-dark-muted); }

/* ==========================================================================
   Formular — einspaltig, Radiobuttons, Inline-Validierung
   ========================================================================== */
.rl-form { display: grid; gap: var(--space-xl); max-width: 34rem; text-align: left; }
.rl-field { display: grid; gap: var(--space-sm); }
.rl-field > label { font-weight: 700; font-size: var(--text-small); }
.rl-field input[type='text'], .rl-field input[type='email'], .rl-field textarea {
  width: 100%; min-height: 52px;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-control); border-radius: var(--radius-ctl);
  background: var(--paper); color: var(--ink-body);
  font-family: var(--font-body); font-size: var(--text-base);
}
/* Mehrzeiliges Feld: zwei Zeilen Höhe, nur vertikal veränderbar — waagerechtes
   Ziehen würde die Einspaltigkeit des Formulars aufbrechen. */
.rl-field textarea { line-height: var(--lh-body); resize: vertical; }
.rl-field :is(input, textarea):focus { border-color: var(--focus); }
.rl-field :is(input, textarea)[aria-invalid='true'] { border-color: var(--cost-ink); border-width: 2px; }
/* Fehlertext trägt Ink, nie die Signalfarbe allein (WCAG 1.4.1) — und muss
   die gedämpfte Kartenfarbe schlagen. */
.rl-form .rl-error,
.rl-band--stage .rl-card .rl-form .rl-error { font-size: var(--text-small); color: var(--ink); font-weight: 700; }
.rl-error:empty { display: none; }

.rl-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.rl-fieldset legend { padding: 0; font-weight: 700; font-size: var(--text-small); margin-bottom: var(--space-sm); }
.rl-radio {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid var(--border-control); border-radius: var(--radius-ctl);
  cursor: pointer; background: var(--paper);
  transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rl-radio:has(input:checked) { border-color: var(--save-ink); box-shadow: inset 0 0 0 1px var(--save-ink); }
.rl-radio input { width: 20px; height: 20px; accent-color: var(--save-ink); flex: 0 0 auto; }
.rl-form__fine { font-size: var(--text-micro); color: var(--ink-muted); }

/* Honigtopf — das Feld, das nur ein Bot ausfüllt.
   Bewusst NICHT `display:none` und nicht `hidden`: Formular-Bots werten beides
   als „überspringen" aus, und dann fängt die Falle nichts. Off-Screen bleibt es
   im DOM und im Formular-Datensatz. `aria-hidden` plus `tabindex=-1` halten es
   von Screenreadern und der Tabreihenfolge fern — ein Mensch trifft es nicht. */
.rl-hp {
  position: absolute !important;
  left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Versandfehler. Der Erfolgsfall trägt Save-Ink (siehe .rl-formstatus), der
   Fehlerfall Cost-Ink — dieselbe Polarität wie in der Gegenrechnung. Der Text
   darf nie allein über die Farbe sprechen (WCAG 1.4.1), deshalb steht die
   Aussage vollständig im Satz. */
.rl-formstatus--fehler {
  background: var(--cost-wash);
  box-shadow: inset 0 0 0 2px var(--cost-ink);
}

/* ==========================================================================
   Sichtbare Platzhalter — sollen wie offene Aufgaben aussehen, nicht wie Design
   ========================================================================== */
.rl-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--border-control); border-radius: var(--radius-card);
  padding: var(--space-2xl); color: var(--ink-muted);
  font-size: var(--text-small); font-weight: 500;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.025) 10px 20px);
}
.rl-band--stage .rl-ph, .rl-band--stage-soft .rl-ph {
  color: var(--on-dark-muted); border-color: #8a8a8a;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.04) 10px 20px);
}

/* ==========================================================================
   Logoleiste
   ========================================================================== */
.rl-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); }
.rl-logos img {
  height: 34px; width: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.35) brightness(.72);
  transition: filter var(--dur-2) var(--ease);
}
.rl-logos a:hover img, .rl-logos img:hover { filter: none; }
/* Wand-Variante: zehn Marken passen in keine Zeile. Statt sie flexen zu lassen
   (der Umbruch fällt dann dorthin, wo die Summe der Breiten zufällig reißt, und
   die letzte Zeile trägt ein einzelnes Logo), steht die Wand in einem festen
   Raster — fünf und fünf, sichtbar als Wand statt als gescheiterte Leiste. */
.rl-logos--wall {
  display: grid; grid-template-columns: repeat(5, auto);
  justify-content: center; justify-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem) clamp(1.25rem, 3.4vw, 2.75rem);
}
.rl-logos--wall img { height: 30px; }
@media (max-width: 760px) {
  .rl-logos--wall { grid-template-columns: repeat(3, auto); }
  .rl-logos--wall img { height: 26px; }
}
@media (max-width: 520px) { .rl-logos--wall { grid-template-columns: repeat(2, auto); } }
.rl-logos__label {
  display: block; text-align: center; margin: 0 0 var(--space-xl); max-width: none;
  font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   Sticky-CTA mobil — der einzige Ort mit Schatten
   ========================================================================== */
.rl-sticky {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom));
  background: var(--stage);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
}
.rl-sticky .rl-btn { width: 100%; }
@media (max-width: 860px) { .rl-sticky { display: block; } body { padding-bottom: 84px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.rl-footer { background: var(--stage-soft); color: var(--on-dark-muted); padding: var(--space-4xl) 0; }
.rl-footer a { text-decoration: none; }
.rl-footer a:hover { text-decoration: underline; }
.rl-footer__row { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   Hub-Variante des Fußes (ergänzt 29.07.2026)
   Die Spokes tragen im Fuß genau zwei Dinge: Wortmarke und Rechtslinks — dafür
   reicht `.rl-footer__row` mit `space-between`. Der Hub trägt zusätzlich neun
   interne Links, und mit `space-between` verteilten die sich über die volle
   Breite: „Sourcing-Blog" ganz links, „Kontakt" ganz rechts, dazwischen ein
   leeres Feld. Der Umbruch fiel dorthin, wo die Summe der Textbreiten zufällig
   riss — dieselbe Fehlerart wie bei der Logowand, die deshalb `--wall` bekam.
   Also auch hier: festes Raster statt Flex-Verteilung. Die Spalten haben eine
   Überschrift, damit die Links eine Ordnung tragen statt einer Reihenfolge.
   -------------------------------------------------------------------------- */
.rl-footer--hub { padding-block: var(--space-5xl) var(--space-2xl); }
.rl-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-4xl) var(--space-3xl);
  align-items: start;
}
.rl-footer__brand img { margin-bottom: var(--space-xl); }
.rl-footer__brand p { max-width: 36ch; margin-bottom: var(--space-lg); }
/* `address` ohne Kursive: die Auszeichnung ist semantisch gemeint, nicht optisch. */
.rl-footer__brand address { font-style: normal; font-size: var(--text-small); }

/* Spaltenüberschrift bewusst KEIN <h*>: Der Fuß darf die Gliederung der Seite
   nicht verlängern — der Outline-Test liest sonst „Unternehmen" als Kapitel. */
.rl-footer__title {
  margin: 0 0 var(--space-lg); max-width: none;
  font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark);
}
.rl-footer__list { display: grid; gap: var(--space-md); font-size: var(--text-small); }

.rl-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) var(--space-2xl); justify-content: space-between;
  margin-top: var(--space-4xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--text-small);
}
.rl-footer__bar p { margin: 0; max-width: none; }

@media (max-width: 900px) {
  .rl-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
  .rl-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .rl-footer__cols { grid-template-columns: minmax(0, 1fr); }
}
.rl-footer__legal { display: flex; gap: var(--space-xl); font-size: var(--text-small); }
.rl-footer img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .85; }

/* ==========================================================================
   Landingpage-Bausteine — seitenübergreifend
   Ursprünglich Seiten-CSS der EK-Offensive; ab dem Vier-Seiten-Build (28.07.2026)
   im Designsystem, damit vier Seiten nicht viermal dasselbe CSS tragen.
   Seiten-CSS enthält nur noch, was genau eine Seite braucht.
   ========================================================================== */

/* --- Hero: zentrierte Achse, drei Breiten für unterschiedlich lange Headlines */
.rl-hero { text-align: center; padding-top: var(--space-4xl); }
.rl-hero h1 { max-width: 18ch; margin-inline: auto; }
.rl-hero--mid h1  { max-width: 24ch; }
.rl-hero--wide h1 { max-width: 30ch; }
.rl-hero__sub {
  font-size: var(--text-lead); color: var(--on-dark-muted);
  max-width: 54ch; margin: var(--space-xl) auto 0;
}
.rl-hero__cta { margin-top: var(--space-3xl); }
.rl-hero__trust {
  display: inline-flex; align-items: center; gap: var(--space-lg);
  margin-top: var(--space-4xl); padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
  border-radius: var(--radius-pill); background: var(--surface-dark);
  text-align: left;
}
.rl-hero__trust img {
  width: 52px; height: 52px; border-radius: var(--radius-pill); flex: 0 0 auto;
  object-fit: cover; object-position: center;   /* Kopf sitzt mittig im Kreis */
}
/* Kein `max-width`: die Box soll auf die Breite ihrer LÄNGSTEN ZEILE schrumpfen,
   damit das Polster rechts genauso groß ist wie links. Eine max-width hielte die
   Box auf dem Kappwert und ließe neben der kurzen zweiten Zeile eine leere
   Restbreite stehen. Der Umbruch wird deshalb gesetzt (`.rl-hero__br`), nicht
   gerechnet — dieselbe Lösung wie beim Ø-Block der EK-Offensive. Bei
   Textänderung neu setzen. Vor dem <br> steht ein Leerzeichen, damit die Wörter
   bei ausgeblendetem Umbruch nicht zusammenlaufen. */
.rl-hero__trust p { margin: 0; font-size: var(--text-small); color: var(--on-dark); }

/* Mobil: der Hero wird gestrafft, damit die Logoleiste im ersten Viewport
   anschneidet (False-Floor-Verbot gilt auf Desktop UND Mobil). */
@media (max-width: 640px) {
  .rl-hero { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
  /* Lange Headlines (--mid/--wide) laufen bei 375 px auf sieben, acht Zeilen und
     drücken die Logoleiste aus dem ersten Viewport. Eine Stufe kleiner hält den
     Auftritt und rettet den Scroll-Signifier — die kurze Standardvariante
     bleibt unverändert. */
  .rl-hero--mid h1, .rl-hero--wide h1 { font-size: clamp(1.6875rem, 7vw, 2.25rem); }
  .rl-hero__sub { margin-top: var(--space-lg); }
  .rl-hero__cta { margin-top: var(--space-2xl); }
  .rl-hero__trust {
    margin-top: var(--space-2xl); gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  }
  .rl-hero__trust img { width: 42px; height: 42px; }
  /* Der gesetzte Umbruch trägt auch mobil (ausgemessen bei 390 px und 320 px):
     beide Zeilen passen, der Chip bleibt zweizeilig und hugt weiter seine
     längste Zeile. Wird es enger, bricht die längere Zeile zusätzlich um —
     das Polster bleibt links und rechts trotzdem gleich, weil keine
     max-width die Box aufspannt. */
  .rl-hero__trust p { font-size: var(--text-micro); }
}

/* --- Offer-Stack zweispaltig (die Zeile behält ihr Maß aus .rl-list) */
.rl-offergrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-4xl); max-width: none; }
@media (max-width: 820px) { .rl-offergrid { grid-template-columns: minmax(0, 1fr); } }

/* --- Preisblock: Argument links, die Rechnung rechts – so bleibt keine tote
   Fläche neben dem auf das Maß begrenzten Fließtext. */
.rl-price {
  margin-top: var(--space-4xl); padding: var(--space-3xl);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-4xl); align-items: start;
}
.rl-price h3 { margin-bottom: var(--space-lg); }
.rl-price__text > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .rl-price { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
}

/* --- Die Rechnung: Positionen gegeneinander, Ergebniszeile in der Ersparnisfarbe */
.rl-rechne { background: #000; border-radius: var(--radius-card); padding: var(--space-2xl); }
.rl-rechne__rows { margin: 0 0 var(--space-lg); display: grid; gap: 0; }
.rl-rechne__rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-md) 0; border-top: 1px solid var(--hairline-dark);
}
.rl-rechne__rows > div:first-child { border-top: 0; }
.rl-rechne dt { font-size: var(--text-small); color: var(--on-dark-muted); }
.rl-rechne dd {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--display-card); letter-spacing: var(--track-display); color: var(--on-dark);
  white-space: nowrap;
}
.rl-rechne__sum { border-top: 2px solid var(--save) !important; }
.rl-rechne__sum dt { color: var(--on-dark); font-weight: 700; }
.rl-rechne__sum dd { font-size: var(--display-sub); color: var(--save); }

/* --- Zusatztakt unter einem Ablaufschritt (Dauer, Bedingung): eigener Takt
   statt Nachsatz im Absatz. Grüne Kante, weil belegte Angabe. */
.rl-steps__note {
  margin-top: var(--space-lg); padding-left: var(--space-lg);
  border-left: 2px solid var(--save);
  font-size: var(--text-small); font-weight: 500;
}
.rl-steps .rl-steps__note { color: var(--on-dark); }
.rl-band--paper .rl-steps .rl-steps__note,
.rl-band--paper-soft .rl-steps .rl-steps__note { color: var(--ink-body); border-left-color: var(--save-ink); }

/* --- Personenblock der Beweis-Sektion: Bild links, Text rechts */
.rl-volker { margin-top: var(--space-5xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4xl); align-items: start; }
/* Folgt der Block direkt auf den Sektionskopf, trägt dessen Rand den Abstand. */
.rl-head + .rl-volker { margin-top: 0; }
@media (max-width: 820px) { .rl-volker { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
.rl-volker h3 { margin-bottom: var(--space-lg); }
/* Der Verknappungssatz schließt den Block ab – abgesetzt, aber im Textfluss,
   weil er dieselbe Aussage zu Ende führt: es gibt nur einen Volker. */
.rl-volker__limit {
  margin-top: var(--space-2xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
  color: var(--ink-body); font-weight: 500;
}
.rl-band--stage .rl-volker__limit, .rl-band--stage-soft .rl-volker__limit {
  border-top-color: var(--hairline-dark); color: var(--on-dark);
}

/* --- Qualifizierungspaar „passt / passt nicht" */
.rl-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
@media (max-width: 760px) { .rl-fit { grid-template-columns: minmax(0, 1fr); } }

/* --- Abschluss-Sektion mit Formular im Scheinwerfer */
.rl-final { text-align: center; }
.rl-final__text { max-width: 60ch; margin: var(--space-xl) auto 0; color: var(--on-dark-muted); font-size: var(--text-lead); }
.rl-formcard { max-width: 40rem; margin: var(--space-4xl) auto 0; text-align: left; }
.rl-formcard h3 { margin-bottom: var(--space-xl); }
.rl-formstatus {
  margin-top: var(--space-xl); padding: var(--space-lg);
  border-radius: var(--radius-ctl); background: var(--save-wash);
  box-shadow: inset 0 0 0 2px var(--save-ink); font-weight: 500;
}
/* Lange CTA-Labels brechen in der Sticky-Leiste um – das Polster darf dann
   nicht zusätzlich Breite fressen. */
@media (max-width: 430px) { .rl-sticky .rl-btn { padding-inline: var(--space-lg); } }

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */
.rl-center { text-align: center; }
.rl-center p { margin-inline: auto; }
.rl-mt-2xl { margin-top: var(--space-2xl); }
.rl-mt-3xl { margin-top: var(--space-3xl); }
.rl-mt-4xl { margin-top: var(--space-4xl); }
.rl-note {
  font-size: var(--text-small); color: var(--ink-muted);
}
.rl-band--stage .rl-note, .rl-band--stage-soft .rl-note { color: var(--on-dark-muted); }