@font-face {
    font-family: "Nazare";
    src: url("/wp-content/themes/lima-webdesign/fonts/Nazare-Regular.woff2") format("woff2"),
    url("/wp-content/themes/lima-webdesign/fonts/Nazare-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/wp-content/themes/lima-webdesign/fonts/Inter-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
*, root {
    --background: #F5F2ED;
	--light-background: #FFFFFF;
    --font: #3B4FBC; 
	--accent-color: #C8D0FC;
	--hover-color: #8998E6;
}
html {
	margin: 0 !important;
}
body {
	background: var(--background);
	color: var(--font);
	font-family: "Inter", sans-serif;
}
/* Header */
.site-header {
    max-width: 100vw;
    position: sticky;
    top: 0;
    left: 0;
    background: var(--background);
	margin: 0;
	padding: 1rem;
	z-index: 2;
	@media (min-width: 600px) {
		padding: 1rem 2.5rem;
	}
}
.site-header .header-content {
	width: 100%;
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: relative;
	@media (min-width: 1000px) {
		justify-content: center;
		padding: 0.5rem 0;
	}
}
.site-header .header-content .site-branding {
	margin: 0;
	@media (min-width: 1000px) {
		position: absolute;
	top: 0;
	left: 0;
	}
}
.site-header .header-content .site-branding img {
	width: 5rem;
	height: auto;
}
.site-header .header-content .menu-wrapper {
}
.site-header .header-content .menu-wrapper .menu {
    display: none;
    justify-content: center;
    align-items: center;
	@media (min-width: 1000px) {
		display: flex;
	}
}
.site-header .header-content .menu-wrapper .menu a {
    text-decoration: none;
    color: var(--font);
	padding: 0.2rem 1.5rem;
    border: 1px solid transparent;
	border-radius: 1.5rem;
	font-size: 1rem;
}
.site-header .header-content .menu-wrapper .menu a:hover {
    border-color: var(--font);
    transition: 300ms ease-in-out;
} 
/* Hamburger Menu */
.hamburger-menu {
	display: block;
    height: 2rem;
    width: 2rem;
	z-index: 999!important;
	@media (min-width: 1000px) {
		display: none;
	}
.hamburger-icon {
	all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 300ms ease-in-out;
	cursor: pointer;
    span {
        background: var(--font);
        width: 90%;
        height: 2px;
    }
}
}
.mobile-menu {
    display: none;
	.mobile-kontakt {
	all: unset;
    text-decoration: none;
	font-size: 1.2rem;
    color: var(--font) !important;
    background: var(--background) !important;
	border: 1px solid var(--background);
   padding: 0.2rem 1.5rem;
	border-radius: 1.5rem;
	cursor: pointer;
	}
	.mobile-kontakt:hover {
		  color: var(--background) !important;
    background: var(--font) !important;
		 color: var(--background) !important;
	}
    .mobile-menu-items {
        padding: 0;
        display: flex;
        flex-direction: column;
		align-items: center;
		justify-content: center;
        a {
            text-decoration: none;
            color: var(--background);
			padding: 0.2rem 1.5rem;
			border: 1px solid var(--font);
			border-radius: 21px;
			font-size: 1.2rem;
        }
    }
	.mobile-menu-items a:hover {
		border-color: var(--background);
		transition: 300ms ease-in-out;
	}
	.mobile-footer {
		position: absolute;
		bottom: 1rem;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		.site-branding {
		margin: 0;
		img {
		width: 5rem;
		height: auto;
	}
	} 
		a {
			color: var(--background);
			text-decoration: none;
			font-size: 1rem;
		}
	} 
}
.site-header .hamburger-icon:hover {
    transform: scale(1.2);
}
.site-header .mobile-view {
	z-index: 9 !important;
	position: fixed;
	top: 1.5rem;
	right: 1rem;
	@media (min-width: 600px) {
		right: 2rem;
	}
}
@keyframes fadeToCross1 {
	from {transform: rotate(0)}
	to {transform: rotate(45deg) translateY(-0.2rem); width: 2.2rem}
}
@keyframes fadeToCross2 {
	from {opacity: 1}
	to {opacity: 0}
}
@keyframes fadeToCross3 {
	from {transform: rotate(0)}
	to { transform: rotate(-45deg) translateY(0.2rem); width: 2.2rem}
}

body .site-header .cross-1 {
	background: var(--background);
	transform-origin: 0px 0px;
	animation: 200ms ease-in forwards fadeToCross1;
}
body .site-header .cross-2 {
	animation: 200ms ease-in forwards fadeToCross2;
}
body .site-header .cross-3 {
	background: var(--background);
	transform-origin: 0px 0px;
	animation: 200ms ease-in forwards fadeToCross3;
}
@keyframes menuFade {
	from {top: 100vh}
	to {top: 0}
}
.site-header .active {
	position: relative;
    width: 100vw;
	height: 100vh;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.8rem;
    padding: 0 1rem 1rem 1rem;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 3;
    background: var(--font);
	color: var(--light-background);
	animation: 600ms ease-out menuFade;
	@media (min-width: 1000px) {
		display: none;
	}
}
.site-header .header-content .kontakt {
	all: unset;
	position: absolute;
	top: 0.5rem;
	right: 0;
    text-decoration: none;
	font-size: 1rem;
    color: var(--background) !important;
    background: var(--font) !important;
	border: 1px solid var(--font);
   padding: 0.2rem 1.5rem;
	border-radius: 1.5rem;
	display: none;
	cursor: pointer;
	@media (min-width: 1000px) {
		display: block;
	}
}
.site-header .header-content .kontakt:hover {
	background: var(--background) !important;
	color: var(--hover-color) !important;
	border-color: var(--hover-color);
	transition: 300ms ease-in-out;
}
/* Footer */
.site-footer {
    background: var(--background); 
    color: var(--font);
    max-width: 100vw;
    margin: 0;
	padding: 1rem;
	@media (min-width: 600px) {
		padding: 1rem 2.5rem;
	}
	.footer-content {
		margin: 0;
		width: 100%;
		 display: flex;
		flex-direction: column;
    align-items: center;
		gap: 0.5rem;
		.above {
			width: 100%;
			display: flex;
		 justify-content: space-between;
    align-items: center;
		.site-branding {
			margin: 0;
			img {
	width: 5rem;
	height: auto;
}
		} 
			.footer-menu {
				a {
			font-size: 0.8rem;
			text-decoration: none;
			color: var(--font);
		}
				span {
					font-size: 0.8rem;
				}
				.impressum {
			all: unset;
			font-size: 0.8rem;
			color: var(--font) !important;
			cursor: pointer;
			background: var(--background) !important;
		}
			}
			.social-media {
				img {
					width: 2rem;
					height: auto;
				}
			}
		
	
			}
		.below {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.copyright p {
		font-size: 0.8rem;
	}
				a {
			font-size: 0.8rem;
			text-decoration: none;
			color: var(--font);
		}
		}
	}
	
}
body .site-main .impressum-container {
	display: none;
	padding: 3rem;
	background: var(--background);
	p, h1, h2 {
	text-align: left;	
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		@media (min-width: 600px) {
			flex-direction: row;
			gap: 2rem;
		}
	}
	.impressum-close {
		all: unset;
		width: 2.5rem;
		height: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed; 
		top: 1rem;
		right: 1rem;
		cursor: pointer;
		background: var(--font);
		color: var(--background);
		border: 1px solid var(--font);
		border-radius: 50%;
		font-size: 2rem;
		font-weight: 100;
		padding: 0.2rem;
	}
	.impressum-close:hover {
		background: var(--background);
		color: var(--hover-color);
		border-color: var(--hover-color);
		transition: 300ms ease-in-out;
	}
	}

body .site-main .impressum-open {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	position: fixed;
	overflow: scroll;
	top: 0;
	left: 0;
	z-index: 4;
	color: var(--font);
	animation: 800ms ease-out slideUp;
}
body .site-main {
	padding: 1rem;
	@media (min-width: 600px) {
	padding: 1rem 2.5rem;	
	}
}
body .site-main p {
	text-align: center;
	color: var(--font);
	hyphens: auto;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
}
body .site-main h1, h2, h3 {
	font-family: "Nazare", serif;
	text-align: center;
	color: var(--font);
	hyphens: auto;
}
body .site-main .front-page-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15vw;
	padding-bottom: 10vw;
	}
body .site-main .front-page-section section {
	width: 100%;
	scroll-margin-top: 100px;
}
body .site-main .front-page-section .hero {
	height: 80vh;
	width: 100%;
	border: 1px solid var(--font);
	border-radius: 30px;
	position: relative;
	overflow: hidden;
	.image-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: -1;
		.hero-img {
			width: 100%;
			height: 100% !important;
			object-fit: cover;
			display: block;
			
		}
	}
	.text-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.8rem;
	h1 {
		font-size: 2.5rem;
		line-height: 2rem;
	}
	a {
		text-decoration: none;
		background: var(--font);
		color: var(--light-background);
		padding: 0.2rem 1.5rem;
		font-size: 1rem;
		border-radius: 30px;
		border: 1px solid var(--font);
	}
		}
}
body .site-main .front-page-section .hero a:hover {
	background: transparent;
	border-color: var(--light-background);
	transition: 300ms ease-in-out;
}
body .site-main .front-page-section .about {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.8rem;
	padding: 0 5%;
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		margin-top: 4rem;
	}
	@media (min-width: 800px) {
		padding: 0 20%;
	}
}
body .site-main .front-page-section .about .image-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2vw;
	@media (min-width: 400px) {
		flex-direction: row;
	}
	.team-img {
		width: 10rem;
		height: 10rem;
		object-fit: cover;
		border-radius: 50%;
		border: 1px solid var(--font);
		@media(min-width: 800px) {
			width: 15rem;
		height: 15rem;
		}
		@media(min-width: 1000px) {
			width: 18rem;
		height: 18rem;
		}
	}
}
body .site-main .front-page-section .about .principle-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	@media (min-width: 800px) {
		min-width: 700px;
		max-width: 1000px;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
	}
	.principle-item {
		flex-basis: 0;
		flex-grow: 1;
		border: 1px solid var(--font);
		border-radius: 21px;
		padding: 1.5rem;
		span {
			white-space: nowrap;
			text-align: center;
		}
	}
}
body .site-main .front-page-section .about .kontakt {
		all: unset;
		cursor: pointer;
		background: var(--font) !important;
		color: var(--light-background);
	font-size: 1rem;
		padding: 0.2rem 1.5rem;
		border-radius: 30px;
		border: 1px solid var(--font);
	}
body .site-main .front-page-section .about .kontakt:hover {
	background: var(--background) !important;
		color: var(--hover-color);
	border-color: var(--hover-color);
	transition: 300ms ease-in-out;
}
body .site-main .front-page-section .services {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.8rem;
	padding: 0 2rem;
	h2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	.grid-container {
		max-width: 300px;
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1rem;
		padding: 0;
		@media (min-width: 600px) {
			grid-template-columns:repeat(2, minmax(0, 1fr));
			max-width: 550px;
			padding: 0;
		}
		@media (min-width: 1200px) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			max-width: 100%;
			padding: 0 4vw;
		}
		.grid-item {
			border-radius: 1rem;
			background: var(--accent-color);
			width: 100%;
			aspect-ratio: 1 / 1 !important;
			border: 1px solid var(--font);
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 1rem;
			align-items: center;
			padding: 2rem;
			transition: all 300ms ease-in-out;
			cursor: pointer;
			h3 {
				font-size: 1.5rem;
				line-height: 1.5rem;
			}
			p {
				hyphens: auto;
				font-size: 1rem;
				line-height: 1rem;
			}
		}
	}
	.grid-item:hover {
		background: var(--hover-color);
		transform: scale(1.03);
		h3, p {
			color: var(--background);
		}
	}
}
/* Projekte Section */
body .site-main .front-page-section .works {
	width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.8rem;
	padding: 0 1rem;
	h2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	.works-container {
		width: 100%;
		border: 1px solid var(--font);
		border-radius: 30px;
		position: relative;
		.projekte-slider {
			padding: 0;
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 50vh;
			border-radius: 30px;
			@media(min-width: 800px) {
				height: 70vh;
			}
		}
		.projekt-slides {
			position: relative;
			min-width: 100%;
				height: 100%;
			.projekt-slide {
				position: absolute;
				top: 0;
				left: 0;
				min-width: 100%;
				height: 100%;
				box-sizing: border-box;
				opacity: 0;
				transition: opacity 1500ms ease;
				z-index: 0;
				.slide-container {
				min-width: 100%;
				height: 100%;
				text-align: center;
				position: relative;
				.slide-image {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					overflow: hidden;
					width: 100%;
					height: 100%;
					.project-img {
					width: 100%;
					height: 100% !important;
					border-radius: 30px;
					object-fit: cover;
						display: block;
				}
				} 
				.slide-content {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: "Nazare", serif;
					font-weight: 500;
					font-size: 2rem;
				}
					}
			}
			.projekt-slide.active {
				opacity: 1;
				z-index: 1;
			}
		}
		.slider-dots {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: -15px;
			left: 0;
			z-index: 1;
			button {
				width: 25px;
				height: 25px;
				padding: 0;
				margin: 0 6px;
				border-radius: 50%;
				background-color: var(--light-background);
				border: 1px solid var(--font);
			}
			button:hover {
				background-color: var(--hover-color);
			}
		}
		.slider-dots button.active {
			background-color: var(--font);
			width: 30px;
				height: 30px;
		}
	}
}

/* Testimonials Section */
body .site-main .front-page-section .testimonials {
	width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.8rem;
	h2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	.testimonials-wrapper {
		width: 100%;
		position: relative;
		overflow: hidden;
		}
	}
body .site-main .front-page-section .testimonials .testimonials-wrapper .testimonials-track {
	display: inline-flex;
	width: max-content;
	overflow: hidden;
}
body .site-main .front-page-section .testimonials .testimonials-wrapper .testimonials-track .testimonials-slider {
	flex: 0 0 auto;
	display: flex;
	animation: 20s linear infinite scroll;
	.slides {
		
		display:flex;
		.slide {
			width: 400px;
			margin: 0 1rem;
			flex-shrink: 0;
			background: var(--accent-color);
			padding: 1.8rem;
			border-radius: 30px;
			border: 1px solid var(--font);
			text-align: left;
			position: relative;
			.slide-container {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				white-space: normal;
				gap: 2rem;
				.slide-text p {
					font-style: italic;
					color: var(--font);
					text-align: left;
					white-space: normal;
					word-break: break-word;
				}
				.slide-name {
					color: var(--background);
					background: var(--font);
					border-radius: 21px;
					font-size: 1rem;
					padding: 0.2rem 1.5rem;
				}
			}
		}
	}
}
body .site-main .front-page-section .testimonials .testimonials-wrapper .testimonials-track::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	height: 100%;
	background: linear-gradient(to left, transparent, var(--background));
	z-index: 1;
}
body .site-main .front-page-section .testimonials .testimonials-wrapper .testimonials-track::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 10%;
	height: 100%;
	background: linear-gradient(to right, transparent, var(--background));
	z-index: 1;
}
body .site-main .front-page-section .testimonials .testimonials-wrapper:hover .testimonials-track .testimonials-slider{
	animation-play-state: paused;
}
@keyframes scroll {
	from {
		transform: translateX(0); 
	}
	to {
		transform: translateX(-100%); 
	}
}						
			

/* CTA Section */
body .site-main .front-page-section .cta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.8rem;
	padding: 0 1rem;
	h2 {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	@media (min-width: 800px) {
			padding: 0 15%;
	}
	.image-container {
		width: 80vw;
		height: 40vw;
		border: 1px solid var(--font);
		border-radius: 30px;
		overflow: hidden;
		@media (min-width: 800px) {
			width: 600px;
		height: 300px;
		}
		.cta-img {
			width: 100%;
			height: 100% !important;
			object-fit: cover;
		}
	}
	.kontakt {
		all: unset;
		cursor: pointer;
		background: var(--font) !important;
		color: var(--light-background);
		font-size: 1rem;
		padding: 0.2rem 1.5rem;
		border-radius: 30px;
		border: 1px solid var(--font);
	}
}
body .site-main .front-page-section .cta .kontakt:hover {
	background: var(--background) !important;
		color: var(--hover-color);
	border-color: var(--hover-color);
	transition: 300ms ease-in-out;
}
@keyframes slideUp {
	from { transform: translateY(100%);}
	to { transform: translateY(0);}
}
body .front-page-section .kontakt-formular {
	padding: 2.5rem;
	display: none;
	background: var(--background);
}
body .front-page-section .kontakt-open {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	overflow: scroll;
	width: 100%;
	height: 100%;
	z-index: 4;
	animation: 800ms ease-out slideUp;
}
body .front-page-section .kontakt-formular .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	position: relative;
	padding: 0 5%;
	h2 {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	p {
		line-height: 1.5rem;
	}
	.close {
		all: unset;
		width: 2.5rem;
		height: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed; 
		top: 1rem;
		right: 1rem;
		cursor: pointer;
		background: var(--font);
		color: var(--background);
		border: 1px solid var(--font);
		border-radius: 50%;
		font-size: 2rem;
		font-weight: 100;
		padding: 0.2rem;
	}
	.close:hover {
		background: var(--background);
		color: var(--hover-color);
		border-color: var(--hover-color);
		transition: 300ms ease-in-out;
	}
}
body .front-page-section .kontakt-formular .container .form-wrapper {
	width: 80vw;
	@media (min-width: 800px) {
		width: 700px;
	}
}
/* Response styling */
body .front-page-section .kontakt-formular .container .form-wrapper .wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 3rem;
    border: 2px solid #00a0d2; /* Blue */
	border-radius: 21px;
	background: var(--font);
	color: var(--background);
	text-align: center;
}
body .front-page-section .kontakt-formular .container .form-wrapper .input-fields {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	.input-wrapper {
		width: 100%;
	p {
		display: flex;
		flex-direction: column;
		@media (min-width: 600px) {
			flex-direction: row;
			gap: 1rem;
		}
	}	
	} 
	input {
		background: var(--background);
		border-radius: 21px;
		border: 1px solid var(--font);
		width: 100%;
		color: var(--font);
	}
	input::placeholder {
			color: var(--font);
		}
	p {
		width: 100%;
		span textarea {
		width: 100%;
			background: var(--background);
		border-radius: 21px;
		border: 1px solid var(--font);
		padding: 1rem;
		color: var(--font);
	}
		textarea::placeholder {
			color: var(--font);
		}
	}
	.acceptance-button  {
		width: 100%;
		p {
			width: 100%;
			span .wpcf7-list-item {
				margin: 0;
			 label {
			width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 1rem;
		input {
		border: 1px solid var(--font);
			width: 1.5rem;
			height: 1.5rem;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			cursor: pointer;
			}
		span {
			font-size: 1rem;
			text-align: left;
		}
			}
				}
			} 
	}
	.submit-button input {
		background: var(--font);
	color: var(--background);
		padding: 0.2rem 1.5rem;
		font-size: 1.2rem;
		width: auto;
	} 
	.submit-button input:hover {
		background: var(--background);
		border-color: var(--hover-color);
	color: var(--hover-color);
	}
}g
body .front-page-section .kontakt-formular .container .kontakt-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	p:last-of-type {
		font-size: 1.8rem;
		font-family: "Nazare", serif;
		text-decoration: none;
		color: var(--font);
	}
}
/* FAQ section */
.faq {
	padding: 0 10%;
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	h2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	@media (min-width: 1000px) {
		padding: 0 20%;
	}
}
.faq details {
    border: 1px solid var(--font);
    border-radius: 21px;
    padding: 1em;
    margin-bottom: 1em;
    background: #f9f9f9;
	transition: all 300ms ease-in-out;
  }
.faq details p {
	text-align: left;
	padding-left: 1rem;
}
.faq summary {
    font-weight: 300;
    cursor: pointer;
    outline: none;
    list-style: none;
  }
.faq summary::-webkit-details-marker {
    display: none;
  }
.faq summary::before {
    content: ":pfeil_vorwärts:";
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
  }
.faq details[open] summary::before {
    transform: rotate(90deg);
  }
.faq details[open] {
    background: var(--accent-color);
  }

/* Kontakt Seite */
body .contact-page {
	padding: 3rem;
	width: 100%;
	animation: 800ms ease-out slideUp;	
}

body .contact-page .kontakt-formular .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	position: relative;
	padding: 0 5%;
	@media (min-width: 800px) {
		padding: 0 10%;
	}
	h2 {
		font-size: 2.5rem;
		line-height: 2.5rem;
		font-family: "Nazare", serif;
		color: var(--font);
	}
	p {
		line-height: 1.5rem;
	}
	.kontakt-close {
		all: unset;
		width: 1.2rem;
		height: 1.2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed; 
		top: 1rem;
		right: 1rem;
		cursor: pointer;
		background: var(--font);
		color: var(--background);
		border: 1px solid var(--font);
		border-radius: 50%;
		font-size: 1rem;
		padding: 0.2rem;
	}
	.kontakt-close:hover {
		background: var(--background);
		color: var(--font);
		transition: 300ms ease-in-out;
	}
}
body .contact-page .kontakt-formular .container .form-wrapper {
	width: 80vw;
	@media (min-width: 800px) {
		width: 700px;
	}
}
body .contact-page .kontakt-formular .container .form-wrapper .input-fields {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	.input-wrapper p {
		display: flex;
		flex-direction: column;
		@media (min-width: 600px) {
			flex-direction: row;
			gap: 1rem;
		}
	}
	input {
		border-radius: 21px;
		border: 1px solid var(--font);
		width: 100%;
		color: var(--font);
	}
	p {
		width: 100%;
		span textarea {
		width: 100%;
		border-radius: 21px;
		border: 1px solid var(--font);
		padding: 1rem;
		color: var(--font);
	}
	}
	.acceptance-button {
		border: 1px solid black;
	}
	.submit-button input {
		background: var(--font);
	color: var(--light-background);
		padding: 0.5rem 2rem;
	} 
}
/* Datenschutz */
body .page-section .legal-page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	h1, h2, h3, h4, p {
		text-align: left;
	}
	ul {
		font-size: 1rem;
	}
}
body .test-page {
	width: 100%;
	height: 200vh;
	padding: 2.5rem;
	background: transparent;
opacity: 1;
background-image: repeating-radial-gradient( circle at var(--x, 50%) var(--y, 50%), #480eed, #480eed 1px, transparent 1px, transparent 20px ), linear-gradient(transparent, #e5fa70);
	background-attachment: fixed;
	transition: background-image 0.2s linaer;
	article {
		width: 100%;
		height: 80vh;
		margin: 0 auto;
		background: var(--background);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		border: 1px solid #932af5;
		h1 {
			color: #932af5;
			font-size: 2rem;
		}
	}
}

body .test-page-2 {
	width: 100%;
	height: 200vh;
	padding: 2.5rem;
	background: #eeffb3;
	background-image: url("https://www.lima-webdesign.de/wp-content/uploads/2025/04/lines.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	article {
		width: 100%;
		height: 80vh;
		margin: 0 auto;
		background: var(--background);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		border: 1px solid #932af5;
		h1 {
			color: #932af5;
			font-size: 2rem;
		}
	}
}