@charset "UTF-8";

/**
 * (en) CSS svw.info
 * (de) CSS svw.info
 *
 * @copyright       Copyright 2026, Holger Schröck
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 * @link            http://www.portal64.de
 * @version         1.0.0
 */

/* ---------- Large Desktop (1400px+) ---------- */
@media (min-width: 1400px) {
    .container {
        max-width: 1240px;
    }
}

/* ---------- Desktop (992px - 1199px) ---------- */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .nav-desktop ul li a {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ---------- Tablet (768px - 991px) ---------- */
@media (max-width: 991px) {
    /* Remove page shadow on smaller screens */
    .site {
        box-shadow: none;
    }

    /* Show hamburger, hide left sidebar (navigation is in hamburger menu) */
    .hamburger {
        display: flex;
    }

    #sp-left {
        display: none;
    }

    /* Collapse main grid to single column: right sidebar stacks below content */
    #sp-main-body .container > .row,
    #sp-main-body .container > .row:has(#sp-left),
    #sp-main-body .container > .row:has(#sp-right),
    #sp-main-body .container > .row:has(#sp-left):has(#sp-right) {
        grid-template-columns: 1fr;
    }
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767px) {
    body {
        font-size: 13px;
    }

    h1 { font-size: 20px; }
    h2 { font-size: 16px; }
    h3 { font-size: 14px; }

    .container {
        padding: 0 12px;
    }

    /* Grid collapses to full width */
    .col-lg-3,
    .col-lg-6,
    .col-lg-9,
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Right sidebar stacks below content */
    #sp-right {
        margin-top: 20px;
    }

    /* Header adjustments */
    #sp-header {
        padding: 8px 0;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .logo-image {
        max-height: 36px;
    }

    .site-title {
        font-size: 18px;
    }

    .site-description {
        display: none;
    }

    /* headnav links: wrap below the logo/hamburger row */
    .header-modules {
        order: 3;
        flex: 0 0 100%;
        justify-content: flex-start;
        padding: 4px 0 0;
    }

    /* Main content */
    #sp-main-body {
        padding: 0;
    }

    #sp-component {
        padding: 18px;
    }

    /* Article cards: 1 column */
    .blog .item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tables scroll horizontally */
    table {
        font-size: 13px;
    }

    table thead th,
    table tbody td {
        padding: 5px 6px;
    }

    /* Footer */
    #sp-footer {
        padding: 15px 0;
    }

    /* Pagination */
    .pagination li a,
    .pagination li span {
        padding: 5px 8px;
        font-size: 13px;
    }
}

/* ---------- Small Mobile (below 480px) ---------- */
@media (max-width: 480px) {
    .header-inner {
        gap: 8px;
    }

    .logo-image {
        max-height: 30px;
    }

    .site-title {
        font-size: 16px;
    }

    .mobile-menu {
        width: 260px;
        right: -260px;
    }

    .mobile-menu ul li a {
        padding: 10px 12px;
        font-size: 13px;
    }

    .mobile-menu ul li ul li a {
        padding-left: 24px;
    }

    .mobile-menu ul li ul li ul li a {
        padding-left: 36px;
    }
}

/* ---------- Print ---------- */
@media print {
    #sp-topbar,
    #sp-header,
    #sp-head-navigation,
    #sp-navigation,
    #sp-footer,
    .hamburger,
    .mobile-menu,
    .mobile-menu-backdrop,
    .pagination {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    #sp-main-body {
        background: #fff;
    }

    #sp-component {
        background: #fff;
    }

    .col-lg-3,
    .col-lg-6,
    .col-lg-9,
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}