/*
 * Gemeinsame Subpage-Styles
 * Für Leistungen, Über uns, Galerie, Service-Seiten
 */

/* Verhindere Scrollen auf Body-Ebene (Wrapper ist fixed) */
body {
	overflow: hidden;
}

/* Fixed Wrapper für vollständige Viewport-Ausfüllung */
#wrapper {
	position: fixed;
	inset: 0;
	height: 100dvh;
	width: 100%;
}

/* Zentrierte Page mit Padding und CSS-Variablen */
.page {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	padding: var(--pad-y, 1.8rem) var(--pad-x, 1.2rem);
	--footer-h: 5.8rem;
}

/* Glassmorphism Card mit responsiver Max-Höhe */
.card {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 16px;
	padding: 2rem 2.2rem 2.2rem;
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	width: min(880px, 92vw);
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	max-height: calc(100dvh - 2 * var(--pad-y, 1.8rem) - var(--footer-h, 5.8rem));
	overflow: auto;
	text-align: center;
	color: #fff;
}

/* Responsive Breakpoints */
@media (max-width: 980px) {
	.page {
		--pad-y: 1.6rem;
		--pad-x: 1rem;
		--footer-h: 5.4rem;
	}
	.card {
		width: min(860px, 94vw);
		padding: 1.8rem 1.8rem 2rem;
	}
}

@media (max-width: 736px) {
	.page {
		--pad-y: 1.2rem;
		--pad-x: 0.9rem;
		--footer-h: 5rem;
	}
	.card {
		width: min(840px, 94vw);
		padding: 1.4rem 1.2rem 1.8rem;
		border-radius: 14px;
	}
}

@media (max-width: 480px) {
	.page {
		--pad-y: 1rem;
		--pad-x: 0.8rem;
		--footer-h: 4.6rem;
	}
	.card {
		padding: 1.2rem 1rem 1.5rem;
	}
}

/* Service-spezifische Komponenten (einheitlich für Unterseiten) */
.svc-title{font-size:2rem; margin:0; font-weight:700;}
.heading-rule{
	width:70px;
	height:3px;
	border:0;
	background:#F1D09A !important;
	background-image: none !important;
	mix-blend-mode: normal !important;
	opacity:1 !important;
	border-radius:3px;
	margin:.6rem auto 1.1rem;
}
.svc-media{display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,0.25); width:min(360px,64%); margin:0 auto 1rem; padding:0.8rem;}
.svc-media img{width:100%; height:auto; display:block; border-radius:10px;}
.svc-text{opacity:.96; max-width:56ch; margin:0 auto; text-align:left;}
.svc-text p{margin:0 0 1rem; line-height:1.58;}
.svc-text h2 { text-align: center; margin-top: 0.25rem; margin-bottom: 0.75rem; font-weight:700; }
/* Center the lead line (used on Parkett: "Die Kraft der Natur – spürbar mit jedem Schritt.") */
.svc-text .lead{font-size:1.15rem; font-weight:600; margin-bottom:.6rem; text-align: center;}
.svc-text .tagline,
.svc-media + .tagline,
.card > .tagline {
	display:block;
	/* Make tagline match the readable text column width */
	width: 100%;
	max-width: 56ch;
	box-sizing: border-box;
	margin: .8rem auto 0;
	font-weight:600;
	color:#fff;
	background:rgba(0,0,0,0.12);
	padding:.5rem .8rem;
	border-radius:8px;
	font-size:1.05rem;
	line-height:1.4;
	text-shadow:0 1px 1px rgba(0,0,0,0.45);
	box-shadow:0 8px 22px rgba(0,0,0,0.35);
}
/* Center the text inside the tagline so the two-line highlight is centered */
.svc-text .tagline span, .svc-text .tagline { text-align: center; display: block; }
.svc-text .tagline span { margin: 0; }
@media (max-width:736px){ .svc-text .tagline{font-size:1rem; display:block; padding:.45rem .7rem;} }