/*
 * Ahoi: Regeln, die theme.json nicht abbilden kann.
 * Eigene Datei statt styles.css in theme.json: siehe doc/stile.md.
 */

/* Hell und dunkel: Gerät, sonst die Wahl im Umschalter (doc/hell-dunkel.md) */
:root {
	color-scheme: light dark;
}

:root[data-ahoi-color-scheme="light"] {
	color-scheme: light;
}

:root[data-ahoi-color-scheme="dark"] {
	color-scheme: dark;
}

/* Linienfarbe für Feldränder, 3:1 auf beiden Gründen */
:where(:root) {
	--ahoi-color-line: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, var(--wp--preset--color--base));
}

/* Platzhalter in Feldern: Das Grau des Browsers erreicht auf dunklem Grund nur 3,8:1. */
::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Browser ohne light-dark(): kein Umschalter. Die hellen Palettenwerte setzt functions.php aus der
   aktiven Palette. Doppelte Klasse: .wp-block-buttons > .wp-block-button des Kerns wiegt 0-2-0. */
@supports not (color: light-dark(#fff, #000)) {
	:root .ahoi-scheme-toggle.ahoi-scheme-toggle {
		display: none;
	}
}

:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Knöpfe: Ring innen in der Textfarbe, also immer auf der eigenen Knopffarbe (A24); außen verschwand
   er auf gleichfarbigem Grund. Die Symbolknöpfe im Kopf behalten den Ring außen. */
:where(.wp-site-blocks) :where(.wp-element-button, .wp-block-button__link, input[type="submit"], input[type="button"], input[type="reset"], button:not([class])):where(:not(.has-icon, .ahoi-scheme-toggle *)):focus-visible {
	outline-offset: -4px;
}

/* Ring an Player und Galerie des Kerns (A36, doc/offene-punkte.md). */
.wp-site-blocks .mejs-container:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wp-site-blocks .mejs-controls :focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

:where(.wp-site-blocks .wp-block-gallery figcaption):focus-visible {
	outline-color: var(--wp--preset--color--contrast);
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}


/* Lange Adressen und Wörter im Fließtext (Kommentare, Beiträge) umbrechen statt über den Rand
   laufen; greift nur, wenn ein Wort nicht in die Zeile passt (A27). */
:where(body) {
	overflow-wrap: break-word;
}

/* Lange Wörter in Flex-Zeilen (A35). */
:where(.wp-block-breadcrumbs li, .wp-block-post-navigation-link) {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Inhalte aus dem klassischen Editor (A34, doc/offene-punkte.md). */
.wp-site-blocks .wp-caption {
	max-width: min(100%, var(--wp--style--global--content-size));
}

:where(iframe, embed, object, video, select) {
	max-width: 100%;
}

:where(.wp-caption img) {
	height: auto;
	max-width: 100%;
}

:where(pre) {
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

/* Vorlage „Checkout“: Der Titel folgt dem Inhalt, breit über der Kasse, sonst in der Lesespalte (A33).
   Skripte vor dem ersten Block zählen nicht; ohne :has() bleibt der Titel schmal (doc/stile.md). */
.ahoi-checkout:has(> .wp-block-post-content > :nth-child(1 of :not(script, style, link)):is(.alignwide, .alignfull)) > .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

/* Lange Wörter in Überschriften (Produktnamen, Komposita) trennen statt über den Rand laufen.
   Silbentrennung erst ab 12 Zeichen; ohne Wörterbuch bricht overflow-wrap im Wort um. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-navigation-item__label) {
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
}

/* Senkrechte Flex-Gruppen nicht umbrechen: Die Höhe ist offen, eine zweite Spalte entsteht nie.
   Mit dem wrap des Kerns wird die Gruppe aber so breit wie ihr breitester Inhalt und läuft über
   (Spalten im Fuß, Overlay); siehe doc/stile.md#senkrechte-gruppen. */
.is-layout-flex.is-vertical {
	flex-wrap: nowrap;
}

/* Kopf: Umschalter als Symbol, Mond im hellen, Sonne im dunklen Modus. Der Text bleibt der Name. */
:root {
	--ahoi-icon-scheme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a7 7 0 0 0 11 11z'/%3E%3C/svg%3E");
}

:root[data-ahoi-color-scheme="dark"] {
	--ahoi-icon-scheme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v2M12 19v2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M3 12h2M19 12h2M5.6 18.4L7 17M17 7l1.4-1.4M12 8a4 4 0 1 0 0 8a4 4 0 1 0 0-8z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-ahoi-color-scheme="light"]) {
		--ahoi-icon-scheme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v2M12 19v2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M3 12h2M19 12h2M5.6 18.4L7 17M17 7l1.4-1.4M12 8a4 4 0 1 0 0 8a4 4 0 1 0 0-8z'/%3E%3C/svg%3E");
	}
}

/* Blockstile „Nur hell“ und „Nur dunkel“ an Bild und Logo: dieselben Bedingungen wie das Farbschema.
   Ohne light-dark() bleibt die Seite hell. Nur auf der Website; im Editor bleiben beide sichtbar. */
@supports not (color: light-dark(#fff, #000)) {
	:root .wp-site-blocks .is-style-dark-only {
		display: none;
	}
}

@supports (color: light-dark(#fff, #000)) {
	:root[data-ahoi-color-scheme="dark"] .wp-site-blocks .is-style-light-only {
		display: none;
	}

	@media (prefers-color-scheme: light) {
		:root:not([data-ahoi-color-scheme="dark"]) .wp-site-blocks .is-style-dark-only {
			display: none;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-ahoi-color-scheme="light"]) .wp-site-blocks .is-style-light-only,
		:root[data-ahoi-color-scheme="light"] .wp-site-blocks .is-style-dark-only {
			display: none;
		}
	}
}

/* Blockstil „Einer zufällig“ (functions.php): Im Editor stehen alle Varianten untereinander, eine
   gestrichelte Linie trennt sie. Auf der Website bleibt nur eine, dann greift die Regel nicht. */
.is-style-one-at-random > * + * {
	border-top: 2px dashed var(--ahoi-color-line);
}

.ahoi-scheme-toggle .wp-block-button__link,
.ahoi-header-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
}

.ahoi-scheme-toggle .wp-block-button__link {
	font-size: 0;
}

.ahoi-scheme-toggle .wp-block-button__link::before {
	content: "";
	width: 1.375rem;
	height: 1.375rem;
	background: currentColor;
	-webkit-mask: var(--ahoi-icon-scheme) center / contain no-repeat;
	mask: var(--ahoi-icon-scheme) center / contain no-repeat;
}

.ahoi-scheme-toggle .wp-block-button__link:hover,
.ahoi-header-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--surface);
	color: inherit;
}

.ahoi-header-search .wp-block-search__input {
	border-radius: 999px;
}

/* Kopf: Konto und Warenkorb von wpShopGermany mit Symbol (Festlegung 02.10.2026, Entwurf „A · Kopf“).
   Ohne wpsg gibt es die Klassen nicht. */
:root {
	--ahoi-icon-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
	--ahoi-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20.5' r='1'/%3E%3Ccircle cx='17' cy='20.5' r='1'/%3E%3C/svg%3E");
}

.wpsg-customer-account__link,
.wpsg-mini-cart__link,
.wpsg-mini-cart__content {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.wpsg-customer-account__link,
.wpsg-mini-cart__link {
	min-height: 2.75rem;
}

.wpsg-customer-account__link::before,
.wpsg-mini-cart__link::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: var(--ahoi-icon-account) center / contain no-repeat;
	mask: var(--ahoi-icon-account) center / contain no-repeat;
}

.wpsg-mini-cart__link::before {
	width: 1.375rem;
	height: 1.375rem;
	-webkit-mask-image: var(--ahoi-icon-cart);
	mask-image: var(--ahoi-icon-cart);
}

.wpsg-mini-cart__sum::before {
	content: "·" / "";
	margin-inline-end: 0.375rem;
}

/* Die Anzahl als „(1)“, sobald wpsg die Zahl als eigenes Element liefert (wpShopGermany Punkt 8.16,
   ad60a5de). Sichtbar fällt „Artikel“ weg; Bildschirmleser lesen weiter „1 Artikel“, ohne Klammern. */
@property --ahoi-mini-cart-font {
	syntax: "<length>";
	inherits: true;
	initial-value: 16px;
}

/* Registriert, damit 1em am Link in px vererbt wird und nicht erst an der Zahl (dort wäre es 0). */
.wpsg-mini-cart__link {
	--ahoi-mini-cart-font: 1em;
}

.wpsg-mini-cart__count:has(.wpsg-mini-cart__number) {
	font-size: 0;
}

.wpsg-mini-cart__number {
	font-size: var(--ahoi-mini-cart-font);
}

.wpsg-mini-cart__number::before {
	content: "(" / "";
}

.wpsg-mini-cart__number::after {
	content: ")" / "";
}

/* Menü am Handy (unter 600 px, wie der Kern): Name, Menüknopf, Warenkorb, Lupe, Umschalter in einer
   Zeile, in der Reihenfolge des Quelltexts (kein order, A21); Konto steht im Overlay.
   Tippziele 44 × 44 px; fehlt Platz, kürzt sich der Name. */
@media (max-width: 599px) {
	.ahoi-header .ahoi-header-bar,
	.ahoi-header .ahoi-header-end {
		flex-wrap: nowrap;
	}

	.ahoi-header-bar > :first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ahoi-header-bar > .ahoi-header-end {
		flex: none;
	}

	.ahoi-header-bar .wp-block-site-title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Die Ziele stoßen aneinander; zwischen den 22-px-Symbolen in 44-px-Flächen bleiben 22 px. */
	.ahoi-header .ahoi-header-end,
	.ahoi-header .ahoi-header-end > .ahoi-header-tools {
		gap: 0;
	}

	.ahoi-header-end > .wp-block-wpsg-customer-account {
		display: none;
	}

	.ahoi-header-end > .wp-block-wpsg-mini-cart .wpsg-mini-cart__link {
		justify-content: center;
		min-width: 2.75rem;
		padding-inline: 0.6875rem;
		gap: 0.125rem;
		box-sizing: border-box;
	}

	/* Bezeichnung und Summe nur für Bildschirmleser. */
	.ahoi-header-end > .wp-block-wpsg-mini-cart .wpsg-mini-cart__label,
	.ahoi-header-end > .wp-block-wpsg-mini-cart .wpsg-mini-cart__sum {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ahoi-header-nav > .wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* Overlay (Vorlagenteil „Navigation overlay“): über die ganze Fläche, große Menüpunkte. */
.ahoi-overlay {
	min-height: 100dvh;
}

.ahoi-overlay-bar {
	padding: var(--wp--preset--spacing--30) var(--wp--style--root--padding-right, 1rem) var(--wp--preset--spacing--30) var(--wp--style--root--padding-left, 1rem);
}

.ahoi-overlay-bar .wp-block-site-title {
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ahoi-overlay .wp-block-navigation-overlay-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
}

.ahoi-overlay-nav,
.ahoi-overlay-shop {
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right, 1rem) 0 var(--wp--style--root--padding-left, 1rem);
}

.ahoi-overlay-nav .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}

.ahoi-overlay-nav .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ahoi-overlay-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: var(--wp--preset--spacing--30);
	width: 100%;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

/* Untermenü im Overlay: immer offen (submenuVisibility „always“ im Vorlagenteil), im Fluss und eingerückt. */
.ahoi-overlay-nav .wp-block-navigation-item.has-child.open-always,
.ahoi-overlay-nav .wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container {
	align-items: stretch;
	gap: 0;
}

/* Rechts kein Innenabstand (der Kern setzt bei open-always die Blocklücke): Linien enden bündig. */
.ahoi-overlay-nav .wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container {
	padding-inline: var(--wp--preset--spacing--40) 0;
}

.ahoi-overlay-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ahoi-overlay-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Untermenü im Kopf: Farben kommen aus overlayBackgroundColor/overlayTextColor der Navigation,
   der Rahmen in der Linienfarbe der Felder (3:1) statt Schwarz mit 15 % (Kern), damit er sich
   auch dunkel vom gleichfarbigen Grund abhebt. */
.wp-block-navigation.ahoi-header-nav:not(.has-background) .wp-block-navigation__submenu-container {
	border-color: var(--ahoi-color-line);
}

/* Untermenüs im Kopf so breit wie der längste Eintrag, ohne Silbentrennung; höchstens so breit wie der
   Platz auf der Seite, zu der sie öffnen (assets/js/navigation.js). Nur die Liste im Kopf, nicht das Overlay. */
@media (hover: hover) {
	.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
		width: max-content;
		max-width: var(--ahoi-submenu-max, none);
	}
}

.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	width: max-content;
	max-width: var(--ahoi-submenu-max, none);
}

.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	hyphens: manual;
}

/* Am linken Rand öffnen sie nach rechts, Untermenüs darin ebenso (der Kern: im rechtsbündigen Menü links). */
.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child.ahoi-opens-right > .wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
}

@media (min-width: 782px) {
	.ahoi-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child.ahoi-opens-right .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: 100%;
		right: auto;
	}
}

/* „Mehr“ im Kopf (assets/js/navigation.js): Einträge, die nicht in die Zeile passen, sind ausgeblendet
   und stehen als Kopie im Untermenü; lange Listen rollen. */
.wp-block-navigation.ahoi-header-nav li.ahoi-is-overflow {
	display: none;
}

.wp-block-navigation.ahoi-header-nav .ahoi-more > .wp-block-navigation__submenu-container {
	min-width: 15rem;
}

.wp-block-navigation.ahoi-header-nav .ahoi-more > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	max-height: 70vh;
	overflow-y: auto;
}

.ahoi-header-nav .ahoi-more-sub {
	margin: 0;
	padding: 0 0 0 1em;
	list-style: none;
}

.ahoi-overlay-shop .wpsg-customer-account__link,
.ahoi-overlay-shop .wpsg-mini-cart__link {
	gap: 0.625rem;
}

/* Aktiver Menüpunkt */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* Kopf mit Position „sticky“ aus dem Editor: der Template-Part muss mitwandern. Bis 600 px scrollt die
   Admin-Leiste mit, der Kopf steht dann oben (wie --wp-admin--admin-bar--position-offset im Kern). Sprungziele
   halten Abstand in Höhe des Kopfes; die Höhe misst assets/js/sticky-header.js (A52). */
html:has(header.wp-block-template-part > .is-position-sticky) {
	--ahoi-sticky-top: var(--wp-admin--admin-bar--height, 0px);
	scroll-padding-top: calc(var(--ahoi-sticky-top) + var(--ahoi-header-height, 5rem));
}

@media screen and (max-width: 600px) {
	html:has(header.wp-block-template-part > .is-position-sticky) {
		--ahoi-sticky-top: 0px;
	}
}

header.wp-block-template-part:has(> .is-position-sticky) {
	position: sticky;
	top: var(--ahoi-sticky-top, 0px);
	z-index: 20;
}

/* Beitragsliste: auf der ersten Seite der neueste Beitrag groß (Bild links, Text rechts). */
@media (min-width: 782px) {
	body:not(.paged) .ahoi-post-grid > .wp-block-post:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: var(--wp--preset--spacing--60);
		align-items: center;
		padding-bottom: var(--wp--preset--spacing--60);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	body:not(.paged) .ahoi-post-grid > .wp-block-post:first-child .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9;
	}

	body:not(.paged) .ahoi-post-grid > .wp-block-post:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

.ahoi-post-grid .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--30);
}

.ahoi-post-grid .wp-block-post-featured-image img,
.ahoi-post-cards .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ahoi-post-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

/* Suchergebnisse (A56): jede Fundstelle als Karte wie der Blockstil „Karte“, alle gleich groß. Das Bild steht ganz
   im Rahmen 3:2 statt beschnitten (Muster: „Einpassen“), Produktbilder sind oft quadratisch. */
.ahoi-search-results > .wp-block-post {
	padding: var(--wp--preset--spacing--50);
	border-radius: 6px;
	background-color: var(--wp--preset--color--surface);
}

.ahoi-search-results .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--30);
}

.ahoi-search-results .wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--base);
}

.ahoi-search-results .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

/* Seitenzahlen als Kästchen mit 44 px, an jedem Block Seitenzahlen (nicht nur in den Mustern von Ahoi). */
:is(.wp-block-query-pagination, .wp-block-comments-pagination) .page-numbers,
:is(.wp-block-query-pagination, .wp-block-comments-pagination) > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.25rem;
	text-decoration: none;
}

:is(.wp-block-query-pagination, .wp-block-comments-pagination) .page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:is(.wp-block-query-pagination, .wp-block-comments-pagination) .page-numbers.dots {
	border: 0;
}

/* Kopf, Hauptbereich und Fuß ohne den Blockabstand der Wurzel; den Abstand tragen <main> und die
   Abschnitte. Sonst bliebe zwischen einem farbigen Abschnitt und dem Fuß ein Streifen. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Hauptbereich von „Seite“ und „Seite ohne Titel“. Seiten aus Abschnitten mit voller Breite
   schließen ohne Abstand an Kopf und Fuß an. Ein Innenabstand aus dem Editor (Inline-Stil) gewinnt. */
:where(.ahoi-main) {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

:where(.ahoi-main:has(> .wp-block-post-content > .alignfull:first-child)) {
	padding-top: 0;
}

:where(.ahoi-main:has(> .wp-block-post-content > .alignfull:last-child)) {
	padding-bottom: 0;
}

/* Akkordeon: zugeklappte Antworten schon vor dem Skript verbergen, wie hidden="until-found".
   Gegen das Verhalten des Kerns, bei jedem Update prüfen: doc/stile.md#akkordeon (A22). */
@media (scripting: enabled) {
	body:not(.editor-styles-wrapper) .wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel:not([hidden]) {
		content-visibility: hidden;
		margin-block-start: 0;
	}
}

/* Feste helle Farben im dunklen Modus (A37, A39): doc/hell-dunkel.md#eigene-farben-im-inhalt-a37. */
.wp-site-blocks .wp-block-calendar :where(table:not(.has-text-color)) {
	color: inherit;
}

.wp-site-blocks .wp-block-calendar :where(table:not(.has-text-color)) :is(td, th) {
	border-color: var(--wp--preset--color--line);
}

.wp-site-blocks .wp-block-calendar :where(table:not(.has-background)) th {
	background: var(--wp--preset--color--surface);
}

.wp-site-blocks .wp-block-table.is-style-stripes:not([class*="-background-color"]) {
	border-bottom-color: var(--wp--preset--color--line);
}

.wp-site-blocks .wp-block-table.is-style-stripes:not([class*="-background-color"]) tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

:where(.ahoi-heller-grund) {
	color: var(--wp--preset--color--contrast);
	color-scheme: light;
}

/* Trennpunkt ohne Datum (A38). */
.ahoi-post-meta > p:first-child {
	display: none;
}

/* Contact Form 7 (im Handbuch empfohlen): Fehlertext statt #dc3232 hell und dunkel lesbar (A42). */
.wp-site-blocks .wpcf7-not-valid-tip {
	color: light-dark(#c01f1f, #ff7b72);
}

/* Felder, deren Breite aus size oder cols kommt (Contact Form 7: 40 Zeichen), passen in die Spalte (A42). */
:where(input[size], textarea[cols]) {
	box-sizing: border-box;
	max-width: 100%;
}

/* Native Knöpfe von Plugins (Contact Form 7 u. a.) wie die Knöpfe des Themes, mit den Werten aus theme.json
   (styles.elements.button) und den Abschnitten Koralle und Dunkel (A49). Ohne Gewicht: Stile der Plugins und
   die Klasse wp-element-button gehen vor. Die Dateiauswahl im Stil Kontur. */
:where(.wp-site-blocks) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])) {
	appearance: none;
	background-color: var(--wp--preset--color--primary);
	border-radius: 0.25rem;
	border-width: 0;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-style: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	line-height: 1.3;
	padding: 0.875rem 1.5rem;
	text-transform: inherit;
}

:where(.wp-site-blocks) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])):where(:hover, :focus) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(.wp-site-blocks input[type="file"]) {
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
}

:where(.wp-site-blocks input[type="file"])::file-selector-button {
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	margin-inline-end: 0.75em;
	padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
}

:where(.wp-site-blocks input[type="file"]:hover)::file-selector-button {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(.wp-site-blocks .is-style-section-accent) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:where(.wp-site-blocks .is-style-section-accent) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])):where(:hover, :focus) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(.wp-site-blocks .is-style-section-dark) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])) {
	background-color: var(--wp--preset--color--on-band);
	color: var(--wp--preset--color--band);
}

:where(.wp-site-blocks .is-style-section-dark) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])):where(:hover, :focus) {
	background-color: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--band);
}

:where(.wp-site-blocks .is-style-section-dark input[type="file"]:hover)::file-selector-button {
	background-color: var(--wp--preset--color--accent-bright);
	border-color: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--band);
}