/* ==========================================================================
   mbfinanz – Michael Becker Finanzierungen
   Statische Nachbildung von mbfinanz.de (Durchgang 1: originalgetreu)
   Aufbau: Schriften → Tokens → Grundlagen → Seitengerüst → Bausteine
           → Abstände (erzeugt) → Umbrüche → Bewegung
   Diese Datei wird von bau/build.py zusammengesetzt; Änderungen in
   bau/style.basis.css vornehmen.
   ========================================================================== */

/* Schriften – lokal ausgeliefert (Google Fonts, SIL Open Font License) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zeyada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zeyada-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zeyada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zeyada-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens – Werte aus den Messungen der Live-Seite (vorlage/messwerte)
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --farbe-gruen: #8ab664;          /* Akzent: Kopfleiste, Überschriften, Knöpfe */
  --farbe-gruen-hover: #72cc66;    /* Knopf beim Überfahren */
  --farbe-gruen-hell: #98c66d;     /* grüne Textkarten beim Überfahren */
  --farbe-gelbgruen: #b9cc66;      /* Symbole der Anschluss-Übersicht beim Überfahren */
  --farbe-gruen-20: #e8f0e0;       /* Brand Kit Grün 20 %: Menüflächen beim Überfahren, aktuelle Seite */
  --farbe-grau: #747783;           /* Menü, Fußleiste, Formular-Knopf */
  --farbe-text: #666666;           /* Fließtext */
  --farbe-dunkel: #221f1f;         /* Mobilmenü */
  --farbe-feld: #f4f4f4;           /* Formularfelder */
  --farbe-feldtext: #404042;       /* Text in Formularfeldern */
  --farbe-weiss: #ffffff;
  --farbe-hellgrau: #ededed;       /* Abschnitt „Jetzt den ersten Schritt …“ */
  --farbe-fastweiss: #fcfcfc;      /* Abschnitt „Ausbildung“ */
  --farbe-linie: #eeeeee;          /* Tabellenlinien */
  --farbe-karte: rgba(184, 204, 177, 0.08);
  --farbe-kopf-schatten: rgba(0, 0, 0, 0.1);
  --farbe-karte-schatten: rgba(0, 0, 0, 0.3);
  --farbe-textschatten: rgba(0, 0, 0, 0.4);
  --farbe-banner-stark: rgba(138, 182, 100, 0.92);
  --farbe-banner-schwach: rgba(138, 182, 100, 0.13);
  --farbe-menue-flaeche: rgba(0, 0, 0, 0.03);
  --farbe-nach-oben: rgba(0, 0, 0, 0.4);
  --farbe-label-flaeche: rgba(34, 31, 31, 0.78); /* Feldbeschriftungen auf dem Foto (Kontakt) */

  /* Schriften */
  --schrift-text: 'Lato', Helvetica, Arial, Lucida, sans-serif;
  --schrift-titel: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  --schrift-formular: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  --schrift-unterschrift: 'Zeyada', cursive;

  /* Maße */
  --zeile-breite: 80%;
  --zeile-max: 1080px;
  --kopfleiste-hoehe: 36px;
  --kopf-hoehe: 94px;
  --seiten-oben: 130px;            /* Kopfleiste + Kopf */
  --radius: 5px;
  --spalten: 4;                    /* Spaltenzahl einer Datentabelle; md.py setzt sie je Tabelle (style) */
  --uebergang: 300ms ease;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--seiten-oben); }

body {
  margin: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--farbe-gruen); text-decoration: none; }

p { margin: 0; padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }

strong, b { font-weight: 700; }

h1,
h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-2),
h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-3),
h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-4),
h5:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-5),
h6:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-6) {
  margin: 0;
  padding-bottom: 10px;
  color: var(--farbe-gruen);
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.2em;
}
h1 { font-size: 36px; }
h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-2) { font-size: 30px; }
h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 26px; }
h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-4) { font-size: 21px; }
h5:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-5) { font-size: 19px; }
h6:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
:is(h2,h3,h4,h5,h6):where(.ebene-6) { font-size: 16px; }

ul { margin: 0; }

.nur-vorleser {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Inhalt, den das Original auf Tablet/Handy durch eine Kurzfassung ersetzt */
.nur-klein { display: none; }

.sprungmarke {
  position: absolute; left: 8px; top: -60px; z-index: 100000;
  padding: 10px 16px;
  background: var(--farbe-weiss); color: var(--farbe-dunkel);
  font-weight: 700;
}
.sprungmarke:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--farbe-gruen); outline-offset: 2px; }

.symbol {
  display: inline-block;
  height: 1em;
  width: auto;
  fill: currentColor;
  vertical-align: middle;
  flex: none;
}

/* --------------------------------------------------------------------------
   Seitengerüst: Kopfleiste, Kopf, Menü
   -------------------------------------------------------------------------- */
.seitenrahmen { padding-top: var(--seiten-oben); }

.kopfleiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  height: var(--kopfleiste-hoehe);
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
}
.kopfleiste__innen {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  width: var(--zeile-breite);
  max-width: var(--zeile-max);
  height: 100%;
  margin-inline: auto;
}
.kopfleiste__info { display: flex; gap: 0 15px; flex-wrap: wrap; justify-content: center; }
.kopfleiste__info a, .kopfleiste__info span { color: var(--farbe-weiss); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kopfleiste__info .symbol { font-size: 14px; }
.kopfleiste__menue { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.kopfleiste__menue a { color: var(--farbe-weiss); transition: opacity var(--uebergang); }
.kopfleiste__menue a:hover { opacity: .7; }

.kopf {
  position: fixed; top: var(--kopfleiste-hoehe); left: 0; right: 0; z-index: 99989;
  height: var(--kopf-hoehe);
  background: var(--farbe-weiss);
  box-shadow: 0 1px 0 var(--farbe-kopf-schatten);
  transition: box-shadow var(--uebergang);
}
.kopf--gescrollt { box-shadow: 0 0 7px var(--farbe-kopf-schatten); }
.kopf__innen {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: var(--zeile-breite);
  max-width: var(--zeile-max);
  height: 100%;
  margin-inline: auto;
  position: relative;
}
.kopf__logo { display: inline-block; height: 100%; display: flex; align-items: center; }
.kopf__logo img { width: auto; height: 56.4px; max-height: 60%; margin-left: 3px; }

/* Hauptmenü (Paket 2): Baufinanzierung vorn und als Mega-Menü.
   Unterpunkte öffnen sich beim Überfahren mit der Maus oder über den Knopf neben dem
   Punkt (Disclosure-Muster, aria-expanded, main.js); ohne JavaScript auch per Tastaturfokus. */
.hauptmenue { justify-self: end; align-self: start; padding-top: 40px; }
.hauptmenue__liste { display: flex; align-items: baseline; margin: 0; padding: 0; list-style: none; }
.hauptmenue__punkt { position: relative; display: flex; align-items: flex-start; padding-right: 22px; }
.hauptmenue__punkt:last-child { padding-right: 0; }
.hauptmenue__link {
  display: block;
  padding-bottom: 40px;
  color: var(--farbe-grau);
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: opacity var(--uebergang), color var(--uebergang);
}
.hauptmenue__link:hover { opacity: .7; }
.hauptmenue__punkt--mega > .hauptmenue__link { font-size: 15px; }
.hauptmenue__link--aktiv, .hauptmenue__link[aria-current="page"] { color: var(--farbe-gruen); }

/* Knopf zum Aufklappen: der kleine Winkel neben dem Menüpunkt */
.hauptmenue__auf {
  position: relative;
  width: 18px; height: 14px;
  margin: 0 0 0 2px; padding: 0;
  border: 0; background: none;
  color: var(--farbe-grau);
  cursor: pointer;
}
.hauptmenue__auf::before {
  content: "";
  position: absolute; left: 6px; top: 1px;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--uebergang);
}
.hauptmenue__punkt--mega > .hauptmenue__auf { color: var(--farbe-gruen); }
.hauptmenue__auf[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }

/* Einfache Unterliste (Kredit, Wissen & Tools) */
.hauptmenue__unter {
  position: absolute; top: 100%; left: 0; z-index: 9999;
  min-width: 229px;
  width: max-content;
  margin: 0; padding: 20px 0;
  list-style: none;
  background: var(--farbe-weiss);
  border-top: 3px solid var(--farbe-gruen);
  box-shadow: 0 2px 5px var(--farbe-kopf-schatten);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.hauptmenue__unter li { padding: 0 20px; }
.hauptmenue__unter a {
  display: block;
  padding: 6px 20px;
  color: var(--farbe-grau);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: .5px;
  transition: opacity var(--uebergang), background-color var(--uebergang);
}
.hauptmenue__unter a:hover { background: var(--farbe-gruen-20); }
.hauptmenue__unter a[aria-current="page"] { color: var(--farbe-dunkel); background: var(--farbe-gruen-20); }

/* Mega-Menü Baufinanzierung: volle Kopfbreite, 3 × 2 Felder mit Beschreibungszeile */
.hauptmenue__punkt--mega { position: static; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--farbe-weiss);
  border-top: 3px solid var(--farbe-gruen);
  box-shadow: 0 12px 24px -12px var(--farbe-karte-schatten);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mega__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: 28px;
  padding: 28px 28px 24px 18px;
}
/* Handlungsaufforderung rechts im Mega-Menü: grüne 20-%-Fläche, Knopf in Markengrün */
.mega__aktion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px 22px 24px;
  background: var(--farbe-gruen-20);
}
.mega__aktion-titel { padding: 0; color: var(--farbe-dunkel); font-family: var(--schrift-titel); font-size: 18px; font-weight: 700; line-height: 1.3; }
.mega__aktion-text { padding: 0; color: var(--farbe-text); font-size: 14px; line-height: 1.5; }
.mega__aktion { align-self: start; }
.mega__knopf { display: block; width: 100%; margin-top: 10px; padding-inline: .5em; font-size: 18px; text-align: center; white-space: nowrap; }
.mega__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0; padding: 0;
  list-style: none;
}
.mega__link {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius);
  transition: background-color var(--uebergang);
}
.mega__link:hover, .mega__link[aria-current="page"] { background: var(--farbe-gruen-20); }
.mega__titel {
  color: var(--farbe-grau);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .3px;
}
.mega__link[aria-current="page"] .mega__titel { color: var(--farbe-dunkel); }
.mega__text { color: var(--farbe-text); font-size: 14px; font-weight: 400; line-height: 1.45; }
.mega__unter {
  display: flex; flex-wrap: wrap; gap: 2px 4px;
  margin: 0; padding: 0 0 0 8px;
  list-style: none;
}
.mega__unter a {
  display: inline-block;
  padding: 3px 6px;
  border-radius: var(--radius);
  color: var(--farbe-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: var(--farbe-gruen);
  text-underline-offset: 3px;
  transition: background-color var(--uebergang);
}
.mega__unter a:hover, .mega__unter a[aria-current="page"] { background: var(--farbe-gruen-20); color: var(--farbe-dunkel); }
.mega__fuss {
  margin-top: 16px; padding: 14px 14px 0;
  border-top: 1px solid var(--farbe-hellgrau);
}
.mega__fuss a {
  color: var(--farbe-grau);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--farbe-gruen);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.mega__fuss a:hover { color: var(--farbe-dunkel); }

/* Öffnen: Maus, Knopf (Klasse aus main.js) und ohne JavaScript der Tastaturfokus */
.hauptmenue__punkt:hover > .hauptmenue__unter,
.hauptmenue__punkt:hover > .mega,
.hauptmenue__punkt--offen > .hauptmenue__unter,
.hauptmenue__punkt--offen > .mega,
html:not(.js) .hauptmenue__punkt:focus-within > .hauptmenue__unter,
html:not(.js) .hauptmenue__punkt:focus-within > .mega {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.menueknopf {
  display: none;
  justify-self: end;
  width: 32px; height: 32px;
  padding: 0; border: 0; background: none;
  color: var(--farbe-gruen);
  cursor: pointer;
}
.menueknopf .symbol { font-size: 32px; }

.mobilmenue {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  margin: 0; padding: 5%;
  list-style: none;
  background: var(--farbe-weiss);
  border-top: 3px solid var(--farbe-gruen);
  box-shadow: 0 2px 5px var(--farbe-kopf-schatten);
  text-align: left;
  font-size: 14px;
  line-height: 23px;
}
.mobilmenue--offen { display: block; }
.mobilmenue li { border-bottom: 1px solid var(--farbe-menue-flaeche); }
.mobilmenue ul { margin: 0; padding: 0; list-style: none; }
.mobilmenue ul li { padding-left: 13px; }
.mobilmenue a {
  display: block;
  padding: 10px 5%;
  color: var(--farbe-dunkel);
  font-weight: 600;
}
.mobilmenue__zeile { display: flex; align-items: stretch; background: var(--farbe-menue-flaeche); }
.mobilmenue__zeile > a { flex: 1; font-weight: 700; }
.mobilmenue a[aria-current="page"] { color: var(--farbe-dunkel); background: var(--farbe-gruen-20); }
/* Aufklapp-Knopf: große Trefferfläche, Winkel aus Linien */
.mobilmenue__auf {
  position: relative;
  flex: none;
  width: 48px; min-height: 44px;
  margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--farbe-weiss);
  background: none;
  color: var(--farbe-gruen);
  cursor: pointer;
}
.mobilmenue__auf::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--uebergang);
}
.mobilmenue__auf[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); }
.js .mobilmenue__eltern:not(.mobilmenue__eltern--offen) > .mobilmenue__unter { display: none; }
.mobilmenue__eltern + .mobilmenue__eltern { margin-top: 2px; }

/* --------------------------------------------------------------------------
   Bausteine: Abschnitt, Zeile, Spalte
   -------------------------------------------------------------------------- */
.abschnitt {
  position: relative;
  padding: 4% 0;
  background-color: var(--farbe-weiss);
}
.abschnitt--gruen { background-color: var(--farbe-gruen); }
.abschnitt--hellgrau { background-color: var(--farbe-hellgrau); }
.abschnitt--fastweiss { background-color: var(--farbe-fastweiss); }

.zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 5.5%;
  width: var(--zeile-breite);
  max-width: var(--zeile-max);
  margin-inline: auto;
  padding: 2% 0;
}
.zeile--halb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zeile--drittel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zeile--viertel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zeile--viertel.zeile--eng { column-gap: 3%; }
.zeile--dreiviertel-viertel { grid-template-columns: 73.625fr 20.875fr; }
.zeile--dreifuenftel-zweifuenftel { grid-template-columns: 57.8fr 36.7fr; }
.zeile--breit { width: 85%; max-width: 2560px; }

.spalte { position: relative; min-width: 0; }
/* Schmale Spalten: h4 18 px wie im Original */
.zeile--drittel h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.zeile--drittel :is(h2,h3,h4,h5,h6):where(.ebene-4),
.zeile--viertel h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.zeile--viertel :is(h2,h3,h4,h5,h6):where(.ebene-4),
.zeile--dreiviertel-viertel > .spalte:last-child h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.zeile--dreiviertel-viertel > .spalte:last-child :is(h2,h3,h4,h5,h6):where(.ebene-4),
.zeile--dreifuenftel-zweifuenftel > .spalte:last-child h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.zeile--dreifuenftel-zweifuenftel > .spalte:last-child :is(h2,h3,h4,h5,h6):where(.ebene-4) { font-size: 18px; }
/* Abstand zwischen Bausteinen einer Spalte: 2,75 % der Zeilenbreite wie im Original */
.zeile--voll > .spalte > :not(:last-child) { margin-bottom: 2.75%; }
.zeile--halb > .spalte > :not(:last-child) { margin-bottom: 5.82%; }
.zeile--drittel > .spalte > :not(:last-child) { margin-bottom: 9.27%; }
.zeile--viertel > .spalte > :not(:last-child) { margin-bottom: 13.174%; }
.zeile--dreiviertel-viertel > .spalte:first-child > :not(:last-child) { margin-bottom: 3.735%; }
.zeile--dreiviertel-viertel > .spalte:last-child > :not(:last-child) { margin-bottom: 13.174%; }
.zeile--dreifuenftel-zweifuenftel > .spalte:first-child > :not(:last-child) { margin-bottom: 4.758%; }
.zeile--dreifuenftel-zweifuenftel > .spalte:last-child > :not(:last-child) { margin-bottom: 7.493%; }

/* --------------------------------------------------------------------------
   Baustein: Text
   -------------------------------------------------------------------------- */
.text { font-size: 18px; line-height: 1.8em; overflow-wrap: break-word; }
.text a { color: var(--farbe-gruen); }
.text h1 { line-height: 1.8em; }
.text h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text h1.ebene-2 { font-size: 1.8vw; line-height: 2.5em; }
.text h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-3),
.text h1.ebene-3 { font-size: 20px; line-height: 1.8em; }
.text h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-4),
.text h1.ebene-4 { font-size: 21px; line-height: 1.2em; }
.text h5:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-5),
.text h1.ebene-5 { font-size: 19px; line-height: 1.2em; }
.text ul { padding: 0 0 1em 1em; list-style: disc; line-height: 26px; }
.text ul > li { line-height: 2em; }
.text__leer { display: block; height: 10px; }
.text .text-gross, .info .text-gross { font-size: large; }
.text--mitte { text-align: center; }
.text--hell,
.text--hell h1,
.text--hell h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--hell :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--hell h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--hell :is(h2,h3,h4,h5,h6):where(.ebene-3),
.text--hell h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--hell :is(h2,h3,h4,h5,h6):where(.ebene-4) { color: var(--farbe-weiss); }

/* Weiße Karte mit 50 px Innenabstand (Startseite „In 4 Schritten …“) */
.text--weisskarte { background: var(--farbe-weiss); padding: 50px; }
.text--weisskarte h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--weisskarte :is(h2,h3,h4,h5,h6):where(.ebene-4),
.text--weisskarte h1.ebene-4 { font-size: 1.3vw; }

/* Grüne Karte unter einem Bild (Baufinanzierung: Neubau, Kauf Bestand) */
.text--gruenkarte {
  background: var(--farbe-gruen);
  padding: 30px;
  color: var(--farbe-weiss);
  transition: background-color var(--uebergang);
}
.text--gruenkarte:hover { background: var(--farbe-gruen-hell); }
.text--gruenkarte h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--gruenkarte :is(h2,h3,h4,h5,h6):where(.ebene-3),
.text--gruenkarte h1.ebene-3 { color: var(--farbe-weiss); }

/* Abschnittsüberschriften der Startseite (2vw) */
.text--titel-2vw h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 2vw; text-align: center; }
.text--titel-2vw-links h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw-links :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 2vw; }
.text--titel-hell h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-hell :is(h2,h3,h4,h5,h6):where(.ebene-3) { color: var(--farbe-weiss); }

/* Neubau / Kauf Bestand: zentrierte Einleitung, 26 px */
.text--einleitung-26 { font-size: 26px; color: var(--farbe-gruen); }
.text--einleitung-26 h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--einleitung-26 :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--einleitung-26 h1.ebene-2 { line-height: 1.5em; }
.text--schrift-20 { font-size: 20px; }

/* Datenschutz: h2 22 px */
.text--rechtstext h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--rechtstext :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--rechtstext h1.ebene-2 { font-size: 22px; line-height: 1.4em; }

/* Unterschrift (Startseite, „Über mich“) */
.unterschrift { font-family: var(--schrift-unterschrift); font-weight: 400; font-size: xx-large; }

/* Tabelle „Erfahrung & Tätigkeit“ */
.tabelle {
  width: 100%;
  margin: 0 0 15px;
  border: 1px solid var(--farbe-linie);
  border-collapse: collapse;
  text-align: left;
}
.tabelle td { padding: 6px 24px; border: 1px solid var(--farbe-linie); vertical-align: middle; }
.tabelle td:first-child { width: 10%; }
.tabelle td:last-child { width: 50%; }

/* --------------------------------------------------------------------------
   Baustein: Bild
   -------------------------------------------------------------------------- */
.bild { margin: 0; line-height: 0; }
.bild img { width: 100%; }
.bild--linie img { border-bottom: 4px solid var(--farbe-grau); }
.bild--rund img { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   Baustein: Info (Symbol oder Bild + Titel + Text; im Original „Blurb“)
   -------------------------------------------------------------------------- */
.info { position: relative; overflow-wrap: break-word; }
.info__titel { font-size: 21px; line-height: 1.2em; }
.info__titel a { color: inherit; }
.info__text { font-size: 16px; line-height: 1.7em; }
.info__symbol { color: var(--farbe-gruen); line-height: 0; }
.info__symbol a { color: inherit; display: inline-block; }

/* Symbol oben */
.info--oben .info__inhalt { max-width: 550px; margin-inline: auto; }
.info--oben .info__symbol { display: block; margin-bottom: 30px; text-align: center; font-size: 96px; }
.info--oben .info__bild { margin-bottom: 30px; line-height: 0; }
.info--oben .info__bild img { width: 100%; }

/* Symbol links */
.info--links .info__inhalt { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 15px; align-items: start; }
.info--links .info__symbol { font-size: 32px; width: 32px; }

/* Farbvarianten */
.info--hell .info__titel, .info--hell .info__text { color: var(--farbe-weiss); }
.info--symbol-hell .info__symbol { color: var(--farbe-weiss); }
.info--titel-mitte .info__titel { text-align: center; }
.info--text-mitte .info__text { text-align: center; }
.info--titel-18 .info__titel { font-size: 18px; line-height: 1.8em; }
.info--titel-hoch .info__titel { line-height: 1.8em; }
.info--titel-abstand .info__titel { padding-top: 3px; }

/* Ganze Fläche klickbar (Startseite, vier Leistungen) */
.info--klickbar .info__titel a::after { content: ""; position: absolute; inset: 0; }

/* Karte (Startseite „Wer finanzieren möchte …“) */
.info--karte {
  min-height: 308px;
  padding: 25px;
  background: var(--farbe-karte);
  box-shadow: 0 12px 18px -15px var(--farbe-karte-schatten);
}
/* Auf Wunsch des Kunden abweichend vom Original: alle vier Karten gleich hoch.
   Die Spalten lösen sich ins Raster der Zeile auf (2 × 2, spaltenweise gefüllt);
   der Reihenabstand ersetzt den Außenabstand a-au-40 (dort mit !important). */
@media (min-width: 981px) {
  .zeile--halb:has(> .spalte > .info--karte) {
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    row-gap: 40px;
  }
  .zeile--halb:has(> .spalte > .info--karte) > .spalte { display: contents; }
  .zeile--halb > .spalte > .info--karte { margin-bottom: 0 !important; }
}

/* Übersicht mit Vergrößerung beim Überfahren (Anschlussfinanzierung) */
.info--wachsen { transition: transform var(--uebergang); }
.info--wachsen:hover { transform: scale(1.03); }
.info--wachsen .info__symbol { transition: color var(--uebergang); }
.info--wachsen:hover .info__symbol { color: var(--farbe-gelbgruen); }

/* Bildkarte (Fördermittel, Kredit) */
.info--bildkarte { border-radius: var(--radius); overflow: hidden; transition: transform var(--uebergang); }
.info--bildkarte:hover { transform: scale(1.02); }
.info--bildkarte-gross { transform: scale(1.02); }

/* --------------------------------------------------------------------------
   Baustein: Knopf
   -------------------------------------------------------------------------- */
.knopf {
  position: relative;
  display: inline-block;
  padding: .3em 1em;
  border: 2px solid var(--farbe-gruen);
  border-radius: 0;
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7em;
  transition: all .2s;
  cursor: pointer;
}
.knopf:hover { background: var(--farbe-gruen-hover); border-color: var(--farbe-gruen-hover); }
.knopf__symbol { position: absolute; left: .7em; top: 50%; transform: translateY(-50%); line-height: 0; }
.knopf__symbol .symbol { font-size: 20px; }
.knopf--symbol-links { padding: .3em .7em .3em 2em; }
.knopf--pfeil { padding: .3em 2em .3em .7em; border-radius: var(--radius); }
.knopf--pfeil::after {
  content: "";
  position: absolute; right: .9em; top: 50%;
  width: .42em; height: .42em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.knopf--breit { display: block; width: 100%; text-align: center; }
.knopfreihe--mitte { text-align: center; }

/* Einzelnes Symbol (Startseite, Headset) */
.symbolbaustein { text-align: center; color: var(--farbe-gruen); font-size: 96px; line-height: 0; }

/* --------------------------------------------------------------------------
   Startseite: Bühne mit Porträt
   -------------------------------------------------------------------------- */
.buehne {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--seiten-oben));
  padding: 0;
  background-color: var(--farbe-weiss);
  background-image: url('../img/hero-michael-becker.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--farbe-weiss);
}
.buehne__innen {
  width: var(--zeile-breite);
  margin-inline: auto;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-shadow: 0 .1em .1em var(--farbe-textschatten);
}
.buehne__logo { width: 446px; max-width: 100%; }
.buehne__titel {
  padding: 0;
  color: var(--farbe-weiss);
  font-size: 5vw;
  line-height: 1.2em;
  text-shadow: 0 .1em .1em var(--farbe-textschatten);
}
.buehne__unterzeile { display: block; max-width: 600px; font-size: 1.8vw; line-height: 1.2em; }
.buehne__knopf { margin-top: 40px; text-shadow: none; }
.buehne__runter {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 0 20px;
  text-align: center;
  line-height: 0;
}
.buehne__runter a { display: inline-block; color: var(--farbe-weiss); }
.buehne__runter .symbol { font-size: 50px; }

/* --------------------------------------------------------------------------
   Seitenbanner (Unterseiten: Foto mit grünem Verlauf, 250 px)
   -------------------------------------------------------------------------- */
.seitenbanner {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: var(--farbe-gruen);
}
.seitenbanner__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.seitenbanner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--farbe-banner-stark) 35%, var(--farbe-banner-schwach) 74% 100%);
}

/* --------------------------------------------------------------------------
   Brotkrumen (Paket 2): schmale Leiste oben im Inhalt, alle Unterseiten
   Links in Textgrau mit grüner Unterstreichung (Grün allein wäre als kleine
   Schrift auf Weiß zu kontrastarm), Trenner als gezeichneter Winkel.
   -------------------------------------------------------------------------- */
.brotkrumen { background: var(--farbe-weiss); border-bottom: 1px solid var(--farbe-hellgrau); }
.brotkrumen__liste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  width: var(--zeile-breite); max-width: var(--zeile-max);
  margin: 0 auto; padding: 11px 0;
  list-style: none;
  color: var(--farbe-text);
  font-size: 14px;
  line-height: 1.5;
}
.brotkrumen__liste li { display: inline-flex; align-items: center; }
.brotkrumen__liste li + li::before {
  content: "";
  width: 5px; height: 5px;
  margin: 0 12px 0 9px;
  border-top: 1.5px solid var(--farbe-gruen);
  border-right: 1.5px solid var(--farbe-gruen);
  transform: rotate(45deg);
}
.brotkrumen a {
  color: var(--farbe-text);
  text-decoration: underline;
  text-decoration-color: var(--farbe-gruen);
  text-underline-offset: 3px;
  transition: color var(--uebergang);
}
.brotkrumen a:hover { color: var(--farbe-dunkel); text-decoration-thickness: 2px; }
.brotkrumen [aria-current="page"] { font-weight: 700; }

/* --------------------------------------------------------------------------
   Kontakt: Abschnitt mit Hintergrundfoto, Formular
   -------------------------------------------------------------------------- */
.abschnitt--kontaktfoto {
  padding: 68px 0 0;
  background-image: url('../img/kontakt-hintergrund.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.abschnitt--ohne-polster { padding: 0; }

.formular { max-width: 750px; margin-top: 2px; }
.formular__felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.formular__feld { display: grid; gap: 4px; min-width: 0; }
.formular__feld--breit { grid-column: 1 / -1; }
.formular__label {
  font-family: var(--schrift-formular);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--farbe-feldtext);
}
/* Auf dem unruhigen Foto reicht ein Textschatten nicht: dunkle Hinterlegung je Beschriftung */
.formular--auf-foto .formular__label {
  justify-self: start;
  padding: 1px 8px;
  color: var(--farbe-weiss);
  background: var(--farbe-label-flaeche);
}
.formular__pflicht { color: inherit; }
.formular__eingabe {
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--farbe-feld);
  color: var(--farbe-feldtext);
  font-family: var(--schrift-formular);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
.formular__eingabe::placeholder { color: var(--farbe-feldtext); opacity: 1; }
.formular__eingabe:focus { outline: 2px solid var(--farbe-gruen); outline-offset: 0; }
.formular__auswahl {
  height: 49px;
  padding: 12px 40px 12px 16px;
  background-image: linear-gradient(45deg, transparent 50%, var(--farbe-feldtext) 50%), linear-gradient(135deg, var(--farbe-feldtext) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.formular__nachricht { height: 150px; resize: vertical; }
/* Seit 21.10.2026 (Abnahme A1/C8): kein Datenschutz-Häkchen mehr, sondern ein Hinweis über dem
   Absende-Knopf; dazu die Erklärung „* Pflichtfeld“ über den Feldern. */
.formular__pflicht-erklaerung { margin: 0; padding: 0; font-family: var(--schrift-formular); font-size: 14px; line-height: 1.4; color: var(--farbe-feldtext); }
.formular__datenschutz { margin: 18px 0 0; padding: 0; font-family: var(--schrift-formular); font-size: 15px; line-height: 1.6; color: var(--farbe-feldtext); }
.formular__datenschutz a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Auf dem Foto (Kontakt): dunkle Hinterlegung wie bei den Feldbeschriftungen */
.formular--auf-foto .formular__pflicht-erklaerung, .formular--auf-foto .formular__datenschutz { justify-self: start; width: fit-content; padding: 2px 8px; color: var(--farbe-weiss); background: var(--farbe-label-flaeche); }
.formular--auf-foto .formular__datenschutz { margin-left: auto; }
/* Terminanfrage (Beratung & Termine): Karte auf grauem Grund, Auswahl als große Optionsflächen,
   Hilfetexte; Felder je nach Anliegen blendet main.js über das hidden-Attribut ein und aus. */
.formular--karte .formular__felder { align-items: start; }
.formular--karte { max-width: 820px; margin-inline: auto; padding: 36px 40px 32px; background: var(--farbe-weiss); box-shadow: 0 12px 24px -16px var(--farbe-karte-schatten); }
.formular__titel { padding-bottom: 20px; font-size: 24px; }
.formular__wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.formular__wahl > legend { padding: 0; margin-bottom: 4px; }
.formular__optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.formular__optionen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formular__option {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--farbe-feld);
  border-radius: var(--radius);
  background: var(--farbe-feld);
  color: var(--farbe-feldtext);
  font-family: var(--schrift-formular);
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}
.formular__option:hover { border-color: var(--farbe-gruen); }
.formular__option:has(:checked) { border-color: var(--farbe-gruen); background: var(--farbe-gruen-20); color: var(--farbe-dunkel); }
.formular__radio {
  flex: none;
  width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--farbe-grau);
  border-radius: 50%;
  background: var(--farbe-weiss);
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center;
  cursor: pointer;
}
.formular__radio:checked { border-color: var(--farbe-gruen); }
.formular__radio:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-gruen); }
.formular__radio:focus-visible { outline: 2px solid var(--farbe-gruen); outline-offset: 2px; }
.formular__hilfe { padding: 0; color: var(--farbe-text); font-family: var(--schrift-formular); font-size: 14px; line-height: 1.45; }
.formular__wahl .formular__hilfe { margin: 2px 0 0; }
.formular__zweier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-items: start; }
.formular__zweier .formular__eingabe { height: 49px; padding-block: 12px; }
.formular__zweier input[type="date"] { min-width: 0; }
.formular__gruppen-titel { font-weight: 400; }
.js .formular__gruppen-titel { display: none; }
.formular [hidden] { display: none !important; }
.formular__wenn-telefon-pflicht { display: none; }
.formular--telefon-pflicht .formular__wenn-telefon-pflicht { display: inline; }
@media (max-width: 767px) {
  .formular--karte { padding: 24px 18px; }
  .formular__optionen, .formular__optionen--drei, .formular__zweier { grid-template-columns: minmax(0, 1fr); }
  .formular--karte .formular__felder { grid-template-columns: minmax(0, 1fr); }
}

/* Beratung & Termine (Freigabe E1, 15.10.2026): Formular zuerst, Erklärungen in der Seitenspalte;
   mobil folgt die Seitenspalte unter dem Formular. */
.abschnitt.termin { padding-top: 28px; }
.termin__zeile { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
.termin__titelzeile { padding-bottom: 0 !important; }
.termin__titelzeile h1 { padding-bottom: 4px; }
.termin__zeile { padding-top: 0 !important; }
.termin__kopf p { padding-bottom: 0; }
.termin__kopf { margin-bottom: 20px !important; }
.formular--termin { max-width: none; margin: 0; }
.termin__seite > * + * { margin-top: 18px; }
.termin__seite .text ul { padding-bottom: 0; font-size: 16px; }
.termin__portrait { max-width: 240px; }
@media (max-width: 980px) {
  .abschnitt.termin { padding-top: 20px; }
  .termin__seite { margin-top: 30px; }
}

/* Kontakt: Kontaktdaten über dem schlanken Formular (rechte Hälfte des Fotos) */
.kontaktkarte { margin-bottom: 16px; padding: 18px 22px; background: var(--farbe-weiss); box-shadow: 0 12px 24px -16px var(--farbe-karte-schatten); }
.kontaktkarte__titel { padding-bottom: 12px; font-size: 21px; }
.kontaktkarte__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--farbe-text); }
.kontaktkarte__liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.kontaktkarte__liste .symbol { color: var(--farbe-gruen); font-size: 17px; }
.kontaktkarte__art { display: inline-block; min-width: 4.6em; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--farbe-grau); }
.kontaktkarte__liste a, .kontaktkarte__hinweis a { color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-underline-offset: 3px; overflow-wrap: anywhere; }
.kontaktkarte__hinweis { margin-top: 10px; padding: 10px 0 0; border-top: 1px solid var(--farbe-hellgrau); color: var(--farbe-text); font-size: 15px; }

.formular__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__unten { display: flex; justify-content: flex-end; margin-top: 16px; }
.formular__senden {
  padding: 6px 20px;
  border: 2px solid var(--farbe-grau);
  border-radius: var(--radius);
  background: var(--farbe-grau);
  color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 34px;
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}
.formular__senden:hover { background: var(--farbe-gruen-hover); border-color: var(--farbe-grau); }
.formular__senden[disabled] { opacity: .6; cursor: progress; }
.formular__meldung { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); font-family: var(--schrift-formular); font-size: 16px; line-height: 1.5; }
.formular__meldung:empty { display: none; }
.formular__meldung--ok { background: var(--farbe-weiss); color: var(--farbe-dunkel); border-left: 4px solid var(--farbe-gruen); }
.formular__meldung--fehler { background: var(--farbe-weiss); color: var(--farbe-dunkel); border-left: 4px solid var(--farbe-dunkel); }

/* --------------------------------------------------------------------------
   Fußbereich
   -------------------------------------------------------------------------- */
.fuss { border-top: 5px solid var(--farbe-gruen); background: var(--farbe-weiss); padding: 20px 0; }
.fuss .zeile { padding: 56px 0; }
.fuss__logo { margin-top: -10px; padding-top: 26px; }
.fuss__logo img { margin-inline: auto; width: 446px; max-width: 100%; }
/* Vier Spalten: Kontakt breiter (E-Mail-Adresse ohne Umbruch), Rechtliches schmaler */
@media (min-width: 981px) { .fuss .zeile--viertel { grid-template-columns: 1fr 1fr 1.3fr .75fr; } }
.fuss .text h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.fuss .text :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 18px; font-weight: 600; line-height: 1.5em; }
.fuss .text { font-weight: 500; }
.fuss .text a { color: inherit; }
/* Rechtliches (E4) */
.fuss .fuss__liste { margin: 0; padding: 0; list-style: none; }
.fuss .fuss__liste > li { line-height: 1.8em; }
.fuss__liste a {
  display: inline-block;
  padding: 2px 0;
  text-decoration: underline;
  text-decoration-color: var(--farbe-gruen);
  text-underline-offset: 3px;
}
.fuss__liste a:hover { color: var(--farbe-dunkel); }

.fussleiste { background: var(--farbe-grau); padding: 1px 0 0; }
.fussleiste .zeile { padding: 18px 0; }
.fussleiste__copy { color: var(--farbe-weiss); }
.fussleiste__links { text-align: center; }
.fussleiste__links a { color: var(--farbe-weiss); transition: color var(--uebergang); }
.fussleiste__links a:hover { color: var(--farbe-gruen); }

/* Seitenbox „Beratung & Termine“ (Desktop, Wunsch Michael Becker 14.10.2026): Lasche am rechten
   Rand bleibt immer sichtbar; Maus, Fokus oder Klick auf die Lasche (main.js) klappen die Box auf. */
.seitenbox {
  position: fixed; right: 0; top: 50%; z-index: 9000;
  display: flex; align-items: center;
  transform: translate(274px, -50%);
  transition: transform 300ms ease;
}
.seitenbox:hover, .seitenbox:focus-within, .seitenbox--offen { transform: translate(0, -50%); }
html:not(.js) .seitenbox:focus-within, .seitenbox:hover { transform: translate(0, -50%); }
.seitenbox__lasche {
  display: flex; align-items: center; gap: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 18px 11px;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--farbe-kopf-schatten);
  transition: background-color var(--uebergang);
}
.seitenbox__lasche:hover { background: var(--farbe-gruen-hover); }
.seitenbox__lasche .symbol { transform: rotate(90deg); font-size: 17px; }
.seitenbox__inhalt {
  width: 274px;
  padding: 18px 20px 20px;
  background: var(--farbe-weiss);
  box-shadow: 0 6px 24px var(--farbe-kopf-schatten);
}
.seitenbox .knopf { margin-bottom: 18px; }
.seitenbox .info + .info { margin-top: 2.75%; }

/* Mobil: fester, kleiner Knopf unten rechts (die Seite bekommt unten Platz, damit nichts verdeckt wird) */
.mobil-cta { display: none; }

/* Abschnitt „Persönliche Beratung“ am Ende der Inhaltsseiten: grüne Fläche mit weißem Knopf (Brand Kit);
   weiße Schrift auf Grün nur in großer Schrift. */
.cta { background: var(--farbe-gruen); color: var(--farbe-weiss); padding: 56px 0; overflow: visible; }
/* 26.10.2026: Ein negativer Außenabstand unten (a-au-m…, aus der Divi-Vorlage) am Abschnitt direkt davor
   schob dessen weiße Fläche über den oberen Innenabstand des Bands (Seite /baufinanzierung/). Absicherung: */
.abschnitt:has(+ .cta) { margin-bottom: 0 !important; }
.cta .zeile { padding: 0; }
.cta__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta__titel { margin: 0; padding: 0 0 8px; color: var(--farbe-weiss); font-size: 32px; line-height: 1.25; }
.cta__text { flex: 1 1 420px; }
.cta .cta__innen > * { margin-bottom: 0 !important; }
.cta__text p { padding: 0; font-size: 24px; line-height: 1.35; max-width: 34ch; }
.cta__aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.knopf--hell { background: var(--farbe-weiss); border-color: var(--farbe-weiss); color: var(--farbe-dunkel); font-weight: 700; }
.knopf--hell:hover { background: var(--farbe-gruen-20); border-color: var(--farbe-gruen-20); }
.cta__telefon { display: inline-flex; align-items: center; gap: 10px; color: var(--farbe-weiss); font-size: 24px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cta__telefon .symbol { font-size: 20px; }

/* Nach oben */
.nach-oben {
  position: fixed; right: 0; bottom: 125px; z-index: 99999;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 5px 0 0 5px;
  background: var(--farbe-nach-oben);
  color: var(--farbe-weiss);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}
.nach-oben--sichtbar { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s, visibility 0s; }
.nach-oben .symbol { font-size: 22px; }

/* --------------------------------------------------------------------------
   Lesetext (Pakete 5–9): neue Abschnitte, Wissensdatenbank, FAQ, Über mich
   Überschriften nach Brand Kit (Roboto Bold, H2/H3 18–21 px, Grün); Text Lato 18 px.
   -------------------------------------------------------------------------- */
.text--lesen h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; padding-bottom: 18px; }
.text--lesen h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen :is(h2,h3,h4,h5,h6):where(.ebene-2) { font-size: 21px; line-height: 1.3; padding-bottom: 12px; }
.text--lesen h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 19px; line-height: 1.35; padding-bottom: 8px; }
.text--lesen h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen :is(h2,h3,h4,h5,h6):where(.ebene-4) { font-size: 18px; line-height: 1.35; padding-bottom: 6px; }
.text--lesen * + h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen * + :is(h2,h3,h4,h5,h6):where(.ebene-2) { margin-top: 1.6em; }
.text--lesen * + h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen * + :is(h2,h3,h4,h5,h6):where(.ebene-3),
.text--lesen * + h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen * + :is(h2,h3,h4,h5,h6):where(.ebene-4) { margin-top: 1.3em; }
.text--lesen p + ul, .text--lesen p + ol { margin-top: .5em; }
.text--lesen ul, .text--lesen ol { padding: 0 0 1em 1.2em; line-height: 1.7; }
.text--lesen li + li { margin-top: .35em; }
.text--lesen li > ul { padding-bottom: 0; }
.text--lesen a:not(.knopf) { color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text--lesen a:not(.knopf):hover { color: var(--farbe-gruen); }
.text--schmal { max-width: 780px; }
article.text--schmal, .faq.text--schmal { margin-inline: 0; }
.abschnitt--gruen .text--lesen a:not(.knopf) { color: var(--farbe-weiss); }

/* Nummerierte Schritte (Neubau: In sechs Schritten) */
.text--lesen ol.schritte { counter-reset: schritt; list-style: none; padding-left: 0; display: grid; gap: 14px; }
.text--lesen ol.schritte > li { counter-increment: schritt; position: relative; margin: 0; padding: 14px 18px 14px 64px; background: var(--farbe-weiss); }
.text--lesen ol.schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 16px; top: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--farbe-gruen); color: var(--farbe-weiss);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 17px; line-height: 1;
}

/* Knöpfe in Textblöcken */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 0; margin-top: 1.2em; }
.knopfreihe--mitte { justify-content: center; }
.knopf--kontur { background: transparent; color: var(--farbe-dunkel); }
.knopf--kontur:hover { background: var(--farbe-gruen-20); border-color: var(--farbe-gruen); }
.text--lesen .knopf { text-decoration: none; }
/* .text a färbt Links grün – Knöpfe in Textblöcken behalten ihre Schriftfarbe */
.text .knopf { color: var(--farbe-weiss); }
.text .knopf--kontur, .text .knopf--hell { color: var(--farbe-dunkel); }

/* Weiter-Links mit Pfeil */
.text ul.weiterlinks, ul.weiterlinks { list-style: none; padding: 0; margin: .4em 0 1em; display: grid; gap: 6px; }
.weiterlinks li { position: relative; padding-left: 20px; line-height: 1.5; }
.weiterlinks li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px;
  border-top: 2px solid var(--farbe-gruen); border-right: 2px solid var(--farbe-gruen);
  transform: rotate(45deg);
}
.hinweis-klein { margin-top: 1.4em; font-size: 14px; line-height: 1.55; color: var(--farbe-text); }

/* Hinweisbox (Fördermittel: Wichtig vor jedem Antrag; Rechner-Hinweis) */
.hinweisbox { margin: 24px 0; padding: 20px 24px; background: var(--farbe-gruen-20); border-radius: var(--radius); }
.hinweisbox__titel { padding-bottom: 6px; font-size: 19px; }
.hinweisbox p { color: var(--farbe-dunkel); }
.hinweisbox--leise { margin: 1em 0; padding: 14px 18px; font-size: 17px; }

/* Sprungmarken-Leiste */
.sprungleiste { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 8px 0 18px; }
.sprungleiste__titel { padding: 0; font-weight: 700; color: var(--farbe-grau); font-size: 16px; }
.sprungleiste ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.text--lesen .sprungleiste li, .sprungleiste li { margin: 0; padding: 0; line-height: 1; }
.text--lesen .sprungleiste a { color: var(--farbe-dunkel); text-decoration: none; }
.text--lesen .sprungleiste a:hover { color: var(--farbe-dunkel); }
.sprungleiste a {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--farbe-gruen); border-radius: 999px;
  color: var(--farbe-dunkel); font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none;
  transition: background-color var(--uebergang);
}
.sprungleiste a:hover, .sprungleiste a:focus-visible { background: var(--farbe-gruen-20); }

/* Vergleich als zwei Karten (Kredit für Eigentümer) */
.vergleich { align-items: stretch; }
.vergleich__karte { height: 100%; padding: 26px 28px; background: var(--farbe-weiss); box-shadow: 0 12px 24px -16px var(--farbe-karte-schatten); }
.vergleich__karte h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.vergleich__karte :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 21px; padding-bottom: 14px; }
.vergleich__karte dl { margin: 0; display: grid; gap: 4px; }
.vergleich__karte dt { margin-top: 10px; font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--farbe-grau); text-transform: uppercase; }
.vergleich__karte dt:first-child { margin-top: 0; }
.vergleich__karte dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--farbe-text); }
.vorteile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 5.5%; }
.vorteile > .info { margin: 0 !important; }

/* Kacheln (Wissen & Tools) */
.kacheln { row-gap: 30px; }
.kachel { height: 100%; padding: 28px 30px; background: var(--farbe-fastweiss); border-top: 4px solid var(--farbe-gruen); box-shadow: 0 12px 24px -18px var(--farbe-karte-schatten); }
.kachel__titel { font-size: 21px; padding-bottom: 10px; }
.kachel p { padding-bottom: .6em; }
.kachel__link a { color: var(--farbe-dunkel); font-weight: 700; text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Karten-Liste (Wissensdatenbank, Ratgeber) – ganze Karte klickbar */
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 8px 0 18px; padding: 0; list-style: none; }
.karte { position: relative; padding: 24px 26px; background: var(--farbe-weiss); border: 1px solid var(--farbe-hellgrau); border-top: 4px solid var(--farbe-gruen); transition: box-shadow var(--uebergang), transform var(--uebergang); }
.karte:hover { box-shadow: 0 14px 26px -16px var(--farbe-karte-schatten); transform: translateY(-2px); }
.karte__titel { font-size: 20px; line-height: 1.3; padding-bottom: 8px; }
.karte__titel a { color: inherit; }
.karte__titel a::after { content: ""; position: absolute; inset: 0; }
.karte__titel a:focus-visible { outline: none; }
.karte:focus-within { outline: 2px solid var(--farbe-gruen); outline-offset: 2px; }
.karte__datum { padding: 0 0 6px; font-size: 14px; color: var(--farbe-grau); }
.karte__text { padding: 0 0 10px; color: var(--farbe-text); font-size: 16px; line-height: 1.6; }
/* Ab 1100 px drei Karten nebeneinander (Wissensdatenbank: Bund | Länder; Ratgeber: eine Reihe); Karten gleich hoch, Link unten */
@media (min-width: 1100px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte { display: flex; flex-direction: column; }
.karte__link { margin-top: auto; }
/* Länderblöcke in einem Abschnitt (Fördermittel: Landesmittel RLP/BW/Hessen): dezente weiße Fläche wie .karte */
.laenderblock { margin-top: 22px; padding: 22px 26px 20px; background: var(--farbe-weiss); border: 1px solid var(--farbe-hellgrau); border-top: 4px solid var(--farbe-gruen); }
.text--lesen .laenderblock > h3:first-child:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen .laenderblock > :is(h2,h3,h4,h5,h6):where(.ebene-3):first-child { margin-top: 0; }
.laenderblock > :last-child { padding-bottom: 0; }
.laenderblock + .laenderblock { margin-top: 18px; }
@media (max-width: 600px) { .laenderblock { margin-inline: -10px; padding: 18px 14px 16px; } }
.karte__link { padding: 0; font-weight: 700; color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hinweis-folgt { font-size: 16px; color: var(--farbe-text); }
.beitrag__zeile { padding-bottom: 1.2em; font-size: 15px; color: var(--farbe-grau); }

/* FAQ: aufklappbar ohne JavaScript (details/summary) */
.faq { display: grid; gap: 10px; margin-top: 6px; }
.faq__eintrag { background: var(--farbe-weiss); border: 1px solid var(--farbe-hellgrau); border-radius: var(--radius); }
.faq__frage { position: relative; padding: 16px 52px 16px 20px; cursor: pointer; list-style: none; }
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.faq__frage :is(h2,h3,h4,h5,h6):where(.ebene-3) { padding: 0; font-size: 19px; line-height: 1.35; }
.faq__frage::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--farbe-gruen); border-bottom: 2px solid var(--farbe-gruen);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--uebergang);
}
.faq__eintrag[open] > .faq__frage::after { transform: translateY(-30%) rotate(-135deg); }
.faq__frage:hover { background: var(--farbe-gruen-20); }
.faq__frage:focus-visible { outline: 2px solid var(--farbe-gruen); outline-offset: -2px; }
.faq__antwort { padding: 0 20px 18px; font-size: 17px; line-height: 1.7; }
.faq__antwort .weiterlinks { margin-bottom: 0; }
.faq__antwort a { color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-underline-offset: 3px; }

/* Tabellen aus Markdown (Ratgeber, Wissensdatenbank): im eigenen Rahmen waagerecht scrollbar,
   Zahlen rechtsbündig, Kopf in Grün 20 %, Summenzeile fett */
.tabelle-rahmen { margin: 1.4em 0 1.8em; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--farbe-hellgrau); border-radius: var(--radius); background: var(--farbe-weiss); }
.tabelle-rahmen:focus-visible { outline: 2px solid var(--farbe-gruen); outline-offset: 2px; }
.daten-tabelle { width: 100%; min-width: max(30em, calc(var(--spalten) * 8.5em)); border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* Im schmalen Lesetext dürfen Tabellen die volle Zeilenbreite nutzen (Desktop ohne Scrollen) */
.text--schmal .tabelle-rahmen { width: min(var(--zeile-max), 80vw); max-width: none; }
/* … außer Tabellen mit bis zu drei Spalten: sie bleiben in der Textspalte, Angabe und Wert stehen nah beieinander */
.text--schmal .tabelle-rahmen--eng { width: auto; max-width: 100%; }
@media (max-width: 600px) {
  /* mobil ohne Scrollen: Angabe und Wert umbrechen in der Spalte, statt dass der Wert außerhalb des Rahmens liegt */
  .tabelle-rahmen--eng .daten-tabelle { min-width: 0; }
  .tabelle-rahmen--eng .daten-tabelle th, .tabelle-rahmen--eng .daten-tabelle td { min-width: 0; padding: 9px 10px; }
  .tabelle-rahmen--eng .daten-tabelle td.t-rechts { white-space: normal; }
}
.text--lesen h2 + .tabelle-rahmen,
.text--lesen h3 + .tabelle-rahmen { margin-top: .6em; }
.text--lesen .tabelle-rahmen + p,
.text--lesen .tabelle-rahmen + h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen .tabelle-rahmen + :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--lesen .tabelle-rahmen + h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen .tabelle-rahmen + :is(h2,h3,h4,h5,h6):where(.ebene-3) { margin-top: 0; }
.text--lesen .tabelle-rahmen + h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen .tabelle-rahmen + :is(h2,h3,h4,h5,h6):where(.ebene-2) { margin-top: 1.2em; }
.daten-tabelle caption { caption-side: top; padding: 12px 14px 8px; text-align: left; font-family: var(--schrift-titel); font-weight: 700; font-size: 17px; color: var(--farbe-dunkel); }
.daten-tabelle th, .daten-tabelle td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--farbe-hellgrau); color: var(--farbe-text); hyphens: manual; overflow-wrap: normal; }
.daten-tabelle thead th { background: var(--farbe-gruen-20); color: var(--farbe-dunkel); font-weight: 700; border-top: 0; }
.daten-tabelle tbody th { font-weight: 700; color: var(--farbe-dunkel); }
.daten-tabelle .t-rechts { text-align: right; }
.daten-tabelle td.t-rechts { white-space: nowrap; }
.daten-tabelle th, .daten-tabelle td { min-width: 6.5em; }
.daten-tabelle .t-mitte { text-align: center; }
.daten-tabelle .t-summe th, .daten-tabelle .t-summe td { font-weight: 700; color: var(--farbe-dunkel); border-top: 2px solid var(--farbe-gruen); }
.text--lesen .tabelle-rahmen a { color: var(--farbe-dunkel); }

/* Baufinanzierungsrechner (Europace; build.py rechner_html(), main.js). Seit 21.10.2026 lädt er beim
   Seitenaufruf. Darunter ein dezenter Datenschutzhinweis; bis der Rechner gezeichnet ist, hält die Fläche
   seine Höhe (946 px Desktop, 1205 px schmal, gemessen 20.10.2026) – kein Layoutsprung. */
.rechner { margin: 28px 0 0; }
.rechner [hidden] { display: none !important; }
.rechner__hinweis { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 0; padding: 10px 14px; background: var(--farbe-fastweiss); border-left: 3px solid var(--farbe-gruen); font-size: 15px; line-height: 1.6; color: var(--farbe-text); }
.rechner__hinweis .symbol { flex: none; color: var(--farbe-grau); }
.rechner__hinweis a, .rechner__ohne-js a { color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rechner__flaeche { position: relative; outline: none; }
.rechner--laedt .rechner__flaeche { min-height: 946px; background: var(--farbe-fastweiss); border: 1px solid var(--farbe-hellgrau); }
.rechner__meldung { padding: 48px 16px; text-align: center; font-size: 16px; color: var(--farbe-text); }
.rechner--laedt .rechner__meldung { position: absolute; inset: 0 0 auto; }
.rechner__ohne-js { margin: 0; padding: 14px 16px; background: var(--farbe-gruen-20); color: var(--farbe-dunkel); }
.rechner-im-blick .mobil-cta { display: none; }
@media (max-width: 980px) { .rechner-im-blick .nach-oben { opacity: 0; visibility: hidden; } }
/* Sprungziel aus dem Rechner-Hinweis (Datenschutz): mit Luft unter dem festen Kopf */
#europace-rechner { scroll-margin-top: calc(var(--seiten-oben) + 24px); }
@media (max-width: 980px) {
  .rechner { margin-inline: calc(50% - 50vw + 16px); }
  .rechner--laedt .rechner__flaeche { min-height: 1205px; }
}

/* Pflichtangaben-Kasten (md.py, § 17 PAngV): deutlich umrandet; die erste Zeile ist die Hauptpreisangabe,
   ihre Zahl ist die größte und fetteste Zinsangabe der Seite. Mobil stehen Angabe und Wert untereinander. */
.pflichtangaben { margin: 1.6em 0 1.8em; border: 2px solid var(--farbe-gruen); border-radius: var(--radius); background: var(--farbe-weiss); overflow: hidden; }
.text--lesen .pflichtangaben + h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--lesen .pflichtangaben + :is(h2,h3,h4,h5,h6):where(.ebene-2) { margin-top: 2em; }
.kasten.pflichtangaben > :not(table) { padding: 12px 20px 0; }
.kasten.pflichtangaben > :last-child:not(table) { padding-bottom: 14px; }
.pflicht-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pflicht-tabelle caption { caption-side: top; padding: 14px 20px 12px; text-align: left; font-family: var(--schrift-titel); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--farbe-dunkel); }
.pflicht-tabelle th, .pflicht-tabelle td { padding: 9px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--farbe-hellgrau); color: var(--farbe-text); overflow-wrap: break-word; }
.pflicht-tabelle tbody th { width: 28%; padding-right: 10px; font-weight: 700; color: var(--farbe-dunkel); }
.pflicht-tabelle td { padding-left: 10px; }
.pflicht-tabelle .pflicht-tabelle__haupt th, .pflicht-tabelle .pflicht-tabelle__haupt td { padding-top: 16px; padding-bottom: 16px; vertical-align: middle; border-top: 0; background: var(--farbe-gruen-20); font-size: 17px; color: var(--farbe-dunkel); }
.pflicht-tabelle .pflicht-tabelle__haupt th { box-shadow: inset 5px 0 0 var(--farbe-gruen); }
.pflicht-tabelle__zins { display: block; font-family: var(--schrift-titel); font-weight: 700; font-size: 38px; line-height: 1.1; white-space: nowrap; color: var(--farbe-dunkel); }
@media (max-width: 600px) {
  .pflicht-tabelle, .pflicht-tabelle tbody, .pflicht-tabelle tr, .pflicht-tabelle th, .pflicht-tabelle td, .pflicht-tabelle caption { display: block; }
  .pflicht-tabelle caption { padding: 12px 16px 10px; font-size: 16px; }
  .pflicht-tabelle tbody th { width: auto; padding: 10px 16px 0; }
  .pflicht-tabelle td { padding: 2px 16px 10px; border-top: 0; }
  .pflicht-tabelle .pflicht-tabelle__haupt th { padding: 14px 16px 2px; }
  .pflicht-tabelle .pflicht-tabelle__haupt td { padding: 2px 16px 14px; box-shadow: inset 5px 0 0 var(--farbe-gruen); }
  .pflicht-tabelle__zins { font-size: 34px; }
  .kasten.pflichtangaben > :not(table) { padding: 12px 16px 0; }
}

/* Diagramme (bau/diagramme.py): Inline-SVG mit Titel, Legende, Bildunterschrift */
.diagramm { margin: 1.6em 0 1.8em; padding: 20px 22px 16px; background: var(--farbe-weiss); border: 1px solid var(--farbe-hellgrau); border-radius: var(--radius); }
.diagramm__titel { padding: 0 0 8px; font-family: var(--schrift-titel); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--farbe-dunkel); }
.diagramm__legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; padding: 0 !important; list-style: none; font-size: 14px; line-height: 1.4; color: var(--farbe-text); }
.diagramm .diagramm__legende li { display: inline-flex; align-items: flex-start; gap: 7px; margin: 0 !important; line-height: 1.4; }
.diagramm__legende li > svg { flex: none; margin-top: .2em; }
.diagramm__svg { display: block; width: 100%; height: auto; max-width: 680px; }
.diagramm__svg--schmal { display: none; }
.diagramm__marken { margin: 8px 0 0; padding: 0 !important; list-style: none; font-size: 14px; line-height: 1.45; color: var(--farbe-text); }
/* Nummer exakt mittig im Kreis; Kreis auf die erste Textzeile (Zeilenhöhe 21 px) ausgerichtet */
.diagramm .diagramm__marken li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 6px 0 0 !important; line-height: 21px; }
.diagramm__marke { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 20px; height: 20px; margin-top: .5px; border: 1.5px solid var(--farbe-text); border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--farbe-dunkel); }
.diagramm__unterschrift { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--farbe-hellgrau); font-size: 14px; line-height: 1.5; color: var(--farbe-text); }
@media (max-width: 600px) {
  .diagramm { padding: 14px 12px 12px; }
  /* Eigene, schmalere SVG-Fassung (bau/diagramme.py), damit die Schrift nicht mitschrumpft */
  .diagramm__svg--breit { display: none; }
  .diagramm__svg--schmal { display: block; }
}

/* Baufinanzierungs-Lexikon A–Z (Wissensdatenbank): Buchstabenleiste, zweispaltige kompakte Liste */
.az-leiste { position: sticky; top: var(--seiten-oben); z-index: 5; margin: 18px 0 8px; padding: 10px 0; background: var(--farbe-fastweiss); }
.az-leiste ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.az-leiste a, .az-leiste__leer {
  display: grid; place-items: center;
  width: 34px; height: 36px;
  border-radius: var(--radius);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 16px; line-height: 1;
}
.az-leiste a { background: var(--farbe-weiss); border: 1px solid var(--farbe-gruen); color: var(--farbe-dunkel); transition: background-color var(--uebergang); }
.az-leiste a:hover, .az-leiste a:focus-visible { background: var(--farbe-gruen-20); }
.az-leiste__leer { color: #b9b9b9; border: 1px solid var(--farbe-hellgrau); }
.lexikon { columns: 2 380px; column-gap: 56px; margin: 12px 0 24px; }
.lexikon__gruppe { break-inside: avoid; padding-top: 14px; margin-bottom: 10px; }
.lexikon__buchstabe { padding: 0 0 6px; margin-bottom: 4px; border-bottom: 2px solid var(--farbe-gruen); font-size: 22px; }
.lexikon__liste { margin: 0; }
.lexikon__eintrag { padding: 9px 0; border-bottom: 1px solid var(--farbe-hellgrau); }
.lexikon__eintrag dt { font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--farbe-dunkel); }
.lexikon__eintrag dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--farbe-text); }
.lexikon__eintrag a { color: var(--farbe-dunkel); text-decoration: underline; text-decoration-color: var(--farbe-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lexikon__eintrag a:hover { color: var(--farbe-gruen); }
.lexikon__eintrag--verweis dt { font-weight: 400; color: var(--farbe-text); }
.lexikon__eintrag--verweis dd { display: inline; margin: 0; }
.lexikon__eintrag--verweis dt { display: inline; margin-right: 6px; }
.lexikon__eintrag--verweis dt::after { content: " →"; color: var(--farbe-gruen); }
.lexikon__gruppe[id] { scroll-margin-top: calc(var(--seiten-oben) + 70px); }
@media (max-width: 980px) { .lexikon__gruppe[id] { scroll-margin-top: 12px; } }
.seitenbanner--niedrig { min-height: 110px; }
@media (max-width: 980px) {
  .az-leiste { position: static; }   /* mobil nicht klebend: die Leiste bricht in mehrere Zeilen um */
  .az-leiste a, .az-leiste__leer { width: 34px; height: 34px; }
  .seitenbanner--niedrig { min-height: 80px; }
}

/* Über mich */
.text .stationen { list-style: none; padding-left: 0 !important; }
.stationen li { padding: 8px 0; border-bottom: 1px solid var(--farbe-hellgrau); margin: 0 !important; }
.arbeitsweise .info + .info { margin-top: 26px; }
.seitenbanner--portrait { min-height: 340px; }
.seitenbanner--portrait .seitenbanner__bild { object-position: 62% 18%; }

@media (max-width: 980px) {
  .karten, .vorteile { grid-template-columns: minmax(0, 1fr); }
  .cta { padding: 46px 0; }
  .cta__innen { align-items: flex-start; }
  .cta .knopf--hell { white-space: nowrap; font-size: 18px; }
  .cta__titel { font-size: 28px; }
  .cta__text p, .cta__telefon { font-size: 22px; }
  .seitenbox { display: none; }
  .mobil-cta {
    position: fixed; right: 16px; bottom: 16px; z-index: 9000;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--farbe-gruen);
    color: var(--farbe-weiss);
    font-size: 17px; font-weight: 700; line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  }
  .mobil-cta .symbol { font-size: 18px; }
  body:has(.mobil-cta) .fussleiste { padding-bottom: 72px; }
  .nach-oben { bottom: 84px; }
  .seitenbanner--portrait { min-height: 260px; }
}

/* --------------------------------------------------------------------------
   Abstände aus der Vorlage (erzeugt von bau/build.py)
   a-po = Polsterung oben, a-pu = unten, a-ao = Außenabstand oben, a-au = unten; m = minus
   -------------------------------------------------------------------------- */
.a-au-m98 { margin-bottom: -98px !important; }
.a-au-0 { margin-bottom: 0px !important; }
.a-au-2 { margin-bottom: 2px !important; }
.a-au-16 { margin-bottom: 16px !important; }
.a-au-21 { margin-bottom: 21px !important; }
.a-au-40 { margin-bottom: 40px !important; }
.a-ao-m26 { margin-top: -26px !important; }
.a-ao-68 { margin-top: 68px !important; }
.a-pu-0 { padding-bottom: 0px !important; }
.a-pu-10 { padding-bottom: 10px !important; }
.a-pu-12 { padding-bottom: 12px !important; }
.a-pu-13 { padding-bottom: 13px !important; }
.a-pu-16 { padding-bottom: 16px !important; }
.a-pu-18 { padding-bottom: 18px !important; }
.a-pu-23 { padding-bottom: 23px !important; }
.a-pu-24 { padding-bottom: 24px !important; }
.a-pu-25 { padding-bottom: 25px !important; }
.a-pu-26 { padding-bottom: 26px !important; }
.a-pu-28 { padding-bottom: 28px !important; }
.a-pu-30 { padding-bottom: 30px !important; }
.a-pu-35 { padding-bottom: 35px !important; }
.a-pu-37 { padding-bottom: 37px !important; }
.a-pu-50 { padding-bottom: 50px !important; }
.a-pu-58 { padding-bottom: 58px !important; }
.a-pu-59 { padding-bottom: 59px !important; }
.a-pu-60 { padding-bottom: 60px !important; }
.a-po-0 { padding-top: 0px !important; }
.a-po-6 { padding-top: 6px !important; }
.a-po-7 { padding-top: 7px !important; }
.a-po-9 { padding-top: 9px !important; }
.a-po-10 { padding-top: 10px !important; }
.a-po-11 { padding-top: 11px !important; }
.a-po-17 { padding-top: 17px !important; }
.a-po-25 { padding-top: 25px !important; }
.a-po-26 { padding-top: 26px !important; }
.a-po-28 { padding-top: 28px !important; }
.a-po-30 { padding-top: 30px !important; }
.a-po-32 { padding-top: 32px !important; }
.a-po-35 { padding-top: 35px !important; }
.a-po-37 { padding-top: 37px !important; }
.a-po-40 { padding-top: 40px !important; }
.a-po-50 { padding-top: 50px !important; }
.a-po-58 { padding-top: 58px !important; }
.a-po-59 { padding-top: 59px !important; }
.a-po-60 { padding-top: 60px !important; }

/* --------------------------------------------------------------------------
   Umbrüche wie im Original (Divi: 1350 / 980 / 767 / 479 px)
   -------------------------------------------------------------------------- */
@media (min-width: 1350px) {
  .abschnitt { padding: 54px 0; }
  .zeile { padding: 27px 0; }
}

/* Das Hauptmenü (6 Punkte) braucht neben dem Logo rund 920 px Kopfbreite = 80 % von 1150 px.
   Darunter gilt schon das Mobilmenü; zwischen 981 und 1179 px bleibt der Kopf fest oben,
   das Menü klappt darunter auf und scrollt bei Bedarf in sich. */
@media (max-width: 1179px) {
  .hauptmenue { display: none; }
  .menueknopf { display: block; }
  .mobilmenue { max-height: calc(100vh - var(--seiten-oben)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 981px) and (max-width: 1179px) {
  .mobilmenue { left: auto; width: 440px; padding: 20px; }
}

@media (max-width: 980px) {
  :root { --seiten-oben: 0px; }
  .seitenrahmen { padding-top: 0; }
  .kopfleiste { position: relative; height: auto; }
  .kopfleiste__innen { grid-template-columns: 1fr; justify-content: center; padding: 10.5px 0; }
  .kopfleiste__info { flex-direction: column; align-items: center; gap: 1px; }
  .kopfleiste__menue { display: none; }
  .kopf { position: relative; top: 0; height: 80px; }
  .kopf__logo img { height: 40px; max-height: none; }
  .hauptmenue { display: none; }
  .menueknopf { display: block; }

  .abschnitt { padding: 50px 0; }
  .zeile { padding: 30px 0; }
  .zeile:not(.zeile--viertel) { grid-template-columns: minmax(0, 1fr); }
  .zeile--viertel { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .zeile:not(.zeile--viertel) > .spalte:not(:last-child) { margin-bottom: 30px; }
  .zeile[class] > .spalte[class] > :not(:last-child) { margin-bottom: 30px; }
  .zeile--leer-mobil > .spalte:empty { display: none; }

  .text h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text h1.ebene-2 { font-size: 4vw; line-height: 2em; }
  .text--weisskarte h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--weisskarte :is(h2,h3,h4,h5,h6):where(.ebene-4),
.text--weisskarte h1.ebene-4 { font-size: 2.8vw; }
  .text--titel-2vw h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 4vw; }
  .text--titel-2vw-links h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw-links :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 3vw; }
  .text--rechtstext h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--rechtstext :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--rechtstext h1.ebene-2 { font-size: 22px; line-height: 1.4em; }

  .buehne { min-height: calc(100vh - 131px); padding: 50px 0; background-image: url('../img/hero-michael-becker-980.jpg'); }
  .abschnitt--kontaktfoto { background-image: url('../img/kontakt-hintergrund-980.jpg'); }
  .buehne__titel { font-size: 7vw; }
  .buehne__unterzeile { font-size: 4vw; }

  .fussleiste__copy, .fussleiste__links { text-align: center; }

  .nur-klein { display: block; }
  .nur-gross {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

@media (max-width: 767px) {
  .text h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text h1.ebene-2 { font-size: 6.8vw; line-height: 1.5em; }
  .text--weisskarte h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--weisskarte :is(h2,h3,h4,h5,h6):where(.ebene-4),
.text--weisskarte h1.ebene-4 { font-size: 5vw; }
  .text--weisskarte.text--titel-schmal h4:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--weisskarte.text--titel-schmal :is(h2,h3,h4,h5,h6):where(.ebene-4),
.text--weisskarte.text--titel-schmal h1.ebene-4 { font-size: 4.1vw; }
  .text--titel-2vw h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw :is(h2,h3,h4,h5,h6):where(.ebene-3),
.text--titel-2vw-links h3:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--titel-2vw-links :is(h2,h3,h4,h5,h6):where(.ebene-3) { font-size: 6vw; }
  .text--rechtstext h2:where(:not(.ebene-2,.ebene-3,.ebene-4,.ebene-5,.ebene-6)),
.text--rechtstext :is(h2,h3,h4,h5,h6):where(.ebene-2),
.text--rechtstext h1.ebene-2 { font-size: 22px; line-height: 1.4em; }
  .buehne { min-height: 0; padding: 160px 0 60px; }
  .buehne__innen { min-height: calc(100vh - 80px); justify-content: center; padding-inline: 2%; }
  .buehne__titel { font-size: 10vw; }
  .buehne__unterzeile { font-size: 7vw; }
}

@media (max-width: 479px) {
  .zeile--viertel { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Bewegung: Einblenden beim Scrollen – nur mit JavaScript, sonst sichtbar
   -------------------------------------------------------------------------- */
.js .einblenden { opacity: 0; transition: opacity 1000ms ease-in-out, transform 1000ms ease-in-out; }
.js .einblenden--von-oben { transform: translateY(-2%); transition-duration: 600ms; }
.js .einblenden--gleiten { transform: scale(.5); }
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .einblenden { opacity: 1; transform: none; transition: none; }
  .info--wachsen, .info--bildkarte, .knopf, .seitenbox, .nach-oben, .hauptmenue__unter { transition: none; }
  .info--wachsen:hover, .info--bildkarte:hover { transform: none; }
}