/* =====================================================================
   MehrWert Leben – zentrale Stylesheet
   Farb- und Typo-System als CSS-Variablen, danach Komponentenklassen.
   ===================================================================== */
:root{
  --bg:#fbfaf6;
  --ink:#26302b;
  --muted:#5f6c66;
  --muted-2:#6b6957;
  --forest:#143f37;
  --forest-dark:#0d2c26;
  --link:#1a5346;
  --lime:#94bd2a;
  --lime-strong:#7ea51f;
  --lime-ink:#5e7d12;
  --lime-bright:#a8c81e;
  --sand:#efe7d6;
  --sand-2:#f2ecde;
  --sand-border:#e2d7bf;
  --tan:#8f7a45;
  --line:#e6e2d6;
  --line-soft:#ece8dd;
  --footer-ink:#a9c1ba;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --wrap:1180px;
  --wrap-narrow:840px;
  --pad:56px;
}

/* ---------- Reset & Basis ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--forest); }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); }
p{ margin:0; }
::selection{ background:#d6e8a6; color:var(--forest); }
input,textarea,select,button{ font-family:var(--sans); }

/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--link); outline-offset:2px; border-radius:3px;
}
input:focus-visible, textarea:focus-visible{ outline-offset:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--forest); color:#fff; padding:12px 20px; border-radius:0 0 8px 0; font-weight:700;
}
.skip-link:focus{ left:0; color:#fff; }

/* ---------- Layout-Helfer ---------- */
.container{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.container--narrow{ max-width:var(--wrap-narrow); }
.section{ padding-top:96px; }
.section--tight{ padding-top:56px; }
.spacer{ height:96px; }

/* ---------- Typo-Bausteine ---------- */
.kicker{
  font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime-ink); display:flex; align-items:center; gap:13px;
}
.kicker::before{ content:""; width:32px; height:2px; background:var(--lime); display:inline-block; flex:none; }
.kicker--light{ color:var(--lime-bright); }
.kicker--plain::before{ display:none; }

.section-head{
  font-family:var(--serif); font-size:25px; font-weight:700; color:var(--lime-ink);
  display:flex; align-items:center; gap:16px; margin-bottom:14px;
}
.section-head::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
.section-intro{ font-size:16px; color:var(--muted); margin-bottom:44px; max-width:60ch; }

.h2{ font-family:var(--serif); font-weight:700; font-size:42px; line-height:1.12; letter-spacing:-.01em; color:var(--forest); }
.lead{ font-size:18px; line-height:1.7; color:var(--muted); }
.prose p{ font-size:18px; line-height:1.7; color:var(--muted); margin:0 0 20px; max-width:74ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--forest); font-weight:600; }
.em-lime{ font-style:italic; color:var(--lime-ink); }

/* ---------- Buttons & Links ---------- */
.btn{
  display:inline-block; font-size:15px; font-weight:800; padding:16px 32px;
  border-radius:30px; cursor:pointer; border:0; text-align:center; transition:.18s;
}
.btn--lime{ background:var(--lime); color:var(--forest); }
.btn--lime:hover{ background:var(--lime-strong); color:var(--forest); }
.btn--solid{ background:var(--link); color:#fff; }
.btn--solid:hover{ background:var(--forest); color:#fff; }
.btn--outline{ background:transparent; color:var(--link); border:1.5px solid var(--link); padding:10px 22px; font-size:13.5px; font-weight:700; }
.btn--outline:hover{ background:var(--link); color:#fff; }
.link-arrow{ font-size:15px; font-weight:800; color:var(--forest); display:inline-block; border-bottom:2px solid var(--lime); padding-bottom:4px; cursor:pointer; }
.link-arrow:hover{ color:var(--forest); }
.link-arrow--light{ color:#fff; }
.link-arrow--light:hover{ color:#fff; }

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav{ position:sticky; top:0; z-index:50; background:rgba(251,250,246,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.nav__inner{ max-width:var(--wrap); margin:0 auto; padding:15px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; }
.nav__logo{ height:52px; }
.nav__links{ display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:600; color:#3a4742; }
.nav__link{ color:#3a4742; cursor:pointer; }
.nav__link:hover, .nav__link.is-active{ color:var(--link); }
.nav__link--check{ color:var(--lime-ink); }
.nav__link--check:hover, .nav__link--check.is-active{ color:var(--forest); }
.nav__right{ display:flex; align-items:center; gap:14px; }

/* Dropdown (reines CSS auf Hover/Focus) */
.menu{ position:relative; }
.menu__trigger{ display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:0; font:inherit; color:#3a4742; font-weight:600; }
.menu__trigger:hover{ color:var(--link); }
.menu__caret{ font-size:9px; color:var(--lime); }
.menu__panel{
  position:absolute; top:100%; left:-16px; padding-top:14px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s;
}
.menu:hover .menu__panel, .menu:focus-within .menu__panel{ opacity:1; visibility:visible; transform:none; }
.menu__list{ min-width:264px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 46px rgba(20,63,55,.16); padding:9px; }
.menu__item{ display:block; padding:11px 14px; border-radius:9px; color:#3a4742; font-weight:600; }
.menu__item:hover{ background:#f3f6e9; color:var(--link); }

/* Mobile */
.nav__burger{ display:none; font-size:26px; line-height:1; color:var(--forest); cursor:pointer; padding:2px 4px; background:none; border:0; }
.mobile-menu{ display:none; border-top:1px solid var(--line-soft); background:var(--bg); padding:18px 32px 28px; max-height:80vh; overflow:auto; }
.mobile-menu.is-open{ display:block; }
.mobile-menu__label{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lime-ink); margin:6px 0; }
.mobile-menu__label + .mobile-menu__link{ border-top:0; }
.mobile-menu__label:not(:first-child){ margin-top:22px; }
.mobile-menu__link{ display:block; padding:11px 0; font-size:16px; font-weight:600; color:var(--ink); border-bottom:1px solid #f0ece1; }
.mobile-menu__link--check{ font-weight:700; color:var(--lime-ink); }
.mobile-menu__cta{ display:block; text-align:center; margin-top:18px; font-size:14px; font-weight:700; color:#fff; background:var(--link); border-radius:30px; padding:13px 18px; }
.mobile-menu__cta:hover{ color:#fff; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; height:640px; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 56%; }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,38,32,.84) 0%, rgba(11,38,32,.55) 44%, rgba(11,38,32,.06) 80%); }
.hero__inner{ position:relative; max-width:var(--wrap); margin:0 auto; height:100%; padding:0 var(--pad); display:flex; flex-direction:column; justify-content:center; }
.hero__content{ max-width:640px; }
.hero__title{ font-family:var(--serif); font-weight:500; font-size:80px; line-height:1; letter-spacing:-.025em; color:#fff; }
.hero__title .em-lime{ color:var(--lime-bright); }
.hero__lead{ font-size:19px; line-height:1.6; color:#e4ede9; margin-top:26px; max-width:46ch; }
.hero__actions{ display:flex; gap:22px; align-items:center; margin-top:34px; flex-wrap:wrap; }

/* ---------- Werte-Leiste ---------- */
.valuebar{ background:var(--forest-dark); }
.valuebar__inner{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); }
.valuebar__item{ padding:28px 34px; border-right:1px solid rgba(255,255,255,.12); }
.valuebar__item:first-child{ padding-left:0; }
.valuebar__item:last-child{ padding-right:0; border-right:0; }
.valuebar__title{ font-family:var(--serif); font-size:17px; color:var(--lime-bright); font-weight:600; }
.valuebar__desc{ font-size:13.5px; color:#aec4bc; margin-top:5px; }

/* =====================================================================
   FÜNF FELDER / TILES
   ===================================================================== */
.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:stretch; }
.tile{ background:var(--sand); border:1px solid var(--sand-border); border-top:2px solid var(--lime-ink); border-radius:12px; padding:26px 22px 24px; cursor:pointer; transition:.18s; display:flex; flex-direction:column; color:inherit; }
.tile:hover{ box-shadow:0 14px 30px rgba(120,102,60,.16); transform:translateY(-2px); background:var(--sand-2); color:inherit; }
.tile__num{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--tan); }
.tile__title{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--forest); margin:14px 0 9px; line-height:1.18; }
.tile__desc{ font-size:14px; line-height:1.55; color:var(--muted-2); margin:0; }
.tile__more{ font-size:12.5px; font-weight:800; color:var(--lime-ink); margin-top:auto; padding-top:16px; }

/* =====================================================================
   SO ARBEITEN WIR (dunkle Karte)
   ===================================================================== */
.workflow{ background:var(--forest); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; }
.workflow__body{ padding:56px 52px; }
.workflow__title{ font-family:var(--serif); font-weight:500; font-size:38px; line-height:1.14; color:#fff; }
.workflow__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px; }
.step__num{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--lime-bright); letter-spacing:.04em; }
.step__desc{ font-size:14.5px; line-height:1.6; color:#aec4bc; margin-top:8px; }
.workflow__media{ position:relative; min-height:340px; }
.workflow__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; }

/* =====================================================================
   GRUNDSÄTZE (4 Spalten)
   ===================================================================== */
.principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.principle{ padding:0 28px; border-right:1px solid var(--line-soft); }
.principle:first-child{ padding-left:0; }
.principle:last-child{ padding-right:0; border-right:0; }
.principle__num{ font-family:var(--serif); font-size:30px; font-weight:700; color:var(--tan); }
.principle__rule{ width:36px; height:3px; background:var(--lime); border-radius:2px; margin:12px 0; }
.principle__title{ font-family:var(--serif); font-size:19px; font-weight:700; color:var(--forest); margin:0 0 9px; }
.principle__desc{ font-size:15px; line-height:1.62; color:var(--muted); margin:0; }

/* =====================================================================
   FOUNDER / ZITAT (2 Spalten)
   ===================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split__media{ border-radius:14px; overflow:hidden; height:420px; }
.split__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.quote{ font-family:var(--serif); font-size:31px; font-weight:400; line-height:1.34; letter-spacing:-.01em; color:var(--forest); margin-top:20px; }

/* ---------- Bild-Streifen ---------- */
.strip{ border-radius:14px; overflow:hidden; height:200px; }
.strip img{ width:100%; height:100%; object-fit:cover; }

/* =====================================================================
   CTA-Block
   ===================================================================== */
.cta{ border-top:1px solid var(--line); padding-top:60px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta__title{ font-family:var(--serif); font-size:40px; font-weight:700; color:var(--lime-ink); margin:0; max-width:18ch; line-height:1.1; }
.cta__text{ font-size:16.5px; color:var(--muted); margin-top:14px; max-width:56ch; }
.cta .btn{ flex:none; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--forest); color:var(--footer-ink); margin-top:96px; }
.footer__top{ max-width:var(--wrap); margin:0 auto; padding:64px var(--pad) 0; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; }
.footer__logo{ height:60px; margin-bottom:18px; }
.footer__tag{ font-size:14px; line-height:1.6; color:var(--footer-ink); max-width:34ch; }
.footer__h{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--lime-bright); margin-bottom:14px; }
.footer__col a{ display:block; color:var(--footer-ink); font-size:14px; padding:6px 0; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ max-width:var(--wrap); margin:0 auto; padding:40px var(--pad); margin-top:40px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; }
.footer__bottom{ max-width:var(--wrap); margin:40px auto 0; padding:28px var(--pad) 40px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer__legalwrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.footer__copy{ color:#8fa8a0; font-size:13.5px; }
.footer__legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__legal a{ color:#a9c1ba; font-size:13.5px; }
.footer__legal a:hover{ color:#fff; }
.footer__claim{ color:#a8c81e; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* =====================================================================
   FORMULARE
   ===================================================================== */
.form-field{ width:100%; box-sizing:border-box; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; font-size:15px; color:var(--ink); margin-bottom:14px; }
.form-field:focus{ border-color:var(--link); outline:none; }
textarea.form-field{ min-height:130px; resize:vertical; }
.form-consent{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--muted); margin:2px 0 16px; cursor:pointer; }
.form-consent input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--forest); }
.form-note{ font-size:11.5px; color:var(--muted-2); margin-top:12px; }
.alert{ padding:16px 18px; border-radius:12px; font-size:14.5px; margin-bottom:20px; }
.alert--ok{ background:#f3f6e9; color:var(--forest); border:1px solid #dbe8bd; }
.alert--err{ background:#fbeae7; color:#8a2b1e; border:1px solid #f0cabf; }

/* =====================================================================
   RECHTSSEITEN
   ===================================================================== */
.legal h2{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--forest); margin:26px 0 8px; }
.legal h1{ font-family:var(--serif); font-size:38px; font-weight:700; color:var(--forest); margin:10px 0 24px; letter-spacing:-.01em; }
.legal p{ margin:0 0 16px; color:var(--muted); }
.legal ul{ margin:0 0 16px; padding-left:20px; color:var(--muted); }
.legal li{ margin-bottom:6px; }
.legal b{ color:var(--ink); }

/* =====================================================================
   LEISTUNGSSEITEN (Unterseiten-Muster)
   ===================================================================== */
.page-hero{ padding-top:80px; }
.page-hero__title{ font-family:var(--serif); font-weight:500; font-size:68px; line-height:1.02; letter-spacing:-.02em; color:var(--forest); margin:0; max-width:16ch; }
.page-hero__lead{ font-size:19px; line-height:1.62; color:var(--muted); max-width:62ch; margin:28px 0 0; font-weight:500; }
.strip--tall{ height:380px; border-radius:6px; }
.strip--xl{ height:400px; border-radius:6px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.two-col__h{ font-family:var(--serif); font-weight:700; font-size:34px; line-height:1.18; color:var(--forest); margin:0; }
.two-col p{ font-size:16.5px; line-height:1.72; color:var(--muted); margin:0; }

.feature-list{ display:grid; grid-template-columns:1fr 1fr; gap:30px 56px; }
.feature{ display:flex; gap:14px; }
.hex{ flex:none; width:24px; height:27px; background:var(--lime); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display:flex; align-items:center; justify-content:center; color:var(--forest); font-size:11px; font-weight:900; margin-top:1px; }
.feature__title{ font-family:var(--serif); font-size:16.5px; color:var(--forest); font-weight:700; display:block; }
.feature__desc{ font-size:14.5px; line-height:1.55; color:var(--muted); margin:5px 0 0; }

.callout{ background:var(--forest); border-radius:16px; padding:30px 36px; display:flex; gap:18px; align-items:flex-start; color:#eaf1ee; }
.callout__label{ flex:none; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--lime-bright); letter-spacing:.04em; padding-top:3px; }
.callout p{ font-size:16px; line-height:1.6; color:#cfe0da; margin:0; }

.note-quote{ border-left:3px solid var(--lime); padding:6px 0 6px 28px; }
.note-quote__label{ font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--lime-ink); margin-bottom:12px; }
.note-quote p{ font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.5; color:var(--ink); margin:0; max-width:46ch; }

.page-cta{ border-top:1px solid var(--line); padding-top:54px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.page-cta__title{ font-family:var(--serif); font-size:38px; font-weight:700; color:var(--lime-ink); margin:0; max-width:20ch; line-height:1.12; }
.page-cta__text{ font-size:16px; color:var(--muted); margin:13px 0 0; max-width:54ch; }
.page-cta .btn{ flex:none; }

/* Altersvorsorgedepot-Highlight (Ruhestand) */
.avd{ border:1px solid var(--line); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:1.32fr .68fr; background:#fff; }
.avd__body{ padding:46px 48px; }
.avd__badge{ display:inline-flex; align-items:center; gap:8px; background:#eef4d9; color:var(--lime-ink); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:7px 15px; border-radius:30px; }
.avd__title{ font-family:var(--serif); font-weight:700; font-size:36px; line-height:1.1; color:var(--forest); margin:20px 0 0; }
.avd__points{ display:flex; flex-wrap:wrap; gap:14px 26px; margin:24px 0 30px; }
.avd__point{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--forest); }
.avd__point::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); }
.avd__aside{ background:var(--forest); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; }
.avd__date{ font-family:var(--serif); font-weight:700; font-size:56px; line-height:1; color:var(--lime-bright); position:relative; z-index:2; text-align:center; }
.avd__date span{ display:block; font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#cfe0da; margin-top:12px; }
.avd__rhomb{ position:absolute; background:no-repeat center/contain; }

/* Konzept: 4-Schritte-Prozess */
.steps{ display:flex; flex-direction:column; }
.step-row{ display:grid; grid-template-columns:80px 1fr; gap:30px; padding:30px 0; border-top:1px solid var(--line); }
.step-row:last-child{ border-bottom:1px solid var(--line); }
.step-badge{ width:58px; height:64px; display:flex; align-items:center; justify-content:center; background:var(--forest); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); font-family:var(--serif); font-weight:700; color:#fff; font-size:24px; }
.step-badge--lime{ background:var(--lime); color:var(--forest); }
.step-row h3{ font-family:var(--serif); font-size:23px; font-weight:700; color:var(--forest); margin:0 0 8px; }
.step-row p{ font-size:15.5px; line-height:1.65; color:var(--muted); margin:0; max-width:72ch; }

/* 3-Spalten-Grundsätze (Konzept, Über uns) */
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.cols-3 .principle{ border-right:1px solid var(--line-soft); }

/* Vergütung */
.verg{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.verg-card{ border-radius:16px; padding:30px 32px; }
.verg-card--lime{ background:var(--lime-ink); border:1px solid #51690f; color:#fff; }
.verg-card--dark{ background:var(--forest); color:#fff; }
.verg-card__no{ font-family:var(--serif); font-size:13px; font-weight:700; letter-spacing:.06em; }
.verg-card--lime .verg-card__no{ color:#fff; }
.verg-card--dark .verg-card__no{ color:var(--lime-bright); }
.verg-card h3{ font-family:var(--serif); font-size:21px; color:#fff; margin:10px 0; }
.verg-card p{ font-size:14.5px; line-height:1.65; margin:0; }
.verg-card--lime p{ color:#fff; }
.verg-card--dark p{ color:#cfe0da; }

/* Über uns: Portrait + Stats */
.about-portrait{ height:440px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.about-portrait img{ width:100%; height:100%; object-fit:cover; object-position:52% 26%; }
.about-lead-label{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--lime-ink); letter-spacing:.04em; }
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:46px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.stat{ border-left:1px solid var(--line); padding-left:40px; }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num{ font-family:var(--serif); font-size:46px; font-weight:700; color:var(--link); }
.stat__desc{ font-size:14.5px; color:var(--muted); margin-top:8px; line-height:1.5; }

/* Kontakt: Berater-Grid + Formular */
.berater-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.berater{ display:flex; gap:20px; align-items:flex-start; }
.berater__photo{ width:90px; height:90px; flex:0 0 auto; border-radius:50%; object-fit:cover; padding:3px; border:1px solid var(--lime); box-sizing:border-box; }
.berater__name{ font-family:var(--serif); font-size:21px; font-weight:700; color:var(--forest); line-height:1.15; }
.berater__role{ font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:6px; }
.berater__sep{ height:1px; background:var(--line-soft); margin:13px 0 11px; }
.berater__mail{ display:block; font-size:13px; font-weight:700; color:var(--lime-ink); word-break:break-word; }
.berater__tel{ font-size:13px; color:var(--muted-2); margin-top:5px; white-space:pre-line; line-height:1.5; }
.contact-grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:64px; align-items:start; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:700; color:var(--link); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px; }
.info-card__h{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--forest); margin-bottom:20px; }
.info-row{ padding:16px 0; border-top:1px solid var(--line-soft); }
.info-row__label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--lime-ink); }
.info-row__val{ font-size:16px; color:var(--ink); font-weight:700; margin-top:4px; }

/* =====================================================================
   CHECKS (Finanz-Check & Altersvorsorge-Check)
   ===================================================================== */
.check{ background:var(--bg); min-height:70vh; padding:40px 0 90px; }
.check__wrap{ max-width:680px; margin:0 auto; padding:0 var(--pad); }
.check--wide .check__wrap{ max-width:760px; }
.progress__meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:12.5px; color:var(--muted-2); }
.progress__meta b{ color:var(--lime-ink); font-weight:700; }
.progress{ height:6px; width:100%; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:30px; }
.progress__bar{ height:100%; background:var(--lime); border-radius:999px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.quiz-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:38px; }
.quiz-kicker{ font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--forest); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.quiz-kicker::before{ content:""; width:26px; height:2px; background:var(--lime); display:inline-block; }
.quiz-badge{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--forest); background:#f3f6e9; padding:6px 13px; border-radius:999px; margin-bottom:22px; }
.quiz-h1{ font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.08; letter-spacing:-.01em; color:var(--forest); margin:0 0 16px; }
.quiz-lead{ color:var(--muted); font-size:16.5px; line-height:1.55; margin:0 0 26px; }
.quiz-h2{ font-family:var(--serif); font-weight:600; font-size:28px; line-height:1.22; color:var(--forest); margin:0 0 24px; }
.quiz-usps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 28px; }
.quiz-usp{ background:#fff; border:1px solid var(--line); border-top:2px solid var(--lime-ink); border-radius:14px; padding:18px; }
.quiz-usp__ico{ font-size:20px; color:var(--lime-ink); }
.quiz-usp__t{ font-weight:600; font-size:14px; margin-top:8px; color:var(--forest); }
.quiz-usp__d{ font-size:12.5px; color:var(--muted); }
.quiz-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted-2); font-size:13px; cursor:pointer; margin-bottom:18px; background:none; border:0; }
.quiz-back:hover{ color:var(--forest); }
.q-block{ margin-bottom:30px; }
.q-head{ display:flex; gap:12px; align-items:baseline; margin-bottom:14px; }
.q-num{ flex:none; font-family:var(--serif); font-size:15px; font-weight:700; color:var(--lime); }
.q-title{ font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.35; color:var(--forest); margin:0; }
.opts{ display:grid; gap:10px; }
.opt{ text-align:left; width:100%; background:#fff; border:1.5px solid var(--line); border-radius:15px; padding:16px 18px; cursor:pointer; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:14px; transition:.14s; }
.opt:hover{ border-color:#cdd3c2; }
.opt.is-sel{ background:#f3f6e9; border-color:var(--forest); font-weight:600; }
.opt__dot{ flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; border:1.5px solid #cdd3c2; background:#fff; }
.opt.is-sel .opt__dot{ border-color:var(--forest); background:var(--forest); }
.quiz-actions{ display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
.quiz-goal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt--goal{ font-size:15.5px; }

/* Ergebnis */
.gauge{ position:relative; width:170px; height:100px; margin:0 auto; }
.gauge__num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:4px; }
.gauge__pct{ font-family:var(--serif); font-weight:600; font-size:33px; color:var(--forest); }
.gauge__lbl{ font-size:11.5px; color:var(--muted); }
.result-head{ text-align:center; }
.result-title{ font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.24; color:var(--forest); margin:12px 0 8px; text-align:center; }
.result-text{ color:var(--muted); font-size:16px; line-height:1.55; text-align:center; max-width:480px; margin:0 auto 22px; }
.cats{ background:var(--bg); border-radius:16px; padding:22px 22px 8px; margin-bottom:26px; }
.cats__h{ font-weight:600; font-size:14.5px; color:var(--forest); margin-bottom:16px; }
.cat{ margin-bottom:16px; }
.cat__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.cat__name{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--forest); }
.cat__bar{ height:8px; background:#e8e3d6; border-radius:999px; overflow:hidden; }
.cat__fill{ height:100%; border-radius:999px; }
.hooks{ background:var(--bg); border-radius:16px; padding:20px; margin-bottom:26px; }
.hooks__h{ font-weight:600; font-size:14.5px; color:var(--forest); margin-bottom:12px; }
.hook{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--ink); margin-bottom:10px; }
.hook__ico{ flex:none; width:22px; height:22px; border-radius:999px; background:#f3f6e9; display:flex; align-items:center; justify-content:center; color:var(--lime-ink); font-size:12px; font-weight:900; }
.lead-box{ border:1px solid var(--line); border-radius:18px; padding:24px; }
.lead-box h3{ font-family:var(--serif); font-weight:600; font-size:20px; color:var(--forest); margin:0 0 6px; }
.lead-box p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 18px; }
.lead-input{ width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:13px 15px; font-family:var(--sans); font-size:14.5px; color:var(--ink); margin-bottom:12px; }
.check-strip{ margin-top:24px; height:190px; border-radius:6px; overflow:hidden; }
.check-strip img{ width:100%; height:100%; object-fit:cover; }
.result-ok{ background:#f3f6e9; border-radius:16px; padding:32px; text-align:center; }
.result-ok__tick{ height:52px; width:52px; border-radius:999px; background:var(--forest); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:#fff; font-size:24px; font-weight:900; }
.quiz-restart{ display:inline-block; margin-top:18px; color:var(--muted-2); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px){
  :root{ --pad:22px; }
  html, body{ overflow-x:hidden; max-width:100%; }
  .nav__links, .nav__right{ display:none; }
  .nav__burger{ display:block; }
  .hero{ height:auto; padding:72px 0; }
  .hero__title{ font-size:46px; line-height:1.04; }
  .hero__lead{ max-width:100%; }
  .h2, .workflow__title, .cta__title, .quote, .legal h1{ font-size:30px !important; line-height:1.14; max-width:100%; }
  .valuebar__inner{ grid-template-columns:1fr; }
  .valuebar__item{ padding:20px 0 !important; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .valuebar__item:last-child{ border-bottom:0; }
  .tiles{ grid-template-columns:1fr; }
  .workflow{ grid-template-columns:1fr; }
  .workflow__body{ padding:36px 24px; }
  .workflow__steps{ grid-template-columns:1fr; gap:18px; }
  .workflow__media{ min-height:240px; }
  .principles{ grid-template-columns:1fr; }
  .principle{ padding:24px 0 !important; border-right:0; border-bottom:1px solid var(--line-soft); }
  .principle:last-child{ border-bottom:0; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .split__media{ height:280px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; }
  .cta{ flex-direction:column; align-items:flex-start; }
  .page-hero__title{ font-size:44px; max-width:100%; }
  .page-hero__lead{ max-width:100%; }
  .two-col{ grid-template-columns:1fr; gap:22px; }
  .feature-list{ grid-template-columns:1fr; gap:22px; }
  .page-cta{ flex-direction:column; align-items:flex-start; }
  .avd{ grid-template-columns:1fr; }
  .avd__body{ padding:32px 24px; }
  .avd__aside{ padding:40px 24px; }
  .note-quote p{ font-size:20px; max-width:100%; }
  .cols-3, .stats, .verg, .contact-grid, .field-row{ grid-template-columns:1fr; }
  .stat{ border-left:0; padding-left:0; }
  .step-row{ grid-template-columns:56px 1fr; gap:18px; }
  .berater-grid{ grid-template-columns:1fr; }
  .about-portrait{ height:320px; }
  .quiz-usps, .quiz-goal-grid{ grid-template-columns:1fr; }
  .quiz-card{ padding:26px 20px; }
  .quiz-h1{ font-size:30px; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns:1fr; }
}