/* ++++++++++++++++++++++++++++++++++ */
/*     custom.css DG-ES Gesamt        */
/* ++++++++++++++++++++++++++++++++++ */ 
body {line-height: 1.35em;}
h1.clsStart {font-size: 1.8em; font-weight: 400; color: #323232; text-transform: uppercase; margin-bottom: .2rem; padding: 0;}
h1 {font-size: 1.8em; margin: 0.1rem 0 1.4rem 0; padding-bottom: 10px; position: relative; font-weight: 600; color: #616060; text-transform: none;}
h2 {font-size: 1.6em; font-weight: 600;}
h3 {font-size: 1.3em;}
.module_header h3 {color: #e6500f; border-top: 1px solid #e6500f; border-bottom: 1px solid #e6500f; padding: 8px 3px !important;}
.module_header h3.clsCenter {text-align: center;}
a {text-decoration: none !important;}
a[href^="tel"] {color: #e6500f;}
a:hover {color: #323232;}
.logo a {margin-left: auto;}
.header_bottom.wrapper960 {background: #323232; background: linear-gradient(90deg,rgba(50, 50, 50, 1) 0%, rgba(120, 117, 112, 1) 50%, rgba(50, 50, 50, 1) 100%); width: 100% !important;}
#container_top3_modules {margin-top: 15px;}
#container_bottom2_modules {margin-top: 15px;}
.text-light {color: rgba(255,255,255,1) !important;}
/* HORNAV menu */
.hornav ul.menu {margin: 0 auto;}
.hornav ul.menu > li.active > a {color: #fff; font-weight: 800; font-size: 110%;}
.hornav ul.menu > li > a {font-weight: 700; font-size: 1em;}
.hornav ul.menu > li > a:hover {color: #c7c7c7;} 
.hornav ul.menu > .parent-hover > a {color: var(--secondary);}

.clsKontaktLink {font-style: italic; font-weight: 600; color: #323232 !important;}
.clsHeadKont {text-transform: uppercase; color:#323232 !important;}
.header-3 a {color:#323232;}
.clsHRGreen {width: 33%; max-width: 400px !important; height: 3px !important; background-color: #787570; border: none !important; opacity: 1 !important;}
.clsFooLinkUp {color:#fff; text-transform: uppercase; line-height: 1.6em;}
.text-light a:not(.primary) {color: rgba(255,255,255,1) !important;}
.clsSubHeader {font-size: 200%; text-transform: uppercase; font-weight: 800; letter-spacing: 4px; text-shadow: 1px 1px 2px #373737;}
.clsSubHeaderKl {font-size: 130%; font-weight: 600; letter-spacing: 2px;}
.clsDivImTxt {max-width: 350px; float: right; padding: 30px 30px 10px 30px; margin-left: 25px;}
.clsDivFunFact {max-width: 100%; padding: 30px; background-color: #4db9a121; border-radius: 15px;}
.clsDivFunFact:hover {box-shadow: 2px 2px 8px #c2c2c2;}
.clsTagLine {color: #323232; position: relative; font-size: 0.9em !important; font-weight: 400;}
.clsVerticalLine {display: inline-block; width: 3px; height: 0.9em; background: linear-gradient(to bottom, #323232, #0d0853); margin: 0 10px; vertical-align: bottom;}
h1.clsIntro {margin: 0.1rem 0 1.4rem 0; display: inline-block; padding-bottom: 10px; position: relative; font-weight: 600; color: #616060; text-transform: none;}
a.clsBtnEinstiege {color: #323232; border: 1px solid #323232; padding: 10px 20px; margin-right: 10px; border-radius: 5px; transition: 0.3ms ease;}
a.clsBtnEinstiege:hover {background-color: #787570; color: #fff;}
div.clsButton {display: flex; justify-content: center; align-items: center; height: 15vH; width: 100%; margin: 0; padding: 0;}
.right.item-image {max-width: 50%; margin: 7px 0 10px 25px;}
.clsInstaLinkedCont {display: flex; justify-content: flex-end; align-items: center; gap: 5px; padding: 10px 0; top: 40px; position: relative; width: 300px;  margin-left: auto; margin-right: 40px;}

/* Subheader Farbbalken */
.clsSubHeadBox {width: 100%; height: 150px; position: relative;}
.clsTuerkis {background-color:#52b9a0;}
.clsLavendel {background-color: #6d87c3;}
.clsPetrol {background-color: #004d60;}
.clsGrau {background-color: #787878;}
.clsHellGrau {background-color: #f0f0f0;}
.clsGelb {background-color: #fbba00;}
.clsHellGruen {background-color: #a8d3b0}
.clsSubHeadTxt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4em; font-weight: 600; letter-spacing: 2px; color: #fff; margin: 0; white-space: nowrap;}

/* Zitatbereich */
.clsZitat {max-width: 50%; padding: 20px; margin: 20px auto; font-style: italic; color: #787570; background: transparent; border: none; font-size: 1.2em; text-align: center; font-weight: 600;}
.clsZitatAuthor {font-size: 0.8em; margin-top: 5px; color: #787570;}
.clsZitatContainer {background-image: url('/images/design/DGES_Zitatgrafik.jpg'); background-size: cover; background-position: center; width: 100%; padding: 100px; text-align: center; position: relative; margin-bottom: 30px;}

/* StartGrid auf Startseite */
.clsStartGrid {width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;}
.clsStartGridItem {position: relative; overflow: hidden; cursor: pointer; display: block; text-decoration: none; aspect-ratio: 600 / 310;}
.clsStartGridItem img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 8s ease-out;}
.clsStartGridItem:hover img {transform: scale(1.05);}
.clsTxtOverlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; color: white; display: flex; flex-direction: column; justify-content: center; pointer-events: none; transition: transform 0.6s ease-out;}
.clsStartGridItem:hover .clsTxtOverlay {transform: translateX(8px) translateY(-8px);}
.clsTxtOverlay h2 {font-size: 3em; font-weight: bold; padding-left: 30px; margin-bottom: 15px; text-align: left; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); color: white;}
.clsTxtOverlay ul {list-style: none; text-align: left;}
.clsTxtOverlay ul li {font-size: 1.4em; margin-bottom: 4px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); font-weight: 700; line-height: 1.4em;}

/* Partner Werden auf Startseite */
.clsImgPartner {width: 1220px; height: 350px; background-image: url('/images/startseite/DGES_Modul_Partner.jpg'); background-size: cover; background-position: center; padding: 35px 0 25px 30px; color: #fff;}
h2.clsWhite {font-size1.3em; color: #fff; line-height: 2rem;}
.clsImgPartner p {font-size: 0.9em;}

/* Newsletter */
.clsNLPTxt {font-size: 0.8em;}
.clsNLH1 {font-size: 1.4em; margin-bottom: 1rem !important;}
.clsNLH3 {font-size: 1.1em;}

@media only screen and ( max-width: 959px) {
    h1 {font-size: 2.2em; padding-left: 3px;}
    h2 {font-size: 1.6em; line-height: 2rem;}
    body {font-size: 0.9em !important;}
    .scrolled .menu-toggle {margin-top: 4px; margin-bottom: 4px;}

    .clsTxtOverlay {padding: 5px;}
    .clsTxtOverlay h2 {font-size: 2em; padding-left: 20px; margin-bottom: 5px;}
    .clsTxtOverlay ul li {font-size: 1.2em; line-height: 1.2em;}
    .clsImgPartner {width: 100%; height: max-content; padding: 25px 5px 25px 20px;}
    .clsInstaLinkedCont {justify-content: center;}
    a.clsBtnEinstiege {padding: 7px 10px;}
}
@media only screen and ( max-width: 767px ) {
h1 {font-size: 1.8em; padding-left: 5px;}
h2 {font-size: 1.4em; line-height: 2rem;}
body {font-size: 0.85em !important;}
.clsImgSmall {width: 50%;}
.scrolled .menu-toggle {margin-top: 4px; margin-bottom: 4px;}
.clsTxtOverlay {padding: 5px;}
.clsTxtOverlay h2 {font-size: 2em; padding-left: 20px; margin-bottom: 5px;}
.clsTxtOverlay ul li {font-size: 1.2em; line-height: 1.2em;}
.clsImgPartner {width: 100%; height: max-content; padding: 25px 5px 25px 20px;}
.clsInstaLinkedCont {justify-content: center;}
a.clsBtnEinstiege {padding: 7px 10px;}
}

@media only screen and ( max-width: 440px ) {
h1 {font-size: 1.8em; padding-left: 5px;}
h2 {font-size: 1.4em; line-height: 2rem;}
h3 {font-size: 1.1rem;}
body {font-size: 0.85em !important; line-height: 1.45em;}
.clsImgSmall {width: 50%;}
.clsUmbruch::after {content: '\A'; white-space: pre;}
a.clsBtnEinstiege {line-height: 3.5em;}
.clsZitatContainer {padding: 20px; margin-bottom: 15px;}
.clsZitat {max-width: 80%; font-size: 1em;}
.clsSubHeaderKl {font-size: 100%; letter-spacing: 1px;}
.clsSubHeader {font-size: 150%; letter-spacing: 2px;}
.menu-toggle {height: 20px;}
.scrolled .menu-toggle {margin-top: 10px; margin-bottom: 10px;}
.clsTxtOverlay {padding: 5px;}
.clsTxtOverlay h2 {font-size: 2em; padding-left: 20px; margin-bottom: 5px;}
.clsTxtOverlay ul li {font-size: 1.2em; line-height: 1.2em;}
.clsImgPartner {width: 100%; height: max-content; padding: 25px 5px 25px 20px;}
.clsInstaLinkedCont {justify-content: center;}
a.clsBtnEinstiege {padding: 7px 10px;}
}

@media (max-width: 1260px) {
            .clsStartGrid {
                width: 95%;
            }
        }

        @media (max-width: 768px) {
            .clsStartGrid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }