/* CaiRock Generator */
.crg {
	--crg-braun: #442E14;
	--crg-beige: #DCCCC0;
	--crg-offwhite: #F5F5EF;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	color: var(--crg-braun);
}
@media (max-width: 860px) { .crg { grid-template-columns: 1fr; gap: 28px; } }

.crg__medien { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; min-width: 0; }
@media (max-width: 860px) { .crg__medien { position: static; } }
.crg__foto { margin: 0; background: var(--crg-offwhite); aspect-ratio: 4 / 3; overflow: hidden; }
.crg__foto img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: opacity .25s; }
.crg__daumen { display: flex; flex-wrap: wrap; gap: 8px; }
.crg__daumen-knopf { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; width: 64px; height: 64px; overflow: hidden; opacity: .65; transition: opacity .2s, border-color .2s; }
.crg__daumen-knopf img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.crg__daumen-knopf[aria-pressed="true"] { opacity: 1; border-color: var(--crg-braun); }
.crg__daumen-knopf:focus-visible { outline: 2px solid var(--crg-braun); outline-offset: 2px; }
.crg__vorschau-box { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.crg__vorschau-box .crg__label { margin: 0; }
.crg__vorschau {
	background: var(--crg-offwhite);
	aspect-ratio: 16 / 6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2% 4%;
}
.crg__medien:not(:has(.crg__foto)) .crg__vorschau { aspect-ratio: 3 / 2; }
.crg__svg { width: 100%; height: auto; overflow: visible; }

.crg__auswahl { display: flex; flex-direction: column; gap: 30px; }
.crg__gruppe { border: 0; margin: 0; padding: 0 0 26px; border-bottom: 1px solid var(--crg-beige); min-width: 0; }
.crg__gruppe legend, .crg__gruppe > .crg__label { display: block; padding: 0; margin-bottom: 14px; }
.crg__label {
	font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
}
.crg__wahl { font-size: 0.875rem; margin-left: 10px; }

.crg__farben { display: flex; flex-wrap: wrap; gap: 10px; }
.crg__farbe { position: relative; cursor: pointer; }
.crg__farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crg__farbe span {
	display: block; width: 36px; height: 36px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
	outline: 1px solid transparent; outline-offset: 3px;
	transition: outline-color .2s, transform .2s;
}
.crg__farbe:hover span { transform: scale(1.06); }
.crg__farbe input:checked + span { outline-color: var(--crg-braun); }
.crg__farbe input:focus-visible + span { outline: 2px solid var(--crg-braun); }

.crg__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.crg__knopf { position: relative; cursor: pointer; }
.crg__knopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crg__knopf span {
	display: inline-block; padding: 10px 18px; border: 1px solid var(--crg-beige);
	font-size: 0.875rem; transition: border-color .2s, background .2s;
}
.crg__knopf small { opacity: .7; margin-left: 4px; }
.crg__knopf input:checked + span { border-color: var(--crg-braun); background: var(--crg-offwhite); }
.crg__knopf input:focus-visible + span { outline: 2px solid var(--crg-braun); outline-offset: 2px; }

.crg__text {
	width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--crg-braun);
	background: transparent; color: inherit; font: inherit; font-size: 1rem; padding: 0;
}
.crg__text:focus { outline: none; border-bottom-width: 2px; }

.crg__abschluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.crg__preis { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.crg__summe { font-size: 1.75rem; font-weight: 300; }
.crg__knopf-warenkorb { cursor: pointer; border: 0; }
.crg__hinweis { margin: 0; }
.crg .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Auswahl mehrerer Produkte */
.crg-wahl__tabs { display: flex; flex-wrap: wrap; gap: 8px 28px; border-bottom: 1px solid var(--crg-beige, #DCCCC0); margin-bottom: 40px; }
.crg-wahl__tab {
	background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
	padding: 0 0 14px; cursor: pointer; color: #442E14; font: inherit;
	font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; opacity: .55;
}
.crg-wahl__tab[aria-selected="true"] { opacity: 1; border-bottom-color: #442E14; }
.crg-wahl__tab:focus-visible { outline: 2px solid #442E14; outline-offset: 4px; }