/* =====================================================
   Smart-Immo-Concept GmbH — Gestaltung v3 „Gesichter“ (Entwurf 11/2026)
   Navy #14213A · Gold #B8914B · Grund #F5F6F8
   Schriften: Hanken Grotesk (Überschriften, Bedienung), Source Serif 4 (Fließtext)
   Selbst gehostet, nur latin + latin-ext.
   ===================================================== */
/* Hanken Grotesk normal latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-ext-a3a091.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;
}
/* Hanken Grotesk normal latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-a6b899.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;
}
/* Source Serif 4 italic latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-italic-latin-ext-fb43d3.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;
}
/* Source Serif 4 italic latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-italic-latin-e5fc84.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;
}
/* Source Serif 4 normal latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-20f95b.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;
}
/* Source Serif 4 normal latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-6a682e.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;
}

/* ── Farben und Maße ── */
:root {
  --grund: #F5F6F8;
  --navy: #14213A;
  --tief: #0F1A2E;
  --gold: #B8914B;
  --gold-hell: #D4B27A;
  --schiefer: #5B6577;
  --linie: #DDE1E7;
  --linie-dunkel: #2A3753;
  --white: #FFFFFF;
  /* Namen aus style.css, die bewertungen.js, aktuelles.js und der SEO-Generator verwenden */
  --off-white: var(--grund);
  --gray-100: var(--linie);
  --gray-400: #8A91A0;
  --gray-700: #3F4757;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(20,33,58,.06), 0 8px 24px -12px rgba(20,33,58,.18);
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-mono: 'Hanken Grotesk', system-ui, sans-serif;
  --container: 1240px;
  --rand: 32px;
}

/* ── Grundlagen ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--grund); color: var(--navy); font: 400 18px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; }
/* Sehr lange Wörter (ab 14 Zeichen) in Überschriften trennen statt überlaufen lassen */
h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; overflow-wrap: break-word; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--rand); }
.eyebrow { font: 700 13px/1.2 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--schiefer); margin-bottom: 14px; }
.eyebrow.on-dark { color: var(--gold-hell); }
.lead { font-size: 19px; color: var(--schiefer); max-width: 36em; }
.serif-akzent { font: italic 400 1em/1 var(--font-body); letter-spacing: -.02em; color: var(--gold); }
.section { padding: 104px 0; }
.section-kopf { display: grid; grid-template-columns: 5fr 4fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.section-kopf .lead { margin: 0; }

/* ── Knöpfe ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-display); text-decoration: none; padding: 15px 22px; border-radius: var(--radius); border: 0; cursor: pointer; transition: background .2s, color .2s; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--gold); color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--white); }
.btn-outline.on-dark { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn-outline.on-dark:hover { background: var(--white); color: var(--navy); }
.link { font: 700 15px var(--font-display); color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { color: var(--gold); }

/* ── Navigation ── */
.navbar { position: sticky; top: 0; z-index: 50; background: var(--grund); border-bottom: 1px solid var(--linie); }
.navbar-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--rand); display: flex; align-items: center; gap: 32px; }
.navbar-logo { height: 42px; width: auto; }
.nav-menu { display: flex; gap: 4px; list-style: none; padding: 0; margin-left: auto; }
.nav-item { position: relative; }
.nav-link { display: block; padding: 10px 12px; font: 700 15px var(--font-display); text-decoration: none; border-radius: var(--radius); }
.nav-link:hover, .nav-item:focus-within > .nav-link { color: var(--gold); }
.chevron { font-size: 11px; margin-left: 2px; }
.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.dropdown-item { display: block; padding: 9px 12px; font: 500 15px var(--font-display); text-decoration: none; border-radius: 3px; }
.dropdown-item:hover { background: var(--grund); color: var(--gold); }
.dropdown-trenner { height: 1px; background: var(--linie); margin: 6px 8px; }
.nav-cta { white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--navy); margin: 5px 0; transition: transform .2s, opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 981px) {
  .nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 980px) {
  .navbar-inner { gap: 12px; }
  .nav-toggle { display: block; order: 3; }
  .nav-cta { margin-left: auto; padding: 12px 14px; font-size: 14px; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--white); padding: 12px var(--rand) 20px; box-shadow: var(--shadow); max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav-menu.open { display: flex; }
  .nav-link { padding: 12px 0; font-size: 17px; }
  .dropdown-menu { position: static; box-shadow: none; padding: 0 0 8px 12px; opacity: 1; visibility: visible; transform: none; display: none; min-width: 0; }
  .nav-item.open .dropdown-menu { display: block; }
}

/* ── Kopf der Startseite ── */
.kopf { display: grid; grid-template-columns: 7fr 4fr; gap: 56px; align-items: end; padding-top: 56px; padding-bottom: 40px; }
.kopf h1 { font-size: clamp(48px, 7.4vw, 108px); font-weight: 800; line-height: .92; letter-spacing: -.035em; }
.kopf .kicker { display: block; font: 700 14px/1.3 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--schiefer); margin-bottom: 22px; }
.kopf p { color: var(--schiefer); }
.kopf-aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.zinszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); font: 500 15px/1.4 var(--font-display); color: var(--schiefer); }
.zinszeile b { font-weight: 800; font-size: 22px; color: var(--navy); letter-spacing: -.01em; }
.zinszeile .runter { color: #2E7D4F; }
.zinszeile .hoch { color: #B3412E; }
.zinszeile a { color: var(--navy); font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.zinszeile[hidden] { display: none; }

/* Porträtstreifen */
.streifen-rahmen { max-width: var(--container); margin: 0 auto; padding: 0 var(--rand); }
.streifen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: min(64vh, 640px); min-height: 440px; transition: grid-template-columns .5s cubic-bezier(.3,.7,.2,1); }
/* Die Spalte unter der Maus (oder mit Tastaturfokus) wird breit und zeigt das Zitat.
   Nur mit Maus und ab 700 px; Touch-Geräte und schmale Bildschirme wischen stattdessen (siehe unten). */
@media (hover: hover) and (min-width: 700px) {
  .streifen:has(.person:nth-child(1):is(:hover, :focus-visible)) { grid-template-columns: 2.6fr 1fr 1fr 1fr 1fr; }
  .streifen:has(.person:nth-child(2):is(:hover, :focus-visible)) { grid-template-columns: 1fr 2.6fr 1fr 1fr 1fr; }
  .streifen:has(.person:nth-child(3):is(:hover, :focus-visible)) { grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr; }
  .streifen:has(.person:nth-child(4):is(:hover, :focus-visible)) { grid-template-columns: 1fr 1fr 1fr 2.6fr 1fr; }
  .streifen:has(.person:nth-child(5):is(:hover, :focus-visible)) { grid-template-columns: 1fr 1fr 1fr 1fr 2.6fr; }
}
.person { position: relative; overflow: hidden; text-decoration: none; background: var(--navy); }
.person img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1); transition: filter .4s, transform .6s; }
.person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,26,46,.88) 0, rgba(15,26,46,0) 46%); }
.person-info { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; color: var(--white); }
.person-info b { display: block; font: 800 clamp(20px, 1.8vw, 26px)/1.05 var(--font-display); letter-spacing: -.01em; }
.person-info .ort { display: block; margin-top: 8px; font: 700 12px var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-hell); }
.person-info .zitat { display: block; font: italic 400 22px/1.3 var(--font-body); max-width: 19em; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .3s, margin .5s; }
.person:hover .zitat, .person:focus-visible .zitat { max-height: 9em; opacity: 1; margin-top: 14px; transition-delay: .15s; }
.person-info .mehr { display: block; margin-top: 10px; font: 500 14px var(--font-display); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.person:hover img, .person:focus-visible img { filter: none; transform: scale(1.03); }
.person:hover .mehr, .person:focus-visible .mehr { opacity: 1; transform: none; }

/* ── Leistungen: Finanzierung | Versicherungen ── */
.leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.leistung { background: var(--white); padding: 48px 44px 44px; display: flex; flex-direction: column; }
.leistung .eyebrow { color: var(--gold); }
.leistung h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.leistung > p { color: var(--gray-700); }
.themen { list-style: none; padding: 0; margin: 24px 0 28px; border-top: 1px solid var(--linie); }
.themen li { padding: 12px 0; border-bottom: 1px solid var(--linie); font: 500 17px var(--font-display); display: flex; justify-content: space-between; gap: 16px; }
.themen li a { text-decoration: none; }
.themen li a:hover { color: var(--gold); }
.themen li span { color: var(--gray-400); font-weight: 500; font-size: 15px; text-align: right; }
.leistung .aktionen { margin-top: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ausserdem { margin-top: 28px; font-size: 16px; color: var(--schiefer); }
.ausserdem a { font: 700 15px var(--font-display); color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.fakten { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--navy); }
.fakten div { font: 500 15px var(--font-display); color: var(--schiefer); }
.fakten b { display: block; font: 800 36px/1 var(--font-display); color: var(--navy); letter-spacing: -.02em; margin-bottom: 4px; }

/* ── Haus-Check (js/hauscheck.js) ── */
.hauscheck { background: var(--white); }
.hc-raster { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.hc-intro { position: sticky; top: 100px; }
.hc-intro .lead { margin: 16px 0 28px; }
.hc-ergebnis { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 26px 28px; }
.hc-stand { font: 700 13px var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-hell); }
.hc-zahl { margin-top: 10px; font: 700 22px/1.25 var(--font-display); }
.hc-zahl b { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin-right: 4px; }
.hc-liste { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 14px; }
.hc-liste li { font-size: 16px; line-height: 1.5; color: #C3C9D5; padding-left: 16px; border-left: 2px solid var(--gold); }
.hc-liste li b { display: block; font: 700 16px var(--font-display); color: var(--white); margin-bottom: 2px; }
.hc-gut { margin: 8px 0 20px; color: #C3C9D5; font-size: 16px; }
.hc-fragen { display: grid; gap: 0; }
.hc-frage { border: 0; border-top: 1px solid var(--linie); padding: 22px 0 24px; margin: 0; min-width: 0; }
.hc-frage:last-child { border-bottom: 1px solid var(--linie); }
.hc-frage legend { float: left; width: 100%; font: 700 19px/1.35 var(--font-display); margin-bottom: 14px; padding: 0; }
.hc-wahl { clear: both; display: flex; gap: 8px; flex-wrap: wrap; }
.hc-wahl label { cursor: pointer; }
.hc-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hc-wahl span { display: inline-block; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linie); font: 600 15px var(--font-display); color: var(--gray-700); transition: background .15s, color .15s, box-shadow .15s; }
.hc-wahl label:hover span { box-shadow: inset 0 0 0 1.5px var(--navy); }
.hc-wahl input:checked + span { background: var(--navy); color: var(--white); box-shadow: none; }
.hc-wahl input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── Zuständigkeit (dunkel) ── */
.zustaendig { background: var(--tief); color: #E9ECF2; }
.zustaendig h2 { color: var(--white); }
.zustaendig .lead { color: #AEB6C6; }
.ort-zeile { display: grid; grid-template-columns: 96px 1.1fr 2fr auto; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--linie-dunkel); }
.ort-zeile:last-of-type { border-bottom: 1px solid var(--linie-dunkel); }
.ort-zeile .gesichter { display: flex; }
.ort-zeile .gesichter img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--tief); }
.ort-zeile .gesichter img + img { margin-left: -22px; }
.ort-zeile h3 { color: var(--white); font-size: 22px; }
.ort-zeile h3 small { display: block; margin-top: 6px; font: 700 13px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hell); }
.ort-zeile p { font-size: 16px; color: #C3C9D5; }
.ort-zeile .link { color: var(--white); white-space: nowrap; }
.ort-zeile .link:hover { color: var(--gold-hell); }
.video-hinweis { margin-top: 28px; font-size: 16px; color: #AEB6C6; }
.video-hinweis a { color: var(--white); font: 700 15px var(--font-display); text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ── Über uns ── */
.ueber { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.ueber figure img { width: 100%; height: auto; border-radius: var(--radius); }
.ueber figcaption { margin-top: 10px; font: 500 14px var(--font-display); color: var(--gray-400); }
.ueber blockquote { font: italic 400 clamp(24px, 2.3vw, 32px)/1.3 var(--font-body); margin: 8px 0 24px; }
.ueber p + p { margin-top: 14px; }

/* ── Ablauf ── */
.ablauf { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; border-top: 2px solid var(--navy); padding-top: 18px; }
.ablauf li::before { content: counter(schritt); display: block; font: 800 64px/1 var(--font-display); color: var(--gold); letter-spacing: -.04em; margin-bottom: 12px; }
.ablauf h3 { margin-bottom: 8px; }
.ablauf p { font-size: 16px; color: var(--gray-700); }

/* ── Bewertungen ── */
.google-box { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--white); border-radius: var(--radius); padding: 28px 32px; }
.google-box .note { font: 800 44px/1 var(--font-display); letter-spacing: -.02em; }
.google-box .note span { color: var(--gold); font-size: 30px; letter-spacing: 2px; margin-left: 6px; }
.google-box p { font-size: 15px; color: var(--schiefer); margin-top: 6px; }
.google-box .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── FAQ ── */
.faq-raster { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.faq-raster h2 { font-size: clamp(30px, 3vw, 42px); }
.faq-item { border-top: 1px solid var(--linie); }
.faq-item:last-child { border-bottom: 1px solid var(--linie); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 700 19px/1.3 var(--font-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 22px; height: 22px; position: relative; margin-top: 2px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: var(--gold); transition: transform .2s; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-answer { padding: 0 0 24px; color: var(--gray-700); max-width: 40em; }

/* ── Aktuelles-Teaser (js/aktuelles.js) ── */
.aktuelles-band { padding: 0 0 104px; }
.akt-teaser { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; background: var(--white); border-left: 4px solid var(--gold); padding: 32px 36px; border-radius: var(--radius); text-decoration: none; }
.akt-teaser-zahl span { display: block; font: 800 48px/1 var(--font-display); letter-spacing: -.03em; }
.akt-teaser-zahl small { display: block; margin-top: 8px; font: 500 14px var(--font-display); color: var(--gray-700); }
.akt-teaser h3 { font-size: 24px; margin: 6px 0 10px; }
.akt-teaser p { margin-bottom: 12px; color: var(--gray-700); }
.akt-mehr { font: 700 15px var(--font-display); color: var(--gold); }

/* ── Zinsbrief ── */
.zinsbrief { background: var(--navy); color: var(--white); padding: 96px 0; }
.zinsbrief-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.zinsbrief h2 { color: var(--white); }
.zinsbrief .lead { color: #C3C9D5; margin-top: 16px; }
.zinsbrief-punkte { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.zinsbrief-punkte li { display: flex; gap: 12px; color: #DCE0E8; font-size: 16px; }
.zinsbrief-punkte li::before { content: ""; width: 14px; height: 2px; background: var(--gold); margin-top: .8em; flex-shrink: 0; }
.zinsbrief-form { background: var(--white); color: var(--navy); padding: 32px; border-radius: var(--radius); }
.zinsbrief-form .btn { width: 100%; justify-content: center; }
.zinsbrief-falle { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font: 700 14px var(--font-display); margin-bottom: 7px; }
.form-control { width: 100%; font: 400 17px var(--font-body); padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--white); color: var(--navy); }
.form-control:focus { outline: none; border-color: var(--gold); }
.form-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-checkbox input { margin-top: 4px; accent-color: var(--navy); flex-shrink: 0; width: 18px; height: 18px; }
.form-checkbox span { font-size: 14px; line-height: 1.5; color: var(--gray-700); }
.form-checkbox a { color: var(--navy); }
.form-note { font: 500 14px var(--font-display); color: var(--gray-400); text-align: center; margin-top: 12px; }

/* ── Abschluss-Aufruf ── */
.cta { padding: 104px 0; }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; border-top: 2px solid var(--navy); padding-top: 40px; }
.cta h2 { font-size: clamp(36px, 5vw, 68px); }
.cta p { color: var(--schiefer); margin-top: 14px; max-width: 32em; }
.cta .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Fußzeile ── */
.footer { background: var(--tief); color: #C3C9D5; padding: 80px 0 32px; position: relative; overflow: hidden; font-size: 16px; }
.footer a { color: #E9ECF2; text-decoration: none; }
.footer a:hover { color: var(--gold-hell); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.footer-logo { height: 44px; width: auto; margin-bottom: 20px; }
.footer-titel { font: 700 13px var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 16px; }
.footer-links, .footer-contact { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-legal { margin-top: 32px; font-size: 14px; color: #8D96A8; }
.footer-legal + .footer-legal { margin-top: 10px; }
.footer-bottom { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); display: flex; justify-content: space-between; gap: 16px; font: 500 14px var(--font-display); color: #8D96A8; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-easter-egg { position: absolute; right: -20px; bottom: -20px; width: 150px; height: 150px; opacity: .07; pointer-events: none; }
.footer-easter-egg svg { width: 100%; height: 100%; stroke: var(--gold-hell); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Kein Einblenden beim Scrollen: .reveal bleibt in diesem Design ohne Wirkung. */

/* ── Porträtstreifen zum Wischen: Touch-Geräte und schmale Bildschirme ── */
@media (hover: none), (max-width: 699px) {
  .streifen { grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; height: 460px; }
  .person { scroll-snap-align: start; }
  .person .mehr { opacity: 1; transform: none; }
  .person-info .zitat { max-height: none; opacity: 1; margin-top: 12px; font-size: 18px; }
  .person img { filter: none; }
  .person::after { background: linear-gradient(to top, rgba(15,26,46,.92) 0, rgba(15,26,46,.75) 38%, rgba(15,26,46,0) 70%); }
}

/* ── Mittlere und kleine Bildschirme ── */
@media (max-width: 1000px) {
  .kopf, .section-kopf, .ueber, .faq-raster, .zinsbrief-grid, .cta-inner, .hc-raster { grid-template-columns: 1fr; gap: 24px; }
  .hc-intro { position: static; }
  .streifen { height: 480px; }
  .person-info { left: 12px; right: 12px; bottom: 14px; }
  .person-info .zitat { font-size: 18px; }
  .leistungen { grid-template-columns: 1fr; }
  .ort-zeile { grid-template-columns: 80px 1fr; gap: 8px 20px; }
  .ort-zeile .gesichter { grid-row: span 3; align-self: start; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .akt-teaser { grid-template-columns: 1fr; gap: 16px; }
}
.zinsbrief-grid > *, .leistungen > *, .hc-raster > *, .kopf > *, .faq-raster > * { min-width: 0; }
@media (max-width: 600px) {
  :root { --rand: 16px; }
  h1, h2, h3, .leistung h3 { hyphens: auto; overflow-wrap: break-word; }
  body { font-size: 17px; }
  .section, .cta { padding: 72px 0; }
  .navbar-logo { height: 32px; }
  .streifen { grid-template-columns: repeat(5, 72%); height: 420px; }
  .leistung { padding: 32px 22px; }
  .ort-zeile { grid-template-columns: 1fr; }
  .ort-zeile .gesichter { grid-row: auto; }
  .ort-zeile .gesichter img { width: 52px; height: 52px; }
  .ablauf { grid-template-columns: 1fr; }
  .fakten { gap: 20px 32px; }
  .fakten b { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  .zinsbrief-form { padding: 22px; }
  .google-box { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .person img, .person-info .mehr, .person-info .zitat, .streifen { transition: none; }
}