/* =============================================================
   1. JAHRESZEITEN ANIMATIONEN (Dein Original)
   ============================================================= */
.season-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.season-item {
    position: absolute;
    top: -50px;
    animation: fall linear infinite;
    opacity: 0.9;
    user-select: none;
    z-index: 99999;
}

@keyframes fall {
    0% { transform: translateY(-50px) translateX(0px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(110vh) translateX(20px) rotate(360deg); opacity: 0.7; }
}

/* =============================================================
   2. GENERELLE FIXES (Responsivität & Bilder)
   ============================================================= */

/* Verhindert, dass Bilder das Layout sprengen */
img {
    max-width: 100%;
    height: auto;
}

/* Navbar Toggler Fix */
.navbar-toggler {
    border-color: rgba(255,255,255,0.1);
}

/* Social Icons in der Navbar klein halten */
.nav-svg-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* =============================================================
   3. BLOG & CARDS (home.php)
   ============================================================= */

/* Titelbilder in den Cards einheitlich machen */
.lc-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .lc-card-img {
        height: 180px; /* Auf Handys etwas schmaler */
    }
}

/* Fix für den Header, damit er nicht unter der Navbar verschwindet */
header.welcome {
    padding-top: 100px !important; /* Erhöht den Abstand oben */
    padding-bottom: 40px;
}

/* Mobile Optimierung: Auf kleinen Bildschirmen ist die Navbar oft höher */
@media (max-width: 768px) {
    header.welcome {
        padding-top: 120px !important; 
    }
    
    header.welcome h1 {
        font-size: 1.8rem; /* Verkleinert die Schrift etwas für Handys */
    }
}

/* =============================================================
   4. FOOTER (Zentrierter Zweizeiler Fix)
   ============================================================= */

.footer {
    padding: 20px 0;
}

.footer p {
    display: flex;
    flex-direction: column; /* Stapelt Text und Logo untereinander */
    align-items: center;    /* Zentriert beide Zeilen */
    justify-content: center;
    text-align: center;
    gap: 8px;               /* Abstand zwischen Copyright und Powered-by */
    margin: 0;
}

.footer span {
    margin-left: 0 !important; /* Entfernt den alten Bootstrap-Abstand */
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .mini-logo {
    display: inline-block !important;
    max-height: 20px;
    width: auto;
    margin: 0 8px;
    vertical-align: middle;
}

/* Link-Styling im Footer */
.footer a {
    text-decoration: underline;
    font-weight: bold;
}

/* =============================================================
   6. DER ULTIMATIVE ABSTANDS-FIX (Für alle Unterseiten)
   ============================================================= */
section.page {
    padding-top: 80px !important;    
    padding-bottom: 60px !important; 
    /* 100dvh passt sich dynamisch an jedes Handy an. Wir ziehen nur noch 110px ab */
    min-height: calc(100dvh - 110px) !important; 
}

/* =============================================================
   7. WIDGET & FORMULAR KONTRAST-FIX (Newsletter, Kommentare, Login)
   ============================================================= */

/* 1. Zwingt alle Überschriften in den Widgets zur starken Überschriften-Farbe */
#lecms-newsletter-area h1,
#lecms-newsletter-area h2,
#lecms-newsletter-area h3,
#lecms-newsletter-area h4,
#lecms-newsletter-area h5,
.plugin-comments h3,
.plugin-comments h4,
.plugin-comments h5,
.card-body h5.card-title {
    color: var(--text-head) !important;
}

/* 2. Zwingt die Beschriftungen (Labels wie "Deine E-Mail Adresse") zur normalen, gut lesbaren Textfarbe */
#lecms-newsletter-area label,
.plugin-comments label,
.card-body .form-label,
.card-body label {
    color: var(--text-main) !important;
    font-weight: bold; /* Macht es zusätzlich etwas knackiger */
    opacity: 1 !important; /* Verhindert, dass Bootstrap die Schrift blass macht */
}

/* 3. Repariert die blassen Bootstrap-Klassen global für deinen Dark/Light-Mode */
.text-muted {
    color: var(--text-meta) !important;
}
/* =============================================================
   7. ULTIMATIVES WIDGET- & FORMULAR-DESIGN (Dark & Light Mode)
   ============================================================= */

/* 1. Hintergründe der Widgets an deine Theme-Karten anpassen */
#lecms-newsletter-area,
.plugin-comments,
.card,              /* Zwingt die Forum-Login-Karte in dein Design */
.lf-form-box {      /* Forum Antworten Box */
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px; /* Schöne Rundungen passend zum Theme */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Dezenter Schatten */
}

/* Extra-Fix für das Newsletter-Plugin (falls es keinen eigenen Kasten hat) */
#lecms-newsletter-area {
    padding: 25px;
    margin-top: 20px;
}

/* 2. Überschriften in den Widgets knackig und lesbar machen */
#lecms-newsletter-area h1, #lecms-newsletter-area h2, #lecms-newsletter-area h3,
.plugin-comments h3, .plugin-comments h4,
.card-title, .lf-form-box h5 {
    color: var(--text-head) !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 3. Normaler Text und Labels (z.B. "Deine E-Mail Adresse") */
#lecms-newsletter-area label,
#lecms-newsletter-area p,
.plugin-comments label,
.plugin-comments p,
.card-body p,
.card-body label,
.lf-form-box label {
    color: var(--text-main) !important;
    opacity: 1 !important; /* Schaltet das Bootstrap-Grau ab */
    font-weight: 500;
}

/* 4. Eingabefelder (Inputs & Textareas) abdunkeln/aufhellen */
#lecms-newsletter-area input,
.plugin-comments input,
.plugin-comments textarea,
.leforum-wrap input,
.leforum-wrap textarea,
.form-control {
    background-color: var(--bg-body) !important; /* Hebt sich leicht von der Karte ab */
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* 5. Fokus-Status (Wenn man ins Feld klickt) */
#lecms-newsletter-area input:focus,
.plugin-comments input:focus,
.plugin-comments textarea:focus,
.leforum-wrap input:focus,
.leforum-wrap textarea:focus,
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 5px var(--accent) !important;
    outline: none;
}

/* =============================================================
   8. NEWSLETTER WIDGET - DER ULTIMATIVE KONTRAST-FIX
   ============================================================= */

/* 1. Zerstört hartnäckige graue Bootstrap-Kästen INNERHALB des Newsletters */
#lecms-newsletter-area .card,
#lecms-newsletter-area .bg-light,
#lecms-newsletter-area .card-body,
#lecms-newsletter-area .bg-white {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Macht den äußeren Rahmen zur edlen Theme-Karte */
#lecms-newsletter-area {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin-top: 30px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

/* 3. Überschrift ("Newsletter") zwingend auf Theme-Farbe */
#lecms-newsletter-area h1,
#lecms-newsletter-area h2,
#lecms-newsletter-area h3,
#lecms-newsletter-area h4 {
    color: var(--text-head) !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* 4. Labels ("Deine E-Mail Adresse") und normaler Text zwingend gut lesbar */
#lecms-newsletter-area label,
#lecms-newsletter-area p,
#lecms-newsletter-area small,
#lecms-newsletter-area span,
#lecms-newsletter-area div.text-muted {
    color: var(--text-main) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* 5. Eingabefeld passend zum Dark/Light Mode machen */
#lecms-newsletter-area input[type="email"],
#lecms-newsletter-area input[type="text"] {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

#lecms-newsletter-area input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 5px var(--accent) !important;
    outline: none !important;
}