/* ==========================================================================
   Lukas John — Finanzplanung
   Design an der Bonnfinanz-Markenwelt ausgerichtet:
   tiefes Blau (#2C517F) · helles Teal (#B4D6D4) · zarter Teal-Ton (#ECF5F4)
   auf Weiß, mit ruhiger, klarer Sans-Typografie.
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN — lokal eingebunden (DSGVO: keine Verbindung zu Google-Servern)
   --------------------------------------------------------------------------
   ANLEITUNG (einmalig):
   1. Auf https://gwfh.mranftl.com die Schriften "Open Sans" und "Noto Serif"
      wählen, Zeichensatz "latin", Stile 400/500/600/700, Format woff2.
   2. Die heruntergeladenen .woff2-Dateien in einen Unterordner "fonts"
      neben dieser styles.css legen.
   3. Dateien exakt so umbenennen wie unten angegeben.
   Solange die Dateien fehlen, greifen automatisch die System-Schriften
   (die Seite bleibt funktionsfähig, sieht nur anders aus).
   ========================================================================== */
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/open-sans-400.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/open-sans-500.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/open-sans-600.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/open-sans-700.woff2') format('woff2'); }
@font-face{ font-family:'Noto Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/noto-serif-400.woff2') format('woff2'); }
@font-face{ font-family:'Noto Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/noto-serif-600.woff2') format('woff2'); }
@font-face{ font-family:'Noto Serif'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/noto-serif-700.woff2') format('woff2'); }

:root{
  --blue:        #2C517F;
  --blue-dark:   #223F63;
  --blue-900:    #1B3350;
  --teal:        #B4D6D4;
  --teal-mid:    #55759A;
  --teal-tint:   #ECF5F4;
  --ink:         #1E2A38;
  --text:        #4C5866;
  --muted:       #646F7A;   /* 5,1:1 auf Weiß — WCAG AA auch für Kleintext */
  --white:       #FFFFFF;
  --surface:     #F7F9FB;
  --gold-text:   #8A6620;   /* Gold nur als Fläche/Deko lesbar (2,5:1) — für Text diese dunklere Variante (5,3:1) */
  --line:        rgba(44,81,127,0.14);
  --line-soft:   rgba(44,81,127,0.09);

  --display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1160px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 12px;
  --shadow-sm: 0 4px 14px -8px rgba(27,51,80,0.30);
  --shadow: 0 24px 50px -30px rgba(27,51,80,0.45);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
body{
  margin:0;
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Notbremse für lange Komposita im Fließtext ("Versicherungsombudsmann",
     "Verbraucherstreitbeilegung"). Greift nur, wenn ein Wort sonst gar nicht
     passt, und ändert am normalen Umbruch nichts. Ohne das lief impressum.html
     bei 320 px seitlich über. Bewusst ohne hyphens: Fließtext soll nicht
     durchgehend getrennt werden, nur Überschriften (siehe h1-h4). */
  overflow-wrap: break-word;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }

h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--blue);
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.004em;
  font-weight: 700;
  text-wrap: balance;   /* kein einzelnes Wort in der letzten Zeile; ältere Browser ignorieren das */
  /* Lange deutsche Komposita ("Datenschutzerklärung", "Verbraucherstreitbeilegung",
     "empfehlenswert") passen bei 320 px nicht in eine Zeile und schoben die Seite
     seitlich auf: sechs von elf Seiten liefen über, datenschutz.html um 131 px.
     overflow-wrap ist die Notbremse und greift nur, wenn ein Wort sonst gar nicht
     passt. Gefunden am 18.07.2026.

     ACHTUNG, hier NICHT `hyphens: auto` ergänzen: Das wirkt bei jeder Breite und
     trennt zusammen mit `text-wrap: balance` auch dort, wo reichlich Platz ist.
     Auf finanzierung.html stand dann auf dem Desktop „Ihre Baufinanzie-rung".
     Die Trennung steht deshalb weiter unten in einer Media Query für schmale
     Geräte, wo sie tatsächlich gebraucht wird. */
  overflow-wrap: break-word;
}
h1{ font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.25rem; font-weight: 600; }
h4{ font-size: 1.02rem; font-weight: 600; }
em{ font-style: normal; color: var(--teal-mid); }
p{ margin: 0 0 1em; max-width: 62ch; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
main [id]{ scroll-margin-top: 92px; }
.section{ padding: clamp(56px, 8vw, 108px) 0; }
.section--tight{ padding: clamp(40px, 6vw, 72px) 0; }
.section--tint{ background: var(--teal-tint); }
.section--surface{ background: var(--surface); }
.section--dark{ background: var(--blue); color: rgba(255,255,255,0.86); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }
.section--dark p{ color: rgba(255,255,255,0.82); }
.section--dark em{ color: var(--teal); }
.section--dark .eyebrow{ color: var(--teal); }
.section--dark .eyebrow::before{ background: var(--teal); }

.eyebrow{
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-mid);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background: var(--teal-mid); display:inline-block; border-radius:2px;
}
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.lead{ font-size: 1.15rem; color: var(--text); max-width: 60ch; }
.section--dark .lead{ color: rgba(255,255,255,0.9); }

/* ---------- Layout helpers ---------- */
.grid{ display:grid; gap: 28px; }
.grid--2{ grid-template-columns: repeat(2,1fr); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid--3,.grid--4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns: 1fr; } }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:60;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{
  font-family: var(--display); font-weight:700; font-size:1.28rem;
  text-decoration:none; color: var(--blue); display:flex; flex-direction:column; line-height:1.05;
}
.brand span{
  font-family: var(--body); font-size:0.62rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color: var(--teal-mid); margin-top:4px;
}
.nav{ display:flex; align-items:center; gap: clamp(18px,3vw,34px); }
.nav a{
  text-decoration:none; font-size:0.94rem; font-weight:500; color: var(--ink);
  position:relative; padding:6px 0;
}
.nav a.active{ color: var(--blue); font-weight:600; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--blue);
  transition: width .25s ease;
}
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav .btn{ padding:10px 20px; }
.nav a.btn::after{ display:none; }
.nav-toggle{ display:none; }

/* ---------- Dropdown „Leistungen" ---------- */
.nav-drop{ position: relative; }
.nav-drop-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:6px 0;
  font-family: var(--body); font-size:0.94rem; font-weight:500; color: var(--ink);
  position:relative;
}
.nav-drop-btn::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--blue);
  transition: width .25s ease;
}
.nav-drop:hover .nav-drop-btn::after,
.nav-drop.open .nav-drop-btn::after{ width:100%; }
.nav-chev{ width:14px; height:14px; flex:none; transition: transform .25s ease; }
.nav-drop:hover .nav-chev,
.nav-drop.open .nav-chev{ transform: rotate(180deg); }

.nav-drop-menu{
  /* Nicht mittig unter dem Button ausrichten (left:50% + translate(-50%)):
     In schmalen Fenstern wanderte die linke Kante aus dem Bild und wurde von
     html{overflow-x:clip} abgeschnitten. Jetzt an der linken Buttonkante
     verankert und zusätzlich auf die Fensterbreite begrenzt.               */
  position:absolute; top: calc(100% + 14px); left:0; transform: translateY(8px);
  width: 340px; max-width: calc(100vw - 32px); padding: 10px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(44,81,127,0.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav-drop-menu::before{                 /* unsichtbare Brücke, damit der Hover nicht abreißt */
  content:""; position:absolute; left:0; right:0; top:-16px; height:16px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0);
}
.nav-drop-menu a{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 12px; border-radius:10px; font-size:0.9rem; line-height:1.35;
  transition: background .18s ease;
}
.nav-drop-menu a::after{ display:none; }
.nav-drop-menu a:hover{ background: var(--teal-tint); }
.nav-drop-menu a strong{ display:block; color: var(--blue); font-weight:600; }
.nav-drop-menu a em{ display:block; font-style:normal; font-size:0.8rem; color: var(--muted); margin-top:2px; }
.nd-num{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:7px; background: var(--blue); color:#fff;
  font-size:0.68rem; font-weight:700; letter-spacing:0.04em;
}
.nav-drop-menu a:hover .nd-num{ background: var(--gold); color: var(--blue-900); }
.nav-drop-all{
  font-weight:600; color: var(--blue) !important;
  border-bottom:1px solid var(--line-soft); border-radius:10px 10px 0 0; margin-bottom:4px;
}

@media (max-width: 820px){
  .nav{
    position: fixed; inset:78px 0 0 0; background: var(--white);
    flex-direction: column; justify-content:flex-start; align-items:flex-start;
    padding: 28px var(--pad); gap:20px; transform: translateX(100%); transition: transform .3s ease;
    border-top:1px solid var(--line-soft);
  }
  .nav.open{ transform: translateX(0); visibility: visible; }
  .nav{ visibility: hidden; transition: transform .3s ease, visibility .3s ease; }
  .nav a{ font-size:1.15rem; }

  /* Dropdown im mobilen Menü: aufgeklappt als Liste, kein Overlay */
  .nav-drop{ width:100%; }
  .nav-drop-btn{ font-size:1.15rem; pointer-events:none; }
  .nav-chev{ display:none; }
  .nav-drop-menu{
    position:static; transform:none; width:100%; padding:6px 0 0;
    background:none; border:0; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav-drop-menu::before{ display:none; }
  .nav-drop-menu a{ padding:10px 0 10px 12px; font-size:0.95rem; border-left:2px solid var(--line); border-radius:0; }
  .nav-drop-menu a:hover{ background:none; }
  .nav-drop-all{ border-bottom:0; margin-bottom:0; }

  .nav-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:none; border:none; cursor:pointer; padding:10px;
    min-width:44px; min-height:44px;
  }
  .nav-toggle span{ width:24px; height:2px; background: var(--blue); display:block; border-radius:2px; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family: var(--body); font-weight:600; font-size:0.95rem;
  padding: 14px 28px; border-radius: 999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition: all .2s ease;
}
.btn svg{ width:17px; height:17px; }
.btn--primary{ background: var(--blue); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--blue-dark); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--blue); color: var(--blue); }
.btn--ghost:hover{ background: var(--blue); color:#fff; }
.btn--light{ background:#fff; color: var(--blue); }
.btn--light:hover{ background: var(--teal-tint); transform: translateY(-2px); }
.section--dark .btn--ghost{ border-color: rgba(255,255,255,0.6); color:#fff; }
.section--dark .btn--ghost:hover{ background:#fff; color: var(--blue); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 1.7em; }
.center .btn-row{ justify-content:center; }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(52px,8vw,92px) 0 clamp(44px,6vw,76px);
  background:
    radial-gradient(circle at 88% 8%, rgba(180,214,212,0.35), transparent 42%),
    linear-gradient(180deg, var(--white), var(--teal-tint));
}
.hero-grid{ display:grid; grid-template-columns: 1.08fr 0.92fr; gap:52px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.hero h1{ max-width: 15ch; }
.hero .lead{ max-width: 48ch; }

.portrait{
  aspect-ratio: 4/5; background: var(--teal-tint);
  border:1px solid var(--line); border-radius: var(--radius);
  position:relative; overflow:hidden; box-shadow: var(--shadow);
}
.portrait svg{ position:absolute; inset:0; width:100%; height:100%; }
.portrait-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.portrait .ph-note{
  position:absolute; left:16px; bottom:14px; font-size:0.72rem; color: var(--blue);
  background: rgba(255,255,255,0.8); padding:5px 10px; border-radius:6px;
}

/* ---------- Trust bar ---------- */
.trust-bar{
  border-top:1px solid var(--line-soft);
  margin-top: 34px; padding-top: 26px;
  display:flex; flex-wrap:wrap; gap: 14px 26px; align-items:center;
}
.trust-item{ display:flex; align-items:center; gap:9px; font-size:0.86rem; font-weight:500; color: var(--ink); }
.trust-item svg{ width:20px; height:20px; color: var(--teal-mid); flex:none; }
.rating{ display:flex; align-items:center; gap:8px; font-weight:600; color: var(--ink); font-size:0.9rem; }
.stars{ color:#E8B54B; letter-spacing:1px; }

/* ---------- Principle / check list ---------- */
.principle{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 28px; transition: transform .2s ease, box-shadow .25s ease;
}
.principle:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.principle .ico{
  width:46px; height:46px; border-radius:10px; background: var(--teal-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.principle .ico svg{ width:23px; height:23px; color: var(--blue); }
.principle h3{ margin-bottom:8px; }
.principle p{ margin:0; color: var(--muted); font-size:0.97rem; }
.section--dark .principle{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.section--dark .principle .ico{ background: rgba(255,255,255,0.10); }
.section--dark .principle .ico svg{ color: var(--teal); }
.section--dark .principle p{ color: rgba(255,255,255,0.78); }

/* ---------- Compare (Problem vs. Lösung) ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px; }
@media (max-width: 780px){ .compare{ grid-template-columns:1fr; } }
/* Dreier-Vergleich: Hausbank · Portal · ich */
.compare--3{ grid-template-columns: 1fr 1fr 1.12fr; gap:20px; }
@media (max-width: 980px){ .compare--3{ grid-template-columns:1fr; } }
.compare-col .sub{
  display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--muted); margin-bottom:6px;
}
.compare-col.solution .sub{ color: var(--teal); }
.compare--3 .compare-col{ padding: 28px 24px; }
.compare--3 .compare-list li{ font-size:0.93rem; }
.compare-col{ border-radius: var(--radius); padding: 32px 30px; }
.compare-col h3{ font-size:1.15rem; margin-bottom:18px; }
.compare-col.problem{ background:#fff; border:1px solid var(--line); }
.compare-col.solution{ background: var(--blue); color:#fff; }
.compare-col.solution h3{ color:#fff; }
.compare-list{ list-style:none; margin:0; padding:0; }
.compare-list li{ display:flex; gap:12px; padding:11px 0; font-size:0.96rem; border-bottom:1px solid var(--line-soft); }
.compare-col.solution .compare-list li{ border-bottom-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); }
.compare-list li:last-child{ border-bottom:none; }
.compare-list .mk{ flex:none; width:20px; height:20px; margin-top:2px; }
.compare-col.problem .mk{ color:#C2795F; }
.compare-col.solution .mk{ color: var(--teal); }

/* ---------- Service cards ---------- */
.service-card{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--blue);
  border-radius: var(--radius); padding: 30px 28px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card .num{
  font-family: var(--display); font-weight:700; font-size:0.86rem; color: var(--teal-mid);
  letter-spacing:0.08em; margin-bottom:10px;
}
.service-card h3{ margin-bottom:10px; }
.service-card ul{ margin:14px 0 0; padding-left:0; list-style:none; }
.service-card li{ position:relative; padding:6px 0 6px 24px; font-size:0.95rem; color: var(--text); }
.service-card li::before{
  content:""; position:absolute; left:0; top:12px; width:9px; height:9px; border-radius:50%;
  background: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint);
}

/* ---------- Steps (Ablauf) ---------- */
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap:26px; margin-top:44px; }
@media (max-width: 900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; }
.step .n{
  width:44px; height:44px; border-radius:50%; background: var(--teal-tint); color: var(--blue);
  font-family: var(--display); font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; font-size:1.05rem;
}
.section--dark .step .n{ background: rgba(255,255,255,0.12); color:#fff; }
.step h3{ font-size:1.08rem; margin-bottom:6px; }
.step p{ font-size:0.94rem; color: var(--muted); margin:0; }
.section--dark .step p{ color: rgba(255,255,255,0.78); }

/* ---------- Testimonials ---------- */
.quote-card{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: 28px 26px; display:flex; flex-direction:column; gap:14px;
}
.quote-card .stars{ font-size:1rem; }
.quote-card p{ margin:0; color: var(--ink); font-size:1rem; line-height:1.6; }
.quote-card cite{
  font-style:normal; font-weight:600; font-size:0.9rem; color: var(--blue);
  display:flex; align-items:center; gap:8px;
}
.quote-card cite small{ font-weight:400; color: var(--muted); }
.section--tint .quote-card{ border-color: var(--line-soft); box-shadow: var(--shadow-sm); }

/* ---------- FAQ ---------- */
.faq{ max-width: 820px; margin: 40px auto 0; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding: 20px 0; font-family: var(--display);
  font-weight:600; font-size:1.05rem; color: var(--blue); display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color: var(--teal-mid); font-weight:400; font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 20px; color: var(--text); }

/* ---------- Info lines / Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--blue); margin-bottom:7px;
}
.field input, .field textarea{
  width:100%; border:1px solid var(--line); background:#fff; padding:13px 14px;
  font-family: var(--body); font-size:0.98rem; color: var(--ink); border-radius:8px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--teal-mid); outline-offset:1px; border-color: var(--teal-mid); }
.info-line{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.info-line .k{ font-size:0.76rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color: var(--teal-mid); min-width:120px; }
.info-line a{ color: var(--blue); text-decoration:none; }
.info-line a:hover{ text-decoration:underline; }
.map-frame{
  border:1px solid var(--line); border-radius: var(--radius); aspect-ratio:16/10; background: var(--teal-tint);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; margin-top:26px;
}
.socials{ display:flex; gap:12px; margin-top:20px; }
.socials a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); color: var(--blue);
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition: all .2s ease;
}
.socials a:hover{ background: var(--blue); color:#fff; border-color: var(--blue); }
.socials svg{ width:19px; height:19px; }

/* ---------- Breadcrumb (kompakt im Hero) ---------- */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem;
  color: var(--muted); margin-bottom:18px; }
.breadcrumb a{ display:inline-flex; align-items:center; gap:5px; color: var(--muted);
  text-decoration:none; transition: color .18s ease; }
.breadcrumb a:hover{ color: var(--blue); }
.breadcrumb a svg{ width:14px; height:14px; flex:none; }
.breadcrumb .sep{ color: var(--line); }
.breadcrumb .current{ color: var(--blue); font-weight:600; }

/* ---------- Page hero (subpages) ---------- */
.page-hero{ padding: clamp(48px,7vw,88px) 0 clamp(20px,3vw,32px); background: linear-gradient(180deg,#fff,var(--teal-tint)); }
.page-hero h1{ max-width: 20ch; }

/* ---------- Portrait block on subpages ---------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Qualification badges ---------- */
.quals{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.quals li{ display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; color: var(--ink); }
.quals svg{ width:20px; height:20px; color: var(--teal-mid); flex:none; margin-top:3px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--blue-900); color: rgba(255,255,255,0.75); padding: 56px 0 28px; }
.site-footer a{ text-decoration:none; color: rgba(255,255,255,0.75); }
.site-footer a:hover{ color: var(--teal); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:36px; margin-bottom:34px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-grid h4{ color:#fff; font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
.footer-grid p{ font-size:0.93rem; margin:0 0 8px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.14); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.8rem; color: rgba(255,255,255,0.55);
}
.footer-bottom a{ color: rgba(255,255,255,0.55); }

/* ---------- Interaktiver Finanz-Check ---------- */
.check-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:44px; align-items:start; margin-top:40px; }
@media (max-width: 900px){ .check-grid{ grid-template-columns:1fr; gap:28px; } }
.check-chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  font-family: var(--body); font-size:0.95rem; font-weight:500; color: var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:12px 20px;
  cursor:pointer; transition: all .18s ease; display:inline-flex; align-items:center; gap:9px;
}
.chip:hover{ border-color: var(--teal-mid); transform: translateY(-1px); }
.chip[aria-pressed="true"]{ background: var(--blue); color:#fff; border-color: var(--blue); box-shadow: var(--shadow-sm); }
.chip svg{ width:18px; height:18px; flex:none; }

.check-panel{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: 34px 32px; box-shadow: var(--shadow); min-height: 260px;
}
.check-panel .ph-empty{ color: var(--muted); }
.check-sub{ font-size:0.8rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--teal-mid); margin:18px 0 8px; }
.check-points{ list-style:none; margin:0 0 4px; padding:0; }
.check-points li{ position:relative; padding:6px 0 6px 26px; font-size:0.97rem; color: var(--text); }
.check-points li::before{ content:"✓"; position:absolute; left:0; top:6px; color: var(--teal-mid); font-weight:700; }
.check-panel h3{ margin-bottom:10px; }
.check-panel .p-lead{ color: var(--text); }
.check-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.check-tag{
  font-size:0.86rem; font-weight:600; color: var(--blue); background: var(--teal-tint);
  border-radius:999px; padding:7px 15px; text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  transition: all .18s ease;
}
.check-tag:hover{ background: var(--teal); }
.check-tag svg{ width:14px; height:14px; }
.check-panel.is-active{ animation: fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- Warum / persönliche Sektion ---------- */
.why-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:52px; align-items:center; }
@media (max-width: 900px){ .why-grid{ grid-template-columns:1fr; gap:36px; } }
.why-quote{
  font-family: var(--display); font-weight:600; font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.3; color: var(--blue); letter-spacing:-0.01em; margin:0 0 20px; max-width: 26ch;
}
.why-quote::before{ content:"„"; color: var(--teal-mid); }
.why-quote::after{ content:"\201C"; }
.why-sign{ font-weight:600; color: var(--ink); }
.why-sign small{ display:block; font-weight:400; color: var(--muted); font-size:0.9rem; margin-top:2px; }
.ph-fill{
  border:1.5px dashed var(--teal-mid); background: var(--teal-tint);
  border-radius:10px; padding:14px 16px; color: var(--blue); font-size:0.9rem; margin-top:8px;
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal{ max-width: 820px; }
.legal h2{ font-size: 1.3rem; margin: 40px 0 12px; }
.legal h2:first-of-type{ margin-top: 8px; }
.legal p, .legal li{ color: var(--text); }
.legal a{ color: var(--blue); }
.legal ul{ padding-left: 20px; }
.legal address{ font-style: normal; line-height: 1.8; }
.legal-table{ width:100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 0.94rem; }
.legal-table th, .legal-table td{ text-align:left; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; }
.legal-table th{ background: var(--teal-tint); color: var(--blue); font-weight: 600; }
.legal-table td .reg{ font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 640px){
  .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td{ display:block; }
  .legal-table th{ margin-top: 12px; }
}
.legal .todo{
  border:1.5px dashed var(--teal-mid); background: var(--teal-tint); color: var(--blue);
  border-radius:10px; padding:14px 16px; font-size:0.92rem; margin: 12px 0;
}
.legal .stand{ color: var(--muted); font-size:0.9rem; margin-top: 36px; }

/* ---------- Google-Bewertungen (Slider) ---------- */
.reviews-head{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.reviews-head .g{ width:22px; height:22px; }
.reviews-head .stars{ font-size:1.05rem; }
.reviews{ position:relative; max-width:760px; margin:30px auto 0; }
.review{
  display:none; background:#fff; border:1px solid var(--line-soft); border-radius:12px;
  padding:32px 30px; box-shadow: var(--shadow-sm); text-align:center;
}
.review.is-active{ display:block; animation: reviewIn .55s ease; }
@keyframes reviewIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
.review .stars{ font-size:1.05rem; }
.review p{ font-family: var(--display); font-style: italic; font-size:1.12rem; line-height:1.6; color: var(--ink); margin:14px auto 16px; max-width:60ch; }
.review cite{ font-style:normal; font-weight:600; color: var(--blue); font-size:0.95rem; }
.review cite small{ display:block; font-weight:400; color: var(--muted); font-size:0.82rem; margin-top:2px; }
.review-dots{ display:flex; gap:0; justify-content:center; margin-top:14px; }
.review-dot{
  width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0;
  display:grid; place-items:center;
}
.review-dot::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--line);
  transition: background .2s ease, transform .2s ease;
}
.review-dot:hover::before{ transform: scale(1.25); }
.review-dot.active::before{ background: var(--blue); }
@media (prefers-reduced-motion: reduce){ .review.is-active{ animation:none; } }

/* ---------- Kennzahlen-Band ---------- */
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 34px; text-align: center; }
@media (max-width: 780px){ .stats-grid{ grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
.stat{
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-width: 0;                      /* verhindert Überlaufen langer Labels im Grid */
}
.stat-num{
  display: block; font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(2.3rem, 4.4vw, 3.1rem); color: #fff; font-variant-numeric: tabular-nums;
}
.stat-num .unit{ color: var(--teal); }
.stat-label{ display: block; margin-top: 12px; font-size: 0.96rem; color: rgba(255,255,255,0.82); }

/* ---------- Terminbuchung einbetten + Kontakt-Kacheln ---------- */
.booking-embed{
  margin-top: 36px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff; box-shadow: var(--shadow);
}
.booking-embed iframe{ width: 100%; height: 760px; border: 0; display: block; }
.booking-fallback{ font-size: 0.9rem; color: var(--muted); margin-top: 12px; }
.booking-fallback a{ color: var(--blue); font-weight: 600; text-decoration: none; }
.booking-fallback a:hover{ text-decoration: underline; }

/* Zwei-Klick-Einwilligung vor dem Laden des Bookings-iFrames */
.booking-consent{
  padding: 56px 24px; text-align: center; background: var(--teal-tint);
}
.booking-consent__ico{
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: #fff; color: var(--blue); border: 1px solid var(--line);
}
.booking-consent__ico svg{ width: 26px; height: 26px; }
.booking-consent h3{ margin: 0 0 10px; }
.booking-consent p{
  max-width: 520px; margin: 0 auto 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.6;
}
.booking-consent p a{ color: var(--blue); font-weight: 600; }
.booking-consent__alt{ margin: 18px auto 0 !important; font-size: 0.88rem; }
@media (max-width: 560px){
  .booking-consent{ padding: 40px 18px; }
}

.contact-tiles{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 780px){ .contact-tiles{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .contact-tiles{ grid-template-columns: 1fr; } }
.contact-tile{
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.contact-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }
.contact-tile .ico{
  width: 44px; height: 44px; border-radius: 10px; background: var(--teal-tint);
  display: flex; align-items: center; justify-content: center;
}
.contact-tile .ico svg{ width: 22px; height: 22px; color: var(--blue); }
.contact-tile .t-label{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--blue); }
.contact-tile .t-val{ font-size: 0.9rem; color: var(--muted); }

.contact-address{
  margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 24px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.contact-address p{ margin: 0; }

/* ---------- Schwebender Call-to-Action ---------- */
.floating-cta{
  position: fixed; right: clamp(14px,3vw,28px); bottom: clamp(14px,3vw,28px); z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  padding: 14px 22px; border-radius: 999px;
  box-shadow: 0 14px 32px -10px rgba(27,51,80,0.55);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.floating-cta:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(27,51,80,0.6); }
.floating-cta svg{ width: 18px; height: 18px; flex: none; }
@media (max-width: 520px){
  .floating-cta{ padding: 15px; right: 16px; bottom: 16px; }
  .floating-cta span{ display: none; }
}
@media print{ .floating-cta{ display: none; } }

/* ---------- Erweitertes Hover-Feedback ---------- */
.principle{ transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease; }
.principle .ico{ transition: background .25s ease, transform .25s ease; }
.principle .ico svg{ transition: color .25s ease; }
.principle:hover{ border-color: var(--teal); }
.principle:hover .ico{ background: var(--blue); transform: translateY(-3px); }
.principle:hover .ico svg{ color: #fff; }
.section--dark .principle:hover .ico{ background: var(--teal); }
.section--dark .principle:hover .ico svg{ color: var(--blue); }

.service-card{ transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease; }
.service-card:hover{ border-top-color: var(--teal-mid); }
.service-card:hover .num{ color: var(--blue); }
.service-card .num{ transition: color .25s ease; }
.service-card li::before{ transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover li::before{ transform: scale(1.25); }

.contact-tile .ico{ transition: background .25s ease, transform .25s ease; }
.contact-tile .ico svg{ transition: color .25s ease; }
.contact-tile:hover .ico{ background: var(--blue); transform: translateY(-3px); }
.contact-tile:hover .ico svg{ color: #fff; }

.step .n{ transition: background .25s ease, color .25s ease, transform .25s ease; }
.step:hover .n{ background: var(--teal); color: var(--blue); transform: translateY(-3px); }

.chip{ transition: all .2s ease, transform .18s ease; }
.chip:hover{ box-shadow: var(--shadow-sm); }
.check-tag{ transition: background .18s ease, transform .18s ease; }
.check-tag:hover{ transform: translateY(-2px); }

.quote-card, .review{ transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease; }
.review:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal); }

.info-line{ transition: background .2s ease; border-radius: 6px; }
.info-line:hover{ background: var(--teal-tint); }

.compare-col{ transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease; }
.compare-col.problem:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }
.compare-col.solution:hover{ transform: translateY(-4px); box-shadow: 0 26px 52px -22px rgba(27,51,80,0.65); }
.compare-list .mk{ transition: transform .2s ease; }
.compare-col:hover .mk{ transform: scale(1.18); }

.brand{ transition: opacity .2s ease; }
.brand:hover{ opacity: 0.8; }

/* ---------- Scroll-Animationen ---------- */
html.js :where(.hero-grid > div, .principle, .service-card, .quote-card, .step, .compare-col, .why-grid > div, .split > div, .faq details, .legal h2, .legal address, .legal .legal-table, .legal .todo, .legal .stand, .section > .wrap > .eyebrow, .section > .wrap > h2, .section > .wrap > .lead){
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,.7,.3,1), transform .7s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}
html.js :where(.hero-grid > div, .principle, .service-card, .quote-card, .step, .compare-col, .why-grid > div, .split > div, .faq details, .legal h2, .legal address, .legal .legal-table, .legal .todo, .legal .stand, .section > .wrap > .eyebrow, .section > .wrap > h2, .section > .wrap > .lead).in{
  opacity: 1;
  transform: none;
}

/* ---------- Warme Gold-Akzente ---------- */
:root{ --gold: #C2A15B; --gold-light: #D9BD86; }
.eyebrow::before{ background: var(--gold); }
.section--dark .eyebrow::before{ background: var(--gold-light); }
em{ color: var(--gold-text); }
.section--dark em{ color: var(--gold-light); }
.brand span{ color: var(--gold-text); }
.service-card .num{ color: var(--gold-text); }
.stat-num .unit{ color: var(--gold-light); }
.why-quote::before, .why-quote::after{ color: var(--gold); }
.reviews-head strong{ color: var(--gold-text); }
.hero{
  background:
    radial-gradient(circle at 88% 8%, rgba(180,214,212,0.35), transparent 42%),
    radial-gradient(circle at 4% 94%, rgba(194,161,91,0.16), transparent 40%),
    linear-gradient(180deg, var(--white), var(--teal-tint));
}
.btn--primary:hover{ box-shadow: 0 12px 26px -12px rgba(194,161,91,0.55); }

/* Header-CTA heller & warm hervorgehoben */
.site-header .nav .btn--primary{ background: var(--gold); color: var(--blue-900); border-color: var(--gold); box-shadow: 0 10px 22px -12px rgba(194,161,91,0.6); }
.site-header .nav .btn--primary:hover{ background: var(--gold-light); color: var(--blue-900); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(194,161,91,0.7); }

/* ==========================================================================
   GOLD-AKZENTE & KONTRAST — Erweiterung
   Wärmt die Seite auf und hebt die Abschnitte klarer voneinander ab.
   ========================================================================== */

/* Abschnittsflächen etwas deutlicher voneinander abheben */
:root{
  --surface:   #F1F5F9;
  --teal-tint: #E8F2F1;
}

/* Überschriften bekommen einen feinen goldenen Anstrich */
.section > .wrap > h2::after,
.section > .wrap > .center h2::after{ content:none; }
h2 em, h3 em{ color: var(--gold-text); }

/* Trust-Elemente */
.trust-item svg{ color: var(--gold); }
.quals svg{ color: var(--gold); }
.stars{ color: var(--gold-text); }

/* Karten: goldene Kante statt blauer */
.service-card{ border-top-color: var(--gold); }
.service-card:hover{ border-top-color: var(--blue); }
.card-more{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 0.95rem; font-weight: 600; color: var(--blue); text-decoration: none;
  transition: color .2s ease, gap .2s ease;
}
.card-more svg{ width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.card-more:hover{ color: var(--gold-text); gap: 12px; }
.card-more:hover svg{ transform: translateX(2px); }

/* Icons in Prinzip-Karten */
.principle:hover .ico{ background: var(--gold); }
.principle:hover .ico svg{ color: var(--blue-900); }
.section--dark .principle:hover .ico{ background: var(--gold-light); }
.section--dark .principle:hover .ico svg{ color: var(--blue-900); }

/* Ablauf-Schritte */
.step:hover .n{ background: var(--gold); color: var(--blue-900); }
.section--dark .step .n{ border: 1px solid rgba(194,161,91,0.45); }

/* FAQ-Plus in Gold */
.faq summary::after{ color: var(--gold); }
.faq summary:hover{ color: var(--blue-dark); }

/* Vergleich: die Lösungsspalte klar hervorheben */
.compare-col.solution{ border-top: 4px solid var(--gold); }
.compare-col.solution .mk{ color: var(--gold-light); }

/* Kontakt-Kacheln */
.contact-tile:hover{ border-color: var(--gold); }
.contact-tile:hover .ico{ background: var(--gold); }
.contact-tile:hover .ico svg{ color: var(--blue-900); }

/* Chips / interaktiver Check */
.chip[aria-pressed="true"]{ border-color: var(--gold); }
.check-tag:hover{ background: var(--gold-light); }

/* Kennzahlen-Band */
.stat-num{ color: var(--gold-light); }
.section--dark .stat-label{ color: rgba(255,255,255,0.86); }

/* Bewertungen */
.review cite{ color: var(--blue); }
.review-dot.active{ background: var(--gold); }

/* Buttons: Primär-Button mit goldenem Rand beim Hover */
.btn--primary:hover{ border-color: var(--gold); }
.btn--ghost:hover{ background: var(--blue); border-color: var(--blue); }

/* Footer-Akzent */
.site-footer{ border-top: 3px solid var(--gold); }
.site-footer a:hover{ color: var(--gold-light); }

/* ==========================================================================
   UTILITY-FARBEN (Bonnfinanz CI, Abschnitt 2.2 „Utility-Farben (Website)")
   Ausschließlich semantisch verwenden — nie dekorativ.
   Warning-Gelb ist bewusst durch das Marken-Gold ersetzt.
   ========================================================================== */
:root{
  --success:      #83D774;   /* CI Success */
  --success-ink:  #3F8A33;   /* dunkler, für Text/Druck auf Weiß */
  --error:        #EB2747;   /* CI Error */
  --error-ink:    #B02237;   /* dunkler, für Text/Druck auf Weiß */
  --info:         #6DA9B5;   /* CI Info */
  /* --gold / --gold-light dienen als Warnstufe (statt CI-Gelb) */
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto; }
  .check-panel.is-active{ animation:none; }
  html.js :where(.hero-grid > div, .principle, .service-card, .quote-card, .step, .compare-col, .why-grid > div, .split > div, .faq details, .legal h2, .legal address, .legal .legal-table, .legal .todo, .legal .stand, .section > .wrap > .eyebrow, .section > .wrap > h2, .section > .wrap > .lead){
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ==========================================================================
   ÜBERARBEITUNG 12.07.2026
   1. Mobiles Menü: Fix (backdrop-filter machte den Header zum Bezugsrahmen)
   2. Floating-CTA: blendet über dem Footer aus
   3. Gold als durchgängiges Motiv
   4. Mikro-Interaktionen (alle unter 200 ms)
   5. Neue Bausteine: Status-Hinweis, E-Book-Teaser, Erreichbarkeit
   Achtung: Neue Regeln immer HIER unten anhängen, nie mitten im Dokument
   ersetzen — Druckregeln stehen ganz am Ende.
   ========================================================================== */

/* --- 1. Mobiles Menü ------------------------------------------------------
   `backdrop-filter` auf .site-header erzeugt einen neuen Bezugsrahmen für
   position:fixed. Das mobile Menü (inset:78px 0 0 0) wurde dadurch am 78 px
   hohen Header ausgerichtet statt am Viewport: Höhe 0, Hintergrund unsichtbar,
   die Links standen frei über dem Seitentext. Unterhalb 820 px daher kein
   backdrop-filter — der Header ist dort ohnehin deckend weiß.                */
@media (max-width: 820px){
  .site-header{ backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); }
  .nav{
    height: 100dvh; height: 100vh;          /* Fallback für ältere Browser */
    overflow-y: auto; overscroll-behavior: contain; z-index: 70;
    box-shadow: -18px 0 40px -24px rgba(27,51,80,0.35);
  }
  /* Hintergrund sperren. overflow:hidden allein greift auf iOS Safari nicht —
     erst position:fixed hält die Seite wirklich still (main.js merkt sich die
     Scrollposition und stellt sie beim Schließen wieder her). Der Header muss
     dabei selbst fixiert werden, sonst schöbe ihn der fixierte Body samt
     Schließen-Button aus dem Bild.                                            */
  body.nav-open{ position: fixed; left:0; right:0; width:100%; overflow: hidden; }
  body.nav-open .site-header{ position: fixed; top:0; left:0; right:0; }
}

/* --- 2. Floating-CTA über dem Footer ausblenden ---------------------------
   Der Button lag sonst genau über „Impressum · Datenschutz". Impressum muss
   leicht erreichbar sein (§ 5 DDG) — der Button darf es nicht verdecken.     */
.floating-cta{ opacity: 1; transform: none; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease, visibility .18s ease; }
.floating-cta.is-hidden{ opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.site-footer .footer-bottom{ padding-right: 0; }

/* --- 3. Gold als Motiv ----------------------------------------------------- */
.chip[aria-pressed="true"]{
  background: var(--blue); color:#fff; border-color: var(--blue);
  box-shadow: inset 3px 0 0 var(--gold), var(--shadow-sm);
}
.chip[aria-pressed="true"] svg{ color: var(--gold-light); }
.chip:hover{ border-color: var(--gold); transform: translateY(-1px); }

.service-card{ transition: transform .18s ease, box-shadow .18s ease, border-top-color .18s ease; }
.service-card:hover{ border-top-color: var(--gold); }
.service-card:hover .num{ color: var(--gold); }

.faq summary::after{ color: var(--gold); transition: transform .18s ease, color .18s ease; }
.faq summary:hover{ color: var(--blue-900); }
.faq details[open] summary{ color: var(--blue-900); }
.faq details[open]{ border-bottom-color: var(--gold); }

.check-tag{ transition: border-color .18s ease, color .18s ease, background .18s ease; }
.check-tag:hover{ border-color: var(--gold); }

.compare-col.solution{ border-top: 3px solid var(--gold); }
.step .n{ transition: color .18s ease; }
.step:hover .n{ color: var(--gold-light); }
.contact-tile{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.contact-tile:hover{ border-color: var(--gold); }
.review.is-active{ border-top: 3px solid var(--gold); }

/* Goldener Trenner zwischen zwei gleichfarbigen Abschnitten */
.rule-gold{ width:48px; height:3px; background: var(--gold); border-radius:2px; margin: 0 auto; }

/* --- 4. Mikro-Interaktionen ----------------------------------------------- */
/* FAQ: weiches Aufklappen statt Sprung. `interpolate-size` wird von Browsern
   ohne Unterstützung schlicht ignoriert — dann klappt es wie bisher auf.      */
@supports (interpolate-size: allow-keywords){
  html{ interpolate-size: allow-keywords; }
  .faq details::details-content{
    block-size: 0; overflow: hidden;
    transition: block-size .19s ease, content-visibility .19s allow-discrete;
  }
  .faq details[open]::details-content{ block-size: auto; }
}
.faq details[open] summary::after{ transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- 5a. Status-Hinweis (Über mich) --------------------------------------- */
.status-note{
  margin-top: 22px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold); border-radius: 12px;
}
.status-note__head{
  display:flex; align-items:center; gap:9px; margin:0 0 8px;
  font-family: var(--display); font-weight:600; font-size:1rem; color: var(--blue);
}
.status-note__head svg{ width:18px; height:18px; flex:none; color: var(--gold); }
.status-note p{ margin:0; font-size:0.95rem; line-height:1.65; color: var(--text); }
.status-note a{ color: var(--blue); font-weight:600; }

/* --- 5b. E-Book-Teaser ----------------------------------------------------- */
.ebook-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-top:40px;
}
@media (max-width: 820px){ .ebook-grid{ grid-template-columns: 1fr; } }
.ebook-card{
  display:flex; gap:18px; align-items:stretch; text-decoration:none;
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius);
  padding:18px; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ebook-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.ebook-cover{
  flex:none; width:96px; border-radius:8px; overflow:hidden;
  background: var(--teal-tint); display:block;
}
.ebook-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.ebook-body{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.ebook-num{
  font-family: var(--display); font-weight:700; font-size:0.74rem;
  letter-spacing:0.06em; text-transform:uppercase; color: var(--gold-text);
}
.ebook-body strong{ font-family: var(--display); font-size:1.08rem; color: var(--blue); font-weight:600; }
.ebook-body em{ font-style:normal; font-size:0.9rem; line-height:1.5; color: var(--text); }
.ebook-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-size:0.88rem; font-weight:600; color: var(--blue);
  transition: gap .18s ease, color .18s ease;
}
.ebook-more svg{ width:15px; height:15px; flex:none; }
.ebook-card:hover .ebook-more{ gap:11px; color: var(--gold-text); }
.ebook-card--soon{
  background: transparent; border-style: dashed; border-color: var(--line);
  cursor: default; pointer-events: none;
}
.ebook-card--soon:hover{ transform:none; box-shadow:none; border-color: var(--line); }
.ebook-card--soon .ebook-num{ color: var(--muted); }
.ebook-card--soon .ebook-body strong{ color: var(--muted); }
.ebook-card--soon .ebook-body em{ color: var(--muted); }

/* --- 5c. Erreichbarkeit (Kontakt) ------------------------------------------ */
.hours{
  margin-top: 40px; padding: 24px 26px; background:#fff;
  border:1px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius: 12px; max-width: 520px;
}
.hours__rows{ display:block; }
.hours__head{
  margin:0 0 12px; font-family: var(--display); font-weight:600;
  font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color: var(--teal-mid);
}
.hours__row{
  display:flex; justify-content:space-between; gap:20px;
  padding:8px 0; border-bottom:1px solid var(--line-soft);
  font-size:0.95rem; color: var(--text);
}
.hours__row:last-child{ border-bottom:0; }
.hours__row span:last-child{ font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours__note{ margin:12px 0 0; font-size:0.87rem; color: var(--muted); }

/* --- 5d. Kennzahlen jetzt auf hellem Grund --------------------------------- */
.stats-grid{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px){ .stats-grid{ grid-template-columns: 1fr; gap: 26px; } }
.section:not(.section--dark) .stat-num{ color: var(--blue); }
.section:not(.section--dark) .stat-num .unit{ color: var(--gold); }
.section:not(.section--dark) .stat-label{ color: var(--muted); }
.stat{ position: relative; }
.stat::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; width:28px; height:2px; background: var(--gold); border-radius:2px;
}

/* --- Nachbesserung: Kontaktbereich, Über-mich-Bild, E-Book-Hinweis --------- */

/* Erreichbarkeit und Büro nebeneinander statt halbleerer Kasten */
.contact-bottom{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top:40px; align-items:stretch;
}
@media (max-width: 780px){ .contact-bottom{ grid-template-columns:1fr; } }
.hours{
  margin-top:0; max-width:none; height:100%;
  display:flex; flex-direction:column;
}
.hours__head{ display:flex; align-items:center; gap:9px; }
.hours__head svg{ width:16px; height:16px; flex:none; color: var(--gold); }
.hours__rows{ display:block; }
.hours__note{ margin-top:auto; padding-top:12px; }
.office__addr{ margin:0 0 4px; font-size:0.98rem; line-height:1.6; color: var(--text); }
.office__addr strong{ color: var(--ink); }
.office .btn{ align-self:flex-start; margin-top:16px; }
.office .hours__note{ margin-top:12px; padding-top:0; }

/* Über mich: Bild oben, Status-Hinweis direkt darunter — beides in der linken
   Spalte. Vorher schwebte das Foto mittig und ließ oben/unten Luft.          */
#ueber-mich .split{ align-items: start; }
.portrait-col{ display:flex; flex-direction:column; gap:20px; }
.portrait-col .portrait{ aspect-ratio: 4/5; }
.portrait-col .status-note{ margin-top:0; }
.portrait-col .status-note p{ font-size:0.92rem; }
.portrait-col .status-note p + p{ margin-top:10px; }

/* E-Book-Karte: Hinweis auf den Leitfaden */
.ebook-hint{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-size:0.82rem; color: var(--muted);
}
.ebook-hint svg{ width:14px; height:14px; flex:none; color: var(--gold); }

/* --- Scroll-Haptik ---------------------------------------------------------
   Bewusst zurückhaltend: drei Effekte, die man kaum bemerkt, die aber den
   Eindruck von Sorgfalt erzeugen. Bei prefers-reduced-motion alles aus.      */

/* Lesefortschritt: dünne Goldlinie direkt unter dem Header */
.read-progress{
  position: fixed; top: 78px; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 59; pointer-events: none;
}
@media (max-width: 820px){ .read-progress{ top: 78px; height: 2px; } }
@media print{ .read-progress{ display:none; } }

/* Über mich: Bild + Status-Kasten bleiben stehen, der Text läuft daneben durch */
@media (min-width: 901px){
  #ueber-mich .portrait-col{
    position: sticky; top: 100px; align-self: start;
  }
}

/* Hero: Porträt bewegt sich beim Scrollen minimal langsamer (JS setzt --par) */
.hero .portrait-img{ will-change: transform; }
@media (min-width: 901px){
  .hero .portrait-img{ transform: translateY(var(--par, 0px)) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .read-progress{ display: none; }
  #ueber-mich .portrait-col{ position: static; }
  .hero .portrait-img{ transform: none !important; }
}

/* ==========================================================================
   AVRG-RATGEBER (13.07.2026)
   ========================================================================== */


/* --- Ratgeber-Gruppe im Dropdown ------------------------------------------- */
.nav-drop-sep{
  display: flex; align-items: center; gap: 10px;
  margin: 8px 12px 4px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.nav-drop-sep span{
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.nd-num--gold{ background: var(--gold) !important; color: var(--blue-900) !important; }
.nav-drop-menu a.nav-drop-ratgeber:hover .nd-num--gold{ background: var(--blue) !important; color: #fff !important; }
.nd-new{
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px; background: var(--gold); color: var(--blue-900);
  font-family: var(--body); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px;
}

/* --- Floating-CTA: verdeckte keine Inhalte mehr ----------------------------
   Gemeldet 13.07.: Der Button schob sich zwischen ~780 und 1000 px über die
   rechte Spalte der Vergleichstabellen und auf dem Handy über die Werte der
   Rechner-Regler. Lösung: Der Seiteninhalt bekommt unten rechts einen
   Sicherheitsabstand, und auf schmalen Schirmen schrumpft der Button auf das
   Icon (das tat er bisher erst unter 520 px).                                */
@media (max-width: 1000px){
  main{ padding-bottom: 84px; }
  .floating-cta{ padding: 14px; }
  .floating-cta span{ display: none; }
}

/* ==========================================================================
   FOOTER — Neugestaltung 13.07.2026
   Drei Spalten: Marke · Themen · Kontakt. Goldene Haarlinie oben als
   Wiedererkennung, Wortmarke mit LJ-Signet, Qualifikationen als Badges.
   ========================================================================== */
.site-footer{
  background: var(--blue-900); color: rgba(255,255,255,0.72);
  padding: 0 0 26px; position: relative;
  border-top: 3px solid var(--gold);
}
.site-footer a{ color: rgba(255,255,255,0.78); text-decoration: none; transition: color .18s ease; }
.site-footer a:hover{ color: var(--gold-light); }
.footer-grid{
  display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 48px;
  padding: 56px 0 44px;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px){ .footer-grid{ grid-template-columns: 1fr; gap: 34px; padding: 44px 0 32px; } }

/* Wortmarke */
.f-logo{ display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.f-logo__mark{
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--gold); color: var(--blue-900);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
}
.f-logo__txt{
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: #fff;
}
.f-logo__txt small{
  font-family: var(--body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal); margin-top: 5px;
}
.f-logo:hover .f-logo__txt{ color: #fff; }
.f-brand p{ font-size: 0.92rem; line-height: 1.6; max-width: 34ch; margin: 0 0 18px; }

/* Qualifikations-Badges */
.f-badges{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.f-badges li{
  display: flex; align-items: center; gap: 9px;
  font-size: 0.84rem; color: rgba(255,255,255,0.66);
}
.f-badges svg{ width: 15px; height: 15px; flex: none; color: var(--gold); }
.f-stars{ color: var(--gold); letter-spacing: 1px; font-size: 0.8rem; }

/* Spaltenüberschriften */
.site-footer h4{
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 16px;
}

/* Themen */
.f-links ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.f-links li a{ font-size: 0.92rem; display: inline-flex; align-items: center; }
.f-links li a::before{
  content: ""; width: 0; height: 1.5px; background: var(--gold);
  margin-right: 0; transition: width .18s ease, margin-right .18s ease;
}
.f-links li a:hover::before{ width: 12px; margin-right: 8px; }
.f-new::after{
  content: "Neu"; margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  background: var(--gold); color: var(--blue-900);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}

/* Kontakt */
.f-contact{ min-width: 0; }
.f-addr, .f-reach{ font-size: 0.92rem; line-height: 1.65; margin: 0 0 12px; }
.f-hours{ font-size: 0.82rem; color: rgba(255,255,255,0.55); margin: 0 0 18px; }
.f-cta{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--gold); color: var(--blue-900) !important;
  font-size: 0.88rem; font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.f-cta svg{ width: 16px; height: 16px; }
.f-cta:hover{ background: var(--gold-light); color: var(--blue-900) !important; transform: translateY(-2px); }

/* Fußzeile */
.footer-bottom{
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.footer-bottom a{ color: rgba(255,255,255,0.62); }

/* --- Aktuell-Band zwischen Hero und Finanz-Check ---------------------------
   Vorher lief es quer durch das Porträt — es verdeckte das Bild und war zu
   klein. Jetzt ein eigener, voller Abschnitt an der Naht zwischen Hero und
   Finanz-Check: sichtbar, ohne den Lesefluss zu unterbrechen.              */
.newsband{
  background: var(--blue-900); color: rgba(255,255,255,0.80);
  border-top: 3px solid var(--gold);
  padding: clamp(30px, 4vw, 44px) 0;
}
.newsband__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
@media (max-width: 860px){
  .newsband__inner{ flex-direction: column; align-items: flex-start; gap: 24px; }
}
.newsband__main{ min-width: 0; }
.newsband__tag{
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border-radius: 999px; background: var(--gold); color: var(--blue-900);
  font-family: var(--body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.newsband__title{
  color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin: 0 0 10px; max-width: 24ch;
}
.newsband__text{
  margin: 0; font-size: 0.98rem; line-height: 1.6;
  color: rgba(255,255,255,0.76); max-width: 62ch;
}
.newsband__btn{
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--gold); color: var(--blue-900);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(194,161,91,0.75);
  transition: background .18s ease, transform .18s ease, gap .18s ease;
}
.newsband__btn svg{ width: 17px; height: 17px; }
.newsband__btn:hover{ background: var(--gold-light); transform: translateY(-2px); gap: 14px; }
@media print{ .newsband{ display: none; } }

/* --- Baustein-Karten: „Mehr erfahren" an den Kartenboden ---------------------
   Die Karten einer Reihe werden auf gleiche Höhe gezogen (Grid-Stretch). Bei
   der kürzeren Karte hing der Link mittendrin und darunter blieb Leerraum.
   Jetzt ist die Karte eine Flex-Spalte und der Link wird nach unten gedrückt —
   gleiche Höhe bleibt, der Leerraum verschwindet.                            */
.service-card{ display: flex; flex-direction: column; }
.service-card ul{ margin-bottom: 22px; }
.service-card .card-more{ margin-top: auto; padding-top: 4px; }

/* --- Vergleich: neutraler Strich statt rotem X -----------------------------
   Das rote X wertete das Vergleichsportal ab und traf damit auch Besucher,
   die eines genutzt haben. Jetzt beschreibt die linke Spalte nur — der grüne
   Haken rechts liefert den Kontrast.                                        */
.compare-col.problem .mk{ color: var(--muted); }
.compare-col.solution .mk{ color: var(--gold-light); }

/* --- Buchungs-Einwilligung: Pflichthinweis als leise Fußnote --------------- */
.booking-consent h3{ margin-bottom: 8px; }
.booking-consent__alt{
  font-size: 0.78rem !important; color: var(--muted); line-height: 1.5;
  max-width: 46ch; margin: 14px auto 0 !important;
}
.booking-consent__alt a{ color: var(--muted); text-decoration: underline; }
.booking-consent__alt a:hover{ color: var(--blue); }

/* --- Silbentrennung nur auf schmalen Geraeten ------------------------------
   Deutsche Komposita ("Datenschutzerklaerung", "empfehlenswert") passen unter
   rund 400 px nicht in eine Zeile. overflow-wrap oben verhindert zwar den
   Ueberlauf, bricht das Wort aber ohne Trennstrich mitten durch. Hier unten
   kommt der Trennstrich dazu; hyphens greift, weil <html lang="de"> gesetzt ist.

   Warum nur hier und nicht global: Global trennt der Browser zusammen mit
   `text-wrap: balance` auch auf dem Desktop, wo Platz ist. Auf finanzierung.html
   stand dann "Ihre Baufinanzie-rung" in der Hero-Ueberschrift (18.07.2026). */
@media (max-width: 400px){
  /* Silbentrennung für die ganze Seite, nicht nur für Überschriften.

     Der Grund ist nicht Schönheit, sondern Layout: `overflow-wrap: break-word`
     weiter oben erlaubt zwar den Umbruch, **verkleinert aber die Mindestbreite
     eines Elements nicht**. Genau die treibt aber Flex- und Grid-Spalten:
     - `.faq summary` ist ein Flex-Container; „Berufsunfähigkeitsversicherung?"
       hielt ihn auf voller Wortbreite (absicherung.html, 21 px Überlauf).
     - `.grid` nutzt `1fr` mit `min-width:auto`; „Bauherrenhaftpflichtversicherung."
       dehnte die Spalte auf 307 px bei 265 px Platz (finanzierung.html, 22 px).
     Silbentrennung senkt die Mindestbreite und löst beides auf einmal, statt
     jede betroffene Klasse einzeln nachzubessern.

     Nur bis 400 px: Global trennt der Browser zusammen mit `text-wrap: balance`
     auch auf dem Desktop, wo Platz ist. Auf finanzierung.html stand dann
     „Ihre Baufinanzie-rung" in der Hero-Überschrift (18.07.2026). */
  body{ hyphens: auto; }
}

/* --- Druckregeln: stehen bewusst als letzter Block der Datei ---------------- */
@media print{
  .site-header, .floating-cta, .nav-toggle, .booking-embed, .check-chips{ display:none !important; }
  .ebook-card{ break-inside: avoid; }
}