/* font-size
42px (h1)   247%
28px (h2)   165%
24px (h3)   141%
23px /btn)  135%
20px (h4)   118%
17px        100%
15px         88%
 */
:root {
    --bg: #FFF;
    --text: #000;
    --yellow: #FFD050;
}

:focus-visible {outline: 3px solid var(--focus-color);outline-offset: 4px;}

em, i {font-style: italic}
strong, b {font-weight: bold}
img {width: 100%}
p {margin-bottom: 1em}
a {color: var(--text)}
p a {text-shadow: 0 0 2px var(--text);color: var(--text);text-decoration: none;border-bottom: solid var(--yellow) 2px;display: inline-block}
p a:hover {text-shadow: 0 0 5px var(--text);font-style: italic}
.small {font-size: 80%;line-height: 1.35em}
sup {vertical-align: super;font-size: 60%;}
.rteText {overflow-wrap: break-word;hyphens: auto;}
.rteText ul {list-style-type: '—';list-style-position: outside;margin: 1em 0 1em 1em}
.rteText ol {list-style-type: decimal;list-style-position: outside;margin: 1em 0 1em 1em}
.rteText li {padding-left: .7em;margin-bottom: .3em}
.elMargin {content: '';height: 2em; width:100%;}
.elMargin.mLarge {height: 4em; width:100%;}
.elMargin.mVh {height: 100vh; width:100%;}
button, .button {font-size: 123%;font-family: "OrpheusPro", serif;text-transform: uppercase;display: inline-block;line-height: 1.2em;padding: .2em 1.5em;box-shadow: 0 0 12px 0 var(--yellow);border-top-left-radius: .7em;text-decoration: none;text-shadow: 0 0 3px var(--text) !important;appearance: none;background-color: var(--bg);color: var(--text);border-bottom: none !important;cursor: pointer;transition: all .3s}
button:hover, .button:hover {box-shadow: 0 6px 20px var(--yellow)}
button:active, .button:active {box-shadow: inset 0 0 8px var(--yellow)}
.quoteImg {display: flex;justify-content: center;align-items: center;height: 100vh}
.elImage.home .quoteImg {height: auto;padding: 0.75em 0 2em 0}
.quoteImg img {max-width: 1000px}
.imgLogo {width: 5em}
figcaption {display: none;font-size: 80%;text-align: center}
.showCaption figcaption {display: block}
.image_container {position: relative}
.captionTop figcaption {position: absolute;left: 0;top: -1.5em;width: 100%}
.center {text-align: center}
video, .video-container {border-top-right-radius: 3em;overflow: hidden}
.image_container.icons {max-width: 24px}

/* Schatten Boxen */
.boxShadow .envelope {backdrop-filter: blur(10px);background-color: rgba(255,255,255,.75)}
.mainWrapper > .boxShadow {backdrop-filter: blur(10px);overflow: hidden;background-color: rgba(255,255,255,.75);border-top-right-radius: 5em;margin: 1em 0;padding: 2.75em 2.75em} 
.boxShadow .elColumnWrapper .envelope {backdrop-filter: none} /* 2026-05-21 ME: prevent double filter for columnwrapper envelopes inside a shadow box */
#main .mainWrapper > .boxShadow .envelope {background-color: transparent}
.elColumnWrapper .boxShadow .envelope {border-top-right-radius: 5em;margin: 1em 0;padding: 1.5em 1em}
.elColumnWrapper .boxShadow.noPadding .envelope {padding: 1.5em 0 0 0}
.elColumnWrapper .boxShadowGray .envelope, .mainWrapper > .boxShadowGray {box-shadow: 0 0 1.5em #00000041}
.elColumnWrapper .boxShadowYellow .envelope, .mainWrapper > .boxShadowYellow {box-shadow: 0 0 1.5em #FFD050BF}
.noPadding h1, .noPadding h2, .noPadding h3, .noPadding h4 {margin-bottom: 0;padding: 0 1em .5em 1em}
.boxShadow .stretch {position: relative;margin-left: -3em;margin-right: -3em;margin-bottom: -3em}

body {font-family: "Libre Franklin", sans-serif;font-weight: 300;font-size: 17px;background-color: var(--bg);color: var(--text);line-height: 1.35em}
body::before {content: "";position: fixed;top: 50%;left: 50%;height: 80vw;width: 80vw;transform: translate(-50%, -50%);background: url(../images/draeger/bodyBgStar.webp) center no-repeat;background-size: contain;}


h1, h2, h3, h4 {font-family: "OrpheusPro", serif;line-height: 1.1em;margin-bottom: .75em;position: relative}
h1 {font-size: 247%;}
h2 {font-size: 165%;}
h3 {font-size: 141%;}
h3 em {text-transform: none}
h4 {font-size: 118%;font-style: italic}
.kicker {font-style: italic;text-transform: none;font-size: 80%}
.kicker:before {content: '– '}

/* HEADER -------------------------------------> */
#header {position: fixed;width: 100%;top: 0;left: 0;box-shadow: none;z-index: 3}
#nav {font-family: "OrpheusPro", serif;padding-top: 1.5vw;height: 4vw;background-color: var(--bg);text-transform: uppercase}
#nav a {text-decoration: none;transition: transform .3s;display: inline-block;line-height: 1.2em;}
#nav ul.level-1 {display: flex;justify-content: center}
#nav ul.level-1 > li {font-size: 1.825vw;display: inline-block;position: relative;padding-bottom: 15px}
/* #nav ul.level-1 > li:not(:last-child) a::after {content: "//";margin: 0 0.26vw;} */
#nav ul.level-1 > li:hover > a, #nav ul.level-1 > li > a:hover, #nav ul.level-1 > li.active > a, #nav ul.level-1 > li.trail > a {text-shadow: 0 0 0.26vw var(--text);font-style: italic;transform: skew(0deg)} /* transform: skew(-15deg) */
#nav ul.level-1 > li:hover > a:after, #nav ul.level-1 > li > a:hover:after, #nav ul.level-1 > li.active > a:after, #nav ul.level-1 > li.trail > a:after {font-style: normal;font-weight: normal;text-shadow: none;}
#nav ul.level-1 > li:hover > a:before, #nav ul.level-1 > li > a:hover:before, #nav ul.level-1 > li.active > a:before, #nav ul.level-1 > li.trail > a:before {content: "";background: url(../images/draeger/stern-gelb.svg) no-repeat;height: 2.188vw;width: 2.448vw;position: absolute;top: -0.833vw;left: -0.417vw;z-index: -1}
#nav ul.level-2 {position: absolute;background-color: var(--bg);display: none;box-shadow: 0 0 1.354vw 0 var(--yellow);border-radius: 0 40px 0 0;overflow: hidden;margin-top: 15px;transition: all .3s}
#nav ul.level-1 > li:hover ul, ul.level-2:hover {display: block}
#nav ul.level-2 a:after {display: none}
#nav ul.level-2 > li {padding: 10px 25px;box-shadow: inset 0 0 0.833vw rgba(0,0,0,0.25);}
#nav ul.level-2 > li:hover, #nav ul.level-2 > li.active {box-shadow: inset 0 0 0.833vw rgba(255,208,80,0.25)}
#nav ul.level-2 > li:hover a {font-style: italic}
#headerImageWrapper {position: fixed;z-index: 1;width: 100%;top: 30px}

/* Mobile Navi -------------------------------- */
#maeMM-trigger {right: 0;top: 30px;padding: 6px 14px;box-shadow: 0 0 10px #ffd050;border-top-left-radius: 20px;background-color: var(--bg)}
#maeMM-trigger .bar {height: 2px;background: #000;margin: 8px 0}
#maeMM {overflow: scroll;max-height: 100vh;background: var(--bg);right: 0;max-width: 90vw !important;left: auto;top: 30px;font-family: "OrpheusPro", serif;bottom: auto;box-shadow: 0 0 20px 0 var(--yellow);border-top-left-radius: 50px;padding: 0 0 30px 30px;background-image: url("../images/draeger/mobile-menu-bg.png");background-size: 120px auto;background-repeat: no-repeat;background-position: left 15px bottom 15px}
#maeMM .headerWrapper, #maeMM .wrapper {margin-right: 0}
#maeMM .headerWrapper {margin-bottom: 20px}
#maeMM .wrapper, #maeMM a, #maeMM a:not(.top):hover, #maeMM a:focus, #maeMM.parentToggles a.top:hover, #maeMM.parentToggles a.top:focus {background-color: transparent}
#maeMM a {color: var(--text);border-color: transparent;font-size: 23px;text-transform: uppercase;text-decoration: none !important;}
#maeMM .opener, #maeMM .close, #maeMM a .back {border-color: transparent}
#maeMM a.hasBack, #maeMM a.heading {border-bottom-color: transparent}
#maeMM .maeBtn .inside {border-color: var(--text)}
#maeMM .maeBtn:hover, #maeMM .maeBtn:focus {background: rgba(255,208,80,0.25);border-color: transparent}
#maeMM .close::before, #maeMM .close::after {background-color: var(--text)}
#maeMM .item a:hover, #maeMM li.active > a {text-shadow: 0 0 3px var(--text);font-style: italic}
#maeMM li {position: relative}
#maeMM li > a:hover, #maeMM li.trail > a, #maeMM li.active > a {background-image: url(../images/draeger/stern-gelb.svg) !important;background-position: 10px top !important;background-repeat: no-repeat !important;background-size: 25px auto !important;}
#maeMM a.top {text-transform: none}
#maeMM a .back .inside {top: 8px}
#maeMM nav.wrapper {padding-bottom: 150px}
a#mmKontakt {position: absolute;display: inline-block !important;right: 20px;bottom: 20px;font-weight: bold;background-image: url("../images/draeger/underline1.webp") !important;background-position: center bottom !important;background-repeat: no-repeat !important;background-size: 100% auto !important}
a#mmKontakt:hover {text-shadow: 0 0 3px var(--text);font-style: italic}

#container {padding-top: calc(36vw + 80px);padding-bottom: calc(100vh - 4vw)}
#container, #footer .inside, #headerImageWrapper {padding-left: 20px;padding-right: 20px;margin: 0 auto;max-width: 1920px}
#headerImageWrapper {max-width: none}
#main {position: relative;z-index: 2}
#main .envelope {background-color: rgba(255,255,255,.75)}

.elAccordion .title {position: relative;font-family: "OrpheusPro", serif;font-size: 118%;font-style: italic;line-height: 1.2em;padding: .4em 2.5em .4em 1em;box-shadow: inset 0 1px .5em rgba(0,0,0,0.15);border-top-right-radius: 1em;}
.elAccordion .title:after {display: block;content: '';position: absolute;width: 1em;height: 1em;right: 1em;top: 50%;transform: translateY(-50%);background-image: url("../images/draeger/akkoBtn.webp");background-size: cover;transition: all .3s}
.elAccordion.opened .title:after {background-image: url("../images/draeger/akkoBtnClose.webp");background-size: 100% auto;background-position: center center;background-repeat: no-repeat}
.elAccordion .content {padding: 1em 1em 0 1em}
.elAccordion.alt {box-shadow: inset 0 0 1em #ffd050}
.elAccordion.alt .content {padding: 1em 1.5em}
.elAccordion.alt .title {padding-top: .8em;padding-bottom: .8em;box-shadow: none}
.elAccordion.alt .title:after {background-image: url("../images/draeger/arrowDown.svg");background-size: contain;background-repeat: no-repeat}
.elAccordion.alt.opened .title:after {transform: rotate(180deg) translateY(50%)}

/* Slider */
.elSwiper {
    --swiper-theme-color: #000;
    --swiper-navigation-color: var(--yellow);
    --swiper-pagination-color: var(--yellow);
    --swiper-pagination-bullet-size: 20px;
    --swiper-pagination-bullet-horizontal-gap: 3px;
    --swiper-pagination-bullet-inactive-color: #ddd;
    --swiper-pagination-bullet-inactive-opacity: 1;
}
.swiper {position: relative;padding-top: 5em}
.elSwiper .swiper-button-prev, .elSwiper .swiper-button-next, .swiper-pagination {position: absolute;top: 2em;}
/* .elSwiper .swiper-button-prev, .elSwiper .swiper-button-next {background-color: rgba(255,255,255,.85)} */
.swiper-pagination {top: calc(2em - 20px) !important;}
.navBottom .swiper {padding-top: 0;padding-bottom: 3em}
.elSwiper.navBottom .swiper-button-prev, .elSwiper.navBottom .swiper-button-next, .navBottom .swiper-pagination {top: auto !important;bottom: 0}
.swiper-pagination-bullet {background-color: transparent !important;margin-top: -1em !important;width: 1.5em;height: 3em;line-height: 3em;border-radius: 0 0 0 0 !important;box-shadow: inset 1px 0 8px 0 rgba(0,0,0,0.27);font-family: "OrpheusPro", serif}
.swiper-pagination-bullet-active {box-shadow: inset 1px 0 10px 0 #ffd050}
.swiper-button-prev, .swiper-button-next {width: 60px;background-repeat: no-repeat;background-size: 100% auto;background-position: center center;background-image: url("../images/draeger/swiperArrowLeft.webp")}
.swiper-button-next {background-image: url("../images/draeger/swiperArrowRight.webp")}
.swiper-navigation-icon {display: none}

.insetBoxWrapper {display: flex;flex-wrap: wrap;position: relative;width: 100%;}
.insetBoxWrapper .elText {display: flex;flex-direction: column;width: 100%;box-shadow: inset 0 0 1.042vw rgba(0,0,0,0.25);padding: 1em 1.5em 0 1.5em;overflow: hidden}
.elText.gold {box-shadow: inset 0 0 1.563vw var(--yellow);padding: 1em 1.5em}
.elText.grauInnen {box-shadow: inset 0 0 1.042vw rgba(0,0,0,0.25);padding: 1em 1.5em}



/* Form */
legend {display: none}
input[type="text"], input[type="number"], input[type="email"], input[type="phone"], select, textarea {line-height: 1.36;font-family: "Libre Franklin", sans-serif;font-weight: 400;transition: all .3s ease-in-out;padding: 0.5rem 1rem 0.5rem 1rem;background: rgba(255,255,255,0.8);border-width: 1px;border-style: none;border-color: #000;border-radius: 0 30px 0 0;box-shadow: inset 1px 0 10px 0 rgba(0,0,0,0.2);}
input[type="checkbox"] {box-shadow: inset 1px 0 10px 0 rgba(0,0,0,0.2)}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {background-color: var(--yellow);}
select {appearance: none;background-image: url("../images/angle_down.svg");background-position: right .5em center;background-repeat: no-repeat;background-size: .7em auto;padding-right: 1.5em}
label {font-family: "OrpheusPro", serif;font-style: italic;font-size: 120%}
.type-checkbox label, .type-description.forCheckbox p {font-family: "Libre Franklin", sans-serif;font-style: normal;font-size: 60%;line-height: 1.2em;float: right;width: calc(100% - 30px);display: inline-block}
.type-description.forCheckbox a {color: var(--yellow);text-shadow: none;border-bottom: none}
.type-description.forCheckbox a:hover {text-shadow: none;text-decoration: underline}
.fieldWrapper {margin-bottom: 1.2em}
.fieldWrapper.type-checkbox {margin-bottom: 0}
.fieldWrapper.required label::after {color: var(--text)}
.instagram a {width: 50px;height: 50px;display: inline-block}


#footer {font-family: "OrpheusPro", serif;font-size: 70%;text-align:center;line-height: 1.5em;padding-bottom: 1em;background: linear-gradient(rgba(255, 208, 80, 0) 0%, rgb(255, 208, 80) 100%) 0 0 / auto;padding-top: 75px}
#footer a {text-transform: uppercase}
#footer p {margin-bottom: 1.6em}
#footer a[href^="mailto:"] {text-transform: none}
#footer nav li {display: inline-block;font-size: 175%}
#footer nav li:first-child:after {content: '/';display: inline-block;margin: 0 .2em;}
#footer nav a {text-decoration: none}
#footer nav a:hover {font-style: italic;letter-spacing: 0}
a#desktopKontakt {display: none;position: fixed;right: 30px;bottom: 0;z-index: 3;font-size: 30px;background-image: url("../images/draeger/underline1.webp") !important;background-position: center bottom 5px !important;background-repeat: no-repeat !important;background-size: 135px auto !important;background-color: var(--bg);line-height: 1.2em;text-decoration: none;padding: 10px 15px 15px 15px;box-shadow: 0 3px 20px rgba(0,0,0,.35);border-top-right-radius: 14px;width: 180px;text-align: center;text-shadow: 0 0 0.26vw var(--text)}
a#desktopKontakt:hover {font-style: italic;text-shadow: 0 0 0.26vw var(--text)}


/* --> BOOTSTRAP media query bodies ---------------------------------------------------------------------*/
/* sm Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .insetBoxWrapper .elText {width: 50%}
}

/* md Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {font-size: 21px}
    #container, #footer .inside, #headerImageWrapper {padding-left: 30px;padding-right: 30px}
    #headerImageWrapper {top: 4.5vw}
    body::before {height: 60vw;width: 60vw}
    .type-checkbox label, .type-description.forCheckbox p {width: calc(100% - 40px)}
    .image_container.icons {max-width: 27px}
}

/* lg Large devices (landscape tablet, 992px and up) */
@media (min-width: 992px) {
    #footer {text-align: left;}
    #footer nav {text-align: right}
    #container {padding-top: calc(13vw + 80px)}
    body::before {height: 22vw;width: 22vw}
    a#desktopKontakt {display: inline-block}
    #container {padding-right: 100px;padding-left: 100px}
}

/* xl Extra large devices (Notebook, 1200px and up) */
@media (min-width: 1200px) {
    body {font-size: 28px}
    .insetBoxWrapper .elText {width: 33%}
    .image_container.icons {max-width: 34px !important}
}

/* xxl Extra extra large devices (Desktops, 1400px and up) */
@media (min-width: 1400px) {
    .insetBoxWrapper .elText {width: 25%}
    .image_container.icons {max-width: 40px !important}

}

.swiper { container-type: inline-size; container-name: swiper;} 
@container swiper (max-width: 390px) {
    .swiper-button-prev, .swiper-button-next {
        width: 40px;
        margin-top: calc(-7px - var(--swiper-navigation-size)/2) !important;
    }
}

@media (max-width: 390px) {
    .swiper-button-prev, .swiper-button-next {width: 40px;margin-top: calc(-7px - var(--swiper-navigation-size)/2) !important;}

}
/* <-- BOOTSTRAP media query bodies ---------------------------------------------------------------------*/