/* ============================================================
   EVERLOOM Käufer-Test — Styles
   Tokens 1:1 aus dem EVERLOOM Design System übernommen
   (design-system/tokens/colors.css, typography.css, fonts.css)
   ============================================================ */

/* Fonts lokal gehostet statt per Google-CDN geladen: Google Fonts dynamisch
   einzubinden übermittelt bei jedem Seitenaufruf die Besucher-IP an Google-
   Server in den USA, ganz ohne Einwilligung — das war Auslöser der großen
   deutschen Abmahnwelle seit dem LG-München-I-Urteil 2022. Mit lokalen
   Dateien (assets/fonts/, aus den offiziellen @fontsource-Font-Paketen)
   geht keine Anfrage mehr an Google, das Thema ist damit erledigt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2');
}

/* Absicherung für das hidden-Attribut: mehrere Formular-Elemente setzen
   selbst "display: flex", was [hidden] sonst mit gleicher Spezifität
   überschreiben und unsichtbar-gemachte Elemente trotzdem anzeigen würde
   (Bug, der beim Hero-Formular aufgefallen ist, betraf aber alle Formulare). */
[hidden] { display: none !important; }

:root {
  /* --- Brand (verbindlich, aus colors.css) --- */
  --everloom-ink: #0F2F2A;
  --everloom-teal: #3FA989;
  --everloom-teal-strong: #348C72;
  --everloom-bright: #5BCFB0;
  --everloom-neon: #6BFFD2;
  --everloom-ink-90: #1B3D37;
  --everloom-ink-80: #2A4D47;
  --everloom-teal-12: #E4F7F1;
  --everloom-teal-20: #D5F0E7;

  --everloom-bg: #F2F6F4;
  --everloom-surface: #FFFFFF;
  --everloom-fill: #E8F1ED;
  --everloom-border: #D9E2DF;
  --everloom-border-strong: #C3D1CC;
  --everloom-neutral-fill: #E9ECEC;
  --everloom-neutral-fill-strong: #DBE1E0;

  --everloom-text-primary: #0F2F2A;
  --everloom-text-secondary: #45605A;
  --everloom-text-muted: #7E938D;
  --everloom-text-on-ink: #FFFFFF;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Schibsted Grotesk', var(--font-sans);

  /* --- Spacing / Radii / Shadows (aus spacing.css) --- */
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;
  --radius-card: 16px; --radius-card-lg: 24px; --radius-md: 12px; --radius-control: 10px; --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(15, 47, 42, 0.06);
  --shadow-card-lg: 0 8px 32px rgba(15, 47, 42, 0.08);
  --shadow-raised: 0 8px 24px rgba(15, 47, 42, 0.10);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 200ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--everloom-text-primary);
  background: var(--everloom-bg);
  line-height: 1.5;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- Consent Banner ---------- */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--everloom-ink); color: var(--everloom-text-on-ink);
  padding: 20px; box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.consent-banner__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.consent-banner__text { font-size: 13px; color: #D5F0E7; max-width: 640px; }
.consent-banner__text a { color: var(--everloom-neon); }
.consent-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }

/* Pill-Buttons — visuelle Anleihe bei almedia.co (durchgehend abgerundete CTAs),
   passt zum ohnehin vorhandenen --radius-pill-Token im EVERLOOM-System. */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  padding: 13px 24px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.btn:hover { opacity: .92; }
.btn--primary {
  background: var(--everloom-bright); color: var(--everloom-ink);
}
.btn--primary:hover {
  box-shadow: 0 0 0 4px rgba(107, 255, 210, 0.22), 0 4px 20px rgba(107, 255, 210, 0.3);
  transform: translateY(-1px);
}
.btn--accent { background: var(--everloom-teal); color: #FFFFFF; }
.btn--quiet { background: var(--everloom-neutral-fill); color: var(--everloom-text-primary); }

/* Chat 20.08.2026: einziger Hero-CTA, springt zum Rechner statt direkt zur
   E-Mail zu fragen — bewusst größer/dicker als der Standard-Button, das ist
   die einzige Handlung, die im Hero passieren soll. Sofortiger Glow statt nur
   bei Hover, damit er in der garantiert gelesenen Zone auch wirklich auffällt. */
.btn--hero-cta {
  padding: 20px 36px; font-size: 17px; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(107, 255, 210, 0.18), 0 8px 28px rgba(107, 255, 210, 0.28);
}
.btn--hero-cta:hover {
  box-shadow: 0 0 0 5px rgba(107, 255, 210, 0.26), 0 10px 32px rgba(107, 255, 210, 0.36);
}

/* ---------- Sticky Nav (eigenständig, oberhalb des Hero-Videos) ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--everloom-ink);
  padding: 16px 20px;
}
.site-nav__inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.hero__logo { height: 28px; }

/* Status-Marker in der Kopfleiste (02.09.2026). Bewusst ohne Kapsel und ohne
   Statuspunkt: der gruene Punkt ist das uebliche "System laeuft"-Signal und sagt
   hier das Gegenteil dessen, was gemeint ist. Stattdessen dieselbe Label-Typografie
   wie .overline, damit der Marker zur Seite gehoert statt wie eine fremde
   Komponente zu wirken. */
.site-nav__status {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* ---------- Hero (Video-Hintergrund, Format 1:1 von der echten Seite) ---------- */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
/* Verlauf links->rechts: Text links gut lesbar, Bild rechts sichtbar. Werte 1:1
   von der echten Seite übernommen. */
.hero__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 47, 42, 0.82) 0%, rgba(15, 47, 42, 0.68) 42%, rgba(15, 47, 42, 0.44) 100%);
}
/* Neon-Glow: rein dekorativ, gedeckt/geblurrt, kein Flächenfüll (CI-Regel: Neon = glow-only) */
.hero__glow {
  position: absolute; top: -240px; right: -200px; pointer-events: none;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(107, 255, 210, 0.12) 0%, rgba(107, 255, 210, 0) 66%);
  filter: blur(4px);
}

.hero__content { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; width: 100%; text-align: center; }

/* KI-Kennzeichnung: offizielles EU-Label-Icon, klein unten rechts am Video
   (Art. 50 AI Act). Eigenes Icon ist bewusst transparent (helle Kreisfläche
   bei 50% Deckkraft, dunkle "AI"-Schrift) — gegen ein dunkles Video-Ink
   verschwindet das praktisch. Deshalb ein einfacher, heller Kreis-Chip
   dahinter: die dunkle "AI"-Schrift bekommt garantierten Kontrast, ganz
   ohne zusätzliche Beschriftung. Hinweis: bei sichtbarem Cookie-Banner beim
   allerersten Aufruf kann die Ecke kurz überdeckt sein, bis der Banner
   bestätigt wird. */
.hero__ai-label-wrap {
  position: absolute; right: 20px; bottom: 20px; z-index: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: bottom var(--duration-base, 0.2s) var(--ease-out, ease);
}
/* Solange der Cookie-Banner offen ist, deckt er die untere rechte Ecke ab —
   die KI-Kennzeichnung rückt so lange über den Banner (siehe script.js). */
body.consent-banner-open .hero__ai-label-wrap {
  bottom: calc(20px + var(--consent-banner-height, 0px));
}
.hero__ai-label {
  height: 30px; width: auto;
}

.overline {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--everloom-bright); font-weight: 600; margin-bottom: 16px;
}
.hero__headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.12; letter-spacing: -0.025em;
  max-width: 880px; margin: 0 auto 22px;
  /* 02.09.2026: balance verhindert, dass die letzte Zeile als einzelnes Wort
     haengen bleibt (die neue Headline hat eine lange erste Zeile). */
  text-wrap: balance;
}
.hero__sub {
  font-size: 19px; line-height: 1.58; color: rgba(255,255,255,0.82);
  max-width: 680px; margin: 0 auto 36px;
}
/* Einziger "kein Live-Produkt"-Hinweis: klein, unaufdringlich, direkt unter dem CTA.
   02.09.2026 bewusst als Label in Versalien beibehalten (Alex): in der
   Validierungsphase muss sichtbar sein, dass die Plattform noch nicht steht. */
.hero__coming-soon {
  margin-top: var(--space-4); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}

@media (min-width: 640px) {
  .hero__headline { font-size: 48px; max-width: 940px; }
  .hero__sub { font-size: 20px; max-width: 720px; }
}
@media (min-width: 900px) {
  .hero__headline { font-size: 56px; max-width: 1140px; }
  .hero__sub { font-size: 21px; max-width: 760px; }
}

/* ---------- Produkt-Fläche (hell) ---------- */
.section { max-width: 960px; margin: 0 auto; padding: var(--space-20) 20px; text-align: center; }
.section--narrow { max-width: 720px; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.overline--dark { color: var(--everloom-teal-strong); }
.section__headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; margin-bottom: var(--space-5);
}
.section__intro {
  max-width: 560px; margin: 0 auto var(--space-12);
  font-size: 17px; color: var(--everloom-text-secondary); line-height: 1.6;
}

/* ---------- Die Opportunität: helle Karten mit Teal-Rahmen statt satter
   Farbflächen (auf Wunsch), plus dezenter Glow-Blob im Hintergrund. Eigene
   Hintergrundfarbe (--everloom-fill) grenzt die Sektion klar vom Rechner
   darunter ab. ---------- */
.section--opportunity {
  position: relative; overflow: hidden;
  max-width: none; padding: var(--space-20) 20px; text-align: center;
  background: var(--everloom-fill);
}
/* 16.09.2026: Zweite Glow-Leiche, gleicher Fall wie bei .section--learn.
   Seit dem 04.09. abgeschaltet, belegte aber weiter das Pseudo-Element des
   Abschnittstrenners. Geloescht. */
.opportunity { position: relative; max-width: 1080px; margin: 0 auto; text-align: center; }

.opportunity__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6); margin: var(--space-10) 0 var(--space-10);
}
.opportunity__card {
  text-align: left;
  background: var(--everloom-surface); color: var(--everloom-text-primary);
  border: 1.5px solid var(--everloom-teal-20);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-card);
}
.opportunity__number {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 44px; color: var(--everloom-teal-strong); margin-bottom: var(--space-3);
}
.opportunity__card p { font-size: 16px; color: var(--everloom-text-secondary); margin-bottom: 10px; line-height: 1.5; }
.opportunity__source { font-size: 13px; color: var(--everloom-text-muted); }
.opportunity__closing {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--everloom-text-primary);
  max-width: 660px; margin: 0 auto;
}

/* ---------- Kaufpreisrechner: eine Karte (Slider + Ergebnis). Eigene weiße
   Fläche mit Trennlinie oben, über die volle Breite (nicht nur die schmale
   Textspalte), damit die Sektion klar von "Die Opportunität" abgesetzt ist.
   Chat 20.08.2026: bekommt jetzt ein eigenes Anmeldeformular direkt unter dem
   Ergebnis (siehe .signup-form unten) — das ist seit dem Hero-CTA-Umbau der
   Hauptlande- und -conversion-Punkt der Seite, deshalb scroll-margin-top,
   damit der Sprung vom Hero-Button nicht hinter dem Sticky-Header landet. */
.section-band {
  background: var(--everloom-surface);
  border-top: 1px solid var(--everloom-border);
}
#rechner { scroll-margin-top: 84px; }
.calc-card {
  text-align: left;
  background: var(--everloom-bg); border: 1px solid var(--everloom-border);
  border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card);
  padding: var(--space-8);
  margin-bottom: var(--space-4);
}
.calc__row {
  display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6);
}
.calc__row label {
  font-size: 15px; color: var(--everloom-text-secondary); flex-shrink: 0; white-space: nowrap;
}
.calc__row input[type="range"] {
  flex: 1; accent-color: var(--everloom-teal); height: 4px; cursor: pointer;
}
.calc__row output {
  font-family: var(--font-sans); font-weight: 700; font-size: 17px;
  color: var(--everloom-teal-strong); min-width: 100px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc__result-box {
  background: var(--everloom-ink-90); border: 1px solid var(--everloom-ink-80);
  border-radius: var(--radius-md); padding: var(--space-6);
  color: #FFFFFF;
}
.calc__result-label {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8FA9A2; font-weight: 600; margin-bottom: 8px;
}
.calc__result {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  color: #FFFFFF; margin-bottom: var(--space-3);
}
.calc__result strong { color: var(--everloom-neon); font-weight: 700; }
.calc__bank { font-size: 16px; color: #C8DDD6; }
.calc__bank strong { color: #FFFFFF; }
.calc__disclaimer {
  font-size: 12px; line-height: 1.5; color: var(--everloom-text-muted); text-align: center;
  margin-top: var(--space-4);
}

/* ---------- Anmeldeformular (eine Instanz, dunkel, am Seitenende) ---------- */
.signup-form__lead { font-size: 14px; color: var(--everloom-text-secondary); margin-bottom: var(--space-3); }
.signup-form__lead--dark { color: rgba(255,255,255,0.78); }

.signup-form { margin-bottom: 12px; }
/* Etwas Abstand zum Disclaimer darüber, damit der CTA als eigener Schritt
   wirkt statt als Fortsetzung des Fließtexts. */
/* Sitzt jetzt in .quiz-box und füllt sie, die Breite gibt die Box vor. */
.signup-form--rechner { margin: 0; max-width: none; }

/* Chat 31.08.2026: zwei Fragen vor der E-Mail im Rechner-Formular — Branche
   als Dropdown (deckt die ganze Branchen-Liste ab), Ausbildung als Antipp-
   Buttons (nur 4 klare Optionen, Buttons bleiben da die schnellere Wahl).
   Beide in einer eigenen Karte gruppiert, damit "das ist ein zusammen-
   gehöriger Quiz-Schritt" auch optisch klar ist, statt lose zu wirken. */
.signup-form__quiz {
  background: var(--everloom-bg); border: 1px solid var(--everloom-border);
  border-radius: var(--radius-card); padding: var(--space-6);
  margin-bottom: var(--space-5); text-align: left;
}
.quiz-question { border: none; padding: 0; margin: 0; }
/* Gleicher Abstand zwischen allen drei Schritten: 1 -> 2 kommt über
   .signup-form__quiz (Schritt 1 steht außerhalb des Formulars), 2 -> 3 hier. */
.quiz-question + .quiz-question { margin-top: var(--space-8); }
.quiz-question legend {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--everloom-text-primary); line-height: 1.4;
  margin-bottom: var(--space-3); padding: 0; width: 100%;
}
.quiz-question__step {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--everloom-teal-strong); font-weight: 700; margin-bottom: 6px;
}
/* Chat 31.08.2026: Regler, beide Fragen und die E-Mail-Zeile in einer Box.
   Vorher drei verschieden breite Blöcke, die nicht als ein Ablauf lasen. */
.quiz-box {
  background: var(--everloom-surface);
  border: 1px solid var(--everloom-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  max-width: 560px; margin: 0 auto;
  text-align: left;
}
.quiz-box__divider {
  border: none; border-top: 1px solid var(--everloom-border);
  margin: var(--space-6) 0;
}
/* Chat 31.08.2026: Große 1/2/3 links neben jeder Frage. Zweck ist nicht Dekoration,
   sondern dass man auf einen Blick sieht, wie kurz das Quiz ist. Greift bewusst das
   Zahlen-Motiv der Opportunitäts-Karten weiter oben auf (große Ziffern in Teal).
   Die Nummer liegt absolut, damit sie auch bei mehrzeiligen Fragen oben bleibt und
   der gesamte Schrittinhalt an derselben Kante beginnt. */
.quiz-step { padding-left: 48px; }
/* Die Ziffer hängt bewusst am Titel-Element, nicht am Schritt-Container: Bei
   <fieldset> beginnt der Bezugsrahmen für absolute Positionierung unterhalb der
   <legend>, bei einem normalen <div> nicht. Am Container ausgerichtet lagen 2 und 3
   dadurch tiefer als die 1, obwohl die Zahlenwerte identisch waren.
   Die Ziffer wird auf der Mitte der ERSTEN Textzeile zentriert, also auch bei
   zweizeiligen Fragen auf dem Handy. Der Bezug ist --quiz-title-line (Zeilenhöhe des
   Fragetexts), NICHT em: em würde gegen die 32px der Ziffer rechnen und sie zu tief
   setzen.
   Feste Breite + tabular-nums, weil die schmale 1 sonst optisch eingerückt wirkt. */
.quiz-step { --quiz-title-line: 21px; } /* 15px Schrift x 1,4 Zeilenhöhe */
.quiz-step__title, .quiz-step legend { position: relative; }
.quiz-step__num {
  position: absolute; left: -48px; top: calc(var(--quiz-title-line) / 2);
  transform: translateY(-50%);
  width: 34px; text-align: center; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--everloom-teal-strong);
}
.quiz-step__title {
  display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--everloom-text-primary); line-height: 1.4; margin-bottom: var(--space-3);
}
/* Die frühere Fragen-Karte hatte einen eigenen Hintergrund. In der gemeinsamen
   Box wäre das eine Karte in der Karte, deshalb hier flach. */
.quiz-box .signup-form__quiz {
  background: none; border: none; border-radius: 0;
  padding: 0; margin-top: var(--space-8); margin-bottom: 0;
}
.quiz-box .calc__disclaimer { text-align: left; margin-top: var(--space-4); }
.quiz-box .signup-form__consent { max-width: none; }
.quiz-group { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-pill {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--everloom-border-strong); background: var(--everloom-surface);
  color: var(--everloom-text-secondary); cursor: pointer; transition: all 0.15s ease;
}
.quiz-pill:hover { border-color: var(--everloom-teal); color: var(--everloom-text-primary); }
.quiz-pill.is-selected {
  background: var(--everloom-teal); border-color: var(--everloom-teal); color: #FFFFFF;
}
.quiz-select {
  width: 100%; font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 12px 40px 12px 16px; border-radius: var(--radius-control);
  border: 1.5px solid var(--everloom-border-strong); background: var(--everloom-surface);
  color: var(--everloom-text-primary); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2345605A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color 0.15s ease;
}
.quiz-select:hover, .quiz-select:focus { border-color: var(--everloom-teal); outline: none; }
.quiz-select option[value=""] { color: var(--everloom-text-muted); }

/* E-Mail-Schritt bleibt im DOM sichtbar, wird nur gesperrt/entsperrt statt
   ein-/ausgeblendet (siehe index.html-Kommentar). */
.signup-form__step2 { transition: opacity 0.2s ease; }
.signup-form__step2.is-locked .signup-form__row,
.signup-form__step2.is-locked .signup-form__submit,
.signup-form__step2.is-locked .signup-form__consent { opacity: 0.4; pointer-events: none; }
.signup-form__lead--lock-hint { transition: color 0.15s ease; }

.signup-form__row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
/* Feedback 06.09.2026: Die Einwilligung steht jetzt VOR dem Absendebutton.
   Der Button ist dadurch kein Zeilenelement mehr, sondern steht allein
   darunter und braucht eigenen Abstand. */
.signup-form__submit { margin-top: 16px; }
.signup-form__consent {
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 420px; text-align: left;
  font-size: 12px; line-height: 1.4; color: var(--everloom-text-secondary); cursor: pointer;
}
.signup-form__consent--dark { color: rgba(255,255,255,0.7); }
.signup-form__consent input[type="checkbox"] {
  margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--everloom-teal);
}
.signup-form__consent a { color: var(--everloom-teal-strong); text-decoration: underline; }
.signup-form__consent--dark a { color: var(--everloom-bright); }
.signup-form__input {
  font-family: var(--font-sans); font-size: 15px;
  padding: 13px 18px; border-radius: var(--radius-pill); border: 1px solid var(--everloom-border-strong);
  background: var(--everloom-surface); color: var(--everloom-text-primary);
  min-width: 280px; flex: 1 1 280px;
}
.signup-form__input::placeholder { color: var(--everloom-text-muted); }
.signup-form__input:focus { outline: 2px solid var(--everloom-teal); outline-offset: 2px; }
.signup-form__input--dark {
  background: var(--everloom-ink-90); border-color: var(--everloom-ink-80); color: #FFFFFF;
}
.signup-form__input--dark::placeholder { color: #8FA9A2; }

.signup-success {
  margin-top: 20px; padding: 16px 20px; border-radius: var(--radius-md);
  background: var(--everloom-teal-12); border: 1px solid var(--everloom-teal);
  font-size: 14px; color: var(--everloom-text-primary);
}
.signup-success--dark {
  background: var(--everloom-ink-90); border: 1px solid var(--everloom-teal); color: #D5F0E7;
}

/* ---------- "Ein Unternehmen kaufen kann man lernen": dunkelgrünes Vollformat.
   Ein gemeinsamer Inner-Wrapper (max-width 1120, zentriert) sorgt dafür, dass
   Überschrift, Intro, Schritte und Abschlusszeile alle an derselben linken
   Kante ausgerichtet sind (vorher lief das Intro als eigenständig zentrierter
   Block auseinander). Bewusst ohne "Käufer-Guide"-Markenname, ohne Modul-/
   Rechner-/Meilenstein-Zähler und ohne 5-Stationen-Pipeline. ---------- */
.section--learn {
  position: relative; overflow: hidden;
  max-width: none; text-align: center;
  background: var(--everloom-ink); color: var(--everloom-text-on-ink);
  padding: var(--space-20) 20px;
}
/* 16.09.2026: Der Radial-Glow auf .section--learn::before ist geloescht.
   Er war seit dem 04.09. per display:none abgeschaltet und belegte trotzdem
   das Pseudo-Element, das seit dem 15.09. den Abschnittstrenner traegt.
   Ergebnis: weder Glow noch Trenner. Beide Leichen sind jetzt raus, das
   Pseudo-Element gehoert allein dem Trenner. */
.section--learn__inner { position: relative; max-width: 1120px; margin: 0 auto; }

.section__headline--light {
  color: #FFFFFF; font-size: 28px; max-width: 780px; margin: 0 auto var(--space-5);
}
@media (min-width: 640px) { .section__headline--light { font-size: 34px; } }
.section__intro--light {
  color: rgba(255,255,255,0.78); max-width: 640px; margin: 0 auto var(--space-12);
  text-align: center; font-size: 17px;
}

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8); margin: 0 0 var(--space-16);
  text-align: center;
}
.steps__item { border-top: 2px solid rgba(91, 207, 176, 0.45); padding-top: var(--space-5); }
.steps__number {
  display: block; font-family: var(--font-sans); font-weight: 600;
  font-size: 32px; color: var(--everloom-bright); margin-bottom: var(--space-3);
}
.steps__item h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: #FFFFFF; margin-bottom: 8px;
}
.steps__item p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); }

/* Abschlussversprechen: ein Satz, deutlich größer als der Rest, mit Luft
   zum CTA darunter — das ist der eigentliche Payoff der Sektion. */
.section__closing {
  margin: 0 auto var(--space-10);
  font-size: 26px; font-weight: 700; color: #FFFFFF; line-height: 1.35;
  max-width: 760px; font-family: var(--font-display);
}
@media (min-width: 640px) { .section__closing { font-size: 30px; } }

.section--learn .signup-form { max-width: 560px; margin: var(--space-4) auto 0; }

.footer-band { background: var(--everloom-surface); padding: 0 20px; }
.footer {
  max-width: 1120px; margin: 0 auto; padding: var(--space-10) 0 var(--space-16);
  display: flex; align-items: center; justify-content: space-between;
}
.footer__logo { height: 26px; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { font-size: 13px; color: var(--everloom-text-muted); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .site-nav { padding: 14px 16px; }
  .footer-band { padding: 0 16px; }
  .hero__glow { width: 500px; height: 500px; top: -160px; right: -160px; }
  .signup-form__row { flex-direction: column; }
  .signup-form__input { flex: 0 0 auto; width: 100%; min-width: 0; }
  .signup-form__row .btn { width: 100%; }
  .calc__row { flex-wrap: wrap; }
  .calc__row label { width: 100%; }
  .calc__row output { min-width: 0; text-align: left; }
  /* Schmalere Schrittspalte, damit den Fragen auf dem Handy nicht die Breite fehlt.
     Kein eigenes top hier: Die vertikale Zentrierung auf der Textzeile kommt aus
     --quiz-title-line und gilt unverändert weiter. */
  .quiz-box { padding: var(--space-6); }
  .quiz-step { padding-left: 36px; }
  .quiz-step__num { font-size: 26px; left: -36px; width: 26px; }
  .opportunity__cards { gap: var(--space-5); }
  .section--opportunity { padding: var(--space-12) 16px; }
  .section--learn { padding: var(--space-12) 16px; }
}


/* ============================================================
   03.09.2026 — WARUM EINE ÜBERNAHME + WIE DAS FUNKTIONIERT
   Zwei neue Sektionen zwischen Opportunität und Rechner (Alex).
   Inhalte aus den Ad-Kacheln übernommen.
   ============================================================ */

.section--why { max-width: 820px; }

/* Vergleich Neugründung / Übernahme. Bewusst kein <table>, sondern Grid:
   auf dem Handy klappt die Zeile auf zwei Ebenen um, statt horizontal zu scrollen. */
.compare {
  margin-top: var(--space-8);
  text-align: left;
  border-top: 1px solid rgba(15,47,42,0.12);
}
.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,47,42,0.10);
  align-items: baseline;
}
.compare__head { padding-top: 12px; padding-bottom: 10px; }
.compare__label {
  grid-column: 1 / -1;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(15,47,42,0.50);
  margin-bottom: 2px;
}
.compare__head .compare__label { display: none; }
.compare__col { font-size: 16px; line-height: 1.35; }
.compare__col--muted  { color: rgba(15,47,42,0.45); }
.compare__col--strong { color: var(--everloom-ink); font-weight: 600; }
.compare__head .compare__col {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.compare__head .compare__col--muted  { color: rgba(15,47,42,0.45); }
.compare__head .compare__col--strong { color: var(--everloom-teal-strong); }

@media (min-width: 640px) {
  .compare__head,
  .compare__row { grid-template-columns: 34% 1fr 1fr; gap: 16px; }
  .compare__label { grid-column: auto; margin-bottom: 0; font-size: 14px; text-transform: none; letter-spacing: 0; }
  .compare__head .compare__label { display: block; }
}

.section__closing-note {
  margin-top: var(--space-6);
  font-size: 16px; line-height: 1.55; color: rgba(15,47,42,0.70);
  max-width: 620px; margin-left: auto; margin-right: auto;
}

/* Dreischritt Finanzierung */
.section-band--how { background: var(--everloom-bg); }
.how {
  list-style: none; margin: var(--space-8) auto 0; padding: 0;
  max-width: 640px; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.how__step {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fff; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15,47,42,0.06);
}
.how__num {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--everloom-ink); color: var(--everloom-neon);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.how__text { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--everloom-ink); }
.how__note {
  margin: var(--space-6) auto 0; max-width: 560px;
  font-size: 13px; line-height: 1.5; color: rgba(15,47,42,0.55);
}


/* ============================================================
   04.09.2026 — REDESIGN "DARK / 3D-SPIRALE"
   Visuelle Vorlage: Ad 1, Design A (Gradient-Grund, 3D-Spirale,
   Neon-Akzente). Alles ab hier ueberschreibt bewusst die helle
   Ur-Fassung; die liegt unveraendert weiter oben und in
   _backup_2026-09-04_vor-redesign/. Ein Block, ein Ausbau.
   ============================================================ */

/* ---------- 1. Token-Umschaltung auf dunklen Grund ----------
   Bewusst als zweiter :root-Block statt als Aenderung am ersten:
   das Ur-System bleibt dokumentiert und der Redesign ist in einem
   Stueck zurueckdrehbar. */
:root {
  --everloom-bg: #05100E;

  /* Flaechen sind auf dunklem Grund keine Farben, sondern Lichtstufen.
     Durchscheinendes Weiss statt fester Grautoene, damit der Gradient
     durch jede Karte hindurch weiterlaeuft. */
  --everloom-surface: rgba(255, 255, 255, 0.045);
  --everloom-fill: rgba(255, 255, 255, 0.028);
  --everloom-border: rgba(255, 255, 255, 0.10);
  --everloom-border-strong: rgba(255, 255, 255, 0.20);
  --everloom-neutral-fill: rgba(255, 255, 255, 0.09);
  --everloom-neutral-fill-strong: rgba(255, 255, 255, 0.16);

  --everloom-teal-12: rgba(107, 255, 210, 0.09);
  --everloom-teal-20: rgba(107, 255, 210, 0.20);
  /* Akzentfarbe fuer Zahlen, Labels, Links: auf dunklem Grund muss der
     "starke" Teal der helle sein, nicht der dunkle. */
  --everloom-teal-strong: #6BFFD2;

  --everloom-text-primary: #ECF7F3;
  --everloom-text-secondary: rgba(230, 246, 241, 0.74);
  --everloom-text-muted: rgba(230, 246, 241, 0.44);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-card-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.38);

  --glow-neon: 0 0 60px rgba(107, 255, 210, 0.18);
}

/* ---------- 2. Der Gradient als Seitengrund ----------
   Liegt fix hinter allem und scrollt nicht mit: der Verlauf ist die
   Buehne, nicht ein Element auf der Seite. Darunter eine CSS-Fassung
   derselben Farben, falls das Bild noch nicht geladen ist. */
body {
  background: #05100E;
  color: var(--everloom-text-primary);
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 82% 8%, #1E5F4F 0%, rgba(30, 95, 79, 0) 58%),
    radial-gradient(100% 80% at 12% 92%, #0B2A24 0%, rgba(11, 42, 36, 0) 62%),
    #05100E;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image: url('assets/brand/gradient-bg.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  pointer-events: none;
}

/* Alle Flaechen, die vorher eine eigene helle Farbe hatten, werden
   durchsichtig: der Gradient soll die ganze Seite tragen. */
.section-band,
.section-band--how,
.section--opportunity,
.section--learn,
.footer-band { background: transparent; }
/* 04.09.2026 hing der Trenner als border-top an jeder Sektion. Das erzeugte
   verschieden breite Striche, weil .section 960px breit ist und .section-band
   ueber die volle Breite laeuft. Seit 15.09. macht es ein mittiges
   Pseudo-Element in fester Breite (siehe "main > section::before" weiter
   unten); die border-top-Regeln sind am 16.09. geloescht. */

/* 04.09.2026, zweiter Durchgang: die weisse Aufhellung ueber der Opportunitaet
   und die beiden Radial-Glows sind raus. Sie lagen als Dunstschicht ueber dem
   Gradienten und haben genau die Klarheit gekostet, die den Hero stark macht.
   Trennung zwischen den Sektionen kommt jetzt aus Haarlinien, nicht aus Nebel. */
.section--opportunity { background: transparent; }
/* 16.09.2026: display:none auf diesen beiden ::before ist raus. Die Regel
   stammt aus der Glow-Abschaffung vom 04.09. und hat seit der Trenner-Umstellung
   vom 15.09. den Abschnittstrenner ueber "Die Marktlage", "Der Weg dahin" und
   dem Gruenderblock mitabgeschaltet (Befund Alex, 16.09.). */

/* ---------- 3. Kopfleiste ---------- */
.site-nav {
  background: rgba(5, 16, 14, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------- 4. Hero mit 3D-Spirale ----------
   Loest den Video-Hero ab. Aufbau: Gradient (vom body), Spirale rechts
   angeschnitten, Text links. Angeschnitten statt vollstaendig sichtbar,
   weil das Objekt dadurch groesser wirkt als der Bildausschnitt und die
   Seite nicht wie ein Produktfoto aussieht. */
.hero__content {
  text-align: left;
  max-width: 1180px;
}
/* Der CTA darf nicht auf Spaltenbreite ziehen: er ist ein Knopf, keine Leiste. */
.hero .btn--hero-cta { display: inline-block; width: auto; }
.hero__headline,
.hero__sub { margin-left: 0; margin-right: 0; }
.hero__headline { max-width: 660px; }
.hero__sub { max-width: 46ch; color: rgba(236, 247, 243, 0.78); }
.hero .overline { color: var(--everloom-neon); }

/* Die Spirale. mix-blend-mode bewusst nicht gesetzt: das Objekt ist
   freigestellt und dunkel-teal mit hellen Glanzkanten, auf dem dunklen
   Grund bleiben genau diese Kanten stehen. Der drop-shadow gibt ihr den
   Neon-Halo, den sie in der Ad hat. */
.hero__spiral {
  position: absolute;
  right: -3%;
  bottom: -22%;
  height: 108%;
  width: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 90px rgba(107, 255, 210, 0.28));
  animation: spiral-float 14s ease-in-out infinite;
}
@keyframes spiral-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__spiral { animation: none; }
}
/* Weicher Verlauf von links, damit die Headline auch dort trennscharf
   bleibt, wo die Spirale dahinter liegt. */
.hero__overlay {
  background: linear-gradient(100deg,
    rgba(5, 16, 14, 0.92) 0%,
    rgba(5, 16, 14, 0.72) 38%,
    rgba(5, 16, 14, 0.18) 68%,
    rgba(5, 16, 14, 0) 100%);
  z-index: 0;
}
.hero__glow {
  width: 900px; height: 900px; top: -300px; right: -180px;
  background: radial-gradient(circle, rgba(107, 255, 210, 0.16) 0%, rgba(107, 255, 210, 0) 64%);
}
.hero__coming-soon { color: rgba(236, 247, 243, 0.5); }

@media (max-width: 899px) {
  /* Auf schmalen Displays gibt es keine zweite Spalte: die Spirale rueckt
     hinter den Text und wird gedimmt, statt ihn zu verdraengen. */
  .hero__content { text-align: left; }
  .hero__spiral {
    right: -34%; bottom: auto; top: -6%;
    height: 86%; opacity: 0.68;
  }
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(5, 16, 14, 0.62) 0%,
      rgba(5, 16, 14, 0.86) 46%,
      rgba(5, 16, 14, 0.94) 100%);
  }
  .hero__headline { max-width: none; }
}

/* ---------- 5. Karten und Flaechen ----------
   Dunkles Glas statt weissem Dunst. Eine Karte aus aufgehelltem Weiss
   entsaettigt den Gradienten dahinter; eine Karte aus abgedunkeltem Ink
   laesst ihn stehen und setzt sich trotzdem ab. Der Blur ist raus: er war
   der zweite Grund, warum die Farben unter den Karten matt wurden.
   Die Kante kommt jetzt aus einer hellen Innenlinie oben, so wie Licht auf
   einer echten Glasplatte auftrifft. */
.opportunity__card,
.quiz-box,
.calc-card,
.how__step {
  background: rgba(4, 19, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--shadow-card-lg);
}
.opportunity__card {
  border-color: rgba(107, 255, 210, 0.22);
}
/* 04.09.2026: Schrift-Glow raus (Alex). Auf einer Zahl liest sich der Schein
   als Unschaerfe, nicht als Leuchten; die Kante der Ziffer soll hart sein. */
.opportunity__number {
  color: var(--everloom-neon);
  font-size: 48px;
}
.opportunity__card p { color: rgba(236, 247, 243, 0.76); }
.opportunity__source { color: rgba(236, 247, 243, 0.68) !important; }
.opportunity__closing { color: #FFFFFF; }

.section__headline { color: #FFFFFF; }
.section__intro { color: rgba(236, 247, 243, 0.72); }
.overline--dark { color: var(--everloom-neon); }

/* ---------- 6. Vergleichstabelle ---------- */
.compare { border-top-color: rgba(255, 255, 255, 0.12); }
.compare__head,
.compare__row { border-bottom-color: rgba(255, 255, 255, 0.09); }
.compare__label { color: rgba(236, 247, 243, 0.46); }
.compare__col--muted,
.compare__head .compare__head .compare__col--muted,
.compare__col--muted { color: rgba(236, 247, 243, 0.46); }
.compare__head .compare__col--strong,
.compare__col--strong { color: #FFFFFF; }
.compare__head .compare__col--strong { color: var(--everloom-neon); }
.section__closing-note { color: rgba(236, 247, 243, 0.62); }

/* ---------- 7. Dreischritt ---------- */
.how__num {
  background: rgba(107, 255, 210, 0.14);
  border: 1px solid rgba(107, 255, 210, 0.42);
  color: var(--everloom-neon);
}
.how__text { color: #FFFFFF; }
.how__note { color: rgba(236, 247, 243, 0.52); }

/* ---------- 8. Rechner und Quiz ---------- */
.calc__row label { color: rgba(236, 247, 243, 0.74); }
.calc__row input[type="range"] { accent-color: var(--everloom-neon); }
.calc__row output { color: var(--everloom-neon); }
/* Das Ergebnisfeld ist der eine Moment, in dem die Seite laut werden darf. */
.calc__result-box {
  background: linear-gradient(140deg, rgba(107, 255, 210, 0.13) 0%, rgba(107, 255, 210, 0.03) 60%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(107, 255, 210, 0.34);
}
.calc__result-label { color: rgba(107, 255, 210, 0.72); }
.calc__bank { color: rgba(236, 247, 243, 0.76); }
.calc__disclaimer { color: rgba(236, 247, 243, 0.42); }

.quiz-step__num { color: var(--everloom-neon); }
.quiz-step__title,
.quiz-question legend { color: #FFFFFF; }
.quiz-question__step { color: var(--everloom-neon); }
.quiz-box__divider { border-top-color: rgba(255, 255, 255, 0.10); }

.quiz-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(236, 247, 243, 0.80);
}
.quiz-pill:hover {
  border-color: rgba(107, 255, 210, 0.6);
  color: #FFFFFF;
  background: rgba(107, 255, 210, 0.08);
}
.quiz-pill.is-selected {
  background: var(--everloom-neon);
  border-color: var(--everloom-neon);
  color: var(--everloom-ink);
}

.quiz-select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  /* Pfeil hell statt dunkel, sonst unsichtbar auf dem Grund. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236BFFD2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.quiz-select:hover, .quiz-select:focus { border-color: rgba(107, 255, 210, 0.6); }
/* Die native Auswahlliste erbt den Seitengrund nicht, deshalb explizit. */
.quiz-select option { background: #0B211C; color: #ECF7F3; }
.quiz-select option[value=""] { color: rgba(236, 247, 243, 0.5); }

.signup-form__lead { color: rgba(236, 247, 243, 0.74); }
.signup-form__input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
}
.signup-form__input::placeholder { color: rgba(236, 247, 243, 0.42); }
.signup-form__input:focus { outline-color: var(--everloom-neon); }
.signup-form__consent { color: rgba(236, 247, 243, 0.62); }
.signup-form__consent a { color: var(--everloom-neon); }
.signup-form__consent input[type="checkbox"] { accent-color: var(--everloom-neon); }
.signup-success {
  background: rgba(107, 255, 210, 0.10);
  border-color: rgba(107, 255, 210, 0.42);
  color: #ECF7F3;
}

/* ---------- 9. Buttons ---------- */
.btn--primary {
  background: var(--everloom-neon);
  color: var(--everloom-ink);
}
.btn--quiet {
  background: rgba(255, 255, 255, 0.09);
  color: #FFFFFF;
}
.btn--hero-cta {
  box-shadow: 0 0 0 4px rgba(107, 255, 210, 0.14), 0 12px 44px rgba(107, 255, 210, 0.34);
}

/* ---------- 10. Fusszeile ---------- */
.footer-band { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.footer__links a { color: rgba(236, 247, 243, 0.46); }

/* ---------- 11. Spiralen-Echo als Sektions-Dekor ----------
   Dieselbe Spirale, stark gedimmt und gespiegelt, als wiederkehrendes
   Motiv statt als einmaliger Hero-Effekt. Rein dekorativ, liegt hinter
   dem Inhalt und faengt keine Klicks ab. */
.spiral-echo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.13;
  filter: drop-shadow(0 0 70px rgba(107, 255, 210, 0.20));
  /* Ohne Maske schneidet das overflow:hidden der Sektion das Objekt an einer
     harten senkrechten Kante ab, die als Fehler gelesen wird. Die Maske laesst
     es zu allen Seiten ausblenden, sodass es aus dem Grund auftaucht statt
     abgeschnitten zu sein. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
/* Die Spirale des durchlaufenden Bandes: setzt im oberen Drittel von
   "Der Unterschied" an und klingt in "So laeuft das" aus. Prozentwerte
   beziehen sich auf das Band, nicht auf eine einzelne Sektion. */
.spiral-echo--flow {
  left: -12%; top: -6%; height: 104%;
  transform: scaleX(-1);
}
.spiral-echo--right {
  right: -16%; bottom: -20%; height: 120%;
}
/* 04.09.2026, zwei Korrekturen nacheinander:
   (1) Die Sektion war auf 820px begrenzt, das Echo wurde deshalb an einer
       Senkrechten abgeschnitten. Jetzt spannt sie ueber die volle Breite und
       begrenzt nur ihren Inhalt.
   (2) Danach brach das Echo am unteren Sektionsrand ab. Beide Sektionen liegen
       jetzt in einem gemeinsamen Band (.band-flow), das Echo gehoert dem Band
       und laeuft ueber die Grenze hinweg bis in "So laeuft das" hinein. Die
       Sektionen selbst clippen nicht mehr. */
.section--learn { position: relative; overflow: hidden; }
.section--why { position: relative; max-width: none; padding-left: 20px; padding-right: 20px; }
.band-flow { position: relative; overflow: hidden; }
.section--why__inner {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto;
}
.section--learn__inner { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .spiral-echo { opacity: 0.10; }
}

/* ---------- 12. Seitenfortschritt ----------
   Eine gerade Linie im linken Seitenrand, deren Neon-Strecke mit dem
   Scrollstand mitwaechst; die Punkte markieren die Kapitel. Bewusst aus
   Elementen statt aus SVG gebaut: eine Gerade braucht keinen Pfad, und
   gestreckte SVG-Koordinaten haetten die Punkte zu Ellipsen verzogen.
   Fixiert statt mitlaufend, damit sie immer im Blick ist. */
.rail {
  position: fixed;
  left: 34px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 64vh;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.rail.is-visible { opacity: 1; }
.rail__base,
.rail__fill {
  position: absolute; left: 0; width: 100%;
  border-radius: 2px;
}
.rail__base { top: 0; height: 100%; background: rgba(255, 255, 255, 0.12); }
.rail__fill {
  top: 0; height: 0;
  background: var(--everloom-neon);
  transition: height 120ms linear;
}
.rail__dots { position: absolute; inset: 0; }
.rail__dot {
  position: absolute; left: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background 260ms var(--ease-out);
}
.rail__dot.is-passed { background: var(--everloom-neon); }

/* Unter 1240px hat der Seitenrand keinen Platz mehr; die Leiste wuerde in den
   Text laufen statt neben ihm zu stehen. */
@media (max-width: 1239px) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail__fill { transition: none; } }

/* ---------- 13. Kapitel-Label ----------
   04.09.2026 (Alex): "Die Opportunitaet", "Dein Spielraum" und die anderen
   Kapitelmarken waren mit 11px so klein, dass sie eher wie eine Fussnote
   ueber der Ueberschrift lasen als wie deren Kapitelangabe. Groesser und mit
   mehr Luft nach unten; Versalien und Sperrung bleiben, damit sie sich
   weiterhin klar von der Ueberschrift unterscheiden. */
.overline {
  font-size: 14px;
  letter-spacing: 0.11em;
  margin-bottom: 20px;
}
@media (max-width: 600px) { .overline { font-size: 13px; } }

/* ---------- 14. Quellenzeilen der KPI-Karten ----------
   04.09.2026 (Alex): Die Quellen standen direkt unter ihrem jeweiligen Text und
   sprangen dadurch von Karte zu Karte auf eine andere Hoehe. Sie sitzen jetzt am
   Fuss der Karte, also bei allen dreien auf einer Linie, und sind kleiner, weil
   sie Beleg sind und nicht Aussage. */
.opportunity__card { display: flex; flex-direction: column; }
.opportunity__card p { margin-bottom: 0; }
.opportunity__source {
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: 10px;
  line-height: 1.4;
  /* Zwei Zeilen Mindesthoehe: sonst sitzt eine einzeilige Quelle zwar am selben
     unteren Rand, beginnt aber eine Zeile tiefer als die zweizeiligen und die
     drei Bloecke lesen sich versetzt. */
  min-height: calc(2.8em + var(--space-8));
}
/* Weniger Boden unter der Quellenzeile, damit sie wirklich am Kartenfuss sitzt. */
.opportunity__card { padding-bottom: var(--space-3); }

/* Vorsatz "rund" ueber der gerundeten Zahl: eigene Zeile, klein und gedeckt,
   damit die Zahl gross bleibt und der Vorsatz sie nicht optisch halbiert. */
/* Ungefaehr-Zeichen vor der gerundeten Zahl. Auf derselben Zeile, sonst
   staenden die drei Zahlen der Karten nicht mehr auf einer Hoehe. Etwas
   kleiner und gedeckter als die Zahl, damit es Vorzeichen bleibt und nicht
   als erste Ziffer gelesen wird. Vorlesesoftware bekommt "ungefaehr" als
   Wort, weil das Zeichen dort unzuverlaessig ausgesprochen wird. */
.opportunity__approx {
  font-size: 0.72em;
  font-weight: 700;
  color: rgba(107, 255, 210, 0.55);
  margin-right: 8px;
}

/* ---------- 15. Hervorgehobener Schlusssatz ----------
   04.09.2026 (Alex): Der Pointensatz unter den KPI-Karten in Neon. Bewusst nur
   der zweite Satz: der erste zaehlt auf, was es gibt, der zweite dreht das auf
   den Leser. Waere beides neon, gaebe es keinen Umschlag mehr. */
.highlight { color: var(--everloom-neon); }

/* ---------- 16. Vergleich als Zeichen-Raster ----------
   04.09.2026 (Alex, Vorlage ist die Ad-Kachel). Loest die alten Ueberschreibungen
   der Textfassung weiter oben ab: drei feste Spalten auf jeder Breite, keine
   Umbruch-Logik mehr fuers Handy, weil zwei Symbolspalten auch dort nebeneinander
   passen. Die Ja-Spalte liegt auf einer eigenen Flaeche und wird oben und unten
   gerundet, damit sie als eine durchgehende Saeule liest statt als sechs Kacheln. */
.compare {
  margin-top: var(--space-8);
  margin-left: auto; margin-right: auto;
  max-width: 524px;
  border-top: none;
  text-align: left;
}
.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 116px;
  gap: 0;
  align-items: center;
  padding: 0;
  border-bottom: none;
}
.compare__label,
.compare__col {
  grid-column: auto;
  display: block;
  margin: 0;
}
.compare__label {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(236, 247, 243, 0.86);
  padding: 14px 16px 14px 4px;
}

/* Kopfzeile. Braucht die hoehere Spezifitaet, weil die Textfassung weiter oben
   .compare__head .compare__col auf Versalien und 13px setzt. */
.compare__head .compare__label { display: block; }
.compare__head .compare__col,
.compare__col {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  padding: 14px 4px;
  white-space: nowrap;
}
.compare__head .compare__col--muted,
.compare__col--muted { color: rgba(236, 247, 243, 0.46); }
.compare__head .compare__col--strong,
.compare__col--strong {
  color: var(--everloom-neon);
  background: rgba(107, 255, 210, 0.055);
  border-radius: 14px 14px 0 0;
}

/* Zeichen-Zellen */
.compare__cell {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px;
}
.compare__cell svg { width: 28px; height: 28px; display: block; }
.compare__cell--no { color: rgba(236, 247, 243, 0.28); }
.compare__cell--yes {
  color: var(--everloom-neon);
  background: rgba(107, 255, 210, 0.055);
}
.compare__row--last .compare__cell--yes { border-radius: 0 0 14px 14px; }

@media (max-width: 600px) {
  .compare__head,
  .compare__row { grid-template-columns: minmax(0, 1fr) 84px 84px; }
  .compare__label { font-size: 15px; padding-right: 10px; }
  /* Auf 74px passt "Neu gruenden" nicht in eine Zeile; nowrap liesse die
     Kopfzeilen ineinanderlaufen, deshalb hier umbrechen lassen. */
  .compare__head .compare__col,
  .compare__col {
    font-size: 11px; padding-left: 2px; padding-right: 2px;
    white-space: normal; line-height: 1.25;
  }
  .compare__cell svg { width: 24px; height: 24px; }
}

/* Untertitel der Unterschied-Sektion ist laenger als die anderen und brach auf
   der 560px-Standardbreite auf vier Zeilen um, die letzte mit einem einzelnen
   Wort. Breitere Spalte plus balance verteilt ihn auf drei gleich volle Zeilen. */
.section--why .section__intro {
  max-width: 680px;
  text-wrap: balance;
}

/* ---------- 17. Kaufpreis-Aufteilung ("Wie das funktioniert") ----------
   04.09.2026 (Alex): loest die nummerierte Dreier-Liste ab. Zweck des Bildes ist
   der Hebel: der eigene Anteil ist klein, und man sieht es, statt es zu lesen.
   Deshalb ein geteilter Balken statt drei Kaesten, und die Tilgung als
   Rueckfluss darunter, nicht als dritter gleichwertiger Punkt. */
.split { max-width: 640px; margin: var(--space-10) auto 0; text-align: left; }

.split__caption {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(236, 247, 243, 0.45);
  margin-bottom: 10px;
}

.split__bar {
  display: grid;
  grid-template-columns: 20fr 80fr;
  gap: 6px;
  height: 84px;
}
.split__seg {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  font-family: var(--font-display);
}
.split__pct { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
/* Der eigene Anteil ist der einzige gefuellte Block: er ist das, was der Leser
   aufbringen muss, und soll als kleine, klar begrenzte Flaeche dastehen. */
.split__seg--own {
  background: var(--everloom-neon);
  color: var(--everloom-ink);
}
.split__seg--fin {
  background: rgba(107, 255, 210, 0.07);
  border: 1px solid rgba(107, 255, 210, 0.28);
  color: var(--everloom-neon);
}

/* Die Legende folgt bewusst NICHT den 20/80 des Balkens: eine Spalte von einem
   Fuenftel Breite waere unlesbar. Zwei gleiche Spalten, die Zuordnung leisten
   die Farbtupfer. */
.split__legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  margin-top: var(--space-5);
}
.split__item { display: flex; gap: 10px; align-items: flex-start; }
.split__key {
  flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: 6px;
}
.split__key--own { background: var(--everloom-neon); }
.split__key--fin { background: rgba(107, 255, 210, 0.30); box-shadow: inset 0 0 0 1px rgba(107,255,210,0.5); }
.split__item p {
  margin: 0; font-size: 15px; line-height: 1.5;
  color: rgba(236, 247, 243, 0.70);
}
.split__item strong { display: block; color: #FFFFFF; font-weight: 600; }

/* Schlusssatz der Sektion, in derselben Rolle wie der Abschlusssatz unter den
   KPI-Karten: die Aussage, mit der der Leser aus dem Abschnitt herausgeht.
   Deshalb dieselbe Behandlung, Anzeigenschrift, gross und mittig. */
.split__repay {
  margin: var(--space-10) auto 0;
  max-width: 560px;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.35;
  color: #FFFFFF;
  text-wrap: balance;
}

.how__note { margin-top: var(--space-8); }

@media (max-width: 640px) {
  /* Der 20-Prozent-Block wird auf dem Handy schmal, die Zahl muss trotzdem
     drinstehen: ein leerer Block liest sich als Fehler, nicht als Anteil. */
  .split__bar { height: 62px; }
  .split__pct { font-size: 13px; }
  .split__seg { border-radius: 12px; }
  .split__legend { grid-template-columns: 1fr; gap: 14px; margin-top: var(--space-4); }
  .split__item p { font-size: 14px; }
  .split__repay { font-size: 19px; }
}

/* Logo in der Kopfleiste als Sprung an den Seitenanfang. */
.site-nav__home {
  display: inline-flex; align-items: center;
  border-radius: 6px;
  transition: opacity var(--duration-base) var(--ease-out);
}
.site-nav__home:hover { opacity: 0.82; }
.site-nav__home:focus-visible {
  outline: 2px solid var(--everloom-neon);
  outline-offset: 4px;
}

/* Spamschutz: Honigtopf-Feld. Aus dem Bild geschoben statt display:none,
   weil viele Formularroboter display:none erkennen und das Feld dann
   auslassen. Fuer Menschen unerreichbar (tabindex -1 im HTML), fuer
   Vorlesesoftware verborgen (aria-hidden im HTML). */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Die Fusszeile hat mit "Cookie-Einstellungen" einen dritten Link bekommen.
   Drei Links plus Logo passen auf dem Handy nicht mehr in eine Zeile und haben
   die Seite waagerecht ueberlaufen lassen. Deshalb umbrechen statt quetschen. */
@media (max-width: 640px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer__links {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
}

/* ---------- 18. Direkter Gespraechstermin ----------
   04.09.2026: zweiter Weg neben dem Formular. Optisch bewusst nachrangig
   (Umriss statt Fuellung), damit er die Hauptaktion nicht verdraengt. */
/* 04.09.2026 (Alex): eigener Absatz statt angehaengter Satz, und kleiner.
   Der Hinweis ist die zweite Moeglichkeit, nicht Teil der Aufforderung
   darueber; angehaengt las er sich wie ein Nachsatz derselben Anweisung. */
.talk-inline {
  display: block;
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(236, 247, 243, 0.55);
}
.talk-inline a,
.section__intro .talk-link {
  color: var(--everloom-neon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.talk-block {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
}
.talk-block__lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: #FFFFFF;
  margin-bottom: var(--space-4);
}
.talk-block__note {
  margin-top: var(--space-4);
  max-width: 44ch;
  margin-left: auto; margin-right: auto;
  font-size: 13px; line-height: 1.5;
  color: rgba(236, 247, 243, 0.45);
}
.btn--ghost {
  background: transparent;
  color: var(--everloom-neon);
  box-shadow: inset 0 0 0 1.5px rgba(107, 255, 210, 0.55);
}
.btn--ghost:hover {
  background: rgba(107, 255, 210, 0.08);
  box-shadow: inset 0 0 0 1.5px var(--everloom-neon);
}

/* =====================================================================
   11.09.2026 — Mobil-Überarbeitung (Alex)
   Ausgangslage gemessen auf 390x844: 8.299 px Seitenhöhe, also 9,8 Bild-
   schirme für 851 Wörter. Nicht der Text war zu lang, sondern die vertikale
   Dichte zu gering. Die folgenden Blöcke greifen genau dort an.
   ===================================================================== */

/* --- 1. Cookie-Hinweis: zurueck an den unteren Rand ------------------
   12.09.2026 (Alex). Am 11.09. stand hier ein bildschirmfuellender Dialog,
   der eine Entscheidung erzwang. Messung am 12.09.: 29 Landing Page Views
   bei Meta, aber NULL Paid-Social-Sitzungen in GA4, gegenueber 11 zu 4 am
   Vortag mit der Leiste. Wer aus einer Instagram-Story kommt, bekommt den
   Dialog vor dem Rechner zu sehen, tippt "Nur notwendige" oder geht zurueck.
   Dann laedt weder GA4 noch das Pixel, und, schwerer wiegend, der Besucher
   erreicht den Rechner nie. Meta zaehlt den Landing Page View trotzdem,
   weil Instagram-Links im hauseigenen Browser oeffnen und Meta den Aufruf
   dort selbst sieht. Deshalb fiel es zwei Tage nicht auf.
   Die Leiste kostet Zustimmungsquote, rund ein Drittel statt theoretisch
   mehr, laesst aber den Rechner sofort benutzbar. Das ist der bessere
   Tausch. NICHT ohne erneute Messung wieder auf einen Dialog umstellen. */
body.consent-banner-open { overflow: visible; }

/* --- 2. Quiz-Block auf dem Handy ------------------------------------
   Die Schrittnummern sassen in einer 36px-Spalte links ausserhalb des Textes.
   Auf 390px Breite frisst das zusammen mit dem Box-Innenabstand so viel, dass
   der Inhalt gequetscht und nach rechts gerückt wirkt. Auf Mobil steht die
   Nummer jetzt in der Zeile, die Spalte entfällt. */
@media (max-width: 600px) {
  .quiz-box { padding: var(--space-5); }
  .quiz-step { padding-left: 0; }
  .quiz-step__num {
    position: static; transform: none;
    display: inline-block; width: auto; margin-right: 9px;
    font-size: 19px; line-height: 1.4; vertical-align: baseline;
  }
  .quiz-step__title, .quiz-question legend { font-size: 16px; line-height: 1.4; }
  .quiz-select { width: 100%; }
  .calc__disclaimer { font-size: 11px; }
}

/* --- 3. Freigeschalteter E-Mail-Block -------------------------------
   Ersetzt den harten emailField.focus(), der auf dem Handy die Tastatur
   hochriss. Kurzes Aufleuchten statt Sprung. */
.signup-form__step2.is-justUnlocked {
  animation: step2Unlock 1.4s ease-out 1;
  border-radius: 12px;
}
@keyframes step2Unlock {
  0%   { background-color: rgba(107, 255, 210, 0.16); }
  100% { background-color: rgba(107, 255, 210, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .signup-form__step2.is-justUnlocked { animation: none; }
}

/* --- 4. Vier Schritte als Akkordeon ---------------------------------
   Ausgeklappt 775 px auf dem Handy, und sie stehen hinter dem Formular.
   Wer dort ankommt, hat sich längst entschieden. */
.steps--accordion { display: block; text-align: left; }
.steps--accordion .steps__item { padding-top: 0; }
.steps__summary {
  display: flex; align-items: center; gap: 12px;
  padding: var(--space-4) 0; cursor: pointer;
  list-style: none;
}
.steps__summary::-webkit-details-marker { display: none; }
.steps--accordion .steps__number { margin-bottom: 0; font-size: 24px; flex: 0 0 auto; }
.steps--accordion .steps__item h3 { margin: 0; flex: 1 1 auto; }
.steps__summary::after {
  content: ''; flex: 0 0 auto; width: 10px; height: 10px; margin-left: auto;
  border-right: 2px solid var(--everloom-bright); border-bottom: 2px solid var(--everloom-bright);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.steps--accordion .steps__item[open] .steps__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.steps--accordion .steps__item p { margin: 0; padding: 0 0 var(--space-5) 36px; }
.steps__summary:focus-visible { outline: 2px solid var(--everloom-bright); outline-offset: 3px; }

/* --- 5. Kennzahlen-Karten auf dem Handy wischbar --------------------
   Drei gestapelte Karten waren 778 px. Nebeneinander mit Schnappen sind es
   rund 260 px, und man sieht am angeschnittenen Rand, dass es weitergeht. */
@media (max-width: 600px) {
  .opportunity__cards {
    display: grid; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 80%;
    gap: 12px; margin: var(--space-8) 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 0 16px var(--space-3);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .opportunity__cards::-webkit-scrollbar { display: none; }
  .opportunity__card { scroll-snap-align: start; }
}

/* --- 6. "Coming Soon" im Fuss, neben dem Logo ----------------------
   Formatierung wie frueher in der Kopfzeile: dezentes Grau, Versalien,
   keine Plakette. Der Hinweis soll praesent sein, das ist der ehrliche
   Stand in der Validierungsphase, aber er soll nicht mit dem Logo um
   Aufmerksamkeit konkurrieren.
   Auf dem Handy sitzt er am rechten Rand derselben Zeile, damit Logo und
   Hinweis die Zeile aufspannen statt aneinanderzukleben. */
.footer { flex-wrap: wrap; gap: var(--space-4); }
.footer__brand { display: flex; align-items: center; gap: 28px; }
.footer__status {
  white-space: nowrap;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 600px) {
  .footer { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .footer__brand { width: 100%; justify-content: space-between; gap: var(--space-4); }
  /* 15.09.2026: Diese Zeile stand ausserhalb des Blocks, eine schliessende
     Klammer zu frueh. Dadurch galt sie auf JEDER Breite und hat die
     Basisregel (width 34px, zentriert) ueberall ueberschrieben. Die
     Einrueckung zeigt, dass sie hierher gehoert. Im HTML kommt
     .quiz-step__num derzeit nicht mehr vor, die Korrektur aendert also
     nichts Sichtbares, raeumt aber die Klammer auf. */
  .quiz-step__num { width: auto; text-align: left; margin-right: 9px; }
}

/* =====================================================================
   11.09.2026, Nachtrag 2 — der eigentliche Mobil-Fehler
   Gemessen: Der Seiteninhalt war 415 px breit bei 390 px Bildschirm, also
   25 px Ueberhang. Safari zoomt in dem Fall die ganze Seite heraus, damit
   alles hineinpasst. Zwei Folgen, die zusammen fast jede Beschwerde
   erklaeren:
     1. Rechts bleibt ein Streifen frei, der Inhalt wirkt nach links
        gerutscht, und der dunkle Kopfbereich hoert vor dem rechten Rand auf.
     2. Die CSS-Breite ist dann nicht mehr 390 px, sondern die des Inhalts.
        Damit greifen alle "max-width: 600px"-Regeln nicht mehr, weshalb
        die Ziffern 1 bis 3 wieder in ihrer Spalte ausserhalb des Quiz-
        Rahmens standen.
   Verursacher sind die dekorativen Spiralen und der Hero-Schein, die
   absolut positioniert weit ueber den Rand hinausragen. "clip" statt
   "hidden", weil hidden aus dem Body einen Scroll-Container macht und
   damit position:sticky brechen kann.
   ===================================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
.section--why { overflow: hidden; }

/* --- Hero auf dem Handy zentriert ---------------------------------- */
@media (max-width: 600px) {
  .hero__content { text-align: center; margin-inline: auto; }
  .hero__headline, .hero__sub, .hero .overline { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .btn--hero-cta { width: 100%; justify-content: center; text-align: center; }
}

/* --- Umbruch der Ueberschriften ------------------------------------
   "Der Generationenwechsel im Mittelstand hat begonnen." brach so um, dass
   "Der" allein in der ersten Zeile stand: Nach einem so kurzen Wort passt
   "Generationenwechsel" nicht mehr daneben. balance verteilt die Zeilen
   gleichmaessig, die Silbentrennung faengt die uebrig bleibenden
   Bandwurmwoerter ab. */
.section__headline, .hero__headline, .section__closing, .opportunity__closing {
  text-wrap: balance;
  hyphens: auto; -webkit-hyphens: auto;
}

/* --- "Der Kaufpreis" ueber die volle Breite ------------------------- */
@media (max-width: 600px) {
  .split { max-width: none; width: 100%; }
  .section-band--how .section { padding-left: 16px; padding-right: 16px; }
}

/* --- Ueberschriftengroesse auf dem Handy ----------------------------
   Gemessen bei 390 px Breite: Bei 30 px passt "Generationenwechsel" (19
   Zeichen) nicht mehr neben "Der", deshalb stand "Der" allein in der ersten
   Zeile. text-wrap: balance aendert daran nichts, weil das Wort schlicht zu
   breit ist. Ab 27 px loest sich der Waisenkopf, ab 25 px passt die ganze
   Ueberschrift in zwei Zeilen.
   Zeilenhoehe von 1,5 auf 1,2: 1,5 ist ein Fliesstext-Wert, bei einer
   Ueberschrift zerfaellt der Satz dadurch in einzelne Zeilen.
   Ergebnis: alle Ueberschriften zwei Zeilen, nur "Was ist drin?" drei. */
@media (max-width: 600px) {
  .section__headline { font-size: 25px; line-height: 1.2; }
  .hero__headline { line-height: 1.12; }
}

/* --- Kaufpreis-Spanne sauber umbrechen ------------------------------
   Auf dem Handy passt "600.000 € bis 800.000 €" bei 28 px nicht in eine
   Zeile; um es zu erzwingen, muesste die Schrift auf 21 px, und das ist
   die wichtigste Zahl der ganzen Seite. Stattdessen bleibt "bis" mit dem
   zweiten Betrag zusammen, dann bricht es sauber:
       600.000 €
       bis 800.000 €
   statt "600.000 € bis" / "800.000 €". */
.calc__bis { white-space: nowrap; }

/* --- 20/80-Balken: der finanzierte Teil war zu schwach -------------
   Der eigene Anteil bleibt der einzige voll gefuellte Block, das ist die
   Aussage. Aber mit 7 % Deckung verschwand der 80-Prozent-Teil auf dem
   Handy fast im Hintergrund. Der Balken sah dadurch aus, als sei nur die
   linke Ecke belegt und der Rest leerer Rand, also nach links gerutscht
   statt ueber die volle Breite. Fuellung und Kontur leicht angehoben,
   damit der Balken als ein durchgehendes Objekt gelesen wird. Die
   Hierarchie bleibt: gefuellt schlaegt umrandet. */
.split__seg--fin {
  background: rgba(107, 255, 210, 0.15);
  border-color: rgba(107, 255, 210, 0.42);
}

/* --- Ergebnis-Kasten und Absende-Knopf zentriert (Alex, 11.09.2026) -
   Der Kaufpreis ist die Belohnung fuer den Regler, der Knopf der Abschluss
   des Quiz. Beide stehen fuer sich und wirken linksbuendig angeschnitten.
   Der uebrige Quiz-Inhalt bleibt bewusst linksbuendig, weil Fragen und
   Antwortfelder eine gemeinsame Lesekante brauchen. */
.calc__result-box { text-align: center; }
.signup-form--rechner .signup-form__submit { display: block; margin-left: auto; margin-right: auto; }

/* ============================================================
   ANGEBOT / WARTELISTE   (14.09.2026)
   ------------------------------------------------------------
   Neue Sektion direkt unter dem Hero. Traegt ab jetzt die
   Kernbotschaft und den einzigen Ask der Seite.

   Warum es diese Sektion gibt: 604 Link-Klicks aus Meta haben
   genau 1 Anmeldung erzeugt. Ursache war nicht die Botschaft
   (CTR ueber 2,7 Prozent), sondern die Reihenfolge. Der Rechner
   loeste das Anzeigen-Versprechen ein, bevor die Adresse gefragt
   wurde. Danach hatte niemand mehr einen Grund.
   ============================================================ */

.section--offer { padding-bottom: var(--space-16); }

.offer__lead {
  max-width: 620px;
  margin: 0 auto var(--space-10);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.45;
  color: var(--everloom-text-primary);
}

.offer__list {
  list-style: none;
  margin: 0 auto var(--space-12);
  padding: 0;
  display: grid;
  gap: var(--space-5);
  max-width: 960px;
  text-align: left;
}
@media (min-width: 860px) {
  .offer__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.offer__item {
  background: var(--everloom-surface);
  border: 1px solid var(--everloom-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.offer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--everloom-text-primary);
}

.offer__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--everloom-text-secondary);
}

/* Knappheitszeile: sitzt direkt ueber dem Button, damit Grund und
   Handlung zusammen gelesen werden. Bewusst kein Rot, kein Countdown,
   keine Ausrufezeichen — die Zielgruppe bereitet eine Entscheidung
   ueber mehrere hunderttausend Euro vor und liest Verkaufsdruck als
   Warnsignal. */
.offer__scarcity {
  max-width: 520px;
  margin: 0 auto var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--everloom-teal-strong);
}

.signup-form--offer {
  max-width: 440px;
  margin: 0 auto;
}
.signup-form--offer .signup-form__submit {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .offer__lead { font-size: 18px; }
  .offer__scarcity { font-size: 16px; }
  .section--offer .section__headline { font-size: 25px; line-height: 1.2; }
}

/* CTA am Rechner-Ergebnis (14.09.2026). Kein Formular mehr an dieser
   Stelle, nur die Ueberleitung zur Warteliste. */
.calc__cta-lead {
  max-width: 520px;
  margin: var(--space-8) auto var(--space-5);
  font-size: 16px;
  line-height: 1.6;
  color: var(--everloom-text-secondary);
  text-align: center;
}
.calc__cta { display: block; width: fit-content; margin: 0 auto; }

/* ============================================================
   HERO-FORMULAR  (14.09.2026, Alex)
   ------------------------------------------------------------
   Ersetzt den Sprung-CTA zur Angebots-Sektion. Wer im Hero schon
   entschieden ist, soll sich eintragen koennen, ohne zu scrollen.
   Feld und Knopf stehen ab 560px nebeneinander, darunter
   gestapelt. Die Einwilligung sitzt bewusst unter dem Knopf und
   klein: sie ist Pflicht, aber sie darf den Blick nicht vom
   Eingabefeld wegziehen.
   ============================================================ */

.signup-form--hero {
  max-width: 480px;
  margin: var(--space-8) 0 0;
}
.hero__content { --hero-form-gap: var(--space-3); }

.signup-form--hero .signup-form__row--email {
  display: flex;
  flex-direction: column;
  gap: var(--hero-form-gap);
}
@media (min-width: 560px) {
  .signup-form--hero .signup-form__row--email { flex-direction: row; }
  .signup-form--hero .signup-form__input { flex: 1 1 auto; min-width: 0; }
  .signup-form--hero .signup-form__submit { flex: 0 0 auto; }
}

.signup-form--hero .signup-form__submit {
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 0 4px rgba(107, 255, 210, 0.18), 0 8px 28px rgba(107, 255, 210, 0.28);
}
.signup-form--hero .signup-form__submit:hover {
  box-shadow: 0 0 0 5px rgba(107, 255, 210, 0.26), 0 10px 32px rgba(107, 255, 210, 0.36);
}

.signup-form--hero .signup-form__consent {
  margin-top: var(--space-4);
  font-size: 12px;
  line-height: 1.5;
}

/* Der Hero ist auf Mobil zentriert (siehe Mobil-Block weiter oben),
   das Formular muss diese Ausrichtung mitmachen. */
@media (max-width: 600px) {
  .signup-form--hero { margin-inline: auto; }
  .signup-form--hero .signup-form__consent { text-align: left; }
}

/* ============================================================
   ANGEBOTS-KARTEN, visuelle Fassung  (14.09.2026)
   ------------------------------------------------------------
   Vorher drei schlichte Kaesten mit unterschiedlich langen
   Texten. Jetzt: nummeriert (knuepft an "Drei Dinge entscheiden
   darueber" an), gleich hoch, mit Lichtkante oben und einem
   ruhigen Hover. Die Nummer ist dekorativ und aus dem
   Vorlesefluss genommen (aria-hidden im HTML).
   ============================================================ */

.offer__list { align-items: stretch; }

.offer__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-8);
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(107, 255, 210, 0.055) 0%,
      rgba(107, 255, 210, 0) 45%),
    var(--everloom-surface);
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Lichtkante: laeuft von der Nummer aus nach rechts aus. */
.offer__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--everloom-neon) 0%,
    rgba(107, 255, 210, 0.35) 38%,
    rgba(107, 255, 210, 0) 100%);
  opacity: 0.75;
}

@media (hover: hover) {
  .offer__item:hover {
    transform: translateY(-3px);
    border-color: rgba(107, 255, 210, 0.32);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  }
  .offer__item:hover::before { opacity: 1; }
}

.offer__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(107, 255, 210, 0.38);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--everloom-neon);
  background: rgba(107, 255, 210, 0.08);
}

.offer__title { text-wrap: balance; }
/* Schiebt den Text bei minimal unterschiedlicher Titellaenge auf
   eine gemeinsame Grundlinie, damit die drei Karten ruhig wirken. */
.offer__text { margin-top: auto; padding-top: var(--space-2); }

/* ---------- Knappheitszeile: zwei kontrollierte Zeilen ---------- */
.offer__scarcity { max-width: 560px; }
.offer__scarcity-lead,
.offer__scarcity-sub { display: block; text-wrap: balance; }
.offer__scarcity-lead {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--everloom-neon);
}
.offer__scarcity-sub {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(107, 255, 210, 0.78);
}
@media (max-width: 600px) {
  .offer__scarcity-lead { font-size: 18px; }
  .offer__scarcity-sub  { font-size: 15px; }
}

/* ============================================================
   UMBAU 15.09.2026
   ------------------------------------------------------------
   Anlass: 320 Meta-Aufrufe in 24 Stunden, davon 7 laenger als
   zehn Sekunden auf der Seite und 6 tiefer als 75 Prozent.
   Alles hier zielt auf den ersten Bildschirm und auf die neuen
   Bausteine (Rechner-Formular, Gruender, FAQ).
   Bewusst ans Dateiende angehaengt statt in die jeweiligen
   Bloecke einsortiert: so steht der Umbau an einer Stelle und
   ist in einem Stueck zurueckzunehmen.
   ============================================================ */

/* --- 1. Peek: der Rechner muss ins Bild ragen -----------------
   Vorher 88vh (mobil) bzw. 92vh. Ein Hero, der genau den
   Bildschirm fuellt, sieht aus wie das Ende der Seite. 82vh
   laesst die Ueberschrift der naechsten Sektion sichtbar werden
   und ersetzt damit einen Scroll-Pfeil: ein Pfeil behauptet, da
   sei etwas, ein Peek zeigt, WAS da ist. */

/* --- 2. Risiko-Nehmer unter den Formularen -------------------- */
.signup-form__micro {
  margin: var(--space-3) 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--everloom-text-muted);
}
.signup-form__micro--dark,
.signup-form--hero .signup-form__micro { color: rgba(255,255,255,0.62); }

/* --- 3. Anmeldung direkt am Rechner ---------------------------
   15.09.2026 (Alex): Das Formular sitzt jetzt IN der Rechnerbox,
   an der Stelle, wo vorher der Sprung-Button stand. Deshalb keine
   eigene Karte mehr: eine weisse Karte in einer weissen Box liest
   sich wie ein zweites Element, und es ist dasselbe. Es bleibt
   ein Abstand nach oben, mehr braucht es nicht. */
.signup-form--calc { margin-top: var(--space-4); }
.signup-form--calc .signup-form__consent { margin-top: var(--space-3); }

/* --- 3b. Fussnote unter dem Ergebnis --------------------------
   15.09.2026 (Alex): kleiner und leiser. Sie muss da stehen (es
   ist eine Orientierung, keine Zusage), darf aber nicht mit dem
   Ergebnis um Aufmerksamkeit ringen, direkt ueber dem sie sitzt. */
.calc__disclaimer {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--everloom-text-muted) !important;
  opacity: 0.85;
}

/* --- 3c. Quellen als Vertrauensanker --------------------------
   15.09.2026 (Alex): DIHK, KfW und IfM Bonn sind der einzige
   echte Fremdbeleg, den die Seite hat (kein Testimonial, kein
   Kundenlogo). Als 13px-Graufussnote arbeitet er nicht. Groesser
   und dunkler, damit die Quelle mitgelesen wird.
   Bewusst nur Text: ein KfW- oder DIHK-Logo wuerde eine
   Partnerschaft behaupten, die es nicht gibt (Paragraf 5 UWG). */
.opportunity__source {
  font-size: 15px !important;
  line-height: 1.5;
  color: var(--everloom-text-secondary) !important;
}

/* --- 4. Gruender + Vision ------------------------------------- */
.founder {
  display: flex; gap: var(--space-6); align-items: flex-start;
  margin: 0 0 var(--space-10);
  padding: var(--space-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-card-lg);
}
.founder__photo {
  flex: 0 0 96px; width: 96px; height: 96px;
  object-fit: cover; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
}
/* Setzt das onerror im HTML: solange assets/brand/alexander-schenk.jpg
   fehlt, verschwindet die Figur statt ein kaputtes Bildsymbol zu zeigen. */
.founder--ohne-bild .founder__photo { display: none; }
.founder__body { margin: 0; }
.founder__vision {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.3;
  color: var(--everloom-neon);
}
.founder__text {
  margin: 0 0 var(--space-3);
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
.founder__name {
  margin: 0; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
@media (max-width: 600px) {
  .founder { flex-direction: column; gap: var(--space-4); }
  .founder__vision { font-size: 19px; }
}

/* --- 5. FAQ ---------------------------------------------------
   <details>/<summary> statt JS-Akkordeon. Tastaturbedienung,
   Auffindbarkeit ueber die Browsersuche und Verhalten bei
   deaktiviertem JavaScript kommen dabei umsonst mit. */
.faq { margin-top: var(--space-8); }
.faq__item {
  border-top: 1px solid var(--everloom-border);
  padding: var(--space-5) 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--everloom-border); }
.faq__q {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: var(--space-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.4;
  color: var(--everloom-text-primary);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font-weight: 400; font-size: 22px; line-height: 1;
  color: var(--everloom-teal-strong);
  transition: transform 160ms ease;
}
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__q:focus-visible { outline: 2px solid var(--everloom-teal-strong); outline-offset: 4px; }
.faq__a { padding-top: var(--space-3); }
.faq__a p {
  margin: 0 0 var(--space-3);
  font-size: 16px; line-height: 1.65;
  color: var(--everloom-text-secondary);
}
.faq__a p:last-child { margin-bottom: 0; }
.faq__note { font-size: 13px !important; color: var(--everloom-text-muted) !important; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }


/* --- 6. Founder Story als eigene Sektion ----------------------
   15.09.2026 (Alex): Der Gruenderblock stand eingeschoben zwischen
   den vier Schritten und dem Formular. Jetzt eigene Sektion am
   Seitenende, die den letzten Ask traegt. Ohne Rahmen und ohne
   eigene Flaeche: die Sektion IST die Flaeche. */
.section--founder .founder {
  background: transparent; border: 0; padding: 0;
  margin-bottom: var(--space-12);
}
.section--founder .founder__photo { flex-basis: 120px; width: 120px; height: 120px; }
@media (max-width: 600px) {
  .section--founder .founder__photo { width: 96px; height: 96px; flex-basis: 96px; }
}

/* ============================================================
   NACHBESSERUNG 15.09.2026 (Alex)
   ============================================================ */

/* --- 7. Trenner zwischen ALLEN Sektionen ----------------------
   Vorher hatte nur .section-band eine Oberkante, .section nicht.
   Dadurch erschien der Trenner unregelmaessig: mal zwischen zwei
   Kapiteln, mal nicht, ohne dass ein Muster erkennbar war.
   Jetzt bekommt jede Sektion direkt unter <main> eine Oberkante,
   ausser der ersten (die grenzt an den Hero, dort trennt schon
   der Farbwechsel). .band-flow ist ein Wrapper um zwei Sektionen,
   deshalb ist es hier eigens aufgefuehrt.
   !important, weil einzelne aeltere Regeln die Kante gezielt
   entfernt hatten (z. B. .section--opportunity) und sonst je nach
   Sektion etwas anderes gewinnt. */
main > section,
main > .band-flow > section {
  border-top: 1px solid var(--everloom-border) !important;
}
main > section:first-of-type { border-top: 0 !important; }

/* --- 8. FAQ: Antworttext linksbuendig -------------------------
   15.09.2026: kurz auf rechtsbuendig gestellt und auf Alex' Zuruf
   wieder zurueck. Die umgebende .section ist zentriert, deshalb
   braucht es die Regel ueberhaupt: ohne sie erben Frage und
   Antwort die Zentrierung und die linke Kante wandert je Zeile. */
.faq__q, .faq__a, .faq__a p { text-align: left; }

/* --- 9. Gruenderblock: Bild links, Text rechts ----------------
   Vorher ein kleines rundes Portraet in einer Flexzeile, optisch
   kaum vom Rest der Sektion zu unterscheiden. Jetzt eine eigene
   Flaeche mit zwei Spalten: links das Bild im Hochformat, rechts
   Vision, Text und Name. */
.founder--split {
  display: grid;
  /* 15.09.2026 (Alex): Bildspalte von 200-280px auf 150-200px. Bei 280px
     war das Portraet das Erste, was die Sektion sagt, obwohl der Text
     die Arbeit macht. Jetzt traegt der Text, das Bild belegt ihn. */
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--space-8);
  align-items: center;
  text-align: left;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-card-lg);
}
.founder--split .founder__photo {
  width: 100%; height: auto; flex: none;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
}
/* Fehlt das Bild noch, wird aus zwei Spalten wieder eine, statt
   eine leere Spalte stehen zu lassen. */
.founder--split.founder--ohne-bild { grid-template-columns: 1fr; }
.founder--split .founder__body { margin: 0; max-width: 46em; }

/* 15.09.2026 (Alex): "liest sich unruhig". Ursache waren drei Register
   auf engem Raum: 24px fett in Neon, darunter 16px normal, darunter
   13px Versalien mit weiter Sperrung. Drei Sprunge in Groesse, Farbe
   und Laufweite auf vier Zeilen.
   Jetzt zwei Register statt drei: die Vision fuehrt (kleiner als vorher,
   halbfett statt fett), der Text folgt mit mehr Zeilenabstand, und die
   Namenszeile ist nur noch eine leise Signatur ohne Versalien. */
.founder--split .founder__vision {
  font-size: 21px; font-weight: 600; line-height: 1.4;
  margin-bottom: var(--space-5);
}
.founder--split .founder__text {
  font-size: 17px; line-height: 1.75;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: var(--space-5);
}
.founder--split .founder__name {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.50);
}
@media (max-width: 760px) {
  .founder--split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .founder--split .founder__photo { max-width: 170px; }
  .founder--split .founder__vision { font-size: 19px; }
  .founder--split .founder__text { font-size: 16px; }
}

/* ============================================================
   15.09.2026 — BLOCK A: Rechner im Hero (Payoff -> Angebot -> Ask)
   ------------------------------------------------------------
   Der Rechner ist aus der Sektion #rechner in den Hero gewandert und
   ist jetzt der erste Bildschirm. Die dunklen Rechner- und Formular-
   Stile aus Abschnitt 8 (oben) gelten global und greifen hier weiter;
   hier steht nur, was der Hero-Kontext zusaetzlich braucht.
   ============================================================ */

/* --- Rechner-Karte im Hero ------------------------------------------
   Eigene Klasse statt .quiz-box, aber gleiche Glas-Anmutung wie die
   Karten in Abschnitt 5, damit der Rechner als ein Instrument liest,
   nicht wie eine eingeklebte Sektion. Links ausgerichtet im linksbuen-
   digen Hero, schmale feste Breite, damit Regler und Ergebnis den Blick
   halten. */
.hero__calc {
  max-width: 460px;
  margin: 28px 0 0;
  padding: 24px;
  background: rgba(4, 19, 16, 0.55);
  border: 1px solid rgba(107, 255, 210, 0.20);
  border-radius: var(--radius-card-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-card-lg);
  text-align: left;
}
.hero__calc-label {
  display: block;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: rgba(236, 247, 243, 0.82);
  margin-bottom: var(--space-3);
}
.hero__calc .calc__row { margin-bottom: var(--space-5); }
/* Kontextzeile gegen den Fehlschluss "so viel Bargeld brauche ich" —
   ruhig, aber lesbar, nicht als Kleingedrucktes. */
.hero__calc-note {
  font-size: 14px; line-height: 1.5;
  color: rgba(236, 247, 243, 0.78);
  margin: var(--space-3) 0 0;
}
.hero__calc .calc__disclaimer { text-align: left; }

/* Fold-Budget 375x667: Headline etwas kompakter, damit Headline, Regler
   und Ergebnis ohne Scrollen sichtbar bleiben. */
@media (max-width: 600px) {
  .hero__headline--frage { font-size: 31px; line-height: 1.14; margin-bottom: 18px; }
  .hero__calc { max-width: none; margin-top: 20px; padding: 18px; }
}

/* --- Angebot/Ask direkt unter dem Hero ------------------------------
   Nahtlos: .followup traegt bewusst KEIN .section-band und damit keine
   Haarlinie zum Hero. Der Block liest als Fortsetzung des Hero-Payoffs. */
.followup { padding-top: var(--space-10); padding-bottom: var(--space-16); }
.followup__inner { max-width: 620px; margin: 0 auto; }
.followup__transition {
  font-size: 18px; line-height: 1.55;
  color: rgba(236, 247, 243, 0.74);
  margin: 0 auto var(--space-4); max-width: 560px;
}
.followup__everloom {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.3; color: #FFFFFF;
  margin: 0 auto var(--space-6); max-width: 560px;
}
.followup__points {
  list-style: none; padding: 0;
  margin: 0 auto var(--space-8); max-width: 480px;
  display: grid; gap: var(--space-4); text-align: left;
}
.followup__points li {
  position: relative; padding-left: 26px;
  font-size: 16px; line-height: 1.5;
  color: rgba(236, 247, 243, 0.78);
}
/* 16.09.2026: Halo entfernt (Alex). Der Punkt markiert einen Listeneintrag,
   er ist kein Signal. Mit Leuchtring zog er mehr Aufmerksamkeit als der Text
   daneben und doppelte ausserdem die Neonkante der Kacheln darueber. */
.followup__points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  /* 16.09.2026: von Vollneon auf gedaempft. Ein Aufzaehlungspunkt
     muss gliedern, nicht leuchten. */
  background: rgba(107, 255, 210, 0.55);
}
.followup__points strong { color: #FFFFFF; font-weight: 700; }

/* Ask-Formular: schmal, zentriert, gestapelt. Ein starker, voll breiter
   CTA-Knopf statt Feld und Knopf nebeneinander. */
.followup .signup-form--calc { max-width: 440px; margin: 0 auto; }
.followup .signup-form__row {
  flex-direction: column; align-items: stretch; gap: 12px;
}
.followup .signup-form__submit { margin-top: 0; width: 100%; }
.followup .signup-form__micro--dark { text-align: center; }
.followup .signup-form__consent { margin-left: auto; margin-right: auto; }

/* ============================================================
   VISUELLE KORREKTUR 15.09.2026, nach dem ersten Deploy
   ------------------------------------------------------------
   Drei Fehler, die erst live sichtbar wurden. Alle drei sind
   Kollisionen zwischen aelteren Regeln und den heutigen
   Ergaenzungen, keine Inhaltsfehler.
   ============================================================ */

/* --- A. Das E-Mail-Feld im Anschluss-Block war eine Ellipse ---
   .signup-form__input hat "flex: 1 1 280px". Die 280px sind eine
   Flex-Basis, und die wirkt auf die HAUPTachse. In der Zeile
   (row) war das die Breite, deshalb fiel es nie auf. Der
   Anschluss-Block stellt die Zeile auf "flex-direction: column",
   damit Feld und Knopf untereinander stehen. Damit wurde aus den
   280px eine HOEHE. Zusammen mit border-radius 999px ergab das
   das Oval, das live zu sehen war.
   Gleiche Loesung wie in der Handy-Ansicht weiter oben: auf der
   Hauptachse nicht wachsen, Breite ueber width regeln. */
.followup .signup-form__row--email .signup-form__input {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

/* --- B. Trenner waren unterschiedlich breit -------------------
   Die Regel von heute Nachmittag hat jeder Sektion eine Oberkante
   gegeben, aber die Sektionen sind unterschiedlich breit:
   .section ist auf 960px begrenzt, .section-band laeuft ueber die
   volle Breite. Ergebnis: mal eine Linie ueber den ganzen
   Bildschirm, mal ein kurzer Strich in der Mitte. Genau der
   "unregelmaessige" Eindruck.
   Jetzt traegt nicht mehr die Sektion die Linie, sondern ein
   Pseudo-Element in fester Breite, mittig ueber der Sektion. Das
   ist unabhaengig davon, wie breit die Sektion selbst ist.
   Bewusst KEINE 100vw-Loesung: die rechnet die Scrollleiste mit
   und erzeugt auf manchen Systemen waagerechten Ueberlauf. */
main > section,
main > .band-flow > section {
  position: relative;
  border-top: 0 !important;
}
main > section::before,
main > .band-flow > section::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 40px));
  height: 1px;
  background: var(--everloom-border);
  pointer-events: none;
}
main > section:first-of-type::before { display: none; }

/* --- C. Der Gruenderblock hatte seine Flaeche verloren --------
   Zwei eigene Regeln von heute standen sich im Weg:
   ".section--founder .founder" (zwei Klassen) setzt Hintergrund,
   Rahmen und Innenabstand auf null, ".founder--split" (eine
   Klasse) setzt sie. Die spezifischere gewinnt, also war der
   Block live flaechenlos und der Text lief ungefasst ueber die
   Sektion.
   Statt an der Spezifitaet zu drehen, wird die aeltere Regel hier
   fuer den Split-Fall zurueckgenommen. */
.section--founder .founder--split {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-12);
}
.section--founder .founder--split .founder__photo {
  flex: none;
  width: 100%; height: auto;
  border-radius: var(--radius-card);
}
@media (max-width: 760px) {
  .section--founder .founder--split { padding: var(--space-6); }
  .section--founder .founder--split .founder__photo {
    width: 100%; height: auto; max-width: 170px;
  }
}

/* ============================================================
   .hero — EINE Quelle, 15.09.2026
   ------------------------------------------------------------
   Vorher lagen fuenf .hero-Regeln in der Datei verteilt (Zeilen
   202, 621, 825, 884, 1926), alle mit gleicher Spezifitaet. Was
   galt, entschied allein die Reihenfolge im Dokument, und die
   war ueber mehrere Umbauten hinweg zufaellig geworden. Wer am
   Hero mass, hat an der falschen Stelle gesucht.
   Hier steht jetzt genau das, was vorher tatsaechlich wirksam
   war. Aufgeloest, nicht neu entschieden: die Werte sind
   unveraendert, nur an einem Ort.

   Wirksam vorher wie nachher:
     ab 900px   min-height 84vh, padding 72px 20px 96px
     bis 899px  min-height 82vh, padding 48px 18px 72px
   Die 88vh aus Zeile 202, die 92vh aus 825 und die 80vh aus dem
   600er-Block waren zu keiner Zeit wirksam, sie wurden immer von
   einer spaeteren Regel ueberschrieben. Deshalb entfallen sie
   ersatzlos.

   WER HIER ETWAS AENDERT: bitte in diesem Block, nicht durch
   eine weitere Regel weiter unten. Genau so ist das Durcheinander
   entstanden. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--everloom-text-on-ink);
  min-height: 84vh;
  padding: 72px 20px 96px;
}
@media (max-width: 899px) {
  .hero { min-height: 82vh; padding: 48px 18px 32px; }
}

/* --- Hero-Peek am Handy, 15.09.2026 -------------------------
   Ziel: Hero-Unterkante bei 375x667 unter 600px, damit die
   naechste Sektion ins Bild ragt. Ohne das sieht der Hero am
   Handy aus wie das Ende der Seite.
   Vier Hebel, alle aus Doppelungen finanziert, keiner durch
   Zusammenquetschen:
     Eyebrow "Nachfolge im Mittelstand" raus   ca. 30px
     Headline von drei auf zwei Zeilen         ca. 35px
     padding-bottom 72 -> 32                       40px
     Disclaimer von zwei Zeilen auf eine       ca. 16px
   Dagegen die neue Unterzeile mit rund 32px. Netto etwa 90px.
   text-wrap: balance verteilt kurze Saetze auf drei gleich lange
   Zeilen. Greedy umbrechen ergibt zwei. */
@media (max-width: 600px) {
  .hero__headline--frage { text-wrap: normal; }
}
.hero__sub--kurz { max-width: 30em; }

/* ============================================================
   HERO ZWEISPALTIG + UEBERGANG, 15.09.2026
   ============================================================ */

/* --- Hero einspaltig, 15.09.2026 (revidiert) -----------------
   Der zweispaltige Versuch ist wieder raus. Rechner steht unter
   Headline und Unterzeile, nicht daneben: nebeneinander lasen die
   beiden Bloecke als zwei konkurrierende Gegenstaende, und die
   Spirale musste als Hintergrund weggedimmt werden, um Platz zu
   machen. Einspaltig behaelt die Seite ihre Leserichtung
   (Aussage -> Einordnung -> Beweis) und die Spirale bleibt das
   rechte Motiv, das sie war.
   Es gibt hier absichtlich KEINE .hero__content-Regel mehr: es
   gilt wieder die Basis in Abschnitt 4 (max-width 1180px,
   linksbuendig) und .hero__calc aus Abschnitt 5 (460px, 28px
   Abstand nach oben). */

/* --- Der Uebergang ist der Peek ------------------------------
   Er ist das Einzige, was unter dem Hero hervorschauen muss,
   deshalb Display-Schrift statt Fliesstext. Ein halb
   abgeschnittener grauer Absatz zieht niemanden, eine halb
   abgeschnittene grosse Zeile schon. */
.followup__transition {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
@media (max-width: 600px) {
  .followup__transition { font-size: 25px; }
}

/* --- Cookie-Banner: eine Zeile statt vier --------------------
   Der Banner liegt unten fest und deckte am Handy genau den
   Bereich ab, in dem der Peek sichtbar werden soll. Kuerzerer
   Text heisst niedrigerer Banner. Die beiden Knoepfe bleiben
   gleichwertig nebeneinander, keine Vorauswahl, keine
   Gewichtung. */
/* 15.09.2026: Nur der Innenabstand, NICHT der Text. Die Textkuerzung ist
   zurueckgenommen, siehe Kommentar im HTML. */
.consent-banner { padding: 14px 20px; }
@media (max-width: 600px) {
  .consent-banner { padding: 12px 16px; }
  .consent-banner__inner { gap: 10px; }
  .consent-banner__text { font-size: 12px; }
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1 1 0; text-align: center; }
}

/* --- Betriebsgroesse unter dem Kaufpreis, 15.09.2026 ---------
   Bewusst leiser als die Zahl darueber: sie ordnet ein, sie
   konkurriert nicht. Eine eigene Zeile, damit sie beim Ziehen
   des Reglers als Veraenderung wahrgenommen wird. */
.calc__groesse {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.4;
  color: rgba(236, 247, 243, 0.72);
}
@media (max-width: 600px) { .calc__groesse { font-size: 14px; } }

/* ============================================================
   HERO-FEINSCHLIFF 15.09.2026 (Alex)
   ============================================================ */

/* --- Umbrueche ------------------------------------------------
   text-wrap: balance verteilt die Zeilen gleichmaessig, statt die
   letzte als Waise stehen zu lassen. Dazu ein Zeilenmass in em
   statt in Pixeln: so bricht der Satz bei jeder Schriftgroesse an
   derselben relativen Stelle. 24em sind rund 55 Zeichen, das ist
   die Spanne, in der Fliesstext am ruhigsten laeuft. */
.hero__headline { text-wrap: balance; }
.hero__sub--kurz {
  max-width: 24em;
  text-wrap: balance;
  line-height: 1.55;
}

/* --- Rechner unter dem Text ----------------------------------
   Keine Sonderregel noetig: einspaltig setzt .hero__calc sich mit
   seinem eigenen margin-top von 28px unter die Unterzeile. Die
   frueheren Overrides (align-items: start, margin-top 6px,
   Spirale auf -6%) sind mit dem Zweispalter entfallen. */

/* ============================================================
   HERO-CTA, RECHNER-STABILITAET, ABSCHNITT 1 — 15.09.2026
   ============================================================ */

/* --- Rechner springt nicht mehr ------------------------------
   Zwei Ursachen, beide behoben.
   1) Das Wertfeld neben dem Regler war am Handy auf min-width: 0
      gesetzt. Mit jeder Stelle mehr ("65.000" -> "100.000") wurde
      es breiter, der Regler daneben schmaler, und der Griff rutschte
      unter dem Finger weg. Jetzt feste Mindestbreite auf allen
      Groessen, rechtsbuendig, kein Schrumpfen.
   2) Die Ergebniszeile bricht am oberen Reglerende auf zwei Zeilen
      ("1.000.000 € bis 1.330.000 €" passt nicht in eine). Der Kasten
      wurde dadurch beim Ziehen hoeher und niedriger. Jetzt ist die
      Hoehe fuer zwei Zeilen reserviert und der Inhalt darin
      zentriert: die Karte steht still, egal wo der Regler steht.
   Tabellenziffern ueberall, damit gleich viele Stellen auch gleich
   breit sind. */
.calc__row output {
  min-width: 104px;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .calc__row output { min-width: 96px; text-align: right; }
}
.calc__result {
  font-variant-numeric: tabular-nums;
  min-height: calc(2 * 1.15em);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 0.3em;
  line-height: 1.15;
}

/* --- Der Scroll-Knopf im Hero --------------------------------
   Bewusst kein gefuellter Hauptknopf: der einzige gefuellte Knopf
   der Seite ist das Absenden des Formulars. Ein zweiter wuerde mit
   ihm konkurrieren, obwohl er nur weiterblaettert. Also eine
   ruhige Umrandung, die erst beim Ueberfahren Farbe annimmt.
   Der Pfeil wippt, damit der Knopf als Richtung gelesen wird und
   nicht als Link. */
.hero__cta-scroll {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-6);
  padding: 13px 22px;
  border: 1px solid rgba(107, 255, 210, 0.42);
  border-radius: 999px;
  background: rgba(107, 255, 210, 0.06);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: var(--everloom-neon);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.hero__cta-scroll:hover,
.hero__cta-scroll:focus-visible {
  background: rgba(107, 255, 210, 0.13);
  border-color: rgba(107, 255, 210, 0.75);
}
.hero__cta-pfeil {
  width: 18px; height: 18px; flex: 0 0 auto;
  animation: cta-wippe 2.2s ease-in-out infinite;
}
@keyframes cta-wippe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta-pfeil { animation: none; }
}
/* Der Knopf springt an den Anfang von Abschnitt 1, nicht auf dessen
   Oberkante: ein Stueck Luft darueber zeigt, dass man gesprungen ist. */
#angebot-lead { scroll-margin-top: 24px; }

/* --- Abschnitt 1: der Bedeutungsblock ------------------------
   Er darf keine Aufzaehlung sein. Direkt darunter steht die
   EVERLOOM-Liste mit Neon-Punkten; zwei Dreierlisten hintereinander
   haben dieselbe Silhouette, und der Leser ueberspringt die zweite.
   Deshalb tragen die drei Versprechen Kacheln und die EVERLOOM-Punkte
   bleiben eine Liste. Regeln dazu weiter unten bei .bedeutung. */
.followup__transition { margin-top: 0; }

/* --- Abschnitt 1: die drei Zahlen-Kacheln --------------------
   Zweite Fassung. Die erste trug drei Substantive ("Betrieb.
   Entscheidungen. Gewinn."), gross und neon. Das sah gut aus und
   sagte nichts: dieselben drei Woerter stehen auf jeder zweiten
   Selbstaendigkeits-Seite.
   Jetzt fuehrt jede Kachel mit einer Zahl. Eine Zahl ist das
   einzige Element, das gleichzeitig visuell traegt und inhaltlich
   belegt; ein grosses Substantiv kann nur das erste.
   Aufbau je Kachel: Zahl gross und neon, darunter das Bezugswort
   in Weiss, darunter der Beleg in Grau. Drei Ebenen, damit man die
   Reihe in drei Sekunden ueberfliegen kann (nur die Zahlen) oder
   in dreissig ganz liest.
   Flaeche statt Trennlinien: die Kacheln bekommen eigenes Glas mit
   Neonkante oben. Das trennt sie klar von der EVERLOOM-Liste
   direkt darunter, die flach und ohne Flaeche bleibt. */
/* 16.09.2026: zentriert statt linksbuendig (Alex). Der Block ist
   keine Aufzaehlung, sondern eine Rechnung, und eine Rechnung liest
   man mittig. Der ganze uebrige Abschnitt ist ohnehin zentriert; der
   linksbuendige Block war der einzige Ausreisser und hat das Plus an
   eine Kante gedraengt, statt es zwischen die Kacheln zu setzen. */
.bedeutung {
  display: grid;
  gap: var(--space-4);
  margin: 0 auto var(--space-10);
  text-align: center;
}
/* Breiter als der uebrige Abschnitt (620px): drei Spalten darin
   waeren sonst zu schmal fuer die Zahl. Der Ausbruch ist auf die
   Fensterbreite minus Rand begrenzt, damit nichts quer scrollt. */
@media (min-width: 760px) {
  .bedeutung {
    grid-template-columns: repeat(3, 1fr);
    width: min(940px, calc(100vw - 40px));
    margin-inline: calc(50% - min(470px, calc(50vw - 20px)));
    /* Die Luecke ist so breit, dass das Pluszeichen mittig
       hineinpasst. Traegt sie das Bindeglied, braucht es keine
       Trennlinie mehr; die hat die drei Kacheln getrennt, obwohl
       sie zusammengehoeren (Befund Alex). */
    column-gap: 56px;
  }
}
@media (max-width: 759px) {
  /* Gestapelt ist die Luecke senkrecht und traegt das Plus in ihrer
     Mitte. 52px sind die Rechengroesse: 26px Piktogramm plus je 13px
     Luft. Die Positionierung oben rechnet mit genau diesem Wert. */
  .bedeutung { row-gap: 52px; }
}
/* 16.09.2026: Flaeche, Rahmen, Schatten und Neonkante geloescht
   (Befund Alex). Abschnitt 1 hatte drei hervorgehobene Elemente
   uebereinander: diese Kacheln, die Neonpunkte der Liste und den
   Ask-Kasten. Drei Hervorhebungen sind keine Hervorhebung, sondern
   Rauschen, und der Leser weiss nicht mehr, wo er hinschauen soll.
   Die Kacheln tragen Inhalt, nicht Betonung. Sie stehen jetzt flach;
   neon ist in ihnen nur noch die Zahl selbst, und die reicht.
   Der einzige Kasten im Abschnitt bleibt der Ask. Genau dadurch
   wirkt er, ohne lauter werden zu muessen. */
.bedeutung__kachel {
  position: relative;
  padding: 0;
}
.bedeutung__zahl {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(27px, 3.1vw, 34px);
  line-height: 1.05;
  color: var(--everloom-neon);
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
  white-space: nowrap;
}
.bedeutung__was {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 15px; line-height: 1.35;
  color: #FFFFFF;
  margin: 0 0 var(--space-3);
}
@media (max-width: 600px) {
  .bedeutung__kachel { padding: var(--space-5) var(--space-4) var(--space-4); }
  .bedeutung__zahl { font-size: 26px; }
}

/* --- Der Magnet-Satz -----------------------------------------
   Die Frage darueber steht in der Display-Schrift, dieser Satz
   antwortet darauf. Hervorgehoben ist nur die Nutzenhaelfte: der
   Rest beschreibt Inhalt, dieser Teil beschreibt den Gewinn fuer
   den Leser. Neon und fett, aber kein Kasten: eine Flaeche mehr
   wuerde mit dem Absendeknopf direkt darunter konkurrieren. */
.magnet__ask {
  margin: 0 auto var(--space-6); max-width: 560px;
  font-size: 17px; line-height: 1.6;
  color: rgba(236, 247, 243, 0.86);
}
.magnet__nutzen {
  color: var(--everloom-neon);
  font-weight: 700;
}

/* --- Quellenzeile in den Bedeutungs-Kacheln ------------------
   16.09.2026. Klein, grau, ohne Kasten: sie soll belegen, nicht
   werben. Genau deshalb steht sie ueberhaupt da. Die Seite
   behauptet an dieser Stelle Geld, und eine Geldbehauptung ohne
   Herkunft ist im Zweifel eine Werbeaussage.
   Abgesetzt durch eine feine Linie statt durch Abstand, damit die
   Kachel nicht auseinanderfaellt. */
.bedeutung__quelle {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(107, 255, 210, 0.14);
  font-size: 12px; line-height: 1.45;
  color: rgba(236, 247, 243, 0.45);
}
/* Die Kacheln stehen im Raster gleich hoch. Ohne das haengt die
   mittlere Quellenzeile in der Luft, weil ihr die Quelle fehlt. */
.bedeutung__kachel { display: flex; flex-direction: column; }
.bedeutung__kachel .bedeutung__quelle { margin-top: auto; }

/* --- Vierte Fassung der Kacheln: die Addition ----------------
   16.09.2026. Die grosse Zeile traegt jetzt nur noch die
   Geldgroesse, damit "> 80.000 € / + Gewinn / + Wert" sich beim
   Ueberfliegen zu einer Summe addiert. Alles Erklaerende ist
   kuerzer und tritt optisch zurueck.
   Das Pluszeichen ist bewusst gedaempft: es soll die Reihe
   zusammenhalten, aber nicht mit dem Wort dahinter konkurrieren.
   Die Quellenzeile ist auf eine Zeile eingedampft. Sie muss
   belegen, nicht erklaeren; wer es genauer will, findet die
   Langfassung im Quelltext-Kommentar. */
.bedeutung__zahl {
  font-size: clamp(25px, 2.8vw, 31px);
  margin-bottom: 2px;
}
/* --- Das Pluszeichen als Bindeglied -------------------------
   16.09.2026. Vorher stand es in der Zahlenzeile und war ein
   Schriftzeichen. Jetzt sitzt es in der Luecke zwischen den
   Kacheln und ist ein kleines Piktogramm: ein Kreis mit Plus.
   Damit liest sich die Reihe als eine Rechnung und nicht als
   drei nebeneinandergestellte Behauptungen.
   Auf dem Desktop sitzt es waagerecht zwischen den Spalten, auf
   Kachelhoehe der grossen Zahl, damit die Zeile als Gleichung
   durchlaeuft. Am Handy sitzt es senkrecht zwischen den
   gestapelten Kacheln und zeigt dadurch nach unten weiter. */
.bedeutung__plus {
  position: absolute;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(107, 255, 210, 0.30);
  background: rgba(107, 255, 210, 0.07);
  color: var(--everloom-neon);
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  line-height: 1;
}
@media (min-width: 760px) {
  /* Waagerecht: genau in die Mitte der 56px-Luecke links der Kachel,
     auf Hoehe der grossen Zahl. Damit laeuft die Reihe als Gleichung
     durch: Zahl, Plus, Zahl, Plus, Zahl. */
  .bedeutung__plus {
    left: calc(-1 * (56px / 2));
    top: 4px;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 759px) {
  /* Senkrecht: mittig ueber der Kachel, in der Mitte des Zeilen-
     abstands. Vorher klebte es an der Kante und sah aus wie ein
     Aufzaehlungszeichen; mittig ist es das Bindeglied, das es sein
     soll, und zeigt zugleich nach unten weiter. */
  .bedeutung__plus {
    left: 50%;
    top: calc(-1 * (52px / 2) - 13px);
    transform: translateX(-50%);
  }
}
.bedeutung__was {
  font-size: 14px;
  color: rgba(236, 247, 243, 0.62);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.bedeutung__quelle {
  margin-top: var(--space-4);
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(236, 247, 243, 0.38);
}
@media (max-width: 600px) {
  .bedeutung__zahl { font-size: 25px; }
}

/* --- Kacheln sauber formatiert -------------------------------
   16.09.2026. Drei Korrekturen:
   1) Trennlinie ueber der Quelle raus (Alex). Sie zerteilte eine
      kleine Flaeche noch einmal und liess die mittlere Kachel,
      die keine Quelle hat, unfertig aussehen.
   2) Gleicher Innenabstand auf allen vier Seiten, damit die drei
      Kacheln nebeneinander dieselbe optische Masse haben.
   3) Die Quelle wird ans untere Ende gezogen, die Belegzeile
      bekommt darunter festen Abstand. Dadurch stehen die drei
      Quellenzeilen auf einer Linie, auch wenn der Text darueber
      verschieden lang ist, und die Kachel ohne Quelle bleibt
      trotzdem unten sauber geschlossen. */
.bedeutung__kachel { justify-content: flex-start; }
.bedeutung__quelle {
  margin: auto 0 0;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 600px) {
}

/* --- Der Ask-Block -------------------------------------------
   16.09.2026. Bis zu den drei Punkten erklaert Abschnitt 1, ab
   hier fragt er. Der Bruch bekommt eine eigene Flaeche.
   Bewusst ANDERS als die Bedeutungs-Kacheln: die sind dunkles
   Glas mit Neonkante oben, dieser Block ist heller, ohne Kante
   und mit weichem Neonschein nach innen. Zwei gleich aussehende
   Kastenarten in einem Abschnitt lesen sich als Wiederholung,
   zwei verschiedene als Kapitelwechsel.
   Grosszuegig ueber dem Block, damit er nicht an der Liste
   klebt: die Luft davor macht die Hauptarbeit, der Rahmen
   bestaetigt sie nur. */
.ask {
  margin: var(--space-12) auto 0;
  max-width: 600px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  /* 16.09.2026, zweiter Durchgang. Erst Neonschein raus, jetzt auch
     Rahmen und Schlagschatten (Befund Alex: "hast du das absichtlich
     so krass hervorgehoben"). Ja, absichtlich, aber zu stark. Der
     Ask soll der Zielpunkt des Abschnitts sein, und das ist er auch
     ohne Dekoration: er ist die einzige Flaeche weit und breit und
     hat 48px Luft davor. Geblieben ist eine minimale Aufhellung,
     gerade genug, dass die Kante zu sehen ist. */
  background: rgba(236, 247, 243, 0.035);
  border: 0;
  border-radius: var(--radius-card-lg);
}
.ask .calc__cta-lead {
  font-size: 22px;
  margin: 0 auto var(--space-4);
  max-width: 460px;
}
.ask .magnet__ask {
  margin: 0 auto var(--space-6);
  max-width: 480px;
}
.ask .signup-form { margin-bottom: 0; }

/* --- Spacing in Abschnitt 1 ----------------------------------
   Die Abstaende folgen jetzt der Gliederung statt der Reihenfolge:
   gross zwischen den drei Teilen (Bedeutung, EVERLOOM, Ask), klein
   innerhalb eines Teils. Vorher lagen alle Abstaende zwischen 24
   und 40px, dadurch las sich der Abschnitt als sieben
   gleichwertige Absaetze. */
.followup__transition { margin-bottom: var(--space-5); }
.bedeutung { margin-bottom: var(--space-12); }
.followup__everloom { margin-bottom: var(--space-5); }
.followup__points { margin-bottom: 0; }
@media (max-width: 600px) {
  .ask {
    margin-top: var(--space-10);
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  .ask .calc__cta-lead { font-size: 19px; }
  .bedeutung { margin-bottom: var(--space-10); }
}

/* --- Kacheln ohne Belegtext ----------------------------------
   16.09.2026. Die dritte Zeile ist raus; es bleiben Zahl, eine
   Bezugszeile und die Quelle. Die Bezugszeile darf jetzt zwei
   Zeilen lang werden, deshalb bekommt sie Abstand nach unten und
   die Quelle rueckt an die Unterkante, damit die drei Kacheln
   trotz verschieden langer Bezugszeilen unten buendig enden. */
.bedeutung__was {
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.bedeutung__kachel:not(:has(.bedeutung__quelle)) .bedeutung__was {
  margin-bottom: 0;
}

/* --- Zentrierte Kacheln: Zeilen bremsen ---------------------
   16.09.2026. Zentrierter Text franst aus, wenn die Zeilen zu
   lang werden, weil beide Kanten flattern. Deshalb hier eine
   Zeilenbremse in em: "des Unternehmens, wenn der Kredit getilgt
   ist" bricht damit sauber auf zwei Zeilen statt auf eine lange
   und ein Restwort. */
.bedeutung__was,
.bedeutung__quelle {
  max-width: 22em;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 759px) {
  .bedeutung__kachel { max-width: 340px; margin-inline: auto; }
}

/* ============================================================
   FALLFRAGEN IM ASK  (17.09.2026)
   ------------------------------------------------------------
   Der Ask fragt seit dem Umbau zwei Dinge ab, bevor die Adresse
   kommt: Gewerk und Stand. Beide sind bewusst OPTIONAL, es gibt
   keinen .signup-form__step2 und damit keine Sperre; wer nur die
   Adresse hinterlaesst, kommt trotzdem durch. Der Grund ist die
   Menge: bei sechs Klicks am Tag ist ein zusaetzlicher Pflicht-
   schritt teurer als ein unvollstaendiger Datensatz.
   Beschriftung steht ueber dem Feld, nicht als Platzhalter darin:
   ein Platzhalter verschwindet beim Ausfuellen, und genau dann
   braucht man ihn zum Gegenlesen.
   ============================================================ */
.ask__felder {
  display: grid;
  gap: var(--space-3);
  margin: 0 auto var(--space-4);
  max-width: 480px;
  text-align: left;
}
.ask__feld { margin: 0; }
.ask__feld-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(236, 247, 243, 0.62);
}
@media (min-width: 560px) {
  .ask__felder { grid-template-columns: 1fr 1fr; }
}



/* --- Luft unter "Was das für dich bedeutet" (18.09.2026) ------
   Befund Alex: am Laptop steht die Ueberschrift zu dicht auf den
   drei Kacheln, am Handy passt es.
   Der Grund ist, dass beide Ansichten denselben Abstand teilen
   (20px, Zeile ~2786), er aber unterschiedlich viel leisten muss:
   am Handy stehen die Kacheln untereinander, die Ueberschrift hat
   also nur EINE Kachel unter sich und wirkt dadurch von selbst
   abgesetzt. Am Laptop liegen drei Kacheln als breite Reihe
   darunter, und gegen diese Masse sind 20px keine Zaesur mehr,
   sondern sehen aus wie ein Zeilenabstand.
   Deshalb nur die Desktop-Ansicht anfassen, der Umbruchpunkt ist
   derselbe wie fuer den Rest von Abschnitt 1 (600px). */
@media (min-width: 601px) {
  .followup__transition { margin-bottom: var(--space-10); }
}