/*
  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: 5.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
*/

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

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

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

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

:root {
  /*	GLOBAL COLORS
  ============================================================================== */
  --blue:  #1a59ff;
  --dark:  #172c4e;
  --light: #F9F5F1;
  --white: #ffffff;
  --black: #000000;

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

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

  /*	FONT SIZES
  ============================================================================== */
  --fs-body: 1.6rem; /* 16px – bewusst stabil */

  --fs-small: calc(1.1rem + 0.1rem * var(--fluid)); /* 11px → 12px */
  --fs-btn:   calc(1.3rem + 0.1rem * var(--fluid)); /* 13px → 14px */
  --fs-lead:  calc(1.7rem + 0.3rem * var(--fluid)); /* 17px → 20px */

  --fs-h6:    calc(1.6rem + 0.2rem * var(--fluid)); /* 16px → 18px */
  --fs-h5:    calc(1.8rem + 0.4rem * var(--fluid)); /* 18px → 22px */
  --fs-h4:    calc(2.2rem + 0.6rem * var(--fluid)); /* 22px → 28px */
  --fs-h3:    calc(2.6rem + 1.0rem * var(--fluid)); /* 26px → 36px */
  --fs-h2:    calc(3.2rem + 1.6rem * var(--fluid)); /* 32px → 48px */
  --fs-h1:    calc(4.0rem + 2.4rem * var(--fluid)); /* 40px → 64px */

  /*	FONT WEIGHTS
  ============================================================================== */
  --fw-200: 200; /* fein */
  --fw-400: 400; /* normal */
  --fw-600: 600; /* bold */
  --fw-800: 800; /* bolder */

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

  --lh-h1: 1.10;
  --lh-h2: 1.15;
  --lh-h3: 1.20;
  --lh-h4: 1.28;
  --lh-h5: 1.35;
  --lh-h6: 1.40;

  /*	SPACING FLUID
  ============================================================================== */
  --space-xs:  calc(0.8rem + 0.4rem * var(--fluid)); /*  8 → 12px */
  --space-s:   calc(1.2rem + 0.8rem * var(--fluid)); /* 12 → 20px */
  --space-m:   calc(2.0rem + 1.2rem * var(--fluid)); /* 20 → 32px */
  --space-l:   calc(3.2rem + 1.6rem * var(--fluid)); /* 32 → 48px */
  --space-xl:  calc(4.8rem + 2.4rem * var(--fluid)); /* 48 → 72px */
  --space-xxl: calc(7.2rem + 3.6rem * var(--fluid)); /* 72 → 108px */

  --btn-p-t-b: calc(1.4rem + 0.4rem * var(--fluid)); /* 14 → 18px */
  --btn-p-l-r: calc(2.8rem + 0.4rem * var(--fluid)); /* 28 → 32px */
}

/*	UTILITIES / BASE IMPROVEMENTS
============================================================================== */

/* Autom. Silbentrennung (global) */
body {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Opt-out: keine Silbentrennung (statt generisch .nohyphens) */
.kd-nohyphens,
.kd-nohyphens * {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}

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

/* Underline Links (sauber scoped, nicht global für jede p-Umgebung) */
.et_pb_text p a:hover,
.et_pb_toggle_content p a:hover,
.et_pb_blurb_description p a:hover {
  text-decoration: underline !important;
}

/* Link-Farb-Utilities (kd-namespace) */
.kd-whitelinks a { color: var(--white) !important; }
.kd-blacklinks a { color: var(--black) !important; }

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

/* 3 Bilder nebeneinander auf Tablet/Mobile (opt-in per Klasse) */
@media only screen and (max-width: 980px) {
  .kd-three-columns .et_pb_column {
    width: 33.333% !important;
  }
}

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

/*	MOBILE MENU CSS
============================================================================== */

/* Theme Builder Header Container nach vorne (Divi) */
.et-l--header {
  position: relative;
  z-index: 99999;
}

/* Menu-Modul selbst nach vorne */
.et-l--header .et_pb_menu,
.et_pb_menu {
  position: relative;
  z-index: 99999;
}

/* Mobile Dropdown UL nach vorne */
.et_pb_menu .et_mobile_menu {
  position: absolute; /* wichtig für z-index im Kontext */
  z-index: 100000;
}

.et_pb_module .et_mobile_menu {
  width: calc(100% + 10rem);
  left: -5rem;
  margin-top: 1rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  box-shadow: 0 20px 30px -6px rgba(112,111,111,.15);
}

.et_pb_menu .et_mobile_menu li a {
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-600) !important;
  line-height: 4rem;
  text-align: left;
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
}

.mobile_menu_bar:before {
  transition: var(--tra-5s);
  transform: rotate(0deg);
  display: block;
}

/* rotate the Divi Menu icon on click */
.mobile_nav.opened .mobile_menu_bar::before {
  transition: var(--tra-5s);
  transform: rotate(90deg);
  display: block;
}



/*	AKKORDEON CSS Styling
============================================================================== */
.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 CSS
============================================================================== */
.et_pb_gallery .et_pb_gallery_item {
  border: 3px solid white;
}

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

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

/* Divi setzt teils Inline-Icon Marker: neutralisieren */
.et_pb_inline_icon:before,
.et_overlay.et_pb_inline_icon:before {
  content: '';
}

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

.et_pb_module.et_pb_text h2,
.et_pb_module.et_pb_heading h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

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

.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 */
.kd-lead,
.et_pb_text.lead p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

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


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