/* Author:   Martin Stettler (https://dieweberei.ch/)
   Version:  08/06/2026 // based on BS v5.3.8
*/

/* ==========================================================================
   LAYOUT BASE STYLES
   ========================================================================== */
:root {
    --logo-height: 160px;

    --header-height: 240px;
    --header-padding: 40px;

    --header-height-scrolled: 120px;

    --page-padding: 60px;

    --nav-width: 35%;

    /* Spacing */
    --section-space: 90px;
    --section-title-gap: 5rem;
    --content-gap: 2rem;
    --teaser-gap: 3rem;

}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hero-content {
    padding-left: calc(var(--page-padding) + 40px);
}

.hero-text {
    max-width: 38%;
}

.side-nav {
  padding: 50px 60px;
}

/* ==========================================================================
   SERVICES DESKTOP
   ========================================================================== */
.services .row {
    row-gap: 5rem;
}

.service-teaser {
    margin-bottom: 0;
}

/* ==========================================================================
   CONTENT TEASER DESKTOP
   ========================================================================== */

.content-teaser-content {
    margin-bottom: 0;
    padding-top: 4rem;
}

.teaser-image-portrait {
    max-width: 450px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.teaser-image-portrait a,
.teaser-image-portrait picture {
    display: block;
    width: 100%;
    height: 100%;
}

.teaser-image-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .5s ease;
}

.teaser-image-portrait a:hover img {
    transform: scale(1.03);
}

@media (min-width: 1800px) {
    .projects-grid > .project-item {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}


/* ==========================================================================
   FOOTER
   ========================================================================== 
.site-footer {
    margin-top: var(--section-space);
}
*/
.footer-main {
    align-items: flex-end;
}

.footer-logo {
    justify-self: center;
}

.footer-meta ul {
    gap: 0;
}

.footer-meta li + li::before {
    margin-inline: 1rem;
}