/*
	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 */
}


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:          #9A8C7A; 
  --c1-100: hsl(from var(--c1) h s calc(l + 40));
  --c1-200: hsl(from var(--c1) h s calc(l + 30));
  --c1-300: hsl(from var(--c1) h s calc(l + 20));
  --c1-400: hsl(from var(--c1) h s calc(l + 10));
  --c1-500: var(--c1);
  --c1-600: hsl(from var(--c1) h s calc(l - 10));
  --c1-700: hsl(from var(--c1) h s calc(l - 20));
  --c1-800: hsl(from var(--c1) h s calc(l - 30));
  --c1-900: hsl(from var(--c1) h s calc(l - 40));
	
  --c2:          #FA9906;

  --c3:          #1E1A17; /* charcoal */
  --c4:          #2A2420; /* charcoal-mid */
  --c5:          #3E3530; /* charcoal-light */
  --c6:          purple;

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

  --kdac:        #c9dd2e;  /* KD Accent */
	
  --ha1:		 #9A8C7A;		/* hero-animated-bg farbe 1 */
  --ha2:		 #000000;		/* 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;
	
  --dur-slow:    500ms;
  --ease-stone:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* 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-h6:    calc(1.6rem + 0.4rem * 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;
  --lh-h5:    1.25;
	
  /* 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,
.quote p {
  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-h6);
  line-height: var(--lh-h6);
}


/*.et_pb_module.et_pb_text p,*/
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 */
.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-600);
  display: inline-table;
}

.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);
}


/* mach es mit Divi editierbar */
.et_pb_module.divi-edit p,
.et_pb_module.divi-edit h1,
.et_pb_module.divi-edit h2,
.et_pb_module.divi-edit h3,
.et_pb_module.divi-edit h4,
.et_pb_module.divi-edit h5,
.et_pb_module.divi-edit h6,
.et_pb_module.divi-edit.et_pb_blurb_description p,
.et_pb_module.divi-edit ol li,
.et_pb_module.divi-edit ul li
 {
  font-size: inherit !important;
}



/* ==========================================================================
   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-700)!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;
	}


@media (min-width: 980px) and (max-width: 1280px) {
  .et-db #et-boc .et-l #kd_header .et_pb_menu ul li a {
    font-size: 1.1rem;
  }
}
	
.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;
	bottom: 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%
  );
}









/* ==========================================================================
   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: '';
}




/* ==========================================================================
   Buttons 
   ========================================================================== */

/* .et_pb_button,
.et_pb_button.submit {
  font-size: var(--fs-btn)!important;
  font-weight: var(--fw-600);
  color: var(--c1-900)!important;
  padding: var(--btn-p-t-b) var(--btn-p-l-r)!important;
  border: 2px solid var(--c1-900)!important;
  transition: var(--tra-5s);
  border-radius: 0;
  letter-spacing: 0.05rem;
}

.et_pb_button::after {
  display: none;
}


.et_pb_button:hover,
.et_pb_button.submit:hover  {
  background: var(--c1-900)!important;
  border-color: var(--c1-900)!important;
  color: var(--c1-100)!important;
}
*/

/* BTN 1 — Primary (amber gefüllt) */
.et_pb_button.kd_btn1 {
  background: var(--c2)!important;
  color: var(--c3)!important;
  border-color: var(--c2)!important;
}

.et_pb_button.kd_btn1:hover {
  background: var(--c1-700)!important;
  border-color: var(--c1-700)!important;
  color: var(--c3)!important;
  box-shadow: 0 4px 24px rgb(from var(--c2) r g b / 0.28);
}

/* BTN 2 — Outline Light (für dunkle Hintergründe) */
.et_pb_button.kd_btn2 {
  background: transparent!important;
  color: var(--c1-100)!important;
  border-color: rgb(from var(--c1-100) r g b / 0.5)!important;
}

.et_pb_button.kd_btn2:hover {
  background: rgb(from var(--c1-100) r g b / 0.1)!important;
  border-color: var(--c1-100)!important;
  color: var(--white)!important;
}



/* BTN aus einer Group erstellen */
.et_pb_group.kd-group-btn .et_pb_icon {
  transition: var(--tra-5s);
}

.et_pb_group.kd-group-btn:hover .et_pb_text,
.et_pb_group.bkd-group-btn:hover .et_pb_icon,
.et_pb_group.kd-group-btn:hover .et_pb_icon .et_pb_icon_wrap .et-pb-icon   { 
  /* background: var(--c1-200); */
  border-color: var(--c1-200);
  transition: var(--tra-5s);
  box-shadow: none;
  font-size: var(-fs-small)!important;
  color: var(--c2) !important;
  cursor: pointer;
  border-radius: 50px;
  font-weight: var(--fw-800)!important;
}

.et_pb_group.kd-group-btn:hover .et_pb_icon { 
  transform: translateX(5px);
  transition: var(--tra-5s);
}








/* ==========================================================================
   Timeline 
   ========================================================================== */

.timeline {
	border-left: 1px solid var(--gold);
	padding-left: 5rem;
	margin-left: 2rem;
}

.timeline .timeline-item.et_pb_module.et_pb_text h4 {
	font-weight: var(--fw-400);
	margin-top:-1rem;
}

.timeline .timeline-item.et_pb_module.et_pb_text p:first-of-type {
	font-weight: var(--fw-600);
	color: var(--gold);
	font-style: italic;
}

.timeline .timeline-item.et_pb_module.et_pb_text p:last-of-type {
	padding-bottom:3rem;
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
	margin-top:-1rem;
}

.timeline  .timeline-item::before {
	content: '';
    position: absolute;
    left: -5.5rem;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px var(--light);
}







/* ==========================================================================
   Hero Section 
   ========================================================================== */

.hero__overline {
  font-size: var(--fs-small);
  font-weight: var(--fw-600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c2);
  margin-bottom: var(--space-s);
}


.et_pb_module.hero__title h1 {
  font-size: clamp(2.75rem, 8vw, 8.8rem) !important;
}



.hero__sub {
  font-family: var(--ff-title);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--c1-300);
}

.hero-scroll-line {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%       { transform: scaleY(0.6); opacity: 0.5; }
}



























/* ==========================================================================
   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);
}