html {
    scroll-behavior: smooth;
    scroll-padding-top: 4.5vw;
}

.boxShadow .envelope { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mainWrapper > .boxShadow { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

body, h1, h2, h3, h4 { overflow-wrap: break-word;hyphens: auto; }

#main p a,
#main ul a,
#main ol a {
    text-shadow: 0 0 2px var(--text);
    color: var(--text);
    text-decoration: none;
    display: inline;

    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-repeat: repeat-x;
    background-position: 0 calc(100% - 0px);
    background-size: 100% 2px;

    border-bottom: unset;
}

#main em a {
    background-position: 0 calc(100% - 4px);
}

#main ul li em a,
#main ol li em a {
    background-position: 0 calc(100% - 6px);
}

/*button, .button { font-size: 34px; }*/ 

#main a.button { background-image: unset; }
#main a.button:hover { font-style: unset; }
#main .type-submit { width:100%; }
#main button.submit { margin-left:auto; margin-right:18px; display:block; }


/* Boxen mit Innenschatten */

#main .elText.gold,
#main .elText.grauInnen { padding: 1.6em 1.7em; }

#main .elText.gold p:last-of-type,
#main .elText.grauInnen p:last-of-type { margin-bottom: 0; }

#main .elText.gold { box-shadow: inset 0 0 20px var(--yellow); }
#main .elText.grauInnen { box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.25); }
@media (max-width: 575px) { 
  .elText.grauInnen {box-shadow: inset 0 0 13px rgba(0, 0, 0, 0.2) !important; }
}


#main .elText.grauInnen,
#main .elText.gold,
#main .elAccordion .title,
#main .elAccordion .content,
#main .elAccordion.alt,
#main .swiper-pagination-bullet,
#main .swiper-pagination-bullet-active { background-color:#FFF !important; }

#main .elAccordion.alt .title,
#main .elAccordion.alt .content { background-color:transparent !important; }

.elColumnWrapper.row:has(> :is(.gold, .grauInnen)) {
    margin-left: 0;
    margin-right: 0;
}

.elAccordion .title { padding: .8em 2.5em .8em 1em; }

/* QUOTE */
.elImage.home .quoteImg {padding: unset !important; }


/* CONTAINER */

#container { padding-top: 31vw; }
@media (min-width: 992px) { #container {padding-top: 9vw}} 

/* Bildunterschriften (Caption) */
figcaption { display:unset; text-align:right; font-style:italic; }


/* Bilder, die den Text umfließen */
figure.float_left { margin-right:1em; margin-bottom:0em; }
figure.float_right { margin-left:2em; margin-bottom:1em; }

figure.float_left img,
figure.float_right img { width: revert-layer; }

.floatRight { margin-left:2em; margin-bottom:1em; float:right; }

@media (max-width: 575px) { 
    figure.float_left { margin-right:0.75em; }
    figure.float_right { margin-left:0em; }
    .floatRight { margin-left:0em; }
}



/* Graue Innenschatten mit linker Ecke rund */
#main .linksRund { border-top-left-radius: 3em; }


.elImage.schatten picture { 
    position: relative;
    display: block;
}

.elImage.schatten picture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.23);
}

.elImage.schatten.rechtsRund picture:after { border-top-right-radius: 3em !important; }

.elVideo.schatten figure {
    position: relative;
    display: inline-block;
    margin: 0;
}

.elVideo.schatten figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.23);
    border-top-right-radius: 3em;
}

/* MOBILES MENÜ */

#maeMM { max-width: 95vw !important;  padding: 20px 0 30px 20px; max-height: 100svh !important; }
#maeMM .heading {font-family: "OrpheusPro", serif; font-style: italic; }
#maeMM { hyphens:auto; text-transform: uppercase !important; }
#maeMM a#mmKontakt { text-shadow: 0 0 2px var(--text); }
#maeMM a.top { text-transform: uppercase !important; font-style: italic !important; line-height: 1.1em; text-shadow: 0 0 2px var(--text);}
#maeMM a.hasBack, #maeMM a.heading { max-height: unset; overflow: unset; }
#maeMM a#mmKontakt { display:none !important; }

/* LANDSCAPE */

@media screen and (max-width: 991px) and (orientation: landscape) { 

    #headerImageWrapper { position: relative !important; }
    #container { padding-top:0; margin-top:-20px;}
    .quoteImg { height: unset !important; padding: 3em 0; }
    #main figure.startseitenQuote { padding: 3em 0 2.75em 0; }
    #maeMM { background-image:unset; }
}


/* BIG-PADDING */

.bigPadding .envelope { padding: 1.5em 1.5em !important; }
@media (max-width: 575px) { 
    .mainWrapper > .boxShadow { padding: 1.25em 1.25em; }
    .bigPadding .envelope { padding: 1.25em 1.25em !important; }
}

/* FOOTER */

@media (max-width: 991px) { 
    #footer p, #footer { text-align:center !important; }
}








/* ================================ Ab hier können Sie editieren ================================ */

/* Hintergrund-Logo & Footer */
body::before { height: 45vh; width: 45vh; top: 55svh; left: 50%; }
#footer {padding-bottom: 0.25em; padding-top: 50px; background: linear-gradient(white 0%, rgb(255, 208, 80) 100%) 0 0 / auto; }
#footer p a {display: inline;}



/* Menü & Kontakt */
#nav {font-family: "OrpheusPro", serif;padding-top: 1.5vw;height: 4.2vw;background-color: var(--bg);text-transform: uppercase}
#nav ul.level-1 > li:has(ul.level-2) > a::after {
 content: ""; display: inline-block;margin-right: -0.2vw; margin-left: 0.3vw; margin-bottom: 0.6vw;width: 0.4vw; height: 0.4vw; border-bottom: 1.4px solid black; border-right: 1.4px solid black; transform: rotate(45deg);
}
#nav ul.level-1 > li:not(:last-child)::after {content: "//";margin: 0 0.26vw;}


#maeMM a .inside {margin: 5px}
#maeMM a .back .inside {top: 0px}


a#desktopKontakt {font-size: 1.825vw; padding: 0.7vw 1.1vw 1vw 1vw; background-image: url("https://dev.draeger-elektrologie.de/media/Upload/SVG/Kontakt_Unterstrich.svg") !important; background-size: 13vw !important; width: unset; line-height: 1.4em; border-top-right-radius: 2vw; box-shadow: inset 0 3px 0.833vw rgba(0, 0, 0, 0.20), 0 3px 25px #FFD050;} 
/*inset 0 3px 12px #FFD050F2, */

@media (min-width: 1400px) {
a#desktopKontakt {line-height: 1.3em !important;} 
} 


a#desktopKontakt:hover {box-shadow: inset 0 0 0.833vw rgba(255,208,80, 0.8), 0 3px 25px #FFD050;}

a:hover {text-shadow: 0 0 5px var(--text);font-style: italic}



/* Schriftgrößen neu */

body {font-family: "Libre Franklin", sans-serif;font-weight: 300;font-size: 17px;background-color: var(--bg);color: var(--text);line-height: 1.35em}



/* --> BOOTSTRAP media query bodies ---------------------------------------------------------------------*/
/* sm Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .insetBoxWrapper .elText {width: 50%}
}
@media (max-width: 575px) { 
  .small {font-size: 85%; line-height: 1.35em; font-weight: 400;}
} 


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

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

}

/* xl Extra large devices (Notebook, 1200px and up) */
@media (min-width: 1200px) {
    body {font-size: 22px}
    .insetBoxWrapper .elText {width: 33%}
}

/* xxl Extra extra large devices (Desktops, 1400px and up) */
@media (min-width: 1400px) {
        body {font-size: 25px}
    .insetBoxWrapper .elText {width: 25%}
}
/* <-- BOOTSTRAP media query bodies ---------------------------------------------------------------------*/



h1, .h1 {font-size: 300% !important; line-height: 1em;}
@media (max-width: 575px) { 
  h1, .h1 {font-size: 270% !important; line-height: 1em;}
}

h2, .h2 {font-size: 248%; line-height: 0.9em;}
@media (max-width: 575px) { 
  h2, .h2 {font-size: 220% !important; line-height: 1em;}
}

h3, .h3 {font-size: 195%; line-height: 1.2em;}
@media (max-width: 575px) { 
  h3, .h3 {font-size: 180% !important; line-height: 1.1em;}
}


h4, .h4 {font-size: 165%; line-height: 1.2em;} 
@media (max-width: 575px) { 
  h4, .h4 {font-size: 145% !important; line-height: 1.1em;}
}

.kicker {font-style: italic;text-transform: none;font-size: 80%; line-height: 1.1em;}

/* Kursiv */
ul em, ol em, p em, td em {font-family: "OrpheusPro", serif; font-style: italic; font-size:1.15em; } 








/* Slider-Anpassung */

@media (min-width: 1400px) {
.swiper-pagination-bullet {font-size: 1.1em;}
}

.swiper {position: relative;padding-top: 5.5em;}
@media (max-width: 991px) { 
    .swiper {position: relative;padding-top: 4.5em;padding-bottom: 2rem;}
}


/* CSS Klassen allg. */
.rechtsRund {border-top-right-radius: 3em !important; overflow: hidden; }
video.rechtsRund, .video-container.rechtsRund { overflow:hidden; }
@media (max-width: 575px) { 
  .rechtsRund {border-top-right-radius: 2em !important; overflow: hidden; }
}

.smaller {max-width: 35%;}

/*.abstandNews {margin-bottom: -1em !important;}*/



/* QUOTE STARTSEITE */
#main figure.startseitenQuote {margin:auto ; height: 65vh; padding-top: 5vw;}

.quoteImg img {max-width: 1100px}



/* Abstand Quotes dermaz. Kosm. */
.dermazAbstand {padding-top: 18vw}
@media (min-width: 992px) { .dermazAbstand {padding-top: 1vw}}



/* AKKORDEON NEU: mehr Lesen */
.elAccordion.mehrLesen {}
.elAccordion.mehrLesen .content {padding: 0.8em 0em}
.elAccordion.mehrLesen .title {font-family: 'Libre Franklin'; font-weight: 300; font-size: 80%; padding: 0em 0em; box-shadow: none; text-shadow: 0 0 2px var(--text);}
.elAccordion.mehrLesen .title:after {}
.elAccordion.mehrLesen.opened .title:after {transform: rotate(180deg) translateY(50%)}



/* Kärtchen f. Slider */
.gelberSchein {background: white !important; border-radius: 0px 80px 0px 0px !important; box-shadow: 0 0 0.75em 0.4em #FFD05066 !important; width: 80%; padding: 3em 2.5em; margin: 2em auto !important;}
.gelberScheinmobile {background: white !important; border-radius: 0px 80px 0px 0px !important; box-shadow: 0 0 0.65em 0.4em #FFD05066 !important; width: 78%; margin: 1em auto; padding: 2em 1.5em 1.5em;}


/* Außenabstand neu

.mainWrapper > .boxShadow {padding: 2.75em 2.75em}


 BIG-PADDING 

.bigPadding .envelope { padding: 1.5em 1.5em !important; }
@media (max-width: 575px) { 
    .mainWrapper > .boxShadow { padding: 1.5em 1.5em; }
}
*/