/* ==========================================================================
   Vachroi·VariAble — Design-Tokens + Komponenten
   Werte 1:1 übernommen aus dem Next.js-Entwurf (vachroi-variable-web/) bzw.
   dem Design-Handoff (design_handoff_vachroi_variable/README.md).
   Klassen sind global mit "vv-" präfixiert, damit sie nicht mit WordPress-
   Core- oder Plugin-Styles kollidieren.
   ========================================================================== */

:root {
	/* Grund / Flächen */
	--color-bg: #f7f2ea;
	--color-surface: #fffdf9;
	--color-tint: #efe4d5;
	--color-tint-hover: #e9dccb;

	/* Text */
	--color-text: #241f1b;
	--color-text-secondary: #5f5548;
	--color-text-secondary-2: #6b6156;
	--color-text-muted: #9a8e7e;

	/* Akzent (Terrakotta) */
	--color-accent: #b4553a;
	--color-accent-hover: #9a4127;
	--color-accent-hover-2: #8f3f28;

	/* Ränder / Hairlines */
	--color-border-1: #e4dccf;
	--color-border-2: #e9e0d1;
	--color-border-3: #d3c8b6;
	--color-border-4: #dcd2c2;

	/* Dunkle Bänder / Footer */
	--color-dark: #241f1b;
	--color-dark-2: #3a332a;
	--color-footer-text: #c9bdac;
	--color-footer-text-muted: #7d7060;

	/* Gold (Auszeichnung) */
	--color-gold: #a8842f;

	/* Auf-Akzent-Töne */
	--color-on-accent-1: #c98b6d;
	--color-on-accent-2: #f0cdbc;
	--color-on-accent-3: #f6e2d7;

	/* Selection */
	--color-selection: #ecd9c4;

	/* Bildrahmen */
	--color-frame-border: #e0d5c3;

	/* Layout */
	--container-max: 1180px;
	--container-narrow: 720px;
	--container-band: 900px;
	--container-padding: 30px;

	/* Radius */
	--radius-card: 12px;
	--radius-card-lg: 14px;
	--radius-image: 10px;
	--radius-image-sm: 8px;
	--radius-pill: 999px;

	/* Schatten */
	--shadow-card-hover: 0 20px 40px -26px rgba(70, 45, 20, 0.5);
	--shadow-badge: 0 12px 30px -18px rgba(60, 40, 20, 0.4);

	/* Schriften (selbst-gehostet, siehe fonts.css) */
	--font-heading: 'Spectral', Georgia, 'Times New Roman', serif;
	--font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}
a:hover {
	color: var(--color-accent-hover-2);
}

::selection {
	background: var(--color-selection);
}

h1,
h2,
h3,
h4,
blockquote,
p,
figure {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
}

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

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* --- Layout-Hilfsklassen -------------------------------------------------- */
.vv-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-padding);
	width: 100%;
}
.vv-container--narrow {
	max-width: var(--container-narrow);
}
.vv-container--band {
	max-width: var(--container-band);
}

.vv-main {
	flex: 1;
	width: 100%;
}

.vv-kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}

/* ==========================================================================
   Bildrahmen (ersetzt die PhotoFrame-Komponente)
   ========================================================================== */
.vv-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-frame-border);
	background: var(--color-tint);
	border-radius: var(--radius-image);
}
.vv-frame--flat {
	border-radius: 0;
}
.vv-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bei hochformatigen Fotos in einem breiteren Rahmen lieber den oberen
	   Bereich zeigen (meist der wichtige Teil, z. B. Gesichter) statt mittig
	   gleichmäßig oben und unten zu beschneiden. */
	object-position: center top;
}
.vv-frame--1x1 {
	aspect-ratio: 1 / 1;
}
.vv-frame--4x5 {
	aspect-ratio: 4 / 5;
}
.vv-frame--3x4 {
	aspect-ratio: 3 / 4;
}
.vv-frame--16x10 {
	aspect-ratio: 16 / 10;
}
.vv-frame--16x9 {
	aspect-ratio: 16 / 9;
}
/* Kein festes Seitenverhältnis — für die große Artikel-Titelgrafik, die
   Fotos unbeschnitten in ihrer eigenen Proportion zeigen soll. */
.vv-frame--auto img {
	height: auto;
	object-fit: initial;
}

/* ==========================================================================
   Header
   ========================================================================== */
.vv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 242, 234, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border-1);
}

.vv-header__inner {
	height: 78px;
	display: flex;
	align-items: center;
	gap: 26px;
}

.vv-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	color: var(--color-text);
	flex: none;
}
.vv-brand:hover {
	color: var(--color-text);
}
.vv-brand__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: -0.01em;
}
.vv-brand__dot {
	color: var(--color-accent);
}
.vv-brand__tagline {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 5px;
}

.vv-nav {
	margin-left: auto;
	display: flex;
	gap: 1px;
	align-items: center;
	/* Bewusst kein overflow: Ein Aufklappmenü würde sonst abgeschnitten.
	   Für schmale Bildschirme gibt es den Menüknopf. */
}
.vv-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1px;
	align-items: center;
}
.vv-nav a {
	display: inline-block;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	padding: 9px 13px;
	border-radius: var(--radius-pill);
	transition: 0.15s;
	color: var(--color-text-secondary-2);
	background: transparent;
}
.vv-nav a:hover {
	color: var(--color-text);
	background: var(--color-tint);
}
.vv-nav .current-menu-item > a,
.vv-nav .current_page_item > a,
.vv-nav .current-menu-parent > a,
.vv-nav .current-post-ancestor > a,
.vv-nav .vv-nav__item--active > a,
.vv-nav a.vv-nav__link--active {
	color: var(--color-text);
	background: var(--color-tint);
}
.vv-nav li {
	flex-shrink: 0;
	position: relative;
}

/* --- Aufklappmenü --------------------------------------------------------
   Untermenüs erscheinen beim Überfahren mit der Maus. `:focus-within` sorgt
   dafür, dass sie sich auch mit der Tastatur erreichen lassen — sonst käme
   man ohne Maus nie an die Einträge. Ein kleiner Pfeil markiert die Punkte,
   hinter denen sich etwas verbirgt. */
.vv-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	vertical-align: 2px;
	border-right: 1.3px solid currentColor;
	border-bottom: 1.3px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}
.vv-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 210px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border-1);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card-hover);
}
.vv-nav .menu-item-has-children:hover > .sub-menu,
.vv-nav .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
/* Die Lücke zwischen Knopf und Klappe überbrücken, damit das Menü beim
   Hinuntergleiten der Maus nicht zuklappt. */
.vv-nav .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}
.vv-nav .sub-menu li {
	width: 100%;
}
.vv-nav .sub-menu a {
	display: block;
	white-space: normal;
	font-size: 13.5px;
	padding: 8px 12px;
	border-radius: var(--radius-image-sm);
}

.vv-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 1px solid var(--color-border-4);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: 0.15s;
}
.vv-search-toggle:hover,
.vv-search-toggle[aria-expanded="true"] {
	color: var(--color-text);
	border-color: var(--color-text);
	background: var(--color-tint);
}

.vv-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border-1);
	box-shadow: var(--shadow-card-hover);
	padding: 22px 0;
}
.vv-search-panel .vv-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 560px;
}
.vv-search-panel .vv-newsletter__input {
	flex: 1;
}

.vv-lang {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-border-4);
	border-radius: var(--radius-pill);
	overflow: hidden;
	flex: none;
}
.vv-lang a,
.vv-lang span {
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	border: none;
	padding: 8px 13px;
	background: transparent;
	color: var(--color-text-secondary-2);
	text-transform: uppercase;
}
.vv-lang .vv-lang--active {
	background: var(--color-accent);
	color: #faf3ec;
}

/* Menüknopf für schmale Displays — oberhalb des Umbruchpunkts unsichtbar. */
.vv-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	margin-left: auto;
	border: 1px solid var(--color-border-4);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: 0.15s;
}
.vv-nav-toggle:hover,
.vv-nav-toggle[aria-expanded="true"] {
	color: var(--color-text);
	border-color: var(--color-text);
	background: var(--color-tint);
}
/* Drei Striche aus einem Element: der mittlere ist das Element selbst. */
.vv-nav-toggle__bars,
.vv-nav-toggle__bars::before,
.vv-nav-toggle__bars::after {
	display: block;
	width: 16px;
	height: 1.6px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.18s, opacity 0.18s;
}
.vv-nav-toggle__bars {
	position: relative;
}
.vv-nav-toggle__bars::before,
.vv-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.vv-nav-toggle__bars::before {
	top: -5px;
}
.vv-nav-toggle__bars::after {
	top: 5px;
}
/* Aufgeklappt werden die Striche zum Kreuz. */
.vv-nav-toggle[aria-expanded="true"] .vv-nav-toggle__bars {
	background: transparent;
}
.vv-nav-toggle[aria-expanded="true"] .vv-nav-toggle__bars::before {
	transform: translateY(5px) rotate(45deg);
}
.vv-nav-toggle[aria-expanded="true"] .vv-nav-toggle__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 940px) {
	.vv-nav-toggle {
		display: flex;
	}
	/* Das Menü wandert unter die Kopfzeile und wird über den Knopf geöffnet. */
	.vv-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		overflow: visible;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border-1);
		box-shadow: var(--shadow-card-hover);
		padding: 10px var(--container-padding) 16px;
	}
	.vv-nav[data-open="true"] {
		display: block;
		/* Das Menü hängt an der klebenden Kopfzeile und wandert beim Scrollen
		   der Seite nicht mit. Ist die Liste länger als der Bildschirm — mit
		   den Untermenüs schnell der Fall — blieben die unteren Punkte sonst
		   dauerhaft unerreichbar. Es bekommt deshalb einen eigenen
		   Scrollbereich. Das Prozentmaß bezieht sich auf die Kopfzeile (den
		   umgebenden positionierten Kasten), sodass sich die Höhe von selbst
		   anpasst, wenn die Kopfzeile einmal höher oder niedriger wird. */
		max-height: calc(100vh - 100%);
		/* dvh berücksichtigt die ein- und ausblendende Adressleiste mobiler
		   Browser; vh darüber bleibt als Rückfall für ältere stehen. */
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
		/* Ist das Menü zu Ende gescrollt, soll nicht die Seite dahinter
		   weiterrutschen. */
		overscroll-behavior: contain;
	}
	.vv-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.vv-nav a {
		display: block;
		font-size: 16px;
		padding: 12px 14px;
	}
	/* Auf Touchgeräten gibt es kein Überfahren mit der Maus. Untermenüs
	   stehen deshalb offen und eingerückt unter ihrem Punkt, statt sich
	   hinter einer Klappe zu verstecken, die niemand öffnen kann. */
	.vv-nav .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin: 0 0 4px 14px;
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--color-border-1);
		border-radius: 0;
		box-shadow: none;
	}
	.vv-nav .sub-menu a {
		font-size: 15px;
		padding: 10px 14px;
	}
	.vv-nav .menu-item-has-children > a::after {
		display: none;
	}
}

@media (max-width: 860px) {
	.vv-brand__tagline {
		display: none;
	}
}

/* ==========================================================================
   Startseite — Hero
   ========================================================================== */
.vv-hero {
	padding-block: 78px 56px;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: center;
}
.vv-hero__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 22px;
}
.vv-hero__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	text-wrap: balance;
}
.vv-hero__sub {
	font-size: 18px;
	line-height: 1.65;
	color: var(--color-text-secondary);
	max-width: 44ch;
	margin: 0 0 32px;
}
.vv-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.vv-hero__figure {
	margin: 0;
	position: relative;
}
.vv-badge {
	position: absolute;
	bottom: -18px;
	left: -18px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-1);
	border-radius: var(--radius-image-sm);
	padding: 12px 16px;
	box-shadow: var(--shadow-badge);
}
.vv-badge__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 15px;
	color: var(--color-gold);
}
.vv-badge__sub {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* --- Buttons --- */
.vv-btn {
	display: inline-block;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	border: none;
	transition: background 0.15s, border-color 0.15s;
}
.vv-btn--primary {
	color: #faf7f1;
	background: var(--color-accent);
}
.vv-btn--primary:hover {
	background: var(--color-accent-hover);
	color: #faf7f1;
}
.vv-btn--secondary {
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-border-3);
}
.vv-btn--secondary:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}
.vv-btn--dark {
	color: #faf7f1;
	background: var(--color-dark);
	padding: 15px 30px;
	flex: none;
}
.vv-btn--dark:hover {
	background: var(--color-dark-2);
	color: #faf7f1;
}

/* --- Aphorismus-Band --- */
.vv-aph-band {
	background: var(--color-dark);
	color: #f2e9db;
}
.vv-aph-band__inner {
	padding-block: 72px;
	text-align: center;
}
.vv-aph-band__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-on-accent-1);
	margin-bottom: 26px;
}
.vv-aph-band__quote {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.4;
	font-style: italic;
	text-wrap: balance;
}
.vv-aph-band__by {
	margin-top: 26px;
	font-size: 14px;
	color: #a99a86;
}

/* --- Neueste Beiträge --- */
.vv-latest {
	padding-block: 80px 20px;
}
.vv-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}
.vv-section-head__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 34px;
	letter-spacing: -0.01em;
}
.vv-section-head__link {
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-accent);
}

.vv-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.vv-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* --- Teaser-Reihe --- */
.vv-teasers {
	padding-block: 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}
.vv-teaser {
	cursor: pointer;
	border-radius: var(--radius-card-lg);
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 250px;
	color: inherit;
	transition: background 0.15s;
}
.vv-teaser--author {
	background: var(--color-tint);
}
.vv-teaser--author:hover {
	background: var(--color-tint-hover);
	color: inherit;
}
.vv-teaser--engage {
	background: var(--color-accent);
	color: #faf3ec;
}
.vv-teaser--engage:hover {
	background: var(--color-accent-hover);
	color: #faf3ec;
}
.vv-teaser__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.vv-teaser--author .vv-teaser__kicker {
	color: #96795a;
}
.vv-teaser--engage .vv-teaser__kicker {
	color: var(--color-on-accent-2);
}
.vv-teaser__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.25;
	margin: 0 0 14px;
}
.vv-teaser__text {
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
	max-width: 42ch;
}
.vv-teaser--author .vv-teaser__text {
	color: var(--color-text-secondary-2);
}
.vv-teaser--engage .vv-teaser__text {
	color: var(--color-on-accent-3);
}
.vv-teaser__cta {
	margin-top: 26px;
	font-weight: 600;
	font-size: 14px;
}
.vv-teaser--author .vv-teaser__cta {
	color: var(--color-accent);
}
.vv-teaser--engage .vv-teaser__cta {
	color: #fff;
}

/* ==========================================================================
   Beitrags-Karte (Home + Beiträge)
   ========================================================================== */
.vv-card {
	cursor: pointer;
	background: var(--color-surface);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s, box-shadow 0.18s;
	color: inherit;
}
.vv-card:hover {
	color: inherit;
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}
.vv-card__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.vv-card__cat {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 12px;
}
.vv-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.28;
	margin-bottom: 12px;
}
.vv-card__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--color-text-secondary-2);
	margin-bottom: 18px;
	flex: 1;
}
.vv-card__date {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
}

/* ==========================================================================
   Seitenkopf (Beiträge, Gedichte, Grußkarten, Autor)
   ========================================================================== */
.vv-page {
	padding-block: 70px 90px;
}
.vv-page__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 42px;
	letter-spacing: -0.02em;
	margin: 0 0 30px;
}
.vv-page__sub {
	font-size: 17px;
	color: var(--color-text-secondary);
	max-width: 52ch;
	margin: 0 0 40px;
	line-height: 1.6;
}

/* --- Filter-Chips --- */
.vv-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.vv-chip {
	display: inline-block;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	transition: 0.15s;
	background: transparent;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border-3);
}
.vv-chip:hover {
	color: var(--color-text);
	border-color: var(--color-text);
}
.vv-chip--active,
.vv-chip--active:hover {
	background: var(--color-accent);
	color: #faf3ec;
	border-color: var(--color-accent);
}

/* --- Sprung-Navigation (z. B. Gedichte / Aphorismen) --- */
.vv-subnav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.vv-subnav a {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	transition: 0.15s;
	background: transparent;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border-3);
	text-decoration: none;
}
.vv-subnav a:hover {
	color: var(--color-text);
	border-color: var(--color-text);
}
.vv-subnav a:target,
.vv-subnav a:focus-visible {
	background: var(--color-accent);
	color: #faf3ec;
	border-color: var(--color-accent);
}

/* --- Archiv / Kategorien-Übersicht --- */
.vv-archive-list {
	border-top: 1px solid var(--color-border-1);
}
.vv-archive-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 6px;
	border-bottom: 1px solid var(--color-border-1);
	color: inherit;
}
.vv-archive-row:hover .vv-archive-row__title {
	color: var(--color-accent);
}
.vv-archive-row__title {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 18px;
	transition: 0.15s;
}
.vv-archive-row__count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* --- Suchergebnisse --- */
.vv-search-group {
	margin-bottom: 44px;
}
.vv-search-group__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 4px;
}
.vv-search-result {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 18px 6px;
	border-bottom: 1px solid var(--color-border-1);
	color: inherit;
}
.vv-search-result:hover .vv-search-result__title {
	color: var(--color-accent);
}
.vv-search-result__title {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 17px;
	transition: 0.15s;
}
.vv-search-result__tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.vv-search-result__excerpt {
	flex-basis: 100%;
	font-size: 14px;
	color: var(--color-text-secondary-2);
}

/* ==========================================================================
   Autor-Seite
   ========================================================================== */
.vv-author-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 56px;
	align-items: start;
}
.vv-author__portrait {
	margin-bottom: 20px;
}
.vv-awards {
	background: var(--color-surface);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-image);
	padding: 22px;
}
.vv-awards__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.vv-awards__row {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #efe6d6;
}
.vv-awards__star {
	color: var(--color-gold);
	font-size: 15px;
}
.vv-awards__text {
	font-size: 14px;
	line-height: 1.45;
	color: #4b4237;
}
.vv-author__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 26px;
}
.vv-author__bio1 {
	font-size: 18px;
	line-height: 1.7;
	color: #4b4237;
	margin: 0 0 20px;
}
.vv-author__bio2 {
	font-size: 16px;
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin: 0 0 36px;
}
.vv-hommage {
	border-left: 3px solid var(--color-accent);
	padding: 6px 0 6px 26px;
	margin-bottom: 16px;
}
.vv-hommage__quote {
	margin: 0;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: #3a332a;
}
.vv-hommage__by {
	margin-top: 16px;
	font-size: 13px;
	font-family: var(--font-mono);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Gedichte & Aphorismen
   ========================================================================== */
.vv-aph-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 60px;
}
.vv-aph-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-card);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
}
.vv-aph-card__mark {
	font-family: var(--font-heading);
	font-size: 40px;
	line-height: 0.6;
	color: #dcc9ad;
}
.vv-aph-card__quote {
	margin: 14px 0 0;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	color: #3a332a;
}

.vv-list-label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 26px;
	margin: 0 0 22px;
}
.vv-poem-list {
	border-top: 1px solid var(--color-border-1);
}
.vv-poem-row {
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 22px 6px;
	border-bottom: 1px solid var(--color-border-1);
	color: inherit;
}
.vv-poem-row:hover {
	background: #f0e6d6;
	color: inherit;
}
.vv-poem-row__no {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-accent);
	width: 34px;
	flex: none;
}
.vv-poem-row__title {
	font-family: var(--font-heading);
	font-size: 22px;
	flex: 1;
}
.vv-poem-row__cat {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
}

/* ==========================================================================
   Grußkarten & Fotoserien
   ========================================================================== */
.vv-collection {
	border-radius: var(--radius-card-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-2);
	background: var(--color-surface);
	transition: box-shadow 0.18s;
	display: block;
	color: inherit;
}
.vv-collection:hover {
	box-shadow: 0 20px 40px -28px rgba(70, 45, 20, 0.5);
	color: inherit;
}
.vv-collection__body {
	padding: 24px 26px 28px;
}
.vv-collection__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 8px;
}
.vv-collection__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--color-text-secondary-2);
	margin: 0;
}

/* ==========================================================================
   Engagement
   ========================================================================== */
.vv-engage-band {
	background: var(--color-accent);
	color: #faf3ec;
}
.vv-engage-band__inner {
	padding-block: 76px;
}
.vv-engage-band__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-on-accent-2);
	margin-bottom: 20px;
}
.vv-engage-band__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
}
.vv-engage-band__lead {
	font-size: 19px;
	line-height: 1.7;
	color: var(--color-on-accent-3);
	max-width: 56ch;
	margin: 0;
}
.vv-engage-body {
	padding-block: 64px 90px;
}
.vv-partner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 44px;
}
.vv-partner {
	background: var(--color-surface);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.vv-partner__body {
	padding: 24px 30px 30px;
}
.vv-partner__tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}
.vv-partner__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 10px;
}
.vv-partner__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-secondary-2);
	margin: 0;
}
.vv-partner__unverified {
	margin: 10px 0 0;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-accent-hover);
}

.vv-donate {
	background: var(--color-tint);
	border-radius: var(--radius-card-lg);
	padding: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.vv-donate__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 26px;
	margin: 0 0 8px;
}
.vv-donate__text {
	font-size: 15px;
	color: var(--color-text-secondary-2);
	margin: 0;
	max-width: 46ch;
	line-height: 1.6;
}

/* ==========================================================================
   Lese-Ansicht (Einzelbeitrag / Gedicht / Seite)
   ========================================================================== */
.vv-article {
	padding-block: 56px 90px;
}
.vv-article__back {
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}
.vv-article__cat {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 32px 0 16px;
}
.vv-article__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	text-wrap: balance;
}
.vv-article__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-muted);
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-border-1);
	margin-bottom: 36px;
}
.vv-article__figure {
	margin: 0 0 40px;
}

/* Inhalt aus dem WordPress-Editor (the_content) */
.vv-prose {
	font-family: var(--font-heading);
	font-size: 18px;
	line-height: 1.78;
	color: #43392f;
}
.vv-prose > p {
	margin: 0 0 24px;
}
.vv-prose > p:first-child {
	font-size: 22px;
	line-height: 1.6;
	color: #3a332a;
	margin-bottom: 28px;
}
.vv-prose h2 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	margin: 44px 0 18px;
	color: var(--color-text);
}
.vv-prose h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	margin: 36px 0 14px;
	color: var(--color-text);
}
.vv-prose ul,
.vv-prose ol {
	margin: 0 0 24px;
	padding-left: 24px;
}
.vv-prose li {
	margin-bottom: 8px;
}
.vv-prose blockquote {
	border-left: 3px solid var(--color-accent);
	padding: 6px 0 6px 26px;
	margin: 0 0 24px;
	font-style: italic;
	color: #3a332a;
}
/* Lange Wörter und URLs aus dem alten Bestand sollen umbrechen statt die
   Seite breiter zu machen — sonst verschiebt sich auf dem Handy das gesamte
   Layout und die Texte landen am Displayrand. */
.vv-prose {
	overflow-wrap: break-word;
}
.vv-prose table,
.vv-prose pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
.vv-prose img {
	display: block;
	/* Bilder aus dem Mirror tragen oft noch ihre alte, kleine Breite
	   (z. B. width="225") — hier auf eine vernünftige Größe begrenzt und
	   zentriert, unabhängig von der alten Ausrichtungsklasse
	   (aligncenter/alignleft/alignright), damit die schmale Lesespalte
	   nicht durcheinandergerät. */
	max-width: min(480px, 100%);
	height: auto;
	margin: 32px auto;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.vv-prose figure {
	margin: 32px 0;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.vv-prose figure img {
	max-width: 100%;
	margin: 0;
}
.vv-prose figcaption {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 10px;
	text-align: center;
}
.vv-prose a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vv-prose .wp-block-embed,
.vv-prose iframe {
	max-width: 100%;
	margin: 32px 0;
}

/* Gedicht-Vers */
.vv-verse {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 19px;
	line-height: 1.7;
	color: #3a332a;
	margin: 0 0 24px;
}

.vv-share {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--color-border-1);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.vv-share__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.vv-share__links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.vv-share__pill {
	font-family: var(--font-mono);
	font-size: 12px;
	border: 1px solid var(--color-border-4);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	color: #4b4237;
}
.vv-share__pill:hover {
	border-color: var(--color-text);
	color: #4b4237;
}

/* ==========================================================================
   Blätterfunktion (ältere/neuere Beiträge)
   ========================================================================== */
.vv-pagination {
	margin-top: 50px;
	display: flex;
	justify-content: center;
}
.vv-pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.vv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--color-border-3);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-secondary);
	transition: 0.15s;
}
.vv-pagination .page-numbers:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}
.vv-pagination .page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #faf3ec;
}
.vv-pagination .dots {
	border: none;
}

/* ==========================================================================
   Newsletter-Band
   ========================================================================== */
.vv-newsletter {
	background: var(--color-tint);
	border-top: 1px solid var(--color-border-1);
}
.vv-newsletter__inner {
	padding-block: 64px;
	text-align: center;
}
.vv-newsletter__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}
.vv-newsletter__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 12px;
}
.vv-newsletter__sub {
	font-size: 15px;
	color: var(--color-text-secondary-2);
	margin-bottom: 26px;
	line-height: 1.6;
}
.vv-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 440px;
	margin: 0 auto;
}
.vv-newsletter__input {
	flex: 1;
	font-family: var(--font-body);
	font-size: 15px;
	padding: 14px 18px;
	border: 1px solid var(--color-border-3);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}
.vv-newsletter__input:focus-visible {
	border-color: var(--color-accent);
	outline: none;
}

@media (max-width: 520px) {
	.vv-newsletter__form {
		flex-direction: column;
	}
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
.vv-contact-form {
	max-width: 560px;
}
.vv-field {
	margin-bottom: 20px;
}
.vv-field label {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary-2);
	margin-bottom: 8px;
}
.vv-field textarea.vv-newsletter__input,
.vv-field select.vv-newsletter__input {
	width: 100%;
	border-radius: var(--radius-image);
}
.vv-field textarea.vv-newsletter__input {
	resize: vertical;
	font-family: var(--font-body);
}
.vv-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-secondary);
	text-transform: none;
	letter-spacing: normal;
}
.vv-field--checkbox input[type='checkbox'] {
	margin-top: 3px;
	flex: none;
}
.vv-field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vv-notice {
	padding: 16px 20px;
	border-radius: var(--radius-image);
	font-size: 14px;
	margin-bottom: 26px;
}
.vv-notice--ok {
	background: var(--color-tint);
	color: var(--color-text);
	border: 1px solid var(--color-border-2);
}
.vv-notice--error {
	background: #f6e2d7;
	color: #7d5411;
	border: 1px solid #e6c8ab;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.vv-footer {
	background: var(--color-dark);
	color: var(--color-footer-text);
}
.vv-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 60px 0 44px;
	border-bottom: 1px solid var(--color-dark-2);
}
.vv-footer__brand {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
	color: #f2e9db;
	margin-bottom: 12px;
}
.vv-footer__tag {
	font-size: 14px;
	line-height: 1.65;
	color: #a99a86;
	max-width: 38ch;
	margin: 0;
}
.vv-footer__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-footer-text-muted);
	margin-bottom: 16px;
}
.vv-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vv-footer__list a {
	cursor: pointer;
	font-size: 14px;
	color: var(--color-footer-text);
}
.vv-footer__list a:hover {
	color: #f2e9db;
}
.vv-footer__legal {
	padding: 24px 0 30px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-footer-text-muted);
}
.vv-footer__legal-links {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vv-footer__legal-links a {
	color: var(--color-footer-text-muted);
}
.vv-footer__legal-links a:hover {
	color: var(--color-footer-text);
}

/* ==========================================================================
   Bildwechsler (Autorenseite)
   ========================================================================== */
.vv-photoswitch {
	position: relative;
}
.vv-photoswitch__stage {
	position: relative;
}
/* Alle Fotos liegen übereinander; sichtbar ist nur das aktive. Das erste
   bestimmt die Höhe, die übrigen werden darüber gelegt. */
/* Alle Ebenen liegen deckungsgleich im Rahmen — die Höhe kommt aus dem
   Seitenverhältnis des Rahmens, nicht aus dem ersten Bild. Sonst säße ein
   Querformat oben und darunter bliebe eine leere Fläche. */
.vv-photoswitch__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.vv-photoswitch__slide.is-active {
	opacity: 1;
	visibility: visible;
}
/* Die Fotos sind mal quer, mal hoch. Würden sie den Rahmen füllen (cover),
   schnitte er bei Querformaten die Hälfte des Bildes weg — deshalb wird hier
   das ganze Foto eingepasst und der Rest bleibt Hintergrundfläche. So bleibt
   die Höhe außerdem über alle Fotos gleich und nichts springt beim Wechseln. */
.vv-photoswitch__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.vv-photoswitch__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-4);
	border-radius: 50%;
	background: rgba(247, 242, 234, 0.92);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: 0.15s;
}
.vv-photoswitch__nav:hover {
	color: var(--color-text);
	border-color: var(--color-text);
	background: var(--color-bg);
}
.vv-photoswitch__nav--prev {
	left: 12px;
}
.vv-photoswitch__nav--next {
	right: 12px;
}
.vv-photoswitch__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.vv-photoswitch__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid var(--color-border-3);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: 0.15s;
}
.vv-photoswitch__dot.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* ==========================================================================
   Galerien aus dem alten Blog (Jetpack „tiled gallery")
   ========================================================================== */
/* Das übernommene Markup bringt feste Pixelmaße mit — etwa
   style="width: 500px; height: 419px" an der Zeile und noch einmal an jedem
   Bild — und verlässt sich darauf, dass Jetpacks eigenes CSS die Kacheln
   absolut positioniert. Das laden wir nicht, also überlappen die Bilder.
   Hier wird daraus ein schlichtes, mitwachsendes Raster; dafür müssen die
   Inline-Maße überschrieben werden (!important ist hier nicht zu vermeiden,
   weil sie direkt am Element stehen). */
.vv-prose .tiled-gallery,
.vv-prose .gallery-row,
.vv-prose .gallery-group,
.vv-prose .tiled-gallery-item {
	width: auto !important;
	height: auto !important;
}
.vv-prose .tiled-gallery {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 32px 0;
}
.vv-prose .gallery-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.vv-prose .gallery-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
}
.vv-prose .tiled-gallery-item {
	margin: 0;
}
.vv-prose .tiled-gallery-item a {
	display: block;
}
.vv-prose .tiled-gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: none;
	margin: 0;
	border-radius: var(--radius-image);
}
.vv-prose .tiled-gallery-caption {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 6px;
}

/* Beim Import wird das erste Bild eines Beitrags als Beitragsbild
   herausgelöst. Stand es in einem Bildunterschrift- oder Bildblock, bleibt
   die leere Hülle zurück — die soll keinen Platz einnehmen. */
.vv-prose .wp-caption:not(:has(img)),
.vv-prose .wp-block-image:not(:has(img)) {
	display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.vv-hero {
		grid-template-columns: 1fr;
		padding-top: 48px;
	}
	.vv-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.vv-teasers {
		grid-template-columns: 1fr;
	}
	.vv-aph-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.vv-partner-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 800px) {
	.vv-author-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.vv-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 700px) {
	.vv-grid-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	/* Auf kleinen Displays ist der 30px-Rand zu teuer erkauft — 20px lassen
	   der Textspalte spürbar mehr Platz, ohne dass etwas am Rand klebt. */
	:root {
		--container-padding: 20px;
	}
	/* Galeriezeilen untereinander statt nebeneinander. */
	.vv-prose .gallery-row {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.vv-grid-3 {
		grid-template-columns: 1fr;
	}
	.vv-hero__title {
		font-size: 38px;
	}
	.vv-aph-grid {
		grid-template-columns: 1fr;
	}
	.vv-poem-row {
		gap: 12px;
	}
	.vv-poem-row__cat {
		display: none;
	}
	.vv-page__title,
	.vv-engage-band__title {
		font-size: 34px;
	}
	.vv-article__title {
		font-size: 32px;
	}
	.vv-donate,
	.vv-teaser {
		padding: 30px;
	}
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	html {
		scroll-behavior: auto;
	}
}