/*
	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.0
	Tag: Child Theme, Knolle Biz 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==========================================================================
   FONT SECTION
   ========================================================================== */



/* ===================================
   1) Variable Font einbinden
   =================================== */
@font-face {
  font-family: 'Satoshi Variable';
  src: url('/wp-content/uploads/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/Satoshi-Variable.woff') format('woff');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi Variable';
  src: url('/wp-content/uploads/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/Satoshi-VariableItalic.woff') format('woff');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ===================================
   2) Globaler Font-Reset (ohne Icons)
   =================================== */

:root {
  --et_global_heading_font: 'Satoshi Variable', sans-serif !important;
  --et_global_body_font: 'Satoshi Variable', sans-serif !important;
}



/* Satoshi für alle Textelemente – Pseudo-Elemente (:before/:after) NICHT überschreiben */
html, body, body *:not(:before):not(:after) {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-synthesis: none;
}

/* ===================================
   3) Icon-Fonts zurückgeben (Divi, FontAwesome, Bloom)
   =================================== */

/* Divi ET-Icons */
.et-pb-icon,
.et_pb_social_icon a:before,
.et-menu .menu-item-has-children > a:after,
.et_overlay:before,
.mfp-close, .et-close-modal, .et_pb_close_modal {
  font-family: ETmodules !important;
}

/* Font Awesome */
.fa, .fas, .far, .fab,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free","Font Awesome 6 Free","Font Awesome 5 Brands","Font Awesome 6 Brands" !important;
}

/* Bloom Close-X & Icons */
.et_bloom_close_button,
.et_bloom_close_button:before,
.et_bloom_close_button:after {
  font-family: 'ET-Bloom' !important;
}

[class^="et_bloom_"]:before,
[class*=" et_bloom_"]:before,
[class^="et_bloom_"]:after,
[class*=" et_bloom_"]:after {
  font-family: 'ET-Bloom' !important;
}



/* ==========================================
   Bloom Texte global auf Satoshi setzen
   ========================================== */
.et_bloom_form_container,
.et_bloom_form_container *:not(i):not(.et_bloom_close_button):not(.et_bloom_close_button:before) {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-synthesis: none;
}

/* Headlines (Bloom überschreibt hart mit Georgia) */
.et_bloom_form_container h1,
.et_bloom_form_container h2,
.et_bloom_form_container h3,
.et_bloom_form_container h4,
.et_bloom_form_container h5,
.et_bloom_form_container h6,
.et_bloom_form_container strong {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Formularfelder */
.et_bloom_form_container input,
.et_bloom_form_container textarea,
.et_bloom_form_container select,
.et_bloom_form_container label {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Buttons */
.et_bloom_form_container .et_bloom_submit_subscription,
.et_bloom_form_container button,
.et_bloom_form_container .et_bloom_button {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600; /* oder was du als Button-Weight willst */
}

/* Bloom-Button konsequent auf Satoshi umstellen */
.et_bloom_form_container .et_bloom_button,
.et_bloom_form_container .et_bloom_submit_subscription,
.et_bloom_form_container .et_bloom_button *,
.et_bloom_form_container .et_bloom_submit_subscription *,
/* gängige Text-Wrapper im Button */
.et_bloom_form_container .et_bloom_button_text,
.et_bloom_form_container .et_bloom_button_text_color_light,
.et_bloom_form_container .et_bloom_button_text_color_dark {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600; /* oder 700, wenn du mehr Punch willst */
  font-synthesis: none;
}

/* Bloom: Feld-Titel (z. B. "Sprache") */
.et_bloom_form_container .et_bloom_custom_field_options_title {
  font-family: 'Satoshi Variable', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600; /* optional: Bold, damit es wie eine Section-Überschrift wirkt */
}



/* ==========================================================================
   ROOT SECTION
   ========================================================================== */


* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

#page-container {overflow:hidden}
 
a[href^="#"] {
	cursor:pointer;
}

:root {
	--kdac: #ff9900;

	--c3: #ff9900; /* Orange */
	--c4: #00a3bf; /* Hellblau */
	
	--c5: #22b29f; /* Helltürkis */
	--c6: #1c3e4f; /* Dunkeltürkis */
	
	--c7: #b2bbde; /* Hellblau */
	--c8: #f1f1f1; /* lightgrey */
	
	--bp1:767px; /* breakpoint mobile */
	--bp2:980px; /* breakpoint tablet */
	--bp3:1280px; /* breakpoint narrow screen */
}


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

.kd_align_center_section,
.kd_align_center_row .et_pb_column,
.kd_align_center_module {
   display: flex;
   flex-direction: column;
   justify-content: center;
}


.kd_align_center_section_2,
.kd_align_center_row_2 .et_pb_column,
.kd_align_center_module_2 {
   display: flex;
   flex-direction: row;
   align-items: center;
	flex-wrap:wrap;
}

/* ==========================================================================
   MENU SECTION
   ========================================================================== */

/* Active-Status im Submenü */
/*
.current_page_item a span{
  color: var(--c3);
}
*/
/* END Active-Status im Submenü */



/* Schriftgröße Menü anpassen 
    @media(min-width:980px) and (max-width:1280px){
        #top-menu li {
            padding-right: 14px;
        }

        ul#top-menu li a {
            font-size: 14px;
        }
    }
/* END Schriftgröße Menü anpassen */



/* Menübreite anpassen für Breakpoint*/
@media(min-width:981px) and (max-width:1280px){
#logo {
    height: 38% !important;
}

div#et-top-navigation {
    padding-left: 0 !important;
}

.container, .container.et_menu_container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

#top-menu li {
    padding-right: 14px;
}

ul#top-menu li a {
    font-size: 14px;
}
}
/* END Menübreite anpassen für Breakpoint*/



/* Avoid jumping Menu */
/*
    @media only screen and (min-width: var(--bp2) ){
    body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {
        top: 120px !important;
    }
    }
*/    
/* END Avoid jumping */



/* Telefonnummer im TOP-Header näher an Text davor */
    @media only screen and (max-width:767px) {
        #db-info-text {
            margin-right:0 !important;
        }

        #et-info { float:right !important; 
        }
    }
/* END Telefonnummer näher an Text davor */



/* Hochgestellt */
	sup {
		font-size:10px !important;
	}
/* END Hochgestellt */



/* GTranslate Dropdown schmaler machen */
/* GTranslate Sprachcode im Secondary Menu wirklich schmal */
#top-header #et-secondary-menu .menu > li.menu-item-gtranslate > a {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: 2.8em !important; /* genug für DE/EN/ES */
  padding: 0 4px !important;   /* minimaler horizontaler Abstand */
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Dropdown-Menü schmal */
#top-header #et-secondary-menu .menu-item-gtranslate .sub-menu {
  width: auto !important;
  min-width: 2.8em !important;
  text-align: center !important;
}

/* Sprachcode-Links im Dropdown */
#top-header #et-secondary-menu .menu-item-gtranslate .sub-menu a {
  padding: 4px 0 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Sprachcode-Button im Secondary Menu */
#top-header #et-secondary-menu .menu > li.menu-item-gtranslate > a {
  position: relative;
  padding: 0 20px 0 4px !important; /* mehr Platz für Pfeil */
  white-space: nowrap;
}

/* Dropdown-Pfeil sauber platzieren */
#top-header #et-secondary-menu .menu > li.menu-item-gtranslate.menu-item-has-children > a:after {
  position: absolute !important;
  right: 6px; /* mehr Abstand vom Text */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0 !important;
  pointer-events: none;
  font-family: ETmodules !important;
}
/* END GTranslate Dropdown schmaler machen */




/* Proper Collapsable Mobile Menu */
/* Style the icon's placeholder */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
  width: 44px;
  height: 100%;
  padding: 0px !important;
  max-height: 44px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 999;
  background-color: transparent;
  border-bottom: 0;
  text-align: center;
}

ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
  position: relative;
}

.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent;
}

/* Hide the Sub-menu */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}

/* Show the sub-menu when the + icon is clicked */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}

/* Create the opening/closing icon using the SVG Icons */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons {
  top: 10px;
  position: relative;
}

/* Hide the closing icon if the sub-menu is not open */
ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon {
  display: none;
}

/* Hide the opening icon if the sub-menu is open */
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon {
  display: none;
}

/* Hintergrund und Farbe für + und - Icons */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-open-icon,
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-close-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-open-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-close-icon {
  background-color: #ff9900;
  color: white !important;
  fill: white !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
}






/* ==========================================================================
   CONTENT SECTION
   ========================================================================== */


	/*  Dynamische Fontgrößen  */
	.et_pb_module.et_pb_text h1, 
	.header-content h1, 
	.et_pb_column .et_pb_module h1, 
	h1, 
	.et_pb_module.et_pb_text.h1_substitute p {
		font-size: clamp(3.6rem, 5vw, 6rem);
		line-height: clamp(4rem, 6vw, 7rem);
		}

	.et_pb_module.et_pb_text h2, 
	.header-content h2, 
	.et_pb_column .et_pb_module h2, 
	.et_pb_de_mach_content h2, 
	h2,
	.et_pb_module.et_pb_text.h2_substitute p {
		font-size: clamp(2.4rem, 5vw, 3.8rem);
		line-height: clamp(3rem, 5vw, 4rem);
		}

	.et_pb_module.et_pb_text h3, 
	.header-content h3, 
	.et_pb_column .et_pb_module h3,
	h3,
	.et_pb_module.et_pb_text.h3_substitute p {
		font-size: clamp(2.2rem, 5vw, 3rem);
		line-height: clamp(2.6rem, 5vw, 3.6rem);
		}

	.et_pb_module.et_pb_text h4, 
	.header-content h4, 
	.et_pb_column .et_pb_module h4, 
	h4 {
		font-size: clamp(2.2rem, 5vw, 2.4rem);
		line-height: clamp(2.2rem, 5vw, 3.8rem);
		}

	.et_pb_module.et_pb_text h5, 
	.header-content h5, 
	.et_pb_column .et_pb_module h5, 
	h5 {
		font-size: clamp(2rem, 5vw, 2.2rem);
		line-height: clamp(2.2rem, 5vw, 3rem);
		}

	.et_pb_module.et_pb_text h6, 
	.header-content h6, 
	.et_pb_column .et_pb_module h6, 
	h6 {
		font-size: clamp(1.8rem, 5vw, 2.0rem);
		line-height: clamp(2rem, 5vw, 2.5rem);
		}

	.et_pb_module.et_pb_text p, 
	.et_pb_module.et_pb_text span, 
	.et_pb_module.et_pb_text li,
	.et_pb_blurb_description p,
	.et_pb_de_mach_content p, 
	.et_pb_de_mach_content li,
	.et_pb_de_mach_content,
	.dmach-acf-item-content p,
	.dmach-acf-value p,
	.dmach-acf-value span,
	.dmach-acf-value li {
		font-size: clamp(1.8rem, 5vw, 2rem);
		line-height: clamp(2.4rem,5vw,3rem);
		}

	.et_pb_module.et_pb_text p a {
		}

	/* END Dynamische Fontgrößen  */



/* autom. Silbentrennung aktivieren */
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;
}
/* END autom. Silbentrennung aktivieren */


/*Underline Links*/
    p a:hover {
        text-decoration:underline !important;
    }
/*END Underline Links*/



/*White Links*/
    .whitelinks a {
        color:#ffffff;
    }

    .blacklinks a {
        color:#000;
    }
/*END White Links*/



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



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


/* Person Modul mit Bild oben 
.kd_person .et_pb_team_member_image {
  margin-right: auto !important;
} 
.kd_person {
  display: block !important;
}

.kd_person .et_pb_team_member_description p, .kd_person.et_pb_module.et_pb_text_align_center {
    text-align: left !important;
}







/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */


	/* oberer Footer Teil */
	.kd_footer {}
	/* End oberer Footer Teil */


	/* Footer Menu und KD-Icon stylen */
		.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%
		}
	/* END Footer Menu und KD-Icon stylen */



	/* Footer Menü Schriftgröße */
		.kd_footer_menu .et_pb_menu__menu {
		font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
		}
	/* END Footer Menü Schriftgröße */



	/*  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;
		}
	/* END FOOTER KEIN HAMBURGER MENU */



	/* 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;
		}
	}
	/* Footer-Menü linksbündig auf tablet und Mobile */


	/* Quicklinks im Footer - h4 */
		.quicklinks h4 {
		}







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