/* Stefan Gurtner: mobiles Menü als Overlay über dem Inhalt */

.mobile-menu-toggle-wrap {
    display: none;
}

@media (max-width: 767.98px) {
    .container-header {
        position: relative;
    }

    .mobile-menu-toggle-wrap {
        display: block;
        position: absolute;
        bottom: 0.75rem;
        left: 0.75rem;
        z-index: 1040;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.9rem;
        font-size: 1rem;
        line-height: 1.2;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid #fff;
        border-radius: 0.25rem;
        color: #fff;
        cursor: pointer;
    }

    .mobile-menu-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .site-grid {
        position: relative;
    }

    #sidebar-left-menu {
        position: absolute;
        grid-area: auto;
        top: 0;
        left: 0;
        width: min(85vw, 320px);
        max-width: 320px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        z-index: 1050;
        margin: 0;
        padding: 1rem;
        background: var(--body-bg, #fff);
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    #sidebar-left-menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    body.mobile-menu-open::before {
        content: "";
        position: fixed;
        top: 160px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        background: rgba(0, 0, 0, 0.5);
    }
}

/* Stefan Gurtner: Artikel-Details ausblenden */
dl.article-info {
    display: none;
}

/* Stefan Gurtner: Seite wie das Original, zentrierte Breite mit grauem Rand */
body {
    background: #e0dedf;
}

.container-header,
.site-grid,
.container-footer {
    max-width: 1020px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.site-grid {
    background: #fff;
}

/* Stefan Gurtner: Kopfzeile mit Originalbild statt blauer Titelleiste */
body .container-header {
    background: #0c1a3e url(../images/personal/personal3.png) no-repeat bottom right;
    color: #fff;
    height: 160px;
}

.container-header .navbar-brand {
    padding: 0.8rem 0.1rem 0;
}

.container-header .brand-text {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1.2;
    color: #FCBF49;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.container-header .brand-logo,
.container-header .brand-logo:hover {
    text-decoration: none;
}

/* Stefan Gurtner: ab 768px Sidebar links neben dem Inhalt, innerhalb der 1020px-Box */
@media (min-width: 768px) {
    .site-grid {
        padding-right: 1rem;
        grid-template-columns: 0 minmax(0, 15rem) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 0;
        grid-template-areas: ". banner banner banner banner ."
                             ". top-a top-a top-a top-a ."
                             ". top-b top-b top-b top-b ."
                             ". side-l comp comp comp ."
                             ". side-r side-r side-r side-r ."
                             ". bot-a bot-a bot-a bot-a ."
                             ". bot-b bot-b bot-b bot-b .";
    }
}

/* Stefan Gurtner: Typografie und Navigation wie im Original (Arial, schlanke Trennlinien) */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #333;
}

@font-face {
    font-family: 'Titillium Maps';
    src: url("../fonts/TitilliumMaps29L002.eot");
    src: local('Titillium Maps'), local('TitilliumMaps'),
        url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
        url("../fonts/TitilliumMaps29L002.woff") format("woff");
}

h1, h2, h3, h4, #sidebar-left-menu .card-header {
    font-family: 'Titillium Maps', Arial, Helvetica, sans-serif;
}

main h1 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
}

main h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.card {
    border: 0;
    background: transparent;
    border-radius: 0;
}

#sidebar-left-menu .card-header {
    background: transparent;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
}

#sidebar-left-menu .card-body {
    padding: 0.5rem 0 0;
}

#sidebar-left-menu .mod-menu,
#sidebar-left-menu .nav {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#sidebar-left-menu .nav-item {
    border-bottom: 1px dotted #ddd;
    padding: 0.25rem 0 0.25rem 0.9rem;
    position: relative;
}

#sidebar-left-menu .nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 4px;
    height: 4px;
    background: #999;
}

#sidebar-left-menu .nav-item:last-child {
    border-bottom: 0;
}

#sidebar-left-menu .nav-item a {
    color: #095197;
    text-decoration: none;
}

#sidebar-left-menu .nav-item a:hover,
#sidebar-left-menu .nav-item.active > a {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    #sidebar-left-menu {
        transition: none;
    }
}

/* Stefan Gurtner: Titel der Lightbox nicht im Überschriftenstil des Templates */
.wf-mediabox .wf-mediabox-caption h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.4;
    margin: 0;
}

/* Stefan Gurtner: Lupen-Symbol der Lightbox verkleinern (Standardgröße 24px) */
main .wf-icon-zoom-image:before,
main .wf-icon-zoom-image svg {
    font-size: 14px;
    width: 14px;
    height: 16px;
    bottom: 3px;
    right: 3px;
}