@charset "UTF-8";
/**
 * Vereinskomponenten: Kalender, Terminlisten, Gartenbörse, Dokumente,
 * Formular, Karte, Galerie.
 *
 * Gehört zum Plugin, nicht zum Theme — die Komponenten sollen einen
 * Theme-Wechsel überstehen. Farben kommen aus Custom Properties, die das
 * Theme überschreiben kann; die Fallback-Werte stammen aus dem Vereinswappen.
 */

/* Die Variablen hängen an body, nicht an :root.
 *
 * Diese Datei wird auch im Backend geladen, und der WordPress-Admin ist
 * IMMER hell — er hat kein Dunkeldesign. Standen die dunklen Werte auf
 * :root, galten sie auch dort: helle Schrift auf weißer Fläche, der
 * Adminkalender praktisch unlesbar. Mit body als Träger lässt sich der
 * Dunkelblock unten sauber auf body:not(.wp-admin) einschränken. */
body {
	--kgv-red: #c9403c;
	--kgv-green: #2e7d32;
	--kgv-blue: #1565c0;
	--kgv-olive: #8f8e52;
	--kgv-text: #1f2421;
	--kgv-muted: #5d6660;
	--kgv-line: #e3e0d8;
	--kgv-area: #fff;
	--kgv-base: #fbfaf7;
	--kgv-weekend: #f2f0e8;
	--kgv-radius: 10px;

	/* Dichte des Kalenders. Im Backend enger gestellt (siehe unten):
	   dort wird geplant, nicht gelesen — da zählt die Übersicht über
	   den Monat mehr als große Zellen. */
	--kgv-cell-height: 5.2rem;
	--kgv-density-y: 0.55rem;
}

/* ==================================================================
   Buttons und Hinweise
   ================================================================== */

.kgv-btn {
	display: inline-block;
	padding: 0.7em 1.3em;
	border: 2px solid transparent;
	border-radius: var(--kgv-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.kgv-btn--primary { background: var(--kgv-green); border-color: var(--kgv-green); color: #fff; }
.kgv-btn--primary:hover { background: #256428; border-color: #256428; color: #fff; }
.kgv-btn--secondary { background: var(--kgv-area); border-color: var(--kgv-line); color: var(--kgv-text); }
.kgv-btn--secondary:hover { border-color: var(--kgv-muted); }
.kgv-btn.is-active { outline: 3px solid rgba(46, 125, 50, 0.35); outline-offset: 2px; }
.kgv-btn[disabled] { opacity: 0.55; cursor: progress; }
.kgv-btn:focus-visible { outline: 3px solid var(--kgv-blue); outline-offset: 2px; }

.kgv-empty {
	padding: 1rem 1.2rem;
	background: var(--kgv-base);
	border-left: 4px solid var(--kgv-olive);
	border-radius: 0 var(--kgv-radius) var(--kgv-radius) 0;
	color: var(--kgv-muted);
}
.kgv-notice { color: var(--kgv-muted); font-size: 0.9em; }

.kgv-badge {
	display: inline-block;
	padding: 0.1em 0.55em;
	background: var(--kgv-olive);
	border-radius: 999px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
}

/* ==================================================================
   Kalender
   ================================================================== */

.kgv-calendar {
	margin: 0;
	padding: clamp(0.9rem, 2vw, 1.5rem);
	background: var(--kgv-area);
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
}
.kgv-calendar__subscription {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--kgv-line);
	font-size: 0.95rem;
}

.fc { --fc-border-color: var(--kgv-line); --fc-today-bg-color: #fdf6e8; }
.fc .fc-toolbar { margin-bottom: 1rem !important; }
.fc .fc-toolbar-title { font-size: 1.35rem; font-weight: 700; }

/* Tageszahlen und Wochentage sind bei FullCalendar Links. Ohne diese Regel
   erben sie die rote Linkfarbe des Themes – ein Kalender, in dem jedes
   Datum rot ist, sieht aus wie lauter Feiertage. */
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
	color: var(--kgv-text);
	text-decoration: none;
}
.fc .fc-col-header-cell {
	background: var(--kgv-base);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.fc .fc-col-header-cell-cushion { padding: 0.5rem 0; font-weight: 700; }
/* Gedämpft, aber lesbar. Vorher #b4bab1 — 1,98:1 auf Weiß und damit für
   ältere Augen praktisch unsichtbar; die Mitgliedschaft dieses Vereins ist
   nicht jung. Jetzt 4,7:1. */
.fc .fc-day-other .fc-daygrid-day-number { color: #6f766c; }
.fc .fc-day-today .fc-daygrid-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7rem;
	height: 1.7rem;
	margin: 0.15rem;
	background: var(--kgv-green);
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
}
.fc .fc-daygrid-day-frame { min-height: var(--kgv-cell-height); }

/* Wochenenden hinterlegt: die Gemeinschaftsarbeit ist samstags, und beim
   Planen sucht das Auge zuerst die Samstagsspalte.

   Deckende Farbe, nicht halbdurchsichtig: über einer durchscheinenden Fläche
   lässt sich der Textkontrast nicht mehr eindeutig bestimmen — weder vom
   Prüfskript noch von einem Werkzeug für Barrierefreiheit. */
.fc .fc-day-sat, .fc .fc-day-sun { background: var(--kgv-weekend); }
.fc .fc-day-today.fc-day-sat, .fc .fc-day-today.fc-day-sun { background: var(--fc-today-bg-color); }

/* Ohne diese Regel ist der Kalender mit der Tastatur praktisch unbedienbar:
   man tabbt durch die Termine, ohne zu sehen, wo man steht. */
.fc .fc-event:focus-visible { outline: 3px solid var(--kgv-blue); outline-offset: 1px; }

/* Termintitel dürfen nicht aus der Tageszelle in die Nachbarspalte laufen.
   Gekürzt wird ausschließlich der Titel: die Uhrzeit ist die wichtigere
   Information und darf nicht schrumpfen – sonst steht in der Zelle „0…“
   statt „09:00“. */
.fc-daygrid-event-harness { max-width: 100%; }
.fc .fc-daygrid-event {
	padding: 0.15rem 0.35rem;
	border-radius: 5px;
	overflow: hidden;
	font-size: 0.85rem;
}
.fc .fc-event-time { flex: 0 0 auto; overflow: visible; white-space: nowrap; font-weight: 600; }
.fc .fc-event-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fc-event { cursor: pointer; }
.kgv-event--accepted { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--kgv-green); }

.fc .fc-button {
	background: var(--kgv-area);
	border-color: var(--kgv-line);
	color: var(--kgv-text);
	font-weight: 600;
	text-transform: none;
	padding: 0.4em 0.85em;
}
/* color MUSS hier mit stehen. FullCalendar bringt in seinem Bündel
 * ".fc-button-primary:hover { color: var(--fc-button-text-color) }" mit, und
 * dieser Wert ist weiß - passend zu FullCalendars eigenem dunklen
 * Knopfdesign, nicht zu unserem hellen. Überschreibt man nur den
 * Hintergrund, erbt der Knopf beim Überfahren die weiße Schrift und die
 * Beschriftung verschwindet auf hellem Grund.
 *
 * Die Regel bleibt schwächer als die für den aktiven Knopf darunter
 * (0,3,0 gegen 0,5,0): "Monat" behält beim Überfahren seine weiße Schrift
 * auf Grün. */
.fc .fc-button:hover {
	background: var(--kgv-base);
	border-color: var(--kgv-muted);
	color: var(--kgv-text);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	background: var(--kgv-green);
	border-color: var(--kgv-green);
	color: #fff;
}
.fc .fc-button:focus-visible { outline: 3px solid var(--kgv-blue); outline-offset: 2px; box-shadow: none; }

/* Agenda-/Listenansicht */
.fc .fc-list { border-radius: var(--kgv-radius); overflow: hidden; }
.fc .fc-list-day-cushion { background: var(--kgv-base); }
.fc .fc-list-event:hover td { background: #f2f6f0; }
.fc .fc-list-event-title a { color: var(--kgv-text); font-weight: 600; text-decoration: none; }

@media (max-width: 600px) {
	.fc .fc-toolbar { flex-direction: column; gap: 0.6rem; }
	.fc .fc-toolbar-title { font-size: 1.15rem; }
	.fc { --kgv-cell-height: 3.6rem; }
}

/* Jahresplanung auf Papier: der Vorstand druckt den Kalender für die
   Sitzung aus. Ohne diese Regeln kommen Schaltflächen und Adminleiste mit
   aufs Blatt und die Termine in Graustufen. */
@media print {
	.fc .fc-toolbar, .kgv-dialog, .kgv-contextmenu { display: none !important; }
	.fc { --kgv-cell-height: 3.2rem; }
	.fc .fc-daygrid-event { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.fc .fc-event { break-inside: avoid; }
}

/* ==================================================================
   Termin-Dialog
   ================================================================== */

.kgv-dialog {
	position: fixed;
	inset: 0;
	/* Über der Adminleiste (#wpadminbar liegt bei 99999). Mit dem alten Wert
	   9999 wäre der Dialog im Backend oben abgeschnitten — genau dort, wo
	   sein Titel und der Schließen-Knopf sitzen. */
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(20, 24, 21, 0.6);
}
.kgv-dialog__box {
	position: relative;
	width: min(32rem, 100%);
	max-height: 85vh;
	overflow-y: auto;
	background: var(--kgv-area);
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}
/* Farbiger Kopf: Titel und Datum heben sich vom Fließtext ab, der Rest
   des Dialogs bleibt ruhig. */
.kgv-dialog__head {
	padding: 1.3rem 3rem 1.1rem 1.6rem;
	background: linear-gradient(135deg, #2f3a2b 0%, #46523d 100%);
	border-radius: 14px 14px 0 0;
	color: #fff;
}
.kgv-dialog__title { margin: 0 0 0.2rem; font-size: 1.3rem; color: #fff; }
.kgv-dialog__date { margin: 0; color: #d5ddd0; font-weight: 600; }
.kgv-dialog__body { padding: 1.3rem 1.6rem 1.6rem; }
.kgv-dialog__data { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 0.6rem; }
.kgv-dialog__data dt { color: var(--kgv-muted); }
.kgv-dialog__data dd { margin: 0; font-weight: 600; }
.kgv-dialog__line { margin: 0.35rem 0; }
.kgv-dialog__line--warn { color: var(--kgv-red); font-weight: 600; }
.kgv-dialog__message { margin: 0.9rem 0 0; font-weight: 600; color: var(--kgv-green); min-height: 1.4em; }
.kgv-dialog__message.is-error { color: var(--kgv-red); }
.kgv-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
/* Eigene Zeile: sonst klebt der Link direkt am Anmelde-Button. */
.kgv-dialog__more { display: block; margin-top: 1.1rem; }
.kgv-dialog__close {
	position: absolute;
	top: 0.7rem;
	right: 0.8rem;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.15);
	border: 0;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}
.kgv-dialog__close:hover { background: rgba(255, 255, 255, 0.3); }

/* ==================================================================
   Terminliste
   ================================================================== */

.kgv-event_list { margin: 1rem 0; padding: 0; list-style: none; }
.kgv-event_list__entry {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--kgv-line);
}
.kgv-event_list__entry:last-child { border-bottom: 0; }
/* Der Datumsblock trägt die Farbe der Terminart. Sie kommt über zwei
   Variablen, die der Shortcode am <li> setzt und die auf die im Backend
   gepflegten Werte zeigen (--kgv-type-<slug>). Der Rückfallwert Grün gilt
   für Termine ohne Art und für alte Seiten, die den Shortcode noch ohne
   diese Angabe ausgeben. */
.kgv-event_list__date {
	flex: 0 0 3.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.35rem 0;
	background: var(--kgv-event-color, var(--kgv-green));
	border-radius: var(--kgv-radius);
	color: var(--kgv-event-font, #fff);
	line-height: 1.1;
}
.kgv-event_list__day { font-size: 1.35rem; font-weight: 700; }
.kgv-event_list__month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kgv-event_list__content { display: flex; flex-direction: column; gap: 0.15rem; }
.kgv-event_list__title { font-weight: 700; text-decoration: none; }
.kgv-event_list__title:hover { text-decoration: underline; }
.kgv-event_list__meta { color: var(--kgv-muted); font-size: 0.92rem; }

/* ==================================================================
   Kostenaufstellung

   Bis Juli 2026 standen die Beträge im Fließtext: "Der Gesellschaftsanteil
   beträgt 800 €; Sie bekommen ihn zurück, sobald der Garten neu verpachtet
   wird." Wer wissen will, was auf ihn zukommt, musste den Satz lesen statt
   die Zahl zu sehen.

   Keine <table>: auf einem schmalen Bildschirm wird aus drei Spalten
   entweder ein Quetschsatz oder eine Rutschleiste. Hier steht der Betrag
   neben der Bezeichnung, solange Platz ist, und darunter, wenn nicht.
   ================================================================== */

.kgv-costs {
	margin: 1.2rem 0;
	padding: 0;
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	overflow: hidden;
}
.kgv-costs__items {
	display: grid;
	/* Zwei Spalten: Bezeichnung wächst, Betrag nimmt, was er braucht.
	   Die Erläuterung sitzt in der ersten Spalte unter der Bezeichnung. */
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1.2rem;
	align-items: baseline;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--kgv-line);
}
.kgv-costs__items:last-child { border-bottom: 0; }
.kgv-costs__items:nth-child(odd) { background: var(--kgv-base); }

.kgv-costs__what { margin: 0; font-weight: 700; }
.kgv-costs__amount {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	/* Serifen und Ziffern gleicher Breite: untereinanderstehende Beträge
	   fluchten dadurch an der Stelle, an der man sie vergleicht. */
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--kgv-green);
}
.kgv-costs__notice {
	grid-column: 1;
	margin: 0;
	color: var(--kgv-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Unter 30rem steht der Betrag über der Bezeichnung statt daneben - er ist
   die Angabe, wegen der jemand die Seite aufruft. */
@media (max-width: 30rem) {
	.kgv-costs__items { grid-template-columns: 1fr; }
	.kgv-costs__amount { grid-column: 1; grid-row: auto; order: -1; }
}

.kgv-costs__block { margin: 1.2rem 0; }
.kgv-costs__block .kgv-costs { margin-top: 0.4rem; }
.kgv-costs__title { margin: 0; font-weight: 700; }

/* ==================================================================
   Legende der Terminarten

   Steht unter dem Kalender und nennt jede Farbe beim Namen. Ohne sie ist
   die Einfärbung eine Behauptung: bunt, aber unerklärt.
   ================================================================== */

.kgv-legend {
	display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
	margin: 0.9rem 0 0; padding: 0;
	list-style: none;
	font-size: 0.92rem;
}
.kgv-legend__entry { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
/* Im Kalender wird der Eintrag zum Schalter (kgv-calendar.js). */
.kgv-legend__toggle {
	display: inline-flex; align-items: center; gap: 0.45rem;
	margin: 0; padding: 0.15rem 0.35rem; border: 0; border-radius: 4px;
	background: none; color: inherit; font: inherit; cursor: pointer;
}
.kgv-legend__toggle:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.kgv-legend__toggle:focus-visible { outline: 2px solid var(--kgv-event-color, currentColor); outline-offset: 2px; }
.kgv-legend__entry.is-hidden { opacity: 0.5; }
.kgv-legend__entry.is-hidden .kgv-legend__toggle { text-decoration: line-through; }
.kgv-point {
	width: 0.85rem; height: 0.85rem; flex: none;
	background: var(--kgv-event-color, var(--kgv-muted));
	border-radius: 50%;
	/* Ein heller Farbton verschwindet sonst auf weißer Fläche. Der Rand
	   nimmt die Textfarbe mit 25 % - er ist im Hellen dunkel und im
	   Dunklen hell, ohne dass es zwei Regeln braucht. */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kgv-text) 25%, transparent);
}

/* ==================================================================
   Gartenbörse
   ================================================================== */

.kgv-plots {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	margin: 1.5rem 0;
}
.kgv-plot {
	display: flex;
	flex-direction: column;
	background: var(--kgv-area);
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	overflow: hidden;
}
.kgv-plot__image img { display: block; width: 100%; height: 11rem; object-fit: cover; border-radius: 0; }
.kgv-plot__text { padding: 1rem 1.1rem 1.2rem; }
.kgv-plot__title { margin: 0 0 0.6rem; font-size: 1.15rem; }
.kgv-plot__data { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0 0 0.7rem; font-size: 0.95rem; }
.kgv-plot__data dt { color: var(--kgv-muted); }
.kgv-plot__data dd { margin: 0; font-weight: 600; }

/* ==================================================================
   Symbole für Dateien und Links
   ================================================================== */

.kgv-icon {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
	color: var(--kgv-olive);
}

/* Regelfall: Link mitten im Satz. Das Symbol läuft inline mit, damit der Satz
   ganz normal umbrechen kann — inline-flex würde den Link zu einem
   unteilbaren Kasten machen und lange Linktexte aus der Zeile schieben. */
.kgv-iconlink { text-decoration-thickness: 1px; }
.kgv-iconlink .kgv-icon {
	width: 1em;
	height: 1em;
	margin-right: 0.3em;
	vertical-align: -0.12em;
}
.kgv-iconlink:hover .kgv-icon { color: var(--kgv-red); }

/* Hält Symbol und erstes Wort in derselben Zeile. */
.kgv-nobr { white-space: nowrap; }

/* ==================================================================
   Übersicht (Sitemap)
   ================================================================== */

/* Ohne Aufzählungspunkte: der Pfeil vor jedem Link ist bereits die
   Auszeichnung, ein zweiter Marker davor wäre doppelt gemoppelt. */
.kgv-sitemap__list { margin: 0.4rem 0 1.2rem; padding-left: 0; list-style: none; }
.kgv-sitemap__list li { margin: 0.25rem 0; }
.kgv-sitemap__list .kgv-sitemap__list { margin: 0.25rem 0 0.6rem 1.5rem; }
.kgv-sitemap__date { color: var(--kgv-muted); font-size: 0.9rem; }
.kgv-sitemap h2 { margin-top: 1.8rem; }

/* Eigenständiger Link außerhalb eines Satzes: inline-flex hält Symbol und
   mehrzeiligen Text bündig untereinander. */
.kgv-iconlink--block {
	display: inline-flex;
	gap: 0.5rem;
	align-items: flex-start;
}
.kgv-iconlink--block .kgv-icon {
	width: 1.25em;
	height: 1.25em;
	margin: 0.15em 0 0;
}

/* Größere Fassung als eigene Kachel, etwa für die PDFs auf /dokumente/. */
.kgv-iconlink--map {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	max-width: 34rem;
	margin: 0 0 0.7rem;
	padding: 0.9rem 1.1rem;
	background: var(--kgv-area);
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	text-decoration: none;
	color: var(--kgv-text);
}
.kgv-iconlink--map:hover { border-color: var(--kgv-olive); background: var(--kgv-base); }
.kgv-iconlink--map .kgv-icon { width: 2rem; height: 2rem; margin: 0; }
.kgv-iconlink--map span { display: flex; flex-direction: column; }
.kgv-iconlink--map strong { font-weight: 700; }
.kgv-iconlink--map small { color: var(--kgv-muted); font-size: 0.85rem; }

/* ==================================================================
   Dokumente
   ================================================================== */

.kgv-documents { margin: 1rem 0; padding: 0; list-style: none; }
.kgv-documents__entry {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.8rem;
	align-items: baseline;
	margin: 0;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--kgv-line);
}
.kgv-documents__link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-weight: 600;
}
.kgv-documents__meta { color: var(--kgv-muted); font-size: 0.9rem; }

/* ==================================================================
   E-Mail-Schutz
   ================================================================== */

.kgv-mail noscript { color: inherit; }

/* ==================================================================
   Formular
   ================================================================== */

/* Name und E-Mail nebeneinander, der Rest über die volle Breite. Vorher
   stand alles untereinander in einer 34rem-Spalte — auf einem Monitor sah
   das aus wie ein vergessenes Fragment. */
.kgv-form {
	display: grid;
	gap: 1rem 1.2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 1.2rem 0;
}
.kgv-form > .kgv-field--full,
.kgv-form > p,
.kgv-form > div:not(.kgv-field),
.kgv-form > .kgv-message { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.kgv-form { grid-template-columns: 1fr; }
}

.kgv-field { display: flex; flex-direction: column; gap: 0.3rem; }
.kgv-field label { font-weight: 600; }
.kgv-field input,
.kgv-field textarea {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	background: var(--kgv-area);
	font: inherit;
	color: var(--kgv-text);
}
.kgv-field select {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	background: var(--kgv-area);
	font: inherit;
	color: var(--kgv-text);
}
.kgv-field input:focus-visible,
.kgv-field select:focus-visible,
.kgv-field textarea:focus-visible { outline: 3px solid var(--kgv-blue); outline-offset: 1px; border-color: var(--kgv-blue); }
.kgv-field--error select { border-color: var(--kgv-red); background: #fff8f8; }
/* [hidden] wird von display:flex überstimmt - ausdrücklich zurücksetzen. */
.kgv-field[hidden] { display: none; }
.kgv-field textarea { min-height: 10rem; resize: vertical; }
.kgv-field--required > label::after { content: " *"; color: var(--kgv-red); }

/* Zustimmungsfeld: Kästchen neben den Text, nicht darüber. In einer
   Spalten-Flexbox landet die Checkbox sonst mittig über der Beschriftung. */
.kgv-field--consent > label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
}
.kgv-field--consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.28rem;
	accent-color: var(--kgv-green);
}
.kgv-field--consent > label::after { content: none; }

/* Fehlerhafte Felder */
.kgv-field--error input,
.kgv-field--error textarea { border-color: var(--kgv-red); background: #fff8f8; }
.kgv-field__error {
	display: block;
	color: var(--kgv-red);
	font-size: 0.88rem;
	font-weight: 600;
}
.kgv-field__error:empty { display: none; }
.kgv-field__notice {
	color: var(--kgv-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}
.kgv-field__notice[hidden] { display: none; }
.kgv-field[hidden] { display: none; }
.kgv-field__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.kgv-field__choices { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.kgv-field__choices label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.kgv-field__consent-text { margin: 0 0 .6rem; padding: .7rem .9rem; border-left: 3px solid var(--kgv-green, #2e7d32); background: var(--kgv-surface-muted, rgba(0,0,0,.03)); font-size: .95em; }
.kgv-field__counter {
	align-self: flex-end;
	color: var(--kgv-muted);
	font-size: 0.82rem;
}
.kgv-field__counter.is-low { color: var(--kgv-red); font-weight: 600; }
/* Honeypot: für Menschen unsichtbar, für Bots verlockend. */
.kgv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kgv-form__notice { color: var(--kgv-muted); font-size: 0.9rem; }
.kgv-message { padding: 0.9rem 1.1rem; border-radius: var(--kgv-radius); font-weight: 600; }
.kgv-message--ok { background: #e8f5e9; border-left: 4px solid var(--kgv-green); color: #1b5e20; }
.kgv-message--error { background: #fdeceb; border-left: 4px solid var(--kgv-red); color: #8e2723; }

/* ==================================================================
   Karte
   ================================================================== */

.kgv-map { margin: 1.5rem 0; }

/* Zwei-Klick-Lösung mit echter Vorschau: das Hintergrundbild ist ein
   serverseitig erzeugtes Standbild aus OSM-Kacheln und liegt lokal.
   Erst der Klick lädt die interaktive Karte von OpenStreetMap nach. */
.kgv-map__placeholder {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 20rem;
	padding: 1.2rem;
	background: var(--kgv-base);
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	overflow: hidden;
}
.kgv-map__placeholder--image {
	background-size: cover;
	background-position: center;
	border-color: transparent;
}
.kgv-map__placeholder--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 20, 14, 0.88) 0%, rgba(15, 20, 14, 0.3) 55%, rgba(15, 20, 14, 0) 80%);
}
.kgv-map__content { position: relative; z-index: 1; max-width: 30rem; }
.kgv-map__placeholder--image .kgv-map__content { color: #fff; }
.kgv-map__address { margin: 0 0 0.9rem; line-height: 1.45; }
.kgv-map__placeholder--image .kgv-map__address { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.kgv-map__notice { margin: 0.8rem 0 0.4rem; font-size: 0.85rem; line-height: 1.45; }
.kgv-map__placeholder--image .kgv-map__notice { color: #d8ded4; }
.kgv-map__external { font-size: 0.9rem; }
.kgv-map__placeholder--image .kgv-map__external { color: #fff; }
/* Die geladene Karte. OpenLayers zeichnet in ein <canvas> und braucht dafür
   eine Fläche mit fester Höhe – ohne sie bliebe die Karte 0 Pixel hoch. */
.kgv-map__area {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	overflow: hidden;
}
@media (max-width: 600px) {
	.kgv-map__area { aspect-ratio: 4 / 3; }
}
/* Bedienelemente in den Vereinsfarben statt im OpenLayers-Blau. */
.kgv-map__area .ol-control button {
	background-color: rgba(90, 106, 58, 0.85);
	font-family: inherit;
}
.kgv-map__area .ol-control button:hover,
.kgv-map__area .ol-control button:focus { background-color: var(--kgv-olive); }
.kgv-map__area .ol-attribution { font-size: 0.75rem; }

/* ==================================================================
   Galerie und Lightbox
   ================================================================== */

.kgv-gallery {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(var(--kgv-gallery-columns, 3), 1fr);
	margin: 1.5rem 0;
}
@media (max-width: 700px) {
	.kgv-gallery { grid-template-columns: repeat(2, 1fr); }
}
.kgv-gallery__image {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--kgv-radius);
	line-height: 0;
}
.kgv-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.35s ease;
}
.kgv-gallery__image:hover img,
.kgv-gallery__image:focus-visible img { transform: scale(1.05); }
.kgv-gallery__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 21, 0);
	transition: background 0.25s ease;
}
.kgv-gallery__image:hover::after { background: rgba(20, 24, 21, 0.18); }

.kgv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem 4rem;
	background: rgba(10, 13, 10, 0.93);
}
.kgv-lightbox.is-open { display: flex; }
.kgv-lightbox__stage { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.kgv-lightbox__stage img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: var(--kgv-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.kgv-lightbox figcaption { margin-top: 0.8rem; color: #e8e6e0; font-size: 0.95rem; }
.kgv-lightbox__counter {
	position: absolute;
	bottom: 1rem;
	inset-inline: 0;
	margin: 0;
	text-align: center;
	color: #b9c0b6;
	font-size: 0.85rem;
}
.kgv-lightbox__close,
.kgv-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}
.kgv-lightbox__close { top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; font-size: 1.8rem; }
.kgv-lightbox__nav { top: 50%; transform: translateY(-50%); width: 3.2rem; height: 3.2rem; font-size: 2.2rem; }
.kgv-lightbox__nav--prev { left: 1rem; }
.kgv-lightbox__nav--next { right: 1rem; }
.kgv-lightbox__close:hover,
.kgv-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.kgv-lightbox__close:focus-visible,
.kgv-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
	.kgv-lightbox__nav { width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
	.kgv-lightbox__nav--prev { left: 0.3rem; }
	.kgv-lightbox__nav--next { right: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==================================================================
   Dunkelmodus
   ================================================================== */

/* Ausdrücklich NICHT im Backend: der WordPress-Admin bleibt hell, auch wenn
   das Betriebssystem auf Dunkel steht. Ohne die Einschränkung stünden im
   Adminkalender helle Tageszahlen auf weißem Grund.
 *
 * Zwei Wege führen in den Dunkelmodus - die Systemeinstellung und der
 * Umschalter in der Kopfzeile, der data-colorscheme an <html> setzt. Der
 * Block steht deshalb zweimal da; die Begründung im Langen steht in
 * style.css des Themes. WER HIER ETWAS ÄNDERT, ÄNDERT ES AN BEIDEN
 * STELLEN. */
@media (prefers-color-scheme: dark) {
	html:not([data-colorscheme="light"]) body:not(.wp-admin) {
		--kgv-text: #e8e6e0;
		--kgv-muted: #a6ada4;
		--kgv-line: #3a4038;
		--kgv-area: #22261f;
		--kgv-base: #191c17;
		--kgv-weekend: #1d211a;
	}
	html:not([data-colorscheme="light"]) body:not(.wp-admin) .fc { --fc-today-bg-color: #2b3126; --fc-page-bg-color: transparent; }
	html:not([data-colorscheme="light"]) body:not(.wp-admin) .fc .fc-list-event:hover td { background: #2b3126; }
	html:not([data-colorscheme="light"]) body:not(.wp-admin) .fc .fc-day-other .fc-daygrid-day-number { color: #8d9488; }
	html:not([data-colorscheme="light"]) body:not(.wp-admin) .kgv-message--ok { background: #1d3a20; color: #cfe8d1; }
	html:not([data-colorscheme="light"]) body:not(.wp-admin) .kgv-message--error { background: #40211f; color: #f3c9c7; }
}

html[data-colorscheme="dark"] body:not(.wp-admin) {
	--kgv-text: #e8e6e0;
	--kgv-muted: #a6ada4;
	--kgv-line: #3a4038;
	--kgv-area: #22261f;
	--kgv-base: #191c17;
	--kgv-weekend: #1d211a;
}
html[data-colorscheme="dark"] body:not(.wp-admin) .fc { --fc-today-bg-color: #2b3126; --fc-page-bg-color: transparent; }
html[data-colorscheme="dark"] body:not(.wp-admin) .fc .fc-list-event:hover td { background: #2b3126; }
html[data-colorscheme="dark"] body:not(.wp-admin) .fc .fc-day-other .fc-daygrid-day-number { color: #8d9488; }
html[data-colorscheme="dark"] body:not(.wp-admin) .kgv-message--ok { background: #1d3a20; color: #cfe8d1; }
html[data-colorscheme="dark"] body:not(.wp-admin) .kgv-message--error { background: #40211f; color: #f3c9c7; }

/* ==================================================================
   Terminkalender im Backend
   ================================================================== */

/* Entwürfe gestreift: sie stehen im Kalender, sind aber noch nicht
   veröffentlicht — das muss auf einen Blick unterscheidbar sein. */
.kgv-event--draft {
	background-image: repeating-linear-gradient(
		45deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 12px
	);
	opacity: 0.85;
}

/* Eine Instanz, die von ihrer Serie abweicht — verschoben, umbenannt oder
   mit Anmeldungen. Sie überlebt jedes Neuberechnen, und man muss sehen,
   welche das sind, bevor man die Regel ändert. */
.kgv-event--differing { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }

.kgv-admin-calendar {
	/* Enger als im Frontend: hier wird geplant, nicht gelesen. */
	--kgv-cell-height: 4.2rem;
	--kgv-density-y: 0.4rem;
	max-width: 1400px;
	padding: 1rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}
.kgv-admin-calendar .fc { font-family: inherit; font-size: 0.92rem; }
.kgv-admin-calendar .fc-event { cursor: grab; }
.kgv-admin-calendar .fc-event:active { cursor: grabbing; }
.kgv-admin-calendar .fc .fc-toolbar-title { font-size: 1.15rem; }
.kgv-admin-calendar .fc .fc-button { padding: 0.28em 0.7em; font-size: 0.86rem; }
.kgv-admin-calendar .fc .fc-daygrid-event { padding: 0.1rem 0.3rem; font-size: 0.8rem; }
.kgv-admin-calendar .fc .fc-col-header-cell-cushion { padding: 0.3rem 0; font-size: 0.78rem; }

/* ==================================================================
   Kontextmenü (nur Backend)
   ================================================================== */

.kgv-contextmenu {
	position: fixed;
	/* Unter dem Dialog (100001), über allem anderen. */
	z-index: 100000;
	min-width: 15rem;
	padding: 0.3rem 0;
	margin: 0;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	list-style: none;
	font-size: 0.9rem;
}
.kgv-contextmenu[hidden] { display: none; }
.kgv-contextmenu li { margin: 0; }
.kgv-contextmenu button {
	display: block;
	width: 100%;
	padding: 0.45rem 1rem;
	background: none;
	border: 0;
	font: inherit;
	color: #1f2421;
	text-align: left;
	cursor: pointer;
}
.kgv-contextmenu button:hover,
.kgv-contextmenu button:focus { background: #f0f0f1; outline: 0; }
.kgv-contextmenu button:focus-visible { box-shadow: inset 0 0 0 2px var(--kgv-blue); }
.kgv-contextmenu button.is-destructive { color: #b32d2e; }
.kgv-contextmenu hr { margin: 0.3rem 0; border: 0; border-top: 1px solid #e0e0e0; }
.kgv-contextmenu__head {
	padding: 0.35rem 1rem 0.45rem;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 0.3rem;
	color: #646970;
	font-size: 0.82rem;
}

/* ==================================================================
   Formular im Dialog (Backend)
   ================================================================== */

/* Kopf, Reiter und Fuß stehen fest, nur der Körper scrollt. Bei einem
   Formular mit drei Reitern ist das der Unterschied zwischen „ich sehe,
   wo ich bin" und „ich scrolle jedes Mal ans Ende, um zu speichern". */
.kgv-dialog__box--form {
	display: flex;
	flex-direction: column;
	width: min(46rem, 100%);
	max-height: min(85vh, 46rem);
	overflow: hidden;
}
.kgv-dialog__box--form .kgv-dialog__head { padding: 1rem 3rem 0.9rem 1.5rem; }
.kgv-dialog__box--form .kgv-dialog__title { font-size: 1.15rem; }
.kgv-dialog__box--form .kgv-dialog__date { font-size: 0.9rem; font-weight: 600; }
.kgv-dialog__box--form .kgv-dialog__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1.1rem 1.5rem 1.3rem;
}

/* Reiter */
.kgv-dialog__tab {
	display: flex;
	gap: 0.15rem;
	padding: 0 1.5rem;
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
}
.kgv-dialog__tab-button {
	position: relative;
	padding: 0.65rem 1rem;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	font: inherit;
	font-weight: 600;
	color: #50575e;
	cursor: pointer;
}
.kgv-dialog__tab-button:hover { color: #1f2421; }
.kgv-dialog__tab-button.is-active { color: var(--kgv-green); border-bottom-color: var(--kgv-green); }
.kgv-dialog__tab-button:focus-visible { outline: 2px solid var(--kgv-blue); outline-offset: -2px; }
/* Zahl am Reiter, z. B. wie viele Termine die Serie ergibt. */
.kgv-dialog__tab-button .kgv-brand {
	margin-left: 0.4rem;
	padding: 0.05em 0.45em;
	background: var(--kgv-green);
	border-radius: 999px;
	color: #fff;
	font-size: 0.72rem;
}
.kgv-dialog__panel[hidden] { display: none; }

/* Fuß */
.kgv-dialog__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.5rem;
	background: #f6f7f7;
	border-top: 1px solid #dcdcde;
	border-radius: 0 0 14px 14px;
}
.kgv-dialog__footer:empty { display: none; }
.kgv-dialog__footer .kgv-dialog__message { flex: 1 1 auto; margin: 0; min-height: 0; font-size: 0.9rem; }
.kgv-dialog__footer .kgv-dialog__actions { margin: 0; flex: 0 0 auto; }
.kgv-dialog__footer .kgv-btn { padding: 0.45em 1.1em; }

/* Felder */
.kgv-form { display: grid; gap: 0.7rem; }
.kgv-form__row { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; align-items: center; }
/* Ohne diese Regel bleiben ausgeblendete Zeilen sichtbar: display:grid aus
   der Zeile darüber schlägt die eingebaute Regel [hidden] { display:none }
   des Browsers. Folge wäre ein Formular, das bei einer Wochenregel nach dem
   Monatstag fragt. */
.kgv-form__row[hidden] { display: none; }
.kgv-form__pair > [hidden] { display: none; }
.kgv-form__row > label { font-weight: 600; color: #50575e; font-size: 0.92rem; }

.kgv-form input[type="text"],
.kgv-form input[type="number"],
.kgv-form input[type="date"],
.kgv-form input[type="time"],
.kgv-form input[type="datetime-local"],
.kgv-form select,
.kgv-form textarea {
	width: 100%;
	min-height: 2.2rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font: inherit;
	font-size: 0.95rem;
	background-color: #fff;
	color: #1f2421;
	box-shadow: 0 0 0 transparent;
}
.kgv-form input:focus,
.kgv-form select:focus,
.kgv-form textarea:focus {
	border-color: var(--kgv-green);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--kgv-green);
}

/* Auswahlfelder brauchen ihren Pfeil selbst.
   WordPress setzt in seinem Formular-Stylesheet appearance:none und zeichnet
   das Dreieck über ein Hintergrundbild. Die Kurzschreibweise `background`
   löschte genau dieses Bild — zurück blieb ein Feld, das aussah wie ein
   Textfeld und sich nicht als aufklappbar zu erkennen gab. */
.kgv-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2350575e'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1.05rem;
	cursor: pointer;
}
.kgv-form select::-ms-expand { display: none; }

/* Ankreuzfelder: das voreingestellte 13-px-Kästchen von WordPress ist neben
   2,2 rem hohen Feldern kaum zu treffen. */
.kgv-form input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
}

.kgv-form__pair { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kgv-form__pair > * { flex: 1 1 8rem; min-width: 0; }
.kgv-form__box {
	padding: 0.8rem 1rem;
	background: #f6f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	display: grid;
	gap: 0.7rem;
}
.kgv-form__box[hidden] { display: none; }
.kgv-form__separator {
	margin: 0.3rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid #e0e0e0;
	font-weight: 700;
	font-size: 0.9rem;
	color: #50575e;
}

.kgv-form__days { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kgv-form__days label {
	min-width: 2.4rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	user-select: none;
}
.kgv-form__days input { position: absolute; opacity: 0; pointer-events: none; }
.kgv-form__days label:has(input:checked) { background: var(--kgv-green); border-color: var(--kgv-green); color: #fff; }
.kgv-form__days label:has(input:focus-visible) { outline: 2px solid var(--kgv-blue); outline-offset: 2px; }
.kgv-form__notice { margin: 0; color: #646970; font-size: 0.85rem; }
.kgv-form__preview {
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: #fff;
	border-left: 3px solid var(--kgv-green);
	border-radius: 0 4px 4px 0;
	font-weight: 600;
	font-size: 0.9rem;
}
.kgv-form__preview.is-warning { border-left-color: #dba617; }
.kgv-dialog__more { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; }

@media (max-width: 640px) {
	.kgv-dialog__tab { padding: 0 0.6rem; }
	.kgv-dialog__tab-button { padding: 0.6rem 0.7rem; font-size: 0.9rem; }
	.kgv-dialog__box--form .kgv-dialog__body { padding: 0.9rem 1rem; }
	.kgv-dialog__footer { padding: 0.8rem 1rem; flex-wrap: wrap; }
	.kgv-form__row { grid-template-columns: 1fr; gap: 0.2rem; }
	.kgv-form__row > label { margin-bottom: 0; }
}