/* Studiobook — Frontend, Designsprache „Reformju" (portiert aus der SaaS 22.08.2026):
   weißer Grund, hellgraue Karten (Radius 16), Kurskarten in Taupe #b2ada5 (Radius 28,
   Bild links randlos), Pill-Buttons mit Wipe-Hover (Füllfarbe via --wipe), Weinrot
   als Markenfarbe. --stb-brand/--stb-ink kommen pro Studio aus den Einstellungen.
   Kurskarten stehen auf der hellen Cremefläche --stb-taupe, Text darauf in --stb-ink. */

.stb {
	--stb-brand: #6d5548;
	--stb-ink: #2a2522;
	--stb-taupe: #f0eae6;
	--stb-card: #f7f3f0;
	--stb-muted: #6f635b;
	--stb-line: #e4dcd5;
	--stb-radius: 16px;
	max-width: 960px; margin: 0 auto; color: var(--stb-ink); font-size: 16px; line-height: 1.65;
}
.stb * { box-sizing: border-box; }
/* Theme-Überschriften (Serife) haben im Buchungssystem nichts verloren */
.stb h1, .stb h2, .stb h3, .stb h4, .stb h5 { font-family: inherit; }
.stb-account, .stb-calendar { max-width: 1100px; }
.stb-auth { max-width: 480px; }
.stb-auth--wide { max-width: 680px; }

.stb-eyebrow { letter-spacing: .16em; text-transform: uppercase; font-size: .72rem;
	color: var(--stb-muted); font-weight: 600; margin: 0 0 .4em; }
.stb-title { line-height: 1.15; margin: 0 0 .55em; font-weight: 600; font-size: 2rem; letter-spacing: -.01em; }
.stb-intro { color: var(--stb-muted); margin: 0 0 1.1em; }
.stb-memberno { margin: -.2em 0 0; font-size: .78rem; letter-spacing: .06em; color: var(--stb-muted);
	font-variant-numeric: tabular-nums; }
.faint { color: var(--stb-muted); }

/* ---------- Auth ---------- */
.stb-auth { background: var(--stb-card); padding: 30px 28px; border-radius: var(--stb-radius); }
.stb-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.stb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stb-field { display: flex; flex-direction: column; gap: 6px; }
.stb-field > span { font-size: .82rem; font-weight: 500; color: var(--stb-ink); }
.stb-field > span small { color: var(--stb-muted); font-weight: 400; }
.stb-field input, .stb-field select { width: 100%; padding: 13px 15px; border: 1px solid var(--stb-line);
	border-radius: 12px; font: inherit; background: #fff; color: var(--stb-ink); }
.stb-field input:focus, .stb-field select:focus { outline: 2px solid var(--stb-brand); outline-offset: 0; border-color: var(--stb-brand); }
.stb-check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--stb-ink); line-height: 1.5; }
.stb-check input { margin-top: 4px; }
.stb-check a { color: var(--stb-brand); font-weight: 500; }

/* ---------- Buttons: Pills mit Wipe von links nach rechts ---------- */
.stb-btn { --wipe: var(--stb-ink);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px; border: 1px solid transparent; background: var(--stb-brand); color: #fff;
	font-size: .88rem; font-weight: 500; line-height: 1; border-radius: 999px;
	cursor: pointer; text-decoration: none; text-align: center;
	position: relative; overflow: hidden; z-index: 0; transition: color .2s ease, border-color .3s ease; }
.stb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--wipe); transform: scaleX(0); transform-origin: left;
	transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.stb-btn:hover::before { transform: scaleX(1); }
.stb-btn--primary { background: var(--stb-brand); color: #fff; }
.stb-btn--ghost { background: #fff; color: var(--stb-ink); border-color: var(--stb-line); --wipe: var(--stb-brand); }
.stb-btn--ghost:hover { color: #fff; }
.stb-btn--sm { padding: 11px 18px; font-size: .82rem; }
.stb-btn:disabled { background: var(--stb-line); color: #5a504a; cursor: not-allowed; }
.stb-btn:disabled::before { display: none; }

.stb-notice { padding: 14px 18px; margin-bottom: 16px; font-size: .92rem; border-radius: 14px;
	background: color-mix(in srgb, var(--stb-brand) 10%, #fff); color: var(--stb-ink); font-weight: 500; }
.stb-notice a { color: var(--stb-brand); font-weight: 600; }
.stb-links { margin-top: 18px; font-size: .9rem; display: flex; flex-direction: column; gap: 8px; }
.stb-links a { color: var(--stb-brand); font-weight: 500; }

/* ---------- Account ---------- */
.stb-account__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
	margin-bottom: 20px; }
.stb-account__head .stb-title { margin: 0; }
.stb-account__bal { display: flex; align-items: center; gap: 12px; }
.stb-balance { background: var(--stb-taupe); color: var(--stb-ink); padding: 11px 18px; border-radius: 999px;
	font-size: .82rem; font-weight: 600; white-space: nowrap; }

.stb-panel { background: var(--stb-card); border-radius: var(--stb-radius); padding: clamp(20px, 3vw, 30px); margin-bottom: 20px; }
.stb-panel > .stb-eyebrow { color: var(--stb-muted); }

/* Paket-Kacheln */
.stb-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.stb-pkg { background: #fff; border-radius: var(--stb-radius); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.stb-pkg__label { font-weight: 600; font-size: 1.15rem; }
.stb-pkg__credits { color: var(--stb-muted); font-size: .88rem; }
.stb-pkg__valid { color: var(--stb-muted); font-size: .78rem; }
.stb-pkg__price { font-weight: 700; font-size: 1.5rem; margin: 10px 0 12px; }
.stb-pkg .stb-btn { width: 100%; }

.stb-seg { display: flex; gap: 10px; margin-bottom: 4px; }
.stb-seg label { flex: 1; background: #fff; border: 1px solid var(--stb-line); border-radius: 12px; padding: 12px; text-align: center;
	font-size: .85rem; cursor: pointer; font-weight: 500; }
.stb-seg input { margin-right: 6px; }

.stb-pay { margin-top: 16px; padding: 16px 18px; background: #fff; border-radius: 14px; font-size: .88rem; }
.stb-pay__hint { font-size: .84rem; color: var(--stb-muted); margin: 0 0 12px; }
.stb-pay .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.stb-pay .row span { color: var(--stb-muted); }
.stb-pay .row b { text-align: right; }
.stb-empty { color: var(--stb-muted); font-size: .92rem; }

.stb-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 8px; }
.stb-table th, .stb-table td { text-align: left; padding: 10px 8px; }
.stb-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stb-muted); font-weight: 600; }
.stb-table tbody tr { background: #fff; }
.stb-table tbody tr td:first-child { border-radius: 12px 0 0 12px; }
.stb-table tbody tr td:last-child { border-radius: 0 12px 12px 0; }
.stb-table tbody tr + tr td { border-top: 6px solid var(--stb-card); }
.stb-status { font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.stb-status--pending { background: #f6e9d2; color: #8a5a12; }
.stb-status--confirmed { background: #d9ead9; color: #2f6d3f; }
.stb-invlink { font-weight: 600; color: var(--stb-brand); text-decoration: none; white-space: nowrap; }
.stb-invlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kursseite ---------- */
.stb-cal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
	margin-bottom: 20px; }
.stb-cal__head .stb-title { margin: 0; }

/* Umschalter Liste/Kalender: Gleiter federt wie der Elementares-Schalter.
   Sticky unter dem Hero (280px + Bühnen-Abstand); das weiße Band liegt als
   ::before am Wrapper, damit es nicht die Kontur des Schalters übermalt. */
/* Einrastposition = natürliche Position (Hero 294 + Abstand 60): der Block
   bewegt sich beim Scrollen keinen Millimeter; das Band deckt bis zum Hero. */
.stb-viewtoggle-wrap { position: sticky; top: 358px; z-index: 80;
	display: flex; flex-direction: column; align-items: center; gap: 12px; margin: -46px 0 22px; }
.stb-viewtoggle-wrap::before { content: ""; position: absolute; inset: -64px calc(50% - 50vw) -14px;
	background: #fff; z-index: -1; }
.stb-viewtoggle { display: grid; grid-template-columns: repeat(2, 1fr); width: fit-content;
	background: #fff; border: 1px solid var(--stb-taupe); border-radius: 999px; padding: 4px; gap: 4px; position: relative; }
.stb-viewtoggle::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px;
	width: calc(50% - 6px); background: var(--stb-brand); border-radius: 999px;
	transition: transform .5s cubic-bezier(.32, 1.5, .55, 1); will-change: transform; }
.stb-view--kalender .stb-viewtoggle::after { transform: translateX(calc(100% + 4px)); }
.stb-viewtoggle button { position: relative; z-index: 1; background: transparent; border: 0; cursor: pointer;
	color: var(--stb-muted); padding: 11px 24px; font: inherit; font-size: .88rem; font-weight: 500; line-height: 1;
	border-radius: 999px; transition: color .35s ease, transform .35s cubic-bezier(.32, 1.5, .55, 1); }
.stb-viewtoggle button:active { transform: scale(.94); }
.stb-viewtoggle button.is-active { color: #fff; }
.stb-view--liste .stb-pane--kalender, .stb-view--kalender .stb-pane--liste { display: none; }

.stb-weeknav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0; }
/* Wochenwechsel nur im Kalender — die Liste läuft fortlaufend durch */
.stb-view--liste .stb-weeknav { display: none; }
.stb-weeknav__label { font-size: .95rem; font-weight: 600; min-width: 180px; text-align: center; }
.stb-weeknav__label small { color: var(--stb-muted); font-weight: 400; margin-left: 6px; }
.stb-weeknav .stb-navbtn { width: 36px; height: 36px; border-radius: 999px; display: inline-flex;
	align-items: center; justify-content: center; background: #fff; border: 1px solid var(--stb-taupe);
	color: var(--stb-ink); text-decoration: none; line-height: 1; }
.stb-weeknav a.stb-navbtn:hover { background: var(--stb-taupe); color: var(--stb-ink); }
.stb-weeknav .stb-navbtn.is-disabled { opacity: .35; }
.stb-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.stb-filter select { padding: 9px 14px; border: 1px solid var(--stb-line); border-radius: 999px; background: #fff; font: inherit; font-size: .88rem; }

.stb-day { margin-bottom: 26px; }
.stb-day__hdr { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 10px; }
.stb-day__w { font-weight: 600; font-size: 1.05rem; }
.stb-day__d { color: var(--stb-muted); font-size: .92rem; }

/* Kurskarte: Taupe, Bild links randlos, 31px-Rahmen oben/unten */
.stb-course { position: relative; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; align-content: start;
	column-gap: 20px; row-gap: 8px; padding: 0 24px 0 0; border-radius: 28px; margin-bottom: 12px;
	background: var(--stb-taupe); color: var(--stb-ink); }
/* Bild/Platzhalter absolut: füllt IMMER die volle Kartenhöhe, Spalte 1 hält den Platz frei */
.stb-course__img { position: absolute; left: 0; top: 0; width: 220px; height: 100%;
	object-fit: cover; border-radius: 28px 0 0 28px; float: none; margin: 0; }
.stb-course__imgph { position: absolute; left: 0; top: 0; width: 220px; height: 100%;
	border-radius: 28px 0 0 28px; background: color-mix(in srgb, var(--stb-brand) 30%, var(--stb-taupe));
	display: flex; align-items: center; justify-content: center; color: var(--stb-ink); font-weight: 700; font-size: 1.6rem; }
.stb-course__titlerow { grid-column: 2; grid-row: 1; align-self: end; margin: 31px 0 0 16px;
	display: flex; align-items: center; gap: 8px; }
.stb-course__title { font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
.stb-course__titlerow .stb-plus { margin-left: 8px; }
.stb-course__meta { grid-column: 2; grid-row: 2; align-self: start; margin: 5px 0 31px 16px;
	color: var(--stb-muted); font-size: 1rem; display: block; }
.stb-course__desc { display: none; }
.stb-course__side { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; margin-top: 31px;
	display: inline-flex; align-items: center; gap: 8px; }
.stb-course__action { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; margin-bottom: 31px;
	display: inline-flex; align-items: center; gap: 10px; }
.stb-course:hover { background: var(--stb-taupe); }
/* Kompatibilität: alte Kartenstruktur (__time/__main/__right, z. B. Studio-Listen)
   lebt im neuen Taupe-Look weiter, ohne dass jedes Template umgebaut werden muss */
.stb-course__time { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column;
	justify-content: center; padding: 20px 0 20px 24px; font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.stb-course__time small { font-size: .78rem; font-weight: 500; color: var(--stb-muted); margin-top: 3px; }
.stb-course__main { grid-column: 2; grid-row: 1 / 3; padding: 20px 0; min-width: 0; }
.stb-course__main .stb-course__title { font-size: 1.3rem; }
.stb-course__main .stb-course__meta { margin: 4px 0 0; grid-column: auto; grid-row: auto; }
.stb-course__right { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center;
	gap: 10px; flex-wrap: wrap; justify-content: flex-end; justify-self: end; margin: 20px 0; }
/* Die 220px der ersten Spalte sind für das Kursbild der neuen Kartenstruktur.
   In der alten Struktur steht dort nur die Uhrzeit — die Breite fehlt dann dem
   Titel, der zwischen 760px und 1150px auf null zusammenfällt und die Knöpfe
   umbrechen lässt. Deshalb dort eine eigene Spaltenaufteilung. */
.stb-course:has(> .stb-course__time) { grid-template-columns: auto minmax(200px, 1fr) auto; }
.stb-course:has(> .stb-course__time) .stb-course__main { min-width: 200px; }
/* Unter ~1050px reicht die Zeile nicht mehr für Uhrzeit, Titel UND drei Knöpfe
   nebeneinander (nötig wären rund 676px, verfügbar sind bei 768px noch 480).
   Statt eines zufälligen Umbruchs rutscht die Knopfgruppe geschlossen unter
   den Titel — eine Zeile, linksbündig. */
@media (max-width: 1050px) {
	.stb-course:has(> .stb-course__time) { grid-template-columns: auto 1fr; }
	.stb-course:has(> .stb-course__time) .stb-course__main { min-width: 0; }
	.stb-course:has(> .stb-course__time) .stb-course__right {
		grid-column: 1 / -1; grid-row: 3; justify-content: flex-start;
		flex-wrap: nowrap; justify-self: start; margin: 0 0 18px 24px;
	}
}
/* Auf dem Handy greift der allgemeine Umbau der Kurskarte wieder — dafür muss
   die :has()-Regel (Spezifität 0-2-0) hier ausdrücklich zurückgenommen werden,
   sonst gewinnt sie gegen den einfachen Klassenselektor im 760er-Zweig. */
@media (max-width: 760px) {
	/* Hero und dieses Band belegten zusammen 41 % der Bildschirmhöhe und
	   schnitten beim Scrollen ganze Karten weg. Auf dem Handy scrollt es mit. */
	.stb-viewtoggle-wrap { position: static; }
	.stb-viewtoggle-wrap::before { display: none; }
	.stb-course:has(> .stb-course__time) { grid-template-columns: 1fr auto; }
	.stb-course:has(> .stb-course__time) .stb-course__right {
		grid-column: 1 / -1; grid-row: auto; flex-wrap: wrap; margin: 0 0 14px;
	}
}
.stb-course__right form { margin: 0; }

/* Chips in Button-Form */
.stb-spots { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px;
	background: rgba(42, 37, 34, .09); color: var(--stb-ink); font-size: .9rem; font-weight: 600; line-height: 1; text-align: left; }
.stb-spots .n { display: inline; font-size: .9rem; font-weight: 600; color: var(--stb-ink); margin-right: .35em; }
.stb-spots.is-low, .stb-spots.is-low .n { color: #7a4409; }
.stb-spots.is-full, .stb-spots.is-full .n { color: var(--stb-ink); }
.stb-tag { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px;
	background: #fff; color: var(--stb-ink); font-size: .9rem; font-weight: 600; line-height: 1; }
.stb-tag--ok { background: #fff; color: var(--stb-ink); }
.stb-tag--warn { background: #f3cfcf; color: #8a2a2a; }
.stb-tag--wait { background: rgba(42, 37, 34, .09); color: var(--stb-ink); }
.stb-cancelnote { font-size: .78rem; color: var(--stb-muted); text-align: right; max-width: 140px; }

/* Buttons in der Taupe-Karte: rot mit Weiß-Wipe (Umkehrprinzip) */
.stb-course .stb-btn { --wipe: #fff; background: var(--stb-brand); color: #fff; }
.stb-course .stb-btn:hover { color: var(--stb-ink); border-color: var(--stb-taupe); }
.stb-course .stb-btn--ghost { background: #fff; color: var(--stb-ink); border-color: var(--stb-line); --wipe: var(--stb-brand); }
.stb-course .stb-btn--ghost:hover { color: #fff; }
.stb-course .stb-cancelnote { color: var(--stb-muted); }

/* Plus-Button (öffnet Kurs-Panel) */
.stb-plus { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: #fff;
	color: var(--stb-ink); --wipe: var(--stb-brand); display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.2rem; font-weight: 500; line-height: 1; cursor: pointer;
	position: relative; overflow: hidden; z-index: 0; transition: color .2s ease; }
.stb-plus::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wipe);
	transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.stb-plus:hover { color: #fff; }
.stb-plus:hover::before { transform: scaleX(1); }

/* Kurs-Detail-Panel: fährt von rechts ein */
.stb-drawer__scrim { position: fixed; inset: 0; z-index: 99990; background: rgba(14, 13, 12, .4);
	opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.stb-drawer__panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99991; width: min(540px, 92vw);
	background: #fff; color: var(--stb-ink); transform: translateX(100%);
	transition: transform .4s cubic-bezier(.65, 0, .35, 1); padding: 28px 36px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 16px; font-size: 1rem; line-height: 1.65; text-align: left; }
.stb-drawer.is-open .stb-drawer__scrim { opacity: 1; pointer-events: auto; }
.stb-drawer.is-open .stb-drawer__panel { transform: translateX(0); }
.stb-drawer__media { position: relative; margin: -28px -36px 0; }
.stb-drawer__img { display: block; width: 100%; height: 280px; object-fit: cover; }
.stb-drawer__spots { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--stb-ink);
	border-radius: 999px; padding: 11px 20px; font-size: .9rem; font-weight: 500; line-height: 1; }
.stb-drawer__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px;
	padding: 0; border: 0; border-radius: 999px; background: #fff; color: var(--stb-ink); font-size: 1.3rem;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.stb-drawer__panel h3 { margin: 0; font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; }
.stb-drawer__desc { margin: 0; }
.stb-drawer__table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; }
.stb-drawer__table tr { border-bottom: 1px solid var(--stb-line); }
.stb-drawer__table tr:last-child { border-bottom: none; }
.stb-drawer__table th { text-align: left; font-size: inherit; font-weight: 500; color: var(--stb-muted);
	padding: 10px 12px 10px 0; white-space: nowrap; width: 1%; border: 0; }
.stb-drawer__table td { text-align: right; padding: 10px 0; border: 0; white-space: pre-line; }
.stb-drawer__action { position: sticky; bottom: -28px; margin: auto -36px -28px; padding: 16px 36px 24px;
	background: #fff; border-top: 1px solid var(--stb-line); }
.stb-drawer__action .stb-btn { --wipe: #fff; background: var(--stb-brand); color: #fff; }
.stb-drawer__action .stb-btn:hover { color: var(--stb-ink); border-color: var(--stb-taupe); }
.stb-drawer__action .stb-tag { background: var(--stb-card); }

/* Wochenkalender: eine Zeile Mo–So, weinrote Tageslinien */
.stb-calweek { display: grid; grid-template-columns: repeat(7, 1fr); align-items: stretch; }
.stb-calday { display: flex; flex-direction: column; gap: 8px; padding: 14px 9px; border-left: 1px solid var(--stb-brand); }
.stb-calday:first-child { border-left: none; padding-left: 0; }
.stb-calday:last-child { padding-right: 0; }
.stb-calday__head { font-size: .78rem; font-weight: 600; color: var(--stb-muted); display: flex;
	justify-content: space-between; align-items: baseline; padding: 0 4px; }
.stb-calday--today .stb-calday__head { color: var(--stb-brand); }
.stb-calitem { position: relative; background: var(--stb-taupe); color: var(--stb-ink); border-radius: 16px;
	overflow: hidden; font-size: .82rem; line-height: 1.4; display: flex; flex-direction: column; }
.stb-calitem__img { display: block; width: 100%; height: 110px; object-fit: cover; }
/* Ohne Kursbild beginnt direkt der Textkörper — dann darf das Badge nicht
   absolut sitzen, sonst verdeckt es den Kurstitel vollständig. */
.stb-calitem__free { position: static; align-self: flex-start; margin: 10px 0 0 10px; background: #fff; color: var(--stb-ink);
	border-radius: 999px; padding: 11px 14px; font-weight: 500; font-size: .85rem; line-height: 1; }
.stb-calitem__free.is-full { color: var(--stb-muted); }
.stb-calitem:has(.stb-calitem__img) .stb-calitem__free { position: absolute; top: 10px; left: 10px; margin: 0; }
.stb-calitem__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.stb-calitem__name { font-weight: 500; font-size: 1.1rem; line-height: 1.25; }
.stb-calitem__time { font-weight: 600; font-size: .85rem; }
.stb-calitem .stb-btn { align-self: stretch; margin-top: 6px; --wipe: #fff; background: var(--stb-brand); color: #fff; }
.stb-calitem .stb-btn:hover { color: var(--stb-ink); }
.stb-calitem .stb-more { background: transparent; border: 0; color: var(--stb-brand); padding: 0; margin-top: 4px;
	font: inherit; font-size: .8rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
	align-self: center; cursor: pointer; }
.stb-calitem .stb-more:hover { color: var(--stb-ink); }
.stb-calitem .stb-tag { align-self: stretch; justify-content: center; margin-top: 6px; }

/* Bestätigungs-Modal */
.stb-modal { position: fixed; inset: 0; background: rgba(20, 16, 14, .5); display: flex;
	align-items: center; justify-content: center; z-index: 99999; padding: 20px;
	animation: stbfade .15s ease; }
@keyframes stbfade { from { opacity: 0; } to { opacity: 1; } }
.stb-modal__box { background: #fff; border-radius: 18px; max-width: 440px; width: 100%;
	padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.stb-modal__text { margin: 0 0 22px; font-size: 1rem; line-height: 1.55; color: var(--stb-ink); }
.stb-modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Warteliste + Historie */
.stb-course--past { opacity: .75; }
.stb-subhead { font-weight: 600; font-size: 1.15rem; color: var(--stb-ink); margin: 30px 0 12px; }
.stb-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 24px; }
.stb-subnav a { padding: 12px 16px; border-radius: 12px; text-decoration: none;
	font-size: .92rem; font-weight: 500; color: var(--stb-ink); background: transparent; }
.stb-subnav a:hover { background: color-mix(in srgb, var(--stb-taupe) 22%, #fff); }
.stb-subnav a.is-active { background: var(--stb-brand); color: #fff; }
/* Seitenleiste (links) */
.stb-instr { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.stb-instr__main { min-width: 0; }
.stb-subnav--side { flex-direction: column; gap: 6px; margin: 0; position: sticky; top: 24px; }
.stb-subnav--side a { text-align: left; }
.stb-subnav__title { font-weight: 600; font-size: 1.2rem; margin: 0 0 8px; padding: 0 16px; }
.stb-subnav__grouptitle { font-size: .78rem; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--stb-muted); padding: 10px 16px 2px; }
@media (max-width: 700px) {
	/* Liegend gelegt, aber weiter sticky: der Block klebte oben und der Inhalt
	   lief darunter durch. Als Pillen-Wolke muss er mitscrollen. */
	.stb-subnav--side { position: static; top: auto; }
	/* Überschrift und Gruppenlabel sind hier Flex-Items und landeten sonst
	   nebeneinander in einer Zeile. */
	.stb-subnav__title, .stb-subnav__grouptitle { flex: 0 0 100%; }
	.stb-instr { grid-template-columns: 1fr; }
	.stb-subnav--side { flex-direction: row; flex-wrap: wrap; margin-bottom: 20px; }
	.stb-subnav--side a { background: #fff; border: 1px solid var(--stb-taupe); border-radius: 999px; padding: 10px 16px; }
	.stb-subnav--side a.is-active { background: var(--stb-brand); border-color: var(--stb-brand); }
}
.stb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; }
.stb-kpi { background: var(--stb-card); border-radius: var(--stb-radius); padding: 20px; }
.stb-kpi__v { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stb-kpi__l { font-size: .78rem; color: var(--stb-muted); font-weight: 500; margin-top: 5px; }
.stb-attendees { grid-column: 1 / -1; margin: 0 24px 18px; padding-top: 12px; border-top: 1px solid var(--stb-line); font-size: .88rem; }
.stb-attendees ul { margin: 8px 0 0; padding-left: 18px; }
.stb-attendees li { margin: 2px 0; }

/* --- Einladen / Empfehlung --- */
.stb-invite { display: flex; align-items: center; gap: 14px; background: var(--stb-card); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }
.stb-invite__gift { font-size: 1.8rem; line-height: 1; }
.stb-invite strong { display: block; }
.stb-invite span { color: var(--stb-muted); font-size: .92rem; }
.stb-invite-lead { color: var(--stb-muted); margin: 0 0 6px; }
.stb-copyrow { display: flex; gap: 8px; align-items: center; }
.stb-copyinput { flex: 1; font-family: inherit; }
.stb-copy.is-copied { background: #226941 !important; border-color: #226941 !important; }
.stb-sharebtns { display: flex; gap: 10px; margin-top: 12px; }

/* --- Manuelle Buchung (Studio) --- */
.stb-manualbook { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stb-line); }
.stb-manualbook__lbl { font-size: .82rem; font-weight: 600; color: var(--stb-muted); width: 100%; }
.stb-manualbook select { flex: 1; min-width: 200px; }
.stb-check--inline { margin: 0; white-space: nowrap; }
.stb-manualbook__full { color: var(--stb-muted); font-size: .88rem; margin-top: 12px; }

/* --- Danger-Zone (Konto löschen) --- */
.stb-danger { border: 1px solid #f0c9cf; background: #fdf3f4; }
.stb-eyebrow--danger { color: #b3283a; }
.stb-danger__note { color: #8a5860; font-size: .9rem; margin-bottom: 12px; max-width: 60ch; }
.stb-btn--danger { background: #b3283a; color: #fff; }

@media (max-width: 760px) {
	.stb-row2 { grid-template-columns: 1fr; }
	/* Kurskarte stapelt: Bild volle Breite oben, Fußzeile Chip links / Button rechts */
	.stb-course { grid-template-columns: 1fr auto; padding: 0 18px 18px; column-gap: 10px; }
	/* Bild absolut mit width:100% — bei absoluter Positionierung ist das die
	   volle Kartenbreite (Padding-Box), auch für <img>; Inhalt startet darunter. */
	.stb-course__img, .stb-course__imgph { position: absolute; left: 0; top: 0;
		width: 100%; margin: 0; height: 170px; min-height: 0; border-radius: 28px 28px 0 0; }
	.stb-course__titlerow { grid-column: 1 / -1; grid-row: 2; align-self: auto; margin: 180px 0 0; flex-wrap: wrap; }
	/* Level-Badge oben ins Bild, Plätze-Chip unten rechts ins Bild */
	.stb-course__titlerow .stb-diff { position: absolute; top: 16px; right: 16px; margin: 0; }
	.stb-course__side .stb-spots { position: absolute; top: 122px; right: 12px; margin: 0; }
	.stb-course__meta { grid-column: 1 / -1; grid-row: 3; margin: 0; }
	.stb-course__side { grid-column: 1; grid-row: 4; justify-self: start; align-self: center; margin: 6px 0 0; }
	.stb-course__action { grid-column: 2; grid-row: 4; justify-self: end; align-self: center; margin: 6px 0 0; }
	.stb-cancelnote { max-width: none; text-align: left; }
	.stb-account__head { flex-direction: column; }
	.stb-copyrow { flex-direction: column; align-items: stretch; }
	.stb-sharebtns { flex-wrap: wrap; }
	.stb-calweek { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.stb-calday { border-left: none; padding: 0; }
	.stb-calday--empty { display: none; }
	.stb-viewtoggle-wrap { top: 224px; }
	.stb-viewtoggle-wrap::before { inset: -34px calc(50% - 50vw) -12px; }
}

/* Registrierung: Passwortregeln + Sichtbarkeits-Toggle */
.stb-pwfield { position: relative; display: block; }
.stb-pwfield input { padding-right: 104px; }
.stb-pwtoggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	background: transparent; border: 0; color: var(--stb-muted); font: inherit; font-size: .78rem;
	font-weight: 500; padding: 6px 10px; cursor: pointer; }
.stb-pwtoggle:hover { color: var(--stb-brand); }
.stb-pwrules { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
	font-size: .82rem; color: var(--stb-muted); }
.stb-pwrules li { padding: 2px 0; }
.stb-pwrules li::before { content: "•"; margin-right: 8px; }
.stb-pwrules li.is-ok { color: #2e7d4f; }
.stb-pwrules li.is-ok::before { content: "✓"; }
.stb-pwrules li.is-bad { color: var(--stb-brand); }
.stb-pwrules li.is-bad::before { content: "✕"; }
.stb-pwmismatch { display: block; color: var(--stb-brand); font-size: .8rem; margin-top: 6px; }

/* Level-Badge (weiß ohne Kontur, gleiche Größe wie Chips) + Orts-Tooltip */
.stb-diff { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
	border-radius: 999px; background: #fff; color: var(--stb-ink);
	font-size: .9rem; font-weight: 600; line-height: 1; cursor: default; }
.stb-diff::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--stb-muted); }
.stb-diff--einfach::before { background: #2e7d4f; }
.stb-diff--mittel::before { background: #c8901f; }
.stb-diff--schwer::before { background: var(--stb-brand); }

.stb-tip { position: relative; cursor: help; }
.stb-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
	transform: translateX(-50%); background: var(--stb-ink); color: #fff; font-size: .78rem;
	font-weight: 400; line-height: 1.45; padding: 8px 12px; border-radius: 10px;
	width: max-content; max-width: 240px; white-space: pre-line; text-align: left;
	opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20; }
.stb-tip:hover { z-index: 150; }
.stb-tip:hover::after { opacity: 1; }

/* Drawer-Tabelle: Adresse zweizeilig */
.stb-drawer__table td { white-space: pre-line; }

/* ---------- Kursansicht: Kennzahlen, Teilnehmer, Warteliste, Bearbeiten ---------- */
.stb-detail { grid-column: 1 / -1; display: grid; gap: 22px; padding: 26px 24px 28px;
	background: var(--stb-card); border-top: 1px solid var(--stb-line); }
.stb-detail__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stb-dkpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
	background: #fff; border-radius: 14px; }
.stb-dkpi__v { font-size: 1.45rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.stb-dkpi__l { font-size: .76rem; color: var(--stb-muted); }
.stb-dkpi--money .stb-dkpi__v { color: var(--stb-brand); }
.stb-bar { display: block; height: 5px; margin-top: 9px; border-radius: 999px; background: var(--stb-line); }
.stb-bar i { display: block; height: 100%; border-radius: 999px; background: var(--stb-brand); }

.stb-detail__block { background: #fff; border-radius: var(--stb-radius); padding: 20px 22px 22px; }
.stb-detail__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
	font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--stb-muted); }
.stb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
	padding: 0 7px; border-radius: 999px; background: var(--stb-card); color: var(--stb-ink);
	font-size: .74rem; font-weight: 600; letter-spacing: 0; }
.stb-hint { font-size: .82rem; color: var(--stb-muted); margin: 0 0 12px; }
.stb-muted { color: var(--stb-muted); }
.stb-tablewrap { overflow-x: auto; }
.stb-table--people tbody tr { background: var(--stb-card); }
.stb-table--people td { vertical-align: middle; }
.stb-table__num { text-align: right; white-space: nowrap; }
.stb-table__act { text-align: right; }

.stb-person { display: block; font-weight: 500; }
.stb-person__sub { display: block; font-size: .78rem; color: var(--stb-muted); }

.stb-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
	background: #fff; border: 1px solid var(--stb-line); font-size: .74rem; white-space: nowrap; }
.stb-chip--ok { background: #eef4ee; border-color: #d5e5d5; color: #2f6d3f; }
.stb-chip--warn { background: #f6efe9; border-color: #e4dcd5; color: var(--stb-brand); }

/* Zeilen-Aktionen: kleine, ruhige Knöpfe statt einer Reihe voller Buttons */
.stb-rowacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.stb-rowacts form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.stb-mini { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--stb-line);
	background: #fff; color: var(--stb-ink); font: inherit; font-size: .76rem; line-height: 1.2;
	cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.stb-mini:hover { background: var(--stb-ink); border-color: var(--stb-ink); color: #fff; }
.stb-mini--danger:hover { background: var(--stb-brand); border-color: var(--stb-brand); }
.stb-mini--go { border-color: var(--stb-brand); color: var(--stb-brand); }
.stb-mini--go:hover { background: var(--stb-brand); color: #fff; }
.stb-rowacts__move select { padding: 5px 8px; border: 1px solid var(--stb-line); border-radius: 10px;
	font: inherit; font-size: .76rem; background: #fff; max-width: 180px; }

/* Warteliste als Reihenfolge — die Position ist die wichtigste Information */
.stb-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stb-queue li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
	padding: 11px 14px; background: var(--stb-card); border-radius: 12px; }
.stb-queue__pos { display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 999px; background: var(--stb-ink); color: #fff;
	font-size: .76rem; font-weight: 600; }
.stb-queue__act { display: flex; gap: 6px; justify-content: flex-end; }
.stb-queue__act form { margin: 0; }

.stb-editcourse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stb-editcourse .stb-field--wide { grid-column: 1 / -1; }
.stb-editcourse textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--stb-line);
	border-radius: 12px; font: inherit; background: #fff; color: var(--stb-ink); resize: vertical; }
.stb-editcourse__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stb-editcourse__foot .stb-hint { margin: 0; }

@media (max-width: 860px) {
	.stb-detail { padding: 18px 14px 20px; }
	.stb-detail__kpis { grid-template-columns: repeat(2, 1fr); }
	.stb-editcourse { grid-template-columns: 1fr; }
	.stb-queue li { grid-template-columns: 26px 1fr; }
	.stb-queue__act { grid-column: 1 / -1; justify-content: flex-start; }
	.stb-rowacts { justify-content: flex-start; }
}

/* Gefahrenbereich: löschen/anonymisieren sichtbar abgesetzt vom Rest */
.stb-panel--danger { border: 1px solid #e4dcd5; background: #faf6f3; }
.stb-panel--danger .stb-eyebrow { color: var(--stb-brand); }
.stb-panel--danger .stb-btn { background: #fff; color: var(--stb-brand); border-color: #e4dcd5; --wipe: var(--stb-brand); }
.stb-panel--danger .stb-btn:hover { color: #fff; }

/* Einstellungen: Mailart mit eigenem Hinweistext, Schwierigkeitsstufen */
.stb-mailtype { padding: 12px 14px; margin-bottom: 8px; background: var(--stb-card); border-radius: 12px; }
.stb-mailtype textarea { width: 100%; margin-top: 9px; padding: 10px 12px; border: 1px solid var(--stb-line);
	border-radius: 10px; font: inherit; font-size: .88rem; background: #fff; color: var(--stb-ink); resize: vertical; }
.stb-levelrow { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start;
	padding: 12px 14px; margin-bottom: 8px; background: var(--stb-card); border-radius: 12px; }
.stb-levelrow textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--stb-line);
	border-radius: 10px; font: inherit; font-size: .88rem; background: #fff; color: var(--stb-ink); resize: vertical; }
@media (max-width: 860px) { .stb-levelrow { grid-template-columns: 1fr; } }

/* Leerer Platzhalter, damit ein einzelnes Feld in einer Zweierzeile links stehen bleibt */
.stb-field--spacer { display: block; }
@media (max-width: 640px) { .stb-field--spacer { display: none; } }

/* Kursbild wählen: eigener Knopf statt des nativen Datei-Feldes */
.stb-imgpick { display: block; margin: 0 0 4px; }
.stb-imgpick .stb-field__label { display: block; font-size: .82rem; font-weight: 500; color: var(--stb-ink); margin: 0 0 8px; }
.stb-imgpick .stb-field__label small { color: var(--stb-muted); font-weight: 400; }
.stb-imgpick__row { display: flex; align-items: flex-start; gap: 14px; }
.stb-imgpick__preview { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
	background: var(--stb-card); border: 1px solid var(--stb-line); }
.stb-imgpick__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stb-imgpick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stb-imgpick__file { position: relative; overflow: hidden; cursor: pointer; }
.stb-imgpick__file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.stb-imgpick__name { font-size: .8rem; color: var(--stb-muted); word-break: break-all; max-width: 100%; }

/* Kartenpakete verwalten: ein Block je Paket, Felder nebeneinander, Knöpfe in
   einer Fußzeile. Eigene Klasse, weil .stb-pkg die Kauf-Kacheln im Konto sind. */
.stb-pkgedit { border: 1px solid var(--stb-line); border-radius: 16px; background: #fff; padding: 18px; margin: 0 0 12px; }
.stb-pkgedit .stb-form { margin-top: 0; }
.stb-pkgedit__fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: end; }
.stb-pkgedit__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.stb-pkgedit .stb-check { margin: 4px 0 2px; }
/* Bereits genutzte Einmal-Angebote bleiben sichtbar, aber nicht mehr buchbar */
.stb-pkg--used { opacity: .6; }
.stb-pkg__note { color: var(--stb-muted); font-size: .8rem; margin-top: 8px; }
/* Submit-Knöpfe stehen in ihrer eigenen Breite statt über die ganze Spalte
   gestreckt — außer in den Anmeldekarten, wo die volle Breite gewollt ist. */
.stb-form > .stb-btn { align-self: flex-start; }
.stb-auth .stb-form > .stb-btn { align-self: stretch; }
@media (max-width: 720px) { .stb-pkgedit__fields { grid-template-columns: 1fr; } }

/* Mitglieder suchen: Suchfeld breit, Auswahlfelder daneben, Knöpfe am Ende */
.stb-memberfind { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 4px 0 14px; }
.stb-memberfind .stb-field { margin: 0; }
.stb-memberfind__q { flex: 1 1 240px; min-width: 200px; }
.stb-memberfind .stb-btn { flex: 0 0 auto; }
.stb-blaettern { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.stb-blaettern .stb-hint { margin: 0; }
@media (max-width: 640px) { .stb-memberfind__q { flex-basis: 100%; } }

/* Bestätigungscode: groß und gespreizt, damit sechs Ziffern lesbar bleiben */
.stb-code { font-size: 1.6rem; letter-spacing: .38em; text-align: center; font-weight: 600; }
.stb-verify__again { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--stb-line); }
.stb-verify__again .stb-hint { margin: 0 0 10px; }

/* Zahlweg und Bankdaten im Kaufbereich */
.stb-payway { border: 0; padding: 0; margin: 0 0 16px; }
.stb-payway legend { font-size: .82rem; font-weight: 500; color: var(--stb-ink); padding: 0; margin-bottom: 8px; }
.stb-payway .stb-check { margin: 0 0 6px; }
.stb-bankdaten { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stb-line); }
.stb-bankdaten .stb-table th { font-weight: 600; }

/* Kurskarte ohne Bild: die Uhrzeit füllt die Fläche, die sonst das Bild trägt.
   Ein großer Anfangsbuchstabe sagt niemandem etwas. */
.stb-course__zeit { position: absolute; left: 0; top: 0; width: 220px; height: 100%;
	border-radius: 28px 0 0 28px; background: color-mix(in srgb, var(--stb-brand) 12%, var(--stb-taupe));
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	color: var(--stb-ink); line-height: 1.1; }
.stb-course__zeit strong { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.stb-course__zeit small { font-size: .78rem; font-weight: 500; color: var(--stb-muted); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 760px) {
	.stb-course__zeit { position: static; width: 100%; height: auto; padding: 14px 0;
		border-radius: 28px 28px 0 0; flex-direction: row; gap: 10px; align-items: baseline; justify-content: center; }
}