/*
 * NF Coach Booking – Schüler-Kalender
 * Anpassen im Theme / Beaver Builder (Zusätzliches CSS), z. B.:
 *   .nfb { --nfb-ink: #222; --nfb-paper: #fff; --nfb-radius: 14px; }
 */
.nfb {
	--nfb-ink: currentColor;
	--nfb-muted: color-mix(in srgb, currentColor 62%, transparent);
	--nfb-line: color-mix(in srgb, currentColor 14%, transparent);
	--nfb-soft: color-mix(in srgb, currentColor 5%, transparent);
	--nfb-paper: transparent;
	--nfb-err: #b3261e;
	--nfb-radius: 12px;
	--nfb-default: #3b7d6e;
	container-type: inline-size;
	max-width: 64rem;
	margin: 1.5rem 0;
	font: inherit;
	color: inherit;
	line-height: 1.45;
}
.nfb *, .nfb *::before, .nfb *::after { box-sizing: border-box; }
.nfb, .nfb * { hyphens: manual; -webkit-hyphens: manual; word-break: normal; }
.nfb button { font: inherit; color: inherit; cursor: pointer; }
.nfb button:disabled { cursor: default; }
.nfb :focus-visible { outline: 2px solid var(--c, var(--nfb-default)); outline-offset: 2px; }
.nfb .nfb-h { margin: 0 0 .35em; font-size: 1.25em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.nfb .nfb-h:focus { outline: none; }
.nfb .nfb-sub { margin: 0 0 1em; color: var(--nfb-muted); }
.nfb .nfb-hint { margin: .9em 0 0; font-size: .88em; color: var(--nfb-muted); }
.nfb .nfb-msg { margin: .6em 0; }
.nfb .nfb-err { color: var(--nfb-err); }
.nfb .nfb-loading { color: var(--nfb-muted); }

/* ---------- Layout ---------- */
.nfb .nfb-app { display: grid; grid-template-columns: minmax(13rem, 17rem) 1fr; gap: clamp(1rem, 3cqi, 2.25rem); align-items: start; }
.nfb .nfb-main { min-width: 0; }
.nfb .nfb-solo { max-width: 34rem; }

/* ---------- Sidebar: coaches ---------- */
.nfb .nfb-side { position: sticky; top: 1rem; }
.nfb .nfb-side-h { margin: 0 0 .7rem; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--nfb-muted); }
.nfb .nfb-coaches { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.nfb .nfb-coach {
	display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
	padding: .55rem .65rem; border: 1px solid transparent; border-radius: var(--nfb-radius); background: none;
	transition: background .15s, border-color .15s;
}
.nfb .nfb-coach:hover { background: var(--nfb-soft); }
.nfb .nfb-coach.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.nfb .nfb-coach-t { display: grid; min-width: 0; }
.nfb .nfb-coach-t strong { font-weight: 600; }
.nfb .nfb-coach-t small { font-size: .82em; color: var(--nfb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfb .nfb-all { margin: .6rem 0 0 .65rem; }
.nfb .nfb-side .nfb-hint { margin-left: .65rem; }

.nfb .nfb-av {
	flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center; font-size: .82em; font-weight: 700; letter-spacing: .02em;
	background: var(--c); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
}
.nfb .nfb-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfb .nfb-av-lg { width: 3.1rem; height: 3.1rem; font-size: .95em; }

/* ---------- Month ---------- */
.nfb .nfb-mhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.nfb .nfb-mhead .nfb-h { margin: 0; font-size: 1.15em; }
.nfb .nfb-nav {
	width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--nfb-line); background: none; font-size: 1.25em; line-height: 1;
}
.nfb .nfb-nav:hover:not(:disabled) { background: var(--nfb-soft); }
.nfb .nfb-nav:disabled { opacity: .3; }

.nfb .nfb-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, 1cqi, 8px); }
.nfb .nfb-grid.is-loading .nfb-cell { animation: nfb-pulse 1.2s ease-in-out infinite; }
@keyframes nfb-pulse { 50% { opacity: .45; } }
.nfb .nfb-wd { padding: 0 0 .3rem; text-align: center; font-size: .78em; font-weight: 600; color: var(--nfb-muted); }
.nfb .nfb-cell {
	position: relative; isolation: isolate; aspect-ratio: 1 / 1; min-height: 2.6rem;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	border: 1px solid transparent; border-radius: var(--nfb-radius); background: none; padding: 0;
	color: color-mix(in srgb, currentColor 35%, transparent);
	transition: transform .15s, box-shadow .2s;
}
.nfb .nfb-cell.is-empty { visibility: hidden; }
.nfb .nfb-n { font-variant-numeric: tabular-nums; font-size: .95em; }
.nfb .nfb-dots { display: flex; gap: 3px; height: 6px; }
.nfb .nfb-dots i { width: 6px; height: 6px; border-radius: 50%; }

/* Free days glow in the colour(s) of the coaches who are there */
.nfb .nfb-cell.is-free {
	color: inherit; font-weight: 650;
	border-color: color-mix(in srgb, var(--c1) 45%, transparent);
	box-shadow: 0 0 0 0 transparent, 0 2px 14px -4px color-mix(in srgb, var(--c1) 55%, transparent);
}
.nfb .nfb-cell.is-free::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: var(--g); opacity: .17; transition: opacity .15s;
}
.nfb .nfb-cell.is-free:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--c1) 70%, transparent); }
.nfb .nfb-cell.is-free:hover::before { opacity: .3; }
.nfb .nfb-foot { min-height: 2rem; }

/* ---------- Day: pick coach ---------- */
.nfb .nfb-back, .nfb .nfb-link {
	background: none; border: 0; padding: 0; color: inherit; font-weight: 600;
	text-decoration: underline; text-decoration-color: var(--nfb-line); text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.nfb .nfb-back { display: inline-block; margin: 0 0 1rem; font-weight: 500; color: var(--nfb-muted); text-decoration: none; }
.nfb .nfb-back:hover, .nfb .nfb-link:hover { text-decoration-color: currentColor; }
.nfb .nfb-pick { display: grid; gap: .6rem; max-width: 34rem; }
.nfb .nfb-card {
	display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
	padding: .8rem 1rem; border: 1px solid var(--nfb-line); border-left: 4px solid var(--c); border-radius: var(--nfb-radius); background: none;
	transition: background .15s, border-color .15s;
}
.nfb .nfb-card:hover { background: color-mix(in srgb, var(--c) 8%, transparent); border-color: var(--c); }
.nfb .nfb-card-t { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.nfb .nfb-card-t small { font-size: .85em; color: var(--nfb-muted); }
.nfb .nfb-arrow { font-size: 1.2em; color: var(--c); }

/* ---------- Times ---------- */
.nfb .nfb-who { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.nfb .nfb-who .nfb-h { margin: 0; }
.nfb .nfb-who .nfb-sub { margin: 0; }
/* ---------- Online vs. vor Ort: immer klar erkennbar ---------- */
.nfb { --nfb-online: #2563eb; --nfb-vienna: #c2410c; }
.nfb .nfb-mode-online { --m: var(--nfb-online); }
.nfb .nfb-mode-vienna { --m: var(--nfb-vienna); }
.nfb .nfb-ic { display: inline-grid; place-items: center; flex: none; }
.nfb .nfb-ic svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nfb .nfb-mode {
	display: flex; align-items: center; gap: .8rem; max-width: 34rem; margin: 0 0 1.1rem; padding: .8rem 1rem;
	border: 2px solid var(--m); border-radius: var(--nfb-radius); background: color-mix(in srgb, var(--m) 9%, transparent);
}
.nfb .nfb-mode .nfb-ic { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--m); color: #fff; font-size: 1.15em; }
.nfb .nfb-mode-t { display: grid; gap: .1rem; min-width: 0; }
.nfb .nfb-mode-t strong { color: var(--m); font-size: 1.12em; font-weight: 750; letter-spacing: -.005em; }
.nfb .nfb-mode-t small { color: var(--nfb-muted); font-size: .88em; }
.nfb .nfb-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.nfb .nfb-tagm { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .8em; font-weight: 650; color: var(--m); background: color-mix(in srgb, var(--m) 11%, transparent); }
.nfb .nfb-want { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; }
.nfb .nfb-want button {
	display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; font-weight: 650; font-size: .95em;
	border: 2px solid color-mix(in srgb, var(--m) 30%, transparent); background: none; color: var(--m);
}
.nfb .nfb-want button.nfb-all-m { --m: color-mix(in srgb, currentColor 80%, transparent); color: inherit; }
.nfb .nfb-want button.is-on { background: var(--m); border-color: var(--m); color: #fff; }
.nfb .nfb-ask { margin: 0 0 .5rem; font-weight: 650; font-size: .95em; }
.nfb .nfb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 34rem; margin: 0 0 1rem; }
.nfb .nfb-seg button {
	display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem .8rem;
	border: 2px solid color-mix(in srgb, var(--m) 35%, transparent); border-radius: var(--nfb-radius); background: none; font-weight: 650; color: var(--m);
}
.nfb .nfb-seg button.is-on { background: var(--m); border-color: var(--m); color: #fff; }
.nfb .nfb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; max-width: 34rem; }
.nfb .nfb-time {
	padding: .65rem .25rem; border-radius: var(--nfb-radius); font-variant-numeric: tabular-nums; font-weight: 600;
	white-space: nowrap; overflow: visible; line-height: 1.2; letter-spacing: 0; min-width: 0;
	border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent);
	transition: background .12s, color .12s;
}
@media (hover: hover) { .nfb .nfb-time:hover { background: var(--c); color: #fff; border-color: var(--c); } }
.nfb .nfb-time:active, .nfb .nfb-time:focus-visible { background: var(--c); color: #fff; border-color: var(--c); }

/* ---------- Form ---------- */
.nfb .nfb-sum { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; margin: .4rem 0 1.2rem; border-radius: var(--nfb-radius); background: color-mix(in srgb, var(--c) 9%, transparent); max-width: 34rem; }
.nfb .nfb-sum div { display: grid; }
.nfb .nfb-sum small { color: var(--nfb-muted); }
.nfb .nfb-form { display: grid; gap: 1rem; max-width: 34rem; }
.nfb .nfb-f { display: grid; gap: .35rem; }
.nfb .nfb-f > span { font-weight: 600; font-size: .95em; }
.nfb .nfb-f em { font-style: normal; font-weight: 400; color: var(--nfb-muted); }
.nfb .nfb-form input[type=text], .nfb .nfb-form input[type=email], .nfb .nfb-form textarea {
	width: 100%; padding: .7rem .85rem; font: inherit; color: inherit; background: var(--nfb-paper);
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: var(--nfb-radius);
}
.nfb .nfb-form textarea { resize: vertical; min-height: 6rem; }
.nfb .nfb-form input:focus, .nfb .nfb-form textarea:focus { outline: 2px solid color-mix(in srgb, currentColor 30%, transparent); outline-offset: 1px; }
.nfb .nfb-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92em; }
.nfb .nfb-check input { margin-top: .22em; width: 1.05em; height: 1.05em; flex: none; }
.nfb .nfb-check a { color: inherit; }
.nfb .nfb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nfb .nfb-primary {
	justify-self: start; padding: .8rem 1.5rem; border: 0; border-radius: 999px;
	background: var(--c, var(--nfb-default)); color: #fff; font-weight: 650; transition: filter .15s;
}
.nfb .nfb-primary:hover:not(:disabled) { filter: brightness(1.08); }
.nfb .nfb-primary:disabled { opacity: .6; }
.nfb .nfb-danger { background: var(--nfb-err); }

/* ---------- Done ---------- */
.nfb .nfb-done { max-width: 34rem; }
.nfb .nfb-ok {
	width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: .8rem;
	background: var(--c, var(--nfb-default)); color: #fff; font-size: 1.4rem;
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--c, var(--nfb-default)) 15%, transparent);
}

/* ---------- Narrow containers (mobile, schmale Beaver-Builder-Spalten) ---------- */
@container (max-width: 640px) {
	.nfb .nfb-app { grid-template-columns: 1fr; }
	.nfb .nfb-side { position: static; }
	.nfb .nfb-side-h, .nfb .nfb-side .nfb-hint { display: none; }
	.nfb .nfb-coaches { display: flex; gap: .45rem; overflow-x: auto; padding: 2px 2px .4rem; scrollbar-width: none; }
	.nfb .nfb-coaches li { flex: none; }
	.nfb .nfb-coach { border-color: var(--nfb-line); border-radius: 999px; padding: .3rem .85rem .3rem .3rem; gap: .5rem; }
	.nfb .nfb-coach .nfb-av { width: 1.9rem; height: 1.9rem; font-size: .7em; }
	.nfb .nfb-coach-t small { display: none; }
	.nfb .nfb-all { margin: .2rem 0 0; font-size: .9em; }
	.nfb .nfb-cell { aspect-ratio: auto; height: 3rem; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.nfb * { transition: none !important; animation: none !important; }
}