/* KCG Verleih — front-end styles. Loaded only on pages using the shortcodes. */

.kcg-notice {
	padding: 0.85rem 1.1rem;
	border-radius: 0.5rem;
	margin-bottom: 1.25rem;
	border: 1px solid transparent;
}

.kcg-notice--ok {
	background: var(--kcgr-ok-bg);
	border-color: var(--kcgr-ok-border);
	color: var(--kcgr-ok-text);
}

.kcg-notice--error {
	background: var(--kcgr-err-bg);
	border-color: var(--kcgr-err-border);
	color: var(--kcgr-err-text-2);
}

/* Forms */

.kcg-auth {
	max-width: 26rem;
	margin-inline: auto;
}

.kcg-auth__form {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 2rem;
}

.kcg-auth__form h2,
.kcg-auth__form h3 {
	margin-bottom: 0.25rem;
}

.kcg-auth__hint {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	font-size: 0.95rem;
}

.kcg-auth__form label {
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: 0.55rem;
}

.kcg-auth__form input {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
	background: var(--kcgr-surface);
}

.kcg-auth__form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark, var(--kcgr-accent-deep));
	outline-offset: 1px;
}

.kcg-btn {
	margin-top: 1rem;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	color: var(--kcgr-on-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
}

.kcg-btn:hover {
	background: var(--wp--preset--color--primary-dark, var(--kcgr-accent-deep));
	color: var(--kcgr-on-accent);
}

.kcg-btn--quiet {
	background: transparent;
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-auth__help {
	border-top: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	padding-top: 1rem;
}

.kcg-auth__help summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
}

.kcg-auth__form--inline {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Section navigation inside the member area */

.kcg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1.25rem 0 1.75rem;
	padding: 0.35rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 999px;
	width: fit-content;
	max-width: 100%;
}

.kcg-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kcg-tab:hover,
.kcg-tab:focus-visible {
	background: var(--kcgr-surface);
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
}

.kcg-tab__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	color: var(--kcgr-on-accent);
	font-size: 0.75rem;
	font-weight: 700;
}

.kcg-tab__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--kcgr-warn-solid);
}

.kcg-tab.is-active {
	background: var(--kcgr-tab-active-bg);
	color: var(--kcgr-tab-active-fg);
}

.kcg-tab.is-active .kcg-tab__count {
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	color: var(--kcgr-on-accent);
}

/* Before the script runs every panel is visible and the tabs are plain
   anchors; afterwards only one panel shows at a time. */
.kcg-panels.is-tabbed .kcg-panel[hidden] {
	display: none;
}

.kcg-panel:focus {
	outline: none;
}

/* Anchor targets must clear the sticky header (no-JS fallback). */
#boote,
#reservierungen,
#meine-daten,
#ausruestung,
#auswahl {
	scroll-margin-top: 5.5rem;
}

/* Reservation cards */

.kcg-reslist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kcg-res {
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.8rem;
	background: var(--kcgr-surface);
	overflow: hidden;
}

.kcg-res--open {
	border-color: var(--kcgr-warn-border);
}

.kcg-res__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border-bottom: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-res--open .kcg-res__head {
	background: var(--kcgr-warn-bg);
	border-bottom-color: var(--kcgr-warn-border);
}

.kcg-res__head time {
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	font-size: 0.9rem;
}

.kcg-res__head .kcg-status {
	margin-left: auto;
}

.kcg-res .kcg-detail__list {
	padding: 0.8rem 1rem;
	gap: 0.4rem;
}

.kcg-res .kcg-detail__list li {
	background: var(--kcgr-surface);
	border-color: var(--kcgr-border-faint);
}

.kcg-res__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.7rem 1rem 0.9rem;
	border-top: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-res__total strong {
	font-size: 1.1rem;
	margin-left: 0.3rem;
}

.kcg-res__hint {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-res__hint code {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
	font-weight: 700;
}

.kcg-res__foot form {
	margin-left: auto;
}

.kcg-empty-state {
	padding: 1.5rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border-radius: 0.7rem;
	text-align: center;
}

.kcg-empty-state a {
	display: inline-block;
	margin-left: 0.4rem;
	font-weight: 600;
}

/* Member area */

.kcg-member__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.kcg-badge {
	margin: 0;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.kcg-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

.kcg-table th,
.kcg-table td {
	text-align: left;
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	vertical-align: top;
	font-size: 0.95rem;
}

.kcg-table th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-member__forms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 2.5rem;
	margin-top: 2rem;
}

.kcg-row {
	display: flex;
	gap: 0.75rem;
}

.kcg-row span {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Filters */

.kcg-filters {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.7rem;
	padding: 1rem 1.1rem 0.6rem;
	margin-bottom: 1.75rem;
}

.kcg-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: flex-end;
}

.kcg-filters__row span {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 9rem;
}

.kcg-filters label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-filters input,
.kcg-filters select {
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
	background: var(--kcgr-surface);
	width: 100%;
}

.kcg-filters__submit {
	flex: 0 0 auto;
}

.kcg-filters .kcg-btn {
	margin-top: 0;
}

.kcg-filters__hint {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

/* Item cards */

.kcg-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.kcg-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.8rem;
	overflow: hidden;
	background: var(--kcgr-surface);
}

.kcg-item__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--kcgr-surface-tint2);
}

.kcg-item__noimage {
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, var(--kcgr-surface-tint3), var(--kcgr-surface-tint3) 10px, var(--kcgr-surface-3) 10px, var(--kcgr-surface-3) 20px);
}

.kcg-item__body {
	padding: 0.9rem 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.kcg-item__body h3 {
	margin: 0;
	font-size: 1.1rem;
}

.kcg-item__variant {
	font-weight: 400;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9rem;
}

.kcg-tag {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	font-size: 0.8rem;
}

.kcg-avail {
	font-weight: 600;
	font-size: 0.8rem;
}

.kcg-avail--yes { color: var(--kcgr-ok-text-2); }
.kcg-avail--no  { color: var(--kcgr-err-text); }

.kcg-price {
	margin-left: auto;
	font-weight: 700;
}

.kcg-price small {
	font-weight: 400;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.4rem 0.9rem;
	margin: 0;
	font-size: 0.85rem;
}

.kcg-specs dt {
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kcg-specs dd {
	margin: 0;
	font-weight: 600;
}

.kcg-item__desc summary {
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
}

.kcg-item__desc-text {
	font-size: 0.9rem;
	margin: 0;
}

.kcg-item__book {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-item__book span {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1 1 6rem;
}

.kcg-item__book label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-item__book input {
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
	width: 100%;
}

.kcg-btn--small {
	margin-top: 0;
	padding: 0.5rem 1.1rem;
	font-size: 0.9rem;
}

.kcg-blocked {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-count {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

/* Cart */

.kcg-cart {
	border: 2px solid var(--wp--preset--color--primary, var(--kcgr-accent));
	border-radius: 0.8rem;
	padding: 1.1rem 1.2rem;
	margin-bottom: 2rem;
	background: var(--kcgr-surface);
}

.kcg-cart h3 {
	margin-top: 0;
}

.kcg-cart__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.kcg-cart__total {
	margin: 0;
	font-size: 1.05rem;
}

.kcg-inline-form {
	display: inline;
}

.kcg-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--kcgr-err-text);
	cursor: pointer;
	text-decoration: underline;
}

.kcg-done {
	border: 1px solid var(--kcgr-ok-border);
	background: var(--kcgr-ok-bg);
	border-radius: 0.7rem;
	padding: 1.1rem 1.2rem;
	margin-bottom: 2rem;
}

.kcg-done h3 {
	margin-top: 0;
}

.kcg-bank {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.95rem;
}

/* Admin panel */

.kcg-admin__summary {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.6rem;
	margin-bottom: 1.25rem;
}

.kcg-admin__summary strong {
	font-size: 1.3rem;
}

.kcg-admin__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.kcg-admin__filters input[type="search"] {
	flex: 1 1 18rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
}

.kcg-admin__filters select {
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
}

.kcg-table--admin td {
	vertical-align: middle;
}

/* Keep "R-1618" and the amount on one line */
.kcg-table--admin td:first-child,
.kcg-table--admin td:nth-child(5),
.kcg-table--admin td:nth-child(6) {
	white-space: nowrap;
}

.kcg-table--admin small {
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-row--open {
	background: var(--kcgr-warn-bg-2);
}

.kcg-admin__actions {
	white-space: nowrap;
}

.kcg-admin__actions .kcg-inline-form + .kcg-inline-form::before {
	content: " · ";
	color: var(--wp--preset--color--border, var(--kcgr-faint-3));
}

.kcg-admin__actions .kcg-linkbtn {
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
	font-size: 0.85rem;
}

.kcg-admin__actions form:last-child .kcg-linkbtn {
	color: var(--kcgr-err-text);
}

/* Reservation table */

.kcg-restable {
	table-layout: auto;
}

.kcg-col-toggle {
	width: 2.4rem;
	padding-right: 0 !important;
}

.kcg-expand {
	display: inline-grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 0.4rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	background: var(--kcgr-surface);
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.15s ease, color 0.15s ease;
}

.kcg-expand:hover {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
	border-color: var(--wp--preset--color--primary, var(--kcgr-accent));
}

.kcg-expand.is-open {
	transform: rotate(90deg);
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	border-color: var(--wp--preset--color--primary-dark, var(--kcgr-accent-deep));
	color: var(--kcgr-on-accent);
}

.kcg-expand svg {
	width: 0.95rem;
	height: 0.95rem;
}

.kcg-resnr {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.kcg-membername {
	display: block;
	font-weight: 600;
}

.kcg-membermail {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	text-decoration: none;
}

.kcg-membermail:hover {
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
	text-decoration: underline;
}

.kcg-membermail svg {
	width: 0.85rem;
	height: 0.85rem;
}

.kcg-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kcg-amount {
	font-weight: 700;
}

/* Status pills */

.kcg-status {
	display: inline-block;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.kcg-status--paid {
	background: var(--kcgr-ok-bg-2);
	color: var(--kcgr-ok-text-3);
}

.kcg-status--open {
	background: var(--kcgr-warn-bg-3);
	color: var(--kcgr-warn-text);
}

/* Expanded detail panel */

.kcg-admin__detail td {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	font-size: 0.9rem;
	padding: 0 !important;
}

.kcg-detail {
	padding: 0.9rem 1.1rem 1rem 3.4rem;
	border-left: 3px solid var(--wp--preset--color--primary, var(--kcgr-accent));
}

.kcg-detail h4 {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-detail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.kcg-detail__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	background: var(--kcgr-surface);
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.45rem;
	padding: 0.5rem 0.7rem;
}

.kcg-detail__icon {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.35rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
	flex: none;
}

.kcg-detail__icon svg {
	width: 0.9rem;
	height: 0.9rem;
}

.kcg-detail__name {
	font-weight: 600;
	flex: 1 1 12rem;
}

.kcg-detail__when,
.kcg-detail__days,
.kcg-detail__qty {
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	font-size: 0.85rem;
}

.kcg-detail__cost {
	margin-left: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kcg-detail__empty {
	margin: 0;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-pager {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	margin: 1.5rem 0;
	font-size: 0.95rem;
}

.kcg-admin__back {
	margin-top: 2rem;
}

/* Icons */

.kcg-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
	flex: none;
}

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

/* Image zoom */

.kcg-zoom {
	display: block;
	position: relative;
}

.kcg-zoom__badge {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--kcgr-scrim);
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	box-shadow: 0 2px 8px rgba(20, 35, 43, 0.18);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.kcg-item:hover .kcg-zoom__badge,
.kcg-zoom:focus-visible .kcg-zoom__badge {
	opacity: 1;
	transform: scale(1);
}

.kcg-lightbox {
	position: fixed;
	inset: 0;
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	background: rgba(20, 35, 43, 0.92);
}

.kcg-lightbox::backdrop {
	background: rgba(20, 35, 43, 0.92);
}

.kcg-lightbox__inner {
	display: grid;
	place-items: center;
	height: 100%;
	gap: 1rem;
	padding: 1.5rem;
}

.kcg-lightbox img {
	max-width: min(92vw, 1100px);
	max-height: 78vh;
	object-fit: contain;
	border-radius: 0.5rem;
	background: var(--kcgr-surface);
}

.kcg-lightbox figcaption {
	color: #fff;
	font-size: 0.95rem;
}

.kcg-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.kcg-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* Availability strip */

.kcg-strip {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.kcg-strip__label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-strip__days {
	display: flex;
	gap: 2px;
}

.kcg-day {
	flex: 1;
	min-width: 0;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: 0.2rem;
	background: var(--kcgr-ok-bg-2);
	color: var(--kcgr-ok-text-4);
	font-size: 0.65rem;
	cursor: default;
}

.kcg-day em {
	font-style: normal;
}

.kcg-day.is-taken {
	background: var(--kcgr-err-bg-4);
	color: var(--kcgr-err-text-3);
}

/* New member panel */

.kcg-newmember {
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.7rem;
	background: var(--kcgr-surface);
	margin-bottom: 1.25rem;
	overflow: hidden;
}

.kcg-newmember > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.1rem;
	cursor: pointer;
	font-weight: 600;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	list-style: none;
}

.kcg-newmember > summary::-webkit-details-marker {
	display: none;
}

.kcg-newmember__plus {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	color: var(--kcgr-on-accent);
	font-weight: 700;
	line-height: 1;
	transition: transform 0.18s ease;
}

.kcg-newmember[open] .kcg-newmember__plus {
	transform: rotate(45deg);
}

.kcg-newmember .kcg-memberform {
	padding: 1.1rem;
}

.kcg-newmember__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin-bottom: 1.1rem;
}

/* Member table — wide, scrollable, inline editable */

.kcg-hint {
	font-size: 0.88rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	margin: 0 0 0.75rem;
}

.kcg-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.7rem;
	background: var(--kcgr-surface);
	max-width: 100vw;
}

.kcg-mtable {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.88rem;
	white-space: nowrap;
}

.kcg-mtable thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border-bottom: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 0.6rem 0.7rem;
}

.kcg-mtable td,
.kcg-mtable tbody th {
	padding: 0.45rem 0.7rem;
	border-bottom: 1px solid var(--kcgr-surface-tint4);
	vertical-align: middle;
	font-weight: 400;
	text-align: left;
}

.kcg-mtable tbody tr:hover td,
.kcg-mtable tbody tr:hover th {
	background: var(--kcgr-surface-tint);
}

/* First column stays put while scrolling sideways */
.kcg-mtable .kcg-sticky {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--kcgr-surface);
	border-right: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	font-weight: 600;
	min-width: 9rem;
}

/* Row headers are <th>, so they were picking up the column-header styling
   (uppercase, tiny, muted) and every member's name shouted. */
.kcg-mtable tbody th {
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.9rem;
	color: inherit;
	line-height: 1.35;
}

.kcg-mtable thead .kcg-sticky {
	z-index: 3;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
}

.kcg-mtable tbody tr:hover .kcg-sticky {
	background: var(--kcgr-surface-tint);
}

.kcg-row--inactive th,
.kcg-row--inactive td {
	color: var(--kcgr-faint);
}

.kcg-remarks {
	max-width: 16rem;
	white-space: normal;
}

/* Editable cells */

.kcg-edit {
	display: inline-block;
	min-width: 2.5rem;
	padding: 0.15rem 0.35rem;
	margin: -0.15rem -0.35rem;
	border-radius: 0.3rem;
	border-bottom: 1px dashed var(--kcgr-border-strong);
	cursor: text;
	transition: background-color 0.15s ease;
}

.kcg-edit:hover {
	background: var(--kcgr-surface-cool);
	border-bottom-color: var(--wp--preset--color--primary, var(--kcgr-accent));
}

.kcg-edit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark, var(--kcgr-accent-deep));
	outline-offset: 1px;
}

.kcg-edit.is-editing {
	border-bottom-color: transparent;
	background: none;
}

.kcg-edit__input {
	font: inherit;
	padding: 0.2rem 0.35rem;
	border: 1px solid var(--wp--preset--color--primary, var(--kcgr-accent));
	border-radius: 0.3rem;
	min-width: 7rem;
	max-width: 16rem;
	background: var(--kcgr-surface);
}

.kcg-edit.is-saved {
	animation: kcg-flash-ok 1.2s ease;
}

.kcg-edit.is-failed {
	animation: kcg-flash-bad 1.2s ease;
}

@keyframes kcg-flash-ok {
	0%, 40% { background: var(--kcgr-ok-bg-3); }
	100% { background: transparent; }
}

@keyframes kcg-flash-bad {
	0%, 40% { background: var(--kcgr-err-bg-5); }
	100% { background: transparent; }
}

.kcg-empty {
	color: var(--kcgr-faint-2);
}

/* Switch */

.kcg-switch {
	width: 2.4rem;
	height: 1.35rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	background: var(--kcgr-surface-4);
	position: relative;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.18s ease;
	vertical-align: middle;
}

.kcg-switch span {
	position: absolute;
	top: 50%;
	left: 0.15rem;
	width: 1rem;
	height: 1rem;
	margin-top: -0.5rem;
	border-radius: 50%;
	background: var(--kcgr-knob);
	box-shadow: 0 1px 3px rgba(20, 35, 43, 0.3);
	transition: transform 0.18s ease;
}

.kcg-switch.is-on {
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	border-color: var(--wp--preset--color--primary-dark, var(--kcgr-accent-deep));
}

.kcg-switch.is-on span {
	transform: translateX(1rem);
}

.kcg-switch:disabled {
	opacity: 0.6;
}

/* Gender segmented control */

.kcg-gender {
	display: inline-flex;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	overflow: hidden;
}

.kcg-gender__opt {
	border: 0;
	background: var(--kcgr-surface);
	font: inherit;
	font-size: 0.8rem;
	padding: 0.2rem 0.45rem;
	cursor: pointer;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-gender__opt + .kcg-gender__opt {
	border-left: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-gender__opt.is-on {
	background: var(--wp--preset--color--primary, var(--kcgr-accent));
	color: var(--kcgr-on-accent);
	font-weight: 700;
}

/* Icon buttons */

.kcg-actionrow {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.kcg-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	background: var(--kcgr-surface);
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.kcg-iconbtn svg {
	width: 1rem;
	height: 1rem;
}

.kcg-iconbtn:hover {
	border-color: var(--wp--preset--color--primary, var(--kcgr-accent));
	background: var(--kcgr-surface-cool);
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
}

.kcg-iconbtn--danger:hover {
	border-color: var(--kcgr-err-border-2);
	background: var(--kcgr-err-bg);
	color: var(--kcgr-err-text);
}

/* Toast */

.kcg-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	background: var(--wp--preset--color--contrast, var(--kcgr-ink));
	color: #fff;
	padding: 0.7rem 1.1rem;
	border-radius: 0.5rem;
	box-shadow: 0 8px 30px rgba(20, 35, 43, 0.25);
	font-size: 0.92rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 999;
	max-width: min(90vw, 30rem);
}

.kcg-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Member administration */

.kcg-row--inactive {
	opacity: 0.55;
}

.kcg-check {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.95rem;
	white-space: nowrap;
}

.kcg-memberedit h3 small {
	font-weight: 400;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-memberedit__login {
	margin-top: -0.5rem;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.kcg-memberform__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.25rem;
}

.kcg-memberform__grid span {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.kcg-memberform__grid .kcg-span2 {
	grid-column: span 2;
}

.kcg-memberform label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-memberform input,
.kcg-memberform select,
.kcg-memberform textarea {
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
	width: 100%;
	background: var(--kcgr-surface);
}

.kcg-memberform input:disabled {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-memberedit__toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.5rem 0;
}

.kcg-toggle {
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	background: var(--kcgr-surface);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.kcg-toggle--on {
	border-color: var(--kcgr-ok-border-2);
	background: var(--kcgr-ok-bg);
}

.kcg-toggle--off {
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-memberedit__danger {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
}

.kcg-linkbtn--danger {
	font-weight: 600;
}

/* Member dropdown in the header */

.kcg-usermenu {
	position: relative;
}

.kcg-usermenu > summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.kcg-usermenu > summary::-webkit-details-marker {
	display: none;
}

.kcg-usermenu > summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 0.18s ease;
}

.kcg-usermenu[open] > summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.kcg-usermenu__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--kcgr-ink);
	margin-left: 0.1rem;
	flex: none;
}

.kcg-usermenu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 15rem;
	background: var(--kcgr-surface);
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.6rem;
	box-shadow: 0 12px 34px rgba(20, 35, 43, 0.16);
	padding: 0.35rem;
	z-index: 200;
	display: flex;
	flex-direction: column;
}

.kcg-usermenu__panel a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: 0.4rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	font-size: 0.9rem;
	white-space: nowrap;
}

.kcg-usermenu__panel a:hover {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
}

.kcg-usermenu__logout {
	border-top: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	margin-top: 0.25rem;
	padding-top: 0.6rem !important;
	color: var(--kcgr-err-text) !important;
}

/* Header link next to the login button */

.kcg-headerlink {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, var(--kcgr-text));
	white-space: nowrap;
}

.kcg-headerlink:hover {
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link));
}

/* ------------------------------------------------------------- form sizing

   Every field in this plugin is laid out with width:100% inside a flex item.
   Without border-box each one is that 100% *plus* its padding and border, so
   it hangs about 20px over the edge of its cell: labels no longer line up
   with the field below them and the button on the end of a row is drawn on
   top of the last input. */

.kcg-filters input,
.kcg-filters select,
.kcg-item__book input,
.kcg-cal input,
.kcg-memberform input,
.kcg-memberform select,
.kcg-memberform textarea,
.kcg-inline-form input,
.kcg-login input {
	box-sizing: border-box;
	max-width: 100%;
}

/* A date field carries the browser's own calendar button, which needs more
   room than a text field of the same width. */

.kcg-filters input[type="date"],
.kcg-item__book input[type="date"],
.kcg-cal input[type="date"] {
	min-width: 9.5rem;
}

/* Keep the filter row from squeezing a field so far that its label wraps. */

.kcg-filters__row span {
	min-width: 0;
}

.kcg-filters__submit {
	align-self: flex-end;
}

/* --------------------------------------------------------- range calendar */

/* The picker always sits inside a container that already draws its own rule
   above it, so it brings no border of its own. In a card it takes the full
   width and the button follows underneath. */

.kcg-cal {
	flex: 1 1 100%;
	min-width: 0;
}

.kcg-cal__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.kcg-cal__fields span {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1 1 8rem;
	min-width: 0;
}

.kcg-cal__fields label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
}

.kcg-cal__fields input {
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	font: inherit;
	width: 100%;
}

.kcg-cal__ui {
	--kcg-cal-gap: 2px;
	user-select: none;
}

.kcg-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.kcg-cal__month {
	font-size: 0.95rem;
	font-weight: 700;
}

.kcg-cal__nav {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	border-radius: 0.4rem;
	background: var(--kcgr-surface);
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.kcg-cal__nav:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary, var(--kcgr-accent-2));
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
}

.kcg-cal__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.kcg-cal__week,
.kcg-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--kcg-cal-gap);
}

.kcg-cal__week span {
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	padding-bottom: 0.2rem;
}

.kcg-cal__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0.35rem;
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	font: inherit;
	font-size: 0.82rem;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.kcg-cal__day:hover:not(:disabled) {
	background: var(--kcgr-cal-hover);
}

.kcg-cal__day--blank {
	background: none;
	cursor: default;
}

.kcg-cal__day.is-past {
	background: none;
	color: var(--kcgr-cal-past);
	cursor: default;
}

/* Already reserved — the same red the availability strip uses. */

.kcg-cal__day.is-taken {
	background: repeating-linear-gradient(
		135deg,
		var(--kcgr-err-bg-2),
		var(--kcgr-err-bg-2) 3px,
		var(--kcgr-err-bg-3) 3px,
		var(--kcgr-err-bg-3) 6px
	);
	color: var(--kcgr-cal-taken);
	cursor: not-allowed;
}

.kcg-cal__day.is-start,
.kcg-cal__day.is-end {
	background: var(--wp--preset--color--primary, var(--kcgr-accent-2));
	color: var(--kcgr-on-accent);
	font-weight: 700;
}

.kcg-cal__day.is-in-range {
	background: var(--kcgr-cal-range);
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
}

.kcg-cal__day.is-in-range.is-end {
	background: var(--wp--preset--color--primary, var(--kcgr-accent-2));
	color: var(--kcgr-on-accent);
	font-weight: 700;
}

.kcg-cal__day:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
	outline-offset: 1px;
}

.kcg-cal__summary {
	margin: 0.55rem 0 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted, var(--kcgr-muted));
	min-height: 1.2em;
}

.kcg-cal__summary.is-set {
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
	font-weight: 600;
}

/* In the filter bar the picker sits in a disclosure rather than in a card. */

.kcg-filters .kcg-cal {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.kcg-filters .kcg-cal__ui {
	max-width: 19rem;
}

.kcg-daterange {
	flex: 1 1 100%;
	margin-top: 0.25rem;
}

.kcg-daterange > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
	list-style: none;
	padding: 0.35rem 0;
}

.kcg-daterange > summary::-webkit-details-marker {
	display: none;
}

.kcg-daterange > summary::before {
	content: "▸";
	transition: transform 0.15s ease;
}

.kcg-daterange[open] > summary::before {
	transform: rotate(90deg);
}

.kcg-daterange__body {
	padding: 0.75rem 0 0.25rem;
}

/* --------------------------------------------------- filter bar, take two

   A flex row bottom-aligns its items, so a search field that is a pixel
   taller than the select next to it lifts its own label out of line with the
   others, and the button is pushed onto a line of its own once the fields
   grow. A grid gives every control the same cell height and keeps the button
   where it belongs. */

.kcg-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.9rem;
	align-items: end;
}

.kcg-filters input,
.kcg-filters select {
	height: 2.7rem;
}

.kcg-filters__submit .kcg-btn {
	width: 100%;
	height: 2.7rem;
	padding-top: 0;
	padding-bottom: 0;
}

/* ------------------------------------------------------ calendar, take two

   Without a cap the seven columns share the whole card and each day becomes
   a 90px square. The old picker was 220px wide; this stays close to that. */

.kcg-cal__ui {
	max-width: 20rem;
}

.kcg-cal__day {
	aspect-ratio: auto;
	height: 2.05rem;
	font-size: 0.8rem;
}

.kcg-cal__week span {
	font-size: 0.62rem;
}

/* The button after the picker starts a new line of its own. */

.kcg-item__book .kcg-btn {
	margin-top: 0.75rem;
}

/* display:flex on the wrapper beats the browser's own [hidden] rule, so the
   plain fields stayed on screen underneath the calendar that replaced them. */

.kcg-cal__fields[hidden] {
	display: none;
}

/* The filter button should not stretch across a whole grid column. */

.kcg-filters__submit {
	justify-self: start;
}

.kcg-filters__submit .kcg-btn {
	width: auto;
	min-width: 7.5rem;
}

/* The quantity field sits alone on its line under the calendar and would
   otherwise stretch across the whole card for a number between 1 and 5. */

.kcg-item__book span:has(input[name="amount"]) {
	flex: 0 0 auto;
	width: 7rem;
}

.kcg-item__book input[name="amount"] {
	max-width: 7rem;
}

/* ------------------------------------------------------------ ghost button

   A second action next to a primary one — "Zurücksetzen" beside "Filtern".
   It used to be a bare underlined link, which read as an afterthought rather
   than as the other half of a pair. */

.kcg-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
	border: 1px solid var(--wp--preset--color--border, var(--kcgr-border));
	box-shadow: none;
}

.kcg-btn--ghost:hover,
.kcg-btn--ghost:focus-visible {
	background: var(--wp--preset--color--surface, var(--kcgr-surface-2));
	border-color: var(--wp--preset--color--primary, var(--kcgr-accent-2));
	color: var(--wp--preset--color--primary-dark, var(--kcgr-link-2));
}

/* Filter and reset belong together on one line. */

.kcg-filters__submit {
	display: flex;
	gap: 0.5rem;
	align-items: end;
}

.kcg-filters__submit .kcg-btn {
	flex: 0 0 auto;
}

.kcg-admin__filters .kcg-btn--ghost {
	white-space: nowrap;
}

/* ------------------------------------------------------------- tab bar

   The bar was only as wide as its three pills, so it sat visibly narrower
   than the filter box and the item list below it. */

.kcg-tabs {
	width: auto;
}

/* ---------------------------------------------------- wide member table

   Nineteen columns in a 780px text column meant scrolling sideways to read
   almost anything. This one table steps out of the column and takes the
   width of the window instead, minus a small margin so it does not run into
   the edge of the screen. 100vw counts the scrollbar, hence the subtraction. */

.kcg-tablewrap--wide {
	width: calc(100vw - 3rem);
	max-width: calc(100vw - 3rem);
	margin-left: calc(50% - 50vw + 1.5rem);
}

@media (max-width: 782px) {
	.kcg-tablewrap--wide {
		width: auto;
		max-width: 100%;
		margin-left: 0;
	}
}

/* .kcg-filters__row span sets flex-direction:column so each label sits above
   its field. The submit cell is such a span, so its two buttons inherited the
   column and stacked. */

.kcg-filters__submit {
	flex-direction: row;
	flex-wrap: wrap;
}

/* `.kcg-filters__row span` carries one class and one element, which outranks
   a lone class — so the column direction kept winning. Match the row too. */

.kcg-filters__row .kcg-filters__submit {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5rem;
}

/* Two buttons do not fit in one grid cell next to each other, so give them a
   row of their own under the fields. */

.kcg-filters__row .kcg-filters__submit {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 0.25rem;
}

/* A link styled as a button still carried the theme's underline, which is
   what kept it reading as a link. */

a.kcg-btn,
a.kcg-btn:hover,
a.kcg-btn:focus-visible {
	text-decoration: none;
}

/* The default border is nearly invisible on white; a ghost button needs an
   outline you can actually see next to a solid one. */

.kcg-btn--ghost {
	border-color: var(--kcgr-ghost-border);
	font-weight: 600;
}

/* The remove control on a single position. It sits at the end of the line and
   stays quiet until the row is hovered, so a list of positions still reads as
   a list rather than as a row of buttons. */

/* The cost cell already pushes itself right with margin-left:auto, so this
   only needs to follow it. */

.kcg-detail__remove {
	display: flex;
	align-items: center;
	flex: none;
}

.kcg-detail__remove .kcg-inline-form {
	margin: 0;
}

.kcg-detail__remove .kcg-iconbtn {
	opacity: 0.45;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.kcg-detail__list li:hover .kcg-detail__remove .kcg-iconbtn,
.kcg-detail__remove .kcg-iconbtn:focus-visible {
	opacity: 1;
}

/* Touch screens have no hover, so never hide it there. */

@media (hover: none) {
	.kcg-detail__remove .kcg-iconbtn {
		opacity: 1;
	}
}

/* -------------------------------------------------- the item grid

   Four across when there is room for four, then three, two, one. Written as
   a ladder rather than auto-fill with a max() cap: the cap has to be a
   calc() inside a max(), and this engine has already been caught not
   resolving one of those. Fixed steps are duller and they work.

   The columns are 1fr, so within a step the cards still stretch and shrink
   with the window. */

.kcg-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 34rem) {
	.kcg-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56rem) {
	.kcg-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 80rem) {
	.kcg-items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------- room to put them in

   Four boats side by side need more than the 780px text column the page
   gives an article, so the whole rental panel steps out of it -- tabs,
   panels and tables together, which is what keeps them the same width as
   each other.

   Each step names a fixed width and a margin of exactly half that width, so
   the panel is centred at every size. Widths written as calc(50% - 50vw)
   or with a min() inside a calc() were both tried first: the first cannot
   be capped without going off-centre, and this engine has already been
   caught leaving the second unresolved.

   The !important is not decoration. This panel is a direct child of a
   constrained block layout, and WordPress writes margin-left:auto on those
   with !important of its own; without it the panel keeps the column's left
   edge and hangs 200px off the right of the page. The wide member table
   escapes the same rule only by sitting a level deeper. */

@media (min-width: 64rem) {
	.kcg-member {
		width: 60rem;
		max-width: 60rem;
		margin-left: calc(50% - 30rem) !important;
		margin-right: auto;
	}
}

@media (min-width: 80rem) {
	.kcg-member {
		width: 76rem;
		max-width: 76rem;
		margin-left: calc(50% - 38rem) !important;
		margin-right: auto;
	}
}

/* -------------------------------------------------- categories

   The boats are grouped under the category they belong to, so the page
   reads like the boathouse rather than one alphabet of eighty hulls. */

.kcg-catgroup {
	margin-bottom: 2rem;
}

.kcg-catgroup__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--kcgr-border);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------- the folded picker

   The month grid used to sit open on every card. It is only wanted for the
   boat actually being booked, so it hides behind the button that asks for
   it. A <details> gives the behaviour without a line of script; all this
   does is stop the summary looking like a disclosure triangle and make it
   look like the button it replaces. */

.kcg-item__reserve {
	margin-top: auto;
}

.kcg-item__reserve > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	margin-top: 1rem;
	list-style: none;
	cursor: pointer;
}

.kcg-item__reserve > summary::-webkit-details-marker {
	display: none;
}

.kcg-item__reserve > summary::marker {
	content: "";
}

.kcg-item__reserve > summary:focus-visible {
	outline: 2px solid var(--kcgr-accent-deep);
	outline-offset: 2px;
}

/* Closed, the control is the filled Reservieren button. Open, that button is
   gone: the same element becomes a small quiet link that folds the picker
   away again, and the card's call to action is the submit button at the
   bottom -- so there is never a Reservieren and an In den Warenkorb button
   competing on one card. */

/* `.kcg-item__book span` sets flex-direction: column so each field sits
   under its label, and it carries a class and an element, which outranks a
   lone class -- so the icon stacked on top of the word. Two classes settle
   it. The same rule's flex: 1 1 6rem is why the basis is reset too. */

.kcg-item__book .kcg-item__toggle--open,
.kcg-item__book .kcg-item__toggle--close {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.kcg-item__reserve:not([open]) .kcg-item__toggle--close,
.kcg-item__reserve[open] .kcg-item__toggle--open {
	display: none;
}

.kcg-item__reserve[open] > summary {
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--kcgr-muted);
}

.kcg-item__reserve[open] > summary .kcg-icon {
	width: 0.85rem;
	height: 0.85rem;
}

.kcg-item__reserve[open] > summary:hover {
	color: var(--kcgr-link);
}

.kcg-item__reserve[open] > .kcg-cal {
	margin-top: 0.75rem;
}

/* -------------------------------------------------- the picker's own width

   .kcg-cal carries flex: 1 1 100% so the month grid takes the full width of
   the card. That worked while the picker was a direct child of the form;
   folding it into a <details> put an element between the two, and the
   <details> is what the form now lays out -- with nothing telling it to
   stretch, it shrank to the width of its summary button and took the
   calendar down with it, leaving the right half of the tile empty.

   The cap on the grid goes too. It was there to stop seven columns spreading
   into 90px squares across a full-width card, but the cards are now at most
   a quarter of the panel, so the grid can have all of one. */

.kcg-item__reserve {
	flex: 1 1 100%;
	min-width: 0;
}

.kcg-item__reserve .kcg-cal__ui {
	max-width: none;
}

/* -------------------------------------------------- Bootsverwaltung

   The catalogue with a form in front of it. It borrows the member screen's
   furniture -- filters, table, switch, the "+" disclosure -- so an admin who
   knows one screen already knows this one. */

.kcg-boats .kcg-table--boats td {
	vertical-align: middle;
}

.kcg-boats__thumb {
	width: 60px;
}

.kcg-boats__thumb img {
	display: block;
	width: 60px;
	height: 41px;
	object-fit: cover;
}

.kcg-boats__nothumb {
	display: block;
	width: 60px;
	height: 41px;
	background: var(--kcgr-surface-2);
	border: 1px dashed var(--kcgr-border);
}

/* A retired boat is still listed -- it has to be, or it could never be put
   back -- but it should not read as part of the catalogue. */

.kcg-boats tr.is-off td {
	opacity: 0.55;
}

.kcg-boats tr.is-off td strong {
	text-decoration: line-through;
}

.kcg-boats__inline {
	margin: 0;
}

.kcg-boats td small {
	display: block;
	color: var(--kcgr-muted);
	font-size: 0.8rem;
}

/* ---------------------------------------------------------- the edit form */

.kcg-boatform__group {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem 0.35rem;
	border: 1px solid var(--kcgr-border);
	background: var(--kcgr-surface);
}

.kcg-boatform__group legend {
	padding: 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kcgr-muted);
}

.kcg-boatform__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.9rem;
}

.kcg-boatform__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 0.9rem;
}

.kcg-boatform__field label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kcgr-muted);
}

.kcg-boatform__field input,
.kcg-boatform__field select,
.kcg-boatform__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--kcgr-border);
	font: inherit;
	background: var(--kcgr-surface);
	color: inherit;
}

.kcg-boatform__field small {
	color: var(--kcgr-muted);
	font-size: 0.78rem;
}

/* The description is worth more than one column of a four-column grid. */

.kcg-boatform__grid .kcg-boatform__field:has(textarea) {
	grid-column: 1 / -1;
}

.kcg-boatform__image {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.kcg-boatform__image img {
	display: block;
	border: 1px solid var(--kcgr-border);
}

.kcg-boatform__noimage {
	display: grid;
	place-items: center;
	width: 125px;
	height: 85px;
	background: var(--kcgr-surface-2);
	border: 1px dashed var(--kcgr-border);
	color: var(--kcgr-muted);
	font-size: 0.78rem;
}

.kcg-boatform__image .kcg-boatform__field {
	flex: 1 1 16rem;
	margin: 0;
}

.kcg-boatform__flag {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.kcg-boatform__flag label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: inherit;
}

.kcg-boatform__flag input {
	width: auto;
}

.kcg-boatform__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Deleting is separated from saving, and says why when it is not on offer. */

.kcg-boatform__danger {
	margin-top: 2rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--kcgr-err-border);
	background: var(--kcgr-err-bg);
}

.kcg-boatform__danger p {
	margin: 0;
	font-size: 0.9rem;
}

.kcg-boatform__danger form {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin: 0;
}

.kcg-boatform__danger small {
	color: var(--kcgr-muted);
	font-size: 0.8rem;
}

.kcg-btn--danger {
	background: var(--kcgr-danger);
	color: #fff;
}

.kcg-pager {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin: 1rem 0 2rem;
}

/* Page numbers are navigation, not prose, so they take the page's own text
   colour rather than the brand cyan -- which on white measured 4.31. */

.kcg-pager a {
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--kcgr-border);
	text-decoration: none;
	font-size: 0.85rem;
	color: var(--kcgr-text);
}

.kcg-pager a.is-current {
	background: var(--kcgr-ink);
	color: #fff;
	border-color: var(--kcgr-ink);
}

/* ------------------------------------------------------- category rows

   Fourteen categories with two fields each: a full form per row would be
   more furniture than content, so each row is its own small form. The counts
   sit next to the price because changing it changes what every boat in the
   category costs. */

.kcg-boats__hint {
	margin: 0 0 1rem;
	color: var(--kcgr-muted);
	font-size: 0.9rem;
}

.kcg-boats__back {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.kcg-table--cats input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--kcgr-border);
	font: inherit;
	background: var(--kcgr-surface);
	color: inherit;
}

.kcg-table--cats .kcg-catrow__price {
	width: 6rem;
}

.kcg-catrow__count {
	color: var(--kcgr-muted);
	font-variant-numeric: tabular-nums;
}

.kcg-catrow__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.kcg-catrow__delete {
	margin: 0;
}

.kcg-catrow__new .kcg-boatform__grid {
	max-width: 32rem;
}

.kcg-table--cats td {
	border-bottom: 1px solid var(--kcgr-border);
}

/* -------------------------------------------------- item thumbnails

   A line of a reservation shows the thing that was booked rather than a
   generic boat or cart. Small: it is there to be recognised at a glance, not
   studied. */

.kcg-detail__icon img {
	display: block;
	width: 34px;
	height: 23px;
	object-fit: cover;
	border: 1px solid var(--kcgr-border);
}

.kcg-detail__icon {
	display: inline-flex;
	align-items: center;
	min-width: 34px;
}

/* -------------------------------------------------- the account panel, contained

   The panel hangs off the right edge of the account button, which is right
   while the button sits on the right of the header. Below the point where
   the header wraps, the button moves left and the panel -- 253px wide --
   ran off the left edge of the screen, taking the first characters of every
   entry with it.

   Anchoring it to the left of the button instead keeps it on screen, and the
   max-width stops a long entry pushing it off the other side. */

@media (max-width: 830px) {
	.kcg-usermenu__panel {
		right: auto;
		left: 0;
		max-width: calc(100vw - 2rem);
	}
}


/* -------------------------------------------------- colours

   Written as tokens rather than in place, so the scheme can be swapped
   without hunting through two thousand lines for the next white box. The
   light values are the ones this stylesheet was built with.

   Which token a colour became depended on what it was for: white lettering
   on a cyan button is still white in the dark, while a white panel is not. */

:root {
	--kcgr-surface: #fff;
	--kcgr-surface-2: #f1f7fa;
	--kcgr-surface-3: #e9f1f5;
	--kcgr-surface-4: #e7edf1;
	--kcgr-surface-tint: #fbfdfe;
	--kcgr-surface-tint2: #f7fafc;
	--kcgr-surface-tint3: #f2f7fa;
	--kcgr-surface-tint4: #eef3f6;
	--kcgr-surface-cool: #eaf6fb;
	--kcgr-ink: #14232b;
	--kcgr-border: #dbe6ec;
	--kcgr-border-strong: #c3d4de;
	--kcgr-border-faint: #edf3f6;
	--kcgr-text: #14232b;
	--kcgr-muted: #5b6b75;
	--kcgr-faint: #97a6b0;
	--kcgr-faint-2: #b7c4cc;
	--kcgr-faint-3: #dbe6ec;
	--kcgr-link: #0284a8;
	--kcgr-link-2: #1c6f95;
	--kcgr-accent: #03c4eb;
	--kcgr-accent-2: #2f9fd0;
	--kcgr-accent-deep: #0284a8;
	--kcgr-scrim: rgba(255, 255, 255, 0.92);
	--kcgr-ok-bg: #eef7f0;
	--kcgr-ok-bg-2: #dff3e6;
	--kcgr-ok-bg-3: #d8f3e0;
	--kcgr-ok-border: #bfe0c8;
	--kcgr-ok-border-2: #7fc79a;
	--kcgr-ok-text: #1c5c2e;
	--kcgr-ok-text-2: #1c7a3e;
	--kcgr-ok-text-3: #1f6b3c;
	--kcgr-ok-text-4: #2b6b43;
	--kcgr-err-bg: #fdeeee;
	--kcgr-err-bg-2: #fbe4e4;
	--kcgr-err-bg-3: #f6d4d4;
	--kcgr-err-bg-4: #f6dcdc;
	--kcgr-err-bg-5: #fbdada;
	--kcgr-err-border: #f0c2c2;
	--kcgr-err-border-2: #d88;
	--kcgr-err-text: #a33;
	--kcgr-err-text-2: #8a1f1f;
	--kcgr-err-text-3: #96393c;
	--kcgr-danger: #a33333;
	--kcgr-knob: #ffffff;
	--kcgr-warn-bg: #fdf6ea;
	--kcgr-warn-bg-2: #fffaf2;
	--kcgr-warn-bg-3: #fdeccd;
	--kcgr-warn-border: #f0d3a2;
	--kcgr-warn-text: #8a5a13;
	--kcgr-warn-solid: #d98324;
	--kcgr-cal-hover: #d8eef8;
	--kcgr-cal-range: #cfe9f6;
	--kcgr-cal-past: #b8c4cc;
	--kcgr-cal-taken: #b06a6a;
	--kcgr-ghost-border: #b7cdd9;
	--kcgr-tab-active-bg: #14232b;
	--kcgr-tab-active-fg: #ffffff;
	--kcgr-on-accent: #14232b;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--kcgr-surface: #16242c;
		--kcgr-surface-2: #1b2c35;
		--kcgr-surface-3: #203540;
		--kcgr-surface-4: #243b46;
		--kcgr-surface-tint: #18272f;
		--kcgr-surface-tint2: #1a2a33;
		--kcgr-surface-tint3: #1b2c35;
		--kcgr-surface-tint4: #1d2e38;
		--kcgr-surface-cool: #1c333e;
		--kcgr-ink: #24333c;
		--kcgr-border: #2c4049;
		--kcgr-border-strong: #3a525e;
		--kcgr-border-faint: #26383f;
		--kcgr-text: #e6edf1;
		--kcgr-muted: #9fb2bd;
		--kcgr-faint: #8299a5;
		--kcgr-faint-2: #7b909c;
		--kcgr-faint-3: #5b727e;
		--kcgr-link: #5fcbea;
		--kcgr-link-2: #7ac6e2;
		--kcgr-accent: #03c4eb;
		--kcgr-accent-2: #2f9fd0;
		--kcgr-accent-deep: #0284a8;
		--kcgr-scrim: rgba(17, 27, 33, 0.94);
		--kcgr-ok-bg: #15301f;
		--kcgr-ok-bg-2: #1a3a26;
		--kcgr-ok-bg-3: #1d4029;
		--kcgr-ok-border: #2f6440;
		--kcgr-ok-border-2: #3f8259;
		--kcgr-ok-text: #82d8a3;
		--kcgr-ok-text-2: #8fdcac;
		--kcgr-ok-text-3: #88d9a6;
		--kcgr-ok-text-4: #8ed9ab;
		--kcgr-err-bg: #3a1d1d;
		--kcgr-err-bg-2: #422222;
		--kcgr-err-bg-3: #4a2626;
		--kcgr-err-bg-4: #472424;
		--kcgr-err-bg-5: #4a2222;
		--kcgr-err-border: #6d3838;
		--kcgr-err-border-2: #8a4c4c;
		--kcgr-err-text: #f0a3a3;
		--kcgr-err-text-2: #f2acac;
		--kcgr-err-text-3: #eda6a8;
		--kcgr-danger: #b03a3a;
		--kcgr-knob: #e8eef2;
		--kcgr-warn-bg: #33270f;
		--kcgr-warn-bg-2: #2e2413;
		--kcgr-warn-bg-3: #3d2e12;
		--kcgr-warn-border: #6d5524;
		--kcgr-warn-text: #e8c07e;
		--kcgr-warn-solid: #d98324;
		--kcgr-cal-hover: #1f3a46;
		--kcgr-cal-range: #1d3f4f;
		--kcgr-cal-past: #7b929e;
		--kcgr-cal-taken: #e09a9a;
		--kcgr-ghost-border: #3d5764;
		--kcgr-tab-active-bg: #e6edf1;
		--kcgr-tab-active-fg: #111b21;
		--kcgr-on-accent: #14232b;
	}
}

:root[data-theme="dark"] {
	--kcgr-surface: #16242c;
	--kcgr-surface-2: #1b2c35;
	--kcgr-surface-3: #203540;
	--kcgr-surface-4: #243b46;
	--kcgr-surface-tint: #18272f;
	--kcgr-surface-tint2: #1a2a33;
	--kcgr-surface-tint3: #1b2c35;
	--kcgr-surface-tint4: #1d2e38;
	--kcgr-surface-cool: #1c333e;
	--kcgr-ink: #24333c;
	--kcgr-border: #2c4049;
	--kcgr-border-strong: #3a525e;
	--kcgr-border-faint: #26383f;
	--kcgr-text: #e6edf1;
	--kcgr-muted: #9fb2bd;
	--kcgr-faint: #8299a5;
	--kcgr-faint-2: #7b909c;
	--kcgr-faint-3: #5b727e;
	--kcgr-link: #5fcbea;
	--kcgr-link-2: #7ac6e2;
	--kcgr-accent: #03c4eb;
	--kcgr-accent-2: #2f9fd0;
	--kcgr-accent-deep: #0284a8;
	--kcgr-scrim: rgba(17, 27, 33, 0.94);
	--kcgr-ok-bg: #15301f;
	--kcgr-ok-bg-2: #1a3a26;
	--kcgr-ok-bg-3: #1d4029;
	--kcgr-ok-border: #2f6440;
	--kcgr-ok-border-2: #3f8259;
	--kcgr-ok-text: #82d8a3;
	--kcgr-ok-text-2: #8fdcac;
	--kcgr-ok-text-3: #88d9a6;
	--kcgr-ok-text-4: #8ed9ab;
	--kcgr-err-bg: #3a1d1d;
	--kcgr-err-bg-2: #422222;
	--kcgr-err-bg-3: #4a2626;
	--kcgr-err-bg-4: #472424;
	--kcgr-err-bg-5: #4a2222;
	--kcgr-err-border: #6d3838;
	--kcgr-err-border-2: #8a4c4c;
	--kcgr-err-text: #f0a3a3;
	--kcgr-err-text-2: #f2acac;
	--kcgr-err-text-3: #eda6a8;
	--kcgr-danger: #b03a3a;
	--kcgr-knob: #e8eef2;
	--kcgr-warn-bg: #33270f;
	--kcgr-warn-bg-2: #2e2413;
	--kcgr-warn-bg-3: #3d2e12;
	--kcgr-warn-border: #6d5524;
	--kcgr-warn-text: #e8c07e;
	--kcgr-warn-solid: #d98324;
	--kcgr-cal-hover: #1f3a46;
	--kcgr-cal-range: #1d3f4f;
	--kcgr-cal-past: #7b929e;
	--kcgr-cal-taken: #e09a9a;
	--kcgr-ghost-border: #3d5764;
	--kcgr-tab-active-bg: #e6edf1;
	--kcgr-tab-active-fg: #111b21;
	--kcgr-on-accent: #14232b;
}