/*
Theme Name:   VI. Bataillon
Theme URI:    https://6te-bataillon.de/
Description:  Child-Theme für Michelle. Design „straff & modern“: dunkles Oliv, Off-White, Messing-Akzent, Barlow / Barlow Condensed (lokal gehostet).
Author:       VI. Bataillon · Schützenverein Lohne e.V. von 1608
Template:     michelle
Version:      1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  vi-bataillon
License:      GPL-3.0-or-later
*/

/* ==========================================================================
   1. Design-Tokens
   Michelle steuert Farben und Schriften über CSS-Variablen – die werden hier
   überschrieben. html:root hat eine höhere Spezifität als :root, damit diese
   Werte auch die Customizer-Farben schlagen.
   ========================================================================== */

html:root {
	--vi-olive: #133A22;
	--vi-primary: #247643;
	--vi-primary-dark: #185432;
	--vi-gold-light: #E3C98A;
	--vi-olive-2: #1E6338;
	--vi-ink: #185432;
	--vi-paper: #F3F1EB;
	--vi-white: #FFFFFF;
	--vi-brass: #C2A469;
	--vi-green: #247643;
	--vi-text: #2E352E;
	--vi-muted: #5A6358;
	--vi-muted-dark: #E2EEE4;
	--vi-soft-dark: #EEF5EF;
	--vi-line: #E2E2DA;
	--vi-line-dark: rgba(255, 255, 255, 0.18);

	--vi-font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--vi-font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--vi-container: 1280px;
	--vi-gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* Michelle-Variablen */
	--background_color: var(--vi-paper);
	--color_body_background: var(--vi-paper);
	--color_body_text: var(--vi-text);
	--color_body_headings: var(--vi-olive);
	--color_body_border: rgba(27, 35, 28, 0.15);
	--color_accent: var(--vi-green);
	--color_palette_1: var(--vi-green);
	--color_palette_2: var(--vi-ink);
	--color_border_decorative: var(--vi-brass);
	--border_decorative_width: 3px;
	--border_radius: 0;
	--color_button_background: var(--vi-green);
	--color_button_text: var(--vi-white);
	--color_header_background: var(--vi-primary);
	--color_header_text: var(--vi-paper);
	--color_navigation_background: var(--vi-primary);
	--color_navigation_text: var(--vi-paper);
	--color_overlaid_header_light: var(--vi-paper);
	--color_overlaid_header_light_background: var(--vi-primary);
	--color_overlaid_header_dark: var(--vi-paper);
	--color_overlaid_header_dark_background: var(--vi-primary);
	--color_search_background: var(--vi-primary);
	--color_search_text: var(--vi-paper);
	--color_footer_background: var(--vi-ink);
	--color_footer_text: var(--vi-soft-dark);
	--color_footer_link: var(--vi-soft-dark);
	--typography_font_global: var(--vi-font);
	--typography_font_alt: var(--vi-font);
	--typography_font_headings: var(--vi-font-display);
	--typography_font_site_title: var(--vi-font-display);
	--layout_width_entry_content: 760px;
	--letter_spacing: 0.08em;
	--custom_logo_height: 64px;
	--drop_shadow: 0 1.5rem 3rem rgba(18, 22, 18, 0.25);
}

body {
	overflow-x: clip;
	font-family: var(--vi-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--vi-brass);
	color: var(--vi-olive);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   2. Typografie
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--vi-font-display);
	color: var(--color_body_headings);
	letter-spacing: 0.01em;
}

h1, h2, h3,
.entry-title,
.page-title {
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
}

h4, h5, h6 {
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.entry-content h1 strong,
.entry-content h2 strong,
.entry-content h3 strong,
.entry-content h4 strong {
	font-weight: inherit;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-file__button):not(.wp-block-latest-posts__post-title):not([class*="wp-block-pages-list"]) {
	color: var(--vi-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-file__button):hover {
	color: var(--vi-olive);
	text-decoration-thickness: 2px;
}

blockquote,
.wp-block-quote {
	border-left: 2px solid var(--vi-brass);
	padding-left: 1.5em;
	font-family: var(--vi-font-display);
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1.2;
	color: var(--vi-olive);
}

figcaption,
.wp-element-caption {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vi-muted);
}

/* Trennlinien: Zickzack und Sternchen werden zu ruhigen Linien */
hr.wp-block-separator {
	color: var(--vi-line) !important;
}

.wp-block-separator.is-style-zigzag-wide,
.wp-block-separator.is-style-zigzag {
	--hr_height: 1px;
	position: relative;
	overflow: visible;
}

.wp-block-separator.is-style-zigzag-wide::before,
.wp-block-separator.is-style-zigzag::before {
	-webkit-mask-image: none;
	mask-image: none;
	background: rgba(27, 35, 28, 0.15);
}

.wp-block-separator.is-style-zigzag-wide::after,
.wp-block-separator.is-style-zigzag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	background: var(--vi-brass);
	transform: translate(-50%, -50%) rotate(45deg);
}

.wp-block-separator.is-style-dots {
	--hr_width: 48px;
	--hr_height: 2px;
}

.wp-block-separator.is-style-dots::before {
	content: "";
	padding: 0;
	letter-spacing: 0;
	font-size: inherit;
	background: var(--vi-brass);
}

/* ==========================================================================
   3. Kopfzeile & Navigation
   ========================================================================== */

.site-header {
	font-family: var(--vi-font-display);
}

.site-branding {
	color: inherit;
}

.custom-logo {
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--vi-brass);
}

/* Weißes SVG-Wappen: eigener Rand im Wappen, daher kein Ring */
.custom-logo.vi-wappen,
.vi-footer__brand img.vi-wappen {
	width: auto;
	height: var(--custom_logo_height);
	border-radius: 0;
	box-shadow: none;
}

.vi-footer__brand img.vi-wappen {
	height: 88px;
}

@media (max-width: 879px) {
	.custom-logo.vi-wappen {
		height: 3.25rem;
	}
}

.custom-logo-link + .site-branding-text {
	margin-left: 1em;
	margin-right: 1.5em;
}

.site-title {
	font-family: var(--vi-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
}

.site-description {
	margin: 0.35em 0 0;
	font-family: var(--vi-font);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vi-muted-dark);
}

.menu-primary > li > a {
	font-family: var(--vi-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--vi-white);
	text-decoration: underline;
	text-decoration-color: var(--vi-brass);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

.menu-primary > .current-menu-item > a,
.menu-primary > .current-menu-ancestor > a,
.menu-primary > .current-page-ancestor > a,
.menu-primary > .current_page_parent > a {
	color: var(--vi-white);
	box-shadow: inset 0 -2px 0 var(--vi-brass);
}

.main-navigation .sub-menu {
	background: var(--vi-primary-dark);
	border-top: 2px solid var(--vi-brass);
}

.main-navigation .sub-menu a {
	font-family: var(--vi-font);
	font-size: 0.9375rem;
	text-transform: none;
	letter-spacing: 0;
}

@media (min-width: 1280px) {
	.site-header-content {
		align-items: center;
	}

	.site-branding {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.menu-primary {
		align-items: center;
	}

	.menu-primary > li {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
	}

	.main-navigation .sub-menu {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
}

/* Mobile Navigation (Overlay) */
@media (max-width: 1279px) {
	.site-header .main-navigation {
		margin-left: auto;
	}

	.has-navigation-mobile .menu-primary > li > a {
		font-size: 1.25rem;
		padding-top: 0.35em;
		padding-bottom: 0.35em;
	}

	.has-navigation-mobile .main-navigation-container {
		border-top: 3px solid var(--vi-brass);
	}

	body.has-sticky-header-mobile.has-scrolled:not(.has-navigation-toggled) .site-header {
		--color_header_background: var(--vi-primary);
		--color_header_text: var(--vi-paper);
	}
}

/* Suchfenster */
.modal-search-container .search-field {
	font-family: var(--vi-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   4. Seitenkopf (vom Child-Theme auf Unterseiten eingefügt) und
      Michelle-Seitenkopf bei Beiträgen und Archiven
   ========================================================================== */

.vi-page-header,
body:not(.home) .page-header {
	position: relative;
	overflow: hidden;
	background: var(--vi-primary);
	color: var(--vi-paper);
	border-top: 1px solid var(--vi-line-dark);
}

body:not(.home) .page-header {
	width: calc(100vw - var(--scrollbar_width, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--scrollbar_width, 0px) / 2);
	margin-right: 0;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
	padding: clamp(2.5rem, 6vw, 4rem) var(--vi-gutter) clamp(3rem, 7vw, 4.5rem);
	box-sizing: border-box;
}

.vi-page-header::after,
body:not(.home) .page-header::after {
	content: "VI";
	position: absolute;
	right: var(--vi-gutter);
	top: -0.18em;
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: clamp(12rem, 26vw, 24rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(194, 164, 105, 0.2);
	pointer-events: none;
	speak: never;
}

.vi-page-header__inner,
body:not(.home) .page-header-content {
	position: relative;
	z-index: 1;
	max-width: var(--vi-container);
	margin: 0 auto;
}

.vi-page-header__inner {
	padding: clamp(2.5rem, 6vw, 3.5rem) var(--vi-gutter) clamp(3rem, 7vw, 4.5rem);
}

.vi-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vi-muted-dark);
}

.vi-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.vi-breadcrumb a:hover {
	color: var(--vi-white);
	text-decoration: underline;
}

.vi-breadcrumb [aria-current] {
	font-weight: 600;
	color: var(--vi-white);
}

.vi-page-header__title,
body:not(.home) .page-header .page-title {
	margin: 0;
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: clamp(2.75rem, 7vw, 6rem);
	line-height: 0.92;
	text-transform: uppercase;
	color: var(--vi-paper);
}

.vi-page-header__meta {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vi-muted-dark);
}

.vi-page-header__desc {
	max-width: 60ch;
	margin-top: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--vi-soft-dark);
}

.vi-page-header__desc p:last-child {
	margin-bottom: 0;
}

/* lange Beitragstitel etwas kleiner */
body.single .vi-page-header__title {
	max-width: 22ch;
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	line-height: 0.98;
}

body:not(.home) .page-header .page-title span {
	color: var(--vi-gold-light);
}

/* Beitragsdaten: nur das Datum, ruhig gesetzt */
.entry-meta {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vi-green);
}

.page-header .entry-meta {
	margin-top: 1.25rem;
	color: var(--vi-muted-dark);
}

.entry-meta a {
	color: inherit;
	text-decoration: none;
}

.entry-meta .svg-icon,
.entry-meta .byline,
.entry-meta .comments-link,
.entry-meta .label-updated,
.entry-meta .updated {
	display: none;
}

/* ==========================================================================
   5. Inhalte
   ========================================================================== */

/* Buttons */
.wp-block-button__link,
.wp-element-button,
button:not(.menu-toggle):not(.button-toggle-sub-menu):not([class*="search"]),
input[type="submit"] {
	border-radius: 0 !important;
	font-family: var(--vi-font-display);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-button__link {
	min-height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 1.75em;
	background-color: var(--vi-green) !important;
	color: var(--vi-white) !important;
	transition: background-color 0.2s;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--vi-primary-dark) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--vi-green) !important;
	border: 1px solid currentColor;
}

/* Datei-Block (Downloads): Zeile als Karte, Button gut lesbar */
.entry-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--vi-white);
	border: 1px solid var(--vi-line);
}

.entry-content .wp-block-file > a:first-child {
	flex: 1 1 14rem;
	font-weight: 600;
	color: var(--vi-olive);
	text-decoration: none;
}

.entry-content .wp-block-file > a:first-child:hover {
	color: var(--vi-green);
	text-decoration: underline;
}

.entry-content .wp-block-file .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5em 1.25em;
	border-radius: 0;
	background: var(--vi-green) !important;
	color: var(--vi-white) !important;
	font-family: var(--vi-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 1;
}

.entry-content .wp-block-file .wp-block-file__button::after {
	content: " ↓";
	margin-left: 0.4em;
}

.entry-content .wp-block-file .wp-block-file__button:hover,
.entry-content .wp-block-file .wp-block-file__button:focus {
	background: var(--vi-primary-dark) !important;
}

/* Hellgraue Hintergründe aus dem Editor (z. B. Download-Spalten) passen
   nicht zum warmen Papierton → weiße Karte mit feinem Rand */
.entry-content [class*="wp-block-"].has-background[style*="#efefef" i],
.entry-content [class*="wp-block-"].has-background[style*="#eeeeee" i],
.entry-content [class*="wp-block-"].has-background[style*="#f0f0f0" i],
.entry-content [class*="wp-block-"].has-background[style*="#f2f2f2" i],
.entry-content [class*="wp-block-"].has-background[style*="#f5f5f5" i],
.entry-content [class*="wp-block-"].has-background[style*="#f7f7f7" i],
.entry-content [class*="wp-block-"].has-background[style*="#fafafa" i],
.entry-content .has-palette-7-background-color,
.entry-content .has-palette-8-background-color {
	background-color: var(--vi-white) !important;
	border: 1px solid var(--vi-line);
	color: var(--vi-text) !important;
}

/* Dokument-Vorschaubilder (weiße Seiten) bekommen eine Kante */
.entry-content .wp-block-column .wp-block-image img {
	box-shadow: 0 0 0 1px var(--vi-line), 0 0.5rem 1.5rem rgba(18, 22, 18, 0.08);
}

/* Überschriften in Spalten nicht mitten im Wort umbrechen */
.entry-content .wp-block-column h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Farbige Flächen (Akzentfarbe) */
.has-accent-background-color {
	background-color: var(--vi-green) !important;
}

.has-accent-background-color .wp-block-button__link {
	background-color: var(--vi-brass) !important;
	color: var(--vi-olive) !important;
}

/* Bilder */
.wp-block-image img,
.wp-block-media-text__media img {
	border-radius: 0;
}

/* Medien & Text (z. B. Kompanien) als Karten:
   Foto immer vollständig oben (kein Zuschneiden), Angaben darunter in
   Spalten, die sich der Bildschirmbreite anpassen. */
.entry-content .wp-block-media-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	/* breiter als die Textspalte, mittig zum Fenster */
	width: min(1080px, calc(100vw - 2 * var(--vi-gutter))) !important;
	max-width: none !important;
	margin-left: calc(50% - min(540px, 50vw - var(--vi-gutter))) !important;
	margin-right: 0 !important;
	background: var(--vi-white);
	border: 1px solid var(--vi-line);
}

.entry-content .wp-block-media-text .wp-block-media-text__media {
	grid-column: 1 !important;
	grid-row: 1 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0;
	background: none !important;
}

.entry-content .wp-block-media-text .wp-block-media-text__media img {
	position: static !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: none;
	object-fit: contain !important;
	clip: auto;
}

.entry-content .wp-block-media-text .wp-block-media-text__content {
	position: relative;
	grid-column: 1 !important;
	grid-row: 2 !important;
	padding: clamp(1.5rem, 4vw, 2.75rem) !important;
	columns: 230px 3;
	column-gap: clamp(1.5rem, 4vw, 3rem);
}

.entry-content .wp-block-media-text__content > * {
	break-inside: avoid;
	margin-top: 0;
}

/* Karten mit Aufzählungen (z. B. Bataillonsvorstand): Bezeichnung und
   Liste müssen zusammenbleiben → eine Spalte. Wer mehrere Spalten möchte,
   fasst im Editor je Person Absatz + Liste zu einer „Gruppe“ zusammen. */
.entry-content .wp-block-media-text .wp-block-media-text__content:has(> ul),
.entry-content .wp-block-media-text .wp-block-media-text__content:has(> ol) {
	columns: auto;
}

.entry-content .wp-block-media-text__content > .wp-block-group {
	break-inside: avoid;
}

.entry-content .wp-block-media-text__content > p:has(+ ul) {
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
}


.entry-content .wp-block-media-text__content > h2 + p:has(+ ul) {
	margin-top: 1.25rem;
}

.entry-content .wp-block-media-text__content > p:has(+ ul) > strong + br + strong {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--vi-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--vi-olive);
}

.entry-content .wp-block-media-text__content > ul {
	margin-bottom: 0;
	padding-left: 1.1em;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.entry-content .wp-block-media-text__content > ul li::marker {
	color: var(--vi-brass);
}

/* Kopfzeile der Karte: Titel, Wappen, Gründungsjahr */
.entry-content .wp-block-media-text h2 {
	column-span: all;
	margin: 0 0 0.75rem;
	padding-right: clamp(4.5rem, 14vw, 7.5rem);
	font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important;
	line-height: 1.02 !important;
	letter-spacing: 0.02em;
}

.entry-content .wp-block-media-text__content > figure,
.entry-content .wp-block-media-text__content > .wp-block-image {
	position: absolute;
	top: clamp(1.25rem, 3.5vw, 2.25rem);
	right: clamp(1.25rem, 3.5vw, 2.25rem);
	width: clamp(3.75rem, 12vw, 6rem);
	margin: 0;
}

.entry-content .wp-block-media-text__content > figure img,
.entry-content .wp-block-media-text__content > .wp-block-image img {
	width: 100% !important;
	height: auto !important;
}

.entry-content .wp-block-media-text__content > h2 + figure + p:not(:has(+ ul)),
.entry-content .wp-block-media-text__content > h2 + .wp-block-image + p:not(:has(+ ul)),
.entry-content .wp-block-media-text__content > h2 + p:not(:has(+ ul)) {
	column-span: all;
	margin-bottom: 1.75rem;
	padding-right: clamp(4.5rem, 14vw, 7.5rem);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vi-muted);
}

.entry-content .wp-block-media-text__content p {
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.entry-content .wp-block-media-text p > strong:first-child {
	display: block;
	margin-bottom: 0.5em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--vi-line);
	font-family: var(--vi-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vi-green);
}

/* Zeilenumbruch direkt nach der Zwischenüberschrift nicht doppelt */
.entry-content .wp-block-media-text p > strong:first-child + br {
	display: none;
}

.entry-content .wp-block-media-text + hr,
.entry-content .wp-block-media-text + .alignwide-wrap > hr {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Tabellen (TablePress und Tabellen-Block) */
.tablepress,
.wp-block-table table {
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: var(--vi-white);
}

.tablepress thead th,
.tablepress tfoot th,
.wp-block-table thead th {
	background: var(--vi-primary) !important;
	color: var(--vi-paper) !important;
	font-family: var(--vi-font-display);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 0;
}

.tablepress tbody td,
.wp-block-table td {
	border-top: 1px solid var(--vi-line);
}

.tablepress .odd td,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: #FAF9F5;
}

.tablepress tbody tr:hover td {
	background: #EEECE3;
}

/* Neueste Beiträge (Startseite) */
.wp-block-latest-posts__alignwide-wrap.is-layout-grid {
	display: block;
}

.wp-block-latest-posts.is-grid {
	counter-reset: vi-post;
	gap: 0;
}

.wp-block-latest-posts.is-grid > li {
	position: relative;
	counter-increment: vi-post;
	display: flex;
	flex-direction: column;
	padding-bottom: 2.25rem;
}

.wp-block-latest-posts__featured-image {
	position: relative;
	margin-bottom: 1.25rem;
	overflow: hidden;
	background: var(--vi-line);
}

.wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.wp-block-latest-posts__featured-image::before {
	content: counter(vi-post, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0.5rem 0.75rem;
	background: var(--vi-primary);
	color: var(--vi-paper);
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image img {
	transform: scale(1.04);
}

.wp-block-latest-posts .entry-meta {
	order: -1;
	margin: 0 0 0.6rem;
}

.wp-block-latest-posts .wp-block-latest-posts__featured-image {
	order: -2;
}

.wp-block-latest-posts__post-date {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vi-green);
}

.wp-block-latest-posts__post-title {
	font-family: var(--vi-font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vi-olive);
}

/* ganze Karte klickbar */
.wp-block-latest-posts__post-title::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.wp-block-latest-posts.is-grid > li::after {
	content: "Weiterlesen →";
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vi-muted);
	transition: color 0.2s;
}

.wp-block-latest-posts.is-grid > li:hover::after,
.wp-block-latest-posts.is-grid > li:hover .wp-block-latest-posts__post-title {
	color: var(--vi-green);
}

/* Beitragsliste (Archiv „Aktuelles“) */
.posts-list .entry {
	background: var(--vi-white);
	border: 1px solid var(--vi-line);
}

.posts-list .entry-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.posts-list .entry-title a {
	color: var(--vi-olive);
	text-decoration: none;
}

.posts-list .entry-title a:hover {
	color: var(--vi-green);
}

.link-more {
	font-weight: 600;
	color: var(--vi-green);
	text-decoration: none;
}

.link-more::after {
	content: " →";
}

/* ==========================================================================
   6. Startseite
   Die Startseite ist mit Blöcken gebaut, die feste Inline-Farben haben.
   Die Regeln greifen über die Reihenfolge der Blöcke oder – robuster – über
   die CSS-Klassen vi-hero / vi-motto / vi-aktuelles, die man im Editor unter
   „Erweitert → Zusätzliche CSS-Klasse(n)“ setzen kann.
   ========================================================================== */

/* Kopfzeile auf der Startseite normal oberhalb des Heros statt darüber
   gelegt – so entsteht keine leere Fläche unter dem Menü. */
body.home[class*="-header-overlaid"] .site-header {
	position: relative;
	margin-top: 0;
}

body.home.has-sticky-header-mobile.has-scrolled[class*="-header-overlaid"]:not(.has-navigation-toggled) .site-header {
	position: sticky;
}

.home .entry-content > .wp-block-group:first-child > .wp-block-group__inner-container > .wp-block-spacer:first-child {
	display: none;
}

body.home .site-header {
	border-bottom: 1px solid var(--vi-line-dark);
}

/* Hero */
.home .entry-content > .wp-block-group:first-child,
.vi-hero {
	background: #111611 !important;
	color: var(--vi-paper) !important;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover,
.vi-hero .wp-block-cover {
	/* verschachteltes „volle Breite“ nicht doppelt verbreitern */
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	position: relative;
	overflow: hidden;
	min-height: min(82vh, 760px);
	padding-top: clamp(4rem, 12vh, 8rem) !important;
	padding-bottom: clamp(4rem, 12vh, 8rem) !important;
	align-items: center;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover__background,
.vi-hero .wp-block-cover__background {
	background: #0B0F0B !important;
	opacity: 0.55 !important;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover::after,
.vi-hero .wp-block-cover::after {
	content: "VI";
	position: absolute;
	right: -0.04em;
	bottom: -0.22em;
	z-index: 1;
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: clamp(18rem, 52vw, 48rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(194, 164, 105, 0.3);
	pointer-events: none;
	speak: never;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover__inner-container,
.vi-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--vi-container);
	margin: 0 auto;
	padding: 0 var(--vi-gutter);
	text-align: left;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover .alignwide-wrap,
.vi-hero .wp-block-cover .alignwide-wrap {
	max-width: none;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover h1,
.vi-hero .wp-block-cover h1 {
	max-width: 14ch;
	margin: 0 0 1.75rem;
	font-size: clamp(3.25rem, 8.5vw, 7.5rem) !important;
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-align: left !important;
	text-shadow: none !important;
	color: var(--vi-paper) !important;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover h1::before,
.vi-hero .wp-block-cover h1::before {
	content: "Schützenregiment Lohne";
	display: block;
	margin-bottom: 1.5rem;
	font-family: var(--vi-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.24em;
	color: var(--vi-gold-light);
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover hr,
.vi-hero .wp-block-cover hr {
	margin: 0 0 1.5rem;
	text-align: left;
}

.home .entry-content > .wp-block-group:first-child .wp-block-cover h5,
.vi-hero .wp-block-cover h5 {
	margin: 0;
	font-family: var(--vi-font);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem) !important;
	letter-spacing: 0.02em;
	text-transform: none;
	text-align: left !important;
	text-shadow: none !important;
	color: var(--vi-soft-dark) !important;
}

/* Motto */
.home .entry-content > .wp-block-group:nth-child(2),
.vi-motto {
	background: var(--vi-paper) !important;
	color: var(--vi-olive) !important;
	padding-top: clamp(3rem, 8vw, 5rem) !important;
	padding-bottom: clamp(3rem, 8vw, 5rem) !important;
}

.home .entry-content > .wp-block-group:nth-child(2) hr,
.vi-motto hr {
	color: var(--vi-green) !important;
}

.home .entry-content > .wp-block-group:nth-child(2) hr::before,
.vi-motto hr::before {
	background: var(--vi-green);
}

.home .entry-content > .wp-block-group:nth-child(2) h1,
.vi-motto h1,
.vi-motto h2 {
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--vi-font-display);
	font-weight: 500;
	font-size: clamp(2.25rem, 4.6vw, 3.75rem) !important;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--vi-olive) !important;
}

.home .entry-content > .wp-block-group:nth-child(2) h4,
.vi-motto h4 {
	font-family: var(--vi-font);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--vi-muted) !important;
}

/* „Aktuelles“-Überschrift */
.home .entry-content > h2,
.vi-aktuelles {
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 0.95;
}

.home .entry-content > h2::before,
.vi-aktuelles::before {
	content: "Aus dem Bataillon";
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--vi-font);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	line-height: 1.4;
	color: var(--vi-green);
}

.home .entry-content > h2::after,
.vi-aktuelles::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 1.5rem auto 0;
	background: var(--vi-brass);
}

/* Der alte Linkblock am Seitenende wird durch den neuen Footer ersetzt */
.home .entry-content > .wp-block-group.alignfull.has-accent-background-color,
.home .entry-content > .wp-block-group.alignfull[style*="#010101"] {
	display: none;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
	background: var(--vi-ink);
	color: var(--vi-soft-dark);
}

.vi-footer {
	position: relative;
	overflow: hidden;
	font-size: 0.9375rem;
}

.vi-footer::after {
	content: "VI";
	position: absolute;
	right: -0.03em;
	top: -0.2em;
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: clamp(14rem, 30vw, 26rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(194, 164, 105, 0.12);
	pointer-events: none;
	speak: never;
}

.vi-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--vi-container);
	margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 5.5rem) var(--vi-gutter) 2.5rem;
}

.vi-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2.5rem 2rem;
}

@media (max-width: 671px) {
	.vi-footer__brand {
		grid-column: 1 / -1;
	}
}

.vi-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vi-footer__brand img {
	width: 72px;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--vi-brass);
}

.vi-footer__name {
	font-family: var(--vi-font-display);
	font-weight: 700;
	font-size: 1.625rem;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vi-paper);
}

.vi-footer__claim {
	margin: 0;
	line-height: 1.6;
	color: var(--vi-muted-dark);
}

.vi-footer__heading {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--vi-line-dark);
	font-family: var(--vi-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vi-gold-light);
}

.vi-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vi-footer li {
	margin: 0 0 0.6rem;
}

.vi-footer a {
	color: var(--vi-soft-dark);
	text-decoration: none;
	transition: color 0.2s;
}

.vi-footer a:hover,
.vi-footer a:focus {
	color: var(--vi-gold-light);
}

.vi-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: clamp(3rem, 6vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--vi-line-dark);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--vi-muted-dark);
}

.vi-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
}

.vi-footer__top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vi-line-dark);
}

/* ==========================================================================
   8. Kleine Bildschirme
   ========================================================================== */

@media (max-width: 671px) {
	.home .entry-content > .wp-block-group:first-child .wp-block-cover,
	.vi-hero .wp-block-cover {
		min-height: 70vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}