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

/* Mobile */

/* CSS-Variabeln */
:root {
    --color-bg: #ffffff;
    --color-text: #333333;
    --color-primary: #dd2b1c;
    --color-secondary: #ffffff;
    --color-hover: #b22819;
    --font-color-menu: #333333;
    --font-color-menu-hover: #dd2b1c;

    --font-base: 'MerriweatherSans', system-ui, sans-serif;
    --font-title: 'Erode', system-ui, serif;
    --font-size-base: 1rem;
    --font-size-h1: clamp(3.8rem, 8vw, 8rem);
    --font-size-h2: 2.4rem;
    --font-size-h3: 1rem;
    --font-size-h4: 2rem;
    --font-size-h5: 2rem;
    --font-size-h6: 3rem;
    --font-size-menu: clamp(3rem, 7vw, 7rem);
    --font-size-submenu: 1rem;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-xxl: 5rem;

    --site-width: 100vw;
    --content-width: 100vw;
    --content-margin: 0;
    --height-menu: 120px;
    --height-logo: 90px;

    --grid-template-outer: 1fr;
    --grid-template-inner: 1fr;
    --grid-column-inner: auto;
    --grid--column-gap: 0px;
    --grid-row-gap: 32px;
    --grid-gap: 0px;
}


/* Span */

.spal-1 {grid-column: span 1;}
.spal-2 {grid-column: span 2;}
.spal-3 {grid-column: span 3;}
.spal-4 {grid-column: span 4;}
.spal-5 {grid-column: span 5;}
.spal-6 {grid-column: span 6;}
.spal-7 {grid-column: span 7;}
.spal-8 {grid-column: span 8;}

.sppb-addon-wrapper:has(.spal-1) {grid-column: span 1;}
.sppb-addon-wrapper:has(.spal-2) {grid-column: span 2;}
.sppb-addon-wrapper:has(.spal-3) {grid-column: span 3;}
.sppb-addon-wrapper:has(.spal-4) {grid-column: span 4;}
.sppb-addon-wrapper:has(.spal-5) {grid-column: span 5;}
.sppb-addon-wrapper:has(.spal-6) {grid-column: span 6;}
.sppb-addon-wrapper:has(.spal-7) {grid-column: span 7;}
.sppb-addon-wrapper:has(.spal-8) {grid-column: span 8;}

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

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

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.sppb-row-container, .sppb-row, .sppb-row-column {
    padding: 0;
    margin-inline: var(--content-margin);
    margin-block: 0;
    max-width: var(--content-width);
}

body.offcanvas-open {
    padding-top: var(--height-menu);
    overflow: hidden;
}

body.offcanvas-open #site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

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

/* Typografie */
h1, h2, h4, h5 {
    line-height: 1;
    margin-bottom: var(--space-xs);
}

h3 {
    line-height: 1.2;
    margin-bottom: var(--space-xs);
}

h6 {
    line-height: 1;
    margin-bottom: 0;
}

h1 {font-size: var(--font-size-h1); font-weight: 700; font-family: var(--font-title); color: var(--color-secondary);}
h2 {font-size: var(--font-size-h2); font-weight: 500; font-family: var(--font-title); color: var(--color-primary);}
h3 {font-size: var(--font-size-h3); font-weight: 700; font-family: var(--font-base);}
h4 {font-size: var(--font-size-h4); font-weight: 500; font-family: var(--font-title);}
h5 {font-size: var(--font-size-h5); font-weight: 600; font-family: var(--font-title); color: var(--color-primary);}
h6 {font-size: var(--font-size-h6); font-weight: 500; font-family: var(--font-title);}

p {margin-bottom: var(--space-xs); font-weight: 400;}

.com-content-article__body ul,
.com-content-article__body ol {
    margin-left: 1.2rem;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-primary);
}

.sppb-button-wrapper a:hover,
.sppb-button-wrapper a:focus {
    color: var(--color-secondary);
}

strong {
    font-weight: 600;
}

u {
    text-decoration: underline solid;
    text-underline-offset: 0.25rem;
}


/* List */

ul {
    margin-bottom: var(--space-sm);
}

li {
    margin-left: 1.5rem;
}

.pagination li,
.nav-item {
    margin-left: 0;
}


/* Layout */

main {
    padding: 0;
    max-width: var(--site-width);
    margin: 0 auto;
    min-height: calc(100vh - var(--height-menu));
}

.sppb-row,
.com-content-article.item-page,
.com-content-category-blog {
    padding-block: var(--space-md);
    padding-inline: 2rem;
}

.moduletable,
.mod-menu.mod-list.nav {
    padding-inline: var(--space-md);
}

.moduletable .sppb-row {
    padding: 0;
}

.com-content-category-blog.blog, .offcanvas-inner, .com-content-article.item-page {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: var(--content-margin);
}


/* Grid */

#offcanvas,
#site-header,
#offcanvas-footer,
.igfs-grid-inner,
.com-content-category-blog,
.com-content-article {
    display: grid;
    grid-template-columns: var(--grid-template-outer);
    row-gap: var(--grid-row-gap);
    column-gap: var(--grid--column-gap);
}

#offcanvas-inner,
#nav-container,
#offcanvas-footer-inner,
.sppb-column-addons {
    display: grid;
    grid-column: var(--grid-column-inner);
    grid-template-columns: var(--grid-template-inner);
    gap: var(--grid-gap);
}

.com-content-article__body {
    display: grid;
    grid-column: var(--grid-column-inner);
}


/* Grid Kategorienblog */

.com-content-category-blog__items {
    display: grid;
    grid-column: var(--grid-column-inner);
    grid-template-columns: var(--grid-template-inner);
    row-gap: var(--grid-row-gap);
    column-gap: var(--grid--column-gap);
}

.masonry-3 .com-content-category-blog__item {
    grid-column: span 2;
}

.com-content-category-blog__navigation {
    grid-column: var(--grid-column-inner);
    list-style: none;
}

.com-content-category-blog .item-image img {
    height: 380px;
    width: 100%;
    object-fit: cover;
}

.com-content-category-blog__item .item-content {
    margin-top: var(--space-xs);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: var(--space-md);
    margin-bottom: none;
    font-size: 1.4rem;
}

.com-content-category-blog__pagination li {
    list-style: none;
}

.pagination .page-link {
    line-height: 1;
}

.pagination .active .page-link, .pagination .page-item.active .page-link, .pagination .page-link[aria-current="true"],
.pagination .page-link:hover, .pagination .page-link:focus {
    color: var(--color-primary);
}

.disabled .page-link {
    pointer-events: none;
    opacity: 0.5;
}

/* Mitgliederliste */

.sppb-dynamic-content-collection.grid-list {
    display: grid !important;
    grid-template-columns: var(--grid-template-outer) !important;
    row-gap: var(--grid-row-gap);
    column-gap: var(--grid--column-gap);
}

.sppb-column-addons:has(.sppb-dynamic-content-collection.grid-list),
.igfs-grid-inner:has(.sppb-dynamic-content-collection.grid-list) {
    display: block;
}

.sppb-dynamic-content-collection.grid-list .sppb-dynamic-content-collection__item {
    display: grid;
    grid-column: var(--grid-column-inner);
    grid-template-columns: var(--grid-template-inner);

}

/* Newsflash-Modul */

.moduletable:has(.mod-articlesnews.newsflash) {
    margin-bottom: var(--space-md);
}

.newsflash-title {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

.mod-articlesnews__item {
    line-height: 1.3;
    margin-bottom: var(--space-xs);
    display: flex;
}

.mod-articlesnews__item:has(a)::before {
    font-family: "bootstrap-icons";
    content: "\F285";
    font-weight: 800;
    margin-right: 0.25rem;
}

.mod-articlesnews__item:not(:has(a))::before {
    font-family: "bootstrap-icons";
    content: "\F285";
    font-weight: 800;
    margin-right: 0.25rem;
    opacity: 0;
}


/* Artikel */

.com-content-article__body p img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-top: var(--space-sm);
}

.com-content-article__body p:has(img) {
    margin-bottom: var(--space-sm);
}

.com-content-article__body h4 {
    margin-bottom: var(--space-sm);
}

.page-header {
    grid-column: var(--grid-column-inner);
}


/* Komponenten */
.button, .sppb-btn {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    background-color: var(--color-primary);
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    margin-bottom: var(--space-sm);
    border-radius: 0;
}

.button:hover, .sppb-btn:hover {
    color: #ffffff;
    background-color: var(--color-hover);
}

.icon-box > * {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.adresszeile {
    border-top: var(--color-primary) 8px solid;
    margin-top: 1rem;
    padding-top: 1rem;
}

.fuss-offcanvas > * {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.banner-home {
    height: calc(100vh - var(--height-menu));
}

/* Login */

.mod-login {
    font-size: 1rem;
}

.mod-login button, .btn-primary {
    color: #ffffff;
    background-color: var(--color-primary);
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    margin-bottom: var(--space-sm);
    border-radius: 0;
    border: none;
}

.mod-login button:hover, .btn-primary:hover,
.mod-login button:focus, .btn-primary:focus {
    color: #ffffff;
    background-color: var(--color-hover);
}

.form-control {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    padding: 4px;
}

.mod-login__username .form-control,
.mod-login__password .form-control {
    margin-bottom: var(--space-xs);
}

.mod-login__username .form-control,
.mod-login__password .form-control {
    width: 100%;
}

.input-group.password-wrap {
    display: flex;
}

.mod-login__username .form-control,
.mod-login__password .form-control,
button.password-toggle {
    height: 2.4rem;
}


/* Navigation / Menü */

.site-header {
    position: sticky;
    background-color: var(--color-bg);
    height: var(--height-menu);
    border-bottom: var(--color-primary) 8px solid;
    z-index: 999;
}

.nav-container-inner {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 auto;
    padding-inline: 2rem;
    line-height: 1;
}

.nav-item a {
    font-family: var(--font-title);
    font-size: var(--font-size-menu);
    font-weight: 500;
    line-height: 1;
    color: var(--font-color-menu);
    text-decoration: none;
}

.nav-item a:hover,
.nav-item.active > a {
    color: var(--font-color-menu-hover);
}


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

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

.logo {
    line-height: 0;
}

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

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

.mainmenu {
    display: none;
}

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

.offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--color-bg);
    padding-top: calc(4rem + var(--height-menu));
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 900;
}

.offcanvas.open {
    transform: translateY(0%);
}

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

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

.mod-menu__sub {
    font-size: var(--font-size-submenu);
}

.submenu-toggle::after {
    content: '▼';
    color: var(--font-color-menu);
}

li.open > .submenu-toggle::after {
    content: '▲';
}

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

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

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
}


.offcanvas-right .sppb-row {
    padding-top: 0;
    padding-bottom: 0;
}


/* Registrierung */

fieldset {
    border: none;
}

.com-users-registration.registration,
.com-users-registration-complete.registration-complete,
.com-users-reset__form.form-validate.form-horizontal.well,
.com-users-remind__form.form-validate.form-horizontal.well {
    display: block;
    width: 80vw;
    max-width: 800px;
    margin-inline: auto;
    margin-top: 2rem;
}

.com-users-registration__form.form-validate,
.com-users-registration__form.form-validate .form-control {
    width: 100%;
}


/* Footer */

footer {
    display: grid;
    grid-template-columns: var(--grid-template-outer);
    row-gap: var(--grid-row-gap);
    column-gap: var(--grid--column-gap);
    background-color: var(--color-primary);
}

.foot-container {
    height: 100%;
    align-self: end;
    font-size: 1rem;
    color: var(--color-secondary);
    align-items: center;
    font-weight: 400;
    display: flex;
    grid-column: var(--grid-column-inner);
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--space-sm);
    gap: var(--space-xs);
}

.foot-container a {
    color: var(--color-secondary);
}

.foot-container a:hover {
    text-decoration: underline;
}


/* Media Queries */
@media (min-width: 768px) {
    :root {
        --font-size-base: 1.2rem;
        --font-size-h1: clamp(3.8rem, 8vw, 8rem);
        --font-size-h2: 2.8rem;
        --font-size-h3: 1.2rem;
        --font-size-h4: 2.4rem;
        --font-size-h5: 2.4rem;
        --font-size-h6: 3.2rem;
        --font-size-menu: clamp(3rem, 7vw, 7rem);
        --font-size-submenu: 1.2rem;

        --grid-template-outer: repeat(2, 1fr);
        --grid-template-inner: repeat(2, 1fr);
        --grid-column-inner: 1 / -1;
        --grid--column-gap: 24px;
        --grid-row-gap: 24px;
        --grid-gap: 24px;
    }


    /* Span */

    .spal-1 {grid-column: span 1;}
    .spal-2 {grid-column: span 2;}
    .spal-3 {grid-column: span 2;}
    .spal-4 {grid-column: span 2;}
    .spal-5 {grid-column: span 2;}
    .spal-6 {grid-column: span 2;}
    .spal-7 {grid-column: span 2;}
    .spal-8 {grid-column: span 2;}

    .sppb-addon-wrapper:has(.spal-1) {grid-column: span 1;}
    .sppb-addon-wrapper:has(.spal-2) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-3) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-4) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-5) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-6) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-7) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-8) {grid-column: span 2;}

    /* Blog */

    .masonry-3 .com-content-category-blog__item {
        grid-column: span 1;
    }

    /* Navbar */

    .nav-container-inner {
        width: var(--content-width);
        padding-inline: 2rem;
    }
    
}

@media (min-width: 992px) { /* Tablet */
    :root {
        --font-size-base: 1.2rem;
        --font-size-h1: clamp(3.8rem, 8vw, 8rem);
        --font-size-h2: 3rem;
        --font-size-h3: 1.2rem;
        --font-size-h4: 2.4rem;
        --font-size-h5: 2.4rem;
        --font-size-h6: 3.2rem;
        --font-size-menu: clamp(3rem, 7vw, 7rem);
        --font-size-submenu: 1.2rem;
    }

    p {margin-bottom: var(--space-sm);}

    .masonry-3 .com-content-category-blog__item {
        grid-column: span 1;
    }

    .nav-container-inner.no-logo {
        justify-content: center;
    }
    /*
    .mainmenu {
        display: block;
        position: relative;
    }

    .mainmenu > ul {
        display: flex;
        list-style: none;
        gap: 2rem;
    }

    .offcanvas,
    .offcanvas-toggle {
        display: none;
    }
    
    .mod-menu__sub {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
        transition: opacity 0.3s ease, transform 0.3s ease;
        display: flex;
        position: absolute;
        flex-direction: column;
        gap: var(--space-sm);
        list-style: none;
        top: 100%;
        left: 0;
        min-width: 100%;
        width: auto;
        white-space: nowrap;
        padding: var(--space-md);
        background-color: var(--color-secondary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 1000;
    }

    .mod-menu__sub a {
        display: flex;
        line-height: 1;
    }

    li.parent:hover > .mod-menu__sub {
        transform: scaleY(1);
        opacity: 1;
    }

    .mainmenu li {
        display: flex;
        align-items: center;
    }

    li.parent {
        position: relative;
        height: var(--height-menu);
    }

    li.parent::after {
        content: '▼';
        color: var(--font-color-menu);
        margin-left: 0.5rem;
        font-size: 80%;
    } */
}

@media (min-width: 1200px) { /* Desktop */

    /* CSS-Variabeln */
    :root {
        --font-size-base: 1.4rem;
        --font-size-h1: clamp(3.8rem, 8vw, 8rem);
        --font-size-h2: 4.8rem;
        --font-size-h3: 1.4rem;
        --font-size-h4: 2rem;
        --font-size-h5: 2rem;
        --font-size-h6: 5rem;
        --font-size-menu: clamp(3rem, 7vw, 7rem);
        --font-size-submenu: 1.4rem;
    
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 2rem;
        --space-lg: 3rem;
        --space-xl: 4rem;
        --space-xxl: 5rem;

        --content-width: 90vw;
        --content-margin: auto;

        --grid-template-outer: repeat(2, 1fr);
        --grid-template-inner: repeat(2, 1fr);
        --grid-column-inner: 1 / -1;
        --grid--column-gap: 24px;
        --grid-row-gap: 24px;
        --grid-gap: 24px;
    }


    /* Padding Content */

    .sppb-row,
    .com-content-article.item-page,
    .com-content-category-blog {
        padding-block: var(--space-xl);
        padding-inline: 0;
    }

    .moduletable,
    .mod-menu.mod-list.nav {
    padding-inline: 0;
    }

    .foot-container {
        padding: 0.25rem 0rem;
    }

    /* Navbar */

    .nav-container-inner {
        width: var(--content-width);
        padding-inline: 0;
    }


    /* Offcanvas */

    .offcanvas {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--color-bg);
        padding-top: calc(8rem + var(--height-menu));
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        z-index: 900;
    }
    
    body.offcanvas-open {
        overflow: scroll;
    }

    .offcanvas ul {
        gap: var(--space-xl);
    }


    /* Blog */

    .masonry-3 .com-content-category-blog__item {
        grid-column: span 1;
    }

    .pagination {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

}

@media (min-width: 1400px) { /* Desktop */

    /* CSS-Variabeln */
    :root {
        --font-size-base: 1.4rem;
        --font-size-h1: clamp(3.8rem, 8vw, 8rem);
        --font-size-h2: 4.8rem;
        --font-size-h3: 1.4rem;
        --font-size-h4: 2rem;
        --font-size-h5: 2rem;
        --font-size-h6: 5rem;
        --font-size-menu: clamp(3rem, 7vw, 7rem);
        --font-size-submenu: 1.4rem;
    
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 2rem;
        --space-lg: 3rem;
        --space-xl: 4rem;
        --space-xxl: 5rem;
    
        --site-width: 100vw;
        --content-width: 100%;
        --content-margin: 0;
        --height-menu: 120px;
        --height-logo: 90px;

        --grid-template-outer: repeat(8, 1fr);
        --grid-template-inner: repeat(6, 1fr);
        --grid-column-inner: 2 / 8;
        --grid--column-gap: 32px;
        --grid-row-gap: 32px;
        --grid-gap: 32px;
    }


    /* Span */

    .spal-1 {grid-column: span 1;}
    .spal-2 {grid-column: span 2;}
    .spal-3 {grid-column: span 3;}
    .spal-4 {grid-column: span 4;}
    .spal-5 {grid-column: span 5;}
    .spal-6 {grid-column: span 6;}
    .spal-7 {grid-column: span 7;}
    .spal-8 {grid-column: span 8;}

    .sppb-addon-wrapper:has(.spal-1) {grid-column: span 1;}
    .sppb-addon-wrapper:has(.spal-2) {grid-column: span 2;}
    .sppb-addon-wrapper:has(.spal-3) {grid-column: span 3;}
    .sppb-addon-wrapper:has(.spal-4) {grid-column: span 4;}
    .sppb-addon-wrapper:has(.spal-5) {grid-column: span 5;}
    .sppb-addon-wrapper:has(.spal-6) {grid-column: span 6;}
    .sppb-addon-wrapper:has(.spal-7) {grid-column: span 7;}
    .sppb-addon-wrapper:has(.spal-8) {grid-column: span 8;}


    /* Padding Content */

    .sppb-row,
    .com-content-article.item-page,
    .com-content-category-blog {
        padding-block: var(--space-xl);
        padding-inline: 0;
    }

    .moduletable,
    .mod-menu.mod-list.nav {
    padding-inline: 0;
    }

    .foot-container {
        padding: 0.25rem 0rem;
    }


    /* Offcanvas */

    .offcanvas {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--color-bg);
        padding-top: calc(8rem + var(--height-menu));
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        z-index: 900;
    }
    
    body.offcanvas-open {
        overflow: scroll;
    }

    .offcanvas ul {
        gap: var(--space-xl);
    }


    /* Blog */

    .masonry-3 .com-content-category-blog__item {
        grid-column: span 2;
    }

    .pagination {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

}