@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+1E00-1EFF,U+20A0-20C0; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+1E00-1EFF,U+20A0-20C0; }
/* ==========================================================================
   design BAUELEMENTE — Neuaufbau
   Design-System: Jost + Manrope (selbst gehostet), Teal #044c5a, Amber #D97706
   ========================================================================== */

:root {
	--color-primary:      #044c5a;
	--color-primary-dark: #033944;
	--color-primary-deep: #022a33;
	--color-accent:       #D97706;
	--color-accent-dark:  #B45309;
	--color-accent-deep:  #92400E;
	--color-bg:           #FAF5F2;
	--color-surface:      #F3EDE8;
	--color-text:         #0F172A;
	--color-text-muted:   #475569;
	--color-border:       #E7DFD9;
	--color-white:        #ffffff;

	--font-heading: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
	--font-body:    'Manrope', system-ui, sans-serif;

	--container-max:  1240px;
	--container-pad:  clamp(1.25rem, 4vw, 2.5rem);
	--section-gap:    clamp(4rem, 9vw, 8rem);
	--header-h:       80px;
	--radius:         12px;
	--radius-lg:      24px;
	--shadow-card:       0 1px 2px rgba(4, 76, 90, .05), 0 8px 24px rgba(4, 76, 90, .07);
	--shadow-card-hover: 0 2px 4px rgba(4, 76, 90, .06), 0 18px 44px rgba(4, 76, 90, .14);

	--ease-out:       cubic-bezier(.23, 1, .32, 1);
	--ease-in-out:    cubic-bezier(.77, 0, .175, 1);
	--transition:     200ms var(--ease-out);
	--touch-target:   44px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-dark); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--color-primary); color: #fff; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--color-primary); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	line-height: 1.12;
	margin: 0 0 .9rem;
	letter-spacing: -.015em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1.1rem; text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--color-text-muted); line-height: 1.6; }

.eyebrow, .hero__eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	text-transform: uppercase; letter-spacing: .16em;
	font-size: .78rem; font-weight: 700;
	color: var(--color-accent-dark); margin-bottom: 1.1rem;
}
.eyebrow::before, .hero__eyebrow::before {
	content: ""; width: 2.25rem; height: 2px; background: currentColor;
}

/* Placeholder marker for content still to be delivered by the client */
.tbd {
	border: 1px dashed var(--color-accent);
	background: rgba(217, 119, 6, 0.06);
	padding: .5rem .75rem;
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-style: italic;
}
.tbd::before { content: "\1F4DD "; }

/* ---------- Layout ---------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.section { padding: var(--section-gap) 0; }
.section--surface { background: var(--color-surface); }
.section--primary {
	background:
		radial-gradient(60rem 30rem at 90% -10%, rgba(255,255,255,.09), transparent 60%),
		linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
	color: #fff;
}
.section--primary h2, .section--primary h3 { color: #fff; }
.section-head { max-width: 680px; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.section-head p { color: var(--color-text-muted); font-size: 1.15rem; margin-bottom: 0; }

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 52px;
	padding: .8rem 1.9rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .01em;
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform 160ms var(--ease-out), box-shadow var(--transition);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-accent-dark); color: #fff; box-shadow: 0 6px 18px rgba(180, 83, 9, .28); }
.btn-primary:hover { background: var(--color-accent-deep); color: #fff; }
.btn-outline { border-color: #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-primary); }
.btn-ghost { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary); color: #fff; }
.btn__arrow { width: 1.1em; height: 1.1em; transition: transform var(--transition); }
@media (hover: hover) and (pointer: fine) {
	.btn:hover .btn__arrow { transform: translateX(4px); }
}

/* ---------- Cards ---------- */
.card {
	display: block;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
}
.card__image { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--color-surface); }
.card__image-placeholder {
	aspect-ratio: 4/3; width: 100%;
	background: var(--color-surface);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .4rem; color: var(--color-text-muted); text-align: center;
}
.card__image-placeholder svg { width: 40px; height: 40px; opacity: .5; }
.card__image-placeholder span { font-size: .8rem; font-style: italic; }
.card__body { padding: 1.5rem 1.6rem 1.75rem; }
.card__body h3 { margin-bottom: .4rem; }
.card__body p { color: var(--color-text-muted); font-size: .98rem; margin-bottom: 0; }

/* ---------- Header / Nav ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	view-transition-name: site-header;
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(250, 245, 242, .8);
	backdrop-filter: blur(16px) saturate(1.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	border-bottom: 1px solid transparent;
	transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}
.site-header.is-scrolled::before {
	background: rgba(250, 245, 242, .92);
	border-bottom-color: var(--color-border);
	box-shadow: 0 8px 30px rgba(4, 76, 90, .08);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--header-h);
	gap: 1rem;
}
.site-logo img { height: 60px; width: auto; }

.nav-toggle {
	display: none;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	width: var(--touch-target); height: var(--touch-target);
	background: none; border: none; border-radius: var(--radius);
}
.nav-toggle__bar {
	width: 24px; height: 2px; background: var(--color-primary); border-radius: 2px;
	transition: transform 250ms var(--ease-out), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav__list {
	display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.9rem);
}
.main-nav__list > li { position: relative; }
.main-nav__list a {
	position: relative;
	color: var(--color-text);
	font-weight: 500;
	font-size: .98rem;
	padding: .5rem 0;
	display: inline-block;
}
.main-nav__list a:not(.btn)::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px;
	background: var(--color-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform 300ms var(--ease-out);
}
.main-nav__list a:not(.btn):hover,
.main-nav__list a.is-active { color: var(--color-primary); }
.main-nav__list a:not(.btn):hover::after,
.main-nav__list a.is-active::after { transform: scaleX(1); }
.main-nav__cta a.btn { min-height: 44px; padding: .55rem 1.4rem; color: #fff !important; }

.has-dropdown { display: flex; align-items: center; }
.dropdown-toggle {
	background: none; border: none; width: 22px; height: 22px; padding: 0;
	position: relative;
}
.dropdown-toggle::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 7px; height: 7px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform var(--transition);
}
.dropdown-toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(225deg); }

.dropdown {
	display: block;
	position: absolute; top: 100%; left: -1rem;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	box-shadow: var(--shadow-card-hover);
	padding: .6rem;
	z-index: 50;
	opacity: 0; visibility: hidden;
	transform: translateY(-6px) scale(.98);
	transform-origin: top left;
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}
.dropdown li a { display: block; padding: .6rem .9rem; border-radius: 8px; font-size: .96rem; }
.dropdown li a::after { display: none; }
.dropdown li a:hover { background: var(--color-bg); }
.has-dropdown.is-open .dropdown {
	opacity: 1; visibility: visible; transform: none;
}
@media (hover: hover) and (pointer: fine) {
	.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 1040px) {
	.nav-toggle { display: flex; }
	.main-nav {
		position: fixed; inset: var(--header-h) 0 0 0;
		background: var(--color-bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
		overflow-y: auto;
	}
	.main-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
	.main-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--container-pad) 3rem; }
	.main-nav__list > li { border-bottom: 1px solid var(--color-border); }
	.main-nav__list a:not(.btn) { padding: 1rem 0; width: 100%; font-size: 1.15rem; font-family: var(--font-heading); }
	.main-nav__list a:not(.btn)::after { display: none; }
	.has-dropdown { flex-wrap: wrap; }
	.has-dropdown > a { flex: 1; }
	.dropdown-toggle { width: var(--touch-target); height: var(--touch-target); }
	.dropdown {
		position: static; box-shadow: none; border: none; background: transparent;
		display: none; opacity: 1; visibility: visible; transform: none;
		padding: 0 0 .5rem 1rem; width: 100%;
	}
	.has-dropdown.is-open .dropdown { display: block; }
	.main-nav__cta { margin-top: 1.25rem; border-bottom: none !important; }
	.main-nav__cta a.btn { display: flex; }
}

/* ---------- Hero (Startseite) ---------- */
.hero {
	position: relative;
	overflow: clip;
	padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 6rem);
	background:
		radial-gradient(48rem 32rem at 95% 0%, rgba(4, 76, 90, .10), transparent 65%),
		radial-gradient(40rem 26rem at -5% 100%, rgba(217, 119, 6, .09), transparent 65%),
		var(--color-bg);
}
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { max-width: 34rem; margin-bottom: 2rem; }
.hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__facts {
	display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
	margin-top: 2.5rem; padding-top: 1.75rem;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted); font-size: .95rem; font-weight: 500;
}
.hero__facts li { display: inline-flex; align-items: center; gap: .55rem; }
.hero__facts svg { width: 1.15rem; height: 1.15rem; color: var(--color-accent-dark); flex: none; }

.hero__visual {
	position: relative;
	aspect-ratio: 4 / 4.6;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(28rem 20rem at 80% 10%, rgba(255,255,255,.14), transparent 60%),
		linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
	box-shadow: 0 30px 70px rgba(2, 42, 51, .28);
	overflow: hidden;
}
.hero__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__visual .line { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__visual .line--soft { stroke: rgba(255,255,255,.25); }
.hero__visual .line--accent { stroke: #F59E0B; stroke-width: 2.5; }
.hero__visual .dot { fill: #F59E0B; }
.hero__badge {
	position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .9rem 1.2rem;
	border-radius: 16px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff; font-size: .9rem; font-weight: 500;
}
.hero__badge strong { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__visual { aspect-ratio: 16 / 11; order: -1; }
	.hero__visual svg { object-fit: cover; }
}

/* ---------- Unterseiten-Kopf ---------- */
.product-hero {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(40rem 22rem at 100% 0%, rgba(4, 76, 90, .09), transparent 65%),
		var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.product-hero h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); }
.breadcrumb { font-size: .88rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

/* ---------- Vertrauens-Leiste ---------- */
.trust {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px; background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.trust__item { background: #fff; padding: 1.75rem 1.75rem 1.9rem; }
.trust__icon {
	width: 3rem; height: 3rem; border-radius: 14px;
	display: grid; place-items: center;
	background: rgba(4, 76, 90, .08); color: var(--color-primary);
	margin-bottom: 1.1rem;
}
.trust__icon svg { width: 1.5rem; height: 1.5rem; }
.trust__item h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.trust__item p { color: var(--color-text-muted); font-size: .96rem; margin: 0; }

/* ---------- Leistungs-Kacheln (Startseite) ---------- */
.services {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.service {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 25rem;
	padding: 2rem;
	border-radius: var(--radius-lg);
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
	overflow: hidden;
	transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.service__num {
	font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
	color: var(--color-accent-dark); letter-spacing: .1em;
}
.service__art {
	flex: 1; display: grid; place-items: center; margin: 1rem 0 1.5rem;
	color: var(--color-primary);
	transition: color 300ms var(--ease-out), transform 500ms var(--ease-out);
}
.service__art svg { width: min(9.5rem, 60%); height: auto; overflow: visible; }
.service__art .fill { fill: rgba(4, 76, 90, .07); transition: fill 300ms var(--ease-out); }
.service h3 { font-size: 1.7rem; margin-bottom: .5rem; transition: color 300ms var(--ease-out); }
.service p { color: var(--color-text-muted); margin-bottom: 1.4rem; transition: color 300ms var(--ease-out); }
.service__more {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 600; color: var(--color-primary);
	transition: color 300ms var(--ease-out);
}
.service__more svg { width: 1.1em; height: 1.1em; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.service:hover {
		transform: translateY(-6px);
		background: var(--color-primary);
		border-color: var(--color-primary);
		box-shadow: 0 24px 50px rgba(2, 42, 51, .3);
	}
	.service:hover h3, .service:hover .service__more { color: #fff; }
	.service:hover p { color: rgba(255,255,255,.8); }
	.service:hover .service__num { color: #FBBF24; }
	.service:hover .service__art { color: #fff; transform: scale(1.05); }
	.service:hover .service__art .fill { fill: rgba(255,255,255,.1); }
	.service:hover .service__more svg { transform: translateX(6px); }
}
@media (max-width: 900px) {
	.services { grid-template-columns: 1fr; }
	.service { min-height: 0; }
	.service__art { margin: .5rem 0 1.25rem; justify-items: start; }
}

/* ---------- Katalog-Band / Abschluss-CTA ---------- */
.band {
	display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
	gap: 2rem 3rem; align-items: center;
}
.band h2 { margin-bottom: .75rem; }
.band p { color: rgba(255,255,255,.82); font-size: 1.15rem; margin: 0; max-width: 40rem; }
.band__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
@media (max-width: 800px) { .band { grid-template-columns: 1fr; } }

/* ---------- Zwei-Spalten-Text ---------- */
.split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 5vw, 5rem); align-items: start;
}
.split__quote { font-family: var(--font-heading); font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; color: var(--color-primary); font-weight: 600; margin: 0; }
.split__quote::before { content: ""; display: block; width: 3.5rem; height: 3px; background: var(--color-accent); margin-bottom: 1.5rem; }
.split p { font-size: 1.12rem; color: var(--color-text-muted); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* ---------- Specs table ---------- */
.specs-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.specs-table th, .specs-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.specs-table th { width: 40%; color: var(--color-primary); font-weight: 600; background: var(--color-surface); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }

/* ---------- Garnituren ---------- */
.garnituren-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.garnitur-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.75rem; }
.garnitur-card h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.garnitur-finish { color: var(--color-text-muted); font-size: .9rem; margin-bottom: .75rem; }

/* ---------- Downloads ---------- */
.downloads-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.download-item {
	display: flex; align-items: center; gap: .75rem;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card);
	padding: 1rem 1.25rem;
}
.download-item__icon { flex-shrink: 0; width: 32px; height: 32px; color: var(--color-accent-dark); }
.download-item a { font-weight: 500; word-break: break-word; }

.downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; }
.download-card {
	display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card); overflow: hidden;
	transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.download-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
}
.download-card__thumb { aspect-ratio: 3/4; object-fit: cover; width: 100%; background: var(--color-surface); }
.download-card__label {
	padding: .85rem 1rem 1rem; font-size: .92rem; font-weight: 500;
	color: var(--color-text); line-height: 1.4;
}

/* ---------- Forms ---------- */
.contact-form { max-width: 680px; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: .4rem; }
.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	min-height: 52px;
	padding: .7rem 1rem;
	border: 1px solid #CFC5BD;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea { min-height: 160px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(4, 76, 90, .15); }
.required { color: var(--color-accent-dark); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-message { display: none; padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.form-message.is-visible { display: block; }
.form-message--success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.form-message--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ---------- News: Beitrags-Kacheln ---------- */
.card__body .card__meta { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: .6rem; }
.card__body .card__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 600; color: var(--color-primary); }
.card__link .btn__arrow { width: 1em; height: 1em; transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.card__link:hover .btn__arrow { transform: translateX(4px); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary-deep); color: rgba(255,255,255,.82); }
.site-footer__inner {
	display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 2.5rem;
	padding: clamp(3.5rem, 7vw, 6rem) var(--container-pad) 3rem;
}
.site-footer__icon { opacity: .95; margin-bottom: 1.25rem; border-radius: 14px; }
.site-footer__tagline { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.3; color: #fff; max-width: 18rem; }
.site-footer__heading { color: #fff; font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 1.1rem; }
.site-footer__address { font-style: normal; line-height: 1.85; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #FBBF24; }
.site-footer__links li { margin-bottom: .55rem; }
.site-footer__hours { margin-top: 1rem; }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 1.25rem 0;
	font-size: .85rem;
	text-align: center;
	color: rgba(255,255,255,.6);
}
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ---------- Bewegung ---------- */
@keyframes rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}
@keyframes draw {
	to { stroke-dashoffset: 0; }
}
@keyframes pop {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.hero__copy > * { animation: rise 800ms var(--ease-out) both; }
	.hero__copy > :nth-child(2) { animation-delay: 90ms; }
	.hero__copy > :nth-child(3) { animation-delay: 180ms; }
	.hero__copy > :nth-child(4) { animation-delay: 270ms; }
	.hero__copy > :nth-child(5) { animation-delay: 360ms; }

	.hero__visual { animation: rise 1000ms var(--ease-out) 150ms both; }
	.hero__visual .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1600ms var(--ease-in-out) var(--d, 0ms) both; }
	.hero__visual .dot { animation: pop 500ms var(--ease-out) 1500ms both; transform-box: fill-box; transform-origin: center; }
	.hero__badge { animation: rise 800ms var(--ease-out) 1100ms both; }

	@supports (animation-timeline: view()) {
		.reveal {
			animation: rise linear both;
			animation-timeline: view();
			animation-range: entry calc(var(--i, 0) * 5%) entry calc(38% + var(--i, 0) * 5%);
		}
	}

	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 180ms var(--ease-out) both fade-out; }
	::view-transition-new(root) { animation: 260ms var(--ease-out) both fade-in; }
	::view-transition-group(site-header) { animation-duration: 0s; }
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }

/* Fotos */
.photo-band__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface, #eee); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .photo-band__grid { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.gallery .photo { aspect-ratio: 4 / 5; }
/* Foto-Hero, Feature-Blöcke, Stil-Trio, Foto-Band */
.photo-hero { position: relative; display: flex; align-items: center; min-height: clamp(30rem, 78vh, 46rem); color: #fff; overflow: hidden; background: var(--color-primary-deep); }
.photo-hero picture, .photo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-hero img { object-fit: cover; object-position: 60% 50%; }
.photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,42,51,.82) 0%, rgba(2,42,51,.55) 45%, rgba(2,42,51,.1) 100%); }
.photo-hero__content { position: relative; z-index: 1; padding-block: 4rem; width: 100%; }
.photo-hero__content > * { max-width: 36rem; }
.photo-hero h1, .photo-hero .lead, .photo-hero .eyebrow { color: #fff; }
.photo-hero .lead { color: rgba(255,255,255,.9); margin-bottom: 2rem; }
@media (max-width: 720px) { .photo-hero::after { background: linear-gradient(180deg, rgba(2,42,51,.55), rgba(2,42,51,.8)); } }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature--reverse .feature__media { order: 2; }
.feature__media { aspect-ratio: 4 / 3; }
.feature__text p { font-size: 1.1rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature--reverse .feature__media { order: 0; } }
.style-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.style-trio__item { position: relative; aspect-ratio: 4 / 5; }
.style-trio__item figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.1rem; color: #fff; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; background: linear-gradient(0deg, rgba(2,42,51,.75), transparent); }
@media (max-width: 720px) { .style-trio { grid-template-columns: 1fr; } .style-trio__item { aspect-ratio: 4 / 3; } }
.section--photo { position: relative; overflow: hidden; }
.section--photo > picture, .section--photo > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section--photo::after { content: ""; position: absolute; inset: 0; background: rgba(2,42,51,.78); }
.section--photo > .container { position: relative; z-index: 1; }
.style-trio__item:nth-child(1) img { object-position: 0% 50%; }
.style-trio__item:nth-child(2) img { object-position: 100% 50%; }
.style-trio__item:nth-child(3) img { object-position: 0% 50%; }
.photo-hero--right::after { background: linear-gradient(270deg, rgba(2,42,51,.85) 0%, rgba(2,42,51,.6) 45%, rgba(2,42,51,0) 100%); }
.photo-hero--right img { object-position: 30% 50%; }
.photo-hero--right .photo-hero__content > * { margin-left: auto; }
@media (max-width: 720px) { .photo-hero--right::after { background: linear-gradient(180deg, rgba(2,42,51,.55), rgba(2,42,51,.8)); } .photo-hero--right .photo-hero__content > * { margin-left: 0; } }
.cards-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 960px; margin-inline: auto; }
.card__slides { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-surface); }
.card__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__slides picture:not(:first-child) img { opacity: 0; }
@keyframes card-slide-2 { 0% { opacity: 0; } 10%, 50% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes card-slide-3 { 0% { opacity: 0; } 6.67%, 33.3% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes card-slide-4 { 0% { opacity: 0; } 5%, 25% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes card-slide-5 { 0% { opacity: 0; } 4%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes card-slide-6 { 0% { opacity: 0; } 3.33%, 16.67% { opacity: 1; } 20%, 100% { opacity: 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.card:hover .card__slides--2 img { animation: card-slide-2 3s ease-in-out infinite; }
	.card:hover .card__slides--3 img { animation: card-slide-3 4.5s ease-in-out infinite; }
	.card:hover .card__slides--4 img { animation: card-slide-4 6s ease-in-out infinite; }
	.card:hover .card__slides--5 img { animation: card-slide-5 7.5s ease-in-out infinite; }
	.card:hover .card__slides--6 img { animation: card-slide-6 9s ease-in-out infinite; }
	.card:hover .card__slides picture:nth-child(1) img { animation-delay: -1.5s; }
	.card:hover .card__slides picture:nth-child(2) img { animation-delay: 0s; }
	.card:hover .card__slides picture:nth-child(3) img { animation-delay: 1.5s; }
	.card:hover .card__slides picture:nth-child(4) img { animation-delay: 3s; }
	.card:hover .card__slides picture:nth-child(5) img { animation-delay: 4.5s; }
	.card:hover .card__slides picture:nth-child(6) img { animation-delay: 6s; }
}

.garnitur-media { position: relative; aspect-ratio: 16 / 9; margin-bottom: 1rem; border-radius: var(--radius-md, 8px); overflow: hidden; background: #fff; }
.garnitur-media picture, .garnitur-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.garnitur-media picture + picture { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.garnitur-card:hover .garnitur-media picture + picture, .garnitur-card:focus-within .garnitur-media picture + picture { opacity: 1; }
.garnituren-zubehoer { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
.garnituren-subtitle { margin: 0 0 1.5rem; }
.garnitur-art { color: var(--color-text-muted); font-size: .85rem; margin: -.25rem 0 .75rem; }