/* Beratung — eigenständige Funnel-Landingpage (beratung.html).
   Baut auf tokens.css + site.css + bewertungen.css auf und nutzt die Marke
   (Farben/Fonts/Buttons/Kopf/Fuß/.band-navy/.faq/.stimmen) STRIKT weiter — aber mit einer
   EIGENEN Layout-Sprache (.lp-*) statt der Startseiten-Signatur (.hero/.bank/.abschnitt/.noten).
   Der Unterschied zur Startseite entsteht über Layout, nicht über Farbe. KEINE Inline-Styles
   (CSP style-src).

   css/rechner-seite.css bewusst NICHT laden: es definiert .kopf/.huelle/.sektion anders und
   würde den Kopf zerlegen. Die Europace-Regeln (.ep-*) stehen deshalb unten kopiert. */

/* Diese Seite hat kein Beleg-Band unter dem Kopf. Ohne diese Zeile reserviert
   section[id]{scroll-margin-top} einen 40px-Phantom-Offset bei Ankersprüngen (#rechner). */
body { --band-hoehe: 0px; }

/* === Eine durchgehende Mittelachse über ALLE Sektionen ===
   Vorher wechselten die Sektionen unmotiviert zwischen zentriert und linksbündig ("mal rechts,
   mal links"). Jetzt: jeder Sektionskopf (kicker/h2/lead) zentriert, jeder Inhaltsblock als
   zentrierte Spalte (margin-inline:auto); Fließtext/Listen darin bleiben linksbündig lesbar. */
.lp-block .bahn > h2,
.lp-block .bahn > .kicker { text-align: center; }
/* .kicker ist ein FLEX-Kasten (tokens.css:137-146, wegen des Punkts im ::before).
   In einem Flex-Kasten greift text-align nicht — der Punkt samt Text blieb deshalb
   trotz der Regel darüber linksbündig hängen. Zentriert wird er nur über justify-content. */
.lp-hero-kopf .kicker,
.ep-huelle .kicker,
.lp-block .bahn > .kicker { justify-content: center; }
/* .bahn-schmal-Kinder (FAQ, Abschluss) tragen nur max-width, kein margin — hier mittig setzen.
   Behebt zugleich den ~200px-Versatz des Abschluss-Leads gegen h2/CTAs. */
.lp-block .bahn-schmal > * { margin-inline: auto; }

/* ==================== 1 · Hero: Kopf + Karte ==================== */
.lp-hero { padding-block: 64px 44px; }

/* ACHTUNG: max-width gehört NICHT auf das .bahn-Element selbst (site.css:5-8).
   .bahn trägt padding-inline: var(--gutter), und --gutter enthält ein 100%, das sich
   gegen die volle Seitenbreite auflöst. Stand die Begrenzung auf demselben Element,
   fraß das Gutter sie von beiden Seiten auf: bei 1440px blieben 560px, bei 1600px
   400px, ab ~1980px 0px — die Überschrift fiel auf ein Wort pro Zeile zusammen.
   Am Handy fiel es nicht auf (--rand-mobil 20px). Deshalb: Begrenzung auf die KINDER,
   genau wie .bahn-schmal > * es macht. */
.lp-hero-kopf {
  text-align: center;
}
.lp-hero-kopf > * {
  max-width: 760px;
  margin-inline: auto;
}
.lp-hero-kopf .lead {
  margin-top: 18px;
  margin-inline: auto;
  max-width: 60ch;
}

/* Die Karte ersetzt den kantenbrechenden Porträt-Hero + die Trust-Bank der Startseite. */
.lp-karte {
  margin: 40px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(36, 28, 99, 0.45); /* = --tinte-tief #241C63 @ 45% */
}
.lp-portraet {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.lp-karte-inhalt {
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

/* Häkchen-Checkliste: Indigo-Kreis mit hellem Haken — markig, nutzt die Marke,
   kein Gelb auf Hell, keine Icon-Bibliothek. */
.lp-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-check li {
  position: relative;
  padding-left: 38px;
  font-size: var(--t-body);
  line-height: 1.5;
}
.lp-check li::before {          /* der Kreis */
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tinte);
}
.lp-check li::after {           /* der Haken, in heller Schrift auf dem Indigo-Kreis */
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--auf-tinte);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.lp-karte-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lp-frei { margin: 0; color: var(--sekundaer); }

/* ==================== Sektions-Rhythmus (statt .abschnitt) ====================
   Kein 104px + Hairline wie die Startseite — engerer Rhythmus, Trennung über
   Flächenwechsel Papier/Butter statt über Trennlinien. */
.lp-block { padding-block: 72px; }
.lp-block.lp-butter { background: var(--flaeche2); }

/* ==================== 2 · Ratenrechner ====================
   Seit 21.07.2026 steht hier der eigene Rechner der Startseite (css/rechner.css) statt des
   Europace-Widgets — die .ep-*-Regeln sind mit ihm entfallen. css/rechner.css bringt alles
   Nötige mit; hier stehen nur die zwei Dinge, die aus der Funnel-Seite folgen:

   1. Die Rechner-Karte ist selbst auf --flaeche2 gebaut (rechner.css:5). Auf der Startseite
      liegt sie auf Papier. Hier liegt sie in einer Butter-Sektion — gleiche Farbe auf
      gleicher Farbe, die Karte wäre unsichtbar. Also heller Papier-Grund, genau wie zuvor
      der Consent-Kasten.
   2. Der Sektionskopf steht auf der Mittelachse: kicker + h2 erledigt die Regel ganz oben,
      der Lead braucht die Zentrierung eigens. */
.lp-rechner .kicker { margin-bottom: 14px; }
.lp-rechner h2 { margin-bottom: 12px; }
.lp-rechner-lead {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.lp-rechner .rechner-karte {
  margin-top: 30px;
  background: var(--papier);
}

/* ==================== 3 · Kompakte Bewertungen (statt Noten-Grid) ==================== */
.lp-noten {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}
.lp-noten li {
  font-size: var(--t-klein);
  color: var(--sekundaer);
  white-space: nowrap;
}
.lp-noten b { color: var(--tinte); font-size: var(--t-body); }
.lp-noten-block .stimmen { margin-top: 30px; }
/* Herkunfts-/Echtheitshinweise: Pflichtangaben (§ 5b Abs. 3 UWG), kein Verkaufstext.
   Auf der Startseite stehen sie als 62ch-Spalte — auf der Funnel-Seite wurde daraus ein
   hoher Textklotz, der mehr Aufmerksamkeit zog als die Bewertungen darüber.
   Deshalb hier flach statt schmal: über die volle Bahnbreite laufender Fließtext, klein
   gesetzt. Beides zusammen bringt die 15 Zeilen auf 5 herunter, ohne ein Wort zu streichen.
   Die FARBE bleibt --sekundaer (9,4:1). Kleiner setzen ist eine Gestaltungsfrage, blasser
   setzen wäre eine Rechtsfrage: Die Auskunft muss klar und verständlich bleiben. */
.lp-noten-block .stimmen-hinweis {
  max-width: none;
  font-size: 14px;
  line-height: 1.55;
}
.lp-noten-block .stimmen-hinweis + .stimmen-hinweis { margin-top: 10px; }

/* ==================== 4 · FAQ ====================
   Wie die Bewertungs-Hinweise: flach statt hoch. Die Startseiten-Maße (site.css:710 `.faq`
   780px, site.css:745 `.faq-antwort p` 62ch) machen aus jeder Antwort einen mehrzeiligen
   Block. Auf der vollen Bahnbreite läuft dieselbe Antwort in einer Zeile aus.
   Gilt NUR für die FAQ-Sektion — der Abschluss-Block nutzt dasselbe .bahn-schmal, bleibt
   aber bewusst schmal: kurze, mittige CTA-Copy verträgt keine 1180px-Zeile. */
.lp-faq .bahn-schmal > * { max-width: none; }
.lp-faq .faq { max-width: none; }
.lp-faq .faq-antwort p { max-width: none; }

/* ==================== 5 · Kundengeschichte (auf dem Navy-Band) ====================
   Ebenfalls voll auslaufend statt als 60ch-Säule (siehe .lp-faq oben). */
.lp-geschichte {
  margin: 22px auto 0;
  max-width: none;
  text-align: left;             /* Absatz lesbar links, Spalte aber mittig auf der Achse */
}
.lp-geschichte .lead { color: var(--auf-tinte-leise); }
.lp-geschichte-hinweis { margin-top: 12px; color: var(--auf-tinte-leise); }
.lp-geschichte-cta { margin-top: 26px; text-align: center; }
/* Auf dem Navy-Band ist ein Link in --tinte (Indigo) unsichtbar. Er trägt hier die
   helle Schrift, der Unterstrich läuft im Akzent (auf Navy = Gelb). */
.lp-geschichte-cta a {
  color: var(--auf-tinte);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.lp-geschichte-cta a:hover { text-decoration-thickness: 3px; }

/* ==================== 6 · Partner + Abschluss ==================== */
.lp-abschluss { text-align: center; }
.partner-text {
  margin: 0 0 28px;
  font-size: var(--t-klein);
  color: var(--sekundaer);
}
.partner-text a { color: var(--tinte); font-weight: 600; text-underline-offset: 4px; }

/* Partner-Banner „Immobilienmarkt Ihrer Region“ — Nachbau des Bildes von
   baukredit24.net (Abkommen: Verlinkung gegen weitergeleitete Anfragen).
   Als Markup statt als Bild, weil das Original nur 453 px breit ist und auf
   jedem Retina-Schirm ausfranst. Die Maße sind am Original ausgemessen
   (453 × 150) und stehen in cqw — damit hält der Banner seine Proportionen
   in jeder Größe.

   cqw misst am nächsten Container-VORFAHREN, nie am Element selbst: deshalb
   trägt .immo-banner nur container-type, und alle Maße sitzen in .immo-innen.
   Stünde das Padding am Rahmen selbst, rechnete es gegen das Ansichtsfenster. */
.immo-banner {
  container-type: inline-size;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 28px;
  background: #3366CC;   /* Fremdmarke — bewusst außerhalb der Fairfinanz-Palette */
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.immo-innen { display: block; padding: 3.97cqw 0 3.31cqw; }
.immo-banner img { display: block; width: 12.8cqw; height: auto; margin: 0 auto 2.87cqw; }
.immo-banner b { display: block; font-size: 4.19cqw; font-weight: 700; line-height: 1; }
.immo-banner i {
  display: block;
  font-style: normal;
  font-size: 3.08cqw;
  line-height: 1;
  margin-top: 1.33cqw;
}
.immo-banner:hover { filter: brightness(1.08); }
.immo-banner:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }

.lp-abschluss-lead { margin-top: 16px; max-width: 56ch; }
.abschluss-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.abschluss-ctas .btn { min-height: 60px; }

/* ==================== Schmalere Bildschirme ==================== */
@media (max-width: 800px) {
  .lp-karte {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .lp-portraet { aspect-ratio: 3 / 2; }
  .lp-karte-inhalt { padding: 28px 26px; }
}
@media (max-width: 699px) {
  .lp-hero { padding-block: 44px 32px; }
  .lp-block { padding-block: 56px; }
  .ep-tor { padding: 22px 20px; }
  .ep-ziel:not(:empty) { min-height: 560px; }
}