/* ++++++++++++++++++++++++++++++++++ */
/*     custom.css Babelle Schorling     */
/* ++++++++++++++++++++++++++++++++++ */

body {line-height: 1.35em;}
h1 {font-size: 2.2em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
a {text-decoration: none !important;}

/* Startseite Header */
.clsTxtSlider {font-size: 1.4em; font-weight: 400; font-style: italic; line-height: 1.4em;}
.clsBlueDot {display: inline-block; width: 1rem; height: 1rem; background-color: #0e4a7d; border-radius: 50%; /* Macht den Dot rund */ margin: 0 0.6em; vertical-align: baseline;}
.clsTxtLineSlider {font-size: 1.625em; color: #0e4a7d; font-weight: 800; line-height: 2.9em;}
.clsImgKreis {display: inline-block; position: relative; width: 200px; height: 200px; top: -250px; left: 90%;}
.clsLineTopMargin {line-height: 5rem;}
.clsUeberMichMod .module_surround {padding-bottom: 0px;}
#container_base1_modules {color: var(--text-main); --text-main: #3e3e3e;}
#container_base2_modules  {color: var(--text-main); --text-main: #fff;}
.clsKontaktTxtBig, .clsKontaktTxtBig a {color:#3e3e3e; font-size: 22px; line-height: 1.6em;}
.clsH1Start {margin-bottom: 0px; text-transform: none;}
.clsH2Start {line-height: 2.4rem; font-size: 1.6em;}
.clsFtLk {color: #fff; text-transform: uppercase;}

/* DJTabs Akkordeon */
.clsAkkH3 {color: #007d75; font-weight: 400;}
.Akkordeon-Grün .djtabs-title.djtabs-accordion {border-left: none; text-align: left; padding-left: 20px; text-transform: uppercase; font-weight: 500; letter-spacing: 3px;}
.Akkordeon-Grün .djtabs-title-wrapper .djtabs-title {border-bottom: 5px solid #fff;}
.clsAkkMod .module_surround {padding-bottom: 5px !important;}
.clsGreenBox {background-color: #007d75; height: 15vH;}
.clsGreenBoxTxt {text-align: center; color: #fff; position: relative; top: 50%; transform: translateY(-50%);}
.clsGreenBoxMod .module_surround {padding-right: 0px !important; padding-bottom: 20px;}
.clsGreenBoxH3 {font-size: 1.4em;}

/* Potentiale freilegen */
.clsTxtBox {background-color: #874b67;
  opacity: 0.5;
  padding: 25px 125px 25px 25px;
  display: flex;
  align-items: center;
  min-height: 45vH;
  width: 20vw;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.4em;
  font-style: italic;
  color: #fff;
  line-height: 1.4em;}
.clsTxtOver {position: absolute; top: 50%; left: 25px; transform: translateY(-50%); color: white; margin: 0; text-align: left; max-width: calc(100% - 50px);}

@media only screen and ( max-width: 1280px) {
.clsLineTopMargin {line-height: 15rem;} 
.clsTxtBox {width: 30vw;}
}
@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;}
.clsTxtBox {width: 70vw;}
.clsGreenBox {max-width: 96%;}
.clsLineTopMargin {line-height: 12rem;}
.clsTxtSlider {font-size: 1.1em;}
}
@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%;}
.clsTxtBox {width: 70vw;}
.clsGreenBox {max-width: 96%;}
.clsGreenBoxH3 {font-size: 1.1em;}
}
@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;}
.clsImgSmall {width: 50%;}
.clsUmbruch::after {content: '\A'; white-space: pre;}
.logo {padding: 5px 5px;}
.clsTxtBox {width: 70vw;}
.clsGreenBox {max-width: 96%;}
.clsGreenBoxH3 {font-size: 1.1em;}
}