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

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


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



#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:          #2A2B39; 
  --c2:          #2ea3f2;

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

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

  --kdac:        #c9dd2e;  /* KD Accent */
	
  --ha1:		 #009fe3;		/* 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;

  /* 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-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-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-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-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.et_pb_module.et_pb_text h5,
.et_pb_module.et_pb_heading h5 {
  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-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-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

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

.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
  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 BLOB ANIMATION ───────────────────── */
--blob-color-1: rgba(192,57,43,.55);   /* Hauptblob – CI-Rot, kräftig */
--blob-color-2: rgba(192,57,43,.35);   /* Mittelblob – CI-Rot, weicher */
--blob-color-3: rgba(160,40,30,.30);   /* Akzentblob – etwas dunkler */
--blob-blur-1:  48px;
--blob-blur-2:  56px;
--blob-blur-3:  64px;
--blob-col-w:   500px;                 /* Breite der Foto-Spalte (muss mit grid-template-columns übereinstimmen) */

.hero .hero-bg-blob-wrap {
  position: absolute;
  inset: 0;
  right: var(--blob-col-w);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero .hero-bg-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.hero .hero-bg-blob:nth-child(1) {
  width: 80%; height: 140%;
  top: -20%; left: -10%;
  background: radial-gradient(ellipse at center, var(--blob-color-1) 0%, transparent 70%);
  filter: blur(var(--blob-blur-1));
}

.hero .hero-bg-blob:nth-child(2) {
  width: 60%; height: 100%;
  top: 10%; left: 30%;
  background: radial-gradient(ellipse at center, var(--blob-color-2) 0%, transparent 65%);
  filter: blur(var(--blob-blur-2));
}

.hero .hero-bg-blob:nth-child(3) {
  width: 50%; height: 80%;
  top: 40%; left: 5%;
  background: radial-gradient(ellipse at center, var(--blob-color-3) 0%, transparent 60%);
  filter: blur(var(--blob-blur-3));
}








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