@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900&display=swap");
@import url("fontawesome-all.min.css");

/* Theme variables */
:root {
	--brand: #724C29; /* primary brand color */
	--brand-transparent: rgba(114,76,41,0); /* transparent stop for overlays */
	--footer-h: 3rem; /* global footer height, reduced so copyright sits closer to viewport bottom */
}

#header-names .role-subtitle {
	font-weight: 800;
	/* roughly two steps larger; responsive across sizes */
	font-size: clamp(1.1rem, 2.6vw, 1.4rem);
	letter-spacing: 0.01em;
	margin: 0.25rem 0 0.1rem;
}

/* Horizontal divider between logo and name */
.logo-divider {
	width: 90px;
	margin: 1.2rem auto 1.2rem auto;
	border: none;
	border-top: 3px solid #fff;
	opacity: 0.85;
}
/* Rundes Unternehmens-Icon im Header */
.header-photo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.5rem;
}
/* --------------------------------------------------
   Home-Seite zusätzliche vertikale Abstände
   -------------------------------------------------- */
#header-names { display: flex; flex-direction: column; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.6rem); }
#header-names .header-photo { margin-bottom: clamp(0.8rem, 2vw, 1.2rem); }
#header-names h1 { margin: 0; }
#header-names .role-subtitle { margin: 0; }
#icon-list { margin-top: clamp(2.2rem, 6vw, 4rem); }
/* Extra Offset für CTA Positionierungsfunktion (JS liest die Custom Property aus) */
#home-cta-appointment { --cta-extra-offset: clamp(48px, 10vw, 96px); }
@media (max-width: 740px) { #icon-list { margin-top: clamp(1.8rem, 7vw, 3.4rem); } #home-cta-appointment { --cta-extra-offset: clamp(42px, 12vw, 84px); } }
.profile-round {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,0.12);
	/* dezenter weißer Halo hinter dem Logo für bessere Trennung zum Hintergrund */
	filter: drop-shadow(0 0 20px rgba(255,255,255,0.50));
}

/* Services: Überschriften + Subkategorie-Grid */
.services-sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin-top: 0.5rem;
}

.service-section {
	text-align: left;
}

.service-heading {
	font-weight: 400; /* nicht fett */
	font-size: clamp(1.7rem, 4vw, 2.4rem); /* nochmal zwei Größen größer */
	letter-spacing: 0.01em;
	margin: 0.25rem 0 0.7rem;
	padding-bottom: 0.35rem;
	display: block;
	position: relative;
	text-align: center;
}

.service-heading::after {
	content: "";
	display: block;
	width: min(380px, 60%);
	min-width: 120px;
	height: 3px;
	margin: 0.25rem auto 0; /* zentriert unter dem Text */
	background: #F1D09A !important; /* solid accent color */
	background-image: none !important;
	mix-blend-mode: normal !important;
	border-radius: 2px;
	opacity: 1 !important;
}

.subcategory-figure {
	display: block;
	background: transparent;
	margin: 0; /* kein Margin, der visuelle Linien erzeugen könnte */
}

.subcategory-figure img {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.85); /* leicht transparentes Weiß verhindert visuelle Linien-Effekte */
	border-radius: 10px;
	box-shadow: none; /* kein Shadow im Standard-Zustand, vermeidet störende Linien */
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
	margin: 0; /* kein Margin am Bild selbst */
}

.subcategory-caption {
	text-align: center;
	font-weight: 400;
	font-size: 0.95rem;
	margin-top: 0.5rem;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

/* Grid layout for subcategory tiles */
.subcategory-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* zwei Bilder nebeneinander auf Handy */
	column-gap: 1rem; /* horizontaler Abstand zwischen Spalten */
	row-gap: 1.5rem; /* größerer vertikaler Abstand zwischen Zeilen, vermeidet sichtbare Linien */
	width: 100%;
}

@media (min-width: 840px) {
	.subcategory-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* drei Spalten auf größeren Bildschirmen */
	}
}

/* Responsive Bildhöhen für Unterkategorien */
@media (min-width: 480px) {
	.subcategory-figure img { height: 140px; }
}
@media (min-width: 768px) {
	.subcategory-figure img { height: 180px; }
}
@media (min-width: 1200px) {
	.subcategory-figure img { height: 220px; }
}

.subcategory-card:focus .subcategory-figure img,
.subcategory-card:hover .subcategory-figure img {
	transform: scale(1.05); /* nur Zoom, kein vertikales Verschieben (verhindert Striche) */
	box-shadow: 0 8px 20px rgba(255, 255, 255, 0.35); /* dezenterer Shadow beim Hover */
	filter: brightness(1.05);
}

/*
	Aerial by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #fff;
		overflow: hidden;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		color: #fff;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 15pt;
		font-weight: 300 !important;
		letter-spacing: -0.025em;
		line-height: 1.75em;
	}

	a {
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		color: inherit;
		outline: 0;
		text-decoration: none;
	}

		a:hover {
			border-color: transparent;
		}

/* Icon */

	.icon {
		text-decoration: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;

			/* ensure icon glyphs render above overlay */
			position: relative;
			z-index: 6110;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Wrapper */

	@-moz-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	#wrapper {
		-moz-animation: wrapper 3s forwards;
		-webkit-animation: wrapper 3s forwards;
		-ms-animation: wrapper 3s forwards;
		animation: wrapper 3s forwards;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

/* BG */

	#bg {
		-moz-animation: bg 60s linear infinite;
		-webkit-animation: bg 60s linear infinite;
		-ms-animation: bg 60s linear infinite;
		animation: bg 60s linear infinite;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	/* Set your background with this */

		background: var(--brand) url('/assets/css/images/homepage.avif');
		background-repeat: repeat-x; /* Desktop: horizontales Durchlaufen ermöglichen */
		background-position: center bottom;
		background-size: auto 50vh; /* Bildhöhe = 50% Viewport, Breite automatisch, kein Stretch */
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
		width: 6750px; /* 3x Bildbreite für Endlos-Scroll */
	}

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	#bg {
		background-size: auto 50vh;
		width: 6750px;
	}

/* Overlay */

	@-moz-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	#overlay {
		/* Kein Fade: Overlay sofort sichtbar */
		-moz-animation: none;
		-webkit-animation: none;
		-ms-animation: none;
		animation: none;
		background-attachment: fixed, fixed;
		/* Tieferer Fade: Vollfarbe bis 52%, dann langsamer Abfall bis ~84% für nahezu unsichtbare Kante */
		background-image: url("images/overlay.svg"), linear-gradient(to bottom,
			#7D6047 0%,
			#7D6047 52%,
			rgba(125,96,71,0.92) 58%,
			rgba(125,96,71,0.82) 64%,
			rgba(125,96,71,0.70) 70%,
			rgba(125,96,71,0.56) 75%,
			rgba(125,96,71,0.40) 80%,
			rgba(125,96,71,0.26) 83%,
			rgba(125,96,71,0.14) 84.5%,
			rgba(125,96,71,0.06) 86%,
			rgba(125,96,71,0.0) 88%
		);
		background-position: center center, top left;
		background-repeat: no-repeat, no-repeat;
		background-size: cover, auto;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
		width: 100%;
	}

/* Removed ::before tint; tint is now a background layer behind overlay.svg */

/* Main */

	#main {
		height: 100%;
		left: 0;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
	}

		#main:before {
			content: '';
			display: inline-block;
			height: 100%;
			margin-right: 0;
			vertical-align: middle;
			width: 1px;
		}

/* Header */

	@-moz-keyframes header {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@-webkit-keyframes header {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@-ms-keyframes header {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@keyframes header {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@-moz-keyframes nav-icons {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@-webkit-keyframes nav-icons {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@-ms-keyframes nav-icons {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	@keyframes nav-icons {
		0% {
			-moz-transform: translate3d(0,1em,0);
			-webkit-transform: translate3d(0,1em,0);
			-ms-transform: translate3d(0,1em,0);
			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}

	#header {
		display: block;
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 90%;
		/* ensure header and its icons sit above the overlay */
		z-index: 6000;
		/* Enable container queries for header content */
		container-type: inline-size;
	}

		#header h1 {
			font-size: 4.35em;

			font-weight: 900;
			letter-spacing: -0.035em;
			line-height: 1em;
		}

		#header p {
			font-size: 1.25em;
			margin: 0.75em 0 0.25em 0;
			opacity: 0.75;
		}

		#header nav {
			margin: 1.5em 0 0 0;
		}

			#header nav li {

				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
				display: inline-block;
				height: 5.35em;
				line-height: 5.885em;
				opacity: 0;
				position: relative;
				top: 0;
				width: 5.35em;
				-moz-animation: nav-icons 0.75s ease-out forwards;
				-webkit-animation: nav-icons 0.75s ease-out forwards;
				-ms-animation: nav-icons 0.75s ease-out forwards;
				animation: nav-icons 0.75s ease-out forwards;
			}

				#header nav li:nth-child(1) {
					-moz-animation-delay: 2.5s;
					-webkit-animation-delay: 2.5s;
					-ms-animation-delay: 2.5s;
						animation-delay: 1s;
				}

				#header nav li:nth-child(2) {
					-moz-animation-delay: 2.75s;
					-webkit-animation-delay: 2.75s;
					-ms-animation-delay: 2.75s;
						animation-delay: 1.25s;
				}

				#header nav li:nth-child(3) {
					-moz-animation-delay: 3s;
					-webkit-animation-delay: 3s;
					-ms-animation-delay: 3s;
						animation-delay: 1.5s;
				}

				#header nav li:nth-child(4) {
					-moz-animation-delay: 3.25s;
					-webkit-animation-delay: 3.25s;
					-ms-animation-delay: 3.25s;
						animation-delay: 1.75s;
				}

				#header nav li:nth-child(5) {
					-moz-animation-delay: 3.5s;
					-webkit-animation-delay: 3.5s;
					-ms-animation-delay: 3.5s;
						animation-delay: 2s;
				}

				#header nav li:nth-child(6) {
					-moz-animation-delay: 3.75s;
					-webkit-animation-delay: 3.75s;
					-ms-animation-delay: 3.75s;
					animation-delay: 3.75s;
				}

				#header nav li:nth-child(7) {
					-moz-animation-delay: 4s;
					-webkit-animation-delay: 4s;
					-ms-animation-delay: 4s;
					animation-delay: 4s;
				}

				#header nav li:nth-child(8) {
					-moz-animation-delay: 4.25s;
					-webkit-animation-delay: 4.25s;
					-ms-animation-delay: 4.25s;
					animation-delay: 4.25s;
				}

				#header nav li:nth-child(9) {
					-moz-animation-delay: 4.5s;
					-webkit-animation-delay: 4.5s;
					-ms-animation-delay: 4.5s;
					animation-delay: 4.5s;
				}

				#header nav li:nth-child(10) {
					-moz-animation-delay: 4.75s;
					-webkit-animation-delay: 4.75s;
					-ms-animation-delay: 4.75s;
					animation-delay: 4.75s;
				}

			#header nav a {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-touch-callout: none;
				border: 0;
				display: inline-block;
			}


				#header nav a:before {
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
					border-radius: 100%;
					border: 1px solid rgba(255,255,255,0.30);
					background-color: rgba(10,22,39,0.18);
					box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.18);
					display: block;
					font-size: 1.75em;
					height: 2.5em;
					line-height: 2.5em;
					position: relative;
					text-align: center;
					top: 0;
					width: 2.5em;
				}

/* (reverted) */

				#header nav a:hover {
					font-size: 1.1em;
				}

					#header nav a:hover:before {
						background-color: rgba(10,22,39,0.26);
						border-color: rgba(255,255,255,0.34);
						color: #fff;
					}

				#header nav a:active {
					font-size: 0.95em;
					background: none;
				}

						#header nav a:active:before {
							background-color: rgba(10,22,39,0.34);
							border-color: rgba(255,255,255,0.38);
							color: #fff;
						}

				#header nav a span {
					/* hide by default; will show label on hover/focus */
					display: none !important;
				}

		/* Labels under start page icons (hover only) */
		#header nav a {
			position: static;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			gap: 0.35em;
		}

/* Startseiten-Icons: wieder schlicht weiß (ohne Farbverlauf) */
#icon-list a:before {
	background: none; /* entfernen von custom background-image Ebenen */
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor; /* Safari/Chrome: Glyph wieder mit Textfarbe rendern */
	-webkit-text-stroke: 0; /* keine künstliche Kontur */
	color: #fff; /* Icon glyph weiß */
	/* Standard-Bubble: deutlich mehr Deckkraft */
	background-color: rgba(10,22,39,0.55); /* vorher 0.32 */
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.18);
	border-color: rgba(255,255,255,0.30);
    
	/* ensure the bubble and glyph are above overlay but below sticky FAB */
	position: relative;
	z-index: 6115;
}
#icon-list a:hover:before {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
	background-color: rgba(10,22,39,0.66); /* vorher 0.42 */
	border-color: rgba(255,255,255,0.34);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 26px rgba(0,0,0,0.20);
}
#icon-list a:active:before {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
	background-color: rgba(10,22,39,0.75); /* vorher 0.50 */
	border-color: rgba(255,255,255,0.38);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 22px rgba(0,0,0,0.22);
}

/* Center the start icon list and get 3+2 pattern on smaller screens */
/* Start icon list as centered, wrapping tiles */
#icon-list {
	/* Einheitliche Basisgröße: schrumpft sanft mit Viewportbreite */
	--tile-col: clamp(7.8rem, 16vw, 9.4rem);
	--tile-gap-x: 0.5em;
	--list-pad: 0.55rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 0.55em var(--tile-gap-x);
	list-style: none;
	padding: 0 var(--list-pad);

	/* create stacking context and sit above overlay (overlay is at default layer)
	   but keep below sticky-nav (z-index:9999) */
	position: relative;
	z-index: 6100;
}
/* Make grid items behave predictably inside the grid */
#icon-list > li {
	margin: 0 !important;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: auto;
	line-height: normal;
	flex: 0 0 var(--tile-col);
	width: var(--tile-col) !important;
}

/* Flex fallback: no manual offset needed — centering each row naturally yields the 3+2 stagger */

/* Give anchors a tiny horizontal padding so column is minimal wider than text */
#icon-list > li > a { padding-inline: 0.15rem; }
		#header nav a .label {
			position: static;
			transform: none;
			background: none;
			border: none;
			padding: 0;
			border-radius: 0;
			white-space: nowrap;
			pointer-events: none;
			display: block !important; /* always show label */
			opacity: 0.9;
			color: #fff;
			font-size: 0.8em;
			line-height: 1.1;
		}

/* Responsive spacing for start icons to avoid overlap on small screens */
@media (max-width: 980px) {
	#icon-list { --tile-col: clamp(7.0rem, 18vw, 8.6rem); }
}

@media (max-width: 640px) {
	#icon-list { --tile-col: clamp(6.4rem, 22vw, 7.6rem); }
}
@media (max-width: 480px) {
	#icon-list { --tile-col: clamp(5.8rem, 27vw, 7.1rem); }
}

/* Auto-compact mode for low-height viewports (e.g., phone landscape) */
@media (max-height: 580px) and (orientation: landscape), (max-height: 420px) {
	body { overflow: auto; }
	#wrapper { position: static; height: auto; min-height: 100dvh; }
	#main { position: static; height: auto; min-height: 100%; text-align: center; }
	#footer { position: static; height: auto; line-height: 1.6; padding: 0.9rem 0; }
	/* Icon row tweaks to avoid overlap */
	#header nav { margin-top: 0.8em; }
	#header nav li { height: auto; line-height: normal; margin: 0 0.5em 1.1em; }
}


/* Footer */

	#footer {
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
		bottom: 0;
		cursor: default;
		height: 6em;
		left: 0;
		line-height: 8em;
		position: absolute;
		text-align: center;
		width: 100%;
	    transition: opacity 0.3s ease;
	}

		/* Smaller footer text (two steps down) */
		#footer .copyright {
			font-size: 0.75em;
		}

/* Footer links: no dotted underline */
#footer a { border-bottom: none; }
/* Consent checkbox: make visible even though inputs have appearance:none globally */
.consent-field input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: middle;
	accent-color: #F1D09A;
}
.consent-field label { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Contact form: services checklist */
.services-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.4rem 0.8rem;
	margin-top: 0.3rem;
}
.services-checklist label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	opacity: 0.98;
	padding: 0.5rem 0.7rem;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	cursor: pointer;
	position: relative;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.services-checklist input[type="checkbox"] {
	accent-color: #F1D09A;
}

/* Hover/focus affordances */
.services-checklist label:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.35); }
.services-checklist label:has(input:focus-visible) { outline: 2px solid #F1D09A; outline-offset: 2px; }

/* Selected state: stronger visual highlight */
.services-checklist label:has(input:checked) {
  background: rgba(241, 208, 154, 0.16);
  border-color: rgba(241, 208, 154, 0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 2px rgba(241,208,154,0.25);
  font-weight: 600;
}
.services-checklist label:has(input:checked)::after {
  content: '\2713'; /* checkmark */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #F1D09A;
  font-weight: 700;
}



/* Animation for header up and icons down */
.header-animate-up {
  animation: headerUp 0.7s forwards;
}
@keyframes headerUp {
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}
.icons-animate-down {
  animation: iconsDown 0.7s forwards;
}
@keyframes iconsDown {
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

/* Service reveal container */
#services-field {
	/* full-viewport layer that centers its content */
	position: fixed;
	inset: 0;
	display: none;
	z-index: 200; /* ensure overlay sits above corner logo/FAB so footer links remain clickable */
	/* Use grid centering to avoid transform conflicts */
	place-items: center;
	padding: 1rem; /* breathing room near edges on small screens */
	/* Allow clicks on the real footer below the overlay outside the card */
	pointer-events: none;
}
#services-field.services-hidden {
	display: none !important;
}
#services-field.services-visible {
	display: grid !important;
}
.services-card {
	/* glassmorphism container */
	/* container for internal responsive rules */
	container-type: inline-size;
	display: grid;                 /* allow vertical centering of rows */
	grid-auto-rows: min-content;   /* rows size to content */
	align-content: center;         /* center the block of rows vertically */
	position: relative;            /* for absolute active icon */
	background: rgba(10, 22, 39, 0.18);
	border-radius: 20px;
	padding: 2.5rem 2.2rem;
	width: min(960px, 90vw);
	box-shadow: 0 20px 50px rgba(0,0,0,0.35);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border: 1px solid rgba(255,255,255,0.30);
	max-height: calc(100vh - 8rem); /* leave space above footer */
	/* do not enforce a larger min-height; keep existing box size */
	overflow: auto;
    /* equalize padding; avoid extra bottom push */
    /* bottom padding equals top implicitly via shorthand above */
	/* Re-enable interactions on the overlay content */
	pointer-events: auto;
}

/* Brush-Ansicht: Inhalte am oberen Rand starten, nicht vertikal zentrieren */
.services-card.services-card--stack {
	align-content: start;
}
.services-active-icon {
	position: absolute;
	top: 1rem;
	left: 1rem;
	text-align: left;
	margin: 0;
	opacity: 0.9;
}
.services-active-icon .icon {
	font-size: 2.6rem;
	display: inline-flex;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.30);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Service field fade-in: animate the card only */
#services-field.services-fade-in .services-card {
	animation: cardFadeIn 0.7s forwards;
}
@keyframes cardFadeIn {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Service box styling */
.services-list {
	display: grid;
	/* Use fixed column widths to allow centering of tracks */
	grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
	justify-content: center; /* center the grid tracks inside the card */
	align-content: center; /* center rows vertically when there's extra space */
	gap: 1.5rem;
	/* center the whole list block within the card when extra space exists */
	margin-block: auto;
}
.service-box {
	display: grid;
	grid-template-columns: 40px 1fr 40px; /* icon | centered label | ghost balance */
	align-items: center;
	column-gap: 0.9rem;
	/* slightly darker for better readability */
	background: rgba(10,22,39,0.30);
	border-radius: 14px;
	padding: 1.2rem 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
	border: 1px solid rgba(255,255,255,0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
	cursor: pointer;
	position: relative; /* for tooltip positioning */
}
.service-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.34);
	background: rgba(10,22,39,0.36);
	border-color: rgba(255,255,255,0.34);
}
.service-icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	border-radius: 10px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.32);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
	font-size: 1.1rem;
	color: #ffffff; /* keep pictogram white */
}
.service-label { grid-column: 2; justify-self: center; color: #ffffff; text-align: center; }

/* Progressive enhancement using container queries */
@supports (container-type: inline-size) {
	/* Header icons scale within header width */
	#header { --icon-gap: clamp(0.3rem, 1.2cqw, 0.7rem); }
	#header nav a { gap: var(--icon-gap); }
	#header nav a:before {
		width: clamp(2.0em, 6cqw, 2.7em);
		height: clamp(2.0em, 6cqw, 2.7em);
		line-height: clamp(2.0em, 6cqw, 2.7em);
		font-size: clamp(1.35em, 3.6cqw, 1.9em);
	}
	#header nav a .label { font-size: clamp(0.72em, 1.8cqw, 0.9em); }

	/* Services card grid adapts to card width */
	.services-card { --svc-gap: clamp(1rem, 2.4cqw, 1.6rem); }
	.services-card .services-list { gap: var(--svc-gap); }
	@container (max-width: 740px) {
		.services-card .services-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
	}
	@container (max-width: 500px) {
		.services-card .services-list { grid-template-columns: 1fr; }
	}

	/* Start icons: Staggered rows (3/4/5 columns) */
	/* Switch from flex fallback to grid when containers are supported */
	#icon-list {
		display: grid;
		/* default to 3 columns, grow via container queries */
		grid-template-columns: repeat(3, var(--tile-col));
		justify-content: center;
		column-gap: var(--tile-gap-x);
		row-gap: 0.4em;
	}
	#icon-list > li {
		display: grid;
		place-items: center;
		width: var(--tile-col) !important;
		transform: none; /* reset any previous transforms */
	}
	/* Skip 4 columns to preserve 3+2 stagger pattern */
	/* 5 columns when there's room (show all in one row) */
	@container (min-width: calc(5 * var(--tile-col) + 4 * var(--tile-gap-x) + 2 * var(--list-pad))) {
		#icon-list { grid-template-columns: repeat(5, var(--tile-col)); }
	}
	/* 2 columns when narrow */
	@container (max-width: calc(3 * var(--tile-col) + 2 * var(--tile-gap-x) + 2 * var(--list-pad) - 1px)) {
		#icon-list { grid-template-columns: repeat(2, var(--tile-col)); }
		/* reset any stagger to avoid odd offsets */
		#icon-list > li { transform: none; }
	}
	/* 1 column when very narrow */
	@container (max-width: calc(2 * var(--tile-col) + 1 * var(--tile-gap-x) + 2 * var(--list-pad) - 1px)) {
		#icon-list { grid-template-columns: repeat(1, var(--tile-col)); }
	}

	/* Stagger second row so tiles sit between the ones above */
	/* 3 columns: rows of 3 -> even rows are items 4-6, 10-12, 16-18, ... */
	#icon-list > li:nth-child(6n + 4),
	#icon-list > li:nth-child(6n + 5),
	#icon-list > li:nth-child(6n + 6) {
		transform: translateX(calc((var(--tile-col) + var(--tile-gap-x)) / 2));
	}
	/* 4 columns override removed intentionally */
	/* 5 columns overrides */
	@container (min-width: calc(5 * var(--tile-col) + 4 * var(--tile-gap-x) + 2 * var(--list-pad))) {
	/* reset 4-col pattern and any direct 3-col targeting */
	#icon-list > li:nth-child(8n + 5),
	#icon-list > li:nth-child(8n + 6),
	#icon-list > li:nth-child(8n + 7),
	#icon-list > li:nth-child(8n + 8),
	#icon-list > li:nth-child(4),
	#icon-list > li:nth-child(5) { transform: none; }
		/* 5 columns: even rows are items 6-10, 16-20, 26-30, ... */
		#icon-list > li:nth-child(10n + 6),
		#icon-list > li:nth-child(10n + 7),
		#icon-list > li:nth-child(10n + 8),
		#icon-list > li:nth-child(10n + 9),
		#icon-list > li:nth-child(10n + 10) {
			transform: translateX(calc((var(--tile-col) + var(--tile-gap-x)) / 2));
		}
	}
}

/* Tooltip shown on hover using data-desc attribute */
/* service-box tooltip intentionally removed */

/* landing icon removed */

/* Simplified responsive icon layout: 5 columns on wide screens, 3 columns otherwise */
@media (min-width: 1024px) {
	#icon-list { grid-template-columns: repeat(5, var(--tile-col)) !important; row-gap: 0.6rem; column-gap: clamp(0.9rem, 2.2vw, 2.1rem); }
	#icon-list > li { transform: none !important; }
}
@media (max-width: 1023.98px) {
	#icon-list { grid-template-columns: repeat(3, var(--tile-col)) !important; }
	/* 3+2 Pattern: zweite Reihe zentriert unter den drei oberen Icons */
	#icon-list > li:nth-child(1) { grid-row: 1; grid-column: 1; }
	#icon-list > li:nth-child(2) { grid-row: 1; grid-column: 2; }
	#icon-list > li:nth-child(3) { grid-row: 1; grid-column: 3; }
	#icon-list > li:nth-child(4) { grid-row: 2; grid-column: 1 / span 2; justify-self: center; }
	#icon-list > li:nth-child(5) { grid-row: 2; grid-column: 2 / span 2; justify-self: center; }
}

/* Strong override: ensure 3+2 mapping applies whenever the icon list is reduced to
	 three columns (covers several nearby breakpoints). This forces Contact (4th)
	 to sit centered under columns 1+2 and "Über uns" (5th) under columns 2+3. */
@media (max-width: 1149.98px) and (min-width: 520px) {
	#icon-list {
		display: grid !important;
		grid-template-columns: repeat(3, var(--tile-col)) !important;
		justify-content: center !important;
		gap: var(--icon-gap) !important;
	}
	#icon-list > li { transform: none !important; }
	#icon-list > li:nth-child(1) { grid-row: 1 !important; grid-column: 1 !important; justify-self: center !important; }
	#icon-list > li:nth-child(2) { grid-row: 1 !important; grid-column: 2 !important; justify-self: center !important; }
	#icon-list > li:nth-child(3) { grid-row: 1 !important; grid-column: 3 !important; justify-self: center !important; }
	#icon-list > li:nth-child(4) { grid-row: 2 !important; grid-column: 1 / span 2 !important; justify-self: center !important; }
	#icon-list > li:nth-child(5) { grid-row: 2 !important; grid-column: 2 / span 2 !important; justify-self: center !important; }
}

/* Force centering of the lower two icons in any multi-row/wrapped layout
   where the icon list reduces to 3 (or fewer) columns. This overrides
   other positioning rules that may left-align them in edge cases. */
@media (max-width: 1149.98px) {
  #icon-list > li:nth-child(4),
  #icon-list > li:nth-child(5) {
    justify-self: center !important;
    transform: none !important;
    margin-inline: 0 !important;
    grid-column: auto !important;
  }
}
@media (max-width: 420px) {
	/* Even on very small phones, maintain 3 columns with slightly tighter tiles */
	#icon-list { --tile-col: clamp(5.4rem, 25vw, 6.4rem); }
	/* Slightly tighter tile width but still 3 columns */
	#icon-list { --tile-col: clamp(5.8rem, 27vw, 6.8rem); }
}

/* Slightly increase space between icon and label on wider screens */
@media (min-width: 1024px) {
	#icon-list > li > a { gap: 0.6em; }
}

/* Sticky bottom-right navigation (floating action button) */
.sticky-nav {
	position: fixed;
	right: clamp(12px, 2.5vw, 22px);
	bottom: clamp(12px, 2.5vh, 22px);
	z-index: 9999; /* always on top of overlays and content */
	display: flex;
	gap: 10px;
	align-items: center;
}
.sticky-nav a { border-bottom: none; }
.sticky-nav .fab {
	display: inline-flex;
	width: clamp(48px, 6.2vw, 56px);
	height: clamp(48px, 6.2vw, 56px);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(10,22,39,0.34);
		border: 2px solid rgba(255,255,255,0.90); /* thin white ring */
	box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
	.sticky-nav .fab img:not(.fab-img) {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
	}
.sticky-nav .fab:hover {
	transform: translateY(-2px) scale(1.04);
	background: rgba(10,22,39,0.40);
	border-color: rgba(255,255,255,0.45);
	box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}
.sticky-nav .fab:focus-visible {
	outline: 2px solid #F1D09A;
	outline-offset: 2px;
}
.sticky-nav .fab .icon { font-size: 1.25rem; }

/* Kontakt FAB Container */
.contact-fab-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --------------------------------------------------
   ICON SCALING REWORK (SPEC-DRIVEN)
   --------------------------------------------------
   Ziele:
   - Klare Maximalgröße bei sehr breiten Viewports (5 Icons in einer Reihe).
   - Flüssiges Schrumpfen bis zu definierter Minimalgröße.
   - Saubere Umschaltpunkte: 5 -> (3 + 2) -> 3 -> 2 -> 1 Spalte.
   - Einfach nachvollziehbare Formeln statt verschachtelter Container-Queries.

   Definitionen:
   --icon-tile-max: 9.6rem  (≈ 154px bei 16px Root)  Maximale Blasengröße.
   --icon-tile-min: 5.2rem  (≈ 83px) Minimale Blasengröße für Mehrspalten.
   --icon-tile-narrow: 4.6rem (≈ 74px) Einspalten-Minimum für sehr kleine Breiten.

   Fluid Size:
   --tile-col = clamp(var(--icon-tile-min), 12vw, var(--icon-tile-max));
   Für sehr schmale Geräte (<= 380px) wird auf --icon-tile-narrow reduziert.

   Breakpoints (Viewport-basiert):
   ≥ 1150px: 5 Spalten (maximale Darstellung)
   760px – 1149px: 3 Spalten mit 3+2 Pattern (Icons 4 & 5 zentriert in Reihe 2)
   520px – 759px: 3 Spalten (keine 3+2 Überlagerung, einfaches Raster)
   380px – 519px: 2 Spalten
   < 380px: 1 Spalte (kleinste Größe)

   Formel zur Breiten-Anforderung für 5 Spalten:
   benötigte Breite ≈ (5 * tile) + (4 * gap) + (2 * horizontal padding)
   Bei tile≈9.6rem (153.6px), gap≈1.1rem (~17.6px), padding≈0.55rem (~8.8px):
   ≈ (5*153.6) + (4*17.6) + (2*8.8) ≈ 768 + 70.4 + 17.6 ≈ 856px
   Wir wählen 1150px bewusst konservativ höher, um Reserven für Text/Glyph-Scale zu haben.
*/

:root {
	--icon-tile-max: 9.6rem;
	--icon-tile-min: 5.2rem;
	--icon-tile-narrow: 4.6rem;
	--icon-gap: clamp(0.6rem, 1.6vw, 1.1rem);
}

/* Basis: starte mit 5 Spalten (wird durch Media Queries überschrieben) */
#icon-list {
	display: grid !important;
	grid-template-columns: repeat(5, var(--tile-col));
	justify-content: center;
	gap: var(--icon-gap);
	--tile-col: clamp(var(--icon-tile-min), 12vw, var(--icon-tile-max));
}
#icon-list > li { width: var(--tile-col) !important; height: auto; }

/* 3 Spalten + zweite Reihe (3+2) */
@media (max-width: 1149.98px) and (min-width: 760px) {
	/* Rückgängig: individuelles Spalten-Mapping entfernt. 
	   Stattdessen: Automatisches Wrapping zentriert beide Reihen. */
	#icon-list {
		grid-template-columns: repeat(3, var(--tile-col));
		justify-content: center;
		/* keine individuellen grid-row/-column Zuweisungen -> natürliche Reihenfolge */
	}
	#icon-list > li { justify-self: center; }
}

/* 3 Spalten ohne Pattern (kompakter) */
@media (max-width: 759.98px) and (min-width: 520px) {
	#icon-list { grid-template-columns: repeat(3, var(--tile-col)); }
	#icon-list > li { grid-column: auto !important; justify-self: center; }
}

/* 2 Spalten */
@media (max-width: 519.98px) and (min-width: 380px) {
	#icon-list { grid-template-columns: repeat(2, var(--tile-col)); }
	#icon-list > li { justify-self: center; }
}

/* 1 Spalte (kleinste Geräte) */
@media (max-width: 379.98px) {
	#icon-list { --tile-col: clamp(var(--icon-tile-narrow), 40vw, var(--icon-tile-min)); grid-template-columns: 1fr; }
	#icon-list > li { width: 100% !important; }
}

/* Sicherstellen, dass ältere transform Muster deaktiviert sind */
#icon-list > li { transform: none !important; }

/* Abstand zwischen Icon und Label auf wirklich großen Bildschirmen etwas erhöhen */
@media (min-width: 1400px) {
	#icon-list > li > a { gap: 0.7em; }
}

/* --------------------------------------------------
   Zusätzliche Reduktion für sehr geringe Höhe (Landscape Phones/Tablets)
   Ziel: iPhone Querformat ~430-460px Höhe: Icons kleiner, alles sichtbar.
   -------------------------------------------------- */
@media (orientation: landscape) and (max-height: 560px) {
	#icon-list { --tile-col: clamp(4.4rem, 10vw, 5.4rem); }
	#icon-list > li > a:before {
		/* kleinere Kreisblase für extrem niedrige Höhen */
		width: clamp(2.1em, 6.2vw, 2.4em);
		height: clamp(2.1em, 6.2vw, 2.4em);
		line-height: clamp(2.1em, 6.2vw, 2.4em);
		font-size: clamp(1.2em, 3.2vw, 1.55em);
	}
	#header nav a .label { font-size: clamp(0.62em, 1.4vw, 0.75em); }
}
@media (orientation: landscape) and (max-height: 460px) {
	#icon-list { --tile-col: clamp(4.0rem, 11vw, 4.8rem); }
	#icon-list > li > a:before {
		width: clamp(1.9em, 5.8vw, 2.2em);
		height: clamp(1.9em, 5.8vw, 2.2em);
		line-height: clamp(1.9em, 5.8vw, 2.2em);
		font-size: clamp(1.05em, 2.9vw, 1.38em);
	}
	#header nav a .label { font-size: clamp(0.58em, 1.3vw, 0.70em); }
}
/* Dynamische Klassen über JS (ergänzend zu Media Queries) */
body.is-landscape-lowheight #icon-list { --tile-col: clamp(3.8rem, 12vw, 4.6rem); }
body.is-landscape-lowheight #icon-list > li > a:before {
	width: clamp(1.8em, 5.4vw, 2.1em);
	height: clamp(1.8em, 5.4vw, 2.1em);
	line-height: clamp(1.8em, 5.4vw, 2.1em);
	font-size: clamp(0.95em, 2.6vw, 1.25em);
}
body.is-landscape-lowheight #header nav a .label { font-size: clamp(0.55em, 1.2vw, 0.68em); }
/* Dynamische Header-Kompression (JS setzt .header-compress) */
/* CSS-only Kompressionsstufen (Landscape + geringe Höhe) */
@media (orientation: landscape) and (max-height: 620px) {
	#header h1 { font-size: clamp(2.2rem, 6.2vw, 3.0rem); letter-spacing: -0.02em; }
	#header .role-subtitle { font-size: clamp(0.85rem, 3vw, 1.05rem); margin-top: 0.35rem; }
	#header .logo-divider { width: 60px; margin: 0.8rem auto; }
	#header .profile-round { width: 90px; height: 90px; }
	#icon-list { --tile-col: clamp(4.2rem, 11vw, 5.0rem); margin-top: clamp(1.2rem, 4vw, 2.0rem); row-gap: 0.35rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
	#header { top: 5%; transform: translate(-50%, 0) scale(0.92); transform-origin: top center; }
	#header h1 { font-size: clamp(2.0rem, 5.4vw, 2.6rem); letter-spacing: -0.015em; }
	#header .role-subtitle { font-size: clamp(0.78rem, 2.5vw, 0.95rem); }
	#header .profile-round { width: 82px; height: 82px; }
	#icon-list { --tile-col: clamp(3.8rem, 10.5vw, 4.6rem); row-gap: 0.3rem; margin-top: clamp(0.9rem, 3.2vw, 1.4rem); column-gap: clamp(0.4rem, 1.4vw, 0.7rem); }
	#icon-list > li > a:before { width: clamp(1.7em, 5vw, 2.0em); height: clamp(1.7em, 5vw, 2.0em); line-height: clamp(1.7em, 5vw, 2.0em); font-size: clamp(0.95em, 2.4vw, 1.2em); }
	#header nav a .label { font-size: clamp(0.56em, 1.15vw, 0.68em); }
}
@media (orientation: landscape) and (max-height: 460px) {
	#header { top: 3.5%; transform: translate(-50%, 0) scale(0.84); transform-origin: top center; }
	#header h1 { font-size: clamp(1.85rem, 5vw, 2.4rem); }
	#header .role-subtitle { font-size: clamp(0.72rem, 2.2vw, 0.88rem); }
	#header .profile-round { width: 74px; height: 74px; }
	#icon-list { --tile-col: clamp(3.4rem, 10vw, 4.3rem); margin-top: clamp(0.6rem, 2.8vw, 1.1rem); column-gap: clamp(0.35rem, 1.2vw, 0.6rem); row-gap: 0.25rem; }
	#icon-list > li > a:before { width: clamp(1.6em, 4.8vw, 1.9em); height: clamp(1.6em, 4.8vw, 1.9em); line-height: clamp(1.6em, 4.8vw, 1.9em); font-size: clamp(0.9em, 2.2vw, 1.1em); }
	#header nav a .label { font-size: clamp(0.50em, 1.05vw, 0.62em); }
}

/* Kontakt FAB (Button statt Link) */
.sticky-nav .contact-fab {
	border: 2px solid rgba(255,255,255,0.90);
	cursor: pointer;
	outline: none;
	position: relative;
	overflow: hidden;
}

/* Chef.avif Bild im FAB – responsive Skalierung im Kreis
   - Wir nutzen eine interne Skalierung via transform statt übergroße width/height
   - Bild bleibt rund durch den Button-Container mit overflow:hidden */


.fab-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Verschiebe das Bild weiter nach rechts im Kreis (feinjustiert) */
	object-position: 87% 42%; /* 5% weiter nach rechts */
	/* kleine Anpassung am translate um horizontale Verschiebung zu kompensieren */
	transform: translate(-42%, -50%) scale(1.8);
	transition: transform 0.25s ease;
}

/* Note: .profile-round styling removed to restore previous homepage image sizing */

/* Optional Hover leicht vergrößern */
.contact-fab:hover .fab-img { transform: translate(-42%, -50%) scale(calc(var(--fab-scale, 1.55) + 0.06)); }

/* Kontakt-Avatar – extrahierte Inline-Styles in Klasse; responsive über clamp 
   Desktop: 300x300px, automatische Skalierung für kleinere Geräte */
.contact-avatar {
	width: 300px !important;
	height: 300px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	/* leicht nach rechts verschieben */
	object-position: 60% center;
	border-radius: 50%;
	margin-bottom: 2.2rem;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 24px 0 rgba(255,255,255,0.18),0 4px 32px 0 rgba(80,120,255,0.18);
	filter: drop-shadow(0 0 16px #b6d0ff88);
	background: rgba(255,255,255,0.08);
}
@media (max-width: 1200px) {
	.contact-avatar { width: 280px !important; height: 280px !important; }
}
@media (max-width: 768px) {
	.contact-avatar { width: 240px !important; height: 240px !important; }
}
@media (max-width: 480px) {
	.contact-avatar { width: 180px !important; height: 180px !important; }
}

/* Match about page avatar to contact avatar sizing and style */
.about-avatar {
	width: 300px !important;
	height: 300px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	margin-bottom: 2.2rem;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 24px 0 rgba(255,255,255,0.18),0 4px 32px 0 rgba(80,120,255,0.18);
	filter: drop-shadow(0 0 16px #b6d0ff88);
	background: rgba(255,255,255,0.08);
}
@media (max-width: 1200px) {
	.about-avatar { width: 280px !important; height: 280px !important; }
}
@media (max-width: 768px) {
	.about-avatar { width: 240px !important; height: 240px !important; }
}
@media (max-width: 480px) {
	.about-avatar { width: 180px !important; height: 180px !important; }
}

/* Kontakt-Menü (öffnet sich oberhalb, leicht rechts vom Icon) */
.contact-menu {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.contact-menu-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
	pointer-events: all !important;
}

/* Icon-only Buttons - Gleicher Stil wie Startseiten-Icons */
.contact-menu-icon-btn {
	display: inline-flex;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: rgba(10, 22, 39, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 24px rgba(0, 0, 0, 0.22);
	transition: all 0.2s ease-in-out;
	border-bottom: none !important;
	font-size: 0.85rem;
	animation: iconFadeIn 0.3s ease backwards;
}

.contact-menu-icon-btn:nth-child(1) { animation-delay: 0.05s; }
.contact-menu-icon-btn:nth-child(2) { animation-delay: 0.1s; }
.contact-menu-icon-btn:nth-child(3) { animation-delay: 0.15s; }

@keyframes iconFadeIn {
	from {
		opacity: 0;
		transform: scale(0.7) translateY(8px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.contact-menu-icon-btn:hover {
	background-color: rgba(10, 22, 39, 0.48);
	border-color: rgba(255, 255, 255, 0.50);
	transform: scale(1.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 28px rgba(0, 0, 0, 0.26);
}

.contact-menu-icon-btn:active {
	transform: scale(0.95);
}

/* WhatsApp Icon bekommt grünen Akzent beim Hover */
.contact-menu-icon-btn:hover .fa-whatsapp {
	color: #25D366;
}

@media (max-width: 768px) {
	.contact-menu {
		left: 0;
	}
	
	.contact-menu-icon-btn {
		width: 35px;
		height: 35px;
		font-size: 0.82rem;
	}
}

@media (max-width: 768px) {
	.contact-menu {
		right: 50%;
		transform: translateX(50%) translateY(10px);
	}
	
	.contact-menu-visible {
		transform: translateX(50%) translateY(0) !important;
	}
	
	.contact-menu-icon-btn {
		width: 40px;
		height: 40px;
		font-size: 0.95rem;
	}
}

@media (max-width: 768px) {
	.contact-menu {
		right: 50%;
		transform: translateX(50%) translateY(10px);
	}
	
	.contact-menu-visible {
		transform: translateX(50%) translateY(0) !important;
	}
}

.icon-hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Wide */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
			}

		/* BG */

			@-moz-keyframes bg {
				0% {
					-moz-transform: translate3d(0,0,0);
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}

				100% {
					-moz-transform: translate3d(-1500px,0,0);
					-webkit-transform: translate3d(-1500px,0,0);
					-ms-transform: translate3d(-1500px,0,0);
					transform: translate3d(-1500px,0,0);
				}

	}

		@-webkit-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-1500px,0,0);
				-webkit-transform: translate3d(-1500px,0,0);
				-ms-transform: translate3d(-1500px,0,0);
				transform: translate3d(-1500px,0,0);
			}
			}

		@-ms-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-1500px,0,0);
				-webkit-transform: translate3d(-1500px,0,0);
				-ms-transform: translate3d(-1500px,0,0);
				transform: translate3d(-1500px,0,0);
			}
		}

		@keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-1500px,0,0);
				-webkit-transform: translate3d(-1500px,0,0);
				-ms-transform: translate3d(-1500px,0,0);
				transform: translate3d(-1500px,0,0);
			}
		}

		#bg {
			background-size: auto 50vh;
			width: 4500px;
		} }

/* Normal */

	@media screen and (max-width: 1280px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

		/* BG */

			@-moz-keyframes bg {
				0% {
					-moz-transform: translate3d(0,0,0);
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}

				100% {
					-moz-transform: translate3d(-750px,0,0);
					-webkit-transform: translate3d(-750px,0,0);
					-ms-transform: translate3d(-750px,0,0);
					transform: translate3d(-750px,0,0);
				}

	}

		@-webkit-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-750px,0,0);
				-webkit-transform: translate3d(-750px,0,0);
				-ms-transform: translate3d(-750px,0,0);
				transform: translate3d(-750px,0,0);
			}
			}

		@-ms-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-750px,0,0);
				-webkit-transform: translate3d(-750px,0,0);
				-ms-transform: translate3d(-750px,0,0);
				transform: translate3d(-750px,0,0);
			}
		}

		@keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-750px,0,0);
				-webkit-transform: translate3d(-750px,0,0);
				-ms-transform: translate3d(-750px,0,0);
				transform: translate3d(-750px,0,0);
			}
		}

		#bg {
			background-size: auto 50vh;
			width: 2250px;
		} }

/* Mobile */

	@media screen and (max-width: 736px) {

		/* Basic */

			body {
				min-width: 320px;
			}

			body, input, select, textarea {
				font-size: 11pt;
			}

		/* BG */

			@-moz-keyframes bg {
				0% {
					-moz-transform: translate3d(0,0,0);
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}

				100% {
					-moz-transform: translate3d(-300px,0,0);
					-webkit-transform: translate3d(-300px,0,0);
					-ms-transform: translate3d(-300px,0,0);
					transform: translate3d(-300px,0,0);
				}

	}

		@-webkit-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-300px,0,0);
				-webkit-transform: translate3d(-300px,0,0);
				-ms-transform: translate3d(-300px,0,0);
				transform: translate3d(-300px,0,0);
			}
			}

		@-ms-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-300px,0,0);
				-webkit-transform: translate3d(-300px,0,0);
				-ms-transform: translate3d(-300px,0,0);
				transform: translate3d(-300px,0,0);
			}
		}

		@keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-300px,0,0);
				-webkit-transform: translate3d(-300px,0,0);
				-ms-transform: translate3d(-300px,0,0);
				transform: translate3d(-300px,0,0);
			}
		}

		#bg {
			background-size: auto 50vh;
			width: 900px;
		}

	/* Header */

		#header h1 {
			font-size: 2.5em;
		}

		#header p {
			font-size: 1em;
		}

		#header nav {
			font-size: 1em;
		}

			#header nav a:hover {
				font-size: 1em;
			}

			#header nav a:active {
				font-size: 1em;
			} }

/* Mobile (Portrait) */

	@media screen and (max-width: 480px) {

		/* BG */

			@-moz-keyframes bg {
				0% {
					-moz-transform: translate3d(0,0,0);
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}

				100% {
					-moz-transform: translate3d(-412.5px,0,0);
					-webkit-transform: translate3d(-412.5px,0,0);
					-ms-transform: translate3d(-412.5px,0,0);
					transform: translate3d(-412.5px,0,0);
				}

	}

		@-webkit-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-412.5px,0,0);
				-webkit-transform: translate3d(-412.5px,0,0);
				-ms-transform: translate3d(-412.5px,0,0);
				transform: translate3d(-412.5px,0,0);
			}
			}

		@-ms-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-412.5px,0,0);
				-webkit-transform: translate3d(-412.5px,0,0);
				-ms-transform: translate3d(-412.5px,0,0);
				transform: translate3d(-412.5px,0,0);
			}
		}

		@keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-412.5px,0,0);
				-webkit-transform: translate3d(-412.5px,0,0);
				-ms-transform: translate3d(-412.5px,0,0);
				transform: translate3d(-412.5px,0,0);
			}
		}

		#bg {
			background-size: auto 50vh;
			width: 1237.5px;
		}

	/* Header */

		#header nav {
			padding: 0 1em;
		} }

/* -----------------------------
	 Service textbox (centered)
	 ----------------------------- */
.service-textbox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 1.5rem 0;
}
.service-textbox .sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.service-input {
	width: min(720px, 92%);
	max-width: 100%;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
			/* #A89B91 -> rgba(168,155,145,alpha) */
			border: 1px solid rgba(168,155,145,0.45);
	background: rgba(255,255,255,0.12);
			color: #A89B91; /* requested color */
			caret-color: #A89B91;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	font-size: 1rem;
}
.service-input::placeholder {
	color: #A89B91;
}
.service-input:focus {
			border-color: rgba(168,155,145,0.65);
			box-shadow: 0 0 0 3px rgba(168,155,145,0.20);
	background: rgba(255,255,255,0.16);
}

/* Tablet and down */
@media screen and (max-width: 736px) {
	.service-textbox { margin-bottom: 1.25rem; }
	.service-input { width: min(560px, 94%); font-size: 0.95rem; }
}

/* Mobile portrait */
@media screen and (max-width: 480px) {
	.service-input { width: 100%; font-size: 0.95rem; padding: 0.85rem 1rem; }
}

/* About (Über uns) content inside services field */
.service-content { width: 100%; }
.about-wrap { max-width: 720px; margin: 0 auto 0.5rem auto; text-align: center; }
.about-avatar {
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	border: 2px solid rgba(255,255,255,0.35);
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	margin-bottom: 0.75rem;
}
.about-title { margin: 0 0 0.5rem 0; }
.about-text { margin: 0 0 0.25rem 0; opacity: 0.95; }
@media screen and (max-width: 736px) { .about-avatar { width: 96px; height: 96px; } }

/* Contact (Kontakt) content inside services field */
.contact-wrap { width: 100%; max-width: 720px; margin: 0 auto; text-align: left; padding-top: clamp(0.8rem, 3vw, 1.2rem); }
.contact-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  display: block; margin: 0 auto 0.75rem auto;
}
.contact-info {
	text-align: center;
	font-size: 0.95rem;
	opacity: 0.92;
	margin: 0 0 0.6rem 0;
}
.contact-info .nowrap { white-space: nowrap; }
/* remove spacer rules; reverting to previous layout */
.contact-cta {
	display: block;              /* allow auto margins to center */
	width: max-content;          /* shrink to content width */
	margin: 0.6rem auto 0.9rem;  /* center horizontally */
	padding: 0.7rem 1.1rem;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(255,255,255,0.14);
	color: #fff;
	font-weight: 700;
	/* normalize look across devices */
	-webkit-appearance: none;
	appearance: none;
	font-size: clamp(0.95rem, 1.8vw, 1.05rem);
	line-height: 1.1;
	white-space: nowrap;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.18);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	position: relative;
}
.contact-cta:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.contact-cta:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; }
.contact-cta:disabled, .contact-cta.contact-cta-hidden { display: none; }
/* Chevron indicator */
/* Chevron removed as requested */
.contact-cta::after { content: none !important; }
/* Visual feedback when form is expanded */
.contact-cta[aria-expanded="true"] {
	background: rgba(255,255,255,0.20);
	border-color: rgba(255,255,255,0.55);
	transform: translateY(-1px);
}
/* Extra spacing for the start-page CTA under the icon tiles */
#header #home-cta-appointment {
	margin-top: clamp(1.1rem, 3.8vw, 2.2rem);
}
/* Start page CTA show/hide + animate-in like the icon tiles */
#home-cta-appointment.home-cta-hidden { opacity: 0; pointer-events: none; transform: translateY(30px); }
#home-cta-appointment.home-cta-animate-in { animation: homeCtaIn 0.75s ease-out forwards; }
@keyframes homeCtaIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* Ensure CTA margins consistent */
.contact-cta { margin: 0.6rem auto 0.9rem; }

/* Rectangular CTA variant for thank-you page (slightly transparent, not rounded) */
.cta-rect {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border-radius: 12px; /* rounded rectangle */
	border: 2px solid rgba(255,255,255,0.95); /* clear white frame */
	background: rgba(255,255,255,0.06);
	color: #fff;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cta-rect:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,1); transform: translateY(-1px); }


/* Reveal animation for form */
.contact-form { will-change: opacity, transform; }
.contact-form-reveal { animation: cform 420ms cubic-bezier(.2,.8,.2,1); }
@keyframes cform { from { opacity: 0; transform: translateY(-12px) scale(0.985);} to { opacity:1; transform: translateY(0) scale(1);} }

/* Hide animation for form (used before setting hidden) */
.contact-form-hide { animation: cformOut 320ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cformOut { from { opacity: 1; transform: translateY(0) scale(1);} to { opacity:0; transform: translateY(-10px) scale(0.985);} }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.contact-form-reveal, .contact-form-hide { animation: none !important; }
	.contact-cta { transition: none; }
}
.contact-actions {
	display: grid;
	/* Desktop: 4 Spalten */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .7rem;
	margin-bottom: 1rem; /* top spacer will handle extra vertical centering */
	overflow-x: auto; /* allow horizontal scroll only if really needed */
	-webkit-overflow-scrolling: touch;
}
.contact-action {
	display: flex;
	align-items: center;
	gap: .48rem;
	background: rgba(255,255,255,0.12);
	border:1px solid rgba(255,255,255,0.25);
	border-radius: 12px;
	padding: .5rem .8rem;
	border-bottom: none; /* override link underline */
	text-decoration: none;
	min-width: 0;
	justify-content: center;
	/* sanftere, gut lesbare Skalierung als Fallback */
	font-size: clamp(.8rem, 1.4vw, 1rem);
}
.contact-action .icon { font-size: 1em; }
/* immer einzeilig, ohne Clipping */
.contact-action span { white-space: nowrap; word-break: keep-all; line-height: 1.1; }
.contact-form { display: grid; gap: .9rem; }
.contact-form[hidden] { display: none !important; }
.contact-form .field { display: grid; gap: .35rem; }
.contact-form label { font-size: .9rem; opacity: .9; }
.contact-input { width: 100%; padding: .8rem .9rem; border-radius: 10px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.contact-form textarea#cf-message.contact-input { padding-bottom: calc(.8rem + 8px); }
.contact-input::placeholder { color: rgba(255,255,255,0.75); }
.contact-input:focus { outline: none; border-color: rgba(255,255,255,0.45); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.contact-input.selectlike {
	cursor: pointer;
	user-select: none;
	caret-color: transparent;
	/* Chevron indicator (down) */
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
			<path d='M6 9l6 6 6-6' stroke='%23F1D09A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
		</svg>");
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: right 12px center;
	padding-right: calc(0.9rem + 22px); /* leave room for chevron */
}
.contact-input.selectlike[aria-expanded="true"] {
	border-color: rgba(255,255,255,0.6);
	background-color: rgba(255,255,255,0.06);
	/* Chevron indicator (up) when expanded */
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
			<path d='M6 15l6-6 6 6' stroke='%23F1D09A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
		</svg>");
}
.services-checklist.collapse { margin-top: 0.5rem; }
.services-checklist.collapse[hidden] { display: none !important; }
.contact-form .actions { display: flex; justify-content: flex-end; }

/* Narrow screens: keep 4 columns, just tighten spacing/padding a bit */
@media (max-width: 480px) {
		.contact-actions { gap: .5rem; }
		.contact-action { padding: .42rem .56rem; }
	/* no spacer tweaks needed after revert */
}
.contact-btn {
	padding: .7rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.12);
	color: #fff;
	cursor: pointer; /* interactive by default */
}

/* Disabled state shows not-allowed */
.contact-btn[disabled],
.contact-btn:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

/* Mobile-only close (X) above the form) */
.contact-form-close {
	position: sticky;
	top: 0.4rem; right: 0;
	margin-top: 0.8rem; /* moved up by ~0.5cm total (≈19px) */
	margin-left: auto;
	justify-self: end;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.12);
	color: #fff;
	width: 36px; height: 36px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
	-webkit-appearance: none; appearance: none;
	z-index: 2;
}
.contact-form-close span { font-size: 1.2rem; line-height: 1; }

/* Validation styles for contact form */
.contact-form .field.invalid .contact-input {
	border-color: #e04c4c !important;
	box-shadow: 0 0 0 3px rgba(224,76,76,0.12);
	animation: field-pulse 900ms ease-in-out 0s 1;
}
.contact-form .field.invalid label { color: inherit; }

@keyframes field-pulse {
	0% { transform: translateY(0); }
	30% { transform: translateY(-2px); }
	60% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

/* Inline error hint that persists until the user corrects the field */
.contact-form .field { position: relative; }

/* Speech-bubble style inline hint that sits above the input (matches screenshot)
   - centered horizontally relative to the field
   - dark rounded bubble with small downward caret
   - persists until the field is corrected */
.error-inline {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* place the bubble directly above the input line (small overlap)
	   so it visually 'sits' on the line rather than floating farther above */
	bottom: calc(100% - 6px);
	display: inline-block;
	/* Use the site's standard bubble styling (same as start-icon bubbles)
	   for visual consistency */
	background-color: rgba(10,22,39,0.66);
	color: #fff;
	padding: 0.45rem 0.9rem;
	border-radius: 18px;
	font-size: 0.95rem;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.18);
	border: 1px solid rgba(255,255,255,0.30);
	white-space: nowrap;
	z-index: 80;
	pointer-events: none; /* don't block clicks on the input beneath */
}
.error-inline::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(10,22,39,0.66);
}

/* Consent-specific: show bubble below the checkbox (caret points up) */
.error-inline.consent-inline {
	bottom: auto;
	top: calc(100% + 8px);
}
.error-inline.consent-inline::after {
	top: auto;
	bottom: 100%;
	border-top: none;
	border-bottom: 10px solid rgba(10,22,39,0.66);
}

/* Responsive: allow bubble to wrap and not overflow on very small screens */
@media (max-width: 420px) {
	.error-inline { white-space: normal; max-width: calc(100vw - 48px); font-size: 0.92rem; }
}

/* Generic validation popup base - neutral, non-positional to avoid
   layout flicker. Specific placements (inline/centered) are provided
   by additional modifier classes. */
.validation-popup {
	display: block;
	background: #fff7f7;
	color: #6b1a1a;
	border: 1px solid #f1c0c0;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	z-index: 60;
	font-size: 0.95rem;
	/* avoid implicit transforms/positions here to prevent initial
	   paint placing it at the form's right edge then moving it */
	will-change: transform, opacity;
}

@keyframes popup-in {
	from { opacity: 0; transform: scale(0.96) translateY(-6px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Place popup container relative to form */
.contact-form { position: relative; }

/* Centered modal-style validation popup (used on contact form) */
.validation-popup.centered {
	/* center on screen immediately */
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	/* solid, high-contrast panel for readability */
	background: #ffffff;
	color: #13202b; /* dark brand color for contrast */
	border: 1px solid rgba(19,32,43,0.08);
	padding: 0.9rem 1.2rem;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.14);
	z-index: 99999;
	font-size: 1rem;
	text-align: left;
	min-width: 260px;
	max-width: 92vw;
	/* modern fade+scale entrance */
	opacity: 1;
	transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
	transform-origin: center center;
}
.validation-popup.centered.hide {
	opacity: 0;
	transform: translate(-50%, -54%) scale(0.98);
}

/* subtle entrance keyframes (used if animation preferred) */
@keyframes popup-in-centered {
	from { opacity: 0; transform: translate(-50%, -54%) scale(0.98); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* On very small phones, nudge a bit more */
@media (max-width: 520px) {
	.contact-form-close { top: 0.6rem; margin-top: 1.4rem; }
}
/* visible on all sizes; hover/focus affordance */
.contact-form-close:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); }
.contact-form-close:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; }
/* Helper: hide CTA when form is open on mobile */
.contact-cta.contact-cta-hidden { display: none !important; }

/* Floating back arrow (same as Leistungen) */
.sticky-back { position: fixed; left: clamp(12px, 2.5vw, 22px); top: clamp(12px, 2.5vh, 22px); z-index: 9999 !important; }
.sticky-back a { border-bottom: none; }
.sticky-back .fab { display:inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; background: rgba(10,22,39,0.34); border: 2px solid rgba(255,255,255,0.90); box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; border-bottom: none; }
.sticky-back .fab:hover { transform: translateY(-2px) scale(1.04); background: rgba(10,22,39,0.40); border-color: rgba(255,255,255,0.45); box-shadow: 0 14px 28px rgba(0,0,0,0.32); }
.sticky-back .fab:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; }

/* Modern per-tile responsive scaling so labels stay on one line */
@supports (container-type: inline-size) {
	.contact-action { container-type: inline-size; }
	.contact-action {
		/* skaliert moderat anhand Kachelbreite */
		font-size: clamp(0.78rem, 4.2cqw, 1rem);
	}
	@container (max-width: 220px) {
		.contact-action { gap: .44rem; padding: .4rem .54rem; }
	}
}

/* Breakpoints: Tablet/Phone mehr Platz pro Kachel, damit Labels einzeilig bleiben */
@media (max-width: 900px) {
  .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Auch auf sehr kleinen Handys zwei Spalten beibehalten */
@media (max-width: 520px) {
	.contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Services: if a real image is present inside the media figure,
   hide the fallback Font Awesome image icon to avoid double images */
.svc-media > img ~ .icon,
.svc-media picture ~ .icon { display: none !important; }


/* Final mobile overrides: keep 3+2 structure, make tiles proportional to width */
@media (max-width: 736px) {
	/* Compute tile width from viewport so 3 columns always fit; keep gaps proportional */
	#icon-list {
		--icon-gap: clamp(0.5rem, 2.8vw, 0.9rem);
		column-gap: var(--icon-gap);
		row-gap: var(--icon-gap);
		/* header width is ~90vw; use that to compute 3 equal tracks */
		--tile-col: calc((min(90vw, 780px) - 2 * var(--icon-gap)) / 3);
		grid-template-columns: repeat(3, var(--tile-col)) !important;
		justify-content: center;
		/* badge diameter tied to tile width (smaller) */
		--badge: calc(var(--tile-col) * 0.54);
	}
	#icon-list > li { width: var(--tile-col) !important; }
	#header nav a { gap: clamp(0.4rem, 2.2vw, 0.6rem); }
	#header nav a:before {
		width: var(--badge) !important;
		height: var(--badge) !important;
		line-height: var(--badge) !important;
		font-size: calc(var(--badge) * 0.52) !important;
	}
	#header nav a .label { font-size: clamp(0.90rem, 2.2vw, 1.02rem) !important; }
}

@media (max-width: 480px) {
	#icon-list {
		--icon-gap: clamp(0.48rem, 3.6vw, 0.9rem);
		column-gap: var(--icon-gap);
		row-gap: var(--icon-gap);
		--tile-col: calc((min(92vw, 680px) - 2 * var(--icon-gap)) / 3);
		--badge: calc(var(--tile-col) * 0.52);
	}
	#header nav a:before {
		width: var(--badge) !important;
		height: var(--badge) !important;
		line-height: var(--badge) !important;
		font-size: calc(var(--badge) * 0.52) !important;
	}
	#header nav a .label { font-size: clamp(0.92rem, 2.6vw, 1.04rem) !important; }
}

/* Mobile: enforce 3+2 visual mapping on small viewports that keep 3 columns
	 (ensures Contact and Über uns are centered under the intended columns). */
@media (max-width: 736px) {
	body #header nav ul#icon-list {
		grid-template-columns: repeat(3, var(--tile-col)) !important;
		justify-content: center !important;
	}
	body #header nav ul#icon-list > li {
		transform: none !important;
		justify-self: center !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}
	body #header nav ul#icon-list > li:nth-child(1) { grid-row: 1 !important; grid-column: 1 !important; }
	body #header nav ul#icon-list > li:nth-child(2) { grid-row: 1 !important; grid-column: 2 !important; }
	body #header nav ul#icon-list > li:nth-child(3) { grid-row: 1 !important; grid-column: 3 !important; }
	body #header nav ul#icon-list > li:nth-child(4) { grid-row: 2 !important; grid-column: 1 / span 2 !important; }
	body #header nav ul#icon-list > li:nth-child(5) { grid-row: 2 !important; grid-column: 2 / span 2 !important; }
	body #header nav ul#icon-list > li > a:before {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* Extra guard for very narrow phones: keep the 3+2 mapping if the calc-based
	 tile width already produces three tracks (prevents left-alignment of last row) */
@media (max-width: 480px) {
	body #header nav ul#icon-list > li:nth-child(4) { grid-row: 2 !important; grid-column: 1 / span 2 !important; }
	body #header nav ul#icon-list > li:nth-child(5) { grid-row: 2 !important; grid-column: 2 / span 2 !important; }
}

/* Ensure footer copyright and links are visible (white) on all pages */
#footer,
#footer .copyright,
#footer .copyright a {
    color: #ffffff !important;
}

/* Einheitliche Footer-Typografie */
#footer {
	font-size: 0.85rem; /* einheitliche Basisgröße */
	line-height: 1.4;
	font-weight: 400;
}

#footer .copyright {
	font-size: 0.85rem !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	opacity: 0.98;
}

/* Footer: fix font-size to 10px site-wide as requested */
#footer,
#footer .copyright,
#footer .copyright a {
	font-size: 10px !important;
	line-height: 1.2 !important;
}

#footer .copyright a {
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: inherit !important;
}

/* --- Strong footer layout override (sit on bottom, avoid overlap) --- */
/* Place at end to override earlier page/subpage rules */
#wrapper {
	/* Ensure main content leaves space for fixed footer */
	padding-bottom: var(--footer-h, 3rem);
}

	#footer {
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	/* use the site-wide footer height variable (reduced) */
	height: var(--footer-h, 3rem);
	min-height: 2.6rem;
	box-sizing: border-box;
	display: flex;
	/* push content to the bottom of the footer container */
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55));
	z-index: 220; /* above overlay but below any global UI with higher z */
	/* minimal bottom padding so the line sits visually near the viewport edge */
	padding: 0.12rem 1rem;
}

#footer .copyright{
	margin: 0;
	font-size: 10px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	opacity: 0.98 !important;
	color: #fff !important;
}

/* Make sure links inside footer inherit the small size and remain readable */
#footer a{ color: #fff !important; text-decoration: none !important; font-weight: 500 !important; }

/* Responsive: reduce footer height on very small screens */
@media (max-width: 480px){
	#wrapper { padding-bottom: calc(var(--footer-h, 3rem) - 1.0rem); }
	#footer { height: calc(var(--footer-h, 3rem) - 1.0rem); font-size: 0.85rem; }
}

/* Force consistent font-family & smoothing for footer (override per-page styles) */
#footer,
#footer .copyright,
#footer .copyright a {
	font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* Defensive: ensure footer text doesn't inherit large scaling from container cards */
#footer { font-size: 10px !important; }

/* Footer final size fixed to 10px */
#footer .copyright { font-size: 10px !important; letter-spacing: .25px; }
#footer .copyright { font-size: 10px !important; }
#footer a { font-size: 10px !important; }

/* Final override: force exact 3+2 placement for the five home icons
	 (ensures Contact is centered under Leistungen+Galerie and Über uns
		centered under Galerie+Produktpartner) across nearby breakpoints.
	 This lives at the end of the file so it wins against earlier rules. */
@media (min-width: 520px) and (max-width: 1149.98px) {
	/* Ensure the icon list uses a 3-column grid */
	body #header nav ul#icon-list {
		display: grid !important;
		grid-template-columns: repeat(3, var(--tile-col)) !important;
		justify-content: center !important;
		column-gap: var(--icon-gap) !important;
		row-gap: calc(var(--icon-gap) / 1.25) !important;
	}

	/* Reset transforms and ensure each li is centered by default */
	body #header nav ul#icon-list > li {
		transform: none !important;
		margin-inline: 0 !important;
		justify-self: center !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* Explicit mapping: 1-3 on first row, 4 spans 1-2 centered, 5 spans 2-3 centered */
	body #header nav ul#icon-list > li:nth-child(1) { grid-row: 1 !important; grid-column: 1 !important; }
	body #header nav ul#icon-list > li:nth-child(2) { grid-row: 1 !important; grid-column: 2 !important; }
	body #header nav ul#icon-list > li:nth-child(3) { grid-row: 1 !important; grid-column: 3 !important; }
	body #header nav ul#icon-list > li:nth-child(4) { grid-row: 2 !important; grid-column: 1 / span 2 !important; }
	body #header nav ul#icon-list > li:nth-child(5) { grid-row: 2 !important; grid-column: 2 / span 2 !important; }

	/* Also ensure the anchor pseudo-bubbles remain centered */
	body #header nav ul#icon-list > li > a:before {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* --- Small, low-risk fix: scale FA glyphs proportional to tile/bubble
	 and center lower icons in the problematic intermediate range. --- */
@media (min-width: 574px) and (max-width: 764px) {
	/* Slightly adjust tile size in this range so bubbles don't overflow */
	#icon-list {
		--tile-col: clamp(6.0rem, 14vw, 8.2rem);
		--badge: calc(var(--tile-col) * 0.54);
	}

	/* Make sure the bubble is a flex container and glyphs are centered
		 and sized relative to the bubble. The !important here is intentional
		 to override older cascade or inline styles the page may produce. */
	#icon-list a:before,
	#icon-list > li > a:before,
	.icon:before {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: var(--badge) !important;
		height: var(--badge) !important;
		line-height: var(--badge) !important;
		font-size: calc(var(--badge) * 0.52) !important;
	}

	/* Force the two lower icons to center themselves in the second row
		 when the layout wraps to 3+2 — avoids slight left/right offsets. */
	#icon-list > li:nth-child(4),
	#icon-list > li:nth-child(5) {
		justify-self: center !important;
		transform: none !important;
		grid-column: auto !important;
	}
}