:root {
	--color-primary: #0f159d; /* offizielle Vereinsfarbe */
	--color-primary-dark: #0b0f73;
	--color-accent: #e0a72c;
	--color-text: #1a1a1a;
	--color-bg: #ffffff;
	--color-muted-bg: #f4f5fa;
	--color-border: #dcdfeb;
	--max-width: 1100px;
	font-size: 18px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
}

.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

a {
	color: var(--color-primary);
}

h1,
h2,
h3 {
	line-height: 1.25;
}

.site-header {
	background: var(--color-primary);
	color: white;
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: white;
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.brand img {
	border-radius: 50%;
	background: white;
}

.site-header nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-header nav a {
	color: white;
	text-decoration: none;
	font-size: 1.05rem;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
	text-decoration: underline;
}

/* Admin: "Abmelden" ist ein Formular-Button (POST mit CSRF-Token), sieht aber aus wie die anderen Menü-Links */
.nav-logout-form {
	margin: 0;
}

.nav-logout {
	padding: 0;
	border: 0;
	background: none;
	color: white;
	font: inherit;
	font-size: 1.05rem;
	cursor: pointer;
}

.nav-logout:hover,
.nav-logout:focus-visible {
	text-decoration: underline;
}

/* Honeypot im Login-Formular: aus dem sichtbaren Bereich geschoben (nicht display:none – das erkennen manche Bots) */
.hp-field {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

main {
	flex: 1;
}

main.wrap {
	width: 100%;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* Breadcrumb ("← Sekretariat", "← Dashboard" …) liegt im freien Raum zwischen Navbar und Titel und nimmt keinen Platz im
   Seitenfluss ein: Der Titel steht so auf jeder Seite auf derselben Höhe, egal ob es einen Breadcrumb gibt
   (Frontend wie /sekretariat/, Backend wie /admin/index.php). Gilt auch im Admin (gleiches main.wrap). */
main.wrap {
	position: relative;
}

.breadcrumb {
	position: absolute;
	/* mittig zwischen Navbar und Titel: (Abstand oben 2.5rem + Titelabstand 0.67 × 2rem − Höhe der Zeile) / 2,
	   plus 0.25rem, weil die Titelschrift innerhalb ihrer Zeile tiefer beginnt (nachgemessen: sichtbar gleicher Abstand oben/unten) */
	top: calc((2.5rem + 1.34rem - 1.52rem) / 2 + 0.25rem);
	left: 1.25rem; /* = seitlicher Innenabstand von .wrap */
	right: 1.25rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.6;
}

/* Pfeil als Grafik statt Textzeichen "←": sitzt so auf jedem Gerät genau mittig zum Text (das Schriftzeichen lag am Handy zu tief) */
.breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.breadcrumb a::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-footer {
	background: var(--color-muted-bg);
	border-top: 1px solid var(--color-border);
	padding-top: 2rem;
	color: #555;
}

.footer-top {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 1.5rem;
}

.footer-logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}

.footer-name {
	margin: 0 0 0.35rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.footer-address {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.footer-links {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.footer-links a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	text-decoration: underline;
}

/* "Member ginn" im Footer als Button (Grundstil .btn) */
.footer-links a.footer-cta {
	color: #fff;
	text-decoration: none;
}

.footer-links a.footer-cta:hover,
.footer-links a.footer-cta:focus-visible {
	text-decoration: none;
}

@media (max-width: 560px) {
	.footer-top {
		flex-wrap: wrap;
	}

	/* Name/Adresse schrumpfen statt unter das Logo zu rutschen */
	.footer-top > div {
		flex: 1 1 0;
		min-width: 0;
	}

	.footer-links {
		margin-left: 0;
		width: 100%;
	}
}

/* Jahresprogramm "Kalenner" auf der Startseite (partials/calendar.php) */
.program {
	margin-top: 3rem;
}

.program-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding-bottom: 0.5rem;
	margin-bottom: 1.25rem;
	border-bottom: 2px solid var(--color-accent);
}

.program-head h2,
.program-head .meta {
	margin: 0;
}

.program-head .meta strong {
	color: var(--color-text);
	font-weight: 600;
}

/* Leiste mit dem nächsten Termin und Countdown */
.program-next {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: #fdf7ea;
	box-shadow: inset 4px 0 0 var(--color-accent);
}

.program-next .program-date {
	background: var(--color-accent);
}

.program-next .program-day,
.program-next .program-weekday {
	color: #3a2a00;
}

.program-next .program-text {
	flex: 1 1 auto;
	padding-top: 0;
}

.program-next-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a6510;
}

.program-countdown {
	flex: 0 0 auto;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: #3a2a00;
	font-size: 0.875rem;
	font-weight: 700;
}

@media (max-width: 560px) {
	.program-next {
		flex-wrap: wrap;
		gap: 0.6rem 0.8rem;
	}

	.program-countdown {
		margin-left: 3.2rem;
		padding: 0.1rem 0.6rem;
		font-size: 0.8rem;
	}
}

/* Monate in einem festen Raster, gelesen von links nach rechts; vergangene Monate in einer eigenen Reihe darüber */
.program-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.program-grid-done {
	align-items: start;
	margin-bottom: 1rem;
}

@media (max-width: 560px) {
	.program-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.program-grid-done {
		gap: 0.5rem;
		margin-bottom: 0.75rem;
	}
}

.program-month {
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: white;
	overflow: hidden;
}

/* Monatskopf zum Auf-/Zuklappen (<summary>) */
.program-month summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1rem;
	background: var(--color-primary);
	color: white;
	cursor: pointer;
	list-style: none;
}

.program-month summary::-webkit-details-marker {
	display: none;
}

.program-month summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.45rem;
	height: 0.45rem;
	margin: 0 0.15rem 0.2rem 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.8;
}

.program-month[open] summary::after {
	margin-bottom: -0.2rem;
	transform: rotate(-135deg);
}

.program-month summary:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

.program-month h3 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.03em;
}

.program-count {
	white-space: nowrap;
	font-size: 0.8rem;
	opacity: 0.85;
}

/* Komplett vergangene Monate: grau und standardmäßig eingeklappt */
.program-month.is-done {
	background: var(--color-muted-bg);
}

.program-month.is-done summary {
	background: var(--color-muted-bg);
	color: #666;
}

.program-month.is-done[open] summary {
	border-bottom: 1px solid var(--color-border);
}

.program-place {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.25rem;
}

.program-place svg {
	flex: 0 0 auto;
	margin-top: 0.15rem;
}

.program-month ul {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
}

.program-item {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 0.55rem 1rem;
}

.program-item + .program-item {
	border-top: 1px solid var(--color-border);
}

.program-date {
	flex: 0 0 2.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.2rem 0;
	border-radius: 0.4rem;
	background: var(--color-muted-bg);
	line-height: 1.1;
}

.program-day {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-primary);
}

.program-weekday {
	font-size: 0.75rem;
	color: #666;
}

@media (max-width: 560px) {
	.program-item {
		padding: 0.45rem 0.85rem;
	}

	.program-date {
		flex-basis: 2.4rem;
	}
}

.program-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 0.1rem;
}

.program-title {
	font-weight: 600;
	line-height: 1.3;
}

.program-meta {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.35;
}

/* Laufendes Jahr: vergangene Termine abgeschwächt, nächster Termin hervorgehoben */
.program-item.is-past {
	opacity: 0.5;
}

.program-item.is-next {
	background: #fdf7ea;
	box-shadow: inset 3px 0 0 var(--color-accent);
}

.program-item.is-next .program-date {
	background: var(--color-accent);
}

.program-item.is-next .program-day,
.program-item.is-next .program-weekday {
	color: #3a2a00;
}

.program-badge {
	align-self: flex-start;
	margin-top: 0.3rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: #3a2a00;
	font-size: 0.72rem;
	font-weight: 700;
}

/* Hinweis-Streifen "Member ginn" (Startseite, Sekretariat) */
.member-cta {
	margin-top: 3rem;
	padding: 1.75rem 2rem;
	border-radius: 0.8rem;
	background: var(--color-primary);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	flex-wrap: wrap;
}

.member-cta h2 {
	margin: 0 0 0.35rem;
	color: white;
}

.member-cta p {
	margin: 0;
	opacity: 0.9;
}

.member-cta .btn {
	flex-shrink: 0;
	background: var(--color-accent);
	color: var(--color-text);
}

.member-cta .btn:hover,
.member-cta .btn:focus-visible {
	background: #c9921f;
}

/* Links/Buttons, die in einem neuen Tab öffnen: Pfeil-Symbol hinter dem Text */
.btn-with-icon,
.link-with-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.icon-external {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* PDF-Symbol links im Button (partials/icon-pdf.php) */
.icon-pdf {
	width: 1.4em;
	height: 1.4em;
	flex-shrink: 0;
}

/* Symbole auf die optische Mitte der Schrift setzen (die Textzeile hat unten Platz für g, p, …) */
.btn-with-icon svg,
.link-with-icon svg {
	position: relative;
	top: 0.08em;
}

/* Nur für Screenreader sichtbar */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Download-Button (z. B. Mitglieds-Formular) */
.download-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 1.5rem 0 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: var(--color-muted-bg);
}

.download-box p {
	margin: 0;
}

/* Sekretariat: Dokument-Kacheln (Bild öffnet PDF), Listen und Resultate */
.doc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0 2.5rem;
}

.doc-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	overflow: hidden;
	background: white;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.doc-tile:hover,
.doc-tile:focus-visible {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.doc-tile-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px;
	padding: 1rem;
	background: white;
}

.doc-tile-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.doc-tile-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.9rem 1.1rem 1.1rem;
	border-top: 1px solid var(--color-border);
}

.doc-tile-title {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-primary);
}

.doc-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: #666;
	white-space: nowrap;
}

.doc-section {
	margin-top: 2rem;
}

.doc-list {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.doc-list li {
	margin-bottom: 0.45rem;
}

.lead {
	font-size: 1.1rem;
}

.result-years {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0.5rem;
}

.result-years a {
	padding: 0.3rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

.result-year {
	margin-top: 2rem;
	scroll-margin-top: 6rem;
}

/* Resultater im Evente-Layout: Liste links, Jahres-Navigation rechts (wie „Nom Datum sichen“).
   Schmal gibt es keine Seitenspalte -> dort bleiben die Jahres-Knöpfe oben, die Sidebar entfällt. */
.result-layout .result-year:first-child {
	margin-top: 1rem;
}

.result-year h3[id] {
	scroll-margin-top: 6rem;
}

@media (min-width: 860px) {
	.result-years {
		display: none;
	}
}

@media (max-width: 859px) {
	.result-sidebar {
		display: none;
	}
}

.result-year > h2 {
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--color-accent);
}

.result-year h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
}

.result-count {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--color-muted-bg);
	font-size: 0.8rem;
	letter-spacing: 0;
}

.result-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0.75rem;
}

.result-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: white;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.result-item:hover,
.result-item:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.result-date {
	flex: 0 0 3.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 3.2rem;
	border-radius: 0.45rem;
	background: var(--color-primary);
	color: white;
	font-size: 0.75rem;
	text-transform: uppercase;
	line-height: 1.1;
}

.result-date span {
	font-size: 1.25rem;
	font-weight: 700;
}

.result-date-empty {
	background: var(--color-muted-bg);
	color: #999;
	font-size: 1.25rem;
}

.result-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.result-title {
	font-weight: 600;
	line-height: 1.3;
}

.result-list-highlight .result-item {
	border-color: var(--color-accent);
	background: #fdf7ea;
}

.result-list-highlight .result-date {
	background: var(--color-accent);
	color: #3a2a00;
}

.doc-type {
	padding: 0.05rem 0.4rem;
	border-radius: 0.3rem;
	background: var(--color-muted-bg);
	font-weight: 700;
	font-size: 0.75rem;
}

@media (max-width: 560px) {
	.result-list {
		grid-template-columns: 1fr;
	}
}

.footer-divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

/* Nur oben/unten polstern – der seitliche Abstand kommt von .wrap (vorher von "padding: 1.25rem 0" überschrieben, Text klebte am Rand). */
.footer-bottom {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

/* Schmalere Fenster (Handy, Tablet, kleine Laptops): der Text beginnt so weit links, dass ihn das Cookie-Symbol verdecken würde –
   unten Platz lassen, damit man ihn darüber scrollen kann. Ab 1240 px liegt der Text rechts neben dem Symbol, dann nicht nötig. */
@media (max-width: 1240px) {
	.footer-bottom {
		padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
	}
}

/* Links "©", rechts der Logfire-Hinweis mit Logo; auf schmalen Bildschirmen untereinander */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.footer-bottom p {
	margin: 0;
}

.footer-credit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Text nicht mittendrin umbrechen – reicht der Platz nicht, rutscht das Logo darunter */
.footer-credit span {
	white-space: nowrap;
}

.footer-credit a {
	display: inline-flex;
	border-radius: 0.25rem;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
	opacity: 0.8;
}

.footer-credit-logo {
	display: block;
	width: auto;
	/* Buchstaben im Logo ≈ so hoch wie die Großbuchstaben des Textes daneben */
	height: 1.3em;
}

.btn {
	display: inline-block;
	background: var(--color-primary);
	color: white;
	padding: 0.7rem 1.4rem;
	border-radius: 0.4rem;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.btn:hover,
.btn:focus-visible {
	background: var(--color-primary-dark);
}

.btn-outline {
	background: transparent;
	border: 1.5px solid currentColor;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

.card {
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	overflow: hidden;
	background: white;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card-body {
	padding: 1rem 1.25rem 1.25rem;
}

.event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* Abstand zur (jetzt sticky) Navbar, damit Sprungmarken nicht dahinter verschwinden. */
.events-main section,
.events-main > div[id] {
	scroll-margin-top: 6rem;
}

.events-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 860px) {
	.events-layout {
		grid-template-columns: 1fr 260px;
	}
}

/* Breite Ansicht: Event-Kasten 3/5, Freiraum 1/5, Suche/Navigation 1/5. */
@media (min-width: 1000px) {
	.events-layout {
		grid-template-columns: 3fr 1fr 1fr;
		column-gap: 0;
	}

	.events-layout .events-sidebar {
		grid-column: 3;
	}
}

/* Events-Seite: pro Monat meist nur ein Event -> großer Kasten, weitere Events stehen untereinander. */
.events-main .event-grid {
	grid-template-columns: 1fr;
	gap: 2rem;
}

.events-main .card img {
	aspect-ratio: 16 / 9;
}

.events-main .card-body {
	padding: 1.5rem 1.75rem 1.75rem;
}

.events-main .card-body h3 {
	margin: 0 0 0.4rem;
	font-size: 1.6rem;
}

.events-month {
	margin-bottom: 2.5rem;
}

/* Handy: jeder Monat als Kasten mit blauem Kopf (wie der Kalenner auf der Startseite),
   die Events darin als Zeilen mit Vorschaubild; Suche in einer Zeile, Datums-Navigation als Knöpfe */
@media (max-width: 640px) {
	.event-search {
		margin: 0.75rem 0 1.5rem;
	}

	/* "Zrécksetzen" (nur bei aktiver Suche) in eigener Zeile */
	.event-search .btn-outline {
		flex-basis: 100%;
		text-align: center;
	}

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

	.event-search input[type='search'] {
		min-width: 0;
	}

	.event-search .btn {
		flex: 0 0 auto;
		padding-inline: 1rem;
	}

	.events-month {
		margin-bottom: 1rem;
		border: 1px solid var(--color-border);
		border-radius: 0.6rem;
		background: white;
		overflow: hidden;
	}

	.events-month h2 {
		margin: 0;
		padding: 0.55rem 1rem;
		background: var(--color-primary);
		color: white;
		font-size: 1rem;
		letter-spacing: 0.03em;
	}

	.events-main .event-grid {
		gap: 0;
	}

	.events-main .card {
		position: relative;
		flex-direction: row;
		align-items: center;
		gap: 0.85rem;
		padding: 0.65rem 2.25rem 0.65rem 0.65rem;
		border: 0;
		border-radius: 0;
	}

	.events-main .card + .card {
		border-top: 1px solid var(--color-border);
	}

	.events-main .card img {
		flex: 0 0 88px;
		width: 88px;
		height: 66px;
		aspect-ratio: auto;
		border-radius: 0.45rem;
	}

	.events-main .card-body {
		min-width: 0;
		padding: 0;
	}

	.events-main .card-body h3 {
		margin: 0;
		font-size: 1.05rem;
		line-height: 1.3;
	}

	.events-main .card-body .meta {
		margin: 0.1rem 0 0;
		font-size: 0.88rem;
	}

	/* Pfeil rechts */
	.events-main .card::after {
		content: "";
		position: absolute;
		right: 1rem;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		margin-top: -0.25rem;
		border-top: 2px solid #9aa0b8;
		border-right: 2px solid #9aa0b8;
		transform: rotate(45deg);
	}

	.events-sidebar {
		padding: 1rem 1.1rem;
	}

	.events-nav-year {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 0.6rem;
		margin-bottom: 0.8rem;
	}

	.events-nav-year h3 {
		flex: 0 0 3rem;
		margin: 0;
	}

	.events-nav-year ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.events-nav-year li + li {
		margin-top: 0;
	}

	.events-nav-year li a {
		display: inline-block;
		padding: 0.25rem 0.7rem;
		border: 1px solid var(--color-border);
		border-radius: 999px;
		background: white;
		font-size: 0.85rem;
	}
}

.event-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 1.25rem 0 2rem;
}

.event-search label {
	font-weight: 600;
}

.event-search input[type='search'] {
	flex: 1;
	min-width: 200px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	font-size: 1rem;
	font-family: inherit;
}

.events-sidebar {
	background: var(--color-muted-bg);
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	padding: 1.25rem 1.5rem;
	position: sticky;
	/* Muss unter der sticky Navbar (~5rem hoch) einrasten, sonst schiebt sie sich darunter. */
	top: 6rem;
	max-height: calc(100vh - 7.5rem);
	overflow-y: auto;
}

.events-sidebar h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.events-nav-year {
	margin-bottom: 1.25rem;
}

.events-nav-year:last-child {
	margin-bottom: 0;
}

.events-nav-year h3 {
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
}

.events-nav-year h3 a {
	color: var(--color-primary-dark);
	font-size: inherit;
	font-weight: inherit;
}

.events-nav-year ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.events-nav-year li + li {
	margin-top: 0.3rem;
}

.events-nav-year a {
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.92rem;
}

.events-nav-year a:hover,
.events-nav-year a:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.gallery-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.5rem;
}

/* Event-Seite: Galerie 3×2 (Handy 2×3) mit Seitenleiste « ‹ 1 2 3 4 5 › » (gallery-pager.js) */
.event-gallery {
	margin-top: 2.5rem;
}

.event-gallery-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-bottom: 1rem;
}

.event-gallery-head h2 {
	margin: 0;
}

.event-gallery-head .meta {
	margin: 0;
}

.event-gallery .gallery-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
	align-content: start;
}

.event-gallery .gallery-grid img {
	transition: transform 0.25s, box-shadow 0.25s;
}

.event-gallery .gallery-grid a:hover img,
.event-gallery .gallery-grid a:focus-visible img {
	transform: scale(1.02);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.gallery-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
}

/* Alle Plätze gleich breit -> die Leiste behält beim Blättern immer dieselbe Breite */
.gallery-pager button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	background: white;
	color: var(--color-primary);
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.gallery-pager button:hover:not(:disabled) {
	border-color: var(--color-primary);
	background: var(--color-muted-bg);
}

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

.gallery-pager button.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: white;
}

.gallery-pager .gallery-pager-arrow svg {
	display: block;
	flex: none;
}

.gallery-pager button:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 640px) {
	.event-gallery .gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}

	/* 9 Plätze teilen sich die Breite, damit die Leiste auch auf kleinen Handys einzeilig bleibt */
	.gallery-pager {
		gap: 0.25rem;
	}

	.gallery-pager button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: 2.6rem;
	}
}

.meta {
	color: #555;
	font-size: 0.95rem;
}

/* Großansicht der Galeriebilder (Event-Detailseite) */

/* Nach oben (Variante "Schnouer"): blauer Knopf, eine goldene Angelschnur läuft je nach Scrolltiefe um den Rand, vorne ein kleiner
   Haken; ganz unten blinkt der Knopf kurz golden. Fortschritt setzt back-to-top.js. Mitte auf gleicher Höhe wie das Cookie-Symbol links. */
.back-to-top {
	position: fixed;
	right: calc(1rem + env(safe-area-inset-right, 0px));
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	z-index: 90;
}

.back-to-top[hidden] {
	display: none;
}

.back-to-top:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

.back-to-top-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* Schnur startet oben */
	overflow: visible;
}

.back-to-top-fill {
	fill: var(--color-primary);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
	transition: fill 0.15s;
}

.back-to-top:hover .back-to-top-fill,
.back-to-top:focus-visible .back-to-top-fill {
	fill: var(--color-primary-dark);
}

.back-to-top-track,
.back-to-top-line {
	fill: none;
	stroke-linecap: round;
}

.back-to-top-track {
	stroke: rgba(15, 21, 157, 0.22);
	stroke-width: 2.2;
	stroke-dasharray: 2 4;
}

.back-to-top-line {
	stroke: var(--color-accent);
	stroke-width: 2.4;
}

.back-to-top-hook {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.back-to-top-arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.35rem;
	height: 1.35rem;
	margin: -0.675rem 0 0 -0.675rem;
	transition: transform 0.15s;
}

.back-to-top:hover .back-to-top-arrow {
	transform: translateY(-2px);
}

.back-to-top.is-full .back-to-top-fill {
	animation: back-to-top-pulse 0.6s ease-out;
}

@keyframes back-to-top-pulse {
	40% {
		fill: var(--color-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top.is-full .back-to-top-fill {
		animation: none;
	}

	.back-to-top:hover .back-to-top-arrow {
		transform: none;
	}
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 1000;
}

.lightbox[hidden] {
	display: none;
}

body.lightbox-open {
	overflow: hidden;
}

.lightbox-stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

.lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0.4rem;
}

.lightbox-caption {
	color: white;
	text-align: center;
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	max-width: 60ch;
}

.lightbox-caption:empty {
	display: none;
}

.lightbox-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.lightbox-prev,
.lightbox-next {
	background: rgba(255, 255, 255, 0.12);
	color: white;
	border: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	font-size: 1.3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
	background: var(--color-primary);
}

.lightbox-counter {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	min-width: 3.5rem;
	text-align: center;
}

.lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: transparent;
	border: none;
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.prose {
	max-width: 68ch;
	display: flow-root; /* umschließt seitlich umflossene Bilder (.about-figure-left/right) */
}

/* Bilder im Text der Über-uns-Kategorien (aboutImage()) */
.about-figure {
	margin: 1.5rem 0;
}

.about-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

.about-figure-right {
	float: right;
	width: min(45%, 340px);
	margin: 0.25rem 0 1rem 1.5rem;
}

.about-figure-left {
	float: left;
	width: min(45%, 340px);
	margin: 0.25rem 1.5rem 1rem 0;
}

.about-figure-full {
	clear: both;
	width: 100%;
	max-width: 68ch;
}

/* Banner: breiter Streifen über die ganze Inhaltsbreite. Zugeschnitten wird von unten,
   damit bei Gruppenfotos Köpfe und eingeblendete Schrift oben erhalten bleiben. */
.about-figure-banner {
	clear: both;
	width: 100%;
	margin: 0.5rem 0 2rem;
}

.about-figure-banner img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 640px) {
	.about-figure-banner img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.about-figure-right,
	.about-figure-left {
		float: none;
		width: 100%;
		margin: 1.5rem 0;
	}
}

.about-gallery {
	clear: both; /* nie neben ein seitlich umflossenes Bild (aboutImage 'left'/'right') rutschen */
	margin-top: 2.5rem;
}

.about-timeline {
	margin-top: 3.5rem;
}

/* Über-uns-Galerien: 5 Bilder pro Reihe, 2 Reihen pro Seite (Seiten per gallery-pages.js). */
.about-gallery .gallery-grid {
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
	align-content: start;
}

@media (max-width: 860px) {
	.about-gallery .gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 520px) {
	.about-gallery .gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Seitenleiste unter einer Galerie: aktive Seite in der Vereinsfarbe, Fokusrahmen in Gold. */
.gallery-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.25rem;
}

.gallery-pages button {
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	background: white;
	color: var(--color-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gallery-pages button:hover {
	border-color: var(--color-primary);
	background: var(--color-muted-bg);
}

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

.gallery-pages button.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: white;
	cursor: default;
}

/* Zeitleiste (Geschicht): Linie in der Mitte, Einträge abwechselnd links/rechts, Punkt auf der Linie
   mittig zum Eintrag, Jahr auf der gegenüberliegenden Seite. Auf dem Handy: Linie links, Jahr über dem Text. */
.timeline {
	position: relative;
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

.timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--color-border);
}

.timeline-item {
	display: grid;
	grid-template-columns: 1fr 3rem 1fr;
	align-items: center;
	margin-bottom: 1.25rem;
}

.timeline-item > * {
	grid-row: 1;
}

.timeline-card {
	background: white;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	padding: 0.9rem 1.2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.timeline-dot {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 1;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-accent);
	border: 3px solid white;
	box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-year {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-primary);
}

.timeline-item:nth-child(odd) .timeline-card {
	grid-column: 1;
}

.timeline-item:nth-child(odd) .timeline-year {
	grid-column: 3;
	justify-self: start;
}

.timeline-item:nth-child(even) .timeline-card {
	grid-column: 3;
}

.timeline-item:nth-child(even) .timeline-year {
	grid-column: 1;
	justify-self: end;
}

@media (max-width: 700px) {
	.timeline::before {
		left: 1rem;
	}

	.timeline-item,
	.timeline-item:nth-child(odd),
	.timeline-item:nth-child(even) {
		grid-template-columns: 2rem 1fr;
		row-gap: 0.25rem;
	}

	.timeline-item:nth-child(odd) .timeline-card,
	.timeline-item:nth-child(even) .timeline-card {
		grid-column: 2;
		grid-row: 2;
	}

	.timeline-item:nth-child(odd) .timeline-year,
	.timeline-item:nth-child(even) .timeline-year {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.timeline-dot {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Über-uns-Seiten: Text und Bilder nutzen die volle Containerbreite (statt der Lesebreite von .prose). */
.about-page .prose,
.about-page .about-figure-full {
	max-width: none;
}

/* Sponsoren (Startseite + /verein.php) */

.sponsors-section {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

/* Sponsoren-Band: zwei identische Reihen hintereinander; das Band läuft um genau eine Reihe
   (-50% der Bandbreite) und springt dann unsichtbar zurück -> endlos ohne Lücke.
   Richtung umkehren: in @keyframes from/to tauschen. Tempo ($marqueeSpeed, Pixel pro Sekunde) und
   Laufzeit (--sponsor-duration) stehen in app/partials/sponsors.php. */
.sponsors-marquee {
	overflow: hidden;
	margin-top: 1.5rem;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.sponsors-track {
	display: flex;
	width: max-content;
	animation: sponsors-scroll var(--sponsor-duration, 40s) linear infinite;
}

/* Pause beim Darüberfahren nur mit echter Maus; auf dem Handy bliebe das Band sonst nach dem Antippen stehen */
@media (hover: hover) and (pointer: fine) {
	.sponsors-marquee:hover .sponsors-track {
		animation-play-state: paused;
	}
}

@keyframes sponsors-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.sponsors-set {
	display: flex;
	flex: none;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sponsors-static {
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1.5rem;
}

.sponsor-logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 0 1.75rem;
}

/* Alle Logos in Originalfarben und ähnlicher Größe - gut erkennbar, ohne Links. */
.sponsor-logo img {
	max-height: 80px;
	max-width: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.sponsors-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sponsors-track {
		animation: none;
		width: auto;
		justify-content: center;
	}

	.sponsors-set {
		flex-wrap: wrap;
		justify-content: center;
	}

	.sponsors-set[aria-hidden='true'],
	.sponsor-logo.is-repeat {
		display: none;
	}
}

/* Startseite: Hero + schwebende Kacheln */

.hero {
	position: relative;
	margin: -2.5rem calc(50% - 50vw) 0;
	width: 100vw;
	min-height: 56vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* ?v= erhöhen, wenn das Foto getauscht wird – sonst liefert das Hostinger-CDN bis zu 7 Tage das alte aus */
	background: url('/assets/hero.jpg?v=2') center 30% / cover no-repeat;
	color: white;
	text-align: center;
}

/* Neutrale, leichte Abdunklung (kein Farbton), damit der weiße Text auf dem Foto lesbar bleibt */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.hero h1,
.hero .lead {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding: 4rem 1.25rem 7rem;
}

.hero h1 {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	margin: 0 0 1rem;
}

.hero .lead {
	font-size: 1.1rem;
	margin: 0 auto 1.75rem;
}

.feature-cards {
	position: relative;
	z-index: 2;
	margin-top: -6.5rem;
	margin-bottom: 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgba(11, 15, 115, 0.18);
	padding: 2rem 1.5rem 1.75rem;
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover,
.feature-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(11, 15, 115, 0.24);
}

.feature-icon {
	width: 52px;
	height: 52px;
	color: var(--color-accent);
}

.feature-icon svg {
	width: 100%;
	height: 100%;
}

.feature-card h2 {
	margin: 0;
	font-size: 1.15rem;
	color: var(--color-primary-dark);
}

.feature-card .btn {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	padding: 0.55rem 1.1rem;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nur am Handy sichtbar (Startseite, "Lëscht Events") */
.card-eyebrow,
.card-count,
.home-events-all {
	display: none;
}

/* Handy: drei kleine, quadratische Kacheln nebeneinander statt drei großer untereinander;
   "Lescht Event" in Vereinsblau. Das Titelbild ist dafür etwas niedriger. */
@media (max-width: 640px) {
	.hero {
		min-height: 40vh;
		background-image: url('/assets/hero-mobile.jpg?v=2');
	}

	.hero-content {
		padding: 3rem 1.25rem 5.5rem;
	}

	.feature-cards {
		margin-top: -3.75rem;
		margin-bottom: 2.5rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.65rem;
	}

	.feature-card {
		aspect-ratio: 1 / 1;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.6rem 0.4rem;
		border-radius: 1rem;
	}

	.feature-icon {
		width: 36px;
		height: 36px;
	}

	.feature-card h2 {
		font-size: 0.9rem;
		line-height: 1.2;
	}

	.feature-card .btn {
		display: none;
	}

	.feature-card.is-highlight {
		background: var(--color-primary);
	}

	.feature-card.is-highlight h2 {
		color: white;
	}
}

/* Handy: "Lëscht Events" – neuestes Event groß mit Titel auf dem Foto, die übrigen als schmale Zeilen mit Vorschaubild,
   darunter ein Knopf zu allen Events */
@media (max-width: 640px) {
	.home-events .event-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.home-events .card {
		position: relative;
		flex-direction: row;
		align-items: center;
		gap: 0.85rem;
		padding: 0.6rem 2.25rem 0.6rem 0.6rem;
		border-radius: 0;
	}

	.home-events .card:nth-child(2) {
		border-radius: 0.9rem 0.9rem 0 0;
	}

	.home-events .card:nth-child(n + 3) {
		border-top: 0;
	}

	.home-events .card:last-child {
		border-bottom-left-radius: 0.9rem;
		border-bottom-right-radius: 0.9rem;
	}

	.home-events .card:nth-child(2):last-child {
		border-radius: 0.9rem;
	}

	.home-events .card img {
		flex: 0 0 84px;
		width: 84px;
		height: 63px;
		aspect-ratio: auto;
		border-radius: 0.55rem;
	}

	.home-events .card-body {
		min-width: 0;
		padding: 0;
	}

	.home-events .card h3 {
		margin: 0;
		font-size: 1rem;
		line-height: 1.3;
	}

	.home-events .card .meta {
		margin: 0.1rem 0 0;
		font-size: 0.85rem;
	}

	.home-events .card-count {
		display: inline;
	}

	/* Pfeil rechts in den Zeilen */
	.home-events .card:not(:first-child)::after {
		content: "";
		position: absolute;
		right: 1rem;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		margin-top: -0.25rem;
		border-top: 2px solid #9aa0b8;
		border-right: 2px solid #9aa0b8;
		transform: rotate(45deg);
	}

	/* Neuestes Event: großes Bild, Titel darauf */
	.home-events .card:first-child {
		display: block;
		margin-bottom: 0.75rem;
		padding: 0;
		border: 0;
		border-radius: 1rem;
		background: var(--color-primary);
		color: white;
	}

	.home-events .card:first-child img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 11;
		border-radius: 0;
	}

	.home-events .card:first-child .card-body {
		padding: 1rem;
	}

	.home-events .card.has-cover:first-child .card-body {
		position: absolute;
		inset: auto 0 0;
		padding: 3rem 1rem 0.9rem;
		background: linear-gradient(180deg, rgba(5, 8, 50, 0), rgba(5, 8, 50, 0.85));
	}

	.home-events .card:first-child h3 {
		font-size: 1.35rem;
		line-height: 1.2;
	}

	.home-events .card:first-child .meta {
		color: rgba(255, 255, 255, 0.9);
	}

	.home-events .card-eyebrow {
		display: inline-block;
		margin-bottom: 0.35rem;
		padding: 0.1rem 0.55rem;
		border-radius: 999px;
		background: var(--color-accent);
		color: #3a2a00;
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.home-events-all {
		display: block;
		margin-top: 1rem;
		padding: 0.75rem;
		border: 1.5px solid var(--color-primary);
		border-radius: 0.6rem;
		text-align: center;
		font-weight: 700;
		text-decoration: none;
	}
}

/* Admin-Bereich */

.admin-body {
	background: var(--color-muted-bg);
}

/* Admin-Kopfzeile schwarz statt Vereinsfarbe – deutlicher Unterschied zwischen Webseite und Verwaltung */
.admin-header {
	background: #111;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.admin-table th,
.admin-table td {
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border);
}

.admin-table th {
	background: var(--color-muted-bg);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #555;
}

/* Events-Liste im Admin: feste Spaltenbreiten, damit alle Monats-Tabellen identisch aussehen.
   Datum/Status/Aktionen haben feste Breiten, der Titel bekommt den restlichen Platz. */
.admin-table-scroll {
	overflow-x: auto;
	padding-bottom: 4px;
}

/* Events-Liste im Kalender-Stil (partials/admin-events-list.php, nutzt die .calendar-*-Regeln unten) */
.admin-year-heading {
	margin: 2rem 0 0;
}

.status-badge {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
}

.status-published {
	background: #e3f1e6;
	color: #1f6b33;
}

.status-draft {
	background: #f6dada;
	color: #9b1c1c;
}

/* Entwurf mit geplanter Veröffentlichung (Admin-Liste) */
.status-scheduled {
	background: #fff1cf;
	color: #6b4a00;
}

/* Entwurf: rot markiert, passend zum Entwurf-Banner auf der Bearbeiten-Seite */
.calendar-row.is-draft {
	background: #fdf3f3;
	box-shadow: inset 3px 0 0 #c0392b;
}

/* Konten: "Mein Konto" (admin/konto.php) und Benutzerverwaltung (admin/benutzer.php) */
.account-form {
	max-width: 760px;
}

.account-card {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: white;
}

.account-card h2 {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
}

.account-card .form-hint {
	margin-top: -0.25rem;
}

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

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.checkbox-row input {
	width: auto;
}

.user-avatar {
	flex: 0 0 2.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.6rem;
	border-radius: 50%;
	background: #e5e7f6;
	color: var(--color-primary);
	font-weight: 700;
}

.user-avatar.is-super {
	background: #fbf0d9;
	color: #9a6b07;
}

.user-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.role-super {
	background: #fbf0d9;
	color: #7a5406;
}

.role-admin {
	background: #e5e7f6;
	color: var(--color-primary);
}

@media (max-width: 640px) {
	.account-grid {
		grid-template-columns: 1fr;
	}

	.account-card {
		padding: 1rem;
	}
}

/* Dashboard (admin/index.php): Kennzahl-Kacheln, Schnellaktionen, zwei Listen im Kalender-Stil */
.dash-hello {
	margin-bottom: 1.5rem;
}

.dash-hello h1 {
	margin-bottom: 0.25rem;
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.dash-stat {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	background: white;
	color: inherit;
}

.dash-stat strong {
	display: block;
	font-size: 1.6rem;
	line-height: 1.1;
}

.dash-sub {
	display: block;
	font-size: 0.85rem;
	color: #666;
}

.dash-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.6rem;
}

.dash-ico svg {
	width: 1.35rem;
	height: 1.35rem;
}

.dash-ico-primary { background: #e5e7f6; color: var(--color-primary); }
.dash-ico-accent { background: #fbf0d9; color: #9a6b07; }
.dash-ico-green { background: #e3f1e6; color: #1f6b33; }
.dash-ico-red { background: #f6dada; color: #9b1c1c; }

.dash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.dash-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.dash-actions .btn svg {
	width: 1.1rem;
	height: 1.1rem;
}

.dash-actions .btn-outline {
	color: var(--color-primary);
}

.dash-actions .btn-outline:hover,
.dash-actions .btn-outline:focus-visible {
	background: var(--color-muted-bg);
}

.dash-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.25rem;
	align-items: start;
}

.dash-panel {
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	background: white;
	overflow: hidden;
}

.dash-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid var(--color-border);
}

.dash-panel-head h2 {
	margin: 0;
	font-size: 1.05rem;
}

.dash-panel-head a {
	font-size: 0.9rem;
	font-weight: 600;
}

.dash-panel .calendar-row {
	padding: 0.65rem 1.1rem;
}

.dash-empty {
	margin: 0;
	padding: 1rem 1.1rem;
	color: #666;
}

.dash-thumb {
	flex: 0 0 3.6rem;
	width: 3.6rem;
	height: 2.7rem;
	border-radius: 0.35rem;
	object-fit: cover;
	background: var(--color-muted-bg);
}

.dash-status {
	align-self: center;
	margin-top: 0;
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.dash-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.dash-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.dash-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	/* Dashboard-Zeilen bleiben einzeilig (nur ein Link rechts); das Status-Etikett entfällt –
	   Entwürfe erkennt man weiterhin an der roten Markierung der Zeile */
	.dash-panel .calendar-row {
		flex-wrap: nowrap;
	}

	.dash-status {
		display: none;
	}

	/* Kacheln: Symbol über der Zahl, damit der Text die ganze Breite hat */
	.dash-stat {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
		padding: 0.85rem 0.9rem;
	}

	.dash-ico {
		width: 2.2rem;
		height: 2.2rem;
	}
}

/* Admin "Kalender": Jahresauswahl, Formular, Tabelle */
.calendar-years {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 1.5rem;
}

.calendar-years a {
	padding: 0.35rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: white;
	text-decoration: none;
	font-weight: 600;
}

.calendar-years a.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: white;
}

.calendar-form {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: white;
}

.calendar-form h2 {
	margin-top: 0;
	font-size: 1.2rem;
}

.calendar-form-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 2fr;
	gap: 0 1rem;
}

/* Grid-Zellen dürfen schmaler werden als ihr Inhalt, sonst ragen die Eingabefelder hinaus */
.calendar-form-grid > * {
	min-width: 0;
}

@media (max-width: 900px) {
	.calendar-form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.calendar-field-title,
	.calendar-field-location {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.calendar-form {
		padding: 1rem;
	}

	.calendar-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Terminliste: pro Monat ein Kasten, Zeilen mit Datums-Kachel */
.calendar-month {
	margin-top: 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: white;
	overflow: hidden;
}

.calendar-month-head {
	margin: 0;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-muted-bg);
	color: #555;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.calendar-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1rem;
}

.calendar-row + .calendar-row {
	border-top: 1px solid var(--color-border);
}

.calendar-date {
	flex: 0 0 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.3rem 0;
	border-radius: 0.4rem;
	background: var(--color-muted-bg);
	line-height: 1.1;
}

.calendar-day {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-primary);
}

.calendar-weekday {
	font-size: 0.75rem;
	color: #666;
}

.calendar-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.calendar-title {
	font-weight: 600;
}

.calendar-meta {
	font-size: 0.85rem;
	color: #666;
}

.calendar-row .actions-row {
	flex-shrink: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* Laufendes Jahr: nächster Termin golden markiert */
.calendar-row.is-next {
	background: #fdf7ea;
	box-shadow: inset 3px 0 0 var(--color-accent);
}

.calendar-row.is-next .calendar-date {
	background: var(--color-accent);
}

.calendar-row.is-next .calendar-day,
.calendar-row.is-next .calendar-weekday {
	color: #3a2a00;
}

.calendar-badge {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: #3a2a00;
	font-size: 0.72rem;
	font-weight: 700;
}

/* Termin, der gerade oben im Formular bearbeitet wird */
.calendar-row.is-editing {
	background: #eef0fa;
	box-shadow: inset 3px 0 0 var(--color-primary);
}

@media (max-width: 640px) {
	.calendar-row {
		flex-wrap: wrap;
	}

	.calendar-row .actions-row {
		width: 100%;
		flex-wrap: wrap;
	}
}

.form-field {
	margin-bottom: 1.25rem;
}

.form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='password'],
.form-field input[type='date'],
.form-field input[type='datetime-local'],
.form-field select,
.form-field textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	font-size: 1rem;
	font-family: inherit;
}

.form-field textarea {
	max-width: 640px;
}

.form-hint {
	font-size: 0.85rem;
	color: #666;
	margin-top: 0.3rem;
}

/* Fortschritt beim Galerie-Upload in Paketen (gallery-upload.js) */
.upload-progress {
	margin-top: 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	background: var(--color-muted-bg);
}

.upload-progress-text {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.upload-progress-bar {
	height: 0.6rem;
	border-radius: 999px;
	background: white;
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.upload-progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-primary);
	transition: width 0.3s;
}

.upload-progress.has-errors .upload-progress-bar span {
	background: #c0392b;
}

.upload-progress-errors {
	margin: 0.75rem 0;
	padding-left: 1.25rem;
	color: #a12a1e;
	font-size: 0.9rem;
}

.alert {
	padding: 0.85rem 1.1rem;
	border-radius: 0.4rem;
	margin-bottom: 1.5rem;
}

.alert-success {
	background: #e3f5e8;
	color: #1c6b34;
	border: 1px solid #b8e2c4;
}

.alert-error {
	background: #fbe6e6;
	color: #a52222;
	border: 1px solid #f3bcbc;
}

/* Entwurf-Hinweisbanner auf der Bearbeiten-Seite - bewusst auffällig, aber leicht/transparent. */
.alert-draft {
	background: rgba(211, 47, 47, 0.1);
	color: #a52222;
	border: 1px solid rgba(211, 47, 47, 0.3);
}

/* Erfolgs-/Fehlermeldung nach einer Aktion (z.B. "Event gelöscht.") - schwebt über dem Inhalt,
   statt die Seite darunter nach unten zu schieben. */
.toast {
	position: fixed;
	top: 6rem;
	right: 1.25rem;
	z-index: 150;
	max-width: min(360px, calc(100vw - 2.5rem));
	margin-bottom: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	animation: toast-in 0.2s ease-out;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.toast-close {
	background: transparent;
	border: none;
	color: inherit;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
}

.gallery-manager-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.gallery-manager-header .form-hint {
	margin: 0;
	max-width: 60ch;
}

.gallery-manager-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.gallery-manager-item {
	position: relative;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	padding: 0.6rem;
	background: white;
	cursor: grab;
}

.gallery-manager-item.is-dragging {
	opacity: 0.4;
}

.gallery-manager-item.is-selected {
	border-color: #b3261e;
	box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.25);
}

.gallery-manager-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.4rem;
	display: block;
	margin-bottom: 0.6rem;
}

.gallery-manager-select {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 1;
	width: 1.4rem;
	height: 1.4rem;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.gallery-manager-select input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}

.gallery-caption-toggle {
	background: transparent;
	border: none;
	color: var(--color-primary);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.2rem 0;
}

.gallery-caption-toggle:hover,
.gallery-caption-toggle:focus-visible {
	text-decoration: underline;
}

.gallery-caption-field {
	margin-top: 0.4rem;
}

.gallery-caption-field input {
	width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: 0.3rem;
	font-size: 0.9rem;
	font-family: inherit;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.75rem;
	max-width: 480px;
}

/* Button ganz rechts in der Zeile, z. B. "Event löschen" – räumlich getrennt von Speichern */
.form-actions .form-actions-end {
	margin-left: auto;
}

.actions-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.btn-danger {
	background: #b3261e;
}

.btn-danger:hover {
	background: #8f1d17;
}

.btn-small {
	padding: 0.4rem 0.9rem;
	font-size: 0.9rem;
}

/* Protokoll (admin/protokoll.php) */
.activity-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 1rem 0 0.5rem;
}

.activity-filter label {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.activity-filter select {
	min-width: 12rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	background: white;
	font: inherit;
}

.activity-object {
	font-weight: 400;
	color: #555;
}

.activity-time {
	flex: 0 0 auto;
	color: #666;
	font-variant-numeric: tabular-nums;
}

.activity-pager {
	align-items: center;
	justify-content: center;
}

/* Mitgliedsformular (sekretariat/member-ginn): Desktop = Karten + Zusammenfassung, Handy (bis 760 px) = Schritt für Schritt */

/* PDF-Download: gut sichtbar */
.pdf-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	background: #fff;
	border: 2px solid var(--color-primary);
	border-radius: 1rem;
}

.pdf-card-icon {
	width: 3.5rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: 0.5rem;
	background: #fdecec;
	color: #b3261e;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.pdf-card-icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.pdf-card-text {
	flex: 1 1 18rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pdf-card-text strong {
	font-size: 1.1rem;
}

.pdf-card-text span {
	color: #4a4f6a;
	font-size: 0.92rem;
}

.pdf-card-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

/* Zweispalter: Karten links, Zusammenfassung rechts */
.m-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 2rem;
	align-items: start;
	margin-bottom: 3rem;
}

.m-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.m-card {
	background: #fff;
	border: 1px solid #e3e6f2;
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 2px 12px rgba(15, 21, 157, 0.06);
}

.m-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.m-head h2 {
	margin: 0;
	font-size: 1.3rem;
}

.m-head p {
	margin: 0;
	font-size: 0.88rem;
	color: #565b78;
}

.m-num {
	width: 2.4rem;
	height: 2.4rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.m-grid .form-field {
	margin: 0;
	min-width: 0;
}

.m-wide {
	grid-column: 1 / -1;
}

.member-form .form-field label {
	font-size: 0.9rem;
}

.member-form .form-field input[type='text'],
.member-form .form-field input[type='email'],
.member-form .form-field input[type='date'],
.member-form .form-field select {
	max-width: none;
	height: 3rem;
	padding: 0 0.9rem;
	border: 1.5px solid #cfd4e8;
	border-radius: 0.65rem;
	background-color: #fff;
}

.member-form .form-field input:focus,
.member-form .form-field select:focus {
	border-color: var(--color-primary);
	outline: 3px solid rgba(15, 21, 157, 0.18);
	outline-offset: 0;
}

/* Foto */
.m-photo {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	grid-template-areas:
		'preview fields'
		'preview note';
	grid-template-rows: auto 1fr;
	column-gap: 1.5rem;
	align-items: start;
}

.m-photo .photo-preview {
	grid-area: preview;
}

.m-photo .photo-fields {
	grid-area: fields;
}

.m-photo .privacy-note {
	grid-area: note;
}

.photo-preview {
	width: 9.5rem;
	height: 12.5rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #b9bfdc;
	border-radius: 0.9rem;
	background: var(--color-muted-bg);
	color: #6a7092;
	font-size: 0.88rem;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.photo-preview:hover {
	border-color: var(--color-primary);
	background: #eef0fa;
}

.photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-fields {
	flex: 1 1 18rem;
	min-width: 0;
}

.file-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.file-hidden:focus-visible + .photo-button {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.photo-button {
	display: inline-block;
	cursor: pointer;
	font-weight: 600;
}

.privacy-note {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border-radius: 0.7rem;
	background: #eef0fa;
	font-size: 0.9rem;
	line-height: 1.5;
}

.form-error {
	margin: 0.4rem 0 0;
	color: #a32020;
	font-weight: 600;
	font-size: 0.9rem;
}

/* Memberschaft: Kacheln (Desktop) / Liste (Handy) */
.m-group {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #565b78;
}

.m-opts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.9rem;
}

.m-opt {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem;
	border: 2px solid var(--color-border);
	border-radius: 0.9rem;
	background: #fff;
	cursor: pointer;
}

.m-opt:hover {
	background: var(--color-muted-bg);
}

.m-opt:has(input:checked) {
	border-color: var(--color-primary);
	background: #eef0fa;
}

.m-opt input {
	margin: 0 0 0.4rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--color-primary);
}

.m-opt-name {
	font-weight: 600;
	min-height: 2.7em;
}

.m-opt-name small {
	display: block;
	font-size: 0.82rem;
	font-weight: 400;
	color: #565b78;
}

.m-opt-price {
	font-size: 1.45rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Beitrags-Hinweis: steht immer unter den aktiven Memberschaften */
.m-fee-note {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin: 1rem 0 1.5rem;
	padding: 0.9rem 1rem;
	border: 2px solid var(--color-primary);
	border-radius: 0.9rem;
	background: #eef0fa;
	color: var(--color-text);
	font-size: 0.95rem;
}

.m-fee-note svg {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--color-primary);
}

.m-fee-note p {
	margin: 0.15rem 0 0;
}

.m-fee-note b {
	font-size: 1.15em;
}
/* Datenschutz, Haken */
.m-check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 1.1rem 0 0;
	padding: 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: 0.75rem;
	background: #fff;
	font-weight: 600;
	cursor: pointer;
}

.m-check input {
	margin: 0.2rem 0 0;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	accent-color: var(--color-primary);
}

/* Erlaubnis eines Elternteils: mit JavaScript nur bei Minderjährigen sichtbar */
.js .parental-block:not(.is-open) {
	display: none;
}

.parental-star {
	display: none;
}

.parental-block.is-open .parental-star {
	display: inline;
	color: #b3261e;
	font-weight: 700;
}

/* Zusammenfassung (Desktop) */
.m-aside {
	position: sticky;
	top: 6.5rem;
	padding: 1.5rem;
}

.m-aside h2 {
	margin: 0 0 0.9rem;
	font-size: 1.2rem;
}

.m-sumrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid #e3e6f2;
}

.m-sumrow span {
	color: #565b78;
}

.m-sum-price {
	font-size: 1.6rem;
	font-variant-numeric: tabular-nums;
}

.m-sumnote {
	margin: 0;
	padding: 0.6rem 0 0;
	border-top: 1px solid #e3e6f2;
	font-size: 0.82rem;
	color: #565b78;
}

.m-checklist {
	list-style: none;
	margin: 1rem 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.95rem;
}

.m-checklist li {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	color: #565b78;
}

.m-dot {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	border: 2px solid #b9bfdc;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.m-dot svg {
	display: none;
}

.m-checklist li.is-done {
	color: var(--color-text);
}

.m-checklist li.is-done .m-dot {
	background: #1f8f4e;
	border-color: #1f8f4e;
}

.m-checklist li.is-done .m-dot svg {
	display: block;
}

.m-submit {
	width: 100%;
	text-align: center;
	justify-content: center;
}

/* Handy-Ansicht: Schritt für Schritt (nur mit JavaScript, Klasse .is-wizard) */
.m-stepper {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
}

.m-stepper[hidden] {
	display: none;
}

.m-stepper li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	position: relative;
	font-size: 0.72rem;
	text-align: center;
	color: #565b78;
}

.m-stepper li::after {
	content: '';
	position: absolute;
	top: 1.1rem;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #cfd4e8;
}

.m-stepper li:last-child::after {
	display: none;
}

.m-stepper li.is-done::after {
	background: #1f8f4e;
}

.m-stepper button {
	position: relative;
	z-index: 1;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	border: 2px solid #cfd4e8;
	background: #fff;
	color: #565b78;
	font: inherit;
	font-weight: 700;
	cursor: default;
}

.m-stepper li.is-current button {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.m-stepper li.is-current {
	color: var(--color-primary);
	font-weight: 700;
}

.m-stepper li.is-done button {
	background: #1f8f4e;
	border-color: #1f8f4e;
	color: #fff;
	cursor: pointer;
}

.m-wnav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem 0 3rem;
}

.m-wnav[hidden] {
	display: none;
}

.m-ghost {
	background: #fff;
	color: var(--color-text);
	border: 2px solid #b9bfdc;
	font-weight: 600;
}

.m-ghost:hover,
.m-ghost:focus-visible {
	background: #eef0fa;
}

.m-review {
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 0.4rem 1rem;
	font-size: 0.92rem;
}

.m-review[hidden] {
	display: none;
}

.m-review dt {
	color: #565b78;
}

.m-review dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

@media (max-width: 960px) {
	.m-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.m-aside {
		position: static;
	}

	.m-opts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {

	.m-card {
		padding: 1.25rem;
	}

	.m-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdf-card {
		padding: 1rem;
	}

	.pdf-card-button {
		width: 100%;
		justify-content: center;
	}

	/* Foto-Schritt am Handy: Platzhalter links, Knopf rechts daneben; die Datenschutz-Box geht darunter über die ganze Kartenbreite */
	.m-photo {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		grid-template-areas:
			'preview fields'
			'note note';
		grid-template-rows: auto auto;
		column-gap: 1rem;
	}

	.photo-preview {
		width: 6.5rem;
		height: 8.6rem;
	}

	.photo-fields {
		flex: 1 1 0;
	}

	.photo-fields .photo-button {
		padding: 0.7rem 1rem;
		font-size: 0.95rem;
	}

	.m-photo .privacy-note {
		margin-top: 1rem;
	}

	/* Wizard: nur der aktuelle Schritt, Zusammenfassung entfällt (Übersicht kommt in Schritt 4) */
	.is-wizard .m-card[data-step]:not(.is-current) {
		display: none;
	}

	.is-wizard .m-aside {
		display: none;
	}

	.is-wizard .m-layout {
		margin-bottom: 0;
	}

	.is-wizard .m-opts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}

	.is-wizard .m-opt {
		flex-direction: row;
		align-items: center;
		gap: 0.9rem;
		padding: 0.9rem 1rem;
	}

	.is-wizard .m-opt input {
		margin: 0;
	}

	.is-wizard .m-opt-name {
		flex: 1;
		min-height: 0;
	}

	.is-wizard .m-opt-price {
		font-size: 1.2rem;
	}

	.is-wizard .m-review {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.is-wizard .m-review dd {
		margin-bottom: 0.6rem;
	}
}

/* Geburtsdatum: Tippen mit Maske TT.MM.JJJJ oder Kalender-Knopf */
.date-field {
	position: relative;
}

.member-form .date-field input#birth_date {
	padding-right: 3.2rem;
}

.date-button {
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--color-primary);
	cursor: pointer;
}

.date-button[hidden] {
	display: none;
}

.date-button:hover,
.date-button:focus-visible {
	background: #eef0fa;
}

.date-picker {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Hamburger-Menü (Handy, bis 760 px) für öffentliche Seite und Admin (Kopfzeile mit Klasse .has-nav-toggle):
   Knopf rechts, Menüpunkte klappen darunter auf. Desktop unverändert. */
.nav-toggle {
	display: none;
}

.nav-toggle[hidden] {
	display: none;
}

.nav-toggle .nav-icon-close {
	display: none;
}

@media (max-width: 760px) {
	.has-nav-toggle .header-inner {
		flex-wrap: wrap;
		flex-direction: row;
		gap: 0.5rem 1rem;
		padding: 0.7rem 1rem;
	}

	.has-nav-toggle .brand {
		flex: 1 1 0;
		min-width: 0;
		font-size: 1.05rem;
		line-height: 1.2;
	}

	.has-nav-toggle .brand img {
		width: 38px;
		height: 38px;
		flex-shrink: 0;
	}

	.nav-toggle:not([hidden]) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 2.8rem;
		height: 2.8rem;
		border: 1.5px solid rgba(255, 255, 255, 0.55);
		border-radius: 0.65rem;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.nav-toggle:hover,
	.nav-toggle:focus-visible {
		background: rgba(255, 255, 255, 0.14);
	}

	.has-nav-toggle.is-open .nav-icon-open {
		display: none;
	}

	.has-nav-toggle.is-open .nav-icon-close {
		display: block;
	}

	/* mit JavaScript: Menü eingeklappt, bis der Knopf es öffnet; ohne JavaScript bleibt es offen sichtbar */
	.js .has-nav-toggle nav {
		display: none;
		flex-basis: 100%;
	}

	.js .has-nav-toggle.is-open nav {
		display: block;
	}

	.has-nav-toggle nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		margin-top: 0.25rem;
		border-top: 1px solid rgba(255, 255, 255, 0.28);
	}

	.has-nav-toggle nav li a,
	.has-nav-toggle nav .nav-logout {
		display: block;
		width: 100%;
		padding: 0.9rem 0.25rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
		font-size: 1.1rem;
		text-align: left;
	}
}

/* Geburtsdatum: das versteckte Kalenderfeld darf nie sichtbar werden (stärker als die allgemeinen Formularfeld-Regeln) */
.member-form .m-card .date-field input.date-picker {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

/* Pflichtfelder: roter Stern und roter Hinweis oben im Formular */
.req {
	color: #b3261e;
	font-weight: 700;
}

.m-required-note {
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border-radius: 0.65rem;
	background: #fdecec;
	color: #b3261e;
	font-size: 0.95rem;
	font-weight: 600;
}

/* ===== Cookie-Astellungen (app/partials/cookie-consent.php, assets/fang.js) =====
   Ebene über der ganzen Seite, lässt Klicks durch; nur Symbol und Karte sind klickbar.
   Reihenfolge: Schnur < Karte < Pfütze < Spritzer < Symbol. Unter der Lightbox (1000), über dem Kopf (100). */
.fang {
	position: fixed;
	inset: 0;
	z-index: 120;
	pointer-events: none;
	overflow: hidden;
}

.fang-defs {
	position: absolute;
}

.fang-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: visible;
}

.fang-rig {
	position: absolute;
	left: max(1rem, env(safe-area-inset-left, 0px));
	bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
	width: min(360px, calc(100vw - 2rem));
	z-index: 2;
	visibility: hidden;
	pointer-events: auto;
}

.fang-swing {
	position: relative;
	padding-top: 30px;
	transform-origin: 50% 0;
}

.fang-catch {
	position: absolute;
	top: 0;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	z-index: 2;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

.fang-catch svg,
.fang-toggle svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fang-panel {
	position: relative;
	max-height: calc(100vh - 9rem);
	overflow-y: auto;
	padding: 2.5rem 1.25rem 1.1rem;
	background: #fff;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(10, 14, 60, 0.25);
	transform-origin: 50% 0;
}

.fang-panel h2 {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	text-align: center;
	color: var(--color-primary-dark);
}

.fang-panel > p {
	margin: 0 0 0.75rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: #444862;
	text-align: center;
}

.fang-close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6a6f8c;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.fang-close:hover,
.fang-close:focus-visible {
	background: var(--color-muted-bg);
}

.fang-close[hidden] {
	display: none;
}

.fang-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--color-border);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.fang-opt > span {
	min-width: 0;
}

.fang-opt small {
	display: block;
	font-size: 0.76rem;
	font-weight: 400;
	color: #6a6f8c;
}

.fang-switch {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 26px;
	margin: 0;
	border-radius: 999px;
	background: #c9cde0;
	cursor: pointer;
	transition: background 0.2s;
}

.fang-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s;
}

.fang-switch:checked {
	background: var(--color-primary);
}

.fang-switch:checked::after {
	transform: translateX(18px);
}

.fang-switch:disabled {
	opacity: 0.55;
	cursor: default;
}

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

.fang-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.fang-btn {
	padding: 0.65rem 0.5rem;
	border-radius: 10px;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.fang-btn-main {
	border: 0;
	background: var(--color-primary);
	color: #fff;
}

.fang-btn-main:hover {
	background: var(--color-primary-dark);
}

.fang-btn-ghost {
	border: 2px solid #b9bfdc;
	background: #fff;
	color: var(--color-text);
}

.fang-btn-ghost:hover {
	border-color: var(--color-primary);
}

.fang-puddle {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(120px + env(safe-area-inset-left, 0px));
	height: calc(34px + env(safe-area-inset-bottom, 0px));
	z-index: 3;
	overflow: hidden;
	border-top-right-radius: 60px 30px;
	transform: translateY(110%);
}

.fang-puddle svg {
	position: absolute;
	left: 0;
	width: 240px;
	height: 34px;
}

.fang-puddle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 34px;
	bottom: 0;
	background: #2457c4;
}

.fang.is-active .fang-puddle svg {
	animation: fang-drift 3.5s linear infinite;
}

@keyframes fang-drift {
	to {
		transform: translateX(-50%);
	}
}

.fang-fx {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.fang-drop {
	position: absolute;
	width: 7px;
	height: 9px;
	margin: -4px 0 0 -3px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: #8dbcf2;
	box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.6);
}

.fang-ring {
	position: absolute;
	width: 46px;
	height: 12px;
	margin: -6px 0 0 -23px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.75);
}

/* Cookie-Symbol: gleiche Größe und Abstand wie "Zréck op den Ufank" rechts.
   Selbst fixed (statt absolute in der Vollbild-Ebene): Mobile Browser schieben nur unten verankerte fixed-Elemente mit,
   wenn die Adressleiste beim Scrollen einklappt; die Ebene (top+bottom) wächst erst nach dem Loslassen mit. */
.fang-toggle {
	position: fixed;
	left: calc(1.25rem + env(safe-area-inset-left, 0px));
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	z-index: 5;
	width: 3rem;
	height: 3rem;
	padding: 0.4rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s;
}

.fang-toggle:hover,
.fang-toggle:focus-visible {
	transform: rotate(-12deg) scale(1.06);
}

.fang-toast {
	position: fixed;
	left: calc(5rem + env(safe-area-inset-left, 0px));
	bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
	z-index: 5;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--color-primary-dark);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
}

/* Mitgliedsformular: Hinweis, solange der Spamschutz nicht erlaubt ist (dann kann nicht abgeschickt werden) */
.m-recaptcha-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border: 2px solid var(--color-accent);
	border-radius: 14px;
	background: #fff6df;
	color: #5c4306;
}

.m-recaptcha-note[hidden] {
	display: none;
}

.m-recaptcha-note p {
	flex: 1 1 16rem;
	margin: 0;
}

.m-recaptcha-note svg {
	flex-shrink: 0;
}

.m-recaptcha-note.is-flash {
	animation: fang-flash 0.9s ease-out;
}

@keyframes fang-flash {
	30% {
		box-shadow: 0 0 0 6px rgba(224, 167, 44, 0.45);
	}
}

/* Online-Antrag noch nicht freigeschaltet (MembershipMail::isConfigured): Formular nur als Vorschau, grau und nicht bedienbar */
.member-form.is-unavailable {
	opacity: 0.55;
	filter: grayscale(0.7);
	user-select: none;
}

/* Gesperrt (Spamschutz nicht erlaubt): Absende-Knöpfe grau mit Schloss – bewusst grau statt rot, "geht gerade nicht" statt "Fehler" */
.member-form.is-blocked .m-submit,
.member-form.is-blocked .m-submit:hover,
.member-form.is-blocked #memberNext.is-submit,
.member-form.is-blocked #memberNext.is-submit:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: #8f95ad;
	color: #fff;
	cursor: not-allowed;
}

.member-form.is-blocked .m-submit::before,
.member-form.is-blocked #memberNext.is-submit::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.fang.is-active .fang-puddle svg {
		animation: none;
	}
}

/* Vorschau einer Event-Seite aus dem Admin (events/detail.php?vorschau=1): Hinweisleiste oben, Link im Entwurf-Hinweis */
.preview-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-top: 1.25rem;
}

.preview-bar span {
	flex: 1 1 20rem;
}

.alert-draft .preview-link {
	color: var(--color-primary);
	background: #fff;
}

/* Zusatz in Formular-Beschriftungen, z. B. "(optional)" */
.form-label-note {
	font-weight: 400;
	color: #6a6f8c;
}

/* ===== Event-Formular im Admin (app/partials/admin-events-form.php, assets/event-form.js) =====
   Links untereinander Inhalt, Titelbild, Galerie; rechts die Veröffentlichung (läuft mit); unten eine mitlaufende Leiste. */
.ev-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1.25rem;
	align-items: start;
}

.ev-main {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.ev-side {
	position: sticky;
	top: 5.5rem; /* unter dem mitlaufenden Admin-Kopf */
	display: grid;
	gap: 0.75rem;
}

.ev-card {
	background: #fff;
	border: 1px solid #e2e5f1;
	border-radius: 16px;
	padding: 1.25rem;
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.ev-card .form-field {
	margin: 0;
}

.ev-card-title {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6a6f8c;
}

.ev-form .form-field input[type='text'],
.ev-form .form-field input[type='date'],
.ev-form .form-field input[type='datetime-local'],
.ev-form .form-field textarea {
	max-width: none;
	border: 1.5px solid #cfd4e8;
	border-radius: 10px;
	background: #fff;
}

.ev-form .form-field input:focus,
.ev-form .form-field textarea:focus {
	border-color: var(--color-primary);
	outline: 3px solid rgba(15, 21, 157, 0.18);
	outline-offset: 0;
}

.ev-form .form-field input.ev-title {
	height: 3.3rem;
	font-size: 1.35rem;
	font-weight: 700;
}

.ev-form .form-field input.ev-title::placeholder {
	font-weight: 400;
	color: #9aa0b8;
}

.ev-form .form-field input.ev-date {
	max-width: 14rem;
}

/* Ablagefläche für Bilder (Klick öffnet die Auswahl, Ziehen & Ablegen geht auch) */
.ev-drop {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 7rem;
	padding: 1.1rem;
	border: 2px dashed #b9c0dd;
	border-radius: 14px;
	background: #f8f9fd;
	text-align: center;
	color: #555b78;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s, background 0.15s;
}

.ev-drop:hover,
.ev-drop.is-over,
.ev-drop:focus-within {
	border-color: var(--color-primary);
	background: #eef0fa;
}

.ev-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ev-drop-text {
	position: relative;
	display: grid;
	gap: 0.2rem;
}

.ev-drop-text b {
	color: var(--color-primary);
	font-size: 1rem;
}

.ev-drop-text small {
	font-size: 0.8rem;
}

/* Titelbild: breit wie ein Banner, so wie es oben auf der Event-Seite erscheint */
.ev-cover {
	aspect-ratio: 16 / 7;
	max-width: 100%;
	min-height: 0;
}

.ev-drop-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ev-cover.has-image {
	border-style: solid;
}

.ev-cover.has-image .ev-drop-text {
	align-self: end;
	justify-self: end;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
}

.ev-cover.has-image .ev-drop-text b {
	color: #fff;
	font-size: 0.85rem;
}

.ev-cover.has-image .ev-drop-text small {
	display: none;
}

.ev-drop-small {
	min-height: 6rem;
}

.ev-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.ev-thumbs:empty {
	display: none;
}

.ev-thumbs img,
.ev-thumbs-more {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid #e2e5f1;
}

.ev-thumbs-more {
	display: grid;
	place-items: center;
	background: #eef0fa;
	color: var(--color-primary);
	font-weight: 700;
}

/* Veröffentlichung: drei Auswahlkarten */
.ev-pub {
	display: grid;
	gap: 0.5rem;
}

.ev-pub label {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.65rem 0.75rem;
	border: 1.5px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
	font-weight: 600;
	cursor: pointer;
}

.ev-pub label:has(input:checked) {
	border-color: var(--color-primary);
	background: #eef0fa;
}

.ev-pub input {
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	accent-color: var(--color-primary);
}

.ev-pub span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ev-pub small {
	font-weight: 400;
	font-size: 0.8rem;
	color: #6a6f8c;
}

.ev-when[hidden] {
	display: none;
}

.ev-published {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ev-published .status-badge {
	margin: 0;
}

.ev-delete {
	justify-self: start;
	padding: 0.4rem 0.2rem;
	border: 0;
	background: none;
	color: #b3261e;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* Leiste unten: bleibt beim Scrollen sichtbar */
.ev-actionbar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem 0.9rem;
	margin: 1.25rem 0 2rem;
	padding: 0.8rem 1rem;
	border: 1px solid #e2e5f1;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -6px 20px rgba(10, 14, 60, 0.08);
}

.ev-state {
	margin-right: auto;
	font-size: 0.9rem;
	color: #6a6f8c;
}

.ev-cancel {
	color: #555b78;
	font-weight: 600;
}

.ev-btn-ghost {
	background: #fff;
	color: var(--color-primary);
	border: 1.5px solid #b9bfdc;
}

.ev-btn-ghost:hover,
.ev-btn-ghost:focus-visible {
	background: #fff;
	border-color: var(--color-primary);
}

@media (max-width: 860px) {
	.ev-layout {
		grid-template-columns: 1fr;
	}

	.ev-side {
		position: static;
	}

	.ev-cover {
		aspect-ratio: 16 / 9;
	}

	/* Handy: Leiste kompakt – kurzer Satz oben, darunter Abbrechen, Vorschau und Hauptknopf in einer Reihe */
	.ev-actionbar {
		gap: 0.35rem 0.5rem;
		padding: 0.55rem 0.65rem;
		margin-bottom: 1rem;
	}

	.ev-actionbar .ev-state {
		width: 100%;
		font-size: 0.8rem;
		line-height: 1.35;
	}

	.ev-actionbar .ev-cancel {
		font-size: 0.9rem;
	}

	.ev-actionbar .btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.55rem 0.6rem;
		font-size: 0.92rem;
		white-space: normal;
	}

	/* Hauptknopf (z. B. "Veröffentlichen") in eigener Zeile über die ganze Breite, darüber Abbrechen + Vorschau */
	.ev-actionbar .btn[data-ev-primary] {
		flex: 1 1 100%;
	}
}

/* Galerie-Verwaltung in der Galerie-Karte des Event-Formulars: etwas kleinere Kacheln, damit 3 nebeneinander passen */
.ev-card .gallery-manager-grid {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.9rem;
}

.ev-card .gallery-manager-header {
	margin-bottom: 0;
}

/* ===== Tombola (app/partials/tombola-teaser.php, public_html/tombola/, admin/tombola.php) ===== */

/* Startseite: "Huet Äert Lous gebass?" – Los am Haken über dem Wasser, die ganze Fläche ist ein Link */
.tombola-teaser {
	display: block;
	margin: 0 0 3rem;
	color: inherit;
	text-decoration: none;
}

.tombola-teaser-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 1rem;
	align-items: center;
	min-height: 300px;
	padding: 1.75rem 1.75rem 5rem;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(180deg, #eaf2ff, #d7e6ff);
	transition: box-shadow 0.2s, transform 0.2s;
}

.tombola-teaser:hover .tombola-teaser-inner,
.tombola-teaser:focus-visible .tombola-teaser-inner {
	box-shadow: 0 14px 34px rgba(15, 21, 157, 0.18);
	transform: translateY(-2px);
}

.tombola-teaser-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}

.tombola-kicker {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b4a00;
}

.tombola-teaser-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--color-primary);
}

.tombola-teaser-lead {
	max-width: 46ch;
	color: #3c4266;
}

.tombola-teaser-btn {
	margin-top: 0.35rem;
}

.tombola-until {
	font-size: 0.85rem;
	color: #3c4266;
}

.tombola-rig {
	position: relative;
	height: 230px;
}

.tombola-swing {
	position: absolute;
	left: 50%;
	top: 0;
	width: 0;
	height: 0;
	transform-origin: 0 -40px;
	animation: tombola-swing 3.2s ease-in-out infinite;
}

.tombola-line {
	position: absolute;
	left: -1px;
	top: -60px;
	width: 2px;
	height: 124px;
	background: #2a2e4a;
}

.tombola-hook {
	position: absolute;
	left: -9px;
	top: 58px;
	width: 20px;
	height: 26px;
	border: 3px solid #5b6078;
	border-top: 0;
	border-radius: 0 0 14px 14px;
}

.tombola-lous {
	position: absolute;
	left: -95px;
	top: 80px;
	width: 190px;
	height: 104px;
	display: grid;
	grid-template-columns: 58px 1fr;
	overflow: hidden;
	border-radius: 12px;
	background: #fffdf6;
	box-shadow: 0 12px 26px rgba(15, 21, 157, 0.25);
}

.tombola-lous span:first-child {
	display: grid;
	place-items: center;
	background: var(--color-accent);
	border-right: 2px dashed rgba(0, 0, 0, 0.25);
	color: #1d1500;
	font-size: 1.2rem;
	font-weight: 800;
}

.tombola-lous span:last-child {
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.tombola-waves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	overflow: hidden;
}

.tombola-waves svg {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	animation: tombola-drift 7s linear infinite;
}

@keyframes tombola-swing {
	0%,
	100% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(5deg);
	}
}

@keyframes tombola-drift {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 680px) {
	.tombola-teaser-inner {
		grid-template-columns: 1fr;
		padding: 1.4rem 1.1rem 5rem;
	}

	.tombola-rig {
		height: 200px;
	}

	/* Handy: Los steht unter dem Text – Schnur kürzer, damit sie nicht durch den Knopf läuft */
	.tombola-line {
		top: -6px;
		height: 70px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tombola-swing,
	.tombola-waves svg {
		animation: none;
	}

	.tombola-teaser:hover .tombola-teaser-inner {
		transform: none;
	}
}

/* Seite /tombola/: links Infos, rechts das Bild im Betrachter */
.tombola-page {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.tombola-info {
	display: grid;
	gap: 0.85rem;
}

/* Titel mit normalem Abstand oben (im Raster fällt er nicht mit dem Seitenrand zusammen) – so steht er auf derselben Höhe wie überall */
.tombola-info h1 {
	margin: 0.67em 0 0;
}

/* Bild beginnt auf Höhe der Titel-Schrift (= Abstand oben des Titels: 0.67 × 2em) */
.tombola-paper {
	margin-top: calc(0.67 * 2rem);
}

.tombola-facts {
	margin: 0;
}

.tombola-facts div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.tombola-facts dt {
	color: #5b6080;
}

.tombola-facts dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.tombola-tip {
	margin: 0;
	padding: 0.75rem 0.9rem;
	border-radius: 12px;
	background: #fff6df;
	color: #5c4306;
	font-size: 0.92rem;
}

/* Tipp passend zum Gerät: Maus (Computer) oder Finger (Handy/Tablet) */
.tombola-tip-touch {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.tombola-tip-mouse {
		display: none;
	}

	.tombola-tip-touch {
		display: block;
	}
}

.tombola-paper {
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #f6f7fb;
	box-shadow: 0 10px 26px rgba(10, 14, 60, 0.08);
	overflow: hidden;
}

.tombola-viewer {
	display: grid;
}

/* Höhe setzt tombola-viewer.js passend zum Bild. overflow: hidden – Mausrad und Wischen scrollen immer die Seite;
   vergrößert wird das Bild per Ziehen verschoben (dann fängt der Bereich den Finger ab). */
.tombola-scroll {
	height: min(70vh, 900px);
	overflow: hidden;
	padding: 12px;
}

.tombola-scroll.is-zoomed {
	cursor: grab;
	touch-action: none;
}

.tombola-scroll.is-dragging {
	cursor: grabbing;
}

.tombola-scroll img {
	display: block;
	max-width: none;
	height: auto;
	margin: 0 auto;
	user-select: none;
	-webkit-user-drag: none;
}

.tombola-zoombar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem;
	border-top: 1px solid var(--color-border);
	background: #fff;
}

.tombola-zoombar button {
	min-width: 2.75rem;
	min-height: 2.5rem;
	padding: 0.3rem 0.8rem;
	white-space: nowrap;
	border: 1.5px solid #c9cee6;
	border-radius: 10px;
	background: #fff;
	color: var(--color-primary);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.tombola-zoombar button:hover,
.tombola-zoombar button:focus-visible {
	border-color: var(--color-primary);
}

.tombola-zoombar output {
	min-width: 3.5rem;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #2c3170;
}

.tombola-empty {
	max-width: 40rem;
}

@media (max-width: 760px) {
	.tombola-page {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

}

/* Admin: Liste ohne Bilder, Status-Etiketten, Dauer, Bildfeld */
.tb-list {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

/* Formular steht oben – deutlicher Abstand zur Liste der bestehenden Tombolas darunter */
.tb-form {
	margin-bottom: 3.5rem;
}

/* Überschrift "Erstellte Tombolas": Luft zur Liste darunter (wie zwischen Seitentitel und erster Karte) */
.tb-heading {
	margin-bottom: 1.25rem;
}

.tb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid #e2e5f1;
	border-radius: 12px;
	background: #fff;
}

.tb-row.is-current {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(15, 21, 157, 0.12);
}

.tb-row-text {
	flex: 1 1 16rem;
	min-width: 0;
	display: grid;
}

.tb-row-text small {
	color: #6a6f8c;
}

.tb-row a {
	font-weight: 600;
	font-size: 0.92rem;
}

.tb-status {
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.s-plan {
	background: #fff1cf;
	color: #6b4a00;
}

.s-live {
	background: #e3f1e6;
	color: #1f6b33;
}

.s-old {
	background: #eceef4;
	color: #5b6080;
}

.tb-drop {
	height: 22rem;
	min-height: 0;
}

.tb-drop-img {
	position: absolute;
	inset: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: contain;
}

.tb-drop.has-image {
	border-style: solid;
}

.tb-drop.has-image .ev-drop-text {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
}

.tb-drop.has-image .ev-drop-text b {
	color: #fff;
	font-size: 0.85rem;
}

.tb-drop.has-image .ev-drop-text small {
	display: none;
}

.tb-duration {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ev-form .form-field .tb-duration input[type='number'] {
	width: 6rem;
	height: 2.75rem;
	padding: 0 0.6rem;
	border: 1.5px solid #cfd4e8;
	border-radius: 10px;
	text-align: center;
	font: inherit;
	font-weight: 700;
}

.tb-calc {
	margin: 0;
	padding: 0.65rem 0.8rem;
	border-radius: 10px;
	background: #eef0fa;
	color: #2c3170;
	font-size: 0.92rem;
}

/* Tombola-Backend: Speichern unten in der Karte "Veröffentlichung" statt in einer mitlaufenden Leiste; Seitenleiste läuft nicht mit */
.tb-form .ev-side {
	position: static;
}

.tb-actions {
	display: grid;
	gap: 0.6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.tb-state {
	margin: 0;
	font-size: 0.9rem;
	color: #5b6080;
}

.tb-state:empty {
	display: none;
}

.tb-actions .btn {
	width: 100%;
	text-align: center;
}

.tb-actions .ev-cancel {
	justify-self: center;
	font-size: 0.92rem;
}

/* Ablagefläche innerhalb eines .form-field: dessen "label { display: block }" würde das Raster aufheben (Text klebte oben) */
.form-field label.ev-drop {
	display: grid;
	margin: 0;
	font-weight: 400;
}

/* Mein Konto: "Passwort ändern" und darunter "Speichern", gleich hoch, mit Abstand */
.account-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
}

.account-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.8rem;
	min-width: 11rem;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	line-height: 1;
}

/* Benutzer bearbeiten: Erklärung der Rollen untereinander, mit Abstand zum Auswahlfeld */
.role-help {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
	font-size: 0.85rem;
	color: #555b78;
}

.role-help strong {
	color: #2c3170;
}

/* Konto bearbeiten: Hinweis "Muss beim nächsten Login ein eigenes Passwort festlegen" über dem Knopf "Neues Passwort setzen" */
.password-note {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1rem 0 0.85rem;
	padding: 0.6rem 0.75rem;
	border-left: 4px solid var(--color-accent);
	border-radius: 10px;
	background: #fff6df;
	color: #5c4306;
	font-size: 0.92rem;
}

.password-note svg {
	flex-shrink: 0;
}

/* Dashboard: Tombola-Kachel – golden, solange eine Tombola online ist */
.dash-stat-tombola .dash-stat-word {
	font-size: 1.15rem;
	line-height: 1.3;
}

.dash-stat-tombola.is-live {
	border-color: var(--color-accent);
	background: linear-gradient(180deg, #fffaf0, #fff);
}

.dash-stat-tombola:not(.is-live) .dash-ico {
	background: #eceef4;
	color: #8a8fa8;
}

/* bei 2 Kacheln pro Reihe stünde die Tombola allein – dann über die ganze Breite */
@media (max-width: 900px) {
	.dash-stat-tombola {
		grid-column: 1 / -1;
	}
}

/* Tombola-Liste: Löschen-Knopf in der Zeile */
.tb-delete-form {
	margin: 0;
}

/* Event-Formular: "Abbrechen" rot umrandet (weißer Grund) – "Endgültig löschen" ist rot gefüllt und steht in eigener Karte */
.ev-btn-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #e7b3ae;
	background: #fff;
	color: #b3261e;
	text-decoration: none;
}

.ev-btn-cancel:hover,
.ev-btn-cancel:focus-visible {
	border-color: #b3261e;
	background: #fdf3f2;
	color: #b3261e;
}

/* Rückfrage vor dem Löschen (assets/confirm-dialog.js): "Abbrechen" und roter "Löschen"-Knopf, Desktop und Handy */
.confirm-dialog {
	width: min(26rem, calc(100vw - 2rem));
	padding: 1.4rem 1.4rem 1.2rem;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(10, 14, 60, 0.3);
	color: var(--color-text);
}

.confirm-dialog::backdrop {
	background: rgba(10, 12, 30, 0.55);
}

.confirm-dialog-text {
	margin: 0 0 1.2rem;
	font-size: 1.05rem;
	line-height: 1.45;
}

.confirm-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
}

.confirm-dialog-actions .btn {
	min-width: 7.5rem;
	justify-content: center;
	text-align: center;
}

.confirm-dialog-actions .btn-outline {
	color: var(--color-primary);
}

@media (max-width: 480px) {
	.confirm-dialog-actions .btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Dashboard am Handy: Zahl (bzw. Tombola-Status) neben dem Symbol, Text darunter; Listen höchstens 3 Einträge */
@media (max-width: 640px) {
	.dash-stat {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			'ico num'
			'sub sub';
		align-items: center;
		gap: 0.55rem 0.7rem;
	}

	.dash-stat > span:not(.dash-ico) {
		display: contents;
	}

	.dash-stat .dash-ico {
		grid-area: ico;
	}

	.dash-stat strong {
		grid-area: num;
	}

	.dash-stat .dash-sub {
		grid-area: sub;
	}

	.dash-panel .dash-more {
		display: none;
	}
}

/* Dashboard: "Webseite ansehen" oben rechts neben dem Titel (Desktop und Handy).
   Schwebender "+"-Knopf mit Auswahl nur am Handy (bis 640 px), dort ersetzt er die Knopfreihe (.dash-actions). */
.dash-hello {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.dash-web-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.dash-web-link svg {
	width: 1rem;
	height: 1rem;
}

.dash-fab,
.dash-sheet {
	display: none;
}

@media (max-width: 640px) {
	.dash-web-link {
		font-size: 0.92rem;
	}

	.dash-web-more {
		display: none;
	}

	.dash-actions {
		display: none;
	}

	/* Platz unten, damit der "+"-Knopf nichts verdeckt */
	.admin-body main.wrap {
		padding-bottom: 6rem;
	}

	.dash-fab {
		position: fixed;
		right: calc(1rem + env(safe-area-inset-right, 0px));
		bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		display: grid;
		place-items: center;
		width: 3.75rem;
		height: 3.75rem;
		border: 0;
		border-radius: 50%;
		background: var(--color-primary);
		color: #fff;
		box-shadow: 0 10px 24px rgba(15, 21, 157, 0.4);
		cursor: pointer;
		transition: transform 0.2s;
	}

	.dash-fab svg {
		width: 1.7rem;
		height: 1.7rem;
	}

	.dash-fab.is-open {
		transform: rotate(45deg);
	}

	.dash-sheet:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(10, 12, 30, 0.45);
	}

	.dash-sheet-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: grid;
		gap: 0.5rem;
		padding: 1.2rem 1rem calc(6.2rem + env(safe-area-inset-bottom, 0px));
		border-radius: 22px 22px 0 0;
		background: #fff;
		animation: dash-sheet-in 0.2s ease-out;
	}

	.dash-sheet-title {
		margin: 0 0 0.25rem;
		font-size: 1rem;
		font-weight: 700;
		color: #6a6f8c;
	}

	.dash-sheet-item {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.75rem;
		border-radius: 12px;
		background: #f4f5fa;
		color: #14183f;
		font-weight: 700;
		text-decoration: none;
	}

	.dash-sheet-item:active,
	.dash-sheet-item:focus-visible {
		background: #e7e9fb;
	}

	.dash-sheet-item .dash-ico {
		width: 2.4rem;
		height: 2.4rem;
	}

	html.dash-sheet-open {
		overflow: hidden;
	}
}

@keyframes dash-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dash-sheet-panel {
		animation: none;
	}

	.dash-fab {
		transition: none;
	}
}

/* ===== Aktions-Knöpfe in Listen (Variante B): Evente, Tombola, Dashboard =====
   Desktop: Symbol + Text; Handy (bis 640 px): nur Symbol als quadratischer Knopf, "Veröffentlichen" behält den Text. */
.act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: 1.5px solid #b9bfdc;
	border-radius: 8px;
	background: #fff;
	color: var(--color-primary);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.act:hover,
.act:focus-visible {
	border-color: var(--color-primary);
	background: #f4f5fc;
}

.act-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.act-danger {
	border-color: #e7b3ae;
	color: #b3261e;
}

.act-danger:hover,
.act-danger:focus-visible {
	border-color: #b3261e;
	background: #fdf3f2;
}

.act-publish {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: #1b1400;
}

.act-publish:hover,
.act-publish:focus-visible {
	border-color: #c8901b;
	background: #c8901b;
}

.act-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.actions-row form,
.act-row form {
	margin: 0;
}

@media (max-width: 640px) {
	.act:not(.act-publish) {
		width: 2.5rem;
		min-height: 2.5rem;
		padding: 0;
	}

	.act:not(.act-publish) .act-label {
		display: none;
	}

	.act-publish {
		min-height: 2.5rem;
	}

	.act-icon {
		width: 1.15rem;
		height: 1.15rem;
	}

	/* Knöpfe bleiben in einer Zeile neben dem Text */
	.calendar-row .actions-row,
	.act-row {
		flex-wrap: nowrap;
		gap: 0.4rem;
	}
}

/* ===== Event-Formular: Knöpfe in der rechten Spalte (Variante 3) ===== */
.ev-side-actions {
	display: grid;
	gap: 0.6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.ev-side-actions .ev-state {
	margin: 0;
	font-size: 0.88rem;
	color: #5b6080;
}

.ev-side-actions .ev-state:empty {
	display: none;
}

.ev-side-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	min-height: 2.8rem;
	text-align: center;
	text-decoration: none;
}

.ev-side-btn .act-icon,
.ev-side-btn .icon-external {
	width: 1.05rem;
	height: 1.05rem;
}

.ev-side-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.5rem;
}

/* zwei Knöpfe nebeneinander dürfen die Karte nicht verbreitern */
.ev-side-pair .ev-side-btn {
	min-width: 0;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.ev-card {
	grid-template-columns: minmax(0, 1fr);
}

.ev-side-pair.is-single {
	grid-template-columns: 1fr;
}

.ev-danger-card {
	border-color: #f0c9c5;
	background: #fffafa;
}

.ev-danger-card .ev-card-title {
	color: #9b1c1c;
}

.ev-danger-note {
	margin: 0;
	font-size: 0.85rem;
	color: #6a6f8c;
}

/* Kalender: Termin bearbeiten (eigene Seite) – Knöpfe nebeneinander wie beim Event, Lösch-Karte darunter */
.cal-edit-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 12rem));
	gap: 0.6rem;
	max-width: none;
}

.cal-danger-card {
	max-width: 26rem;
	margin-top: 2rem;
}

.cal-danger-card form {
	margin: 0;
}

@media (max-width: 640px) {
	.cal-edit-actions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cal-danger-card {
		max-width: none;
	}
}

/* Kalender-Liste am Handy: nur zwei Symbol-Knöpfe (Bearbeiten, Löschen) – die passen rechts neben den Text, Zeile bleibt einzeilig.
   (Evente-Liste hat drei Knöpfe plus evtl. "Veröffentlichen" – dort bleiben die Knöpfe in der zweiten Zeile.) */
@media (max-width: 640px) {
	.cal-list .calendar-row {
		flex-wrap: nowrap;
	}

	.cal-list .calendar-row .actions-row {
		width: auto;
		flex-wrap: nowrap;
		margin-left: auto;
	}

	.cal-list .calendar-text {
		min-width: 0;
	}
}


/* Comité-Tabelle (about/comite): am Handy pro Person ein Block (Funktion, Name, E-Mail untereinander),
   sonst wäre die Tabelle wegen der E-Mail-Adressen breiter als der Bildschirm */
.comite-table {
	max-width: 60ch;
}

@media (max-width: 640px) {
	.comite-table,
	.comite-table tbody,
	.comite-table tr,
	.comite-table td {
		display: block;
		width: 100%;
	}

	.comite-table tr {
		padding: 0.7rem 1rem;
		border-bottom: 1px solid var(--color-border);
	}

	.comite-table tr:last-child {
		border-bottom: 0;
	}

	.comite-table td {
		padding: 0;
		border: 0;
	}

	.comite-table td:first-child {
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #666;
	}

	.comite-table td:nth-child(2) {
		font-weight: 600;
	}

	.comite-table a {
		overflow-wrap: anywhere;
	}
}