/*
 * Baukasten und Sets.
 *
 * Der Shop ist dunkel (tiefes Grün, CI-Schwarz #12170f). Alle Flächen und
 * Schriften sind deshalb hier ausdrücklich gesetzt — das Theme färbt sonst
 * Überschriften weiss und sie verschwinden auf hellem Grund.
 */

.cfb-baukasten,
.cfb-set,
.cfb-kokauf {
	--cfb-schwarz: #12170f;
	--cfb-flaeche: #1b2216;
	--cfb-flaeche-hell: #232c1d;
	--cfb-schrift: #eef2e8;
	--cfb-schrift-leise: rgba(238, 242, 232, .62);
	--cfb-gruen: #6ba83f;
	--cfb-gruen-tief: #4a7c2f;
	--cfb-rand: rgba(238, 242, 232, .16);
	margin: 1.6rem 0;
	font-size: 15px;
	color: var(--cfb-schrift);
}

/* --- Stufenleiste --- */
.cfb-baukasten .cfb-stufenleiste {
	display: flex;
	gap: .5rem;
	margin-bottom: .9rem;
}
.cfb-baukasten .cfb-stufe {
	flex: 1;
	text-align: center;
	padding: .5rem .3rem;
	border: 1px solid var(--cfb-rand);
	border-radius: 10px;
	background: var(--cfb-flaeche);
	opacity: .5;
	transition: opacity .18s ease, border-color .18s ease, background .18s ease;
}
.cfb-baukasten .cfb-stufe.erreicht {
	opacity: 1;
	border-color: var(--cfb-gruen);
	background: rgba(107, 168, 63, .2);
}
.cfb-baukasten .cfb-stufe-zahl {
	display: block;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--cfb-schrift);
	line-height: 1.2;
}
.cfb-baukasten .cfb-stufe-rabatt {
	display: block;
	font-size: .78rem;
	color: var(--cfb-gruen);
	font-weight: 700;
}
/* Eine kurze Rückmeldung beim Erreichen einer Stufe — kein Dauerzustand. */
.cfb-baukasten .cfb-stufenleiste.gefeiert .cfb-stufe.erreicht {
	animation: cfb-puls .45s ease-out 1;
}
@keyframes cfb-puls {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* --- Körbchen --- */
.cfb-baukasten .cfb-koerbchen {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border: 1px solid var(--cfb-rand);
	border-radius: 13px;
	background: var(--cfb-flaeche);
}
.cfb-baukasten .cfb-plaetze {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.cfb-baukasten .cfb-platz {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--cfb-flaeche-hell);
}
.cfb-baukasten .cfb-platz.leer {
	border: 1.5px dashed var(--cfb-rand);
	color: var(--cfb-schrift-leise);
	font-weight: 600;
}
.cfb-baukasten .cfb-platz.leer.pflicht {
	border-color: var(--cfb-gruen);
	color: var(--cfb-gruen);
}
.cfb-baukasten .cfb-platz.belegt {
	border: 1.5px solid var(--cfb-gruen);
	background: #fff;
}
.cfb-baukasten .cfb-platz.belegt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cfb-baukasten .cfb-weg {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 19px;
	height: 19px;
	line-height: 17px;
	border: 0;
	border-radius: 50%;
	background: var(--cfb-schwarz);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

.cfb-baukasten .cfb-bilanz { text-align: right; min-width: 230px; }
.cfb-baukasten .cfb-bilanz-preis {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	justify-content: flex-end;
}
.cfb-baukasten .cfb-summe,
.cfb-set .cfb-summe {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--cfb-schrift);
	line-height: 1.1;
}
.cfb-baukasten .cfb-summe-alt,
.cfb-set .cfb-summe-alt {
	text-decoration: line-through;
	color: var(--cfb-schrift-leise);
	font-size: .95rem;
}
.cfb-baukasten .cfb-bilanz-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .1rem;
}
.cfb-baukasten .cfb-ersparnis,
.cfb-baukasten .cfb-grundpreis,
.cfb-set .cfb-ersparnis,
.cfb-set .cfb-grundpreis { display: none; font-size: .83rem; }
.cfb-baukasten .cfb-ersparnis.sichtbar,
.cfb-set .cfb-ersparnis.sichtbar {
	display: block;
	color: var(--cfb-gruen);
	font-weight: 700;
}
.cfb-baukasten .cfb-grundpreis.sichtbar,
.cfb-set .cfb-grundpreis.sichtbar {
	display: block;
	color: var(--cfb-schrift-leise);
}
.cfb-baukasten .cfb-anreiz {
	margin: .45rem 0 0;
	font-size: .88rem;
	color: var(--cfb-schrift);
	opacity: .9;
}

/* --- Knöpfe --- */
.cfb-baukasten .cfb-form {
	display: flex;
	gap: .6rem;
	margin: .9rem 0 1.4rem;
	flex-wrap: wrap;
}
.cfb-baukasten .cfb-kaufen { flex: 1 1 280px; }
.cfb-baukasten .cfb-kaufen[disabled] { opacity: .45; cursor: not-allowed; }
.cfb-baukasten .cfb-zufall {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid var(--cfb-gruen);
	color: var(--cfb-gruen);
}

/* --- Sortenauswahl --- */
.cfb-baukasten .cfb-filterleiste {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	margin-bottom: .85rem;
}
.cfb-baukasten .cfb-filter {
	border: 1px solid var(--cfb-rand);
	background: var(--cfb-flaeche);
	color: var(--cfb-schrift);
	border-radius: 999px;
	padding: .27rem .8rem;
	font-size: .8rem;
	cursor: pointer;
	line-height: 1.4;
}
.cfb-baukasten .cfb-filter.aktiv {
	background: var(--cfb-gruen);
	color: #0d1109;
	border-color: var(--cfb-gruen);
	font-weight: 700;
}
.cfb-baukasten .cfb-stufeninfo {
	margin-left: auto;
	font-size: .78rem;
	color: var(--cfb-schrift-leise);
}

.cfb-baukasten .cfb-sorten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
	gap: .7rem;
	max-height: 580px;
	overflow-y: auto;
	padding: .25rem;
}
.cfb-baukasten .cfb-sorte {
	border: 1px solid var(--cfb-rand);
	border-radius: 12px;
	padding: .55rem;
	background: var(--cfb-flaeche);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.cfb-baukasten .cfb-sorte img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: #fff;
}
/* Ausdrücklich gesetzt — das Theme färbt Überschriften sonst weiss auf weiss. */
.cfb-baukasten .cfb-sorte h4 {
	font-size: .84rem;
	margin: 0;
	padding: 0;
	line-height: 1.25;
	color: var(--cfb-schrift) !important;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.cfb-baukasten .cfb-sorte-gruppe {
	font-size: .7rem;
	color: var(--cfb-schrift-leise);
}
.cfb-baukasten .cfb-variante {
	font-size: .8rem;
	padding: .25rem;
	width: 100%;
	background: var(--cfb-flaeche-hell);
	color: var(--cfb-schrift);
	border: 1px solid var(--cfb-rand);
	border-radius: 6px;
}
.cfb-baukasten .cfb-einzelpreis {
	font-size: .88rem;
	font-weight: 700;
	color: var(--cfb-schrift);
}
.cfb-baukasten .cfb-dazu {
	margin-top: auto;
	border: 0;
	border-radius: 8px;
	background: var(--cfb-gruen);
	color: #0d1109;
	padding: .42rem;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
}
.cfb-baukasten .cfb-dazu:hover { background: #7cbd4a; }
.cfb-baukasten .cfb-dazu:disabled { opacity: .35; cursor: not-allowed; }
.cfb-baukasten .cfb-sorte.gewaehlt { animation: cfb-blink .4s ease-out 1; }
@keyframes cfb-blink {
	0%   { box-shadow: 0 0 0 0 rgba(107, 168, 63, .6); }
	100% { box-shadow: 0 0 0 12px rgba(107, 168, 63, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.cfb-baukasten .cfb-sorte.gewaehlt,
	.cfb-baukasten .cfb-stufenleiste.gefeiert .cfb-stufe.erreicht { animation: none; }
}

/* --- Festes Set --- */
.cfb-set .cfb-set-preis {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: .9rem;
}
.cfb-set .cfb-set-liste { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.cfb-set .cfb-set-liste li {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--cfb-rand);
}
.cfb-set .cfb-set-liste img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
	background: #fff;
}
.cfb-set .cfb-set-name { flex: 1; font-size: .92rem; }
.cfb-set .cfb-set-name a { color: var(--cfb-schrift) !important; text-decoration: none; }
.cfb-set .cfb-set-einzelpreis { font-size: .86rem; color: var(--cfb-schrift-leise); }

/* --- Karte im Katalog --- */
.cfb-karte-band {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: #6ba83f;
	color: #0d1109;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .02em;
	padding: .24rem .55rem;
	border-radius: 6px;
	text-transform: uppercase;
	line-height: 1.3;
}
li.product.cfb-produkt {
	position: relative;
	outline: 2px solid rgba(107, 168, 63, .55);
	outline-offset: 3px;
	border-radius: 11px;
}
.cfb-ab-preis { font-size: .9rem; font-weight: 600; }

/* --- Oft zusammen gekauft --- */
.cfb-kokauf h2 {
	font-size: 1.2rem;
	margin: 0 0 .2rem;
	color: var(--cfb-schrift) !important;
}
.cfb-kokauf .cfb-kokauf-hinweis {
	font-size: .84rem;
	color: var(--cfb-schrift-leise);
	margin-bottom: 1rem;
}
.cfb-kokauf .cfb-kokauf-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: .8rem;
}
.cfb-kokauf .cfb-kokauf-karte {
	border: 1px solid var(--cfb-rand);
	border-radius: 12px;
	padding: .6rem;
	text-align: center;
	background: var(--cfb-flaeche);
}
.cfb-kokauf .cfb-kokauf-karte img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: #fff;
}
.cfb-kokauf .cfb-kk-name {
	display: block;
	font-size: .84rem;
	margin: .45rem 0 .25rem;
	color: var(--cfb-schrift) !important;
	text-decoration: none;
	line-height: 1.3;
}
.cfb-kokauf .cfb-kk-preis { font-size: .9rem; font-weight: 700; color: var(--cfb-schrift); }
.cfb-kokauf .cfb-kk-preis .amount { color: var(--cfb-schrift); }
.cfb-kokauf .cfb-kk-oft {
	display: block;
	font-size: .73rem;
	color: var(--cfb-gruen);
	margin-top: .25rem;
	font-weight: 600;
}

.cfb-hinweis { color: var(--cfb-schrift-leise); }

@media (max-width: 600px) {
	.cfb-baukasten .cfb-koerbchen { flex-direction: column; align-items: stretch; }
	.cfb-baukasten .cfb-bilanz { text-align: left; min-width: 0; }
	.cfb-baukasten .cfb-bilanz-preis,
	.cfb-baukasten .cfb-bilanz-info { justify-content: flex-start; align-items: flex-start; }
	.cfb-baukasten .cfb-sorten { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
	.cfb-baukasten .cfb-stufe-zahl { font-size: .95rem; }
}

/* Die Paketkarte soll im Katalog sofort auffallen — Band über dem Bild,
   ruhiger Rahmen, kein Blinken. */
li.product.cfb-produkt {
	background: rgba(107, 168, 63, .07);
	border: 1.5px solid rgba(107, 168, 63, .5);
	padding: .4rem;
	outline: none;
}
li.product.cfb-produkt .cfb-karte-band {
	position: static;
	display: inline-block;
	margin-bottom: .35rem;
}
li.product.cfb-produkt .cfb-ab-preis {
	color: #6ba83f;
	font-weight: 700;
}