/*
 Theme Name:     Kreativ
 Theme URI:      http://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Kreativ Webagentur KlG
 Author URI:     https://www.kreativ.swiss
 Template:       Divi
 Version:        1.0.2
*/
 
@import url("../Divi/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

/*========== Event list of all events ==========*/
/* --- DEFAULT: Desktop & Tablet (≥ 600px) --- */
.et_pb_ajax_pagination_container .et_pb_post.tribe_events {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 16px !important;
	margin-bottom: 30px !important;
}

/* IMAGE: 125x250px by default */
.et_pb_ajax_pagination_container .et_pb_post.tribe_events .entry-featured-image-url {
	width: 250px !important;
	height: 150px !important;
	flex: 0 0 250px !important;
	display: block !important;
	overflow: hidden !important;
}

.et_pb_ajax_pagination_container .et_pb_post.tribe_events .entry-featured-image-url img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 8px !important;
}

/* TEXT: title + content stacked vertically */
.et_pb_ajax_pagination_container .et_pb_post.tribe_events .text-column-fake-wrapper {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	width: 100% !important;
}

.et_pb_ajax_pagination_container .et_pb_post.tribe_events h2.entry-title,
.et_pb_ajax_pagination_container .et_pb_post.tribe_events .post-content {
	margin: 0 0 5px 0 !important;
	width: 100% !important;
	display: block !important;
}

.et_pb_ajax_pagination_container .et_pb_post.tribe_events h2.entry-title a {
	font-size: 1.3em !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* --- Mobile (< 600px): 56x56 square image --- */
@media (max-width: 815px) {
	.et_pb_ajax_pagination_container .et_pb_post.tribe_events {
		flex-direction: row !important; /* stay horizontal */
		align-items: flex-start !important;
	}

	.et_pb_ajax_pagination_container .et_pb_post.tribe_events .entry-featured-image-url {
		width: 100px !important;
		height: 100px !important;
		flex: 0 0 100px !important;
	}

	.et_pb_ajax_pagination_container .et_pb_post.tribe_events .entry-featured-image-url img {
		width: 100px !important;
		height: 100px !important;
		object-fit: cover !important;
	}
}

/* Flex container: align image and content vertically */
.et_pb_ajax_pagination_container .et_pb_post.tribe_events {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important; /* This is key */
	gap: 16px !important;
	margin-bottom: 30px !important;
}

/* Optional: ensure text block is not taller than needed */
.et_pb_ajax_pagination_container .et_pb_post.tribe_events .text-column-fake-wrapper {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important; /* Vertically center title + text inside block */
	flex: 1 !important;
	width: 100% !important;
}


/*--- Icons styling for events list ---*/
/*---------- Events page layout ----------*/
.event-date {
	position: relative;
	padding-left: 30px;
	line-height: 1.4;
	min-height: 20px; /* ensures the icon has room */
	display: flex;
	align-items: center; /* align text and icon baseline if inline is too tricky */
}

.event-date:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-59%);
	width: 20px;
	height: 20px;
	background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/calendar-red.webp');
	background-size: contain;
	background-repeat: no-repeat;
}
.event-venue {
	position: relative;
	padding-left: 30px;
	line-height: 1.4;
	min-height: 20px; /* ensures the icon has room */
	display: flex;
	align-items: center; /* align text and icon baseline if inline is too tricky */
}

.event-venue:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-51%);
	width: 20px;
	height: 20px;
	background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/location-red.webp');
	background-size: contain;
	background-repeat: no-repeat;
}

/* --- Make the whole article clickable ---*/
.et_pb_ajax_pagination_container .et_pb_post.tribe_events {
	position: relative;
	cursor: pointer;
}

.et_pb_ajax_pagination_container .et_pb_post.tribe_events::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.et_pb_ajax_pagination_container .et_pb_post.tribe_events * {
	position: relative;
	z-index: 2;
}

/*Style events list*/
.et_pb_ajax_pagination_container .et_pb_post.tribe_events {
	background: rgb(235, 235, 235);
	border-radius: 12px;
	padding: 20px;
}
/*Remove padding from featured image*/
.et_pb_ajax_pagination_container .et_pb_post.tribe_events .entry-featured-image-url {
	margin-bottom:0px!important;
}
/*Remove read more from events list*/
.read-more {
	display:none!important;
}
/*Adjust padding for events date on events list*/
.event-date {
	padding-bottom:5px!important;
}

/*---------- Kontakt button ----------*/
/*Projekt Anfragen CTA*/
@media only screen and (min-width: 980px) {
.menu-contact {
	padding:0!important;
	border-radius:5px!important;
	border-width:1px!important;
	border-color:#61652F!important;
	transition:0.3s;
	/*border:solid 1px!important;*/
	background-color:#61652F!important;
	color:#ffffff!important;
	/*font-family:'undefined'!important;*/
	font-size:18px!important;
	font-weight:500!important;
	/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 6s infinite;
	animation-delay:1.5s;*/
}
.menu-contact a {
	color:#ffffff!important;
	padding: 10px 25px 10px 25px!important;
	border:solid 1px!important;
	border-radius:5px!important;
}
#main-header.et-fixed-header .menu-contact a {
	color:#ffffff!important;
	/*border:solid 1px!important;*/
	border-radius:5px!important;
}
#main-header.et-fixed-header li.current-menu-item.menu-contact a {
	color:#ffffff!important;
	/*border:solid 1px!important;*/
}
#top-menu-nav .menu-contact a:hover {
	background:#ffffff!important;
	color:#61652F!important;
	border:solid 1px!important;
	/*border-width:1px!important;*/
	border-radius:5px!important;
	opacity:1!important;
}
	}

/*========== Custom language switcher via header.php ==========*/
/* Base styling */
.menu-language-switcher {
  position: relative;
  list-style: none;
}

/* Language dropdown hidden by default */
.language-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 999;
    background: #D9D9D9 !important;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    min-width: 35px;
    left: 0px;
    right: 22px;
}

#top-menu li a .language-dropdown a {
  	display: block;
  	padding: 6px 10px;
  	text-decoration: none;
  	color: #333;
	background: #D9D9D9!important;
	border: 1px solid #D9D9D9;
	border-radius: 5px;
	min-width: 35px;
	left: 0px;
	right: 22px;
}

.language-dropdown a:hover {
  background: #D9D9D9;
	color:#61652F!important
}

/*Chaneg font size of language selector*/
.lang-selector-text {
	font-size:12px!important;
  	font-weight: bold;
  	font-size: 14px;
  	color: #333;
  	padding: 9px 8px;
	padding-left:10px;
  	display: block;
  	text-decoration: none;

}

/* Show dropdown when active */
.menu-language-switcher.active .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
	transition-delay: 0s;
	padding-top:3px!important;

}

/* Mobile placement fix */
@media only screen and (max-width: 980px) {
  #et_mobile_nav_menu {
    display: flex;
    align-items: center;
  background-color: #D9D9D9;
  padding: 4px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* optional: space between bars */	
  }

  .menu-language-switcher {
    order: 1; /* Place before hamburger */
    margin-right: auto;
    padding-right: 10px;
  }

  .menu-language-switcher img {
    width: 30px;
    height: 30px;
  }
}

/* Hide desktop icon on mobile */
@media (max-width: 980px) {
  .menu-language-switcher.hide-on-mobile {
    display: none !important;
  }
}

/* Mobile icon wrapper */
.mobile-language-switcher {
  display: none;
  align-items: center;
  margin-right: 23px;
  position: relative;
}

@media (max-width: 980px) {
  .mobile-language-switcher {
    display: flex;
    position: absolute;
    right: 60px; /* Adjust if needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
  }
}

/* Dropdown */
.mobile-language-switcher .language-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    position: absolute;
    top: 88%;
    right: 0;
    background: #fff;
    border: 0px solid #ccc;
    z-index: 1000;
}

.mobile-language-switcher .language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
	transition-delay:0s;
}

.mobile-language-switcher .language-dropdown a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: #333;
}

.mobile-language-switcher .language-dropdown a:hover {
  background: #D9D9D9;
	color:#61652F;
	transition:0.3s;
}

/*Style the icon lang switcher*/
/* Shared icon styling */
.menu-language-switcher a#language-switcher-toggle,
.mobile-language-switcher a#mobile-language-switcher-toggle {
  display: inline-block;
  background-color: #D9D9D9;
  padding: 4px;
  border-radius: 5px;
}

/* Optional: ensure the image fits nicely inside the box */
.menu-language-switcher a#language-switcher-toggle img,
.mobile-language-switcher a#mobile-language-switcher-toggle img {
  display: block;
  width: 30px;
  height: 30px;
}

/*--- Additional styles ---*/
/* Ensure vertical centering of all menu items on desktop */
#et-top-navigation nav > ul > li > a {
  padding-top: 0;
  padding-bottom: 0;
 /* line-height: 66px;  Match the height of the header */
  display: flex;
  align-items: center;
}

.menu-language-switcher a#language-switcher-toggle {
 /* line-height: 66px; */
  display: flex;
  align-items: center;
  justify-content: center;
	font-size:12px;
}

/*Remove padding bottom only for lang switcher*/
.et_header_style_left #et-top-navigation nav > ul > li > a#language-switcher-toggle {
  padding-top: 12px!important;
	padding-right:10px!important;
	padding-bottom:12px!important;
	padding-left:10px!important;
  /* height: 66px;  Match header height if vertical alignment is off */
  display: flex;
  align-items: center;
  justify-content: center;
	top:-1px;
}

/*Hide the switcher as menu item in mobile menu*/
/* Hide the original language switcher in mobile menu */
@media only screen and (max-width: 980px) {
  .et_mobile_menu .menu-language-switcher,
  .et_mobile_menu .hide-on-mobile {
    display: none !important;
  }
}
/*Change z-index of mobile menu*/
.et_mobile_menu {
	z-index:900;
}

/*Style language dropdown*/
#mobile-language-dropdown {
	z-index:9999;
}

/*========== Style hamburger menu ==========*/
@media only screen and (max-width: 980px) {#et_mobile_nav_menu {
  background: #61652F !important;
  padding: 4px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
	margin-bottom:23px;
	}
	.et_divi_100_custom_hamburger_menu .mobile_menu_bar {
		margin-bottom:0!important;
	}
}
/*Modify width of hamburger menu div*/
.et_divi_100_custom_hamburger_menu__icon div {
	width:83%!important;
}

/*===== Main header =====*/
/*Change width and max-width*/
#main-header .container {
	max-width:2000px;
	width:90%;
}

/*Add margin to top menu*/
nav#top-menu-nav, #top-menu, nav.et-menu-nav, .et-menu {
	margin-bottom:7px;
}
/*Make header sticky*/
/*Fixed Header Mobile*/
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed; 
}
}

/*Opened mobile menu items styling*/
/* Full width expand mobile menu that opens under the header */
@media only screen and (max-width: 980px) {
  .mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
  }
  #main-header .container.clearfix.et_menu_container {
    width: 100%;
  }
  .logo_container {
    padding-left: 30px;
  }
  #et-top-navigation {
    padding-right: 30px;
  }
  #mobile_menu {
    display: block !important;
    right: 0;
    left: 0;
    top: 86px;
    min-height: calc( 100vh - 80px );
    transition: all .5s ease-in-out;
    transform-origin: top;
  }
  .mobile_nav.closed #mobile_menu {
    transform: rotateY(0);
    opacity: 0;
		visibility: hidden;
  }
  .mobile_nav.opened #mobile_menu {
    transform: rotateY(0);
    opacity: 1;
  }
}
/*Remove Lines from Mobile Menu*/
header#main-header .et_mobile_menu li a{
    border: 0px !important;
}
/*Stick items to the left and increase font size*/
@media only screen and (max-width: 980px) {
  /* Add 14px padding above the entire menu list */
  .et_mobile_menu {
    padding-top: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Reset individual list item spacing */
  .et_mobile_menu li {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Apply consistent padding to links */
  .et_mobile_menu li a {
    display: block;
    padding: 12px 37px !important;  /* 12px top/bottom, 20px left/right */
    font-size: 18px !important;
    text-align: left !important;
  }
}
/*Desktop menu remove opacity filter for hover property*/
#top-menu-nav>ul>li>a:hover {
	opacity:1!important;
}

/*========== Display fleet list ==========*/
/* Reset layout for blog posts in grid inside .fleet-container */
.fleet-container .et_pb_blog_grid .et_pb_post {
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
}
/* On screens ≤ 768px, change aspect ratio for better layout */
@media (max-width: 768px) {
  .fleet-container .et_pb_blog_grid .et_pb_post {
    aspect-ratio: 1 / 1;
  }
}

/* Force image container and image to fill the post */
.fleet-container .et_pb_post .et_pb_image_container {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  border-radius: 12px; /* Ensure border radius on container */
}

/* Zoom only the image */
.fleet-container .et_pb_post .et_pb_image_container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  border-radius: 0; /* REMOVE individual radius to fix clipping */
}

.fleet-container .et_pb_post .et_pb_image_container:hover img {
  transform: scale(1.05);
}

/* Remove margin from featured URL */
.fleet-container .et_pb_post .entry-featured-image-url {
  margin-bottom: 0 !important;
  display: block;
  height: 100%;
}

/* Hide native title and excerpt */
.fleet-container .et_pb_post > h2.entry-title,
.fleet-container .et_pb_post > .post-content {
  display: none !important;
}

/* Title + meta overlay inside image */
.fleet-container .et_pb_post .et_pb_image_container::before {
  /*content: attr(data-title) "\A" attr(data-meta);*/
 /* white-space: pre-wrap;*/
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}
/*New logic*/
.fleet-container .fleet-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  color: white;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.fleet-container .fleet-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.fleet-container .fleet-meta {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.9;
}

/* Chevron icon (not affected by image zoom)
.fleet-container .et_pb_post .et_pb_image_container::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: white url('https://test.gruenig.me/wp-content/uploads/2025/07/chevron-right.webp') no-repeat center center;
  background-size: 16px 16px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.fleet-container .et_pb_post .et_pb_image_container:hover::after {
  transform: none; 
} */

/* Reduce spacing between articles */
.fleet-container .et_pb_blog_grid .et_pb_post {
  margin-bottom: 0 !important;
}

.fleet-container .et_pb_blog_grid .column {
  margin-bottom: 15px !important; /* Controls vertical gap between rows */
}

/* Make sure columns fill full width despite reduced padding */
.fleet-container .et_pb_blog_grid .column {
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  width: 33.3333% !important; /* For 3-column layout */
}
@media (max-width: 980px) {
  .fleet-container .et_pb_blog_grid .column {
    width: 50% !important;
  }
}

@media (max-width: 768px) {
  .fleet-container .et_pb_blog_grid .column {
    width: 100% !important;
  }
}

/*.fleet-container .et_pb_blog_grid .column {
  padding: 0 7px;
}*/

/*========== Ken burns effect on slider module =========*/
/* Container adjustments */
#kenburns-slider .et_pb_slide {
  overflow: hidden;
  position: relative;
}

/* New background image layer */
#kenburns-slider .kenburns-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background-size: 110%;
  background-position: center center;
  background-repeat: no-repeat;
  animation: kenburnsZoom 12s ease-in-out infinite;
  will-change: transform;
}

/* Slide content should stay on top */
#kenburns-slider .et_pb_slide .et_pb_slide_description {
  position: relative;
  z-index: 2;
}

/* Zoom keyframes */
@keyframes kenburnsZoom {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.15);
  }
}

/*========= New main header style ==========*/
html body #main-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 107px;
  background-color: transparent !important;
  z-index: 9999;
  transition: background-color 0.3s ease, height 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: none !important;
  box-shadow: none !important;
}

html body #main-header.et-fixed-header {
  background-color: rgba(236, 238, 240, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  height: 83px !important;
  z-index: 9999 !important;
}

/*===== Hero section slider =====*/
/* Make the slider fill the entire viewport */
.slider-hero .et_pb_slide {
  height: calc(var(--vh, 1vh) * 100 + 9px); /* or + 2px */
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

/* Align slide content to bottom */
.slider-hero .et_pb_slide_description {
  position: absolute;
  bottom: 50px; /* adjust as needed */
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1080px;
}

/* Only hide non-active slides */
.slider-hero .et_pb_slide:not(.et-pb-active-slide) {
  display: none;
}

/* Remove extra spacing */
.slider-hero .et_pb_container {
  margin-bottom: 0 !important;
}

/* Prevent body overflow issues */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

/* Ensure the container uses full height */
.slider-hero .et_pb_container {
  height: 100% !important;
  display: flex;
  align-items: flex-end; /* Align children to bottom */
  padding-bottom: 80px;  /* Your desired spacing */
}

/* Prevent double positioning conflicts */
.slider-hero .et_pb_slide_description {
  position: relative; /* not absolute! */
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1080px;
}
/*Set max width and remove padding from inner content*/
.slider-hero .et_pb_slide_description {
	padding:0!important;
	width:90%!important;
	max-width:2000px!important;
}

/*===== Force animations via JS =====*/
/* Default state */
/* Default state: hide elements with animation */
.et_animated {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* When animation is triggered */
.et_animated.et_pb_animation_complete {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}