/* ============================================================
   JFM Agency – Farbe & Charakter (nach look.css geladen)
   Akzentfarbe in ruhigen Flächen statt Neon. Überschriften in
   Instrument Serif. Finale Kombination: Noir-Rosé-Look + Instrument Serif + Bordeaux-Flächen
   ============================================================ */

:root {
  --acc: #eaa6b4;        /* Rosé */
  --acc-ink: #22080f;    /* Text auf Akzent */
  --block: #3a0f19;      /* Bordeaux-Fläche */
  --block-line: rgba(234, 166, 180, .18);
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}
::selection { background: var(--acc); color: var(--acc-ink); }

/* ---------- Überschriften: eigenständige Serife ---------- */
.hero-title, .section-title, .story-step h3, .fear-q, .about-copy .section-title, .compare-head .section-title {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.02em !important;
}
.hero-title { font-size: clamp(3.2rem, 6.6vw, 6.2rem) !important; line-height: .95 !important; }
.section-title { font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important; line-height: 1 !important; }
.story-step h3 { font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important; line-height: 1.02; }
.serif { font-family: var(--font-display) !important; font-style: italic !important; color: var(--acc) !important; }
.fear-q { font-style: normal !important; font-size: 1.6rem !important; line-height: 1.15; }
.big-num, .dash-big { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; }
.dash-big { font-size: clamp(3.6rem, 7vw, 6.4rem) !important; color: var(--acc) !important; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: 0; }
.stats-grid .stat:nth-child(-n+2) .stat-num { color: var(--acc) !important; }
.hero-proof .hero-proof-big { color: var(--acc) !important; }

/* ---------- Akzent: Hauptaktion & Details ---------- */
.btn-primary, .sticky-cta { background: var(--acc) !important; border-color: var(--acc) !important; color: var(--acc-ink) !important; }
.btn-primary:hover { background: transparent !important; color: var(--acc) !important; }
.pill-dot { background: var(--acc); }
.hero-proof { border-color: var(--acc) !important; }
.story-dots i.is-active, .dash-tab.is-active { background: var(--acc); color: var(--acc-ink); }
.dash-dot { background: var(--acc); box-shadow: 0 0 0 6px var(--block-line); }
.ds1, .ds2 { stop-color: var(--acc); }
.df1 { stop-color: var(--acc); stop-opacity: .22; } .df2 { stop-color: var(--acc); stop-opacity: 0; }
.msg-out { background: var(--acc); color: var(--acc-ink); }
.fear-a::before, .check-list li::before, .compare-row .good::before { color: var(--acc) !important; border-color: var(--block-line) !important; }
.compare-row--head .col-jfm { color: var(--acc); }
.heart-led { stroke: var(--acc); opacity: .55; }
.heart-led-core { stroke: var(--acc); }
.link-arrow { text-decoration-color: var(--acc); }
.nav-link.is-current { color: var(--acc); }
.seg-btn.is-chosen { border-color: var(--acc) !important; }
.seg-btn:hover .seg-arrow, .seg-arrow { color: var(--acc); }
.mini-bars i, .pf-bar i, .split-a { background: var(--acc) !important; }

/* ---------- Farbflächen (Color-Blocking) ---------- */
/* Ergebnisse: durchgehender Farbblock */
#ergebnisse {
  background: var(--block) !important; border: 0 !important;
  padding-top: 120px; padding-bottom: 110px; margin: 40px 0 0;
}
#ergebnisse .pill, #ergebnisse .section-lead, #ergebnisse .disclaimer, #ergebnisse .cta-micro { color: rgba(255, 240, 240, .62); }
#ergebnisse .pill-dot { background: var(--acc); }
#ergebnisse .dash { border-color: var(--block-line) !important; background: rgba(0,0,0,.18) !important; }
#ergebnisse .dash-foot, #ergebnisse .dash-foot > div + div { border-color: var(--block-line) !important; }
#ergebnisse .dash-grid line { stroke: rgba(255,255,255,.08); }

/* Bewerbung: farbiger Abschluss */
#bewerben { background: var(--block) !important; border: 0 !important; }
#bewerben .pill, #bewerben .section-lead, #bewerben .form-note { color: rgba(255, 240, 240, .62); }
#bewerben .next-steps li, #bewerben .mini-quote, #bewerben .seg-note { border-color: var(--block-line) !important; background: rgba(0,0,0,.16) !important; }
#bewerben .ns-num, #bewerben .seg-note-icon { border-color: var(--acc) !important; color: var(--acc) !important; }

/* Kennzahlen-Leiste: feine Akzentlinie oben */
.stats-bar { border-top: 1px solid var(--line); }

/* Danke-Seite */
.thanks-check { background: var(--acc) !important; color: var(--acc-ink) !important; }

@media (max-width: 760px) {
  .hero-title { font-size: clamp(3rem, 13vw, 4rem) !important; }
  .section-title { font-size: clamp(2.3rem, 10vw, 3rem) !important; }
  .story-step h3 { font-size: 2.1rem !important; }
  #ergebnisse { padding-top: 80px; padding-bottom: 80px; }
}

.mini-quote blockquote, .founder-photo span, .pf-sum strong { font-family: var(--font-display) !important; }
.mini-quote blockquote { font-size: 1.35rem; }

/* ============================================================
   FINALE KOMBINATION: Noir-Rosé-Look
   + Instrument Serif + Bordeaux-Flächen
   ============================================================ */
:root {
  --acc: #f47aa6;                 /* Rosé-Pink wie vorher */
  --acc-ink: #2a0616;
  --block: #3a0f1f;
  --block-line: rgba(244, 122, 166, .2);
}
.serif { color: transparent !important; background: var(--rose-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.btn-primary, .sticky-cta { background: var(--cta-grad) !important; border-color: transparent !important; color: #2a0414 !important; }
.btn-primary:hover { background: var(--cta-grad) !important; color: #2a0414 !important; }
#ergebnisse, #bewerben { background: linear-gradient(180deg, rgba(58,15,31,.92), rgba(42,10,22,.92)) !important; }
.stats-grid .stat:nth-child(-n+2) .stat-num { color: transparent !important; }
#bewerben .ns-num, #bewerben .seg-note-icon { background: transparent !important; }
.thanks h1 { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.02em !important; font-size: clamp(2.6rem, 9vw, 4rem) !important; }