/*
 * Hager Motorrad – Zusatz-Stile.
 * Nur was theme.json nicht abdeckt. Möglichst klein halten.
 */

/* Sichtbarer Tastatur-Fokus überall (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--anthrazit);
	outline-offset: 2px;
}

/* Überschriften nicht mitten im Wort abschneiden, sauberer Zeilenumbruch. */
:where(h1, h2, h3) {
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Fließtext: angenehme Zeilenumbrüche. */
:where(p, li) {
	text-wrap: pretty;
}

/* Bilder nie breiter als ihr Container. */
img {
	max-width: 100%;
	height: auto;
}

/* Animationen reduzieren, wenn im System eingestellt. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Template-Teile direkt untereinander – Abstände regeln die Teile selbst. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
 * Kopfbereich: sticky, flach (max. ~64 px)
 * ------------------------------------------------------------- */
.wp-site-blocks > header:has(.hager-kopf) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
@media (max-width: 600px) {
	/* Admin-Leiste scrollt am Handy mit. */
	.wp-site-blocks > header:has(.hager-kopf) {
		top: 0;
	}
}
/* Beim Springen/Tabben nichts unter dem Sticky-Kopf verstecken (WCAG 2.4.11). */
html {
	scroll-padding-top: calc(80px + var(--wp-admin--admin-bar--height, 0px));
}
.hager-kopf {
	border-bottom: 1px solid var(--wp--preset--color--rand);
}
.hager-kopf__leiste {
	min-height: 64px;
	gap: var(--wp--preset--spacing--30);
}
.hager-kopf__logo {
	flex: none;
	padding-block: 4px;
}
.hager-kopf__logo img {
	display: block;
}
.hager-kopf__nav {
	flex: 1 1 auto;
	font-size: 1.0625rem;
}
.hager-kopf__nav .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	color: var(--wp--preset--color--anthrazit);
}
.hager-kopf__nav .wp-block-navigation-item__content:hover,
.hager-kopf__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--rot);
}
.hager-kopf__nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}
.hager-kopf__nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--rand) !important;
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--karte);
}
.hager-kopf__aktionen {
	flex: none;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--anthrazit);
}
.hager-kopf__aktionen a {
	color: inherit;
}
.hager-kopf__telefon:hover {
	color: var(--wp--preset--color--rot);
}

/* Suche: nur Symbol, aufklappbar. */
.hager-kopf__suche .wp-block-search__button {
	padding: 0.5rem;
	color: var(--wp--preset--color--anthrazit);
	background: transparent;
}
.hager-kopf__suche .wp-block-search__button:hover {
	color: var(--wp--preset--color--rot);
}
.hager-kopf__suche .wp-block-search__input {
	border-color: var(--wp--preset--color--rand);
	border-radius: 4px;
}

/* Burger-Menü schon unter 1024 px (WordPress schaltet sonst erst unter 600 px um). */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.hager-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.hager-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}
@media (max-width: 1023.98px) {
	.hager-kopf__nav {
		flex: none;
		order: 3;
	}
	.hager-kopf__leiste > .hager-kopf__aktionen {
		order: 2;
		margin-left: auto;
	}
}
@media (max-width: 1279.98px) {
	.hager-kopf__telefon span {
		/* Unter 1280 px nur das Telefon-Symbol (Platz für das Menü). */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
@media (max-width: 767.98px) {
	/* Handy: Logo, Warenkorb, Burger. Anrufen & Co. liegen in der Aktionsleiste unten. */
	.hager-kopf__suche,
	.hager-kopf__konto,
	.hager-kopf__telefon {
		display: none !important;
	}
	.hager-kopf__logo img {
		width: 58px !important;
		height: auto;
	}
}

/* Burger-Menü-Overlay */
.hager-kopf .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
}
.hager-kopf .wp-block-navigation__responsive-container-open,
.hager-kopf .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------
 * Fußbereich
 * ------------------------------------------------------------- */
.hager-fuss__titel {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hager-fuss .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
/* Tablet: 2 × 2 Spalten statt vier schmaler. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.hager-fuss .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}
.hager-fuss__linie {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: none !important;
	opacity: 1;
}
.hager-fuss :where(a):focus-visible {
	outline-color: var(--wp--preset--color--weiss);
}

/* Fußzeile auch auf kurzen Seiten am unteren Rand. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* ---------------------------------------------------------------
 * Shop (WooCommerce): Liste mit Filterspalte, Produktkarten
 * ------------------------------------------------------------- */
.hager-shop {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}
.hager-shop:not(:has(> *)) {
	display: none;
}
@media (min-width: 1024px) {
	.hager-shop:has(> .wc-block-product-filters) {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}
.hager-shop > * {
	margin-block-start: 0;
}
.hager-shop__filter h2 {
	font-size: var(--wp--preset--font-size--large);
}
.hager-shop__leiste {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}
.hager-shop__leiste > * {
	margin: 0;
}
.hager-shop__leiste select {
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	background-color: var(--wp--preset--color--weiss);
	font: inherit;
}

/* Produktkarten: 2 Spalten am Handy, Bild 4:3, Inhalte linksbündig, Knopf unten. */
.hager-produkte .wc-block-product-template {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}
@media (max-width: 599.98px) {
	.hager-produkte .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		display: grid;
	}
	.hager-produkte .wc-block-product-template.is-flex-container > li {
		width: auto !important;
		margin: 0 !important;
	}
}
.hager-produkte .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0 0 0.75rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	background: var(--wp--preset--color--weiss);
	text-align: left;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hager-produkte .wc-block-product:hover {
	border-color: var(--wp--preset--color--rot);
	box-shadow: var(--wp--preset--shadow--karte);
}
.hager-produkte .wc-block-product > * {
	margin: 0 !important;
	padding-inline: 0.75rem;
}
.hager-produkte .wc-block-product > .wc-block-components-product-image {
	padding: 0;
	margin-bottom: 0.4rem !important;
}
.hager-produkte .wc-block-components-product-image a {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--weiss);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}
.hager-produkte .wc-block-components-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
.hager-produkt__titel {
	font-size: 1.15rem !important;
	line-height: 1.25;
	hyphens: manual;
}
.hager-produkt__titel a {
	color: var(--wp--preset--color--anthrazit);
	text-decoration: none;
}
.hager-produkt__titel a:hover {
	color: var(--wp--preset--color--rot);
}
.hager-produkt__titel a::after {
	/* Ganze Karte klickbar (Knopf liegt darüber). */
	content: "";
	position: absolute;
	inset: 0;
}
.hager-produkte .wc-block-product {
	position: relative;
}
.hager-produkte .wc-block-components-product-sale-badge,
.hager-produkt__knopf {
	position: relative;
	z-index: 1;
}
.hager-produkt__preis {
	color: var(--wp--preset--color--anthrazit);
	font-size: 1.15rem;
	font-weight: 600;
}
.hager-produkt__preis del {
	color: var(--wp--preset--color--text);
	font-weight: 400;
	font-size: 0.9em;
}
.hager-produkt__preis ins {
	color: var(--wp--preset--color--rot-dunkel);
	text-decoration: none;
}
.hager-produkte .wp-block-woocommerce-gzd-product-tax-info {
	color: var(--wp--preset--color--text);
}
/* Germanized hängt die Steuerangabe in Block-Listen zusätzlich über den alten Hook an – nur einmal zeigen. */
.hager-produkte .wc-block-product:has(.wp-block-woocommerce-gzd-product-tax-info) .wc-gzd-additional-info-loop.tax-info {
	display: none;
}
.hager-produkt__knopf {
	margin-top: auto !important;
	padding-top: 0.5rem;
	text-align: left !important;
}
.hager-produkt__knopf .wp-block-button__link {
	width: 100%;
	font-size: 1rem;
}
@media (max-width: 599.98px) {
	.hager-produkt__knopf .wp-block-button__link {
		padding-inline: 0.5rem;
		font-size: 0.95rem;
		white-space: nowrap;
	}
}
.hager-produkte .wc-block-components-product-image a:focus-visible {
	outline-offset: -2px;
}

/* Angebots-Badge: Hager Rot, gut lesbar. */
.wc-block-components-product-sale-badge {
	padding: 0.2em 0.6em !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: var(--wp--preset--color--rot) !important;
	color: var(--wp--preset--color--weiss) !important;
	font-size: 0.875rem !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Paginierung */
.hager-produkte .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
	gap: 0.25rem;
}
.hager-produkte .wp-block-query-pagination a,
.hager-produkte .wp-block-query-pagination .current {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
	border-radius: 4px;
	text-decoration: none;
}
.hager-produkte .wp-block-query-pagination .current {
	background: var(--wp--preset--color--anthrazit);
	color: var(--wp--preset--color--weiss);
}

/* Produktseite */
.hager-produktseite .woocommerce-product-gallery {
	max-width: 100%;
}
.hager-produktseite__preisbox .wc-block-components-product-price {
	color: var(--wp--preset--color--anthrazit);
	font-weight: 600;
}
.hager-produktseite__preisbox > * {
	margin-block: 0;
}
.hager-produktseite__preisbox .wp-block-woocommerce-gzd-product-is-empty {
	display: none;
}
.hager-produktseite .quantity input {
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
}
.hager-produktseite .single_add_to_cart_button {
	min-height: 48px;
}

/* Warenkorb, Kasse, Mein Konto */
.wc-block-cart,
.wc-block-checkout {
	--wc-form-border-radius: 4px;
}
/* Mitlaufende Bestellübersicht nicht unter den Sticky-Kopf schieben (sonst ist der Bestell-Knopf verdeckt). */
.wc-block-checkout__sidebar.is-sticky,
.wc-block-cart__sidebar.is-sticky {
	top: calc(80px + var(--wp-admin--admin-bar--height, 0px)) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--rand);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
}
/* Mein Konto: breiter als normale Textseiten (Menü + Bestelltabelle). */
.woocommerce-account main .wp-block-post-title,
.woocommerce-account main > .wp-block-post-content,
.woocommerce-account main .wp-block-post-content > .woocommerce {
	max-width: var(--wp--style--global--wide-size);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65rem 0.25rem;
	color: var(--wp--preset--color--anthrazit);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--wp--preset--color--rot);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--hager-widerruf a {
	font-weight: 600;
}

/* Germanized-Widerrufsbutton (EU-Pflicht): sitzt nach dem Fuß – farblich anschließen statt weißer Streifen. */
body > .eu-owb-order-withdraw-from-contract-button {
	margin: 0;
	padding: 0 var(--wp--style--root--padding-right, 1rem) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--anthrazit);
}

/* Bestellbestätigung: Bankdaten stehen oben im Kasten „Zahlungsinfo“ – den WooCommerce-Block unten nicht doppelt zeigen. */
.hager-bestaetigung:has(.hager-zahlung) .woocommerce-bacs-bank-details {
	display: none;
}

/* Bestellbestätigung → „Konto erstellen“: WooCommerce lädt hier die Feld-Stile nicht mit.
   Beschriftung „Passwort:“ links, Eingabefeld rechts, Stärke-Anzeige darunter. */
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-block: 0.75rem;
}
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input > label {
	order: -1;
	flex: none;
	font-weight: 600;
}
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input > label::after {
	content: ":";
}
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input > input {
	flex: 1 1 8rem;
	min-width: 0;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--text);
	border-radius: 4px;
	background: var(--wp--preset--color--weiss);
	font: inherit;
}
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength {
	flex-basis: 100%;
}
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength.hidden {
	display: none;
}
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength__meter {
	width: 100%;
}

/* ---------------------------------------------------------------
 * Abschnitte (Patterns) – Startseite und Seiten aus Abschnitten
 * ------------------------------------------------------------- */
/* Abschnitte stoßen direkt aneinander, die Hintergründe regeln den Abstand. */
:where(.hager-startseite, .hager-breit) > .wp-block-post-content > * {
	margin-block: 0;
}
:where(.hager-startseite, .hager-breit) > .wp-block-post-content > :not(.alignfull) {
	/* Freie Blöcke zwischen den Abschnitten (z. B. ein Absatz) bekommen Luft. */
	margin-block: var(--wp--preset--spacing--50);
}
.hager-abschnitt > :first-child {
	margin-block-start: 0;
}

/* Hero */
.hager-hero.wp-block-cover {
	min-height: min(560px, 78vh) !important;
}
.hager-hero h1 {
	max-width: 18ch;
	text-wrap: balance;
	hyphens: manual;
}
.hager-hero p {
	max-width: 46ch;
}
.hager-knopf-hell .wp-block-button__link {
	border-color: var(--wp--preset--color--weiss) !important;
	color: var(--wp--preset--color--weiss) !important;
}
.hager-knopf-hell .wp-block-button__link:hover {
	background: var(--wp--preset--color--weiss) !important;
	color: var(--wp--preset--color--anthrazit) !important;
}
.hager-knopf-hell .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--weiss);
}

/* Schnellzugriff-Kacheln: ganze Kachel klickbar, Pfeil als Hinweis. */
.hager-kacheln {
	gap: var(--wp--preset--spacing--20);
}
.hager-kachel {
	position: relative;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--rand);
	border-top: 4px solid var(--wp--preset--color--rot);
	border-radius: 4px;
	background: var(--wp--preset--color--weiss);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hager-kachel:hover {
	border-color: var(--wp--preset--color--rot);
	box-shadow: var(--wp--preset--shadow--karte);
}
.hager-kachel > * {
	margin-block: 0;
}
.hager-kachel > * + * {
	margin-block-start: 0.4rem;
}
.hager-kachel h2 a {
	color: var(--wp--preset--color--anthrazit);
	text-decoration: none;
}
.hager-kachel h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.hager-kachel h2::after {
	content: " →";
	color: var(--wp--preset--color--rot);
}
.hager-kachel:hover h2 a {
	color: var(--wp--preset--color--rot);
}
.hager-kachel:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--anthrazit);
	outline-offset: 2px;
}
.hager-kachel a:focus-visible {
	outline: none;
}

/* Werkstatt-Leistungen und Vertrauensleiste */
.hager-leistungen,
.hager-vertrauen {
	gap: var(--wp--preset--spacing--30);
}
.hager-leistung {
	padding-left: 0.85rem;
	border-left: 3px solid var(--wp--preset--color--rot);
}
.hager-leistung > *,
.hager-vertrauen__punkt > * {
	margin-block: 0;
}
.hager-leistung > * + *,
.hager-vertrauen__punkt > * + * {
	margin-block-start: 0.3rem;
}
.hager-vertrauen__punkt::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin-bottom: 0.75rem;
	border-radius: 2px;
	background: var(--wp--preset--color--rot);
}

/* Dachzeile über Überschriften (z. B. „Aktion“) */
.hager-dachzeile {
	margin-bottom: 0;
	color: var(--wp--preset--color--rot-dunkel);
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Markenleiste: Logos mittig */
.hager-markenleiste .hager-marken {
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

/* CTA-Band: Telefonnummer groß und weiß */
.hager-cta .hager-cta__telefon,
.hager-cta .hager-cta__telefon a {
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
}
.hager-cta :where(a):focus-visible {
	outline-color: var(--wp--preset--color--weiss);
}
.hager-cta h2 {
	margin: 0;
}

/* Team */
.hager-team .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--20);
}
.hager-team h3 {
	margin-bottom: 0;
}
.hager-team h3 + p {
	margin-top: 0.2rem;
}

/* Aktion: Hochformat-Bilder nicht riesig werden lassen. */
.hager-aktion .wp-block-image img {
	max-height: 520px;
	width: auto;
	margin-inline: auto;
}

/* Raster-Abschnitte: vorhandene Punkte auf die ganze Breite verteilen (keine leere Spalte rechts). */
.hager-vertrauen.is-layout-grid,
.hager-kacheln.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* Zwei graue Abschnitte direkt hintereinander: feine Trennlinie (Reihenfolge ist im Editor frei änderbar). */
.hager-abschnitt.has-grau-hell-background-color + .hager-abschnitt.has-grau-hell-background-color {
	border-top: 1px solid var(--wp--preset--color--rand);
}

/* Zugeklappter Mini-Warenkorb: Inhalt auch für Tastatur/Screenreader unsichtbar (sonst springt der Fokus hinein).
   Verzögert, damit die Ausfahr-Animation beim Schließen sichtbar bleibt. */
.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-mini-cart__drawer {
	visibility: hidden;
	transition: visibility 0s linear 0.3s;
}