/* ============================================================
   FFConnect — Layout-Overrides
   Macht die Site weniger klobig und nutzt breitere Auflösungen
   besser. Wird NACH components.css geladen.
   ============================================================ */

/* Container etwas breiter (1320 statt 1200) — Token-Override fuer aelteren Cache */
.container {
    max-width: var(--container, 1320px);
}

/* ---------- HERO kompakter ---------- */
.hero__inner {
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.25rem) !important;
    gap: var(--sp-6) !important;
}
.hero__title {
    font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.4rem) !important;
}
.hero__lead {
    margin-top: var(--sp-4) !important;
    max-width: 52ch;
}
.hero__actions { margin-top: var(--sp-5) !important; }
.hero__media .asset {
    aspect-ratio: 4/3 !important;
    min-height: 0 !important;
    max-height: 420px !important;
}
.emergency-card { margin-top: var(--sp-5) !important; }
.emergency-card__num { font-size: 1.7rem !important; }

/* ---------- SECTIONS kompakter ---------- */
.section {
    padding-block: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem) !important;
}
.section--tight {
    padding-block: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) !important;
}

/* ---------- STATS kompakter + bei vielen Cards in 4 Spalten ---------- */
.stats { gap: var(--sp-6) !important; }
.stat__num { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem) !important; }
.stat__label { font-size: var(--fs-sm) !important; }

/* ---------- SEC-HEAD weniger Bottom-Margin ---------- */
.sec-head { margin-bottom: var(--sp-5) !important; }
.sec-head__title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem) !important; }
.sec-head__lead { margin-top: var(--sp-3) !important; font-size: var(--fs-base) !important; }

/* ---------- PAGE-HEAD kompakter ---------- */
.page-head__inner {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important;
}
.page-head__title { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.65rem) !important; }
.page-head__lead { font-size: var(--fs-base) !important; margin-top: var(--sp-3) !important; }
.page-head__stats { gap: var(--sp-6) !important; margin-top: var(--sp-5) !important; }

/* ---------- CTA-BAND kompakter ---------- */
.cta-band {
    padding: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem) !important;
}
.cta-band__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem) !important; }
.cta-band__text { font-size: var(--fs-base) !important; margin-top: var(--sp-3) !important; }
.cta-band__actions { margin-top: var(--sp-4) !important; }

/* ---------- FOOTER kompakter ---------- */
.footer__grid {
    padding-block: var(--sp-6) !important;
    gap: var(--sp-5) !important;
}

/* ---------- GRID-Spalten besser nutzen auf breiteren Screens ----------
   Nur ab Desktop re-asserten — sonst ueberschreiben diese flachen Regeln
   die responsiven Breakpoints aus components.css (≤980px -> 2 Spalten,
   ≤640px -> 1 Spalte) und die Karten laufen auf dem Handy ueber. */
@media (min-width: 981px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- CARD inner-padding kompakter ----------
   Default-Spacing wird NUR gesetzt wenn keine Density-Variante aktiv ist.
   Sonst gewinnen die Regeln in variants/cards.css (P0-Fix aus UX-Audit).
*/
html:not([data-density="cozy"]):not([data-density="comfortable"]) .card__body {
    padding: var(--sp-4) var(--sp-5);
    gap: var(--sp-2);
}
html:not([data-density="cozy"]):not([data-density="comfortable"]) .member__link {
    padding: var(--sp-5) var(--sp-4);
}
.member__avatar { width: 80px; height: 80px; margin-bottom: var(--sp-3); }
.member__name { font-size: 1rem; }
.member__rank { font-size: 0.7rem; }
.member__role { font-size: 0.84rem; }
html:not([data-density="cozy"]):not([data-density="comfortable"]) .cmd-card {
    padding: var(--sp-5);
    padding-left: calc(var(--sp-5) + 4px);
    gap: var(--sp-4);
}
.cmd-card__avatar { width: 88px; height: 88px; }

/* ---------- BUTTONS kompakter ---------- */
.btn { min-height: 44px !important; padding: 0.55rem 1.15rem !important; }
.btn--lg { min-height: 50px !important; padding: 0.75rem 1.4rem !important; font-size: var(--fs-base) !important; }

/* ---------- TOPBAR kompakter ---------- */
.topbar__inner { height: 38px !important; }
.navbar__inner { min-height: 62px !important; }
.brand__mark { width: 38px !important; height: 38px !important; font-size: 1rem !important; }

/* ---------- HEADER STICKY-CONFLICT ---------- */
/* Twenty-Twenty-Five wraps header in body — masthead in main */
.site-header { position: sticky !important; top: 0 !important; z-index: var(--z-header) !important; }
body.admin-bar .site-header { top: 32px !important; }

/* ---------- ASSET-PLATZHALTER weniger schreiend ---------- */
.asset { min-height: 140px !important; }
.hero__media .asset { min-height: 280px !important; }
/* Avatare + fixe-Ratio-Medien duerfen NICHT von der globalen Mindesthoehe
   aufgeblasen werden (sonst overflowen die Initialen-Kreise ihre Box). */
.member__avatar .asset, .member__avatar img,
.cmd-card__avatar .asset, .cmd-card__avatar img,
.card__media .asset, .card__media img,
.page-head__media .asset, .page-head__media img,
.feature__media .asset, .feature__media img { min-height: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }

/* ---------- BREITERE Container nutzen ---------- */
/* Bei >1440: Cards-Grids automatisch mit groesseren Spalten */
@media (min-width: 1440px) {
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- FFC-Shortcode-Layout: kompakter ---------- */
.ffc-fuhrpark.ffc-fuhrpark--cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: var(--sp-4) !important;
}
.ffc-einsaetze.ffc-einsaetze--cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--sp-4) !important;
}
.ffc-mannschaft.ffc-mannschaft--cards {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: var(--sp-4) !important;
}
.ffc-news-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--sp-4) !important;
}
.ffc-events {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: var(--sp-3) !important;
}
.ffc-kommando {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* Card-paddings kompakter */
.ffc-mannschaft-card { padding: var(--sp-4) var(--sp-3) !important; }
.ffc-mannschaft-avatar { width: 72px !important; height: 72px !important; margin-bottom: var(--sp-2) !important; }
.ffc-mannschaft-card-name { font-size: 0.98rem !important; }
.ffc-mannschaft-card-rank { font-size: 0.82rem !important; }
.ffc-einsaetze-card-title { font-size: 1.05rem !important; }
.ffc-fuhrpark--cards .ffc-fuhrpark-card-name { font-size: 1.1rem !important; margin: var(--sp-4) var(--sp-4) 0.2rem !important; }
.ffc-fuhrpark--cards .ffc-fuhrpark-card-type { margin: 0 var(--sp-4) var(--sp-3) !important; }
.ffc-fuhrpark--cards .ffc-fuhrpark-card-meta { margin: 0 var(--sp-4) var(--sp-4) !important; padding-top: var(--sp-3); }
.ffc-fuhrpark--cards .ffc-tag-maintenance { margin: 0 var(--sp-4) var(--sp-4) !important; }
.ffc-events-item { padding: var(--sp-4) var(--sp-5) var(--sp-4) 0 !important; }
.ffc-events-title { font-size: 1.05rem !important; }
.ffc-news-body { padding: var(--sp-4) !important; gap: var(--sp-2) !important; }
.ffc-news-title { font-size: 1.05rem !important; }
.ffc-news-excerpt { font-size: 0.92rem !important; }

/* News-Card mit kleinerem Bild */
.ffc-news-thumb { aspect-ratio: 16/9 !important; }
.ffc-einsaetze-card-head { padding: var(--sp-4) var(--sp-4) 0 !important; }
.ffc-einsaetze-card-title { margin: var(--sp-2) var(--sp-4) !important; }
.ffc-einsaetze-card-address { margin: 0 var(--sp-4) var(--sp-4) !important; font-size: 0.85rem !important; }

/* Mobile: vertikale Padding-Y noch knapper */
@media (max-width: 640px) {
    .section { padding-block: var(--sp-6) !important; }
    .page-head__inner { padding-block: var(--sp-6) !important; }
    .hero__inner { padding-block: var(--sp-7) !important; }
}