@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* ========================================
CSS-Variabeln
=========================================== */

:root {
    /* Global Layout */

    --site-width: 1200px;
    --background-color-body: var(--sppb-color-background);


    /* Global Typografie */

    --font-base: 'HankenSans', system-ui, sans-serif;

    --font-weight-body: 400;
    --font-weight-h1: 700;
    --font-weight-h2: 700;
    --font-weight-h3: 700;
    --font-weight-h4: 500;
    --font-weight-h5: 500;
    --font-weight-h6: 400;
    --font-weight-menu: 700;
    --font-weight-menu-hover: 700;
    --font-weight-submenu: 700;
    --font-weight-submenu-hover: 700;
    --font-weight-links: inherit;
    --font-weight-links-hover: inherit;

    --color-body: var(--sppb-color-text);
    --color-h1: var(--sppb-color-text);
    --color-h2: var(--sppb-color-text);
    --color-h3: var(--sppb-color-text);
    --color-h4: var(--sppb-color-text);
    --color-h5: var(--sppb-color-text);
    --color-h6: var(--sppb-color-text);
    --color-menu: var(--sppb-color-secondary);
    --color-menu-hover: var(--sppb-color-accent);
    --color-submenu: var(--sppb-color-primary);
    --color-submenu-hover: var(--sppb-color-accent);
    --color-links: var(--sppb-color-primary);
    --color-links-hover: var(--sppb-color-accent);

    --text-decoration-links: none;
    --text-decoration-links-hover: underline solid 2px;
    --text-underline-offset-links: 2px;

    --text-transform-p: none;
    --text-transform-h1: uppercase;
    --text-transform-h2: none;
    --text-transform-h3: none;
    --text-transform-h4: none;
    --text-transform-h5: none;
    --text-transform-h6: none;
    --text-transform-menu: uppercase;
    --text-transform-submenu: uppercase;
    --text-transform-links: none;


    /* Responsive Layout */

    --padding-inline-container: var(--space-md);
    --height-menu: 80px;
    --height-logo: 60px;
    --padding-top-footer: var(--space-lg);
    --padding-bottom-footer: var(--space-lg);


    /* Responsive Typografie */

    --font-size-body: 1.2rem;
    --font-size-h1: 5rem;
    --font-size-h2: 3.4rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.6rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1.2rem;
    --font-size-menu: 1.4rem;
    --font-size-submenu: 1.2rem;

    --line-height-body: 1.5;
    --line-height-h1: 1;
    --line-height-h2: 1.2;
    --line-height-h3: 1.2;
    --line-height-h4: 1.2;
    --line-height-h5: 1.5;
    --line-height-h6: 1.5;
    --line-height-menu: 1.2;
    --line-height-submenu: 1.2;

    --margin-bottom-p: var(--space-xxs);
    --margin-bottom-h1: var(--space-sm);
    --margin-bottom-h2: var(--space-xs);
    --margin-bottom-h3: var(--space-xxs);
    --margin-bottom-h4: var(--space-xxs);
    --margin-bottom-h5: 0;
    --margin-bottom-h6: 0;


    /* Responsive Abstände */

    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --space-xxl: 6rem;
}


/* ========================================
Reset & Basis
=========================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

.sppb-row-container, .sppb-row, .sppb-row-column {
    padding: 0;
    margin: 0;
}

.visually-hidden {
    visibility: hidden;
    display: none;
}


/* ========================================
Typografie
=========================================== */

/* Body & Absatz */

body {
    font-family: var(--font-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--color-body);
    background-color: var(--background-color-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    text-transform: var(--text-transform-p);
    margin-bottom: var(--margin-bottom-p);
}


/* Headings */

h1, .h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    line-height: var(--line-height-h1);
    color: var(--color-h1);
    text-transform: var(--text-transform-h1);
    margin-bottom: var(--margin-bottom-h1);
}

h2, .h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    line-height: var(--line-height-h2);
    color: var(--color-h2);
    text-transform: var(--text-transform-h2);
    margin-bottom: var(--margin-bottom-h2);
}

h3, .h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    line-height: var(--line-height-h3);
    color: var(--color-h3);
    text-transform: var(--text-transform-h3);
    margin-bottom: var(--margin-bottom-h3);
}

h4, .h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h4);
    line-height: var(--line-height-h4);
    color: var(--color-h4);
    text-transform: var(--text-transform-h4);
    margin-bottom: var(--margin-bottom-h4);
}

h5, .h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-h5);
    line-height: var(--line-height-h5);
    color: var(--color-h5);
    text-transform: var(--text-transform-h5);
    margin-bottom: var(--margin-bottom-h5);
}

h6, .h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-h6);
    line-height: var(--line-height-h6);
    color: var(--color-h6);
    text-transform: var(--text-transform-h6);
    margin-bottom: var(--margin-bottom-h6);
}


/* Links */

a {
    font-weight: var(--font-weight-links);
    color: var(--color-links);
    text-decoration: var(--text-decoration-links);
    text-underline-offset: var(--text-underline-offset-links);
    text-transform: var(--text-transform-links);
}

a:hover, a:focus {
    font-weight: var(--font-weight-links-hover);
    color: var(--color-links-hover);
    text-decoration: var(--text-decoration-links-hover);
}


/* Menü */

.mainmenu > ul > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: var(--font-size-menu);
    font-weight: var(--font-weight-menu);
    line-height: var(--line-height-menu);
    color: var(--color-menu);
    text-transform: var(--text-transform-menu);
    text-decoration: none;
    padding: var(--space-xs);
}

.mainmenu > ul > li > a:hover,
.mainmenu > ul > li > a:focus {
    font-weight: var(--font-weight-menu-hover);
    color: var(--color-menu-hover);
}

.mainmenu > ul > .active > a,
.mainmenu > ul > li.active > a {
    font-weight: var(--font-weight-menu-hover);
    color: var(--color-menu-hover);
}

#offcanvas-menu a {
    font-size: var(--font-size-menu);
    font-weight: var(--font-weight-menu);
    line-height: var(--line-height-menu);
    color: var(--color-menu);
    text-transform: var(--text-transform-menu);
    text-decoration: none;
}

#offcanvas-menu a:hover,
#offcanvas-menu a:focus,
#offcanvas-menu .active > a {
    font-weight: var(--font-weight-menu-hover);
    color: var(--color-menu-hover);
}

/* Sub-Menü */

.mainmenu .mod-menu__sub li {
    width: 100%;
}

.mainmenu .mod-menu__sub li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-lg);
    font-size: var(--font-size-submenu);
    font-weight: var(--font-weight-submenu);
    line-height: var(--line-height-submenu);
    color: var(--color-submenu);
    text-transform: var(--text-transform-submenu);
    text-decoration: none;
    background-color: var(--sppb-color-secondary);
}

.mainmenu .mod-menu__sub li a:hover,
.mainmenu .mod-menu__sub li a:focus {
    font-weight: var(--font-weight-submenu-hover);
    color: var(--color-submenu-hover);
    background-color: var(--sppb-color-secondary-shade);
}

.mainmenu .mod-menu__sub .active > a {
    font-weight: var(--font-weight-submenu-hover);
    color: var(--color-submenu-hover);
    background-color: var(--sppb-color-secondary-shade);
}

#offcanvas-menu .mod-menu__sub a {
    font-size: var(--font-size-submenu);
    font-weight: var(--font-weight-submenu);
    line-height: var(--line-height-submenu);
    color: var(--color-submenu);
    text-transform: var(--text-transform-submenu);
}

#offcanvas-menu .mod-menu__sub a:hover,
#offcanvas-menu .mod-menu__sub a:focus,
#offcanvas-menu .mod-menu__sub .active > a {
    font-weight: var(--font-weight-submenu-hover);
    color: var(--color-submenu-hover);
}


/* ========================================
Layout
=========================================== */

main {
    max-width: 100%;
    min-height: calc(100vh - var(--height-menu));
}

.boxed-container {
    width: 100%;
    max-width: var(--site-width);
    padding-inline: var(--padding-inline-container);
    margin: 0 auto;
}


/* ========================================
Komponenten
=========================================== */

/* Logo */

.logo {
    line-height: 0;
}

.logo img {
    height: var(--height-logo);
    width: auto;
    display: block;
}

.logo a {
    display: inline-block;
    line-height: 0;
}


/* Button */

.sppb-btn {
    padding: var(--space-sm) var(--space-md);
    border: none;
}


/* ========================================
Navigation & Menü
=========================================== */

/* Navigation-Container */

.site-header {
    background-color: var(--sppb-color-primary);
}

.nav-container {
    max-width: var(--site-width);
    padding-inline: var(--padding-inline-container);
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 auto;
    height: var(--height-menu);
}

.nav-container.has-logo {
    justify-content: space-between;
}

.nav-container.no-logo {
    justify-content: center;
}


/* Desktop-Menü */

.mainmenu {
    display: block;
    position: relative;
}

.mainmenu > ul {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
}

.mainmenu > ul > li {
    display: flex;
    align-items: center;
    height: var(--height-menu);
}

.mainmenu > ul > li.parent {
    position: relative;
}

.mod-menu__toggle-sub {
    color: var(--color-menu);
    font-size: 80%;
}

.mainmenu > ul > li:hover .mod-menu__toggle-sub {
    color: var(--color-menu-hover);
}

.mainmenu > ul > .active .mod-menu__toggle-sub ,
.mainmenu > ul > li.active .mod-menu__toggle-sub {
    color: var(--color-menu-hover);
}

.mainmenu .mod-menu__sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    position: absolute;
    flex-direction: column;
    gap: 0;
    list-style: none;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: auto;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

.mainmenu li.parent:hover > .mod-menu__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scaleY(1);
}


/* Offcanvas */

.offcanvas,
.offcanvas-toggle,
.offcanvas-overlay {
    display: none;
}

/* ========================================
Footer
=========================================== */

footer {
    background-color: var(--sppb-color-primary);
}

.foot-container {
    max-width: var(--site-width);
    color: var(--color-menu);
    margin: 0 auto;
    padding-block: var(--padding-top-footer) var(--padding-bottom-footer);
    padding-inline: var(--padding-inline-container);
}


/* Media Queries */

@media (max-width: 991px) {

    .nav-container.no-logo {
        justify-content: flex-end;
    }


    /* Desktop-Menü ausblenden */

    .mainmenu {
        display: none;
    }


    /* Offcanvas-Button */

    .offcanvas-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 2rem;
        color: var(--color-menu);
        z-index: 1001;
    }


    /* Offcanvas-Menü */

    .offcanvas {
        display: block;
    }

    #offcanvas-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: 100%;
        padding: var(--height-menu) var(--space-md) var(--space-md) var(--space-md);
        background-color: var(--sppb-color-primary);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    #offcanvas-menu.open {
        transform: translateX(0%);
    }

    .offcanvas ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }


    /* Mobile Submenu */

    .submenu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        margin-left: 0.5rem;
        font-size: 80%;
    }

    .mod-menu__toggle-sub {
        content: '▼';
        color: var(--color-menu);
    }

    li.open > .mod-menu__toggle-sub {
        content: '▲';
    }

    #offcanvas-menu .mod-menu__sub {
        display: none;
        padding-left: 1rem;
    }

    #offcanvas-menu li.open > .mod-menu__sub {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-block: var(--space-xs);
    }


    /* Overlay */

    .offcanvas-overlay {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(5px);
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .offcanvas-overlay.visible {
        opacity: 1;
        visibility: visible;
    }
}