/* ============================================================================
   JONZI-LOOK · Webinar 10.10.2026 (Finn 26.09.)
   Liegt ÜBER theme.css (Gold/Creme-Camp-Look) und zieht die Seiten auf das
   Design von jonzi.ai: weiß, Navy, dunkle Nacht-Sektionen, Bricolage Grotesque
   für Überschriften, Instrument Sans für Text, Geist Mono für kleine Labels.
   Gelb nur noch als Textmarker (wie auf jonzi.ai), sonst kein Gold.
   Tokens 1:1 aus dem :root von jonzi.ai.
   ============================================================================ */
:root {
  --bg: #FFFFFF;
  --bg-2: #F4F4F0;
  --surface: #FFFFFF;
  --surface-2: #F4F4F0;
  --contrast: #0B1226;
  --contrast-2: #16223F;

  --accent: #14203A;
  --accent-deep: #14203A;   /* altes Theme nutzt das an 30+ Stellen als Gold-Text -> Navy */
  --eyebrow: #8A6D1A;       /* gold-tief, nur für Mono-Eyebrows wie auf jonzi.ai */
  --accent-tint: #F4F4F0;
  --accent-soft: #F3D04E;
  --terra: #14203A; --terra-deep: #4B5568; --terra-tint: #F4F4F0; --terra-soft: #F4F1E8;
  --cta: #14203A; --cta-deep: #0B1226;

  --text: #14203A;
  --text-soft: #4B5568;
  --text-faint: #7A8296;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(244, 241, 232, 0.66);

  --marker: #F3D04E;
  --line: #E4E4DE;
  --line-strong: #D2D2CA;
  --line-dark: rgba(255, 255, 255, 0.12);

  --font-head: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --font-body: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --radius: 20px;
  --radius-sm: 18px;
  --radius-xs: 12px;
  --shadow-soft: 0 24px 60px rgba(11, 18, 38, 0.10);
  --shadow-card: 0 1px 2px rgba(11, 18, 38, 0.04);
  --shadow-accent: 0 12px 30px rgba(11, 18, 38, 0.18);
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* ---- Typo wie jonzi.ai --------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; font-variation-settings: "opsz" 96; }
h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h2 { line-height: 1.04; }
.hero-optin .hero-intro h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.06; }
.hero-optin .hero-intro h1 .h1-sub { color: var(--text-soft); font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 700px) {
  .hero-optin .hero-intro h1 { font-size: 27px; line-height: 1.08; }
  .hero-optin .hero-intro h1 .h1-sub { font-size: 18px; line-height: 1.3; }
}
.tl-body h4, .tl-day .tl-day-title, .split-label, .faq summary, .cc-punch, .sticky-inner .s-text strong, .brand { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; }
.doubt-list li, .bio-quote, .stimme blockquote { font-family: var(--font-body); font-style: normal; }
.stimme blockquote { font-size: 16.5px; line-height: 1.6; color: var(--text); }

/* Kleine Überschriften = Mono-Eyebrow wie auf jonzi.ai */
.eyebrow, .kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.14em; color: var(--eyebrow);
}
.kicker::before { display: none; }
.band.dark .kicker, .final-cta .kicker { color: var(--marker); }
.tl-day .tl-day-title small, .cd-box span { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; }

/* Textmarker: fester gelber Balken wie .mk auf jonzi.ai */
.marker, .reveal.in-view .marker {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat;
  background-position: 0 92%; background-size: 100% 78%;
  border-radius: 0.2em; padding: 0 0.12em; animation: none;
}
.reveal .marker { background: linear-gradient(var(--marker), var(--marker)) no-repeat; background-position: 0 92%; background-size: 100% 78%; }

/* ---- Deko aus: kein Gold-Nebel, kein Glühen ------------------------------ */
.aurora, .glow, .final-cta .dots { display: none !important; }
.scroll-progress > span { background: var(--accent); box-shadow: none; }

/* ---- Buttons: GOLD mit Navy-Schrift (Finn 27.09.: "sieht man besser"), überall gleich ---- */
.btn { font-family: var(--font-body); font-weight: 600; }
.btn-primary,
.band.dark .btn-primary, .final-cta .btn-primary, .tg-card .btn-primary, .sticky-cta .btn-primary {
  background: #D4AF37; color: #14203A; box-shadow: 0 10px 26px rgba(212, 175, 55, 0.28);
}
.btn-primary:hover,
.band.dark .btn-primary:hover, .final-cta .btn-primary:hover, .tg-card .btn-primary:hover, .sticky-cta .btn-primary:hover {
  background: #C9A42E; box-shadow: 0 14px 32px rgba(212, 175, 55, 0.38);
}
.btn-primary .btn-sub { opacity: 0.75; }
.shine::after,
.band.dark .shine::after, .final-cta .shine::after, .sticky-cta .shine::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); }

/* ---- Hero ----------------------------------------------------------------- */
.pre-headline {
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--text-soft); background: #FFFFFF; border: 1px solid var(--line);
}
.pre-headline .dot { background: #22C55E !important; }
.hero-bullets li::before, .trust-item .ti { color: var(--accent); }
.cd-box { background: #FFFFFF; border-color: var(--line); box-shadow: none; }
.cd-box strong { color: var(--text); font-weight: 800; letter-spacing: -0.03em; }
.hero-optin .hero-media .hero-video { border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(11, 18, 38, 0.16); }

/* ---- Karten, Vorher/Nachher, Häkchen ---------------------------------------- */
.panel, .help-card, .change-card, .step-card, .faq details, .proof-card { box-shadow: none; border-color: var(--line); }
.panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.chk { background: var(--accent); color: #FFFFFF; }
.hc-tag, .cc-tag { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; }
.hc-tag.prob, .cc-tag.vorher { background: #F4F4F0; color: var(--text-faint); }
.hc-tag.loes, .cc-tag.nachher { background: var(--accent); color: #FFFFFF; }

.split-card.good { background: #FFFFFF; border: 2px solid var(--accent); box-shadow: var(--shadow-soft); }
.split-card.good .split-label { color: var(--accent); }
.split-card.good li::before { color: var(--accent); }
.split-card.bad li::before, .diff-card.them li::before { color: var(--text-faint); }

.recall-pain { border-left-color: var(--accent); }
.recall-doubt { background: #F4F4F0; border: 1px solid var(--line); }
.recall-doubt .stopp { color: var(--accent); font-weight: 800; }
.doubt-list li::before { color: var(--text-faint); }
.pain-list li::before { background: #F4F4F0; color: var(--text-soft); }

/* ---- Dunkle Sektionen = Nacht wie jonzi.ai ------------------------------------ */
.band.dark, .final-cta { background: var(--contrast); }
.band.dark .trust-item .ti, .final-cta .trust-item .ti { color: var(--marker); }
.band.dark .tl-day-title small { color: var(--marker); }
.tl-num { background: #FFFFFF; color: var(--accent); font-weight: 800; box-shadow: none; }
.band.dark .tl-num { background: #FFFFFF; color: var(--accent); }
.tl::before { background: rgba(255, 255, 255, 0.16) !important; }
.diff-card.us { background: var(--contrast); border: 1px solid var(--contrast); }
.diff-card.us h3 { color: #FFFFFF; }
.diff-card.us li::before { color: var(--marker); }

/* ---- FAQ, Formular, Modal, Sticky, Footer ------------------------------------ */
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.faq summary { font-size: 18px; }
.faq summary .plus { background: #F4F4F0; color: var(--accent); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 32, 58, 0.12); }
.modal-card { border-top: 0; }
.sticky-cta { background: var(--contrast); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer { background: var(--contrast); }
.site-footer nav a:hover { color: #FFFFFF; }
.brand-mark { background: #FFFFFF; color: var(--contrast); font-family: var(--font-head); font-weight: 800; }

/* ---- Danke-Seite -------------------------------------------------------------- */
.step-card .s-num { background: var(--accent); color: #FFFFFF; font-weight: 800; }
.proof-payoff, .signature { font-family: var(--font-head); font-weight: 700; }
.stimme figcaption { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }