/* Studio Classes & Schedule — weekly schedule block. */
.stcls-schedule {
	background: var(--stcls-bg);
	color: var(--stcls-text);
	font-family: var(--stcls-font-body, inherit);
	padding: var(--stcls-pad, 56px clamp(20px, 5vw, 56px));
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.stcls-schedule .stcls-head { display: flex; flex-direction: column; gap: 10px; }
.stcls-schedule .stcls-kicker {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stcls-accent-text);
}
.stcls-schedule .stcls-heading {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	text-transform: var(--stcls-tt-display, none);
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.05;
	margin: 0;
	color: var(--stcls-text);
}

/* List layout */
.stcls-list { display: flex; flex-direction: column; border-top: 1px solid var(--stcls-line); }
.stcls-day-heading {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	text-transform: var(--stcls-tt-display, none);
	font-size: 20px;
	color: var(--stcls-text);
	padding: 26px 0 8px;
}
.stcls-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 190px 84px;
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--stcls-line);
	color: var(--stcls-text);
	text-decoration: none;
}
a.stcls-row:hover { color: var(--stcls-text); }
a.stcls-row:hover .stcls-row-title { color: var(--stcls-accent-text); }
.stcls-time {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--stcls-accent-text);
}
.stcls-row-title { font-size: 15px; font-weight: 500; line-height: 1.35; transition: color 0.15s ease; }
.stcls-level { color: var(--stcls-muted); font-weight: 400; }
.stcls-teacher { font-size: 14px; color: var(--stcls-muted); }
.stcls-duration {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--stcls-muted);
	text-align: right;
}

/* Week grid layout */
.stcls-week { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.stcls-day-col { flex: 1 1 0; min-width: 185px; display: flex; flex-direction: column; gap: 10px; }
.stcls-day-name {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	text-transform: var(--stcls-tt-display, none);
	font-size: 19px;
	color: var(--stcls-text);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--stcls-accent);
}
.stcls-slot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--stcls-surface);
	border: 1px solid var(--stcls-line);
	padding: 13px;
	color: var(--stcls-text);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
a.stcls-slot:hover { border-color: var(--stcls-accent); color: var(--stcls-text); }
.stcls-slot .stcls-time { font-size: 17px; }
.stcls-slot-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.stcls-slot-meta { font-size: 12px; line-height: 1.35; color: var(--stcls-muted); }

@media (max-width: 640px) {
	.stcls-row { grid-template-columns: 62px minmax(0, 1fr); }
	.stcls-teacher { grid-column: 2; }
	.stcls-duration { display: none; }
	.stcls-time { font-size: 16px; }
}

/* Availability status + notes */
.stcls-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 2px;
	vertical-align: middle;
}
.stcls-pill-full { background: var(--stcls-full-bg); color: var(--stcls-full-fg); }
.stcls-pill-few { background: var(--stcls-warn-bg); color: var(--stcls-warn-fg); }
/* A date the class's own sign-up deadline closed: not full, not cancelled,
   so neither of those colours — its own neutral slate pair from Design.php,
   distinct from the red so "try another date" and "try another class" never
   look alike. */
.stcls-pill-closed { background: var(--stcls-closed-bg); color: var(--stcls-closed-fg); }
.stcls-is-full .stcls-row-title, .stcls-is-full .stcls-slot-title { opacity: 0.75; }
.stcls-note { font-size: 12.5px; font-style: italic; color: var(--stcls-muted); }
.stcls-slot .stcls-pill { align-self: flex-start; margin-top: 2px; }

/* Linked class titles and teacher names (v1.2.0) */
.stcls-row-title a, .stcls-slot-title a { color: inherit; text-decoration: none; }
.stcls-row-title a:hover, .stcls-slot-title a:hover { color: var(--stcls-accent-text); }
.stcls-teacher-link { color: inherit; text-decoration: underline; text-decoration-color: var(--stcls-line); text-underline-offset: 2px; }
.stcls-teacher-link:hover { color: var(--stcls-accent-text); text-decoration-color: var(--stcls-accent-text); }

/* --- Visitor filters ----------------------------------------------------
   Rendered hidden and revealed by assets/filters.js. Every layout in this
   block sets an explicit display, which would beat the browser's own
   [hidden] rule, so the block restates it for everything inside itself.
   ---------------------------------------------------------------------- */

.stcls-schedule [hidden] { display: none !important; } /* The plugin's one !important — accepted baseline, ruled 07.09.2026 (TASKS.md 1.9.8). */

.stcls-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 18px;
	padding-bottom: 4px;
}
.stcls-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stcls-filter-label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stcls-muted);
}
.stcls-filter select {
	font: inherit;
	font-size: 14px;
	color: var(--stcls-text);
	background: var(--stcls-surface);
	border: 1px solid var(--stcls-line);
	border-radius: 3px;
	padding: 8px 10px;
	max-width: 100%;
}
.stcls-filter select:focus-visible,
.stcls-filter-reset:focus-visible { outline: 2px solid var(--stcls-accent); outline-offset: 2px; }

.stcls-filter-reset {
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--stcls-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--stcls-line);
	padding: 0 0 6px;
	margin-bottom: 9px;
	cursor: pointer;
}
.stcls-filter-reset:hover { color: var(--stcls-accent-text); border-bottom-color: var(--stcls-accent); }

.stcls-filter-empty { color: var(--stcls-muted); font-size: 14px; margin: 0; }

@media (max-width: 640px) {
	.stcls-filter { flex: 1 1 100%; }
}

/* --- Photo rows layout (v1.7.0) -----------------------------------------
   A third layout for studios whose teachers are part of the draw: the
   teacher's face on the left, the class and who teaches it in the middle,
   the start time and the facts as tags on the right. Day headings are shared
   with the list layout, so the weekday is not repeated on every row.
   ---------------------------------------------------------------------- */

.stcls-prow {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto auto;
	gap: 6px 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--stcls-line);
	color: var(--stcls-text);
}

/* The photo track, not the disc: it is 60px on every row, one teacher or two,
   so a single face and a pair's first face start at the same x and the left
   edge stays straight. Two discs sit side by side rather than overlapping —
   an overlap needs a ring in the row's background colour, and in theme mode
   that is not a colour this plugin knows. */
.stcls-prow-photo {
	width: 60px;
	display: flex;
	gap: 4px;
	justify-content: flex-start;
	flex: none;
}
/* The disc. A single face keeps the 44px it has always had: the avatar is
   there so a parent recognises who teaches their child, and 20px of face is
   decoration. */
.stcls-prow-face {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--stcls-surface);
	flex: none;
}
.stcls-prow-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
/* A pair is smaller than a single face on purpose: 28px is the largest pair
   the track holds without costing the title column more than the 16px the
   widened track already takes. */
.stcls-prow-photo-2 .stcls-prow-face { width: 28px; height: 28px; }

.stcls-prow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stcls-prow-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.15s ease;
}
.stcls-prow-title a { color: inherit; text-decoration: none; }
.stcls-prow-title a:hover { color: var(--stcls-accent-text); }
.stcls-prow-sub { font-size: 13.5px; line-height: 1.35; color: var(--stcls-muted); }

/* Weekday above the time, right-aligned: this layout is flat, so each row has
   to say which day it is. */
.stcls-prow-when {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
	white-space: nowrap;
}
.stcls-prow-day {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	font-size: 13px;
	color: var(--stcls-text);
}
.stcls-prow-time {
	font-family: var(--stcls-font-display, inherit);
	font-weight: var(--stcls-fw-display, 800);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--stcls-text);
	text-align: right;
	white-space: nowrap;
}

.stcls-prow-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }

/* Sized against .stcls-pill so a status pill sits in the same row of tags
   without looking like a different species. */
.stcls-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	padding: 5px 9px;
	border-radius: 3px;
	background: var(--stcls-surface);
	color: var(--stcls-muted);
	white-space: nowrap;
}
/* The class code is a key people quote, not prose: monospace so the digits
   line up, and outlined rather than filled so it reads as a reference. */
.stcls-tag-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
	background: transparent;
	color: var(--stcls-accent-text);
	border: 1px solid var(--stcls-accent);
}

/* The sign-up panel gets its own line, full width: the form opens downward,
   and squeezing the button in beside the tags leaves it nowhere to grow. */
.stcls-prow > .stcls-rsvp {
	grid-column: 1 / -1;
	margin-top: 6px;
}
.stcls-prow > .stcls-rsvp > summary { width: 100%; text-align: center; box-sizing: border-box; }

.stcls-is-full .stcls-prow-title { opacity: 0.75; }

@media (max-width: 640px) {
	.stcls-prow {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		row-gap: 8px;
	}
	.stcls-prow-photo { width: 56px; }
	.stcls-prow-face { width: 40px; height: 40px; }
	.stcls-prow-photo-2 .stcls-prow-face { width: 26px; height: 26px; }
	/* Tags drop under the title rather than fighting the time for the right
	   edge; the schedule column is 645px on the theme and less on a phone. */
	.stcls-prow-tags { grid-column: 2 / -1; justify-content: flex-start; }
	.stcls-prow-time { font-size: 16px; }
	.stcls-prow-day { font-size: 12px; }
}

/* --- Sign-up (RSVP) panel ------------------------------------------------ */

.stcls-rsvp {
	margin-top: 4px;
	font-size: 14px;
}

/* The list layout is a four-column grid. Start the panel in the title column
   rather than the 88px time column, so the button reads as belonging to its
   class, and let it run to the right edge so the open form has room. */
.stcls-row > .stcls-rsvp {
	grid-column: 2 / -1;
}

/* The per-class deadline line, a sibling printed before the panel. Its own
   margin and size: a bare <p> would inherit the theme's paragraph margin
   and body font size, and margins do not collapse inside a grid or flex
   container, so each such row would grow by a paragraph. Placed exactly as
   .stcls-rsvp is in each layout; .stcls-slot is a flex column and needs no
   grid rule. It prints — it is the same information the owner used to type
   into the Hinweis, which prints too. */
.stcls-schedule p.stcls-rsvp-deadline { display: flex; flex-wrap: wrap; margin: 4px 0 0; }
.stcls-rsvp-deadline .stcls-rsvp-deadline-badge {
	display: inline-block;
	max-width: 100%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 2px;
	background: var(--stcls-accent);
	color: var(--stcls-accent-ink);
}
.stcls-row > .stcls-rsvp-deadline {
	grid-column: 2 / -1;
}
.stcls-prow > .stcls-rsvp-deadline {
	grid-column: 1 / -1;
}

/* The two waiting-list hints (docs/WAITLIST.md section 7), with the
   deadline line's size and colour. .stcls-rsvp-hint is a sibling printed
   after the panel — "Nächster Termin ausgebucht · Warteliste möglich" —
   and is placed in each layout exactly as the deadline line is.
   .stcls-rsvp-wl-hint sits inside the form above the name field; on a
   mixed panel it is printed hidden until a full date is chosen, and
   [hidden] is spelled out because a theme's own p rule would otherwise
   override the user agent's display: none. The waiting-list summary
   (.stcls-rsvp-toggle-waitlist) takes .stcls-rsvp > summary's look as is,
   like the trial-only one, and needs no rule of its own. */
.stcls-rsvp-hint,
.stcls-rsvp-wl-hint {
	font-size: 14px;
	color: var(--stcls-muted);
}
.stcls-rsvp-hint {
	margin: 4px 0 0;
}
.stcls-rsvp-wl-hint {
	margin: 0 0 10px;
}
.stcls-rsvp-wl-hint[hidden] {
	display: none;
}
.stcls-row > .stcls-rsvp-hint {
	grid-column: 2 / -1;
}
.stcls-prow > .stcls-rsvp-hint {
	grid-column: 1 / -1;
}

/* Sized for its 44px tap target, and intentionally larger than the row's
   static pills and duration text (both 11px) beside it. */
.stcls-rsvp > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 44px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: var(--stcls-accent-text, var(--stcls-accent));
	list-style: none;
}

/* Two halves — Sign up | Trial class — inside the one summary. Ties
   .stcls-rsvp > summary on specificity and follows it, so it wins; the
   .stcls-prow and .stcls-slot summary rules outrank both and still apply.
   With one visible half (the trial half hidden by a stale-page refresh) the
   padding moves to the child and the summary renders as the plain button. */
summary.stcls-rsvp-two {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
}
.stcls-rsvp-two .stcls-rsvp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 44px;
	padding: 5px 10px;
	border: 1px solid currentColor;
	border-radius: 2px;
	text-align: center;
}
.stcls-rsvp-two .stcls-rsvp-btn:hover { border-color: var(--stcls-accent); }
.stcls-rsvp-two:focus-visible .stcls-rsvp-btn { border-color: var(--stcls-accent); }
.stcls-prow .stcls-rsvp-btn { flex: 1; }

/* Visually hidden "or" between the halves, and the form's second live
   region (.stcls-rsvp-live, created by assets/rsvp.js) that announces the
   change into and out of waiting-list mode without printing the hint a
   second time. The plugin's CSS did not define the class before, and a
   theme without it would print the word. */
.stcls-rsvp .stcls-sr-only {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.stcls-rsvp-type {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
.stcls-rsvp-type legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.stcls-rsvp-type-option { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.stcls-rsvp-type-option input { margin: 0; }

/* The trial-only button (a class with Probestunde = Ja and Anmeldung =
   Nein) is a plain summary carrying .stcls-rsvp-toggle-trial: it takes
   .stcls-rsvp > summary's look as is, and needs no rule of its own. */
/* "9 € pro Person · bezahlt wird am Tag der Stunde vor Ort" above the
   trial-only form's submit. */
.stcls-rsvp-price { margin: 0 0 10px; font-size: 14px; color: var(--stcls-muted); }

.stcls-rsvp > summary::-webkit-details-marker {
	display: none;
}

.stcls-rsvp > summary:hover,
.stcls-rsvp > summary:focus-visible {
	border-color: var(--stcls-accent);
}

.stcls-rsvp[open] > summary {
	margin-bottom: 8px;
}

/* In the week layout the card is already a column; keep the button off the
   full card width so it does not read as a footer. */
.stcls-slot > .stcls-rsvp > summary {
	align-self: flex-start;
}

.stcls-rsvp-body {
	max-width: 34rem;
	padding: 14px 16px;
	border: 1px solid var(--stcls-line);
	border-radius: 10px;
	background: var(--stcls-surface);
}

.stcls-rsvp-dates {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.stcls-rsvp-dates legend {
	padding: 0;
	margin-bottom: 6px;
	font-weight: 600;
}

.stcls-rsvp-date {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: nowrap;
	padding: 4px 0;
}

.stcls-rsvp-date > input {
	flex: 0 0 auto;
	margin: 0;
}

.stcls-rsvp-date label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	cursor: pointer;
	margin: 0;
}

.stcls-rsvp-date.stcls-is-closed label {
	cursor: default;
	opacity: 0.55;
}

.stcls-rsvp-date.stcls-is-closed .stcls-rsvp-when {
	text-decoration: line-through;
}

.stcls-rsvp-left,
.stcls-rsvp-mine {
	color: var(--stcls-muted);
	font-size: 0.9em;
}

.stcls-rsvp-mine {
	color: var(--stcls-accent-text, var(--stcls-accent));
}

.stcls-rsvp-form p {
	margin: 0 0 10px;
}

.stcls-rsvp-form label {
	display: block;
	margin-bottom: 3px;
}

.stcls-rsvp-form input[type="text"],
.stcls-rsvp-form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 22rem;
	padding: 7px 10px;
	border: 1px solid var(--stcls-line);
	border-radius: 8px;
	background: var(--stcls-bg);
	color: var(--stcls-text);
	font: inherit;
}

.stcls-day-col .stcls-rsvp-form button[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.stcls-rsvp-ack label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.95em;
}

.stcls-rsvp-ack input {
	margin-top: 0.25em;
}

/* The consent text is the second flex item in the label. Without min-width:0
   its automatic minimum is the longest word — "Datenschutzhinweise" — so at the
   185px day column it refuses to shrink and overflows the card instead of
   wrapping. documentElement.lang is "de" sitewide, so hyphens:auto needs no
   lang attribute of its own. */
.stcls-rsvp-ack-text {
	min-width: 0;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* The honeypot. Hidden from people without display:none, which some bots
   check for, and taken out of the tab order and the accessibility tree. */
.stcls-rsvp-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.stcls-rsvp-msg:empty {
	display: none;
}

.stcls-rsvp-msg {
	margin: 0;
	font-weight: 600;
}

@media print {
	.stcls-rsvp,
	.stcls-rsvp-hint,
	.stcls-rsvp-wl-hint {
		display: none;
	}
	.stcls-rsvp-deadline .stcls-rsvp-deadline-badge {
		background: none;
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: normal;
		text-transform: none;
		padding: 0;
		border-radius: 0;
	}
}