/* Fairfinanz — Startseite
   Baut auf tokens.css auf. Keine Inline-Styles (CSP: style-src 'self'),
   keine Scroll-Einblendungen, keine Icon-Bibliothek, kein zweites Rot.

   Der Seitenrand ("Gutter") wird überall aus derselben Formel gebildet:
   max(--rand, (Seitenbreite - --spalte) / 2). Weil jedes Element, das sie
   benutzt, die volle Seitenbreite als Bezug hat (Sektion, Hero, Kopf, Bank),
   fluchten Kopfzeile, Hero-Text und alle Sektionen exakt übereinander. */

:root {
  --gutter: max(var(--rand), calc((100% - var(--spalte)) / 2));
  --kopf-hoehe: 72px;
  --band-hoehe: 40px;   /* das Beleg-Band unter dem Kopf; unter 900 px ist es aus (dann 0) */
}

/* ---------- Grundgerüst ---------- */

.bahn {
  padding-inline: var(--gutter);
}
.bahn-schmal > * {
  max-width: 780px;
}

.abschnitt {
  padding-block: 104px;
  border-top: 1px solid var(--linie);
}
.abschnitt > .bahn > h2 {
  max-width: 20ch;
}
.abschnitt-lead {
  margin-top: 20px;
  max-width: 62ch;
}

/* Anker sitzen unter der klebenden Kopfzeile */
/* Das Beleg-Band hängt unter dem Kopf und überlagert den Inhalt. Ohne diesen Zuschlag
   landet ein Ankersprung (#rechner, #kontakt) mit seiner Überschrift UNTER dem Band. */
section[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--band-hoehe) + 16px); }

.sprungmarke {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--papier);
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.sprungmarke:focus { top: 12px; }

/* Weicher Textlink — die Alternative zum Knopf, wo Rost verboten ist */
.textlink {
  color: var(--tinte);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--linie);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.textlink:hover { text-decoration-color: var(--tinte); }

/* ---------- 0 · Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
}
.kopf .signet { width: 30px; height: 30px; }
.kopf .wortmarke { font-size: 25px; }

/* ---------- 0b · Beleg-Band unter dem Kopf ----------
   Die Belege („189 Bewertungen · seit 1996 · § 34c") stehen im Hero in der Beleg-Bank.
   Scrollt die Bank oben aus dem Bild, sollen sie nicht verschwinden — sie sind das
   Einzige, was Frank von einem Portal unterscheidet. Also docken sie am Kopf an.

   position: absolute + top: 100% ist Absicht: Das Band hängt UNTER dem Kopf, ohne
   dessen Fluss-Höhe zu vergrößern. Ein Kopf, der beim Scrollen von 72 auf 112 px
   wächst, verschiebt den gesamten Inhalt darunter um 40 px — ein sichtbarer Ruck.
   Der Kopf ist sticky, das Band fährt mit ihm. */
.beleg-band {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--band-hoehe);
  background: var(--tinte);
  color: var(--auf-tinte);
  overflow: hidden;

  /* Startzustand: hochgeschoben und unsichtbar. Kein .js-Vorbehalt nötig — ohne JS
     bleibt es einfach oben stehen und ist nie zu sehen; die Belege stehen dann weiter
     im Hero, wo sie ohnehin hingehören. */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
}
.beleg-band.ist-angedockt {
  transform: none;
  opacity: 1;
}
.beleg-band-innen {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-inline: var(--gutter);
  font-size: 15px;
  line-height: 1;
  color: var(--auf-tinte-leise);
  white-space: nowrap;
}
.beleg-band-innen b {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  color: var(--auf-tinte);
}
/* Gold als Trenner — eine Linie, kein Buchstabe. */
.beleg-band-innen > span + span { border-left: 2px solid var(--akzent); padding-left: 28px; }
.beleg-band-recht { margin-left: auto; }

.hauptnav {
  display: flex;
  gap: 34px;
  margin-left: 56px;
}
.hauptnav a {
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-block: 4px;
}
.hauptnav a:hover { border-bottom-color: var(--tinte); }

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.kopf-tel {
  font-size: 18px;
  font-weight: 600;
  color: var(--sekundaer);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.kopf-tel b { color: var(--tinte); font-weight: 600; }
.kopf-tel:hover b { text-decoration: underline; text-underline-offset: 3px; }

.kopf-btn {
  min-height: 44px;
  padding: 0 22px;
  font-size: 17px;
  border-width: 1px;
}

/* Mobile Bedienelemente — erst unter 1080px sichtbar */
.kopf-anrufen,
.menue-knopf { display: none; }

/* ---------- 1 · Hero (Höhepunkt 1) ---------- */

/* Die Höhe wächst mit der Breite: Das Porträt wird über die Höhe der Fläche
   skaliert — bliebe die Höhe fix, würde die Fläche auf schmalen Bildschirmen
   hoch und schmal und der Kopf immer enger angeschnitten. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
  min-height: clamp(600px, 56vw, 800px);
  padding-left: var(--gutter);   /* rechts bewusst 0: die Bildfläche bricht die Kante */
  background: var(--papier);
}

.hero-text {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px 176px 0;   /* unten frei für die Beleg-Bank */
}
.hero h1 {
  font-size: clamp(36px, 4vw, 58px);
  margin-top: 22px;
}
.hero-lead {
  margin-top: 26px;
  max-width: 34em;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero-ctas .btn { min-height: 60px; }
.hero-tel {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  gap: 8px;
}
.hero-tel small {
  font-size: 16px;
  font-weight: 600;
  color: var(--sekundaer);
  letter-spacing: 0;
}

/* Bildfläche: bricht die rechte Viewport-Kante. Kein Rahmen, kein Radius, kein Kreis.
   Das Porträt wird über die HÖHE der Fläche skaliert und über seine eigene
   Gesichtsmitte (58,6 % der Bildbreite) zentriert — dadurch sitzt die Augenlinie
   bei jeder Spaltenbreite auf 6,8 % + 31,5 % · 99 % = 38 % der Flächenhöhe. */
.hero-bild {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--flaeche2);
}
/* object-fit statt des alten Absolut-Tricks (height:99% + translateX(-58.6%)):
   Der Bildausschnitt wird EINMAL am Bild justiert (object-position), statt bei jeder
   Spaltenbreite neu ausgerechnet zu werden. Und weil am Handy ein eigenes, hochformatiges
   Bild ausgeliefert wird (<picture> media), gibt es dort kein Querband mehr. */
.hero-bild picture,
.hero-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-bild img {
  object-fit: cover;
  object-position: 50% 22%;
}

/* Beleg-Bank: Papierkarte, die über die Naht in die Bildfläche läuft.
   Sie soll ABHEBEN, nicht kleben: eigener Schatten und eine Goldkante oben, die beim
   Einblenden von links aufwächst.

   KEINE PARALLAXE MEHR. Bis Runde 3 schob js/reveal.js die Bank beim Scrollen bis zu
   16 px nach oben. Die Bank sitzt aber bündig auf `bottom: 0` — unter der freigeräumten
   Strecke liegt nichts. Über die linken 60 % war das Hero-Hintergrund (Papier auf Papier,
   unsichtbar), aber die Bank ist 78 % breit und ragt in die Bildspalte: Dort blitzte auf
   ganzer Breite ein Streifen des Hero-Fotos unter der Karte hervor. Ein Element, das
   bündig auf einer Kante sitzt, darf nicht von dieser Kante weggeschoben werden.
   Die Bewegung, die die Bank jetzt hat, ist das Andocken am Kopf (siehe .beleg-band). */
.bank {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 78%;
  min-height: 128px;
  background: var(--papier);
  box-shadow: 0 18px 48px -18px rgba(49, 39, 131, 0.28);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 44px 20px var(--gutter);
}
/* Goldkante oben — sie ersetzt die frühere graue Hairline. */
.bank::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--akzent);
  transform-origin: left center;
}
.trust { display: flex; }
.trust-item { display: flex; flex-direction: column; gap: 1px; padding-right: 34px; }
.trust-item + .trust-item { padding-left: 34px; border-left: 1px solid var(--linie); }
/* min-height gilt für beide Zahlen, nicht nur für die verlinkte: sonst stünden
   die Beschriftungen der zwei Belege nicht mehr auf einer Linie.
   Kein inline-flex — der Link enthält Wortzwischenräume („4,98 von 5“), die ein
   Flex-Kontext verschlucken würde. */
.trust-zahl {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 26px;
  line-height: 1.15;
  color: var(--tinte);
  text-decoration: none;
  min-height: 44px;
}
a.trust-zahl {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--linie);
}
a.trust-zahl:hover { text-decoration-color: var(--tinte); }
.trust-label { font-size: 16px; line-height: 1.35; color: var(--sekundaer); }
.rechtsnote {
  margin-left: auto;
  text-align: right;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sekundaer);
  max-width: 262px;
}

/* ---------- 2 · Vier Sätze ---------- */

/* Der KUNDENSATZ ist der Wiedererkennungspunkt — „das bin ich“. Er stand vorher klein
   und grau da, und nur Franks Antwort stach heraus; man sah also genau das nicht, wofür
   man hergekommen ist. Jetzt tragen beide dasselbe Gewicht in der Größe, und die Antwort
   gewinnt über die Schriftstärke und den Goldbalken. */
.saetze { margin: 48px 0 0; }
.satz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--linie);
}
.satz:last-child { border-bottom: 1px solid var(--linie); }
.satz dt {
  position: relative;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--tinte);
  text-wrap: pretty;
}
.satz dd {
  margin: 0;
  position: relative;
  padding-left: 20px;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-wrap: pretty;
}
/* Der Goldbalken macht die Antwort zur Antwort — ohne dass sie größer sein muss. */
.satz dd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.15em;
  width: 3px;
  background: var(--akzent);
}

/* Achtung: max-width in ch würde sich auf die Schriftgröße des Elements (19px)
   beziehen, nicht auf die 32px des Zitats — deshalb ein fester Wert.
   Keine eigene Oberlinie: die Satzliste schließt bereits mit einer Linie ab,
   zwei Hairlines dicht übereinander lesen sich wie ein Fehler. */
.zitat {
  margin: 72px 0 0;
  max-width: 680px;
}
.zitat blockquote { margin: 0; }
.zitat p {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.zitat figcaption {
  margin-top: 18px;
  font-size: var(--t-klein);
  color: var(--sekundaer);
}

/* ---------- 3 · Drei Säulen — das Navy-Band ----------
   Die eine gefüllte Farbfläche der Seite. Sie trägt den Satz, der sowohl für den
   Kunden mit Eigenkapital gilt als auch für den abgelehnten: verhandelt wird immer.
   Gewicht statt Dekoration — es gibt kein echtes Bildmaterial außer dem Porträt,
   und ein Stock- oder KI-Bild wäre genau das, was Frank nicht mehr will. */

.band-navy {
  position: relative;
  overflow: hidden;            /* hält den Lichtschein im Band */
  background: var(--tinte);
  color: var(--auf-tinte);
  border-top: 0;               /* der Farbwechsel IST die Trennung */
}
.band-navy h2,
.band-navy h3 { color: var(--auf-tinte); }
.band-navy .lead,
.band-navy p { color: var(--auf-tinte-leise); }
.band-navy .kicker { color: var(--auf-tinte-leise); }
.band-navy .bahn { position: relative; z-index: 1; }

/* Sehr langsamer, sehr schwacher Goldschein, der über das Navy zieht. Er soll nicht
   auffallen, sondern verhindern, dass die Fläche tot wirkt — deshalb 24 s und 0,07
   Deckkraft. Wird er sichtbar, ist er zu stark. */
.band-schein {
  position: absolute;
  inset: -40% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(45% 55% at 30% 40%, rgba(255, 210, 63, 0.07), transparent 70%);
  animation: schein-drift 24s ease-in-out infinite alternate;
}
@keyframes schein-drift {
  from { transform: translate3d(-6%, -3%, 0) scale(1); }
  to   { transform: translate3d(10%, 4%, 0) scale(1.15); }
}

/* Die Überschrift läuft zeilenweise ein (Verzögerung in css/reveal.css).
   Die 20ch aus .abschnitt > .bahn > h2 würden „Ich vergleiche nicht nur." (25 Zeichen)
   umbrechen — aus zwei Zeilen würden drei, und der Umbruch säße mitten im Satz.
   Hier bestimmen die beiden Sätze den Umbruch, nicht die Spaltenbreite.
   Der Selektor ist so lang, weil er die 20ch von `.abschnitt > .bahn > h2` überbieten muss. */
.abschnitt > .bahn > h2.band-h2 { max-width: 26ch; }
.band-h2 span { display: block; }

.saeulen {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
/* Sonnengelb auf Indigo: 8,3:1 (nachgerechnet, css/tokens.css). Der Wert 4,7:1, der hier
   bis Runde 5 stand, gehört zum VERWORFENEN Blaugold (Altgold #C08A2E auf Navy #122C46) —
   wer ihn liest, rechnet mit knapp der Hälfte. Als Strich zulässig und hier der einzige Ort,
   an dem Gold gegen eine dunkle Fläche arbeitet statt gegen Papier. */
.saeule { padding-top: 22px; border-top: 2px solid var(--akzent); }
.saeule h3 { margin-bottom: 10px; }
.saeule p { color: var(--auf-tinte-leise); }

/* ---------- 4 · Rechner ----------
   Der Rechner ist eine geteilte Komponente: Markup nach Vertrag, Gestaltung in
   css/rechner.css, Logik in js/rechner.js. Hier steht NUR, was die Startseite
   drumherum braucht — keine Zweitgestaltung der Bauteile. */

.rechner-karte { margin-top: 48px; }

/* Der Kopf über der großen Rate (nicht Teil von rechner.css) */
.r-rate-kopf {
  font-size: var(--t-klein);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sekundaer);
}

/* Rost bleibt der Handlung vorbehalten — kein Rot-Text beim Überfahren. */
.rechner-abschnitt .r-weiter a:hover { color: var(--tinte); }

/* Der Prozentsatz darf nicht zwischen Zahl und Zeichen umbrechen. */
.rechner-abschnitt #r-nk-satz { white-space: nowrap; }

/* Zwei Spalten werden unter 900px zu eng für Beschriftung + Zahlenfeld nebeneinander. */
@media (max-width: 900px) {
  .rechner-abschnitt .rechner-raster {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.r-eigene-seite { margin-top: 28px; }

/* ---------- 5 · Bewertungen ----------
   Auf Sand. Das Designsystem weist Sand ausdrücklich als Fläche für Beleg-Module aus,
   und die Seite braucht hier einen Flächenwechsel: zehn Absätze Papier hintereinander
   lesen sich weiß und flach. */

.noten-abschnitt { background: var(--flaeche2); }

/* Vier Quellen statt zwei. Deshalb ein Raster mit vier gleichen Spalten statt einer
   Flex-Reihe: Vier Blöcke à 64 px Innenabstand und 58 px Zahl passen nebeneinander
   nicht mehr in die 1180-px-Bahn — sie würden umbrechen und zwei davon stünden
   verwaist in einer zweiten Zeile. Die Zahl wird kleiner, der Abstand enger. */
.noten {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.note { padding-right: 28px; }
.note + .note { padding-left: 28px; border-left: 1px solid var(--linie); }
.note-zahl {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* Die Summe unter den vier Noten. Sie ist der ehrliche Ersatz für die frühere
   „Gesamtnote": Die Zahlen addieren sich, aber die Noten werden NICHT verrechnet —
   keine der Plattformen weist einen Gesamtschnitt aus, also erfinden wir keinen. */
.noten-summe {
  margin-top: 20px;
  color: var(--sekundaer);
  font-size: var(--t-klein);
  max-width: 62ch;
}
.note-skala {
  font-size: 22px;
  font-weight: 700;
  color: var(--sekundaer);
  letter-spacing: -0.01em;
}
.note-quelle { margin-top: 8px; color: var(--sekundaer); font-size: var(--t-klein); }
.note-quelle a {
  color: var(--tinte);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.noten-satz {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--linie);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 34ch;
}

/* ---------- 6 · Ablauf ---------- */

/* Das zweite dunkle Band der Seite. Bewusst Navy-TIEF, nicht dasselbe Navy wie das
   Verhandeln-Band: Der eine große Auftritt bleibt „Ich vergleiche nicht nur. Ich
   verhandle.“ — das hier ist der ruhigere zweite Anker. Zwei dunkle Flächen auf der
   Seite, aber nie zwei auf einem Bildschirm. */
.band-navy-tief {
  background: var(--tinte-tief);
  color: var(--auf-tinte);
  border-top: 0;
}
.band-navy-tief h2,
.band-navy-tief h3 { color: var(--auf-tinte); }
.band-navy-tief p { color: var(--auf-tinte-leise); }

/* Franks Profil als Hintergrund des Bands (Leons Review 2026-07-16: Laufweg 01→04
   bleibt, "Schrift läuft über das Bild"). Muster wie .band-schein: absolutes Kind
   der Sektion unter der .bahn. Die Lesbarkeit sichert das ASSET, nicht das CSS —
   die Duotone ist auf max. #6055A8 gedeckelt (>= 4,5:1 unter #F7F5F1) und trägt
   ihren Fade in den Bandgrund eingebacken (tools/fotos.py). */
.ablauf-abschnitt {
  position: relative;
  overflow: hidden;
}
.ablauf-abschnitt .bahn {
  position: relative;
  z-index: 1;
}
.ablauf-bild {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(42vw, 620px);
  z-index: 0;
  pointer-events: none;
}
.ablauf-bild picture,
.ablauf-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.ablauf-bild img {
  object-fit: cover;
  object-position: 50% 18%;
}

.schritte {
  position: relative;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
/* Die durchgehende Goldlinie über den vier Schritten. Sie wächst beim Scrollen von
   01 nach 04 durch (css/reveal.css) — die Bewegung, die dem Ablauf vorher fehlte.
   Sie liegt auf der Liste, nicht auf den einzelnen Schritten, damit sie über die
   Lücken hinwegläuft und wirklich EINE Linie ist. */
.schritte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--akzent);
  transform-origin: left center;
}
.schritt { padding-top: 22px; }
/* 44 px Sonnengelb auf Indigo-tief: 10,2:1 (nachgerechnet). Trägt dort sogar Fließtext. */
.schritt-nr {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--akzent);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.schritt h3 { margin-bottom: 8px; }
/* Echter Fließtext, also 19px/1.65 wie überall — nicht kleiner. */
.schritt p { line-height: 1.65; }

/* ---------- 7 · Über mich (Höhepunkt 2) ---------- */

.ueber {
  padding-block: 104px;
  border-top: 1px solid var(--linie);
}
.ueber-bahn {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 72px;
  align-items: start;
}

/* Indigo-Rahmen seit Leons Review 2026-07-16: „kein Bild mit harten Kanten einfach
   auf dem Untergrund". Der Rahmen ist die Fassung des Fotos in Franks Farbe —
   der Hero bleibt bewusst randlos (er bricht die Viewport-Kante, das ist sein Bau). */
.ueber-bild {
  position: relative;
  overflow: hidden;
  background: var(--flaeche2);
  aspect-ratio: 4 / 5;
  border: 6px solid var(--tinte);
}
.ueber-bild picture,
.ueber-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Kein Porträt mehr, sondern der Ort — deshalb auch kein multiply-Freisteller-Trick
   (der gilt nur für das auf Weiß freigestellte Porträt, siehe .portraet in tokens.css).
   Ein echtes Foto braucht nur den Ausschnitt. */
.ueber-bild img {
  object-fit: cover;
  object-position: 50% 50%;
}

.ueber-text h2 { margin: 14px 0 26px; }
.ueber-text p { margin-bottom: 18px; max-width: 62ch; color: var(--sekundaer); }
.ueber-text p:first-of-type { color: var(--tinte); }

.fakten-zeile {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.fakt dt {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sekundaer);
  margin-bottom: 4px;
}
.fakt dd { margin: 0; font-weight: 600; font-size: var(--t-klein); }

/* ---------- 8 · FAQ ---------- */

.faq { margin-top: 40px; max-width: 780px; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  min-height: 44px;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus/Minus rein aus CSS — keine Icon-Bibliothek, kein Rost */
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--tinte), var(--tinte)) center / 16px 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) center / 2px 16px no-repeat;
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--tinte), var(--tinte)) center / 16px 2px no-repeat;
}
.faq-antwort { padding: 0 60px 26px 0; }
.faq-antwort p { color: var(--sekundaer); max-width: 62ch; }
.faq-antwort p + p { margin-top: 14px; }   /* p { margin: 0 } gilt global */

/* ---------- 9 · Kontakt ---------- */

.kontakt-abschnitt {
  padding-block: 104px;
  border-top: 1px solid var(--linie);
  background: var(--flaeche2);
}
.kontakt-bahn {
  display: grid;
  /* Drei Blöcke seit Leons Review 2026-07-16: Frank | Text | Formular.
     Der Freisteller steht im DOM zwischen Text und Formular (Mobil-Reihenfolge),
     die Spaltenzuweisung darunter stellt ihn auf dem Desktop nach links.
     Franks Maß gibt der TEXTBLOCK vor (Leon: Kopf schließt mit „Erzählen Sie" ab,
     Füße mit „67468 Frankeneck"): Zeile 1 ist so hoch wie der Text, das Formular
     spannt über beide Zeilen, und das Bild füllt Zeile 1 absolut — so folgt es der
     Texthöhe, ohne sie zu treiben. */
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 64px;
  align-items: start;
}
.kontakt-bild {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  position: relative;
}
.kontakt-bild img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: auto;
}
.kontakt-text { grid-column: 2; grid-row: 1; }
.kontakt-formular { grid-column: 3; grid-row: 1 / span 2; }
.kontakt-text h2 { max-width: 16ch; }
.kontakt-text .lead { margin-top: 18px; max-width: 40ch; }

.tel-gross {
  display: inline-block;
  margin-top: 32px;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--linie);
  min-height: 52px;
}
.tel-gross:hover { text-decoration-color: var(--tinte); }

.kontakt-daten { margin: 36px 0 0; }

/* Frank als Freisteller auf der Butterfläche — kein Kasten, keine Kante: Die Figur
   steht direkt auf dem Grund (Leons Review 2026-07-16: „nicht so plump").
   Maße kommen aus der Grid-Definition oben (absolute, Höhe = Textblock-Zeile). */
.kontakt-bild img { display: block; }
.kontakt-zeile {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--linie);
}
.kontakt-zeile dt {
  flex: 0 0 110px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sekundaer);
  padding-top: 3px;
}
.kontakt-zeile dd { margin: 0; font-size: var(--t-klein); line-height: 1.6; }
.kontakt-zeile a {
  color: var(--tinte);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Formular */
.feld { margin-bottom: 24px; }
.feld > label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.feld input[type="text"],
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--sekundaer);
  border-radius: var(--radius);
  padding: 13px 14px;
  min-height: 52px;
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.feld-hinweis { margin-top: 6px; }
.feld-fehler {
  margin-top: 8px;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--fehler);
}

.feld-einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 28px;
}
.feld-einwilligung input {
  width: 26px;
  height: 26px;
  margin: 2px 0 0;
  accent-color: var(--tinte);
  flex: 0 0 auto;
}
.feld-einwilligung label {
  font-size: var(--t-klein);
  line-height: 1.55;
  color: var(--sekundaer);
}
.feld-einwilligung label a { color: var(--tinte); }
.feld-einwilligung .feld-fehler { grid-column: 2; }

.formular-knopf { margin-top: 30px; width: 100%; min-height: 60px; }
.formular-fuss { margin-top: 14px; text-align: center; }
.formular-meldung {
  margin-top: 20px;
  font-weight: 600;
  line-height: 1.55;
}
.formular-meldung:empty { margin-top: 0; }
.formular-meldung.ist-erfolg {
  padding: 18px 20px;
  background: var(--papier);
  border-left: 3px solid var(--tinte);
}
.formular-meldung.ist-fehler {
  padding: 18px 20px;
  background: var(--papier);
  border-left: 3px solid var(--fehler);
  color: var(--tinte);
}
.formular-meldung a { color: var(--tinte); }

/* ---------- 10 · Fußzeile ---------- */

.fuss {
  padding-block: 64px 72px;
  border-top: 1px solid var(--linie);
  background: var(--papier);
}
.fuss-bahn {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 48px;
  align-items: start;
}
.fuss .signet { width: 48px; height: 48px; }
.fuss .wortmarke { font-size: 22px; }
.fuss-adresse {
  margin-top: 20px;
  font-style: normal;
  font-size: var(--t-klein);
  line-height: 1.7;
  color: var(--sekundaer);
}
/* Telefon und Mail sind Ziele zum Antippen, keine bloßen Textstellen:
   volle Klickfläche wie bei den Rechtslinks. */
.fuss-adresse a {
  color: var(--tinte);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.fuss-recht p + p { margin-top: 10px; }
.fuss-register { font-variant-numeric: tabular-nums; }
.fuss-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.fuss-links a {
  color: var(--tinte);
  font-size: var(--t-klein);
  font-weight: 600;
  text-underline-offset: 3px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ==================================================================
   Mobil / Tablet — unter 1080px
   ================================================================== */

@media (max-width: 1079px) {

  :root { --rand: var(--rand-mobil); --kopf-hoehe: 64px; }

  .abschnitt,
  .ueber,
  .kontakt-abschnitt { padding-block: 64px; }

  /* Kopfzeile: Lockup · Anrufen · Menü */
  .kopf-innen { gap: 10px; }
  .kopf .signet { width: 26px; height: 26px; }
  .kopf .wortmarke { font-size: 22px; }
  .kopf-rechts { display: none; }

  /* Reihenfolge im Quelltext: Lockup · Menüknopf · Navigation · Anrufen.
     Sichtbar bleibt es Lockup · Anrufen · Menü — dafür sorgt order. */
  .kopf-anrufen {
    display: inline-flex;
    margin-left: auto;
    order: 1;
    min-height: 52px;
    padding: 0 16px;
    font-size: 17px;
    border-width: 1px;
  }

  .menue-knopf {
    display: inline-flex;
    order: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
    min-height: 52px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--tinte);
  }
  .menue-balken {
    display: block;
    width: 22px;
    height: 12px;
    border-top: 2px solid var(--tinte);
    border-bottom: 2px solid var(--tinte);
  }
  .menue-wort {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--tinte);
  }
  .menue-knopf[aria-expanded="true"] { background: var(--flaeche2); }

  /* Klapp-Navigation */
  .hauptnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--rand-mobil) 16px;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
  }
  .hauptnav.ist-offen { display: flex; }
  .hauptnav a {
    font-size: 19px;
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--linie);
  }
  .hauptnav a:last-child { border-bottom: 0; }
  .hauptnav a:hover { border-bottom-color: var(--linie); }

  /* Sektionen einspaltig */
  /* Einspaltig: Kundensatz, darunter Franks Antwort. Der Goldbalken macht auch hier
     sichtbar, was Frage und was Antwort ist — die Größe darf gleich bleiben. */
  .satz { grid-template-columns: 1fr; gap: 14px; }
  .satz dt,
  .satz dd { font-size: 21px; }
  .zitat { margin-top: 48px; max-width: none; }

  .saeulen { grid-template-columns: 1fr; gap: 32px; }

  /* Einspaltig läuft die Goldlinie SENKRECHT an den Schritten entlang statt waagerecht
     über ihnen. Die Wachstumsrichtung dreht sich mit — siehe css/reveal.css. */
  .schritte { grid-template-columns: 1fr; gap: 28px; padding-left: 26px; }
  .schritte::before {
    inset: 0 auto 0 0;
    width: 2px;
    height: auto;
  }
  .schritt { padding-top: 0; }
  .schritt-nr { font-size: 34px; margin-bottom: 10px; }

  /* Vier Noten nebeneinander sind unter 1080 px nicht mehr lesbar — die Zahl schrumpft
     sonst unter die Beschriftung. Zwei Spalten, dann eine. Der senkrechte Trennstrich
     entfällt; hier trennt der Abstand. */
  .noten { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .note { padding-right: 0; }
  .note + .note { padding-left: 0; border-left: 0; padding-top: 0; border-top: 0; }

  /* Breite deckeln: einspaltig würde die Bildfläche sonst über die volle
     Inhaltsbreite laufen — bei 1024px ergäbe das ein übergroßes Gesicht. */
  .ueber-bahn { grid-template-columns: 1fr; gap: 36px; }
  .ueber-bild { max-width: 380px; }

  .faq-antwort { padding-right: 0; }
  .faq summary { font-size: 19px; }

  .kontakt-bahn { grid-template-columns: 1fr; gap: 48px; }
  /* Einspaltig zählt wieder die DOM-Reihenfolge Text → Frank → Formular; die
     Desktop-Spaltenzuweisungen müssen raus, sonst reißen sie implizite Spalten auf,
     und das Bild kehrt aus der Absolut-Kopplung an die Texthöhe in den Fluss zurück. */
  .kontakt-bild,
  .kontakt-text,
  .kontakt-formular { grid-column: auto; grid-row: auto; }
  .kontakt-bild { justify-self: start; position: static; align-self: auto; margin-top: 8px; }
  .kontakt-bild img {
    position: static;
    width: 100%;
    max-width: 240px;
    height: auto;
  }
  .kontakt-text h2 { max-width: none; }

  /* Schmal gibt es keinen Platz NEBEN dem Laufweg — das Duotone-Profil wird vom
     Hintergrund zum Block unter den Schritten, gedeckelt wie .ueber-bild.
     Es sitzt außerhalb der .bahn, der Seitenrand kommt deshalb hier selbst. */
  .ablauf-bild {
    position: static;
    width: calc(100% - 2 * var(--rand));
    max-width: 380px;
    margin: 48px auto 0;
    aspect-ratio: 4 / 5;
  }
  /* Das Gesicht sitzt RECHTS im Asset (Desktop-Hintergrund-Logik) — der schmale
     4:5-Block muss deshalb die rechte Kante zeigen, sonst schneidet er das Profil. */
  .ablauf-bild img { object-position: 100% 18%; }

  .fuss-bahn { grid-template-columns: 1fr; gap: 36px; }

  /* Am Telefon greift der Daumen: 52px für jedes Ziel, das man antippt. */
  .trust-zahl,
  .note-quelle a,
  .kontakt-zeile a,
  .fuss-adresse a,
  .fuss-links a { min-height: 52px; }

  /* Die mobile Ergebniszeile (#r-sticky) gehört css/rechner.css — hier bewusst nichts. */
}

/* ==================================================================
   Hero gestapelt — erst unter 900px. Darüber bleiben zwei Spalten:
   ein einspaltiger Hero mit Bildband würde auf Tablet-Breiten ein
   übergroßes Gesicht erzeugen (Bandhöhe folgt der Breite).
   ================================================================== */

@media (max-width: 899px) {

  /* Beleg-Band aus. Der Kopf ist hier nur 64 px hoch, darunter noch ein Band zu kleben
     wäre Diebstahl am Bildschirm — und die Beleg-Bank steht hier ohnehin im Textfluss,
     also scrollt sie ganz normal vorbei. --band-hoehe auf 0, sonst rechnet
     scroll-margin-top weiter mit 40 px, die es gar nicht gibt. */
  :root { --band-hoehe: 0px; }
  .beleg-band { display: none; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-left: 0;
  }

  /* KEIN Querband mehr. Das alte `height: clamp(210px, 54vw, 350px)` ergab bei 390 px
     Viewport eine Fläche von rund 1,9:1 — in die passt ein Kopf nicht hinein, egal wie
     man das Bild darin verschiebt. Deshalb liefert <picture> hier ein eigenes,
     hochformatiges Bild aus, und die Fläche ist 4:5.
     Die Deckelung mit svh (nicht vh) hält den Beleg-Balken über der Falz, ohne dass die
     ein- und ausfahrende iOS-Adressleiste die Höhe springen lässt. */
  /* 38svh, nicht 58svh. Bei 4:5 ist die Bildhöhe = 125 % der Fensterbreite (390 px → 487 px);
     die 58svh bremsten auf einem iPhone praktisch gar nicht. Ergebnis: Der Aufruf-Knopf begann
     erst bei y=861 — auf jedem gängigen Handy UNTER der Falz. Wer nicht scrollte, sah ein
     Gesicht und eine Überschrift, aber kein Angebot und keinen Knopf.

     Gemessen wird gegen den HARTEN Fall: iPhone mit eingeblendeten Safari-Leisten (390 × 745).
     Genau den beschreibt svh, und genau dort reichten auch 40svh noch nicht (Knopfunterkante
     747 bei 745 Falz). Bei 38svh steht der Knopf vollständig über der Falz (732), und die
     Telefonzeile darunter beginnt gerade noch im Bild.

     Folge für den Fototermin: Auf kleinen Geräten wird aus dem 4:5-Bild ein Band von rund
     1,4:1. Der Kopf muss im OBEREN Drittel sitzen (object-position: 50% 28%), sonst schneidet
     die Fläche ihn an. Das gehört ins Bild-Briefing. */
  .hero-bild {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 38svh;
  }
  .hero-bild img { object-position: 50% 28%; }

  .hero-text {
    order: 2;
    padding: 16px var(--rand-mobil) 0;
  }
  .hero h1 { font-size: clamp(34px, 9.8vw, 44px); margin-top: 4px; }
  .hero-lead { margin-top: 10px; font-size: 19px; }
  .hero-ctas { flex-direction: column; align-items: stretch; margin-top: 16px; gap: 8px; }
  .hero-ctas .btn { width: 100%; min-height: 56px; }

  /* Am Handy steht die Bank unter dem Hero-Text — dort gibt es nichts zu überlappen,
     also auch keinen Schatten und keine Parallaxe. Die Akzentkante bleibt.

     `relative`, NICHT `static`. Mit `static` findet .bank::before (position: absolute)
     keinen positionierten Vorfahren mehr, außer .hero — und legte sich als 3-px-Indigo-Balken
     quer über das Hero-FOTO, während an der Bank selbst gar keine Kante mehr war. Während der
     Einblendung wanderte der Balken sogar sichtbar, weil reveal.css der Bank kurzzeitig ein
     transform gibt (das erzeugt einen Enthaltungsblock, static hin oder her). */
  .bank {
    position: relative;
    order: 3;
    width: calc(100% - 2 * var(--rand-mobil));
    margin: 20px var(--rand-mobil) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0 0;
    box-shadow: none;
  }
  .trust { width: 100%; }
  .trust-item { flex: 1 1 0; padding-right: 18px; }
  .trust-item + .trust-item { padding-left: 18px; }
  .trust-zahl { font-size: 22px; }
  .rechtsnote { margin-left: 0; text-align: left; max-width: none; }
}

@media (max-width: 520px) {
  .trust { flex-direction: column; gap: 14px; }
  .trust-item + .trust-item { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--linie); }

  /* Zwei Noten nebeneinander werden auf dem Telefon zu schmal: „ImmobilienScout24"
     bricht dann mitten im Wort. Ab hier untereinander. */
  .noten { grid-template-columns: 1fr; gap: 28px; }
}