/* =========================================================
   Shortcode [produktvarianten]
   Farben, Rahmen, Buttons und Aufklappen (Collapse) kommen aus Bootstrap.
   Ab xl: Tabellen-Look mit 11 Spalten, darunter: Karten mit Labels.
   ========================================================= */

/* ---------- Eigene Variablen ---------- */
.produktvarianten {
	/* Hintergrund der aktiven Zeile (Primary hell), Fallback auf Bootstrap */
	--produktvarianten-aktiv-bg: var(--bs-primary-light, var(--bs-primary-bg-subtle));
	/* Bootstrap-Schriftgröße $font-size-sm, die Bootstrap nicht als CSS-Variable ausgibt */
	--produktvarianten-font-size-sm: .875rem;
	/* Spalten ab xl: Produktbezeichnung | 7 Textspalten | CAD-Modell | Zeichnung | Anfrage */
	--produktvarianten-spalten: minmax(0, 1.3fr) repeat(7, minmax(0, 1fr)) 6rem 6rem 6rem;

	border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* ---------- Zeilen (mobil: Karte) ---------- */
.produktvarianten-zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem 1.5rem;
	padding: 1rem;
	transition: background-color .2s;
}

.produktvarianten-label {
	display: block;
	margin-bottom: .125rem;
	color: var(--bs-gray-600);
	font-size: var(--produktvarianten-font-size-sm);
	font-weight: 700;
}

.produktvarianten-zelle {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Aktive Variante: Zeile hervorheben, sobald die CAD-Zeile offen ist */
.produktvarianten-item:has(.produktvarianten-toggle[aria-expanded="true"]) .produktvarianten-zeile {
	background: var(--produktvarianten-aktiv-bg);
}

.produktvarianten-item:has(.produktvarianten-toggle[aria-expanded="true"]) {
	border-bottom-color: var(--bs-primary) !important;
}

/* ---------- Buttons (Icon-Buttons) ---------- */
.produktvarianten-btn {
	display: grid;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
}

/* Icon wechselt mit dem Zustand (aria-expanded setzt Bootstrap Collapse) */
.produktvarianten-toggle[aria-expanded="false"] .produktvarianten-text-schliessen,
.produktvarianten-toggle[aria-expanded="true"] .produktvarianten-text-oeffnen {
	display: none;
}

/* ---------- CAD-Zeile ---------- */
.produktvarianten-cad {
	border-top: var(--bs-border-width) solid var(--bs-border-color);
	background: var(--bs-body-bg);
}

/* ---------- Responsive ---------- */

/* Ab sm: Karte zweispaltig, Produktbezeichnung über die volle Breite */
@media (min-width: 576px) {
	.produktvarianten-zeile {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.produktvarianten-bezeichnung {
		grid-column: 1 / -1;
	}
}

/* Ab xl: Tabellen-Look, alle Spalten nebeneinander */
@media (min-width: 1200px) {
	.produktvarianten-kopf,
	.produktvarianten-zeile {
		grid-template-columns: var(--produktvarianten-spalten);
		gap: 0;
		padding: 0;
        font-size: 1rem;
		/* font-size: var(--produktvarianten-font-size-sm); */
	}

	.produktvarianten-kopf {
		align-items: end;
		border-bottom: var(--bs-border-width) solid var(--bs-primary);
	}

	.produktvarianten-zeile {
		align-items: center;
	}

	.produktvarianten-zelle {
		padding: .75rem .5rem;
	}

	.produktvarianten-zelle:first-child {
		padding-left: 1rem;
	}

	.produktvarianten-bezeichnung {
		grid-column: auto;
	}

	.produktvarianten-zeile:hover {
		background: var(--bs-tertiary-bg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.produktvarianten *,
	.produktvarianten .collapsing {
		transition: none !important;
	}
}