/*
	Theme Name: KNOLLE-DESIGN-Theme
	Theme URI: https://knolle.biz/
	Description: Willkommen zum Knolle-Theme – die perfekte Grundlage für dein Webprojekt! Entwickelt und bereitgestellt von Jens Knolle, bietet dieses Theme eine Auswahl an durchdachten Features, die deine Arbeit mit Wordpress noch effizienter und kreativer machen.
	Author: Jens Knolle
	Author URI: https://knolle.biz/
	Template: Divi
	Version: 1.0.3
	Tag: Child Theme, Knolle Biz 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==========================================================================
   BASIC / RESET
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@property --fluid {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}



html {
  font-size: 62.5%; /* 1rem = 10px */
}

#page-container { overflow: hidden; }

a[href^="#"] { cursor: pointer !important; }

.mce-panel .mce-stack-layout-item.mce-first {
  position: sticky !important;
  top: 0;
}



/* ==========================================================================
   ROOT: Design-System + Fluid in CSS (ohne JS)
   ========================================================================== */
:root {
  /* GLOBAL COLORS */

  --c1:          #0089b1; /* Türkie */
  --c2:          #c3df66; /* giftgrün */

  --c3:          red;
  --c4:          green;
  --c5:          coral;
  --c6:          purple;

  --white:       #ffffff;
  --black:       #000000;

  --kdac:        #c9dd2e;  /* KD Accent */
	
  --ha1:		 #fff;		/* hero-animated-bg farbe 1 */
  --ha2:		 #0089b1;		/* hero-animated-bg farbe 1 */

		

  /* TRANSITIONS */
  --tra-3s: all .3s ease-in-out;
  --tra-5s: all .5s ease-in-out;
  --tra-7s: all .7s ease-in-out;

  /* FLUID (CSS-only) : min 360px / max 1920px */
  --fluid: clamp(0, calc((100vw - 36rem) / 156rem), 1);

  /* FONT SIZES */
  --fs-body: 1.6rem; /* bewusst stabil */

  --fs-small: calc(1.2rem + 0.2rem * var(--fluid));
  --fs-foot:  calc(1rem + 0.2rem * var(--fluid));
  --fs-btn:   calc(1.4rem + 0.1rem * var(--fluid));
  --fs-lead:  calc(1.7rem + 0.3rem * var(--fluid));

  --fs-h5:    calc(1.8rem + 0.4rem * var(--fluid));
  --fs-h4:    calc(2.2rem + 0.6rem * var(--fluid));
  --fs-h3:    calc(2.6rem + 1.0rem * var(--fluid));
  --fs-h2:    calc(3.2rem + 1.6rem * var(--fluid));
  --fs-h1:    calc(3.4rem + 2.6rem * var(--fluid));

  /* FONT WEIGHTS */
  --fw-200: 200;
  --fw-400: 400;
  --fw-600: 600;
  --fw-800: 800;

  /* LINE HEIGHTS */
  --lh-body:  1.50;
  --lh-lead:  1.45;
  --lh-small: 1.30;

  --lh-h1:    1.10;
  --lh-h2:    1.20;
  --lh-h3:    1.25;
  --lh-h4:    1.30;
  --lh-h5:    1.35;

  /* SPACING FLUID */
  --space-xs:  calc(0.8rem + 0.4rem * var(--fluid));
  --space-s:   calc(1.2rem + 0.8rem * var(--fluid));
  --space-m:   calc(2.0rem + 1.2rem * var(--fluid));
  --space-l:   calc(3.2rem + 1.6rem * var(--fluid));
  --space-xl:  calc(4.8rem + 2.4rem * var(--fluid));
  --space-xxl: calc(7.2rem + 3.6rem * var(--fluid));

  --btn-p-t-b: calc(1.4rem + 0.3rem * var(--fluid));
  --btn-p-l-r: calc(2.8rem + 0.3rem * var(--fluid));
}

/* PADDING CLASSES */
.p-xs  { padding: var(--space-xs); }
.p-s   { padding: var(--space-s); }
.p-m   { padding: var(--space-m); }
.p-l   { padding: var(--space-l); }
.p-xl  { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

/* ==========================================================================
   TYPO
   ========================================================================== */
/*
.et_pb_module.et_pb_text h1,
.et_pb_module.et_pb_heading h1 {
  font-family: var(--ff-title);   
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-800);
  letter-spacing: -1px;
}

.et_pb_module.et_pb_text h2,
.et_pb_module.et_pb_heading h2 {
  font-family: var(--ff-title); 
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -1px;
}

.et_pb_module.et_pb_text h3,
.et_pb_module.et_pb_heading h3 {
  font-family: var(--ff-title); 
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-200);
}

.et_pb_module.et_pb_text h4,
.et_pb_module.et_pb_heading h4,
h3.et_pb_toggle_title {
  font-family: var(--ff-title); 
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.et_pb_module.et_pb_text h5,
.et_pb_module.et_pb_heading h5 {
  font-family: var(--ff-title); 
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

.et_pb_module.et_pb_text h6,
.et_pb_module.et_pb_heading h6 {
  font-family: var(--ff-title); 
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

.et_pb_module.et_pb_text p,
.et_pb_blurb .et_pb_blurb_description p,
.et_pb_module .et_pb_toggle_content p {
  font-family: var(--ff-body); 
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-400);
}
*/

/* Optional Lead Text (bh -> kd) */
/*
.kd-lead,
.et_pb_text.lead p {
  font-family: var(--ff-body); 	
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.et_pb_text.small p {
  font-family: var(--ff-body); 	
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-400); 
  display: inline-table;
  font-style: italic;
}

.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
  font-family: var(--ff-body); 
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-bottom: var(--space-s);
}
*/




/* ==========================================================================
   HEADER – Show / Hide on Scroll
   ========================================================================== */
#kd_header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#kd_header.hide-header {
  transform: translateY(-100%);
}

#kd_header.show-header {
  transform: translateY(0);
}

body.admin-bar #kd_header {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar #kd_header {
		top: 46px !important;
	}
}


.et-db #et-boc .et-l #kd_header {
	background:transparent!important;
	transition: all 0.5s ease;
  border-bottom: 1px solid rgb(from var(--c1) r g b / 0.3);
	}
	
.et-db #et-boc .et-l #kd_header.hide-header {
	opacity: 0;
	margin-top: -150px!important;
	transition: all 0.5s ease;
	}

.et-db #et-boc .et-l #kd_header.show-header {
	opacity: 1;
	margin-top: 0px!important;
	transition: all 0.5s ease;
	background:var(--c1)!important;
	}
	
.et-db #et-boc .et-l #kd_header.show-header {
	border:none
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_row {
	padding:0
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_menu__logo {
	max-width:160px;
	padding:10px 0
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_menu ul li a {
	font-size:1.3rem;
	text-transform:uppercase;
	font-weight:400;
  padding: 20px 0;
	}
	
.et-db #et-boc .et-l #kd_header ul li a {
	position: relative;
	text-decoration: none
	}
	
.et-db #et-boc .et-l #kd_header ul li a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	top: 0;
	background-color: white;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s
	}

.et-db #et-boc .et-l #kd_header ul li.current-menu-item a:before,
.et-db #et-boc .et-l #kd_header ul li a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
	}

.et-db #et-boc .et-l #kd_header li ul li a:before {
 height:0
}
/*.et-db #et-boc .et-l #kd_header.show-header ul li a {
	color:black!important
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header ul li a:before {
	background-color:var(--c3)
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header ul li.current-menu-item a:before,
.et-db #et-boc .et-l #kd_header.show-header ul li a:hover:before {
	color:var(--c3)!important
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header .et_pb_menu__logo {
	-webkit-filter: invert(100%); 
	filter: invert(100%);
	}*/
	
.et-db #et-boc .et-l #kd_header .menu-icon a {
	background:var(--c1);
	padding: 0 30px!important;
  border-left: 1px solid rgb(from var(--c1) r g b / 0.3);
	border-right: 1px solid rgb(from var(--c1) r g b / 0.3);
	font-size:1.8rem!important
	}

.et-db #et-boc .et-l #kd_header .menu-icon:hover a {
	background:var(--c1)
	}

.et-db #et-boc .et-l #kd_header.show-header .menu-icon a {
	background:var(--c1);
	padding: 0 30px!important;
  border-left: 1px solid rgb(from var(--c1) r g b / 0.3);
	border-right: 1px solid rgb(from var(--c1) r g b / 0.3);
	color:white!important;
	font-size:1.8rem!important
	}
	
.et-db #et-boc .et-l #kd_header .menu-icon a::before {
	display:none
	}

.et-db #et-boc .et-l #kd_header li ul li a:before {
 height:0
}
	
@media(min-width:var(--bp2)) and (max-width:var(--bp3)) {
	.et-db #et-boc .et-l #kd_header .et_pb_menu ul li {
		padding:0 10px
		}
}

@media (max-width: 1100px) {
    #dtb-m-menu {
        padding: 60px 0 0 0;
		margin:0;
      z-index:1
    }
	#dtb-m-menu .dtb-mobile-menu>li>a:first-of-type {
    border-top:none
  }
}




/* END */






/* ==========================================================================
   CONTENT: Hyphenation + Link-Hover
   ========================================================================== */
body {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.nohyphens {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

.nohyphens.et_pb_module {
  word-wrap: normal !important;
  overflow: visible !important;
}

p a:hover { text-decoration: underline !important; }

.whitelinks a { color: #ffffff; }
.blacklinks a { color: #000; }

/* Dateinamen unter Gallerybild entfernen */
.mfp-title { display: none !important; }

/* 3 Bilder nebeneinander on mobile */
@media only screen and (max-width: 980px) {
  .three-columns .et_pb_column { width: 33.33% !important; }
}

/* Fix Gallery-Thumb-Größe */
@media only screen and (max-width: 980px) {
  .et_pb_gallery_grid .et_pb_gallery_item img { width: 100%; }
}








/* ==========================================================================
   Animated Gradient Hero Background
   Klasse: .hero-animated-bg
   ========================================================================== */

.hero-animated-bg {
  position: relative !important;
  overflow: hidden !important;
  background-color: #000;	
}

.hero-animated-bg > .et_pb_row,
.hero-animated-bg > .et_pb_row_inner {
  position: relative;
  z-index: 1;
}

.hero-bg-blob-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-blob {
  position: absolute;
}

.hero-bg-blob:nth-child(1) {
  width: 130%;
  height: 130%;
  background: radial-gradient(
    70% 70% at 10% 20%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}

.hero-bg-blob:nth-child(2) {
  width: 110%;
  height: 110%;
  background: radial-gradient(
    60% 60% at 90% 80%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}

.hero-bg-blob:nth-child(3) {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    50% 50% at 30% 70%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}









/* ==========================================================================
   TEXT-STYLES
   ========================================================================== */
.eyebrow .et_pb_text_inner {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow .et_pb_text_inner::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background-color: #00C8FF;
  flex-shrink: 0;
}


.hero-h1 .et_pb_text_inner h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(6.4rem, 7.5vw, 10.9rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #DDE4F0;
  margin: 0;
}

.hero-h1 .et_pb_text_inner h1 .ac {
  color: #00C8FF;
}





/* ==========================================================================
   Mailpoet Styles
   ========================================================================== */

#mailpoet_form_3 form.mailpoet_form { padding: 0; font-family: 'Open Sans', sans-serif; }
#mailpoet_form_3 * { font-family: 'Open Sans', sans-serif; }
#mailpoet_form_3 .mailpoet_paragraph { margin-bottom: 1.5rem; }

#mailpoet_form_3 .mailpoet_text {
  width: 100% !important; box-sizing: border-box !important;
  padding: .75rem 1rem !important; margin: 0 !important;
  border: 1.5px solid #e2edf2 !important; border-radius: 6px !important;
  font-size: 14px !important; color: #1a2b35 !important;
  transition: border-color 200ms, box-shadow 200ms !important;
}
#mailpoet_form_3 .mailpoet_text:focus {
  border-color: #C3DF66 !important; box-shadow: 0 0 0 3px rgba(195,223,102,.3) !important; outline: none !important;
}

#mailpoet_form_3 .mailpoet_segment_label {
  font-weight: 600 !important; color: #1a2b35 !important; margin-bottom: .5rem !important; font-size: 14px !important;
}
#mailpoet_form_3 .mailpoet_checkbox_label {
  display: flex !important; align-items: flex-start !important; gap: .5rem !important;
  cursor: pointer !important; font-size: 14px !important; color: #1a2b35 !important;
  margin-bottom: .4rem !important;
}
#mailpoet_form_3 .mailpoet_checkbox {
  accent-color: #0089B1 !important;
  width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
  margin-top: 2px !important; cursor: pointer !important;
}

#mailpoet_form_3 .mailpoet_form_paragraph { font-size: 13px !important; color: #5a7080 !important; }
#mailpoet_form_3 .mailpoet_form_paragraph a { color: #0089B1 !important; }

#mailpoet_form_3 .mailpoet_submit {
  width: 100% !important; box-sizing: border-box !important;
  padding: 1rem !important; margin: .25rem 0 0 !important;
  background: #0089B1 !important; color: #fff !important;
  border: none !important; border-radius: 6px !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: background 200ms, transform 200ms !important;
  letter-spacing: .03em !important;
}
#mailpoet_form_3 .mailpoet_submit:hover { background: #00526B !important; transform: translateY(-2px) !important; }










/* ==========================================================================
   ACCORDION (aus neu)
   ========================================================================== */
.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title::before {
  content: "\33" !important;
  font-size: 20px;
}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
  display: block;
  content: "\32" !important;
  font-size: 20px;
}

/* ==========================================================================
   GALLERY 
   ========================================================================== */
.et_pb_gallery .et_pb_gallery_item { border: 3px solid #f9f5f2; }
.et_pb_gallery .et_overlay { background: #121416; }

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  box-sizing: border-box;
  transition: var(--tra-5s);
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  content: '';
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.et_pb_gallery_image:before {
  width: 60px;
  height: 1px;
  left: 100%;
}

.et_pb_gallery_image:after {
  height: 60px;
  width: 1px;
  top: 0%;
}

.et_pb_gallery_item:hover .et_overlay {
  opacity: 0.7;
}

.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after {
  opacity: 1;
  top: 50%;
  left: 50%;
}

.et_pb_inline_icon:before,
.et_overlay.et_pb_inline_icon:before {
  content: '';
}








/* ==========================================================================
   FOOTER 
   ========================================================================== */
.kd_footer_bottom .et_pb_column {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
}

.kd_footer_bottom .et_pb_image {
  width: 20px;
  max-width: 20px;
  margin-top: 3px;
}

.kd_footer_bottom .et_pb_menu__menu { padding: 0; }
.kd_footer_bottom .et_pb_module { width: 100%; }

.kd_footer_menu .et_pb_menu__menu {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

/* FOOTER KEIN HAMBURGER MENU */
.et-l.et-l--footer .et_pb_menu__menu { display: block !important; }
.et-l.et-l--footer .et_mobile_nav_menu { display: none !important; }

/* Footer-Menü linksbündig auf tablet und Mobile */
@media only screen and (max-width: 980px) {
  .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   KUDO SECTION (aus alt behalten)
   ========================================================================== */
.kd-heart::after {
  content: "\e089";
  font-family: 'ETmodules';
  color: var(--kdac);
}