@font-face {
	font-family: din-regular;
	src: url(../fonts/din-regular.ttf) format("truetype");
}

@font-face {
	font-family: din-medium;
	src: url(../fonts/din-medium.ttf) format("truetype");
}

@font-face {
	font-family: din-bold;
	src: url(../fonts/din-bold.ttf) format("truetype");
}

@font-face {
	font-family: din-black;
	src: url(../fonts/din-black.ttf) format("truetype");
}


:root, section {
  	--xx-small-spacing: 5px;
  	--x-small-spacing: 10px;
  	--small-spacing: 20px;
  	--medium-spacing: 40px;
  	--big-spacing: 70px;
  	--large-spacing: 100px;
  	--optigem-blau: #009BD6;
	--optigem-gelb: #FFDD03;
	--optigem-grau: #D9D9D9;
}


/* Menü */

.tm-header {
	position: absolute;
	z-index: 5000;
	
	& .optigem-logo-text {
		font-size: 16px;
    	font-family: "din-medium";
    	text-transform: uppercase;
    	line-height: 1.1;
	}
	
	.uk-navbar {
		
		& .uk-navbar-right {
			background-color: var(--optigem-gelb);
    		padding: 10px 15px;
    		border-radius: 10px;
    		position: fixed;
    		
			display: flex;
    		margin-right: 0;
    		right: calc((100dvw - 1400px) / 2);
		
			& .uk-navbar-nav li { 
				
				& a {
					padding: 10px 15px;
					border: solid 2px transparent;
					border-radius: 10px;
				}
			
				& a:hover,
				a:active {
					border-color: black;
				}
			}
		}
	}
}

.tm-header-mobile {
	
	& .optigem-logo-text {
		font-size: 14px;
    	font-family: "din-medium";
    	text-transform: uppercase;
    	line-height: 1.1;
	}
}

.uk-navbar-dropdown {
    /*left: min(calc((100dvw - 1400px) /2))!important;
    right: min(calc((100dvw - 1400px) /2))!important;*/
    top: 180px!important;
    position: fixed;
	z-index: 4000;
	/*width: fit-content!important;
	max-width: 1400px!important;
	max-width: calc(100vw - 140px) !important;*/
	
	
	
	& .optigem-header-nav {
		margin-left: -13px;
		margin-right: -13px;
		
		& .el-item a {
			padding: 7px 10px;
    		margin: 3px;
    		border-radius: 10px;
    		width: fit-content;
    		transition: 0.3s;
		}

		& .el-item:hover a {
    		background-color: var(--optigem-gelb);
		}
	}
		
	& .optigem-menu-first-headline {
			
		& .el-item:first-child a {
			font-size: 20px;
    		text-transform: uppercase;
    		color: var(--optigem-blau);
    		background-color:  transparent!important;
		}
	}
}


/*.uk-navbar-dropdown:has(.dropdown-produkte),
.uk-navbar-dropdown:has([data-id="menu-item-273#0"]){
	margin-left: auto;
    margin-right: auto;
    right: calc((100vw - 1400px) / 2) !important;
    left: calc((100vw - 1400px) / 2) !important;
	margin-left: -8px;s
	
}

.uk-navbar-dropdown:has(.dropdown-produkte) {
	width: 1400px!important;
}

/*.uk-navbar-dropdown:has(.dropdown-infothek) {
	width: 1000px!important;
}*/

.tm-header-mobile {
	z-index: 2;
	
	& .uk-navbar-right {
		background-color: var(--optigem-gelb);
		border-radius: 10px;
		padding: 15px;
		position: fixed;
		right: 20px;
	}
}

#tm-dialog-mobile {
	z-index: 4000; 
}

@media(min-width: 960px){
	.uk-navbar-right {
		right: calc((100vw - 700px) / 2) !important;
	}
}

/*@media(max-width: 1540px){
	
	.uk-navbar-dropdown:has(.dropdown-produkte),
.uk-navbar-dropdown:has(.dropdown-infothek){
	margin-left: auto;
	margin-right: 70px;
	left: 70px!important;
	right: 0!important;
	max-width: calc(100vw - 155px)!important;
}
	
	.tm-header .uk-navbar-right {
    		right: 70px!important;
		}
}*/

@media(max-width: 1420px) {
	.tm-header .optigem-logo-text {
		font-size: 12px;
	}
}

@media(max-width: 1199px){
	
	.tm-header .uk-navbar-right {
		
		top: 70px!important;
		
		a {
			padding: 5px 7px!important;
    		font-size: 16px!important;
		}
	}

	.tm-header .optigem-logo-text {
		font-size: 11px;
	}
}

@media(max-width: 799px){
	.tm-header .uk-navbar-right {
		top: 60px;
	}
}

@media(max-width: 639px){
	.uk-navbar-container {
		padding-top: 20px!important;
	}
}

/* Sticky Button */


.sticky-button-modal {
	position: fixed;
    bottom: -680px;
    right: 0;
    padding: 40px!important;
    background-color: transparent;
    transition: 0.3s;
    z-index: 3000;
	
	& .optigem-buttons-support {
		width: 320px;
	}

	& .uk-button {
		text-transform: none;
    	font-family: "din-regular";
    	padding: 15px;
		padding-top: 12px;
    	padding-bottom: 12px;
    	display: flex;
    	justify-content: space-between;
    	font-size: 18px;
	}

	& .uk-button:hover,
	& .uk-button:active {
		background-color: var(--optigem-gelb);
    	border-color: var(--optigem-gelb);
    	color: black;
	}

	& .optigem-support-headline-card {
		background-color: var(--optigem-blau);
    	width: fit-content;
    	padding: 10px 20px 10px 15px;
    	margin-top: -70px;
    	margin-left: -60px;
	}

	& .optigem-support-headline-card .el-title {
		font-family: "din-medium";
    	margin-bottom: -5px!important;
	}
}


.sticky-button {
	position: fixed;
    bottom: 0;
    right: 0;
    padding: 40px!important;
    background-color: transparent;
    z-index: 3000;

	& .uk-button {
		padding: 10px!important;
    	transition: 0.3s;
	}

	& .uk-button:hover,
	& .uk-button:active,
	& .uk-button.active{
		background-color: var(--optigem-blau);
    	border-color: var(--optigem-blau);
	}

	& .uk-button:hover {
		scale: 1.1;
	}

	& .uk-button.active img{
		content: url(/wp-content/uploads/2025/02/pfeil-chevron-runter-weiss.svg);
    	aspect-ratio: 1/1;
    	object-fit: contain;
    	width: 25px;
    	margin: 7.5px;
	}

	& .uk-button img{
		width: 40px;
    	aspect-ratio: 1/1;
    	object-fit: contain;
	}
}

@media(max-width: 639px){
    
	.sticky-button-modal {
    	padding: 20px!important;
	
    & .optigem-buttons-support {
		width: calc(100dvw - 80px);
	}
    
    & .uk-card-default {
    	margin-bottom: -30px!important;
    }
    
    & .optigem-support-headline-card {
        margin-top: -50px;
        margin-left: 0px;
	}
    
    & .uk-button {
    	padding: 10px!important;
		padding-top: 8px!important;
    	padding-bottom: 8px!important;
    	font-size: 16px!important;
	}
}
	
	.sticky-button  {
    	padding: 20px!important;


		& .uk-button {
			padding: 7px!important;
		}

		& .uk-button img{
			width: 30px;
		}
    
    	& .uk-button.active img{
    		width: 15px;
    		margin: 7.5px;
		}
	}
}


/* buttons */

.uk-button:not(.uk-botton-text) {
	padding-top: 18px;
    padding-bottom: 13px;
}

.uk-button-large:not(.uk-botton-text) {
	padding-top: 28px;
    padding-bottom: 23px;
}

.uk-button-small:not(.uk-botton-text) {
	padding-top: 7px;
    padding-bottom: 4px;
}


/* Listen */

.el-content ul {
	list-style-type: none;
}

.el-content ul li {
	margin-top: 10px;
}

.el-content ul:not(.no-bullets) li::before {
	content: "•";
    position: absolute;
    margin-left: -30px;
    font-size: 30px;
    margin-top: -9px;
    color: #009BD6;
}

.no-bullets {
	padding: 0px;
	list-style-type: none;
}


/* Schlagwörter hervorgehoben */

.uk-h1, .uk-h2, .uk-h3 {
    display: block!important; 
    flex-wrap: nowrap!important; 
}

.el-content strong,
p strong,
.uk-h1 strong,
.uk-h2 strong,
.uk-h3 strong {
	text-transform: uppercase;
    color: #009BD6;
    font-family: din-bold;
    font-weight: normal;
}


/* In eine Richtung ausweiten */

.uk-container-expand-right {
	padding-right: 0;
}

.uk-container-expand-left {
	padding-left: 0;
}

.image-min-height {
	min-height: 600px;
}

@media(max-width: 959px) {
	
	.uk-container-expand-right {
		& .medium-spacing-right {
			padding-right: 40px;
		}
	}
	
	.uk-container-expand-left {
		& .medium-spacing-left {
			padding-left: 80px;
		}
	}
	
	.image-min-height {
	min-height: 400px;
}
}

@media(max-width: 639px) {
	
	.uk-container-expand-right {
		& .medium-spacing-right {
			padding-right: 20px;
		}
	}
	
	.uk-container-expand-left {
		& .medium-spacing-left {
			padding-left: 60px;
		}
	}
	
}


/* header */


.optigem-header-panel-slider-home {
	
	& .el-content {
		max-width: 500px;
	}
	
	& .el-image {
		vertical-align: middle;
	}
}

.optigem-header-panel-leistung {
	& .el-title {
		max-width: 800px;
	}
}

@media(min-width: 1200px) {
	
	.optigem-header-panel-slider-home {
		
		& .uk-width-expand  {
			padding-right: 5vw
		}
	}
}

@media(max-width: 959px) {
	
	.optigem-header-panel-slider-home {

		& .el-content {
			margin-right: auto;
    		margin-left: auto;
		}
    
		& .el-element {
    		max-width: 600px;
        	margin-left: auto;
        	margin-right: auto;
    	}
		
		& .el-image {
    		width: 200px;
    	}
	}
	
	.optigem-header-panel-leistung {
		
		& .el-image {
    		width: 200px;
    	}
	}
}

@media(max-width: 639px) {
	
	.optigem-header-panel-slider-home {
		
		& .el-image {
    		width: 150px;
    	}
	}
	
	.optigem-header-panel-leistung {
		
		& .el-image {
    		width: 150px;
    	}
	}
}


/* Leistungen */

.optigem-panel-slider-leistungen {
	
	& .uk-card {
		margin-top: 10px;
    	margin-bottom: 140px;
    	display: flex;
    	flex-direction: column;
    	justify-content: flex-end;
	}

	& .uk-card > div:last-child {
		margin-bottom: -65px;
	}

	& .el-title {
    	margin-right: 10px;
	}

	& .el-image {
		display: block;
    	aspect-ratio: 1.5/1;
    	object-fit: contain;
	}
}

.optigem-preise {
	
	& p, h4, h2 {
		margin-top: 0!important;
	}

	& h4, h2 {
		margin-bottom: 0!important;
    	color: black;
    	text-transform: none;
	}

	& h2 {
		font-size: 35px;
	}
}

.optigem-preise-sublayout {
  	display: flex!important;
  	flex-direction: column;

	& .el-content {
  		flex-grow: 1;
	}
}

@media(min-width: 1600px){
	.optigem-panel-slider-leistungen {
		& .uk-slider-items {
			left: calc(-12.5dvw - 10px);
		}
	}
}

@media(max-width: 1599px){
	.optigem-panel-slider-leistungen {
		& .uk-slider-items {
			left: calc(-16.5dvw - 10px);
		}
	}
}

@media(max-width: 959px){
	.optigem-panel-slider-leistungen {
		& .uk-slider-items {
			left: calc(-25dvw - 10px);
			
		& .uk-card > div:last-child {
		margin-bottom: -50px;
	}
		}
		
		
	}
}

@media(max-width: 639px){
	.optigem-panel-slider-leistungen {
		& .uk-slider-items {
			left: calc(-75dvw - 10px);
		}
		
		
	}
}


/* panels cards */

.optigem-yellow-square {
	
	& .el-image {
		background-color: #FFDD03;
    	padding: 15px;
    	border-radius: 10px;
    	aspect-ratio: 1/1;
    	object-fit: contain;
	}

	& .el-title {
    	text-transform: none;
	}
}

.panel-button-bottom {
  display: flex!important;
  flex-direction: column;
	
	& .el-content {
  		flex-grow: 1;
	}
}

.panel-height-stretch {
	
	height: 100%;
}

@media(min-width: 640px){ 
	.optigem-yellow-square {
		& .uk-card {
			padding-left: 60px;
		}
    
		& .el-image {
    		position: absolute;
    		left: -20px;
		}

		& .el-title {
			padding-left: 30px;
    		height: 75px;
    		display: flex;
    		align-items: center;
			margin-top: 0!important;
		}
	}
}

@media(max-width: 639px){ 
	.optigem-yellow-square {

    	& .el-image {
    		position: absolute;
		}
    
		& .el-title {
    		padding-top: 20px!important;
    	}
	}
}


/* accordion */

.accordion-plus {
	
	& .uk-accordion-title {
		padding-left: 40px;
	}
	
	& .uk-accordion-title::before {
		float: left;
    	margin-right: 20px;
    	background-size: 100%;
    	width: 25px;
    	position: absolute;
    	margin-left: -40px;
    	transition: 0.3s;
	}
	
	& .uk-accordion-title:before {
    	background-image: url(/wp-content/uploads/2025/02/plus.svg)!important;
	}
	
	& .uk-open > .uk-accordion-title:before {
    	background-image: url(/wp-content/uploads/2025/02/minus.svg)!important;
	}
}

.accordion-arrow {
	
	& .uk-open > .uk-accordion-title:before {
    	transform: rotate(90deg);
	}
	
	& .uk-accordion-title {
		text-transform: uppercase;
    	font-family: "din-medium";
    	display: flex;
   	 	flex-direction: row-reverse;
    	align-items: center;
    	justify-content: space-between;
	}	
	
	& .uk-accordion-title::before {
    	background-size: contain;
    	background-size: 15px;
    	width: 25px;
    	aspect-ratio: 1/1!important;
    	transition: 0.3s;
    	margin-left: 10px;
	}
}

.accordion-arrow-grey {
	
	& .uk-accordion-title:before {
    	background-image: url(/wp-content/uploads/2025/02/pfeil-chevron-grau.svg)!important;
	}
}

.accordion-arrow-yellow {
	
	& .uk-accordion-title:before {
    	background-image: url(/wp-content/uploads/2025/02/pfeil-chevron-schwarz.svg)!important;
	}
}

.accordion-yellow {
	
	& .el-item {
		border: 0;
    	background-color: #FFDD03;
    	padding: 20px;
    	border-radius: 10px;
	}
}

.accordion-border {
	
	& .el-item {
		border: 0;
    	border: solid 2px #D9D9D9;
    	padding: 20px;
    	border-radius: 10px;
	}
}

.grey-box {
	
	border: solid 2px #D9D9D9;
    padding: 40px;
    border-radius: 10px;
}

.accordion-space-top {
	margin-top: 20px!important;  
}

.accordion-space-bottom {
	margin-bottom: 20px!important;  
}

.accordion-minus-space-top {
	margin-top: -20px!important;
}

.accordion-minus-space-bottom {
	margin-bottom: -20px!important;
}

.accordion-space-left {
	margin-left: 20px
}

.accordion-space-right {
	margin-right: 20px
}



@media(max-width: 959px) {
	
	.uk-accordion-box {
    	padding: 20px;
	}
	
	.grey-box {
	
    padding: 20px;
}
}



/* table */

.optigem-table {
	
	border-radius: 10px;
    border: solid var(--optigem-grau) 2px;
    
    & .uk-table {
		margin-bottom: 0!important;
	}
    
    & thead {
		background-color: var(--optigem-gelb);
    	border-top-left-radius: 10px;
	}

	& th {
		color: black;
	}
}

@media(max-width: 959px){
    .optigem-table {
		
		& .uk-text-center {
    		text-align: left!important;
    	}
		
		& .uk-table-large td, 
		& .uk-table-large th {
    		padding: 15px 20px;
		}
	}
}


/* Footer */


.optigem-footer-logo {
	
    width: 480px;
	padding-top: 10px;
    padding-bottom: 10px;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
	
    & .el-title, & .el-meta {
		font-family: "din-medium"!important;
	}	
}

@media(max-width: 1199px) and (min-width: 640px) {
    .optigem-footer-large-spacing {
    	padding-left: 110px;
    }
}

@media(max-width: 959px){
	
    .optigem-footer-logo {
    	width: auto;
        padding-right: 25%;
    }
}

@media(max-width: 959px) and (min-width: 640px) {
	
    .optigem-footer-medium-spacing {
    	padding-left: 110px;
    }
}

@media(max-width: 639px){
	
    .optigem-footer-logo {
        padding-right: 0;
    }
}

/* Responsive */

@media(max-width: 1599px) and (min-width: 1200px){
    .uk-section-large {
	padding-top: 70px;
    padding-bottom: 70px;
}
    
.uk-section-xlarge {
	padding-top: 100px;
    padding-bottom: 100px;
}
}

@media(max-width: 1199px) and (min-width: 960px){
.uk-section-xlarge {
	padding-top: 70px;
    padding-bottom: 70px;
}
    
    h1, .uk-h1 {
    	font-size: 60px
    }
}

@media(max-width: 959px){
	
}

@media(max-width: 639px){
	
	.uk-section-small {
	padding-top: 20px;
    padding-bottom: 20px;
}
	
	.uk-section-default {
	padding-top: 40px;
    padding-bottom: 40px;
}
	
	.uk-section-large {
	padding-top: 40px;
    padding-bottom: 40px;
}
	
	.uk-section-xlarge {
	padding-top: 40px;
    padding-bottom: 40px;
}
    h1, .uk-h1 {
    	font-size: 40px
    }
	
	.uk-margin-large {
    margin-bottom: 40px;
}
	
	*+.uk-margin-large {
    margin-top: 40px !important;
}
	
	*+.uk-grid-margin-large, 
	.uk-grid+.uk-grid-large, 
	.uk-grid+.uk-grid-row-large, 
	.uk-grid-large>.uk-grid-margin, 
	.uk-grid-row-large>.uk-grid-margin {
    margin-top: 40px;
}

}

/* WP-Forms */
.wpforms-form input, textarea{
	border: 1px solid black !important;
    border-radius: 8px !important;
}

.wpforms-form button:not(.iti__selected-country) {
	background-color: var(--optigem-gelb) !important;
    color: black !important;
    border-radius: 8px !important;
    transition: 0.4s !important;
}

.wpforms-form button:hover:not(.iti__selected-country) {
	background-color: var(--optigem-blau) !important;
    color: white !important;
    border-radius: 8px !important;
}






.multistep-menu-wrapper {
	position: relative;
	overflow: visible;
	width: 100%;
	height: calc(100vh - 150px);
	background: #ffdd03;
}

.menu-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: block;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

.menu-level.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.menu-level.exit-left {
	transform: translateX(-10px);
	opacity: 0;
}

.menu-level.enter-right {
	transform: translateX(10px);
	opacity: 0;
}

.menu-level.animate-in {
	transform: translateX(0);
	opacity: 1;
}

/* Rückwärts (optional) */
.menu-level.exit-right {
	transform: translateX(10px);
	opacity: 0;
}

.menu-level.enter-left {
	transform: translateX(-10px);
	opacity: 0;
}



  
  .menu-level .go-back {
	margin-bottom: 1rem;
	display: inline-block;
	padding: 0;
    margin-bottom: 0px;
	position: fixed;
    top: 45px;
  }
  
  .menu-level .go-forward {
	float: right;
  }

  .menu-level ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .menu-level ul li a {
	flex-grow: 1;
  }

  .menu-level .go-forward {
	flex-shrink: 0;
	margin-left: 0.5rem;
	padding: 0;
  }

#popup-modal {
	z-index: 5000;
}

#popup-modal .uk-modal-dialog {
	text-align: center;
}

#popup-modal .popup-image-container img {
	max-width: 50px;
	max-height: 50px;
}

#popup-modal .uk-modal-close-default svg {
	color: #009BD6;
	width: 20px;
}

#popup-modal .uk-modal-close-default svg line {
	stroke-width: 2;
}

#popup-modal .uk-modal-close-default {
	transition: transform 0.3s ease;
}

#popup-modal .uk-modal-close-default:hover {
	transform: rotate(180deg);
}

.tm-header .uk-navbar-right {
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}