/* =============================================================
   Fidesa Finanz — Variant 3: "Stille Verantwortung"
   ------------------------------------------------------------
   Cool, quiet, modern. Navy + forest green. NO gold/brick tones
   in type. NO italic-serif flourishes. Character through weight
   contrast (300 + 600 + 700), generous whitespace, and a single
   precise accent color.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Type — single sans, no serif, no mono */
  --ff-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-serif: "Manrope", -apple-system, sans-serif;   /* alias: serif slot reused for sans */
  --ff-mono:  "Manrope", -apple-system, sans-serif;   /* alias: mono slot reused for sans */

  /* === Logo navy (unchanged) === */
  --ff-navy-900: #062236;
  --ff-navy-800: #0b3958;        /* PRIMARY — matches logo */
  --ff-navy-700: #144d72;
  --ff-navy-600: #246a8f;
  --ff-navy-500: #4a87a4;
  --ff-navy-100: #cdd8e0;
  --ff-navy-050: #e7ecf0;

  /* === Forest pine — replaces gold/brick everywhere === */
  --ff-pine-900: #0d3327;
  --ff-pine-800: #15473a;
  --ff-pine-700: #1d5c4b;        /* primary accent — deep, calm */
  --ff-pine-600: #246c58;
  --ff-pine-500: #2d8067;
  --ff-pine-300: #84b0a1;
  --ff-pine-100: #d8e5df;

  /* (Legacy gold tokens remapped to pine so v2 css overrides stay sane) */
  --ff-gold-700: var(--ff-pine-800);
  --ff-gold-600: var(--ff-pine-700);
  --ff-gold-500: var(--ff-pine-700);
  --ff-gold-300: var(--ff-pine-300);
  --ff-gold-100: var(--ff-pine-100);

  /* === Cool neutrals === */
  --ff-ink-900: #14191c;
  --ff-ink-700: #2d353a;
  --ff-ink-500: #515b62;
  --ff-ink-400: #717c84;
  --ff-ink-300: #9aa3aa;
  --ff-ink-200: #d2d8dc;
  --ff-ink-100: #e7ebee;

  /* Off-white background — cooler than v2's cream */
  --ff-paper:   #fafaf7;
  --ff-bg:      #f3f4ef;        /* soft cool ivory */
  --ff-bg-tint: #e8eae3;

  --fg-1: var(--ff-ink-900);
  --fg-2: var(--ff-ink-700);
  --fg-3: var(--ff-ink-500);
  --fg-4: var(--ff-ink-400);
  --fg-on-navy: var(--ff-paper);
  --fg-on-gold: var(--ff-paper);

  --bg-page: var(--ff-bg);
  --bg-surface: var(--ff-paper);
  --bg-tint: var(--ff-bg-tint);
  --bg-navy: var(--ff-navy-800);
  --bg-navy-grad: linear-gradient(135deg, #062236 0%, #144d72 100%);

  --border-hair: var(--ff-ink-200);
  --border-soft: var(--ff-ink-100);
  --accent-gold: var(--ff-pine-700);    /* legacy alias */
  --accent-pine: var(--ff-pine-700);
  --accent-navy: var(--ff-navy-700);

  --link: var(--ff-navy-700);
  --link-hover: var(--ff-pine-700);

  --shadow-1: 0 1px 6px rgba(14, 25, 28, 0.06);
  --shadow-2: 0 2px 10px rgba(14, 25, 28, 0.07);
  --shadow-3: 0 2px 14px rgba(14, 25, 28, 0.07);
  --shadow-4: 0 6px 24px rgba(14, 25, 28, 0.10);
  --shadow-cta: 0 4px 14px rgba(11, 57, 88, 0.22);
}

/* ============================================================
   BASE — single sans, weight contrast, no decoration
   ============================================================ */
body {
  background: var(--ff-bg);
  color: var(--ff-ink-900);
  font-family: var(--ff-sans) !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* === Force Manrope on EVERY heading, kill all serif === */
h1, h2, h3, h4, h5, h6,
.ff-hero-title, .ff-hero-parallax-title, .ff-hero-logo-title,
.ff-section-head h2, .ff-positioning-copy h2,
.ff-pillar h3, .ff-impact-section .ff-section-head h2,
.ff-cta-strip h2, .ff-leistung h2,
.ff-service-tile h3,
.ff-ledger-title,
.ff-visualizer h3 {
  font-family: var(--ff-sans) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
}

.ff-hero-title, .ff-hero-parallax-title, .ff-hero-logo-title {
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.02 !important;
}

/* === KILL all italic-serif "em" flourishes ===
   v2's em accents become a quieter device: same family, same color,
   but lighter weight + slight letter-spacing for a whispered emphasis. */
em, i,
.ff-hero-title em, .ff-hero-parallax-title em, .ff-hero-logo-title em,
.ff-section-head h2 em, .ff-positioning-copy h2 em,
.ff-pillar h3 em, .ff-impact-section .ff-section-head h2 em,
.ff-cta-strip h2 em, .ff-leistung h2 em,
.ff-service-num,
.ff-process-step-num,
.ff-hero-logo-quote-num,
.ff-about-quote-mark,
.ff-about-quote-text,
.ff-footer-tagline,
.ff-hero-impact-card .num {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: inherit !important;
}

/* Headline 'em' — light weight + pine color = the only accent device */
.ff-hero-title em, .ff-hero-parallax-title em, .ff-hero-logo-title em,
.ff-section-head h2 em, .ff-positioning-copy h2 em,
.ff-pillar h3 em, .ff-impact-section .ff-section-head h2 em,
.ff-cta-strip h2 em, .ff-leistung h2 em {
  font-weight: 300 !important;
  color: var(--ff-pine-700) !important;
  letter-spacing: -0.018em !important;
}
/* Hero & CTA-strip 'em' sit on dark navy — use lighter pine */
.ff-hero-parallax-title em,
.ff-cta-strip h2 em { color: var(--ff-pine-300) !important; }

/* ============================================================
   HERO — calm, no serif quote, no italic
   ============================================================ */
.ff-hero-parallax-scrim {
  background:
    linear-gradient(180deg, rgba(6, 34, 54, 0.55) 0%, rgba(6, 34, 54, 0.40) 50%, rgba(6, 34, 54, 0.88) 100%),
    linear-gradient(95deg, rgba(6, 34, 54, 0.60) 0%, rgba(6, 34, 54, 0.20) 65%, transparent 100%) !important;
}
.ff-hero-parallax-quote {
  background: rgba(6, 34, 54, 0.74) !important;
  border-left: 2px solid var(--ff-pine-500) !important;
}
.ff-hero-parallax-quote-text {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--ff-paper) !important;
  letter-spacing: -0.005em !important;
}
.ff-hero-parallax-quote-num { display: none !important; }

.ff-hero-meta, .ff-hero-meta-on-image {
  font-family: var(--ff-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
}

/* ============================================================
   EYEBROWS — uppercase, weight-based, no italic
   ============================================================ */
.ff-eyebrow {
  font-family: var(--ff-sans) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--ff-pine-700) !important;
  text-transform: uppercase;
}
.ff-eyebrow::before {
  background: var(--ff-pine-700) !important;
  width: 22px !important;
  height: 1px !important;
}
.ff-eyebrow.on-dark { color: var(--ff-pine-300) !important; }
.ff-eyebrow.on-dark::before { background: var(--ff-pine-300) !important; }

/* ============================================================
   THREAD / hairlines
   ============================================================ */
.ff-thread::before {
  background: var(--ff-pine-500) !important;
  height: 1px !important;
}
.ff-thread-label {
  font-family: var(--ff-sans) !important;
  background: var(--ff-bg) !important;
  color: var(--ff-navy-800) !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}
.ff-thread-label .gold-dot {
  background: var(--ff-pine-500) !important;
}

/* ============================================================
   SECTIONS — quieter rhythm
   ============================================================ */
section, .ff-section { background: var(--ff-bg); }
.ff-section { padding-top: 92px; padding-bottom: 92px; }

.ff-service-tile,
.ff-pillar,
.ff-vis-card,
.ff-process-step,
.ff-usp-item,
.ff-form-section,
.ff-impact-card,
.ff-leistung,
.ff-toc-item {
  background: var(--ff-paper) !important;
  border-color: var(--ff-ink-200) !important;
  border-radius: 2px !important;
}

/* ============================================================
   BUTTONS — navy primary, pine secondary
   ============================================================ */
.ff-btn {
  font-family: var(--ff-sans) !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
}
.ff-btn-primary {
  background: var(--ff-navy-800) !important;
  color: var(--ff-paper) !important;
  border: 1px solid var(--ff-navy-800) !important;
}
.ff-btn-primary:hover {
  background: var(--ff-navy-900) !important;
  border-color: var(--ff-navy-900) !important;
}
.ff-btn-gold,
.ff-btn-pine {
  background: var(--ff-pine-700) !important;
  color: var(--ff-paper) !important;
  border: 1px solid var(--ff-pine-700) !important;
}
.ff-btn-gold:hover,
.ff-btn-pine:hover {
  background: var(--ff-pine-800) !important;
  border-color: var(--ff-pine-800) !important;
}

/* ============================================================
   IMPACT SECTION — off-white, navy result card
   ============================================================ */
.ff-impact-section {
  background: var(--ff-bg) !important;
  color: var(--ff-ink-900) !important;
}
.ff-impact-section::before { display: none !important; }
.ff-impact-section .ff-section-head h2 { color: var(--ff-navy-900) !important; }
.ff-impact-section .ff-section-head .right-col .lead,
.ff-impact-section .ff-section-head .left-col p,
.ff-impact-section .ff-section-head p { color: var(--ff-ink-700) !important; }
.ff-impact-section .ff-eyebrow.on-dark { color: var(--ff-pine-700) !important; }
.ff-impact-section .ff-eyebrow.on-dark::before { background: var(--ff-pine-700) !important; }

/* Visualizer */
.ff-visualizer {
  background: transparent !important;
  border: 1px solid var(--ff-ink-200) !important;
}
.ff-visualizer h3 { color: var(--ff-navy-900) !important; }
.ff-visualizer-meta { color: var(--ff-pine-700) !important; }
.ff-visualizer-desc { color: var(--ff-ink-700) !important; }
.ff-slider-row .label { color: var(--ff-ink-500) !important; }
.ff-slider-row .val { color: var(--ff-navy-900) !important; }
.ff-slider-marks { color: var(--ff-ink-400) !important; }
.ff-slider { background: var(--ff-ink-200) !important; }
.ff-slider::-webkit-slider-thumb {
  background: var(--ff-navy-800) !important;
  border: 2px solid var(--ff-paper) !important;
  box-shadow: 0 2px 8px rgba(14,25,28,0.20) !important;
}
.ff-slider::-moz-range-thumb {
  background: var(--ff-navy-800) !important;
  border: 2px solid var(--ff-paper) !important;
}

/* Result card stays navy */
.ff-vis-result { background: var(--ff-navy-800) !important; color: var(--ff-paper) !important; }
.ff-vis-result-row .name { color: rgba(255,255,255,0.85) !important; }
.ff-vis-result-row .name strong { color: #fff !important; }
.ff-vis-result-row .num,
.ff-vis-result-row .num.gold { color: var(--ff-pine-300) !important; }
.ff-vis-result-foot { color: rgba(255,255,255,0.7) !important; }

/* Ledger on light */
.ff-ledger { border-top-color: var(--ff-ink-200) !important; }
.ff-ledger-row { border-bottom-color: var(--ff-ink-200) !important; }
.ff-ledger-row:hover { background: rgba(11,57,88,0.025) !important; }
.ff-ledger-row::before { background: var(--ff-pine-500) !important; }
.ff-ledger-num { color: var(--ff-ink-400) !important; }
.ff-ledger-tag {
  color: var(--ff-pine-700) !important;
  font-family: var(--ff-sans) !important;
  font-weight: 600 !important;
}
.ff-ledger-place { color: var(--ff-ink-500) !important; }
.ff-ledger-title { color: var(--ff-navy-900) !important; }
.ff-ledger-desc { color: var(--ff-ink-700) !important; }
.ff-ledger-amount { color: var(--ff-navy-900) !important; font-family: var(--ff-sans) !important; }
.ff-ledger-amount .cur { color: var(--ff-ink-400) !important; }
.ff-ledger-total {
  background: rgba(11,57,88,0.04) !important;
  border-top-color: var(--ff-navy-800) !important;
  border-bottom-color: var(--ff-navy-800) !important;
}
.ff-ledger-amount-total { color: var(--ff-navy-900) !important; }
.ff-ledger-amount-total .cur { color: var(--ff-navy-900) !important; opacity: 0.5; }
.ff-ledger-total .ff-ledger-tag { color: var(--ff-navy-900) !important; }

/* Disclosure */
.ff-impact-disclosure {
  border-left: 1px solid var(--ff-pine-500) !important;
  color: var(--ff-ink-700) !important;
}
.ff-impact-disclosure p,
.ff-impact-disclosure span { color: var(--ff-ink-700) !important; }
.ff-impact-disclosure a { color: var(--ff-pine-700) !important; }

/* Catch-all whites on light */
.ff-impact-section .ff-section-head [style*="rgba(255"],
.ff-impact-section .ff-section-head .left-col [style],
.ff-impact-section .ff-section-head .right-col [style] {
  color: var(--ff-ink-700) !important;
}
.ff-impact-section p { color: var(--ff-ink-700); }
.ff-impact-section .ff-vis-result p,
.ff-impact-section .ff-vis-result span { color: inherit !important; }
.ff-impact-section .ff-vis-result .ff-vis-result-row .num,
.ff-impact-section .ff-vis-result .ff-vis-result-row .num.gold { color: var(--ff-pine-300) !important; }
.ff-impact-section .ff-vis-result-foot { color: rgba(255,255,255,0.7) !important; }

/* ============================================================
   POSITIONING / PILLARS
   ============================================================ */
.ff-pillar-stat-num,
.ff-pillar-stat-num.gold {
  color: var(--ff-pine-700) !important;
  font-family: var(--ff-sans) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.ff-pillars-divider { color: var(--ff-ink-300) !important; }
.ff-pillar-key strong { color: var(--ff-navy-800) !important; }

/* ============================================================
   SERVICE TILES — numbers in sans, navy on hover
   ============================================================ */
.ff-service-num {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  color: var(--ff-pine-700) !important;
  font-weight: 300 !important;
  font-feature-settings: "tnum" !important;
}
.ff-service-arrow { color: var(--ff-navy-800) !important; }
.ff-service-tile h3 {
  font-family: var(--ff-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
}

/* ============================================================
   PROCESS / USP
   ============================================================ */
.ff-process-step-num {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  color: var(--ff-pine-300) !important;
  font-weight: 300 !important;
}
.ff-usp-item .key {
  font-family: var(--ff-sans) !important;
  color: var(--ff-pine-700) !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

/* USP items in v3 — top accent line, no card surface */
.ff-usp-item {
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--ff-navy-800) !important;
  border-radius: 0 !important;
  padding-top: 22px !important;
}
.ff-usp-item:nth-child(4) { border-top-color: var(--ff-pine-700) !important; }

/* ============================================================
   ABOUT QUOTE — quiet, no italic, no serif
   ============================================================ */
.ff-about-quote-mark {
  font-family: var(--ff-sans) !important;
  color: var(--ff-pine-300) !important;
  font-style: normal !important;
  font-weight: 300 !important;
}
.ff-about-quote-text {
  font-family: var(--ff-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.012em !important;
}
.ff-about-attr-line { background: var(--ff-pine-500) !important; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.ff-cta-strip {
  background: var(--ff-navy-800) !important;
  color: var(--ff-paper) !important;
  border-bottom: 3px solid var(--ff-pine-500) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.ff-form-section { border-top: 1px solid var(--ff-ink-200) !important; }
.ff-form-step.active { border-top-color: var(--ff-pine-500) !important; }
.ff-form-step.done {
  color: var(--ff-pine-700) !important;
  border-top-color: var(--ff-pine-500) !important;
}
.ff-field input,
.ff-field textarea,
.ff-field select {
  background: var(--ff-paper) !important;
  border: 1px solid var(--ff-ink-200) !important;
  font-family: var(--ff-sans) !important;
  border-radius: 2px !important;
}
.ff-field input:focus,
.ff-field textarea:focus,
.ff-field select:focus {
  border-color: var(--ff-pine-500) !important;
  box-shadow: 0 0 0 3px rgba(45, 128, 103, 0.18) !important;
}
.ff-field label .req { color: var(--ff-pine-700) !important; }
.ff-form-legal { border-left: 1px solid var(--ff-pine-500) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.ff-footer {
  background: var(--ff-navy-900) !important;
  color: rgba(250, 250, 247, 0.75) !important;
}
.ff-footer-tagline {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: var(--ff-pine-300) !important;
  font-size: 16px !important;
  letter-spacing: -0.005em !important;
}
.ff-footer-col h4 {
  font-family: var(--ff-sans) !important;
  color: var(--ff-pine-300) !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

/* ============================================================
   HEADER
   ============================================================ */
.ff-header {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ff-ink-200) !important;
}
.ff-header-nav a {
  font-family: var(--ff-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.ff-header-nav a:hover,
.ff-header-nav a.active { color: var(--ff-pine-700) !important; }

/* ============================================================
   LOGO HERO (alt)
   ============================================================ */
.ff-hero-logo,
.ff-hero-logo::before { background: var(--ff-bg) !important; }
.ff-hero-logo-quote {
  border-top: 1px solid var(--ff-pine-500) !important;
  border-bottom: 1px solid var(--ff-pine-500) !important;
}
.ff-hero-logo-quote-num {
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  color: var(--ff-pine-700) !important;
  font-weight: 300 !important;
}
.ff-hero-logo-mark::before,
.ff-hero-logo-mark::after {
  display: block !important;
  background: var(--ff-pine-500) !important;
  opacity: 0.5 !important;
}

/* ============================================================
   HERO IMPACT CARD (variant)
   ============================================================ */
.ff-hero-impact-card {
  background: var(--ff-navy-800) !important;
  border-bottom: 2px solid var(--ff-pine-500) !important;
}
.ff-hero-impact-card .label {
  font-family: var(--ff-sans) !important;
  color: var(--ff-pine-300) !important;
  font-weight: 600 !important;
}
.ff-hero-impact-card .num {
  font-family: var(--ff-sans) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.ff-hero-impact-card .num small {
  color: var(--ff-pine-300) !important;
  font-weight: 400 !important;
}

/* ============================================================
   LEDGER row tag — restate (overrides v2 mono)
   ============================================================ */
.ff-ledger-num {
  font-family: var(--ff-sans) !important;
  font-weight: 500 !important;
  font-feature-settings: "tnum" !important;
}

/* ============================================================
   IMPACT INTENSITY — body class drives prominence
   ============================================================ */

/* SUBTLE — Impact wird zur Fußnote: kleinere Card, gedämpfter CTA-Streifen,
   schmälere Ledger-Beträge, kein Akzentband am CTA. */
body.impact-subtle .ff-hero-impact-card {
  transform: scale(0.85);
  transform-origin: bottom right;
  opacity: 0.85;
}
body.impact-subtle .ff-hero-impact-card .num { font-size: 36px !important; }
body.impact-subtle .ff-impact-section { padding-top: 64px !important; padding-bottom: 64px !important; }
body.impact-subtle .ff-impact-section .ff-section-head h2 { font-size: 34px !important; }
body.impact-subtle .ff-cta-strip { border-bottom: none !important; padding-top: 48px !important; padding-bottom: 48px !important; }
body.impact-subtle .ff-ledger-amount-total { font-size: 24px !important; }
body.impact-subtle .ff-ledger-row { padding: 18px 0 !important; }

/* BALANCED — default. nothing to do. */

/* PROMINENT — Impact bekommt Bühne: Card größer & in Pine, größere Headline,
   pine-Untergrund hinter dem Ledger-Total, dickeres Akzentband. */
body.impact-prominent .ff-hero-impact-card {
  transform: scale(1.06);
  transform-origin: bottom right;
  background: var(--ff-pine-700) !important;
  border-bottom: 3px solid var(--ff-paper) !important;
}
body.impact-prominent .ff-hero-impact-card .label { color: var(--ff-paper) !important; opacity: 0.85; }
body.impact-prominent .ff-hero-impact-card .num { font-size: 56px !important; color: var(--ff-paper) !important; }
body.impact-prominent .ff-hero-impact-card .num small { color: var(--ff-pine-300) !important; }
body.impact-prominent .ff-impact-section { padding-top: 120px !important; padding-bottom: 120px !important; }
body.impact-prominent .ff-impact-section .ff-section-head h2 { font-size: 56px !important; }
body.impact-prominent .ff-cta-strip { border-bottom: 6px solid var(--ff-pine-500) !important; }
body.impact-prominent .ff-ledger-total {
  background: rgba(29, 92, 75, 0.08) !important;
  border-top-color: var(--ff-pine-700) !important;
  border-bottom-color: var(--ff-pine-700) !important;
}
body.impact-prominent .ff-ledger-amount-total { font-size: 36px !important; color: var(--ff-pine-700) !important; }
body.impact-prominent .ff-ledger-row::before { width: 3px !important; }
body.impact-prominent .ff-ledger-row:hover::before { opacity: 1 !important; }