/**
 * Farbtabellen-Seiten und Farbtabellen-Uebersicht (inc/farbkarte.php).
 * Aus style.css ausgelagert, laedt nur auf diesen Seiten, direkt nach style.css.
 */

/* --- Farbtabellen-Seiten: komplette Farbkarte (inc/farbkarte.php) ------ */

.ds-farbkarte { margin: 2rem 0; }
.ds-farbkarte-intro { margin-bottom: 1rem; }

.ds-farbkarte-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-size: 16px;
}

.ds-farbkarte-filter { position: absolute; opacity: 0; pointer-events: none; }

.ds-farbkarte-schalter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 16px;
	border: var(--ds-form-border-width) solid var(--ds-black);
	border-radius: var(--ds-btn-radius);
	background: var(--ds-white);
	cursor: pointer;
	user-select: none;
}

.ds-farbkarte-schalter::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 3px solid var(--ds-black);
	background: var(--ds-white);
	flex: none;
}

.ds-farbkarte-filter:checked + .ds-farbkarte-kopf .ds-farbkarte-schalter::before { background: var(--ds-red); }
.ds-farbkarte-filter:focus-visible + .ds-farbkarte-kopf .ds-farbkarte-schalter { outline: 3px solid var(--ds-red); outline-offset: 2px; }
.ds-farbkarte-filter:checked ~ .ds-farbkarte-liste .is-anfrage { display: none; }

.ds-farbkarte-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 480px) {
	.ds-farbkarte-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ds-farbkarte-item { margin: 0; }

.ds-farbkarte-kachel {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 3px solid var(--ds-black);
	background: var(--ds-white);
	color: var(--ds-black);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.3;
}

a.ds-farbkarte-kachel:hover .ds-farbkarte-name,
a.ds-farbkarte-kachel:focus-visible .ds-farbkarte-name { text-decoration: underline; }
a.ds-farbkarte-kachel:focus-visible { outline: 3px solid var(--ds-red); outline-offset: 2px; }

.ds-farbkarte-flaeche {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ds-swatch, var(--ds-grey-light));
	border-bottom: 3px solid var(--ds-black);
}

.ds-farbkarte-name,
.ds-farbkarte-code,
.ds-farbkarte-status { display: block; padding: 0 8px; overflow-wrap: anywhere; }
.ds-farbkarte-name { padding-top: 6px; font-weight: 600; }
.ds-farbkarte-code { color: var(--ds-grey); font-size: 12px; }
.ds-farbkarte-status { margin-top: auto; padding-bottom: 6px; padding-top: 4px; font-size: 12px; }

.is-lager .ds-farbkarte-status { font-weight: 600; }
.is-anfrage .ds-farbkarte-status { color: var(--ds-grey); }
.is-ausverkauft .ds-farbkarte-status { color: var(--ds-red-dark); }

.ds-farbkarte-hinweis,
.ds-farbkarte-quelle { margin-top: 1rem; font-size: 14px; color: var(--ds-grey); }
/* --- Farbtabellen-Uebersicht: Karten mit Dosenbild ------------------- */

.ds-farbkarten-uebersicht {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}
@media (max-width: 480px) {
	.ds-farbkarten-uebersicht { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.ds-farbkarten-karte { margin: 0; }
.ds-farbkarten-karte a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 3px solid var(--ds-black);
	color: var(--ds-black);
	text-decoration: none;
	background: var(--ds-white);
}
.ds-farbkarten-karte a:hover .ds-farbkarten-name,
.ds-farbkarten-karte a:focus-visible .ds-farbkarten-name { text-decoration: underline; }
.ds-farbkarten-karte a:focus-visible { outline: 3px solid var(--ds-red); outline-offset: 2px; }
.ds-farbkarten-bild { display: block; aspect-ratio: 1 / 1; background: var(--ds-white); border-bottom: 3px solid var(--ds-black); }
.ds-farbkarten-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-farbkarten-name { display: block; padding: 10px 12px 2px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.ds-farbkarten-zahl { display: block; padding: 0 12px 12px; font-size: 14px; color: var(--ds-grey); }

/* Uebersicht nach Produktkategorie gegliedert (seit 1.9.7) */
.ds-farbkarten-gruppe { margin: 2.5rem 0 0; }
.ds-farbkarten-gruppe:first-child { margin-top: 1.5rem; }
.ds-farbkarten-gruppe-titel { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--ds-black); }
.ds-farbkarten-gruppe .ds-farbkarten-uebersicht { margin: 0; }

/* Glanzfarben als Verlauf (Verlaeufe in style.css, :root). */
.ds-farbkarte-item.is-metallic-gold .ds-farbkarte-flaeche { background-image: var(--ds-metal-gold); }
.ds-farbkarte-item.is-metallic-silber .ds-farbkarte-flaeche { background-image: var(--ds-metal-silber); }
.ds-farbkarte-item.is-metallic-kupfer .ds-farbkarte-flaeche { background-image: var(--ds-metal-kupfer); }
/* Kupfer aus dem Herstellerfarbwert (siehe style.css, Glanzfarben). */
@supports (background: color-mix(in srgb, red 50%, white)) {
	.ds-farbkarte-item.is-metallic-kupfer .ds-farbkarte-flaeche { background-image: linear-gradient(125deg, color-mix(in srgb, var(--ds-swatch) 70%, #fff) 0%, var(--ds-swatch) 28%, color-mix(in srgb, var(--ds-swatch) 35%, #fff) 50%, color-mix(in srgb, var(--ds-swatch) 88%, #000) 72%, color-mix(in srgb, var(--ds-swatch) 75%, #fff) 100%); }
}