@import url("../assets/fonts.css");

/* ============================================================
   MehrWert Vermögen – Design-System
   Farben, Typografie und wiederverwendbare Komponenten
   ============================================================ */

:root{
  --green-dark:#143f37;
  --green:#1a5346;
  --green-deep:#17463b;
  --green-bright:#1f7a52;
  --teal:#3f8079;
  --rose:#e7a9ac;
  --rose-strong:#dd969a;
  --red:#9c1822;
  --red-dark:#7a1018;
  --gold:#c8b898;
  --gold-dark:#a9863f;
  --cream:#fffdf8;
  --cream-2:#f6f2e8;
  --paper:#faf9f4;
  --ink:#26302b;
  --muted:#5f6c66;
  --muted-2:#6d6c5a;
  --line:#ece8dd;
  --line-2:#e6e2d6;

  --serif:'Bitter',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  --maxw:1180px;
  --pad:56px;
  --radius:16px;
}

/* ---------- Reset & Basis ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--rose); color:var(--green-dark); }
input,textarea,select,button{ font-family:var(--sans); }

a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--green-dark); }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--green-dark); margin:0; }
p{ margin:0; }

.accent{ font-style:italic; color:var(--red); }
.accent--rose{ font-style:italic; color:var(--rose); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wrap--narrow{ max-width:880px; }
.section{ padding-top:72px; padding-bottom:72px; }
.section--tight{ padding-top:48px; padding-bottom:48px; }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }
.divider-top{ border-top:1px solid var(--line); }

/* ---------- Seiten-Kopf (Unterseiten) ---------- */
.page-head{ padding-top:80px; padding-bottom:40px; }
.page-head h1{ font-size:56px; font-weight:700; line-height:1.06; letter-spacing:-.01em; }
.page-head .lead{ font-size:18px; line-height:1.6; color:var(--muted); max-width:66ch; margin-top:26px; }

.eyebrow{ font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:22px; }
.eyebrow--sm{ font-size:11px; letter-spacing:.1em; margin-bottom:0; }
.eyebrow--green{ color:var(--green-bright); }
.eyebrow--teal{ color:var(--teal); }
.eyebrow--gold{ color:var(--gold-dark); }
.eyebrow--rose{ color:var(--rose); }

.lead{ font-size:18px; line-height:1.6; color:var(--muted); }
.fineprint{ font-size:11.5px; line-height:1.6; color:var(--muted-2); }
.note{ font-size:14px; color:var(--muted); }

/* ---------- Abschnitts-Überschrift mit Verlaufslinie ---------- */
.rule-head{
  font-family:var(--serif); font-size:19px; font-weight:700; color:var(--red);
  display:flex; align-items:center; gap:16px; margin-bottom:34px;
}
.rule-head::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700; line-height:1;
  padding:16px 30px; border-radius:30px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .15s,color .15s,border-color .15s;
}
.btn--primary{ background:var(--green); color:#fff; }
.btn--primary:hover{ background:var(--green-dark); color:#fff; }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-dark); color:#fff; }
.btn--rose{ background:var(--rose); color:var(--green-dark); }
.btn--rose:hover{ background:var(--rose-strong); color:var(--green-dark); }
.btn--ghost{ background:transparent; color:var(--green); border-color:var(--green); }
.btn--ghost:hover{ background:var(--rose); color:var(--green-dark); border-color:var(--rose); }
.btn--ghost-rose{ background:transparent; color:var(--rose); border-color:rgba(231,169,172,.5); }
.btn--ghost-rose:hover{ background:rgba(231,169,172,.12); color:var(--rose); }
.btn--sm{ padding:13px 22px; font-size:14px; }

.btn-row{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.btn-note{ font-size:14px; color:var(--muted); }
.textlink{ font-size:15px; font-weight:700; color:var(--red); cursor:pointer; }
.textlink:hover{ color:var(--red-dark); }
.textlink--green{ color:var(--green); }
.textlink--green:hover{ color:var(--green-dark); }

/* ---------- Grids ---------- */
.cols{ display:grid; gap:0; }
.cols-2,.cols-3,.cols-4{ display:grid; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.gap-lg{ gap:44px; }
.gap-md{ gap:24px; }
.gap-sm{ gap:18px; }
.items-center{ align-items:center; }
.items-start{ align-items:start; }

/* geteilte Spalten mit senkrechten Linien */
.divided{ display:grid; }
.divided > *{ padding:0 38px; border-right:1px solid var(--line); }
.divided > *:first-child{ padding-left:0; }
.divided > *:last-child{ padding-right:0; border-right:none; }

/* ---------- Nummerierte Punkte (01/02/03) ---------- */
.numbered{ display:flex; flex-direction:column; }
.numbered .num{ font-family:var(--serif); font-size:34px; font-weight:700; color:var(--gold); }
.numbered h3{ font-size:20px; font-weight:700; margin:14px 0 10px; }
.numbered p{ font-size:14.5px; line-height:1.62; color:var(--muted); }
.numbered .more{ font-size:14px; font-weight:700; color:var(--red); margin-top:auto; padding-top:22px; }

/* ---------- Statistiken ---------- */
.stat .val{ font-family:var(--serif); font-size:46px; font-weight:700; color:var(--green); line-height:1; }
.stat .val--md{ font-size:30px; }
.stat .val--sm{ font-size:28px; }
.stat .lbl{ font-size:14.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
.stat .lbl--sm{ font-size:13px; }

.stat-band{ background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-box{ background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--radius); padding:38px 44px; }

/* ---------- Karten ---------- */
.card{ background:var(--cream); border:1px solid var(--line-2); border-radius:var(--radius); padding:28px 32px; }
.card--shadow{ box-shadow:0 20px 46px rgba(20,63,55,.12); }
.card--l-green{ border-left:4px solid var(--green-bright); }
.card--l-gold{ border-left:4px solid var(--gold); }
.card--l-red{ border-left:4px solid var(--red); }
.card--t-green{ border-top:4px solid var(--green-bright); }
.card--t-teal{ border-top:4px solid var(--teal); }
.card--t-red{ border-top:4px solid var(--red); }
.card h3{ font-size:21px; font-weight:700; margin:8px 0 10px; }
.card h4{ font-size:18px; font-weight:700; margin:6px 0; }
.card p{ font-size:14.5px; line-height:1.6; color:var(--muted); }

.info-box{ background:var(--cream-2); border:1px solid var(--line-2); border-left:4px solid var(--gold); border-radius:14px; padding:26px 32px; }
.info-box h3{ font-size:19px; font-weight:700; margin:0 0 6px; }
.info-box p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------- Pills / Tags ---------- */
.pillrow{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ font-size:13px; font-weight:600; border-radius:20px; padding:6px 13px; border:1px solid var(--line-2); background:var(--cream-2); color:var(--green-dark); }
.pill--pos{ color:var(--green-dark); background:#e7f1ea; border-color:#cfe3d6; }
.pill--neg{ color:var(--red-dark); background:#f4e6e6; border-color:#e7cfd0; }
.pill--teal{ color:var(--teal); background:#eef5f3; border-color:#d4e4e0; }
.pill--gold{ color:#8a6d2f; background:#f3eee0; border-color:#e3d8be; }

/* ---------- Zitat ---------- */
.pull{ border-left:3px solid var(--red); padding-left:48px; max-width:880px; margin:0 auto; }
.pull p{ font-family:var(--serif); font-style:italic; font-size:40px; line-height:1.32; color:var(--green-dark); font-weight:500; text-wrap:balance; margin:0; }
.quote-band{ background:var(--green-deep); border-radius:6px; padding:54px 60px; }
.quote-band p{ font-family:var(--serif); font-style:italic; font-size:27px; line-height:1.42; color:#fff; font-weight:500; margin:0; max-width:80ch; }

/* ---------- Dunkelgrüne Bänder ---------- */
.band-green{ background:var(--green-deep); border-radius:18px; padding:44px 48px; position:relative; overflow:hidden; color:#fff; }
.band-green h2,.band-green h3{ color:#fff; }
.band-green p{ color:#cfe0da; }
.hex-watermark{ position:absolute; right:-50px; top:-60px; width:240px; height:264px; opacity:.07; pointer-events:none; }
.hex-watermark svg{ width:100%; height:100%; }

/* ---------- Hexagon-Badge ---------- */
.hex{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.hex svg{ position:absolute; inset:0; width:100%; height:100%; }
.hex span{ position:relative; font-family:var(--serif); font-weight:700; color:#fff; }
.hex--step{ width:52px; height:58px; }
.hex--step span{ font-size:20px; }
.hex--lg{ width:64px; height:70px; }
.hex--lg span{ font-size:24px; }
.hex--check{ width:30px; height:33px; }
.hex--check span{ font-size:13px; font-weight:800; }

/* ---------- Feature-Zeile (Icon + Text) ---------- */
.feature{ display:flex; gap:14px; }
.feature .hex{ margin-top:2px; }
.feature b{ font-family:var(--serif); font-size:16px; color:var(--green-dark); }
.feature p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:5px 0 0; }

/* ---------- CTA-Band ---------- */
.cta-band{ background:var(--cream-2); border-top:1px solid var(--line); }
.cta-band .inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ font-size:36px; font-weight:700; margin:0; }
.cta-band p{ font-size:16px; color:var(--muted); margin:12px 0 0; max-width:60ch; }

/* ---------- Tabelle (Strategien) ---------- */
.perf-table{ border-top:2px solid var(--green); }
.perf-row{ display:grid; grid-template-columns:1.7fr 1fr 1fr .85fr .85fr .85fr; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
.perf-row--head{ padding:16px 0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.perf-row .name{ font-family:var(--serif); font-weight:700; color:var(--green-dark); }
.perf-row .muted{ color:var(--muted); }
.perf-row .pos{ text-align:right; font-weight:700; color:var(--green-bright); }
.perf-row .r{ text-align:right; }

/* Kennzahlen-Raster mit Zellen-Linien */
.metric-grid{ display:grid; border-top:1px solid var(--line); }
.metric-grid.cols-4 > *{ padding:22px 24px; border-right:1px solid var(--line); }
.metric-grid.cols-4 > *:first-child{ padding-left:0; }
.metric-grid.cols-4 > *:last-child{ padding-right:0; border-right:none; }
.metric .val{ font-family:var(--serif); font-size:28px; font-weight:700; color:var(--green-dark); }
.metric .val--pos{ color:var(--green-bright); }
.metric .val--red{ color:var(--red); }
.metric .lbl{ font-size:13px; color:var(--muted); margin-top:6px; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:36px; }
.team-photo{ height:320px; border-radius:5px; overflow:hidden; border:1px solid var(--line-2); }
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.team-name{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--green-dark); margin-top:18px; }
.team-role{ font-size:14px; font-weight:600; color:var(--red); margin-top:3px; }

/* ---------- Berater-Kontaktkarten ---------- */
.advisor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.advisor{ display:flex; gap:20px; align-items:flex-start; }
.advisor img{ width:88px; height:88px; flex:0 0 auto; border-radius:50%; object-fit:cover; border:2px solid var(--red); }
.advisor .a-name{ font-family:var(--serif); font-size:21px; font-weight:700; color:var(--green-dark); line-height:1.15; }
.advisor .a-addr{ font-size:13px; color:var(--green); margin-top:4px; line-height:1.45; }
.advisor .a-sep{ height:1px; background:var(--line); margin:12px 0 10px; }
.advisor .a-mail{ display:block; font-size:12.5px; color:var(--green); word-break:break-word; }
.advisor .a-tel{ font-size:12.5px; color:var(--muted); margin-top:4px; white-space:pre-line; }

/* ---------- Formular ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form input,.form select,.form textarea{
  padding:14px 16px; border:1px solid var(--line-2); border-radius:10px;
  font-size:14px; background:var(--cream); color:var(--ink); width:100%;
}
.form textarea{ resize:vertical; }
.form .col-2{ grid-column:span 2; }
.form select{ color:var(--muted); }
.form button{ grid-column:span 2; justify-self:start; }
.form-ok{ background:#e7f1ea; border:1px solid #cfe3d6; border-radius:14px; padding:40px; }
.form-ok h3{ font-size:24px; font-weight:700; color:var(--green); }
.form-ok p{ font-size:15px; line-height:1.6; color:var(--ink); margin:10px 0 0; }
.contact-aside{ background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--radius); padding:30px; }
.contact-aside .row{ font-size:14px; line-height:1.5; color:var(--ink); padding:10px 0; border-top:1px solid var(--line); }
.contact-aside .row:first-of-type{ border-top:none; }

/* ---------- Bild-Bänder ---------- */
.imgband{ border-radius:12px; overflow:hidden; }
.imgband img{ width:100%; height:100%; object-fit:cover; }
.imgband--h180{ height:180px; }
.imgband--h200{ height:200px; }
.imgband--h340{ height:340px; }
.imgband--h380{ height:380px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{ max-width:1280px; margin:0 auto; padding:14px 48px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo{ height:56px; }
.nav-left{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-link{ color:var(--ink); cursor:pointer; }
.nav-link:hover{ color:var(--green); }
.nav-link--red{ color:var(--red); }
.nav-link--red:hover{ color:var(--red-dark); }
.caret{ font-size:9px; color:var(--red); }

.dropdown{ position:relative; }
.dropdown > .nav-link{ display:flex; align-items:center; gap:6px; }
.dropdown-menu{
  position:absolute; top:100%; left:-16px; padding-top:12px; z-index:60; display:none;
}
.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-inner{
  min-width:220px; background:var(--cream); border:1px solid var(--line-2);
  border-radius:12px; box-shadow:0 16px 44px rgba(20,63,55,.16); padding:8px;
}
.dropdown-inner a{ display:block; padding:11px 14px; border-radius:8px; color:var(--ink); font-weight:600; }
.dropdown-inner a:hover{ background:var(--cream-2); color:var(--green); }

.nav-pill{ font-size:13.5px; font-weight:700; border-radius:30px; padding:9px 18px; cursor:pointer; }
.nav-pill--ghost{ color:var(--green); border:1.5px solid var(--green); }
.nav-pill--ghost:hover{ background:var(--rose); color:var(--green-dark); border-color:var(--rose); }
.nav-pill--solid{ color:#fff; background:var(--green); border:1.5px solid var(--green); }
.nav-pill--solid:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; }

.hamburger{ display:none; font-size:26px; line-height:1; color:var(--green-dark); cursor:pointer; padding:2px 4px; background:none; border:none; }

.mobile-panel{ display:none; border-top:1px solid var(--line); background:var(--cream); padding:18px 32px 28px; max-height:80vh; overflow:auto; }
.mobile-panel.open{ display:block; }
.mobile-panel .m-label{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:22px 0 6px; }
.mobile-panel .m-label:first-child{ margin-top:6px; }
.mobile-panel a{ display:block; padding:11px 0; font-size:16px; font-weight:600; color:var(--ink); border-bottom:1px solid #f0ece1; }
.mobile-panel a:last-child{ border-bottom:none; }
.mobile-panel .m-berater{ padding:16px 0 6px; font-size:16px; font-weight:700; color:var(--red); border-bottom:none; }
.mobile-actions{ display:flex; gap:12px; margin-top:18px; }
.mobile-actions a{ flex:1; text-align:center; border-bottom:none; border-radius:30px; padding:12px 18px; font-size:14px; font-weight:700; }
.mobile-actions .m-ghost{ color:var(--green); border:1.5px solid var(--green); }
.mobile-actions .m-solid{ color:#fff; background:var(--green); }

/* ============================================================
   HERO (Startseite)
   ============================================================ */
.hero{ position:relative; height:640px; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 30%; filter:sepia(.10) saturate(1.05) brightness(.95) hue-rotate(-6deg); }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,63,55,.90) 0%, rgba(20,63,55,.7) 34%, rgba(20,63,55,.28) 64%, rgba(20,63,55,.06) 100%); }
.hero__inner{ position:absolute; inset:0; display:flex; align-items:center; }
.hero__box{ max-width:1280px; width:100%; margin:0 auto; padding:0 48px; }
.hero__content{ max-width:640px; }
.hero__eyebrow{ font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); margin-bottom:24px; }
.hero h1{ font-size:72px; font-weight:700; line-height:1.03; letter-spacing:-.02em; color:#fff; }
.hero__lead{ font-size:19px; line-height:1.6; color:rgba(255,255,255,.9); max-width:52ch; margin:26px 0 0; font-weight:500; }
.hero__actions{ display:flex; align-items:center; gap:26px; margin-top:38px; }
.hero__link{ font-size:15px; font-weight:700; color:#fff; cursor:pointer; }
.hero__link:hover{ color:#fff; }

/* ============================================================
   BERATER-BEREICH
   ============================================================ */
.berater-hero{ background:var(--green-deep); position:relative; overflow:hidden; }
.berater-hero .hex-watermark{ width:360px; height:396px; opacity:1; }
.berater-hero .inner{ position:relative; z-index:2; padding-top:64px; }
.berater-hero h1{ font-size:50px; font-weight:700; line-height:1.05; letter-spacing:-.01em; color:#fff; max-width:20ch; }
.berater-hero .eyebrow{ color:var(--rose); }
.berater-hero .lead{ color:#bcd3cc; max-width:64ch; margin:20px 0 30px; }
.subnav{ display:flex; gap:12px; flex-wrap:wrap; padding-top:24px; margin-top:6px; border-top:1px solid rgba(255,255,255,.14); }
.subnav a{
  font-size:14px; font-weight:700; cursor:pointer; padding:9px 18px; border-radius:30px;
  background:rgba(255,255,255,.06); color:#e9f1ee; border:1.5px solid rgba(255,255,255,.22);
}
.subnav a:hover{ border-color:var(--rose); color:#fff; }
.subnav a.active{ background:var(--rose); color:var(--green-dark); border-color:var(--rose); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.manifest{ max-width:880px; }
.manifest p.big{ font-family:var(--serif); font-size:25px; font-weight:500; line-height:1.5; color:var(--ink); margin:0; }
.manifest p.body{ font-size:16px; line-height:1.68; color:var(--muted); margin:22px 0 0; }

/* Vorher/Nachher */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-neg{ background:#f7e9e9; border:1px solid #e3bdbe; border-radius:var(--radius); padding:28px 30px; }
.compare-pos{ background:var(--green-deep); border-radius:var(--radius); padding:28px 30px; position:relative; overflow:hidden; color:#fff; }
.compare .line{ display:flex; gap:10px; font-size:14px; line-height:1.5; }
.compare-neg .line{ color:#6b4a4a; }
.compare-pos .line{ color:#e9f1ee; }
.compare .mk{ flex:none; font-weight:800; }
.compare-neg .mk{ color:var(--red); }
.compare-pos .mk{ color:#7fd0a8; }

.tag-badge{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; border-radius:20px; padding:7px 16px; }
.tag-badge--red{ background:var(--red); }
.tag-badge--green{ background:var(--green-bright); }
.tag-badge--gold{ background:#e6d4a8; color:#5a4a23; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--green-dark); color:#a9c1ba; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-top:64px; padding-bottom:30px; }
.footer-logo{ height:56px; }
.footer-grid p{ font-size:13.5px; line-height:1.6; color:#9fc0b6; margin:18px 0 0; max-width:30ch; }
.footer-col .f-label{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); margin-bottom:14px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-links a{ color:#cfe0da; }
.footer-links a:hover{ color:#fff; }
.footer-links a.rose{ color:var(--rose); }
.footer-contact{ font-size:14px; line-height:1.7; color:#cfe0da; }
.footer-contact a{ color:#cfe0da; }
.footer-contact a:hover{ color:#fff; }
.footer-shop{ display:inline-block; margin-top:16px; font-size:13px; font-weight:700; color:var(--green-dark); background:var(--rose); border-radius:30px; padding:9px 18px; }
.footer-shop:hover{ color:var(--green-dark); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.10); padding-top:20px; padding-bottom:40px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size:12px; color:#7fa194; }
.footer-bottom a{ color:#7fa194; }
.footer-bottom a:hover{ color:#fff; }
.footer-claim{ margin-left:auto; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); }

/* ============================================================
   RECHTSSEITEN (Fließtext)
   ============================================================ */
.legal{ max-width:880px; margin:0 auto; padding:80px 56px 96px; }
.legal h1{ font-size:48px; font-weight:700; line-height:1.08; margin:0 0 16px; }
.legal .legal-body{ font-size:15px; line-height:1.7; color:var(--ink); }
.legal .legal-body h2{ font-size:20px; font-weight:700; margin:32px 0 8px; }
.legal .legal-body h3{ font-size:17px; font-weight:700; margin:22px 0 8px; }
.legal .legal-body p{ margin:0 0 18px; color:var(--muted); }
.legal .legal-body ul{ margin:0 0 18px; padding-left:20px; color:var(--muted); }
.legal .legal-body li{ margin-bottom:7px; }
.legal .legal-body b{ color:var(--ink); }
.legal .legal-body hr{ border:0; border-top:1px solid var(--line); margin:40px 0 0; }
.legal .part-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:52px 0 6px; }
.legal .part-label:first-of-type{ margin-top:8px; }
.pdf-btn{ display:inline-flex; align-items:center; gap:10px; margin:22px 0 24px; background:var(--green); color:#fff; font-size:14px; font-weight:700; padding:13px 22px; border-radius:30px; }
.pdf-btn:hover{ background:var(--green-dark); color:#fff; }
.back-home{ margin-top:40px; }

/* Login */
.login{ max-width:440px; margin:0 auto; text-align:center; }
.login h1{ font-size:40px; font-weight:700; line-height:1.1; }
.login-card{ background:var(--cream); border:1px solid var(--line-2); border-radius:var(--radius); padding:30px; margin-top:30px; text-align:left; box-shadow:0 10px 30px rgba(20,63,55,.06); }
.login-card input{ width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; background:var(--cream); margin-bottom:12px; }
.login-card button{ width:100%; margin-top:4px; justify-content:center; }
.login-forgot{ text-align:center; font-size:13px; color:var(--red); font-weight:600; margin-top:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  :root{ --pad:22px; }
  html,body{ overflow-x:hidden; }
  .nav{ padding:14px 22px; }
  .nav-left, .nav-right{ display:none; }
  .hamburger{ display:block; }

  .cols-2,.cols-3,.cols-4,.divided,.team-grid,.advisor-grid,
  .compare,.footer-grid,.metric-grid.cols-4,
  .page-head .cols-2,.berater-hero .inner{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .divided > *{ padding:0; border-right:none; }
  .metric-grid.cols-4 > *{ padding:16px 0; border-right:none; border-bottom:1px solid var(--line); }

  .page-head h1{ font-size:36px; }
  .hero h1{ font-size:40px; }
  .hero{ height:560px; }
  .berater-hero h1{ font-size:34px; }
  .pull p{ font-size:26px; }
  .pull{ padding-left:24px; }
  .cta-band .inner{ flex-direction:column; align-items:flex-start; }
  .perf-row{ grid-template-columns:1.4fr 1fr .8fr; }
  .perf-row .r:nth-child(n+5){ display:none; }
  .perf-row--head span:nth-child(n+5){ display:none; }
  .band-green{ flex-direction:column !important; align-items:flex-start !important; padding:30px 22px !important; }
  .quote-band{ padding:32px 26px; }
  .band-green{ padding:30px 24px; }
  .stat-box{ padding:26px 22px; }
  .legal{ padding:56px 22px 72px; }
  .legal h1{ font-size:34px; }
  .footer-claim{ margin-left:0; }
}