/**
 * Theme Name:   YOOtheme Child
 *  Template:     yootheme
 *  Author:       webfactor
 *  Description:  YOOtheme Child Theme
 *  Version:      1.0.0
 *  Text Domain:  yootheme-child-zdi
 * */



/* Header */
	.uk-logo {
		padding: 10px 0;
	}

	.tm-header-overlay {
		background-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0) 100%);
	}

/* Navbar */
	a.uk-navbar-toggle {
    	color: #fff !important;
	}
	.uk-navbar-nav a {
    	color: #fff !important;
	}


/*	.uk-navbar-container:not(.uk-navbar-transparent) {
		background: #ffffff;
	}

	.uk-navbar-transparent .uk-navbar-nav > li > a {
	  color: #000 !important; 
	}

	.uk-navbar-toggle {
	  color: #000 !important;
	} */

/* Off Canvas */

	.uk-nav-secondary > li > a {
		font-size:1.2rem;
	}

	.uk-nav-secondary > li.uk-active > a {
		color: #fff;
		font-size:1.2rem;
		background-color: #d43684;
	}

	.uk-nav-secondary > li > a:hover {
		color: #fff;
		background-color: transparent;
	}


/* Basis: Alle Links */

	.uk-nav-secondary > li > a {
		display: block;
		transition: transform 0.8s ease-in-out;
		text-align: left;
		box-sizing: border-box;
		width: 100%;
	}

	.uk-nav-secondary li.el-item:hover {
		background-color:#d43684;
	}

/* Aktives Element: zentrieren */
	
	.uk-nav-secondary > li.uk-active > a {
		text-align: left;
		font-weight: bold;
		transform: none; 
	}

/* Inaktive Elemente: Hover-Animation */

	.uk-nav-secondary > li:not(.uk-active) > a:hover {
		animation: fly-hover-center 1.2s ease-in-out;
	}

/* Keyframes mit dynamischem Schub-Effekt */

	@keyframes fly-hover-center {
	  0% {
		padding-left:0px;
	  }

	  40% {
		padding-left:100px;
		opacity: 0.6;
	  }


	  100% {
		padding-left:10px;
		opacity: 1;
	  }
	}

/* Abstand zwischen den Menüpunkten */

	.uk-nav-secondary > li {
		margin-bottom: 6px; /* z. B. 6px vertikaler Abstand */
	}

/* Optional: Letztes Element ohne extra Margin */

	.uk-nav-secondary > li:last-child {
		margin-bottom: 0;
	}


/* ---------- Farben ---------- */

/* ------ zdi-hellgruen ----- */

/* Section Background*/
.color-green {
    background: #BECD30;
}
.color-white {
	background-color: #fff;
}
.color-black {
	background-color:#060505;
}

/* ------ zdi-dunkelblau ----- */
.color-darkblue {
	background: #27418E;
}


/* Panel Background*/
.white .el-item.uk-panel.uk-tile-primary {
    background: #fff;
}


/*Grid BG Color + Color Black*/
/* ------ zdi-hellgruen ----- */
.green .uk-card-primary, .green .uk-tile-primary {
    background-color: #BECD30;
}
.green .el-meta.uk-text-meta.uk-text-emphasis.uk-margin-small-top {
    color: #000 !important;
}
/* ------ zdi-dunkelblau ----- */
.darkblue .uk-card-primary, .green .uk-tile-primary {
    background-color: #27418E;
}
.darkblue .el-meta.uk-text-meta.uk-text-emphasis.uk-margin-small-top {
    color: #000 !important;
}

/*----------- Buttons-----------*/
/* ------ zdi-hellgruen ----- */
.button-green a.el-link.uk-button.uk-button-default.uk-width-1-1, .button-green a.el-link.uk-button.uk-button-primary {
    border: 3px solid #BECD30;
}
.button-green .uk-button-default:hover, .button-green a.el-link.uk-button.uk-button-primary  {
    background-color: #becd31;
    color: #000;
    border-color: transparent;
}
/* ------ zdi-dunkelblau ----- */
.button-green a.el-link.uk-button.uk-button-default.uk-width-1-1, .button-green a.el-link.uk-button.uk-button-primary {
    border: 3px solid #27418E;
}
.button-green .uk-button-default:hover, .button-green a.el-link.uk-button.uk-button-primary  {
    background-color: #27418E;
    color: #000;
    border-color: transparent;
}

/*Primary Button gruen*/
.green .uk-button-primary {
    background-color: #becd31 !important;
    color: #000;
    border: 3px solid transparent;
}
.green .uk-button-primary:hover {
    background-color: #a9b727;
}
/* ------ zdi-dunkelblau ----- */
.darkblue .uk-button-primary {
    background-color: #27418E !important;
    color: #000;
    border: 3px solid transparent;
}
.darkblue .uk-button-primary:hover {
    background-color: #27418E;
}

/*Schriftverlauf gruen*/
.green .uk-text-background {
    -webkit-background-clip: text;
    color: transparent !important;
    display: inline-block;
    background-color: #becd31;
    background-image: linear-gradient(90deg, #becd31 0, #1d9d95 100%);
}
/*------ Pink -----*/
/*Schriftverlauf pink schwarz*/
.pink-black .uk-text-background {
    -webkit-background-clip: text;
    color: transparent !important;
    display: inline-block;
    background-color: #ffffff;
    background-image: linear-gradient(260deg, #d43684 0, #010101 80%);
}

/*SVG s gruen*/
.green .uk-svg, .uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
    fill: #becd31;
}



/* ------ Font Schwarz ----- */
.black .el-title, .black .el-content, .black .el-link, .black p, .black h2, .black .el-text, .black .uk-text-large {
    color: #000 !important;
}
/* ------ Font darkblue ----- */
.darkblue-font /*.el-title, .darkblue-font .el-content, .darkblue-font .el-link, .darkblue-font p, .darkblue-font h2, .darkblue-font .el-text, .darkblue-font .uk-text-large, .darkblue-font .uk-heading-medium*/ {
    color: #27418E !important;
}

/*Divider*/
.black-divider.uk-divider-small::after {
    content: "";
    display: inline-block;
    width: 50px;
    max-width: 100%;
    border-top: 4px solid #333333;
    vertical-align: top;
}

/* ---------- Klassen ---------- */

/* Border Radius */
.panel-radius, .panel-radius .uk-tile-muted, .panel-radius .uk-panel {
    border-radius: 10px;
}



/* ---------- Seiten Varianten ---------- */

	/* dunkle Seite */

		.page-id-330 nav.uk-navbar {
			background: #23201f;
			padding: 10px 10px 0px 10px;
		}

		.page-id-330 .uk-navbar-container:not(.uk-navbar-transparent) {
			background: #23201f;
		}

		.page-id-330 .uk-navbar-transparent .uk-navbar-nav > li > a {
			color: #fff !important; 
		}

		.page-id-330 .uk-navbar-toggle {
			color: #fff !important;
		}

		.page-id-330 .uk-navbar-nav > li > a {
			color: #fff;
		}

		.page-id-330 .uk-section-default.uk-section.uk-section-large {
			background: #23201f;
			color:#fff;
		}

		.page-id-330 h3.uk-h4.uk-margin {
			color: #d43684;
			font-weight:bolder;
		}

		.page-id-330 .uk-section-default.uk-section.uk-section-small.uk-padding-remove-top {
			background: #d43684;
		}

		.page-id-330 .uk-panel.uk-text-meta.uk-margin.uk-text-center {
			padding-top:10px;
			color: #fff;
		}

	/* gemischt */

		.page-id-358 .uk-navbar-nav > li > a {
			color: #fff;
		}

		.page-id-358 .uk-navbar-container:not(.uk-navbar-transparent) {
			background: #23201f;
		}

		.page-id-358 .uk-navbar-transparent .uk-navbar-nav > li > a {
			color: #fff !important; 
		}

		.page-id-358 .uk-navbar-toggle {
			color: #fff !important;
		}

		.page-id-358 .uk-section-default.uk-section.uk-section-large {
			background: #23201f;
			color:#fff;
		}

		.page-id-358 h3.uk-h4.uk-margin {
			color: #d43684;
			font-weight:bolder;
		}

		.page-id-358 .uk-section-default.uk-section.uk-section-small.uk-padding-remove-top {
			background: #23201f;
		}

		.page-id-358 .uk-panel.uk-text-meta.uk-margin.uk-text-center {
			padding-top:10px;
			color: #fff;
		}

	/* v4 */

		.page-id-398 .uk-navbar-nav > li > a {
			color: #fff;
		}

		.page-id-398 .uk-navbar-container:not(.uk-navbar-transparent) {
			background: #23201f;
		}

		.page-id-398 .uk-navbar-toggle {
			color: #fff !important;
		}

	/* v3 */

		.page-id-400 .uk-navbar-nav > li > a {
			color: #fff;
		}

		.page-id-400 .uk-navbar-container:not(.uk-navbar-transparent) {
			background: #23201f;
		}

		.page-id-400 .uk-navbar-toggle {
			color: #fff !important;
		}

	/* Final Home */

	/*	.page-id-435 .uk-navbar-nav > li > a {
			color: #fff !important;
		}

		.page-id-435 .uk-navbar-container:not(.uk-navbar-transparent) {
			background: #23201f;
		}

		.page-id-435 .uk-navbar-toggle {
		  color: #fff !important;
		}*/

.uk-section-secondary .uk-panel .uk-card-default .el-title,
.uk-section-secondary .uk-card-default .el-title,
.uk-section-secondary .uk-card-default .el-meta {
	color: #333;
}

/* Box Ideenlabor*/
.transparent {
    position: relative;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);/*rgb(190 205 48 / 60%) 0px 10px 26px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;*/
    color: rgb(255, 255, 255);
    border-radius: 28px;
    background: rgb(0 0 0 / 18%);/*rgba(255, 255, 255, 0.18);*/
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3);
    border-image: initial;
    overflow: hidden;
    transition: transform 0.3s;
}
.transparent:hover {
	box-shadow: rgb(190 205 48 / 60%) 0px 10px 26px;
}

.transparent-section {
    position: relative;
    box-shadow: rgb(190 205 48 / 60%) 0px 10px 26px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
    color: rgb(255, 255, 255);
    border-radius: 28px;
    background: rgba(190, 205, 48, 0.18);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3);
    border-image: initial;
    overflow: hidden;
    transition: transform 0.3s;
}

/*Header logo einfärben*/

/*Netzwerkpartner*/
.page-id-556 .uk-logo .uk-svg * {
  fill: #fff !important;  
}

/*Vermietung hellgrün*/
.page-id-845 .uk-logo .uk-svg * {
  fill: #BECD30 !important;  
}

/*Weiss
 * .uk-logo .uk-logo .uk-svg * {
  fill: #fff !important;  
}*/

/* --- layout Accelerator auf Startup*/
/* 1. Transition für die Inhalte der Slides */
.overlay-stack .uk-slider-items .el-item {
  transition: transform 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

/* 2. Aktiver Slide: .uk-active → verschiebt .el-item und bekommt Border */
.overlay-stack .uk-slider-items > .uk-active .el-item {
  border-right: 4px solid #d43684;
}
/* logoleiste auf 8 erweitern*/
.gallery-8 .uk-child-width-1-6\@m > * {
  width: 12.5%;
}



/* RWD*/

@media (max-width: 959px) {

/* RWD Invers logo magenta ausblenden*/
  .uk-navbar .uk-logo img,
  .uk-navbar .uk-logo svg {
    display: none !important;
  }

  .uk-navbar .uk-logo svg.uk-svg:first-of-type {
    display: inline-block !important;
  }
}
/* ---- Background Images ----- */
@media (max-height: 1000px) {
 	.hero-bg-image > div[uk-img] {
  		min-height: 80vh !important;
  		padding-top: 20px !important;
  		padding-bottom: 20px !important;
  		background-size: contain !important;
  		background-position: right bottom !important;
	}
	.hero-bg-image-left > div[uk-img] {
  		min-height: 80vh !important;
  		padding-top: 20px !important;
  		padding-bottom: 20px !important;
  		background-size: contain !important;
  		background-position: left bottom !important;
		background-color:#261e21;
	}
}

@media (max-width: 768px) {
	/*------------------------startup-------------*/
	.portfolio #page\#2 {
    	margin-left: 0px;
	}
	.portfolio .uk-grid-large>* {
    	padding-left: 0px;
	}
	.portfolio-flip .uk-grid > .uk-grid-item-match:first-child {
    	order: 2; 
  	}
	.portfolio-flip .uk-grid > .uk-grid-item-match:last-child {
    	order: 1; 
  	}
	.portfolio-slider .uk-slidenav {
    	display: none;
  	}
	/*------------------------vermietung-------------*/
	.konditionen .transparent {
    	box-shadow: none;
    	border-radius: 28px;
	    background:transparent;
    	border-color: transparent;
	}
	.konditionen.uk-grid, .konditionen.uk-grid>* {
        margin-left:10px;
     	margin-right: 0px;
    }
	/*------ Gallery Logo Leiste --------*/
	.gallery-8 .uk-child-width-1-6\@m > * {
  		width: 24%;
	}
	
	.hero-bg-image > div[uk-img],.hero-bg-image-left > div[uk-img] {
  		padding-top: 0px;
	}
}

/* ---- Navigation sticky mobil ----- */
@media (max-width: 959px) { 
	.hero-home-mobil {
    	padding-top: 0;
	}
  	.tm-header-mobile {
    	position: sticky;
    	top: 0;
    	z-index: 1000; 
  	}

  	.tm-header-mobile .uk-navbar-container {
    	background: #261e21;
  	}
}
/* ---- Background Bild auf Vermietung ----- */
@media (max-height: 1000px) {
      .uk-background-image\@l {
        /*background-size: 100% 20% !important;
		background-position:center middle !Important;*/
		  background-size: calc(100% + 10%) auto !important;
		  background-position:center bottom !Important;
    }
}