/* ==========================================================================
   FARBVARIABLEN
   Vereinsfarben von vfltremsbuettel.de.
   ========================================================================== */
.fkal-wrapper {
	--fkal-primary: #003300;       /* Vereinsgrün (Buttons, aktive Elemente) */
	--fkal-primary-dark: #001f00;  /* Vereinsgrün, dunkler (Hover) */
	--fkal-today-highlight: #006600; /* Markierung für den heutigen Tag */
	--fkal-text: #1b1b1b;          /* Standard-Textfarbe im Kalender */
	--fkal-border: #cfcfcf;        /* aus Hell abgeleitete Rahmenfarbe */
	--fkal-bg-muted: #e8e8e8;      /* Vereins-Hell (Formular-Hintergrund etc.) */

	max-width: 100%;
	box-sizing: border-box;
	color: var(--fkal-text);
}

.fkal-wrapper * {
	box-sizing: border-box;
}

.fkal-calendar-el {
	max-width: 100%;
	margin-top: 1rem;
}

/* Textfarbe im gesamten Kalender erzwingen (überschreibt FullCalendar-Defaults) */
.fkal-wrapper .fc,
.fkal-wrapper .fc-col-header-cell-cushion,
.fkal-wrapper .fc-daygrid-day-number,
.fkal-wrapper .fc-list-day-text,
.fkal-wrapper .fc-list-day-side-text,
.fkal-wrapper .fc-list-event-time,
.fkal-wrapper .fc-list-event-title,
.fkal-wrapper .fc-event,
.fkal-wrapper .fc-daygrid-event,
.fkal-wrapper .fc-event-main,
.fkal-wrapper .fkal-event-inner,
.fkal-wrapper .fkal-event-public,
.fkal-wrapper .fkal-event-list {
	color: var(--fkal-text);
}

/* FullCalendar: Vereinsfarben übernehmen */
.fkal-wrapper .fc-button-primary {
	background-color: var(--fkal-primary);
	border-color: var(--fkal-primary);
}

.fkal-wrapper .fc-button-primary:hover {
	background-color: var(--fkal-primary-dark);
	border-color: var(--fkal-primary-dark);
}

.fkal-wrapper .fc-button-primary:disabled {
	background-color: var(--fkal-primary);
	border-color: var(--fkal-primary);
	opacity: 0.65;
}

.fkal-wrapper .fc-day-today {
	background-color: color-mix(in srgb, var(--fkal-today-highlight) 20%, white) !important;
}

.fkal-wrapper .fc-toolbar {
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fkal-wrapper .fc-toolbar-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fkal-text);
}

@media (max-width: 600px) {
	.fkal-wrapper .fc-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.fkal-wrapper .fc-toolbar-title {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   TERMIN-ANZEIGE: Startzeit–Endzeit · Eventname · Ort, mit Farbpunkt
   ========================================================================== */
.fkal-event-inner {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	flex-wrap: wrap;
	line-height: 1.3;
	padding: 1px 2px;
}

.fkal-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	margin-right: 0.1em;
}

.fkal-event-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.fkal-event-title {
	font-weight: 500;
}

.fkal-event-inner .fkal-event-title {
	font-weight: 700;
}

.fkal-event-location {
	opacity: 0.75;
	font-size: 0.92em;
}

.fkal-event-eingetragen-von {
	opacity: 0.65;
	font-size: 0.85em;
	font-style: italic;
}

/* ==========================================================================
   ÖFFENTLICHER KALENDER: zentrierte Darstellung
   Von–Bis
   Eventname (verlinkt, falls URL vorhanden)
   Ort
   ========================================================================== */
.fkal-event-public {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.1em;
	line-height: 1.3;
	padding: 2px 4px;
	width: 100%;
}

.fkal-event-public .fkal-dot {
	margin: 0 0 0.15em;
}

.fkal-event-public .fkal-event-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.fkal-event-time-pill {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.85em;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	/* Hintergrundfarbe wird pro Termin per Inline-Style (background-color) gesetzt. */
	padding: 2px 8px;
	border-radius: 999px;
	line-height: 1.4;
}

.fkal-event-inner .fkal-event-time-pill {
	margin-right: 0.35em;
}

.fkal-event-public .fkal-event-title {
	font-weight: 700;
}

.fkal-event-public .fkal-event-location {
	opacity: 0.75;
	font-size: 0.92em;
}

/* ==========================================================================
   INTERNES FORMULAR
   ========================================================================== */
.fkal-intern-form-container {
	border: 1px solid var(--fkal-border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--fkal-bg-muted);
}

.fkal-form-title {
	margin-top: 0;
	color: var(--fkal-text);
}

.fkal-form-notice {
	background: #fff8e6;
	border: 1px solid #f2b134;
	border-radius: 4px;
	padding: 0.6rem 0.8rem;
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

.fkal-form-row {
	margin-bottom: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.fkal-form-row-inline {
	flex-direction: row;
	align-items: center;
}

.fkal-form-row label {
	font-weight: 600;
	font-size: 0.9rem;
}

.fkal-recurrence-fields {
	border-left: 3px solid var(--fkal-border);
	padding-left: 0.75rem;
	margin-bottom: 0.75rem;
}

.fkal-recurrence-fields .fkal-form-row label {
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-right: 1rem;
}

.fkal-form-row input[type="text"],
.fkal-form-row input[type="url"],
.fkal-form-row input[type="date"],
.fkal-form-row input[type="datetime-local"],
.fkal-form-row select,
.fkal-form-row textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
}

.fkal-form-actions {
	flex-direction: row;
	gap: 0.5rem;
}

.fkal-btn {
	padding: 0.5rem 1.1rem;
	border-radius: 4px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
	font-size: 0.95rem;
}

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

.fkal-btn-primary:hover {
	background: var(--fkal-primary-dark);
}

.fkal-btn-delete {
	color: #b32d2e;
	border-color: #b32d2e;
	background: #fff;
}

.fkal-event-actions-buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-left: 0.5rem;
}

.fkal-btn-skip {
	color: #8a5a00;
	border-color: #8a5a00;
	background: #fff;
}

.fkal-btn-edit-single {
	color: var(--fkal-primary);
	border-color: var(--fkal-primary);
	background: #fff;
}

.fkal-form-message {
	font-size: 0.9rem;
	min-height: 1.2em;
}

.fkal-form-message.fkal-error {
	color: #b32d2e;
}

.fkal-form-message.fkal-success {
	color: var(--fkal-primary-dark);
}

/* ==========================================================================
   OVERFLOW-FIXES: Termin-Text darf nie über den Tages-Rahmen hinauslaufen,
   egal ob mobil oder Desktop. FullCalendar-Defaults (nowrap, feste Breite)
   werden hier gezielt überschrieben.
   ========================================================================== */
.fkal-wrapper .fc-daygrid-day-frame {
	overflow: visible;
	width: 100%;
}

.fkal-wrapper .fc-daygrid-day-events {
	overflow: visible;
	width: 100%;
	padding-top: 10px;
}

.fkal-wrapper .fc-daygrid-event-harness {
	width: 100%;
}

/* Dünne Trennlinie zwischen aufeinanderfolgenden Terminen im selben Tag (nur Monatsansicht). */
.fkal-wrapper .fc-daygrid-event-harness + .fc-daygrid-event-harness {
	position: relative;
}

.fkal-wrapper .fc-daygrid-event-harness + .fc-daygrid-event-harness::before {
	content: "";
	display: block;
	width: 60%;
	height: 1px;
	margin: 3px auto;
	background-color: #d8d8d8;
}

.fkal-wrapper .fc-daygrid-event,
.fkal-wrapper .fc-event {
	white-space: normal;
	overflow: hidden;
	border: none;
	background: transparent;
	margin: 1px 0;
}

.fkal-wrapper .fc-daygrid-event .fc-event-main {
	overflow: hidden;
}

.fkal-event-inner,
.fkal-event-public {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.fkal-event-time-row {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

@media (max-width: 600px) {
	.fkal-event-inner,
	.fkal-event-public {
		font-size: 0.82rem;
	}

	.fkal-wrapper .fc-daygrid-day-number {
		font-size: 0.82rem;
		padding: 2px 4px;
	}
}

/* ==========================================================================
   LEGENDE: Orte mit Farbcodierung unterhalb des Kalenders
   ========================================================================== */
.fkal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--fkal-border);
	font-size: 0.85rem;
}

.fkal-legend-item {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	font-weight: 500;
}

/* ==========================================================================
   LISTENANSICHT: Punkt · Zeit · Eventname (fett) · Ort
   ========================================================================== */
.fkal-event-list {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	flex-wrap: wrap;
	line-height: 1.3;
}

.fkal-event-list .fkal-event-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.fkal-event-list .fkal-event-title {
	font-weight: 700;
}

.fkal-event-list .fkal-event-location {
	opacity: 0.75;
	font-size: 0.92em;
}

/* FullCalendars eigene Zeit-Spalte bleibt aus (displayEventTime:false),
   dieser Fallback verhindert eine leere erste Spalte falls doch vorhanden. */
.fkal-wrapper .fc-list-event-time {
	display: none;
}

/* ==========================================================================
   BUTTON-DESIGN: Monat/Liste-Umschalter und Vor-/Zurück-Buttons
   ========================================================================== */
.fkal-wrapper .fc-dayGridMonth-button,
.fkal-wrapper .fc-listMonth-button,
.fkal-wrapper .fc-prev-button,
.fkal-wrapper .fc-next-button {
	background-color: #e8e8e8;
	border-color: #003300;
	color: #003300;
}

.fkal-wrapper .fc-dayGridMonth-button:hover,
.fkal-wrapper .fc-listMonth-button:hover,
.fkal-wrapper .fc-prev-button:hover,
.fkal-wrapper .fc-next-button:hover {
	background-color: #d8d8d8;
	border-color: #003300;
	color: #003300;
}

.fkal-wrapper .fc-dayGridMonth-button.fc-button-active,
.fkal-wrapper .fc-listMonth-button.fc-button-active {
	background-color: #003300;
	border-color: #e8e8e8;
	color: #e8e8e8;
}

.fkal-wrapper .fc-dayGridMonth-button.fc-button-active:hover,
.fkal-wrapper .fc-listMonth-button.fc-button-active:hover {
	background-color: #002400;
	border-color: #e8e8e8;
	color: #e8e8e8;
}

/* ==========================================================================
   HOVER-EFFEKT: nur in der Monatsansicht deaktiviert, Listenansicht
   behält den Hover-Effekt bei.
   ========================================================================== */
.fkal-wrapper .fc-daygrid-day-frame:hover,
.fkal-wrapper .fc-daygrid-day:hover,
.fkal-wrapper .fc-daygrid-event:hover,
.fkal-wrapper .fc-daygrid-dot-event:hover,
.fkal-wrapper .fc-daygrid-event-harness:hover .fc-event {
	background-color: transparent !important;
}

/* ==========================================================================
   LISTENANSICHT: FullCalendars eigenen Punkt (Graphic-Spalte) ausblenden,
   damit nur unser eigener Orts-Punkt sichtbar bleibt.
   ========================================================================== */
.fkal-wrapper .fc-list-event-dot {
	display: none;
}

/* ==========================================================================
   LEGENDE-POSITION: wird per JS direkt hinter die FullCalendar-Toolbar
   verschoben (zwischen Buttons/Titel und Kalendergitter).
   ========================================================================== */
.fkal-wrapper .fc-header-toolbar + .fkal-legend {
	margin-top: 0;
	margin-bottom: 0.5rem;
	padding-top: 0;
	border-top: none;
}

/* ==========================================================================
   FILTER-BAR (Suche + Filter oberhalb des Kalenders)
   ========================================================================== */
.fkal-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
}

.fkal-filter-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 240px;
	min-width: 0;
}

.fkal-filter-bar label {
	font-weight: 600;
	flex: none;
}

.fkal-filter-bar select,
.fkal-filter-bar input[type="search"] {
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--fkal-border);
	border-radius: 4px;
	font-size: 0.9rem;
	background: #fff;
	color: var(--fkal-text);
	flex: 1 1 auto;
	min-width: 0;
}

.fkal-search-input {
	width: 100%;
}

/* ==========================================================================
   ICONS neben dem Farbpunkt (Barrierefreiheit: nicht nur Farbe)
   ========================================================================== */
.fkal-icon {
	margin-right: 0.15em;
}

/* ==========================================================================
   LISTENANSICHT: heutiger Tag hervorgehoben
   ========================================================================== */
.fkal-wrapper .fc-list-day.fc-day-today .fc-list-day-cushion,
.fkal-wrapper .fc-list-day.fc-day-today .fc-list-day-text,
.fkal-wrapper .fc-list-day.fc-day-today .fc-list-day-side-text {
	background-color: color-mix( in srgb, var( --fkal-today-highlight ) 18%, white );
	font-weight: 700;
}

.fkal-wrapper .fc-list-day.fc-day-today .fc-list-day-text::after {
	content: " (Heute)";
	font-weight: 700;
}

/* ==========================================================================
   ÄNDERUNGSHISTORIE-HINWEIS im internen Formular
   ========================================================================== */
.fkal-edit-history {
	font-size: 0.85rem;
	opacity: 0.75;
	margin: -0.25rem 0 0.75rem;
}

/* ==========================================================================
   DRUCKANSICHT (@media print): schlanke Monatsübersicht für DIN A4 Hochformat
   ========================================================================== */
@media print {
	body * {
		visibility: hidden;
	}

	.fkal-wrapper,
	.fkal-wrapper * {
		visibility: visible;
	}

	.fkal-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.fkal-filter-bar,
	.fkal-intern-form-container,
	.fkal-wrapper .fc-listMonth-button,
	.fkal-wrapper .fc-prev-button,
	.fkal-wrapper .fc-next-button,
	.fkal-wrapper .fc-today-button {
		display: none !important;
	}

	.fkal-wrapper .fc-toolbar-title {
		font-size: 1.4rem;
	}

	.fkal-event-public,
	.fkal-event-inner {
		font-size: 9px;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.fkal-dot {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	@page {
		size: A4 portrait;
		margin: 12mm;
	}
}

/* ==========================================================================
   BESTÄTIGUNGS-KARTE nach dem Eintragen eines neuen internen Termins
   ========================================================================== */
.fkal-confirmation-card {
	background: #f0f7f2;
	border: 1px solid var(--fkal-primary);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.fkal-confirmation-heading {
	margin: 0 0 0.75rem;
	color: var(--fkal-primary-dark);
}

.fkal-confirmation-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1.25rem;
}

.fkal-confirmation-list dt {
	font-weight: 600;
	white-space: nowrap;
}

.fkal-confirmation-list dd {
	margin: 0;
}

/* ==========================================================================
   HERVORHEBUNG: neu angelegter Termin blinkt kurz auf, nachdem der Kalender
   automatisch dorthin gesprungen ist.
   ========================================================================== */
@keyframes fkal-flash {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(0, 102, 0, 0);
	}
	20%, 60% {
		box-shadow: 0 0 0 3px rgba(0, 102, 0, 0.6);
	}
}

.fkal-flash-highlight {
	animation: fkal-flash 1.6s ease-in-out 2;
	border-radius: 6px;
}