/**
 * Stock Manager - Frontend
 *
 * Farbschema: helle Basiswerte, dunkle Variante ueber prefers-color-scheme
 * oder ueber die Klassen .sm-scheme-dark / .sm-scheme-light erzwungen.
 */

/* -------------------------------------------------- *
 * 1. Farb- und Groessen-Token (hell)
 * -------------------------------------------------- */

.sm-app {
	--sm-bg: #f6f7f9;
	--sm-surface: #ffffff;
	--sm-surface-2: #f1f3f6;
	--sm-border: #e2e6ec;
	--sm-border-strong: #cfd6e0;
	--sm-text: #10151c;
	--sm-text-soft: #4a5566;
	--sm-muted: #7a8697;

	--sm-up: #0f9d58;
	--sm-down: #d8352a;
	--sm-flat: #7a8697;

	--sm-signal: #12a150;
	--sm-signal-glow: rgba(18, 161, 80, 0.28);
	--sm-neon: #35d95b;
	--sm-neon-glow: rgba(53, 217, 91, 0.45);
	--sm-spike-up: #e07800;
	--sm-spike-up-glow: rgba(224, 120, 0, 0.35);
	--sm-spike-down: #d8352a;
	--sm-spike-down-glow: rgba(216, 53, 42, 0.35);

	--sm-accent: #2f6bff;
	--sm-accent-text: #ffffff;

	--sm-radius: 14px;
	--sm-radius-sm: 9px;
	--sm-gap: 18px;
	--sm-columns: 3;

	--sm-shadow: 0 1px 2px rgba(16, 21, 28, 0.05), 0 8px 24px rgba(16, 21, 28, 0.06);
	--sm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sm-font-num: ui-monospace, "SF Mono", "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
}

/* -------------------------------------------------- *
 * 2. Dunkle Variante
 * -------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.sm-app.sm-scheme-auto {
		--sm-bg: #0b0e13;
		--sm-surface: #12161d;
		--sm-surface-2: #171d26;
		--sm-border: #232b36;
		--sm-border-strong: #313b49;
		--sm-text: #e8edf5;
		--sm-text-soft: #b3bdcb;
		--sm-muted: #7c8899;

		--sm-up: #35d07f;
		--sm-down: #ff5f52;
		--sm-flat: #7c8899;

		--sm-signal: #2fd07a;
		--sm-signal-glow: rgba(47, 208, 122, 0.35);
		--sm-neon: #a6ff5c;
		--sm-neon-glow: rgba(166, 255, 92, 0.55);
		--sm-spike-up: #ff9f2e;
		--sm-spike-up-glow: rgba(255, 159, 46, 0.45);
		--sm-spike-down: #ff5f52;
		--sm-spike-down-glow: rgba(255, 95, 82, 0.45);

		--sm-accent: #5b8cff;
		--sm-accent-text: #0b0e13;

		--sm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
	}
}

.sm-app.sm-scheme-dark {
	--sm-bg: #0b0e13;
	--sm-surface: #12161d;
	--sm-surface-2: #171d26;
	--sm-border: #232b36;
	--sm-border-strong: #313b49;
	--sm-text: #e8edf5;
	--sm-text-soft: #b3bdcb;
	--sm-muted: #7c8899;

	--sm-up: #35d07f;
	--sm-down: #ff5f52;
	--sm-flat: #7c8899;

	--sm-signal: #2fd07a;
	--sm-signal-glow: rgba(47, 208, 122, 0.35);
	--sm-neon: #a6ff5c;
	--sm-neon-glow: rgba(166, 255, 92, 0.55);
	--sm-spike-up: #ff9f2e;
	--sm-spike-up-glow: rgba(255, 159, 46, 0.45);
	--sm-spike-down: #ff5f52;
	--sm-spike-down-glow: rgba(255, 95, 82, 0.45);

	--sm-accent: #5b8cff;
	--sm-accent-text: #0b0e13;

	--sm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------- *
 * 3. Grundgeruest
 * -------------------------------------------------- */

.sm-app {
	box-sizing: border-box;
	background: var(--sm-bg);
	color: var(--sm-text);
	font-family: var(--sm-font);
	font-size: 15px;
	line-height: 1.5;
	padding: clamp(14px, 2.5vw, 26px);
	border-radius: var(--sm-radius);
	container-type: inline-size;
}

.sm-app *,
.sm-app *::before,
.sm-app *::after {
	box-sizing: border-box;
}

.sm-app__title {
	margin: 0 0 18px;
	font-size: 1.45rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--sm-text);
}

.sm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sm-muted {
	color: var(--sm-muted);
	font-weight: 400;
}

.sm-notice {
	padding: 14px 16px;
	border-radius: var(--sm-radius-sm);
	background: var(--sm-surface-2);
	border: 1px solid var(--sm-border);
}

.sm-notice--error {
	border-color: var(--sm-down);
	color: var(--sm-down);
}

/* -------------------------------------------------- *
 * 4. Kennzahlenleiste
 * -------------------------------------------------- */

.sm-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.sm-summary__tile {
	background: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sm-summary__value {
	font-family: var(--sm-font-num);
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.sm-summary__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--sm-text);
}

.sm-summary__tile.is-signal .sm-summary__value { color: var(--sm-signal); }
.sm-summary__tile.is-alert .sm-summary__value { color: var(--sm-spike-up); }
.sm-summary__tile.is-up .sm-summary__value { color: var(--sm-up); }
.sm-summary__tile.is-down .sm-summary__value { color: var(--sm-down); }

/* -------------------------------------------------- *
 * 5. Werkzeugleiste
 * -------------------------------------------------- */

.sm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.sm-toolbar__search {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}

.sm-toolbar__search .sm-icon {
	position: absolute;
	left: 12px;
	width: 17px;
	height: 17px;
	color: var(--sm-muted);
	pointer-events: none;
}

.sm-search {
	width: 100%;
	padding: 10px 14px 10px 37px;
	border-radius: 999px;
	border: 1px solid var(--sm-border);
	background: var(--sm-surface);
	color: var(--sm-text);
	font: inherit;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sm-search::placeholder { color: var(--sm-muted); }

.sm-search:focus {
	border-color: var(--sm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-accent) 22%, transparent);
}

.sm-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.sm-select select {
	appearance: none;
	padding: 9px 30px 9px 12px;
	border-radius: 999px;
	border: 1px solid var(--sm-border);
	background: var(--sm-surface);
	color: var(--sm-text-soft);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* -------------------------------------------------- *
 * 6. Schaltflaechen
 * -------------------------------------------------- */

.sm-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--sm-border);
	background: var(--sm-surface);
	color: var(--sm-text);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sm-btn:hover { border-color: var(--sm-border-strong); }
.sm-btn:active { transform: translateY(1px); }

.sm-btn:focus-visible,
.sm-icon-btn:focus-visible,
.sm-search:focus-visible,
.sm-app select:focus-visible,
.sm-app input:focus-visible {
	outline: 2px solid var(--sm-accent);
	outline-offset: 2px;
}

.sm-btn--primary {
	background: var(--sm-accent);
	border-color: var(--sm-accent);
	color: var(--sm-accent-text);
}

.sm-btn--primary:hover { filter: brightness(1.06); }

.sm-btn--ghost {
	background: transparent;
	color: var(--sm-text-soft);
}

.sm-btn .sm-icon { width: 16px; height: 16px; }

.sm-btn.is-busy { opacity: 0.6; pointer-events: none; }
.sm-btn.is-busy .sm-icon { animation: sm-spin 0.9s linear infinite; }

.sm-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--sm-muted);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sm-icon-btn:hover {
	color: var(--sm-text);
	background: var(--sm-surface-2);
	border-color: var(--sm-border);
}

.sm-icon-btn--danger:hover { color: var(--sm-down); }

.sm-icon-btn--tiny {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	opacity: 0;
}

.sm-fact:hover .sm-icon-btn--tiny,
.sm-icon-btn--tiny:focus-visible { opacity: 1; }

.sm-icon-btn--tiny .sm-icon { width: 13px; height: 13px; }

.sm-icon { width: 18px; height: 18px; display: block; }

/* -------------------------------------------------- *
 * 7. Kartengitter
 * -------------------------------------------------- */

.sm-grid {
	display: grid;
	grid-template-columns: repeat(var(--sm-columns), minmax(0, 1fr));
	gap: var(--sm-gap);
	align-items: start;
}

@container (max-width: 1040px) {
	.sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 680px) {
	.sm-grid { grid-template-columns: 1fr; }
}

/* Rueckfall fuer Browser ohne Container-Queries. */
@media (max-width: 1040px) {
	.sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.sm-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- *
 * 8. Karte
 * -------------------------------------------------- */

.sm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 16px 12px;
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	background: var(--sm-surface);
	box-shadow: var(--sm-shadow);
	padding-top: 19px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sm-card:hover { border-color: var(--sm-border-strong); }

.sm-card.is-hidden { display: none; }

.sm-card--noquote { opacity: 0.72; }

.sm-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.sm-ticker { min-width: 0; }

.sm-ticker__symbol {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 680;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.sm-ticker__venue {
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sm-muted);
	border: 1px solid var(--sm-border);
	border-radius: 5px;
	padding: 1px 5px;
}

.sm-ticker__name {
	margin: 3px 0 0;
	font-size: 0.78rem;
	color: var(--sm-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Kursblock */

.sm-quote {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.sm-quote__price {
	font-family: var(--sm-font-num);
	font-size: 1.92rem;
	font-weight: 620;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
}

.sm-quote__currency {
	font-size: 0.95rem;
	color: var(--sm-muted);
	font-weight: 500;
}

.sm-quote__change {
	font-family: var(--sm-font-num);
	font-size: 0.86rem;
	font-variant-numeric: tabular-nums;
	font-weight: 550;
	margin-left: auto;
}

.sm-dir--up { color: var(--sm-up); }
.sm-dir--down { color: var(--sm-down); }
.sm-dir--flat { color: var(--sm-flat); }

/* Tagesverlauf */

.sm-spark {
	height: 46px;
	margin: -2px 0 0;
}

.sm-spark--empty {
	border-bottom: 1px dashed var(--sm-border);
	height: 30px;
}

.sm-spark__svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.sm-spark__range { display: none; }
.sm-spark__range.is-active { display: inline; }

.sm-spark__line {
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.sm-spark__ref {
	stroke: var(--sm-border-strong);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}

/* Rakete */

.sm-rocket {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	width: 46px;
	color: var(--sm-flat);
}

.sm-rocket__svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	transform: rotate(var(--sm-rocket-rotate, 45deg));
	transform-origin: 50% 50%;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sm-rocket__window { fill: var(--sm-surface); }

.sm-rocket__flame {
	fill: var(--sm-spike-up);
	opacity: 0.9;
}

.sm-rocket__score {
	font-family: var(--sm-font-num);
	font-size: 0.66rem;
	font-weight: 600;
	color: var(--sm-muted);
	font-variant-numeric: tabular-nums;
}

.sm-rocket--strong { color: var(--sm-neon); }
.sm-rocket--good { color: var(--sm-up); }
.sm-rocket--neutral { color: var(--sm-flat); }
.sm-rocket--weak { color: var(--sm-spike-up); }
.sm-rocket--poor { color: var(--sm-down); }

.sm-rocket--strong .sm-rocket__score,
.sm-rocket--good .sm-rocket__score { color: currentColor; }

/* Kennzeichnungen */

.sm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sm-badge {
	font-size: 0.7rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--sm-border);
	color: var(--sm-text-soft);
	background: var(--sm-surface-2);
}

.sm-badge--signal {
	color: var(--sm-signal);
	border-color: color-mix(in srgb, var(--sm-signal) 45%, transparent);
	background: color-mix(in srgb, var(--sm-signal) 12%, transparent);
}

.sm-badge--neon {
	color: var(--sm-neon);
	border-color: color-mix(in srgb, var(--sm-neon) 55%, transparent);
	background: color-mix(in srgb, var(--sm-neon) 14%, transparent);
}

.sm-badge--spike-up {
	color: var(--sm-spike-up);
	border-color: color-mix(in srgb, var(--sm-spike-up) 50%, transparent);
	background: color-mix(in srgb, var(--sm-spike-up) 12%, transparent);
}

.sm-badge--spike-down {
	color: var(--sm-spike-down);
	border-color: color-mix(in srgb, var(--sm-spike-down) 50%, transparent);
	background: color-mix(in srgb, var(--sm-spike-down) 12%, transparent);
}

.sm-badge--target {
	color: var(--sm-accent);
	border-color: color-mix(in srgb, var(--sm-accent) 45%, transparent);
	background: color-mix(in srgb, var(--sm-accent) 12%, transparent);
}

.sm-badge--muted { color: var(--sm-muted); }

/* Kennzahlen */

.sm-facts {
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--sm-border);
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sm-fact {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 8px;
	align-items: baseline;
	min-height: 22px;
}

.sm-fact dt {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--sm-text);
}

.sm-fact dd {
	margin: 0;
	font-size: 0.86rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
}

.sm-fact dd strong {
	font-family: var(--sm-font-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sm-fact--note dd { display: block; }

.sm-note {
	color: var(--sm-text-soft);
	overflow-wrap: anywhere;
}

/* Indikatoren */

.sm-details {
	border-top: 1px solid var(--sm-border);
	padding-top: 9px;
}

.sm-details summary {
	cursor: pointer;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
	color: var(--sm-text);
	list-style: none;
}

.sm-details summary::-webkit-details-marker { display: none; }

.sm-details summary::after {
	content: " +";
	font-family: var(--sm-font-num);
}

.sm-details[open] summary::after { content: " –"; }

.sm-signals {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.78rem;
	color: var(--sm-text-soft);
}

/* Fusszeile */

.sm-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid var(--sm-border);
	padding-top: 8px;
	margin-top: auto;
}

.sm-stamp {
	font-size: 0.7rem;
	color: var(--sm-muted);
}

.sm-card__tools { display: flex; gap: 2px; }

/* -------------------------------------------------- *
 * 9. Signalzustaende der Karte
 * -------------------------------------------------- */

.sm-card--signal-1 {
	border-color: var(--sm-signal);
	box-shadow: 0 0 0 1px var(--sm-signal-glow), 0 0 18px var(--sm-signal-glow);
}

.sm-card--signal-2 {
	border-color: var(--sm-neon);
	box-shadow: 0 0 0 1px var(--sm-neon), 0 0 26px var(--sm-neon-glow), 0 0 48px var(--sm-neon-glow);
	animation: sm-neon-pulse 3.2s ease-in-out infinite;
}

.sm-card--spike-up {
	border-color: var(--sm-spike-up);
	animation: sm-blink-up 2.4s ease-in-out infinite;
}

.sm-card--spike-down {
	border-color: var(--sm-spike-down);
	animation: sm-blink-down 2.4s ease-in-out infinite;
}

@keyframes sm-neon-pulse {
	0%, 100% { box-shadow: 0 0 0 1px var(--sm-neon), 0 0 20px var(--sm-neon-glow), 0 0 38px transparent; }
	50% { box-shadow: 0 0 0 1px var(--sm-neon), 0 0 30px var(--sm-neon-glow), 0 0 58px var(--sm-neon-glow); }
}

@keyframes sm-blink-up {
	0%, 100% { box-shadow: 0 0 0 1px transparent, 0 0 12px transparent; border-color: color-mix(in srgb, var(--sm-spike-up) 55%, transparent); }
	50% { box-shadow: 0 0 0 1px var(--sm-spike-up), 0 0 26px var(--sm-spike-up-glow); border-color: var(--sm-spike-up); }
}

@keyframes sm-blink-down {
	0%, 100% { box-shadow: 0 0 0 1px transparent, 0 0 12px transparent; border-color: color-mix(in srgb, var(--sm-spike-down) 55%, transparent); }
	50% { box-shadow: 0 0 0 1px var(--sm-spike-down), 0 0 26px var(--sm-spike-down-glow); border-color: var(--sm-spike-down); }
}

@keyframes sm-spin {
	to { transform: rotate(360deg); }
}

@keyframes sm-flash {
	0% { background: color-mix(in srgb, currentColor 16%, transparent); }
	100% { background: transparent; }
}

.sm-quote__price.is-flash {
	border-radius: 4px;
	animation: sm-flash 0.9s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.sm-card,
	.sm-card--signal-2,
	.sm-card--spike-up,
	.sm-card--spike-down,
	.sm-rocket__svg,
	.sm-quote__price.is-flash {
		animation: none;
		transition: none;
	}
}

/* -------------------------------------------------- *
 * 10. Inline-Formular
 * -------------------------------------------------- */

.sm-card.is-editing .sm-facts,
.sm-card.is-editing .sm-details,
.sm-card.is-editing .sm-badges { display: none; }

.sm-edit {
	border-top: 1px solid var(--sm-border);
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sm-edit__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sm-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sm-field--wide { grid-column: 1 / -1; }

.sm-field > span {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sm-muted);
}

.sm-field input {
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--sm-radius-sm);
	border: 1px solid var(--sm-border);
	background: var(--sm-surface-2);
	color: var(--sm-text);
	font: inherit;
	font-size: 0.88rem;
}

.sm-field input:focus {
	outline: none;
	border-color: var(--sm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-accent) 20%, transparent);
}

.sm-edit__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* -------------------------------------------------- *
 * 11. Dialog
 * -------------------------------------------------- */

.sm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.sm-modal[hidden] { display: none; }

.sm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 9, 14, 0.62);
	backdrop-filter: blur(3px);
}

.sm-modal__panel {
	position: relative;
	width: min(620px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	padding: 20px;
}

.sm-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.sm-modal__head h2 {
	margin: 0;
	font-size: 1.12rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.sm-modal__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sm-modal__foot {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	border-top: 1px solid var(--sm-border);
	padding-top: 14px;
}

.sm-lookup {
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-surface-2);
	max-height: 230px;
	overflow-y: auto;
}

.sm-lookup[hidden] { display: none; }

.sm-lookup__item {
	display: flex;
	align-items: baseline;
	gap: 9px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--sm-border);
	background: transparent;
	color: var(--sm-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sm-lookup__item:last-child { border-bottom: 0; }
.sm-lookup__item:hover,
.sm-lookup__item:focus-visible { background: var(--sm-surface); }

.sm-lookup__symbol {
	font-family: var(--sm-font-num);
	font-weight: 650;
	font-size: 0.86rem;
	flex: none;
	min-width: 78px;
}

.sm-lookup__name {
	font-size: 0.84rem;
	color: var(--sm-text-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sm-lookup__meta {
	margin-left: auto;
	font-size: 0.68rem;
	color: var(--sm-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex: none;
}

.sm-lookup__empty {
	padding: 11px 12px;
	font-size: 0.85rem;
	color: var(--sm-muted);
}

.sm-picked {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 9px 12px;
	border-radius: var(--sm-radius-sm);
	border: 1px solid color-mix(in srgb, var(--sm-accent) 40%, transparent);
	background: color-mix(in srgb, var(--sm-accent) 10%, transparent);
}

.sm-picked[hidden] { display: none; }

.sm-picked__symbol {
	font-family: var(--sm-font-num);
	font-weight: 650;
}

.sm-picked__name {
	font-size: 0.85rem;
	color: var(--sm-text-soft);
}

/* -------------------------------------------------- *
 * 12. Status, Leerzustand, Fussnote
 * -------------------------------------------------- */

.sm-status {
	min-height: 0;
	font-size: 0.82rem;
	color: var(--sm-muted);
	margin-bottom: 8px;
}

.sm-status:empty { display: none; }

.sm-status.is-error { color: var(--sm-down); }
.sm-status.is-success { color: var(--sm-up); }

.sm-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 46px 20px;
	border: 1px dashed var(--sm-border-strong);
	border-radius: var(--sm-radius);
	color: var(--sm-muted);
}

.sm-empty p { margin: 0 0 14px; }

.sm-nohits {
	text-align: center;
	color: var(--sm-muted);
	padding: 28px 0;
}

.sm-footnote {
	margin: 18px 0 0;
	font-size: 0.72rem;
	color: var(--sm-muted);
	text-align: right;
}

/* -------------------------------------------------- *
 * 13. Zeitraumfilter des Kursverlaufs
 * -------------------------------------------------- */

.sm-ranges {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--sm-border);
	border-radius: 999px;
	background: var(--sm-surface);
	flex: none;
}

.sm-app .sm-range {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sm-muted);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 550;
	line-height: 1.2;
	padding: 6px 13px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.sm-app .sm-range:hover { color: var(--sm-text); }

.sm-app .sm-range.is-active {
	background: var(--sm-surface-2);
	color: var(--sm-text);
	box-shadow: inset 0 0 0 1px var(--sm-border);
}

.sm-app .sm-range:focus-visible {
	outline: 2px solid var(--sm-accent);
	outline-offset: 1px;
}

/* Umschalter "alle Karten aufklappen" */

.sm-icon-btn--toggle {
	flex: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--sm-border);
	border-radius: 999px;
	background: var(--sm-surface);
}

.sm-icon-btn--toggle[aria-pressed="true"] {
	background: var(--sm-accent);
	border-color: var(--sm-accent);
	color: var(--sm-accent-text);
}

.sm-icon-btn--toggle[aria-pressed="true"]:hover {
	background: var(--sm-accent);
	color: var(--sm-accent-text);
}

/* -------------------------------------------------- *
 * 14. Schutz vor Theme-Vorgaben
 *
 * Viele Themes setzen eigene Regeln fuer button/input/select im
 * Inhaltsbereich. Die folgenden Selektoren sind bewusst spezifischer,
 * damit Form und Radius der Bedienelemente erhalten bleiben.
 * -------------------------------------------------- */

.sm-app .sm-btn,
.sm-app button.sm-btn,
.sm-app .sm-edit__actions .sm-btn,
.sm-app .sm-modal__foot .sm-btn {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 999px;
	border-width: 1px;
	border-style: solid;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	line-height: 1.2;
	min-height: 0;
	width: auto;
}

.sm-app .sm-btn--primary,
.sm-app button.sm-btn--primary {
	background: var(--sm-accent);
	border-color: var(--sm-accent);
	color: var(--sm-accent-text);
}

.sm-app .sm-btn--ghost,
.sm-app button.sm-btn--ghost {
	background: transparent;
	border-color: var(--sm-border);
	color: var(--sm-text-soft);
}

.sm-app .sm-icon-btn,
.sm-app button.sm-icon-btn {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 8px;
	box-shadow: none;
	min-height: 0;
	width: 30px;
	height: 30px;
	padding: 0;
}

.sm-app .sm-icon-btn--tiny { width: 22px; height: 22px; }
.sm-app .sm-icon-btn--toggle { width: 38px; height: 38px; border-radius: 999px; }

.sm-app .sm-field input,
.sm-app input[type="text"],
.sm-app input[type="date"],
.sm-app input[type="number"],
.sm-app input[type="search"],
.sm-app select,
.sm-app textarea {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	max-width: 100%;
	margin: 0;
	line-height: 1.3;
}

.sm-app .sm-field,
.sm-app .sm-field > span,
.sm-app .sm-edit__grid,
.sm-app .sm-modal__body label { margin: 0; }

.sm-app .sm-search { border-radius: 999px; }

/* -------------------------------------------------- *
 * 15. Zugeklappte Karten
 *
 * Der Umschalter in der Werkzeugleiste blendet Kennzahlen, Notiz,
 * Formular und Formularschaltflächen aus. Der Stift auf der Karte
 * öffnet das Formular trotzdem für einen einzelnen Wert.
 * -------------------------------------------------- */

.sm-app.is-collapsed .sm-card:not(.is-editing) .sm-facts,
.sm-app.is-collapsed .sm-card:not(.is-editing) .sm-details {
	display: none;
}

.sm-app.is-collapsed .sm-card {
	gap: 10px;
	padding-bottom: 10px;
}

/* Zweizustands-Symbol des Umschalters */

.sm-icon-btn--toggle .sm-icon--expand { display: none; }
.sm-icon-btn--toggle[aria-pressed="true"] .sm-icon--collapse { display: none; }
.sm-icon-btn--toggle[aria-pressed="true"] .sm-icon--expand { display: block; }

/* -------------------------------------------------- *
 * 16. Tagesempfehlung
 * -------------------------------------------------- */

.sm-top {
	margin-bottom: 16px;
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-surface);
	padding: 10px 12px 8px;
}

.sm-top__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.sm-top__title {
	margin: 0;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sm-text);
}

.sm-top__hint {
	font-size: 0.68rem;
	color: var(--sm-muted);
}

.sm-top__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 22px;
}

@media (max-width: 780px) {
	.sm-top__list { grid-template-columns: 1fr; }
	.sm-top__hint { display: none; }
}

.sm-top__row {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) auto auto 52px 20px;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--sm-border) 55%, transparent);
	font-size: 0.8rem;
	line-height: 1.3;
}

.sm-top__list .sm-top__row:last-child,
.sm-top__list .sm-top__row:nth-last-child(2):nth-child(odd) {
	border-bottom: 0;
}

.sm-top__rank {
	font-family: var(--sm-font-num);
	font-size: 0.66rem;
	color: var(--sm-muted);
	text-align: right;
}

.sm-top__ticker {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.sm-top__ticker strong {
	font-weight: 650;
	letter-spacing: 0.02em;
	flex: none;
}

.sm-top__name {
	color: var(--sm-muted);
	font-size: 0.72rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sm-top__price,
.sm-top__change {
	font-family: var(--sm-font-num);
	font-variant-numeric: tabular-nums;
	font-size: 0.76rem;
	white-space: nowrap;
}

.sm-top__change { min-width: 58px; text-align: right; }

.sm-top__score {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 14px;
}

.sm-top__bar {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 999px;
	background: var(--sm-surface-2);
	overflow: hidden;
}

.sm-top__bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--sm-bar, 0%);
	border-radius: 999px;
	background: var(--sm-signal);
}

.sm-top__num {
	font-family: var(--sm-font-num);
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--sm-text-soft);
	font-variant-numeric: tabular-nums;
}

.sm-rocket--mini {
	width: 20px;
	gap: 0;
}

.sm-rocket--mini .sm-rocket__svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------- *
 * 17. Tagesrichtlinie
 * -------------------------------------------------- */

.sm-advice {
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-surface);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sm-advice__line {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--sm-text-soft);
}

.sm-advice__tag {
	flex: none;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--sm-border);
	color: var(--sm-muted);
	background: var(--sm-surface-2);
	white-space: nowrap;
	position: relative;
	top: -1px;
}

.sm-advice__line--sell .sm-advice__tag {
	color: var(--sm-down);
	border-color: color-mix(in srgb, var(--sm-down) 45%, transparent);
	background: color-mix(in srgb, var(--sm-down) 10%, transparent);
}

.sm-advice__line--buy .sm-advice__tag {
	color: var(--sm-signal);
	border-color: color-mix(in srgb, var(--sm-signal) 45%, transparent);
	background: color-mix(in srgb, var(--sm-signal) 10%, transparent);
}

.sm-advice__text { min-width: 0; }

.sm-advice__note {
	color: var(--sm-muted);
}

.sm-advice__meta {
	margin: 2px 0 0;
	font-size: 0.66rem;
	color: var(--sm-muted);
	border-top: 1px solid color-mix(in srgb, var(--sm-border) 60%, transparent);
	padding-top: 5px;
}

/* Sprunglinks auf einzelne Karten */

.sm-app .sm-jump-link {
	color: var(--sm-text);
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px dashed var(--sm-border-strong);
	padding-bottom: 1px;
	box-shadow: none;
}

.sm-app .sm-jump-link:hover,
.sm-app .sm-jump-link:focus-visible {
	color: var(--sm-accent);
	border-bottom-color: var(--sm-accent);
}

/* Hervorhebung der angesprungenen Karte */

.sm-card.is-target {
	outline: 2px solid var(--sm-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.sm-card.is-target { animation: sm-target 1.6s ease-out; }
}

@keyframes sm-target {
	0% { outline-color: var(--sm-accent); }
	100% { outline-color: transparent; }
}

/* -------------------------------------------------- *
 * 18. Sprungliste unter dem Suchfeld
 * -------------------------------------------------- */

.sm-jump {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 280px;
	overflow-y: auto;
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-surface);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
	padding: 4px;
}

.sm-jump[hidden] { display: none; }

.sm-jump__head {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--sm-muted);
	padding: 5px 8px 4px;
}

.sm-app .sm-jump__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--sm-text);
	font: inherit;
	font-size: 0.82rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.sm-app .sm-jump__item:hover,
.sm-app .sm-jump__item:focus-visible {
	background: var(--sm-surface-2);
	outline: none;
}

.sm-jump__symbol {
	font-family: var(--sm-font-num);
	font-weight: 650;
	flex: none;
	min-width: 66px;
}

.sm-jump__name {
	color: var(--sm-muted);
	font-size: 0.76rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.sm-jump__change {
	font-family: var(--sm-font-num);
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	flex: none;
}

.sm-jump__empty {
	padding: 9px;
	font-size: 0.8rem;
	color: var(--sm-muted);
}

.sm-app .sm-jump-link--plain {
	border-bottom: 0;
	padding-bottom: 0;
}

.sm-app .sm-jump-link--plain:hover { color: var(--sm-accent); }

/* -------------------------------------------------- *
 * 19. Ziehgriff zum Sortieren
 * -------------------------------------------------- */

.sm-app .sm-drag {
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: grab;
	touch-action: none;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.35;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.sm-card:hover .sm-drag,
.sm-app .sm-drag:focus-visible { opacity: 1; }

.sm-drag span {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 999px;
	background: var(--sm-border-strong);
	box-shadow: 0 4px 0 0 var(--sm-border-strong);
	margin-top: -3px;
}

.sm-app .sm-drag:hover span { background: var(--sm-accent); box-shadow: 0 4px 0 0 var(--sm-accent); }
.sm-app .sm-drag:active { cursor: grabbing; }

.sm-card.is-dragging {
	pointer-events: none;
	z-index: 30;
	opacity: 0.94;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	border-color: var(--sm-accent);
}

.sm-grid.is-sorting .sm-card { transition: none; }

/* -------------------------------------------------- *
 * 20. Fortschrittsbalken für den Abstand zum Verkauf
 * -------------------------------------------------- */

.sm-gap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: -4px;
}

.sm-gap__track {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--sm-surface-2);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sm-border) 70%, transparent);
	overflow: hidden;
}

.sm-gap__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--sm-gap-fill, 0%);
	border-radius: 999px;
	background: var(--sm-accent);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sm-gap__value {
	font-family: var(--sm-font-num);
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--sm-text-soft);
	min-width: 52px;
	text-align: right;
}

.sm-gap--empty .sm-gap__value { color: var(--sm-muted); font-weight: 400; }

/* -------------------------------------------------- *
 * 21. Tagesschlechteste
 * -------------------------------------------------- */

.sm-top__worst {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--sm-border);
}

.sm-top__subtitle {
	margin: 0 0 2px;
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sm-text);
}

.sm-top__row--worst .sm-top__rank { color: var(--sm-down); }

/* -------------------------------------------------- *
 * 22. Klickbare Kennzahlen-Kacheln
 * -------------------------------------------------- */

.sm-app .sm-summary__tile.is-action {
	appearance: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sm-app .sm-summary__tile.is-action:hover {
	border-color: var(--sm-accent);
	background: var(--sm-surface-2);
}

.sm-app .sm-summary__tile.is-action:focus-visible {
	outline: 2px solid var(--sm-accent);
	outline-offset: 2px;
}

/* Hinweis zum vorausgefüllten Verkaufskurs */

.sm-hint {
	margin: 0;
	grid-column: 1 / -1;
	font-size: 0.72rem;
	color: var(--sm-muted);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.sm-hint[hidden] { display: none; }

.sm-app .sm-hint__apply {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-size: 0.72rem;
	color: var(--sm-accent);
	text-decoration: underline;
	cursor: pointer;
}

/* -------------------------------------------------- *
 * 23. Werteanzeige im Diagramm
 * -------------------------------------------------- */

.sm-spark {
	position: relative;
	cursor: crosshair;
}

.sm-spark--empty { cursor: default; }

.sm-spark__crosshair {
	stroke: var(--sm-border-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.9;
}

/*
 * Der Punkt ist ein HTML-Element über der Zeichenfläche. Im SVG selbst
 * würde er durch preserveAspectRatio="none" oval verzerrt.
 */
.sm-spark__dot {
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--sm-surface);
	border: 1.5px solid currentColor;
	pointer-events: none;
	z-index: 4;
}

.sm-spark__dot[hidden] { display: none; }

.sm-spark__tip {
	position: absolute;
	bottom: calc(100% - 4px);
	z-index: 5;
	pointer-events: none;
	white-space: nowrap;
	font-family: var(--sm-font-num);
	font-variant-numeric: tabular-nums;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--sm-text);
	background: var(--sm-surface);
	border: 1px solid var(--sm-border-strong);
	border-radius: 6px;
	padding: 3px 7px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.sm-spark__tip[hidden] { display: none; }

/* Kurzzeichen des Zeitraums: d, w oder m */

.sm-spark__period {
	position: absolute;
	top: 0;
	right: 2px;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sm-muted);
	opacity: 0.65;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.sm-spark.is-hovering .sm-spark__period,
.sm-spark:hover .sm-spark__period { opacity: 0; }

/* -------------------------------------------------- *
 * 24. Info-Symbole an Formularfeldern
 * -------------------------------------------------- */

.sm-field__label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sm-muted);
}

.sm-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid var(--sm-border-strong);
	color: var(--sm-muted);
	font-size: 0.56rem;
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	line-height: 1;
	cursor: help;
	flex: none;
}

.sm-info:hover,
.sm-info:focus-visible {
	border-color: var(--sm-accent);
	color: var(--sm-accent);
	outline: none;
}

.sm-info::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	min-width: 150px;
	max-width: 230px;
	padding: 6px 9px;
	border-radius: 7px;
	border: 1px solid var(--sm-border-strong);
	background: var(--sm-surface);
	color: var(--sm-text);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.35;
	white-space: normal;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

.sm-info:hover::after,
.sm-info:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* -------------------------------------------------- *
 * 25. Handelszustand des Marktplatzes
 * -------------------------------------------------- */

.sm-ticker__venue {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.sm-dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex: none;
}

.sm-dot--open {
	background: var(--sm-up);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--sm-up) 60%, transparent);
	animation: sm-pulse 2.6s ease-in-out infinite;
}

/* Geschlossen wird bewusst grau dargestellt, nicht rot: Ein roter Punkt
   würde neben den Kursfarben wie eine Kursbewertung wirken. */
.sm-dot--closed {
	background: var(--sm-muted);
	opacity: 0.55;
}

@keyframes sm-pulse {
	0%, 100% { opacity: 0.55; box-shadow: 0 0 0 0 transparent; }
	50% { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sm-up) 28%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.sm-dot--open { animation: none; opacity: 1; }
}