/*
Theme Name: Feuerwehr Raubling Child
Theme URI: https://feuerwehr-raubling.de
Author: Feuerwehr Raubling
Author URI: https://feuerwehr-raubling.de
Description: Child Theme für das FFW Raubling Theme. Alle Anpassungen hier eintragen – Update-sicher.
Template: FFW-V2-1
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ffw-raubling-child
*/

/*
 * Eigene CSS-Ergänzungen hier eintragen.
 * Das Parent-Theme style.css wird automatisch über functions.php geladen.
 */

/* ============================================================
   TEXPORT FARBSCHEMA
   Angepasst an texport.at:
     Akzent:     #e63312  (Texport Orange-Rot, statt FFW-Rot #C1272D)
     Dunkel:     #1e1e1e  (neutrales Schwarz, statt blau-stichig)
     Karte:      #272727  (etwas heller, für Cards/Sidebar)
   ============================================================ */

/* ── CSS-Variablen überschreiben ─────────────────────────── */
:root {
    --red:        #e63312;
    --red-dark:   #c42b09;
    --dark-gray:  #1e1e1e;
    /* Header-Höhen: Logo (min(100vw×0.1369, 200px)) + Nav (~62px)
       Parent-Theme nutzt diese für body padding-top */
    --header-height-large: calc(min(100vw * 0.1369, 200px) + 62px);
    --header-height-small: 130px; /* 70px Logo + 60px Nav */
}

/* ── Body-Hintergrund im dunklen Schema ───────────────────── */
body.color-scheme-dunkel {
    background-color: #1e1e1e;
}

/* ── Parent-Theme: blaustichige Dunkelfarben → neutrales Dunkel ── */
.color-scheme-dunkel .sidebar {
    background-color: #242424;
}
.color-scheme-dunkel .sidebar .widget a:hover,
.color-scheme-dunkel .sidebar .ffw-kontakt-text a:hover {
    color: #e63312;
}
.color-scheme-dunkel .sidebar .ffw-kontakt-text a:hover {
    border-bottom-color: #e63312;
}
.color-scheme-dunkel .post-card,
.color-scheme-dunkel .einsatz-card {
    background: #272727;
}

/* ============================================================
   AKTUELLES-FEED (page-aktuelles.php)
   ============================================================ */

.aktuelles-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--light-gray);
}

.aktuelles-titel {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
}

.aktuelles-beschreibung {
    color: var(--medium-gray);
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* ── Filter-Tabs ────────────────────────────────────────────── */
.aktuelles-tabs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 0;
}

.aktuelles-tab {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    color: var(--medium-gray);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.aktuelles-tab:hover {
    color: var(--dark-gray);
    border-bottom-color: var(--light-gray);
}

.aktuelles-tab.tab-aktiv {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Feed-Grid ──────────────────────────────────────────────── */
.aktuelles-feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.aktuelles-leer {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--medium-gray);
    padding: var(--spacing-xl) 0;
}

/* ── Basis: Feed-Karte ──────────────────────────────────────── */
.feed-karte {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.feed-karte:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.feed-karte-inhalt {
    padding: var(--spacing-sm) var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Einsatz-Karte ──────────────────────────────────────────── */
.feed-karte--einsatz {
    border-left-width: 5px !important;
}

/* ── Bericht-Karte ──────────────────────────────────────────── */
.feed-karte-bild-link {
    display: block;
    flex-shrink: 0;
}

.feed-karte-bild {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* ── Instagram-Karte ────────────────────────────────────────── */
.feed-karte--instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    align-items: center;
    text-align: center;
}

.feed-karte-instagram-icon {
    padding: var(--spacing-md);
    color: rgba(255,255,255,0.9);
}

.feed-karte--instagram .feed-karte-inhalt {
    color: #fff;
}

.feed-karte--instagram .feed-karte-titel {
    color: #fff;
}

.feed-karte--instagram .feed-karte-excerpt,
.feed-karte--instagram p {
    color: rgba(255,255,255,0.9);
}

/* ── Badges ─────────────────────────────────────────────────── */
.feed-karte-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: flex-start;
}

.feed-karte-badge--bericht {
    background-color: var(--red);
}

/* ── Meta / Datum / Nummer ──────────────────────────────────── */
.feed-karte-meta {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xs);
}

.feed-karte-datum {
    font-size: 0.8rem;
    color: var(--medium-gray);
    font-weight: 600;
}

.feed-karte-nummer {
    font-size: 0.8rem;
    color: var(--red);
    font-weight: 700;
}

/* ── Titel ──────────────────────────────────────────────────── */
.feed-karte-titel {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.feed-karte-titel a {
    color: var(--dark-gray);
    text-decoration: none;
}

.feed-karte-titel a:hover {
    color: var(--red);
}

/* ── Stichwort / Excerpt ────────────────────────────────────── */
.feed-karte-stichwort {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--medium-gray);
    margin-bottom: var(--spacing-xs);
}

.feed-karte-excerpt {
    font-size: 0.9rem;
    color: var(--medium-gray);
    line-height: 1.5;
    flex: 1;
    margin-bottom: var(--spacing-xs);
}

/* ── Link ───────────────────────────────────────────────────── */
.feed-karte-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    margin-top: auto;
    display: inline-block;
}

.feed-karte-link:hover {
    color: var(--red-dark);
}

/* ── Paginierung ────────────────────────────────────────────── */
.aktuelles-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--light-gray);
}

.pagination-link {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--red);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.pagination-link:hover {
    background: var(--red-dark);
    color: #fff;
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--medium-gray);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .aktuelles-feed {
        grid-template-columns: 1fr;
    }

    .aktuelles-titel {
        font-size: 2rem;
    }
}

/* ============================================================
   DARK MODE – Feed-Karten + Aktuelles-Seite + Startseiten-Feed
   Ergänzung zum Parent-Theme (.color-scheme-dunkel), das nur
   die alten Klassen .post-card / .einsatz-card kennt.
   ============================================================ */

/* Hintergrund der Feed-Sektionen – beide transparent, Divider-Bild scheint durch */
.color-scheme-dunkel .startseite-aktuelles {
    background: transparent;
}

/* Karten-Hintergrund */
.color-scheme-dunkel .feed-karte {
    background: #272727;
    border-color: #3a3a3a;
}

/* Karten-Titel */
.color-scheme-dunkel .feed-karte-titel a {
    color: #ffffff;
}
.color-scheme-dunkel .feed-karte-titel a:hover {
    color: #e63312;
}

/* Karten-Metadaten, Excerpt, Stichwort */
.color-scheme-dunkel .feed-karte-datum,
.color-scheme-dunkel .feed-karte-excerpt,
.color-scheme-dunkel .feed-karte-stichwort {
    color: #c8c8d0;
}

/* Seiten-Header */
.color-scheme-dunkel .aktuelles-titel,
.color-scheme-dunkel .startseite-aktuelles-titel {
    color: #ffffff;
}
.color-scheme-dunkel .aktuelles-beschreibung,
.color-scheme-dunkel .startseite-aktuelles-sub {
    color: #c8c8d0;
}

/* Filter-Tabs */
.color-scheme-dunkel .aktuelles-tabs {
    border-bottom-color: #333;
}
.color-scheme-dunkel .aktuelles-tab {
    color: #c8c8d0;
}
.color-scheme-dunkel .aktuelles-tab:hover {
    color: #ffffff;
    border-bottom-color: #555;
}

/* Paginierung */
.color-scheme-dunkel .pagination-info {
    color: #c8c8d0;
}

/* ============================================================
   STARTSEITEN-FEED (Sektion "Aktuelles" auf der Startseite)
   ============================================================ */

.startseite-aktuelles {
    padding: var(--spacing-xl) 0;
    background: transparent !important;
}

.startseite-aktuelles-header {
    margin-bottom: var(--spacing-md);
}

.startseite-aktuelles-titel {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.startseite-aktuelles-sub {
    color: var(--medium-gray);
    font-size: 1rem;
    margin: 0;
}

.startseite-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 992px) {
    .startseite-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .startseite-feed-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   HERO + DIVIDER – Transform-Parallax (img-Element)
   ============================================================
   Warum img statt background-image:
   background-attachment:fixed ist durch body{overflow-x:hidden}
   im Parent-Theme gebrochen. img + transform:translateY() läuft
   auf der GPU und ist völlig unabhängig von Ancestor-overflow.
   ============================================================ */

/* ── Startseite: Kein Extra-Padding (fixed Header) ─────────── */
.front-page-main {
    padding-top: 0 !important;
    margin-top: 0;
}

/* ── Hero-Container ───────────────────────────────────────────
   overflow:hidden  → PFLICHT – clippt das img das größer als
                      der Container ist (140% Höhe)
   position:relative → Koordinatensystem für abs. Kinder
   ──────────────────────────────────────────────────────────── */
.hero-section {
    position: relative;
    isolation: isolate;        /* Eigene Stacking-Context – verhindert z-index-Leck */
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-color: #1e1e1e; /* Fallback bis img geladen */
}

/* ── Bild-Wrapper ─────────────────────────────────────────────
   inset: -20% 0  →  startet 20% ÜBER dem Container und endet
   20% DARUNTER → insgesamt 140% Höhe → Spielraum für Parallax.
   JS bewegt das img nach unten → sieht aus als würde img
   "zurückbleiben" beim Scrollen.
   ──────────────────────────────────────────────────────────── */
.hero-img-wrap {
    position: absolute;
    inset: -20% 0;
    z-index: 0;
}

/* ── Foto ─────────────────────────────────────────────────────
   object-fit:cover      → Seitenverhältnis erhalten, alles füllen
   will-change:transform → Browser lagert auf GPU aus (60fps)
   ──────────────────────────────────────────────────────────── */
.hero-img,
.divider-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    pointer-events: none;
    user-select: none;
}

/* ── Dunkles Overlay (über Bild, unter Text) ─────────────────
   Gleiche Klasse wird für Hero und Divider verwendet.
   ──────────────────────────────────────────────────────────── */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60); /* 0.45 → 0.60: Fotos etwas dunkler */
    z-index: 1;
}

/* ── Text-Inhalt im Hero ─────────────────────────────────────
   z-index: 2 → über Bild (0) und Overlay (1)
   width: 100% → flex-Kind füllt volle Breite aus
   ──────────────────────────────────────────────────────────── */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: #fff;
    padding: 5rem 0 4rem;
}

.hero-kicker {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red, #C1272D);
    margin-bottom: 0.5rem;
}

.hero-titel {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 0.9rem;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.hero-slogan {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 2.5rem;
    max-width: 520px;
    line-height: 1.5;
}

/* ── CTA-Buttons ──────────────────────────────────────────── */
.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.hero-btn {
    display: inline-block;
    padding: 0.85rem 2.1rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    border: 2px solid transparent;
}

.hero-btn:hover {
    transform: translateY(-2px);
}

.hero-btn--rot {
    background: var(--red, #C1272D);
    color: #fff;
    border-color: var(--red, #C1272D);
}

.hero-btn--rot:hover {
    background: var(--red-dark, #9A1F23);
    border-color: var(--red-dark, #9A1F23);
    color: #fff;
}

.hero-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.hero-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── Wrapper: Positionierungs-Kontext für das absolute Hintergrundbild ── */
.feed-with-bg {
    position: relative; /* Enthält den absolut positionierten Divider */
}

/* ── Divider-Section: absolutes Hintergrundbild, füllt den ganzen Wrapper ── */
/* !important nötig: WP Fastest Cache lädt alte CSS-Version parallel */
.divider-section {
    position: absolute  !important;
    top: 0              !important;
    left: 0             !important;
    width: 100%         !important;
    height: 100%        !important;
    z-index: 0          !important;
    overflow: hidden    !important;
    background-color: #2c2c2c;
}

/* ── Feed-Sektion: liegt transparent über dem Hintergrundbild ── */
.front-feed-section {
    position: relative  !important;
    z-index: 2          !important;
    background: transparent !important;
}

/* Scroll-Anker: Scrolled-Header-Höhe (65px Logo + ~50px Nav) */
#aktuelles {
    scroll-margin-top: 130px;
}

/* Divider-Overlay etwas dunkler als Hero */
.divider-section .hero-overlay {
    background: rgba(0, 0, 0, 0.65); /* 0.52 → 0.65: passend zur erhöhten Hero-Opacity */
}

/* ── Mobile / Reduced Motion ──────────────────────────────── */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }

    /* Auf Mobile deaktiviert sich das JS selbst.
       img-wrap ohne extra Spielraum → Foto füllt Container genau. */
    .hero-img-wrap {
        inset: 0;
    }

    .hero-btn {
        padding: 0.75rem 1.6rem;
        font-size: 0.9rem;
    }

    .hero-content {
        padding: 4rem 0 3rem;
    }
}

/* ============================================================
   KONTAKTSEITE (page-kontakt.php)
   ============================================================ */

/* ── Seitenheader ──────────────────────────────────────────── */
.kontakt-main {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

.kontakt-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--light-gray);
}

.color-scheme-dunkel .kontakt-header {
    border-bottom-color: #3a3a3a;
}

.kontakt-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.5rem;
}

.kontakt-titel {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-sm);
    line-height: 1.15;
}

.kontakt-beschreibung {
    color: var(--medium-gray);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Zweispalten-Layout ────────────────────────────────────── */
.kontakt-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);
    align-items: start;
}

@media (max-width: 768px) {
    .kontakt-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Kontaktdaten (linke Spalte) ───────────────────────────── */
.kontakt-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kontakt-info-karte {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #272727;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    transition: border-color 0.2s;
}

.kontakt-info-karte:hover {
    border-color: var(--red);
}

/* Hellmodus-Karte */
body:not(.color-scheme-dunkel) .kontakt-info-karte {
    background: #f8f8f8;
    border-color: #e0e0e0;
}

.kontakt-info-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--red);
    margin-top: 2px;
}

.kontakt-info-icon svg {
    width: 100%;
    height: 100%;
}

.kontakt-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.kontakt-info-text strong {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
}

.kontakt-info-text span {
    color: #c8c8d0;
}

body:not(.color-scheme-dunkel) .kontakt-info-text span {
    color: #444;
}

.kontakt-info-text a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.kontakt-info-text a:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Notruf-Hinweis ────────────────────────────────────────── */
.kontakt-notruf-hinweis {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(230, 51, 18, 0.12);
    border: 1px solid rgba(230, 51, 18, 0.4);
    border-radius: 6px;
    margin-top: 0.5rem;
}

.kontakt-notruf-nummer {
    font-size: 2rem;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    flex-shrink: 0;
}

.kontakt-notruf-text {
    font-size: 0.875rem;
    color: #c8c8d0;
    line-height: 1.4;
}

body:not(.color-scheme-dunkel) .kontakt-notruf-text {
    color: #444;
}

/* ── Formular-Bereich (rechte Spalte) ──────────────────────── */
.kontakt-form-wrap {
    background: #272727;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 2rem 2rem 2.5rem;
}

body:not(.color-scheme-dunkel) .kontakt-form-wrap {
    background: #f8f8f8;
    border-color: #e0e0e0;
}

.kontakt-form-titel {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #3a3a3a;
}

body:not(.color-scheme-dunkel) .kontakt-form-titel {
    border-bottom-color: #e0e0e0;
}

/* Noch-nicht-konfiguriert-Hinweis */
.kontakt-form-hinweis {
    padding: 1.5rem;
    background: rgba(230, 51, 18, 0.08);
    border: 1px dashed rgba(230, 51, 18, 0.4);
    border-radius: 6px;
    font-size: 0.9rem;
    color: #c8c8d0;
}

.kontakt-form-hinweis code {
    background: #1e1e1e;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--red);
}

/* ============================================================
   FORMIDABLE FORMS – DARK-THEME OVERRIDE
   ============================================================ */

.color-scheme-dunkel .frm_forms,
.color-scheme-dunkel .with_frm_style {
    color: #e8e8e8;
}

/* Labels */
.color-scheme-dunkel .frm_form_field label,
.color-scheme-dunkel .frm_form_field .frm_primary_label {
    color: #c8c8d0 !important;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

/* Eingabefelder */
.color-scheme-dunkel .frm_forms input[type="text"],
.color-scheme-dunkel .frm_forms input[type="email"],
.color-scheme-dunkel .frm_forms input[type="tel"],
.color-scheme-dunkel .frm_forms textarea,
.color-scheme-dunkel .frm_forms select {
    background-color: #1e1e1e !important;
    border: 1px solid #3a3a3a !important;
    color: #f0f0f0 !important;
    border-radius: 5px !important;
    padding: 0.65rem 0.9rem !important;
    width: 100% !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
}

.color-scheme-dunkel .frm_forms input[type="text"]:focus,
.color-scheme-dunkel .frm_forms input[type="email"]:focus,
.color-scheme-dunkel .frm_forms input[type="tel"]:focus,
.color-scheme-dunkel .frm_forms textarea:focus,
.color-scheme-dunkel .frm_forms select:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(230, 51, 18, 0.18) !important;
    outline: none !important;
}

/* Textarea höher */
.color-scheme-dunkel .frm_forms textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

/* Placeholder */
.color-scheme-dunkel .frm_forms input::placeholder,
.color-scheme-dunkel .frm_forms textarea::placeholder {
    color: #606070 !important;
}

/* Submit-Button */
.color-scheme-dunkel .frm_forms [type="submit"],
.color-scheme-dunkel .frm_forms .frm_button_submit {
    background-color: var(--red) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.75rem 2rem !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    letter-spacing: 0.03em;
}

.color-scheme-dunkel .frm_forms [type="submit"]:hover,
.color-scheme-dunkel .frm_forms .frm_button_submit:hover {
    background-color: var(--red-dark) !important;
}

.color-scheme-dunkel .frm_forms [type="submit"]:active,
.color-scheme-dunkel .frm_forms .frm_button_submit:active {
    transform: scale(0.98) !important;
}

/* Fehlermeldungen */
.color-scheme-dunkel .frm_forms .frm_error {
    color: #ff6b6b !important;
    font-size: 0.82rem !important;
    margin-top: 0.25rem !important;
}

/* Erfolgsmeldung */
.color-scheme-dunkel .frm_forms .frm_message,
.color-scheme-dunkel .frm_forms .frm-show-form ~ .frm_message {
    background: rgba(230, 51, 18, 0.1) !important;
    border: 1px solid rgba(230, 51, 18, 0.4) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    color: #e8e8e8 !important;
}

/* Pflichtfeld-Stern */
.color-scheme-dunkel .frm_forms .frm_required {
    color: var(--red) !important;
}

/* Datenschutz-Checkbox-Label lesbar machen */
.color-scheme-dunkel .frm_forms .frm_checkbox label,
.color-scheme-dunkel .frm_forms .frm_radio label {
    color: #c8c8d0 !important;
    font-size: 0.875rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* Abstände zwischen Feldern */
.color-scheme-dunkel .frm_forms .frm_form_field {
    margin-bottom: 1.1rem !important;
}

/* Hellmodus: gleiche Overrides, aber für hellen Hintergrund */
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms input[type="text"],
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms input[type="email"],
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms input[type="tel"],
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms textarea,
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms select {
    background-color: #fff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 5px !important;
    padding: 0.65rem 0.9rem !important;
    width: 100% !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms input:focus,
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms textarea:focus,
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms select:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(230, 51, 18, 0.14) !important;
    outline: none !important;
}

body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms [type="submit"],
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms .frm_button_submit {
    background-color: var(--red) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 0.75rem 2rem !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms [type="submit"]:hover,
body:not(.color-scheme-dunkel) .kontakt-form-wrap .frm_forms .frm_button_submit:hover {
    background-color: var(--red-dark) !important;
}


/* ============================================================
   SPENDENAUFRUF – BETTERPLACE.ORG WIDGET (Startseite)
   ============================================================ */

.spenden-section {
    background: #0e0e1c;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2.5rem 0;
}

.spenden-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.spenden-text {
    flex: 1;
    min-width: 0;
}

.spenden-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red, #e63312);
    margin-bottom: 0.6rem;
}

.spenden-titel {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: #f0f0f0;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.spenden-beschreibung {
    font-size: 0.95rem;
    color: #a0a0b0;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    max-width: 520px;
}

.spenden-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--red, #e63312);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.spenden-link:hover {
    color: #ff5533;
    border-bottom-color: #ff5533;
}

.spenden-widget {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.spenden-widget iframe {
    display: block;
}

/* Responsive: untereinander stapeln */
@media (max-width: 768px) {
    .spenden-inner {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .spenden-beschreibung {
        max-width: 100%;
    }

    .spenden-widget iframe {
        width: 100%;
        max-width: 320px;
    }
}


/* ============================================================
   DWD WETTERWARNUNGS-BALKEN (Startseite, zwischen Hero und Feed)
   ============================================================

   Zum Deaktivieren: .dwd-hero-bar { display: none; }
   Warncell-ID und Cache-Key stehen in front-page.php (Zeile ③).
   ============================================================ */

.dwd-hero-bar {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: #0e0e1c;
    border-top: 4px solid var(--dwd-color, #2e7d32);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Überschrift: erklärt den Balken, ändert Farbe je Status */
.dwd-hero-bar__title {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #4a4a5a;
    margin: 0;
    padding: 0.75rem 2rem 0.1rem;
}
.dwd-hero-bar--active .dwd-hero-bar__title {
    color: color-mix(in srgb, var(--dwd-color, #e53935) 55%, #999);
}

.dwd-hero-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.8rem 2rem;
    text-align: center;
}

/* Icon (Emoji) */
.dwd-hero-bar__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Pulsierender Dot bei aktiver Warnung */
.dwd-hero-bar--active .dwd-hero-bar__icon {
    position: relative;
}
.dwd-hero-bar--active .dwd-hero-bar__icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--dwd-color, #e53935);
    animation: dwd-pulse 1.8s ease-in-out infinite;
}
@keyframes dwd-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(1.5); }
}

/* Haupt-Text */
.dwd-hero-bar__text {
    font-size: 1.05rem;
    font-weight: 500;
    color: #c8c8d0;
    letter-spacing: 0.01em;
}

/* "bis ..." Zeitangabe etwas schwächer */
.dwd-hero-bar__expires {
    font-weight: 400;
    color: #888;
    margin-left: 0.4em;
}

/* Bei aktiver Warnung: Text heller + subtiler Farbverlauf von oben */
.dwd-hero-bar--active .dwd-hero-bar__text {
    color: #f0f0f0;
}
.dwd-hero-bar--active {
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--dwd-color, #e53935) 12%, transparent),
        transparent
    );
}

/* DWD-Quellenlink – folgt dem Text im zentrierten Fluss */
.dwd-hero-bar__source {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 0.2rem 0.5rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dwd-hero-bar__source:hover {
    color: #aaa;
    border-color: #666;
}

/* NINA-Zeile (zweite Zeile, nur wenn aktiv) */
.dwd-hero-bar__nina {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 3px solid var(--nina-color, #1565C0);
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--nina-color, #1565C0) 8%, transparent),
        transparent 60%
    );
}
.dwd-hero-bar__nina .dwd-hero-bar__icon::after {
    background: var(--nina-color, #1565C0) !important;
}

/* Mobil: etwas kompakter */
@media (max-width: 600px) {
    .dwd-hero-bar__inner {
        padding: 1.2rem 1rem;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .dwd-hero-bar__text {
        font-size: 0.9rem;
    }
    .dwd-hero-bar__expires {
        display: block;
        margin-left: 0;
        margin-top: 0.15rem;
    }
}

/* ============================================================
   SITE HEADER – Logo Vollbreite + deutlicher Schrumpf-Effekt
   Normal:    160 px  (Panorama-Banner)
   Gescrollt:  65 px  (kompakter Streifen – fast halbiert)
   ============================================================ */

/* Container: volle Breite, kein Padding */
.site-header .site-branding,
.site-header .custom-logo-link {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
}

/* Logo-Bild: Höhe proportional zur Viewport-Breite (Bildverhältnis 2549:349 = 0.1369)
   → bis ~1460px Viewport: Bild komplett sichtbar, kein Zuschnitt
   → ab 1460px: Kappen bei 200px, nur weißer Himmel oben minimal abgeschnitten */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .site-logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: fill !important;
    object-position: center !important;
    display: block !important;
    transition: opacity 0.35s ease !important;
}

/* Beim Scrollen: sanft auf 70px schrumpfen */
body.is-scrolled .site-header .custom-logo,
body.is-scrolled .site-header .custom-logo-link img,
body.is-scrolled .site-header .site-logo img {
    max-height: 65px !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center bottom !important;
}

/* ── Navigation: etwas größer, luftiger ─────────────────────── */
#site-navigation .menu-item > a,
.main-navigation .menu-item > a {
    font-size: 16px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Untermenüs nicht größer machen */
#site-navigation .sub-menu .menu-item > a,
.main-navigation .sub-menu .menu-item > a {
    font-size: 14px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ============================================================
   STATISTIK – Dark Mode Overrides
   Behebt: weiße Buttons/Labels auf dunklem Hintergrund (unleserlich)
   ============================================================ */

.color-scheme-dunkel .statistik-filter-wrap {
    background: #252525;
}

.color-scheme-dunkel .statistik-filter-label {
    color: #c8c8d0;
}

.color-scheme-dunkel .statistik-checkbox-label {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.color-scheme-dunkel .statistik-preset-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #c8c8d0;
}

.color-scheme-dunkel .statistik-preset-btn:hover {
    border-color: var(--red, #e63312);
    color: var(--red, #e63312);
}

.color-scheme-dunkel .statistik-typ-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #c8c8d0;
}

.color-scheme-dunkel .statistik-typ-btn.aktiv {
    background: var(--red, #e63312);
    border-color: var(--red, #e63312);
    color: #fff;
}

.color-scheme-dunkel .statistik-chart-wrap {
    background: #1e1e1e;
    border-color: #333;
}

.color-scheme-dunkel .statistik-tabelle-wrap {
    border-color: #333;
}

.color-scheme-dunkel .statistik-tabelle th,
.color-scheme-dunkel .statistik-tabelle td {
    border-bottom-color: #333;
    color: #e0e0e0;
}

.color-scheme-dunkel .statistik-tabelle thead th {
    background: #252525;
    color: #c8c8d0;
}

.color-scheme-dunkel .statistik-tabelle tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.color-scheme-dunkel .statistik-gesamt {
    color: #f0f0f0;
}

.color-scheme-dunkel .statistik-null {
    color: #555;
}

.color-scheme-dunkel .statistik-hinweis {
    background: rgba(59, 130, 246, 0.12);
    border-left-color: #3b82f6;
    color: #90c4ff;
}

.color-scheme-dunkel .statistik-warnung {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
    color: #fcd34d;
}