/*
Theme Name:		Hello Elementor Child
Description:	Die Personalisierung des Themes "Hello Elementor".
Author:			Das Web-Team von Logez
Author URI:		https://www.logez.ch/
Template:		hello-elementor
Version:		1.0
Text Domaint:	hello-elementor-child
*/

:root {
	font-size: clamp( 1rem * 15 / var( --klng-font__size-base-min ), ( 320 * 1rem * ( 6 * 15 - 20 ) + 100vw * ( var( --klng-font__size-base-min ) * 20 - var( --klng-font__size-base-max ) * 15 ) ) / ( 320 * ( 6 * var( --klng-font__size-base-min ) - var( --klng-font__size-base-max ) ) ), 1rem * 20 / var( --klng-font__size-base-max ) );
	scroll-padding-top: calc( var( --klng-elem__header-logo-width ) / 100 * 31 + var( --klng-spacing__25-20 ) + var( --klng-spacing__55-20 ) );
}

* {
	transition: .3s;

	&:focus {
		outline: 5px auto -webkit-focus-ring-color !important;
		outline-offset: .2em;
	}
}

body {
	background:
		linear-gradient( var( --klng-color__white-transp-85 ) ),
		fixed url( '/wp-content/uploads/2026/06/Kuelling-Kunststein-Betonelemente-Hintergrund-01-1536x1098.jpg' ) no-repeat center / cover;
	overflow-x: clip;

	&:has( .klng-elem__header-navi-is-shown ) {
		overflow: hidden;

		#navigation {
			scale: 1;
			opacity: 1;
			transition-property: scale, opacity;
			transition-duration: .3s;
			background-color: var( --klng-color__white );
			z-index: 0;
		}
	}
}

header:has( #navigation ) {
	--klng-color__header-background: transparent;

	position: fixed;
	top: 0;
	z-index: 999;
	left: 0;
	right: 0;
	padding: inherit;

	&::before {
		content: '';
		transition: .3s;
		position: absolute;
		display: block;
		top: 0;
		left: 50%;
		translate: -50% 0;
		width: 100vw;
		height: 100%;
		background-color: var( --klng-color__header-background );
	}
	
	&.klng-elem__header-scrolled {
		--klng-color__header-background: var( --klng-color__white );

		box-shadow: 0px 5px 20px 0px rgba( 0, 0, 0, 0.1 );
	}

	&.klng-elem__header-navi-is-shown {
		--klng-color__header-background: var( --klng-color__white );

		box-shadow: 0px 5px 20px 100vh rgba( 0, 0, 0, 0.3 );
	}
}

ul {
	padding-left: calc( 1em + 16px );
	list-style: none;

	li {
		color: var( --klng-color__grey-dark );
		margin-bottom: .9rem;

		&::before {
			content: '';
			width: 1em;
			height: 1em;
			background-color: var( --klng-color__red );
			position: absolute;
			left: 0;
			margin-top: 0.1em;
		}

		&::marker {
			color: transparent;
			font-size: 18px;
		}
	}
}

.elementor-widget-image-carousel :is( div, figure ) {
	height: 100%;

	&.swiper-slide-inner > img {
		display: block;
		height: 100%;
		object-fit: cover;
	}
}

div > :is( .klng-font__fliesstext,
ul ) {
	a {
		color: inherit;
		text-decoration-line: underline;
		text-decoration-color: var( --klng-color__red );
		text-underline-offset: .2em;
		transition: .3s;
		/* Der Designer wollte nicht, dass der Hintergrund der Links von unten her rot werden :( */
		/* background-image: linear-gradient( to top, var( --klng-color__red ) );
		background-size: 100% .05em;
		background-position: bottom;
		background-repeat: no-repeat; */

		&:is( :hover, :focus ) {
			color: var( --klng-color__red );
			/* background-size: 100% 100%; */
		}
	}
}

.klng-elem__akkordeon {
	--klng-color__accordion-text: var( --klng-color__grey-dark );
	--klng-color__accordion-icon: var( --klng-color__red );
	--klng-color__accordion-line: var( --klng-color__grey-dark );
	--klng-elem__accordion-col: 1;

	&.elementor-widget-n-accordion {
		:has( > details ) {
			display: block;
			columns: var( --klng-elem__accordion-col );
			column-gap: var( --klng-spacing__140-30 );

			> details {
				break-inside: avoid-column;
			}
		}

		summary {
			padding-bottom: var( --klng-spacing__12_5-5 );
			padding-top: var( --klng-spacing__14-5 );
			gap: 3em;
			border: 0;
			border-bottom: 3px solid var( --klng-color__accordion-line );
			align-items: end;

			.e-n-accordion-item-title-text {
				color: var( --klng-color__accordion-text );
			}

			.e-n-accordion-item-title-icon {
				color: var( --klng-color__accordion-icon );

				span {
					height: clamp( 19px, ( 100vw * ( 46 - 19 ) + 320px * ( 6 * 19 - 46 ) ) / 1600, 46px );

					svg {
						height: 100%;
					}
				}
			}

			&:is( :hover, :focus ) {
				--klng-color__accordion-text: var( --klng-color__red );
				--klng-color__accordion-icon: var( --klng-color__grey-dark );
				--klng-color__accordion-line: var( --klng-color__red );
			}

			+ div {
				padding-top: var( --klng-spacing__34-14 );
				padding-bottom: var( --klng-spacing__55-30 );

				ul.elementor-icon-list-items {
					padding-left: calc( 1em + 16px );

					li {
						display: list-item;
						position: static;
						width: fit-content;
						margin-bottom: .9em;
					}
				}
			}
		}

		details[open] {
			--klng-color__accordion-icon: var( --klng-color__grey-dark );
		}
	}
}

.klng-elem__akkordeon-col-2 {
	--klng-elem__accordion-col: 2;
}

@media ( max-width: 1024px ) {
	.klng-elem__akkordeon-col-2 {
		--klng-elem__accordion-col: 1;
	}
}

@media ( min-width: 1921px ) {
	body {
		padding: 0 max( 25px, ( 100% - 1920px ) / 2 );
	}
}