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


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

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 */
  --green:       #4CA87A;
  --lightgreen:  #E6F2EC;
  --dark:        #1F3D36;
  --lightbrown:  #EADFC8;
  --brown:       #7A6A4F;
  --white:       #ffffff;
  --black:       #000000;

  /* KD Accent (aus alt) */
  --kdac: #88724e;

  /* 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 (aus neu, bh -> kd)
   ========================================================================== */
.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);
}

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

/* ==========================================================================
   MENU: Mobile-Menü-Logik 
   ========================================================================== */
/* change hamburger icon to x when mobile menu is open */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
  content: '\4d';
}

/* adjust the new toggle element which is added via jQuery */
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: 50px;
  height: 100%;
  padding: 0px !important;
  max-height: 50px;
  border: none;
  position: absolute;
  right: 10px;
  top: 0px;
  z-index: 999;
  background-color: transparent;
}

/* keep everything positioned properly */
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;
}

/* remove default background color from menu items that have children */
.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 submenu by default */
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 submenu when toggled open */
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;
}

/* toggle icon position/transparency */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
  text-align: center;
  opacity: 1;
}

/* submenu toggle icon when closed */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
  top: 10px;
  position: relative;
  font-family: "ETModules";
  content: '\33';
  color: var(--dark);
}

/* submenu toggle icon when open */
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
  content: '\32';
}

@media (max-width: 1094px) {
  .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: 1.8rem !important;
    font-weight: 300 !important;
    line-height: 3rem;
    text-align: left;
  }

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

  .mobile_menu_bar:before {
    transition: all .4s ease;
    transform: rotate(0deg);
    display: block;
  }

  .mobile_nav.opened .mobile_menu_bar::before {
    transition: all .4s ease;
    transform: rotate(90deg);
    display: block;
  }

  .et_pb_menu .et_mobile_menu,
  .et_pb_menu .et_mobile_menu ul {
    list-style: none;
    text-align: left;
  }

  .et_pb_menu .et_mobile_menu {
    top: 100%;
    padding: 5%;
  }
}

@media only screen and (min-width: 1095px) {
  .et_pb_menu ul li > a { color: var(--lightgreen) !important; }

  .et_pb_menu ul li.current-menu-item > a { color: var(--green) !important; }

  .et_pb_menu ul li.current-menu-item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    align-items: center;
    width: 6px;
    height: 6px;
    left: calc(50% - 5px);
    background: var(--green);
  }

  .et_pb_menu .et_pb_menu__menu > nav > ul > li { align-items: center; }

  .et_pb_menu .et_pb_menu__menu > nav > ul > li:hover::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    align-items: center;
    width: 6px;
    height: 6px;
    left: calc(50% - 5px);
    background: var(--green);
  }
}

/* Header-State */
.et-db #et-boc .et-l #kd_header {
  background: none !important;
  transition: all 0.5s ease;
}

.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: rgba(31, 61, 54, 1) !important;
}

.et_pb_menu .et_pb_menu__menu > nav > ul > li > a:hover { opacity: 1 !important; }

.et_pb_menu .et_pb_menu__menu > nav > ul > li {
  padding-left: 9px;
  padding-right: 9px;
}

@media (max-width: 1095px) {
  .et_pb_menu .et_pb_menu__menu { display: none; }
  .et_pb_menu .et_mobile_nav_menu { display: block; }
}

@media (min-width: 1096px) {
  .et_pb_menu .et_mobile_nav_menu { display: none; }
}

/* BOOK NOW */
@media only screen and (min-width: 1095px) {
  li.book-now a {
    padding: 12px 15px !important;
    border-radius: 3px;
    transition: var(--tra-3s);
    background-color: var(--green) !important;
    color: white !important;
    align-items: center !important;
  }

  li.book-now a:hover { background-color: var(--brown) !important; }
}

@media (max-width: 1094px) {
  .et_pb_menu .et_mobile_menu li.book-now a {
    padding: 10px 15px !important;
    border-radius: 5px;
    transition: var(--tra-3s);
    background-color: var(--green) !important;
    color: white !important;
    align-items: center !important;
    text-align: center;
  }

  .et_pb_menu .et_mobile_menu li.book-now a:hover { background-color: var(--brown) !important; }
}

/* ==========================================================================
   BUTTONS 
   ========================================================================== */
.et_pb_button,
.et_pb_button.submit {
  font-size: var(--fs-btn);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  padding: var(--btn-p-t-b) var(--btn-p-l-r) !important;
  border: none !important;
  transition: var(--tra-3s);
}

.et_pb_button:hover,
.et_pb_button.submit:hover {
  font-size: var(--fs-btn) !important;
  text-transform: uppercase;
  padding: var(--btn-p-t-b) var(--btn-p-l-r) !important;
  border: none;
  background: var(--dark) !important;
  color: var(--white) !important;
}

.et_pb_button::after { display: none; }

.et_pb_button.green { background: var(--green); color: var(--white) !important; }
.et_pb_button.brown { background: var(--brown); color: var(--white) !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: '';
}

/* ==========================================================================
   SLIDE BG 
   ========================================================================== */
.bg-slider {
  position: relative;
  min-height: 65vh;
  overflow: hidden;
}

.bg-slider::before,
.bg-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1.2s ease;
  z-index: 0;
}

.bg-slider::before {
  background-image: var(--bg-current);
  transform: translateX(0);
}

.bg-slider::after {
  background-image: var(--bg-next);
  transform: translateX(100%);
}

.bg-slider.is-sliding::before { transform: translateX(-100%); }
.bg-slider.is-sliding::after  { transform: translateX(0); }

.bg-slider.is-reset::before,
.bg-slider.is-reset::after {
  transition: none !important;
}

.bg-slider > * {
  position: relative;
  z-index: 1;
}

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

/* END */