/* ========================================
   AKTUELLES – FILTER & DETAILANSICHT
======================================== */

.aktuelles-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Filterleiste */
.filter-bar {
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}

.filter-select {
    min-width: 180px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    font-size: var(--text-sm);
    color: var(--gray-700);
    background: var(--gray-50);
}

.filter-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-reset {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    background: var(--white);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-reset:hover {
    background: var(--gray-50);
}

.btn-filter-primary {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: none;
    background: var(--petrol-main);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.btn-filter-primary:hover {
    background: var(--petrol-dark);
}

.filter-hint {
    font-size: var(--text-xs);
    color: var(--gray-600);
}

/* News-Grid innerhalb der Aktuelles-Seite nutzt vorhandene .news-card Styles */
.aktuelles-main .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Platzhalter, wenn keine Beiträge gefunden wurden */
.news-empty {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    font-size: var(--text-sm);
    color: var(--gray-700);
}

/* Pagination der Aktuelles-Seite */
.aktuelles-pagination {
    margin-top: var(--space-4);
    text-align: center;
}

.aktuelles-pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.aktuelles-pagination .page-numbers.current {
    background: var(--petrol-main);
    color: var(--white);
    border-color: var(--petrol-main);
}

/* Einzelansicht eines Beitrags */
.post-content {
    background: var(--white);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-200);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.post-header {
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-2);
}

.post-meta {
    font-size: var(--text-sm);
    color: var(--gray-600);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.post-separator {
    opacity: 0.5;
}

.post-body {
    font-size: var(--text-base);
    color: var(--gray-800);
    line-height: 1.8;
    margin-top: var(--space-3);
}

.post-body p {
    margin-bottom: var(--space-3);
}

.post-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.post-tags {
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.post-tags span {
    display: inline-block;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
}

/* Responsive für Filterbar */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* -----------------------------
   ONLY FOR Aktuelles Page
   (WP-Body-Klasse: page-template-page-aktuelles)
------------------------------ */

/* Filterkarte wie im Entwurf */
.page-template-page-aktuelles .filter-bar {
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-2xl);
}

/* Dropdowns "ent-verhunzen" – Text wieder normal anzeigen */
.page-template-page-aktuelles .filter-select {
    font-size: var(--text-sm) !important;
    color: var(--gray-700) !important;
    background-color: var(--gray-50) !important;
    line-height: 1.4 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    padding: var(--space-2) var(--space-3) !important;
    width: 100%;
}

/* Schnelleinstieg: weniger Einrückung & kompaktere Icons */
.page-template-page-aktuelles .sidebar-nav {
    padding: var(--space-3);
}

.page-template-page-aktuelles .sidebar-links a {
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
}

.page-template-page-aktuelles .sidebar-links span {
    font-size: var(--text-sm); /* Text normal groß */
}

/* Das erste span ist das Icon – etwas größer, aber nicht riesig */
.page-template-page-aktuelles .sidebar-links span:first-child {
    font-size: var(--text-base);
    margin-right: var(--space-1);
}

/* Kategorie-Badge in der Beitragliste hübsch stylen */
.page-template-page-aktuelles .news-category {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);

    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    background: var(--gray-100);
    color: var(--petrol-dark);
    margin-bottom: var(--space-2);
}

/* Datum leicht „sekundär“ darunter/ darüber */
.page-template-page-aktuelles .news-date {
    font-size: var(--text-sm);
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

/* Falls du sicherstellen willst, dass die Beiträge
   untereinander statt im Grid stehen: */
.page-template-page-aktuelles .aktuelles-main .news-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}


/* Aktuelles: Select-Felder komplett neu stylen, damit der Text sichtbar ist */
.page-template-page-aktuelles select.filter-select {
    all: unset;                    /* alles zurücksetzen (nur dieses Select!) */
    box-sizing: border-box;
    display: block;
    width: 100%;

    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);

    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--gray-700);
    background-color: var(--gray-50);

    cursor: pointer;
    line-height: 1.4;
}

/* Fokus-/Hover-Zustand, damit es sich wie ein Formularfeld anfühlt */
.page-template-page-aktuelles select.filter-select:focus {
    outline: none;
    border-color: var(--petrol-main);
    box-shadow: 0 0 0 2px rgba(0, 137, 168, 0.15);
}

.page-template-page-aktuelles select.filter-select:hover {
    border-color: var(--gray-400);
}


/* Aktuelles: Datum + Kategorie in eine Zeile holen */
.page-template-page-aktuelles .news-card > .news-date,
.page-template-page-aktuelles .news-card > .news-category {
    display: inline-flex;
    align-items: center;
}

/* Datum leicht sekundär */
.page-template-page-aktuelles .news-card > .news-date {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

/* Kategorie-Badge neben dem Datum mit Abstand */
.page-template-page-aktuelles .news-card > .news-category {
    margin-left: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);

    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    background: var(--gray-100);
    color: var(--petrol-dark);
}


/* Meta-Zeile (Datum + Kategorie) in einer Reihe */
.page-template-page-aktuelles .news-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-2);
}

/* Datum leicht hervorgehoben, aber zurückhaltend */
.page-template-page-aktuelles .news-meta .news-date {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

/* Kategorie als Badge direkt daneben */
.page-template-page-aktuelles .news-meta .news-category {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);

    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    background: var(--gray-100);
    color: var(--petrol-dark);
}


/* Aktuelles – Abstand zwischen den beiden Sidebar-Blöcken */
.page-template-page-aktuelles .sidebar-nav + .sidebar-nav {
    margin-top: var(--space-4);
}

/* Listen in der Sidebar etwas luftiger */
.page-template-page-aktuelles .sidebar-links li + li {
    margin-top: 0.75rem;
}