/* Kartenshop – Ergänzungen zu theme.json (Richtung «Sammlervitrine») */

:root {
	--ks-rand: var(--wp--preset--color--rand);
	--ks-flaeche: var(--wp--preset--color--flaeche);
	--ks-flaeche-2: var(--wp--preset--color--flaeche-2);
	--ks-gedaempft: var(--wp--preset--color--text-gedaempft);
	--ks-akzent: var(--wp--preset--color--akzent);
	--ks-radius: 14px;
}

.ks-gedaempft { color: var(--ks-gedaempft); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ks-akzent);
	outline-offset: 2px;
}

/* ---------- Kopfzeile ---------- */

/* Fixiert beim Scrollen (unter der Admin-Leiste, falls eingeloggt) */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
@media (max-width: 600px) {
	/* Dort scrollt die Admin-Leiste mit weg */
	header.wp-block-template-part { top: 0; }
}

.ks-kopfzeile {
	background: var(--wp--preset--color--basis);
	border-bottom: 1px solid var(--ks-rand);
	padding-top: 1rem;
	padding-bottom: 1rem;
	position: relative;
	z-index: 50;
}
.ks-kopfzeile__inner { gap: 1.25rem; }
.ks-kopfzeile__aktionen { gap: 0.75rem; }

/* Nur das Logo; der Shop-Name bleibt als Linktext für Screenreader und Suchmaschinen. */
.ks-wortmarke { margin: 0; line-height: 0; flex: none; }
.ks-wortmarke a {
	display: block;
	width: 48px; height: 48px;
	background: url("../img/logo-dunkel-rund.png") center / contain no-repeat;
	font-size: 0; color: transparent; text-decoration: none;
	border-radius: 50%;
}
.ks-wortmarke a:focus-visible { outline: 2px solid var(--ks-akzent); outline-offset: 3px; }
.ks-fusszeile .ks-wortmarke a { width: 64px; height: 64px; }

.ks-nav { flex: 1 1 auto; font-weight: 500; font-size: var(--wp--preset--font-size--small); }
.ks-nav .wp-block-navigation__container { gap: 0.25rem 1rem; }
.ks-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--text); padding: 0.5rem 0; }
.ks-nav .wp-block-navigation-item__content:hover { color: var(--ks-akzent); }
.ks-nav .wp-block-navigation__submenu-container {
	background: var(--ks-flaeche) !important;
	border: 1px solid var(--ks-rand) !important;
	border-radius: 10px;
	padding: 0.5rem 0;
	min-width: 180px !important;
}
.ks-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.5rem 1rem; }
.ks-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--basis) !important;
	color: var(--wp--preset--color--text) !important;
	padding: 1.5rem;
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: 0.5rem 0; }
.ks-nav .wp-block-navigation__responsive-container-open,
.ks-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text);
	min-width: 44px; min-height: 44px;
	align-items: center; justify-content: center;
}

.ks-suche .wp-block-search__inside-wrapper {
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand) !important;
	border-radius: 10px;
	padding: 0 0.25rem 0 0.75rem;
	min-height: 44px;
	width: 250px;
}
.ks-suche .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.ks-suche .wp-block-search__input::placeholder { color: var(--ks-gedaempft); }
.ks-suche .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--text);
	padding: 0.5rem;
	min-width: 40px;
}

.ks-warenkorb .wc-block-mini-cart__button {
	min-width: 44px; min-height: 44px;
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: 10px;
	color: var(--wp--preset--color--text);
}
.ks-warenkorb .wc-block-mini-cart__badge { background: var(--ks-akzent); color: var(--wp--preset--color--basis); }

/* Warenkorb-Drawer */
.wc-block-components-drawer,
.wc-block-mini-cart__drawer .components-modal__content {
	background: var(--wp--preset--color--basis);
	color: var(--wp--preset--color--text);
}

@media (max-width: 1365px) {
	/* Das Menü passt erst ab 1366 px in eine Zeile – darunter Hamburger-Menü (WordPress schaltet sonst erst unter 600 px um) */
	.ks-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.ks-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.ks-nav { flex: 0 0 auto; order: -1; }
	.ks-wortmarke { margin-right: auto; }
}

@media (max-width: 900px) {
	/* Zeile 1: Menü · Logo · Sprache · Warenkorb – Zeile 2: Suche über die ganze Breite */
	.ks-kopfzeile__inner { flex-wrap: wrap !important; gap: 0.75rem 0.5rem; }
	.ks-kopfzeile__aktionen.wp-block-group { display: contents !important; }
	.ks-nav { order: -1; flex: 0 0 auto; }
	.ks-wortmarke { margin-right: auto; }
	.ks-sprachwahl, .ks-warenkorb { order: 1; flex: none; }
	.ks-suche { order: 2; flex: 1 1 100%; min-width: 0; }
	.ks-suche .wp-block-search__inside-wrapper { width: 100%; }
	.ks-suche .wp-block-search__input { min-width: 0; }
	.ks-wortmarke a { width: 44px; height: 44px; }
	.ks-sprachwahl a { min-width: 44px; padding: 0; }

	/* Beim Herunterscrollen nur die obere Zeile zeigen (kopfzeile.js). Die Suchzeile bleibt im
	   Layout (unsichtbar, durchklickbar), damit der Inhalt darunter nicht springt. Kein clip-path:
	   der würde das aufgeklappte Menü und den Warenkorb mit abschneiden. */
	.ks-kopf-kompakt header.wp-block-template-part { pointer-events: none; }
	.ks-kopf-kompakt .ks-kopfzeile { background: transparent; border-bottom-color: transparent; pointer-events: none; }
	.ks-kopf-kompakt .ks-kopfzeile::before {
		content: "";
		position: absolute; top: 0; left: 0; right: 0; z-index: -1;
		height: calc(100% - 44px - 0.75rem);
		background: var(--wp--preset--color--basis);
		border-bottom: 1px solid var(--ks-rand);
	}
	.ks-kopf-kompakt .ks-nav,
	.ks-kopf-kompakt .ks-wortmarke,
	.ks-kopf-kompakt .ks-sprachwahl,
	.ks-kopf-kompakt .ks-warenkorb { pointer-events: auto; }
	.ks-kopf-kompakt .ks-suche { visibility: hidden; }
}

/* ---------- Abschnitte ---------- */

.ks-startseite { padding-bottom: var(--wp--preset--spacing--60); }
.ks-abschnitt { margin-top: var(--wp--preset--spacing--60); }
.ks-abschnitt__kopf { margin-bottom: var(--wp--preset--spacing--40); }
.ks-abschnitt__kopf h2, .ks-abschnitt__kopf p { margin: 0; }

.ks-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-akzent);
}

.ks-hero { padding-top: var(--wp--preset--spacing--60); }
.ks-hero__titel { font-size: var(--wp--preset--font-size--hero); line-height: 1.05; margin: 0.75rem 0 1rem; }
.ks-hero__text { font-size: var(--wp--preset--font-size--large); max-width: 30rem; }
.ks-hero__spalten { gap: var(--wp--preset--spacing--60); }

/* Vitrine: zwei gegradete Karten leicht versetzt */
.ks-hero__vitrine .ks-produktraster { gap: 1.25rem; align-items: end; }
.ks-hero__vitrine .ks-produktraster > li:first-child { transform: rotate(-3deg); }
.ks-hero__vitrine .ks-produktraster > li:nth-child(2) { transform: translateY(-1.5rem); border-color: var(--ks-akzent); }
@media (max-width: 781px) {
	.ks-hero__vitrine .ks-produktraster > li { transform: none !important; }
}

/* ---------- Produktkarten ---------- */

.ks-produktraster { gap: 1.25rem !important; }
.ks-produktraster > li,
.ks-produktraster > .wp-block-post {
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: var(--ks-radius);
	padding: 0.875rem;
	transition: border-color 0.15s;
}
.ks-produktraster > li:hover { border-color: #3A4154; }
.ks-produktraster--4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); list-style: none; padding: 0; }

.ks-produktkarte { gap: 0.5rem; align-items: stretch !important; height: 100%; }
.ks-produktkarte .wc-block-components-product-image {
	position: relative;
	background: var(--ks-flaeche-2);
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 0.25rem !important;
}
.ks-produktkarte .wc-block-components-product-image img {
	aspect-ratio: 63 / 88 !important;
	object-fit: contain !important;
	width: 100%;
	height: auto;
}
.ks-produktkarte__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
}
.ks-produktkarte__titel a { color: var(--wp--preset--color--text); text-decoration: none; }
.ks-produktkarte__titel a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.ks-produktraster > li { position: relative; }
.ks-produktkarte__preis { margin-top: auto; font-size: var(--wp--preset--font-size--large); }
.ks-produktkarte__preis del { color: var(--ks-gedaempft); font-weight: 500; font-size: 0.85em; }
.ks-produktkarte__preis ins { text-decoration: none; }

.ks-produkt-meta { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); }

/* ---------- Badges ---------- */

.ks-badges {
	position: absolute;
	top: 0.625rem; left: 0.625rem;
	z-index: 2;
	display: flex; flex-wrap: wrap; gap: 0.375rem;
	pointer-events: none;
}
.ks-badge {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.375rem 0.5rem;
	border-radius: 6px;
	color: var(--wp--preset--color--basis);
	background: var(--wp--preset--color--text);
}
.ks-badge--grade { background: var(--ks-akzent); }
.ks-badge--vorbestellung { background: var(--wp--preset--color--info); }
.ks-badge--aktion { background: var(--wp--preset--color--aktion); }
.ks-badge--knapp { background: var(--wp--preset--color--akzent-hell); }
.ks-badge--ausverkauft { background: #E5E7EB; color: #11141B; text-transform: uppercase; letter-spacing: 0.04em; }
/* Ausverkauft: Bild abgedunkelt, damit es in der Übersicht sofort auffällt */
.wc-block-components-product-image:has(.ks-badge--ausverkauft) img,
.wp-block-woocommerce-product-image:has(.ks-badge--ausverkauft) img { opacity: 0.45; filter: grayscale(0.7); }

.wp-block-woocommerce-product-image-gallery { position: relative; }

/* ---------- Kategorien ---------- */

.ks-kategorien {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}
.ks-kategorie {
	display: flex; flex-direction: column;
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: var(--ks-radius);
	overflow: hidden;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.ks-kategorie:hover { border-color: var(--ks-akzent); transform: translateY(-2px); }
.ks-kategorie__bild {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1;
	overflow: hidden; /* hohe Produktbilder sprengen das Format sonst */
	padding: 1rem;
	background: radial-gradient(circle at 50% 40%, #262C3D, var(--wp--preset--color--tief));
}
.ks-kategorie__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.25s; }
.ks-kategorie:hover .ks-kategorie__bild img { transform: scale(1.04); }
.ks-kategorie__bild.is-leer img { width: 55%; height: auto; opacity: 0.35; }
.ks-kategorie__text { display: grid; gap: 0.35rem; padding: 1rem 1.125rem 1.125rem; }
.ks-kategorie__name {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}
.ks-kategorie__spruch { color: var(--ks-gedaempft); font-size: var(--wp--preset--font-size--small); font-style: italic; }
.ks-kategorie__mehr { margin-top: 0.35rem; color: var(--ks-akzent); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
/* Spiele: zwei grosse Kacheln nebeneinander */
.ks-kategorien--spiele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-kategorien--spiele .ks-kategorie__bild { aspect-ratio: 16 / 10; }
.ks-kategorien--spiele .ks-kategorie__bild.is-leer img { width: auto; height: 60%; }
.ks-kategorie__bild.is-logo { padding: 8% 10%; }
.ks-kategorie__bild.is-logo img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
.ks-kategorien--spiele .ks-kategorie__name { font-size: var(--wp--preset--font-size--x-large); }
@media (max-width: 600px) {
	.ks-kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.ks-kategorie__bild { padding: 0.625rem; }
	.ks-kategorie__text { padding: 0.75rem 0.875rem 0.875rem; }
	.ks-kategorie__name { font-size: var(--wp--preset--font-size--medium); }
	.ks-kategorie__spruch { font-size: var(--wp--preset--font-size--x-small); }
	.ks-kategorie__mehr { font-size: var(--wp--preset--font-size--x-small); white-space: nowrap; }
}

/* ---------- Newsletter ---------- */

.ks-newsletter {
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: var(--ks-radius);
	padding: var(--wp--preset--spacing--50);
	gap: 1.5rem;
}
.ks-newsletter__text { gap: 0.25rem; max-width: 34rem; }
.ks-newsletter__text h2, .ks-newsletter__text p { margin: 0; }
.ks-newsletter__form { display: grid; gap: 0.75rem; min-width: 0; max-width: 100%; }
.ks-newsletter__zeile { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ks-newsletter__einwilligung { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); max-width: 26rem; }
.ks-newsletter__einwilligung input { margin-top: 0.15rem; width: 16px; height: 16px; accent-color: var(--ks-akzent); }
.ks-newsletter__zeile input {
	min-height: 48px; min-width: 0; flex: 1 1 260px;
	padding: 0 1rem;
	background: var(--wp--preset--color--basis);
	border: 1px solid var(--ks-rand);
	border-radius: 10px;
	color: var(--wp--preset--color--text);
	font: inherit;
}
.ks-newsletter__form button:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Shop / Kategorie ---------- */

.ks-shop, .ks-produkt, .ks-seite { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.ks-shop__spalten { gap: var(--wp--preset--spacing--50); }
.ks-shop__leiste { margin-bottom: 1.25rem; color: var(--ks-gedaempft); font-size: var(--wp--preset--font-size--small); }
.ks-shop__leiste select {
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--ks-rand);
	border-radius: 8px;
	min-height: 44px;
	padding: 0 0.75rem;
}
.ks-filter { gap: 1.5rem; }
.ks-filter__titel {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ks-gedaempft);
}
.ks-filter .wc-block-product-filters__overlay-content { background: var(--wp--preset--color--basis); }
.ks-filter .wc-block-product-filters__open-overlay {
	min-height: 44px;
	border: 1px solid var(--ks-rand);
	border-radius: 10px;
	padding: 0 1rem;
	color: var(--wp--preset--color--text);
}

.wc-block-breadcrumbs, .woocommerce-breadcrumb { font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); }

@media (max-width: 781px) {
	.ks-shop__filter { flex-basis: auto !important; }
}

/* ---------- Produktseite ---------- */

.ks-produkt__spalten { gap: var(--wp--preset--spacing--60); }
.ks-produkt__bilder { min-width: 0; }
.ks-produkt__bilder .woocommerce-product-gallery {
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: var(--ks-radius);
	padding: 1rem;
}
.ks-produkt__info h1 { margin: 0.25rem 0 0.5rem; }
.ks-kartendetails {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-radius: var(--ks-radius);
}
.ks-kartendetails dt { font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); }
.ks-kartendetails dd { margin: 0; font-weight: 700; }
.ks-versandhinweis { font-size: var(--wp--preset--font-size--small); color: var(--ks-gedaempft); }
.ks-produkt .quantity input {
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--ks-rand);
	border-radius: 8px;
	min-height: 48px;
}
.ks-produkt .single_add_to_cart_button { min-height: 48px; }

/* ---------- Fusszeile ---------- */

.ks-fusszeile {
	margin-top: 0;
	background: var(--wp--preset--color--tief);
	border-top: 1px solid var(--ks-rand);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}
.ks-fusszeile__titel {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ks-gedaempft);
	margin: 0 0 0.75rem;
}
.ks-linkliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ks-linkliste a { color: var(--wp--preset--color--text); text-decoration: none; }
.ks-linkliste a:hover { color: var(--ks-akzent); }
.ks-fusszeile__kontakt a { color: var(--wp--preset--color--text); text-decoration: none; white-space: nowrap; }
.ks-fusszeile__kontakt a:hover { color: var(--ks-akzent); }
.ks-fusszeile__copyright {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
	border-top: 1px solid var(--ks-rand);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ks-gedaempft);
}

@media (max-width: 781px) {
	/* Handy: Logo und Text oben, darunter die Linkgruppen in zwei Spalten */
	.ks-fusszeile { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--40); }
	.ks-fusszeile__spalten.wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem !important;
	}
	.ks-fusszeile__spalten > .wp-block-column { flex-basis: auto !important; min-width: 0; }
	.ks-fusszeile__spalten > .wp-block-column:first-child {
		grid-column: 1 / -1;
		display: flex; align-items: center; gap: 1rem;
	}
	.ks-fusszeile__spalten > .wp-block-column:first-child p { margin: 0; font-size: var(--wp--preset--font-size--small); }
	.ks-fusszeile .ks-wortmarke a { width: 52px; height: 52px; }
	.ks-fusszeile .ks-linkliste { gap: 0.25rem; }
	.ks-fusszeile .ks-linkliste a { display: inline-block; padding: 0.25rem 0; font-size: var(--wp--preset--font-size--small); }
	.ks-fusszeile__kontakt { font-size: var(--wp--preset--font-size--small); }
	.ks-fusszeile__copyright { margin-top: var(--wp--preset--spacing--40); padding-top: 1rem; }
}

/* ---------- WooCommerce-Formulare (Warenkorb, Kasse, Konto) ---------- */

.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control input,
.wc-blocks-components-select select,
.woocommerce form .input-text {
	background: var(--ks-flaeche) !important;
	color: var(--wp--preset--color--text) !important;
	border-color: var(--ks-rand) !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select label { color: var(--ks-gedaempft) !important; }

/* ---------- Filter im Detail ---------- */

.ks-shop__filter, .ks-shop__produkte { min-width: 0; }
.ks-filter, .ks-filter * { box-sizing: border-box; }
.ks-filter .wp-block-woocommerce-product-filter-checkbox-list {
	border: 0 !important;
	padding: 0 !important;
	max-width: 100%;
}
.ks-filter .wc-block-product-filter-checkbox-list__items { display: grid; gap: 0.25rem; margin: 0; padding: 0; }
.ks-filter .wc-block-product-filter-checkbox-list__label { min-height: 36px; align-items: center; cursor: pointer; }
.ks-filter .wc-block-product-filter-checkbox-list__input {
	background: var(--ks-flaeche) !important;
	border: 1px solid #3A4154 !important;
	border-radius: 4px;
}
.ks-filter .wc-block-product-filter-checkbox-list__input:checked { background: var(--ks-akzent) !important; border-color: var(--ks-akzent) !important; }
.ks-filter .wc-block-product-filter-checkbox-list__mark { color: var(--wp--preset--color--basis); }
.ks-filter .wc-block-product-filter-price-slider { max-width: 100%; }
.ks-filter .wc-block-product-filter-price-slider input[type="text"] {
	width: 100%;
	min-height: 40px;
	padding: 0 0.5rem;
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--ks-rand);
	border-radius: 8px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.ks-filter .wc-block-product-filter-price-slider__content { gap: 0.75rem; }
.ks-filter .range-bar { background: var(--ks-rand); }
.ks-filter .wc-block-product-filter-removable-chips__item {
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	color: var(--wp--preset--color--text);
	border-radius: 999px;
}
.ks-filter .wc-block-product-filters__overlay-dialog,
.ks-filter .wc-block-product-filters__overlay-content,
.ks-filter .wc-block-product-filters__overlay-header { background: var(--wp--preset--color--basis); color: var(--wp--preset--color--text); }
.ks-filter .wc-block-product-filters__close-overlay { color: var(--wp--preset--color--text); min-height: 44px; }

/* Formulare allgemein (z. B. Konto, Rezensionen) */
.woocommerce textarea, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="password"], .woocommerce input[type="tel"] {
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--ks-rand);
	border-radius: 8px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font: inherit;
}

/* Hinweisboxen von WooCommerce */
.wc-block-components-notice-banner {
	background: var(--ks-flaeche) !important;
	color: var(--wp--preset--color--text) !important;
	border-radius: 10px !important;
}
.wc-block-components-notice-banner.is-success { border-color: #3FB37F !important; }
.wc-block-components-notice-banner.is-error { border-color: var(--wp--preset--color--aktion) !important; }
.wc-block-components-notice-banner.is-info { border-color: var(--wp--preset--color--info) !important; }
.wc-block-components-notice-banner a { color: var(--ks-akzent) !important; }

/* ---------- Hinweise (Vorbestellung, Gratisversand) und Countdown ---------- */

.ks-hinweis {
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	background: var(--ks-flaeche);
	border: 1px solid var(--ks-rand);
	border-left-width: 1px;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
}
.ks-hinweis--vorbestellung { border-color: var(--wp--preset--color--info); }
.ks-gratisversand { border-color: var(--ks-akzent); }
.ks-countdown {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--aktion);
	font-weight: 700;
}
.ks-countdown__zeit { font-variant-numeric: tabular-nums; }
.ks-produktraster--4 > * { margin: 0 !important; }
.ks-produkt .wc-block-components-product-price del,
.ks-produkt .price del { color: var(--ks-gedaempft); font-weight: 500; font-size: 0.7em; }
.ks-produkt .wc-block-components-product-price ins,
.ks-produkt .price ins { text-decoration: none; }

/* ---------- Formulare (Kartensuche, Ankauf) ---------- */

.ks-formular { max-width: 760px; display: grid; gap: 0.25rem; }
.ks-formular__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 1.25rem; }
.ks-feld { display: grid; gap: 0.375rem; margin: 0 0 1rem; border: 0; padding: 0; }
.ks-feld label, .ks-feld legend { font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.ks-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ks-feld select,
.ks-feld textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 0.875rem;
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid #3A4154;
	border-radius: 10px;
	font: inherit;
}
.ks-feld input::placeholder, .ks-feld textarea::placeholder { color: #8A90A0; }
.ks-feld input[type="file"] { font: inherit; color: var(--ks-gedaempft); }
.ks-feld small { color: var(--ks-gedaempft); font-size: var(--wp--preset--font-size--x-small); }
.ks-feld--checkbox label { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 400; }
.ks-feld--checkbox input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--ks-akzent); }
.ks-optionen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.ks-optionen label { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 500; }
.ks-optionen input { width: 18px; height: 18px; accent-color: var(--ks-akzent); }
.ks-pflicht { color: var(--ks-akzent); }
.ks-optional { color: var(--ks-gedaempft); font-weight: 400; }
.ks-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ks-hinweis--erfolg { border-color: #3FB37F; }
.ks-hinweis--fehler { border-color: var(--wp--preset--color--aktion); }

/* ---------- Card Vault ---------- */

.ks-vault__kopf { display: grid; gap: 1rem; margin-bottom: var(--wp--preset--spacing--50); }
.ks-vault__kopf p { margin: 0; }
.ks-vault__titel { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.ks-vault__zurueck { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--small); }
.ks-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ks-chip {
	display: inline-flex; align-items: center;
	min-height: 40px; padding: 0 1rem;
	border: 1px solid #3A4154; border-radius: 999px;
	color: var(--wp--preset--color--text); text-decoration: none;
	font-size: var(--wp--preset--font-size--small); font-weight: 600;
}
.ks-chip:hover { border-color: var(--ks-akzent); color: var(--ks-akzent); }
.ks-chip.is-aktiv { background: var(--ks-akzent); border-color: var(--ks-akzent); color: var(--wp--preset--color--basis); }
.ks-vault__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ks-vault__filter label { font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.ks-vault__filter select {
	min-height: 44px; padding: 0 0.75rem; min-width: 220px;
	background: var(--ks-flaeche); color: var(--wp--preset--color--text);
	border: 1px solid #3A4154; border-radius: 10px; font: inherit;
}
.ks-vault__filter button { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.ks-vault__serie { margin-top: var(--wp--preset--spacing--50); }
.ks-vault__sets, .ks-vault__karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ks-vault__sets { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ks-vault__set a {
	display: grid; gap: 0.375rem; height: 100%; box-sizing: border-box;
	padding: 1rem;
	background: var(--ks-flaeche); border: 1px solid var(--ks-rand); border-radius: var(--ks-radius);
	color: var(--wp--preset--color--text); text-decoration: none;
}
.ks-vault__set a:hover { border-color: var(--ks-akzent); }
.ks-vault__logo { display: flex; align-items: center; justify-content: center; height: 64px; }
.ks-vault__logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.ks-vault__setname { font-weight: 700; }
.ks-vault__setinfo { font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); }
.ks-vault__setinfo strong { color: var(--ks-akzent); }
.ks-vault__karten { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ks-vault__karte {
	display: grid; gap: 0.25rem; align-content: start;
	padding: 0.625rem;
	background: var(--ks-flaeche); border: 1px solid var(--ks-rand); border-radius: 12px;
}
.ks-vault__karte.is-shop { border-color: var(--ks-akzent); }
.ks-vault__bild { display: block; aspect-ratio: 245 / 337; border-radius: 8px; overflow: hidden; background: var(--ks-flaeche-2); }
.ks-vault__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-vault__karte:not(.is-shop) .ks-vault__bild img { opacity: 0.55; }
.ks-vault__ohnebild { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--ks-gedaempft); font-size: var(--wp--preset--font-size--x-small); }
.ks-vault__nummer { font-size: var(--wp--preset--font-size--x-small); color: var(--ks-gedaempft); margin-top: 0.25rem; }
.ks-vault__name { font-weight: 700; font-size: var(--wp--preset--font-size--small); line-height: 1.3; }
.ks-vault__aktion {
	display: flex; align-items: center; justify-content: center;
	min-height: 40px; margin-top: 0.375rem;
	border: 1px solid #3A4154; border-radius: 8px;
	color: var(--wp--preset--color--text); text-decoration: none;
	font-size: var(--wp--preset--font-size--small); font-weight: 700;
}
.ks-vault__aktion:hover { border-color: var(--ks-akzent); color: var(--ks-akzent); }
.ks-vault__aktion.is-shop { background: var(--ks-akzent); border-color: var(--ks-akzent); color: var(--wp--preset--color--basis); }
@media (max-width: 480px) {
	.ks-vault__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-vault__sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wp-block-search:not(.ks-suche) .wp-block-search__input {
	background: var(--ks-flaeche);
	color: var(--wp--preset--color--text);
	border: 1px solid #3A4154;
	border-radius: 10px;
	min-height: 48px;
	padding: 0 0.875rem;
	font: inherit;
}

/* ---------- Sprachumschalter ---------- */

.ks-sprachwahl { display: flex; flex: none; border: 1px solid var(--ks-rand); border-radius: 10px; overflow: hidden; }
.ks-sprachwahl a {
	display: flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 42px; padding: 0 0.5rem;
	color: var(--ks-gedaempft); text-decoration: none;
	font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.04em;
}
.ks-sprachwahl a:hover { color: var(--wp--preset--color--text); }
.ks-sprachwahl a.is-aktiv { background: var(--ks-flaeche); color: var(--ks-akzent); }

/* ---------- Intro-Video (Startseite, einmal pro Besuch) ---------- */

.ks-intro {
	display: none;
	position: fixed; inset: 0; z-index: 100000; /* über der Admin-Leiste */
	background: #000;
	align-items: center; justify-content: center;
	transition: opacity 0.5s ease;
}
.ks-intro-aktiv .ks-intro { display: flex; }
.ks-intro-aktiv body { overflow: hidden; }
.ks-intro.is-weg { opacity: 0; pointer-events: none; }
/* Ganz sichtbar (Schrift am Rand nicht abschneiden); Hochformat füllt das Handy fast ganz */
.ks-intro__video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
/* Querformat-Video am Computer bildschirmfüllend (Seitenverhältnis fast gleich, kaum Beschnitt) */
.ks-intro.is-quer .ks-intro__video { object-fit: cover; }
.ks-intro__ueberspringen {
	position: absolute;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	min-height: 44px; padding: 0 1.125rem;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.ks-intro__ueberspringen:hover, .ks-intro__ueberspringen:focus-visible { border-color: var(--ks-akzent); color: var(--ks-akzent); }