/* Grundlayout */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Hero */
.site-hero .hero-tagline {
    color: #6c757d;
    background: var(--header-logo);
}

#site-hero { background-color: var(--header-logo); }

/* Navbar-Logo Verhalten: standardmäßig versteckt, beim Scrollen sichtbar */
.navbar-brand img {
    transition: opacity .2s ease, transform .2s ease, height .2s ease;
}

/* Werbung Platzhalter */
.ad .ad-box {
    width: 100%;
    max-height: 60px;
    background: repeating-linear-gradient(45deg, #e9ecef, #e9ecef 10px, #f8f9fa 10px, #f8f9fa 20px);
    border: 2px dashed #adb5bd;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 35px;
}

.ads-60-mobile { display: inline-block; }
.ads-60-desktop { display: none; }
@media (min-width: 576px) {
    .ads-60-mobile { display: none !important; }
    .ads-60-desktop { display: inline-block !important; }
}


.ad-leaderboard .ad-box { height: 90px; display: inline-block;}
.ad-rectangle .ad-box { height: 50px; display: inline-block;}
.ad-incontent .ad-box { height: 60px; display: inline-block;}

/* Sticky Sidebar (ab md aufwärts) */
@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: 90px; /* Höhe der Navbar */
        color: var(--link);
    }
}

.list-group ul, list-group li, list-group a, list-group a:hover, .list-group a:focus { color: var(--link-hover); }


/* Sticky Footer Ad */
.ad-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: .5rem 1rem;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #dee2e6;
    align-items: center;
    justify-content: center;
}
.ad-sticky-footer .ad-box {
    max-width: 728px;
    min-height: 90px;
}
.ad-sticky-footer .close-sticky-ad {
    position: absolute;
    right: .5rem;
    top: .25rem;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
}

/* Logo-Verhalten beim Scrollen */
body.nav-scrolled #site-hero {
    padding-top: .25rem;
    padding-bottom: .25rem;
}
body.nav-scrolled #navLogo {
    display: inline-block !important;
    opacity: 1;
    transform: translateY(0);
}
#navLogo {
    opacity: 0;
    transform: translateY(-5px);
}

/* Karten */
.card img {
    object-fit: cover;
}

/* Hilfsklassen */
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }

/* ===== Theme (Light/Dark/Auto) ===== */
:root {
    --bg: #bcbcbc;
    --text: #212529;
    --muted: #6c757d;
    --card-bg: #ffffff;
    --border: #dee2e6;
    --navbar-bg: #ffffff;
    --navbar-link: #212529;
    --dropdown-bg: #ffffff;
    --dropdown-link: #212529;
    --link: #0d6efd;
    --link-hover: #0b5ed7;
    --header-logo: #ffffff;
    --nav-logo: #d71e1f;
}

[data-theme="dark"] {
    /* Bläulicher Dark Mode */
    --bg: #434343;          /* dunkel-blaues Grundlayout */
    --text: #e6eefc;        /* leicht bläuliches Weiß */
    --muted: #9bb0d1;       /* gedämpftes Blau-Grau */
    --card-bg: #535353;     /* Karten/Flächen */
    --border: #202020;      /* bläuliche Kante */
    --navbar-bg: #0f1930;   /* Navbar abgesetzt */
    --navbar-link: #dce7ff; /* gute Lesbarkeit */
    --dropdown-bg: #0f1b33; /* Menüs */
    --dropdown-link: #dce7ff;
    --link: #76a7ff;        /* Links in Dark */
    --link-hover: #98bdff;
    --header-logo: #0f1930;
    --nav-logo: #d71e1f;
}

/* Grundfarben anwenden */
html, body {
    background-color: var(--bg);
    color: var(--text);
}

/* Standard Links */
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

/* Cards, Tabellenhintergrund */
.card {
    background-color: var(--card-bg);
    border-color: var(--border);
    color: var(--text);
}
.table {
    color: var(--text);
}

/* Navbar (nur bg-white-Variante anpassen) */
.navbar.bg-white {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border);
}
.navbar .nav-link {
    color: var(--navbar-link) !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus {
    opacity: .85;
}

.card-img-top-story{
    height: 350px;
    width: 100%;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    color: var(--dropdown-link);
    border-color: var(--border);
}
.dropdown-item {
    color: var(--dropdown-link);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(0,0,0,.06);
}
/* Bläulicher Hover nur im Dark Mode */
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(96, 141, 255, 0.12);
}

/* Footer: belassen, da eigenständig dunkel */
footer.bg-dark {
    /* Optional: bei Dark-Theme etwas aufhellen
    background-color: #0e0e0e !important;
    */
}

/* Anzeigen-Boxen leicht abdunkeln im Darkmode (bläuliche Schraffur) */
[data-theme="dark"] .ad .ad-box {
    background: repeating-linear-gradient(
            45deg,
            #192646,
            #192646 10px,
            #12203c 10px,
            #12203c 20px
    );
    border-color: #243a63;
    color: #e0ecff;
}

/* Sanfte Transitionen beim Umschalten */
body, .card, .navbar, .dropdown-menu, .ad .ad-box, .table, .nav-link, a {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.page-content {
    background: var(--card-bg);
    width: 100%;
}

.page-header {
    border-bottom: 1px solid var(--border);
    font-size: 20pt;
    padding: 10px;
    font-weight: bold;
}

.page-header h1

.page-body {
    padding: 10px;
}

.artikel-front {
    color: var(--text);
}

.artikel-front a{
    color: var(--link);
    text-decoration: none;
}

.sidebar-header {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 10px;
}

.sidebar-header h4 {
    margin-bottom: 0; /* Margin vom h4 entfernen, da das DIV das übernimmt */
}

.sidebar-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--link) 30%, var(--border) 30%);
    display: block;
}

/* Sidebar Kategorien-Liste */
.category-link {
    color: var(--text);
    transition: all 0.2s ease-in-out;
    padding: 8px 0;
}

.category-link:hover {
    color: var(--link);
    padding-left: 5px; /* Leichter Einrück-Effekt beim Hover */
}

.category-link i {
    color: var(--muted);
    font-size: 0.8em;
    transition: color 0.2s ease;
}

.category-link:hover i {
    color: var(--link);
}