/* =====================================================
   Bodmer Covers – eigene Ergänzungen zum Template
   (wird nach main.css geladen)
   ===================================================== */

:root {
	--bc-rot: #c40e39;
	--bc-navy: #001e47;
	--bc-text: #282828;
	--bc-grau: #6b6b6b;
	--bc-linie: rgba(99, 116, 133, 0.2);
	--bc-flaeche: #f9f9f9;
}

/* ---------- Logo: passt jetzt in die Kopfzeile ---------- */
#header .logo img {
	height: 52px;
	margin-top: 6px;
}
@media screen and (max-width: 736px) {
	#header .logo img {
		height: 40px !important;
		margin-top: 4px !important;
	}
}

/* ---------- Abschnitts-Überschriften Startseite ---------- */
.bc-head {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 3rem auto;
}
.bc-head h2 {
	margin-bottom: 0.75rem;
}
.bc-head p {
	color: var(--bc-grau);
	margin: 0;
}
.bc-kicker {
	display: block;
	color: var(--bc-rot);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

/* ---------- Vorteile ---------- */
.bc-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.bc-features li {
	padding: 0;
	text-align: center;
}
.bc-features .bc-icon,
.bc-construction .bc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--bc-navy);
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 1.25rem;
}
.bc-features h3 {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}
.bc-features p {
	color: var(--bc-grau);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------- Bild-Auswahl ---------- */
.bc-showcase {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2.5rem;
}
.bc-showcase a {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 4 / 3;
	border-bottom: 0;
}
.bc-showcase img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.bc-showcase a:hover img {
	transform: scale(1.04);
}

/* ---------- Ablauf ---------- */
.bc-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem 0;
	counter-reset: schritt;
}
.bc-steps li {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--bc-linie);
	border-radius: 8px;
	counter-increment: schritt;
}
.bc-steps li:before {
	content: counter(schritt);
	position: absolute;
	top: -1rem;
	left: 1.5rem;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	border-radius: 50%;
	background: var(--bc-rot);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
}
.bc-steps h3 {
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}
.bc-steps p {
	color: var(--bc-grau);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------- Stoffe ---------- */
.bc-fabrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.bc-fabric {
	background: #fff;
	border: 1px solid var(--bc-linie);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.bc-fabric img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.bc-fabric .bc-fabric-body {
	padding: 1.5rem 1.75rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.bc-fabric h3 {
	margin-bottom: 0.25rem;
}
.bc-fabric .bc-meta {
	color: var(--bc-grau);
	font-size: 0.85rem;
	letter-spacing: 0.05rem;
	margin-bottom: 1rem;
}
.bc-fabric p {
	font-size: 0.95rem;
	flex: 1;
}
.bc-price {
	border-top: 1px solid var(--bc-linie);
	padding-top: 1rem;
	margin: 0;
	font-size: 0.95rem;
}
.bc-price strong {
	font-size: 1.4rem;
	color: var(--bc-navy);
	margin-right: 0.35rem;
}
.bc-price small {
	display: block;
	color: var(--bc-grau);
	font-size: 0.8rem;
	margin-top: 0.25rem;
}

/* ---------- Abschluss: Über uns + Kontakt ---------- */
.bc-closing {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 4rem;
	align-items: start;
}
.bc-contact {
	background: #fff;
	border: 1px solid var(--bc-linie);
	border-radius: 8px;
	padding: 2rem;
}
.bc-contact h3 {
	margin-bottom: 1.25rem;
}
.bc-contact ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}
.bc-contact li {
	padding: 0 0 0 2rem;
	position: relative;
	margin-bottom: 0.9rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.bc-contact li .fas,
.bc-contact li .icon {
	position: absolute;
	left: 0;
	top: 0.2rem;
	color: var(--bc-rot);
	width: 1.2rem;
	text-align: center;
}
.bc-contact .actions {
	margin-bottom: 0;
}

/* ---------- Footer mit Kontaktdaten (alle Seiten) ---------- */
.bc-footer-contact {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--bc-grau);
	font-size: 0.9rem;
	line-height: 1.8;
}
.bc-footer-contact a {
	color: inherit;
}

/* ---------- Galerie: Hinweis KI-Bilder ---------- */
.gallery-note {
	font-size: 0.9rem;
	color: var(--bc-grau);
	background: #fff;
	border-left: 3px solid var(--bc-rot);
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem 0;
}

/* KI-Kennzeichnung direkt am Bild (Galerie) */
.gallery a.bc-ki {
	position: relative;
}
.bc-ki-badge {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	background: rgba(0, 30, 71, 0.82);
	color: #fff;
	font-size: 0.68rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
/* Position je Bild so wählen, dass die Kennzeichnung nicht auf dem Cover liegt */
.bc-ki-badge--tr { left: auto; right: 0.5rem; }
.bc-ki-badge--bl { top: auto; bottom: 0.5rem; }
.bc-ki-badge--br { top: auto; bottom: 0.5rem; left: auto; right: 0.5rem; }
/* Cover füllt das ganze Bild: Kennzeichnung direkt unter dem Bild */
.gallery a.bc-ki .bc-ki-badge--unter {
	position: static;
	display: block;
	width: fit-content;
	margin: 0.35rem 0 0 0;
}
@media (max-width: 480px) {
	.bc-ki-badge { font-size: 0.6rem; padding: 0.1rem 0.4rem; left: 0.3rem; top: 0.3rem; }
	.bc-ki-badge--tr { left: auto; right: 0.3rem; }
	.bc-ki-badge--bl, .bc-ki-badge--br { top: auto; bottom: 0.3rem; }
	.bc-ki-badge--br { left: auto; right: 0.3rem; }
}
.bc-ki-badge::before {
	content: "\f0d0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 0.4em;
}
.gallery .modal .bc-modal-note {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: 3px;
	background: rgba(0, 30, 71, 0.85);
	color: #fff;
	font-size: 0.8rem;
	white-space: nowrap;
}
.gallery .modal .bc-modal-note:empty {
	display: none;
}

/* ---------- Carcover-Seite ---------- */
.carcover-page .text-block {
	white-space: normal;
}
.bc-list {
	margin: 0 0 1.5rem 0;
}
.bc-list li {
	margin-bottom: 0.35rem;
}
.bc-figure {
	margin: 0 0 2.5rem 0;
}
.bc-figure img {
	width: 100%;
	display: block;
	border-radius: 8px;
}
.bc-figure figcaption {
	font-size: 0.85rem;
	color: var(--bc-grau);
	margin-top: 0.5rem;
}
.bc-figure-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 2.5rem 0;
}
.bc-figure-row img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.bc-cta-box {
	background: var(--bc-flaeche);
	border: 1px solid var(--bc-linie);
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	margin-top: 3rem;
}
.bc-cta-box p {
	margin-bottom: 1.25rem;
}
.bc-cta-box .actions {
	margin-bottom: 0;
	justify-content: center;
}

/* ---------- Konfigurator: "Keine"-Kachel ---------- */
.color-tile.bc-none {
	background: #fff !important;
	position: relative;
	overflow: hidden;
}
.color-tile.bc-none:after {
	content: "";
	position: absolute;
	left: -20%;
	top: 50%;
	width: 140%;
	height: 2px;
	background: var(--bc-rot);
	transform: rotate(-45deg);
}
.color-tile:focus-visible {
	outline: 2px solid var(--bc-navy);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 980px) {
	.bc-features,
	.bc-steps {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 2.5rem;
	}
	.bc-closing {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}
@media screen and (max-width: 736px) {
	.bc-showcase {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}
	.bc-fabrics {
		grid-template-columns: 1fr;
	}
	.bc-head {
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 480px) {
	.bc-features,
	.bc-steps {
		grid-template-columns: 1fr;
	}
	.bc-figure-row {
		grid-template-columns: 1fr;
	}
	.bc-contact {
		padding: 1.5rem;
	}
}

/* Abstände gegen Template-Regeln absichern */
.wrapper .inner header.bc-head {
	margin-bottom: 3.5rem !important;
}
.wrapper .inner .bc-steps {
	margin: 0 0 3rem 0 !important;
	padding: 1rem 0 0 0 !important;
}
.wrapper .inner .bc-showcase,
.wrapper .inner .bc-fabrics {
	margin-bottom: 3rem !important;
}
@media screen and (max-width: 736px) {
	.wrapper .inner header.bc-head {
		margin-bottom: 2.25rem !important;
	}
}

/* =====================================================
   Carcover-Seite (body.cc-page)
   ===================================================== */
.cc-page { background: #fff; }
.cc {
	--cc-text: #1f2a37;
	--cc-muted: #5b6573;
	--cc-tint: #f4f5f7;
	color: var(--cc-text);
	font-size: 1.05rem;
}
.cc p,
.cc li,
.cc dd {
	font-weight: 400;
	color: var(--cc-text);
	line-height: 1.75;
}
.cc h1,
.cc h2 {
	font-family: "Oswald", Helvetica, sans-serif;
	font-weight: 600;
	color: var(--bc-navy);
	letter-spacing: 0.01em;
	line-height: 1.15;
}
.cc h1 { font-size: 3.4rem; margin: 0 0 1.5rem 0; }
.cc h2 { font-size: 2.1rem; margin: 0 0 1.25rem 0; }
.cc h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--cc-text);
	margin: 0 0 0.4rem 0;
	line-height: 1.35;
}
.cc p { margin: 0 0 1.1rem 0; }
.cc a:not(.button) { color: var(--bc-navy); border-bottom-color: rgba(0,30,71,0.35); }

.cc-wrap {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 2.5rem;
}
.cc-text { max-width: 40rem; }
.cc-sec { padding: 5.5rem 0; }
.cc-tint { background: var(--cc-tint); }

/* Einstieg */
.cc-intro { padding: 8.5rem 0 5rem 0; }
.cc-intro-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 4rem;
	align-items: center;
}
.cc-lead {
	font-size: 1.35rem;
	line-height: 1.6 !important;
	color: var(--bc-navy) !important;
}
.cc-intro-img { margin: 0; }
.cc-intro-img img,
.cc-figure img {
	width: 100%;
	display: block;
	border-radius: 4px;
}
.cc-figure { margin: 0; }
.cc .actions { margin: 2rem 0 0 0; }

/* Text + Element nebeneinander */
.cc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: start;
}
.cc-split-rev { align-items: center; }

/* Vergleich */
.cc-compare {
	margin-top: 4.2rem;
	border-top: 2px solid var(--bc-navy);
	font-size: 0.98rem;
}
.cc-compare-head,
.cc-compare-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid #dde1e6;
}
.cc-compare-head span {
	font-weight: 700;
	color: var(--cc-text);
}
.cc-compare-head span:last-child { color: var(--bc-rot); }
.cc-compare-row span:first-child { color: var(--cc-muted); }
.cc-compare-row span:last-child { font-weight: 700; color: var(--cc-text); }

/* Einsatzorte */
.cc-places {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin: 2.5rem 0 2.5rem 0;
}
.cc-places i {
	font-size: 1.5rem;
	color: var(--bc-navy);
	display: block;
	margin-bottom: 0.9rem;
}
.cc-places p { margin: 0; color: var(--cc-muted) !important; }
.cc-note {
	margin: 0 !important;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--bc-rot);
	background: #fff;
	max-width: 40rem;
}

/* Stoffe */
.cc-fabrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	margin-top: 2rem;
}
.cc-fabric {
	display: block;
	border-bottom: 0 !important;
	color: inherit !important;
}
.cc-fabric img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.cc-fabric-name {
	display: block;
	font-family: "Oswald", Helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--bc-navy);
	margin-bottom: 0.35rem;
}
.cc-fabric-desc { display: block; color: var(--cc-muted); line-height: 1.6; }
.cc-fabric:hover .cc-fabric-name { color: var(--bc-rot); }

/* Herstellung: Zeitleiste mit Naht */
.cc-process-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 4.5rem;
	align-items: start;
}
.cc-steps {
	list-style: none;
	margin: 2.5rem 0 0 0;
	padding: 0;
	counter-reset: cc-step;
	position: relative;
}
/* die "Naht": gestrichelte rote Linie wie ein Keder */
.cc-steps:before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 1.2rem;
	bottom: 1.2rem;
	border-left: 2px dashed var(--bc-rot);
}
.cc-steps li {
	position: relative;
	padding: 0 0 2.2rem 3.75rem;
	counter-increment: cc-step;
}
.cc-steps li:last-child { padding-bottom: 0; }
.cc-steps li:before {
	content: counter(cc-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	line-height: 2.2rem;
	border-radius: 50%;
	background: var(--bc-navy);
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 0.95rem;
	box-shadow: 0 0 0 5px var(--cc-tint);
}
.cc-steps h3 { padding-top: 0.3rem; }
.cc-steps p { margin: 0; }
.cc-process-img { position: sticky; top: 6rem; margin-top: 4.5rem; }
.cc-process-img img { width: 100%; display: block; border-radius: 4px; }
.cc-process-img p {
	font-size: 0.9rem;
	color: var(--cc-muted) !important;
	margin-top: 0.75rem;
	line-height: 1.6 !important;
}

/* Details */
.cc-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin-top: 2.5rem;
}
.cc-details h3 {
	padding-bottom: 0.6rem;
	margin-bottom: 0.9rem;
	border-bottom: 2px solid var(--bc-navy);
}
.cc-details ul { list-style: none; padding: 0; margin: 0; }
.cc-details li {
	padding: 0 0 0 1.4rem;
	margin-bottom: 0.55rem;
	position: relative;
	line-height: 1.55;
}
.cc-details li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.6rem;
	border-top: 2px solid var(--bc-rot);
}

/* Fakten */
.cc-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin: 1rem 0 2rem 0;
}
.cc-facts dt {
	font-family: "Oswald", Helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--bc-navy);
	margin-bottom: 0.6rem;
}
.cc-facts dd { margin: 0; line-height: 1.7; }
.cc-facts strong { color: var(--bc-navy); }
.cc-more { color: var(--cc-muted) !important; margin: 0 !important; }

/* Abschluss */
.cc-cta {
	background: var(--bc-navy);
	padding: 5rem 0;
	text-align: center;
}
.cc-cta h2 { color: #fff; }
.cc-cta p { color: rgba(255,255,255,0.8) !important; max-width: 36rem; margin: 0 auto !important; }
.cc-cta .actions { justify-content: center; }
.cc-cta .button { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); color: #fff !important; }
.cc-cta .button.primary { background: #fff; color: var(--bc-navy) !important; box-shadow: none; }
.cc-cta .button.primary:hover { background: #e8ebf0; }

/* Responsive */
@media screen and (max-width: 980px) {
	.cc h1 { font-size: 2.7rem; }
	.cc-intro-grid,
	.cc-split,
	.cc-process-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.cc-compare { margin-top: 0; }
	.cc-process-img { position: static; margin-top: 0; max-width: 28rem; }
	.cc-details,
	.cc-facts { grid-template-columns: 1fr 1fr; }
	.cc-split-rev .cc-figure { order: 2; }
}
@media screen and (max-width: 736px) {
	.cc { font-size: 1rem; }
	.cc-wrap { padding: 0 1.25rem; }
	.cc-intro { padding: 6rem 0 3.5rem 0; }
	.cc-sec { padding: 3.75rem 0; }
	.cc h1 { font-size: 2.3rem; }
	.cc h2 { font-size: 1.75rem; }
	.cc-lead { font-size: 1.2rem; }
	.cc-places,
	.cc-fabrics,
	.cc-details,
	.cc-facts { grid-template-columns: 1fr; gap: 2rem; }
	.cc-compare-head,
	.cc-compare-row { gap: 1rem; font-size: 0.92rem; }
	.cc .actions { flex-wrap: wrap; }
}

/* Carcover: Feinschliff */
.cc .actions { margin-top: 2rem !important; margin-bottom: 0 !important; }
.cc h1 { margin-bottom: 1.5rem !important; }
.cc h2 { margin-bottom: 1.25rem !important; }
.cc-fabric { text-decoration: none !important; }
.cc-steps:before { display: none; }
.cc-steps li:not(:last-child):after {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 2.6rem;
	bottom: 0.4rem;
	border-left: 2px dashed var(--bc-rot);
}
.cc-intro .actions,
.cc .cc-text .actions { margin-left: -1rem !important; }
.cc-intro .actions { justify-content: flex-start !important; }
@media screen and (max-width: 736px) {
	.cc .actions { margin-left: 0 !important; }
	.cc .actions li { padding-left: 0 !important; }
}

/* =====================================================
   Konfigurator: Rautensteppung für Q240
   ===================================================== */
.preview-container { container-type: inline-size; }
.preview-container #layer-reifen   { z-index: 1; }
.preview-container #layer-bezug    { z-index: 2; }
.preview-container #layer-streifen { z-index: 3; }
.preview-container #layer-seiten   { z-index: 4; }
.preview-container #layer-keder    { z-index: 6; }

#layer-steppung {
	--q: 2.3cqw;                 /* Rautenabstand – skaliert mit der Vorschau */
	--licht: rgba(255, 255, 255, 0.045);
	--schatten: rgba(0, 0, 0, 0.05);
	--naht: rgba(0, 0, 0, 0.12);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	/* je Richtung: Licht direkt nach der Naht, Schatten vor der nächsten Naht = gepolsterte Raute */
	background:
		repeating-linear-gradient(62deg,
			var(--licht) 0,
			transparent calc(var(--q) * 0.45),
			var(--schatten) calc(var(--q) - 1.6px),
			var(--naht) calc(var(--q) - 1.2px) var(--q)),
		repeating-linear-gradient(-62deg,
			var(--licht) 0,
			transparent calc(var(--q) * 0.45),
			var(--schatten) calc(var(--q) - 1.6px),
			var(--naht) calc(var(--q) - 1.2px) var(--q));
	/* Steppung nur auf dem Stoff: Silhouette der Bezug-Ebene als Maske */
	-webkit-mask-image: url("../../images/config/bezug/Bezug-schwarz-101.png");
	mask-image: url("../../images/config/bezug/Bezug-schwarz-101.png");
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top left;
	mask-position: top left;
}
#layer-steppung.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	#layer-steppung { transition: none; }
}

/* Umschalter, wenn beide Materialien gewählt sind */
.preview-material {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 1rem 0;
	font-size: 0.85rem;
}
.preview-material[hidden] { display: none; }
.preview-material span { color: #5b6573; margin-right: 0.25rem; }
.preview-material button {
	appearance: none;
	height: auto;
	line-height: 1.2;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	border: 1px solid #c9ced6;
	background: #fff;
	color: #1f2a37 !important;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
.preview-material button.active {
	background: var(--bc-navy);
	border-color: var(--bc-navy);
	color: #fff !important;
}
.preview-material button:focus-visible {
	outline: 2px solid var(--bc-rot);
	outline-offset: 2px;
}

/* Farbfelder: Rautensteppung, wenn Q240 in der Vorschau aktiv ist */
.controls-panel .color-tile:not(.bc-none):before {
	--q: 9px;
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background:
		repeating-linear-gradient(62deg,
			rgba(255, 255, 255, 0.06) 0,
			transparent calc(var(--q) * 0.45),
			rgba(0, 0, 0, 0.07) calc(var(--q) - 1.6px),
			rgba(0, 0, 0, 0.16) calc(var(--q) - 1.2px) var(--q)),
		repeating-linear-gradient(-62deg,
			rgba(255, 255, 255, 0.06) 0,
			transparent calc(var(--q) * 0.45),
			rgba(0, 0, 0, 0.07) calc(var(--q) - 1.6px),
			rgba(0, 0, 0, 0.16) calc(var(--q) - 1.2px) var(--q));
}
.controls-panel.is-q240 .color-tile:not(.bc-none):before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.controls-panel .color-tile:before { transition: none; }
}

/* =====================================================
   EINHEITLICHES ERSCHEINUNGSBILD (alle Seiten)
   Überschriften: Oswald 600, Navy · Fließtext: Lato 400, dunkles Blaugrau
   Primär-Buttons: Navy · Lesebreite begrenzt
   ===================================================== */
:root { --bc-text: #1f2a37; --bc-muted: #5b6573; }

body, input, select, textarea {
	font-weight: 400;
	color: var(--bc-text);
}

/* Überschriften – Oswald gibt es nur in 600, daher keine künstliche Fettung */
#page-wrapper h1,
#page-wrapper h2 {
	font-family: "Oswald", Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.15;
}
#page-wrapper h1:not(#banner h1),
#page-wrapper h2:not(#menu h2):not(.cc-cta h2) {
	color: var(--bc-navy);
}
#page-wrapper h3 {
	font-family: "Lato", Helvetica, sans-serif;
	font-weight: 700;
	color: var(--bc-text);
}

/* Seitentitel einheitlich: links, gleiche Größe */
header.major h1 {
	font-size: 3.2rem;
	margin-bottom: 1rem;
}
header.major.special { text-align: left; }
header.major p,
header.major .text-block {
	font-size: 1.2rem !important;
	font-weight: 400;
	color: #3a4655;
	line-height: 1.65;
	max-width: 46rem;
}
:where(.wrapper) h2 { font-size: 2rem; }

/* Fließtext */
:where(.wrapper) p,
:where(.wrapper) li,
:where(.wrapper) address {
	font-size: 1.05rem;
	line-height: 1.75;
}
/* Lesebreite für reine Textseiten und Formulare */
:where(#main.wrapper, .wrapper.style1) .inner > p,
:where(#main.wrapper, .wrapper.style1) .inner > ul:not(.actions):not(.tabs),
:where(#main.wrapper, .wrapper.style1) .inner > address,
:where(#main.wrapper, .wrapper.style1) .inner > h2,
:where(#main.wrapper, .wrapper.style1) .inner > h3,
.styled-form {
	max-width: 46rem;
}

/* Rechtliche Seiten: kleinere Zwischenüberschriften */
.legal-page #page-wrapper h2 {
	font-size: 1.45rem;
	margin-top: 2.5rem;
	margin-bottom: 0.6rem;
}
.legal-page #page-wrapper h3 { font-size: 1.1rem; margin-top: 1.5rem; }

/* Links im Inhalt */
:where(.wrapper, .cc) a:not(.button):not(.icon) { color: var(--bc-navy); }

/* Buttons: Primär in Navy statt Schwarz */
.button.primary,
button.primary,
input[type="submit"].primary {
	background-color: var(--bc-navy) !important;
	color: #fff !important;
}
.button.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover {
	background-color: #0b2f61 !important;
}
button.primary:disabled {
	background-color: #9aa3ae !important;
	cursor: not-allowed;
}
/* Abschluss-Block (Navy-Hintergrund): Primär-Button bleibt hell */
.cc-cta .button.primary { background-color: #fff !important; color: var(--bc-navy) !important; }
.cc-cta .button.primary:hover { background-color: #e8ebf0 !important; }

/* Carcover-/Materialien-Seiten an die Grundschrift angleichen */
.cc { font-size: 1em; }
.cc p, .cc li, .cc dd { font-size: 1.05rem; }
.cc-lead { font-size: 1.3rem !important; }
.cc-tint { background: #f9f9f9; }
.cc-intro-short { padding-bottom: 3.5rem; }
.cc-spec {
	color: var(--bc-muted) !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.03em;
	margin-top: -0.5rem !important;
}

/* Über uns: Zeitleisten-Texte in Grundschrift */
.timeline p { font-weight: 400; color: var(--bc-muted); }

@media screen and (max-width: 736px) {
	header.major h1 { font-size: 2.3rem; }
	:where(.wrapper) h2 { font-size: 1.6rem; }
	header.major p, header.major .text-block { font-size: 1.1rem !important; }
}

/* Einheitliche Titelgrößen auf allen Seiten */
#page-wrapper header.major h1,
#page-wrapper .cc h1 { font-size: 3.2rem !important; }
#page-wrapper .cc h2 { font-size: 2rem; }
.faq-intro { color: #3a4655 !important; font-weight: 400; }
@media screen and (max-width: 736px) {
	#page-wrapper header.major h1,
	#page-wrapper .cc h1 { font-size: 2.3rem !important; }
	#page-wrapper .cc h2 { font-size: 1.6rem; }
}

/* Gleiche Inhaltsbreite und linke Kante wie die Template-Seiten */
.cc-wrap {
	width: calc(100% - 8rem);
	max-width: 65rem;
	padding: 0 !important;
}
@media screen and (max-width: 736px) {
	.cc-wrap { width: calc(100% - 4rem); }
}

/* Alle Seitentitel und Einleitungen linksbündig */
#page-wrapper header.major.special,
#page-wrapper header.major.special h1,
#page-wrapper header.major.special p,
.faq-intro { text-align: left !important; }
#page-wrapper header.major.special p { margin-left: 0 !important; margin-right: 0 !important; }
#menu h2 { font-weight: 600; }

/* Startseite: Symbol-Leiste immer über die volle Breite und zentriert
   (von der Lesebreiten-Regel für Listen ausgenommen) */
.wrapper .inner > ul.bc-features {
	max-width: none !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	justify-items: center;
}
.bc-features li { max-width: 16rem; }

/* Weißer Pfeil auf dunklen (Primär-)Buttons */
.button.primary.next:after,
button.primary.next:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='24px' viewBox='0 0 36 24'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E") !important;
}
/* auf weißem Primär-Button (Navy-Abschlussblock) bleibt der Pfeil dunkel */
.cc-cta .button.primary.next:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='24px' viewBox='0 0 36 24'%3E%3Cstyle%3Eline %7B stroke: %23001e47%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E") !important;
}

/* =====================================================
   Größeres Logo: höhere Kopfzeile
   ===================================================== */
:root { --bc-header: 5.5rem; }
body #page-wrapper { padding-top: var(--bc-header); }
#header {
	height: var(--bc-header) !important;
	line-height: var(--bc-header) !important;
}
#header > a[href="#menu"] {
	height: calc(var(--bc-header) - 1px) !important;
	line-height: var(--bc-header) !important;
}
#header + #banner { margin-top: calc(var(--bc-header) * -1) !important; }
#header .logo img,
#header .logo .logo-img {
	height: calc(var(--bc-header) - 1.3rem) !important;
	width: auto !important;
	margin-top: 0 !important;
	vertical-align: middle;
	display: inline-block !important;
}
@media screen and (max-width: 736px) {
	:root { --bc-header: 4rem; }
	#header { align-items: center !important; }
	#header .logo img,
	#header .logo .logo-img { height: calc(var(--bc-header) - 0.9rem) !important; }
}

/* Natürliche Steppung (ersetzt die Linien-Variante oben): gewölbte Rauten, Licht von oben,
   Steppnaht als Stichlinie; Oberseite flacher, Seitenteile höher */
#layer-steppung, #layer-steppung-seite {
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0.15' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0.12'/%3E%3Cstop offset='0.45' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='black' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='50,0.0 100.0,32 50,64.0 0.0,32' fill='url(%23p)'/%3E%3Cpolygon points='0,-32.0 50.0,0 0,32.0 -50.0,0' fill='url(%23p)'/%3E%3Cpolygon points='100,-32.0 150.0,0 100,32.0 50.0,0' fill='url(%23p)'/%3E%3Cpolygon points='0,32.0 50.0,64 0,96.0 -50.0,64' fill='url(%23p)'/%3E%3Cpolygon points='100,32.0 150.0,64 100,96.0 50.0,64' fill='url(%23p)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='1.6' stroke-dasharray='2.2 1.6'/%3E%3Cpath d='M0 33.6 L50 1.6 L100 33.6 L50 65.6 Z M0 -30.4 L50 1.6' fill='none' stroke='rgba(255,255,255,0.06999999999999999)' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-repeat: repeat !important;
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	pointer-events: none; opacity: 0; transition: opacity .35s ease;
	-webkit-mask-size: 100% auto; mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: top left; mask-position: top left;
}
/* Oberseite (Haube, Dach, Heck): flacher wirkende Rauten */
#layer-steppung {
	z-index: 5;
	background-size: 4.4cqw 2.1cqw !important;
	-webkit-mask-image: url("../../images/config/bezug/Bezug-schwarz-101.png"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	mask-image: url("../../images/config/bezug/Bezug-schwarz-101.png"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	-webkit-mask-composite: source-out; mask-composite: subtract;
}
/* Seitenteile: höhere Rauten, leicht schräg zur Fahrzeuglinie versetzt */
#layer-steppung-seite {
	z-index: 5;
	background-size: 4cqw 2.9cqw !important;
	background-position: 1.1cqw 0.7cqw !important;
	-webkit-mask-image: url("../../images/config/seiten/Seiten-schwarz-101.png");
	mask-image: url("../../images/config/seiten/Seiten-schwarz-101.png");
}
#layer-steppung.is-visible, #layer-steppung.is-visible + #layer-steppung-seite { opacity: 1; }

/* Farbfelder: gleiche natürliche Steppung im Kleinformat */
.controls-panel .color-tile:not(.bc-none):before {
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0.15' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0.12'/%3E%3Cstop offset='0.45' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='black' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='50,0.0 100.0,32 50,64.0 0.0,32' fill='url(%23p)'/%3E%3Cpolygon points='0,-32.0 50.0,0 0,32.0 -50.0,0' fill='url(%23p)'/%3E%3Cpolygon points='100,-32.0 150.0,0 100,32.0 50.0,0' fill='url(%23p)'/%3E%3Cpolygon points='0,32.0 50.0,64 0,96.0 -50.0,64' fill='url(%23p)'/%3E%3Cpolygon points='100,32.0 150.0,64 100,96.0 50.0,64' fill='url(%23p)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='1.6' stroke-dasharray='2.2 1.6'/%3E%3Cpath d='M0 33.6 L50 1.6 L100 33.6 L50 65.6 Z M0 -30.4 L50 1.6' fill='none' stroke='rgba(255,255,255,0.06999999999999999)' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-size: 22px 12px !important;
	background-repeat: repeat !important;
}

/* AKTUELLE STEPPUNG (Stand 13.10.): Naht = Stofffarbe darunter im gleichen Farbton abgedunkelt,
   weiche Kanten + leichte Polstertiefe. Stärke: brightness() / saturate() unten, Nahtbreite in der Masken-Grafik. */
#layer-steppung, #layer-steppung-seite {
	background: none !important;
	mix-blend-mode: normal !important;
	-webkit-backdrop-filter: brightness(0.74) saturate(1.35);
	backdrop-filter: brightness(0.74) saturate(1.35);
}
#layer-steppung {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	-webkit-mask-size: 4.4cqw 2.1cqw, 100% auto, 100% auto;
	mask-size: 4.4cqw 2.1cqw, 100% auto, 100% auto;
	-webkit-mask-repeat: repeat, no-repeat, no-repeat;
	mask-repeat: repeat, no-repeat, no-repeat;
	-webkit-mask-position: 0 0, top left, top left;
	mask-position: 0 0, top left, top left;
	-webkit-mask-composite: source-in, source-out, source-over;
	mask-composite: intersect, subtract, add;
}
#layer-steppung-seite {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/seiten/Seiten-schwarz-101.png");
	-webkit-mask-size: 4cqw 2.9cqw, 100% auto;
	mask-size: 4cqw 2.9cqw, 100% auto;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-position: 1.1cqw 0.7cqw, top left;
	mask-position: 1.1cqw 0.7cqw, top left;
	-webkit-mask-composite: source-in, source-over;
	mask-composite: intersect, add;
}

/* Farbfelder: gleiche Nahtdarstellung im Kleinformat */
.controls-panel .color-tile:not(.bc-none):before {
	background: none !important;
	-webkit-backdrop-filter: brightness(0.74) saturate(1.35);
	backdrop-filter: brightness(0.74) saturate(1.35);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='n' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='16' filter='url(%23w)'/%3E%3Cpath d='M0 32 L50 0 L100 32 L50 64 Z M-50 0 L0 32 M150 0 L100 32 M-50 64 L0 32 M150 64 L100 32 M0 -32 L50 0 M100 -32 L50 0 M0 96 L50 64 M100 96 L50 64' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='6' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-size: 22px 12px;
	mask-size: 22px 12px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* AKTUELLE STEPPUNG (Stand 13.10., nach Stofffoto): Raute 2:1, dünne Nähte.
   #layer-steppung = fallende Nähte (dunkler), #layer-steppung-seite = steigende Nähte (heller).
   Stärke über brightness(); Rautengröße über mask-size. Ersetzt alle Varianten weiter oben. */
#layer-steppung {
	background: none !important; mix-blend-mode: normal !important;
	-webkit-backdrop-filter: brightness(0.7) saturate(1.2); backdrop-filter: brightness(0.7) saturate(1.2);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -85.0 L120 -15.0 M-20 -35.0 L120 35.0 M-20 15.0 L120 85.0 M-20 65.0 L120 135.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -85.0 L120 -15.0 M-20 -35.0 L120 35.0 M-20 15.0 L120 85.0 M-20 65.0 L120 135.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png");
	-webkit-mask-size: 6.0cqw 3.0cqw, 100% auto; mask-size: 6.0cqw 3.0cqw, 100% auto;
	-webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
	-webkit-mask-position: 0 0, top left; mask-position: 0 0, top left;
	-webkit-mask-composite: source-in, source-over; mask-composite: intersect, add;
}
#layer-steppung-seite {
	background: none !important; mix-blend-mode: normal !important;
	-webkit-backdrop-filter: brightness(1.3) saturate(0.9); backdrop-filter: brightness(1.3) saturate(0.9);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -15.0 L120 -85.0 M-20 35.0 L120 -35.0 M-20 85.0 L120 15.0 M-20 135.0 L120 65.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -15.0 L120 -85.0 M-20 35.0 L120 -35.0 M-20 85.0 L120 15.0 M-20 135.0 L120 65.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"), url("../../images/config/bezug/Bezug-schwarz-101.png");
	-webkit-mask-size: 6.0cqw 3.0cqw, 100% auto; mask-size: 6.0cqw 3.0cqw, 100% auto;
	-webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
	-webkit-mask-position: 0 0, top left; mask-position: 0 0, top left;
	-webkit-mask-composite: source-in, source-over; mask-composite: intersect, add;
}
/* Farbfelder: gleiche Steppung (fallend dunkler = :before, steigend heller = :after) */
.controls-panel .color-tile:not(.bc-none):before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: none !important;
	-webkit-backdrop-filter: brightness(0.7) saturate(1.2); backdrop-filter: brightness(0.7) saturate(1.2);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -85.0 L120 -15.0 M-20 -35.0 L120 35.0 M-20 15.0 L120 85.0 M-20 65.0 L120 135.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -85.0 L120 -15.0 M-20 -35.0 L120 35.0 M-20 15.0 L120 85.0 M-20 65.0 L120 135.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-size: 30px 15px; mask-size: 30px 15px;
	-webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.controls-panel .color-tile:not(.bc-none):after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: none !important;
	-webkit-backdrop-filter: brightness(1.3) saturate(0.9); backdrop-filter: brightness(1.3) saturate(0.9);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -15.0 L120 -85.0 M-20 35.0 L120 -35.0 M-20 85.0 L120 15.0 M-20 135.0 L120 65.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='n' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 -15.0 L120 -85.0 M-20 35.0 L120 -35.0 M-20 85.0 L120 15.0 M-20 135.0 L120 65.0 ' fill='none' stroke='white' stroke-width='2.0' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-size: 30px 15px; mask-size: 30px 15px;
	-webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.controls-panel.is-q240 .color-tile:not(.bc-none):before,
.controls-panel.is-q240 .color-tile:not(.bc-none):after { opacity: 1; }

/* =====================================================
   Sprachumschalter DE | EN im Header
   ===================================================== */
#header .bc-lang {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	height: 100%;
	padding: 0 1.25rem;
	line-height: 1;
}
#header .bc-lang a {
	display: inline-block;
	padding: 0.45rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	color: #5b6573;
	line-height: 1;
}
#header .bc-lang a + a { position: relative; }
#header .bc-lang a + a:before {
	content: "";
	position: absolute;
	left: -0.1rem;
	top: 25%;
	height: 50%;
	border-left: 1px solid rgba(99, 116, 133, 0.35);
}
#header .bc-lang a[aria-current="page"] { color: var(--bc-navy); }
#header .bc-lang a:hover { color: var(--bc-rot); }
#header .bc-lang a:focus-visible { outline: 2px solid var(--bc-rot); outline-offset: 1px; }
/* über dem Startseiten-Banner (transparenter Header) */
#header.alt .bc-lang a { color: rgba(255, 255, 255, 0.75); }
#header.alt .bc-lang a[aria-current="page"] { color: #fff; }
#header.alt .bc-lang a + a:before { border-color: rgba(255, 255, 255, 0.45); }
.legal-note {
	background: #f4f5f7;
	border-left: 3px solid var(--bc-navy);
	padding: 0.75rem 1rem;
	font-size: 0.95rem !important;
}
@media screen and (max-width: 736px) {
	#header .bc-lang { padding: 0 0.5rem; }
	#header .bc-lang a { padding: 0.4rem 0.4rem; font-size: 0.7rem; }
}

/* ---------- Über uns: Seite im Aufbau ---------- */
.bc-construction {
	max-width: 40rem;
	text-align: center;
	padding: 3rem 0 4rem 0;
}
.bc-construction .bc-icon {
	margin: 0 auto 1.25rem auto;
}
.bc-construction p {
	color: var(--bc-grau);
}

/* Materialien: Stoffmuster */
.cc-figcap { margin-top: 0.5rem; font-size: 0.85rem; color: #6b7280; }
.cc-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; }
.cc-swatches figure { margin: 0; }
.cc-swatches img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 4px; }
.cc-swatches figcaption { margin-top: 0.35rem; font-size: 0.8rem; color: #6b7280; text-align: center; }