html {
  background-color: #f4f4f4; /* dein grauer Hintergrund */
}

/* Body transparent lassen, damit die Farbflächen sichtbar bleiben */
body {
  background-color: transparent !important;
  position: relative;
  z-index: 0;
}

strong {font-family:robotomedium;}
p {margin-bottom: 10px;}
ul, ol {
  padding: 0em 0 .75em 0;}

/*MENU*/

#mainmenu{
  float:right;}

  section#row1.tck-row {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%; /* Set the width to cover the entire viewport */
    background-color: #fff; /* Set the initial background color */
    transition: background-color 0.3s ease; /* Add a smooth transition effect */
    padding-bottom: 5px;}
  
  .colored-background {
    background-color: rgba(255, 255, 255, 0.8) !important; /* Set the desired background color */}

  .tck-logo-img {
    max-width: 100%; /* Set the initial max width for the image */
    transition: max-width 0.3s ease; /* Add a smooth transition effect */}

  .smaller-logo {
    max-width: 40%; /* Set the smaller max width for the image */}

  .margin-minus-20 {
    margin-top: -20px;
    font-size:10px;}

/*DJ-Main*/

#dj-megamenu164 li a.dj-up_a{
  font-size: 20px;}

.dj-megamenu-clean li a.dj-up_a {
  padding: 0 10px;}

#dj-megamenu164 li:hover a.dj-up_a,#dj-megamenu164 li.active a.dj-up_a {
    border-bottom: 3px solid rgb(247, 182, 7);}

.dj-megamenu-clean li a.dj-up_a > span {
  height: 70px;}

/*DJ-BURGER*/

.dj-mobile-open-btn.dj-fa-no .dj-mobile-open-icon {
	width: 30px;}

.dj-mobile-open-btn.dj-fa-no .dj-mobile-open-icon::before, .dj-mobile-open-btn.dj-fa-no .dj-mobile-open-icon::after{
  background-color: #f7b607;}

.dj-mobile-open-btn.dj-fa-no .dj-mobile-open-icon{
  background-color: #f7b607;}

.dj-fa-no .dj-offcanvas-close-btn .dj-offcanvas-close-icon::before, .dj-fa-no .dj-offcanvas-close-btn .dj-offcanvas-close-icon::after{
  background-color: #f7b607;}

.dj-fa-no ul.dj-mobile-light li.dj-mobileitem.parent > a span.toggler::before, .dj-fa-no ul.dj-mobile-light li.dj-mobileitem.parent > a span.toggler::after{
  background: #f7b607;}

.dj-mobile-open-btn.active.dj-fa-no .dj-mobile-open-icon,
.dj-mobile-open-btn.active.dj-fa-no .dj-mobile-open-icon:before,
.dj-mobile-open-btn.active.dj-fa-no .dj-mobile-open-icon:after,
.dj-mobile-open-btn.dj-fa-no:hover .dj-mobile-open-icon,
.dj-mobile-open-btn.dj-fa-no:focus .dj-mobile-open-icon,
.dj-mobile-open-btn.dj-fa-no:hover .dj-mobile-open-icon:before,
.dj-mobile-open-btn.dj-fa-no:hover .dj-mobile-open-icon:after,
.dj-mobile-open-btn.dj-fa-no:focus .dj-mobile-open-icon:before,
.dj-mobile-open-btn.dj-fa-no:focus .dj-mobile-open-icon:after {
	background-color: #f7b607;}

ul.dj-mobile-light li.dj-mobileitem.parent > a span.toggler {
  padding: 20px;}

#dj-megamenu164offcanvas ul.dj-mobile-light li.dj-mobileitem > a {
  font-size: 20px;}

/*END MENU*/
/*MODULE*/

#header-text h1 {
  color:#f7f7f7;
  font-size: 50px;
  line-height:55px;}

#header-sub h1{
  color:#f7f7f7;
  font-size: 40px;
  line-height:48px;}


#header-text-soh1 {
  color:#f7f7f7;
  font-size: 50px;
  line-height:55px;}

#header-text-soh1::after, h1::after, h2:after, h3:after {
    content: "";
    display: block;
    width: 80px;
    padding-top: 15px;
    border-bottom: 5px solid #F7B607;}


#position1 h1, #position1 h1 a {
  color: #595959;
  margin-bottom: 4%;
  line-height: 46px;
  font-size: 36px;
  font-family: robotomedium;}

#position2 > .inner::before {
  content: "";
  position: absolute;
  right: 0;
  width: 30%;
  height: 80%;
  background-color: #F7B607 ;
  bottom: 0;
  margin-bottom: -90px;
  z-index: -10 !important;}

#position4 > .inner::before {
  content: "";
  position: absolute;
  left: 0;
  width: 40%;
  height: 50%;
  background-color: #F7B607;
  top: 25%;
  z-index: -5 !important;}

#wrapper6 {z-index:0;}

div#wrapper3::before {
  content: "";
  position: absolute;
  left: 0;
  width: 40%;
  height: 60%;
  background-color: #F7B607 ;
  bottom:0;
  margin-bottom: -100px;
  z-index: -10 !important;}

#testimonial-head h3::after {
    content: "";
    display: block;
    width: 80px;
    padding-top: 0px;
    margin-bottom:30px;
    border-bottom: 5px solid #F7B607;
    margin: 15px auto 30px auto;}


/*END MODULE*/

/*CONTENT*/

/*Hintergründe div. Seiten*/


.itemid-170 #wrapper, .itemid-171 #wrapper{
 margin-top: 4%;
  background: url('../images/wave-gelb.svg') right -380px top 60px no-repeat scroll;
  background-size: auto;
  background-size: auto;
  background-size: 1500px;}

.itemid-169 #wrapper {
 margin-top: 4%;}

/*END Hintergründe div. Seiten*/

.space-vertical {margin-top: 12%;}

.box-bg-light {
 background:#fff;
 padding:4%;
 width:80%;
 margin: 0 auto;}

.box-shadow{
  background: #ffffff;
  padding: 8%;
  box-shadow: rgba(51,51,51,0.15) 0px 2px 6px 0px;
  -moz-box-shadow: rgba(51,51,51,0.15) 0px 2px 6px 0px;
  -webkit-box-shadow: rgba(51,51,51,0.15) 0px 2px 6px 0px;}

.box-red-hg {
  background: #595959 url('../images/hg_neugierig.webp') left center no-repeat scroll;
    background-size: auto;
  background-size: cover;
  color: #f7f7f7;
  padding: 8%;}

.box-red-hg-kontakt {
  background: #595959 url('../images/hg_neugierig.webp') left center no-repeat scroll;
    background-size: auto;
  background-size: cover;
  color: #f7f7f7;
  padding: 8%;
  min-width: 450px;}

.box-red-hg a, .box-red-hg-kontakt a{
  color: #f7f7f7;
  text-decoration: none;}

.pic-left, .pic-right {
  padding: 30px;
  position: relative;}

.pic-left::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0px;
  top: 0px;
  background: #F7B607 ;
  z-index: -1;}

.pic-right::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0px;
  top: 0px;
  background: #F7B607 ;
  z-index: -1;}

.head-style {
  font-family: buffaloregular;
  font-size: 60px;
  color: #595959;
  line-height: 70px;
  padding-top: 20px;}

.head-style::after{
    content: "";
    display: block;
    width: 80px;
    padding-top: 0px;
    margin-bottom:30px;
    border-bottom: 5px solid #F7B607;}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  max-width: 900px; 
  margin: 0 auto;}

.image-container img {
  max-width: 140px;
  width: 100%;
  height: auto;
  margin: 0 4% 10px 4%;}

.sub-header {
  font-family: buffaloregular;
  font-size: 60px;
  color: #F7F7F7;
  line-height: 70px;
  padding-top: 8%;}

.sub-header-1 {
  font-family: robotomedium;
  font-size: 30px;
  color: #F7F7F7;
  line-height: 36px;
  padding-top: 30px;
  padding-bottom:25px;}

/*END CONTENT*/

/*Buttons*/

.btn-cta-light a{
    color: #595959;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;      /* feiner Rahmen für Definition */
    padding: 10px 25px;              /* kompakter, leichter */
    border-radius: 30px;            /* weniger rund = dezenter */
    margin-top: 1.5rem;
    text-decoration: none;
    font-size: 18px;                /* etwas kleiner, feiner */
    font-family: 'Roboto Medium', sans-serif;
    display: inline-block;
    transition: all 0.3s ease;
     line-height: 28px;
}

.btn-cta-light a:hover {
  background: #F7B607;
  border-color: #F7B607;
  color: #333;
}

.btn-cta-dark a {
    color: #fff;
    background: #595959;
    border: 1pxs solid #595959;
    padding:10px 25px;  
    border-radius: 30px;
     margin-top: 1.5rem;
    text-decoration: none;
    font-size: 18px;
    font-family:robotomedium;
     display: inline-block;
    transition: all 0.3s ease;
     line-height: 28px;}

.btn-cta-dark a:hover {
    color: #333 !important;
    border: 1pxs solid #F7B607;
    background: #F7B607 !important;}

/*END Buttons*/


/*Button-Cookie*/
.cc-custom-revoke {
  z-index: 100;
  position: fixed;
  display: inline-block;
  bottom: 10px;
  left: 10px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: normal;}


.termin {
  position: fixed;
  bottom: 8%;
  right: 0;
  z-index: 1000;
  background: rgba(51, 51, 51, 0.65);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  display: inline-block; /* kein Flex mehr nötig */
  padding: 5px;
  line-height: 0; /* verhindert zusätzliche Höhe */
}

.termin a {
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.termin p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.termin img, .termin svg{
  display: block; /* kein Inline-Gap mehr */
  width: 38px; /* gewünschte Bildgröße */
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: middle;
}

.termin:hover {
  transform: scale(1.05);
  background: rgba(51, 51, 51, 0.8);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}






/* IPAD 10, Laptop */
@media screen and (min-device-width : 800px) and (max-width: 1399px) {
  
#dj-megamenu164 li a.dj-up_a{
  font-size: 18px !important;}
  
.tck-logo-img {
  max-width: 80% !important;}
 
#wrapper2  {
  margin-top: 80px;
  min-height: 400px;}
  
#wrapper2a {
  margin-top: 80px;}
 
#row2 > .inner {
  padding-top: 4%;}
  
#header-text h1 {
  font-size: 45px !important;
  line-height: 55px !important;}

#header-text-soh1 {
  font-size: 45px !important;
  line-height: 55px !important;}
  
#header-img, #position3-img {width: 95%;
  float: right;}
  
#wrapper6, .itemid-170 #wrapper, .itemid-171 #wrapper {
  background: url('../images/wave-gelb.svg') right -390px top 60px no-repeat scroll;
  background-size: 1700px !important;}
  


}