/*
 * FFConnect Design-Pack MODERN — „Zentrale".
 *
 * Modern-corporate, strukturiert, vertrauenswuerdig. Hellgraue Flaechen,
 * eingefasster runder Foto-Hero (nicht full-bleed) mit Text-Overlay links,
 * grosse Kennzahlen-Bloecke, nummerierte Prozess-Schritte mit runden Icons,
 * runde Cards. Klare, fette Sans.
 *
 * Aktiv unter .ffc-design-modern. Skin only — nutzt die Hero-Variante
 * .ffc-hero--contained.
 */

.ffc-design-modern {
    --ffc-accent: #E11D2A;
    --ffc-accent-dark: #B3141F;
    --c-black: #0F141A;
    --ffc-ink: #18202B;
    --ffc-muted: #5C6B7A;
    --ffc-line: #DCE2E9;
    --ffc-surface: #FFFFFF;
    --ffc-page-bg: #EEF1F5;
    --r-lg: 24px;
    --r-md: 16px;
    --r-pill: 999px;
    --sh-rest: 0 1px 2px rgba(15,20,26,0.04), 0 10px 30px -18px rgba(15,20,26,0.22);

    background: var(--ffc-page-bg);
    color: var(--ffc-ink);
    font-family: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

/* ---------- Hero: eingefasstes, rundes Foto mit Overlay links ---------- */
.ffc-design-modern .ffc-hero--contained {
    margin: clamp(12px, 2vw, 28px);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: #fff;
    min-height: var(--ffc-hero-min, 60vh);
    display: flex;
}
.ffc-design-modern .ffc-hero--contained::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(15,20,26,0.82) 0%, rgba(15,20,26,0.45) 45%, rgba(15,20,26,0.05) 100%);
}
.ffc-design-modern .ffc-hero--contained .ffc-hero-bg { z-index: -2; }
.ffc-design-modern .ffc-hero--contained .ffc-hero-inner {
    grid-template-columns: 1fr; align-self: center; max-width: 1180px; width: 100%;
}
.ffc-design-modern .ffc-hero--contained .ffc-hero-media { display: none; }
.ffc-design-modern .ffc-hero--contained .ffc-hero-content { max-width: 600px; }
.ffc-design-modern .ffc-hero-eyebrow { color: #fff; opacity: 0.85; letter-spacing: 0.1em; }
.ffc-design-modern .ffc-hero-headline { color: #fff; font-weight: 800; letter-spacing: -0.025em; }
.ffc-design-modern .ffc-hero-subline { color: rgba(255,255,255,0.85); }
.ffc-design-modern .ffc-hero-cta { border-radius: var(--r-pill); padding: 0.95rem 1.9rem; }
.ffc-design-modern .ffc-hero-secondary { border-radius: var(--r-pill); background: rgba(255,255,255,0.18); }
.ffc-design-modern .ffc-hero-emergency {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md);
}

/* ---------- Kennzahlen: grosse Zahlen-Bloecke, links ---------- */
.ffc-design-modern .ffc-kennzahlen { background: transparent; padding: 0; }
.ffc-design-modern .ffc-kennzahlen-inner { gap: 1rem; text-align: left; }
.ffc-design-modern .ffc-kennzahlen-item {
    background: var(--ffc-surface); border-radius: var(--r-md); padding: 1.5rem 1.5rem 1.4rem;
    box-shadow: var(--sh-rest); align-items: flex-start;
}
.ffc-design-modern .ffc-kennzahlen-value {
    font-size: clamp(2.6rem, 1.6rem + 3vw, 3.6rem); font-weight: 800; color: var(--ffc-ink); letter-spacing: -0.03em;
}
.ffc-design-modern .ffc-kennzahlen-value::after { content: ""; }
.ffc-design-modern .ffc-kennzahlen-label { color: var(--ffc-muted); font-weight: 600; }

/* ---------- Section-Header ---------- */
.ffc-design-modern .ffc-section-header-eyebrow {
    color: var(--ffc-accent); background: #fff; display: inline-block;
    padding: 0.3rem 0.8rem; border-radius: var(--r-pill); box-shadow: var(--sh-rest);
}
.ffc-design-modern .ffc-section-header-title { color: var(--ffc-ink); font-weight: 800; letter-spacing: -0.02em; }
.ffc-design-modern .ffc-section-header-lead { color: var(--ffc-muted); }

/* ---------- Quicklinks: Bild-Cards mit Stat-/Label-Overlay ---------- */
.ffc-design-modern .ffc-quicklink {
    border-radius: var(--r-lg); min-height: 240px; border: 0; box-shadow: var(--sh-rest);
}
.ffc-design-modern .ffc-quicklink-overlay {
    background: linear-gradient(to top, rgba(15,20,26,0.8) 0%, rgba(15,20,26,0.1) 65%);
}
.ffc-design-modern .ffc-quicklink-icon {
    background: var(--ffc-accent); color: #fff; border-radius: var(--r-pill);
}
.ffc-design-modern .ffc-quicklink-title { font-size: 1.3rem; }

/* ---------- Prozess-Schritte: nummerierte runde Icons, helle Liste ---------- */
.ffc-design-modern .ffc-steps { grid-template-columns: 1fr; gap: 0; min-height: 0; }
.ffc-design-modern .ffc-steps-panel { display: none; }
.ffc-design-modern .ffc-steps-list { background: transparent; padding: 0; gap: 0.85rem; }
.ffc-design-modern .ffc-steps-step {
    background: var(--ffc-surface); border: 1px solid var(--ffc-line); border-radius: var(--r-md);
    box-shadow: var(--sh-rest); padding: 1.25rem 1.5rem; counter-increment: ffc-step;
}
.ffc-design-modern .ffc-steps-step-icon {
    background: var(--c-black); color: #fff; width: 2.75rem; height: 2.75rem; font-size: 0;
}
.ffc-design-modern .ffc-steps-step-icon::before {
    content: counter(ffc-step, decimal-leading-zero); font-size: 1rem; font-weight: 800;
}
.ffc-design-modern .ffc-steps-list { counter-reset: ffc-step; }
.ffc-design-modern .ffc-steps-step-title { color: var(--ffc-ink); font-size: 1.05rem; }
.ffc-design-modern .ffc-steps-step-text { color: var(--ffc-muted); }
.ffc-design-modern .ffc-steps-title { color: var(--ffc-ink); font-weight: 800; }
.ffc-design-modern .ffc-steps-eyebrow { color: var(--ffc-accent); }

/* ---------- Cards / CTA ---------- */
.ffc-design-modern .ffc-einsaetze-card,
.ffc-design-modern .ffc-news-card,
.ffc-design-modern .ffc-fuhrpark-card {
    border: 1px solid var(--ffc-line); border-radius: var(--r-md); box-shadow: var(--sh-rest); background: var(--ffc-surface);
}
.ffc-design-modern .ffc-cta-band { border-radius: var(--r-lg); }
.ffc-design-modern .ffc-cta-band--accent { background: var(--c-black); color: #fff; }
.ffc-design-modern .ffc-cta-band--accent .ffc-cta-band-title { color: #fff; }
.ffc-design-modern .ffc-cta-band--accent .ffc-cta-band-button { background: var(--ffc-accent); color: #fff; border-radius: var(--r-pill); }