@charset "UTF-8";
/* ==========================================================================
   Leni Rosenbauer Shop - ergaenzendes Stylesheet
   Erstellt von Leni Rosenbauer

   Hier steht, was theme.json v3 nicht abbilden kann. Die Abschnitte 1 bis 13
   und 15 sind aus dem Haupt-Theme leni-rosenbauer (assets/css/theme.css)
   uebernommen und auf das gekuerzt, was der Shop braucht. Wer dort am
   Grundsystem etwas aendert, zieht es hier nach. Die Abschnitte 14, 16 und 17
   sind eigen: Kopfzeile mit Konto und Warenkorb, Einstieg und Sortimente,
   Produktraster.

   Die Datei wird im Frontend und im Block-Editor geladen. Alle Werte kommen
   aus Tokens der theme.json.

   Variablennamen: WordPress wandelt camelCase-Keys aus settings.custom in
   kebab-case um - daher --wp--custom--line-height--*,
   --wp--custom--header-height, --wp--custom--radius--nest-offset und
   --wp--preset--spacing--2-xs / --2-xl (nicht 2xs / 2xl).

   Bewegungsregel: animiert werden transform und opacity, dazu Farb- und
   Schattenwechsel. Nie Layout-Eigenschaften.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grundlagen
   -------------------------------------------------------------------------- */
:root {
	/* Die Stilvariation "Hoher Kontrast" setzt Rahmen und Unterstreichung auf 2px. */
	--lr-rule-width: var(--wp--custom--rule--width, 1px);
	--lr-underline-width: var(--wp--custom--rule--underline, 1px);

	/* Weicher Fokus-Hof aus dem Signalrot-Token. */
	--lr-focus-glow: color-mix(in srgb, var(--wp--preset--color--brand-secondary) 14%, transparent);

	/* Mindesthoehe jeder Bedienflaeche (Touch-Ziel). */
	--lr-tap-target: 44px;
}

/*
 * Auch Browserflaechen tragen die Marke: Auswahl in Coral, Kontrollkaestchen
 * und Scrollleiste aus der Palette.
 */
html {
	font-synthesis-weight: none;
	accent-color: var(--wp--preset--color--brand-primary);
	scrollbar-color: var(--wp--preset--color--line-strong) var(--wp--preset--color--base);
}

::selection {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--on-brand);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:where(img, svg, video, canvas, iframe) {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   2. Typografie-Feinschliff
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, dd, figcaption) {
	text-wrap: pretty;
}

/* Lesekorridor: greift nur, wo die Spalte breiter ist als 68ch. */
:where(p) {
	max-width: var(--wp--custom--measure--body);
}

:where(p.has-text-align-center) {
	margin-inline: auto;
}

.lr-measure-heading {
	max-width: var(--wp--custom--measure--heading);
}

.lr-measure-lead {
	max-width: var(--wp--custom--measure--lead);
}

/* --------------------------------------------------------------------------
   3. Ankerziele - scroll-margin-top aus der Kopfzeilenhoehe
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, [id]) {
	scroll-margin-top: calc(var(--wp--custom--header-height-mobile) + var(--wp--preset--spacing--s));
}

@media (min-width: 782px) {
	:where(h1, h2, h3, h4, [id]) {
		scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--s));
	}
}

/* --------------------------------------------------------------------------
   4. Fokus - wird nie entfernt
   -------------------------------------------------------------------------- */
:where(a[href], area, button, input, select, textarea, summary, details, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brand-secondary);
	outline-offset: var(--wp--custom--focus--offset);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-search__button:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wc-block-mini-cart__button:focus-visible,
.lr-header-account a:focus-visible,
:where(input, textarea, select):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brand-secondary);
	outline-offset: var(--wp--custom--focus--offset);
	box-shadow: 0 0 0 6px var(--lr-focus-glow);
}

.wp-element-button:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
	outline: none;
}

/* Auf dunklem Grund uebernimmt die inverse Textfarbe den Ring. */
.is-style-section-inverse :focus-visible,
.has-surface-inverse-background-color :focus-visible {
	outline-color: var(--wp--preset--color--text-inverse);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--text-inverse) 18%, transparent);
}

/* --------------------------------------------------------------------------
   5. Deaktivierte Zustaende
   -------------------------------------------------------------------------- */
.wp-element-button[disabled],
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"],
.wp-block-button__link[disabled],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"] {
	background-color: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-muted);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

:where(input, textarea, select):disabled,
:where(input, textarea, select)[aria-disabled="true"] {
	background-color: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-muted);
	box-shadow: none;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. Buttons - Uebergaenge, Hover, :active
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2-xs);
	min-height: var(--lr-tap-target);
	text-decoration: none;
	transition:
		transform var(--wp--custom--dur--press) var(--wp--custom--ease--out),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

@media (hover: hover) and (pointer: fine) {
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-block-search__button:hover {
		transform: translateY(-1px);
	}
}

.wp-element-button:active,
.wp-block-button__link:active,
.wp-block-search__button:active {
	transform: scale(0.97) translateY(0);
	transition-duration: var(--wp--custom--dur--press);
}

/* --------------------------------------------------------------------------
   7. Links
   -------------------------------------------------------------------------- */
:where(.entry-content, .wp-block-post-content, .wp-block-group) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration-thickness: var(--lr-underline-width);
	text-decoration-color: var(--wp--preset--color--line-strong);
	text-underline-offset: 0.18em;
	transition:
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		text-decoration-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover);
}

@media (hover: hover) and (pointer: fine) {
	:where(.entry-content, .wp-block-post-content, .wp-block-group) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
		text-decoration-color: currentColor;
		text-decoration-thickness: calc(var(--lr-underline-width) + 1px);
	}
}

/* Navigation: ohne Unterstreichung, erst im Hover eine feine Linie. */
.wp-block-navigation a:where(:not(.wp-element-button)),
.wp-block-site-title a {
	text-decoration: none;
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-navigation a:where(:not(.wp-element-button)):hover {
		text-decoration: underline;
		text-decoration-thickness: var(--lr-underline-width);
		text-underline-offset: 0.24em;
	}
}

/* --------------------------------------------------------------------------
   8. Formularfelder (Kundenkonto, Anmeldung)
   :where() haelt die Spezifitaet bei null - WooCommerce-Bloecke mit eigener
   Feldoptik (Kasse, Warenkorb) behalten ihre Regeln.
   -------------------------------------------------------------------------- */
:where(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	textarea,
	select
) {
	min-height: 48px;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--normal);
	color: var(--wp--preset--color--ink);
	caret-color: var(--wp--preset--color--brand-primary-deep);
	background-color: var(--wp--preset--color--surface);
	border: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--s);
	transition:
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

:where(input, textarea)::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

:where(input, textarea, select):focus-visible {
	border-color: var(--wp--preset--color--brand-secondary);
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--wp--preset--color--brand-primary);
}

/* --------------------------------------------------------------------------
   9. Kopfzeile - Stapelreihenfolge und Schatten nach dem Scrollen
   data-lr-scrolled setzt assets/js/theme.js. Ohne JavaScript fehlt nur der
   Schatten.
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: var(--wp--custom--z--header);
	min-height: var(--wp--custom--header-height-mobile);
}

@media (min-width: 782px) {
	.wp-site-blocks > header.wp-block-template-part {
		min-height: var(--wp--custom--header-height);
	}
}

header.wp-block-template-part .is-position-sticky,
header.wp-block-template-part.is-position-sticky {
	z-index: var(--wp--custom--z--header);
	transition:
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		background-color var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

[data-lr-scrolled="true"] header.wp-block-template-part .is-position-sticky,
[data-lr-scrolled="true"] header.wp-block-template-part.is-position-sticky {
	box-shadow: var(--wp--preset--shadow--raised);
}

/* --------------------------------------------------------------------------
   10. Overlay-Menue (core/navigation)
   Oeffnen, Schliessen, Fokusfalle und Escape erledigt der Core-Block selbst.
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lr-tap-target);
	min-height: var(--lr-tap-target);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	transition:
		transform var(--wp--custom--dur--press) var(--wp--custom--ease--out),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-navigation__responsive-container-open:hover,
	.wp-block-navigation__responsive-container-close:hover {
		background-color: var(--wp--preset--color--surface-alt);
	}
}

.wp-block-navigation__responsive-container-open:active,
.wp-block-navigation__responsive-container-close:active {
	transform: scale(0.94);
}

.wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not([class*="-background-color"]) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-block: var(--wp--preset--spacing--l);
	padding-inline: var(--wp--custom--gutter);
	z-index: var(--wp--custom--z--overlay);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	animation: lr-overlay-in var(--wp--custom--dur--slow) var(--wp--custom--ease--drawer) both;
}

@keyframes lr-overlay-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--lr-tap-target);
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-navigation__submenu-icon {
	padding: var(--wp--preset--spacing--2-xs);
}

/* --------------------------------------------------------------------------
   11. Invertierte Bereiche
   -------------------------------------------------------------------------- */
.has-surface-inverse-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--text-inverse);
}

.has-surface-inverse-background-color :where(p, li) {
	color: var(--wp--preset--color--text-muted-inverse);
}

.has-surface-inverse-background-color .wp-block-button__link {
	box-shadow: 0 0 0 1px var(--wp--preset--color--text-inverse);
}

/* --------------------------------------------------------------------------
   12. Block-Style-Variationen
   Registriert in functions.php per register_block_style().
   -------------------------------------------------------------------------- */

/* 12.1 card-soft "Karte" */
.wp-block-group.is-style-card-soft,
.wp-block-column.is-style-card-soft {
	background-color: var(--wp--preset--color--surface);
	border: var(--lr-rule-width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--l);
	padding: var(--wp--preset--spacing--l);
	box-shadow: var(--wp--preset--shadow--subtle);
}

/* 12.2 card-outline "Karte Umriss" */
.wp-block-group.is-style-card-outline,
.wp-block-column.is-style-card-outline {
	background-color: transparent;
	border: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--l);
	padding: var(--wp--preset--spacing--l);
	box-shadow: none;
}

/* 12.3 button-outline "Umriss" */
.wp-block-button.is-style-button-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button.is-style-button-outline .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--brand-primary-soft);
		border-color: var(--wp--preset--color--brand-primary);
		color: var(--wp--preset--color--brand-primary-deep);
	}
}

/* 12.4 section-inverse "Sektion invers" */
.wp-block-group.is-style-section-inverse {
	background-color: var(--wp--preset--color--surface-inverse);
	color: var(--wp--preset--color--text-inverse);
	border-radius: var(--wp--custom--radius--2-xl);
	padding-block: var(--wp--preset--spacing--2-xl);
	padding-inline: var(--wp--preset--spacing--l);
}

.wp-block-group.is-style-section-inverse :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--text-inverse);
}

.wp-block-group.is-style-section-inverse :where(p, li, figcaption, cite) {
	color: var(--wp--preset--color--text-muted-inverse);
}

.wp-block-group.is-style-section-inverse a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--text-inverse);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--text-inverse) 55%, transparent);
}

/* --------------------------------------------------------------------------
   13. Typografische Bausteine und Seitenrahmen
   -------------------------------------------------------------------------- */

/* Einleitungssatz unter einer Ueberschrift. */
.lr-lead {
	max-width: var(--wp--custom--measure--lead);
	line-height: var(--wp--custom--line-height--snug);
	text-wrap: pretty;
}

/*
 * Gemeinsame linke Kante an der weiten Rasterbreite (wie im Haupt-Theme).
 * WordPress zentriert Kinder eines constrained Layouts; hier beginnen sie
 * dort, wo auch die breiten Elemente beginnen.
 */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

body .is-layout-constrained > .has-text-align-center {
	margin-inline: auto !important;
}

/* Betonung in Ueberschriften: echter Kursivschnitt von Instrument Serif in Coral. */
:where(h1, h2, h3) em {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--brand-primary);
}

:where(h1, h2, h3) a em {
	color: inherit;
}

.wp-element-caption {
	margin-top: var(--wp--preset--spacing--xs);
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: var(--wp--custom--line-height--normal);
	color: var(--wp--preset--color--text-muted);
}

/* Auf sehr kurzen Seiten rutscht die Fusszeile nicht unter die Kopfzeile. */
.lr-main {
	display: block;
	min-height: 60vh;
}

.lr-page-header > :first-child {
	margin-top: 0;
}

.lr-page-header :where(h1, .wp-block-post-title, .wp-block-query-title) {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   14. Kopfzeile - Marke, Navigation, Konto und Warenkorb
   -------------------------------------------------------------------------- */

/*
 * Sticky gehoert auf das umgebende <header>: die Gruppe ist sein einziges
 * Kind und gleich hoch, darin koennte sie nicht kleben.
 */
.wp-site-blocks > header.wp-block-template-part:has(> .lr-site-header) {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--z--header);
}

/* Angemeldet steht die Werkzeugleiste von WordPress darueber. */
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .lr-site-header) {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .lr-site-header) {
		top: 0;
	}
}

.lr-site-header {
	width: 100%;
	padding-block: 0;
}

/* Inline-Mindesthoehe schlaegt jede Klasse - deshalb wird das Token neu belegt. */
@media (max-width: 781px) {
	.lr-header-inner {
		--wp--custom--header-height: var(--wp--custom--header-height-mobile);
	}
}

.lr-header-brand {
	min-width: 0;
}

.lr-header-brand .wp-block-site-logo img {
	display: block;
	filter: var(--wp--custom--logo--on-base, none);
}

/*
 * "Shop" neben dem LR-Zeichen: dieselbe Serif wie die Ueberschriften, durch
 * eine Haarlinie vom Logo getrennt. Sagt, auf welcher der beiden Adressen man
 * gerade ist, ohne das Logo zu veraendern.
 */
.lr-header-shop-label {
	margin: 0;
	max-width: none;
	padding-block: 0.1875rem;
	padding-inline-start: var(--wp--preset--spacing--s);
	border-inline-start: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--normal);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.lr-header-actions {
	min-width: 0;
}

.lr-primary-nav {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 500;
}

.lr-primary-nav .current-menu-item > a,
.lr-primary-nav .current_page_item > a {
	color: var(--wp--preset--color--brand-primary-deep);
	text-decoration: underline;
	text-decoration-thickness: var(--lr-underline-width);
	text-underline-offset: 0.24em;
}

.lr-primary-nav a:active {
	opacity: 0.82;
}

/*
 * Menue-Taste bis 781px. Der Core-Block klappt erst unter 600px ein; dazwischen
 * stuenden Marke, Menue, Konto und Warenkorb gedraengt nebeneinander.
 */
@media (min-width: 600px) and (max-width: 781px) {
	.lr-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.lr-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Schmal stehen Konto und Warenkorb vor der Menue-Taste, die ganz aussen sitzt. */
@media (max-width: 781px) {
	.lr-header-actions > .lr-primary-nav {
		order: 2;
	}

	.lr-header-actions > .lr-header-shop-tools {
		order: 1;
	}
}

/*
 * Aufgeklapptes Menue. In der verschachtelten Kopfzeile kommt beim Overlay kein
 * Seitenrand an - Menuepunkte und Schliessen-Taste stiessen an den
 * Bildschirmrand. Das Overlay steht deshalb mit eigenem Rand linksbuendig an
 * der Kante der Seite, Unterpunkte ruecken eine Stufe ein. Die Blockklasse im
 * Selektor hebt die Regeln ueber die rechtsbuendige Ausrichtung des Core-Blocks.
 */
.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding-inline: var(--wp--custom--gutter);
}

.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: start;
}

.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-inline: var(--wp--preset--spacing--m) 0;
}

/* Untermenue-Links bringen eigenen Innenabstand mit; ohne ihn ist der Einzug genau eine Stufe. */
.wp-block-navigation.lr-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline: 0;
}

.lr-header-rule {
	height: 0;
	border: 0;
	border-top: var(--lr-rule-width) solid var(--wp--preset--color--line);
	opacity: 1;
}

/*
 * Konto und Warenkorb: runde Bedienflaechen in Touch-Groesse, im Hover dieselbe
 * gedeckte Flaeche wie die Menue-Taste.
 */
.lr-header-shop-tools {
	color: var(--wp--preset--color--ink);
}

.lr-header-account a,
.lr-header-cart .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lr-tap-target);
	min-height: var(--lr-tap-target);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--wp--custom--dur--press) var(--wp--custom--ease--out),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover);
}

@media (hover: hover) and (pointer: fine) {
	.lr-header-account a:hover,
	.lr-header-cart .wc-block-mini-cart__button:hover {
		background-color: var(--wp--preset--color--surface-alt);
		opacity: 1;
	}
}

.lr-header-account a:active,
.lr-header-cart .wc-block-mini-cart__button:active {
	transform: scale(0.94);
}

.lr-header-account svg,
.lr-header-cart .wc-block-mini-cart__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* Zaehler am Warenkorb: Coral mit der Schrift, die auf Coral gehoert (4.60:1). */
.lr-header-cart .wc-block-mini-cart__badge {
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   15. Fusszeile
   -------------------------------------------------------------------------- */
.lr-site-footer :where(a):not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--text-inverse);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--text-inverse) 45%, transparent);
}

.lr-site-footer .wp-block-navigation a,
.lr-site-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-inverse);
}

@media (hover: hover) and (pointer: fine) {
	.lr-site-footer :where(a):not(.wp-element-button):not(.wp-block-button__link):hover,
	.lr-site-footer .wp-block-navigation a:hover {
		color: var(--wp--preset--color--text-inverse);
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-decoration-thickness: var(--lr-underline-width);
		text-underline-offset: 0.24em;
	}
}

.lr-site-footer a:active {
	opacity: 0.82;
}

/* Vier Spalten auf Desktop, zwei ab Tablet, eine unterhalb 782px. */
@media (max-width: 1023px) {
	.wp-block-columns.lr-footer-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lr-footer-columns > .wp-block-column {
		flex-basis: auto;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.lr-footer-columns {
		grid-template-columns: 1fr;
	}
}

.lr-footer-claim-line {
	margin-block: 0;
	max-width: var(--wp--custom--measure--lead);
}

.lr-footer-col > :first-child,
.lr-footer-claim > :first-child {
	margin-top: 0;
}

.lr-site-footer .wp-block-site-logo img {
	display: block;
	filter: var(--wp--custom--logo--on-inverse, brightness(0) invert(1));
}

.lr-site-footer .wp-block-site-logo {
	margin-block-end: var(--wp--preset--spacing--s);
}

.lr-footer-heading {
	margin-block: 0;
	font-weight: 600;
	line-height: var(--wp--custom--line-height--normal);
}

.lr-footer-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding-block: var(--wp--preset--spacing--2-xs);
}

.lr-footer-contact-line {
	margin-block: 0;
	line-height: var(--wp--custom--line-height--loose);
	overflow-wrap: anywhere;
}

.lr-footer-social {
	color: var(--wp--preset--color--text-inverse);
}

.lr-footer-social .wp-social-link {
	transition: transform var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

@media (hover: hover) and (pointer: fine) {
	.lr-footer-social .wp-social-link:hover {
		transform: translateY(-2px);
	}
}

/*
 * Haarlinie wie in der Kopfzeile: Der Trennblock bringt sonst eine 2px starke
 * Linie in der hellen Linienfarbe mit, die auf dem dunklen Grund grell wirkt.
 */
.lr-footer-rule {
	height: 0;
	margin-block: var(--wp--preset--spacing--xl);
	border: 0;
	border-top: var(--lr-rule-width) solid color-mix(in srgb, var(--wp--preset--color--text-inverse) 24%, transparent);
	opacity: 1;
}

.lr-footer-bottom {
	row-gap: var(--wp--preset--spacing--s);
}

.lr-footer-bottom p {
	margin-block: 0;
	max-width: none;
}

@media (max-width: 781px) {
	.lr-footer-bottom {
		justify-content: flex-start;
	}
}

.lr-footer-crosslink {
	margin-block: 0;
	max-width: var(--wp--custom--measure--lead);
}

.lr-footer-crosslink a {
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. Einstieg und Sortiment-Pillen (Startseite, Sortimentsseiten)
   -------------------------------------------------------------------------- */

/*
 * Ueberschrift und Einleitung links, die Sortiment-Pillen rechts auf der
 * Grundlinie der Einleitung. Reicht der Platz nicht, rutschen die Pillen
 * darunter.
 */
.lr-shop-intro-row {
	row-gap: var(--wp--preset--spacing--m);
}

.lr-shop-intro-text {
	flex: 1 1 30rem;
	min-width: 0;
}

.lr-shop-intro-text > * {
	margin-block: 0;
}

.lr-shop-title {
	margin-block: 0;
	max-width: var(--wp--custom--measure--heading);
}

.lr-shop-intro-text .wp-block-term-description p {
	margin-block: 0;
}

.lr-filter-nav {
	flex: 0 1 auto;
	min-width: 0;
}

.lr-filter-nav .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--xs);
}

.lr-filter-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--lr-tap-target);
	padding: 0 1.125rem;
	border: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform var(--wp--custom--dur--press) var(--wp--custom--ease--out),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--hover);
}

@media (hover: hover) and (pointer: fine) {
	.lr-filter-nav .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--brand-primary-soft);
		border-color: var(--wp--preset--color--brand-primary);
		color: var(--wp--preset--color--brand-primary-deep);
		text-decoration: none;
	}
}

.lr-filter-nav .wp-block-navigation-item__content:active {
	transform: scale(0.97);
}

/* Aktuelles Sortiment: gefuellt in Logo-Schwarz, nicht nur ueber Farbe erkennbar. */
.lr-filter-nav .current-menu-item > .wp-block-navigation-item__content,
.lr-filter-nav .current-menu-item > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   17. Produktraster (woocommerce/product-collection mit Klasse lr-product-grid)
   -------------------------------------------------------------------------- */

/*
 * Zwei Spalten auf dem Telefon, drei ab 782px, vier ab 1200px. Die
 * Blockklasse im Selektor hebt die Regel ueber das responsive Raster von
 * WooCommerce.
 */
.wp-block-woocommerce-product-collection.lr-product-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--s);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.wp-block-woocommerce-product-collection.lr-product-grid .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--m);
	}
}

@media (min-width: 1200px) {
	.wp-block-woocommerce-product-collection.lr-product-grid .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--xl);
		column-gap: var(--wp--preset--spacing--l);
	}
}

/*
 * Jede Kachel ist eine Flex-Spalte: der Button rutscht an den unteren Rand,
 * damit alle Buttons einer Reihe auf einer Linie stehen, egal wie lang die
 * Produktnamen sind.
 */
.lr-product-grid .wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 0;
	margin: 0;
	text-align: start;
}

/*
 * Bildkachel. Mockups kommen in allen Formaten; die Kachel schneidet sie auf
 * ein Quadrat auf gedeckter Flaeche. Eine Haarlinie aus Logo-Schwarz mit 8 %
 * gibt weissen Mockups eine Kante.
 */
.lr-product-grid .lr-product-media {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--s);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--l);
	background-color: var(--wp--preset--color--surface-alt);
	isolation: isolate;
}

.lr-product-grid .lr-product-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 var(--lr-rule-width) color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	pointer-events: none;
}

.lr-product-grid .lr-product-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--wp--custom--dur--slow) var(--wp--custom--ease--out);
}

/* Der eine Bewegungsmoment des Rasters: das Mockup rueckt beim Ueberfahren naeher. */
@media (hover: hover) and (pointer: fine) {
	.lr-product-grid .wc-block-product:hover .lr-product-media img {
		transform: scale(1.04);
	}
}

/* Fokus auf dem Titel-Link zeigt sich auch an der Bildkachel. */
.lr-product-grid .wc-block-product:has(.wp-block-post-title a:focus-visible) .lr-product-media {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brand-secondary);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Angebot: Pille wie die Badge-Variante des Haupt-Themes, oben links im Bild. */
.lr-product-grid .wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--s);
	inset-inline-start: var(--wp--preset--spacing--s);
	z-index: 1;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-primary-soft);
	color: var(--wp--preset--color--brand-primary-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.lr-product-grid .lr-product-body {
	flex: 1 1 auto;
	min-width: 0;
}

.lr-product-grid .lr-product-body > * {
	margin-block: 0;
}

/*
 * Produktname in der Grotesk (Kartentitel wie im Haupt-Theme). Der Link spannt
 * per ::after ueber die ganze Kachel; der Warenkorb-Button liegt darueber.
 */
.lr-product-grid .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--tracking--snug);
}

.lr-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.lr-product-grid .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (hover: hover) and (pointer: fine) {
	.lr-product-grid .wc-block-product:hover .wp-block-post-title a {
		color: var(--wp--preset--color--brand-primary-deep);
		text-decoration: underline;
		text-decoration-thickness: var(--lr-underline-width);
		text-underline-offset: 0.2em;
	}
}

/* Preis in Instrument Serif - dieselbe Rolle wie auf den Preiskarten der Hauptseite. */
.lr-product-grid .wc-block-components-product-price {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--tracking--normal);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

.lr-product-grid .wc-block-components-product-price del {
	margin-inline-end: 0.35em;
	font-size: 0.72em;
	color: var(--wp--preset--color--text-muted);
	text-decoration-thickness: 1px;
}

.lr-product-grid .wc-block-components-product-price ins {
	color: var(--wp--preset--color--brand-primary-deep);
	text-decoration: none;
}

.lr-product-tax-note {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--xs);
	line-height: var(--wp--custom--line-height--normal);
	color: var(--wp--preset--color--text-muted);
}

/*
 * Warenkorb-Button als Umriss-Pille. Coral bleibt dem Warenkorb-Zaehler und
 * dem Hover vorbehalten - zwoelf gefuellte Coral-Pillen wuerden das Raster
 * uebertoenen.
 */
/*
 * gap: 0, weil WooCommerce nach dem Hinzufuegen einen leeren <span> um den
 * Link "Warenkorb anzeigen" einblendet; mit dem Flex-Abstand des Blocks
 * rueckte der Button sonst 12px aus der Reihe.
 */
.lr-product-grid .wc-block-components-product-button {
	position: relative;
	z-index: 1;
	gap: 0;
	padding-top: var(--wp--preset--spacing--s);
	justify-content: flex-start;
}

/*
 * Preis, Steuerhinweis und Button bilden einen Block am unteren Rand der
 * Kachel. So stehen die Preise einer Reihe auf einer Linie, auch wenn ein
 * Produktname zwei Zeilen braucht.
 */
.lr-product-grid .lr-product-body > .lr-product-price {
	margin-top: auto;
}

.lr-product-grid .wc-block-components-product-button .wp-block-button__link {
	min-height: var(--lr-tap-target);
	margin: 0;
	padding: 0.625rem 1.125rem;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: var(--lr-rule-width) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.1;
}

@media (hover: hover) and (pointer: fine) {
	.lr-product-grid .wc-block-components-product-button .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--brand-primary-soft);
		border-color: var(--wp--preset--color--brand-primary);
		color: var(--wp--preset--color--brand-primary-deep);
	}
}

/*
 * "Warenkorb anzeigen" nach dem Hinzufuegen: ruhiger Textlink im Zeilenabstand
 * unter dem Button. Absolut positioniert, damit die Buttons einer Reihe auf
 * einer Linie bleiben.
 */
.lr-product-grid .added_to_cart {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 1;
	margin-top: var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

@media (max-width: 781px) {
	.lr-product-grid .lr-product-media {
		border-radius: var(--wp--custom--radius--m);
	}

	.lr-product-grid .wp-block-post-title {
		font-size: var(--wp--preset--font-size--sm);
	}

	.lr-product-grid .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--lg);
	}

	.lr-product-grid .wc-block-components-product-button,
	.lr-product-grid .wc-block-components-product-button .wp-block-button__link {
		width: 100%;
	}

	.lr-product-grid .wc-block-components-product-button .wp-block-button__link {
		justify-content: center;
		padding-inline: 0.75rem;
	}
}

/* Seitenblaettern: Pillen wie die Sortimente, aktuelle Seite gefuellt. */
.lr-product-grid .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--xl);
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--sm);
}

.lr-product-grid .wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.lr-product-grid .wp-block-query-pagination :where(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lr-tap-target);
	min-height: var(--lr-tap-target);
	margin: 0;
	padding: 0 0.875rem;
	border: var(--lr-rule-width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.lr-product-grid .wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

@media (hover: hover) and (pointer: fine) {
	.lr-product-grid .wp-block-query-pagination a:hover {
		border-color: var(--wp--preset--color--brand-primary);
		color: var(--wp--preset--color--brand-primary-deep);
	}
}

/* Leer-Zustand: ruhiger Umriss-Kasten mit einem Weg weiter. */
.lr-shop-empty {
	max-width: 44rem;
}

.lr-shop-empty > :first-child {
	margin-top: 0;
}

.lr-shop-empty-title {
	margin-block: 0;
}

/*
 * Fussnote unter dem Raster. Der Abstand steht hier und nicht am Layout-Abstand
 * der Gruppe, damit er nach dem Raster und nach dem Leer-Zustand gleich ist.
 */
.lr-shop-products > .lr-shop-price-note {
	margin-block: var(--wp--preset--spacing--l) 0;
	max-width: var(--wp--custom--measure--body);
}

/* --------------------------------------------------------------------------
   18. Bewegungsreduktion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 150ms !important;
		scroll-behavior: auto !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active,
	.wp-block-navigation__responsive-container-open:active,
	.wp-block-navigation__responsive-container-close:active,
	.lr-header-account a:active,
	.lr-header-cart .wc-block-mini-cart__button:active,
	.lr-filter-nav .wp-block-navigation-item__content:active,
	.lr-product-grid .wc-block-product:hover .lr-product-media img {
		transform: none;
	}
}