/* Seiten-Teile des Bereichs Privatkredit. Alle Farben und Schriften kommen aus
   css/tokens.css — hier stehen keine neuen. Was hier steht, ist Anordnung.

   DIE SEITE HAT GENAU EIN ZIEL: den Knopf zum Kreditvergleich. Alles darunter erklaert,
   warum man ihn drueckt, oder gibt den Ausweg (Anruf, Rueckweg zur Baufinanzierung).

   UMBAU 11.08.2026 — WARUM AUS EINER SPALTE EIN LAYOUT WURDE

   Die erste Fassung war eine einzige Spalte, die nach unten lief. Auf dem Handy sass das
   sauber. Auf dem Desktop nicht: .bahn ist auf 1180 px zentriert, aber jedes Kind darin
   war auf 62ch / 58ch / 640px begrenzt und linksbuendig — der gesamte Inhalt lief in einer
   Spalte von x=180 bis x=780, und rechts davon blieben bei 1440 px Fensterbreite
   660 px leer. Auf JEDEM Bildschirm, vom Einstieg bis zum Abschluss. Im Quelltext war das
   nicht zu sehen, im Screenshot sofort.

   Die Lesespalte bleibt trotzdem: 62ch ist die Grenze, ab der das Auge die naechste Zeile
   nicht mehr sicher findet. Breiter wird die ANORDNUNG, nicht die Zeile. Deshalb steht
   neben dem Text jetzt etwas — Bild, zweite Spalte, Beleg — statt Weissraum.

   Alle Umbrueche liegen bei 900 px. Darunter gilt weiter die einspaltige Fassung. */

/* ------------------------------------------------------------------ Kopfzeile

   Fester Streifen wie im Haus, nicht mehr schwebend: Der Bereich traegt jetzt dieselbe
   Navigation wie frank-schlieker.de, und ein Kopf, der die Seitenstruktur zeigt, darf
   nicht halbdurchsichtig ueber dem Inhalt liegen.

   Die frueher hier stehende Notiz „KEINE Navigation, die Seite hat genau zwei Ausgaenge"
   ist am 11.08.2026 aufgehoben worden. Sie war fuer sich richtig — eine Konversionsseite
   ohne Ausgaenge konvertiert besser. Sie kostete aber die Zugehoerigkeit: Neben der
   Hauptseite las sich der Bereich als fremde Landingpage. Ein Kunde, der von Franks
   Startseite kommt, muss dieselbe Firma sehen; das wiegt hier schwerer als ein
   moeglicher Absprung ueber das Menue. */

.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; }

.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); }
/* Der eigene Eintrag ist markiert — sonst ist der Bereich der einzige Ort der Website,
   an dem die Navigation nicht sagt, wo man ist. */
.hauptnav a[aria-current="page"] { 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;
}
.kopf-anrufen,
.menue-knopf { display: none; }

/* OHNE JAVASCRIPT GIBT ES DEN MENUEKNOPF NICHT.

   Er ist das einzige <button> der Seite und braucht js/seite.js, um irgendetwas zu tun.
   Ohne JS waere er ein Versprechen ohne Handlung — und die Navigation dahinter waere
   zugleich unerreichbar, weil .hauptnav unter 1080 px display:none traegt.
   tools/degradation.mjs faengt genau das ab ("keine toten Knoepfe"), und es hat beim
   Umbau am 11.08.2026 sofort angeschlagen.

   Der Rueckfall ist deshalb nicht „Knopf weg", sondern „Navigation offen": Der Kopf
   bricht auf zwei Zeilen um und zeigt alle Ziele. Das gilt auch, wenn der Wachhund in
   js/js-flag.js die Klasse .js nach 1,5 s zuruecknimmt, weil sich das Modul nicht
   gemeldet hat. */
html:not(.js) .menue-knopf { display: none !important; }

/* ------------------------------------------------------------------ Beleg-Band

   Haengt UNTER dem Kopf (position: absolute, top: 100%) und belegt deshalb keine
   Fluss-Hoehe: Ein Kopf, der beim Scrollen von 72 auf 112 px waechst, verschiebt den
   ganzen Inhalt darunter um 40 px — ein sichtbarer Ruck.
   Es faehrt ein, sobald die Beleg-Bank im Hero oben aus dem Bild laeuft (js/reveal.js).
   Ohne JavaScript bleibt es unsichtbar; die Belege stehen dann weiter im Hero, wo sie
   ohnehin hingehoeren. Das ist der eingebaute Rueckfall, kein Fehler. */

.beleg-band {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--band-hoehe);
  background: var(--tinte);
  color: var(--auf-tinte);
  overflow: hidden;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.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);
}
.beleg-band-innen > span + span { border-left: 2px solid var(--akzent); padding-left: 28px; }
.beleg-band-recht { margin-left: auto; }

/* ------------------------------------------------------------------ Hero

   Der frueher hier stehende .einstieg war eine Textspalte ohne alles. Jetzt: Text links,
   Portraet rechts, randbrechend — dieselbe Anordnung wie auf der Startseite. Das Bild ist
   der staerkste Hebel gegen den Eindruck „leer und generisch", und es ist bereits im Repo
   (assets/img/frank-hero-*), es wird nichts neu erzeugt.

   Die Hoehe waechst mit der Breite: Das Portraet wird ueber die Hoehe der Flaeche
   skaliert — bliebe die Hoehe fix, wuerde die Flaeche 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, 38%);
  /* 46vw, nicht die 56vw der Startseite: Bei 1440 x 757 ergaeben die 749 px Hero plus
     72 px Kopf 821 px — die Beleg-Bank saesse dann vollstaendig unter der Falz und der
     erste Bildschirm haette wieder keinen Beleg. Mit 46vw sind es 662 + 72 = 734 px,
     die Bank ragt ins erste Bild. Nachgemessen bei 1440 px. */
  min-height: clamp(520px, 46vw, 680px);
  padding-left: var(--gutter);   /* rechts bewusst 0: die Bildflaeche bricht die Kante */
  background: var(--papier);
}

.hero-bild {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--flaeche2);
}
.hero-bild picture,
.hero-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-bild img {
  object-fit: cover;
  object-position: 50% 22%;
}

.hero-text {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px 168px 0;   /* unten frei fuer die Beleg-Bank */
}
/* 20ch, nicht 15ch. Die Ueberschrift ist mit 58 Zeichen laenger als die der Startseite
   („Seit 1996. Und immer noch am Telefon.", 37) und lief bei 15ch auf VIER Zeilen mit
   Umbruechen mitten in der Aussage („Privatkredit —" / „vergleichen" / „Sie selbst,
   oder"). Der Text steht unter Franks Freigabe und darf sich nicht aendern — also muss
   ihn das Layout tragen. */
.hero h1 { margin-top: 20px; max-width: 20ch; }
.hero-lead { margin-top: 22px; max-width: 40ch; }

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  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;
}

/* Die Provisionszeile. Sie steht bewusst DIREKT unter dem Knopf und nicht im Fuss:
   § 5a UWG verlangt die wesentliche Information dort, wo die Entscheidung faellt.
   Nach dem Umbau steht der erste Vergleichs-Knopf im Hero — also steht sie auch dort.

   Breite: frueher 46ch bei 14px, das brach den Satz in drei Stummelzeilen. Jetzt laeuft
   sie ueber die Knopfreihe. */
.knopf-fussnote {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sekundaer);
  max-width: 62ch;
}

/* Beleg-Bank: Papierstreifen ueber die Naht, traegt echten Inhalt ueber die Kante. */
.bank {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 76%;
  min-height: 120px;
  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);
}
.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); }
.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;
}
.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: 30ch;
}

/* ------------------------------------------------------------------ Bahnen */

.bahn {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* NUR padding-block, NIE die Kurzschreibweise.
   Diese Seite traegt `bahn` und `abschnitt` am SELBEN Element (anders als der PV-Bereich,
   wo .bahn ein innerer Behaelter ist). Beide Selektoren haben dieselbe Spezifitaet — ein
   `padding: 68px 0` wuerde das Seitenpolster von .bahn kommentarlos auf 0 zuruecksetzen,
   weil es spaeter steht. Genau das ist am 11.08.2026 passiert: Der ganze Fliesstext klebte
   am linken Rand, waehrend die Karten daneben noch ihr Polster hatten. Im Screenshot
   sichtbar, im Quelltext nicht. */
.abschnitt {
  padding-block: 88px;
}

/* Die Lesespalte. Fliesstext laeuft nie ueber die ganze Bahn. */
.spalte-lesen { max-width: 62ch; }

/* Ueberschrift eines Abschnitts — bewusst schmal, damit sie bricht wie auf der
   Startseite und nicht als eine lange Zeile ueber 1180 px laeuft. */
.abschnitt > h2 { max-width: 20ch; }

/* ------------------------------------------------------------------ Die zwei Wege

   NICHT gleichgewichtig: Der Vergleich traegt den gefuellten Knopf, das Telefon steht
   mit Umriss daneben. Der Grund ist nicht Geschmack: Der Telefonweg traegt heute keine
   Provision — jeder Anruf ohne anschliessenden Link-Klick ist unbezahlt. Wenn sich das
   aendert, aendert sich diese Gewichtung.

   Nebeneinander statt untereinander (ab 900 px): Zwei Karten in einer 640-px-Spalte
   liessen zwei Drittel der Bahn leer, und der zweite Weg lag unter der Falz. */

.wege {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}
@media (min-width: 900px) {
  /* 1.15fr / 1fr, nicht 1/1: Die Hierarchie soll auch dann lesbar bleiben, wenn beide
     Karten nebeneinander stehen. Gleiche Breite hiesse gleiches Gewicht. */
  .wege { grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
}

.weg {
  background: var(--flaeche2);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.weg h2 { font-size: var(--t-h3); }
.weg p { margin-top: 10px; color: var(--sekundaer); }
/* Der Knopf sitzt unten, auch wenn die Texte verschieden lang sind — sonst stehen die
   beiden Aufrufe auf verschiedenen Hoehen und das Auge liest eine Rangfolge, die keine ist. */
.weg .btn { margin-top: auto; }
.weg p + .btn { margin-top: 20px; }
.weg .knopf-fussnote { margin-top: 10px; max-width: none; }

/* Auf dem Handy volle Breite — ein Knopf, den man mit dem Daumen sucht, ist ein
   verlorener Knopf. Ab 560 px darf er sich auf seine Textbreite zuruecksetzen. */
.weg .btn { width: 100%; }
@media (min-width: 560px) {
  .weg .btn { width: auto; align-self: flex-start; }
}

/* ------------------------------------------------------------------ Anlaesse

   Drei Spalten ab 900 px, nach dem .saeulen-Muster der Startseite: Akzentstrich oben,
   Ueberschrift, Text. Als Liste untereinander fuellten sie eine halbe Bahn und lasen
   sich wie Kleingedrucktes. */

.anlaesse {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
@media (min-width: 900px) {
  .anlaesse { grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 44px; }
}
.anlass { padding-top: 20px; border-top: 2px solid var(--akzent); }
.anlass h3 { margin-bottom: 8px; }
.anlass p { color: var(--sekundaer); }

/* ------------------------------------------------------------------ Rueckweg

   Wer eigentlich ein Haus finanzieren will, wird weitergeschickt statt festgehalten.
   Das schuetzt die Baufi-Positionierung — und haelt den Bereich im Linkgeflecht.

   Eigene Flaeche statt Trennlinie im Textfluss: Der Abschnitt sagt „Sie sind hier
   falsch". Das darf man sehen, bevor man es liest. */

.flaeche-butter { background: var(--flaeche2); }

.rueckweg-bahn { display: grid; gap: 20px; }
@media (min-width: 900px) {
  /* `auto` fuer die Knopfspalte, nicht 1fr: Mit 1fr bekam der Knopf eine halbe Bahn fuer
     sich und stand dann irgendwo in deren Mitte — 340 px vom Text entfernt und 60 px vor
     der rechten Kante. Er sah aus, als haette ihn jemand vergessen. Mit `auto` ist die
     Spalte so breit wie der Knopf, und der Abstand ist der Gap. */
  .rueckweg-bahn {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
  }
}
.rueckweg-text p { margin-top: 14px; color: var(--sekundaer); max-width: 52ch; }
.rueckweg .btn { margin-top: 24px; }
@media (min-width: 900px) {
  .rueckweg-tat .btn { margin-top: 0; white-space: nowrap; }
}

/* ------------------------------------------------------------------ Transparenz-Band

   Der einzige Abschnitt mit umgedrehter Farbe. Er traegt die Verguetung, die Befugnis und
   den Verweis auf die Erstinformation. Zweispaltig ab 900 px: Ueberschrift links,
   Pflichttext rechts — einspaltig standen rechts 660 px leer, ausgerechnet an der Stelle,
   die Vertrauen herstellen soll. */

.geld-bahn { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .geld-bahn { grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
}
.geld-kopf h2 { margin-top: 14px; max-width: 14ch; }
.geld-text { max-width: 62ch; }
.geld-text .lead { margin-bottom: 18px; }
/* Ersetzt drei style="margin-top:…" im HTML. Inline-Styles waren dort ohnehin ein
   CSP-Risiko (style-src 'self') und liessen lead und Fliesstext optisch zusammenkleben. */
.geld-text p + p { margin-top: 16px; }

/* ------------------------------------------------------------------ Fragen

   Zweispaltig wie die „Fuenf Saetze" der Startseite: Frage links, Antwort rechts mit
   Akzentstrich. Untereinander war es eine Liste in einer halben Bahn. */

.fragen { margin-top: 34px; display: grid; gap: 0; }
.frage {
  border-top: 1px solid var(--linie);
  padding: 24px 0;
  display: grid;
  gap: 8px;
}
.frage:first-child { border-top: 0; padding-top: 0; }
.frage:last-child { border-bottom: 1px solid var(--linie); }
.frage h3 { margin-bottom: 0; }
.frage p { color: var(--sekundaer); }

@media (min-width: 900px) {
  .frage {
    grid-template-columns: 1fr 1.2fr;
    gap: 24px 48px;
    align-items: baseline;
    padding: 28px 0;
  }
  .frage p {
    position: relative;
    padding-left: 20px;
    color: var(--tinte);
  }
  /* Der Strich sagt, was Antwort ist — dieselbe Rolle wie der Goldbalken auf der
     Startseite, dieselbe Farbe ueber --akzent. */
  .frage p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.15em;
    width: 3px;
    background: var(--akzent);
  }
}

/* ------------------------------------------------------------------ Abschluss */

.abschluss-bahn { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .abschluss-bahn {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 56px;
    align-items: center;
  }
}
.abschluss .btn { margin-top: 24px; }
.abschluss-person { margin-top: 26px; max-width: 58ch; }

/* Ein Gesicht an der Entscheidung, kein Schmuck.

   NICHT der Freisteller aus dem Kontaktbereich der Startseite — der ist 640 x 1606, also
   ein Ganzkoerperbild im Verhaeltnis 1:2,5. Selbst auf 200 px Breite gebracht waere er
   500 px hoch, waehrend der Abschlusstext daneben rund 330 px misst: Er ragte oben in den
   Fragen-Abschnitt und hinterliess unter dem Text eine leere Flaeche — genau der Eindruck,
   gegen den dieser Umbau angetreten ist. Beschneiden verbietet sich bei einem Freisteller,
   weil ohne Rahmen abgeschnittene Beine wie ein Ladefehler aussehen.

   Deshalb das rechteckige Ablauf-Bild (1200 x 1800) in einem 4:5-Rahmen. Ein
   beschnittenes Foto IN einer Flaeche liest sich als Bildausschnitt, nicht als Fehler —
   und es wiederholt nicht das Hero-Portraet. */
.abschluss-bild { justify-self: center; }
.abschluss-bild img {
  display: block;
  width: 100%;
  max-width: 320px;
  /* `height: auto` ist hier PFLICHT, nicht Gewohnheit. Das <img> traegt width="1200"
     height="1800" (richtig so — ohne die Attribute springt das Layout beim Laden). Diese
     Attribute wirken wie `height: 1800px`, und gegen eine gesetzte Hoehe verliert
     aspect-ratio: Es greift nur, wenn genau eine der beiden Achsen bestimmt ist.
     Ohne diese Zeile war das Bild 320 x 1800 px — ein 1800 px hoher Streifen Hemd, und
     der ganze Abschnitt wurde 1800 px hoch. Gemessen, nicht vermutet. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius);
  background: var(--flaeche2);
}

/* ------------------------------------------------------------------ Fuss */

.fuss { border-top: 1px solid var(--linie); margin-top: 0; }
.fuss-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 48px var(--rand) 34px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}
.fuss address { font-style: normal; margin-top: 16px; color: var(--sekundaer); font-size: var(--t-klein); }
.fuss-titel {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-klein);
  margin-bottom: 10px;
}
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Tap-Ziele im Fuss: Links liegen dort dicht beieinander und werden am haeufigsten
   danebengetippt. 8 px Abstand plus Polster halten die 44-px-Regel ein. */
.fuss-liste a { display: inline-block; padding: 4px 0; font-size: var(--t-klein); }

.fuss-schluss { border-top: 1px solid var(--linie); }
.fuss-schluss-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 18px var(--rand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

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

@media (max-width: 1079px) {

  .abschnitt { padding-block: 60px; }

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

  /* Reihenfolge im Quelltext: Lockup · Menueknopf · Navigation · Anrufen.
     Sichtbar bleibt es Lockup · Anrufen · Menue — dafuer sorgt order. Der Knopf steht
     im Quelltext VOR der Navigation, die er oeffnet: So ist der naechste Tab-Stopp nach
     dem Oeffnen der erste Menuepunkt. */
  .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); }
  /* Im aufgeklappten Menue traegt jeder Eintrag eine Trennlinie — der Unterstrich, der
     am Desktop die aktuelle Seite markiert, geht darin unter. Also hier ein Punkt davor,
     derselbe wie am Kicker. Ohne das ist die Bereichsseite der einzige Ort der Website,
     an dem das Menue nicht sagt, wo man steht. */
  .hauptnav a[aria-current="page"] { border-bottom-color: var(--linie); }
  .hauptnav a[aria-current="page"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--akzent);
    margin-right: 10px;
    flex: 0 0 auto;
  }

  /* Der Rueckfall ohne JS (siehe oben): Der Kopf bricht um, die Navigation steht offen
     in der zweiten Zeile. Keine Klappe, kein Knopf, nichts zu bedienen. */
  html:not(.js) .kopf-innen {
    height: auto;
    flex-wrap: wrap;
    padding-block: 10px;
    row-gap: 4px;
  }
  html:not(.js) .hauptnav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    order: 3;
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
    gap: 4px 20px;
    background: transparent;
    border-bottom: 0;
  }
  html:not(.js) .hauptnav a {
    font-size: 17px;
    min-height: 44px;
    border-bottom: 2px solid transparent;
  }
}

/* Der schmale Zwischenbereich 900–1079 px: Der Hero ist schon zweispaltig, der Kopf noch
   im Mobilzustand. Hier wird es fuer die Beleg-Bank eng — bei 1024 px liegen 76 % Breite
   bei 778 px, waehrend das Bild schon bei 632 px beginnt. Die Bank ragt dann 146 px ins
   Portraet, ihre Belege brechen mitten im Wort und die Aufsichtszeile laeuft dreizeilig
   ueber das Gesicht.
   Deshalb hier breiter und mit engerem Polster, statt die Zeile zu verstecken: Ein Beleg,
   der auf einer Bildschirmbreite verschwindet, ist auf allen anderen auch entbehrlich. */
@media (min-width: 900px) and (max-width: 1079px) {
  .bank {
    width: 88%;
    gap: 22px;
    padding: 18px 24px 18px var(--gutter);
  }
  .trust-item { padding-right: 22px; }
  .trust-item + .trust-item { padding-left: 22px; }
  .trust-zahl { font-size: 22px; }
  .trust-label { font-size: 15px; }
  .rechtsnote { font-size: 14px; max-width: 20ch; }
}

/* Unter 900 px: Hero einspaltig, Bild oben. Dieselbe Grenze wie beim <picture>-Wechsel
   im HTML — beides muss zusammenpassen, sonst laedt der Browser zwei Bilder. */
@media (max-width: 899px) {

  .beleg-band { display: none; }

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

  /* KEIN Querband. Eine Flaeche von rund 1,9:1 kann einen Kopf nicht aufnehmen, egal wie
     man das Bild darin verschiebt — deshalb liefert <picture> hier ein eigenes,
     hochformatiges Bild aus und die Flaeche ist 4:5.
     Die Deckelung mit svh (nicht vh) haelt den Aufruf ueber der Falz, ohne dass die ein-
     und ausfahrende iOS-Adressleiste die Hoehe springen laesst. */
  .hero-bild {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 46svh;
  }
  .hero-bild img { object-position: 50% 28%; }

  .hero-text {
    order: 2;
    padding: 18px var(--rand-mobil) 0;
  }
  .hero h1 { max-width: none; margin-top: 6px; }
  .hero-lead { margin-top: 12px; font-size: 19px; }
  .hero-ctas { flex-direction: column; align-items: stretch; margin-top: 18px; gap: 10px; }
  .hero-ctas .btn { width: 100%; min-height: 56px; }
  .hero-text .knopf-fussnote { margin-top: 12px; }

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

     `relative`, NICHT `static`. Mit `static` findet .bank::before (position: absolute)
     keinen positionierten Vorfahren mehr ausser .hero und legte sich als 3-px-Balken
     quer ueber das Hero-FOTO. */
  .bank {
    position: relative;
    order: 3;
    width: calc(100% - 2 * var(--rand-mobil));
    margin: 22px var(--rand-mobil) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px var(--rand-mobil);
    box-shadow: none;
    border: 1px solid var(--linie);
  }
  .trust { flex-direction: column; }
  .trust-item { padding-right: 0; }
  .trust-item + .trust-item {
    padding-left: 0;
    border-left: 0;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--linie);
  }
  .rechtsnote { margin-left: 0; text-align: left; max-width: none; }

  .weg { padding: 22px; }
  .abschluss-bild { display: none; }   /* am Handy zaehlt der Knopf, nicht das Bild */
}