/* ============================================================================
   home.css — Startseiten-spezifische Overrides (dunkel-first).
   ----------------------------------------------------------------------------
   ALLES hier ist mit `.home` gescopet, weil die index-Sektionen ihre Klassen
   (.faq-section, .results, .process, .problem-section …) mit 5–8 anderen, teils
   HELLEN Seiten teilen. Globale Edits in styles.css würden diese brechen — daher
   nur hier, scoped. Lädt nach styles.css.
   ============================================================================ */

/* Body dunkel: verhindert das weiße Aufblitzen beim scroll-reveal (die Sektion
   animiert opacity 0→1; dahinter lag der weiße Body → "weiß dann schwarz").
   --border-color hier auf dunkel umdefiniert: macht ALLE hellen Divider/Borders
   (z. B. .partners border-bottom = die dicke weiße Linie) auf einen Schlag dunkel. */
body.home {
    background-color: var(--surface-0);
    --border-color: var(--surface-3);
}

/* Kürzel für die sechs hellen Sektionen, die auf dunkel gekippt werden */
.home .partners,
.home .problem-section,
.home .funnel,
.home .results,
.home .process,
.home .faq-section {
    background: var(--surface-0);
}

/* Überschriften → hell · Fließtext/Subtitles → gedämpft (höhere Spezifität gewinnt) */
.home :is(.partners, .problem-section, .funnel, .results, .process, .faq-section)
    :is(h1, h2, h3, h4, .section-title, .partners-title, .problem-headline) {
    color: var(--text-on-dark);
}
.home :is(.partners, .problem-section, .funnel, .results, .process, .faq-section)
    :is(p, .section-subtitle, .problem-intro, .problem-text) {
    color: var(--text-3);
}

/* Cards/Boxen in den geflippten Sektionen → dunkle Fläche */
.home :is(.problem-card, .result-card, .process-step, .funnel-step, .metric) {
    background: var(--surface-1);
    border-color: var(--surface-3);
}
/* Card-Detailtexte */
.home .result-category,
.home .metric-label,
.home .process-duration,
.home .funnel-step-subtitle { color: var(--text-3); }
.home .metric-value { color: var(--gold); }

/* FAQ-Items dunkel (scoped — globales .faq-item bleibt für helle Seiten unberührt) */
.home .faq-section .faq-item {
    background: var(--surface-1);
    border-color: var(--surface-3);
}
.home .faq-section .faq-question h3 { color: var(--text-on-dark); }
.home .faq-section .faq-icon { color: var(--gold); }
.home .faq-section .faq-answer > p { color: var(--text-3); }

/* ----------------------------------------------------------------------------
   Refinements (gemeinsame Design-Sprache auf dunkel)
   ---------------------------------------------------------------------------- */

/* Partner-Logos: einheitliche weiße Silhouetten auf Dunkel
   (vorher grayscale+opacity(.6) → praktisch unsichtbar). */
.home .partner-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.5;
    transition: opacity var(--dur) var(--ease);
}
.home .partner-logo:hover img { opacity: 0.9; }
/* OpenAI-Asset hat einen eingebackenen weißen Hintergrund (kein transparentes
   PNG vorhanden). invert(1) + screen lässt den (invertiert schwarzen) Kasten
   transparent werden und macht das Logo weiß. */
.home .partner-logo img[alt="OpenAI"] {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* Funnel-Steps: echte Card-Sprache (wie .content-card) statt nackter grauer
   Fläche — border-width + Radius + Padding ergänzen. */
.home .funnel-step {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
/* Timeline-Punkte: Gold statt heller Token (border-color/bg-light = weiß) */
.home .funnel-progress-dot {
    background: var(--gold);
    border: 3px solid var(--surface-0);
    box-shadow: 0 0 0 2px var(--gold);
}
.home .funnel-progress-line { background: var(--surface-3); }
.home .funnel-timeline.animate .funnel-progress-line { background: var(--gold); }