/*
Theme Name:   GeneratePress Child – Miauzoo
Description:  Child-Theme für Miauzoo auf Basis von GeneratePress.
Template:     generatepress
Version:      0.2.0
Requires PHP: 7.4
Text Domain:  generatepress-child
*/

/* =========================================================================
   0. Schrift: Plus Jakarta Sans (SIL Open Font License, siehe assets/fonts)
   Lokal eingebunden, es werden keine externen Server kontaktiert.
   Variable Schrift: eine Datei deckt alle Stärken von 200 bis 800 ab.
   ========================================================================= */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   1. Design-System
   Farben aus dem Logo (Schwarz) plus warmes Orange als Akzent.
   Die GeneratePress-Variablen werden mit überschrieben, damit Theme-Elemente
   automatisch die neuen Farben nutzen.
   ========================================================================= */
:root {
	--mz-ink: #161412;
	--mz-ink-2: #4a443e;
	--mz-ink-3: #8a8178;
	--mz-bg: #faf7f3;
	--mz-surface: #ffffff;
	--mz-sand: #f3ece3;
	--mz-line: #ebe4da;
	--mz-accent: #d0782c;
	--mz-accent-ink: #a95a17;
	--mz-accent-soft: #fbeee1;
	--mz-green: #2e7d4f;
	--mz-green-soft: #e6f4ec;
	--mz-red: #a33a2a;
	--mz-red-soft: #fbe9e6;

	--mz-radius-s: 10px;
	--mz-radius: 18px;
	--mz-radius-l: 28px;
	--mz-shadow-s: 0 1px 2px rgba(22, 20, 18, 0.06), 0 2px 8px rgba(22, 20, 18, 0.04);
	--mz-shadow: 0 2px 4px rgba(22, 20, 18, 0.04), 0 10px 30px rgba(22, 20, 18, 0.08);
	--mz-shadow-l: 0 4px 8px rgba(22, 20, 18, 0.05), 0 22px 50px rgba(22, 20, 18, 0.14);
	--mz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	--mz-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* GeneratePress-Farben */
	--contrast: var(--mz-ink);
	--contrast-2: var(--mz-ink-2);
	--contrast-3: var(--mz-ink-3);
	--base: var(--mz-line);
	--base-2: var(--mz-bg);
	--base-3: var(--mz-surface);
	--accent: var(--mz-accent-ink);
}

/* =========================================================================
   2. Grundlagen und Typografie
   ========================================================================= */
body {
	background: var(--mz-bg);
	color: var(--mz-ink);
	font-family: var(--mz-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.page-title {
	color: var(--mz-ink);
	font-family: var(--mz-font);
	font-weight: 750;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

h1, .entry-title, .page-title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

h2 {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
}

h3 {
	font-size: 1.2rem;
}

a {
	color: var(--mz-accent-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s;
}

a:hover,
a:focus {
	color: var(--mz-ink);
}

:focus-visible {
	outline: 3px solid var(--mz-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--mz-accent-soft);
	color: var(--mz-ink);
}

/* GeneratePress setzt die Schrift für einige Elemente separat */
button,
input,
select,
textarea,
.main-navigation,
.site-info {
	font-family: var(--mz-font);
}

/* Formulare */
input[type="text"],
input[type="search"],
input[type="email"],
select,
textarea {
	padding: 0.7em 1em;
	background: var(--mz-surface);
	border: 1.5px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
	color: var(--mz-ink);
	font: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--mz-accent);
	box-shadow: 0 0 0 4px var(--mz-accent-soft);
	outline: none;
}

select {
	appearance: none;
	padding-right: 2.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161412' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 1em center;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* =========================================================================
   3. Buttons
   ========================================================================= */
button,
.button,
input[type="submit"],
.wp-block-button__link,
.mz-pill {
	transition: background 0.2s var(--mz-ease), color 0.2s, transform 0.2s var(--mz-ease), box-shadow 0.2s;
}

button,
.button,
input[type="submit"],
.entry-content .wp-block-button__link,
.entry-content .mz-btn .wp-block-button__link {
	padding: 0.8em 1.6em;
	background: var(--mz-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-weight: 650;
	line-height: 1.3;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.entry-content .wp-block-button__link:hover,
.entry-content .mz-btn .wp-block-button__link:hover,
.entry-content .mz-btn .wp-block-button__link:focus {
	background: var(--mz-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(208, 120, 44, 0.3);
}

.entry-content .mz-btn--outline .wp-block-button__link {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--mz-ink);
	color: var(--mz-ink);
}

.entry-content .mz-btn--outline .wp-block-button__link:hover,
.entry-content .mz-btn--outline .wp-block-button__link:focus {
	background: var(--mz-ink);
	box-shadow: none;
	color: #fff;
}

/* Kleine Pill-Links, z. B. "Vergleichen" im Steckbrief */
.mz-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 1.1em;
	background: var(--mz-surface);
	border: 1.5px solid var(--mz-line);
	border-radius: 999px;
	color: var(--mz-ink);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.mz-pill::after {
	content: "→";
	transition: transform 0.2s var(--mz-ease);
}

.mz-pill:hover,
.mz-pill:focus {
	border-color: var(--mz-ink);
	color: var(--mz-ink);
}

.mz-pill:hover::after {
	transform: translateX(3px);
}

/* =========================================================================
   4. Header und Navigation
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(250, 247, 243, 0.82);
	border-bottom: 1px solid rgba(235, 228, 218, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
}

.admin-bar .site-header {
	top: 32px;
}

/* Sprungziele (#anker, Inhaltsverzeichnis, Menüpunkte wie "Kitten nach Rasse") nicht unter dem festen Menü verstecken */
html {
	scroll-padding-top: 90px;
}

html:has(body.admin-bar) {
	scroll-padding-top: 122px;
}

.inside-header {
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-logo .header-image {
	width: auto;
	height: 40px;
}

/* Header-Logo: gleiche Machart wie .mz-footer__brand, dunkel */
.mz-logo a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-logo__mark {
	display: block;
	width: 34px;
	height: 34px;
}

.mz-logo__text {
	font-size: 1.4rem;
	font-weight: 750;
	letter-spacing: -0.01em;
	line-height: 1;
}

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	padding: 0 14px;
	color: var(--mz-ink-2);
	font-size: 15px;
	font-weight: 550;
	line-height: 40px;
	border-radius: 999px;
}

.main-navigation .main-nav ul li:not(.mz-menu-cta) > a:hover,
.main-navigation .main-nav ul li:not(.mz-menu-cta)[class*="current-menu-"] > a {
	background: var(--mz-sand);
	color: var(--mz-ink);
}

.main-navigation .main-nav ul li.mz-menu-cta > a {
	margin-left: 6px;
	background: var(--mz-ink);
	color: #fff;
}

.main-navigation .main-nav ul li.mz-menu-cta > a:hover {
	background: var(--mz-accent);
	color: #fff;
}

/* Untermenü (Katzenrassen → Themen) */
.main-navigation .main-nav ul li.menu-item-has-children > a {
	padding-right: 10px;
}

.main-navigation .main-nav ul li .dropdown-menu-toggle {
	padding-left: 4px;
	padding-right: 0;
	opacity: 0.6;
}

@media (min-width: 769px) {
	.main-navigation .main-nav ul ul {
		width: 250px;
		padding: 8px;
		background: var(--mz-surface);
		border: 1px solid var(--mz-line);
		border-radius: var(--mz-radius);
		box-shadow: var(--mz-shadow-l);
	}

	.main-navigation .main-nav ul ul li a {
		padding: 0 14px;
		line-height: 38px;
		border-radius: var(--mz-radius-s);
		font-size: 14.5px;
	}

	.main-navigation .main-nav ul ul li:first-child a {
		font-weight: 700;
	}
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul ul li a {
		padding-left: 32px;
		font-size: 14.5px;
	}
}

.main-navigation .menu-bar-items {
	color: var(--mz-ink-2);
}

.main-navigation .menu-bar-item > a {
	padding: 0 12px;
	line-height: 40px;
}

.navigation-search input[type="search"] {
	background: var(--mz-surface);
	border-radius: 999px;
}

.menu-toggle {
	padding: 0 16px;
	background: var(--mz-ink);
	border-radius: 999px;
	color: #fff;
	line-height: 40px;
}

@media (min-width: 769px) and (max-width: 1100px) {
	.inside-header {
		padding-left: 20px;
		padding-right: 20px;
	}

	.main-navigation .main-nav ul li a {
		padding: 0 9px;
		font-size: 14px;
	}
}

/* Schmale Desktops/Tablets quer: mit vier Dropdowns wird es eng – Abstände nochmal kleiner, damit alles in eine Zeile passt */
@media (min-width: 769px) and (max-width: 1060px) {
	.main-navigation .main-nav ul li a {
		padding: 0 6px;
		font-size: 13.5px;
	}

	.main-navigation .main-nav ul li.menu-item-has-children > a {
		padding-right: 2px;
	}

	.main-navigation .main-nav ul li .dropdown-menu-toggle {
		padding-left: 3px;
	}
}

@media (max-width: 768px) {
	.site-logo .header-image {
		height: 34px;
	}

	.mz-logo__mark {
		width: 30px;
		height: 30px;
	}

	.mz-logo__text {
		font-size: 1.25rem;
	}

	.main-navigation .main-nav ul li a {
		line-height: 48px;
	}

	.main-navigation.toggled .main-nav {
		padding: 8px 0 12px;
	}
}

/* =========================================================================
   5. Seitenaufbau
   ========================================================================= */
/* Erster Inhalt (Hero, Kopfbereich, Titelbild) sitzt auf allen Seiten gleich nah unter dem Menü */
.one-container .site-content {
	padding: 20px 40px 72px;
	background: transparent;
}

/* Im Winter hängen Eiszapfen unter dem Menü (inc/saison.php): etwas mehr Platz, damit sie nichts verdecken */
html.mz-saison-winter:not(.mz-deko-aus) .one-container .site-content,
html.mz-fest-advent:not(.mz-deko-aus) .one-container .site-content {
	padding-top: 34px;
}

/* Startseite hat keinen Seitentitel: kein zusätzlicher Abstand über dem Hero */
.home .site-main .entry-content {
	margin-top: 0;
}

/* GeneratePress gibt den (leeren) Titelbereich trotzdem aus – sein Abstand würde den Hero nach unten schieben */
.home .site-main .entry-header {
	display: none;
}

.one-container .container,
.one-container .inside-article {
	background: transparent;
}

.one-container .site-main > article:not(:last-child) {
	margin-bottom: 0;
}

/* Lesebreite für Text- und Detailseiten */
.mz-lesebreite .site-main {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.entry-header {
	margin-bottom: 1.25em;
}

.mz-lesebreite .entry-title {
	margin-bottom: 0.2em;
}

/* Kopfbereich der Übersichtsseiten */
.page-header {
	margin-bottom: 32px;
	padding: 0;
}

.page-header .page-title {
	margin-bottom: 0.3em;
}

.page-header .taxonomy-description {
	max-width: 42em;
	color: var(--mz-ink-2);
	font-size: 1.1rem;
}

.page-header .taxonomy-description p:last-child {
	margin-bottom: 0;
}

/* Fotos im Inhalt */
.entry-content img {
	border-radius: var(--mz-radius);
}

/* =========================================================================
   6. Startseite
   ========================================================================= */
.home .entry-content > * + .mz-section-title {
	margin-top: 2.6em;
}

.mz-hero {
	position: relative;
	margin-bottom: 1.5em;
	padding: clamp(28px, 5vw, 64px);
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(208, 120, 44, 0.16), transparent 60%),
		radial-gradient(50% 70% at 0% 100%, rgba(208, 120, 44, 0.1), transparent 60%),
		var(--mz-sand);
	border-radius: var(--mz-radius-l);
	overflow: hidden;
}

.mz-hero .wp-block-columns {
	margin-bottom: 0;
}

.mz-eyebrow {
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.35em 0.9em;
	background: var(--mz-surface);
	border-radius: 999px;
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink-2);
	font-size: 0.85rem;
	font-weight: 650;
}

.mz-hero__title {
	margin-bottom: 0.35em;
	font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.mz-hero__text {
	max-width: 34em;
	margin-bottom: 1.6em;
	color: var(--mz-ink-2);
	font-size: 1.15rem;
}

.mz-hero__img {
	margin: 0;
}

.mz-hero__img img {
	width: 100%;
	height: auto;
	border-radius: 0;
	filter: drop-shadow(0 18px 30px rgba(22, 20, 18, 0.12));
}

/* Interaktive Katzen-Szene im Kopfbereich ([mz_hero]) */
.mz-hero-szene {
	position: relative;
}

.mz-hero-szene svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 18px 30px rgba(22, 20, 18, 0.1));
}

.mz-hero-szene__tipp {
	margin: 0.3em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.8rem;
	text-align: center;
	opacity: 0;
	transform: translateY(4px);
	animation: mz-tipp-einblenden 0.6s var(--mz-ease) 2.5s forwards;
}

@keyframes mz-tipp-einblenden {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Startseite: Kitten-Finder-Teaser, gespiegelt zum Hero (Szene links) */
.mz-kitten-teaser {
	margin-top: 2.6em;
	background:
		radial-gradient(60% 80% at 0% 0%, rgba(208, 120, 44, 0.14), transparent 60%),
		radial-gradient(50% 70% at 100% 100%, rgba(208, 120, 44, 0.1), transparent 60%),
		var(--mz-sand);
}

.mz-kitten-teaser__raster {
	display: grid;
	grid-template-columns: 42fr 58fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
}

.mz-kitten-teaser .mz-hero__title {
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
}

.mz-kitten-teaser .mz-hero__text {
	margin-bottom: 1.4em;
}

.mz-kitten-teaser .wp-block-buttons {
	gap: 0.6em;
	flex-wrap: wrap;
}

.mz-kitten-teaser .mz-szene svg {
	filter: drop-shadow(0 18px 30px rgba(22, 20, 18, 0.1));
}

@media (max-width: 768px) {
	.mz-kitten-teaser__raster {
		grid-template-columns: 1fr;
	}

	.mz-kitten-teaser__szene {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
}

.mz-section-title {
	margin-bottom: 0.9em;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}

.mz-more {
	margin-top: -0.4em;
	text-align: right;
}

.mz-more a {
	color: var(--mz-ink);
	font-weight: 650;
	text-decoration: none;
}

.mz-more a:hover {
	color: var(--mz-accent-ink);
}

/* Karten */
.mz-cards {
	gap: 20px;
	margin-bottom: 20px;
}

.mz-card {
	position: relative;
	padding: 24px;
	background: var(--mz-surface);
	border: 0;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow-l);
}

.mz-card h3 {
	margin-bottom: 0.35em;
	font-size: 1.15rem;
}

.mz-card h3 a {
	color: var(--mz-ink);
	text-decoration: none;
}

/* Ganze Karte klickbar über den Titel-Link */
.mz-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mz-card p {
	margin-bottom: 0;
	color: var(--mz-ink-2);
	font-size: 0.95rem;
}

.mz-icon {
	margin: 0 0 14px;
}

/* Katzen-Helfer (inc/helfer.php): Karten auf der Startseite, kompakt am Seitenende */
.mz-helfer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.mz-helfer__karte {
	margin: 0;
}

.mz-helfer--kompakt {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 12px;
}

.mz-helfer--kompakt .mz-helfer__karte {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
}

.mz-helfer--kompakt .mz-icon {
	flex: none;
	margin: 0;
}

.mz-helfer--kompakt .mz-ani {
	width: 46px;
	height: 46px;
}

.mz-helfer--kompakt h3 {
	margin-bottom: 0.15em;
	font-size: 1rem;
}

.mz-helfer--kompakt p {
	font-size: 0.85rem;
	line-height: 1.45;
}

/* Auf dem Handy auch die großen Karten einzeilig mit Icon links, sonst wird die Liste sehr lang */
@media (max-width: 600px) {
	.mz-helfer .mz-helfer__karte {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px;
	}

	.mz-helfer .mz-icon {
		flex: none;
		margin: 0;
	}

	.mz-helfer .mz-ani {
		width: 48px;
		height: 48px;
	}

	.mz-helfer h3 {
		font-size: 1.02rem;
	}
}

.mz-helfer-bereich {
	margin: 2.5em 0 1em;
}

/* Vom Kitten zur Katze: Kitten- und Katzenbild nebeneinander (inc/kitten-rassen.php) */
.mz-kv-bereich {
	margin: 2.5em 0;
}

.mz-kv {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.mz-kv__bild {
	position: relative;
	margin: 0;
}

.mz-kv__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-kv__bild figcaption {
	margin-top: 8px;
	color: var(--mz-ink-2);
	font-size: 0.92rem;
}

.mz-kv__label {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.mz-kv__pfeil {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 30px;
	border-radius: 50%;
	background: var(--mz-surface);
	color: var(--mz-accent, #d0782c);
	box-shadow: var(--mz-shadow-s);
}

.mz-kv__mehr {
	grid-column: 1 / -1;
	margin: 4px 0 0;
}

@media (max-width: 600px) {
	.mz-kv {
		grid-template-columns: 1fr;
	}

	.mz-kv__pfeil {
		margin: -6px auto;
		transform: rotate(90deg);
	}
}

/* Kitten-Seite je Rasse (templates/kitten-rasse.php) */
.mz-kr-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 480px);
	gap: 32px;
	align-items: center;
	margin-bottom: 32px;
	padding: clamp(24px, 4vw, 44px);
	background: radial-gradient(60% 90% at 100% 0%, rgba(208, 120, 44, 0.14), transparent 60%), var(--mz-sand);
	border-radius: var(--mz-radius-l);
}

.mz-kr-kopf h1 {
	margin-bottom: 0.3em;
}

.mz-kr-kopf__zurueck {
	margin: 0 0 10px;
	font-size: 0.9rem;
}

.mz-kr-kopf__zurueck a {
	color: var(--mz-ink-2);
}

.mz-kr-kopf__bild {
	position: relative;
	margin: 0;
}

.mz-kr-kopf__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-l);
}

.mz-kr-fakten {
	margin: 18px 0 0;
	padding-left: 1.2em;
}

.mz-kr-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 16px;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.mz-kr-galerie figure {
	position: relative;
	margin: 0;
}

.mz-kr-galerie img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mz-radius);
}

.mz-kr-galerie figcaption {
	margin-top: 6px;
	font-size: 0.9rem;
	line-height: 1.45;
}

.mz-kr-galerie figcaption a {
	display: inline-block;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-kr-tipps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 14px;
}

.mz-kr-tipp {
	padding: 18px 20px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-kr-tipp h3 {
	margin-bottom: 0.3em;
	font-size: 1.05rem;
}

.mz-kr-tipp p {
	margin: 0;
	color: var(--mz-ink-2);
	font-size: 0.93rem;
}

.mz-kr-vertr {
	margin-top: 14px;
}

.mz-kr-planen__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Kitten nach Rasse (Karten mit Kitten-Porträt) */
.mz-kk {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr));
	gap: 14px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.mz-kk__karte a {
	display: block;
	overflow: hidden;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-kk__karte a:hover {
	transform: translateY(-3px);
	box-shadow: var(--mz-shadow-l);
}

.mz-kk__karte img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mz-kk__karte span:not(.mz-ki-marke) {
	display: block;
	padding: 10px 12px;
}

@media (max-width: 768px) {
	.mz-kr-kopf {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.mz-kr-kopf__bild {
		order: -1;
	}

}

@media (max-width: 600px) {
	.mz-kk:not(.mz-kk--leiste) {
		grid-template-columns: 1fr;
	}
}

/* Kitten-Szenen in Wegweiser und Artikeln: KI-Marke am Bild, Bildunterschrift darunter */
.mz-abschnittsbild__bild {
	position: relative;
}

.mz-abschnittsbild--kitten figcaption {
	margin-top: 8px;
	color: var(--mz-ink-2);
	font-size: 0.9rem;
}

/* Spiel "Wer wird wer?" (assets/js/spiele.js) */
.mz-werwird__kitten {
	max-width: 420px;
	margin: 0 auto 10px;
}

.mz-werwird__wahl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.mz-werwird__option {
	position: relative;
	display: block;
	padding: 0;
	overflow: hidden;
	background: var(--mz-surface);
	border: 3px solid transparent;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	cursor: pointer;
	transition: transform 0.2s var(--mz-ease), border-color 0.2s;
}

.mz-werwird__option:hover:not(:disabled) {
	transform: translateY(-3px);
	border-color: var(--mz-accent, #d0782c);
}

.mz-werwird__option img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mz-werwird__nr {
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(22, 20, 18, 0.7);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
}

.mz-werwird__name {
	display: block;
	padding: 6px 8px;
	color: var(--mz-ink);
	font-size: 0.85rem;
	font-weight: 700;
}

.mz-werwird__option.is-richtig {
	border-color: #2e7d4f;
}

.mz-werwird__option.is-falsch {
	border-color: #b3261e;
}

@media (max-width: 600px) {
	.mz-werwird__wahl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Kitten nach Rasse oben im Kitten-Wegweiser: waagerechte Leiste zum Wischen */
.mz-kk--leiste {
	display: flex;
	gap: 12px;
	margin: 0 0 8px;
	padding: 4px 2px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.mz-kk--leiste .mz-kk__karte {
	flex: 0 0 170px;
	scroll-snap-align: start;
}

.mz-kk-bereich--oben {
	margin: 0 0 2em;
}

.mz-kk-bereich--oben .mz-kk-hinweis {
	margin: 0;
	color: var(--mz-ink-3);
	font-size: 0.88rem;
}

/* Kitten-Finder: persönlicher Startplan unter den Ergebnissen */
.kf__plan {
	margin: 1.5em 0;
	padding: 20px 24px;
	background: var(--mz-sand);
	border-radius: var(--mz-radius);
}

.kf__plan-titel {
	margin-bottom: 0.6em;
	font-size: 1.15rem;
}

.kf__plan-liste {
	margin: 0;
	padding-left: 1.3em;
}

.kf__plan-liste li {
	margin-bottom: 12px;
}

.kf__plan-liste strong,
.kf__plan-liste span {
	display: block;
}

.kf__plan-liste span {
	color: var(--mz-ink-2);
	font-size: 0.95rem;
}

.kf__plan-liste a {
	font-size: 0.9rem;
}

/* Kontaktformular (inc/kontakt.php) */
.mz-kontakt {
	margin: 1.5em 0 2em;
}

.mz-kontakt__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 4px 20px;
	padding: clamp(20px, 3vw, 32px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-kontakt__feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.mz-kontakt__feld label {
	font-weight: 700;
	font-size: 0.95rem;
}

.mz-kontakt__feld--breit {
	grid-column: 1 / -1;
}

.mz-kontakt__feld textarea {
	resize: vertical;
}

.mz-kontakt__check label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.5;
}

.mz-kontakt__check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--mz-ink);
}

/* Honigtopf für Spam-Bots: unsichtbar, aber nicht display:none (manche Bots überspringen das) */
.mz-kontakt__honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mz-kontakt__meldung {
	padding: 14px 18px;
	border-radius: var(--mz-radius);
	font-weight: 600;
}

.mz-kontakt__meldung--ok {
	background: #e7f3ea;
	color: #1f5e36;
}

.mz-kontakt__meldung--fehler {
	background: #fbeaea;
	color: #8a1f1a;
}

.mz-kontakt__hinweis {
	margin-top: 14px;
	color: var(--mz-ink-3);
	font-size: 0.88rem;
}

/* Über uns: Fotos von Rudi und Bruno */
.mz-ueber__bilder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 12px;
	margin: 1.5em 0;
}

.mz-ueber__bilder figure {
	margin: 0;
}

.mz-ueber__bilder img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--mz-radius);
}

.mz-ueber__bilder figcaption {
	margin-top: 6px;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

/* Große Fotos im Querformat zuschneiden; beim Hochformat-Selfie liegen die Gesichter im unteren Teil */
.mz-ueber__gross img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 78%;
	border-radius: var(--mz-radius-l);
}

/* Rassecode im Steckbrief (inc/stammbaum.php) */
.mz-rassecode {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.mz-rassecode__hinweis {
	color: var(--mz-ink-3);
	font-size: 0.85em;
}

/* Stammbaum-Code-Entschlüssler */
.mz-ems {
	margin: 0 0 2em;
	padding: clamp(20px, 3vw, 32px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-ems__form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.mz-ems__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mz-ems__zeile input {
	flex: 1 1 220px;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
}

.mz-ems__beispiele {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 0.9rem;
}

.mz-ems__beispiele span {
	margin-right: 4px;
	color: var(--mz-ink-3);
}

.mz-ems__beispiele .mz-pill {
	padding: 0.3em 0.8em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	cursor: pointer;
}

.mz-ems__beispiele .mz-pill::after {
	content: none;
}

.mz-ems__ergebnis:not(:empty) {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mz-line, #ebe4da);
}

.mz-ems__kurz {
	margin: 0 0 14px;
	font-size: 1.2rem;
	font-weight: 750;
}

.mz-ems__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-ems__liste li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px dashed var(--mz-line, #ebe4da);
}

.mz-ems__code {
	flex: none;
	min-width: 3.6em;
	padding: 2px 8px;
	background: var(--mz-sand);
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	text-align: center;
}

.mz-ems__text small {
	color: var(--mz-ink-3);
}

.mz-ems__fehler {
	margin: 10px 0 0;
	color: #b3261e;
	font-weight: 600;
}

.mz-ems__hinweis {
	margin: 12px 0 0;
	color: var(--mz-ink-2);
	font-size: 0.9rem;
}

/* Fantasie-Stammbaum */
.mz-fs__form {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 16px 20px;
	max-width: 900px;
	margin-bottom: 1.5em;
	padding: clamp(20px, 3vw, 32px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-fs__feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 700;
	font-size: 0.95rem;
}

.mz-fs__feld small {
	color: var(--mz-ink-3);
	font-weight: 500;
}

.mz-fs__feld--breit,
.mz-fs__aktionen,
.mz-fs__hinweis {
	grid-column: 1 / -1;
}

/* Optionales eigenes Foto: rundes Vorschaubild, Datei-Knopf im Stil der übrigen Knöpfe */
.mz-fs__foto-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mz-fs__foto-vorschau {
	width: 64px;
	height: 64px;
	border: 3px solid #c9a46a;
	border-radius: 50%;
	background: center / cover no-repeat var(--mz-sand);
}

.mz-fs__foto-knopf {
	position: relative;
	padding: 0.6em 1.1em;
	border: 1.5px dashed var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	font-weight: 600;
	cursor: pointer;
}

.mz-fs__foto-knopf:hover,
.mz-fs__foto-knopf:focus-within {
	border-color: var(--mz-accent);
	color: var(--mz-accent);
}

.mz-fs__foto-knopf input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.mz-fs__foto-weg {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mz-ink-3);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.mz-fs__aktionen,
.mz-fs__hinweis {
	margin: 0;
}

.mz-fs__hinweis {
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-fs__fehler {
	margin: 6px 0 0;
	color: #b3261e;
	font-size: 0.9rem;
}

.mz-fs__urkunde svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-l);
}

.mz-fs__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 2em;
}

.mz-fs__knoepfe button:not(:first-child) {
	background: transparent;
	border: 1.5px solid var(--mz-ink);
	color: var(--mz-ink);
}

/* Drucken: nur die Urkunde, quer */
@media print {
	html.mz-fs-druck body * {
		visibility: hidden !important;
	}

	html.mz-fs-druck .mz-fs__urkunde,
	html.mz-fs-druck .mz-fs__urkunde * {
		visibility: visible !important;
	}

	html.mz-fs-druck .mz-fs__urkunde {
		position: fixed;
		inset: 0;
	}

	html.mz-fs-druck .mz-fs__urkunde svg {
		box-shadow: none;
		border-radius: 0;
	}
}

.mz-helfer-bereich h2 {
	font-size: 1.35rem;
}

.mz-icon img {
	border-radius: 0;
}

.mz-card.mz-card--bild {
	padding: 0;
	overflow: hidden;
}

.mz-card--bild > :not(.mz-card__img) {
	padding: 0 20px;
}

.mz-card--bild > :last-child {
	padding-bottom: 20px;
}

.mz-card__img {
	margin: 0 0 16px;
	overflow: hidden;
}

.mz-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.5s var(--mz-ease);
}

.mz-card--bild:hover .mz-card__img img {
	transform: scale(1.05);
}

/* Merkmal-Chips */
.mz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0.6em 0 0;
}

.mz-chips span {
	padding: 0.2em 0.7em;
	background: var(--mz-sand);
	border-radius: 999px;
	color: var(--mz-ink-2);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Neueste Ratgeber */
.mz-latest .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-latest .wp-block-post {
	position: relative;
	margin: 0;
	padding: 24px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-latest .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow-l);
}

.mz-latest .wp-block-post-title {
	margin-bottom: 0.5em;
	font-size: 1.1rem;
}

.mz-latest .wp-block-post-title a {
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-latest .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mz-latest .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--mz-ink-2);
	font-size: 0.95rem;
}

.mz-latest .wp-block-post-excerpt__more-text {
	display: none;
}

/* =========================================================================
   7. Übersichtsseiten als Kartenraster
   ========================================================================= */
.mz-grid-archive .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;
}

.mz-grid-archive .site-main > :not(article) {
	grid-column: 1 / -1;
}

.mz-grid-archive .site-main > article {
	margin: 0;
}

.mz-grid-archive .inside-article {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 0 20px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	overflow: hidden;
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-grid-archive .inside-article:hover {
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow-l);
}

.mz-grid-archive .post-image {
	order: -1;
	margin: 0 0 16px;
	overflow: hidden;
}

.mz-grid-archive .post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s var(--mz-ease);
}

.mz-grid-archive .inside-article:hover .post-image img {
	transform: scale(1.05);
}

.mz-grid-archive .post-image.is-placeholder img {
	object-fit: cover;
}

.mz-grid-archive .entry-header,
.mz-grid-archive .entry-summary {
	padding: 0 20px;
}

.mz-grid-archive .inside-article > .entry-header:first-child {
	padding-top: 20px;
}

/* Mit Bild steht der Titel optisch unter dem Bild (order: -1), dort reicht der Bildabstand */
.mz-grid-archive .inside-article:has(> .post-image) > .entry-header:first-child {
	padding-top: 0;
}

.mz-grid-archive .entry-header {
	margin-bottom: 0.4em;
}

.mz-grid-archive .entry-title {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.mz-grid-archive .entry-title a {
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-grid-archive .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mz-grid-archive .entry-summary {
	margin: 0;
	color: var(--mz-ink-2);
	font-size: 0.93rem;
}

.mz-grid-archive .entry-summary p {
	margin-bottom: 0;
}

.mz-grid-archive .entry-summary .mz-chips {
	margin-top: 0.2em;
}

.mz-grid-archive .read-more,
.mz-grid-archive .entry-meta,
.mz-grid-archive footer.entry-meta {
	display: none;
}

/* Merkmal-Filter in der Rassen-Übersicht */
.mz-rf {
	margin: 0 0 8px;
	padding: 18px 20px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-rf__felder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.mz-rf__feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--mz-ink-2);
}

.mz-rf__feld select {
	width: 100%;
	padding: 0.55em 0.7em;
	background: var(--mz-bg);
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
	color: var(--mz-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 550;
}

.mz-rf__feld select:focus {
	border-color: var(--mz-accent);
	outline: none;
}

.mz-rf__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	font-weight: 700;
}

body .mz-rf .mz-rf__reset {
	padding: 0.35em 0.9em;
	background: var(--mz-sand);
	border: 0;
	border-radius: 999px;
	color: var(--mz-ink);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

body .mz-rf .mz-rf__reset:hover {
	background: var(--mz-accent-soft);
	color: var(--mz-accent-ink);
}

.mz-rf__leer {
	margin: 10px 0 0;
	color: var(--mz-ink-2);
}

.mz-grid-archive .site-main > article[hidden] {
	display: none;
}

/* Rassen-Filter auf Übersichten */
.rasse-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 0;
	padding: 16px 20px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.rasse-filter label {
	margin: 0;
	font-weight: 650;
}

.rasse-filter__controls {
	flex: 1 1 16em;
	display: flex;
	gap: 0.5em;
}

.rasse-filter select {
	width: 100%;
	max-width: 24em;
}

.rasse-filter__hint {
	flex-basis: 100%;
	margin: 0;
	color: var(--mz-ink-2);
	font-size: 0.9em;
}

/* =========================================================================
   8. Rassen-Seite
   ========================================================================= */
.single-katzenrassen .featured-image {
	margin-bottom: 0.6em;
}

.single-katzenrassen .featured-image img {
	width: 100%;
	max-height: 480px;
	border-radius: var(--mz-radius-l);
	object-fit: cover;
	object-position: center 30%;
	box-shadow: var(--mz-shadow);
}

/* Diashow (KI-Bilder): alle Bilder im selben Rasterfeld, das aktive wird eingeblendet */
.mz-slider {
	margin: 0 0 2em;
}

.mz-slider__fenster {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
	background: var(--mz-sand);
}

.mz-slider__bild {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

.mz-slider__bild.is-aktiv {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease-in-out, visibility 0s;
}

.mz-slider__gross {
	display: block;
	cursor: zoom-in;
}

.mz-slider__gross:focus-visible {
	outline: 3px solid var(--mz-accent);
	outline-offset: -3px;
}

.mz-slider__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 560px;
	object-fit: cover;
}

/* Titelbild in Ratgeber-, Ernährungs- und Equipment-Artikeln */
.single-ratgeber .featured-image,
.single-ernaehrung .featured-image,
.single-equipment .featured-image {
	position: relative;
	margin: 0 auto 1.5em;
	padding: 0;
}

.single-ratgeber .featured-image img,
.single-ernaehrung .featured-image img,
.single-equipment .featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

/* Container, in den assets/js/ki-marke.js die Marke legt */
.mz-ki-rahmen {
	position: relative;
}

/* Ratespiel-Vorschau: rechts unten sitzt schon das Fragezeichen */
.mz-sp__bild.is-raten .mz-ki-marke {
	right: auto !important;
	left: 10px;
}

/* Dezenter KI-Hinweis in der Bildecke – auf allen KI-Bildern gleich (Diashow, Abschnittsbilder, ki-marke.js) */
.mz-ki-marke {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 1px 6px 1px 18px;
	border-radius: 4px;
	/* kleiner Katzenkopf aus dem Logo vor dem "KI" */
	background: url("assets/img/logo-mark-hell.svg") 5px 50% / 10px 10px no-repeat, rgba(22, 20, 18, 0.35);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	pointer-events: none;
}

.mz-slider__pause {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 20, 18, 0.35);
	cursor: pointer;
}

.mz-slider__pause:hover,
.mz-slider__pause:focus-visible {
	background: rgba(22, 20, 18, 0.6);
}

/* Pause-Symbol (zwei Balken), angehalten: Play-Dreieck */
.mz-slider__pause span {
	display: block;
	width: 10px;
	height: 12px;
	margin: auto;
	border-right: 3px solid #fff;
	border-left: 3px solid #fff;
}

.mz-slider__pause.is-angehalten span {
	width: 0;
	height: 0;
	margin-left: 12px;
	border-top: 6px solid transparent;
	border-right: 0;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
}

.mz-slider__pause[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mz-slider__bild,
	.mz-slider__bild.is-aktiv {
		transition: none;
	}
}

.mz-slider__pfeil {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mz-ink);
	font-size: 1.7rem;
	line-height: 1;
	box-shadow: var(--mz-shadow-s);
	transform: translateY(-50%);
	cursor: pointer;
}

.mz-slider__pfeil:hover,
.mz-slider__pfeil:focus-visible {
	background: #fff;
	color: var(--mz-accent-ink);
}

/* Pfeil-Knöpfe: SVG exakt mittig im Kreis */
.mz-slider__pfeil,
.mz-karussell__steuerung button,
.mz-lightbox__zu,
.mz-lightbox__pfeil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mz-pfeil {
	display: block;
	flex: none;
}

.mz-slider__pfeil.is-zurueck {
	left: 14px;
}

.mz-slider__pfeil.is-weiter {
	right: 14px;
}

/* Pfeile nur zeigen, wenn man mit der Maus über der Diashow ist oder per Tastatur dorthin springt */
@media (hover: hover) {
	.mz-slider__pfeil {
		opacity: 0;
		transition: opacity 0.2s var(--mz-ease);
	}

	.mz-slider__fenster:hover .mz-slider__pfeil,
	.mz-slider__pfeil:focus-visible {
		opacity: 1;
	}
}

.mz-slider__daumen {
	position: relative;
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.mz-slider__daumen-btn {
	flex: 0 0 auto;
	width: 72px;
	height: 54px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--mz-radius-s);
	background: none;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s var(--mz-ease), border-color 0.2s var(--mz-ease);
}

.mz-slider__daumen-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-slider__daumen-btn:hover,
.mz-slider__daumen-btn[aria-current="true"] {
	opacity: 1;
}

.mz-slider__daumen-btn[aria-current="true"] {
	border-color: var(--mz-accent);
}

@media (max-width: 600px) {
	.mz-slider__fenster {
		border-radius: var(--mz-radius);
	}

	.mz-slider__pfeil {
		display: none;
	}

	.mz-slider__daumen-btn {
		width: 56px;
		height: 42px;
	}
}

/* Großansicht */
.mz-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(14, 12, 10, 0.94);
	color: #fff;
}

.mz-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mz-lightbox::backdrop {
	background: rgba(14, 12, 10, 0.94);
}

.mz-lightbox figure {
	margin: 0;
	max-width: min(1600px, 92vw);
	text-align: center;
}

.mz-lightbox img {
	max-width: 100%;
	max-height: 82vh;
	border-radius: var(--mz-radius-s);
}

.mz-lightbox figcaption {
	margin-top: 0.8em;
	font-size: 0.9rem;
}

.mz-lightbox figcaption a {
	color: inherit;
}

.mz-lightbox__zu,
.mz-lightbox__pfeil {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.mz-lightbox__zu {
	top: 16px;
	right: 16px;
}

.mz-lightbox__pfeil {
	top: 50%;
	transform: translateY(-50%);
}

.mz-lightbox__pfeil.is-zurueck {
	left: 16px;
}

.mz-lightbox__pfeil.is-weiter {
	right: 16px;
}

/* Rassen-Karussell (Startseite) */
.mz-karussell {
	margin: 0 0 3em;
}

.mz-karussell__kopf {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1em;
}

.mz-karussell__kopf .mz-section-title {
	margin-bottom: 0.6em;
}

.mz-karussell__steuerung {
	display: flex;
	gap: 8px;
	margin-bottom: 0.9em;
}

.mz-karussell__steuerung button {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--mz-line);
	border-radius: 50%;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.mz-karussell__steuerung button:hover:not(:disabled) {
	border-color: var(--mz-accent);
	color: var(--mz-accent-ink);
}

.mz-karussell__steuerung button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mz-karussell__bahn {
	display: grid;
	grid-auto-columns: minmax(200px, 23%);
	grid-auto-flow: column;
	gap: 16px;
	margin: 0;
	padding: 4px 4px 14px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.mz-karussell__karte {
	margin: 0;
	scroll-snap-align: start;
}

.mz-karussell__karte a {
	display: block;
	overflow: hidden;
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	color: var(--mz-ink);
	text-decoration: none;
	box-shadow: var(--mz-shadow-s);
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-karussell__karte a:hover,
.mz-karussell__karte a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--mz-shadow);
}

.mz-karussell__karte img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mz-karussell__name {
	display: block;
	padding: 0.7em 0.9em 0;
	font-weight: 700;
}

.mz-karussell__info {
	display: block;
	min-height: 1.4em;
	padding: 0 0.9em 0.8em;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-karussell__mehr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0.4em 0 0;
	font-size: 0.9rem;
}

.mz-karussell__mehr a {
	color: var(--mz-accent-ink);
	font-weight: 600;
}

@media (max-width: 600px) {
	.mz-karussell__bahn {
		grid-auto-columns: 70%;
	}

	.mz-karussell__steuerung {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mz-karussell__karte a {
		transition: none;
	}
}

/* Bilder in den Abschnitten des Rassentextes */
.mz-abschnittsbild {
	position: relative;
	margin: 0.4em 0 1.4em;
}

.mz-abschnittsbild img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--mz-radius);
}


.bild-credit {
	margin: 0 0 2em;
	color: var(--mz-ink-3);
	font-size: 0.78rem;
}

.bild-credit a {
	color: inherit;
}

/* Steckbrief als Kachelraster */
.rasse-steckbrief {
	margin: 0 0 2.5em;
	padding: 28px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

.rasse-steckbrief__title {
	margin: 0 0 18px;
	font-size: 1.35rem;
}

.rasse-steckbrief__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.rasse-steckbrief__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--mz-bg);
	border-radius: var(--mz-radius-s);
}

.rasse-steckbrief__row--charakter,
.rasse-steckbrief__row--vertraeglichkeit,
.rasse-steckbrief__row--haltung {
	grid-column: span 3;
}

.rasse-steckbrief__row dt {
	color: var(--mz-ink-3);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rasse-steckbrief__row dd {
	margin: 0;
	font-weight: 600;
}

.rasse-steckbrief__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rasse-steckbrief__tags li {
	margin: 0;
	padding: 0.25em 0.8em;
	background: var(--mz-surface);
	border-radius: 999px;
	box-shadow: var(--mz-shadow-s);
	font-size: 0.88rem;
}

.rasse-steckbrief__scale {
	display: inline-flex;
	gap: 5px;
	padding-top: 4px;
}

.rasse-steckbrief__dot {
	width: 22px;
	height: 8px;
	background: var(--mz-line);
	border-radius: 999px;
}

.rasse-steckbrief__dot.is-on {
	background: var(--mz-accent);
}

.rasse-steckbrief__compare {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
}

/* Kopf der Rassen-Seite: Chips und Eckdaten unter dem Titel */
.mz-rasse-kopf {
	margin-top: 0.6em;
}

.mz-rasse-kopf .mz-chips span {
	padding: 0.3em 0.9em;
	background: var(--mz-surface);
	box-shadow: var(--mz-shadow-s);
	font-size: 0.85rem;
}

.mz-rasse-fakten {
	margin: 0.7em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.92rem;
	font-weight: 600;
}

/* Passt zu dir, wenn … */
.mz-passung {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 0 2.5em;
}

.mz-passung__spalte {
	padding: 22px 24px;
	border-radius: var(--mz-radius);
}

.mz-passung__spalte.is-ja {
	background: var(--mz-green-soft);
}

.mz-passung__spalte.is-nein {
	background: var(--mz-red-soft);
}

.mz-passung h2 {
	margin-bottom: 0.6em;
	font-size: 1.1rem;
}

.mz-passung ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-passung li {
	position: relative;
	margin: 0 0 0.45em;
	padding-left: 1.8em;
	font-size: 0.97rem;
}

.mz-passung li::before {
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	color: #fff;
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1.3em;
	text-align: center;
}

.mz-passung .is-ja li::before {
	content: "✓";
	background: var(--mz-green);
}

.mz-passung .is-nein li::before {
	content: "!";
	background: var(--mz-red);
}

/* Eine kleine Geschichte: wie eine Buchseite */
.mz-geschichte {
	position: relative;
	margin: 0 0 2.5em;
	padding: clamp(28px, 5vw, 48px);
	background:
		radial-gradient(80% 60% at 100% 0%, rgba(208, 120, 44, 0.08), transparent 60%),
		#fffdf9;
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

.mz-geschichte::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 26px;
	width: 46px;
	height: 46px;
	background: url("assets/img/logo-mark.svg") center / contain no-repeat;
	opacity: 0.08;
}

.mz-geschichte__label {
	margin: 0 0 0.4em;
	color: var(--mz-accent-ink);
	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mz-geschichte__titel {
	margin-bottom: 0.8em;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.mz-geschichte__text {
	color: var(--mz-ink-2);
	font-size: 1.08rem;
	line-height: 1.8;
}

.mz-geschichte__text > p:first-child::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--mz-accent);
	font-size: 3.4em;
	font-weight: 800;
	line-height: 0.85;
}

.mz-geschichte__hinweis {
	margin: 1.2em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.82rem;
	font-style: italic;
}

/* Video (YouTube, bis zur Einwilligung vom Content Blocker in Real Cookie Banner zurückgehalten) */
.mz-video {
	margin: 2.5em 0;
}

.mz-video h2 {
	margin-bottom: 0.7em;
	font-size: 1.3rem;
}

.mz-video__rahmen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		radial-gradient(60% 80% at 80% 20%, rgba(208, 120, 44, 0.35), transparent 60%),
		var(--mz-ink);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

.mz-video__rahmen iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Solange der Content Blocker steht: Rahmen wächst mit dem Hinweistext, statt ihn auf 16:9 abzuschneiden */
.mz-video__rahmen:has(.rcb-content-blocker) {
	aspect-ratio: auto;
	overflow: visible;
	background: none;
	box-shadow: none;
}

/* Ähnliche Rassen */
.mz-aehnlich {
	margin: 2.5em 0;
}

.mz-aehnlich h2 {
	margin-bottom: 0.7em;
	font-size: 1.3rem;
}

.mz-aehnlich__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}

.mz-aehnlich__karte {
	display: block;
	overflow: hidden;
	padding-bottom: 14px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink);
	text-decoration: none;
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-aehnlich__karte:hover {
	color: var(--mz-ink);
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow-l);
}

.mz-aehnlich__karte img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
}

.mz-aehnlich__name {
	display: block;
	padding: 12px 16px 0;
	font-weight: 750;
}

.mz-aehnlich__karte .mz-chips {
	padding: 0 16px;
}

/* Themenseiten (Katzenrassen für die Wohnung usw.) */
.mz-thema__kriterien {
	margin: 2em 0;
	padding: 20px 24px;
	background: var(--mz-sand);
	border-radius: var(--mz-radius);
}

.mz-thema__kriterien h2,
.mz-thema__liste h2,
.mz-thema__weitere h2,
.mz-thema__andere h2 {
	margin-bottom: 0.6em;
	font-size: 1.3rem;
}

.mz-thema__kriterien ul {
	margin: 0 0 0.8em 1.2em;
}

.mz-thema__hinweis {
	margin: 0;
	color: var(--mz-ink-3);
	font-size: 0.9rem;
}

.mz-thema__liste {
	margin: 2.5em 0;
}

.mz-thema__raster {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-thema__raster li {
	margin: 0;
}

.mz-thema__raster .mz-aehnlich__karte {
	position: relative;
	height: 100%;
}

.mz-thema__platz {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 15px;
	background: var(--mz-ink);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 750;
	line-height: 30px;
	text-align: center;
}

.mz-thema__rest a {
	padding: 0.35em 0.9em;
	background: var(--mz-surface);
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	color: var(--mz-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.mz-thema__rest a:hover {
	background: var(--mz-accent-soft);
	color: var(--mz-accent-ink);
}

.mz-thema__andere {
	margin: 2.5em 0;
}

.mz-thema__pillen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mz-thema__pillen--uebersicht {
	margin-top: 1em;
}

.mz-thema__pillen--uebersicht span {
	margin-right: 4px;
	font-weight: 700;
}

/* Affiliate: Produktbox, weitere Empfehlungen, Kennzeichnung */
.mz-produkt {
	margin: 2.5em 0;
	padding: clamp(22px, 4vw, 36px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

.mz-produkt__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0.4em;
	color: var(--mz-accent-ink);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Artikel-Bausteine (Ratgeber, Ernährung, Equipment) */
.mz-artikel-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0.4em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.88rem;
}

.mz-artikel-meta span + span::before {
	content: "·";
	margin-right: 14px;
}

.mz-kurz {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--mz-accent-soft);
	border-radius: var(--mz-radius);
}

.mz-kurz__titel {
	margin: 0 0 0.4em;
	color: var(--mz-accent-ink);
	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mz-kurz ul {
	margin: 0;
	padding-left: 1.2em;
}

.mz-kurz li {
	margin-bottom: 0.3em;
}

.mz-inhalt {
	margin: 0 0 2em;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
}

.mz-inhalt summary {
	padding: 12px 18px;
	font-weight: 700;
	cursor: pointer;
}

.mz-inhalt ol {
	margin: 0;
	padding: 0 18px 14px 2.4em;
	columns: 2 240px;
	column-gap: 2em;
}

.mz-inhalt li {
	margin-bottom: 0.3em;
	break-inside: avoid;
}

.mz-inhalt a {
	color: var(--mz-ink-2);
	text-decoration: none;
}

.mz-inhalt a:hover,
.mz-inhalt a:focus-visible {
	color: var(--mz-accent-ink);
	text-decoration: underline;
}


/* Hinweiskästen im Artikeltext */
.mz-box {
	margin: 1.6em 0;
	padding: 16px 20px;
	border-left: 4px solid var(--mz-ink-3);
	border-radius: var(--mz-radius-s);
	background: var(--mz-sand);
}

.mz-box > :last-child {
	margin-bottom: 0;
}

.mz-box__titel {
	margin: 0 0 0.4em;
	font-weight: 750;
}

.mz-box ul {
	margin: 0;
	padding-left: 1.2em;
}

.mz-box--tierarzt {
	border-color: var(--mz-red);
	background: var(--mz-red-soft);
}

.mz-box--tierarzt .mz-box__titel {
	color: var(--mz-red);
}

.mz-box--tipp {
	border-color: var(--mz-green);
	background: var(--mz-green-soft);
}

.mz-box--tipp .mz-box__titel {
	color: var(--mz-green);
}

/* Tabellen */
.entry-content .wp-block-table {
	margin: 1.6em 0;
	overflow-x: auto;
}

.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--mz-line);
	text-align: left;
	vertical-align: top;
}

.entry-content .wp-block-table thead th {
	background: var(--mz-sand);
	font-weight: 700;
}

.entry-content .wp-block-table figcaption {
	margin-top: 0.5em;
	color: var(--mz-ink-3);
	font-size: 0.8rem;
}

/* FAQ in Artikeln: gleiche Optik wie .mz-faq */
.single-ratgeber .wp-block-details,
.single-ernaehrung .wp-block-details,
.single-equipment .wp-block-details,
.mz-artikel-seite .wp-block-details {
	margin-bottom: 10px;
	background: var(--mz-surface);
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
}

.single-ratgeber .wp-block-details summary,
.single-ernaehrung .wp-block-details summary,
.single-equipment .wp-block-details summary,
.mz-artikel-seite .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.single-ratgeber .wp-block-details summary::-webkit-details-marker,
.single-ernaehrung .wp-block-details summary::-webkit-details-marker,
.single-equipment .wp-block-details summary::-webkit-details-marker,
.mz-artikel-seite .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.single-ratgeber .wp-block-details summary::after,
.single-ernaehrung .wp-block-details summary::after,
.single-equipment .wp-block-details summary::after,
.mz-artikel-seite .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		linear-gradient(var(--mz-accent-ink), var(--mz-accent-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--mz-accent-ink), var(--mz-accent-ink)) center / 2px 12px no-repeat,
		var(--mz-accent-soft);
	transition: transform 0.25s var(--mz-ease);
}

.single-ratgeber .wp-block-details[open] summary::after,
.single-ernaehrung .wp-block-details[open] summary::after,
.single-equipment .wp-block-details[open] summary::after,
.mz-artikel-seite .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.single-ratgeber .wp-block-details > p,
.single-ernaehrung .wp-block-details > p,
.single-equipment .wp-block-details > p,
.mz-artikel-seite .wp-block-details > p {
	margin: 0;
	padding: 0 18px 16px;
}

.mz-quellen {
	margin: 3em 0 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--mz-line);
	color: var(--mz-ink-2);
	font-size: 0.88rem;
}

.mz-quellen h2 {
	font-size: 1.05rem;
}

.mz-quellen a {
	color: inherit;
}

/* Rassen-Quiz */
.mz-quiz {
	margin: 3em 0;
	padding: clamp(22px, 4vw, 36px);
	background: var(--mz-accent-soft);
	border-radius: var(--mz-radius-l);
}

.mz-quiz__kicker {
	margin: 0 0 0.2em;
	color: var(--mz-accent-ink);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mz-quiz__titel {
	margin-bottom: 0.6em;
}

.mz-quiz__bild {
	position: relative;
	max-width: 560px;
	margin: 0 0 1em;
	overflow: hidden;
	border-radius: var(--mz-radius);
	background: var(--mz-sand);
}

.mz-quiz__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	animation: mz-quiz-ein 0.35s var(--mz-ease);
}

@keyframes mz-quiz-ein {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mz-quiz__bild img {
		animation: none;
	}
}

.mz-quiz__kopf {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.8em;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
	font-weight: 600;
}

.mz-quiz__balken {
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(22, 20, 18, 0.08);
}

.mz-quiz__balken span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--mz-accent);
	transition: width 0.3s var(--mz-ease);
}

.mz-quiz__frage {
	margin-bottom: 0.8em;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
}

.mz-quiz__frage:focus,
.mz-quiz__ergebnis:focus {
	outline: none;
}

.mz-quiz__antworten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 10px;
	margin-bottom: 1em;
}

.mz-quiz__antwort {
	padding: 0.85em 1em;
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	color: var(--mz-ink);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s var(--mz-ease), background 0.15s var(--mz-ease);
}

.mz-quiz__antwort:hover:not(:disabled),
.mz-quiz__antwort:focus-visible {
	border-color: var(--mz-accent);
}

.mz-quiz__antwort:disabled {
	cursor: default;
	opacity: 0.55;
}

.mz-quiz__antwort.is-richtig,
.mz-quiz__antwort.is-falsch {
	opacity: 1;
}

.mz-quiz__antwort.is-richtig {
	border-color: var(--mz-green);
	background: var(--mz-green-soft);
}

.mz-quiz__antwort.is-falsch {
	border-color: var(--mz-red);
	background: var(--mz-red-soft);
}

.mz-quiz__rueckmeldung {
	margin-bottom: 1em;
	padding: 12px 16px;
	border-radius: var(--mz-radius-s);
	background: var(--mz-surface);
}

.mz-quiz__rueckmeldung.is-richtig strong {
	color: var(--mz-green);
}

.mz-quiz__rueckmeldung.is-falsch strong {
	color: var(--mz-red);
}

.mz-quiz__weiter {
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mz-quiz__weiter:hover,
.mz-quiz__weiter:focus-visible {
	background: var(--mz-accent-ink);
}

.mz-quiz__ergebnis {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mz-quiz__urteil {
	font-weight: 600;
}

.mz-quiz__bester {
	margin: 0.8em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-quiz__reiter {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 1.2em;
	padding: 4px;
	border-radius: 999px;
	background: rgba(22, 20, 18, 0.06);
}

.mz-quiz__reiter button {
	padding: 0.5em 1.1em;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--mz-ink-2);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.mz-quiz__reiter button[aria-selected="true"] {
	background: var(--mz-surface);
	color: var(--mz-ink);
	box-shadow: var(--mz-shadow-s);
}

.mz-quiz__reiter button:focus-visible {
	outline: 3px solid var(--mz-accent);
	outline-offset: 2px;
}

/* Einzel-Puzzle in der Spielecke: etwas schmaler als die Seite */
.mz-spiel--einzeln {
	max-width: 620px;
}

.mz-spiel--einzeln .mz-puzzle__kopf .mz-spiel__frage {
	margin-top: 0;
}

.mz-quiz__mehr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 1.6em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(22, 20, 18, 0.1);
}

.mz-quiz__mehr p {
	margin: 0 6px 0 0;
	color: var(--mz-ink-2);
	font-weight: 600;
}

.mz-quiz__spiel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.5em 1em;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 0.92rem;
	font-weight: 650;
	text-decoration: none;
}

.mz-quiz__spiel:hover,
.mz-quiz__spiel:focus-visible {
	border-color: var(--mz-accent);
	color: var(--mz-accent-ink);
}

/* Puzzle-Symbol (drei kleine Quadrate) vor "Puzzle mit der …" */
.mz-quiz__spiel.is-puzzle::before {
	content: "";
	width: 12px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 7px 0 / 5px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 0 7px / 5px 5px no-repeat;
}

.mz-quiz__fakt {
	padding: 12px 16px;
	border-radius: var(--mz-radius-s);
	background: var(--mz-surface);
}

/* Spiele-Bereich auf der Startseite */
.mz-sp {
	margin: 0 0 3.5em;
	padding: clamp(22px, 4vw, 40px);
	background:
		radial-gradient(70% 120% at 100% 0%, rgba(208, 120, 44, 0.18), transparent 60%),
		var(--mz-accent-soft);
	border-radius: var(--mz-radius-l);
}

.mz-sp__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 1.2em;
}

.mz-sp__kicker {
	margin: 0 0 0.2em;
	color: var(--mz-accent-ink);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mz-sp__kopf .mz-section-title {
	margin: 0;
}

.mz-sp__alle {
	padding: 0.6em 1.2em;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.mz-sp__alle:hover,
.mz-sp__alle:focus-visible {
	background: var(--mz-accent-ink);
	color: #fff;
}

.mz-sp__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-sp__karte {
	margin: 0;
}

.mz-sp__karte a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px 10px 16px;
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	color: var(--mz-ink);
	text-decoration: none;
	box-shadow: var(--mz-shadow-s);
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-sp__karte a:hover,
.mz-sp__karte a:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow-l);
}

.mz-sp__bild {
	position: relative;
	display: grid;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
	border-radius: var(--mz-radius-s);
	background: var(--mz-sand);
}

.mz-sp__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ratespiel: großes Fragezeichen */
.mz-sp__frage {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mz-ink);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 800;
}

/* Puzzle: Rasterlinien und eine leere Ecke */
.mz-sp__bild.is-puzzle::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent calc(33.33% - 1.5px), #fff calc(33.33% - 1.5px), #fff calc(33.33% + 1.5px), transparent calc(33.33% + 1.5px), transparent calc(66.66% - 1.5px), #fff calc(66.66% - 1.5px), #fff calc(66.66% + 1.5px), transparent calc(66.66% + 1.5px)),
		linear-gradient(transparent calc(33.33% - 1.5px), #fff calc(33.33% - 1.5px), #fff calc(33.33% + 1.5px), transparent calc(33.33% + 1.5px), transparent calc(66.66% - 1.5px), #fff calc(66.66% - 1.5px), #fff calc(66.66% + 1.5px), transparent calc(66.66% + 1.5px));
}

.mz-sp__bild.is-puzzle::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(33.33% - 1.5px);
	height: calc(33.33% - 1.5px);
	background: var(--mz-ink);
}

/* Memory: 2 × 2 Karten, zwei verdeckt */
.mz-sp__bild.is-memory {
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--mz-accent-soft);
}

.mz-sp__bild.is-memory img,
.mz-sp__bild.is-memory span {
	border-radius: 6px;
}

.mz-sp__bild.is-memory span {
	background: var(--mz-surface) url("assets/img/logo-mark-dunkel.svg") center / 40% no-repeat;
}

/* Wer wird wer? Kitten mit Fragezeichen */
.mz-sp__bild.is-werwird img {
	object-position: 50% 35%;
}

/* Mehr oder weniger: zwei Bilder mit "vs" */
.mz-sp__bild.is-vergleich {
	grid-template-columns: 1fr 1fr;
	gap: 3px;
}

.mz-sp__vs {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mz-accent);
	color: #fff;
	font-weight: 800;
	transform: translate(-50%, -50%);
}

.mz-sp__titel {
	padding: 0 6px;
	font-size: 1.05rem;
	font-weight: 750;
}

.mz-sp__text {
	flex: 1;
	padding: 2px 6px 10px;
	color: var(--mz-ink-2);
	font-size: 0.9rem;
}

.mz-sp__los {
	padding: 0 6px;
	color: var(--mz-accent-ink);
	font-size: 0.9rem;
	font-weight: 700;
}

.mz-sp__hinweis {
	margin: 1em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.8rem;
}

/* Fünf Spiele: auf breiten Schirmen eine Reihe */
.mz-sp__raster:has(> :nth-child(5)) {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) and (min-width: 901px) {
	.mz-sp__raster:has(> :nth-child(5)) {
		grid-template-columns: repeat(6, 1fr);
	}

	.mz-sp__raster:has(> :nth-child(5)) > * {
		grid-column: span 2;
	}

	.mz-sp__raster:has(> :nth-child(5)) > :nth-child(n+4) {
		grid-column: span 3;
	}
}

@media (max-width: 900px) {
	.mz-sp__raster,
	.mz-sp__raster:has(> :nth-child(5)) {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Ungerade Anzahl: die letzte Karte über die ganze Breite, Bild flacher */
	.mz-sp__karte:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.mz-sp__karte:last-child:nth-child(odd) .mz-sp__bild {
		aspect-ratio: 2 / 1;
	}
}

/* Handy: Spielekarten einspaltig, Bilder flacher */
@media (max-width: 600px) {
	.mz-sp__raster,
	.mz-sp__raster:has(> :nth-child(5)) {
		grid-template-columns: 1fr;
	}

	.mz-sp__karte .mz-sp__bild {
		aspect-ratio: 2 / 1;
	}
}

@media (max-width: 420px) {
	.mz-sp__raster {
		gap: 10px;
	}

	.mz-sp__titel {
		font-size: 0.95rem;
	}

	.mz-sp__text {
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mz-sp__karte a {
		transition: none;
	}
}

/* Spielecke */
.mz-spiele {
	margin: 0;
}

.mz-spiele__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.4em;
}

.mz-spiele__tabs button {
	padding: 0.6em 1.1em;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.mz-spiele__tabs button[aria-selected="true"] {
	border-color: var(--mz-ink);
	background: var(--mz-ink);
	color: #fff;
}

.mz-spiele__tabs button:focus-visible,
.mz-spiel button:focus-visible,
.mz-puzzle:focus-visible {
	outline: 3px solid var(--mz-accent);
	outline-offset: 2px;
}

.mz-spiel {
	padding: clamp(18px, 4vw, 32px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-spiel__intro {
	color: var(--mz-ink-2);
}

.mz-spiele__hinweis {
	margin-top: 1em;
	color: var(--mz-ink-3);
	font-size: 0.8rem;
	text-align: center;
}

.mz-spiel__stufen {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 1em;
	padding: 4px;
	border-radius: 999px;
	background: var(--mz-sand);
}

.mz-spiel__stufe {
	padding: 0.4em 0.9em;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--mz-ink-2);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 650;
	cursor: pointer;
}

.mz-spiel__stufe[aria-pressed="true"] {
	background: var(--mz-surface);
	color: var(--mz-ink);
	box-shadow: var(--mz-shadow-s);
}

.mz-spiel__stand {
	margin: 0 0 0.8em;
	color: var(--mz-ink-3);
	font-size: 0.88rem;
	font-weight: 600;
}

.mz-spiel__frage {
	margin: 0.8em 0 0.6em;
	font-size: 1.2rem;
	font-weight: 700;
}

.mz-spiel__bild {
	position: relative;
	overflow: hidden;
	border-radius: var(--mz-radius);
	background: var(--mz-sand);
}

.mz-spiel__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mz-spiel__antworten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 10px;
	margin-bottom: 1em;
}

.mz-spiel__antwort {
	padding: 0.8em 1em;
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	color: var(--mz-ink);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.mz-spiel__antwort:hover:not(:disabled) {
	border-color: var(--mz-accent);
}

.mz-spiel__antwort:disabled {
	opacity: 0.55;
	cursor: default;
}

.mz-spiel__antwort.is-richtig,
.mz-vergleich__karte.is-richtig {
	border-color: var(--mz-green);
	background: var(--mz-green-soft);
	opacity: 1;
}

.mz-spiel__antwort.is-falsch,
.mz-vergleich__karte.is-falsch {
	border-color: var(--mz-red);
	background: var(--mz-red-soft);
	opacity: 1;
}

.mz-spiel__rueck {
	padding: 10px 14px;
	border-radius: var(--mz-radius-s);
	background: var(--mz-sand);
}

.mz-spiel__rueck.is-richtig strong {
	color: var(--mz-green);
}

.mz-spiel__rueck.is-falsch strong {
	color: var(--mz-red);
}

.mz-spiel__link {
	color: var(--mz-accent-ink);
	font-weight: 600;
}

.mz-spiel__knopf {
	padding: 0.65em 1.3em;
	border: 0;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mz-spiel__knopf:hover {
	background: var(--mz-accent-ink);
}

.mz-spiel__knopf.is-leise {
	border: 1px solid var(--mz-line);
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 0.9rem;
}

.mz-spiel__hilfe {
	margin-top: 0.8em;
	color: var(--mz-ink-3);
	font-size: 0.82rem;
}

/* Schiebepuzzle */
.mz-puzzle__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mz-puzzle {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), 1fr);
	gap: 3px;
	aspect-ratio: 16 / 9;
	padding: 3px;
	border-radius: var(--mz-radius);
	background: var(--mz-ink);
}

.mz-puzzle__teil,
.mz-puzzle__luecke {
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--mz-sand);
	background-repeat: no-repeat;
	cursor: pointer;
}

.mz-puzzle__luecke {
	background: transparent;
	cursor: default;
}

.mz-puzzle.is-geloest {
	display: block;
	padding: 0;
	background: none;
}

/* Memory */
.mz-memory {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.mz-memory__karte {
	position: relative;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	perspective: 800px;
}

.mz-memory__hinten,
.mz-memory__vorne {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--mz-radius-s);
	backface-visibility: hidden;
	transition: transform 0.4s var(--mz-ease);
}

.mz-memory__hinten {
	background: var(--mz-accent-soft) url("assets/img/logo-mark-dunkel.svg") center / 34% no-repeat;
	box-shadow: inset 0 0 0 2px var(--mz-line);
}

.mz-memory__vorne {
	background: var(--mz-surface);
	box-shadow: inset 0 0 0 2px var(--mz-line);
	transform: rotateY(180deg);
}

.mz-memory__vorne img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-memory__name {
	padding: 6px;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
}

.mz-memory__karte.is-offen .mz-memory__hinten {
	transform: rotateY(180deg);
}

.mz-memory__karte.is-offen .mz-memory__vorne {
	transform: rotateY(360deg);
}

.mz-memory__karte.is-gefunden .mz-memory__vorne {
	box-shadow: inset 0 0 0 3px var(--mz-green);
}

.mz-memory__karte:disabled {
	cursor: default;
}

/* Mehr oder weniger? */
.mz-vergleich__paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 1em;
}

.mz-vergleich__karte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 8px 12px;
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	color: var(--mz-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.mz-vergleich__karte:hover:not(:disabled) {
	border-color: var(--mz-accent);
}

.mz-vergleich__karte:disabled {
	cursor: default;
}

.mz-vergleich__name {
	font-weight: 700;
}

.mz-vergleich__wert {
	min-height: 1.3em;
	color: var(--mz-ink-2);
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	/* Tabs in einer wischbaren Zeile statt drei Reihen */
	.mz-spiele__tabs {
		flex-wrap: nowrap;
		margin-right: -16px;
		padding: 2px 16px 6px 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mz-spiele__tabs button {
		flex: none;
		font-size: 0.9rem;
	}

	.mz-memory {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.mz-memory__name {
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mz-memory__hinten,
	.mz-memory__vorne,
	.mz-quiz__balken span {
		transition: none;
	}
}

/* Katzenversicherung: Hinweisboxen, Button, Vergleichsrechner */
.mz-vers {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--mz-surface);
	border: 1px solid var(--mz-line);
	border-left: 4px solid var(--mz-accent);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-vers > :last-child {
	margin-bottom: 0;
}

.mz-vers__label {
	margin: 0 0 0.4em;
	color: var(--mz-accent-ink);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mz-vers__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.mz-vers__links > a:first-child {
	color: var(--mz-accent-ink);
	font-weight: 600;
}

.mz-vers__knopf-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mz-vers__knopf,
.mz-vers__laden {
	display: inline-block;
	padding: 0.65em 1.2em;
	border: 0;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.mz-vers__knopf:hover,
.mz-vers__knopf:focus-visible,
.mz-vers__laden:hover,
.mz-vers__laden:focus-visible {
	background: var(--mz-accent-ink);
	color: #fff;
}

.mz-vers--rechner .mz-vers__widget {
	margin-top: 1em;
	overflow-x: auto;
}

.mz-vers__alternativ {
	margin-top: 1em;
	font-size: 0.9rem;
}

.mz-vers__admin {
	padding: 10px 14px;
	border: 1px dashed var(--mz-red);
	border-radius: var(--mz-radius-s);
	color: var(--mz-red);
	font-size: 0.9rem;
}

.mz-produkt__anzeige {
	padding: 0.15em 0.6em;
	background: var(--mz-sand);
	border-radius: 999px;
	color: var(--mz-ink-3);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	vertical-align: middle;
}

.mz-produkt__name {
	margin-bottom: 0.4em;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}

.mz-produkt__fazit {
	font-size: 1.05rem;
}

.mz-produkt .mz-produkt__abwaegung {
	margin: 1.2em 0;
}

.mz-produkt__abwaegung h3 {
	font-size: 1rem;
}

.mz-produkt.has-bild {
	display: grid;
	grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
}

.mz-produkt__bild {
	display: grid;
	place-items: center;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius);
	aspect-ratio: 1;
}

.mz-produkt__bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

.mz-produkt__preis {
	margin: -0.2em 0 0.8em;
}

.mz-produkt__preis strong {
	color: var(--mz-accent-ink);
	font-size: 1.35rem;
}

.mz-produkt__preis small {
	display: block;
	color: var(--mz-ink-3);
	font-size: 0.75rem;
	line-height: 1.4;
}

.mz-produkt__preis.is-klein {
	margin: 0.2em 0 0;
}

.mz-produkt__preis.is-klein strong {
	font-size: 1rem;
}

.mz-produkt__preis.is-klein small {
	display: inline;
}

.mz-weitere li.has-bild {
	flex-wrap: nowrap;
	align-items: center;
}

.mz-weitere__bild {
	flex: none;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
}

.mz-weitere__bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 0;
}

.mz-weitere__text {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	min-width: 0;
}

@media (max-width: 700px) {
	.mz-produkt.has-bild {
		grid-template-columns: 1fr;
	}

	.mz-produkt__bild {
		max-width: 260px;
	}

	.mz-weitere li.has-bild {
		flex-wrap: wrap;
	}
}

.mz-produkt__uvp {
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-produkt__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.2em;
}

.mz-produkt__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.8em 1.5em;
	background: var(--mz-surface);
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px var(--mz-ink);
	color: var(--mz-ink);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s var(--mz-ease);
}

.mz-produkt__btn.is-amazon {
	background: var(--mz-ink);
	box-shadow: none;
	color: #fff;
}

.mz-produkt__btn:hover,
.mz-produkt__btn:focus-visible {
	background: var(--mz-accent);
	box-shadow: none;
	color: #fff;
	transform: translateY(-2px);
}

.mz-aff-stern {
	margin-left: 1px;
	font-size: 0.8em;
	vertical-align: super;
	line-height: 0;
}

.mz-weitere {
	margin: 2em 0;
}

.mz-weitere h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.3rem;
}

.mz-weitere ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-weitere li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 10px;
	padding: 14px 18px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-weitere__name {
	font-weight: 750;
}

.mz-weitere__notiz {
	flex: 1 1 200px;
	color: var(--mz-ink-3);
	font-size: 0.92rem;
}

.mz-weitere__link {
	margin-left: auto;
	font-weight: 700;
}

/* Produktkarte aus der Produkt-Bibliothek ([produkt id="…"]) */
.mz-pk-liste {
	margin: 2em 0;
}

.mz-pk-liste h2 {
	margin-bottom: 0.6em;
	font-size: 1.3rem;
}

.mz-pk {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 1.5em 0;
	padding: 16px 20px;
	background: var(--mz-surface);
	border: 1px solid var(--mz-line);
	border-left: 4px solid var(--mz-accent);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-pk-liste .mz-pk {
	margin: 0 0 12px;
}

.mz-pk__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mz-accent-soft) url("assets/icons/equipment.svg") center / 26px no-repeat;
}

.mz-pk__bild {
	flex: none;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	padding: 6px;
	background: #fff;
	border-radius: var(--mz-radius-s);
}

.mz-pk__bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 0;
}

.mz-pk__text {
	flex: 1 1 auto;
	min-width: 0;
}

.mz-pk__text p {
	margin: 0;
}

.mz-pk__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mz-accent-ink);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mz-pk__name {
	font-weight: 750;
}

.mz-pk__notiz {
	color: var(--mz-ink-3);
	font-size: 0.9rem;
}

.mz-pk__btn {
	flex: none;
	padding: 0.65em 1.2em;
	background: var(--mz-ink);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, transform 0.2s var(--mz-ease);
}

.mz-pk__btn:hover,
.mz-pk__btn:focus-visible {
	background: var(--mz-accent);
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.mz-pk {
		flex-wrap: wrap;
	}

	.mz-pk__btn {
		margin-left: 60px;
	}
}

/* Erstausstattung: Kauf-Link und Fußnote */
body .cl .cl__link--kaufen {
	color: var(--mz-accent-ink);
	font-weight: 700;
	white-space: nowrap;
}

.cl__fussnote {
	margin-top: 1em;
	color: var(--mz-ink-3);
	font-size: 0.82rem;
}

.mz-aff-fussnote {
	margin-top: 2em;
	color: var(--mz-ink-3);
	font-size: 0.82rem;
}

/* Erfahrungen von Halter:innen (Kommentare auf Rassenseiten) */
.mz-erfahrungen {
	margin: 3em 0 0;
	padding: clamp(22px, 4vw, 40px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow-s);
}

.mz-erfahrungen__titel {
	margin-bottom: 0.3em;
	font-size: 1.5rem;
}

.mz-erfahrungen__intro {
	color: var(--mz-ink-3);
}

/* Tipp aus der Redaktion: klar abgesetzt von den Berichten der Halter:innen */
.mz-redaktion {
	margin: 1em 0 1.6em;
	padding: 18px 20px;
	background: var(--mz-sand);
	border-left: 4px solid var(--mz-ink);
	border-radius: var(--mz-radius-s);
}

.mz-redaktion__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 0.5em;
}

.mz-redaktion__kopf img {
	display: block;
}

.mz-redaktion__hinweis {
	color: var(--mz-ink-3);
	font-size: 0.8rem;
}

.mz-redaktion__text {
	margin: 0;
}

/* Noch keine Berichte: Einladung mit Leitfragen */
.mz-erfahrungen__leer {
	margin: 0 0 1.6em;
}

.mz-erfahrungen__einladung {
	margin-bottom: 0.6em;
	font-weight: 600;
}

.mz-erfahrungen__fragen-titel {
	margin: 0 0 0.3em;
	color: var(--mz-ink-3);
	font-size: 0.9rem;
}

.mz-erfahrungen__fragen {
	margin: 0;
	padding-left: 1.2em;
	color: var(--mz-ink-2);
}

.mz-erfahrungen__fragen li {
	margin-bottom: 0.2em;
}

.mz-erfahrungen__liste,
.mz-erfahrungen__liste .children {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.mz-erfahrungen__liste .children {
	margin: 12px 0 0 clamp(16px, 4vw, 40px);
}

.mz-erfahrung > article {
	margin-bottom: 14px;
	padding: 18px 20px;
	background: var(--mz-bg);
	border-radius: var(--mz-radius);
}

.mz-erfahrung__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 0.6em;
}

.mz-erfahrung__initial {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mz-accent);
	color: #fff;
	font-weight: 800;
}

.mz-erfahrung__name {
	font-weight: 750;
}

.mz-erfahrung__team,
.mz-erfahrung__dauer {
	padding: 0.15em 0.7em;
	background: var(--mz-sand);
	border-radius: 999px;
	color: var(--mz-ink-2);
	font-size: 0.78rem;
	font-weight: 650;
}

.mz-erfahrung__team {
	background: var(--mz-ink);
	color: #fff;
}

.mz-erfahrung__kopf time {
	margin-left: auto;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
}

.mz-erfahrung__text p:last-child {
	margin-bottom: 0;
}

.mz-erfahrung__wartet {
	padding: 8px 12px;
	background: var(--mz-green-soft);
	border-radius: var(--mz-radius-s);
	color: var(--mz-green);
	font-weight: 650;
}

.mz-erfahrung__antworten {
	margin: 0.6em 0 0;
	font-size: 0.9rem;
	font-weight: 700;
}

.mz-erfahrungen .comment-respond {
	padding-top: 1.5em;
	border-top: 1px solid var(--mz-line);
}

.mz-erfahrungen .comment-reply-title {
	font-size: 1.2rem;
}

.mz-erfahrungen__hinweis {
	color: var(--mz-ink-2);
	font-size: 0.92rem;
}

.mz-erfahrungen__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.mz-erfahrungen__form > * {
	grid-column: 1 / -1;
}

.mz-erfahrungen__form .comment-form-author {
	grid-column: 1;
}

.mz-erfahrungen__form .comment-form-email {
	grid-column: 2;
}

.mz-erfahrungen__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9rem;
	font-weight: 650;
}

.mz-erfahrungen__form input[type="text"],
.mz-erfahrungen__form input[type="email"],
.mz-erfahrungen__form select,
.mz-erfahrungen__form textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--mz-bg);
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
	font: inherit;
}

.mz-erfahrungen__form input:focus,
.mz-erfahrungen__form select:focus,
.mz-erfahrungen__form textarea:focus {
	border-color: var(--mz-accent);
	outline: none;
}

.mz-erfahrungen__form .comment-form-cookies-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 0.88rem;
}

.mz-erfahrungen__form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 500;
}

.mz-erfahrungen__form .form-submit input[type="submit"] {
	padding: 0.85em 1.7em;
	background: var(--mz-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.mz-erfahrungen__form .form-submit input[type="submit"]:hover {
	background: var(--mz-accent);
}

@media (max-width: 600px) {
	.mz-erfahrungen__form .comment-form-author,
	.mz-erfahrungen__form .comment-form-email {
		grid-column: 1 / -1;
	}
}

/* Wusstest du? */
.mz-fakten {
	position: relative;
	margin: 2em 0;
	padding: 22px 24px 18px 76px;
	background: var(--mz-accent-soft);
	border-radius: var(--mz-radius);
}

.mz-fakten::before {
	content: "?";
	position: absolute;
	top: 18px;
	left: 22px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mz-surface);
	color: var(--mz-accent-ink);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 38px;
	text-align: center;
	box-shadow: var(--mz-shadow-s);
}

.mz-fakten__label {
	margin: 0 0 0.4em;
	color: var(--mz-accent-ink);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mz-fakten ul {
	margin: 0 0 0 1.1em;
}

.mz-fakten li {
	margin-bottom: 0.4em;
	font-weight: 550;
}

@media (max-width: 600px) {
	.mz-fakten {
		padding: 66px 20px 16px;
	}
}

/* Qualzucht-Hinweis auf Rassenseiten */
.mz-qualzucht {
	margin: 0 0 2em;
	padding: 16px 20px 16px 52px;
	background: var(--mz-red-soft);
	border-radius: var(--mz-radius);
	color: var(--mz-ink);
	position: relative;
	font-size: 0.95rem;
}

.mz-qualzucht::before {
	content: "!";
	position: absolute;
	top: 16px;
	left: 18px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mz-red);
	color: #fff;
	font-weight: 800;
	font-size: 0.85rem;
	line-height: 22px;
	text-align: center;
}

.mz-chips span.is-warnung {
	background: var(--mz-red-soft);
	color: var(--mz-red);
}

.mz-qualzucht p {
	margin: 0 0 0.5em;
}

.mz-qualzucht p:last-child {
	margin-bottom: 0;
}

.mz-qualzucht__titel {
	color: var(--mz-red);
	font-weight: 750;
}

.mz-qualzucht a {
	color: var(--mz-red);
	font-weight: 700;
}

/* Häufige Fragen */
.mz-faq {
	margin: 2.5em 0;
}

.mz-faq h2 {
	margin-bottom: 0.7em;
	font-size: 1.3rem;
}

.mz-faq__eintrag {
	margin-bottom: 10px;
	background: var(--mz-surface);
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
	transition: box-shadow 0.25s var(--mz-ease);
}

.mz-faq__eintrag[open] {
	box-shadow: var(--mz-shadow-s);
}

.mz-faq__eintrag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.mz-faq__eintrag summary::-webkit-details-marker {
	display: none;
}

/* Plus aus zwei Balken statt Textzeichen – das "+" der Schrift sitzt nicht mittig im Kreis */
.mz-faq__eintrag summary::after {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		linear-gradient(var(--mz-accent-ink), var(--mz-accent-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--mz-accent-ink), var(--mz-accent-ink)) center / 2px 12px no-repeat,
		var(--mz-accent-soft);
	transition: transform 0.25s var(--mz-ease);
}

.mz-faq__eintrag[open] summary::after {
	transform: rotate(45deg);
}

.mz-faq__eintrag summary:focus-visible {
	outline: 2px solid var(--mz-accent);
	outline-offset: 2px;
	border-radius: var(--mz-radius-s);
}

.mz-faq__eintrag p {
	margin: 0;
	padding: 0 18px 16px;
}

/* Abschlussband */
.mz-abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin: 3em 0 0;
	padding: clamp(24px, 4vw, 40px);
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(208, 120, 44, 0.35), transparent 60%),
		var(--mz-ink);
	border-radius: var(--mz-radius-l);
	color: rgba(255, 255, 255, 0.75);
}

.mz-abschluss h2 {
	margin-bottom: 0.3em;
	color: #fff;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}

.mz-abschluss p {
	margin: 0;
}

.mz-abschluss__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mz-abschluss__haupt {
	padding: 0.8em 1.5em;
	background: var(--mz-accent);
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.mz-abschluss__haupt:hover {
	background: #fff;
	color: var(--mz-ink);
}

.mz-abschluss .mz-pill {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.mz-abschluss .mz-pill:hover {
	background: #fff;
	color: var(--mz-ink);
}

/* Passende Inhalte unter dem Text */
.rasse-bezug {
	margin-top: 2.5em;
}

.rasse-bezug__title {
	margin-bottom: 0.7em;
	font-size: 1.3rem;
}

.rasse-bezug__list {
	display: grid;
	gap: 8px;
	margin: 0 0 0.8em;
	padding: 0;
	list-style: none;
}

.rasse-bezug__list li {
	margin: 0;
}

.rasse-bezug__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 14px 18px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius-s);
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s var(--mz-ease), box-shadow 0.2s;
}

.rasse-bezug__list a::after {
	content: "→";
	color: var(--mz-accent);
}

.rasse-bezug__list a:hover {
	transform: translateX(4px);
	box-shadow: var(--mz-shadow);
}

.rasse-bezug__more {
	font-size: 0.9rem;
	font-weight: 600;
}

.rasse-bezug__fuer {
	margin-top: 2.5em;
	padding: 14px 18px;
	background: var(--mz-sand);
	border-radius: var(--mz-radius-s);
	font-size: 0.95em;
}

/* =========================================================================
   9. Rechtstexte und Bildnachweise
   ========================================================================= */
.mz-hinweis {
	padding: 16px 20px;
	background: #fff6e0;
	border-radius: var(--mz-radius-s);
	color: #6b5200;
}

.mz-platzhalter {
	padding: 0 0.25em;
	background: #fff0b3;
	border-radius: 4px;
}

.bildnachweise {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bildnachweise li {
	margin: 0;
	padding: 12px 16px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius-s);
	box-shadow: var(--mz-shadow-s);
}

.bildnachweise li > a {
	font-weight: 650;
}

.bildnachweise__credit {
	display: block;
	color: var(--mz-ink-2);
	font-size: 0.88em;
}

/* =========================================================================
   10. Footer
   ========================================================================= */
.site-footer .site-info {
	background: var(--mz-ink);
	color: rgba(255, 255, 255, 0.7);
}

.site-footer .inside-site-info {
	padding: 48px 40px 36px;
}

.copyright-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	width: 100%;
	text-align: left;
}

.mz-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 750;
}

.mz-footer__claim {
	flex: 1 1 16em;
	color: rgba(255, 255, 255, 0.6);
}

.mz-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mz-footer__links a {
	padding: 0.35em 0.9em;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}

.mz-footer__links a:hover {
	background: #fff;
	color: var(--mz-ink);
}

/* Partnerhinweis als kleine Geschichte, mit Pfote vorne */
.mz-footer__partner {
	position: relative;
	flex-basis: 100%;
	padding: 14px 18px 14px 56px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.88rem;
	line-height: 1.55;
}

.mz-footer__partner::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 16px;
	width: 26px;
	height: 26px;
	background: url("assets/img/logo-mark-hell.svg") center / contain no-repeat;
}

.mz-footer__partner-titel {
	color: #fff;
	font-weight: 700;
}

.mz-footer__partner strong {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

.mz-footer__copy {
	flex-basis: 100%;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.82rem;
}

/* =========================================================================
   10b. Animierte Icons (assets/icons, ausgelöst über assets/js/icons.js)
   Drehpunkte in SVG-Koordinaten (viewBox 0 0 64 64).
   ========================================================================= */
.mz-ani {
	display: block;
	width: 64px;
	height: 64px;
	overflow: visible;
}

.mz-ani * {
	transform-box: view-box;
}

.mz-ani .ic-bg {
	transform-origin: 32px 32px;
	transition: transform 0.35s var(--mz-ease), fill 0.35s;
}

.mz-card:hover .mz-ani .ic-bg,
.mz-page-icon:hover .mz-ani .ic-bg {
	fill: var(--mz-accent-soft);
	transform: scale(1.08);
}

/* Lupe: kreist suchend */
.mz-ani.is-play .ic-lens {
	animation: mz-suchen 1.1s var(--mz-ease);
}

@keyframes mz-suchen {
	0%   { transform: translate(0, 0) rotate(0); }
	25%  { transform: translate(5px, -4px) rotate(-8deg); }
	50%  { transform: translate(-4px, -2px) rotate(6deg); }
	75%  { transform: translate(3px, 3px) rotate(-3deg); }
	100% { transform: translate(0, 0) rotate(0); }
}

/* Waage: kippt und pendelt aus */
.mz-ani .ic-beam {
	transform-origin: 32px 18px;
}

.mz-ani.is-play .ic-beam {
	animation: mz-waage 1.3s var(--mz-ease);
}

@keyframes mz-waage {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(-12deg); }
	45%  { transform: rotate(9deg); }
	65%  { transform: rotate(-5deg); }
	82%  { transform: rotate(2deg); }
	100% { transform: rotate(0); }
}

/* Checkliste: Häkchen zeichnen sich nacheinander, das dritte kommt dazu */
.mz-ani .ic-check {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.mz-ani .ic-check--3 {
	stroke-dashoffset: 1;
}

.mz-ani.is-play .ic-check {
	animation: mz-zeichnen 0.35s ease-out both;
}

.mz-ani.is-play .ic-check--2 {
	animation-delay: 0.22s;
}

.mz-ani.is-play .ic-check--3 {
	animation-delay: 0.44s;
}

.mz-ani .ic-board {
	transform-origin: 32px 52px;
}

.mz-ani.is-play .ic-board {
	animation: mz-wippen 0.9s var(--mz-ease) 0.4s;
}

@keyframes mz-zeichnen {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

@keyframes mz-wippen {
	0%, 100% { transform: rotate(0); }
	35%      { transform: rotate(-5deg); }
	70%      { transform: rotate(3deg); }
}

/* Buch: Seite blättert um und zurück (Drehpunkt am Buchrücken) */
.mz-ani .ic-page,
.mz-ani .ic-paw {
	transform-origin: 32px 32px;
}

.mz-ani.is-play .ic-page,
.mz-ani.is-play .ic-paw {
	animation: mz-blaettern 1.3s var(--mz-ease);
}

@keyframes mz-blaettern {
	0%   { transform: scaleX(1); }
	40%  { transform: scaleX(-1); }
	60%  { transform: scaleX(-1); }
	100% { transform: scaleX(1); }
}

/* Napf: Bröckchen hüpfen, Napf federt */
.mz-ani .ic-bowl {
	transform-origin: 32px 50px;
}

.mz-ani.is-play .ic-kib {
	animation: mz-huepfen 0.7s var(--mz-ease);
}

.mz-ani.is-play .ic-kib--2 {
	animation-delay: 0.1s;
}

.mz-ani.is-play .ic-kib--3 {
	animation-delay: 0.2s;
}

.mz-ani.is-play .ic-bowl {
	animation: mz-federn 0.5s var(--mz-ease);
}

@keyframes mz-huepfen {
	0%, 100% { transform: translateY(0); }
	45%      { transform: translateY(-11px); }
	70%      { transform: translateY(1px); }
}

@keyframes mz-federn {
	0%, 100% { transform: scale(1, 1); }
	40%      { transform: scale(1.06, 0.9); }
	70%      { transform: scale(0.98, 1.03); }
}

/* Kratzbaum: Spielball pendelt */
.mz-ani .ic-toy {
	transform-origin: 18px 34px;
}

.mz-ani.is-play .ic-toy {
	animation: mz-pendeln 1.6s var(--mz-ease);
}

@keyframes mz-pendeln {
	0%   { transform: rotate(0); }
	15%  { transform: rotate(28deg); }
	38%  { transform: rotate(-20deg); }
	58%  { transform: rotate(12deg); }
	76%  { transform: rotate(-6deg); }
	90%  { transform: rotate(2deg); }
	100% { transform: rotate(0); }
}

/* Torte: federt, Kerzen flackern nacheinander auf */
.mz-ani .ic-cake {
	transform-origin: 32px 50px;
}

.mz-ani.is-play .ic-cake {
	animation: mz-federn 0.5s var(--mz-ease);
}

.mz-ani .ic-flame {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.mz-ani.is-play .ic-flame {
	animation: mz-ic-flamme 0.8s var(--mz-ease) both;
}

.mz-ani.is-play .ic-flame--2 { animation-delay: 0.15s; }
.mz-ani.is-play .ic-flame--3 { animation-delay: 0.3s; }

@keyframes mz-ic-flamme {
	0%   { transform: scale(0.2); opacity: 0; }
	45%  { transform: scale(1.35, 1.2); opacity: 1; }
	70%  { transform: scale(0.9, 1.05) rotate(-6deg); }
	100% { transform: scale(1); }
}

/* Sparschwein: Münze fällt in den Schlitz, das Schwein federt */
.mz-ani.is-play .ic-coin {
	animation: mz-einwurf 1.1s var(--mz-ease);
}

.mz-ani .ic-pig {
	transform-origin: 30px 51px;
}

.mz-ani.is-play .ic-pig {
	animation: mz-federn 0.5s var(--mz-ease) 0.5s;
}

@keyframes mz-einwurf {
	0%   { transform: translateY(0); opacity: 1; }
	45%  { transform: translateY(12px); opacity: 1; }
	55%  { transform: translateY(14px); opacity: 0; }
	56%  { transform: translateY(-8px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* Küchenwaage: Zeiger schlägt aus (die Bröckchen nutzen .ic-kib) */
.mz-ani .ic-needle {
	transform-origin: 32px 45px;
}

.mz-ani.is-play .ic-needle {
	animation: mz-zeiger 1.2s var(--mz-ease);
}

@keyframes mz-zeiger {
	0%   { transform: rotate(0); }
	30%  { transform: rotate(70deg); }
	55%  { transform: rotate(35deg); }
	75%  { transform: rotate(50deg); }
	100% { transform: rotate(0); }
}

/* Namensmarke pendelt am Halsband */
.mz-ani .ic-tag {
	transform-origin: 32px 20px;
}

.mz-ani.is-play .ic-tag {
	animation: mz-pendeln 1.6s var(--mz-ease);
}

/* Schirm wippt, Tropfen perlen ab */
.mz-ani .ic-schirm {
	transform-origin: 32px 51px;
}

.mz-ani.is-play .ic-schirm {
	animation: mz-wippen 0.9s var(--mz-ease);
}

.mz-ani.is-play .ic-drop {
	animation: mz-ic-tropfen 0.9s ease-in both;
}

.mz-ani.is-play .ic-drop--2 {
	animation-delay: 0.25s;
}

@keyframes mz-ic-tropfen {
	from { transform: translateY(-14px); opacity: 0; }
	30%  { opacity: 1; }
	to   { transform: translateY(6px); opacity: 0; }
}

/* Kalender: Pfote wird als Termin eingestempelt */
.mz-ani .ic-stempel {
	transform-box: fill-box;
	transform-origin: center;
}

.mz-ani.is-play .ic-stempel {
	animation: mz-stempeln 0.7s var(--mz-ease) both;
}

@keyframes mz-stempeln {
	0%   { transform: scale(2.2) rotate(-20deg); opacity: 0; }
	60%  { transform: scale(0.85) rotate(4deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); }
}

/* Stammbaum: Katzenköpfe erscheinen nacheinander (Linien nutzen .ic-check) */
.mz-ani .ic-kopf {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.mz-ani.is-play .ic-kopf {
	animation: mz-ic-pop 0.6s var(--mz-ease) both;
}

.mz-ani.is-play .ic-kopf--2 { animation-delay: 0.35s; }
.mz-ani.is-play .ic-kopf--3 { animation-delay: 0.5s; }

@keyframes mz-ic-pop {
	0%   { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

/* Puzzle: letztes Teil rastet ein */
.mz-ani .ic-piece {
	transform-origin: 40px 24px;
}

.mz-ani.is-play .ic-piece {
	animation: mz-einrasten 0.9s var(--mz-ease);
}

@keyframes mz-einrasten {
	0%   { transform: translate(10px, -10px) rotate(20deg); }
	60%  { transform: translate(0, 0) rotate(0) scale(1); }
	78%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* Icon über dem Titel der Übersichtsseiten */
.mz-page-icon {
	display: inline-block;
	margin-bottom: 14px;
}

.mz-page-icon .mz-ani {
	width: 72px;
	height: 72px;
}

/* =========================================================================
   10c. Maskottchen, Konfetti, Scroll-Effekte (assets/js/maskottchen.js, site.js)
   ========================================================================= */
.mz-maskottchen {
	position: relative;
	width: 78px;
	pointer-events: none;
}

.mz-maskottchen__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mz-maskottchen__svg * {
	transform-box: fill-box;
}

.mz-mk-koerper {
	transform-origin: 50% 100%;
}

.mz-mk-koerper.is-huepft {
	animation: mz-mk-huepfen 0.55s var(--mz-ease);
}

.mz-mk-koerper.is-freut {
	animation: mz-mk-freuen 1.1s var(--mz-ease);
}

.mz-mk-schwanz {
	transform-origin: 0% 95%;
	animation: mz-mk-wedeln 2.6s ease-in-out infinite alternate;
}

.mz-mk-augen {
	transition: transform 0.12s linear;
}

.mz-mk-lid {
	transform-origin: center;
	transition: transform 0.08s;
}

.mz-mk-lid.is-blinzelt {
	transform: scaleY(0.1);
}

.mz-mk-schlaf,
.mz-mk-zzz {
	opacity: 0;
}

.mz-mk-zzz {
	fill: var(--mz-ink-3);
	font: 700 14px var(--mz-font);
}

.mz-maskottchen.is-schlaeft .mz-mk-augen {
	opacity: 0;
}

.mz-maskottchen.is-schlaeft .mz-mk-schlaf {
	opacity: 1;
}

.mz-maskottchen.is-schlaeft .mz-mk-zzz {
	opacity: 1;
	animation: mz-mk-zzz 2.4s ease-in-out infinite;
}

.mz-maskottchen.is-schlaeft .mz-mk-koerper {
	animation: mz-mk-atmen 3s ease-in-out infinite;
}

.mz-maskottchen__blase {
	position: absolute;
	bottom: calc(100% - 6px);
	right: 55%;
	width: max-content;
	max-width: 220px;
	padding: 8px 14px;
	background: var(--mz-surface);
	border: 2px solid var(--mz-ink);
	border-radius: 16px 16px 4px 16px;
	color: var(--mz-ink);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(6px) scale(0.92);
	transform-origin: 100% 100%;
	transition: opacity 0.2s, transform 0.25s var(--mz-ease);
}

.mz-maskottchen.is-spricht .mz-maskottchen__blase {
	opacity: 1;
	transform: none;
}

@keyframes mz-mk-huepfen {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	25%      { transform: translateY(0) scale(1.06, 0.92); }
	55%      { transform: translateY(-16px) scale(0.97, 1.04); }
	85%      { transform: translateY(0) scale(1.03, 0.97); }
}

@keyframes mz-mk-freuen {
	0%, 100% { transform: translateY(0) rotate(0); }
	15%      { transform: translateY(-18px) rotate(-8deg); }
	30%      { transform: translateY(0) rotate(0); }
	45%      { transform: translateY(-14px) rotate(8deg); }
	60%      { transform: translateY(0) rotate(0); }
	75%      { transform: translateY(-8px) rotate(-4deg); }
}

@keyframes mz-mk-wedeln {
	from { transform: rotate(-8deg); }
	to   { transform: rotate(10deg); }
}

@keyframes mz-mk-atmen {
	0%, 100% { transform: scale(1, 1); }
	50%      { transform: scale(1.02, 0.97); }
}

@keyframes mz-mk-zzz {
	0%, 100% { transform: translateY(0); opacity: 0.4; }
	50%      { transform: translateY(-5px); opacity: 1; }
}

/* Pfoten-Konfetti */
.mz-konfetti {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	overflow: hidden;
}

.mz-konfetti__stueck {
	position: absolute;
	border-radius: 2px;
}

.mz-konfetti__stueck.is-pfote svg {
	display: block;
	fill: currentColor;
}

/* Sanftes Hereingleiten beim Scrollen (Klassen setzt site.js) */
.mz-reveal {
	transition: opacity 0.6s var(--mz-ease), transform 0.6s var(--mz-ease);
}

.mz-reveal:not(.is-sichtbar) {
	opacity: 0;
	transform: translateY(18px);
}

/* Steckbrief-Balken füllen sich, wenn die Kachel ins Bild kommt */
.rasse-steckbrief__dot.is-on {
	transform-origin: left center;
	transition: transform 0.4s var(--mz-ease);
}

.mz-reveal:not(.is-sichtbar) .rasse-steckbrief__dot.is-on {
	transform: scaleX(0);
}

.rasse-steckbrief__dot:nth-child(2) { transition-delay: 0.08s; }
.rasse-steckbrief__dot:nth-child(3) { transition-delay: 0.16s; }
.rasse-steckbrief__dot:nth-child(4) { transition-delay: 0.24s; }
.rasse-steckbrief__dot:nth-child(5) { transition-delay: 0.32s; }

/* =========================================================================
   10d. Katzen-Szenen im Kopfbereich der Unterseiten (inc/szenen.php, assets/js/szene.js)
   ========================================================================= */
.mz-has-szene .page-header,
.mz-has-szene.page .site-main > article > .inside-article > .entry-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
	column-gap: 40px;
	align-items: center;
	margin-bottom: 32px;
	padding: clamp(24px, 4vw, 44px);
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(208, 120, 44, 0.14), transparent 60%),
		var(--mz-sand);
	border-radius: var(--mz-radius-l);
}

.mz-has-szene .page-header > *,
.mz-has-szene.page .entry-header > * {
	grid-column: 1;
}

.mz-has-szene .page-header > .mz-szene,
.mz-has-szene.page .entry-header > .mz-szene {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.mz-page-intro {
	max-width: 36em;
	margin: 0;
	color: var(--mz-ink-2);
	font-size: 1.1rem;
}

.mz-szene {
	position: relative;
}

.mz-szene svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mz-szene [data-mz-klick],
.mz-szene [data-mz-toggle] {
	cursor: pointer;
	outline: none;
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.mz-szene [data-mz-klick]:focus-visible,
.mz-szene [data-mz-toggle]:focus-visible {
	filter: drop-shadow(0 0 0 #161412) drop-shadow(0 0 3px rgba(208, 120, 44, 0.9));
}

.mz-szene .sz-schwanz {
	transform-box: fill-box;
	transform-origin: 0% 95%;
	animation: mz-mk-wedeln 2.6s ease-in-out infinite alternate;
}

.mz-szene [data-mz-augen] {
	transition: transform 0.12s linear;
}

.mz-szene [data-mz-lid] {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.08s;
}

.mz-szene [data-mz-lid].is-blinzelt {
	transform: scaleY(0.1);
}

/* Bewegungen, die per Klick ausgelöst werden */
.mz-szene .is-huepft   { animation: mz-mk-huepfen 0.6s var(--mz-ease); }
.mz-szene .is-springt  { animation: mz-sz-springen 0.8s var(--mz-ease); }
.mz-szene .is-wackelt  { animation: mz-sz-wackeln 0.7s var(--mz-ease); }
.mz-szene .is-schwingt { animation: mz-pendeln 1.6s var(--mz-ease); }
.mz-szene .is-blaettert { animation: mz-blaettern 1.2s var(--mz-ease); }
.mz-szene .is-zeichnet .sz-haken { animation: mz-zeichnen 0.35s ease-out both; }
.mz-szene .is-zeichnet .sz-haken:nth-of-type(2) { animation-delay: 0.2s; }
.mz-szene .is-zeichnet .sz-haken:nth-of-type(3) { animation-delay: 0.4s; }

/* Szenen-Details: Wippe kippt, Häkchen auf dem Klemmbrett */
.mz-szene .sz-wippe {
	transform-box: view-box;
	transform-origin: 160px 170px;
	transform: rotate(6deg);
	transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.mz-szene .sz-wippe.is-links {
	transform: rotate(-6deg);
}

.mz-szene .sz-haken {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.mz-szene .sz-haken--offen {
	stroke-dashoffset: 1;
}

/* Namensschilder und Puzzleteil schweben, Regen fällt, Kerzen lassen sich auspusten */
.mz-szene .sz-schweben {
	animation: mz-sz-schweben 3.2s ease-in-out infinite alternate;
}

.mz-szene .sz-tropfen {
	animation: mz-sz-regen 1.6s linear infinite;
}

.mz-szene .sz-kerzen .mz-flamme {
	transition: opacity 0.25s, transform 0.25s;
}

.mz-szene .sz-kerzen.is-aus .mz-flamme {
	opacity: 0;
	transform: scale(0.3);
}

@keyframes mz-sz-schweben {
	from { transform: translateY(-3px); }
	to   { transform: translateY(3px); }
}

@keyframes mz-sz-regen {
	from { transform: translateY(0); opacity: 0; }
	15%  { opacity: 1; }
	to   { transform: translateY(150px); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
	.mz-szene .sz-schweben,
	.mz-szene .sz-tropfen {
		animation: none;
	}
}

@keyframes mz-sz-springen {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	20%      { transform: translateY(0) scale(1.08, 0.9); }
	50%      { transform: translateY(-34px) scale(0.96, 1.05); }
	80%      { transform: translateY(0) scale(1.05, 0.95); }
}

@keyframes mz-sz-wackeln {
	0%, 100% { transform: rotate(0); }
	20%      { transform: rotate(-7deg); }
	40%      { transform: rotate(6deg); }
	60%      { transform: rotate(-4deg); }
	80%      { transform: rotate(2deg); }
}

/* Sprechblase (HTML über der Grafik, Position setzt szene.js) */
.mz-szene__blase {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: 210px;
	padding: 8px 14px;
	background: var(--mz-surface);
	border: 2px solid var(--mz-ink);
	border-radius: 16px;
	color: var(--mz-ink);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 4px)) scale(0.92);
	transition: opacity 0.2s, transform 0.25s var(--mz-ease);
}

.mz-szene__blase::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--mz-surface);
	border-right: 2px solid var(--mz-ink);
	border-bottom: 2px solid var(--mz-ink);
	transform: rotate(45deg);
}

.mz-szene__blase.is-sichtbar {
	opacity: 1;
	transform: translate(-50%, calc(-100% - 10px));
}

.mz-szene__tipp {
	margin: 0.2em 0 0;
	color: var(--mz-ink-3);
	font-size: 0.78rem;
	text-align: center;
}

@media (max-width: 768px) {
	.mz-has-szene .page-header,
	.mz-has-szene.page .site-main > article > .inside-article > .entry-header {
		grid-template-columns: 1fr;
	}

	/* Auf dem Handy steht die Szene ganz oben, über dem Titel */
	.mz-has-szene .page-header > .mz-szene,
	.mz-has-szene.page .entry-header > .mz-szene {
		grid-column: 1;
		grid-row: auto;
		order: -1;
		width: 100%;
		max-width: 260px;
		margin: 0 auto 18px;
	}
}

/* 404-Seite */
.mz-404 {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 40px;
	margin: 1em 0 2em;
}

.mz-404__katze {
	position: relative;
	padding-top: 60px;
	cursor: pointer;
}

.mz-404__katze .mz-maskottchen {
	width: 120px;
	pointer-events: auto;
}

.mz-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* =========================================================================
   11. Werkzeuge aus dem Plugin "Miauzoo Rassen-Finder"
   (Quiz, Vergleich, Checkliste) im Look des Themes.
   "body" vorangestellt, weil das Plugin-CSS später geladen wird.
   ========================================================================= */
body .rf,
body .rv,
body .cl {
	--rf-accent: var(--mz-accent);
	--rf-accent-dark: var(--mz-accent-ink);
	--rf-bg: var(--mz-bg);
	--rf-line: var(--mz-line);
}

/* Rechner: Katzenalter, Kosten, Futter, Namen */
.mzr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	margin: 0 0 2.5em;
	padding: clamp(22px, 4vw, 40px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

.mzr__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.mzr__zeile {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.mzr__feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 650;
}

.mzr__feld input,
.mzr__feld select {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--mz-bg);
	border: 2px solid var(--mz-line);
	border-radius: var(--mz-radius-s);
	color: var(--mz-ink);
	font: inherit;
	font-weight: 550;
}

.mzr__feld input:focus,
.mzr__feld select:focus {
	border-color: var(--mz-accent);
	outline: none;
}

body .mzr .mzr__btn {
	align-self: flex-start;
	padding: 0.85em 1.6em;
	background: var(--mz-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s var(--mz-ease);
}

body .mzr .mzr__btn:hover,
body .mzr .mzr__btn:focus-visible {
	background: var(--mz-accent);
	transform: translateY(-2px);
}

/* Kitten-Kalender: Formular oben, Fahrplan darunter in voller Breite */
.mzr--kitten {
	display: block;
}

.mzr--kitten .mzr__form {
	margin-bottom: 1.2em;
}

.mzr--kitten .mzr__gross {
	font-size: 1.3rem;
	line-height: 1.4;
}

.mzr--kitten .mzr__gross small {
	display: block;
	margin-top: 0.3em;
	font-size: 0.85rem;
	font-weight: 500;
}

.mzk-plan {
	margin: 1.2em 0;
	padding: 0;
	list-style: none;
}

.mzk-plan__punkt {
	display: grid;
	grid-template-columns: 9.5em 1fr;
	gap: 4px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--mz-line);
}

.mzk-plan__datum {
	color: var(--mz-ink-2);
	font-size: 0.9rem;
	font-weight: 650;
}

.mzk-plan__titel,
.mzk-plan__text {
	margin: 0;
}

.mzk-plan__text {
	color: var(--mz-ink-2);
	font-size: 0.92rem;
}

.mzk-plan__art {
	display: inline-block;
	margin-right: 4px;
	padding: 0.05em 0.6em;
	border-radius: 99px;
	background: var(--mz-sand);
	color: var(--mz-ink-2);
	font-size: 0.72rem;
	font-weight: 700;
	vertical-align: 1px;
}

.mzk-plan__punkt.is-tierarzt .mzk-plan__art {
	background: var(--mz-red-soft);
	color: var(--mz-red);
}

.mzk-plan__punkt.is-futter .mzk-plan__art {
	background: var(--mz-accent-soft);
	color: var(--mz-accent-ink);
}

.mzk-plan__punkt.is-entwicklung .mzk-plan__art {
	background: var(--mz-green-soft);
	color: var(--mz-green);
}

.mzk-plan__punkt.is-vorbei {
	opacity: 0.55;
}

.mzk-plan__punkt.is-naechster {
	margin: 4px -12px;
	padding: 12px;
	border: 2px solid var(--mz-accent);
	border-radius: var(--mz-radius-s);
	background: var(--mz-surface);
}

@media (max-width: 600px) {
	.mzk-plan__punkt {
		grid-template-columns: 1fr;
	}
}

.mzr__ergebnis {
	padding: clamp(18px, 3vw, 28px);
	background: var(--mz-accent-soft);
	border-radius: var(--mz-radius);
}

.mzr__ergebnis p {
	margin: 0 0 0.7em;
}

.mzr__gross {
	color: var(--mz-accent-ink);
	font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.mzr__gross small {
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: 0;
}

.mzr__phase {
	font-weight: 750;
}

.mzr__rasse:empty {
	display: none;
}

.mzr__kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	margin-bottom: 1em;
}

.mzr__kacheln p {
	margin: 0;
	padding: 12px 14px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius-s);
}

.mzr__kacheln small {
	display: block;
	color: var(--mz-ink-3);
	font-size: 0.8rem;
	font-weight: 650;
}

.mzr__kacheln strong {
	font-size: 1.2rem;
}

.mzr__tabelle {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.mzr__tabelle th,
.mzr__tabelle td {
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid rgba(22, 20, 18, 0.08);
	text-align: left;
}

.mzr__tabelle th {
	padding-top: 12px;
	font-weight: 750;
}

.mzr__tabelle td:last-child {
	text-align: right;
	white-space: nowrap;
}

.mzr__hinweis {
	color: var(--mz-ink-3);
	font-size: 0.82rem;
}

.mzr__namen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.mzr__namen li {
	margin: 0;
}

body .mzr .mzr__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.55em 0.95em;
	background: var(--mz-surface);
	border: 2px solid transparent;
	border-radius: 999px;
	color: var(--mz-ink);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s var(--mz-ease);
}

body .mzr .mzr__name:hover {
	border-color: var(--mz-accent);
	transform: translateY(-2px);
}

.mzr__herz {
	color: var(--mz-line);
	transition: color 0.2s, transform 0.2s var(--mz-ease);
}

.mzr__name.is-favorit .mzr__herz {
	color: #d64545;
	transform: scale(1.2);
}

.mzr__favoriten {
	padding-top: 0.5em;
	border-top: 1px solid rgba(22, 20, 18, 0.1);
}

@media (max-width: 760px) {
	.mzr {
		grid-template-columns: 1fr;
	}
}

/* Maskottchen sitzt oben auf der Quizkarte */
.rf__maskottchen {
	position: relative;
	z-index: 3;
	height: 0;
	margin-top: 110px;
}

/* Pfoten stehen 14 px tief auf der Kartenkante */
.rf__maskottchen .mz-maskottchen {
	position: absolute;
	right: 40px;
	bottom: -14px;
}

/* Checkliste: Maskottchen sitzt in der mitlaufenden Leiste rechts neben dem Fortschrittsbalken,
   damit es beim Scrollen sichtbar bleibt. Die Sprechblase öffnet sich nach links. */
body .cl .cl__head {
	padding-right: 92px;
}

.cl__maskottchen {
	position: absolute;
	right: 22px;
	bottom: 8px;
}

.cl__maskottchen .mz-maskottchen {
	width: 52px;
}

.cl__maskottchen .mz-maskottchen__blase {
	bottom: 38%;
	right: calc(100% + 8px);
	border-radius: 16px 16px 4px 16px;
	transform-origin: 100% 100%;
}

/* Auf dem Handy läuft die Leiste nicht mit; die Katze bleibt trotzdem an ihr verankert. */
@media (max-width: 600px) {
	body .cl .cl__head {
		position: relative;
		padding-right: 76px;
	}

	.cl__maskottchen {
		right: 14px;
	}

	.cl__maskottchen .mz-maskottchen {
		width: 46px;
	}
}

/* Abhaken: Häkchen "ploppt" */
.cl__item.is-pop input[type="checkbox"] {
	animation: mz-plopp 0.35s var(--mz-ease);
}

@keyframes mz-plopp {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Quiz */
body .rf {
	padding: clamp(24px, 4vw, 48px);
	background: var(--mz-surface);
	border-radius: var(--mz-radius-l);
	box-shadow: var(--mz-shadow);
}

body .rf .rf__title {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
}

body .rf .rf__btn,
body .rf a.rf__btn {
	padding: 0.85em 1.7em;
	background: var(--mz-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
}

body .rf .rf__btn:hover,
body .rf .rf__btn:focus-visible {
	background: var(--mz-accent);
	color: #fff;
	transform: translateY(-2px);
}

body .rf .rf__btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--mz-ink);
	color: var(--mz-ink);
}

body .rf .rf__btn--outline:hover {
	background: var(--mz-ink);
	box-shadow: none;
}

body .rf .rf__progress {
	height: 8px;
	border-radius: 999px;
}

body .rf .rf__question-text {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	letter-spacing: -0.02em;
}

body .rf .rf__answer {
	padding: 1.05em 1.3em;
	background: var(--mz-bg);
	border: 2px solid transparent;
	border-radius: 14px;
	font-weight: 550;
}

body .rf .rf__answer:hover,
body .rf .rf__answer:focus-visible {
	background: var(--mz-surface);
	border-color: var(--mz-ink);
	box-shadow: var(--mz-shadow-s);
	transform: translateX(4px);
}

body .rf .rf__answer.is-selected {
	background: var(--mz-accent-soft);
	border-color: var(--mz-accent);
}

body .rf .rf__result {
	border: 0;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

body .rf .rf__result.is-winner {
	box-shadow: 0 0 0 2px var(--mz-accent), var(--mz-shadow);
}

body .rf .rf__result-img {
	border-radius: 12px;
}

body .rf .rf__meter {
	height: 8px;
	border-radius: 999px;
}

body .rf .rf__share {
	background: var(--mz-accent-soft);
	border: 0;
	border-radius: var(--mz-radius);
}

body .rf .rf__share-btn {
	background: var(--mz-surface);
	border: 0;
	box-shadow: var(--mz-shadow-s);
	font-weight: 600;
}

body .rf .rf__share-btn:hover {
	background: var(--mz-ink);
	color: #fff;
}

/* Vergleich */
body .rv .rv__pickers {
	background: var(--mz-surface);
	border: 0;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

body .rv .rv__table {
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	overflow: hidden;
}

body .rv .rv__table th,
body .rv .rv__table td {
	border-bottom-color: var(--mz-line);
}

body .rv .rv__name a {
	color: var(--mz-ink);
}

body .rv .rv__img {
	border-radius: 12px;
}

body .rv .rv__dot {
	width: 22px;
	height: 8px;
	border-radius: 999px;
}

/* Checkliste */
body .cl .cl__head {
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	top: 80px;
}

body .cl .cl__bar {
	height: 10px;
	border-radius: 999px;
}

body .cl .cl__group {
	margin-bottom: 16px;
	padding: 8px 20px 12px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

body .cl .cl__item:last-child {
	border-bottom: 0;
}

body .cl .cl__item input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--mz-ink);
}

/* =========================================================================
   12. Handy
   ========================================================================= */
@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	.one-container .site-content {
		padding: 16px 16px 56px;
	}

	.mz-hero {
		padding: 28px 20px;
		border-radius: var(--mz-radius);
	}

	.mz-hero__text {
		font-size: 1.05rem;
	}

	.mz-hero__img img,
	.mz-hero-szene {
		max-width: 300px;
		margin: 0 auto;
	}

	/* Katzen-Szene der Startseite auf dem Handy ganz oben */
	.mz-hero .wp-block-column:has(.mz-hero-szene) {
		order: -1;
	}

	.rasse-steckbrief {
		padding: 20px;
	}

	.rasse-steckbrief__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rasse-steckbrief__row--rassecode,
	.rasse-steckbrief__row--charakter,
	.rasse-steckbrief__row--vertraeglichkeit,
	.rasse-steckbrief__row--haltung,
	.rasse-steckbrief__row--tierarzt_risiko {
		grid-column: span 2;
	}

	.rasse-steckbrief__row--ursprung {
		grid-column: span 2;
	}

	/* Schmale Kacheln: lange Begriffe sauber trennen, Balken auf Kachelbreite strecken */
	.rasse-steckbrief__row {
		padding: 14px;
	}

	.rasse-steckbrief__row dt {
		hyphens: auto;
		overflow-wrap: normal;
		letter-spacing: 0.02em;
	}

	.rasse-steckbrief__scale {
		display: flex;
		width: 100%;
		max-width: 150px;
		gap: 4px;
	}

	.rasse-steckbrief__dot {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Übersichten (Rassen, Ratgeber, Ernährung …) auf dem Handy einspaltig */
	.mz-grid-archive .site-main {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.mz-grid-archive .entry-header,
	.mz-grid-archive .entry-summary {
		padding: 0 18px;
	}

	.site-footer .inside-site-info {
		padding: 36px 20px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}

	.mz-ani * {
		animation: none !important;
	}

	.mz-card:hover,
	.mz-latest .wp-block-post:hover,
	.mz-grid-archive .inside-article:hover,
	.mz-card--bild:hover .mz-card__img img,
	.mz-grid-archive .inside-article:hover .post-image img {
		transform: none;
	}
}

/* =========================================================================
   Saison- und Feiertagsdeko (assets/js/saison.js, inc/saison.php)
   ========================================================================= */
.mz-deko-aus .mz-deko {
	display: none !important;
}

.mz-deko {
	pointer-events: none;
}

/* Hintergrund der Katzen-Szenen in der Farbe der Jahreszeit */
.mz-saison-hg {
	transition: fill 0.4s;
}

html:not(.mz-deko-aus).mz-saison-winter .mz-saison-hg { fill: #e6eef4; }
html:not(.mz-deko-aus).mz-saison-fruehling .mz-saison-hg { fill: #eaf2df; }
html:not(.mz-deko-aus).mz-saison-sommer .mz-saison-hg { fill: #f8ebc8; }
html:not(.mz-deko-aus).mz-saison-herbst .mz-saison-hg { fill: #f5e0c8; }
html:not(.mz-deko-aus).mz-fest-halloween .mz-saison-hg { fill: #efdcca; }
html:not(.mz-deko-aus).mz-fest-advent .mz-saison-hg { fill: #e6eef4; } /* auch wenn der 1. Advent noch im Herbst liegt */
html:not(.mz-deko-aus).mz-fest-valentinstag .mz-saison-hg,
html:not(.mz-deko-aus).mz-fest-muttertag .mz-saison-hg { fill: #fae3e6; }

/* Fallende Teilchen im Hintergrundkreis der Szenen (assets/js/saison.js) */
.mz-teilchen canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Eiszapfen an der Unterkante des Headers (nur Winter) */
.mz-girlande {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 34px;
	overflow: hidden;
}

.mz-girlande svg {
	display: block;
}

.mz-flamme {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: mz-flackern 1.4s ease-in-out infinite alternate;
}

@keyframes mz-flackern {
	from { transform: scale(1, 1) rotate(-3deg); }
	to   { transform: scale(0.9, 1.1) rotate(3deg); }
}

/* Boden-Streifen auf der Oberkante des Footers */
.site-footer .site-info {
	position: relative;
}

.mz-fussboden {
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 24px;
	overflow: hidden;
}

.mz-fussboden svg {
	display: block;
	width: 100%;
}

/* Nachts (21–6 Uhr): Sternenhimmel im Hintergrundkreis, Katzen im Hero schlafen (saison.js, hero.js) */
html.mz-zeit-nacht:not(.mz-deko-aus) .mz-saison-hg {
	fill: #2e3a5c;
	opacity: 0.92;
}

.mz-mond-schatten {
	fill: #2e3a5c;
}

.mz-stern {
	transform-box: fill-box;
	transform-origin: center;
	animation: mz-funkeln 3.2s ease-in-out infinite;
}

@keyframes mz-funkeln {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.7); }
}

#mz-hero-szene.is-nacht .hero-ball-roll,
#mz-hero-szene.is-nacht .hero-pfote-klein,
#mz-hero-szene.is-nacht .hero-pfote-gross {
	animation: none;
}

#mz-hero-szene.is-nacht .hero-schwanz-gross,
#mz-hero-szene.is-nacht .hero-schwanz-klein {
	animation-duration: 7s;
}

#mz-hero-szene .hero-zu {
	fill: none;
	stroke: #3b2f26;
	stroke-width: 2.6;
	stroke-linecap: round;
	opacity: 0;
}

#mz-hero-szene .hero-kater.is-schlaeft .hero-zu {
	opacity: 1;
}

#mz-hero-szene .hero-kater.is-schlaeft .hero-augen {
	opacity: 0;
}

#mz-hero-szene .hero-zzz {
	animation: mz-zzz 2.6s ease-in-out infinite;
	pointer-events: none;
}

#mz-hero-szene .hero-zzz text {
	fill: #fff6d8;
	font: 700 13px "Plus Jakarta Sans", system-ui, sans-serif;
}

#mz-hero-szene .hero-zzz text + text {
	font-size: 15px;
}

#mz-hero-szene .hero-kater:not(.is-schlaeft) .hero-zzz {
	display: none;
}

@keyframes mz-zzz {
	0%   { opacity: 0; transform: translateY(6px); }
	30%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.mz-stern,
	#mz-hero-szene .hero-zzz {
		animation: none;
	}
}

/* Brunos Tagebuch (inc/tagebuch.php) */
.mz-tb-datum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 0.5em;
	color: var(--mz-accent-ink);
	font-size: 0.85rem;
	font-weight: 700;
}

.mz-tb-alter {
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--mz-accent-soft);
	color: var(--mz-ink-2);
	font-weight: 600;
}

.mz-tb-kopf p {
	max-width: 46em;
	color: var(--mz-ink-2);
}

.mz-tb-jahre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1em;
}

.mz-tb-jahre a {
	padding: 0.35em 0.95em;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.mz-tb-jahre .mz-tb-richtung {
	border-color: var(--mz-ink);
	background: var(--mz-ink);
	color: #fff;
}

/* Eintrag: Kopf wie die Übersicht, mit Brotkrumen und markiertem Jahr */
.mz-tb-krumen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 0.6em;
	color: var(--mz-ink-3);
	font-size: 0.85rem;
	font-weight: 600;
}

.mz-tb-krumen a {
	color: var(--mz-ink-3);
	text-decoration: none;
}

.mz-tb-krumen a:hover {
	color: var(--mz-accent);
}

.mz-tb-hero__titel {
	margin: 0 0 0.3em;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.1;
}

.mz-tb-jahre a.is-aktiv {
	border-color: var(--mz-accent);
	background: var(--mz-accent);
	color: #fff;
}

/* Handy: Kopf im Eintrag kompakt, damit der Eintragstitel schnell sichtbar ist – Jahre in einer wischbaren Zeile */
@media (max-width: 768px) {
	/* minmax(0, …): sonst macht die nicht umbrechende Jahreszeile die Spalte breiter als den Kopf */
	.mz-has-szene .mz-tb-hero {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 20px;
		padding: 20px;
	}

	.mz-has-szene .mz-tb-hero > .mz-szene {
		max-width: 190px;
		margin: 0 auto 10px;
	}

	.mz-tb-hero .mz-szene__tipp,
	.mz-tb-hero .mz-tb-kopf > p:first-child {
		display: none;
	}

	.mz-tb-hero__titel {
		font-size: 1.6rem;
	}

	.mz-tb-hero .mz-tb-jahre {
		flex-wrap: nowrap;
		margin: 0.6em -20px 0;
		padding: 0 20px 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mz-tb-hero .mz-tb-jahre a {
		flex: none;
	}
}

/* Übersicht als Zeitleiste: Linie links, Punkt je Eintrag */
.mz-tagebuch-archiv .site-main > article {
	position: relative;
	margin: 0 0 18px;
	padding-left: 34px;
}

.mz-tagebuch-archiv .site-main > article::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -18px;
	left: 9px;
	width: 2px;
	background: var(--mz-line);
}

.mz-tagebuch-archiv .site-main > article::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 2px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--mz-bg);
	border-radius: 50%;
	background: var(--mz-accent);
	box-shadow: 0 0 0 2px var(--mz-accent-soft);
}

.mz-tagebuch-archiv .site-main > article .inside-article {
	padding: 22px 26px;
	border-radius: var(--mz-radius);
	background: var(--mz-surface);
	box-shadow: var(--mz-shadow-s);
}

.mz-tagebuch-archiv .entry-title {
	font-size: 1.25rem;
}

.mz-tagebuch-archiv .post-image img {
	max-height: 300px;
	width: 100%;
	object-fit: cover;
	/* Bei Hochformat-Fotos sitzt Brunos Gesicht meist im oberen Drittel */
	object-position: 50% 30%;
	border-radius: 12px;
}

.mz-tagebuch-archiv .entry-summary p {
	margin-bottom: 0.4em;
}

/* Desktop: Foto links, Datum, Titel und Auszug rechts */
@media (min-width: 701px) {
	.mz-tagebuch-archiv .site-main > article.has-post-thumbnail .inside-article {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 26px;
		align-items: start;
	}

	.mz-tagebuch-archiv article.has-post-thumbnail .post-image {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
	}

	.mz-tagebuch-archiv article.has-post-thumbnail .post-image img {
		aspect-ratio: 1;
		height: 100%;
		max-height: none;
	}

	.mz-tagebuch-archiv article.has-post-thumbnail :is(.entry-header, .entry-summary) {
		grid-column: 2;
	}

	.mz-tagebuch-archiv article.has-post-thumbnail .entry-summary {
		margin-top: 0.6em;
	}
}

/* Eintrag: Hochformat-Fotos nicht bildschirmhoch */
.mz-tagebuch-eintrag .page-header-image-single img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--mz-radius);
}

/* Gezeichnete Illustrationen (tagebuch-illu-*) ganz zeigen statt beschneiden – der Rand hat dieselbe Farbe wie ihr Hintergrund */
.mz-tagebuch-archiv .post-image img[src*="tagebuch-illu-"],
.mz-tagebuch-eintrag .page-header-image-single img[src*="tagebuch-illu-"],
.mz-tb-passend img[src*="tagebuch-illu-"] {
	object-fit: contain;
	object-position: 50% 50%;
	background: #f6ede2;
}

/* Eintrag: "Passend dazu auf miauzoo" */
.mz-tb-passend {
	margin: 2.6em 0 0;
	padding: 24px 26px;
	border-radius: var(--mz-radius);
	background: var(--mz-sand);
}

.mz-tb-passend h2 {
	margin: 0 0 0.8em;
	font-size: 1.35rem;
}

.mz-tb-passend__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.mz-tb-passend__karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: var(--mz-surface);
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink);
	text-decoration: none;
	transition: transform 0.2s var(--mz-ease);
}

.mz-tb-passend__karte:hover,
.mz-tb-passend__karte:focus-visible {
	transform: translateY(-3px);
	color: var(--mz-ink);
}

.mz-tb-passend__karte img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.mz-tb-passend__typ {
	margin: 10px 14px 0;
	color: var(--mz-accent-ink);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mz-tb-passend__titel {
	margin: 2px 14px 14px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
}

.mz-tb-bruno {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--mz-surface);
}

.mz-tb-bruno img {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.mz-tb-bruno p {
	margin: 0;
	font-size: 0.95rem;
}

.mz-tb-helfer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
}

.mz-tb-helfer span {
	color: var(--mz-ink-2);
	font-size: 0.9rem;
	font-weight: 600;
}

.mz-tb-helfer a {
	padding: 0.3em 0.9em;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.mz-tb-helfer a:hover {
	border-color: var(--mz-ink);
}

@media (max-width: 700px) {
	.mz-tb-passend__raster {
		grid-template-columns: 1fr;
	}

	.mz-tb-passend {
		padding: 18px;
	}
}

/* Eintrag: früher / später */
.mz-tb-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 2.4em;
}

.mz-tb-nav a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--mz-sand);
	color: var(--mz-ink);
	font-weight: 700;
	text-decoration: none;
}

.mz-tb-nav a span {
	color: var(--mz-accent-ink);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mz-tb-nav__frueher span::before { content: "← "; }
.mz-tb-nav__spaeter { text-align: right; }
.mz-tb-nav__spaeter span::after { content: " →"; }

.mz-tb-zurueck {
	margin-top: 1em;
	text-align: center;
}

/* Über uns: neueste Einträge */
.mz-tb-neu {
	margin: 2.4em 0;
	padding: 24px 26px;
	border-radius: var(--mz-radius);
	background: var(--mz-sand);
}

.mz-tb-neu h2 {
	margin-top: 0;
}

.mz-tb-liste {
	display: grid;
	gap: 10px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.mz-tb-liste a {
	display: block;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	text-decoration: none;
	transition: transform 0.2s var(--mz-ease);
}

.mz-tb-liste a:hover {
	transform: translateX(4px);
}

.mz-tb-liste__titel {
	display: block;
	font-weight: 750;
}

.mz-tb-liste__auszug {
	display: block;
	margin-top: 2px;
	color: var(--mz-ink-2);
	font-size: 0.92rem;
}

.mz-tb-neu__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1.4em;
	align-items: center;
	margin: 0;
}

.mz-tb-neu__links a {
	color: var(--mz-accent-ink);
	font-weight: 700;
}

.mz-tb-neu__links .mz-tb-neu__alle {
	padding: 0.5em 1.2em;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 600px) {
	.mz-tb-nav {
		grid-template-columns: 1fr;
	}

	.mz-tb-nav__spaeter {
		text-align: left;
	}

	.mz-tagebuch-archiv .site-main > article .inside-article {
		padding: 18px;
	}
}

/* Katzenwetter (inc/wetter.php, Szene "wetter" in inc/szenen.php, assets/js/wetter.js) */
.mz-wetter {
	margin: 0 0 2.6em;
}

.mz-wetter__karte {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px 28px;
	align-items: center;
	padding: 22px 28px;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-wetter__text p {
	margin: 0 0 0.6em;
}

.mz-wetter__ort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 0.8em;
	color: var(--mz-ink-2);
	font-size: 0.9rem;
}

.mz-wetter__ort select {
	padding: 4px 8px;
	border: 1px solid var(--mz-line);
	border-radius: 8px;
	background: var(--mz-bg);
	font: inherit;
	font-weight: 600;
}

.mz-wetter__standort {
	padding: 4px 12px;
	border: 1px dashed var(--mz-line);
	border-radius: 999px;
	background: none;
	color: var(--mz-accent-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mz-wetter__lage {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
}

.mz-wetter__temp {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.mz-wetter__tipp {
	color: var(--mz-ink-2);
	line-height: 1.55;
}

.mz-wetter__mehr {
	color: var(--mz-accent-ink);
	font-weight: 700;
}

.mz-wetter__mehr::after {
	content: " →";
}

.mz-wetter__quelle {
	color: var(--mz-ink-3);
	font-size: 0.75rem;
}

.mz-wetter__quelle a {
	color: inherit;
}

@media (max-width: 700px) {
	.mz-wetter__karte {
		grid-template-columns: 1fr;
		padding: 18px 18px 20px;
	}
}

/* Wetterlagen: alles ist ausgeblendet, die Klasse wx-<typ> an der Szene blendet die passenden Teile ein */
.mz-szene--wetter .wx-himmel {
	fill: #e4e9ef;
	transition: fill 0.4s;
}

.mz-szene--wetter :is(.wx-sonne, .wx-mond, .wx-flimmern, .wx-wolke, .wx-regen, .wx-schnee, .wx-blitz, .wx-wind, .wx-blatt, .wx-schirm, .wx-nebel, .wx-napf, .wx-brille, .wx-schal) {
	display: none;
}

.mz-szene--wetter .wx-wolke { fill: #fff; }
.mz-szene--wetter .wx-mond-schatten { fill: #2e3a5c; }

.mz-szene--wetter.wx-sonne .wx-himmel { fill: #d9edfc; }
.mz-szene--wetter.wx-sonne :is(.wx-sonne, .wx-brille, .wx-wolke--c) { display: inline; }

.mz-szene--wetter.wx-hitze .wx-himmel { fill: #fde3bf; }
.mz-szene--wetter.wx-hitze :is(.wx-sonne, .wx-flimmern, .wx-brille, .wx-napf) { display: inline; }

.mz-szene--wetter.wx-wolken :is(.wx-sonne, .wx-wolke) { display: inline; }

.mz-szene--wetter.wx-nebel .wx-himmel { fill: #ebe8e4; }
.mz-szene--wetter.wx-nebel :is(.wx-nebel, .wx-wolke--c) { display: inline; }

.mz-szene--wetter.wx-regen .wx-himmel { fill: #d2dbe5; }
.mz-szene--wetter.wx-gewitter .wx-himmel { fill: #b6bfcd; }
.mz-szene--wetter:is(.wx-regen, .wx-gewitter) :is(.wx-wolke--a, .wx-wolke--b, .wx-regen, .wx-schirm) { display: inline; }
.mz-szene--wetter.wx-regen .wx-wolke { fill: #a3aebc; }
.mz-szene--wetter.wx-gewitter .wx-wolke { fill: #7b8596; }
.mz-szene--wetter.wx-gewitter .wx-blitz { display: inline; }

.mz-szene--wetter.wx-sturm .wx-himmel { fill: #dbe3ea; }
.mz-szene--wetter.wx-sturm :is(.wx-wind, .wx-blatt, .wx-wolke--a, .wx-wolke--c) { display: inline; }

.mz-szene--wetter.wx-schnee .wx-himmel { fill: #eef3f8; }
.mz-szene--wetter.wx-schnee :is(.wx-wolke--a, .wx-wolke--b, .wx-schnee, .wx-schal) { display: inline; }
.mz-szene--wetter.wx-schnee .wx-wolke { fill: #d9e2ea; }

.mz-szene--wetter.wx-frost .wx-himmel { fill: #e2eef8; }
.mz-szene--wetter.wx-frost :is(.wx-sonne, .wx-schal, .wx-wolke--c) { display: inline; }

/* Nachts: dunkler Himmel, Mond statt Sonne, keine Sonnenbrille */
.mz-szene--wetter.wx-nacht .wx-himmel { fill: #2e3a5c; }
.mz-szene--wetter.wx-nacht .wx-wolke { fill: #5f6b85; }
.mz-szene--wetter.wx-nacht :is(.wx-sonne, .wx-brille, .wx-flimmern) { display: none; }
.mz-szene--wetter.wx-nacht:is(.wx-sonne, .wx-hitze, .wx-wolken, .wx-frost) .wx-mond { display: inline; }

/* Bewegungen */
.mz-szene--wetter .wx-strahlen {
	transform-box: view-box;
	transform-origin: 240px 62px;
	animation: wx-drehen 18s linear infinite;
}

.mz-szene--wetter .wx-zieht {
	animation: wx-ziehen 7s ease-in-out infinite alternate;
}

.mz-szene--wetter .wx-regen path {
	animation: wx-regnen 0.9s linear infinite;
}

.mz-szene--wetter .wx-schnee circle {
	animation: wx-schneien 4.5s linear infinite;
}

.mz-szene--wetter .wx-blitz {
	animation: wx-blitzen 4s linear infinite;
}

.mz-szene--wetter .wx-wind path {
	stroke-dasharray: 60 30;
	animation: wx-wehen 1.6s linear infinite;
}

.mz-szene--wetter .wx-blatt {
	animation: wx-fliegen 3.2s ease-in infinite;
}

.mz-szene--wetter .wx-flimmern {
	animation: wx-flimmern 1.8s ease-in-out infinite alternate;
}

@keyframes wx-drehen { to { transform: rotate(360deg); } }
@keyframes wx-ziehen { from { transform: translateX(-8px); } to { transform: translateX(10px); } }
@keyframes wx-regnen {
	from { transform: translateY(-30px); opacity: 0; }
	20%  { opacity: 1; }
	to   { transform: translateY(70px); opacity: 0; }
}
@keyframes wx-schneien {
	from { transform: translate(0, -40px); opacity: 0; }
	15%  { opacity: 1; }
	50%  { transform: translate(6px, 20px); }
	to   { transform: translate(-4px, 90px); opacity: 0; }
}
@keyframes wx-blitzen {
	0%, 62%, 70%, 76%, 100% { opacity: 0; }
	64%, 68%, 72%, 74%      { opacity: 1; }
}
@keyframes wx-wehen { to { stroke-dashoffset: -90; } }
@keyframes wx-fliegen {
	from { transform: translate(150px, 170px) rotate(0); opacity: 0; }
	15%  { opacity: 1; }
	to   { transform: translate(310px, 50px) rotate(540deg); opacity: 0; }
}
@keyframes wx-flimmern {
	from { transform: translateY(2px); opacity: 0.4; }
	to   { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mz-szene--wetter * {
		animation: none !important;
	}
}

/* Katze des Tages (inc/katze-des-tages.php) */
.mz-kdt {
	margin: 0 0 2.6em;
}

.mz-kdt__karte {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	overflow: hidden;
	background: var(--mz-surface);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
}

.mz-kdt__bild {
	position: relative;
	display: block;
	min-height: 260px;
}

.mz-kdt__bild > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-kdt__kitten {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.mz-kdt__kitten img {
	width: 78px;
	height: 78px;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: var(--mz-shadow-s);
	object-fit: cover;
}

.mz-kdt__kitten span {
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(22, 20, 18, 0.55);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
}

.mz-kdt__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55em;
	padding: 28px 32px;
}

.mz-kdt__text p {
	margin: 0;
}

.mz-kdt__datum {
	color: var(--mz-accent-ink);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mz-kdt__name {
	margin: 0;
	font-size: 1.7rem;
	line-height: 1.15;
}

.mz-kdt__name a {
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-kdt__herkunft {
	color: var(--mz-ink-2);
	font-size: 0.92rem;
}

.mz-kdt__fakt {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--mz-accent-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}

.mz-kdt__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.2em;
	align-items: center;
	margin-top: 0.3em !important;
}

.mz-kdt__links a {
	color: var(--mz-accent-ink);
	font-weight: 700;
}

.mz-kdt__links .mz-kdt__mehr {
	padding: 0.55em 1.2em;
	border-radius: 999px;
	background: var(--mz-ink);
	color: #fff;
	text-decoration: none;
}

.mz-kdt__links .mz-kdt__mehr:hover,
.mz-kdt__links .mz-kdt__mehr:focus-visible {
	background: var(--mz-accent-ink);
	color: #fff;
}

.mz-kdt__morgen {
	color: var(--mz-ink-3);
	font-size: 0.8rem;
}

@media (max-width: 700px) {
	.mz-kdt__karte {
		grid-template-columns: 1fr;
	}

	.mz-kdt__bild {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.mz-kdt__text {
		padding: 20px 20px 24px;
	}

	.mz-kdt__name {
		font-size: 1.45rem;
	}
}

/* Ratgeber "Passend zur Jahreszeit" (inc/saison-artikel.php) */
.mz-saison-tipp {
	--mz-tipp: #d0782c;
	--mz-tipp-hg: #fbeee0;
	margin: 0 0 2.4em;
}

html.mz-saison-winter .mz-saison-tipp { --mz-tipp: #4f7fa8; --mz-tipp-hg: #e9f1f7; }
html.mz-saison-fruehling .mz-saison-tipp { --mz-tipp: #5f8f45; --mz-tipp-hg: #edf4e4; }
html.mz-saison-sommer .mz-saison-tipp { --mz-tipp: #c08a1e; --mz-tipp-hg: #fbf1d6; }
html.mz-fest-advent .mz-saison-tipp,
html.mz-fest-nikolaus .mz-saison-tipp,
html.mz-fest-weihnachten .mz-saison-tipp { --mz-tipp: #b8433a; --mz-tipp-hg: #f8e8e4; }
html.mz-fest-valentinstag .mz-saison-tipp,
html.mz-fest-muttertag .mz-saison-tipp { --mz-tipp: #c95a6d; --mz-tipp-hg: #fbe8eb; }

.mz-saison-tipp--uebersicht {
	margin: 1.2em 0 0;
}

.mz-saison-tipp--artikel {
	margin: 2.4em 0 0;
}

.mz-saison-tipp__karte {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	overflow: hidden;
	background: var(--mz-tipp-hg);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-s);
	color: var(--mz-ink);
	text-decoration: none;
	transition: transform 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease);
}

.mz-saison-tipp__karte:hover,
.mz-saison-tipp__karte:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--mz-shadow-l);
	color: var(--mz-ink);
}

.mz-saison-tipp__karte img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
}

.mz-saison-tipp__text {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	justify-content: center;
	padding: 24px 28px;
}

.mz-saison-tipp__kicker {
	align-self: flex-start;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background: var(--mz-tipp);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mz-saison-tipp__titel {
	font-size: 1.3rem;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.mz-saison-tipp__auszug {
	color: var(--mz-ink-2);
	font-size: 0.95rem;
	line-height: 1.55;
}

.mz-saison-tipp__mehr {
	margin-top: 0.2em;
	color: var(--mz-tipp);
	font-weight: 700;
}

.mz-saison-tipp__mehr::after {
	content: " →";
}

/* Im Artikel und auf Übersichten etwas kleiner */
.mz-saison-tipp--artikel .mz-saison-tipp__titel,
.mz-saison-tipp--uebersicht .mz-saison-tipp__titel {
	font-size: 1.12rem;
}

.mz-saison-tipp--artikel .mz-saison-tipp__karte img {
	min-height: 160px;
}

@media (max-width: 700px) {
	.mz-saison-tipp__karte {
		grid-template-columns: 1fr;
	}

	.mz-saison-tipp__karte img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.mz-saison-tipp__text {
		padding: 18px 20px 22px;
	}
}

/* Kleiner Begleiter (Kürbis, Geschenk …) vorne an der Bildmarke im Logo */
.mz-logo-deko {
	position: relative;
	display: inline-flex;
	flex: none;
}

.mz-logo-deko__begleiter {
	position: absolute;
	right: -7px;
	bottom: -3px;
	width: 50%;
	height: 50%;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(22, 20, 18, 0.25));
	transform-origin: 50% 100%;
	animation: mz-begleiter 0.9s ease-out 0.4s both;
}

.mz-logo a:hover .mz-logo-deko__begleiter {
	animation: mz-wippen 0.6s ease-in-out;
}

@keyframes mz-begleiter {
	from { opacity: 0; transform: translateY(4px) scale(0.6); }
	60%  { opacity: 1; transform: translateY(-1px) scale(1.08); }
	to   { transform: none; }
}

@keyframes mz-wippen {
	25% { transform: rotate(-10deg); }
	75% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mz-logo-deko__begleiter {
		animation: none !important;
	}
}

/* Schalter im Footer, sieht aus wie die Footer-Links */
.mz-deko-schalter {
	padding: 0.35em 0.9em;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: none;
	color: rgba(255, 255, 255, 0.75);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.mz-deko-schalter:hover,
.mz-deko-schalter:focus-visible {
	background: #fff;
	color: var(--mz-ink);
}

/* Vorschau-Leiste (nur mit ?mz_vorschau=1 oder ?mz_datum=…) */
.mz-saison-vorschau {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	max-width: calc(100vw - 32px);
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(22, 20, 18, 0.18);
	font-size: 0.9rem;
	font-weight: 600;
}

.mz-saison-vorschau select {
	margin-left: 8px;
	padding: 4px 8px;
	font: inherit;
	font-weight: 500;
}

.mz-saison-vorschau a {
	color: var(--mz-ink-2);
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.mz-flamme {
		animation: none;
	}
}

/* =========================================================================
   Equipment nach Bereichen (inc/equipment-bereiche.php)
   ========================================================================= */
.mz-eq-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

.mz-eq-sprung {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1.2em;
}

.mz-eq-sprung a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0.45em 0.6em 0.45em 0.85em;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: var(--mz-surface);
	color: var(--mz-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.mz-eq-sprung a:hover {
	border-color: var(--mz-accent);
	color: var(--mz-accent);
}

.mz-eq-sprung .mz-eq-icon {
	color: var(--mz-accent);
}

.mz-eq-sprung span {
	flex: none;
	min-width: 1.6em;
	white-space: nowrap;
	padding: 0.1em 0.45em;
	border-radius: 999px;
	background: var(--mz-sand);
	color: var(--mz-ink-2);
	font-size: 0.78rem;
	text-align: center;
}

.mz-eq-gruppe {
	margin-top: 1.4em;
	padding-top: 1.4em;
	border-top: 1px solid var(--mz-line);
}

.mz-grid-archive .site-main > .mz-eq-gruppe:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mz-eq-gruppe h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0.2em;
	font-size: 1.45rem;
}

.mz-eq-gruppe h2 .mz-eq-icon {
	width: 38px;
	height: 38px;
	padding: 7px;
	border-radius: 12px;
	background: var(--mz-sand);
	color: var(--mz-accent);
}

.mz-eq-gruppe p {
	margin: 0;
	color: var(--mz-ink-2);
}

/* Artikel: Bereich über dem Titel, führt zur Gruppe in der Übersicht */
.mz-eq-bereich {
	margin: 0 0 0.5em;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mz-eq-bereich a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mz-accent);
	text-decoration: none;
}

.mz-eq-bereich a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	/* Sprungmarken auf dem Handy als Raster: alle Bereiche auf einen Blick */
	.mz-eq-sprung {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	.mz-eq-sprung a {
		padding: 0.5em 0.6em;
		border-radius: 12px;
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.mz-eq-sprung span {
		margin-left: auto;
	}

	.mz-eq-gruppe h2 {
		font-size: 1.25rem;
	}
}

/* Startseite: Themen-Wegweiser und "Heute entdeckt" (inc/bereiche.php) */
.mz-wegweiser {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 28px 0 56px;
}

.mz-wegweiser__spalte {
	padding: 22px;
	background: var(--mz-sand);
	border-radius: var(--mz-radius);
}

.mz-wegweiser__spalte h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	font-size: 1.15rem;
}

.mz-wegweiser__spalte h3 a {
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-wegweiser__spalte h3 a:hover {
	color: var(--mz-accent);
}

.mz-wegweiser__spalte h3 span {
	color: var(--mz-ink-3);
	font-size: 0.82rem;
	font-weight: 600;
}

.mz-wegweiser .mz-eq-sprung {
	margin-top: 14px;
}

.mz-entdecken {
	margin: 0 0 56px;
}

.mz-entdecken__intro {
	margin: -0.4em 0 1.2em;
	color: var(--mz-ink-2);
}

@media (max-width: 900px) {
	.mz-wegweiser {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Quiz "Welcher Katzentyp bist du?" (inc/katzentyp.php, assets/js/katzentyp.js)
   ========================================================================= */

.mz-kt {
	margin: 0 0 48px;
	padding: 28px;
	background: var(--mz-surface);
	border: 1.5px solid var(--mz-line);
	border-radius: var(--mz-radius-l);
	scroll-margin-top: 90px;
}

.mz-kt__start {
	text-align: center;
}

.mz-kt__start > p:first-child {
	max-width: 520px;
	margin: 0 auto 1.2em;
	font-size: 1.1rem;
}

.mz-kt__hinweis {
	margin: 1em 0 0;
	color: var(--mz-ink-2);
	font-size: 0.88rem;
}

.mz-kt__kopfzeile {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--mz-ink-2);
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
}

.mz-kt__balken {
	flex: 1;
	height: 8px;
	overflow: hidden;
	background: var(--mz-sand);
	border-radius: 999px;
}

.mz-kt__balken span {
	display: block;
	height: 100%;
	background: var(--mz-accent);
	border-radius: inherit;
	transition: width 0.3s var(--mz-ease);
}

.mz-kt__titel {
	margin: 0.9em 0 0.8em;
	outline: none;
}

.mz-kt__antworten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mz-kt .mz-kt__antwort {
	padding: 16px 18px;
	background: var(--mz-sand);
	border: 2px solid transparent;
	border-radius: var(--mz-radius);
	color: var(--mz-ink);
	font-weight: 600;
	text-align: left;
}

.mz-kt .mz-kt__antwort:hover,
.mz-kt .mz-kt__antwort:focus-visible {
	background: var(--mz-sand);
	border-color: var(--mz-accent);
	color: var(--mz-ink);
	box-shadow: none;
}

.mz-kt .mz-kt__antwort.is-gewaehlt {
	background: var(--mz-accent);
	color: #fff;
}

.mz-kt .mz-kt__zurueck {
	margin-top: 16px;
	padding: 0.4em 0;
	background: none;
	color: var(--mz-ink-2);
	font-weight: 600;
}

.mz-kt .mz-kt__zurueck:hover {
	background: none;
	color: var(--mz-accent);
	box-shadow: none;
	transform: none;
}

.mz-kt__karte {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}

.mz-kt__katze {
	display: block;
	width: 100%;
	height: auto;
	animation: mz-kt-rein 0.6s var(--mz-ease) both;
}

.mz-kt__schwanz {
	transform-origin: 138px 172px;
	animation: mz-kt-wedeln 2.4s ease-in-out infinite;
}

.mz-kt__augen {
	transform-origin: 100px 78px;
	animation: mz-kt-blinzeln 4s infinite;
}

.mz-kt__herz,
.mz-kt__blase {
	transform-box: fill-box;
	transform-origin: center;
	animation: mz-kt-puls 1.6s ease-in-out infinite;
}

@keyframes mz-kt-rein {
	from { opacity: 0; transform: scale(0.85) translateY(10px); }
}

@keyframes mz-kt-wedeln {
	50% { transform: rotate(-10deg); }
}

@keyframes mz-kt-blinzeln {
	0%, 92%, 100% { transform: scaleY(1); }
	95% { transform: scaleY(0.1); }
}

@keyframes mz-kt-puls {
	50% { transform: scale(1.12); }
}

.mz-kt__kicker {
	margin: 0;
	color: var(--mz-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mz-kt__text h3 {
	margin: 0.15em 0 0.1em;
	font-size: 2rem;
}

.mz-kt__unter {
	margin: 0 0 0.8em;
	color: var(--mz-ink-2);
	font-weight: 600;
}

.mz-kt__staerken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-kt__staerken li {
	margin: 0;
	padding: 0.3em 0.9em;
	background: var(--mz-sand);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
}

.mz-kt__zwischen {
	margin: 1.8em 0 0.8em;
}

/* Rassen untereinander: Bild links, Name und Kurztext rechts */
.mz-kt__rassen {
	display: grid;
	gap: 12px;
}

.mz-kt__rasse {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	overflow: hidden;
	background: var(--mz-sand);
	border-radius: var(--mz-radius);
	color: var(--mz-ink);
	text-decoration: none;
	transition: transform 0.2s var(--mz-ease);
}

.mz-kt__rasse:hover {
	color: var(--mz-ink);
	transform: translateY(-2px);
}

.mz-kt__foto {
	position: relative;
	display: block;
	align-self: stretch;
}

.mz-kt__foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 130px;
	object-fit: cover;
}

.mz-kt__rasse-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
}

.mz-kt__rasse-text strong {
	font-size: 1.1rem;
}

.mz-kt__rasse-text span {
	color: var(--mz-ink-2);
	font-size: 0.92rem;
	line-height: 1.5;
}

.mz-kt__rasse-text em {
	color: var(--mz-accent);
	font-size: 0.88rem;
	font-style: normal;
	font-weight: 650;
}

.mz-kt__rasse:hover em {
	text-decoration: underline;
}

.mz-kt__tipp {
	margin: 1.4em 0 0;
}

.mz-kt__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.4em;
}

.mz-kt .mz-btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--mz-ink);
	color: var(--mz-ink);
}

.mz-kt .mz-btn--ghost:hover {
	background: var(--mz-ink);
	box-shadow: none;
	color: #fff;
}

@media (max-width: 640px) {
	.mz-kt {
		padding: 20px 16px;
	}

	.mz-kt__antworten {
		grid-template-columns: 1fr;
	}

	.mz-kt__karte {
		grid-template-columns: 1fr;
		gap: 12px;
		text-align: center;
	}

	.mz-kt__bild {
		max-width: 200px;
		margin: 0 auto;
	}

	.mz-kt__text > p:not([class]) {
		text-align: left;
	}

	.mz-kt__staerken {
		justify-content: center;
	}

	.mz-kt__rasse {
		grid-template-columns: 130px minmax(0, 1fr);
		text-align: left;
	}

	.mz-kt__foto img {
		min-height: 120px;
	}

	.mz-kt__rasse-text {
		padding: 10px 12px;
	}

	.mz-kt__rasse-text strong {
		font-size: 1rem;
	}

	.mz-kt__rasse-text span {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.85rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

/* Abschnitte mit Icon-Überschrift (inc/abschnitte.php): leichte Variante in kurzen Artikeln */
.entry-content .mz-ab-titel {
	display: flex;
	align-items: center;
	gap: 14px;
	scroll-margin-top: 90px;
}

.mz-ab-titel__icon {
	flex: none;
	width: 52px;
	height: 52px;
}

.mz-ab-titel__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Gruppen-Icon (Strich-Icon aus bereiche.php) im gleichen runden Rahmen wie die animierten Icons */
.mz-ab-gruppe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--mz-sand);
	border-radius: 50%;
	color: var(--mz-accent);
}

.mz-ab-titel__icon .mz-ab-gruppe svg {
	width: 52%;
	height: 52%;
}

/* Karten (Kitten-Wegweiser, lange Artikel): sandfarbene Kopfleiste, Icon im weißen Kreis */
.mz-ab-karte {
	margin: 0 0 28px;
	padding: 0 36px 12px;
	overflow: hidden;
	background: var(--mz-surface);
	border: 1.5px solid var(--mz-line);
	border-radius: var(--mz-radius-l);
}

.mz-ab-karte:first-of-type {
	margin-top: 36px;
}

.entry-content .mz-ab-karte .mz-ab-titel {
	gap: 18px;
	margin: 0 -36px 1.2em;
	padding: 18px 36px;
	background: var(--mz-sand);
	border-bottom: 1.5px solid var(--mz-line);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.2;
}

.mz-ab-karte .mz-ab-titel__icon {
	width: 68px;
	height: 68px;
	padding: 4px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(60, 40, 30, 0.08);
}

.mz-ab-karte .mz-ab-titel__icon .ic-bg {
	fill: #fff;
}

.mz-ab-karte .mz-ab-gruppe {
	background: #fff;
}

.mz-ab-karte > .mz-abschnittsbild:first-of-type {
	margin-top: 0;
}

@media (max-width: 640px) {
	.entry-content .mz-ab-titel {
		gap: 12px;
	}

	.mz-ab-titel__icon {
		width: 44px;
		height: 44px;
	}

	.mz-ab-karte {
		margin-bottom: 20px;
		padding: 0 18px 6px;
	}

	.entry-content .mz-ab-karte .mz-ab-titel {
		gap: 12px;
		margin: 0 -18px 1em;
		padding: 14px 18px;
	}

	.mz-ab-karte .mz-ab-titel__icon {
		width: 52px;
		height: 52px;
		padding: 3px;
	}
}

/* Teaser zum Quiz: Text links, die acht Katzentypen laufen rechts als Band durch */
.mz-kt-teaser {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 32px;
	align-items: center;
	margin: 0 0 56px;
	padding: 36px 0 36px 40px;
	overflow: hidden;
	background: var(--mz-sand);
	border-radius: var(--mz-radius-l);
}

.mz-kt-teaser__kicker {
	margin: 0 0 0.3em;
	color: var(--mz-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-content .mz-kt-teaser__titel {
	margin: 0 0 0.4em;
}

.mz-kt-teaser__text p:not([class]) {
	margin: 0 0 1.2em;
	color: var(--mz-ink-2);
}

.mz-kt-teaser__cta {
	display: inline-flex;
	gap: 0.4em;
	padding: 0.8em 1.6em;
	background: var(--mz-ink);
	border-radius: 999px;
	color: #fff;
	font-weight: 650;
	text-decoration: none;
	transition: background 0.2s var(--mz-ease), transform 0.2s var(--mz-ease), box-shadow 0.2s;
}

.mz-kt-teaser__cta:hover,
.mz-kt-teaser__cta:focus {
	background: var(--mz-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(208, 120, 44, 0.3);
}

.mz-kt-teaser__band {
	display: flex;
	min-width: 0;
	padding-bottom: 16px;
	/* weich ein- und ausblenden an den Rändern */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.mz-kt-teaser__band ul {
	display: flex;
	flex: none;
	gap: 18px;
	margin: 0;
	padding: 0 18px 0 0;
	list-style: none;
	animation: mz-kt-band 36s linear infinite;
}

.mz-kt-teaser:hover .mz-kt-teaser__band ul {
	animation-play-state: paused;
}

.mz-kt-teaser__band li {
	width: 150px;
	margin: 0;
	text-align: center;
}

.mz-kt-teaser__band li:nth-child(even) {
	transform: translateY(14px);
}

.mz-kt-teaser__band .mz-kt__katze {
	animation: none;
}

.mz-kt-teaser__band .mz-kt__katze > circle:first-child {
	fill: #fff;
}

.mz-kt-teaser__band .mz-kt__augen,
.mz-kt-teaser__band .mz-kt__schwanz {
	animation-delay: var(--mz-kt-v, 0s);
}

.mz-kt-teaser__band span {
	display: block;
	margin-top: 4px;
	font-size: 0.88rem;
	font-weight: 650;
	white-space: nowrap;
}

@keyframes mz-kt-band {
	to { transform: translateX(-100%); }
}

/* Über dem Footer (Kitten, Ernährung, Equipment, Ratgeber): bündig mit dem Inhalt */
.mz-kt-teaser-fuss {
	padding: 0 40px;
}

.mz-kt-teaser-fuss .mz-kt-teaser__titel {
	margin: 0 0 0.4em;
}

@media (max-width: 768px) {
	.mz-kt-teaser-fuss {
		padding: 0 16px;
	}
}

@media (max-width: 760px) {
	.mz-kt-teaser {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 28px 0;
	}

	.mz-kt-teaser__text {
		padding: 0 20px;
	}

	.mz-kt-teaser__band li {
		width: 116px;
	}

	.mz-kt-teaser__band span {
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mz-kt-teaser__band {
		overflow-x: auto;
	}

	.mz-kt-teaser__band ul {
		animation: none;
	}

	.mz-kt-teaser__band ul + ul {
		display: none;
	}

	.mz-kt__katze,
	.mz-kt__schwanz,
	.mz-kt__augen,
	.mz-kt__herz,
	.mz-kt__blase {
		animation: none;
	}
}