/* UPDATED to remove WAVE "Justified text" alerts:
   - Changed both body blocks from `text-align: justify` to `text-align: left`
   - Added targeted overrides for third-party widgets (Pipedrive/Wistia)
   - Fixed stray `}` and a small typo (`wwd`)
*/

/*fonts in index.php*/
@font-face {
  font-family: leetTxt;
  src: url(fonts/Manrope-Regular.ttf);
}
@font-face {
  font-family: leetHead;
  /* src: url(fonts/geograph-medium.ttf);*/
  src: url(fonts/Manrope-Bold.ttf);
}
@font-face {
  font-family: leetThin;
  src: url(fonts/Manrope-Light.ttf) format('truetype');
}
@font-face {
  font-family: leetLogoFont;
  /* src: url(fonts/geograph-medium.ttf);*/
  src: url(fonts/Manrope-Bold.ttf);
}
/* variables - use like this: var(--main-acc-color) */
:root {
  --main-bg-color: #ffffff;
  --sec-bg-color: #f5f5f5;
  --main-txt-color: #000001;
  --sec-txt-color: #787878;
  --main-a-color: #78A341;
  --main-ah-color:#78A341;
  --main-acc-color: #78A341; /* hellgrün */
  --main-font: 'leetTxt';
  --h-font: 'leetHead';
  --hb-font: 'leetHeadBold';
  --gradGreen: linear-gradient(92deg, #4E6C27 -6.17%, #78A341 53.36%);
  --gradGreenDark: linear-gradient(92deg, #4E6C27 -6.17%, #4E6C27 53.36%);
  --DarkGreen: #4E6C27;
  --nocheingrau: #393939;
}

/* ------------------------------------------------- */
body {
  color: var(--main-txt-color);
  background-color: var(--main-bg-color);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(76deg, #FFF 10%, rgba(255, 255, 255, 0.00) 101.83%);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left; /* was: justify */
  font-family: "leetTxt", sans-serif;
}
@media (min-width: 40.0rem) {
  body {
    font-size: 1.4rem;
  }
}

/* reset */
html, body, div, applet, object, iframe,p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-family: "leetTxt", sans-serif; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
/* removed stray closing brace here */
label, legend {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
/* ------------------------------------------------- */
body {
  color: var(--main-txt-color);
  background-color: var(--main-bg-color);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(76deg, #FFF 10%, rgba(255, 255, 255, 0.00) 101.83%);
  font-size: .88em;
  font-weight: 500;
  line-height: 1.2;
  text-align: left; /* was: justify */
  /*letter-spacing: 1px;*/
  color: #333333;
  font-family: 'leetTxt', 'NotoSansJP-Thin', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

/* Targeted overrides for third-party widgets that may inject justify */
.pipedriveWebForms,
.wistia_responsive_wrapper {
  text-align: left !important;
  text-justify: auto !important;
  text-align-last: auto !important;
}

/* grid layout 4 content */
.grid {
  display:grid;
  grid-template-rows: 1fr auto;
  min-height: 90vh;
  /*background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(76deg, #FFF 10%, rgba(255, 255, 255, 0.00) 101.83%);*/
}
.header{
  z-index: 100;
}
/* Mobile First Media Queries 640 < 1280 < 1920 */
/* Base style */
  .page{
		background-color: var(--main-bg-color);
		padding: 0;
		margin: 0;
		overflow-x: hidden;
	}
  .wrapper{
      max-width: 95vw;
      width: 95%;
      margin: 0 auto;
      text-align: left;
       /* min-height: 85vh;*/
  }
  .wrapperhead{
		max-width:90vw;
		margin: 0 auto;
		text-align: left;
  }
  #toggle{
    display:inline-block;
    max-width: 30%;
    position: absolute;
    right: 10%;
    top: 1em;
  }
.mobilemenu{display:none;}
.openmenu{display:block;}
.mobilemenu{
    width: 90vw;
    position: relative;
    background-color: #2a2a2a;
}
.mobilemenu .menu__item{
  font-size: 1.1em;
  padding:.3em;
  text-align:center;
  margin-top: -5px;
}
.mobilemenu .menu__item:hover{
  background-color: var(--dark-green);
}
.logo{max-width: 90%;}
@media (min-width: 1000px) {
  .logo{max-width: 40%;}
  #toggle{display:none;}
}


/* Larger than mobile screen */
@media (min-width: 40.0rem) {
  .wrapper{
      max-width: 1240px;
      text-align: left;
      width: 90vw;
  }
}

/* Larger than tablet scr een */
@media (min-width: 80.0rem) {
  .wrapper{max-width:1240px;}
  .wrapperhead{max-width:1240px;}
}
/* Larger than desktop screen */
@media (min-width: 120.0rem) {

}
/* TYPO */
.hiddenz{display:none;}
.left{text-align:left;}
.center{text-align: center;}
.right{text-align:right;}
.smallimg{
    max-width: 360px;
    width: 100%;
    /*margin: 0px auto;*/
}
.flexcentered{
  display:flex !important;
  align-items: center;
  justify-content: center;
  padding: 1em;
  height: 100%;
  min-height: 400px;
}
.banner{
  min-height:300px;
  height:300px;
  background:linear-gradient(359deg, black 0%, transparent 30%), url("/imgs/kursplan-banner-1-1024x379.png");
  background-size: cover;
  background-position: center;
  display:flex !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  align-items: flex-end;
  justify-content: center;
  padding: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: .5em 0;
}

h1 {
  font-family: leetLogoFont;
  font-size: 3.5rem;
  line-height: 1.2;
}
.formdiv{
	z-index:3;
}
h2 {
  font-family: leetLogoFont;
  font-size: 3.4rem;
  line-height: 1.2;
}
h2.brand2 {
    font-family: leetLogoFont;
    font-size:calc(0.7vw + 20px);
    margin-bottom: 0;
    z-index: 1;
}
h3 {
  font-family: leetTxt;
  font-size: calc(0.6vw + 12px);
  font-weight: 500;
  line-height: 1;
}
.vh3 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
h4 {
  font-family: leetLogoFont;
  font-size: 1.4rem;
  line-height: 1.1;
}

h5 {
  font-size: 1.2em;
  line-height: 1.5;
}

h6 {
  font-size: 1.1em;
  line-height: 1.4;
}
b {
  font-weight: 600;
}
.quform label{
  padding: 0.5em 0;
  color: grey;
  font-size: 120%;
}
.abstand1{
  padding: 5em 0 0 0;
}
.abstand2{
  padding: 2em 0 0 0;
}
.abstand3{
  padding: 3em 0 0 0;
}
.abstand4{
  padding: 4em 0 0 0;
}
.abstand5{
  padding: 5em 0 0 0;
}
.abstand6{
  padding: 6em 0 0 0;
}
.abstand7{
  padding: 7em 0 0 0;
}
.abstand8{
  padding: 8em 0 0 0;
}
.abstand9 {
  padding: 9em 0 0 0;
}
.abstand10{
  padding: 10em 0 0 0;
}
.abstand11{
  padding: 11em 0 0 0;
}
.abstand12{
  padding: 12em 0 0 0;
}
.center{text-align:center;}
a {
  transition: transform 0.3s ease-in-out;
}

a:hover {
  transform: scale(1.05);
}

.tabbordered .column:not(:last-child){
  border-right: 2px solid #d9d9d9;
}
.ueberthin{
  text-transform: uppercase;
  font-weight:400;
  font-family: leetTxt;
}
.greenbg{
/*  background:var(--gradGreen);
  color: white;

  background-image: url('../img/kreise.svg');
  background-size:  cover;
  background-repeat: no-repeat;
  background-position: center center;*/
  color: white;
  margin-top: 3em;
  background:
      url('../img/kreise.svg') center center/cover no-repeat,
        var(--gradGreen);
  padding-bottom: 7em;
}
.greenbgbanner{
/*  background-image: url('../img/gbanner.png'), url('../img/kreise.svg');
  background-size: cover, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;*/
  width: 100%;
  color: white;
  margin-top: 3em;
  padding-bottom: 7em;
}
.gbanner{
  width: 95%;
  padding:1.5em 1.5em 6em 1.5em;
  background:var(--gradGreen);
  border-radius: 25px;
  border: 4px solid #cbddc0a8;
  margin: auto;
  background-image: url('../img/whiteline.svg'),var(--gradGreen);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
@media (min-width: 600px) {
  .gbanner{
    width: 110%;
    margin: 0 -5%;
  }
}
.greenbghandsome{
  color: white;
  margin-top: 3em;
  background:
      url('../img/handsome1.png') right bottom/contain no-repeat,
      var(--gradGreen);
  padding-bottom: 7em;
}
.greenbgteltante{
  color: white;
  margin-top: 3em;
  background:
      url('../img/teltante.png') right bottom/contain no-repeat,
      var(--gradGreen);
  padding-bottom: 7em;
}
.greenbutton{
  background: var(--gradGreen);
  border-radius: 15px;
  width: 280px;
  padding: 1rem 0.5rem;
  font-size: 1.4rem;
  transition: transform 0.3s ease-in-out;
  color: white;
  text-align: center;
}
.greenbuttonfilter{
  background: var(--gradGreen);
  border-radius: 15px;
  width: 280px;
  /* padding: 0.4em 0.1em 0.4em 1em; */
  color: white;
  font-size: 110%;
  transition: transform 0.3s ease-in-out;
  min-height: 40px;
  margin-top: 1em;
  padding: 0 1em;
}
.greenbuttonfilter:hover,
.greenbutton:hover{
  transform: scale(1.05);
}
.greenbuttonsend{
  background:var(--gradGreen);
  border-radius: 25px;
  width: 280px;
  color: white;
  font-size: 110%;
  transition: transform 0.3s ease-in-out;
  height: 40px;
}
.greenbuttonsend:hover{
  transform: scale(1.05);
}
.whitebutton{
  display:block;
  border: 1px solid white;
  border-radius: 25px;
  max-width: 280px;
  padding: .4em .1em .4em 1em;
  color: white;
  font-size: 110%;
  transition: transform 0.3s ease-in-out;
  margin: 0 auto;
}
.whitebutton:hover{
  transform: scale(1.05);
  color: white;
}
.bulletPoint {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.bulletPoint {
  display: inline-block;
  margin-top: 2rem;
  width: 100%;
}

.textBullet {
  display: inline-block;
  padding-left: 24px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.textBullet::before {
  content: url(../img/checker.png);
  position: absolute;
  left: -5px;
  top: 1rem;
  transform: translateY(-50%);
  margin-right: 1rem;
  padding-right: 1rem;
}
.telBullet::before{
  content: url('../img/i_phone.png');
  margin: 0em .6em 0 0;
  vertical-align: middle;
}
.mailBullet::before{
  content: url('../img/i_mail.png');
  margin: 0em .6em 0 0;
  vertical-align: middle;
}
.punkte h3{
  margin-bottom: 1.5em;
}
.punkte h6{
  color: rgba(0, 0, 0, 0.80);
}
/* OWN */
.topimg{
  background-image: url(../img/topimg_kursfilter.png);
  background-size: contain;
  background-position: right top;
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
}
.topimgindex{
  background-image: url(../img/macbook1.png);
  background-position: top right;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 60% auto;
}
.landing{
  /*background-image: url(../img/bkf-hero_coming-soon.jpg);*/
  background-position: top right; /* Position for both images */
  background-repeat: no-repeat; /* Ensure no repetition for both images */
  background-size: 90% auto; /* Size for both images */
  position: relative;
}
@media (min-width: 1000px) {
  .landing{
    /*background-image: url(../img/greenright.svg), url(../img/bkf-hero_coming-soon.jpg);*/
    background-position: top 100px right, top right;
    background-repeat: no-repeat, no-repeat;
    background-size: 600px, 90% auto;
    position: relative;
  }
}

.topimgdetail{
  background-image: url('../img/details.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 600px;
}
.grundsatz{
  background-image: url('../img/detail3.png');
  background-size: contain;
  background-position: center left;
  background-repeat: no-repeat;
}
.erleben{
  background-image: url('../img/detail2.png');
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
}
.kont{
  background-image: url('../img/detail3.png');
  background-size: contain;
  background-position: center left;
  background-repeat: no-repeat;
}
.road{
  background-image: url('../img/road1.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.topimgausbildungscenter {
  background-image: url(../img/topimg_kursfilter.png);
  background-size: contain;
  background-position: right top;
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
}
#fuell{
  background-image: url('../img/road1.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.four{
  width: 40% !important;
}
.textGreen{
  background: var(--Gradient-green, linear-gradient(92deg, #4E6C27 -6.17%, #78A341 53.36%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textGrey{
  color: #333333;
}
#eigFilter{
  padding: .5em;
/*  background: #f1f1f1;
  box-shadow: #f1f1f1 0px 5px 15px;*/
  flex-wrap: nowrap;
}
a .courses{
  margin: 1em 0;
  background-color: var(--sec-bg-color);
  background: white;
  border-radius: 5px;
  padding: 0.5em;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  color: var(--main-txt-color);
}
a .courses:hover{
  background: var(--gradGreen);
  border-radius: 5px;
  color: white;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.coursename{
   width: 60% !important;
}
.courseland{
   width: 20% !important;
}
.coursedatum{
   width: 20% !important;
}
.black{
  color: var(--main-txt-color);
}
.grey{
  color: var(--sec-txt-color);
}
.profilepic{
  height: 3em;
  width: 3em;
  border-radius: 50%;
  object-fit: cover;
}
.contactpic{
  display: flex !important;
  display: inline;
}
.contactpic::before{
  content: url('../img/face.png');
  vertical-align: middle;
  margin-right: 0.4em;
}
/* FANCYCARD */
.kreise{
  background-image: url('../img/kreise.svg');
  background-size:  cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.rownobreak {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.columnnobreak {
  flex: 0 0 calc(100% - 2em);
  margin: 0 1em; /* Add column padding */
  box-sizing: border-box; /* Ensure padding and margin are included in the width */
  margin-bottom: 1em;
}
.whitewool{background: linear-gradient(92deg, white, transparent);}
/* Media query for laptop-sized screens (adjust the breakpoint as needed) */
@media (min-width: 768px) {
  .columnnobreak {
    flex: 0 0 calc(50% - 2em); /* Set two cards per row on laptop-sized screens */
  }
  .fancycard{
    height: 160px;
  }
}

/* Media query for larger screens (adjust the breakpoint as needed) */
@media (min-width: 1124px) {
  .columnnobreak {
    flex: 0 0 calc(33.33% - 2em); /* Set three cards per row on larger screens */
  }
}
@media (max-width: 600px) {
  .rownobreak {
    flex-direction: row; /* Change to column layout on mobile screens */
  }
}
.fancyausbildungen{margin-top: -4em;}
.fancycard {
  width: 100%;
  min-height: 170px;
  background: white;
  border: 2px solid #DBE1D4;
  border-radius: 11px;
  color: var(--main-txt-color);
  box-shadow: 0px 18.9px 75.6px 0px rgba(0, 0, 0, 0.07);
  padding-right: 1em;

  background-image: url('../img/chick.jpg');
  background-size:  35%;
  background-repeat: no-repeat;
  background-position: left center;

  position: relative;

/*    text-align:right;*/
}
.fC95{
  background-image: url('../img/b_lkw.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fD95{
  background-image: url('../img/b_bus.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fStapler{
  background-image: url('../img/b_stapler.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fSoon{
  background-image: url('../img/b_soon.png'), linear-gradient(92deg, #4E6C27 -6.17%, #78A341 53.36%);
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: left center, center;
  color:white;
}
.fSoon > .fancycardText p{color:white !important;}
.fLasi{
  background-image: url('../img/b_digi.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fLadi{
  background-image: url('../img/b_ladi.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fADR{
  background-image: url('../img/b_adr.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fKran{
  background-image: url('../img/b_kran.png');
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.fancycard-content {
  width: 65%;
  padding: 1em;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.fancycardID{
}
.fancycardTitle{
  font-weight: 600;
  font-size: 1.2em;
  margin-top: -0.5em;
  margin-bottom: 0.5em;
}
.fancycardText{
  font-weight: 600;
  font-weight: 400;
  line-height: 120%;
/*  color: rgba(0, 0, 0, 0.80);*/
  font-size: 0.7875rem;
}
.fancycardLink{
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: var(--gradGreen);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: .3em;
}
a .fancycardLink{
  transition: transform 0.05s;
}
a .fancycardLink:hover {
  transform: scale(1.05);
}
.ir_img{text-align:right;}
/* FOOTER */
.footer{
  padding-top: 3em;
}
.footerbottom{
  background: var(--gradGreen);
  margin-top: 3em;
  font-size: 1.4rem;
}
.footerbottom p,
.footerbottom a,
.footerbottom a:hover{
  color:white;
  display: inline-block;
  padding: .6em .1em;
}
.footerright{
  text-align: right;
}
.footerflex {
  /*display: flex;*/
  justify-content: space-between;
  align-items: center;
}

.image-link {
  transition: transform 0.3s ease-in-out;
}

.image-link:hover {
  transform: scale(1.1);
}

.image-link img {
  width: 100%;
  height: auto;
  max-width: 70px;
  /*width: 40px;*/
  padding: .5em;
}

.footercontactlinks{
  color: var(--main-txt-color);
  padding-top: .6em;
  padding-bottom: .6em;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  font-size: 1,1em;
  transition: transform 0.3s ease-in-out;
}
.footercontactlinks:hover{
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

.fmail::before,
.fmap::before,
.ftel::before{
  display: inline;
  white-space: nowrap;
  margin-right: 1em;
  vertical-align: middle;
}

.fmail::before{
  content: url('../img/i_mail.png');
}
.fmap::before{
  content: url('../img/i_pin.png');
}
.ftel::before{
  content: url('../img/i_phone.png');
}

/* HEADER */
.header {
  background-color: white;
  box-shadow: 1px 3px 35px 16px #ededed;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.menu a img {
}
.menutoggle {
  display: none;
  cursor: pointer;
}
.menu ul {
  display: flex;
  list-style: none;
}

.menu-li {
  margin-right: 1rem;
  position: relative;
}

.menu ul ul {
  display: none;
  position: absolute;
  background-color: white;
  left: -2em;
  top: -0.3em;
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 1;
}
.menu ul ul li {
  margin: 0;
  padding: 0.5rem 1rem;
}
.menu-li:hover > ul {
  display: block;
}

/* Media query for mobile menu toggle */
@media screen and (max-width: 768px) {
  .menu ul {
    display: none;
  }
  .menutoggle {
    display: block;
  }
  .menu.active ul {
    display: flex;
    flex-direction: column;
  }
  .menu.active .menutoggle span {
    background-color: black;
  }
}
/* SLIDER */
.sliderwool {margin-top: 3em;}
.slider::after{
  content: '';
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
  z-index: 2;
}
.slider::before{
  content: '';
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

.slider::before {
  left: 0;
}

.slider::after {
  right: 0;
}
.slider {
  width: 100%;
  overflow: hidden;
  min-height: 150px;
  position: relative;
  z-index: 1;
}

.slides {
  display: flex;
  gap: 3em;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 auto;
}

.slide img {
  max-height: 100%;
  width: auto;
}
/* STREET */
.street{
  background-image: url('../img/streetbkf.png');
  background-repeat: repeat-x;
  background-size: 30px;
 /* background-position-y: center;*/
  background-position-y: 240px;
}
.streetimg{padding: 2em 0;}
.bullets{
  color: var(--gradGreen);
  padding: .5em;
}
.bullets::before{
 content: url("../img/bullet.png");
 margin-right: .5em;
}
/* absslider */
.absslider{

  flex-shrink: 0;
  padding: 2em 2em 1em 2em;

  border-radius: 1.05rem;
  border: 1.05px solid rgba(255, 255, 255, 0.37);
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(24.149999618530273px);
}
.abscontainer {
  display: flex;
  align-items: center; /* Vertical center alignment */
}
.abscitation{}
.absperson{}
.absname{}
/* GERMANY */
.germany{
  background-image: url('../img/mapDE/aut_de_buhaha.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: center;
  background-position-x: right;
  display:flex !important;
  flex-wrap: wrap;
}
.gerimg{

}
.ger1{
  align-self: flex-start;
  max-width: 310px;
  padding: 1em;
}
.ger2{
  align-self: center;
  max-width: 310px;
  padding: 1em;
}
.ger3{
  align-self: flex-end;
  max-width: 310px;
}
/* FILTER */
/* Style for table rows */
table {
  border-collapse: separate;
  border-spacing: 0 1em;
  vertical-align: middle;
}
#scrollcontainer tr{
  transition: background-color 0.3s, color 0.3s;
  box-shadow: 0px 1px 7px rgb(0 0 0 / 26%);
  border-radius: 10px;
}
#scrollcontainer tr:hover{
  background: var(--gradGreen);
  color: white !important;
  border-radius: 10px;
}
#scrollcontainer tr a{
  color: #000;
}
#scrollcontainer tr a:hover{
  color: white !important;
}

tbody td:nth-child(1) {
  padding-left: 0.5em;
  border-radius: 10px 10px 0 0;
  width: 100% !important;
}
tbody td:nth-child(2) {
  width: 50% !important;
  padding-left: 0.5em;
}
tbody td:nth-child(3) {
  border-radius: 0 0px 10px 10px;
  width: 40% !important;
  padding-left: 0.5em;
}
table thead {
  /*display: none;*/
}
tbody td:nth-child(3) {
  border-radius: 0 10px 10px 0;
}
tbody td{
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
table thead{
  width: 100%;
}
table thead th:nth-child(1) {
  padding-left: 0.5em;
  width: 55% !important;
}

table thead th:nth-child(2) {
  width: 25% !important;
  padding-left: 0.5em;
  text-align: left;
}

table thead th:nth-child(3) {
  border-radius: 0 0px 10px 10px;
  width: 20% !important;
  padding-left: 0.5em;
}

/* Rearrange columns on mobile devices */
@media (max-width: 500px) {
  tbody tr td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  tbody tr td:nth-child(2),
  tbody tr td:nth-child(3) {
    display: inline-block;
    margin-right: 2%;
  }
}
@media (min-width: 500px) {
  tbody td:nth-child(1) {
    padding-left: 1em;
    border-radius:10px 0 0 10px;
    width: 55% !important;
    height: 60px;
  }
  tbody td:nth-child(2) {
    width: 25% !important;
  }
  tbody td:nth-child(3) {
    border-radius: 0 10px 10px 0;
    width: 20% !important;
  }
}
/* Style for the accordion */
.accordion-content {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-top: 10px;
}

.accordion-content.active {
  display: block;
}

.accordion-toggle {
  cursor: pointer;
}

.acc_toggle {
  float: right;
}

.sub-modules {
  margin-left: 20px;
}

.checkbox {
  margin-top: 10px;
}

.hide {
  display: none;
}
/* FORM */
input[type='color'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='email'], input[type='password'], input[type='month'], input[type='number'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='week'], input:not([type]), textarea, select {
  -webkit-appearance: none;
  background-color: var(--main-a-color);
  border: 0.1rem solid var(--main-a-color);
  border-radius: 0rem;
  box-shadow: none;
  box-sizing: inherit;
  padding: 1em;
  width: 100%;
  border-radius: 7px;
  border: 1.102px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(43.57499694824219px);
}
.state {
  fill: gray;
  cursor: pointer;
}
.state:hover {
  fill: var(--gradGreen);
}
.kursplantablediv {
  width: 100%;
  background: radial-gradient(ellipse at center, #ebebeb 0%, #fff 80%);
}
#autmap{
  max-width: 100%;
}
.mapbox {
/*    max-height: 400px;
    margin-top: -5em;*/
}
@media (min-width: 500px) {
  .mapbox {
/*    max-height: 400px;
    margin-top: -10em;*/
    margin-bottom: 2em;
  }
}
.input-group .sub-modules {
  display: none;
}
.checkboxes{font-size: 90%;}
.top-module{
  margin: 0.5em 0 0 0;
}
.notmobile{
  width:90vw;
  padding: 2em 0 0 0;
}
.kasterl{
  border: 1px solid #78A341;
  border-radius: 10px;
}
@media (min-width: 650px) {
  .notmobile{width:30vw;}
}
/*.punkte .column,*/
.punkte .column:nth-child(1),
.punkte .column:nth-child(2),
.punkte .column:nth-child(3)
{
  border-right: 3px solid #ebebeb;
}
.kreise{
  background-image: url('../img/kreise.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: center;
  background-position-x: left;
  display:flex !important;
  flex-wrap: wrap;
}
.whitelines{
  background-image: url('../img/whiteline.svg'),var(--gradGreen);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.headerlanding{background-color:transparent;}
iframe {
  border-radius: 10px;
  overflow: hidden;
  border: 5px solid #dbdbdb;
}
.slide-in-right {
/*  transform: translateX(-50%);
  transition: transform 1s ease-in-out;*/
}
.logomain{max-width: 40vw;}
.begr{
  max-width: 400px !important;
}
.videomobile{display:block;}
.videopc{/*display:none;*/}
@media (min-width: 650px) {
  .videomobile{display:none;}
  .videopc{display:block;        padding-top: 5rem;}
}

.pipedriveWebForms{
  margin-top: 0em;
}
@media (min-width: 1200px) {
  .pipedriveWebForms{
    margin-top: 0em;
  }
}
.buzzetmobile{margin-left: 2em;}
.footerleft p {
  padding: 1.3em 0.1em;
}
.whitebroad{;
  padding: 6rem 0;
}
.lightgreen{
  background-color: #f2f6ec;
  padding: 6rem 0;
}
.textbrechen{
  max-width: 500px !important;

}
/* ---------- MENU ------------ */
/* Hamburger icon styling */
.menu-toggle {
  cursor: pointer;
  position: absolute;
  right: 5vw;
  top: 1.5em;
}

.bar {
  display: block;
  background-color: var(--main-a-color);
  width: 24px;
  height: 2px;
  margin: 6px auto;
  transition: all 300ms ease-in-out;
}

.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* Header styling */
.header {
  background-color: #fff;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.logo {
  display: flex;
  align-items: center; /* Center the logo vertically */
}

.logo img {
  max-width: 200px;
  margin-right: 20px; /* Add some spacing between the logo and menu */
}

.nav{display:none;}
.nav.active{display:block; font-size: 80%;}
@media (min-width:1040px) {
  .nav.active{display:block; font-size: 100%;}
}
.nav ul {
  display: block;
  align-items: center;
  list-style: none;
}

.nav ul li {
  display: block;
  padding: 0.6em;
  border-top: 1px solid #81a26380;
  font-size: 1.4rem;
}

.nav a {
  color: #333;
  text-decoration: none;
  font-size: 1.4rem;
}

.nav a:hover {
  color: var(--main-a-color);
  text-decoration: none;
}

@media (min-width: 1040px) {
  .menu-toggle {
    display: none;
  }
  .topnav{
    width: 100%;
  }
  .nav {
    display: inline-block;
    float:right;
    margin-top: 1em;
  }

  .logo {
    display: inline-block;
  }
  .menuwrap{
    display: flex;
    justify-content: space-between;
  }
  .greenbuttonmenu {
    background: var(--gradGreen);
    border-radius: 18px;
    padding: .3em .8em 0.3em .8em;
    color: white;
    transition: transform 0.3s ease-in-out; /* Add transform transition */
    font-weight: 900;
    margin-top: -0.3em;
  }

  .greenbuttonmenu:hover {
    transform: scale(1.05); /* Increase size on hover */
  }
  a.greenbuttonmenu {
    color: white !important;
  }
  .nav ul li {
    display: inline-block;
    padding: 0.6em;
    border-top: 0px solid #81a26380;
    font-size: 110%;
    padding-bottom: 1.2em;
  }
}