:root {
    --baseFontsize: 23px;
    /*--bodyMaxWidth: 1920px;*/
    --bodyMaxWidth: unset;
    --bodyMinWidth: 1536px;
    --White: #fff;
    --Black: #000;
    --Yellow: rgb(255, 255, 0);
    --primaryColor: #ff6236;
    --backgroundStrongToSoft: linear-gradient(90deg, var(--primaryColor) 0%, #ff6f31 60%, #ffb31a 100%);
    --generalVertDistance: calc(var(--baseFontsize) * 2);
    --textColor: var(--Black);
    --logoWidth: 10.6em;
    --orangeBack: #ff6136;
    --wacaorang: #C93D16; /* ersetze --orangeBlack wenn WACA bestanden werden soll*/
    --hover: .4em;
    --transitionDurartion: 0.5s;
}
.yellow {
    color: var(--Yellow);
}
html {
    font-size: var(--baseFontsize);
}
html,
body {
    margin: 0;
    padding: 0;
    color: var(--textColor);
    line-height: unset;
    max-width: var(--bodyMaxWidth);
    margin: 0 auto;
}
body {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    /*font-weight: 100;*/
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
    font-size: 1rem;
    font-weight: 250;
}
#maincontent > div:not(.module--homehero),footer {
    margin-top: 4em;
}
h2 {
    font-size: 1.8em;
    line-height: 1.2;
    font-variation-settings: "wght" 300;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
h3 {
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: unset;
}
a {
    color: var(--White);
    text-decoration: none;
}
main a:hover {
    color: var(--Yellow);
}
main .linkCollection a:hover {
    color: unset;
}
p {
    margin-block-start: .5em;
    margin-block-end: .5em;
}
ul {
    list-style: none;
    padding-left: 0;
}
li {
    position: relative;
    padding-left: 1em;
}
li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--White);
}
.stdBtn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    transition: all var(--transitionDurartion) ease;
    cursor: pointer;
    padding: 1.1em 2.4em;
    font-size: 1em;
    font-weight: 600;
    /* background-color: #f4c400; */
    color: var(--Yellow);
    border: 1px solid var(--Yellow);
    font-weight: 100;
    font-size: .8em;
}
.stdBtn:hover {
    transform: translateY(calc(-1 * var(--hover)));
}
#page {
    position: relative;
}
#page > button.skip-link {
    display: none;
}
.contentwrap {
    width: calc(100% - 2.5em);
    /*max-width: 1200px;*/
    max-width: var(--bodyMinWidth);
    padding: 0 calc(2.5em / 2);
    margin: 0 auto;
}
#coppied_to_clipboard {
    position: fixed;
    bottom: -100px;
    left: 50%;
    background-color: #E9F2F1;
    padding: 5px 30px;
    font-weight: 400;
    box-shadow: 0 0 5px #666;
    line-height: 24px;
    margin-left: -125px;
    transition: all var(--transitionDurartion) ease-in-out;
    opacity: 0;
}
img {
    width: 100%;
    height: auto;
    margin: 0;
    padding:0;
    display: block;
}

/*header*/
header#mainheader {
    width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
}
header#mainheader .contentwrap.clearfix {
    position: relative;
}
#mainnav {
    display: flex;
    position: fixed;
    top: var(--header-height);
    left: 70%;
    max-height: 500px;
    width: 50%;
    background: var(--White);
    z-index: 100;
    opacity: 1;
    overflow: hidden;
    transition:
            transform 0.4s ease,
            opacity 0.3s ease,
            max-height 0.5s ease-in-out;
    background: var(--primaryColor);
    box-shadow:
            0 1px 2px rgba(0,0,0,.06),
            0 8px 24px rgba(0,0,0,.08),
            0 16px 48px rgba(0,0,0,.06);
    padding-top: var(--generalVertDistance);
    padding-bottom: var(--generalVertDistance);
    transform: translateX(100%);
}
#mainnav .contentwrap {
    width: 100%;
}
#mainnav ul li:nth-child(n + 1) {
    margin-top: 1em;
}
#mainheader {
    position: absolute;
    z-index: 80;
    width: 100%;
    padding-top: var(--generalVertDistance);
    padding-bottom: var(--generalVertDistance);
}
#mainheader.header--active {
    background: var(--backgroundStrongToSoft);
}
#mainheader .mainmenugrid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
}
a.lvl_1:hover {
    transform: translateY(calc(-1 * var(--hover)));
}

header:not(#mainheader) h2,
.cElemHeader h2 {
    margin-bottom: var(--generalVertDistance);
}


/* Base styles for the burger lines */
.burger {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 37px;
    width: 49px;
    padding: 0;
}

.burger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--White);
    border-radius: 3px;
    transition: all var(--transitionDurartion) ease-in-out;
    transform-origin: left center;
}

/* Transformation into an 'X' */
.burger.burger--active span:nth-child(1) {
    transform: rotate(45deg);
}

.burger.burger--active span:nth-child(2) {
    width: 0;
    opacity: 0;
}

.burger.burger--active span:nth-child(3) {
    transform: rotate(-45deg);
}
.burger.burger--active + #mainnav,
#mainheader.header--active #mainnav {
    transform: translateX(0);
}
/*header - end*/

#mainheader .logo img,
footer .logo img {
    max-width: var(--logoWidth);
}

.module {
    position: relative;
}

.module--homehero .hue {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,250,46,0.4);
    display: none;
}
.module--homehero .elemBG {
    overflow: hidden;
}
.module--homehero .elemBG object {
    min-width: 44em;
}
.module--homehero .overlayTxt {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    align-items: center;
    z-index: 3;
    color: var(--White);
}
.module--homehero .txtcontent {
    width: 32em;
    width: 33vw;
    padding-left: calc(var(--logoWidth) / 2);
}
.module--homehero .overlayTxt h1 {
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    /*max-width: 31.25em;*/
    font-size: 4vw;
    font-variation-settings: "wght" 400;
    line-height: 1;
}
.module--homehero .overlayTxt span {
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
    font-size: 1.2em;
}
.module--homehero .overlayTxt h1 span {
    color: var(--Yellow);
}
.module.module--std_text_media.viewtype_1 .contentwrap,
.module.module--std_text_media.viewtype_2 .contentwrap{
    position: relative;
    padding: 0;
    color: var(--White);
}
.module.module--std_text_media.viewtype_1 .contentwrap .svg,
.module.module--std_text_media.viewtype_2 .contentwrap .svg{
    position: relative;
    inset: 0;
}
.module.module--std_text_media.viewtype_1 .contentwrap .svg svg,
.module.module--std_text_media.viewtype_2 .contentwrap .svg svg{
    width: 100%;
    min-height: 100%;
}
.module.module--std_text_media.viewtype_1.isSpecial .contentwrap .svg::after,
.module.module--std_text_media.viewtype_2.isSpecial .contentwrap .svg::after{
    content: "";
    background: url(/typo3conf/ext/sgsv_sitepackage/Resources/Public/Assets/images/zapfen_path201.png);
    position: relative;
    width: 100%;
    height: 0;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/typo3conf/ext/sgsv_sitepackage/Resources/Public/Assets/images/zapfen_path201.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    z-index: 23;
    pointer-events: none;
    background-color: var(--orangeBack);
}

.module.module--std_text_media.viewtype_1.isSpecial .elementInnerWrap,
.module.module--std_text_media.viewtype_2.isSpecial .elementInnerWrap{
    z-index: 999;
}


.module.module--std_text_media.viewtype_1 .elementInnerWrap,
.module.module--std_text_media.viewtype_2 .elementInnerWrap{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    height: 100%;
}
.module.module--std_text_media.viewtype_1 .elementInnerWrap .main,
.module.module--std_text_media.viewtype_2 .elementInnerWrap .main{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: calc(var(--logoWidth) / 2);
}
.module.module--std_text_media.viewtype_1 h2,
.module.module--std_text_media.viewtype_2 h2 {
    color: var(--Yellow);
}

.module.module--std_text_media.viewtype_1 .text,
.module.module--std_text_media.viewtype_2 .text {
    margin-top: 2em;
    max-width: 20em;
}

.module.module--std_text_media.viewtype_1 .stdBtn,
.module.module--std_text_media.viewtype_2 .stdBtn {
    margin-top: 1em;
}
/*frame-layout-0*/
.frame-layout-0:not(.frame-type-textpic) .potentialGrid {
    text-align: center;
    padding-left: calc(var(--logoWidth) / 2);
    padding-right: calc(var(--logoWidth) / 2);
}
.text-center {
    text-align: center;
}
.frame-layout-0 .linktext {
    text-align: left;
}
.frame.frame-layout-0 h2,
.cElemHeader h2 {
    color: var(--primaryColor);
}
/*frame-layout-0 - end*/

/*frame-layout-0:haslinkcollection*/
.frame.frame-layout-0:has(.linkCollection) .innerContentWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5em;
}
.linkCollection {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 1em;
}
.linkCollection .arrowLink .arrow {
    display: none;
}
.linkCollection .arrowLink {
    pointer-events: none;
}
.frame.frame-layout-0:has(.linkCollection) .innerContentWrap .bodytext .image.image-block {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);
}
.frame.frame-layout-0:has(.linkCollection) .image.image-block {
    margin-block-end:unset;
    margin-block-start:unset;
    margin-inline-end:unset;
    margin-inline-start:unset;
}
.arrowLink {
    display: flex;
    flex-direction: row;
    transition: var(--transitionDurartion) ease;
}
.linkCollection a {
    color: inherit;
    text-decoration: none;
}
.linkCollection .arrow {
    margin-left: auto;
}
.linkCollection .arrow svg path {
    stroke: var(--primaryColor);
}
.arrowLink:hover {
    transform: translateY(calc(-1 * var(--hover)));
}
/*frame-layout-0:haslinkcollection end*/
/*frame-layout-0.frame-type-textpic (TERMS AND CONDITIONS, PRIVACY AND COOKIES)*/
.frame-layout-0.frame-type-textpic hr {
    border: none;
    height: 1px;
    background-color: var(--orangeBack);
    margin-top: var(--generalVertDistance);
    margin-bottom: var(--generalVertDistance);
}
.frame-layout-0.frame-type-textpic li::before {
    color: var(--orangeBack);
}
/*frame-layout-0.frame-type-textpic-END-*/
/*frame-layout-4*/
.frame-layout-4 {
    color: var(--White);
    background-color: var(--primaryColor);
    padding-top: var(--generalVertDistance);
    padding-bottom: var(--generalVertDistance);
    background-color: var(--orangeBack);
}
.frame-layout-4 .potentialGrid {
    text-align: center;
}
.frame.frame-layout-4 h2,
.frame.frame-layout-8 h2 {
    color: var(--Yellow);
}
.frame.frame-layout-4 h3 {
    font-weight: unset;
    font-size: 1.8em;
    max-width: 17em;
    margin: 0 auto;
}
/*frame-layout-4* - end/*/

/*frame-layout-8*/
.frame-layout-8 {
    color: var(--White);
}
.frame.frame-layout-8 .potentialGrid.has-bg-image {
    aspect-ratio: 16 / 9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);
}
.frame.frame-layout-8 .contentwrap .potentialGrid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px;

    /* Right side (not SVG) */
    background: linear-gradient(
            90deg,
            #ffc51f 0%,
            #ffa325 55%,
            #ff7f2f 100%
    );
}
.frame.frame-layout-8 .contentwrap .potentialGrid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 280' preserveAspectRatio='none'%3E%3Cpath fill='%23ff5b36' d='M0 0H570C600 60 640 115 650 155C660 195 625 235 600 280H0Z'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}
.frame.frame-layout-8 header {
    z-index: 1;
}
.frame.frame-layout-8 .innerContentWrap {
    width: 50%;
    position: relative;
    z-index: 1;
}
/*frame-layout-8 - end*/

/*boxes*/
.module--boxes .boxesWrap.boxSpan_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    /*max-width: 1200px;*/
    margin: 0 auto;
}
.module--boxes .boxesWrap.boxSpan_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6em;
}
.module--boxes .cElemHeader {
    text-align: center;
}
.module--boxes .box {
    background: var(--White);
    border-radius: 2px;
    min-height: 15.25em;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    box-shadow:
            0 10px 30px rgba(0,0,0,.08),
            0 4px 12px rgba(0,0,0,.04);

    transition: var(--transitionDurartion) ease;
}
.module--boxes .boxSpan_4 .box {
    background: var(--White);
    border-radius: 2px;
    min-height: 15.25em;
    padding: 3em 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);
    transition: var(--transitionDurartion) ease;
    min-height: 16em;
}
.module--boxes .box:hover {
    transform: translateY(calc(-1 * var(--hover)));
    box-shadow:
            0 18px 40px rgba(0,0,0,.12),
            0 8px 18px rgba(0,0,0,.06);
}

.module--boxes .boxInnerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module--boxes .titlesWrap {
    margin-bottom: .7em;
}

.module--boxes h3.title {
    margin: 0;
    font-size: 2em;
    font-weight: 500;
    color: var(--primaryColor);
    line-height: 1.1;
    font-size: 1.2em;
}
.module--boxes .subtitle {
    font-size: 1.2em;
    font-weight: 300;
    color: var(--primaryColor);
    line-height: 1.1;
}
.module--boxes .text {
    max-width: 14.4em;
}
/*boxes - end*/

/*footer*/
footer {
    color: var(--White);
    background: var(--backgroundStrongToSoft);
    font-size: 1em;
}
footer address {
    font-style: normal;
}
footer .footerWrap {
    padding-top:var(--generalVertDistance);
    padding-bottom:var(--generalVertDistance);
}
footer .grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    grid-template-areas:
        "logo contact"
        ".    meta";
}
footer .logo { grid-area: logo; }
footer .footer-contact { grid-area: contact; }
footer .footer-meta { grid-area: meta; }
footer .footer-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "address phone"
        "address    email";
}
footer .footer-address{ grid-area: address; }
footer .footer-phone { grid-area: phone; }
footer .footer-email { grid-area: email; }


footer .footer-meta {
    margin-top: .8em;
    font-size: .8em;
}
footer .links {
    display: none;
}
footer h3 {
    font-size: inherit;
    color:var(--Yellow);
    margin-top: unset;
    margin-bottom: unset;
    font-weight: 400;
}
footer p {
    margin-block-start: .2em;
    margin-block-end: .2em;
}
/*footer - END*/

/* 1536px and below */
@media (max-width: 1536px) {
    .frame-layout-0:not(.frame-type-textpic) .potentialGrid {
        text-align: center;
    }
    .module.module--std_text_media.viewtype_1 .contentwrap .svg, .module.module--std_text_media.viewtype_2 .contentwrap .svg {
        overflow: hidden;
    }
    .module.module--std_text_media.viewtype_1 .contentwrap .svg svg, .module.module--std_text_media.viewtype_2 .contentwrap .svg svg {
        min-width: 65em;
    }
}

/* 1280px and below */
@media (max-width: 1280px) {
    :root {
        --baseFontsize: 20px;
    }
    .module.module--std_text_media.viewtype_2 {
        font-size: 18px;
    }
    #maincontent > div:not(.module--homehero), footer {
        margin-top: 2em;
    }
}

/* 1024px and below */
@media (max-width: 1024px) { }

@media (max-width: 960px) {
    :root {
        --baseFontsize: 16px;
        --logoWidth: 6.6em;
    }
    #mainnav {
        padding-top: var(--generalVertDistance) / 2;
        padding-bottom: var(--generalVertDistance) / 2;
    }
    .module.module--std_text_media.viewtype_2 {
        font-size: 16px;
    }
    .module--boxes .boxesWrap.boxSpan_3 {
        gap: .6em;
    }
    .module--boxes .boxesWrap.boxSpan_4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .frame.frame-layout-0:has(.linkCollection) .innerContentWrap {
        grid-template-columns: 1fr;
        gap: 2em;
    }
}

/* 768px and below */
@media (max-width: 768px) { }

/* 640px and below */
@media (max-width: 640px) {
    .module--homehero .txtcontent {
        width: 32em;
        width: 33vw;
        padding-left: unset;
    }
    .module.module--std_text_media.viewtype_1 .elementInnerWrap .main, .module.module--std_text_media.viewtype_2 .elementInnerWrap .main {
        max-width: 100%;
        margin-left: unset;
        padding-left: 2em;
        padding-right: 2em;
    }
    .module.module--std_text_media.viewtype_1 .elementInnerWrap, .module.module--std_text_media.viewtype_2 .elementInnerWrap {
        justify-content: center;
    }
    .module--boxes .box,
    .module--boxes .boxSpan_4 .box {
        min-height: unset;
        padding: 3em 2em;
    }
    .module--boxes .boxesWrap.boxSpan_3,
    .module--boxes .boxesWrap.boxSpan_4 {
        grid-template-columns: 1fr;
    }
    .frame-layout-0:not(.frame-type-textpic) .potentialGrid {
        text-align: center;
        padding-left: unset;
        padding-right: unset;
    }
    footer .grid {
        grid-template-columns: 1fr;
        grid-template-areas: unset;
    }
    footer .logo { grid-area: unset; }
    footer .footer-contact { grid-area: unset; }
    footer .footer-meta { grid-area: unset; }

    footer .footer-contact {
        grid-template-columns: 1fr;
        grid-template-areas:unset;
    }
    .module--boxes .text {
        max-width: unset;
    }
    footer .footer-address{ grid-area: unset; }
    footer .footer-phone { grid-area: unset; }
    footer .footer-email { grid-area: unset; }
    .footer-contact {
        margin-top: .8em;
    }
    .module--homehero .overlayTxt h1 {
        font-size: 25.6px;
    }
}
/* 480px and below */
@media (max-width: 480px) {
    .module--homehero .overlayTxt h1 {
        font-size: 30px;
    }
    .module.module--std_text_media.viewtype_1.isSpecial .contentwrap .svg::after,
    .module.module--std_text_media.viewtype_2.isSpecial .contentwrap .svg::after{
        display: none;
    }
}

/* 375px and below */
@media (max-width: 375px) {

}

/* 320px and below */
@media (max-width: 320px) {

}