:root {
   --farbe-text: #5C7644;
   --farbe-hamburger: #938A8A;
   --page-bg: #f5f5f5
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: var(--page-bg);
   color: var(--farbe-text);
   font-family: "BronkohRegular";
   /*font-size: 1.3rem;*/
   font-size: clamp(1rem, 2.8vw, 1.3rem) !important;
   /*    line-height: 1.8rem; */
   line-height: clamp(1.4rem, 5vw, 1.7rem) !important;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

   transition: all 0.5s;
}

img {
   height: auto;
   max-width: 100%;
}

h1 {
   /*font-size: 2rem;*/
   font-size: clamp(1.4rem, 5vw, 2rem) !important;
   line-height: clamp(1.4rem, 5vw, 1.6rem) !important;
   margin: 2% 0 !important;
}

h2 {
   /*    font-size: 1.4rem; */
   font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
   line-height: clamp(1.4rem, 5vw, 1.6rem) !important;
   margin: 1.8% 0 !important;
}
h3 {
   /*    font-size: 1.3rem; */
   font-size: clamp(1.2rem, 4vw, 1.3rem) !important;
   line-height: clamp(1.3rem, 5vw, 1.5rem) !important;
   margin: 1.8% 0 !important;
}
h4 {
   /*    font-size: 1.2rem; */
   font-size: clamp(1.1rem, 4vw, 1.2rem) !important;
   line-height: clamp(1.1rem, 5vw, 1.4rem) !important;
   margin: 1.7% 0 !important;
}

p {
   margin: 0 !important;
   margin-bottom: clamp(1.6rem, 2.5%, 2.2rem) !important;
   margin-bottom: clamp(1.6rem, 2.5%, 2.2rem) !important;
}

main p {
   padding: 0 1.5%;
}

a {
   color: var(--farbe-hamburger) !important;
   text-decoration: underline !important;
   /* font-weight: bold; */
}

.custom-logo {
   width: 200px;
   width: clamp(150px, 20vw, 200px);
}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated{
   padding: 0 !important;
}

#masthead {
   display: flex;
   justify-content: space-between;
   position: fixed;
   width: 100%;
   top: 0;
   padding: 1.5%;
   padding-top: 0.5%;
   padding-bottom: 0%;
   z-index: 777;
   background: transparent;
   box-shadow: none;
   transition: all 0.5s;
}

.home #masthead {
   background: transparent;
   box-shadow: none;
   position: fixed !important;
   transition: background 0.8s;
   -webkit-transition: background 0.8s;
   -moz-transition: background 0.8s;
   -ms-transition: background 0.8s;
   -o-transition: background 0.8s;
}

.home #masthead.float-header {
   background: var(--page-bg);
}

.home #masthead.float-header .site-branding {
   opacity: 1;
   transition: opacity 1s;
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -ms-transition: opacity 1s;
   -o-transition: opacity 1s;
}

.main-navigation {
   width: fit-content;
}

ul#primary-menu,
ul#secondary-menu {
   list-style: none;
}


.sidenav {
   height: 100%;
   max-width: 0;
   /*    width:0; */
   position: fixed;
   z-index: 1;
   top: 0;
   right: 0;
   background-color: rgba(132, 149, 58, 0.9);
   /*overflow-x: hidden;*/
   padding-top: 100px;
   z-index: 888;

   transition: max-width 0.5s;
}


#nav-container.is-active .sidenav {
   max-width: 90vw;
}

.sidenav a {
   /*    padding: 16px 80px 8px 40px; */
   padding-top: clamp(8px, 1vw, 16px);
   padding-right: clamp(20px, 10vw, 80px);
   padding-bottom: clamp(4px, 2vw, 8px);
   padding-left: clamp(10px, 10vw, 40px);
   text-decoration: none !important;
   font-size: 1.5rem;
   font-size: clamp(1.1rem, 5vw, 1.5rem);
   color: white !important;
   white-space: nowrap;
   display: block;
   transition: 0.3s;
   font-weight: normal !important;
}

.sidenav a:hover {
   color: lightgrey;
   white-space: nowrap;
}

#mySidenav2 {
   margin-top: 50px;
}


/* Hamburger / Close Btn */
#nav-container.is-active #nav-toggle:before,
#nav-container.is-active #nav-toggle:after {
   box-shadow: none;
   background: white;
}

#nav-container.is-active #nav-toggle:before {
   transform: rotate(-45deg);
}

#nav-container.is-active #nav-toggle:after {
   transform: rotate(45deg);
}

#nav-toggle {
   position: relative;
   top: 4%;
   width: 40px;
   height: 34px;
   z-index: 999;
}

#nav-toggle:hover {
   cursor: pointer;
}

#nav-toggle:before,
#nav-toggle:after {
   content: "";
   position: absolute;
   top: 18px;
   left: 0;
   transform: translate(0, 0);
   width: 100%;
   height: 4px;
   background: var(--farbe-hamburger);
   border-radius: 4px;
   transition: transform 0.5s ease, box-shadow 0.5s ease;
}

#nav-toggle:before {
   box-shadow: 0 12px 0 0 var(--farbe-hamburger);
}

#nav-toggle:after {
   box-shadow: 0 -12px 0 0 var(--farbe-hamburger);
}

/* Ende Hamburger / Close Btn */

footer {
   padding: 0.5% 1.5%;
}

/* footer-Nav */
#footer-menu {
   display: flex;
   justify-content: center;
   list-style: none;
}

#footer-menu li {
   padding: 0 2% 0 2%;
}

#footer-menu a {
   display: block;
   color: var(--farbe-hamburger) !important;
   text-decoration: none !important;
   font-weight: normal !important;
   font-size: 1rem;
}

#footer-menu a:hover {
   color: var(--farbe-text) !important;
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.5%;
}

main {
   flex: 1;
   padding-bottom: 2% !important;
   padding-top: 0 !important;
}


.scrollicon {
   position: fixed;
   bottom: 6%;
   right: 3%;
   cursor: pointer;
   z-index: 9999;
   display: none;
}

.scrollicon img {
   width: clamp(30px, 10vw, 50px);
}


/* elementor-padding unterbinden */

.elementor-widget-wrap:has(.dtTopImg),
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated>.elementor-widget-wrap {
   padding: 0 !important;
}


/*Tauschbilder Unterseiten Top-Imgs Desktop/Mobile*/
.dtTopImg img {
   display: block !important;
}

.mTopImg img {
   display: none !important;
   margin-top: 20px !important;
}

.imgContentSubpage img {
   max-width: 80% !important;
}


.homeHeaderContainer {
   position: relative;
   width: fit-content;
   margin: 0 auto;
}

.homeKreis {
   position: relative;
   width: fit-content;
   margin: 3% auto;
   max-width: 90%;
}

.homeHeaderContainer .elementor-widget-text-editor {
   position: absolute;
   top: 25.3837%;
   right: 0;
   width: 58.5% !important;
   /* height: 0; */
   /* padding-bottom: 58.5% !important; */
   height: 58.5% !important;
   display: flex;
   align-items: center;
}

.homeKreis .elementor-widget-text-editor {
   position: absolute;
   top: 10%;
   width: 70.9% !important;
   height: 70.9% !important;
   display: flex;
   align-items: center;
}

.homeKreis.right .elementor-widget-text-editor {
   left: 0;
}

.homeKreis.left .elementor-widget-text-editor {
   right: 0;
}

.homeKreis h1,
.homeKreis h2 {
   margin: 0 !important;
   margin-bottom: 8% !important;
   font-weight: bold !important;
   font-size: clamp(1rem, 4vw, 2rem) !important;
   line-height: clamp(1.2rem, 4vw, 2.6rem) !important;

   text-transform: uppercase;
}

.homeKreis a {
   color: white !important;
}

.homeKreis p {
   margin-bottom: 6% !important;
   font-size: clamp(1rem, 4vw, 1.6rem);
   line-height: clamp(1.2rem, 4vw, 2rem);
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container {
   transform: translateY(-50%);
   position: absolute;
   top: 58%;
   width: 100%;
   padding: 8%;
   padding-left: 10%;
   padding-right: 10%;
   color: white !important;
}

.homeKreis .elementor-widget-text-editor .elementor-widget-container {
   transform: translateY(-50%);
   position: absolute;
   top: 58%;
   width: 100%;
   padding: 8%;
   padding-left: 10%;
   padding-right: 10%;
   color: white !important;
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container p {
   margin: 0 !important;
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container p:first-of-type {
   margin-bottom: 6% !important;
   font-size: clamp(1rem, 4vw, 1.6rem);
   line-height: clamp(1.2rem, 4vw, 2rem);
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container p:nth-of-type(2) {
   margin-bottom: 6% !important;
   font-size: clamp(1.2rem, 4vw, 2rem);
   line-height: clamp(1.2rem, 4vw, 2.6rem);
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container p:nth-of-type(3) {
   width: fit-content;
   margin: 0 auto !important;
   background: #66829d;
   padding: 3%;
   border-radius: 50%;
   width: fit-content;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
}

.homeHeaderContainer .elementor-widget-text-editor .elementor-widget-container p:nth-of-type(3) a {
   color: white !important;
   text-decoration: none !important;
}

/* home mobile header ausblenden */
.homeHeaderContainer.mobile {
   display: none;
}

table.vita {
   margin: 0 auto;
}

table.vita td {
   padding: 1% 3%;
   vertical-align: top;
}

table.vita tr td:first-child {
   white-space: nowrap;
}

table.vita tr td:last-child {
   padding-left: 6%;
}

#routePlanen {
   color: white !important;
   margin: 0 auto !important;
   background: var(--farbe-text);
   padding: 1% 2%;
   border-radius: 50%;
   width: fit-content;
   display: flex;
   align-items: center;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}
#routePlanen a{
   color: white !important;
   text-decoration: none !important;
}

/* verhindern, dass Logo im Top-kreis ist wenn Screen schmäler wird */
@media screen and (max-width: 1580px) {
   #masthead {
      position: sticky;
      background: var(--page-bg);
      box-shadow: 0 0 5px #afafaf;
   }

}


@media screen and (max-width: 1100px) {
   #nav-container.is-active .sidenav {
      /*         width: 40vw; */
   }

   .dtTopImg img {
      max-width: 70% !important;
   }

}

@media screen and (max-width: 820px) {
   #nav-container.is-active .sidenav {
      /*         width: 50vw; */
   }

}

/* Logo auf Startseite ausblenden, (f.Desktop)wird bei scroll eingefadet */
@media screen and (min-width: 769px) {
   .home .site-branding {
      opacity: 0;
   }
}

@media screen and (max-width: 768px) {
   .home #masthead {
      position: sticky !important;
      background: var(--page-bg);
   }

   .dtTopImg img {
      display: none !important;
   }

   .mTopImg img {
      display: block !important;
      max-width: 94% !important;
      margin: 0 auto;
   }

   /* schatten header ausblenden, nicht notwendig in diesem view     */
   #masthead {
      box-shadow: none;
   }

   .container {
      padding: 3%;
   }

   #nav-toggle {
      width: 30px;
      height: 32px;
   }

   #nav-toggle:before {
      box-shadow: 0 9px 0 0 var(--farbe-hamburger);
      ;
   }

   #nav-toggle:after {
      box-shadow: 0 -9px 0 0 var(--farbe-hamburger);
      ;
   }

   #nav-toggle:before,
   #nav-toggle:after {
      height: 3px;
   }

   /*home desktop header aublenden*/
   .homeHeaderContainer {
      display: none;

   }

   main {
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* home mobile header einblenden */
   .homeHeaderContainer.mobile {
      display: block;
      margin-left: 0 !important;
      max-width: 96% !important;

   }

   .homeHeaderContainer.mobile .elementor-widget-text-editor {
      top: 8.3837%;
      width: 83.5% !important;
      height: 80.5% !important;
   }

   .homeHeaderContainer.mobile .elementor-widget-text-editor .elementor-widget-container {
      transform: translateY(-50%);
      position: absolute;
      top: 58%;
      width: 100%;
      padding: 8%;
      padding-left: 12%;
      padding-right: 12%;
      color: white !important;
   }

   .home .elementor-section-wrap {
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
   }

   .home .homeKreis {
      margin-left: 0;
      margin-right: 0;
   }

   .home .homeKreis.right {
      align-self: flex-end;
      margin-right: -10%;
   }

   .home .homeKreis.left {
      align-self: flex-start;
      margin-left: -10%;
   }

   .home .homeKreis {
      max-width: 100%;
   }
}

@media screen and (max-width: 650px) {
   #nav-container.is-active .sidenav {
      /*width: 70vw;*/
   }

}

@media screen and (max-width: 480px) {
   #nav-container.is-active .sidenav {
      /*         width: 90vw; */
   }

   #nav-toggle {
      width: 25px;
      height: 32px;
   }

   #nav-toggle:before {
      box-shadow: 0 8px 0 0 var(--farbe-hamburger);
      ;
   }

   #nav-toggle:after {
      box-shadow: 0 -8px 0 0 var(--farbe-hamburger);
      ;
   }

   #nav-toggle:before,
   #nav-toggle:after {
      height: 2px;
   }

}

@media screen and (max-width: 355px) {
   .homeKreis {
      /* hyphens: auto;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto; */
   }
}