/**
 * KFV Merzig-Wadern - Hauptstyles
 * Authentisch, bodenständig, Feuerwehr-Charakter
 */

/* ==============================================
   VARIABLEN
   ============================================== */
:root {
    --kfv-rot: #c8102e;
    --kfv-rot-dunkel: #9e0c24;
    --kfv-dunkel: #1a1a2e;
    --kfv-grau: #4a5568;
    --kfv-hellgrau: #f7f7f7;
    --kfv-gelb: #ffc107;
    --kfv-schatten: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==============================================
   BASIS
   ============================================== */
body {
    color: #333;
}

a {
    color: var(--kfv-rot);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==============================================
   HEADER
   ============================================== */
.kfv-header {
    background: var(--kfv-dunkel);
    padding: 1rem 0;
}

.kfv-header a {
    color: #fff;
}

.kfv-header a:hover {
    color: var(--kfv-rot);
    text-decoration: none;
}

/* Notruf im Header */
.kfv-notruf {
    background: var(--kfv-rot);
    color: #fff;
    padding: 0.4rem 1rem;
    font-weight: 700;
    border-radius: 3px;
    display: inline-block;
}

.kfv-notruf:hover {
    background: var(--kfv-rot-dunkel);
    color: #fff;
}

/* ==============================================
   SEITEN-HEADER (für Unterseiten)
   ============================================== */
.kfv-page-header {
    background: var(--kfv-dunkel);
    color: #fff;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.kfv-page-header h1 {
    color: #fff;
    margin: 0;
    font-size: 2rem;
}

.kfv-page-header p {
    color: rgba(255,255,255,0.7);
    margin: 0.5rem 0 0;
}

/* ==============================================
   CONTENT-BEREICHE
   ============================================== */

/* Abschnitte mit Hintergrund */
.kfv-section {
    padding: 3rem 0;
}

.kfv-section-grau {
    background: var(--kfv-hellgrau);
}

.kfv-section-dunkel {
    background: var(--kfv-dunkel);
    color: #fff;
}

.kfv-section-dunkel h2,
.kfv-section-dunkel h3 {
    color: #fff;
}

.kfv-section-dunkel a {
    color: #fff;
    text-decoration: underline;
}

/* Überschriften mit rotem Akzent */
.kfv-titel {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.kfv-titel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--kfv-rot);
}

.has-text-align-center .kfv-titel::after,
.kfv-titel.has-text-align-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ==============================================
   KARTEN
   ============================================== */
.kfv-karte {
    background: #fff;
    border-radius: 4px;
    box-shadow: var(--kfv-schatten);
    padding: 1.5rem;
    height: 100%;
}

.kfv-karte-akzent {
    border-left: 4px solid var(--kfv-rot);
}

/* Karten im dunklen Bereich */
.kfv-section-dunkel .kfv-karte {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ==============================================
   PERSONEN / VORSTAND
   ============================================== */
.kfv-person {
    text-align: center;
    padding: 1.5rem 1rem;
}

.kfv-person-bild {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--kfv-rot);
}

.kfv-person-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.kfv-person-funktion {
    color: var(--kfv-rot);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.kfv-person-ort {
    color: var(--kfv-grau);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Person hervorgehoben (z.B. Vorsitzender) */
.kfv-person-featured {
    background: var(--kfv-hellgrau);
    padding: 2rem;
    border-radius: 4px;
}

.kfv-person-featured .kfv-person-bild {
    width: 160px;
    height: 160px;
}

/* ==============================================
   GEMEINDEN-LISTE
   ============================================== */
.kfv-gemeinde {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-left: 4px solid var(--kfv-rot);
    margin-bottom: 0.5rem;
    box-shadow: var(--kfv-schatten);
}

.kfv-gemeinde-name {
    font-weight: 700;
    flex: 1;
}

.kfv-gemeinde-info {
    color: var(--kfv-grau);
    font-size: 0.9rem;
}

/* ==============================================
   BUTTONS
   ============================================== */
.wp-block-button__link {
    transition: background 0.2s, transform 0.2s;
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
}

/* Roter Button */
.kfv-btn-rot .wp-block-button__link,
.has-feuerwehr-rot-background-color {
    background: var(--kfv-rot) !important;
}

.kfv-btn-rot .wp-block-button__link:hover {
    background: var(--kfv-rot-dunkel) !important;
}

/* Outline Button */
.is-style-outline .wp-block-button__link {
    border-width: 2px;
}

/* ==============================================
   NEWS / BEITRÄGE
   ============================================== */
.kfv-news-item {
    border-bottom: 1px solid #eee;
    padding: 1.5rem 0;
}

.kfv-news-item:last-child {
    border-bottom: 0;
}

.kfv-news-datum {
    color: var(--kfv-grau);
    font-size: 0.85rem;
}

.kfv-news-kategorie {
    background: var(--kfv-rot);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==============================================
   INFOBOX / HINWEISE
   ============================================== */
.kfv-infobox {
    background: #fff3cd;
    border-left: 4px solid var(--kfv-gelb);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

.kfv-infobox-rot {
    background: #fce4e4;
    border-left-color: var(--kfv-rot);
}

/* ==============================================
   KONTAKT
   ============================================== */
.kfv-kontakt-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kfv-grau);
    margin-bottom: 0.25rem;
}

.kfv-kontakt-wert {
    font-size: 1.1rem;
}

/* ==============================================
   FOOTER
   ============================================== */
.kfv-footer {
    background: var(--kfv-dunkel);
    color: rgba(255,255,255,0.7);
    padding: 3rem 0 1rem;
}

.kfv-footer h3,
.kfv-footer h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.kfv-footer a {
    color: rgba(255,255,255,0.7);
}

.kfv-footer a:hover {
    color: #fff;
}

.kfv-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kfv-footer li {
    margin-bottom: 0.5rem;
}

.kfv-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.85rem;
}

/* Notruf-Box im Footer */
.kfv-notruf-box {
    background: var(--kfv-rot);
    color: #fff;
    padding: 1.5rem;
    border-radius: 4px;
    text-align: center;
}

.kfv-notruf-box strong {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 782px) {
    .kfv-page-header {
        padding: 2rem 1rem;
    }
    
    .kfv-section {
        padding: 2rem 1rem;
    }
    
    .kfv-person-featured {
        text-align: center;
    }
}

/* ==============================================
   UTILITY KLASSEN
   ============================================== */
.kfv-mt-0 { margin-top: 0 !important; }
.kfv-mb-0 { margin-bottom: 0 !important; }
.kfv-mb-1 { margin-bottom: 1rem !important; }
.kfv-mb-2 { margin-bottom: 2rem !important; }
.kfv-text-center { text-align: center; }
.kfv-text-grau { color: var(--kfv-grau); }
.kfv-text-klein { font-size: 0.9rem; }