/* 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%;
    min-height: 90px;
    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;
}

.ad-leaderboard .ad-box { min-height: 90px; }
.ad-rectangle .ad-box { min-height: 250px; }
.ad-incontent .ad-box { min-height: 90px; }

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

/* 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: #ffffff;
    --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;
}

[data-theme="dark"] {
    /* Bläulicher Dark Mode */
    --bg: #010008;          /* dunkel-blaues Grundlayout */
    --text: #e6eefc;        /* leicht bläuliches Weiß */
    --muted: #9bb0d1;       /* gedämpftes Blau-Grau */
    --card-bg: #111a2e;     /* Karten/Flächen */
    --border: #1f2b46;      /* 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;
}

/* 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;
}