/* ==========================================================================
   PAGES.CSS – Seitenspezifische Styles
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE (index.html)
   ========================================================================== */

/* Sektion 1 – Hero
   ========================================================================== */

.hero-section {
	background: var(--color-hero-bg);
	padding: 60px 0;
	min-height: 300px;
	position: relative;
	overflow: hidden;
}

/* Flammen-Keyvisual Hero */
.hero-flame-deco {
	position: absolute;
	bottom: -60px;
	left: 25%;
	transform: translateX(-50%);
	width: min(1200px, 95vw);
	pointer-events: none;
	z-index: 0;
	opacity: 0.12;
}

.hero-flame-deco img {
	width: 100%;
	height: auto;
	display: block;
}

.hero-inner {
	position: relative;
	z-index: 1;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.hero-content {
	padding-right: 20px;
}

.hero-headline {
	font-size: 36px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 12px;
	line-height: 1.15;
}

.hero-subtext {
	font-size: 15px;
	color: var(--color-text-secondary);
	margin-bottom: 28px;
	line-height: 1.6;
}

.hero-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.hero-youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Cover-Trick: iframe immer größer als Container, zentriert */
	width: max(100%, calc(100% * 16 / 9 * 1.05));
	height: max(100%, calc(100% * 9 / 16 * 1.05));
	transform: translate(-50%, -50%);
	border: none;
	color: #555;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Hero Eyebrow Slider
   ========================================================================== */

.hero-eyebrow-slider {
	position: relative;
	height: 24px;
	margin-bottom: 14px;
	overflow: hidden;
}

.hero-eyebrow-slide {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	white-space: nowrap;
}

.hero-eyebrow-slide.active {
	opacity: 1;
	transform: translateY(0);
}

/* Sektion 1b – Standorte + Events Highlight
   ========================================================================== */

.home-highlight-section {
	margin-top: 0;
}

.home-highlight-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.home-highlight-panel {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
}

.home-highlight-panel:hover .home-highlight-placeholder {
	transform: scale(1.03);
}

.home-highlight-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, #242424 0%, #1a1a1a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.15);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: transform 0.4s ease;
	transform-origin: center;
}

.home-highlight-events .home-highlight-placeholder {
	background: linear-gradient(145deg, #1e1e1e 0%, #141414 100%);
}

.home-highlight-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
	transform-origin: center;
	display: block;
}

.home-highlight-panel:hover .home-highlight-img {
	transform: scale(1.04);
}

.home-highlight-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.2) 100%);
	pointer-events: none;
}

.home-highlight-content {
	position: relative;
	z-index: 2;
	padding: 32px 36px;
	width: 100%;
}

.home-highlight-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

.home-highlight-heading {
	font-size: 30px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 14px;
	line-height: 1.15;
}

.home-highlight-locations {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 22px;
}

.home-highlight-locations span {
	font-size: 13px;
	color: #bbb;
}

.home-highlight-locations span::before {
	content: '→ ';
	color: var(--color-red);
}

.home-highlight-text {
	font-size: 14px;
	color: #bbb;
	margin-bottom: 22px;
	line-height: 1.6;
	max-width: 380px;
}

.home-highlight-cta {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 10px 22px;
	border: 2px solid rgba(255,255,255,0.5);
	transition: all var(--transition);
}

.home-highlight-panel:hover .home-highlight-cta {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-black);
}

.home-highlight-events .home-highlight-cta {
	border-color: var(--color-red);
	background: var(--color-red);
}

.home-highlight-events:hover .home-highlight-cta {
	background: #aa1a1f;
	border-color: #aa1a1f;
	color: var(--color-white);
}

@media (max-width: 768px) {
	.home-highlight-grid {
		grid-template-columns: 1fr;
	}

	.home-highlight-panel {
		min-height: 280px;
	}

	.home-highlight-content {
		padding: 24px 20px;
	}

	.home-highlight-heading {
		font-size: 24px;
	}
}

/* Sektion 1c – Themen-Highlights (3 Boxen: Outdoor Kitchen, Searlane, Beratung)
   ========================================================================== */

.home-themen-section {
	margin-top: 2px;
}

.home-themen-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}

.home-themen-panel {
	position: relative;
	overflow: hidden;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
}

.home-themen-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.18);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: transform 0.4s ease;
	transform-origin: center;
}

.home-themen-outdoor .home-themen-placeholder { background: linear-gradient(145deg, #243624 0%, #1a2a1a 100%); }
.home-themen-searlane .home-themen-placeholder { background: linear-gradient(145deg, #242436 0%, #1a1a2e 100%); }
.home-themen-beratung .home-themen-placeholder { background: linear-gradient(145deg, #3a2020 0%, #2a1515 100%); }

.home-themen-panel:hover .home-themen-placeholder {
	transform: scale(1.04);
}

.home-themen-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
	transform-origin: center;
	display: block;
}

.home-themen-panel:hover .home-themen-img {
	transform: scale(1.05);
}

.home-themen-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.0) 100%);
	pointer-events: none;
}

.home-themen-content {
	position: relative;
	z-index: 2;
	padding: 32px 36px;
	width: 100%;
}

.home-themen-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.home-themen-heading {
	font-size: 26px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 12px;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.home-themen-text {
	font-size: 14px;
	color: #ddd;
	margin-bottom: 22px;
	line-height: 1.6;
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.home-themen-cta {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 10px 22px;
	border: 2px solid rgba(255,255,255,0.5);
	transition: all var(--transition);
}

.home-themen-panel:hover .home-themen-cta {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-black);
}

.home-themen-cta-red {
	border-color: var(--color-red) !important;
	background: var(--color-red);
}

.home-themen-panel:hover .home-themen-cta-red {
	background: #aa1a1f !important;
	border-color: #aa1a1f !important;
	color: var(--color-white) !important;
}

@media (max-width: 991px) {
	.home-themen-grid {
		grid-template-columns: 1fr 1fr;
	}

	.home-themen-beratung {
		grid-column: span 2;
		min-height: 280px;
	}
}

@media (max-width: 576px) {
	.home-themen-grid {
		grid-template-columns: 1fr;
	}

	.home-themen-beratung {
		grid-column: span 1;
	}

	.home-themen-panel {
		min-height: 200px;
	}

	.home-themen-content {
		padding: 24px 20px;
	}

	.home-themen-heading {
		font-size: 22px;
	}
}

/* Aktionsartikel-Slider
   ========================================================================== */

.aktions-slider-section {
	background: #f5f5f5;
	padding: 52px 0 44px;
}

.aktions-slider-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}

.aktions-slider-header .section-heading {
	margin-bottom: 0;
}

.aktions-slider-all {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-red);
	text-decoration: none;
	letter-spacing: 0.03em;
	white-space: nowrap;
	flex-shrink: 0;
}

.aktions-slider-all:hover {
	text-decoration: underline;
}

.aktions-slider-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
}

.aktions-slider-track::-webkit-scrollbar {
	height: 4px;
}

.aktions-slider-track::-webkit-scrollbar-track {
	background: transparent;
}

.aktions-slider-track::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 2px;
}

.aktions-artikel-card {
	flex: 0 0 210px;
	scroll-snap-align: start;
	text-decoration: none;
	background: var(--color-white);
	border: 1px solid #e8e8e8;
	transition: box-shadow var(--transition), transform var(--transition);
	display: flex;
	flex-direction: column;
}

.aktions-artikel-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,0.1);
	transform: translateY(-3px);
}

.aktions-artikel-img-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ebebeb;
}

.aktions-artikel-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #ececec 0%, #d8d8d8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aktions-artikel-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--color-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 9px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 4px;
}

.aktions-artikel-badge svg {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	fill: #fff;
}

.aktions-badge-new { background: #1a6e2e; }
.aktions-badge-top { background: #b07000; }

.aktions-artikel-body {
	padding: 14px 16px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.aktions-artikel-brand {
	font-size: 10px;
	font-weight: 700;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.aktions-artikel-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-black);
	line-height: 1.35;
	flex: 1;
	margin-top: 2px;
}

.aktions-artikel-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
}

.aktions-artikel-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-red);
}

.aktions-artikel-price-old {
	font-size: 12px;
	color: #aaa;
	text-decoration: line-through;
}

/* Sektion 2 – USP-Streifen
   ========================================================================== */

.usp-strip {
	background: var(--color-black);
	padding: 36px 0;
}

.usp-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.usp-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 10px;
}

.usp-icon-circle {
	width: 52px;
	height: 52px;
	border: 2px solid #444;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.usp-icon-circle svg {
	width: 24px;
	height: 24px;
	stroke: #888;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.usp-item-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 4px;
}

.usp-item-text {
	font-size: 11px;
	color: #999;
	line-height: 1.5;
}

/* Sektion 3 – Standorte
   ========================================================================== */

.standorte-section {
	padding: 50px 0;
	background: var(--color-white);
}

.standorte-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.standort-card {
	border: 1px solid #e5e5e5;
	overflow: hidden;
}

.standort-card-img {
	background: #333;
	height: 200px;
	overflow: hidden;
}

.standort-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.standort-card:hover .standort-card-img img {
	transform: scale(1.04);
}

.standort-card-body {
	padding: 16px;
}

.standort-card-city {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 2px;
}

.standort-card-region {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

.standort-card-tags {
	margin-bottom: 12px;
}

.standort-card-text {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 16px;
}

.btn-standort-link {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-red);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap var(--transition);
}

.btn-standort-link:hover {
	gap: 8px;
	color: var(--color-red);
}

/* Sektion 4 – USP-Vergleich
   ========================================================================== */

.usp-compare-section {
	padding: 50px 0;
	background: var(--color-bg-light);
}

.usp-compare-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.usp-compare-table th {
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 2px solid #e0e0e0;
}

.usp-compare-table th:first-child {
	text-align: left;
	color: var(--color-text-secondary);
}

.usp-compare-table th.col-grillco {
	background: var(--color-black);
	color: var(--color-white);
	text-align: center;
	border-bottom-color: var(--color-red);
}

.usp-compare-table th.col-online {
	text-align: center;
	color: #aaa;
}

.usp-compare-table td {
	padding: 12px 20px;
	font-size: 13px;
	border-bottom: 1px solid #e8e8e8;
}

.usp-compare-table td:first-child {
	color: var(--color-text-primary);
}

.usp-compare-table td.col-grillco {
	background: var(--color-black);
	text-align: center;
	color: var(--color-red);
	font-size: 16px;
	font-weight: 700;
}

.usp-compare-table td.col-online {
	text-align: center;
	color: #bbb;
	font-size: 16px;
}

.usp-compare-table tr:last-child td {
	border-bottom: none;
}

/* Compare + Aktionen Grid
   ========================================================================== */

.compare-aktionen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
}

/* Aktuelle Aktionen */

.aktion-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #e8e8e8;
}

.aktion-item:last-child {
	border-bottom: none;
}

.aktion-img {
	width: 90px;
	height: 64px;
	background: #e8e8e8;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #aaa;
	text-transform: uppercase;
}

.aktion-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.aktion-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-black);
	margin: 0 0 4px;
	line-height: 1.4;
}

.aktion-text {
	font-size: 11px;
	color: var(--color-text-muted);
	margin: 0 0 6px;
}

.aktion-link {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-red);
	transition: color var(--transition);
}

.aktion-link:hover {
	color: #aa1a1f;
}

/* Sektion 4b – Kurstermine
   ========================================================================== */

.kurstermine-section {
	background: var(--color-hero-bg);
	padding: 50px 0;
}

.kurstermine-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 8px;
}

.kurs-tile {
	background: var(--color-white);
	border: 1px solid #e5e5e5;
	border-left: 3px solid var(--color-red);
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: box-shadow var(--transition), border-left-color var(--transition);
}

.kurs-tile:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	border-left-color: #aa1a1f;
}

.kurs-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.kurs-date {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-black);
}

.kurs-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-secondary);
	line-height: 1.4;
	flex: 1;
	margin: 0;
}

.kurs-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	color: var(--color-text-muted);
	border-top: 1px solid #f0f0f0;
	padding-top: 8px;
	margin-top: auto;
}

.kurs-tile .btn-standort-link {
	margin-top: 4px;
	font-size: 12px;
}

.kurs-tile-cta {
	background: var(--color-black);
	border-color: var(--color-black);
	justify-content: center;
}

.kurs-tile-cta .kurs-label {
	color: #666;
}

.kurs-tile-cta .kurs-title {
	color: var(--color-white);
	font-size: 15px;
	text-align: center;
}

.kurs-all-text {
	font-size: 12px;
	color: #888;
	text-align: center;
	margin: 0;
}

.kurs-tile-cta .btn-primary-red {
	text-align: center;
	margin-top: 8px;
}

@media (max-width: 768px) {
	.compare-aktionen-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

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

	.kurs-tile-cta {
		grid-column: 1 / -1;
	}
}

/* Sektion 5 – Kundenklub-Banner
   ========================================================================== */

/* Gemeinsame Basis */
.kundenklub-banner {
	background: var(--color-black);
	border-left: 4px solid var(--color-red);
	padding: 10px 40px;
	display: flex;
	gap: 24px;
}

/* Standard: horizontal, volle Breite */
.kundenklub-banner:not(.kundenklub-banner-inline) {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 60px;
}

/* Inline: vertikal, füllt Restspalte */
.kundenklub-banner-inline {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin: 0;
}

.kundenklub-banner-content {
	flex: 1;
}

.kundenklub-banner .section-eyebrow {
	margin-bottom: 6px;
}

.kundenklub-headline {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 8px;
}

.kundenklub-subtext {
	font-size: 13px;
	color: #aaa;
}

/* ==========================================================================
   STANDORT-LANDINGPAGE
   ========================================================================== */

/* Hero mit Video-Platzhalter */

.standort-hero {
	background: var(--color-black);
	min-height: 320px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.standort-hero-bg {
	position: absolute;
	inset: 0;
	background: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-play-btn {
	width: 64px;
	height: 64px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color var(--transition);
}

.video-play-btn:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

.video-play-btn svg {
	width: 24px;
	height: 24px;
	fill: rgba(255, 255, 255, 0.5);
}

.standort-hero-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 40px 20px;
}

.standort-hero-title {
	font-size: 42px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 12px;
}

.standort-hero-sub {
	font-size: 15px;
	color: #aaa;
	margin-bottom: 24px;
}

.standort-usp-badges {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.usp-badge {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ccc;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Hero Split (2-spaltig: Links Inhalt / Rechts Roomtour)
   ========================================================================== */

.standort-hero-split {
	align-items: stretch;
	justify-content: flex-start;
	min-height: 400px;
}

.standort-hero-left {
	flex: 0 0 50%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.standort-hero-left .standort-hero-bg {
	position: absolute;
	inset: 0;
}

.standort-hero-left .standort-hero-content {
	text-align: left;
	padding: 48px 52px;
	max-width: 560px;
	width: 100%;
}

.standort-hero-left .standort-usp-badges {
	justify-content: flex-start;
}

.standort-hero-right {
	flex: 0 0 50%;
	background: #0d0d0d;
	position: relative;
	overflow: hidden;
	min-height: 360px;
}

.standort-roomtour-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.standort-roomtour-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 18px 24px;
	background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.standort-roomtour-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	gap: 7px;
}

.standort-roomtour-label svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-red);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

.standort-roomtour-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.standort-roomtour-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.35);
	padding: 7px 14px;
	transition: all var(--transition);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
}

.standort-roomtour-btn svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

.standort-roomtour-btn:hover {
	background: var(--color-red);
	border-color: var(--color-red);
	color: #fff;
}

.standort-roomtour-btn-primary {
	background: var(--color-red);
	border-color: var(--color-red);
}

.standort-roomtour-btn-primary:hover {
	background: #aa1a1f;
	border-color: #aa1a1f;
}

/* USP-Leiste */

.standort-usp-strip {
	background: #f0f0f0;
	padding: 20px 0;
	border-bottom: 1px solid #e0e0e0;
}

.standort-usp-strip-inner {
	display: flex;
	justify-content: space-around;
	gap: 10px;
	flex-wrap: wrap;
}

.standort-usp-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-secondary);
}

.standort-usp-item svg {
	width: 18px;
	height: 18px;
	stroke: var(--color-red);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Servicepoint-Modul (alt, nicht mehr verwendet) */

.servicepoint-module {
	background: #EAF3DE;
	border: 1px solid #C0DD97;
	padding: 24px 28px;
	margin: 40px 0;
}

/* ==========================================================================
   DIGITALER SERVICEPOINT – Standortseite (mobil)
   ========================================================================== */

.dsp-module {
	margin: 40px 0;
}

.dsp-heading {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 20px;
}

.dsp-layout {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.dsp-img-col {
	display: flex;
}

.dsp-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 240px;
}

.dsp-buttons-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dsp-btn {
	display: block;
	background: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-align: center;
	padding: 12px 16px;
	transition: background var(--transition);
}

.dsp-btn:hover {
	background: #aa1a1f;
	color: var(--color-white);
}

/* Mobile: 1-Spalte, Bilder ausblenden */
@media (max-width: 768px) {
	.dsp-layout {
		grid-template-columns: 1fr;
	}

	.dsp-img-col {
		display: none;
	}

	.dsp-heading {
		font-size: 17px;
	}

	.dsp-btn {
		font-size: 14px;
		padding: 14px 16px;
	}
}

.servicepoint-label {
	font-size: 10px;
	font-weight: 700;
	color: #4a7c1a;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}

.servicepoint-bullets {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.servicepoint-bullets li {
	font-size: 13px;
	color: #4a4a4a;
	padding: 4px 0;
	padding-left: 18px;
	position: relative;
}

.servicepoint-bullets li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #5a9e1a;
	font-size: 12px;
}

.servicepoint-btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.btn-green {
	display: inline-block;
	background: #5a9e1a;
	color: var(--color-white);
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 12px;
	padding: 9px 20px;
	border: none;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: background var(--transition);
}

.btn-green:hover {
	background: #4a861a;
	color: var(--color-white);
}

.btn-ghost-green {
	display: inline-block;
	background: transparent;
	color: #5a9e1a;
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 12px;
	padding: 9px 20px;
	border: 2px solid #5a9e1a;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: all var(--transition);
}

.btn-ghost-green:hover {
	background: #5a9e1a;
	color: var(--color-white);
}

/* News-Modul */

.news-module {
	padding: 40px 0;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.news-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.news-item {
	background: var(--color-white);
	border: 1px solid #e5e5e5;
	overflow: hidden;
	transition: box-shadow var(--transition);
}

.news-item:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.news-img {
	background: #e8e8e8;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #aaa;
	text-transform: uppercase;
}

.news-body {
	border-top: 3px solid var(--color-red);
	padding: 14px 16px 16px;
}

.news-date {
	font-size: 10px;
	color: var(--color-text-muted);
	margin-bottom: 6px;
	letter-spacing: 0.05em;
}

.news-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.4;
	margin-bottom: 10px;
}

.news-link {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-red);
	transition: color var(--transition);
}

.news-link:hover {
	color: #aa1a1f;
}

/* News + Instagram Layout (3/4 + 1/4)
   ========================================================================== */

.news-insta-layout {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 40px;
	align-items: stretch;
}

.news-insta-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.news-insta-main .news-module {
	padding-top: 40px;
	padding-bottom: 20px;
}

.news-insta-main .kundenklub-banner-inline {
	flex: 1;
	justify-content: center;
}

.news-insta-sidebar {
	padding-top: 40px;
}

.news-insta-sidebar .section-heading {
	margin-bottom: 16px;
}

.insta-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-bottom: 14px;
}

.insta-post-item {
	aspect-ratio: 1 / 1;
	background: #e8e8e8;
	overflow: hidden;
	position: relative;
	display: block;
}

.insta-post-item:hover .insta-post-overlay {
	opacity: 1;
}

.insta-post-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ececec 0%, #d4d4d4 100%);
}

.insta-post-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--transition);
}

.insta-post-overlay svg {
	width: 24px;
	height: 24px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.5;
}

.insta-follow-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-black);
	text-decoration: none;
	padding: 10px 0 4px;
	border-top: 1px solid #e5e5e5;
	transition: color var(--transition);
}

.insta-follow-link svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	flex-shrink: 0;
}

.insta-follow-link:hover {
	color: var(--color-red);
}

.insta-handle {
	color: #888;
	font-weight: 400;
	margin-left: auto;
	font-size: 11px;
}

/* Standort-Kurse Modul
   ========================================================================== */

.standort-kurse-module {
	padding: 40px 0 48px;
}

.standort-kurse-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.standort-kurse-header .section-heading {
	margin-bottom: 0;
}

.standort-kurse-alle {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-red);
	transition: color var(--transition);
	white-space: nowrap;
}

.standort-kurse-alle:hover {
	color: #aa1a1f;
}

.standort-kurse-list {
	border-top: 1px solid #e5e5e5;
}

.standort-kurs-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid #e5e5e5;
}

.standort-kurs-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--color-black);
	color: var(--color-white);
	flex-shrink: 0;
}

.standort-kurs-day {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.standort-kurs-month {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #aaa;
}

.standort-kurs-info {
	flex: 1;
}

.standort-kurs-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-black);
	margin: 3px 0;
	line-height: 1.3;
}

.standort-kurs-meta {
	font-size: 12px;
	color: var(--color-text-muted);
}

.standort-kurs-item .btn-standort-link {
	flex-shrink: 0;
	font-size: 12px;
}

/* Beratungstermin-Cards */

.beratung-section {
	padding: 40px 0;
	background: var(--color-bg-light);
}

.beratung-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.beratung-card {
	background: var(--color-white);
	border: 1px solid #e5e5e5;
	overflow: hidden;
}

.beratung-card-img {
	background: #e8e8e8;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #aaa;
	text-transform: uppercase;
}

.beratung-card-accent {
	height: 4px;
}

.beratung-card-accent.red { background: var(--color-red); }
.beratung-card-accent.blue { background: #1a5fa3; }
.beratung-card-accent.orange { background: #d97706; }

.beratung-card-body {
	padding: 20px;
}

.beratung-card-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
}

.beratung-card-text {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 16px;
}

/* Fotogalerie */

.gallery-section {
	padding: 40px 0;
}

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

.gallery-item {
	background: #d0d0d0;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Showroom Content-Templates (Bild + Text alternierend)
   ========================================================================== */

.showroom-content-section {
	padding: 0 0 20px;
}

.content-template {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-bottom: 4px;
	min-height: 320px;
}

.content-template-text-left {
	direction: ltr;
}

.ct-img-col {
	overflow: hidden;
	position: relative;
}

.ct-img-placeholder {
	width: 100%;
	height: 100%;
	min-height: 320px;
	background: linear-gradient(135deg, #d8d8d8 0%, #c4c4c4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: transform 0.5s ease;
	transform-origin: center;
}

.content-template:hover .ct-img-placeholder {
	transform: scale(1.03);
}

.ct-text-col {
	background: #f5f5f5;
	padding: 52px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content-template-text-left .ct-text-col {
	background: var(--color-white);
	border: 1px solid #ebebeb;
}

.ct-eyebrow {
	font-size: 10px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
}

.ct-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.25;
	margin-bottom: 16px;
}

.ct-text {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 28px;
}

.ct-features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ct-features li {
	font-size: 13px;
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ct-features li::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--color-red);
	flex-shrink: 0;
}

/* Kontakt & Öffnungszeiten */

.kontakt-section {
	padding: 40px 0;
}

.kontakt-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.kontakt-info dt {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
	margin-top: 14px;
}

.kontakt-info dt:first-child {
	margin-top: 0;
}

.kontakt-info dd {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-primary);
}

.map-placeholder {
	background: #d0d0d0;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ==========================================================================
   SERVICEPOINT-SEITE
   ========================================================================== */

.servicepoint-page {
	padding: 40px 0 60px;
}

.servicepoint-tabs-nav {
	display: flex;
	border-bottom: 3px solid var(--color-red);
	margin-bottom: 32px;
}

.service-tab-btn {
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text-secondary);
	cursor: pointer;
	border: none;
	background: none;
	font-family: var(--font-main);
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
	transition: all var(--transition);
}

.service-tab-btn.active {
	color: var(--color-black);
	border-bottom-color: var(--color-red);
}

.service-tab-btn:hover {
	color: var(--color-black);
}

.service-tab-content {
	display: none;
}

.service-tab-content.active {
	display: block;
}

.service-form {
	max-width: 640px;
}

.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.form-control-custom {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--font-main);
	font-size: 13px;
	color: var(--color-text-primary);
	background: var(--color-white);
	border: 1px solid #ddd;
	outline: none;
	transition: border-color var(--transition);
	-webkit-appearance: none;
}

.form-control-custom:focus {
	border-color: var(--color-red);
}

textarea.form-control-custom {
	resize: vertical;
	min-height: 100px;
}

select.form-control-custom {
	cursor: pointer;
}

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

.file-upload-placeholder {
	border: 2px dashed #ddd;
	padding: 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--transition);
}

.file-upload-placeholder:hover {
	border-color: var(--color-red);
}

.file-upload-icon {
	margin: 0 auto 10px;
	color: #bbb;
}

.file-upload-icon svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.file-upload-text {
	font-size: 12px;
	color: #aaa;
}

/* ==========================================================================
   SERVICEPOINT PAGE – Erweitert
   ========================================================================== */

.sp-page-header {
	padding: 40px 0 32px;
	max-width: 640px;
}

.sp-page-intro {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin: 0;
	max-width: 560px;
}

.sp-section-heading {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 28px;
	color: var(--color-black);
}

/* Service Cards
   ========================================================================== */

.sp-leistungen-section {
	background: var(--color-hero-bg);
	padding: 48px 0;
	margin-bottom: 48px;
}

.sp-cards-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.sp-card {
	background: var(--color-white);
	padding: 24px 20px;
	border: 1px solid #e8e8e8;
	position: relative;
}

.sp-card-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
}

.sp-card-icon svg {
	width: 100%;
	height: 100%;
	stroke: var(--color-red);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sp-card-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--color-black);
}

.sp-card-text {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

.sp-card-tag {
	display: inline-block;
	margin-top: 12px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-red);
	border: 1px solid var(--color-red);
	padding: 2px 8px;
}

/* Process Steps
   ========================================================================== */

.sp-process-section {
	padding-bottom: 48px;
	border-bottom: 1px solid #e8e8e8;
	margin-bottom: 48px;
}

.sp-process-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.sp-step {
	flex: 1;
	padding: 0 20px 0 0;
}

.sp-step-num {
	font-size: 32px;
	font-weight: 700;
	color: #e8e8e8;
	line-height: 1;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

.sp-step-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--color-black);
}

.sp-step-text {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

.sp-step-arrow {
	flex-shrink: 0;
	padding: 0 4px;
	margin-top: 32px;
}

.sp-step-arrow svg {
	width: 18px;
	height: 18px;
	stroke: #ccc;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Forms + Sidebar Layout
   ========================================================================== */

.sp-forms-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: flex-start;
	padding-bottom: 60px;
}

.sp-forms-main {
	min-width: 0;
}

/* Sidebar
   ========================================================================== */

.sp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sp-sidebar-box {
	background: var(--color-hero-bg);
	padding: 20px;
	border: 1px solid #e8e8e8;
}

.sp-sidebar-heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-black);
	margin-bottom: 16px;
}

.sp-sidebar-standort {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e8e8e8;
}

.sp-sidebar-standort:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.sp-sidebar-standort strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 4px;
}

.sp-sidebar-standort p {
	font-size: 11px;
	color: var(--color-text-secondary);
	margin: 0 0 2px;
	line-height: 1.5;
}

.sp-sidebar-standort a {
	font-size: 11px;
	color: var(--color-red);
}

.sp-sidebar-email {
	display: block;
	margin-top: 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-red);
	border-top: 1px solid #e8e8e8;
	padding-top: 14px;
}

.sp-sidebar-partner {
	text-align: center;
}

.sp-partner-badge {
	width: 48px;
	height: 48px;
	background: var(--color-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.sp-partner-badge svg {
	width: 24px;
	height: 24px;
	stroke: white;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sp-sidebar-text {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

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

.sp-sidebar-list li {
	font-size: 12px;
	color: var(--color-text-secondary);
	padding: 5px 0 5px 18px;
	position: relative;
	border-bottom: 1px solid #e8e8e8;
}

.sp-sidebar-list li:last-child {
	border-bottom: none;
}

.sp-sidebar-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--color-red);
	border-bottom: 2px solid var(--color-red);
	transform: translateY(-60%) rotate(-45deg);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	/* Hero */
	.hero-inner {
		grid-template-columns: 1fr;
	}

	.hero-headline {
		font-size: 26px;
	}

	.hero-media {
		aspect-ratio: 16 / 9;
	}

	/* USP Streifen */
	.usp-strip-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Standorte Grid */
	.standorte-grid {
		grid-template-columns: 1fr;
	}

	/* USP Vergleich */
	.usp-compare-table {
		font-size: 12px;
	}

	.usp-compare-table th,
	.usp-compare-table td {
		padding: 10px 12px;
	}

	/* Kundenklub */
	.kundenklub-banner {
		flex-direction: column;
		padding: 24px 20px;
	}

	/* Standort-Hero */
	.standort-hero-title {
		font-size: 28px;
	}

	.standort-hero-split {
		flex-direction: column;
	}

	.standort-hero-left {
		flex: none;
		width: 100%;
		min-height: 260px;
	}

	.standort-hero-left .standort-hero-content {
		padding: 36px 28px;
	}

	.standort-hero-right {
		flex: none;
		width: 100%;
		min-height: 280px;
	}

	/* News + Instagram */
	.news-insta-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.news-insta-sidebar {
		padding-top: 0;
		padding-bottom: 40px;
	}

	/* News Grid */
	.news-grid,
	.news-grid-4 {
		grid-template-columns: 1fr 1fr;
	}

	/* Beratung Grid */
	.beratung-grid {
		grid-template-columns: 1fr;
	}

	/* Galerie */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Content Templates */
	.content-template {
		grid-template-columns: 1fr;
	}

	.content-template-text-left .ct-text-col {
		order: -1;
	}

	.ct-text-col {
		padding: 36px 28px;
	}

	/* Kontakt */
	.kontakt-grid {
		grid-template-columns: 1fr;
	}

	/* Servicepoint Form */
	.form-row-2 {
		grid-template-columns: 1fr;
	}

	/* Servicepoint – neue Sektionen */
	.sp-cards-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sp-process-steps {
		flex-direction: column;
		gap: 24px;
	}

	.sp-step-arrow {
		transform: rotate(90deg);
		margin: 0;
		padding: 0;
	}

	.sp-forms-layout {
		grid-template-columns: 1fr;
	}

	.sp-sidebar {
		order: -1;
	}
}

/* ==========================================================================
   ARTIKELDETAIL (PDP)
   ========================================================================== */

.pdp-breadcrumb {
	background: var(--color-bg-light);
	border-bottom: 1px solid #e8e8e8;
	padding: 10px 0;
}

.pdp-breadcrumb nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--color-text-muted);
}

.pdp-breadcrumb nav a {
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.pdp-breadcrumb nav a:hover {
	color: var(--color-red);
}

.pdp-breadcrumb nav span:last-child {
	color: var(--color-text-primary);
}

.pdp-grid {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 48px;
	padding: 32px 0 48px;
	align-items: start;
}

.pdp-img-main {
	background: #f0f0f0;
	height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #aaa;
}

.pdp-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.pdp-thumb {
	width: 72px;
	height: 72px;
	background: #f0f0f0;
	border: 2px solid transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #aaa;
	transition: border-color var(--transition);
}

.pdp-thumb:hover {
	border-color: #ccc;
}

.pdp-thumb.active {
	border-color: var(--color-red);
}

.pdp-article-nr {
	margin-top: 10px;
	font-size: 11px;
	color: var(--color-text-muted);
}

.pdp-brand {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.pdp-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 10px;
	color: var(--color-black);
}

.pdp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.pdp-stars {
	display: flex;
	gap: 2px;
}

.pdp-rating-link {
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.pdp-rating-link:hover {
	color: var(--color-red);
}

.pdp-divider {
	border: none;
	border-top: 1px solid #e8e8e8;
	margin: 16px 0;
}

.pdp-price {
	font-size: 30px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 4px;
}

.pdp-price-note {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.pdp-availability {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #2a7a2a;
	margin-bottom: 20px;
}

.pdp-availability-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2a7a2a;
	flex-shrink: 0;
}

.pdp-add-to-cart {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}

.pdp-qty {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
}

.pdp-qty button {
	width: 36px;
	height: 44px;
	border: none;
	background: #f5f5f5;
	font-size: 18px;
	cursor: pointer;
	transition: background var(--transition);
}

.pdp-qty button:hover {
	background: #e8e8e8;
}

.pdp-qty input {
	width: 48px;
	height: 44px;
	text-align: center;
	border: none;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 15px;
	font-family: var(--font-main);
	-moz-appearance: textfield;
}

.pdp-qty input::-webkit-outer-spin-button,
.pdp-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pdp-btn-cart {
	flex: 1;
	height: 44px;
	background: var(--color-red);
	color: white;
	border: none;
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background var(--transition);
}

.pdp-btn-cart:hover {
	background: #aa1a1f;
}

.pdp-wishlist {
	display: flex;
	gap: 20px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

.pdp-wishlist a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.pdp-wishlist a:hover {
	color: var(--color-red);
}

.pdp-features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.pdp-features li {
	padding: 6px 0;
	font-size: 13px;
	color: var(--color-text-secondary);
	display: flex;
	gap: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.pdp-features li::before {
	content: '✓';
	color: var(--color-red);
	font-weight: 700;
	flex-shrink: 0;
}

.pdp-cnc {
	background: #1e1e1e;
	padding: 16px 20px;
	margin-top: 8px;
}

.pdp-cnc-heading {
	font-size: 12px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}

.pdp-cnc-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pdp-cnc-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #aaa;
}

.pdp-cnc-item .lagernd {
	color: #5cb85c;
	font-weight: 700;
	font-size: 11px;
}

/* Tabs */

.pdp-tabs-section {
	background: var(--color-bg-light);
	padding: 40px 0;
}

.pdp-tabs {
	display: flex;
	border-bottom: 2px solid #e0e0e0;
	margin-bottom: 28px;
	gap: 0;
}

.pdp-tab {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color var(--transition);
	user-select: none;
}

.pdp-tab:hover {
	color: var(--color-black);
}

.pdp-tab.active {
	color: var(--color-black);
	border-bottom-color: var(--color-red);
}

.pdp-tab-content {
	display: none;
}

.pdp-tab-content.active {
	display: block;
}

.pdp-tab-text {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 760px;
}

.pdp-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.pdp-specs-table tr:nth-child(even) {
	background: white;
}

.pdp-specs-table td {
	padding: 10px 16px;
	font-size: 13px;
	border-bottom: 1px solid #e8e8e8;
}

.pdp-specs-table td:first-child {
	color: var(--color-text-muted);
	width: 40%;
}

.pdp-specs-table td:last-child {
	color: var(--color-text-primary);
	font-weight: 700;
}

/* Reviews */

.pdp-review {
	background: white;
	border: 1px solid #e5e5e5;
	padding: 20px;
	margin-bottom: 16px;
}

.pdp-review-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.pdp-review-name {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.pdp-review-stars {
	display: flex;
	gap: 2px;
}

.pdp-review-date {
	font-size: 12px;
	color: var(--color-text-muted);
}

.pdp-review-text {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Ähnliche Produkte */

.pdp-related {
	padding: 48px 0;
}

.pdp-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.pdp-product-card {
	border: 1px solid #e5e5e5;
	overflow: hidden;
	transition: box-shadow var(--transition);
}

.pdp-product-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.pdp-product-img {
	background: #f0f0f0;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pdp-product-body {
	padding: 16px;
}

.pdp-product-brand {
	font-size: 10px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.pdp-product-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 8px;
	line-height: 1.3;
}

.pdp-product-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-black);
	margin-bottom: 12px;
}

/* PDP Responsive */

@media (max-width: 768px) {
	.pdp-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.pdp-title {
		font-size: 20px;
	}

	.pdp-price {
		font-size: 24px;
	}

	.pdp-related-grid {
		grid-template-columns: 1fr 1fr;
	}

	.pdp-tabs {
		overflow-x: auto;
	}
}

/* ==========================================================================
   Flammen-Animation (Hero Keyvisual)
   ========================================================================== */

@keyframes flameDance {
	0%, 100% {
		transform: scale(1) translateY(0px);
		opacity: 1;
	}
	25% {
		transform: scale(1.009) translateY(-3px) rotate(0.3deg);
		opacity: 0.97;
	}
	50% {
		transform: scale(1.005) translateY(-2px) rotate(-0.2deg);
		opacity: 1;
	}
	75% {
		transform: scale(1.007) translateY(-4px) rotate(0.2deg);
		opacity: 0.96;
	}
}

.hero-flame-deco img {
	transform-origin: bottom center;
	animation: flameDance 5s ease-in-out infinite;
}

/* ==========================================================================
   Back-to-top Button
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: 32px;
	right: 28px;
	width: 46px;
	height: 46px;
	background: var(--color-red);
	color: var(--color-white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
	pointer-events: none;
	z-index: 990;
}

.back-to-top svg {
	width: 20px;
	height: 20px;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-top:hover {
	background: #aa1a1f;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(204, 32, 39, 0.38);
}

@media (max-width: 768px) {
	.back-to-top {
		bottom: 78px;
		right: 14px;
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Galerie – Hover-Effekt
   ========================================================================== */

.gallery-item {
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	transition: transform 0.25s ease;
}

.gallery-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.3s ease;
	z-index: 1;
}

.gallery-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 2;
	/* Lupe via box-shadow simuliert */
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.92),
		inset 0 0 0 2px #555,
		4px 4px 0 2px rgba(255, 255, 255, 0),
		5px 5px 0 3px #555;
}

.gallery-item:hover::before {
	background: rgba(0, 0, 0, 0.3);
}

.gallery-item:hover::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

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

/* ==========================================================================
   Beratungs-Cards – Hover
   ========================================================================== */

.beratung-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.beratung-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Map-Placeholder – Dummy-Map-Optik
   ========================================================================== */

.map-placeholder {
	background-color: #dce8f0;
	background-image:
		linear-gradient(rgba(160, 185, 205, 0.4) 1px, transparent 1px),
		linear-gradient(90deg, rgba(160, 185, 205, 0.4) 1px, transparent 1px),
		linear-gradient(rgba(160, 185, 205, 0.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(160, 185, 205, 0.18) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
	min-height: 260px;
	border: 1px solid #bdd0dc;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: transparent;
}

/* Straße horizontal */
.map-placeholder::before {
	content: '';
	position: absolute;
	top: 42%;
	left: -10%;
	right: -10%;
	height: 20px;
	background: rgba(255, 255, 255, 0.75);
	transform: rotate(-6deg);
	z-index: 0;
}

/* Marker-Pin */
.map-placeholder::after {
	content: '';
	position: absolute;
	top: calc(42% - 34px);
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	background: var(--color-red);
	border-radius: 50% 50% 50% 0;
	transform: translateX(-50%) rotate(-45deg);
	box-shadow: 0 2px 8px rgba(204, 32, 39, 0.5);
	z-index: 1;
}