/*
 * Frontend-Gestaltung der Module (Anmeldung, Kalender, Login, Familienbereich).
 *
 * Was hier gilt, regelt specs/gestaltung.md – die Spec ist die Quelle der
 * Wahrheit, diese Datei ihre Umsetzung.
 *
 * GESTALTUNGSREGELN — bitte einhalten, sie tragen das ganze Stylesheet:
 *
 * 1. Abstände kommen ausschließlich aus der Skala `--smv-s1`…`--smv-s7`
 *    (4-px-Basis). Keine Einzelwerte, keine krummen Zahlen.
 * 2. Vertikaler Rhythmus entsteht über Fluss-Regeln (`> * + *`), nicht über
 *    Einzelmargen an jedem Element. So kann kein Abstand „vergessen" werden,
 *    egal in welcher Reihenfolge Bausteine stehen.
 * 3. Farbe und Schrift kommen aus den Marken, nie aus eigenen Werten. Was eine
 *    Farbe bedeutet, sagt die Marke, an der sie hängt: Erfolg ist
 *    `--smv-success`, nie die Primärfarbe – auch wenn beide grün sind.
 * 4. Rahmen sind immer vollständig. Ein einseitiger Balken (border-left) wird
 *    nirgends gezeichnet – Ausnahme ist die Dreiecksform des Statusmarkers,
 *    dort ist der Rand reine Geometrie. Eine Trennlinie zwischen zwei
 *    Inhalten (Personen im Formular) ist kein Rahmen, sondern eine Linie.
 * 5. Schriftgrößen aus der Typo-Skala, Zeilenhöhen 1.5 (Text) / 1.25 (Titel).
 * 6. Das Theme verändert die Bausteine nicht (gestaltung.md, Regel 4): Jeder
 *    Baustein setzt Schrift, Größe, Schreibweise und Abstände selbst. Einzige
 *    Ausnahme ist der Modultitel `.smv-title` – er ist eine Überschrift der
 *    Seite und wird vom Theme gestaltet.
 * 7. Text ist `--smv-ink`. Gedämpft (`--smv-ink-muted`) wird nur, was
 *    ausdrücklich Nebensache ist: Hinweis, Metadaten, inaktiver Zustand.
 *
 * Mobile-first, WCAG 2.2 AA. Alles unter `.smv` verschachtelt, weil die Module
 * zwischen bestehende Inhalte einer WordPress-Seite gesetzt werden und das
 * Theme nicht überschrieben werden darf. Schriften kommen von der Webseite und
 * werden hier weder geladen noch genannt (P1).
 */

/*
 * Marken – die öffentliche Schnittstelle zur Website (gestaltung.md).
 *
 * Die Grundwerte stehen ohne Spezifität an der Wurzel: Eine Website kann sie
 * an `:root`, `body` oder `.smv` setzen, ihr Wert gewinnt immer – auch über
 * die Vererbung, weil `.smv` die Grundwerte nicht selbst noch einmal setzt.
 * Schriftmarken bleiben ungesetzt und werden mit Ersatzwert gelesen.
 */
:where(:root) {
	--smv-primary: #3d4a5c;
	--smv-secondary: #31527a;
	--smv-free: var(--smv-primary);
	--smv-surface-brand: var(--smv-base);

	--smv-ink: #313140;
	--smv-ink-muted: #55607a;
	--smv-ink-subtle: #687082;
	--smv-line: #e3e6ec;
	--smv-line-strong: #858d9d;
	--smv-white: #ffffff;
	--smv-base: #f3f4f7;

	--smv-success: #2f7a45;
	--smv-info: #2f5d8a;
	--smv-alert: #8a5a00;
	--smv-warn: #b3261e;
}

:where(.smv) {
	/* --- Abstufungen: am Modul aus der Grundfarbe abgeleitet, damit eine
	   Website mit einer Farbe alle Stufen mitbekommt. Einzeln setzbar an
	   `.smv`. ----------------------------------------------------------- */
	--smv-primary-strong: color-mix(in srgb, var(--smv-primary) 85%, #000);
	--smv-primary-deep: color-mix(in srgb, var(--smv-primary) 72%, #000);
	--smv-primary-tint: color-mix(in srgb, var(--smv-primary) 8%, #fff);
	--smv-primary-line: color-mix(in srgb, var(--smv-primary) 28%, #fff);
	--smv-secondary-tint: color-mix(in srgb, var(--smv-secondary) 8%, #fff);
	--smv-secondary-line: color-mix(in srgb, var(--smv-secondary) 28%, #fff);
	--smv-secondary-ring: color-mix(in srgb, var(--smv-secondary) 22%, transparent);
	--smv-free-deep: color-mix(in srgb, var(--smv-free) 72%, #000);

	--smv-success-deep: color-mix(in srgb, var(--smv-success) 75%, #000);
	--smv-success-tint: color-mix(in srgb, var(--smv-success) 8%, #fff);
	--smv-success-line: color-mix(in srgb, var(--smv-success) 28%, #fff);
	--smv-info-deep: color-mix(in srgb, var(--smv-info) 75%, #000);
	--smv-info-tint: color-mix(in srgb, var(--smv-info) 8%, #fff);
	--smv-info-line: color-mix(in srgb, var(--smv-info) 28%, #fff);
	--smv-alert-deep: color-mix(in srgb, var(--smv-alert) 80%, #000);
	--smv-alert-tint: color-mix(in srgb, var(--smv-alert) 7%, #fff);
	--smv-alert-line: color-mix(in srgb, var(--smv-alert) 25%, #fff);
	--smv-warn-deep: color-mix(in srgb, var(--smv-warn) 78%, #000);
	--smv-warn-tint: color-mix(in srgb, var(--smv-warn) 6%, #fff);
	--smv-warn-line: color-mix(in srgb, var(--smv-warn) 25%, #fff);
	--smv-warn-ring: color-mix(in srgb, var(--smv-warn) 16%, transparent);

	/* --- Abstandsskala (4-px-Basis) – intern ------------------------------ */
	--smv-s1: 0.25rem;
	--smv-s2: 0.5rem;
	--smv-s3: 0.75rem;
	--smv-s4: 1rem;
	--smv-s5: 1.5rem;
	--smv-s6: 2rem;
	--smv-s7: 3rem;

	/* --- Rhythmus: genau drei Abstände im Formular ----------------- */
	--smv-gap-field: var(--smv-s2);   /* Label → Eingabe → Hinweis      */
	--smv-gap-flow: var(--smv-s4);    /* zwischen Bausteinen            */
	--smv-gap-block: var(--smv-s5);   /* zwischen Blöcken und Karten    */

	/* --- Typo-Skala ------------------------------------------------ */
	--smv-t-xs: 0.75rem;
	--smv-t-sm: 0.8125rem;
	--smv-t-md: 0.875rem;
	--smv-t-base: 1rem;
	--smv-t-lg: 1.125rem;
	--smv-t-xl: 1.375rem;

	/* --- Radien, Tiefe, Bewegung ----------------------------------- */
	--smv-r-small: 8px;
	--smv-r: 12px;
	--smv-r-large: 16px;
	--smv-r-full: 999px;
	--smv-shadow-1: 0 1px 2px rgba(24, 32, 44, 0.05);
	--smv-shadow-2: 0 6px 20px -6px rgba(24, 32, 44, 0.14);
	--smv-shadow-3: 0 24px 56px -16px rgba(24, 32, 44, 0.30);
	--smv-transition: 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

.smv {
	box-sizing: border-box;
	margin: 0 0 var(--smv-s6);
	color: var(--smv-ink);
	/* Schriftmarken sind ungesetzt (gestaltung.md): ohne Website-Datei erbt
	   das Modul ausdrücklich die Schrift des umgebenden Inhalts. */
	font-family: var(--smv-font, inherit);
	font-size: var(--smv-t-base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.smv *,
.smv *::before,
.smv *::after {
	box-sizing: inherit;
	/* Kein Element bringt eigene Außenabstände mit – der Rhythmus kommt
	   ausschließlich aus den Fluss-Regeln weiter unten. */
	margin: 0;
}

/*
 * Das Theme verändert die Bausteine nicht (gestaltung.md, Regel 4).
 *
 * Themes gestalten Überschriften, `legend` und `label` allgemein – Schrift,
 * Versalien, Sperrung, Abstände, Zierelemente über ::before. Hier werden diese
 * Elemente auf den Text des Moduls zurückgesetzt. Die Stärke (0-2-0) schlägt
 * übliche Theme-Regeln wie `main h2` oder `[type=checkbox] + label`; die
 * Bausteine weiter unten haben dieselbe Stärke und gewinnen durch ihre
 * Reihenfolge. Deshalb muss dieser Block vor den Fluss-Regeln stehen.
 *
 * Der Modultitel ist ausgenommen: Er ist eine Überschrift der Seite und wird
 * vom Theme gestaltet wie jede andere.
 */
.smv :where(h1, h2, h3, h4, h5, h6, legend, label):not(.smv-title) {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	letter-spacing: normal;
	line-height: inherit;
	text-align: inherit;
	text-shadow: none;
	text-transform: none;
}

.smv :where(h1, h2, h3, h4, h5, h6):not(.smv-title) {
	font-weight: 600;
	line-height: 1.3;
}

.smv :where(h1, h2, h3, h4, h5, h6, legend):not(.smv-title)::before,
.smv :where(h1, h2, h3, h4, h5, h6, legend):not(.smv-title)::after {
	content: none;
}

.smv [hidden] {
	display: none !important;
}

/* Umschaltbare Ansichten (Kalender): ohne JavaScript entscheidet der Server. */
.smv .smv-view.smv-hidden,
.smv .smv-hidden {
	display: none;
}

/* Nur für Screenreader – nie display:none, sonst verschwindet der Text. */
.smv .smv-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sprungziele nicht unter einer klebenden Theme-Kopfzeile verstecken – auch
   das Modul selbst, Ziel der Kalender-Navigation (01-02). */
.smv[id],
.smv [id] {
	scroll-margin-top: 5rem;
}

/* ------------------------------------------------------------------ */
/* Fluss: der vertikale Rhythmus des ganzen Moduls                     */
/* ------------------------------------------------------------------ */

/*
 * Regel 2 der Gestaltung: Geschwister bekommen ihren Abstand von hier, nicht
 * von sich selbst. Dadurch ist der Rhythmus unabhängig davon, welche
 * Bausteine ein Template gerade zusammenstellt.
 *
 * Alle Selektoren haben die Stärke 0-2-0 – so viel wie der Schutz gegen
 * Theme-Stile weiter oben, der Überschriften auf `margin: 0` setzt. Weil sie
 * danach stehen, gewinnen sie. Am Modul selbst braucht es dafür die doppelte
 * Klasse; mit `.smv > * + *` allein klebte eine Überschrift direkt unter
 * dem Modul (z. B. „Legende") an ihrem Vorgänger.
 */
.smv.smv > * + *,
.smv .smv-form > * + *,
.smv .smv-section > * + *,
.smv .smv-block > * + *,
.smv .smv-view > * + *,
.smv .smv-picker > * + *,
.smv .smv-picker__children > * + *,
.smv .smv-picker__calendar > * + *,
.smv .smv-picker__chosen > * + *,
.smv .smv-request > * + *,
.smv .smv-week-list > * + * {
	margin-top: var(--smv-gap-flow);
}

/* Eine Überschrift im Fluss gehört zu dem, was nach ihr kommt: mehr Luft
   nach oben als nach unten, sonst steht sie mittig zwischen zwei Blöcken. */
.smv.smv > * + .smv-legend__title,
.smv .smv-picker__calendar > * + .smv-legend__title {
	margin-top: var(--smv-gap-block);
}

.smv.smv > .smv-legend__title + *,
.smv .smv-picker__calendar > .smv-legend__title + * {
	margin-top: var(--smv-s2);
}

/* Karten und Blöcke stehen weiter auseinander als Text im Fluss. */
.smv .smv-form > .smv-section + .smv-section,
.smv .smv-section > .smv-block + .smv-block,
.smv .smv-section > .smv-grid + .smv-block,
.smv .smv-section > .smv-block + .smv-grid {
	margin-top: var(--smv-gap-block);
}

/* ------------------------------------------------------------------ */
/* Typografie                                                          */
/* ------------------------------------------------------------------ */

/* Der Modultitel ist eine Überschrift der Seite, kein Baustein
   (gestaltung.md, Regel 4): Schrift, Größe, Farbe und Zierelemente kommen
   vom Theme. Das Plugin setzt nur den Abstand – über die Fluss-Regeln. */

.smv .smv-subtitle {
	color: var(--smv-ink);
	font-size: var(--smv-t-lg);
	font-weight: 600;
	line-height: 1.3;
}

.smv .smv-intro {
	max-width: 62ch;
	color: var(--smv-ink);
}

.smv .smv-required-hint {
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-sm);
}

.smv .smv-ident,
.smv .smv-nav__ident {
	color: var(--smv-ink-muted);
	font-weight: 500;
}

.smv .smv-empty {
	padding: var(--smv-s6) var(--smv-s4);
	border: 1px dashed var(--smv-line-strong);
	border-radius: var(--smv-r);
	color: var(--smv-ink-subtle);
	text-align: center;
}

.smv .smv-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smv-s3) var(--smv-s4);
	padding: 0;
	list-style: none;
	font-size: var(--smv-t-md);
}

.smv a {
	color: var(--smv-primary-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--smv-transition);
}

.smv a:hover {
	color: var(--smv-ink);
}

.smv :focus-visible {
	outline: 2px solid var(--smv-secondary);
	outline-offset: 2px;
	border-radius: var(--smv-r-small);
}

/* Landepunkte nach dem Absenden (Bestätigung, Fehlerübersicht) bekommen den
   Fokus nur, damit ein Screenreader dort weiterliest. Sie sind keine
   Bedienelemente – ein Rahmen um den ganzen Bereich wäre nur Störung.
   Safari zeichnet ihn bei gesetztem Fokus sonst trotzdem. */
.smv[data-smv-start]:focus,
.smv [data-smv-start]:focus,
.smv [data-smv-error-area]:focus {
	outline: none;
}

/* ------------------------------------------------------------------ */
/* Hinweise, Meldungen, Fehlerübersicht                                */
/* ------------------------------------------------------------------ */

/*
 * Alle vier Bausteine teilen dieselbe Form: voller 1-px-Rahmen, getönte
 * Fläche, gleiche Innenabstände. Nur die Farbe unterscheidet sie – und Grün
 * ist der Erfolgsmeldung vorbehalten.
 */
.smv .smv-box,
.smv .smv-message,
.smv .smv-error-list {
	padding: var(--smv-s3) var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-small);
	background: var(--smv-base);
	font-size: var(--smv-t-md);
}

/* Hinweiskasten: auf der Markenfläche, damit er sich vom Fließtext abhebt
   (gestaltung.md, `--smv-surface-brand`). */
.smv .smv-box {
	border-color: transparent;
	background: var(--smv-surface-brand);
}

.smv .smv-box--warn {
	border-color: var(--smv-alert-line);
	background: var(--smv-alert-tint);
	color: var(--smv-alert-deep);
}

.smv .smv-box--action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--smv-s3);
}

.smv .smv-hints:empty {
	display: none;
}

/* Erfolg ist ein Signal, keine Marke (gestaltung.md) – auch wenn die Marke
   einer Website ebenfalls grün ist. */
.smv .smv-message--success {
	border-color: var(--smv-success-line);
	background: var(--smv-success-tint);
	color: var(--smv-success-deep);
}

.smv .smv-message--hint {
	border-color: var(--smv-info-line);
	background: var(--smv-info-tint);
	color: var(--smv-info-deep);
}

.smv .smv-message--error,
.smv .smv-error-list {
	border-color: var(--smv-warn-line);
	background: var(--smv-warn-tint);
	color: var(--smv-warn-deep);
}

.smv .smv-error-list__title {
	font-size: var(--smv-t-base);
	font-weight: 600;
}

.smv .smv-error-list__list {
	margin-top: var(--smv-s2);
	padding-left: 1.25rem;
}

.smv .smv-error-list__list > li + li {
	margin-top: var(--smv-s1);
}

.smv .smv-error-list__list a {
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* Abschnitte und Blöcke                                               */
/* ------------------------------------------------------------------ */

/*
 * Der Abschnitt ist eine Karte mit Titel INNEN. Früher trug ihn ein
 * `fieldset` mit `legend` – der Browser setzt eine legend auf die Rahmenlinie,
 * wodurch der Titel über der Kartenkante hing. Die Templates verwenden jetzt
 * `<section>` + `<h2>`, damit die Karte oben geschlossen ist und der Abstand
 * planbar bleibt.
 */
.smv .smv-section {
	padding: var(--smv-s5);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-large);
	background: var(--smv-white);
	box-shadow: var(--smv-shadow-1);
}

/* Abschnittstitel: im Plugin ein kleines Label, über die Marken auch eine
   große Überschrift in der Schrift der Website (gestaltung.md). */
.smv .smv-section__title {
	color: var(--smv-section-title-color, var(--smv-ink));
	font-family: var(--smv-font-display, inherit);
	font-size: var(--smv-section-title-size, var(--smv-t-xs));
	font-weight: var(--smv-display-weight, 600);
	line-height: 1.15;
	text-transform: var(--smv-display-transform, none);
	/* Große Titelschriften tragen oben und unten viel Luft; beschnitten auf
	   die Buchstabenhöhe zählt nur der Abstand, den das Plugin setzt. */
	text-box: trim-both cap alphabetic;
}

/* Überschrift → Inhalt: 20 px, etwas weniger als der Innenabstand der Karte
   (24 px). Mehr ließ die Überschrift losgelöst über ihrem Inhalt stehen,
   12 und 16 px wirkten gedrängt. Themes hängen an
   alle Überschriften gern Abstände mit !important (bei den Springmäusen
   5 px) – dagegen hilft nur dasselbe Mittel (Ausnahme wie beim Monatstitel). */
.smv .smv-section__title,
.smv .smv-block__title {
	/* Block, nicht inline-block, wie manche Themes Überschriften setzen:
	   Sonst steht die Überschrift in einer Textzeile, deren Unterlänge
	   noch einmal Abstand darunter legt. */
	display: block;
	/* Nur nach unten mit !important – dort setzen Themes es. Nach oben
	   gelten die Fluss-Regeln; mit `margin: 0 !important` klebte eine
	   Personenüberschrift direkt an der Abschnittsüberschrift darüber. */
	margin-bottom: 0 !important;
}

.smv .smv-section__title {
	margin-top: 0;
}

.smv .smv-section > .smv-section__title + *,
.smv .smv-block > .smv-block__title + * {
	margin-top: calc(var(--smv-s4) + var(--smv-s1));
}

/*
 * Personen in einem Formular (zweites Elternteil, Kind 1, Kind 2,
 * Notfallkontakt …) sind keine Karten in der Karte (gestaltung.md, Regel 8):
 * Jede beginnt mit ihrer Überschrift, und ab der zweiten trennt eine feine
 * Linie sie von dem, was davor steht. Die erste Person eines Abschnitts
 * braucht keine Linie – über ihr steht schon der Abschnittstitel.
 */
.smv .smv-block {
	padding: 0;
	background: none;
}

.smv * + .smv-block {
	padding-top: var(--smv-gap-block);
	border-top: 1px solid var(--smv-line-strong);
}

.smv .smv-block__title {
	color: var(--smv-ink);
	font-size: var(--smv-t-lg);
	font-weight: 600;
	line-height: 1.3;
}

.smv .smv-children > .smv-block + .smv-block {
	margin-top: var(--smv-gap-block);
}

/* ------------------------------------------------------------------ */
/* Felder                                                              */
/* ------------------------------------------------------------------ */

.smv .smv-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--smv-gap-flow);
}

/* Das Raster setzt seine Abstände selbst – die Fluss-Regel darf hier nicht
   zusätzlich greifen. */
.smv .smv-grid > * + * {
	margin-top: 0;
}

.smv .smv-field {
	display: flex;
	flex-direction: column;
	gap: var(--smv-gap-field);
	grid-column: span 12;
	min-width: 0;
}

.smv .smv-label,
.smv .smv-group > .smv-label {
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
	font-weight: 500;
	line-height: 1.3;
}

/* Eine gerenderte legend nimmt nicht am flex-gap des fieldset teil – den
   Abstand zur Liste trägt sie deshalb selbst. Nur sie: ein label im Feld
   bekommt seinen Abstand vom gap, sonst stünde er doppelt da. */
.smv .smv-group > .smv-label {
	margin-bottom: var(--smv-gap-field);
}

.smv .smv-required {
	color: var(--smv-warn);
	font-weight: 600;
}

.smv .smv-input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--smv-line-strong);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
	color: var(--smv-ink);
	font-family: inherit;
	font-size: var(--smv-t-base);
	line-height: 1.4;
	transition: border-color var(--smv-transition), box-shadow var(--smv-transition);
	appearance: none;
}

.smv .smv-input::placeholder {
	color: var(--smv-ink-subtle);
}

.smv .smv-input:hover {
	border-color: var(--smv-ink-subtle);
}

.smv .smv-input:focus {
	border-color: var(--smv-secondary);
	box-shadow: 0 0 0 3px var(--smv-secondary-ring);
	outline: none;
}

.smv .smv-input--multiline {
	min-height: 5.5rem;
	line-height: 1.5;
	resize: vertical;
}

/* Auswahlfeld: eigener Pfeil, damit es zu den Eingabefeldern passt. */
.smv .smv-select {
	padding-right: 2.25rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--smv-ink-muted) 50%),
		linear-gradient(135deg, var(--smv-ink-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.125rem) calc(50% - 1px), calc(100% - 0.75rem) calc(50% - 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.smv .smv-field-hint {
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-sm);
	line-height: 1.4;
}

.smv .smv-field-error {
	color: var(--smv-warn);
	font-size: var(--smv-t-sm);
	font-weight: 500;
	line-height: 1.4;
}

.smv .smv-field--error .smv-input {
	border-color: var(--smv-warn);
	background: var(--smv-warn-tint);
}

.smv .smv-field--error .smv-input:focus {
	box-shadow: 0 0 0 3px var(--smv-warn-ring);
}

/* Kontrollkästchen als anklickbare Zeile – große Trefferfläche (WCAG 2.5.8).
   Die Fläche bleibt neutral; Grün ist Erfolgsmeldungen vorbehalten. */
.smv .smv-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--smv-s3);
	min-height: 2.75rem;
	padding: var(--smv-s3);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
	transition: border-color var(--smv-transition), background var(--smv-transition);
}

.smv .smv-checkbox:hover {
	border-color: var(--smv-line-strong);
	background: var(--smv-base);
}

.smv .smv-checkbox input[type="checkbox"] {
	/* Manche Themes rücken Kästchen per `position: relative; top: …` auf die
	   Grundlinie – neben einer Beschriftung steht der Text dann zu hoch
	   (gestaltung.md, Regel 4). Das Kästchen ist so hoch wie die erste
	   Textzeile und steht damit mittig zu ihr, auch bei mehrzeiligem Text. */
	position: static;
	top: auto;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--smv-primary);
	cursor: pointer;
}

.smv .smv-checkbox label {
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
	line-height: 1.4;
	cursor: pointer;
}

/* Gestrichelt nur dort, wo das Kästchen weitere Felder aufklappt. */
.smv .smv-checkbox:has(input[data-smv-toggle]) {
	border-style: dashed;
}

.smv .smv-field--error .smv-checkbox {
	border-color: var(--smv-warn);
	background: var(--smv-warn-tint);
}

/* Mehrfachauswahl (Wochentage, Kinder): das fieldset trägt keinen eigenen
   Rahmen, die Chips gruppieren optisch genug. */
.smv .smv-group {
	display: flex;
	flex-direction: column;
	gap: var(--smv-gap-field);
	min-width: 0;
	padding: 0;
	border: 0;
}

.smv .smv-group__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smv-s2);
	padding: 0;
	list-style: none;
}

.smv .smv-group__list .smv-checkbox {
	align-items: center;
	min-height: 2.75rem;
	padding: var(--smv-s2) var(--smv-s3);
	border-color: var(--smv-line-strong);
	border-radius: var(--smv-r-small);
}

.smv .smv-group__list .smv-checkbox input {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0;
}

.smv .smv-group__list .smv-checkbox label {
	line-height: 1.2;
}

.smv .smv-group__list .smv-checkbox:has(input:checked) {
	border-color: var(--smv-secondary);
	background: var(--smv-secondary-tint);
}

.smv .smv-group__list label {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Knöpfe                                                              */
/* ------------------------------------------------------------------ */

/* Der Primärknopf trägt die Markenfarbe – das ist eine Handlungsfläche,
   keine Erfolgsaussage. */
.smv .smv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--smv-s2);
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--smv-r-small);
	background: var(--smv-primary);
	color: var(--smv-white);
	font-family: inherit;
	font-size: var(--smv-t-base);
	font-weight: 600;
	/* Regel 4: Themes setzen an <button> gern Versalien und Sperrung –
	   als <a> sähe dieselbe Schaltfläche dann anders aus als als <button>. */
	letter-spacing: normal;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background var(--smv-transition), border-color var(--smv-transition),
		box-shadow var(--smv-transition);
}

.smv .smv-button:hover {
	background: var(--smv-primary-strong);
	color: var(--smv-white);
	box-shadow: var(--smv-shadow-2);
}

.smv .smv-button:active {
	background: var(--smv-primary-deep);
	box-shadow: none;
}

.smv .smv-button[disabled],
.smv .smv-button[aria-disabled="true"] {
	opacity: 0.55;
	box-shadow: none;
	cursor: not-allowed;
}

.smv .smv-button--second {
	border-color: var(--smv-line-strong);
	background: var(--smv-white);
	color: var(--smv-ink);
}

.smv .smv-button--second:hover {
	border-color: var(--smv-ink-subtle);
	background: var(--smv-base);
	color: var(--smv-ink);
}

.smv .smv-button--outline {
	border-color: var(--smv-line-strong);
	background: transparent;
	color: var(--smv-ink);
}

/*
 * Fokus: Das Theme der Seite färbt Schaltflächen im Fokus dunkel ein – auf
 * den hellen Varianten („Weiteres Kind hinzufügen") wurde die dunkle Schrift
 * dadurch unlesbar. Deshalb legen wir den Fokuszustand selbst fest: kräftige
 * Fläche, weiße Schrift. Bewusst auch auf `:focus` und nicht nur
 * `:focus-visible`, weil die Überfärbung auch nach einem Mausklick auftritt.
 */
.smv .smv-button:focus,
.smv .smv-button:focus-visible {
	border-color: var(--smv-secondary);
	background: var(--smv-secondary);
	color: var(--smv-white);
}

.smv .smv-button--outline:hover {
	border-color: var(--smv-ink-subtle);
	background: var(--smv-base);
	color: var(--smv-ink);
}

.smv .smv-button--warn {
	background: var(--smv-warn);
}

.smv .smv-button--warn:hover,
.smv .smv-button--warn:active {
	background: var(--smv-warn-deep);
}

.smv .smv-button--small {
	min-height: 2.25rem;
	padding: 0.3125rem 0.875rem;
	font-size: var(--smv-t-md);
}

.smv .smv-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smv-s3);
}

.smv .smv-inlineform {
	display: inline;
}

/* Absenden bleibt auf dem Telefon erreichbar – eine Leiste mit Oberkante,
   kein Farbverlauf auf eine geratene Hintergrundfarbe. */
.smv .smv-submit {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	margin-top: var(--smv-gap-block);
	padding: var(--smv-s3) 0;
	border-top: 1px solid var(--smv-line);
	background: var(--smv-white);
	box-shadow: 0 -6px 16px -10px rgba(24, 32, 44, 0.35);
}

.smv .smv-submit .smv-button {
	flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Kalender                                                            */
/* ------------------------------------------------------------------ */

.smv .smv-calendar__head {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s3);
}

.smv .smv-calendar__month {
	display: flex;
	align-items: center;
	gap: var(--smv-s2);
}

/* Der Monatstitel trägt die Titelschrift der Website, wenn sie eine setzt
   (gestaltung.md) – ohne sie die Textschrift. */
.smv .smv-calendar__month_title,
.smv .smv-week-list__title,
.smv .smv-picker__month {
	color: var(--smv-secondary);
	font-family: var(--smv-font-display, inherit);
	font-size: var(--smv-t-xl);
	font-weight: var(--smv-display-weight, 600);
	line-height: 1.25;
	text-transform: var(--smv-display-transform, none);
	/* Der Titel steht zwischen Schaltflächen und soll optisch mittig sitzen.
	   Viele Titelschriften tragen oben mehr Luft als unten – ohne den
	   Beschnitt auf die Versalhöhe stünde er zu hoch, je nach Schrift
	   unterschiedlich stark. Browser ohne `text-box` zeigen ihn wie bisher. */
	text-box: trim-both cap alphabetic;
	/* Ausnahme von der Regel „kein !important": Diese Titel stehen immer in
	   einer Zeile mit Schaltflächen und brauchen nie einen Außenabstand.
	   Manche Themes setzen Abstände an allen Überschriften mit !important –
	   dagegen hilft nur dasselbe Mittel, sonst stehen die Titel neben den
	   Schaltflächen schief. */
	margin: 0 !important;
}

/* Die Pfeile sind die häufigste Bedienung im Kalender: mindestens 44 × 44 px
   (gestaltung.md, Regel 3; AK-OEF-14), kräftiger Rand, großes Zeichen. */
.smv .smv-calendar__month .smv-button {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border-width: 2px;
	border-color: var(--smv-primary);
	color: var(--smv-primary);
	font-size: var(--smv-t-xl);
	line-height: 1;
}

/* Darüber, im Fokus und beim Klicken: gefüllt in der Primärfarbe, Zeichen
   weiß – derselbe Kontrast wie bei der Hauptschaltfläche. Der Fokusring
   bleibt zusätzlich sichtbar (`.smv :focus-visible`). */
.smv .smv-calendar__month .smv-button:hover,
.smv .smv-calendar__month .smv-button:focus,
.smv .smv-calendar__month .smv-button:active {
	border-color: var(--smv-primary);
	background: var(--smv-primary);
	color: var(--smv-white);
}

/* Ansichtswechsel als Segmentschalter. */
.smv .smv-switcher {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-full);
	background: var(--smv-base);
}

.smv .smv-switcher__button {
	min-height: 2.25rem;
	padding: 0.375rem 1rem;
	border: 0;
	border-radius: var(--smv-r-full);
	background: transparent;
	color: var(--smv-ink-muted);
	font-family: inherit;
	font-size: var(--smv-t-md);
	font-weight: 500;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background var(--smv-transition), color var(--smv-transition);
}

/* Darüber und im Fokus gefüllt mit weißer Schrift, wie die Monatspfeile.
   Fläche und Schrift setzt das Plugin beide selbst: Im Auswahlkalender sind
   die Hälften <button>, und Themes färben `button:hover` gern ein – dann
   stand dunkle Schrift auf Grün (Regel 4). */
.smv .smv-switcher__button:hover,
.smv .smv-switcher__button:focus-visible {
	background: var(--smv-primary);
	color: var(--smv-white);
}

/* Aktiv ist gefüllt in der Sekundärfarbe: Weiß auf Hellgrau (1,1:1) war als
   Zustand kaum zu erkennen (WCAG 1.4.11 verlangt 3:1). Nicht die
   Primärfarbe – Grün heißt im Kalender „frei" und „gewählt". */
.smv .smv-switcher__button--active,
.smv .smv-switcher__button--active:hover {
	background: var(--smv-secondary);
	color: var(--smv-white);
	font-weight: 600;
}

/* Der Monatskalender ist eine Tabelle (Wochen = Zeilen, Wochentage = Spalten).
   `table-layout: fixed` erzwingt sieben gleich breite Spalten. Nicht auf
   `display: grid` umstellen – das zerlegt die Kopfzeile. */
.smv .smv-month {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: var(--smv-s2);
}

.smv .smv-month th,
.smv .smv-month td {
	padding: 0;
	border: 0;
	vertical-align: top;
}

.smv .smv-month__head {
	padding-bottom: var(--smv-s2);
	color: var(--smv-ink-subtle);
	font-size: var(--smv-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.smv .smv-day {
	border-radius: var(--smv-r-small);
}

.smv .smv-day__content {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--smv-s1);
	width: 100%;
	/* Alle Kacheln gleich hoch (AK-OEF-10) – nicht über `height: 100%` in
	   der Tabellenzelle: Firefox löst das gegen die Zellhöhe auf statt gegen
	   den Inhalt, und Zahl und Wort ragen über den Rand. Gleich hoch werden
	   die Kacheln, weil jede denselben Aufbau trägt: Zahl, Zeichen und ein
	   Statuswort mit fest eingeplanten zwei Zeilen – auch dort, wo Zeichen
	   und Wort unsichtbar sind (vergangene Tage). */
	min-height: 3.25rem;
	padding: var(--smv-s2) var(--smv-s1);
	/* Jede Stufe hat dieselbe Rahmenbreite – nur Farbe oder Transparenz
	   unterscheiden sich. Sonst wäre eine Woche mit freien Tagen höher als
	   eine ohne (AK-OEF-10). */
	border: 2px solid var(--smv-line);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
	color: var(--smv-ink);
	font-family: inherit;
	text-decoration: none;
	transition: border-color var(--smv-transition), box-shadow var(--smv-transition),
		background var(--smv-transition);
}

.smv .smv-day__number {
	font-size: var(--smv-t-base);
	font-weight: 600;
	line-height: 1;
}

/* Zwei Zeilen sind fest eingeplant, damit „frei“ und „nicht verfügbar“
   dieselbe Höhe ergeben – sonst steht in jeder Woche ein anderer Kasten. */
.smv .smv-day__status {
	min-height: calc(2 * var(--smv-t-xs));
	color: var(--smv-ink-subtle);
	font-size: var(--smv-t-xs);
	line-height: 1;
	text-align: center;
}

/* Status: Farbe UND Form UND Text (01-02-anfragekalender.md, P6). */
.smv .smv-marker {
	display: block;
	/* Das Zeichen ist leer und hätte sonst keine Mindesthöhe: In einer
	   Kachel mit fester Höhe (Flexbox) lässt Firefox es auf 0 px schrumpfen,
	   und Kreis, Dreieck und Quadrat verschwinden. */
	flex: none;
	width: 0.6875rem;
	height: 0.6875rem;
}

.smv .smv-marker--free {
	border-radius: var(--smv-r-full);
	background: var(--smv-free);
}

/* Die Ränder sind hier reine Geometrie – so entsteht das Dreieck. */
.smv .smv-marker--full {
	width: 0;
	height: 0;
	background: none;
	border-right: 0.375rem solid transparent;
	border-bottom: 0.6875rem solid var(--smv-warn);
	border-left: 0.375rem solid transparent;
}

.smv .smv-marker--not-bookable {
	border-radius: 2px;
	background: var(--smv-ink-subtle);
}

/* Offen, aber kein gebuchter Wochentag der Familie: dasselbe Quadrat, nur
   umrissen statt gefüllt – die Form unterscheidet die beiden Gründe auch
   ohne Farbe (02-02, P6). */
.smv .smv-marker--not-booked {
	border: 2px solid var(--smv-ink-subtle);
	border-radius: 2px;
	background: none;
}

/*
 * Stufen nach Gewicht (01-02): vergangen → nur die Zahl, nicht verfügbar →
 * flach, frei → Umriss, gewählt (Auswahlkalender) → Füllung. Dieselbe Stufe
 * bedeutet in beiden Kalendern dasselbe.
 */
.smv .smv-day--free .smv-day__content {
	border-color: var(--smv-free);
	box-shadow: var(--smv-shadow-1);
}

.smv .smv-day--free .smv-day__number {
	font-weight: 700;
}

.smv .smv-day--free .smv-day__status {
	color: var(--smv-free-deep);
	font-size: var(--smv-t-sm);
	font-weight: 600;
}

/* Freie Tage sind anklickbar und dürfen sich so anfühlen. */
.smv a.smv-day__content:hover,
.smv button.smv-day__content:hover {
	background: var(--smv-base);
	box-shadow: var(--smv-shadow-2);
}

.smv .smv-day--full .smv-day__content {
	border-color: var(--smv-warn-line);
	background: var(--smv-warn-tint);
}

.smv .smv-day--full .smv-day__status {
	color: var(--smv-warn-deep);
}

.smv .smv-day--not-bookable .smv-day__content {
	border-color: transparent;
	background: var(--smv-base);
	color: var(--smv-ink-subtle);
}

.smv .smv-day--not-bookable .smv-day__number,
.smv .smv-day--past .smv-day__number {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

/* Vergangen ist kein Status, sondern vorbei: nur die Zahl (AK-OEF-12). Form
   und Wort bleiben unsichtbar stehen, damit die Kachel so hoch ist wie die
   übrigen der Woche. */
.smv .smv-day--past .smv-day__content {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.smv .smv-day--past .smv-marker,
.smv .smv-day--past .smv-day__status {
	visibility: hidden;
}

/* „Heute" ist ein Ort, kein Status – Ring statt Farbfläche. */
.smv .smv-day--today .smv-day__content {
	border-color: var(--smv-secondary);
	box-shadow: 0 0 0 2px var(--smv-secondary-ring);
}

.smv .smv-day--adjacent:not(.smv-day--past) {
	opacity: 0.45;
}

/* Legende */
.smv .smv-legend {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s2);
	padding: var(--smv-s3) var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-white);
}

.smv .smv-legend__title {
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
	font-weight: 600;
}

.smv .smv-legend__entry {
	display: inline-flex;
	align-items: center;
	gap: var(--smv-s2);
	margin-right: var(--smv-s5);
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
}

/* ------------------------------------------------------------------ */
/* Meine Anfragen: die Anfrage trägt ihre Tage                         */
/* ------------------------------------------------------------------ */

.smv .smv-requests {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s4);
	padding: 0;
	list-style: none;
}

.smv .smv-request {
	padding: var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-white);
}

.smv .smv-request__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smv-s2) var(--smv-s3);
}

.smv .smv-request__period {
	color: var(--smv-ink);
	font-size: var(--smv-t-lg);
	font-weight: 600;
}

.smv .smv-request__days,
.smv .smv-request__children {
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
}

/* Die Tage stehen eingerückt unter ihrer Anfrage – sie gehören zu ihr. */
.smv .smv-request .smv-bookings {
	margin-top: var(--smv-s3);
	padding-left: var(--smv-s4);
	border-left: 0;
}

/* Listenansicht: eine Woche je Ansicht.
   Schmal: Titel zentriert oben, darunter beide Schaltflächen nebeneinander
   über die volle Breite. Breit: alles in einer Zeile, Titel in der Mitte.
   Die Reihenfolge im HTML bleibt zurück – Titel – vor, für Screenreader. */
.smv .smv-week-list__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--smv-s4) var(--smv-s3);
}

.smv .smv-week-list__title {
	grid-column: 1 / -1;
	grid-row: 1;
	text-align: center;
}

.smv .smv-week-list__nav .smv-button {
	justify-content: center;
	width: 100%;
}

.smv .smv-week-list__days {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s2);
	padding: 0;
	list-style: none;
}

/* Jeder Tag hat denselben Aufbau, auch vergangene: Markierung, darunter
   eingerückt Datum und Status, die Schaltfläche darunter. So stehen alle
   Daten auf einer Kante, egal wie lang der Wochentag ist. */
.smv .smv-week-list__day {
	display: grid;
	/* Feste Breite für Markierung bzw. Kästchen (Auswahlkalender): Sonst
	   stünde das Datum neben dem breiteren Kästchen weiter rechts. */
	grid-template-columns: 1.125rem 1fr;
	justify-items: start;
	align-items: center;
	column-gap: var(--smv-s3);
	row-gap: var(--smv-s1);
	padding: var(--smv-s3) var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-white);
}

.smv .smv-week-list__day > .smv-marker {
	justify-self: center;
}

.smv .smv-week-list__date {
	grid-column: 2;
	font-weight: 500;
}

.smv .smv-week-list__status {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--smv-s2);
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
}

.smv .smv-week-list__day .smv-button {
	grid-column: 2;
	justify-self: start;
	margin-top: var(--smv-s2);
}

/* „Heute" als kleine Plakette hinter dem Datum statt als lose Zeile. */
.smv .smv-week-list__today {
	display: inline-block;
	margin-left: var(--smv-s2);
	padding: 0 var(--smv-s2);
	border-radius: var(--smv-r-full);
	background: var(--smv-secondary-tint);
	color: var(--smv-secondary);
	font-size: var(--smv-t-sm);
	font-weight: 600;
	vertical-align: 0.1em;
}

/* Sechs von sieben Tagen sind typischerweise nicht buchbar. Sie bleiben
   vollständig erkennbar, treten aber zurück – der Blick soll auf den freien
   Tagen landen. */
.smv .smv-week-list__day--not-bookable {
	background: var(--smv-base);
}

.smv .smv-week-list__day--not-bookable .smv-week-list__date,
.smv .smv-week-list__day--not-bookable .smv-week-list__status {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

/* Vergangen: dieselbe Form wie alle Tage, aber ohne Fläche – der Rahmen
   hält die Liste zusammen, statt dass die Tage lose darin stehen. */
.smv .smv-week-list__day--past {
	border-style: dashed;
	background: transparent;
}

.smv .smv-week-list__day--past .smv-week-list__date,
.smv .smv-week-list__day--past .smv-week-list__status {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

.smv .smv-week-list__day--past .smv-marker {
	visibility: hidden;
}

.smv .smv-week-list__day--free {
	border: 2px solid var(--smv-free);
	/* Der dickere Rahmen nimmt seinen Pixel vom Innenabstand, sonst stünde
	   das Datum freier Tage einen Pixel weiter rechts als alle anderen. */
	padding: calc(var(--smv-s3) - 1px) calc(var(--smv-s4) - 1px);
}

.smv .smv-week-list__day--free .smv-week-list__status {
	color: var(--smv-free-deep);
	font-weight: 600;
}

.smv .smv-week-list__day--full {
	border-color: var(--smv-warn-line);
	background: var(--smv-warn-tint);
}

/* Nicht gebucht (nur im Auswahlkalender): flach wie nicht verfügbar,
   unterschieden durch Form und Wort. */
.smv .smv-week-list__day--not-booked {
	background: var(--smv-base);
}

.smv .smv-week-list__day--not-booked .smv-week-list__date,
.smv .smv-week-list__day--not-booked .smv-week-list__status {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

/* Liste im Auswahlkalender (02-02): Die ganze Zeile ist die Klickfläche,
   an der Stelle der Markierung steht das Kästchen. Gewählt ist gefüllt mit
   Haken – dieselben Stufen wie die Kacheln im Monat. */
.smv .smv-week-list__item {
	list-style: none;
}

.smv .smv-weekpick {
	position: relative;
	min-height: 2.75rem;
	cursor: pointer;
	transition: background var(--smv-transition), border-color var(--smv-transition);
}

.smv .smv-weekpick input {
	/* Wie bei den Kacheln: Bezugspunkt an der Zeile, sonst springt die
	   Seite beim Klick zum unsichtbaren Feld. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.smv .smv-weekpick__box {
	display: grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid var(--smv-free);
	border-radius: 4px;
	background: var(--smv-white);
}

.smv .smv-weekpick:hover {
	background: var(--smv-base);
}

.smv .smv-weekpick:has(input:checked) {
	border-color: var(--smv-primary);
	background: var(--smv-primary);
}

.smv .smv-weekpick:has(input:checked) .smv-week-list__date,
.smv .smv-weekpick:has(input:checked) .smv-week-list__status {
	color: var(--smv-white);
}

.smv .smv-weekpick:has(input:checked) .smv-weekpick__box {
	border-color: var(--smv-white);
}

.smv .smv-weekpick:has(input:checked) .smv-weekpick__box::after {
	content: "✓";
	color: var(--smv-primary);
	font-size: var(--smv-t-sm);
	font-weight: 700;
	line-height: 1;
}

.smv .smv-weekpick:has(input:focus-visible) {
	outline: 2px solid var(--smv-secondary);
	outline-offset: 2px;
}

/* Zu wenig Platz für alle gewählten Kinder – wie die Kachel im Monat. */
.smv .smv-weekpick.is-blocked {
	border-color: var(--smv-line);
	background: var(--smv-base);
	cursor: not-allowed;
}

.smv .smv-weekpick.is-blocked .smv-week-list__date,
.smv .smv-weekpick.is-blocked .smv-week-list__status {
	color: var(--smv-ink-subtle);
}

.smv .smv-week-list__day--today {
	border-color: var(--smv-secondary);
	box-shadow: 0 0 0 2px var(--smv-secondary-ring);
}

/* ------------------------------------------------------------------ */
/* Familienbereich                                                     */
/* ------------------------------------------------------------------ */

.smv .smv-nav {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s3);
	padding-bottom: var(--smv-s4);
	border-bottom: 1px solid var(--smv-line);
}

/* Mobil zuerst: zwei gleich breite Spalten mit normalem Radius. Eine
   umbrechende Kapsel bekäme Oval-Enden. Zur Kapsel wird die Liste erst, wenn
   alle Punkte in eine Zeile passen – gemessen am Platz, den die Navigation
   hat, nicht an der Fensterbreite: Zwischen Telefon und Desktop steht das
   Modul oft in einer schmalen Spalte. */
.smv .smv-nav {
	container: smv-nav / inline-size;
}

.smv .smv-nav__list {
	align-self: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--smv-s1);
	padding: 3px;
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-base);
	list-style: none;
}


.smv .smv-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.25rem;
	padding: 0.375rem 1rem;
	border-radius: calc(var(--smv-r) - 3px);
	text-align: center;
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--smv-transition), color var(--smv-transition);
}

.smv .smv-nav__link:hover {
	background: rgba(255, 255, 255, 0.75);
	color: var(--smv-ink);
}

/* Wie der Umschalter: gefüllt in der Sekundärfarbe, sonst ist der aktive
   Menüpunkt vom Rest kaum zu unterscheiden. */
.smv .smv-nav__link--active,
.smv .smv-nav__link--active:hover {
	background: var(--smv-secondary);
	color: var(--smv-white);
	font-weight: 600;
}

.smv .smv-nav__account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smv-s3);
	color: var(--smv-ink-subtle);
	font-size: var(--smv-t-md);
}

/* Buchungen als Kartenliste – auf dem Telefon lesbarer als eine Tabelle. */
.smv .smv-bookings {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s3);
	padding: 0;
	list-style: none;
}

.smv .smv-booking {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s2);
	padding: var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-white);
	box-shadow: var(--smv-shadow-1);
}

.smv .smv-booking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--smv-s2) var(--smv-s3);
}

.smv .smv-booking__date {
	font-size: var(--smv-t-lg);
	font-weight: 600;
	line-height: 1.25;
}

.smv .smv-booking__child {
	color: var(--smv-ink);
}

.smv .smv-booking__time,
.smv .smv-booking__hint {
	color: var(--smv-ink-subtle);
	font-size: var(--smv-t-md);
}

.smv .smv-booking__reminder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smv-s3);
	padding: var(--smv-s3);
	border: 1px solid var(--smv-secondary-line);
	border-radius: var(--smv-r-small);
	background: var(--smv-secondary-tint);
	font-size: var(--smv-t-md);
}

.smv .smv-booking__ok {
	color: var(--smv-success-deep);
	font-weight: 500;
}

.smv .smv-bookings--past .smv-booking {
	background: var(--smv-base);
	box-shadow: none;
}

/* Statuszeichen: getönte Fläche plus Text, nie Farbe allein. */
.smv .smv-status {
	display: inline-flex;
	align-items: center;
	gap: var(--smv-s1);
	padding: 0.125rem 0.625rem;
	border-radius: var(--smv-r-full);
	background: var(--smv-base);
	color: var(--smv-ink);
	font-size: var(--smv-t-sm);
	font-weight: 600;
	white-space: nowrap;
}

.smv .smv-status::before {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: var(--smv-r-full);
	background: currentColor;
}

.smv .smv-status--pending {
	background: var(--smv-alert-tint);
	color: var(--smv-alert);
}

/* Eine bestätigte Buchung ist das positive Ergebnis – Signal Erfolg. */
.smv .smv-status--confirmed {
	background: var(--smv-success-tint);
	color: var(--smv-success-deep);
}

.smv .smv-status--rejected,
.smv .smv-status--cancelled {
	background: var(--smv-warn-tint);
	color: var(--smv-warn-deep);
}

.smv .smv-status--cancel_requested {
	background: var(--smv-secondary-tint);
	color: var(--smv-secondary);
}

/* Kinderliste und hinterlegte Stammdaten */
.smv .smv-children-list,
.smv .smv-master-data {
	display: grid;
	gap: var(--smv-s3);
	padding: 0;
	list-style: none;
}

.smv .smv-children-list__entry,
.smv .smv-master-data__block {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s1);
	padding: var(--smv-s4);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r);
	background: var(--smv-white);
}

.smv .smv-children-list__name,
.smv .smv-master-data__name {
	font-weight: 600;
}

.smv .smv-children-list__date,
.smv .smv-master-data__row {
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
}

/* Betreuungsdaten: Bezeichnung über dem Wert, klein und fett, der Wert in
   normaler Schrift. Mit „Bezeichnung: Wert" in einer Zeile liefen beide
   ineinander, sobald die Bezeichnung umbrach. */
.smv .smv-master-data__facts {
	display: grid;
	gap: var(--smv-s3);
	margin: var(--smv-s1) 0 0;
}

.smv .smv-master-data__fact dt {
	margin: 0;
	color: var(--smv-ink);
	font-size: var(--smv-t-sm);
	font-weight: 600;
	line-height: 1.3;
}

.smv .smv-master-data__fact dd {
	margin: 0;
	color: var(--smv-ink);
	font-size: var(--smv-t-md);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Dialog                                                              */
/* ------------------------------------------------------------------ */

.smv .smv-cancellation {
	width: min(30rem, calc(100vw - 2rem));
	padding: var(--smv-s5);
	border: 0;
	border-radius: var(--smv-r-large);
	background: var(--smv-white);
	color: var(--smv-ink);
	box-shadow: var(--smv-shadow-3);
}

.smv .smv-cancellation::backdrop {
	background: rgba(24, 32, 44, 0.45);
}

.smv .smv-dialog-title {
	font-size: var(--smv-t-lg);
	font-weight: 600;
	line-height: 1.25;
}

.smv .smv-dialog-question {
	margin-top: var(--smv-s2);
	color: var(--smv-ink);
}

.smv .smv-dialog-reason {
	margin-top: var(--smv-gap-flow);
}

.smv .smv-cancellation .smv-button-row {
	margin-top: var(--smv-gap-block);
	justify-content: flex-end;
}

.smv .smv-dialog-yes,
.smv .smv-dialog-no {
	min-width: 8rem;
}

/* ------------------------------------------------------------------ */
/* Anmelde- und Passwortmasken als eigenständige Karte                 */
/* ------------------------------------------------------------------ */

.smv-login,
.smv-password-forgotten,
.smv-password-new,
.smv-password-change {
	max-width: 27rem;
	margin-inline: auto;
}

.smv-login .smv-form--narrow,
.smv-password-forgotten .smv-form--narrow,
.smv-password-new .smv-form--narrow,
.smv-password-change .smv-form--narrow {
	padding: var(--smv-s5);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-large);
	background: var(--smv-white);
	box-shadow: var(--smv-shadow-1);
}

/* Schon angemeldet: dieselbe Karte wie das Formular. Die beiden Wege
   untereinander über die volle Breite, Abmelden abgesetzt als Textlink –
   es ist hier nicht die Hauptsache. */
.smv-login .smv-login__card {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s4);
	padding: var(--smv-s5);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-large);
	background: var(--smv-white);
	box-shadow: var(--smv-shadow-1);
}

.smv-login .smv-login__who {
	margin: 0;
	color: var(--smv-ink);
	overflow-wrap: anywhere;
}

.smv-login .smv-login__actions {
	display: grid;
	gap: var(--smv-s3);
}

.smv-login .smv-login__actions .smv-button {
	width: 100%;
}

.smv-login .smv-login__logout {
	margin: 0;
	padding-top: var(--smv-s4);
	border-top: 1px solid var(--smv-line);
	text-align: center;
}

.smv-login .smv-login__logout-button {
	min-height: 2.75rem;
	padding: 0 var(--smv-s3);
	border: 0;
	background: none;
	color: var(--smv-ink);
	font-family: inherit;
	font-size: var(--smv-t-base);
	font-weight: 500;
	letter-spacing: normal;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.smv-login .smv-login__logout-button:hover,
.smv-login .smv-login__logout-button:focus-visible {
	background: none;
	color: var(--smv-primary-deep);
}

.smv-login .smv-submit,
.smv-password-forgotten .smv-submit,
.smv-password-new .smv-submit,
.smv-password-change .smv-submit {
	position: static;
	padding: 0;
	border-top: 0;
	background: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Ab Tablet                                                           */
/* ------------------------------------------------------------------ */

@media (min-width: 40em) {
	.smv .smv-field--half {
		grid-column: span 6;
	}

	.smv .smv-field--wide {
		grid-column: span 8;
	}

	.smv .smv-field--narrow {
		grid-column: span 4;
	}

	.smv .smv-calendar__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.smv .smv-calendar__month {
		flex: 1 1 auto;
		gap: var(--smv-s4);
	}

	.smv .smv-calendar__month_title,
	.smv .smv-week-list__title,
	.smv .smv-picker__month {
		font-size: 1.75rem;
	}

	.smv .smv-day__content {
		min-height: 4.25rem;
		gap: var(--smv-s2);
	}

	.smv .smv-day__number {
		font-size: var(--smv-t-base);
	}

	/* Jeder Eintrag so breit wie sein Text; reicht die Zeile nicht, bricht
	   die Legende zwischen den Einträgen um – nicht mitten in „Plätze frei". */
	.smv .smv-legend {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--smv-s2) var(--smv-s5);
	}

	.smv .smv-legend__entry {
		flex: none;
		max-width: 100%;
		margin-right: 0;
	}

	.smv .smv-submit {
		position: static;
		padding: 0;
		border-top: 0;
		background: none;
		box-shadow: none;
	}

	.smv .smv-submit .smv-button {
		flex: 0 0 auto;
		min-width: 14rem;
	}

	.smv .smv-children-list,
	.smv .smv-master-data {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Schmale Ansicht: im Monatsraster trägt der Marker den Status.
   In einer rund 45 Pixel breiten Zelle bricht ein Wort wie „gesperrt" den
   Satzspiegel; die drei Formen unterscheiden die Zustände auch ohne Text,
   der Volltext bleibt im Vorlesetext und in der Listenansicht. */
@media (max-width: 39.999em) {
	/* Monatswahl im öffentlichen Kalender über die volle Breite: Pfeile an
	   den Rändern, Monat in der Mitte – wie der Umschalter darunter. */
	.smv .smv-calendar__month {
		justify-content: space-between;
		width: 100%;
	}

	.smv .smv-calendar__month_title {
		flex: 1 1 auto;
		text-align: center;
	}

	/* Umschalter Monat/Liste auf dem Telefon über die volle Breite, beide
	   Hälften gleich – wie die Schaltflächen darunter. */
	.smv .smv-switcher {
		display: flex;
		width: 100%;
	}

	.smv .smv-switcher__button {
		flex: 1 1 0;
		justify-content: center;
		text-align: center;
	}

	/* Kinder auf dem Telefon je eine ganze Zeile – nicht nur so breit wie
	   der Name, sonst stehen sie unterschiedlich lang untereinander. */
	.smv .smv-childpicks > li {
		flex: 1 1 100%;
	}

	.smv .smv-childpick {
		width: 100%;
	}


	.smv .smv-day__status {
		display: none;
	}

	.smv .smv-day__content {
		min-height: 2.875rem;
		gap: var(--smv-s1);
	}

	.smv .smv-month {
		border-spacing: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.smv *,
	.smv *::before,
	.smv *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* Anfrage: Kinder wählen, dann Tage anklicken (02-02)                 */
/* ------------------------------------------------------------------ */

.smv .smv-picker__label {
	color: var(--smv-ink);
	font-weight: 600;
}

.smv .smv-picker__empty {
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-md);
}

/* Ohne gewähltes Kind: Hinweiskasten in der Markenfläche über dem
   ausgegrauten Kalender. Kein Orange – es fehlt nur der nächste Schritt,
   es ist nichts schiefgegangen (Signale, gestaltung.md). */
.smv .smv-picker__hint {
	color: var(--smv-ink);
	font-weight: 600;
}

.smv .smv-picker__hint[hidden] {
	display: none;
}

/* Kinder als Kacheln – keine Auswahlliste, der Zustand muss man sehen. */
.smv .smv-childpicks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smv-s3);
	padding: 0;
	list-style: none;
}

.smv .smv-childpick {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--smv-s3);
	min-height: 3.5rem;
	padding: var(--smv-s3) var(--smv-s4);
	border: 2px solid var(--smv-line-strong);
	border-radius: var(--smv-r);
	background: var(--smv-white);
	cursor: pointer;
	transition: border-color var(--smv-transition), background var(--smv-transition);
}

/* Das Ankreuzfeld selbst bleibt für Screenreader da, sichtbar ist die Kachel. */
.smv .smv-childpick input {
	/* Ohne Bezugspunkt an der Kachel landet das Ankreuzfeld am Anfang
	   der Seite – der Klick auf die Beschriftung setzt den Fokus dorthin,
	   und der Browser scrollt hinterher. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Der Zustand hängt an Rahmen, Fläche UND Haken – nicht an der Farbe allein. */
.smv .smv-childpick__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--smv-line-strong);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
}

.smv .smv-childpick__mark::after {
	content: "";
	width: 0.5rem;
	height: 0.875rem;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.smv .smv-childpick input:checked ~ .smv-childpick__mark {
	border-color: var(--smv-primary-deep);
	background: var(--smv-primary-deep);
}

.smv .smv-childpick input:checked ~ .smv-childpick__mark::after {
	border-color: var(--smv-white);
}

.smv .smv-childpick:has(input:checked) {
	border-color: var(--smv-primary-deep);
	background: var(--smv-primary-tint);
}

.smv .smv-childpick:has(input:focus-visible) {
	outline: 2px solid var(--smv-secondary);
	outline-offset: 2px;
}

.smv .smv-childpick__body {
	display: flex;
	flex-direction: column;
}

.smv .smv-childpick__name {
	color: var(--smv-ink);
	font-weight: 600;
}

.smv .smv-childpick__birth {
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-md);
}

/* Kalender zum Anklicken. Kopf wie in der Listenansicht des öffentlichen
   Kalenders: schmal Titel zentriert oben, beide Schaltflächen darunter gleich
   breit über die volle Zeile; ab 40em eine Zeile, Titel in der Mitte. */
.smv .smv-picker__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--smv-s4) var(--smv-s3);
}

/* Umschalter und Kalenderkopf sind zwei Bausteine, keine Zeile: zwischen
   ihnen der Blockabstand, sonst kleben Umschalter, Titel und Schaltflächen
   aneinander. */
.smv .smv-picker__calendar > .smv-week-list,
.smv .smv-picker__calendar > .smv-picker__nav {
	margin-top: var(--smv-gap-block);
}

.smv .smv-picker__month {
	grid-column: 1 / -1;
	grid-row: 1;
	text-align: center;
}

.smv .smv-picker__nav .smv-button {
	justify-content: center;
	width: 100%;
}

.smv .smv-daypick {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	width: 100%;
	/* Gleich hoch über den gleichen Aufbau, nicht über `height: 100%` –
	   siehe `.smv-day__content`. */
	min-height: 3.25rem;
	padding: var(--smv-s2);
	/* Wählbar heißt frei: Umriss wie im öffentlichen Kalender (Stufe 2). */
	border: 2px solid var(--smv-free);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
	cursor: pointer;
	transition: border-color var(--smv-transition), background var(--smv-transition);
}

.smv .smv-daypick input {
	/* Ohne Bezugspunkt an der Kachel landet das Ankreuzfeld am Anfang
	   der Seite – der Klick auf die Beschriftung setzt den Fokus dorthin,
	   und der Browser scrollt hinterher. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.smv .smv-daypick__number {
	color: var(--smv-ink);
	font-size: var(--smv-t-base);
	font-weight: 700;
}

/*
 * Die Kachel zeigt Zahl, Form und Wort – wie im öffentlichen Kalender. Auf
 * schmalen Bildschirmen ist sie dafür zu schmal (rund 34 px, „nicht
 * verfügbar" bräche in Einzelbuchstaben): dort trägt allein die Form den
 * Status, vorgelesen wird weiterhin die vollständige Angabe.
 */
.smv .smv-daypick .smv-marker {
	margin-top: 0.125rem;
	margin-inline: auto;
}

.smv .smv-daypick__status {
	min-height: calc(2 * var(--smv-t-xs) * 1.15);
	max-width: 100%;
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-xs);
	line-height: 1.15;
	text-align: center;
	/* Nie mitten im Wort trennen: „verfügb / ar" machte die Kachel eine
	   Zeile höher als ihre Nachbarn. Reicht der Platz nicht, entfällt das
	   Wort ganz (siehe Kachel-Abfrage am Ende). */
	overflow-wrap: normal;
	hyphens: manual;
}

label.smv-daypick .smv-daypick__status {
	color: var(--smv-free-deep);
	font-weight: 600;
}

@media (max-width: 40rem) {
	.smv .smv-daypick__status {
		display: none;
	}
}

.smv .smv-daypick:hover {
	background: var(--smv-base);
}

/* Gewählt: in der Primärfarbe gefüllt, mit Haken in der Ecke (Stufe 3,
   AK-ANF-19). Frei ist der Umriss, gewählt die Füllung – der Unterschied
   trägt auch ohne Farbsehen. */
.smv .smv-daypick:has(input:checked) {
	border-color: var(--smv-primary);
	background: var(--smv-primary);
}

.smv .smv-daypick:has(input:checked) .smv-daypick__number,
.smv .smv-daypick:has(input:checked) .smv-daypick__status {
	color: var(--smv-white);
}

.smv .smv-daypick:has(input:checked) .smv-marker--free {
	background: var(--smv-white);
}

/* Der Haken sitzt in der Ecke, nicht vor der Zahl: In der schmalen Kachel
   bräche „✓ 23" um, und die gewählte Kachel würde höher als die übrigen. */
.smv .smv-daypick:has(input:checked)::after {
	content: "✓";
	position: absolute;
	top: 0.125rem;
	right: 0.25rem;
	color: var(--smv-white);
	font-size: var(--smv-t-xs);
	font-weight: 700;
	line-height: 1;
}

.smv .smv-daypick:has(input:focus-visible) {
	outline: 2px solid var(--smv-secondary);
	outline-offset: 2px;
}

/* Nicht wählbar: flach, ohne Rahmen, ohne Zeiger (Stufe 1). */
.smv .smv-daypick--off,
.smv .smv-daypick.is-blocked {
	border-color: transparent;
	background: var(--smv-base);
	color: var(--smv-ink-subtle);
	cursor: not-allowed;
}

.smv .smv-daypick--off .smv-daypick__number,
.smv .smv-daypick.is-blocked .smv-daypick__number {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

.smv .smv-daypick--off .smv-daypick__status,
.smv .smv-daypick.is-blocked .smv-daypick__status {
	color: var(--smv-ink-subtle);
	font-weight: 400;
}

.smv .smv-day--full .smv-daypick--off {
	border-color: var(--smv-warn-line);
	background: var(--smv-warn-tint);
}

.smv .smv-day--full .smv-daypick__status {
	color: var(--smv-warn-deep);
}

/* Vergangen: nur die Zahl (Stufe 0). */
.smv .smv-day--past .smv-daypick--off {
	background: transparent;
	cursor: default;
}

.smv .smv-day--past .smv-marker,
.smv .smv-day--past .smv-daypick__status {
	visibility: hidden;
}

/* Ohne gewähltes Kind ist der Kalender inaktiv. */
.smv .smv-picker.is-locked .smv-picker__calendar {
	opacity: 0.55;
	pointer-events: none;
}

/* Gewählte Tage als Liste – die Kontrolle vor dem Absenden. */
.smv .smv-chosen {
	display: flex;
	flex-direction: column;
	gap: var(--smv-s2);
	padding: 0;
	list-style: none;
}

.smv .smv-chosen__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smv-s3);
	padding: var(--smv-s2) var(--smv-s3);
	border: 1px solid var(--smv-line);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
}

.smv .smv-chosen__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--smv-line-strong);
	border-radius: var(--smv-r-small);
	background: var(--smv-white);
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-lg);
	line-height: 1;
	cursor: pointer;
}

.smv .smv-chosen__remove:hover {
	border-color: var(--smv-warn);
	color: var(--smv-warn);
}

/*
 * Aufklapper für die Einzeltermine einer Anfrage (02-03-meine-anfragen.md).
 * <details> statt eigenem JavaScript: dasselbe Verhalten, funktioniert auch
 * ohne, und die Tastaturbedienung bringt der Browser mit.
 */
.smv .smv-disclosure__summary {
	display: inline-flex;
	list-style: none;
	align-items: center;
	gap: var(--smv-s2);
	min-height: 2.25rem;
	padding: 0.25rem 0;
	color: var(--smv-ink);
	font-size: var(--smv-t-sm);
	font-weight: 500;
	cursor: pointer;
}

/* `display: inline-flex` nimmt dem <summary> den eingebauten Marker – also
   ein eigenes Winkelzeichen, das sich beim Aufklappen dreht. */
.smv .smv-disclosure__summary::-webkit-details-marker {
	display: none;
}

.smv .smv-disclosure__summary::before {
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--smv-transition);
	content: "";
}

.smv .smv-disclosure[open] > .smv-disclosure__summary::before {
	transform: rotate(45deg);
}

.smv .smv-disclosure__summary:hover {
	color: var(--smv-ink);
}

/* Der geöffnete Inhalt braucht Luft zur Zusammenfassung. */
.smv .smv-disclosure[open] .smv-disclosure__summary {
	margin-bottom: var(--smv-s2);
}

/* Beiläufiger Hinweis unter einem Datenblock – kein Fehler, keine Warnung. */
.smv .smv-hint-text {
	color: var(--smv-ink-muted);
	font-size: var(--smv-t-sm);
}

/* Honigtopf. Nicht `display: none` – manche Automaten lassen genau das aus. */
.smv .smv-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Steht am Ende, damit diese Regeln die Grundregeln oben überstimmen
   (gleiche Spezifität – die spätere gewinnt). */
/* Einzeilige Köpfe und Tageszeilen erst, wenn der Platz da ist – gemessen
   am Kalender selbst, nicht am Fenster (siehe Menü in „Mein Bereich"). Die
   erste Schaltfläche bekommt ihren Platz ausdrücklich, sonst rutscht sie
   bei der automatischen Platzierung in eine zweite Zeile. */
.smv .smv-picker__calendar,
.smv .smv-week-list {
	container-type: inline-size;
}

@container (min-width: 38rem) {
	.smv .smv-picker__nav,
	.smv .smv-week-list__nav {
		grid-template-columns: auto 1fr auto;
	}

	.smv .smv-picker__month,
	.smv .smv-week-list__title {
		grid-column: 2;
	}

	.smv .smv-picker__nav .smv-button,
	.smv .smv-week-list__nav .smv-button {
		width: auto;
	}

	.smv .smv-picker__nav > :first-child,
	.smv .smv-week-list__nav > :first-child {
		grid-column: 1;
		grid-row: 1;
	}

	.smv .smv-picker__nav > :last-child,
	.smv .smv-week-list__nav > :last-child {
		grid-column: 3;
		grid-row: 1;
	}

	.smv .smv-week-list__day {
		grid-template-columns: 1.125rem 1fr auto;
	}

	.smv .smv-week-list__day .smv-button {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
}

@container smv-nav (min-width: 40rem) {
	/* Die Kapsel umschließt nur die Menüpunkte – deshalb nicht in die
	   Breite ziehen, sonst steht sie als leerer Balken quer über die Seite. */
	.smv .smv-nav__list {
		align-self: flex-start;
		display: flex;
		border-radius: var(--smv-r-full);
	}

	.smv .smv-nav__link {
		width: auto;
		border-radius: var(--smv-r-full);
	}
}

/* Kacheln im Monat: Das Statuswort steht nur, wenn die Kachel dafür breit
   genug ist – gemessen an der Kachel, nicht am Fenster. Ist sie schmaler,
   trägt allein die Form den Status (wie auf dem Telefon), vorgelesen wird
   weiterhin alles. So haben alle Kacheln denselben Aufbau und dieselbe
   Höhe; das Wort bricht höchstens in zwei Zeilen um (AK-OEF-10). */
.smv .smv-day__content,
.smv .smv-daypick {
	container-type: inline-size;
}

@container (max-width: 4.75rem) {
	.smv .smv-day__status,
	.smv .smv-daypick__status {
		display: none;
	}
}