/**
 * Gemeinde Altendorf – Global Base Styles
 *
 * Enthält ausschließlich GLOBALE Styles, die Section-übergreifend verwendet
 * werden: Reset, Typografie-Basis, Layout-Container, Buttons, Utilities.
 *
 * Alle Werte stammen aus theme.json (var(--wp--preset--…) bzw.
 * var(--wp--custom--…)). KEINE hartcodierten Werte – Ausnahme:
 * Wappen-Farben (heraldisch festgelegt, sind Marken-Konstanten und gehören
 * nicht ins Designsystem).
 *
 * Section-spezifische Styles (Hero, News, Events, Footer-Layout …) landen
 * jeweils im Block-Verzeichnis /blocks/<slug>/ als eigenes Stylesheet.
 *
 * @package GemeindeAltendorf
 */

/* ─────────────────────────────────────────
   Reset & Box-Sizing
   ───────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────
   Body – Typografie-Basis
   ───────────────────────────────────────── */
body {
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--base);
	overflow-x: hidden;
	font-optical-sizing: auto;
}

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

a {
	text-decoration: none;
	color: inherit;
}

/* ─────────────────────────────────────────
   Display Utility – Display-Typografie für Headlines
   ───────────────────────────────────────── */
.display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

/* ─────────────────────────────────────────
   Container – zentrales Layout-Element für alle Sections
   ───────────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--wp--custom--container--max);
	margin: 0 auto;
	padding: 0 var(--wp--custom--container--padding);
}

@media (max-width: 768px) {
	.container {
		padding: 0 var(--wp--custom--container--padding-mobile);
	}
}

/* ─────────────────────────────────────────
   Buttons – wiederverwendete CTA-Komponenten
   ───────────────────────────────────────── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--full);
	border: none;
	cursor: pointer;
	transition: background .25s, transform .18s, box-shadow .25s;
}

.btn-primary:hover {
	background: var(--wp--preset--color--green-soft);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(31, 77, 42, .28);
}

.btn-primary:active {
	transform: scale(.97);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--wp--preset--color--green-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--full);
	border: 1.5px solid var(--wp--preset--color--green-deep);
	cursor: pointer;
	transition: background .22s, color .22s, transform .18s;
}

.btn-outline:hover {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

/* Ensure button styles are not overridden by generic link overrides */
a.btn-primary,
.wp-block-post-content > p a.btn-primary,
.wp-block-group > p a.btn-primary {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
}
a.btn-primary:hover,
.wp-block-post-content > p a.btn-primary:hover,
.wp-block-group > p a.btn-primary:hover {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
}

a.btn-outline,
.wp-block-post-content > p a.btn-outline,
.wp-block-group > p a.btn-outline {
	color: var(--wp--preset--color--green-deep) !important;
	text-decoration: none !important;
}
a.btn-outline:hover,
.wp-block-post-content > p a.btn-outline:hover,
.wp-block-group > p a.btn-outline:hover {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
}

/* ─────────────────────────────────────────
   Section Label – Eyebrow-Headlines, in fast jeder Section verwendet
   ───────────────────────────────────────── */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-soft);
	margin-bottom: 16px;
}

.section-label::before {
	content: '';
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--wp--preset--color--green-soft);
}

/* ─────────────────────────────────────────
   Section Header Triplet
   Standardisierter Section-Kopf mit Eyebrow + Titel + optionalem Subtitle.
   Wiederverwendet in News, Events – global um versteckte Abhängigkeiten
   zwischen Blocks zu vermeiden.
   ───────────────────────────────────────── */
.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--14);
	gap: var(--wp--preset--spacing--6);
}

.section-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	letter-spacing: -.038em;
	line-height: var(--wp--custom--line-height--tight);
}

.section-subtitle {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--stone);
	margin-top: var(--wp--preset--spacing--2);
	max-width: 480px;
	line-height: var(--wp--custom--line-height--base);
}

@media (max-width: 768px) {
	.section-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─────────────────────────────────────────
   A11y Utility – Visually Hidden für Screenreader
   ───────────────────────────────────────── */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ─────────────────────────────────────────
   Search Results – einheitliche Trefferliste
   Layout: vertikale Card-Liste mit klarer Hierarchie. Jeder Treffer
   verlinkt auf seine Unterseite/seinen Beitrag. Gilt für Pages, Posts
   und alle Inhaltstypen, die die WP-Suche zurückgibt.
   ───────────────────────────────────────── */
.search-results-main {
	max-width: 920px;
	margin: 0 auto;
	padding-left: var(--wp--custom--container--padding);
	padding-right: var(--wp--custom--container--padding);
}

.search-results-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.search-results-meta {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--stone);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.search-results-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

/* Meta-Zeile verbergen wenn leer (Seiten ohne Kategorie/Datum) */
.search-result-meta:empty {
	display: none;
}

/* Einzelne Trefferkarte */
.search-result-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.search-result-card:hover {
	border-color: var(--wp--preset--color--green-soft);
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translateY(-2px);
}

/* Meta-Zeile oben: Kategorie/Tag · Datum */
.search-result-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-soft);
	margin-bottom: var(--wp--preset--spacing--3);
}

.search-result-meta > * + *::before {
	content: "·";
	display: inline-block;
	margin-right: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--border);
}

.search-result-meta .wp-block-post-date,
.search-result-meta .wp-block-post-terms {
	margin: 0;
	font-size: inherit;
}

.search-result-meta a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s;
}

.search-result-meta a:hover {
	color: var(--wp--preset--color--green-deep);
}

/* Treffer-Titel */
.search-result-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.018em;
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink);
}

.search-result-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s;
}

.search-result-title a:hover {
	color: var(--wp--preset--color--green-deep);
}

/* Auszug */
.search-result-excerpt {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--stone);
	line-height: var(--wp--custom--line-height--base);
	margin: 0;
}

.search-result-excerpt p {
	margin: 0;
}

.search-result-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--green-deep);
	text-decoration: none;
	transition: color 0.18s;
}

.search-result-excerpt .wp-block-post-excerpt__more-link::after {
	content: " →";
	transition: margin-left 0.18s;
}

.search-result-excerpt .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--green-mid);
}

/* Pagination */
.search-results-pagination {
	margin-top: var(--wp--preset--spacing--10);
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
}

.search-results-pagination a,
.search-results-pagination .page-numbers {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--full);
	transition: background 0.18s, color 0.18s;
}

.search-results-pagination .page-numbers.current,
.search-results-pagination a:hover {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
}

/* Leere Ergebnisse */
.search-no-results {
	background: var(--wp--preset--color--cream-warm);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--8);
	text-align: left;
}

.search-no-results h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.search-no-results p {
	color: var(--wp--preset--color--stone);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.search-no-results a {
	color: var(--wp--preset--color--green-deep);
	font-weight: 600;
	text-decoration: none;
}

.search-no-results a:hover {
	text-decoration: underline;
}

.search-no-results-suggestions {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.search-no-results-suggestions li a {
	display: inline-block;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--green-deep);
	transition: background 0.18s, border-color 0.18s;
}

.search-no-results-suggestions li a:hover {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--green-deep);
	text-decoration: none;
}

/* ─────────────────────────────────────────
   Wappen / Coat of Arms – Marken-Konstanten
   Heraldisch festgelegte Farben (Gold = #EEC811, Grün = #1E8130),
   sind NICHT Teil des Designsystems und werden bewusst hartcodiert.
   Genutzt im Header-Logo und im Footer-Branding.
   ───────────────────────────────────────── */
.wappen-gold   { fill: #EEC811; }
.wappen-green  { fill: #1E8130; }
.wappen-stroke { stroke: #111; stroke-width: 1.4; fill: none; }
.wappen-jug    { fill: #EEC811; }
.wappen-mark   { fill: #1E8130; }

/* ─────────────────────────────────────────
   Fließtext-Formatierung (Typography Flow)
   ───────────────────────────────────────── */
/* Standard-Margen für Absätze, Überschriften und Listen in Inhaltsbereichen */
.wp-block-post-content > p,
.wp-block-group > p {
	margin-bottom: var(--wp--preset--spacing--4); /* 16px */
	line-height: var(--wp--custom--line-height--base); /* 1.6 */
}

/* Sicherstellen, dass Überschriften die Display-Serifen-Schriftart nutzen und Abstände haben */
.wp-block-post-content > h2,
.wp-block-group > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl); /* 24px */
	color: var(--wp--preset--color--ink);
	margin-top: var(--wp--preset--spacing--8); /* 32px */
	margin-bottom: var(--wp--preset--spacing--3); /* 12px */
	line-height: var(--wp--custom--line-height--tight);
	font-weight: 700;
}

.wp-block-post-content > h3,
.wp-block-group > h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg); /* 18px */
	color: var(--wp--preset--color--ink);
	margin-top: var(--wp--preset--spacing--6); /* 24px */
	margin-bottom: var(--wp--preset--spacing--2); /* 8px */
	line-height: var(--wp--custom--line-height--tight);
	font-weight: 700;
}

/* Ersten Elementen in einem Container den Top-Margin nehmen */
.wp-block-post-content > *:first-child,
.wp-block-group > *:first-child {
	margin-top: 0;
}

/* Letzten Elementen den Bottom-Margin nehmen */
.wp-block-post-content > *:last-child,
.wp-block-group > *:last-child {
	margin-bottom: 0;
}

/* Listen-Formatierung */
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-group > ul,
.wp-block-group > ol {
	margin-bottom: var(--wp--preset--spacing--4);
	padding-left: var(--wp--preset--spacing--6); /* 24px indent */
	list-style-position: outside;
}

.wp-block-post-content > ul,
.wp-block-group > ul {
	list-style-type: disc;
}

.wp-block-post-content > ol,
.wp-block-group > ol {
	list-style-type: decimal;
}

.wp-block-post-content > ul > li,
.wp-block-post-content > ol > li,
.wp-block-group > ul > li,
.wp-block-group > ol > li {
	margin-bottom: var(--wp--preset--spacing--2); /* 8px spacing between items */
	line-height: var(--wp--custom--line-height--base);
}

/* Links im Text und in Tabellen hervorheben */
.wp-block-post-content > p a,
.wp-block-group > p a {
	color: var(--wp--preset--color--green-deep);
	text-decoration: underline;
	font-weight: 600;
	transition: color 0.18s;
}

.wp-block-post-content > p a:hover,
.wp-block-group > p a:hover {
	color: var(--wp--preset--color--green-soft);
}

/* ─── Single News Post Styles ─── */
.single-news-post .news-post-category {
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 700;
	color: var(--wp--preset--color--green-deep);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-transform: uppercase;
	display: inline-block;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	padding: 6px 16px;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: var(--wp--preset--shadow--sm);
}

.single-news-post .news-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: var(--wp--custom--line-height--tight);
	margin-top: 16px;
	margin-bottom: 16px;
}

/* News Single Header (matches district-header-block) */
.news-single-header {
	position: relative;
	background-size: cover;
	background-position: center 55%;
	background-image: url('/wp-content/themes/gemeinde-altendorf/assets/images/altendorf-hero-header-vorlage-200.jpg'); /* Default Fallback */
	color: var(--wp--preset--color--white);
	padding-top: 130px;
	padding-bottom: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--10);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 240px;
}

/* Blurry Background Pseudo-Element */
.news-single-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	filter: blur(8px) brightness(0.85);
	transform: scale(1.05); /* Hidden blurry edges */
	z-index: 1;
}

.news-header-overlay {
	background: linear-gradient(180deg, rgba(14, 32, 49, 0.2), rgba(14, 32, 49, 0) 30%, rgba(14, 32, 49, 0.45) 70%, rgba(14, 32, 49, 0.8) 100%);
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.news-header-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.news-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--3);
	color: hsla(0, 0%, 100%, 0.85);
}

.news-breadcrumbs a {
	color: inherit;
	opacity: 0.75;
	text-decoration: none;
	transition: opacity 0.2s;
}

.news-breadcrumbs a:hover {
	opacity: 1;
	text-decoration: none;
}

.news-breadcrumbs .sep {
	color: hsla(0, 0%, 100%, 0.35);
	font-weight: 400;
}

.news-breadcrumbs .current {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	opacity: 1;
}

/* Category inside breadcrumbs */
.news-post-category-breadcrumb a {
	color: var(--wp--preset--color--white) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	opacity: 1 !important;
}

.news-header-title {
	color: hsla(0, 0%, 100%, 0.94);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: 1.1;
	margin: 0 0 8px 0;
	text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.news-header-meta {
	font-size: 14px;
	color: hsla(0, 0%, 100%, 0.75);
	font-weight: 500;
}

.news-header-date {
	color: inherit;
}

.single-news-post .news-single-featured img {
	width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--border-light);
	box-shadow: var(--wp--preset--shadow--sm);
	margin-bottom: var(--wp--preset--spacing--8);
}

.single-news-post .news-post-body {
	max-width: 800px;
	margin: 0 auto;
}

/* Contact Page columns */
.contact-columns {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.contact-columns {
		grid-template-columns: 1fr !important;
		gap: 30px !important;
	}
}

/* Accessibility Settings Styles */

/* High Contrast Mode */
body.accessibility-contrast {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
}
body.accessibility-contrast a {
	color: #ffff00 !important; /* Neon yellow for contrast */
	text-decoration: underline !important;
}
body.accessibility-contrast a:hover {
	color: #00ffff !important; /* Cyan hover */
}
body.accessibility-contrast p,
body.accessibility-contrast h1,
body.accessibility-contrast h2,
body.accessibility-contrast h3,
body.accessibility-contrast h4,
body.accessibility-contrast span,
body.accessibility-contrast li,
body.accessibility-contrast td,
body.accessibility-contrast th,
body.accessibility-contrast label,
body.accessibility-contrast strong {
	color: #ffffff !important;
	text-shadow: none !important;
}
body.accessibility-contrast div,
body.accessibility-contrast section,
body.accessibility-contrast header,
body.accessibility-contrast footer,
body.accessibility-contrast nav,
body.accessibility-contrast article {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: none !important;
}
body.accessibility-contrast .btn-primary,
body.accessibility-contrast button,
body.accessibility-contrast input[type="submit"],
body.accessibility-contrast .acc-btn-full,
body.accessibility-contrast .accessibility-trigger-btn {
	background: #ffff00 !important;
	color: #000000 !important;
	border: 2px solid #ffffff !important;
	font-weight: 900 !important;
}
body.accessibility-contrast .contact-form-wrapper,
body.accessibility-contrast .map-consent-overlay {
	background-color: #000000 !important;
	border: 2px solid #ffffff !important;
}

/* Font Size Scaling (+25% and +50%) */
body.accessibility-font-lg {
	font-size: 1.25em !important;
}
body.accessibility-font-lg p,
body.accessibility-font-lg li,
body.accessibility-font-lg td,
body.accessibility-font-lg a,
body.accessibility-font-lg span,
body.accessibility-font-lg label {
	font-size: 1.15rem !important;
}

body.accessibility-font-xl {
	font-size: 1.5em !important;
}
body.accessibility-font-xl p,
body.accessibility-font-xl li,
body.accessibility-font-xl td,
body.accessibility-font-xl a,
body.accessibility-font-xl span,
body.accessibility-font-xl label {
	font-size: 1.35rem !important;
}

/* Tastatur-Hervorhebung Focus Indicators */
body.accessibility-focus-highlight *:focus,
body.accessibility-focus-highlight *:focus-visible {
	outline: 5px solid #00ff00 !important; /* Neon green */
	outline-offset: 3px !important;
	box-shadow: 0 0 15px rgba(0, 255, 0, 0.9) !important;
}

/* ─── Events Calendar Component ─── */
.calendar-container {
	margin: 2rem auto;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 4px 20px rgba(0,0,0,0.04);
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--border-light);
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
}

/* Category Filter Toolbar */
.calendar-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-bottom: 16px;
}

.calendar-filter-btn {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	border: 1px solid transparent;
	padding: 8px 20px;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

.calendar-filter-btn:hover {
	background-color: var(--wp--preset--color--border-light);
	transform: translateY(-1px);
}

.calendar-filter-btn.active {
	background-color: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
}

/* Month Navigation */
.calendar-header-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.calendar-nav-btn {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green-deep);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}

.calendar-nav-btn:hover {
	background: var(--wp--preset--color--green-subtle);
	transform: scale(1.08);
}

.calendar-current-month {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--green-deep);
	margin: 0;
}

/* Grid Layout */
.calendar-outer-grid {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	background: var(--wp--preset--color--cream);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	font-weight: 700;
	text-align: center;
	padding: 10px 0;
	color: var(--wp--preset--color--green-deep);
	font-size: 14px;
}

.calendar-days-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	background: var(--wp--preset--color--border-light);
	gap: 1px;
}

.calendar-day-cell {
	background: var(--wp--preset--color--white);
	min-height: 120px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s;
}

.calendar-day-cell:hover:not(.spacer) {
	background-color: var(--wp--preset--color--cream);
}

.calendar-day-cell.spacer {
	background: #f8fafc;
	cursor: default;
	pointer-events: none;
}

.calendar-day-cell.selected {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--green-deep);
	background-color: #f0fdf4;
}

.calendar-day-num {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--stone);
	align-self: flex-start;
}

.calendar-day-cell.selected .calendar-day-num {
	color: var(--wp--preset--color--green-deep);
}

/* Cell Event Badges */
.calendar-cell-events {
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
	flex-grow: 1;
}

.calendar-event-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 3px 6px;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

/* Colors for Categories & Types */
.calendar-event-badge.veranstaltungen {
	background-color: #e0f2fe;
	color: #0369a1;
}
.calendar-event-badge.gastronomie {
	background-color: #fef3c7;
	color: #b45309;
}
.calendar-event-badge.müllabfuhr.rest {
	background-color: #f1f5f9;
	color: #475569;
}
.calendar-event-badge.müllabfuhr.bio {
	background-color: #f0fdf4;
	color: #166534;
}
.calendar-event-badge.müllabfuhr.papier {
	background-color: #fee2e2;
	color: #991b1b;
}
.calendar-event-badge.müllabfuhr.gelb {
	background-color: #fef9c3;
	color: #854d0e;
}

/* Mobile dot indicator (hidden on desktop) */
.calendar-mobile-dots {
	display: none;
	justify-content: center;
	gap: 3px;
	margin-top: auto;
}

.calendar-mobile-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

.calendar-mobile-dot.veranstaltungen { background-color: #0369a1; }
.calendar-mobile-dot.gastronomie { background-color: #b45309; }
.calendar-mobile-dot.müllabfuhr.rest { background-color: #475569; }
.calendar-mobile-dot.müllabfuhr.bio { background-color: #166534; }
.calendar-mobile-dot.müllabfuhr.papier { background-color: #991b1b; }
.calendar-mobile-dot.müllabfuhr.gelb { background-color: #854d0e; }

/* Details view below Calendar */
.calendar-details-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.calendar-details-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 16px;
}

.calendar-no-events {
	color: var(--wp--preset--color--stone);
	font-size: 14px;
	font-style: italic;
}

.calendar-details-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.calendar-detail-card {
	background: #f8fafc;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
}

.calendar-detail-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.calendar-detail-accent {
	width: 5px;
	flex-shrink: 0;
}

.calendar-detail-accent.veranstaltungen { background-color: #0284c7; }
.calendar-detail-accent.gastronomie { background-color: #d97706; }
.calendar-detail-accent.müllabfuhr.rest { background-color: #64748b; }
.calendar-detail-accent.müllabfuhr.bio { background-color: #22c55e; }
.calendar-detail-accent.müllabfuhr.papier { background-color: #ef4444; }
.calendar-detail-accent.müllabfuhr.gelb { background-color: #eab308; }

.calendar-detail-content {
	padding: 16px;
	flex-grow: 1;
}

.calendar-detail-category {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 4px;
}
.calendar-detail-category.veranstaltungen { color: #0284c7; }
.calendar-detail-category.gastronomie { color: #d97706; }
.calendar-detail-category.müllabfuhr { color: #64748b; }

.calendar-detail-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px 0;
}

.calendar-detail-location {
	font-size: 13px;
	color: var(--wp--preset--color--stone);
	margin: 0;
	display: flex;
	align-items: center;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
	.calendar-container {
		padding: var(--wp--preset--spacing--4);
	}
	.calendar-day-cell {
		min-height: 50px;
		justify-content: center;
		align-items: center;
		padding: 4px;
	}
	.calendar-day-num {
		align-self: center;
		font-size: 12px;
	}
	.calendar-cell-events {
		display: none;
	}
	.calendar-mobile-dots {
		display: flex;
	}
}

/* ─────────────────────────────────────────
   Download-Komponente (geteilt)
   Einheitliche Download-Zeile mit Datei-Icon, Titel, Meta (Typ/Größe)
   und Download-Button. Verwendet in Finanzen, Amtssignatur/Energieausweise
   und überall wo Dateien zum Download angeboten werden.
   ───────────────────────────────────────── */
.download-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.download-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.download-item:hover {
	border-color: var(--wp--preset--color--green-soft);
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translateY(-1px);
}

.download-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--green-subtle);
	color: var(--wp--preset--color--green-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.download-icon .download-ext {
	position: absolute;
	bottom: 6px;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.download-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.download-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	line-height: 1.35;
}

.download-meta {
	font-size: var(--wp--preset--font-size--2-xs);
	color: var(--wp--preset--color--stone);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.download-action {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-subtle);
	color: var(--wp--preset--color--green-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.download-item:hover .download-action {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
	transform: translateY(2px);
}

/* Card styles for online services (equal heights & layout) */
.wp-block-columns {
	align-items: stretch;
}
.online-card {
	background: var(--wp--preset--color--cream-warm) !important;
	border: 1.5px solid var(--wp--preset--color--border-light) !important;
	border-radius: 16px !important;
	padding: 32px 24px !important;
	height: 100%;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}
.online-card h4 {
	margin-top: 0 !important;
	margin-bottom: 12px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}
.online-card p {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	flex-grow: 1;
}
.online-card .wp-block-buttons {
	margin-top: auto !important;
}