/* Buchungskalender. Farben über Variablen, die das Theme überschreiben darf. */
.kki-buchung {
	--_gelb: var(--kki-gelb, #f2c230);
	--_gruen: var(--kki-gruen, #1e4d3a);
	--_dunkel: var(--kki-gruen-dunkel, #12301f);
	--_flaeche: var(--kki-flaeche, #eef4ef);
	--_text: var(--kki-text, #1a231e);
	--_radius: var(--kki-radius, 14px);
	--_rot: #a3271b;
	color: var(--_text);
	background: #fff;
	border-radius: var(--_radius);
	padding: clamp(16px, 4vw, 32px);
	box-shadow: 0 1px 0 rgba(18, 48, 31, .06), 0 18px 40px -24px rgba(18, 48, 31, .45);
	max-width: 560px;
	min-height: 420px;
	box-sizing: border-box;
}
.kki-buchung *, .kki-buchung *::before, .kki-buchung *::after { box-sizing: border-box; }
.kki-buchung button { font: inherit; cursor: pointer; }
.kki-buchung :focus-visible { outline: 3px solid var(--_gelb); outline-offset: 2px; }

.kki-b-schritt {
	margin: 0 0 6px;
	font-size: .92rem;
	color: var(--_gruen);
	font-weight: 600;
}
.kki-b-titel { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.3; }
.kki-b-titel:focus { outline: none; }

.kki-b-status:empty { display: none; }
.kki-b-status {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--_flaeche);
	font-weight: 600;
}
.kki-b-status-fehler { background: #fbe9e6; color: var(--_rot); }

.kki-b-laden { color: #55625a; }
.kki-b-hinweis { margin: 12px 0 0; }
.kki-b-hinweis a { color: var(--_gruen); font-weight: 700; }

/* Monatskopf und Raster */
.kki-b-monatskopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kki-b-monatskopf .kki-b-titel { margin: 0; text-align: center; flex: 1; }
.kki-b-pfeil {
	width: 44px; height: 44px;
	border: 1px solid #d5ddd7; border-radius: 50%;
	background: #fff; color: var(--_gruen);
	font-size: 1.5rem; line-height: 1;
}
.kki-b-pfeil:disabled { opacity: .3; cursor: default; }
.kki-b-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kki-b-wt { text-align: center; font-size: .78rem; font-weight: 700; color: #6a766e; padding-bottom: 4px; }
.kki-b-tag {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1; min-height: 40px;
	border-radius: 10px; border: 0;
	font-size: .95rem;
}
.kki-b-belegt { color: #a9b3ac; }
.kki-b-frei {
	background: var(--_flaeche);
	color: var(--_dunkel);
	font-weight: 700;
	box-shadow: inset 0 0 0 2px transparent;
	transition: background .15s, box-shadow .15s, transform .15s;
}
.kki-b-frei:hover { background: var(--_gelb); transform: translateY(-1px); }

/* Uhrzeiten */
.kki-b-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kki-b-zeit {
	min-height: 48px;
	border: 2px solid var(--_flaeche);
	border-radius: 10px;
	background: #fff;
	color: var(--_dunkel);
	font-weight: 700;
	transition: background .15s, border-color .15s;
}
.kki-b-zeit:hover { background: var(--_gelb); border-color: var(--_gelb); }
.kki-b-zurueck {
	margin-top: 16px; padding: 8px 0;
	border: 0; background: none;
	color: var(--_gruen); font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px;
}

/* Formular */
.kki-b-zusammenfassung { margin: -6px 0 0; color: #3d4a42; }
.kki-b-form { margin-top: 10px; }
.kki-b-feld { margin-bottom: 14px; }
.kki-b-feld label { display: block; font-weight: 600; margin-bottom: 4px; }
.kki-b-pflicht { color: var(--_rot); }
.kki-b-frei-text { font-weight: 400; color: #6a766e; }
.kki-b-feld input[type="text"],
.kki-b-feld input[type="tel"],
.kki-b-feld input[type="email"],
.kki-b-feld textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1.5px solid #c9d3cc;
	border-radius: 10px;
	font: inherit;
	color: inherit;
	background: #fff;
}
.kki-b-feld textarea { min-height: 88px; resize: vertical; }
.kki-b-feld input:focus, .kki-b-feld textarea:focus { border-color: var(--_gruen); outline: 3px solid rgba(242, 194, 48, .55); outline-offset: 0; }
.kki-b-feld [aria-invalid="true"] { border-color: var(--_rot); }
.kki-b-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.kki-b-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--_gruen); flex: none; }
.kki-b-check a { color: var(--_gruen); }
.kki-b-fehler { margin: 4px 0 0; color: var(--_rot); font-size: .9rem; font-weight: 600; }
.kki-b-fehler:empty { display: none; }
.kki-b-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kki-b-absenden {
	width: 100%;
	min-height: 54px;
	margin-top: 6px;
	border: 0;
	border-radius: 999px;
	background: var(--_gelb);
	color: var(--_dunkel);
	font-weight: 800;
	font-size: 1.05rem;
	box-shadow: 0 6px 0 -2px #c99a10;
	transition: transform .15s, box-shadow .15s;
}
.kki-b-absenden:hover { transform: translateY(-1px); }
.kki-b-absenden:disabled { opacity: .7; cursor: progress; }

/* Fertig */
.kki-b-haken { width: 64px; height: 64px; margin-bottom: 10px; }
.kki-b-haken circle { fill: var(--_flaeche); }
.kki-b-haken path { fill: none; stroke: var(--_gruen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.kki-b-fertig { font-size: 1.05rem; line-height: 1.55; }

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