#was-wir-tun { scroll-padding-top: 0px !important; }

br.break { display: none; }
@media screen and (max-width: 612px) {
br.break { display: inherit; }
.contentbox .subtitle { text-align: center !important; }
.subtitle { letter-spacing: -0.5px; }
}
/*--------------------------------------------------------------
      HEADER
--------------------------------------------------------------*/
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; width: 100%; height: auto; }
.header-box { position: relative; z-index: 5; width: 100%; height: 90px; display: flex; justify-content: flex-end; align-items: center; padding: 0 5% 0 5%; background: transparent; }
.header-box.active { background: var(--white); box-shadow: var(--shadow-box); }
.header-logo { position: absolute; left: 5%; z-index: 6; height: 90px; width: 280px; display: flex; justify-content: center; align-items: center; }
.header-logo img { width: auto; height: 76px; opacity: 0; object-fit: contain; } 
.header-logo img.active { opacity: 1; } 

ul.menu { display: flex; align-items: center; height: 100%; list-style: none; padding: 0; }
ul.menu li { display: flex; align-items: center; height: 100%; padding: 5px 14px;  border-radius: 0 0 6px 6px; }
ul.menu li a { display: flex; align-items: center; height: 100%;  }
ul.menu li:hover { background: var(--green); box-shadow: var(--shadow-box); }
ul.menu li:hover a { color: var(--white); }


@media screen and (max-width: 1100px) {
.header-logo { left: 2.5%; }
.header-box { padding: 4px 2.5% 0 2.5%; }
}
@media screen and (max-width: 1000px) {
ul.menu { display: none; }
#sp-burger-box { display: inherit !important; }
}
@media screen and (max-width: 878px) {
.header-box, .header-logo { height: 80px; }
.header-logo img { height: 62px; } 
}
@media screen and (max-width: 6680px) {
#sp-burger-box { margin-top: 14px !important; }
}
/*--------------------------------------------------------------
      STARTSEITE
--------------------------------------------------------------*/
.startseite-box { z-index: 10; position: absolute; top: 10%; left: 5%; width: 90%; height: 80%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.startseite-box img { max-height: 200px; width: auto !important; filter: drop-shadow(0 2px 8px rgba(0,0,0,.05)); margin-top: -68px; } 

.startseite-background { z-index: 1; position: absolute; width: 90%; height: 80%; left: 5%; top: 10%; object-fit: cover; object-position: top; box-shadow: var(--shadow-box); border-radius: var(--radius-small); } 
.green-bottom { z-index: 0; position: absolute; width: 100%; height: 20%; left:0; bottom: 0; background: var(--green); }

@media screen and (max-width: 1100px) {
.startseite-box, .startseite-background { width: 95%; left: 2.5%; }
.startseite-background { object-position: 60% top; }
.startseite-box img { max-height: 160px; margin-top: -54px; }
}
@media screen and (max-width: 878px) {
.startseite-box, .startseite-background { height: calc(100% - 160px); top: 80px; }
.startseite-background { object-position: 75% top; }
.startseite-box img { max-height: 120px; margin-top: -39px; }
}
@media screen and (max-width: 618px) {
.startseite-background { object-position: 80% top; }
.startseite-box img { max-height: 90px; margin-top: -30px; }
}
@media screen and (max-width: 488px) {
.startseite-background { object-position: 77% top; }
.startseite-box img { max-height: 72px; margin-top: -23px; }
}
/*--------------------------------------------------------------
      WAS WIR TUN
--------------------------------------------------------------*/
.contentbox { position: relative; z-index: 1; padding: 40px; max-width: 1620px; width: 100%; height: auto; margin: 0 auto; background: var(--white); display: flex; flex-wrap: wrap; border-radius: var(--radius-small); box-shadow: var(--shadow-box); }
.contentbox .col:nth-child(1) { width: 50%; padding-right: 20px; }
.contentbox .col:nth-child(2) { width: 50%; padding-left: 20px; }
.contentbox .col:nth-child(2) img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-small); box-shadow: var(--shadow-box); }

.contentbox .subtitle { text-align: left; }
.contentbox .btn { margin: 20px auto 0 auto !important; }
.contentbox div.popup-line { margin: 50px 0 50px 0; }

.flexbox { display: flex; justify-content: space-between; margin-top: 20px; }
.flexbox img { height: 420px; width: auto; margin-right: 40px; border-radius: var(--radius-small); }

.flexbox2 { display: flex; justify-content: space-between; margin-top: 20px; }
.flexbox2 img { height: 70px; width: auto; margin-right: 40px; border-radius: var(--radius-small); }

@media screen and (max-width: 1438px) {
.contentbox { padding: 28px; }
.contentbox .col:nth-child(1) { padding-right: 14px; }
.contentbox .col:nth-child(2) {  padding-left: 14px; }
.flexbox img { margin-right: 28px; }
}
@media screen and (max-width: 1338px) {
.contentbox .col:nth-child(1) { width: 55%; }
.contentbox .col:nth-child(2) { width: 45%; }
.flexbox img { height: 360px; }
.flexbox2 img { height: 50px; }
}
@media screen and (max-width: 1212px) {
.contentbox .col:nth-child(1) { width: 100%; padding: 0; }
.contentbox .col:nth-child(2) { width: 100%; padding: 0; margin-top: 40px; }
.contentbox .col:nth-child(2) img { height: 380px; }
.contentbox div.popup-line { margin: 40px 0 40px 0; }
.contentbox .btn { margin: 30px auto 0 auto !important; }
}
@media screen and (max-width: 768px) {
.contentbox { padding: 18px; }
.contentbox .col:nth-child(2) img { height: 320px; }
.flexbox { display: block; }
.flexbox img { height: 240px; margin-right: 18px; float: left; }
.flexbox2 img { height: 50px; }
}
@media screen and (max-width: 588px) {
.contentbox .col:nth-child(2) img { height: 260px; }
.flexbox img { height: 220px; }
.flexbox2 img { height: 50px; }
}
@media screen and (max-width: 568px) {
.flexbox img { height: 190px; margin-right: 12px; }
.flexbox2 img { height: 50px; }
}
/*----------------------------------------------------------------------------------
VERANSTALTUNGEN
----------------------------------------------------------------------------------*/
.va-box { width: 76%; max-width: 1900px; margin: 0 auto; }
#va-container { position: relative; display: flex; justify-content: space-between; padding: 20px 40px; margin: 0 40px; border-bottom: 3px solid var(--green); background: transparent; cursor: pointer;  }
#va-container:hover { background: var(--green); box-shadow: var(--shadow-box); } 

#va-container .col-date { width: auto; flex: 1; max-width: 110px; }
#va-container .col-title { min-width: 60%; max-width: 60%; }
#va-container .col-info { width: 110px; cursor: pointer; text-align: right; }
.col-date, .col-title, .col-info { color: var(--black) !important; padding: 5px 0; }

#va-container:hover .col-date, #va-container:hover .col-title, #va-container:hover .col-info { color: var(--white) !important; }

@media screen and (max-width: 1212px) {
.va-box { width: 100%; }
}
@media screen and (max-width: 838px) {
#veranstaltungen h2 { margin-bottom: 60px; }
#va-container { flex-direction: column; justify-content: center; padding: 20px 0; margin: 0 }
.col-date, .col-title, .col-info { max-width: 100% !important; min-width: 100% !important; text-align: center !important; }
}
/*--------------------------------------------------------------
      LEISTUNGEN
--------------------------------------------------------------*/
#leistungen-box { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; max-width: 1700px; width: 100%; margin: 0 auto; padding: 0; }
#leistungen-box div.col { width: 22%; height: auto; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; 
padding: 40px 10px; border-radius: var(--radius-small); box-shadow: var(--shadow-box); background: var(--white);  }

#leistungen-box .leistungen-img { position: relative; background: var(--green); border-radius: 100%; width: 100px; height: 100px; margin-bottom: 40px; 
display: flex; justify-content: center; align-items: center; }
#leistungen-box .leistungen-img img { max-height: 70%; width: auto; }
#leistungen-box .col:nth-child(1) .leistungen-img img, #leistungen-box .col:nth-child(4) .leistungen-img img { max-height: 60%; width: auto; }
#leistungen-box .col:nth-child(1) .leistungen-img, #leistungen-box .col:nth-child(3) .leistungen-img { background: var(--red); } 

#leistungen-box .leistungen-content { width: auto; padding: 0; }
#leistungen-box .leistungen-content h3 { color: var(--black); text-align: center; margin-bottom: 0; } 
#leistungen-box .leistungen-content h3 { font-size: 1.15em; letter-spacing: -0.5px; }

#leistungen-box .col:hover .leistungen-img { transform: rotate(360deg); }
#leistungen-box .col:hover { transform: scale(1.025); box-shadow: var(--shadow-box-hover); }

div.leistungen-popup .flexbox { max-width: 530px; margin: 0 auto 0 auto; }
div.leistungen-popup .flexbox img { height: 272px; border-radius: var(--radius-small); }
div.leistungen-popup strong { display: block; margin-bottom: 40px; }
div.leistungen-popup .popup-line { margin: 30px 0 50px 0; }

div.leistungen-popup p { text-align: center; }
div.leistungen-popup p:first-of-type { margin-top: 16px; }
div.leistungen-popup .subtitle:last-of-type { margin-top: 40px; }
div.leistungen-popup ul.leistungen-list { list-style: none; margin-top: 16px; margin-bottom: 40px; margin-left: auto; margin-right: auto; width: fit-content; padding-left: 0; }
div.leistungen-popup ul.leistungen-list li { text-align: center; line-height: 1.45; padding-bottom: 4px; }
div.leistungen-popup ul.leistungen-list li:last-of-type { padding-bottom: 0; }

@media screen and (max-width: 1298px) {
#leistungen-box div.col { width: 23.5%; padding: 20px 10px; }
#leistungen-box .leistungen-img { margin-bottom: 20px; }
}
@media screen and (max-width: 1212px) {
#leistungen-box { max-width: 800px; justify-content: space-around; }
#leistungen-box div.col { width: 42%; }
#leistungen-box div.col:nth-child(1), #leistungen-box div.col:nth-child(2) { margin-bottom: 60px; }
#leistungen-box div.col:nth-child(1) { order: 2; }
#leistungen-box div.col:nth-child(2) { order: 1; }
#leistungen-box div.col:nth-child(3) { order: 3; }
#leistungen-box div.col:nth-child(4) { order: 4; }
}
@media screen and (max-width: 668px) {
#leistungen-box div.col { width: 42%; }
#leistungen-box div.col:nth-child(1), #leistungen-box div.col:nth-child(2) { margin-bottom: 40px; }
#leistungen-box .leistungen-img { width: 80px; height: 80px; }
div.leistungen-popup ul.leistungen-list li { padding-bottom: 8px; }
}
@media screen and (max-width: 468px) {
#leistungen-box .leistungen-content h3 { font-size: 1em; }
#leistungen-box { justify-content: space-between; }
#leistungen-box div.col { width: 48%; }
#leistungen-box div.col:nth-child(1), #leistungen-box div.col:nth-child(2) { margin-bottom: 14px; }
}
/*--------------------------------------------------------------
      ACCORDION
--------------------------------------------------------------*/
.acc-btn { cursor: pointer !important; position: relative; padding: 10px 20px; background: var(--green); border-radius: var(--radius-small); display: flex; justify-content: center; margin-bottom: 20px; }
.acc-btn.active { display: flex; }
.acc-btn img { height: 16px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); }
.acc-btn.active img { transform: translateY(-50%) rotate(180deg); }

.acc-panel { visibility: hidden; max-height: 0; overflow: hidden; padding: 0 20px 0 20px; text-align: justify; }
.acc-panel.show { visibility: visible; max-height: inherit; padding: 20px 20px 30px 20px; }

.acc-panel .btn { margin: 40px auto 10px auto; background: transparent; border: 2px solid var(--green); }
.acc-panel .btn:hover { background: var(--green); border: 2px solid var(--green); } 
.acc-panel .btn a { color: var(--black); } 
.acc-panel .btn:hover a { color: var(--white); } 

@media screen and (max-width: 800px) {
.acc-panel { padding: 0 0px 0 0px; }
.acc-panel.show { padding: 20px 0px 30px 0px; }

.acc-btn { padding: 10px 12px; }
.acc-btn img { height: 12px; right: 12px;  }
}
/*--------------------------------------------------------------
      KONTAKT
--------------------------------------------------------------*/
#map-container { display: block; width: 100%; height: 100%; }
#map-container iframe { width: 100%; height: 100%; border-radius: var(--radius-small); box-shadow: var(--shadow-box); } 

#contact-container { display: flex; justify-content: center; flex-wrap: wrap; }
#contact-container .col { width: 50%; }
#contact-container .col:nth-child(1) { padding-right: 20px; }
#contact-container .col:nth-child(2) { padding-left: 20px; }

#contact-container .subtitle { font-size: 1.35em; margin-bottom: 40px; }
#contact-container p { font-size: 1.15em; }
#contact-container a { color: var(--white); }

#contact-container p.card { margin-bottom: 40px; }

@media screen and (max-width: 1000px) {
#contact-container .subtitle { font-size: 1.15em; }
#contact-container p { font-size: 1em; }
}
@media screen and (max-width: 878px) {
#contact-container { flex-direction: column; }
#contact-container .col { width: 100%; }
#contact-container .col:nth-child(1) { padding-right: 0; order: 2; margin-top: 60px; }
#contact-container .col:nth-child(2) { padding-left: 0; order: 1; }
#map-container { display: block; width: 100%; height: 280px; }
}
/*--------------------------------------------------------------
      PARTNER
--------------------------------------------------------------*/
#partner { z-index: 6; background: var(--white); padding: 60px 5%;             display: none; }
.page-link { width: fit-content; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
.page-link img { display: inline; max-height: 50px; margin: 0 10px; }

/*----------------------------------------------------------------------------------
      IMPRINT IMPRESSUM DATENSCHUTZ
----------------------------------------------------------------------------------*/
#imprint, #imprint h2, #imprint h3, #imprint span, #imprint a { color: var(--black) !important; }
#imprint a._brlbs-btn-cookie-preference { color: var(--white) !important; }
#imprint h2.first { font-size: 2.8em; }
#imprint h2, #imprint .subtitle { font-size: 1.5em; }
#imprint h3 { text-align: left; margin: 60px 0 20px 0; }
#imprint a { text-decoration: underline; }
#imprint .subtitle { margin: 60px 0 20px 0; text-align: left; }
#imprint p { text-align: justify; }

#imprint ul, #imprint ol { list-style: disc; list-style-position: oustide; margin-left: 20px; }

.page-id-196 .header-logo img, .page-id-210 .header-logo img { opacity: 1 !important; }
.page-id-196 .header-box, .page-id-210 .header-box { background: var(--white) !important; box-shadow: var(--shadow-box) !important; }
.page-id-210 h2 { margin-top: 60px !important; margin-bottom: 20px !important; text-align: left !important; }

/*--------------------------------------------------------------
      POPUP
--------------------------------------------------------------*/
[data-popup] { cursor: pointer !important; }
#popup-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9999;  visibility: hidden; opacity: 0; display: flex; align-items: center; justify-content: center; }
.popup-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: var(--green-transparent); }
.popup-close { position: fixed; top: 10px; right: 5%; display: flex; justify-content: center; align-items: center; width: 54px; height: 54px; overflow: hidden; font-size: 4em; font-weight: 700; color: var(--white); filter: drop-shadow(var(--shadow)); cursor: pointer; z-index: 9999; }
.popup-show { visibility: visible !important; opacity: 1 !important; }

.popup { display: block; position: relative; background: white; border-radius: var(--radius-small); background: var(--white); box-shadow: var(--shadow-box); padding: 0 0; height: 0; width: 0; visibility: hidden; overflow: scroll; cursor: auto !important; } 
.popup.show { height: auto; min-height: 200px; max-height: 85vh; width: 90%; max-width: 1200px; visibility: visible; padding: 40px 40px; border: 2px solid var(--green); } 

.popup-header { position: relative; display: block; z-index: 1; width: 100%; height: 360px; margin-bottom: 20px; }
.popup-header img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; object-position: center; border-radius: 4px; }
.standort-content .popup-header { height: auto; }
.standort-content .popup-header img { object-fit: contain; }

div.popup-line { margin: 40px 0; border-bottom: 3px solid var(--green); }

div.leistungen-popup .flexbox img { margin-right: 0 !important; }
div.leistungen-popup .flexbox { display: flex !important; }

@media screen and (max-width: 1438px) {
.popup.show { padding: 28px; }
}
@media screen and (max-width: 768px) {
.popup.show { padding: 20px 14px; }
}
@media screen and (max-width: 668px) {
div.leistungen-popup .flexbox img { height: 242px; }
}
@media screen and (max-width: 542px) {
div.leistungen-popup .flexbox { flex-direction: column; }
div.leistungen-popup .flexbox div { margin: 0 auto; }
div.leistungen-popup .flexbox div:nth-child(2) { display: none; }
}
/*--------------------------------------------------------------
      SECTION
--------------------------------------------------------------*/
section { position: relative; height: auto; }
#startseite { height: 100vh; background: var(--white); }

#was-wir-tun { z-index: 10; background: var(--green); padding: 40px 5% 100px 5%; }
#veranstaltungen { z-index: 9; background: var(--white); padding: 80px 5% 100px 5%; }
#leistungen { z-index: 8; background: var(--green); padding: 80px 5% 100px 5%; }
#kontakt { z-index: 7; background: var(--green); padding: 80px 5% 80px 5%; }
#imprint { position: relative; height: auto; padding: 140px 5% 100px 5%; max-width: 66%; margin: 0 auto; }

#was-wir-tun::after, #leistungen::after, #veranstaltungen::after, #kontakt::after { content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; box-shadow: var(--shadow); }


@media screen and (max-width: 1100px) {
#was-wir-tun { padding: 40px 2.5% 100px 2.5%; }
#veranstaltungen { padding: 80px 2.5% 100px 2.5%; }
#leistungen { padding: 80px 2.5% 100px 2.5%; }
#kontakt { padding: 80px 2.5% 80px 2.5%; }
}
@media screen and (max-width: 878px) {
#startseite { height: calc(100vh - 80px); }
#kontakt { padding: 80px 2.5% 40px 2.5%; }
}
/*--------------------------------------------------------------
      CARPET
--------------------------------------------------------------*/
#carpet { height: 65vh; }
/* -- BACKGROUND IMAGE -- */
.bg-img-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100vw; height: 100%; }
.bg-img { top: 0; left: 0; width: 100vw; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: inset 0px 0px 60px rgba(0,0,0,0); opacity: 1; background-attachment: fixed; position: fixed; transform: translateZ(0); will-change: transform; }

@media screen and (max-width: 878px) {
.bg-img { background-attachment: scroll !important; position: fixed !important; 
   width: 100% !important;
   height: 100vh !important;
   z-index: -1 !important;
 }
 }

/*--------------------------------------------------------------
SPITZBUB BURGER MENU
--------------------------------------------------------------*/
#sp-burger-box { display: none; padding: 0px; margin: 0px; }

label.sp-burger { display: inherit; background: transparent; width: 40px; height: 40px; position: relative; float: right; top: 0; cursor: pointer !important; z-index: 9999; }
input#sp-burger { display: none; }
.line { 
   position: absolute; left: 2px; height: 4px; width: 36px; background: var(--black); border-radius: 2px; 
   display: block; transform-origin: center; cursor: pointer !important;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); 
}
.sp-burger:hover .line { background: var(--black); }
#sp-burger:checked + .sp-burger:hover .line { background: var(--black); }
#sp-burger:checked + .sp-burger .line { background: var(--black); cursor: pointer !important; }

.line:nth-child(1) { top: 6px; }
.line:nth-child(2) { top: 18px; }
.line:nth-child(3) { top: 30px; }
#sp-burger:checked + .sp-burger .line:nth-child(1){ transform: translateY(12px) rotate(-45deg); }
#sp-burger:checked + .sp-burger .line:nth-child(2){ opacity:0; }
#sp-burger:checked + .sp-burger .line:nth-child(3){ transform: translateY(-12px) rotate(45deg); }

div#sp-menu-container { position: fixed; left:0; bottom: 0; width: 100%; height: 100%; background: var(--green); padding: 0 2%; opacity: 0; visibility: hidden; z-index: 998; display: flex; justify-content: center; align-items: center; }
.visible { visibility: visible !important; opacity: 1 !important; }

#sp-menu span.arrow { display: inline-block; float: right; font-size: 0.75em; margin-top: 16px; cursor: pointer; }
#sp-menu span.arrow.active { transform: rotate(180deg); }
#sp-menu span.arrow:after { content: '\25BC'; color: var(--white); }

#sp-menu li.submenu { height: 0; padding: 0; margin: 0; visibility: hidden; }
#sp-menu li.submenu.show { height: auto; margin: 8px 0; visibility: visible; } 

#sp-menu li a { font-size: 1.5em; margin: 14px 0; padding: 4px 0; display: inline-block; text-align: center; min-width: 198px; }
#sp-menu li.submenu ul li a { font-size: 1em; margin: 0; padding: 0; }
#sp-menu li.show a { margin: 4px 0 !important; }

@media screen and (max-width: 600px) {
#sp-menu span.arrow { margin-top: 6px; padding: 10px; }
}
/*--------------------------------------------------------------
      FOOTER
--------------------------------------------------------------*/
div#footer { display: flex; width: 100%; height: auto; padding: 20px 5%; background: var(--green); }
div#footer .col { width: 50%; font-size: 0.7em; color: var(--white); } 
div#footer .col:nth-child(2) { text-align: right; } 
div#footer .col a { color: var(--white); }

@media screen and (max-width: 500px) {
div#footer .col a { font-size: 9px; }
}


/*--------------------------------------------------------------
      COLOR
--------------------------------------------------------------*/
:root {
  --white: #fcfcfc; 
  --black: #0F0C08;

  --green: #7ebc62;
  --yellow: #e4b23d;
  --red: #be110f;
  --blue: #62acdc;

  --green-transparent: rgba(126,188,98,0.95);

  --green-gradient: linear-gradient(#7ebc62, #97cf5f);
  --yellow-gradient: linear-gradient(#e4b23d, #f3c862);

  --white-gradient: linear-gradient(#ffffff, #ffffff);

  --shadow: 0 4px 4px rgba(0,0,0,.15);
  --shadow-box: 0 2px 8px rgba(0,0,0,.15);
  --shadow-box-hover: 0 4px 10px rgba(0,0,0,.45);

  --radius: 14px;
  --radius-small: 6px;
}
/*--------------------------------------------------------------
      TEMPLATE
--------------------------------------------------------------*/
/* -- WP THEME -- */
header, footer, header#header, header.header, aside#sidebar, footer#footer {display:none;}
body { background: var(--white); overflow-x: hidden; }
.panel-grid, .panel-no-style { margin: 0 !important; }
.noscroll {overflow: hidden !important; max-height: 100vh; }
/*--------------------------------------------------------------
      CSS RESET
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { line-height: calc(1em + 0.5rem); text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
a:not([class]) { text-decoration-skip-ink: auto; }
a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }
input, button, textarea, select { font: inherit; }
strong { font-weight: bolder; }
:where(button, [type='button' i], [type='reset' i], [type='submit' i]) { -webkit-appearance: button; }
small { font-size: 80%; }
table { border-collapse: collapse; border-spacing: 0; caption-side: bottom; }
textarea { white-space: revert; resize: vertical; }
@media (prefers-reduced-motion: no-preference) {  html:focus-within { scroll-behavior: smooth; }  }
@media (prefers-reduced-motion: reduce) {  html:focus-within { scroll-behavior: auto; }  }
/*--------------------------------------------------------------
      FONT
--------------------------------------------------------------*/
@font-face {
  font-family: 'Open Sans'; font-display: swap;
  src: url("https://tilleulenspiegelbs.de/font/OpenSans-VariableFont.ttf") format("truetype");
}
@font-face {
  font-family: 'Reem'; font-display: swap;
  src: url("https://tilleulenspiegelbs.de/font/ReemKufiFun-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: 'Comic'; font-display: swap;
  src: url("https://tilleulenspiegelbs.de/font/Kalam-Regular.ttf") format("truetype");
}

html { font-size: 19px; scroll-padding: 60px; }
body { font-family: 'Open Sans'; font-weight: 500; line-height: 1.2;  font-size: 1.1em; }

strong, b { font-weight: 500; }
a, a:active, a:focus, a:visited { outline: none !important; text-decoration: none; color: var(--black); }
p:empty { display: none !important; margin: 0 !important; }
p { margin: 16px 0; line-height: 1.45; text-align: justify; }
p:first-of-type { margin-top: 0; }
p:last-of-type { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6, .subtitle, .popup-subheader, #sp-menu li a, .col-title, .form-fieldname, .wpcf7-list-item-label, .leistungen-popup .acc-btn, .leistungen-popup strong { font-family: 'Reem'; color: var(--white); font-weight: 500; }
h2 { font-size: 2.8em; margin-bottom: 80px; text-align: center; color: var(--green); }
h3 { font-size: 1.5em; margin-bottom: 20px; }
.subtitle { font-size: 1.15em; display: block; text-align: center; color: var(--black); }
.subtitle.about { font-size: 1.25em; }
.col-title { font-size: 1.15em; display: block; text-align: center; }
.col-date, .col-info { font-weight: 500; }

.popup-title { font-size: 2.5em; margin-bottom: 40px; text-align: center; color: var(--green); }
.va-popup-title { font-size: 2.5em; margin-bottom: 10px; text-align: center; color: var(--green); }
.va-popup-date { font-size: 1.15em; margin-bottom: 40px; display: block; text-align: center; color: var(--black); }

strong { font-size: 1.15em; color: var(--black) !important; }

.acc-btn span { font-size: 1.25em; color: var(--white); text-align: center; }

.black { color: var(--black) !important; }
.white { color: var(--white) !important; }



#kontakt p { color: var(--white) !important; text-align: center; }

ul.menu li a { font-family: 'Reem'; color: var(--black); text-decoration: none; font-weight: 600; font-size: 1em;  }

.btn, .wpcf7 input[type="submit"]  { display: block; padding: 14px 24px; background: var(--green); font-weight: 600; border-radius: var(--radius); cursor: pointer !important; color: var(--white); margin: 40px auto 0 auto; box-shadow: var(--shadow-box); min-width: 216px; width: fit-content; text-align: center; }
.btn a { color: var(--white); }


@media screen and (max-width: 1500px) {
html { font-size: 18px; }
}
@media screen and (max-width: 1368px) {
html { font-size: 17px; }
}
@media screen and (max-width: 800px) {
.acc-btn span { font-size: 1em; }
}
@media screen and (max-width: 768px) {
.popup-title,.va-popup-title { font-size: 2em; }
}
@media screen and (max-width: 668px) {
html { font-size: 16px; }
h2 { font-size: 2.2em; }
.btn, .wpcf7 input[type="submit"] { padding: 12px 12px; }
.acc-panel .btn a { letter-spacing: -0.5px; }
.popup-title,.va-popup-title { font-size: 1.5em; }
}
/*--------------------------------------------------------------
      TRANSITION
--------------------------------------------------------------*/
 .col-date, .col-title, .col-info, ul.menu li a {
     -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

section, .header-box, .header-logo img, #sp-burger:checked + .sp-burger:hover .line, #sp-menu-container, #va-container, #leistungen-box .col, .leistungen-popup .acc-btn img, .acc-panel, .contentbox, .acc-panel .btn, ul.menu li  
{
     -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#leistungen-box .leistungen-img {
     -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}









/*--------------------------------------------------------------
      KONTAKTFORMULAR
--------------------------------------------------------------*/
/*-- Allgemein --*/
form p { margin: 0; width: 100%; }
.wpcf7-form { display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: 800px; margin: 0 auto; }
.wpcf7 input, .wpcf7 textarea, .wpcf7-list-item-label a { color: var(--black) !important; }
.wpcf7 .formcol-2 .wpcf7-form-control-wrap { display: block; padding: 8px; }
input, textarea { font-style: normal; line-height: normal; max-width: 100%; outline: none; border: none; padding: 6px; border: 2px solid var(--white); background: #ececec; }
/*-- Placeholder --*/
.wpcf7-form-control::-webkit-input-placeholder { color: #ccc; }
.wpcf7-form-control:-moz-placeholder { color: #ccc; }
.wpcf7-form-control::-moz-placeholder { color: #ccc; }
.wpcf7-form-control:-ms-input-placeholder { color: #ccc; }
::-webkit-file-upload-button { outline: none; border: none; background: var(--yellow); color: var(--white); font-weight: 600; padding: 8px 16px; border-radius: 8px; }
.wpcf7 input[type="file"] { font-size: 0.9em; margin: 8px 0; }
/*-- Flex Ausrichtung --*/
#form-box { display: flex; align-items: center; flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 100%; max-width: 800px; margin-top: 60px; }
.formcol-1 { width: 100%; padding: 0 20px; display: flex; flex-direction: column; flex-basis: 100%; overflow: hidden; margin-bottom: 20px; }
.formcol-2 { width: 50%; padding: 0 10px; display: flex; flex-direction: column; flex-basis: 50%; overflow: hidden; margin-bottom: 20px; }
.wpcf7-textarea { width: 100%; margin: 8px 0; }
.formcol-1.privacy { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: inherit !important; }
.formcol-1.privacy { font-size: 0.65em; text-align: justify; }
/*-- Checkbox --*/
.wpcf7-checkbox { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.wpcf7-list-item { margin: 4px 0; width: 50%; padding: 0 10px; flex-basis: 50%; }
.wpcf7-list-item:nth-child(2n) { padding: 0 0 0 30px; } 
/*-- Feld Header --*/
.form-fieldname { display: block; }
.form-fieldname, .wpcf7-list-item-label { color: var(--black); margin-left: 8px; }
/*-- Hinweis nicht ausgefüllt --*/
.wpcf7-not-valid-tip { display: none !important; color: var(--red); }
.auswahl .wpcf7-not-valid-tip { display: block !important; padding-left: 20px; }
.wpcf7-not-valid { border: 2px solid var(--red); }
.auswahl .wpcf7-not-valid { border: none; }
/*-- Datenschutzerklärung --*/
.privacy .wpcf7-list-item { width: 100% !important; text-align: justify; font-size: 0.6em; }
.privacy .wpcf7-list-item a { color: var(--white) !important; } 
.privacy .wpcf7-list-item label { display: flex; justify-content: flex-start; align-items: flex-start; }
/*-- Formular gesendet --*/
div.wpcf7-response-output { margin: 0 !important; border: none !important; border-radius: 8px; background: var(--green); color: var(--white); padding: 8px 16px !important; font-weight: normal; }
div.wpcf7-response-output:empty { display: none; }
/*-- Absenden --*/
.wpcf7 input[type="submit"] { border: none !important; color: var(--white) !important; }
.wpcf7-spinner { display: none !important; }

@media screen and (max-width: 668px) {
.wpcf7-form { width: 100%; }
#form-box { flex-direction: column; }
.formcol-2 { width: 100%; margin-bottom: 8px; padding: 0; align-items: center; }
.form-fieldname, .wpcf7-list-item-label { font-size: 1em; text-align: left; }
.formcol-1.privacy { padding: 0; flex-direction: initial !important; }
.formcol-1.privacy .wpcf7-list-item { padding: 0 0 0 10px; }
.wpcf7 input[type="submit"] { margin: 10px auto 20px auto; }
}