/* ============================================================================
   Quotivo Marketing — Modern (Editorial) Skin
   ----------------------------------------------------------------------------
   Override-Layer ueber public/css/marketing.css. Wird NUR geladen, wenn der
   Superadmin marketing_modern_design aktiviert (siehe marketing/partials/seo).

   Da marketing.css je nach Seite SPAETER geladen wird (Index inline, andere
   per <link>), ist dieser Layer bewusst order-robust: Variablen + Struktur
   tragen !important. Der Grossteil der Seite re-skinnt sich allein ueber die
   Variablen-Overrides, weil marketing.css durchgehend var(--*) konsumiert.

   Palette = Editorial-Design der App (terracotta Accent, cremefarbener Grund,
   ruhige Serif-Headings, flache Flaechen, keine Lila-Gradients/Orbs).
   ============================================================================ */

/* ---------- 1. Editorial-Tokens (Light) ---------------------------------- */
:root {
    --primary:        #b8410c !important;
    --primary-dark:   #9a3409 !important;
    --primary-light:  #d4612a !important;
    --secondary:      #b8410c !important;
    --accent:         #b8410c !important;
    --text-primary:   #1c1917 !important;
    --text-secondary: #44403c !important;
    --text-muted:     #78716c !important;
    --bg-primary:     #faf9f7 !important;
    --bg-secondary:   #ffffff !important;
    --bg-tertiary:    #f5f4f1 !important;
    --border:         #e7e5e4 !important;
    --border-light:   #f0eeec !important;
    --gradient-primary: #b8410c !important;
    --gradient-dark:    #1c1917 !important;
    --gradient-card:    #ffffff !important;
    --shadow-sm: 0 1px 2px rgba(28,25,23,.05) !important;
    --shadow-md: 0 1px 3px rgba(28,25,23,.07) !important;
    --shadow-lg: 0 6px 18px rgba(28,25,23,.08) !important;
    --shadow-xl: 0 12px 32px rgba(28,25,23,.10) !important;
    --radius-sm: 4px !important;
    --radius-md: 6px !important;
    --radius-lg: 10px !important;
    --radius-xl: 12px !important;
    /* eigene Variable, kollidiert nicht mit marketing.css */
    --me-serif: Georgia, 'Iowan Old Style', 'Apple Garamond', Baskerville, serif;
    --me-accent-soft: #fdf2e9;
}

/* ---------- 2. Editorial-Tokens (Dark) ----------------------------------- */
.dark {
    --primary:        #fb923c !important;
    --primary-dark:   #f97316 !important;
    --primary-light:  #fdba74 !important;
    --secondary:      #fb923c !important;
    --accent:         #fb923c !important;
    --text-primary:   #fafaf9 !important;
    --text-secondary: #d6d3d1 !important;
    --text-muted:     #a8a29e !important;
    --bg-primary:     #0c0a09 !important;
    --bg-secondary:   #1c1917 !important;
    --bg-tertiary:    #292524 !important;
    --border:         #292524 !important;
    --border-light:   #44403c !important;
    --gradient-primary: #fb923c !important;
    --gradient-dark:    #0c0a09 !important;
    --gradient-card:    #1c1917 !important;
    --me-accent-soft: #2a1410;
}

/* ---------- 3. Basis + Typografie ---------------------------------------- */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Ruhige Serif-Headings im gesamten Marketing-Bereich */
h1, h2, h3,
.hero h1, .hero h2, .hero-compact-title,
.section-title, .cta-content h2,
.integration-detail-header h1, .footer-title {
    font-family: var(--me-serif) !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
}
.footer-title {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
}

/* Fokus-Ringe in Accent statt Indigo */
*:focus-visible { outline-color: var(--accent) !important; }

/* ---------- 4. Hero: Deko weg, flache cremefarbene Buehne ----------------- */
.hero-orb, .cta-orb { display: none !important; }
.hero::before, .hero::after { display: none !important; }
.hero {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}
.hero h1 { color: var(--text-primary) !important; }
.hero p, .hero-description, .hero-compact-subtitle { color: var(--text-secondary) !important; }

/* Editorial-Eyebrow statt Pillen-Badge */
.hero-badge {
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Hero-Stat-Zahlen in Serif */
.hero-stat-value { font-family: var(--me-serif) !important; color: var(--text-primary) !important; }
.hero-stat-label { color: var(--text-muted) !important; }
.hero-stat-divider { background: var(--border) !important; }

/* ---------- 5. Buttons: flach ------------------------------------------- */
.btn-primary {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: var(--radius-md) !important;
}
.btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-secondary {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    border-radius: var(--radius-md) !important;
}
.btn-secondary:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--text-muted) !important;
    transform: none !important;
}

/* ---------- 6. Header / Nav ---------------------------------------------- */
.header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.header.scrolled { box-shadow: var(--shadow-md) !important; }
.nav-brand { color: var(--text-primary) !important; }
.nav-link { color: var(--text-secondary) !important; }
.nav-link:hover, .nav-link.active { color: var(--accent) !important; }
.nav-link::after { background: var(--accent) !important; }

/* ---------- 7. Sektionen / Labels / Cards: flach ------------------------- */
.features { background: var(--bg-primary) !important; }
.section-label {
    background: var(--me-accent-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
.section-title { color: var(--text-primary) !important; }
.section-subtitle { color: var(--text-secondary) !important; }

.bento-card,
.pricing-card-modern,
.faq-item,
.integration-card,
.integration-feature-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    background-image: none !important;
}
.bento-card:hover,
.pricing-card-modern:hover,
.integration-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: none !important;
    border-color: var(--text-muted) !important;
}

/* Bento-Icons */
.bento-icon, .integration-feature-icon {
    background: var(--me-accent-soft) !important;
    border-radius: var(--radius-md) !important;
}
.bento-icon svg, .integration-feature-icon svg { stroke: var(--accent) !important; }
.bento-icon-highlight { background: var(--accent) !important; }
.bento-icon-highlight svg { stroke: #fff !important; }

/* Dunkle Mobile-First-Card + CTA-Band: Editorial-Dunkel statt Lila/Navy */
.bento-dark { background: #1c1917 !important; background-image: none !important; }
.cta-section { background: #1c1917 !important; background-image: none !important; }
.cta-content h2, .cta-content p { color: #fafaf9 !important; }

/* ---------- 8. FAQ ------------------------------------------------------- */
.faq-question { color: var(--text-primary) !important; }
.faq-answer { color: var(--text-secondary) !important; }
.faq-icon { color: var(--accent) !important; }

/* ---------- 9. Footer ---------------------------------------------------- */
.footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}
.footer-link { color: var(--text-secondary) !important; }
.footer-link:hover { color: var(--accent) !important; }
/* Spalten-Links im Footer sind klassenlos (.footer-links a) — marketing.css hovert
   sie auf WEISS (Relikt des frueheren dunklen Footers): auf hellem Grund unlesbar.
   Stattdessen dunkles Grau/Ink beim Hover. */
.footer .footer-links a { color: var(--text-muted) !important; }
.footer .footer-links a:hover { color: var(--text-primary) !important; }

/* ---------- 10. Dark-Mode: hartkodierte Cyan-Werte -> Accent ------------- */
.dark body { background: var(--bg-primary) !important; }
.dark .btn-primary { background: var(--accent) !important; box-shadow: none !important; }
.dark .btn-primary:hover { background: var(--primary-dark) !important; box-shadow: none !important; }
.dark .btn-secondary { border-color: var(--border) !important; color: var(--text-primary) !important; }
.dark .btn-secondary:hover { background: var(--bg-tertiary) !important; }
.dark a:not(.btn):not(.nav-link):not(.nav-brand):not(.footer-link):not(.mobile-nav-link) { color: var(--accent) !important; }
.dark a:not(.btn):not(.nav-link):not(.nav-brand):not(.footer-link):not(.mobile-nav-link):hover { color: var(--primary-light) !important; }
.dark .header { background: var(--bg-primary) !important; }
.dark .header.scrolled { background: var(--bg-primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,.5) !important; }
.dark .nav-brand { color: var(--text-primary) !important; }
.dark .nav-link { color: var(--text-secondary) !important; }
.dark .nav-link:hover, .dark .nav-link.active { color: var(--accent) !important; }
.dark .nav-link::after { background: var(--accent) !important; }
.dark .mobile-menu { background: var(--bg-secondary) !important; }
.dark .mobile-nav-link:hover { background: var(--bg-tertiary) !important; }
.dark .features { background: var(--bg-primary) !important; }
.dark .section-label { background: var(--me-accent-soft) !important; border-color: var(--border) !important; color: var(--accent) !important; }
.dark .bento-icon, .dark .integration-feature-icon { background: rgba(251,146,60,.12) !important; }
.dark .bento-icon svg, .dark .integration-feature-icon svg { stroke: var(--accent) !important; }
.dark .bento-icon-highlight { background: var(--accent) !important; }
.dark .faq-icon { color: var(--accent) !important; }