/* ==========================================================================
   Max Brugger – Theme-Styles
   Masse aus dem Designkonzept 1.1 (Figma, 1440 px breit, Inhalt 928 px).
   Farben, Schriften und Schriftgrössen kommen aus theme.json.
   ========================================================================== */

:root {
	--mb-rand: clamp(1.25rem, 4vw, 2rem);
	--mb-inhalt: var(--wp--style--global--content-size, 928px);
	--mb-spaltenabstand: clamp(2rem, 1rem + 5vw, 6.5rem);
	--mb-radius: 6px;
	/* Bewegung: federnd (leicht über das Ziel hinaus) und «Federstrich» (schnell, dann sanft) */
	--mb-feder: cubic-bezier(0.34, 1.56, 0.64, 1);
	--mb-strich: cubic-bezier(0.2, 0.7, 0.2, 1);
	--mb-schatten-hoch: 0 8px 18px -8px rgba(36, 71, 76, 0.55);
}

/* Open Sans wird im Design schmal (Condensed) gesetzt, Bricolage normal breit. */
body {
	font-stretch: 75%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-element-button,
.wp-block-button__link {
	font-stretch: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.mb-kopf > * {
	margin-block: 0;
}

.mb-kopf__oben {
	background: var(--wp--preset--color--weiss);
}

.mb-kopf__zeile {
	min-height: clamp(4.5rem, 3rem + 3.5vw, 6.625rem);
	gap: 1.5rem;
}

.mb-logo {
	display: block;
	flex-shrink: 0;
}

.mb-logo img {
	display: block;
	width: clamp(150px, 7.5rem + 9vw, 258px);
	height: auto;
}

.mb-kopf__werkzeuge {
	gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	align-items: center;
	font-size: var(--wp--preset--font-size--klein);
}

.mb-kopf__werkzeuge > * {
	margin: 0;
}

.mb-kopf__link a,
.mb-warenkorb {
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
}

/* Unterstreichen wie ein Federstrich: die Linie zieht sich von links unter das Wort. */
.mb-kopf__link a,
.mb-warenkorb__text,
.mb-fuss a,
.mb-mehr-link a,
.mb-cartoon__zurueck span,
.mb-buch__titel a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
	transition: background-size 0.35s var(--mb-strich);
}

.mb-kopf__link a:hover,
.mb-warenkorb:hover .mb-warenkorb__text,
.mb-fuss a:hover,
.mb-mehr-link a:hover,
.mb-cartoon__zurueck:hover span,
.mb-buch__titel a:hover {
	background-size: 100% 1.5px;
}

.mb-logo:hover img {
	animation: mb-wackeln 0.5s ease;
}

/* Suche (Core-Block) im Pillen-Look */
.mb-suche {
	margin: 0;
}

.mb-suche .wp-block-search__inside-wrapper {
	width: 220px;
	height: 34px;
	padding: 0 0.25rem 0 0.9rem;
	border: 1px solid var(--wp--preset--color--grau);
	border-radius: 999px;
	background: var(--wp--preset--color--weiss);
	align-items: center;
}

.mb-suche .wp-block-search__input {
	border: 0;
	padding: 0;
	min-width: 0;
	height: 100%;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schwarz);
}

.mb-suche .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--grau);
	opacity: 1;
}

.mb-suche .wp-block-search__input:focus {
	outline: none;
}

.mb-suche .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 1px var(--wp--preset--color--petrol);
}

.mb-suche .wp-block-search__button {
	margin: 0;
	padding: 0.3rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--grau);
}

.mb-suche .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	min-width: 20px;
	fill: currentColor;
}

/* Warenkorb-Link */
.mb-warenkorb {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	position: relative;
}

.mb-warenkorb__symbol {
	flex-shrink: 0;
}

.mb-warenkorb__anzahl {
	display: inline-grid;
	place-items: center;
	min-width: 1.45em;
	height: 1.45em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1;
}

/* Petrol-Leiste mit Hauptmenü */
.mb-navi {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-navi__innen {
	max-width: var(--mb-inhalt);
	margin: 0 auto;
	padding: 0 var(--mb-rand);
	box-sizing: content-box;
}

.mb-menue {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 58px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-navi .mb-menue a {
	display: inline-block;
	padding: 0.35em 0 0.25em;
	border-bottom: 2px solid transparent;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	background-origin: border-box;
	color: inherit;
	font-size: var(--wp--preset--font-size--mittel);
	text-decoration: none;
	transition: background-size 0.35s var(--mb-strich);
}

.mb-navi .mb-menue a:hover {
	background-size: 100% 2px;
}

.mb-navi .mb-menue .current-menu-item > a,
.mb-navi .mb-menue .current-menu-ancestor > a,
.mb-navi .mb-menue .current_page_parent > a {
	border-bottom-color: currentColor;
}

.mb-navi__suche {
	display: none;
}

.mb-menue-leer {
	margin: 0;
	padding: 1rem 0;
	font-size: var(--wp--preset--font-size--klein);
}

/* Menü-Knopf (nur Handy/Tablet) */
.mb-menueknopf {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--petrol);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.mb-menueknopf__striche,
.mb-menueknopf__striche::before,
.mb-menueknopf__striche::after {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mb-menueknopf__striche {
	position: relative;
}

.mb-menueknopf__striche::before,
.mb-menueknopf__striche::after {
	content: "";
	position: absolute;
	left: 0;
}

.mb-menueknopf__striche::before { top: -7px; }
.mb-menueknopf__striche::after { top: 7px; }

.mb-menueknopf[aria-expanded="true"] .mb-menueknopf__striche {
	background: transparent;
}

.mb-menueknopf[aria-expanded="true"] .mb-menueknopf__striche::before {
	transform: translateY(7px) rotate(45deg);
}

.mb-menueknopf[aria-expanded="true"] .mb-menueknopf__striche::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 899px) {
	.mb-kopf__werkzeuge .mb-suche {
		display: none;
	}
}

@media (max-width: 781px) {
	.mb-warenkorb__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.mb-menueknopf {
		display: inline-flex;
	}

	.mb-navi {
		display: none;
	}

	.mb-navi.ist-offen {
		display: block;
		animation: mb-aufklappen 0.22s ease-out;
	}

	.mb-menue {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 0 0;
	}

	.mb-navi .mb-menue a {
		display: block;
		padding: 0.8rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	.mb-navi .mb-menue .current-menu-item > a {
		font-weight: 700;
	}

	.mb-navi__suche {
		display: flex;
		gap: 0.5rem;
		padding: 1rem 0 1.25rem;
	}

	.mb-navi__suche input[type="search"] {
		flex: 1;
		min-width: 0;
		padding: 0.6rem 0.9rem;
		border: 0;
		border-radius: 999px;
		font: inherit;
		font-size: var(--wp--preset--font-size--mittel);
	}

	.mb-navi__suche button {
		padding: 0.6rem 1rem;
		border: 1px solid var(--wp--preset--color--weiss);
		border-radius: 999px;
		background: none;
		color: inherit;
		font: inherit;
		font-size: var(--wp--preset--font-size--mittel);
		cursor: pointer;
	}
}

/* --------------------------------------------------------------------------
   Seiteninhalt: Abschnitte stossen ohne Abstand aneinander
   -------------------------------------------------------------------------- */
.mb-haupt {
	margin: 0;
}

.mb-seiteninhalt > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.mb-abschnitt {
	padding-block: clamp(2.5rem, 1.6rem + 2.6vw, 4.125rem);
}

.mb-abschnitt h2 {
	margin-block: 0 0.7em;
}

.mb-abschnitt p {
	margin-block: 0 1em;
}

.mb-abschnitt--banner {
	padding-block: clamp(0.5rem, 1vw, 1rem);
}

/* --------------------------------------------------------------------------
   Kopfbild (Cover-Block)
   -------------------------------------------------------------------------- */
/* Hintergrund = Hintergrund des Fotos, damit auf dem Handy keine Kante entsteht. */
.mb-hero.wp-block-cover {
	background-color: #f4f4f4;
	padding-block: clamp(2.5rem, 4vw, 4rem);
}

/* Inhaltsposition «links Mitte» würde den Text an den Fensterrand schieben –
   der Text soll aber in der 928er-Inhaltsspalte stehen. */
.wp-block-cover.mb-hero.has-custom-content-position .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--mb-inhalt);
	margin-inline: auto !important;
}

.mb-hero .mb-hero__text {
	color: var(--wp--preset--color--schwarz);
}

.mb-hero .mb-hero__text > * {
	max-width: 29rem;
}

.mb-hero h1 {
	margin: 0 0 0.6em;
	color: var(--wp--preset--color--schwarz);
	font-weight: 500;
}

.mb-hero .mb-hero__unterzeile {
	margin: 0 0 1.4em;
	line-height: 1.15;
}

.mb-hero .mb-hero__name {
	margin: 0;
}

@media (max-width: 781px) {
	.mb-hero.wp-block-cover {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0 !important;
		padding: 2.25rem 0 0;
		overflow: hidden;
	}

	.mb-hero .wp-block-cover__inner-container {
		order: 1;
		padding-inline: var(--mb-rand);
	}

	.mb-hero .wp-block-cover__image-background {
		position: relative;
		order: 2;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-top: 1.25rem;
		object-position: 78% 100% !important;
	}

	.mb-hero .mb-hero__text > * {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-mb-hell .wp-block-button__link {
	background-color: var(--wp--preset--color--petrol-hell);
	color: var(--wp--preset--color--schwarz);
}

.wp-block-button.is-style-mb-hell .wp-block-button__link:hover,
.wp-block-button.is-style-mb-hell .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--petrol-linie);
	color: var(--wp--preset--color--schwarz);
}

.wp-block-button__link {
	text-align: center;
}

/* Knöpfe heben sich beim Zeigen leicht an und geben beim Klicken nach. */
.wp-block-button__link,
.wp-element-button,
.mb-kaufen--gross,
.mb-cookies__knopf,
.wc-block-components-button:not(.is-link) {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.25s var(--mb-feder);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.mb-kaufen--gross:hover,
.mb-cookies__knopf:hover,
.wc-block-components-button:not(.is-link):not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: var(--mb-schatten-hoch);
}

.wp-block-button__link:active,
.wp-element-button:active,
.mb-kaufen--gross:active,
.mb-cookies__knopf:active,
.wc-block-components-button:not(.is-link):active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: 0.06s;
}

.mb-knoepfe-gleich {
	gap: 2rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.mb-knoepfe-gleich > .wp-block-button {
	flex: 1 1 0;
}

.mb-knoepfe-gleich .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 599px) {
	.mb-knoepfe-gleich {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.mb-knoepfe-gleich > .wp-block-button {
		flex-basis: auto;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Neuste Cartoons (Karten)
   -------------------------------------------------------------------------- */
.mb-titelzeile {
	align-items: baseline;
	gap: 0.5rem 2rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.mb-titelzeile h2,
.mb-titelzeile p {
	margin: 0;
}

.mb-mehr-link {
	font-size: var(--wp--preset--font-size--mittel);
	font-style: italic;
}

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

.mb-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.mb-karte {
	display: flex;
	flex-direction: column;
	padding: 13px 13px 1.1rem;
	border: 1px solid var(--wp--preset--color--anthrazit);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.3s var(--mb-feder);
}

.mb-karte:hover,
.mb-karte:focus-visible,
.mb-karte:focus-within {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 8px 24px rgba(36, 71, 76, 0.14);
	transform: translateY(-3px);
}

/* Ganz klickbare Karten kippen leicht – wie eine Zeichnung, die man vom Tisch nimmt. */
a.mb-karte:hover,
a.mb-karte:focus-visible {
	transform: translateY(-3px) rotate(-0.6deg);
}

a.mb-karte:nth-child(even):hover,
a.mb-karte:nth-child(even):focus-visible {
	transform: translateY(-3px) rotate(0.6deg);
}

/* Quadratische Fläche; Strips und Hochformate werden ganz gezeigt, nicht beschnitten. */
.mb-karte__bild {
	display: block;
	overflow: hidden;
}

.mb-karte__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.4s var(--mb-strich);
}

.mb-karte:hover .mb-karte__bild img {
	transform: scale(1.03);
}

.mb-karte__titel {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--mittel);
	line-height: 1.25;
}

.mb-karte:hover .mb-karte__titel {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mb-karte__zeile {
	margin-top: 0.2rem;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
	font-style: italic;
	line-height: 1.3;
}

@media (max-width: 899px) {
	.mb-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 559px) {
	.mb-karten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Zwei Spalten (Text + Bild): Knopf schliesst unten mit dem Bild ab
   -------------------------------------------------------------------------- */
.wp-block-columns.mb-spalten {
	gap: var(--mb-spaltenabstand);
	margin-block: 0;
}

.mb-spalten__text {
	display: flex;
	flex-direction: column;
}

.mb-spalten__text > .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.5rem;
}

.mb-bild-quadrat {
	margin: 0;
}

.mb-bild-quadrat img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 781px) {
	.wp-block-columns.mb-spalten {
		gap: 2rem;
	}
}

/* --------------------------------------------------------------------------
   Banner (Dreier-Strip über die Inhaltsbreite, ungeschnitten)
   -------------------------------------------------------------------------- */
.mb-banner {
	margin: 0;
}

.mb-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */
.mb-fuss {
	margin-top: 0;
}

.mb-fuss__bild {
	margin: 0;
}

.mb-fuss__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 627;
	object-fit: cover;
	object-position: 50% 55%;
}

.mb-fuss__leiste {
	padding: clamp(2.5rem, 4vw, 3.875rem) var(--mb-rand) clamp(2rem, 3.5vw, 3.25rem);
}

.mb-fuss__zeile {
	gap: 0.75rem 2rem;
	padding-top: 1.75rem;
	border-top: 2px solid var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-fussmenue,
.mb-fussmenue .mb-menue {
	display: contents;
}

.mb-fussmenue .mb-menue li {
	list-style: none;
}

.mb-fuss a {
	color: inherit;
	text-decoration: none;
}

.mb-fuss__copy {
	margin: 0;
}

@media (max-width: 781px) {
	.mb-fuss__zeile {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Normale Inhaltsseiten
   -------------------------------------------------------------------------- */
.mb-seite {
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.mb-seite__titel {
	margin-block: 0 0.75em;
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-hinweis {
	color: var(--wp--preset--color--grau);
	font-style: italic;
}

.mb-hinweis-klein {
	margin-top: 1.5rem;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-lead {
	margin-block: 0 1em;
}

/* Inhaltsseiten: erster Abschnitt schliesst direkt an den Titel an */
.mb-abschnitt.mb-abschnitt--intro {
	padding-top: 0;
}

.mb-abschnitt--hell {
	background: var(--wp--preset--color--petrol-hell);
}

.mb-abschnitt > .wp-block-buttons {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.mb-bild-portraet {
	margin: 0;
}

.mb-bild-portraet img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 74% 50%;
}

/* Liste mit Haken */
.mb-liste-haken {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.mb-liste-haken li {
	position: relative;
	padding: 0.2em 0 0.2em 1.7em;
}

.mb-liste-haken li::before,
.mb-nutzungen__kachel li::before,
.mb-vorteile li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.6em;
	width: 0.72em;
	height: 0.38em;
	border-left: 2px solid var(--wp--preset--color--petrol);
	border-bottom: 2px solid var(--wp--preset--color--petrol);
	transform: rotate(-45deg);
}

/* Nummerierte Schritte */
.mb-schritte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mb-schritt;
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-schritte--vier {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mb-schritte li {
	counter-increment: mb-schritt;
}

.mb-schritte li::before {
	content: counter(mb-schritt);
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
	font-family: var(--wp--preset--font-family--bricolage);
	font-stretch: 100%;
	font-weight: 600;
}

.mb-schritte strong {
	display: block;
	margin-bottom: 0.3em;
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-stretch: 100%;
	font-weight: 600;
	font-size: 1.15em;
}

@media (max-width: 899px) {
	.mb-schritte,
	.mb-schritte--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 559px) {
	.mb-schritte,
	.mb-schritte--vier {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* Zeitleiste (Über mich) */
.mb-zeitleiste {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.mb-zeitleiste li {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 1rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--petrol-linie);
}

.mb-zeitleiste li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--petrol-linie);
}

.mb-zeitleiste strong {
	color: var(--wp--preset--color--petrol);
	font-family: var(--wp--preset--font-family--bricolage);
	font-stretch: 100%;
	font-weight: 600;
}

/* Kästen (z. B. Humorstil) */
.wp-block-columns.mb-kaesten {
	gap: 2rem;
	margin-top: 1.5rem;
}

.mb-kasten {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-kasten h3 {
	margin-top: 0;
}

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

/* Rechtliche Seiten etwas kompakter */
.mb-recht {
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-recht h2 {
	margin-top: 2em;
	font-size: var(--wp--preset--font-size--gross);
}

.mb-platzhalter {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--wp--preset--color--grau);
	border-radius: 6px;
	color: var(--wp--preset--color--anthrazit);
	font-style: italic;
}

/* WooCommerce-Hinweise (auf Sammlung und Einzelansicht ohne WooCommerce-CSS) */
.mb-sammlung .woocommerce-message,
.mb-sammlung .woocommerce-info,
.mb-sammlung .woocommerce-error,
.mb-cartoon .woocommerce-message,
.mb-cartoon .woocommerce-info,
.mb-cartoon .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var(--wp--preset--color--petrol);
	border-radius: 4px;
	background: var(--wp--preset--color--petrol-hell);
	font-size: var(--wp--preset--font-size--klein);
	list-style: none;
}

.mb-sammlung .woocommerce-error,
.mb-cartoon .woocommerce-error {
	border-color: #b32d2e;
	background: #fcf0f1;
}

.mb-sammlung .woocommerce-message .button,
.mb-cartoon .woocommerce-message .button {
	order: 2;
	color: var(--wp--preset--color--petrol-dunkel);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cartoon-Sammlung
   -------------------------------------------------------------------------- */
.mb-sammlung__kopf {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.mb-sammlung__titel {
	margin: 0 0 0.4em;
}

.mb-sammlung__intro {
	max-width: 46rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--petrol-linie);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-filter__sortierung {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 999px;
	background: var(--wp--preset--color--weiss);
}

.mb-filter__wahl {
	padding: 0.35em 1em;
	border-radius: 999px;
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-filter__wahl:hover {
	background: var(--wp--preset--color--petrol-hell);
}

.mb-filter__wahl.ist-aktiv {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-filter__mischen {
	color: var(--wp--preset--color--petrol-dunkel);
	text-underline-offset: 0.2em;
}

.mb-filter__anzahl {
	margin: 0 0 0 auto;
	color: var(--wp--preset--color--grau);
}

.mb-themen ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 1.25rem 0 clamp(1.75rem, 3vw, 2.5rem);
	padding: 0;
	list-style: none;
}

.mb-thema {
	display: inline-block;
	padding: 0.3em 0.9em;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 999px;
	background: var(--wp--preset--color--petrol-hell);
	color: var(--wp--preset--color--schwarz);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-thema:hover {
	border-color: var(--wp--preset--color--petrol);
}

/* Pillen und kleine Knöpfe: kurz anheben, beim Klicken nachgeben. */
.mb-thema:hover,
.mb-seitenzahlen a.page-numbers:hover,
a.mb-pfeil:hover,
.mb-knopf-klein:hover,
.mb-galerie__bild:hover {
	transform: translateY(-2px);
}

.mb-thema:active,
.mb-filter__wahl:active,
.mb-seitenzahlen a.page-numbers:active,
a.mb-pfeil:active,
.mb-knopf-klein:active,
.mb-galerie__bild:active {
	transform: scale(0.96);
	transition-duration: 0.06s;
}

.mb-thema.ist-aktiv {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-sammlung__leer {
	padding: 2rem 0;
}

/* Karte mit Kaufknöpfen */
.mb-karte__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.mb-karte__link:hover .mb-karte__titel {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mb-karte--sammlung .mb-karte__zeile {
	margin: 0.2rem 0 0;
}

.mb-karte__zeile a {
	color: inherit;
	text-decoration: none;
}

.mb-karte__zeile a:hover {
	color: var(--wp--preset--color--petrol);
	text-decoration: underline;
}

.mb-karte__kauf {
	display: grid;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 1rem;
}

.mb-karte__kauf .mb-kaufen {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.55rem 2.2rem 0.55rem 0.75rem;
	border: 1px solid transparent;
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--petrol-hell);
	color: var(--wp--preset--color--schwarz);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mb-karte__kauf .mb-kaufen::after {
	content: "+";
	position: absolute;
	right: 0.6rem;
	top: 50%;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
	line-height: 1;
	transition: transform 0.3s var(--mb-feder);
}

/* Das Plus dreht sich beim Zeigen eine Vierteldrehung. */
.mb-karte__kauf .mb-kaufen:not(.ist-im-warenkorb):hover::after,
.mb-kaufen--gross:not(.ist-im-warenkorb):hover .mb-symbol {
	transform: rotate(90deg);
}

.mb-kaufen--gross .mb-symbol {
	transition: transform 0.3s var(--mb-feder);
}

/* Gerade in den Warenkorb gelegt: Knopf wackelt kurz, der Haken springt auf. */
.mb-kaufen.ist-frisch,
.mb-knopf-klein.ist-frisch {
	animation: mb-wackeln 0.45s ease;
}

.mb-kaufen.ist-frisch .mb-symbol,
.mb-karte__kauf .mb-kaufen.ist-frisch::after,
.mb-knopf-klein.ist-frisch .mb-symbol {
	animation: mb-aufspringen 0.5s var(--mb-feder);
}

.mb-karte__kauf .mb-kaufen:hover {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-karte__kauf .mb-kaufen:hover::after {
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--petrol);
}

.mb-kaufen__name {
	font-weight: 700;
}

.mb-kaufen__px {
	color: var(--wp--preset--color--grau);
	font-size: 0.88em;
}

.mb-kaufen:hover .mb-kaufen__px {
	color: inherit;
	opacity: 0.8;
}

.mb-kaufen__preis {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

.mb-karte__kauf .mb-kaufen__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mb-karte__kauf .mb-kaufen.ist-im-warenkorb {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-karte__kauf .mb-kaufen.ist-im-warenkorb::after {
	content: "";
	background: var(--wp--preset--color--petrol) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22white%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22m6 12.5 4 4 8-9%22/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.mb-karte__kauf .mb-kaufen.ist-im-warenkorb .mb-kaufen__preis {
	display: none;
}

.mb-karte__kauf .mb-kaufen.ist-im-warenkorb .mb-kaufen__status {
	position: static;
	width: auto;
	height: auto;
	margin-left: auto;
	clip-path: none;
	font-weight: 700;
}

.mb-kaufen.ist-am-laden {
	opacity: 0.6;
	cursor: progress;
}

.mb-kaufen--einfach .mb-kaufen__name {
	font-weight: 600;
}

.mb-karte__vorschau {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.3rem;
	margin-top: 0.7rem;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
}

.mb-karte__vorschau:hover {
	color: var(--wp--preset--color--petrol);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Vorschau herunterladen: der Pfeil tippt nach unten. */
.mb-vorschau:hover svg {
	animation: mb-runter 0.6s ease;
}

/* Seitenzahlen */
.mb-seitenzahlen {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.mb-seitenzahlen ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-seitenzahlen .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 999px;
	color: var(--wp--preset--color--schwarz);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-seitenzahlen a.page-numbers:hover {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol-hell);
}

.mb-seitenzahlen .page-numbers.current {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-seitenzahlen .page-numbers.dots {
	border: 0;
}

/* --------------------------------------------------------------------------
   Einzelansicht
   -------------------------------------------------------------------------- */
.mb-seite.mb-seite--cartoon {
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

.mb-cartoon__navi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-cartoon__zurueck {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-left: -0.3rem;
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
}

.mb-cartoon__zurueck .mb-symbol,
.mb-pfeil .mb-symbol {
	transition: transform 0.25s var(--mb-feder);
}

.mb-cartoon__zurueck:hover .mb-symbol,
a.mb-pfeil[rel="prev"]:hover .mb-symbol {
	transform: translateX(-3px);
}

a.mb-pfeil[rel="next"]:hover .mb-symbol {
	transform: translateX(3px);
}

.mb-cartoon__blaettern {
	display: flex;
	gap: 0.5rem;
}

.mb-pfeil {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 999px;
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.25s var(--mb-feder);
}

a.mb-pfeil:hover {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol-hell);
}

.mb-pfeil.ist-aus {
	opacity: 0.35;
}

/* Sprechblase mit dem Titel des nächsten bzw. vorherigen Cartoons. */
.mb-pfeil[data-titel] {
	position: relative;
}

.mb-pfeil[data-titel]::before,
.mb-pfeil[data-titel]::after {
	position: absolute;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-pfeil[data-titel]::after {
	content: attr(data-titel);
	top: calc(100% + 12px);
	right: 0;
	width: max-content;
	max-width: 15rem;
	padding: 0.55em 0.95em;
	border: 1.5px solid var(--wp--preset--color--schwarz);
	border-radius: 1.2em;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	font-style: italic;
	line-height: 1.25;
	text-align: left;
	transform: translateY(-4px) scale(0.94);
	transform-origin: 85% 0;
}

.mb-pfeil[data-titel]::before {
	content: "";
	top: calc(100% + 7px);
	right: 1.5rem;
	width: 10px;
	height: 10px;
	border-top: 1.5px solid var(--wp--preset--color--schwarz);
	border-left: 1.5px solid var(--wp--preset--color--schwarz);
	background: var(--wp--preset--color--weiss);
	transform: translateY(-4px) rotate(45deg);
	z-index: 6;
}

.mb-pfeil[data-titel]:hover::before,
.mb-pfeil[data-titel]:focus-visible::before {
	opacity: 1;
	transform: rotate(45deg);
}

.mb-pfeil[data-titel]:hover::after,
.mb-pfeil[data-titel]:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.mb-pfeil[data-titel]::before,
	.mb-pfeil[data-titel]::after {
		display: none;
	}
}

.mb-pfeil .mb-symbol:first-child {
	margin-left: -0.35rem;
}

.mb-pfeil .mb-symbol:last-child {
	margin-right: -0.35rem;
}

.mb-cartoon__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: start;
}

.mb-cartoon__links {
	position: sticky;
	top: 1.5rem;
}

.mb-cartoon__bild {
	margin: 0;
	padding: 13px;
	border: 1px solid var(--wp--preset--color--anthrazit);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	transition: border-color 0.15s ease;
}

.mb-cartoon__bild:hover {
	border-color: var(--wp--preset--color--petrol);
}

.mb-cartoon__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.mb-cartoon__img.ist-neu {
	animation: mb-einblenden 0.35s ease;
}

/* Lupe: Klick zeigt die Vorschau gross. Das Zeichen erscheint beim Zeigen. */
.mb-lupe {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.mb-lupe__zeichen {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--petrol);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.15s ease, transform 0.3s var(--mb-feder);
}

.mb-lupe:hover .mb-lupe__zeichen,
.mb-lupe:focus-visible .mb-lupe__zeichen {
	opacity: 1;
	transform: none;
}

/* Grossansicht */
.mb-gross {
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	cursor: zoom-out;
}

.mb-gross[open] {
	animation: mb-auftauchen 0.3s var(--mb-feder);
}

.mb-gross::backdrop {
	background: rgba(36, 71, 76, 0.85);
}

.mb-gross[open]::backdrop {
	animation: mb-einblenden 0.2s ease;
}

.mb-gross__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(92vw, 1000px);
	max-height: 90vh;
	border: 13px solid var(--wp--preset--color--weiss);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	box-sizing: border-box;
}

.mb-gross__zu {
	position: absolute;
	top: -0.9rem;
	right: -0.9rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.25s var(--mb-feder);
}

.mb-gross__zu:hover {
	transform: rotate(90deg);
}

/* Galerie (Bücher) */
.mb-galerie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.mb-galerie__bild {
	padding: 3px;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--weiss);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-galerie__bild img {
	display: block;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 3px;
	object-fit: cover;
}

.mb-galerie__bild:hover {
	border-color: var(--wp--preset--color--petrol);
}

.mb-galerie__bild.ist-aktiv {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 1px var(--wp--preset--color--petrol);
}

.mb-cartoon__titel {
	margin: 0 0 0.35em;
	font-size: var(--wp--preset--font-size--titel);
	line-height: 1.15;
}

.mb-cartoon__meta {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-cartoon__meta a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.mb-cartoon__meta a:hover {
	color: var(--wp--preset--color--petrol);
}

.mb-cartoon__text {
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-cartoon__text p {
	margin: 0 0 0.8em;
}

.mb-cartoon__preis {
	margin: 1rem 0;
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--gross);
	font-stretch: 100%;
	font-weight: 600;
}

.mb-nutzung {
	margin-top: 1.5rem;
}

.mb-nutzung__titel,
.mb-teilen__titel {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 600;
}

.mb-nutzung__option {
	margin-bottom: 0.75rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mb-nutzung__option:hover {
	border-color: var(--wp--preset--color--petrol);
}

.mb-nutzung__option.ist-im-warenkorb {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol-hell);
}

.mb-nutzung__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--mittel);
	font-stretch: 100%;
	font-weight: 600;
}

.mb-nutzung__preis {
	color: var(--wp--preset--color--schwarz);
	white-space: nowrap;
}

.mb-nutzung__masse {
	margin: 0.15rem 0 0.35rem;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-nutzung__text {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--klein);
}

.mb-kaufen--gross {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--petrol);
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--mittel);
	font-stretch: 100%;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mb-kaufen--gross:hover {
	border-color: var(--wp--preset--color--petrol-dunkel);
	background: var(--wp--preset--color--petrol-dunkel);
	color: var(--wp--preset--color--weiss);
}

.mb-kaufen--gross.ist-im-warenkorb {
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-kaufen--gross.ist-im-warenkorb:hover {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol-hell);
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-kaufen--gross.ist-im-warenkorb .mb-kaufen__status::after {
	content: " – zum Warenkorb";
	font-weight: 400;
}

.mb-nutzung__hinweis {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-nutzung__hinweis a {
	color: var(--wp--preset--color--petrol-dunkel);
	text-underline-offset: 0.2em;
}

.mb-teilen {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--petrol-linie);
}

.mb-teilen p {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--klein);
}

.mb-teilen__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mb-knopf-klein {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 999px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.25s var(--mb-feder);
}

.mb-knopf-klein:hover {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--petrol-hell);
}

.mb-knopf-klein .mb-symbol,
.mb-vorschau svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--petrol);
}

.mb-korb-hinweis {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--petrol-hell);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-korb-hinweis a {
	color: var(--wp--preset--color--petrol-dunkel);
	font-weight: 600;
}

.mb-korb-hinweis.ist-neu {
	animation: mb-hochkommen 0.4s var(--mb-feder);
}

/* Was nach dem Kauf passiert (Haken-Liste unter den Kaufknöpfen) */
.mb-vorteile {
	margin: 0.9rem 0 0.35rem;
	padding: 0;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
	list-style: none;
}

.mb-vorteile li {
	position: relative;
	padding: 0.12em 0 0.12em 1.6em;
}

/* Eigenschaften eines Buchs */
.mb-eigenschaften {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 1rem 0;
	border-block: 1px solid var(--wp--preset--color--petrol-linie);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-eigenschaften div {
	min-width: 0;
}

.mb-eigenschaften dt {
	color: var(--wp--preset--color--grau);
}

.mb-eigenschaften dd {
	margin: 0;
	font-weight: 600;
}

/* Mehr zum Thema (unter der Einzelansicht) */
.mb-mehr {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--petrol-linie);
}

.mb-mehr .mb-titelzeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (max-width: 781px) {
	.mb-cartoon__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.mb-cartoon__links {
		position: static;
	}

	.mb-cartoon__bild {
		padding: 8px;
	}
}

@media (max-width: 420px) {
	.mb-pfeil > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.mb-pfeil {
		padding: 0.45rem 0.7rem;
	}

	.mb-pfeil .mb-symbol:first-child,
	.mb-pfeil .mb-symbol:last-child {
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Nutzungsvarianten (Seite «Cartoons nutzen»)
   -------------------------------------------------------------------------- */
.mb-nutzungen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.mb-nutzungen__kachel {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--klein);
}

.mb-nutzungen__kachel--frei {
	border-color: var(--wp--preset--color--petrol-hell);
	background: var(--wp--preset--color--petrol-hell);
}

.mb-nutzungen__kachel h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--gross);
}

.mb-nutzungen__kachel p {
	margin: 0 0 0.75rem;
}

.mb-nutzungen__masse {
	color: var(--wp--preset--color--grau);
}

.mb-nutzungen .mb-nutzungen__preis {
	margin: 0.25rem 0 1rem;
	color: var(--wp--preset--color--petrol);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--titel);
	font-stretch: 100%;
	font-weight: 600;
	line-height: 1.1;
}

.mb-nutzungen__kachel ul {
	margin: auto 0 0;
	padding: 0.85rem 0 0;
	border-top: 1px solid var(--wp--preset--color--petrol-linie);
	list-style: none;
}

.mb-nutzungen__kachel li {
	position: relative;
	padding: 0.15em 0 0.15em 1.5em;
}

.mb-nutzungen__fuss {
	margin-top: 1rem;
	color: var(--wp--preset--color--anthrazit);
	font-size: var(--wp--preset--font-size--klein);
}

@media (max-width: 899px) {
	.mb-nutzungen {
		grid-template-columns: minmax(0, 1fr);
		max-width: 32rem;
	}
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */
.mb-formular {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	scroll-margin-top: 2rem;
}

/* Formular links ausrichten (das Inhalts-Layout würde es sonst zentrieren) */
.mb-formular > * {
	max-width: 46rem;
}

.mb-formular__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.5rem;
}

.mb-formular .mb-formular__feld {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.mb-formular__feld--breit {
	grid-column: 1 / -1;
}

.mb-formular label {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.mb-formular input[type="text"],
.mb-formular input[type="email"],
.mb-formular select,
.mb-formular textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--grau);
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	font: inherit;
	font-size: var(--wp--preset--font-size--mittel);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mb-formular textarea {
	min-height: 9rem;
	resize: vertical;
}

.mb-formular input:focus,
.mb-formular select:focus,
.mb-formular textarea:focus {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 3px rgba(56, 109, 118, 0.2);
	outline: none;
}

.mb-formular__pflicht {
	color: var(--wp--preset--color--petrol);
}

.mb-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mb-formular .mb-formular__zustimmung {
	margin: 1.25rem 0 0;
}

.mb-formular__zustimmung label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
}

.mb-formular__zustimmung input {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15em 0 0;
	accent-color: var(--wp--preset--color--petrol);
}

.mb-formular__zustimmung a {
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-formular .mb-formular__senden {
	margin: 1.5rem 0 0;
}

.mb-formular__senden button {
	min-width: 14rem;
	cursor: pointer;
}

.mb-formular__fehler {
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid #b32d2e;
	border-radius: 4px;
	background: #fcf0f1;
	font-size: var(--wp--preset--font-size--klein);
}

.mb-formular__fehler p,
.mb-formular__fehler ul {
	margin: 0;
}

.mb-formular__fehler ul {
	padding-left: 1.2em;
}

.mb-formular--danke {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 8px;
	background: var(--wp--preset--color--petrol-hell);
}

.mb-formular--danke h3 {
	margin-top: 0;
}

.mb-formular--danke p {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.mb-formular__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.mb-formular__senden button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Cookie-Banner
   -------------------------------------------------------------------------- */
.mb-cookies {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 1000;
	width: min(30rem, calc(100vw - 2.5rem));
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--wp--preset--color--petrol-linie);
	border-radius: 10px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.18);
	font-size: var(--wp--preset--font-size--klein);
	box-sizing: border-box;
}

.mb-cookies[hidden] {
	display: none;
}

.mb-cookies:not([hidden]) {
	animation: mb-hochkommen 0.45s var(--mb-feder) both;
}

.mb-cookies__titel {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--mittel);
	font-stretch: 100%;
	font-weight: 600;
}

.mb-cookies__text {
	margin: 0 0 0.85rem;
	line-height: 1.4;
}

.mb-cookies__text a {
	color: var(--wp--preset--color--petrol-dunkel);
}

.mb-cookies__wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1rem;
}

.mb-cookies__wahl label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.mb-cookies__wahl input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--wp--preset--color--petrol);
}

.mb-cookies__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mb-cookies__knopf {
	flex: 1 1 auto;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--petrol);
	border-radius: var(--mb-radius);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--klein);
	font-stretch: 100%;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mb-cookies__knopf:hover {
	background: var(--wp--preset--color--petrol-hell);
}

.mb-cookies__knopf--haupt {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--weiss);
}

.mb-cookies__knopf--haupt:hover {
	background: var(--wp--preset--color--petrol-dunkel);
}

@media (max-width: 599px) {
	.mb-cookies {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		width: auto;
		padding: 1rem 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   Warenkorb und Kasse (WooCommerce-Blöcke)
   -------------------------------------------------------------------------- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--mb-radius) !important;
	background: var(--wp--preset--color--petrol) !important;
	color: var(--wp--preset--color--weiss) !important;
	font-family: var(--wp--preset--font-family--bricolage);
	font-stretch: 100%;
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--petrol-dunkel) !important;
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--petrol-dunkel) !important;
	font-family: var(--wp--preset--font-family--bricolage);
	font-stretch: 100%;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-size: var(--wp--preset--font-size--mittel);
}

/* Titel über Warenkorb und Kasse so breit wie die Blöcke (WooCommerce begrenzt auf 1000 px) */
.mb-seitenkopf .mb-seite__titel.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: var(--mb-radius) !important;
}

/* --------------------------------------------------------------------------
   Bücher (Seite «Bücher»): ein Buch pro Zeile, Umschlag links
   -------------------------------------------------------------------------- */
.mb-buecher {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.mb-buch {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--petrol-linie);
}

.mb-buch:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mb-buch__bild {
	display: block;
	padding: 13px;
	border: 1px solid var(--wp--preset--color--anthrazit);
	border-radius: 8px;
	background: var(--wp--preset--color--weiss);
	transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.3s var(--mb-feder);
}

.mb-buch__bild:hover {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 8px 24px rgba(36, 71, 76, 0.14);
	transform: translateY(-3px) rotate(-0.6deg);
}

.mb-buch__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.mb-buch__titel {
	margin: 0 0 0.4em;
	font-size: var(--wp--preset--font-size--titel);
}

.mb-buch__titel a {
	color: inherit;
	text-decoration: none;
}

.mb-buch__kurz {
	margin: 0 0 0.5em;
	font-size: var(--wp--preset--font-size--mittel);
}

.mb-buch__angaben {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--klein);
}

.mb-buch__preis {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--petrol-dunkel);
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--gross);
	font-stretch: 100%;
	font-weight: 600;
}

.mb-buch__knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.mb-buch .mb-kaufen--gross {
	display: inline-flex;
}

.mb-buch__mehr {
	color: var(--wp--preset--color--petrol-dunkel);
	font-size: var(--wp--preset--font-size--klein);
	text-underline-offset: 0.2em;
}

@media (max-width: 599px) {
	.mb-buch {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* Rechnung auf der Bestätigungsseite */
.mb-rechnung {
	margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   Bewegung
   Warenkorb-«Plopp»: Wenn etwas im Warenkorb landet, hüpft die Zahl und ein
   paar Comic-Striche springen aus dem Wagen.
   -------------------------------------------------------------------------- */
.mb-plopp {
	position: absolute;
	left: 10px;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -26px 0 0 -20px;
	color: var(--wp--preset--color--petrol);
	pointer-events: none;
}

.mb-plopp svg {
	display: block;
	stroke-dasharray: 7;
	animation: mb-striche 0.8s var(--mb-strich) both;
}

.mb-warenkorb.ist-neu .mb-warenkorb__symbol {
	animation: mb-wackeln 0.5s ease;
}

.mb-warenkorb.ist-neu .mb-warenkorb__anzahl {
	animation: mb-aufspringen 0.5s var(--mb-feder);
}

@keyframes mb-striche {
	0% { opacity: 0; stroke-dashoffset: 7; transform: scale(0.6); }
	30% { opacity: 1; stroke-dashoffset: 0; }
	100% { opacity: 0; stroke-dashoffset: -7; transform: scale(1.2); }
}

@keyframes mb-aufspringen {
	0% { transform: scale(0.4); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@keyframes mb-wackeln {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-3deg); }
	50% { transform: rotate(2.5deg); }
	75% { transform: rotate(-1deg); }
}

@keyframes mb-runter {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(3px); }
}

@keyframes mb-einblenden {
	from { opacity: 0; }
}

@keyframes mb-auftauchen {
	from { opacity: 0; transform: scale(0.94); }
}

@keyframes mb-hochkommen {
	from { opacity: 0; transform: translateY(12px); }
}

@keyframes mb-aufklappen {
	from { opacity: 0; transform: translateY(-6px); }
}

/* Wer weniger Bewegung eingestellt hat, bekommt die Zustände ohne Animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.mb-plopp {
		display: none;
	}
}