/*
 * FFConnect Design-Pack MAGAZIN — „Reportage".
 *
 * Fotografie-getrieben, hell, modern. Full-Bleed-Foto-Hero mit Text-Overlay,
 * weisse Kennzahlen-Cards die in den Hero ueberlappen, Bild-Cards mit Overlay-
 * Beschriftung + Pfeil-Chip (wie Reportage-/Magazin-Layouts). Runde Ecken,
 * weiche Schatten, viel Weissraum.
 *
 * Aktiv unter .ffc-design-magazin. Skin only — gleiches Renderer-
 * Markup; nutzt die Hero-Variante .ffc-hero--overlay.
 */

.ffc-design-magazin {
    --ffc-accent: #D62828;
    --ffc-accent-dark: #A61B1B;
    --c-black: #14181F;
    --ffc-ink: #1B2027;
    --ffc-muted: #66707D;
    --ffc-page-bg: #FFFFFF;
    --r-lg: 20px;
    --r-md: 16px;
    --r-pill: 999px;
    --sh-rest: 0 4px 12px -6px rgba(20, 24, 31, 0.12), 0 12px 32px -16px rgba(20, 24, 31, 0.14);
    --sh-hover: 0 16px 44px -14px rgba(20, 24, 31, 0.28);

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

/* ---------- Hero: Full-Bleed-Foto + Overlay ---------- */
.ffc-design-magazin .ffc-hero--overlay { color: #fff; min-height: var(--ffc-hero-min, 76vh); display: flex; }
.ffc-design-magazin .ffc-hero--overlay::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(12,15,20,0.15) 0%, rgba(12,15,20,0.25) 45%, rgba(12,15,20,0.82) 100%);
}
.ffc-design-magazin .ffc-hero--overlay .ffc-hero-bg { z-index: -2; }
.ffc-design-magazin .ffc-hero--overlay .ffc-hero-inner {
    grid-template-columns: 1fr;
    align-items: end;
    align-self: end;
    max-width: 1180px;
    width: 100%;
    padding-block: clamp(2.5rem, 2rem + 5vw, 5rem);
}
.ffc-design-magazin .ffc-hero--overlay .ffc-hero-media { display: none; }
.ffc-design-magazin .ffc-hero--overlay .ffc-hero-content { max-width: 720px; }
.ffc-design-magazin .ffc-hero-eyebrow {
    display: inline-block;
    background: var(--ffc-accent);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: var(--r-pill);
    letter-spacing: 0.08em;
}
.ffc-design-magazin .ffc-hero-headline { color: #fff; letter-spacing: -0.025em; }
.ffc-design-magazin .ffc-hero-subline { color: rgba(255,255,255,0.88); }
.ffc-design-magazin .ffc-hero-cta,
.ffc-design-magazin .ffc-hero-secondary { border-radius: var(--r-pill); padding: 0.9rem 1.8rem; }
.ffc-design-magazin .ffc-hero-secondary { background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); }
.ffc-design-magazin .ffc-hero-emergency { display: none; }

/* ---------- Kennzahlen: weisse Cards, ueberlappen den Hero ---------- */
.ffc-design-magazin .ffc-kennzahlen { background: transparent; padding: 0; }
.ffc-design-magazin .ffc-kennzahlen-inner { gap: 1.25rem; margin-top: -4.5rem; position: relative; z-index: 2; }
.ffc-design-magazin .ffc-kennzahlen-item {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-rest);
    padding: 1.6rem 1.25rem;
    gap: 0.3rem;
}
.ffc-design-magazin .ffc-kennzahlen-value { color: var(--ffc-ink); font-weight: 800; }
.ffc-design-magazin .ffc-kennzahlen-label { color: var(--ffc-muted); font-weight: 600; font-size: 0.92rem; }

/* ---------- Section-Header: links, mit „Alle ansehen"-Geste ---------- */
.ffc-design-magazin .ffc-section-header-title { color: var(--ffc-ink); font-weight: 800; letter-spacing: -0.02em; }
.ffc-design-magazin .ffc-section-header-eyebrow { color: var(--ffc-accent); }
.ffc-design-magazin .ffc-section-header-lead { color: var(--ffc-muted); }

/* ---------- Quicklinks = Bild-Kategorie-Cards (Foto + Overlay + Pfeil) ---------- */
.ffc-design-magazin .ffc-quicklink {
    border-radius: var(--r-lg);
    min-height: 260px;
    box-shadow: var(--sh-rest);
    border: 0;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ffc-design-magazin .ffc-quicklink-overlay {
    background: linear-gradient(to top, rgba(12,15,20,0.78) 0%, rgba(12,15,20,0.06) 70%);
}
.ffc-design-magazin .ffc-quicklink:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.ffc-design-magazin .ffc-quicklink-icon {
    position: absolute; top: 1.1rem; right: 1.1rem;
    width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.92); color: var(--ffc-ink);
}
.ffc-design-magazin .ffc-quicklink-title { font-size: 1.4rem; }

/* ---------- Einsatz-Cards: rund, weicher Schatten ---------- */
.ffc-design-magazin .ffc-einsaetze-card,
.ffc-design-magazin .ffc-news-card,
.ffc-design-magazin .ffc-fuhrpark-card {
    border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-rest); padding: 1.3rem 1.45rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.ffc-design-magazin .ffc-einsaetze-card:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }

/* ---------- CTA / Newsletter: dunkles Band, runder Button ---------- */
.ffc-design-magazin .ffc-cta-band { border-radius: var(--r-lg); }
.ffc-design-magazin .ffc-cta-band--accent { background: var(--c-black); color: #fff; }
.ffc-design-magazin .ffc-cta-band--accent .ffc-cta-band-title { color: #fff; }
.ffc-design-magazin .ffc-cta-band--accent .ffc-cta-band-button {
    background: var(--ffc-accent); color: #fff; border-radius: var(--r-pill);
}
/* ---------- Mobil: Kennzahlen-Overlap zurücknehmen ----------
 * Der -4.5rem-Überlapp der Kennzahlen-Cards in den Hero funktioniert am Desktop,
 * kollidiert auf schmalen Viewports aber mit den (gestapelten) Hero-CTAs. Unter
 * 768px sitzen die Cards daher unter dem Hero statt darüber. */
@media (max-width: 768px) {
    .ffc-design-magazin .ffc-hero--overlay { min-height: 0; }
    .ffc-design-magazin .ffc-kennzahlen-inner { margin-top: 1.5rem; }
}