.tssd-scoring {
	margin: 0 0 24px;
}

.tssd-scoring__lead {
	margin: 0 0 14px;
}

.tssd-scoring__note {
	margin: 12px 0 0;
	color: var(--sd-muted);
	font-size: var(--sd-fs-sm);
}

.tssd-scoring__list {
	margin: 0 0 14px;
	padding-left: 1.25em;
}

.tssd-scoring__list li {
	margin-bottom: 6px;
}

.tssd-scoring__scroll {
	overflow-x: auto;
	margin: 0 0 18px;
	-webkit-overflow-scrolling: touch;
}

.tssd-scoring__table {
	min-width: 34em;
}

.tssd-scoring__table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 8px;
	color: var(--sd-muted);
	font-size: var(--sd-fs-sm);
}

.tssd-scoring__table tbody th {
	text-align: left;
	padding: 11px 12px;
	border-bottom: 1px solid var(--sd-line-soft);
	vertical-align: middle;
	white-space: normal;
	text-wrap: balance;

	font-weight: 400;
}

.tssd-scoring__aid {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	/* Normalerweise steht das Symbol NEBEN dem Namen. Wird es zu eng, rutscht der
	   Name darUNTER, statt mitten im Wort umzubrechen — beides hatte der Betreiber
	   freigestellt („neben/unter/über"). Nötig wird das genau in einer Zeile:
	   „Rückgängig und Wiederholen" trägt zwei Symbole (60 px), da bleiben neben
	   ihnen nur rund 60 px, und „Rückgängig" braucht 75 px. Gemessen sah das so
	   aus: „Rückgä-ngig" / „Wiederh-olen". */
	flex-wrap: wrap;
}

.tssd-scoring__sym {
	display: inline-flex;
	gap: 3px;
	flex: 0 0 auto;
	/* Höhe einer Textzeile, damit Symbol und erste Namenszeile auf einer Linie
	   sitzen, auch wenn der Name danach umbricht. */
	margin-top: 1px;
}

.tssd-scoring__ico {
	width: 1.9em;
	height: 1.9em;
	display: block;
}

@media (min-width: 1000px) {
	.tssd-scoring__table--aids {
		table-layout: fixed;
	}

	.tssd-scoring__table--aids th:nth-child(1) { width: 9.5rem; }
	.tssd-scoring__table--aids th:nth-child(3) { width: 8.5rem; }
	.tssd-scoring__table--aids th:nth-child(4) { width: 9.5rem; }
}

/* Die Untergrenze ist das längste Wort der Spalte („Wiederholen", 5,5 rem).
   Darunter darf der Name nicht gequetscht werden — dann wechselt er die Zeile. */
.tssd-scoring__aidname {
	flex: 1 1 5.5rem;
	min-width: 5.5rem;
}

.tssd-scoring__hint {
	display: block;
	margin-top: 3px;
	color: var(--sd-muted);
	font-size: var(--sd-fs-xs);
}

.tssd-scoring__table tbody tr:hover {
	background: transparent;
}

@media (max-width: 700px) {
	.tssd-scoring__table {
		min-width: 0;
	}

	.tssd-scoring__table thead {
		display: none;
	}

	.tssd-scoring__table tbody tr {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid var(--sd-line);
	}

	/* Das Theme zeichnet um jede Zelle ein Gitter. Im gestapelten Zustand gibt es
	   keine Spalten mehr, die es trennen könnte — es bliebe nur Gestrichel. Die
	   Trennlinie zieht deshalb die ZEILE, nicht die Zelle. */
	.tssd-scoring__table tbody th,
	.tssd-scoring__table tbody td {
		display: block;
		padding: 3px 0;
		border: 0;
	}

	.tssd-scoring__table tbody td::before {
		content: attr(data-label) ": ";
		color: var(--sd-muted);
		font-size: var(--sd-fs-xs);
	}
}