/* Hide scrollbar visually but keep scrolling functional */
#sidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#sidebar::-webkit-scrollbar {
    display: none;
}

/* Sidebar image: full bleed, fixed 3:4 portrait crop */
.sidebar-image {
    position: relative;
    width: calc(100% + 5em);
    left: -2.5em;
    margin-top: -2.5em;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


/* Blog typography */
.blog-list { display: flex; flex-direction: column; gap: 2.5em; }
.blog-summary { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2em; }
.blog-summary:last-child { border-bottom: none; }
.blog-meta { font-size: 0.75em; letter-spacing: 0.1em; margin: -0.5em 0 1em; }
.blog-tag { display: inline-block; background: #b74e91; color: #ffffff; border-radius: 0.2em; padding: 0.1em 0.5em; font-size: 0.85em; }
.blog-content h2, .blog-content h3 { margin-top: 2em; }
.blog-content pre { background: rgba(0,0,0,0.3); border-radius: 0.3em; padding: 1em; overflow-x: auto; font-size: 0.85em; }
.blog-content code { font-size: 0.85em; }
.blog-content pre code { background: none; padding: 0; }
.blog-detail-header { margin-bottom: 2em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1.5em; }

/* Override Hyperspace centering — nav sits directly below the image */
#sidebar > .inner {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 1.8em;
    margin-top: 0;
}

/* Blank spacer for feature cells without description text */
.feature-pad { margin: 0; height: 1.6em; }

/* Features grid: reduce inner padding and icon offset */
.features section {
    padding: 2.25em 2em 1em 6em;
}
.features section .icon {
    left: 2em;
    top: 2em;
}

/* CV section */
.cv-subtitle {
    font-size: 0.85em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: -1em;
    margin-bottom: 1.5em;
}
.cv-positions {
    display: flex;
    flex-direction: column;
    gap: 1.8em;
    margin-bottom: 2.5em;
}
.cv-position-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-bottom: 0.4em;
}
.cv-position-header h4 {
    margin: 0;
    font-size: 1em;
}
.cv-period {
    font-size: 0.78em;
    letter-spacing: 0.08em;
    opacity: 0.55;
    white-space: nowrap;
}
.cv-position ul {
    margin: 0;
    padding-left: 1.2em;
}
.cv-position ul li {
    margin-bottom: 0.25em;
}
.cv-education {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cv-education li {
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cv-education li:last-child {
    border-bottom: none;
}

/* Projekte sub-navigation — desktop sidebar (> 1280px) */
#sidebar nav ul li .nav-sub {
    list-style: none;
    padding: 0.25em 0 0.15em 0.9em;
    margin: 0.1em 0 0 0.4em;
}

/* In the all-pages-view the submenu is always in the DOM — hide/show via JS class */
body.view-all #sidebar nav ul li .nav-sub {
    display: none;
}
body.view-all #sidebar nav ul li.nav-sub-open .nav-sub {
    display: block;
}

/* Horizontal top-bar mode (≤ 1280px): submenu as fixed dropdown, image as hero */
@media screen and (max-width: 1280px) {
    /* Submenu escapes overflow:hidden via position:fixed */
    #sidebar nav ul li .nav-sub {
        position: fixed;
        top: 3.5em;
        left: 0;
        right: 0;
        background: #2d1f4e;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 0 1em;
        margin: 0;
        border-left: none;
        display: none;
        z-index: 9999;
        justify-content: center;
        gap: 0;
    }
    #sidebar nav ul li.nav-sub-open .nav-sub {
        display: flex !important;
    }
    #sidebar nav ul li .nav-sub li a {
        padding: 0.55em 0.9em;
        font-size: 0.58em;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 1;
        opacity: 0.7;
    }
    #sidebar nav ul li .nav-sub li a:hover { opacity: 1; }

    /* Sidebar image as hero banner below the dropdown / above content */
    body.page-projekte #wrapper::before {
        content: '';
        display: block;
        height: clamp(140px, 28vw, 260px);
        background-image: url('/static/it/images/projekte.jpg');
        background-size: cover;
        background-position: center 30%;
    }
}

#sidebar nav ul li .nav-sub li {
    margin: 0;
    border: none;
    padding: 0;
    line-height: 1;
    /* Override body.is-preload opacity:0 so sub-items don't flicker */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
#sidebar nav ul li .nav-sub li a {
    font-size: 0.75em;
    letter-spacing: 0.04em;
    padding: 0.22em 0;
    display: block;
    opacity: 0.5;
    text-transform: none;
    font-weight: normal;
    line-height: 1.2;
    transition: opacity 0.15s;
}
/* Remove the decorative gradient underline from sub-nav links */
#sidebar nav ul li .nav-sub li a:before,
#sidebar nav ul li .nav-sub li a:after {
    display: none;
}
#sidebar nav ul li .nav-sub li a:hover { opacity: 0.85; }
#sidebar nav ul li .nav-sub li a.active { opacity: 1; font-weight: 600; }

/* Projekt-Screenshots */
.proj-screenshot {
    margin: 1.5em 0 2em;
    border-radius: 0.4em;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.proj-screenshot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.4em;
}

/* Projekte sub-section spacing */
.proj-block {
    margin-bottom: 3em;
    padding-bottom: 2.5em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.proj-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Combined all-pages view: scroll-snap on desktop, free scroll on mobile */
@media screen and (min-width: 980px) {
    body.view-all {
        overflow: hidden;
    }
    body.view-all #wrapper {
        overflow-y: scroll;
        height: 100vh;
        scroll-snap-type: y proximity;
        scroll-behavior: smooth;
    }
    body.view-all #wrapper > section {
        scroll-snap-align: start;
        min-height: 100vh;
        box-sizing: border-box;
    }
    body.view-all #footer {
        display: none;
    }
}
/* Kontakt-Sektion füllt den Bildschirm (wenig Inhalt) */
@media screen and (min-width: 980px) {
    #wrapper > #kontakt {
        min-height: 100vh;
        box-sizing: border-box;
    }
}

/* Sidebar-Image-Transition beim Sektionswechsel */
#sidebar-bg {
    transition: background-image 0.4s ease, background-position 0.4s ease;
}

/* Language switcher — between image and nav, aligned with nav left edge */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.75em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.7em 0 0.7em 2.5em;
}
.lang-switch a {
    color: inherit;
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.lang-switch a:hover { opacity: 0.8; }
.lang-switch a.active { opacity: 1; font-weight: 600; }
.lang-switch span { opacity: 0.25; }