@import url("variables.css");
@import url("bootstrap-override.css");
@import url("components.css");
@import url("articles.css");
@import url("software.css");

body {
    background-color: var(--site-background);
    color: var(--site-text);
}

.container-footer,
.container-header {
    background: var(--site-background);
    color: var(--site-text);
}

.item-content {
    margin-inline: 2rem;
}

.blog-item + .blog-item .item-content {
    padding-top: 2rem;
    border-top: 1px solid var(--site-border);
}

/* ==========================================================
   Images
   ========================================================== */
.float-start { margin-right: 1rem; }
.float-end { margin-left: 1rem; }

/* ==========================================================
   Tag List / Category List Beschreibung
   ========================================================== */
.com-tags-tag-list__description img[src$=".svg"],
.category-desc img[src$=".svg"] {
    max-width: 150px;
    height: auto;
    display: block;
}

.category-desc:not(:has(*)) {
    display: none;
}

/* Beschreibung der Tag-Kategorie */
/* .com-tags-tag-list__description,
.category-desc {
    display: flex;
    align-items: center;
    gap: 2rem;

    margin-bottom: 2rem;
    padding: 1rem 1.5rem;

    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
} */

.com-tags-tag-list__description,
.category-desc {
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;

    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);

    overflow: auto;
}


.category-desc img {
    float: left;
    width: 180px;
    height: auto;
    margin: 0 2rem 1rem 0;
}

.category-desc p {
    flex: 0 0 100%;
}

/* Logo */
.com-tags-tag-list__description img,
.category-desc img {
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

/* Text */
.com-tags-tag-list__description p {
    margin: 0;
}


@media (max-width: 768px) {
    .com-tags-tag-list__description {
        flex-direction: column;
        text-align: center;
    }

    .com-tags-tag-list__description img {
        width: 100px;
    }
}

/* ==========================================================
   Überschriften
   ========================================================== */

h1 {
    color: var(--site-text);
    font-size: 2.3rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

h2 {
    color: var(--site-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h3 {
    color: var(--site-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

h4 {
    color: var(--site-primary);
    font-size: 1.25rem;
    font-weight: 600;
}


/* Links */
a {
    color: var(--site-primary);
    text-decoration: none;
}

a:hover {
    color: var(--site-primary-hover);
    text-decoration: underline;
}

/* ==========================================================
    Category Cards
   ========================================================== */
.category-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.category-card .card {
    overflow: hidden;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.category-card .card-img-top {
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}

.category-card .card-body {
    background: var(--site-section);
    border-top: 4px solid var(--site-primary);
    text-align: center;
    padding: .8rem 1rem;
}

.category-card .card-title {
    margin: 0;
    color: var(--site-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.category-card:hover .card {
    transform: translateY(-3px);
    border-color: var(--site-primary);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
}

.category-card:hover .card-img-top {
    transform: scale(1.03);
}

.category-card:hover .card-body {
    background: var(--site-section);
}

/* ==========================================================
   Bereiche
   ========================================================== */

/* Hintergrund */
.container-header .grid-child,
.container-footer .grid-child,
.mod-breadcrumbs {
    background: var(--site-section);
}

/* Heller Hintergrund (surface) */
.container-sidebar-right .card,
.container-sidebar-left .card,
.main-top,
.container-component > main > .com-content-article,
.container-component > main > .blog-featured {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: .5rem;
}

/* Module anpassen */
.container-sidebar-right .card-header {
    background: var(--site-section);
    border-bottom: 1px solid var(--site-border);
    padding: .6rem 1rem;
}

.container-sidebar-right .card-title,
.container-sidebar-right h3,
.container-sidebar-right h4 {
    margin: 0;
    color: var(--site-primary);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

.container-header .grid-child {
    margin-top: 1rem;
}

.container-footer .grid-child {
    margin-bottom: 1rem;
}

.container-sidebar-right .card-body {
    padding: 1rem;
}

/* ==========================================================
    Article
   ========================================================== */
.com-content-article {
    padding: 1rem;
}

/* Alle automatisch erzeugten Tags */
.tags .btn {
    background: var(--site-section);
    color: var(--site-primary);
    border: 1px solid var(--site-border);
    border-radius: 999px;

    font-size: .9rem;
    font-weight: 600;

    padding: .35rem .75rem;
}

/* Runde Ecken */
.mod-breadcrumbs,
.container-header .grid-child,
.container-sidebar-right .card,
.container-footer .grid-child {
    border-radius: var(--radius-md);
}

/* ==========================================================
    Tabellen
   ========================================================== */

.game-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--site-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--site-surface);
}

.game-table thead th {
    background: var(--site-table-header);
    color: var(--site-primary);
    font-weight: 600;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--site-border);
}

.game-table th,
.game-table td {
    padding: .75rem 1rem;
}

.game-table tbody th,
.game-table tfoot th {
    width: 11rem;
    color: var(--site-primary);
    background: var(--site-section);
    font-weight: 600;
    padding: .75rem 1rem;
}

.game-table tfoot th,
.game-table tfoot td {
    border-top: 1px solid var(--site-border);
}

.game-table thead th:first-child {
    text-align: right;
    padding: .75rem 1rem;
}



/* =====================================================
   Navigation - Sidebar Menü
   ===================================================== */

/* =====================================================
   Navigation - Sidebar Menü
   ===================================================== */

/* Hauptmenü */
.mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Alle Menüpunkte */
.mod-menu li {
    margin: 0;
}

/* Links allgemein */
.mod-menu a {
    display: block;
    padding: .2rem .75rem;
    color: var(--site-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color .2s ease,
                background-color .2s ease;
}

/* Hover */
.mod-menu a:hover,
.mod-menu a:focus {
    color: var(--site-primary);
    background: var(--site-section);
}

/* Erste Ebene */
.mod-menu > li > a {
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: .1rem;
}

/* Untermenüs */
.mod-menu .mod-menu__sub {
    margin: .35rem 0 .5rem 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--site-border);
}

/* Unterpunkte */
.mod-menu .mod-menu__sub a {
    font-size: .95rem;
    font-weight: 400;
    color: var(--site-text-light);
}

/* Aktiver Menüpunkt */
.mod-menu .active > a,
.mod-menu .current > a {
    color: var(--site-primary);
    font-weight: 600;
    background: var(--site-section);
}

/* Aktiver Unterpunkt */
.mod-menu .mod-menu__sub .active > a,
.mod-menu .mod-menu__sub .current > a {
    border-left: 3px solid var(--site-primary);
    border-radius: 0;
    padding-left: calc(.75rem - 3px);
}

/* Untermenüs dauerhaft sichtbar */
.mod-menu .mod-menu__sub,
.mod-menu ul.mod-menu__sub {
    display: block !important;
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Toggle-Button ausblenden */
.mod-menu .mod-menu__toggle,
.mod-menu button[aria-expanded] {
    display: none !important;
}

/* Toggle-Button (Pfeil/Caret) ausblenden, da nicht mehr nötig */
.mod-menu .mod-menu__toggle,
.mod-menu button[aria-expanded] {
  display: none !important;
}

/* Optional: etwas Einrückung für bessere Lesbarkeit */
.mod-menu .mod-menu__sub {
  padding-left: 1.2em;
  margin-top: 0.25em;
}