/* Ausgelagert aus: news.php – CSS-Variablen-kompatibel */

.news-hero {
    background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-page) 100%);
    border-bottom: 3px solid var(--red);
    padding: 48px 24px 36px;
    text-align: center;
}
.news-hero h1 { font-family:'Oswald',sans-serif; font-size:clamp(2rem,5vw,3rem); color:var(--text-main); letter-spacing:2px; margin:0 0 8px; }
.news-hero h1 span { color:var(--red); }
.news-hero p { color:var(--text-muted); font-size:.95rem; margin:0; }

.news-filter-bar {
    background:var(--bg-section);
    border-bottom:1px solid var(--border-col);
    padding:0 24px;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}
.news-filter-bar::-webkit-scrollbar { height:3px; }
.news-filter-bar::-webkit-scrollbar-thumb { background:var(--red); border-radius:2px; }

.filter-tabs { display:inline-flex; gap:0; list-style:none; margin:0; padding:0; }
.filter-tabs li a {
    display:block; padding:14px 18px; color:var(--text-muted); text-decoration:none;
    font-size:.82rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    border-bottom:3px solid transparent; transition:color .2s,border-color .2s;
}
.filter-tabs li a:hover { color:var(--text-main); }
.filter-tabs li a.active { color:var(--red); border-bottom-color:var(--red); }

.filter-group { position:relative; display:inline-block; }
.filter-group > a::after { content:' ▾'; font-size:.7em; }
.filter-dropdown {
    display:none; position:absolute; top:100%; left:0;
    background:var(--bg-card); border:1px solid var(--border-col); border-top:2px solid var(--red);
    border-radius:0 0 8px 8px; min-width:180px; z-index:100;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.filter-group:hover .filter-dropdown { display:block; }
.filter-dropdown a {
    display:block; padding:10px 16px; color:var(--text-muted); text-decoration:none;
    font-size:.82rem; border-bottom:1px solid var(--border-col); transition:background .15s,color .15s;
}
.filter-dropdown a:last-child { border-bottom:none; }
.filter-dropdown a:hover { background:var(--red); color:#fff; }
.filter-dropdown a.active { color:var(--red); font-weight:600; }
.filter-dropdown .dd-divider {
    padding:6px 16px 4px; font-size:.65rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted);
    border-bottom:1px solid var(--border-col); pointer-events:none;
}

.news-grid-wrap { max-width:1200px; margin:0 auto; padding:40px 24px 60px; }
.news-count { color:var(--text-muted); font-size:.82rem; margin-bottom:24px; }
.news-count strong { color:var(--red); }

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px) { .news-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px) { .news-grid { grid-template-columns:1fr; } }

.news-card {
    background:var(--bg-card); border-radius:10px; overflow:hidden;
    border:1px solid var(--border-col); display:flex; flex-direction:column;
    transition:transform .2s,border-color .2s,box-shadow .2s;
}
.news-card:hover { transform:translateY(-4px); border-color:var(--red); box-shadow:0 8px 32px rgba(204,0,0,.15); }
.news-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.news-card-img-placeholder {
    width:100%; aspect-ratio:16/9;
    background:linear-gradient(135deg, var(--bg-section), var(--bg-card));
    display:flex; align-items:center; justify-content:center; font-size:2.5rem;
}
.news-card-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.news-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.news-card-team {
    background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
    letter-spacing:.8px; text-transform:uppercase; padding:3px 8px; border-radius:3px;
}
.news-card-cat {
    background:var(--bg-section); color:var(--text-muted); font-size:.65rem; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:3px;
}
.news-card-date { color:var(--text-muted); font-size:.75rem; }
.news-card-title { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:600; color:var(--text-main); margin:0 0 10px; line-height:1.35; }
.news-card-title a { color:inherit; text-decoration:none; transition:color .2s; }
.news-card-title a:hover { color:var(--red); }
.news-card-teaser { color:var(--text-muted); font-size:.85rem; line-height:1.65; flex:1; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-link { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:.8rem; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.5px; transition:gap .2s; }
.news-card-link:hover { gap:10px; }

.news-empty { text-align:center; padding:80px 24px; color:var(--text-muted); }
.news-empty .icon { font-size:3rem; margin-bottom:16px; }
.news-empty p { font-size:1rem; }

.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:48px; flex-wrap:wrap; }
.pagination a, .pagination span {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:38px; padding:0 12px; background:var(--bg-card); color:var(--text-muted);
    border:1px solid var(--border-col); border-radius:6px; text-decoration:none;
    font-size:.85rem; font-weight:600; transition:all .2s;
}
.pagination a:hover { background:var(--red); color:#fff; border-color:var(--red); }
.pagination span.current { background:var(--red); color:#fff; border-color:var(--red); }
.pagination span.dots { background:transparent; border-color:transparent; color:var(--text-muted); }