/*
 * cassiopeia_extended – Layout CSS
 * Voltage Life Support
 *
 * Header-Bild tauschen: /media/templates/site/cassiopeia_extended/images/header.jpg ersetzen
 * (gleicher Name, gleiche Größe → fertig, kein CSS-Änderung nötig)
 */

/* ── Body ─────────────────────────────────────────────────────────────────── */
body {
    background-color: var(--body-bg, #fefefe);
    color: var(--body-color, #171717);
    font-size: var(--body-font-size, 1rem);
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
#topnav {
    background-color: var(--headerbg, #c1cdcf);
    color: var(--headercolor, #171717);
    padding: 0.5rem 0;
}

#topnav a,
#topnav a:visited {
    color: var(--headercolor, #171717);
    text-decoration: none;
}

#topnav a:hover {
    color: var(--link-color, #1d7989);
}

/* ── Header-Bild ──────────────────────────────────────────────────────────── */
/*
 * Bildgröße: einmalig height anpassen.
 * Danach nur die Datei header.jpg tauschen – CSS bleibt unverändert.
 */
#header-image {
    background-image: url('../images/header.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 220px;        /* ← ggf. einmalig an Bildhöhe anpassen */
}

/* ── Hauptinhalt ──────────────────────────────────────────────────────────── */
.main-container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ── Sidebars ─────────────────────────────────────────────────────────────── */
.sidebar {
    padding-top: 0.25rem;
}

/* ── Bottom-Module (bottom1–4) ────────────────────────────────────────────── */
#bottom-modules {
    background-color: var(--headerbg, #c1cdcf);
    padding: 1.25rem 0;
    margin-top: 1rem;
}

#bottom-modules .col {
    min-width: 0;
}

/* ── Bottom-Slider (DJ-Mix Audio-Player) ─────────────────────────────────── */
#bottom-slider {
    width: 100%;
    background: url('../images/bg.jpg') #999999 center center / cover no-repeat;
    padding: 0;
    line-height: 1;
    display: flex;
    justify-content: center;
}

#bottom-slider > * {
    flex-shrink: 0;
}


.ttw-music-player {          /* ← NEU */
    margin: 0 auto;
}

/* ── Footer / Copyright ───────────────────────────────────────────────────── */
#site-footer {
    background-color: var(--footerbg, #1d7989);
    color: var(--footercolor, #fefefe);
    padding: 0.75rem 0;
    margin-top: 0;
}

#site-footer a,
#site-footer a:visited {
    color: var(--footercolor, #fefefe);
}

.copyright {
    margin: 0;
    font-size: 0.85rem;
    text-align: center;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1 { font-size: var(--h1size, 2rem); }
h2 { font-size: var(--h2size, 1.7rem); }
h3 { font-size: var(--h3size, 1.5rem); }

/* ── Links ────────────────────────────────────────────────────────────────── */
a       { color: var(--link-color, #1d7989); }
a:hover { color: var(--link-hover-color, #0e3b43); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--btnbg, #ce3c37);
    border-color:     var(--btnbg, #ce3c37);
    color:            var(--btncolor, #fefefe);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btnbgh, #832320);
    border-color:     var(--btnbgh, #832320);
    color:            var(--btncolorh, #fefefe);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #header-image {
        height: 140px;
    }

    #topnav .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
#breadcrumbs-bar {
    background-color: var(--body-bg, #fefefe);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border, #e0e0e0);
    font-size: 0.85rem;
}

/* ── Category view: subcategory list ──────────────────────────────────────── */
/* Space between the "New Article" button / article list and the subcategories */
.cat-children {
    clear: both;
    margin-top: 2rem;
}

.cat-children > h3 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

/* One row per subcategory: article count first, then the name */
.com-content-category__children .item-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.com-content-category__children .item-title .badge {
    order: -1;
    min-width: 2rem;
    text-align: center;
}

/* ── Error page: banner crop with the red neon sign ──────────────────────── */
#header-image.header-image--error {
    background-image: url('../images/header-error.jpg');
    background-position: center center;
}

/* ── Left sidebar: bold menu links, login form set apart ─────────────────── */
#sidebar-left .mod-menu a {
    font-weight: 700;
}

/* One line of space above the rule, one line below it, half the sidebar width */
#sidebar-left form[id^="login-form"] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(23, 23, 23, 0.35);
}

@media (min-width: 768px) {
    #sidebar-left form[id^="login-form"] {
        width: 50%;
    }
}