/* ==========================================================================
   EHS Heizsysteme – zentrales Stylesheet
   Design-Tokens und Komponenten gemäß Design-Referenz (EHS Heizsysteme.dc.html)
   ========================================================================== */

/* ---------- Fonts (lokal gehostet) ---------- */

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Spectral';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/spectral-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Spectral';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/spectral-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Spectral';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/fonts/spectral-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Spectral';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/spectral-400-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
	--bg: #F7F2EA;
	--bg-panel: #FBF7F0;
	--bg-card: #FFFFFF;
	--ink: #211B14;
	--text: #221E19;
	--text-strong: #3B342B;
	--text-soft: #5C5349;
	--text-mid: #6B6154;
	--text-dim: #7A6E5E;
	--text-muted: #8A7E6C;
	--text-faint: #9A8E7C;
	--orange: #E0661C;
	--orange-hover: #C7550F;
	--orange-light: #F0902B;
	--orange-text: #9C3F09;
	--beige-chip: #F2E4D2;
	--beige-hover: #EFE7DA;
	--border: #ECE3D6;
	--border-soft: #EBE2D3;
	--border-input: #E0D6C6;
	--border-warm: #E4DACA;
	--dark: #211B14;
	--dark-footer: #1B1610;
	--dark-card: #2E2619;
	--font-head: 'Spectral', Georgia, serif;
	--font-body: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Basis ---------- */

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	overscroll-behavior-y: none;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
	overscroll-behavior-y: none;
	min-height: 100vh;
}

/* iOS-Gummiband: beim Überscrollen unter dem Footer dunkle Fläche statt Weiß zeigen */
body::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: -100vh;
	height: 100vh;
	z-index: -1;
	background: var(--dark-footer);
	pointer-events: none;
}

a {
	color: var(--orange-hover);
	text-decoration: none;
}

a:hover {
	color: var(--orange-text);
}

img {
	max-width: 100%;
	height: auto;
}

input,
textarea,
select,
button {
	font-family: var(--font-body);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--orange) !important;
	box-shadow: 0 0 0 3px rgba(224, 102, 28, .15);
}

::placeholder {
	color: #A89C8B;
}

.container {
	max-width: 1240px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--orange);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 10px 0;
	z-index: 200;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

@keyframes ehsGlowPulse {
	0%, 100% {
		opacity: .55;
		transform: scale(1);
	}

	50% {
		opacity: .8;
		transform: scale(1.06);
	}
}

@keyframes ehsFadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Typografie-Bausteine ---------- */

.eyebrow {
	display: inline-block;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--orange-hover);
}

.eyebrow--light {
	color: var(--orange-light);
}

.eyebrow--chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	letter-spacing: .16em;
	background: var(--beige-chip);
	padding: 8px 15px;
	border-radius: 999px;
}

.eyebrow--chip::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--orange);
}

.lead {
	font-size: 19px;
	line-height: 1.7;
	color: var(--text-soft);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--lg {
	font-size: 16px;
	padding: 16px 28px;
}

.btn--sm {
	font-size: 14.5px;
	padding: 12px 20px;
}

.btn--xs {
	font-size: 14px;
	padding: 11px 18px;
}

.btn--block {
	width: 100%;
}

.btn--primary {
	background: var(--orange);
	color: #fff;
	box-shadow: 0 8px 20px rgba(224, 102, 28, .28);
}

.btn--primary:hover {
	background: var(--orange-hover);
	color: #fff;
}

.btn--primary-glow {
	box-shadow: 0 12px 26px rgba(224, 102, 28, .3);
}

.section-dark .btn--primary:hover,
.dark-card .btn--primary:hover,
.cta-dark-card .btn--primary:hover {
	background: var(--orange-light);
}

.btn--outline {
	background: transparent;
	color: var(--text);
	border: 1px solid #D8CDBD;
}

.btn--outline:hover {
	border-color: var(--text);
	background: #fff;
	color: var(--text);
}

.btn--dark {
	background: var(--dark);
	color: #F3ECE0;
	white-space: nowrap;
}

.btn--dark:hover {
	background: var(--orange);
	color: #fff;
}

.btn--chip {
	background: var(--beige-chip);
	color: var(--orange-text);
	font-size: 14.5px;
	padding: 12px 20px;
}

.btn--chip:hover {
	background: #EAD6BE;
	color: var(--orange-text);
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(247, 242, 234, .86);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid #E9E0D2;
}

.site-header__inner {
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text);
}

.logo:hover {
	color: var(--text);
}

.logo__img {
	display: block;
	width: auto;
	height: 52px;
}

.logo__img--footer {
	height: 48px;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 13px;
	border-radius: 9px;
	font-weight: 500;
	font-size: 14.5px;
	white-space: nowrap;
	color: var(--text-strong);
	background: none;
	border: none;
	cursor: pointer;
}


.nav-link:hover,
.nav-link.is-active {
	background: var(--beige-hover);
	color: var(--text);
}

.nav-dropdown {
	position: relative;
}

.nav-dropdown__caret {
	font-size: 10px;
	color: #B0A08C;
}

.nav-dropdown__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 24px 50px rgba(60, 40, 15, .16);
	padding: 8px;
	width: 264px;
	animation: ehsFadeUp .18s ease;
}

.nav-dropdown__item {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--text-strong);
	font-size: 14.5px;
	font-weight: 500;
}

.nav-dropdown__item:hover {
	background: var(--bg);
	color: var(--orange-hover);
}

.header-cta {
	display: flex;
	align-items: center;
	gap: 14px;
}

.phone-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14.5px;
	white-space: nowrap;
	color: var(--text);
}

.phone-link:hover {
	color: var(--orange-hover);
}

/* Schmale Desktop-Breiten: kompaktere Navigation, damit alles einzeilig bleibt */
@media (min-width: 961px) and (max-width: 1180px) {
	.main-nav {
		gap: 0;
	}

	.nav-link {
		padding: 9px 9px;
		font-size: 13.5px;
	}

	.header-cta {
		gap: 12px;
	}

	.header-cta .btn {
		white-space: nowrap;
		padding: 11px 16px;
	}
}

.phone-link__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--beige-hover);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.burger {
	display: none;
	background: none;
	border: 1px solid var(--border-input);
	border-radius: 10px;
	width: 44px;
	height: 44px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: var(--text);
}

/* ---------- Mobile Drawer ---------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
}

.drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(34, 30, 25, .4);
	backdrop-filter: blur(2px);
}

.drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(340px, 86vw);
	background: var(--bg);
	padding: 22px;
	overflow-y: auto;
	box-shadow: -20px 0 50px rgba(0, 0, 0, .2);
	animation: ehsFadeUp .2s ease;
}

.drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

.drawer__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 19px;
}

.drawer__close {
	background: none;
	border: 1px solid var(--border-input);
	border-radius: 9px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	font-size: 18px;
	color: var(--text);
}

.drawer__link {
	display: block;
	padding: 13px 12px;
	border-radius: 11px;
	font-weight: 600;
	font-size: 16px;
	color: var(--text);
}

.drawer__link:hover {
	background: var(--beige-hover);
	color: var(--text);
}

.drawer__cta {
	margin-top: 16px;
	width: 100%;
	font-size: 16px;
	padding: 15px;
}

.drawer__phone {
	display: block;
	text-align: center;
	margin-top: 14px;
	font-weight: 600;
	color: var(--text);
}

/* ---------- Sektionen ---------- */

.section {
	padding-top: clamp(52px, 7vw, 96px);
	padding-bottom: clamp(52px, 7vw, 96px);
}

.section--lg {
	padding-top: clamp(56px, 8vw, 110px);
	padding-bottom: clamp(56px, 8vw, 110px);
}

.section--flush-top {
	padding-top: 0;
}

.section-dark {
	background: var(--dark);
	color: #F3ECE0;
	position: relative;
	overflow: hidden;
}

.section-head {
	max-width: 640px;
}

.section-head--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.section-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 14px 0 0;
	color: var(--ink);
}

.section-dark .section-title {
	color: inherit;
}

.section-intro {
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-soft);
	margin: 18px 0 0;
}

.glow-circle {
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 144, 43, .22), transparent 68%);
	pointer-events: none;
}

.glow-circle--right {
	top: -120px;
	right: -60px;
}

.glow-circle--left {
	top: -120px;
	left: -60px;
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */

.page-hero {
	background: var(--bg-panel);
	border-bottom: 1px solid var(--border-soft);
	position: relative;
	overflow: hidden;
}

.page-hero__inner {
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: clamp(40px, 6vw, 80px);
	position: relative;
}

.breadcrumb {
	font-size: 13.5px;
	color: var(--text-faint);
	display: flex;
	gap: 8px;
	align-items: center;
}

.breadcrumb a {
	color: var(--text-faint);
}

.breadcrumb a:hover {
	color: var(--orange-hover);
}

.breadcrumb__current {
	color: #4A4238;
}

.page-hero .eyebrow {
	margin-top: 20px;
}

.page-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.06;
	letter-spacing: -.015em;
	margin: 14px 0 0;
	color: var(--ink);
	max-width: 18ch;
}

.page-hero .lead {
	margin: 20px 0 0;
	max-width: 62ch;
}

/* ---------- Startseite: Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
}

.hero__glow {
	position: absolute;
	top: -140px;
	right: -120px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 144, 43, .28), rgba(224, 102, 28, .06) 55%, transparent 72%);
	animation: ehsGlowPulse 7s ease-in-out infinite;
	pointer-events: none;
}

.hero__grid {
	padding-top: clamp(48px, 7vw, 96px);
	padding-bottom: clamp(48px, 7vw, 96px);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
	position: relative;
}

.hero__content {
	animation: ehsFadeUp .7s ease both;
}

.hero__title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -.015em;
	margin: 22px 0 0;
	color: var(--ink);
}

.hero__title em {
	font-style: italic;
	color: var(--orange-hover);
}

.hero__text {
	font-size: 19px;
	line-height: 1.65;
	color: var(--text-soft);
	margin: 22px 0 0;
	max-width: 52ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 40px;
}

.stat__value {
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 600;
	color: var(--ink);
}

.stat__label {
	font-size: 13.5px;
	color: var(--text-dim);
}

.stat-divider {
	width: 1px;
	background: var(--border-warm);
}

.hero__visual {
	position: relative;
	animation: ehsFadeUp .9s ease both;
}

.hero__visual-glow {
	position: absolute;
	inset: 6% 8%;
	border-radius: 32px;
	background: radial-gradient(circle at 60% 40%, rgba(240, 144, 43, .22), transparent 65%);
}

.hero__panel {
	position: relative;
	background: linear-gradient(160deg, #FCFAF6, #F0E9DD);
	border: 1px solid #EBE1D3;
	border-radius: 28px;
	padding: 26px;
	box-shadow: 0 40px 80px rgba(90, 60, 20, .14);
}

.hero__panel img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

.hero__badge {
	position: absolute;
	bottom: 22px;
	left: 22px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	border: 1px solid #EEE5D8;
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 11px;
	box-shadow: 0 10px 24px rgba(60, 40, 15, .12);
}

.hero__badge-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--beige-chip);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__badge-title {
	font-weight: 700;
	font-size: 13.5px;
}

.hero__badge-sub {
	font-size: 12px;
	color: var(--text-dim);
}

/* ---------- Trust-Leiste ---------- */

.trust-strip {
	border-top: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
	background: var(--bg-panel);
}

.trust-strip__inner {
	padding-top: 22px;
	padding-bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	align-items: center;
	justify-content: space-between;
}

.trust-strip__label {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: 600;
}

.trust-strip__items {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
	color: #4A4238;
	font-size: 14.5px;
}

.trust-item::before {
	content: '✓';
	color: var(--orange-hover);
}

@media (min-width: 1181px) {
	.trust-strip__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.trust-strip__items {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 18px;
	}

	.trust-item {
		white-space: nowrap;
		font-size: 14px;
	}
}

/* ---------- Karten-Raster ---------- */

.card-grid {
	display: grid;
	gap: 20px;
	margin-top: 44px;
}

.card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.card-grid--4 {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 40px;
}

.card-grid--tight {
	gap: 22px;
	margin-top: 0;
}

.feature-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 28px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
	border-color: var(--orange);
	box-shadow: 0 16px 34px rgba(90, 60, 20, .1);
}

.feature-card__num {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--orange);
}

.feature-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 21px;
	margin: 12px 0 8px;
	color: var(--ink);
}

.feature-card__text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-mid);
	margin: 0;
}

.product-card {
	background: linear-gradient(160deg, #FCFAF6, #F1EADE);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 20px;
	transition: box-shadow .2s ease;
}

.product-card:hover {
	box-shadow: 0 18px 38px rgba(90, 60, 20, .12);
}

.product-card__img {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 18px;
	margin: 8px 0 2px;
	color: var(--ink);
}

.product-card__text {
	font-size: 13.5px;
	color: var(--text-dim);
	margin: 0;
}

.model-card {
	background: linear-gradient(160deg, #FCFAF6, #F1EADE);
	border: 1px solid var(--border);
	border-radius: 22px;
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.model-card:hover {
	box-shadow: 0 20px 42px rgba(90, 60, 20, .13);
}

.model-card__img {
	padding: 24px 24px 0;
}

.model-card__img-inner {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.model-card__img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.model-card__body {
	padding: 8px 24px 26px;
}

.model-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 6px;
	color: var(--ink);
}

.model-card__text {
	font-size: 14.5px;
	color: var(--text-mid);
	margin: 0 0 14px;
}

.model-card__meta {
	font-size: 13.5px;
	color: var(--text-muted);
}

.model-section + .model-section {
	padding-top: 0;
}

.model-section .card-grid {
	margin-top: 34px;
}

.model-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.model-card__watt {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	color: var(--orange);
	white-space: nowrap;
}

.spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spec-list__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--border);
	font-size: 13.5px;
}

.spec-list__label {
	color: var(--text-muted);
}

.spec-list__value {
	color: var(--text-mid);
	text-align: right;
	white-space: nowrap;
}

.dark-card {
	background: linear-gradient(160deg, #211B14, #2E2619);
	border: 1px solid #3A3120;
	border-radius: 22px;
	overflow: hidden;
	color: #F3ECE0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
}

.dark-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 24px;
	margin: 0 0 10px;
}

.dark-card__text {
	font-size: 15px;
	color: #C8BEAE;
	margin: 0 0 20px;
}

.dark-card .btn {
	align-self: flex-start;
}

/* ---------- Split-Layouts (Bild + Text) ---------- */

.split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.split-grid--wide-left {
	grid-template-columns: 1.3fr .7fr;
	gap: 48px;
	align-items: start;
}

.preise-grid {
	grid-template-columns: 1.15fr .85fr;
}

.zubehoer-grid {
	grid-template-columns: 1.05fr .95fr;
	gap: 52px;
}

.visual-panel {
	background: linear-gradient(160deg, #FCFAF6, #F0E9DD);
	border: 1px solid #EBE1D3;
	border-radius: 24px;
	padding: 26px;
	box-shadow: 0 30px 60px rgba(90, 60, 20, .12);
}

.visual-panel img,
.visual-panel video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

.visual-panel__note {
	text-align: center;
	font-size: 13px;
	color: var(--text-faint);
	margin: 16px 0 0;
}

.split-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.12;
	color: var(--ink);
	margin: 0;
}

.split-text {
	font-size: 17px;
	line-height: 1.75;
	color: var(--text-soft);
	margin: 18px 0 0;
}

.split-text strong {
	color: var(--ink);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.chip {
	background: var(--beige-chip);
	color: var(--orange-text);
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 15px;
	border-radius: 999px;
}

/* ---------- Dunkle Teaser-Sektion (AeroFlow) ---------- */

.funktion-teaser {
	padding-top: clamp(56px, 8vw, 104px);
	padding-bottom: clamp(56px, 8vw, 104px);
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: 56px;
	align-items: center;
	position: relative;
}

.funktion-teaser__panel {
	background: linear-gradient(160deg, #F7F3ED, #E9E0D2);
	border-radius: 24px;
	padding: 26px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}

.funktion-teaser__panel img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

.funktion-teaser__text {
	font-size: 17px;
	line-height: 1.75;
	color: #C8BEAE;
	margin: 20px 0 0;
}

.info-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 28px;
}

.info-tile {
	border: 1px solid rgba(243, 236, 224, .16);
	border-radius: 14px;
	padding: 16px;
}

.info-tile__title {
	font-weight: 700;
	color: var(--orange-light);
	font-size: 14px;
}

.info-tile__text {
	font-size: 13.5px;
	color: #B7AD9C;
	margin-top: 4px;
}

.section-dark .glow-circle--teaser {
	top: -100px;
	left: -80px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(224, 102, 28, .34), transparent 68%);
}

/* ---------- Vergleichskarten ---------- */

.compare-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 44px;
}

.compare-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(243, 236, 224, .12);
	border-radius: 20px;
	padding: 24px;
}

.compare-card--featured {
	background: linear-gradient(160deg, #2E2619, #241D12);
	border-color: var(--orange);
}

.compare-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	color: #D8CFBE;
	margin: 0;
}

.compare-card--featured .compare-card__title {
	color: var(--orange-light);
}

.compare-card__divider {
	height: 1px;
	background: rgba(243, 236, 224, .14);
	margin: 16px 0;
}

.compare-card--featured .compare-card__divider {
	background: rgba(240, 144, 43, .3);
}

.compare-card__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14.5px;
	color: #A79D8C;
}

.compare-card--featured .compare-card__list {
	color: #E6DDCD;
}

.compare-card__list span {
	display: flex;
	gap: 9px;
}

.compare-card__list span::before {
	content: '–';
	color: var(--text-muted);
}

.compare-card--featured .compare-card__list span::before {
	content: '✓';
	color: var(--orange-light);
}

.section-cta {
	text-align: center;
	margin-top: 40px;
}

/* ---------- Aufbau: Schichtenliste ---------- */

.cutaway-stage {
	max-width: 560px;
	margin: 44px auto 0;
	padding: 30px;
}

.layer-cutaway {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}

.layer-cta {
	text-align: center;
	margin-top: 36px;
}

.video-stage {
	max-width: 620px;
	margin: 44px auto 0;
}

.video-stage video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.video-stage__note {
	text-align: center;
	font-size: 13px;
	color: #B4AA99;
	margin: 18px 0 0;
}

.layer-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.layer-list--split {
	max-width: 880px;
	margin: 40px auto 0;
}

@media (min-width: 961px) {
	.layer-list--split {
		display: grid;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		column-gap: 56px;
	}
}

.layer {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #EBE1D3;
}

.layer:last-child {
	border-bottom: none;
}

.layer__num {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--dark);
	color: #F3ECE0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.layer__num--accent {
	background: var(--orange);
	color: #fff;
}

.layer__title {
	font-weight: 600;
	color: var(--ink);
}

.layer__text {
	font-size: 14px;
	color: var(--text-dim);
}

/* ---------- Entsorgungs-Band & CTA ---------- */

.cta-band {
	background: linear-gradient(135deg, #F2E4D2, #FBF7F0);
	border: 1px solid #EBDFCD;
	border-radius: 28px;
	padding: clamp(30px, 5vw, 56px);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}

.cta-band__content {
	max-width: 640px;
}

.cta-band__title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.12;
	margin: 12px 0 0;
	color: var(--ink);
}

.cta-band__text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-soft);
	margin: 16px 0 0;
}

.cta-band .btn {
	justify-self: start;
}

.final-cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.final-cta__title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.06;
	color: var(--ink);
	margin: 0;
}

.final-cta__text {
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-soft);
	margin: 18px auto 0;
	max-width: 56ch;
}

.final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
}

.cta-dark-card {
	background: var(--dark);
	color: #F3ECE0;
	border-radius: 20px;
	padding: 28px;
	margin-top: 24px;
}

.cta-dark-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 8px;
}

.cta-dark-card__text {
	font-size: 15px;
	color: #C8BEAE;
	margin: 0 0 18px;
}

/* ---------- Formulare ---------- */

.form-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 38px);
	box-shadow: 0 20px 44px rgba(90, 60, 20, .08);
}

.form-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 26px;
	margin: 0 0 4px;
	color: var(--ink);
}

.form-card__hint {
	font-size: 14.5px;
	color: var(--text-dim);
	margin: 0 0 24px;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form-field {
	margin-top: 16px;
}

.form-grid .form-field {
	margin-top: 0;
}

.form-label {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	margin-bottom: 6px;
	color: #4A4238;
}

.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--border-input);
	border-radius: 12px;
	font-size: 15px;
	background: #FBF9F5;
}

.form-select {
	color: var(--ink);
}

.form-textarea {
	resize: vertical;
}

.form-field + .form-grid,
.form-grid + .form-grid {
	margin-top: 16px;
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: var(--ink);
	margin-top: 8px;
	cursor: pointer;
}

.form-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #C7550F;
}

.form-check--privacy {
	font-size: 12.5px;
	color: var(--text-faint);
	line-height: 1.6;
	margin-top: 18px;
}

.form-submit {
	margin-top: 22px;
	width: 100%;
	font-size: 16px;
	padding: 16px;
}

.form-note {
	font-size: 12.5px;
	color: var(--text-faint);
	text-align: center;
	margin: 14px 0 0;
}

.form-privacy {
	font-size: 12.5px;
	color: var(--text-faint);
	margin: 14px 0 0;
	line-height: 1.6;
}

.honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 1px;
	overflow: hidden;
}

.benefit-card {
	background: linear-gradient(135deg, #F2E4D2, #FBF7F0);
	border: 1px solid #EBDFCD;
	border-radius: 20px;
	padding: 26px;
}

.benefit-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 14px;
	color: var(--ink);
}

.checklist {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14.5px;
	color: #4A4238;
}

.checklist span {
	display: flex;
	gap: 9px;
}

.checklist span::before {
	content: '✓';
	color: var(--orange-hover);
}

.phone-card {
	background: var(--dark);
	color: #F3ECE0;
	border-radius: 20px;
	padding: 26px;
}

.phone-card__label {
	font-weight: 600;
	font-size: 14px;
	color: var(--orange-light);
	letter-spacing: .04em;
}

.phone-card__label--spaced {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.phone-card__number {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 26px;
	color: #F3ECE0;
	margin: 8px 0 4px;
}

.phone-card__number:hover {
	color: var(--orange-light);
}

.phone-card__sub {
	font-size: 14px;
	color: #B7AD9C;
}

.side-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.side-stack--tight {
	gap: 14px;
}

.contact-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 24px;
}

.contact-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.contact-row + .contact-row {
	margin-top: 16px;
}

.contact-row__title {
	font-weight: 700;
	color: var(--ink);
	font-size: 14.5px;
}

.contact-row__text {
	font-size: 14.5px;
	color: var(--text-mid);
}

.icon-box {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 11px;
	background: var(--beige-chip);
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-box--lg {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	margin-bottom: 16px;
}

.callback-teaser {
	background: linear-gradient(135deg, #F2E4D2, #FBF7F0);
	border: 1px solid #EBDFCD;
	border-radius: 20px;
	padding: 24px;
}

.callback-teaser__title {
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
}

.callback-teaser__text {
	font-size: 14px;
	color: var(--text-soft);
	margin: 0 0 14px;
}

/* ---------- Kontakt-Seite ---------- */

.contact-grid {
	grid-template-columns: 1.1fr .9fr;
}

.contact-grid .side-stack {
	position: sticky;
	top: 94px;
}

.rueckruf-fab {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 65;
	display: none;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border: none;
	border-radius: 999px;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(33, 27, 20, .22);
	animation: fab-in .5s ease both, fab-pulse 3.4s ease-out 1s infinite;
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.rueckruf-fab:hover,
.rueckruf-fab:focus-visible {
	background: var(--orange-hover);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(33, 27, 20, .28);
}

.rueckruf-fab:focus-visible {
	outline: 3px solid rgba(224, 102, 28, .5);
	outline-offset: 2px;
}

.rueckruf-fab svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@keyframes fab-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fab-pulse {
	0% {
		box-shadow: 0 10px 28px rgba(33, 27, 20, .22), 0 0 0 0 rgba(224, 102, 28, .42);
	}

	70% {
		box-shadow: 0 10px 28px rgba(33, 27, 20, .22), 0 0 0 16px rgba(224, 102, 28, 0);
	}

	100% {
		box-shadow: 0 10px 28px rgba(33, 27, 20, .22), 0 0 0 0 rgba(224, 102, 28, 0);
	}
}

@media (max-width: 768px) {
	.rueckruf-fab {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		padding: 15px 18px;
		font-size: 14px;
	}
}

/* ---------- Galerie & Lightbox ---------- */

.gallery-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, 1fr);
}

.gallery-item {
	margin: 0;
	position: relative;
	background: linear-gradient(160deg, #FCFAF6, #F0E9DD);
	border: 1px solid var(--border);
	border-radius: 22px;
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	transition: box-shadow .2s, transform .2s;
}

.gallery-item:hover {
	box-shadow: 0 22px 44px rgba(90, 60, 20, .16);
	transform: translateY(-3px);
}

.gallery-item img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .35s ease;
}

.gallery-item:hover img {
	transform: scale(1.05);
}

.gallery-item__zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s;
}

.gallery-item:hover .gallery-item__zoom {
	opacity: 1;
}

.gallery-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 18px 14px;
	background: linear-gradient(to top, rgba(27, 22, 16, .72), transparent);
	color: var(--bg);
	font-size: 13.5px;
	font-weight: 500;
	opacity: 0;
	transition: opacity .25s;
}

.gallery-item:hover .gallery-item__caption {
	opacity: 1;
}

.gallery-foot {
	text-align: center;
	margin-top: 34px;
}

.gallery-foot__note {
	font-size: 14.5px;
	color: var(--text-muted);
	margin: 0 0 16px;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(20, 15, 10, .92);
	backdrop-filter: blur(6px);
	display: flex;
	flex-direction: column;
	animation: ehsFadeUp .2s ease;
}

.lightbox__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	color: var(--beige-hover);
}

.lightbox__counter {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .04em;
}

.lightbox__close {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--bg);
	cursor: pointer;
	font-size: 20px;
}

.lightbox__close:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.lightbox__stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0 16px 20px;
	min-height: 0;
}

.lightbox__nav {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--bg);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox__nav:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.lightbox__body {
	flex: 1;
	max-width: 1000px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 0;
}

.lightbox__frame {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #FBF8F2, #EDE5D8);
	border-radius: 22px;
	padding: clamp(20px, 4vw, 48px);
	width: 100%;
}

.lightbox__frame img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .25));
}

.lightbox__caption {
	color: #D8CFBE;
	font-size: 15px;
	text-align: center;
	margin: 0;
	max-width: 60ch;
}

/* ---------- FAQ ---------- */

.faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid var(--border);
	border-radius: 16px;
	margin-bottom: 12px;
	background: var(--bg-card);
	overflow: hidden;
}

.faq-item__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
}

.faq-item__q-text {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--ink);
}

.faq-item__icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--beige-chip);
	color: var(--orange-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.faq-item__icon::before {
	content: '+';
}

.faq-item.is-open .faq-item__icon {
	background: var(--orange);
	color: #fff;
}

.faq-item.is-open .faq-item__icon::before {
	content: '−';
}

.faq-item__a {
	padding: 0 22px 22px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--text-soft);
}

.faq-item:not(.is-open) .faq-item__a {
	display: none;
}

.faq-cta {
	margin-top: 34px;
	background: linear-gradient(135deg, #F2E4D2, #FBF7F0);
	border: 1px solid #EBDFCD;
	border-radius: 20px;
	padding: 28px;
	text-align: center;
}

.faq-cta__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 8px;
	color: var(--ink);
}

.faq-cta__text {
	font-size: 15px;
	color: var(--text-soft);
	margin: 0 0 18px;
}

/* ---------- Entsorgung: Trust-Karten ---------- */

.trust-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px;
}

.entsorgung-figure {
	margin: 0;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
}

.entsorgung-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.trust-card .icon-box {
	margin-bottom: 12px;
}

.trust-card__title {
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
}

.trust-card__text {
	font-size: 14px;
	color: var(--text-dim);
	line-height: 1.6;
}

.prose {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--text-soft);
}

.prose p {
	margin: 0 0 14px;
}

.prose strong {
	color: var(--ink);
}

/* ---------- Zubehör / FlexiSmart ---------- */

.flexi-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 28px;
}

.flexi-item {
	border: 1px solid rgba(243, 236, 224, .16);
	border-radius: 16px;
	padding: 20px;
}

.flexi-item__title {
	font-weight: 700;
	color: var(--orange-light);
	margin-bottom: 5px;
}

.flexi-item__text {
	font-size: 15px;
	color: #C8BEAE;
	line-height: 1.65;
}

.flexi-panel {
	background: linear-gradient(160deg, #F7F3ED, #E4DBCB);
	border-radius: 24px;
	padding: 30px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}

.flexi-panel__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	background: #fff;
}

.flexi-device {
	background: #fff;
	border-radius: 18px;
	padding: 28px;
	text-align: center;
}

.flexi-device__brand {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 22px;
	color: var(--ink);
}

.flexi-device__brand span {
	color: var(--orange);
}

.flexi-device__display {
	margin: 22px auto;
	width: 150px;
	height: 96px;
	border-radius: 14px;
	background: linear-gradient(160deg, #EAF2F8, #DCEAF4);
	border: 1px solid #CFE0EE;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #3E6D96;
}

.flexi-device__temp {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
}

.flexi-device__temp span {
	font-size: 16px;
}

.flexi-device__mode {
	font-size: 11px;
	letter-spacing: .1em;
	margin-top: 2px;
}

.flexi-device .checklist {
	text-align: left;
	font-size: 14px;
	max-width: 240px;
	margin: 0 auto;
	gap: 9px;
}

.accessory-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 26px;
	transition: box-shadow .2s ease;
}

.accessory-card__img {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	margin-bottom: 18px;
}

.accessory-card__img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.accessory-card:hover {
	box-shadow: 0 18px 38px rgba(90, 60, 20, .1);
}

.accessory-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 6px;
	color: var(--ink);
}

.accessory-card__text {
	font-size: 14.5px;
	color: var(--text-mid);
	line-height: 1.65;
	margin: 0 0 12px;
}

.accessory-card__meta {
	font-size: 13px;
	color: var(--text-muted);
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--dark-footer);
	color: #C7BDAD;
	border-top: 1px solid #2A2318;
}

.footer-grid {
	padding-top: clamp(48px, 7vw, 84px);
	padding-bottom: 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.footer-brand__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.footer-brand__text {
	font-size: 14.5px;
	line-height: 1.7;
	color: #9A8F7E;
	margin: 18px 0 0;
	max-width: 34ch;
}

.footer-col__title {
	font-weight: 700;
	color: #F3ECE0;
	font-size: 14px;
	letter-spacing: .04em;
	margin-bottom: 14px;
}

.footer-link {
	display: block;
	padding: 6px 0;
	color: #B4AA99;
	font-size: 14.5px;
}

.footer-link:hover {
	color: var(--orange-light);
}

.footer-address {
	padding: 6px 0;
	color: #B4AA99;
	font-size: 14.5px;
}

.footer-cta {
	margin-top: 12px;
}

.footer-cta:hover {
	background: var(--orange-light);
}

.footer-bottom {
	border-top: 1px solid #2A2318;
}

.footer-bottom__inner {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: #7E7565;
}

.footer-bottom__links {
	display: flex;
	gap: 20px;
}

.footer-bottom__links a {
	color: #7E7565;
}

.footer-bottom__links a:hover {
	color: var(--orange-light);
}

.footer-bottom__consent {
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: #7E7565;
	cursor: pointer;
}

.footer-bottom__consent:hover {
	color: var(--orange-light);
}

/* ---------- Rückruf-Modal ---------- */

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(27, 22, 16, .55);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal {
	background: var(--bg-panel);
	border-radius: 24px;
	max-width: 460px;
	width: 100%;
	padding: 34px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
	animation: ehsFadeUp .22s ease;
	position: relative;
	max-height: 92vh;
	overflow-y: auto;
}

.modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	background: var(--beige-hover);
	border: none;
	border-radius: 9px;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: 17px;
	color: var(--text);
}

.modal__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 27px;
	margin: 10px 0 6px;
	color: var(--ink);
}

.modal__text {
	font-size: 15px;
	color: var(--text-mid);
	margin: 0 0 20px;
}

.modal__input {
	background: #fff;
	margin-bottom: 16px;
}

.modal__submit {
	width: 100%;
	font-size: 16px;
	padding: 15px;
	margin-top: 22px;
}

.time-picker {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-top: 8px;
}

.time-btn {
	display: block;
}

.time-btn input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.time-btn span {
	display: block;
	text-align: center;
	padding: 11px 6px;
	border-radius: 11px;
	border: 1px solid var(--border-input);
	background: #fff;
	color: #4A4238;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
}

.time-btn input:checked + span {
	border-color: var(--orange);
	background: var(--beige-chip);
	color: var(--orange-hover);
}

.time-btn input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(224, 102, 28, .25);
}

/* ---------- Toast ---------- */

.toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background: var(--dark);
	color: #F3ECE0;
	padding: 15px 22px;
	border-radius: 14px;
	box-shadow: 0 20px 46px rgba(0, 0, 0, .32);
	display: flex;
	align-items: center;
	gap: 12px;
	animation: ehsFadeUp .3s ease;
	max-width: 92vw;
}

.toast__icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.toast__message {
	font-weight: 500;
	font-size: 15px;
}

/* ---------- Cookie-Banner ---------- */

.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 85;
	padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.cookie-banner__card {
	pointer-events: auto;
	max-width: 1040px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px 34px;
	background: var(--bg-panel);
	border: 1px solid var(--border-warm);
	border-radius: 24px;
	padding: 26px 30px;
	box-shadow: 0 26px 60px rgba(33, 27, 20, .26);
	animation: ehsFadeUp .32s ease;
}

.cookie-banner__eyebrow {
	font-size: 11.5px;
	padding: 6px 13px;
}

.cookie-banner__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: var(--ink);
	margin: 12px 0 7px;
}

.cookie-banner__text {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-mid);
	margin: 0;
	max-width: 68ch;
}

.cookie-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 216px;
}

.cookie-banner__btn {
	width: 100%;
	font-size: 15px;
	padding: 14px 22px;
}

.cookie-banner__btn.btn--outline {
	background: #fff;
}

/* Floating-Rückruf-Button würde den Banner überlagern */
body.consent-open .rueckruf-fab {
	display: none;
}

@media (max-width: 860px) {
	.cookie-banner {
		padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.cookie-banner__card {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 22px;
		border-radius: 20px;
		max-height: 82vh;
		overflow-y: auto;
	}

	.cookie-banner__title {
		font-size: 19px;
		margin: 10px 0 6px;
	}

	.cookie-banner__text {
		font-size: 14px;
		line-height: 1.6;
	}

	.cookie-banner__actions {
		min-width: 0;
	}

	.cookie-banner__btn {
		padding: 13px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cookie-banner__card {
		animation: none;
	}
}

/* ---------- Impressum / Rechtstexte ---------- */

.legal-title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	color: var(--ink);
	margin: 0 0 12px;
}

.legal-title--spaced {
	margin-top: 28px;
}

.legal-text {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--text-soft);
	margin: 0;
}

.legal-text--spaced {
	margin-top: 14px;
}

.legal-note {
	font-size: 13px;
	color: var(--text-faint);
	margin: 20px 0 0;
}

.legal-divider {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid #EBE1D3;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.main-nav,
	.header-cta {
		display: none;
	}

	.burger {
		display: flex;
	}

	.hero__grid,
	.funktion-teaser,
	.split-grid {
		grid-template-columns: 1fr;
	}

	.hero__grid {
		gap: 38px;
	}

	.funktion-teaser {
		gap: 36px;
	}

	.split-grid {
		gap: 34px;
	}

	.contact-grid,
	.preise-grid,
	.zubehoer-grid {
		grid-template-columns: 1fr;
	}

	.contact-grid .side-stack {
		position: static;
		order: -1;
	}

	/* Header-CTA ist hier ausgeblendet – Rückruf stattdessen als Floating-Button */
	.rueckruf-fab {
		display: inline-flex;
	}

	.card-grid--3,
	.card-grid--4,
	.compare-grid {
		grid-template-columns: 1fr 1fr;
	}

	.cta-band {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.card-grid--3,
	.compare-grid {
		grid-template-columns: 1fr;
	}

	.card-grid--4 {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.form-grid .form-field {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero__glow,
	.hero__content,
	.hero__visual {
		animation: none;
	}

	.rueckruf-fab {
		animation: fab-in .4s ease both;
	}
}