/* FCU-Kiosk – ergänzendes CSS.
   Alles, was theme.json abbilden kann, steht dort. Hier nur Reste:
   Fokusrahmen, Linkdetails, Seitenlayout, Kopf- und Fußzeile.
   Werte stammen aus den Design-Tokens von vierc.de (src/styles/tokens.css). */

/* ── Seitenlayout: Footer bei kurzen Seiten am unteren Rand ── */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main),
.wp-site-blocks > main.wp-block-group {
	flex: 1;
}

/* Abstand zwischen Header, Inhalt und Footer kommt aus dem Inhalt selbst */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ── Links und Fokus ───────────────────────────────────── */
a {
	text-underline-offset: 0.15em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--rot);
	outline-offset: 2px;
}

/* ── Leiste „Zur Hauptseite“ ───────────────────────────── */
.kopf-leiste p {
	margin: 0;
}

/* Rot erreicht auf Grau hell nur 3,7 : 1 – deshalb schwarz (wie Footer von vierc.de) */
.kopf-leiste__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
	white-space: nowrap;
}

.kopf-leiste__link:hover {
	color: var(--wp--preset--color--schwarz);
	text-decoration: underline;
}

.kopf-leiste__logo {
	display: inline-block;
	width: auto;
	height: 0.75rem;
}

/* ── Kopfzeile ─────────────────────────────────────────── */
.kopf__titel {
	margin: 0;
	white-space: nowrap;
}

.kopf__aktionen .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--custom--rand-seite);
}

.kopf__aktionen .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

.kopf .wp-block-navigation-item__content:hover,
.kopf .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--rot);
}

/* Icon-Schaltflächen (Suche, Konto, Warenkorb) einheitlich und mind. 44 px Klickfläche */
.kopf__suche .wp-block-search__button,
.kopf .wp-block-woocommerce-customer-account a,
.kopf .wc-block-mini-cart__button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--schwarz);
}

/* Konto-Symbol: WooCommerce gibt dem Link sonst eigene Breite (60 px statt 44 px) */
.kopf .wp-block-woocommerce-customer-account a {
	width: 44px;
}

/* Schmale Bildschirme: Titel und vier Symbole (je 44 px) müssen ab 320 px in eine Zeile passen,
   sonst rutscht der Warenkorb aus dem Bild. Abstände kommen aus den Klickflächen selbst.
   599 px = Umbruch der Navigation in WordPress (darüber ist der Menü-Knopf ausgeblendet). */
@media (max-width: 599px) {
	/* Menü-Knopf mit derselben Klickfläche wie die Symbole daneben */
	.kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.kopf .kopf__inner {
		gap: var(--wp--preset--spacing--20);
	}

	.kopf .kopf__aktionen {
		gap: 0;
	}

	.kopf__titel {
		font-size: min(var(--wp--preset--font-size--x-large), 5.2vw);
	}
}

.kopf__suche .wp-block-search__button:hover,
.kopf .wp-block-woocommerce-customer-account a:hover,
.kopf .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--rot);
}

/* Aufgeklapptes Suchfeld */
.kopf__suche .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--grau-dunkel);
	border-radius: var(--wp--custom--radius);
}

/* ── Fußzeile ──────────────────────────────────────────── */
.fuss__titel {
	font-family: var(--wp--preset--font-family--titel);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--20);
}

.fuss__spalten .wp-block-column > * {
	margin-block: 0;
}

.fuss__spalten .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.fuss__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fuss__links li {
	margin-bottom: var(--wp--preset--spacing--10);
}

.fuss__links--zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.fuss__links--zeile li {
	margin: 0;
}

.fuss__unten p {
	margin: 0;
}

/* Rot erreicht auf Grau hell nur 3,7 : 1 – Links im Footer schwarz, unterstrichen */
.fuss a {
	color: var(--wp--preset--color--schwarz);
}

.fuss a:hover {
	color: var(--wp--preset--color--schwarz);
	text-decoration-thickness: 2px;
}

/* ── Produktliste: Filter links, Kacheln rechts ────────── */
.produktliste__raster {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 64rem) {
	.produktliste__raster {
		grid-template-columns: 15rem minmax(0, 1fr);
		align-items: start;
	}
}

.produktliste__leiste {
	margin-bottom: var(--wp--preset--spacing--50);
}

.produktfilter__titel {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Kästchen der Filter: WooCommerce zeichnet sie mit 10 % Schwarz (Kontrast 1,2 : 1).
   Rahmen in Grau dunkel erfüllt die 3 : 1 für Bedienelemente (WCAG 1.4.11). */
.produktfilter {
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--grau-dunkel);
}

/* ── Produktkachel ─────────────────────────────────────── */
.produktkacheln > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.produktkacheln .wc-block-components-product-image {
	margin-bottom: var(--wp--preset--spacing--20);
	background: #f5f5f5;
}

.produktkachel__titel {
	margin: 0;
	line-height: 1.3;
}

.produktkachel__titel a {
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
}

.produktkachel__titel a:hover {
	color: var(--wp--preset--color--rot);
	text-decoration: underline;
}

.produktkacheln .wc-block-components-product-price {
	font-weight: 700;
}

/* Knopf immer am unteren Rand der Kachel. Germanized hängt „inkl. MwSt.“ und
   „zzgl. Versandkosten“ hinter den Knopf – per order rücken sie direkt unter den Preis
   (Pflichtangaben in unmittelbarer Nähe des Preises). */
.produktkachel__knopf {
	order: 1;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.produktkacheln .wc-gzd-additional-info {
	margin: calc(-1 * var(--wp--preset--spacing--20)) 0 0;
	line-height: 1.4;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--schwarz);
}

/* Leere Germanized-Blöcke (z. B. ohne Grundpreis) nehmen keinen Platz ein */
.wp-block-woocommerce-gzd-product-is-empty {
	display: none;
}

.produkt__pflichtangaben,
.produktkachel__pflichtangaben {
	gap: 0;
}

/* Startseite: Germanized-Angaben als Blöcke in der Kachel, gleich wie in den Listen */
.produktkachel__pflichtangaben {
	margin-top: calc(-1 * var(--wp--preset--spacing--20));
	line-height: 1.4;
}

/* ── Ausverkauft (Einzelstücke) ────────────────────────── */
/* In Listen nur der ausverkaufte Zustand, „Vorrätig“ ist der Normalfall */
.produktkacheln .wc-block-components-product-stock-indicator:not(.wc-block-components-product-stock-indicator--out-of-stock) {
	display: none;
}

/* Kennzeichen oben links auf dem Bild */
.produktkacheln .wc-block-components-product-stock-indicator--out-of-stock {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	z-index: 1;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--schwarz);
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Bild ausgegraut, Preis durchgestrichen wirkt wie Rabatt – deshalb nur gedimmt */
.produktkacheln > li.outofstock .wc-block-components-product-image img {
	filter: grayscale(1);
	opacity: 0.55;
}

.produktkacheln > li.outofstock .wc-block-components-product-price {
	color: var(--wp--preset--color--grau-dunkel);
}

/* Einzelprodukt: Bestandsangabe im Kaufformular deutlich */
.produkt__kauf .stock.out-of-stock {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--schwarz);
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
}

/* ── Einzelprodukt ─────────────────────────────────────── */
.produkt__kauf > * {
	margin-block: 0;
}

.produkt__kauf > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.produkt__meta {
	color: var(--wp--preset--color--grau-dunkel);
	gap: var(--wp--preset--spacing--10);
}

.produkt__merkmale table {
	width: 100%;
	border-collapse: collapse;
}

.produkt__merkmale th,
.produkt__merkmale td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	border: 0;
	border-bottom: var(--wp--custom--linie);
	text-align: left;
	vertical-align: top;
}

.produkt__merkmale th {
	width: 40%;
	font-weight: 700;
}

.produkt__merkmale :is(th, td) p {
	margin: 0;
}

.produkt__merkmale figure,
.produkt__merkmale {
	margin: 0;
}

/* ── Startseite ────────────────────────────────────────── */
.startseite > * + * {
	margin-block-start: var(--wp--preset--spacing--abschnitt);
}

.bereich {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--grau-hell);
	border-radius: var(--wp--custom--radius);
}

.bereich h3 {
	margin-top: 0;
}

/* Rot erreicht auf Grau hell nur 3,7 : 1 – Links schwarz */
.bereich a {
	color: var(--wp--preset--color--schwarz);
}

.bereich p:last-child {
	margin-bottom: 0;
}

/* Zweitrangiger Knopf (Umriss) in Hausfarben */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--rot);
	border-color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--rot-dunkel);
}

/* ── Mein Konto ────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
	border-top: var(--wp--custom--linie);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: var(--wp--custom--linie);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
	color: var(--wp--preset--color--rot);
}

/* ── Kasse ─────────────────────────────────────────────── */
.kopf--kasse p {
	margin: 0;
}