

.tssd-samples {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	margin: 0 0 14px;
}
.tssd-samples > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 11px 14px;
	font-weight: 700;
}
.tssd-samples > summary::-webkit-details-marker { display: none; }
.tssd-samples > summary::after {
	content: "\25be";
	margin-left: auto;
	color: var(--sd-gold-dark);
}
.tssd-samples[open] > summary::after { content: "\25b4"; }
.tssd-samples[open] > summary { border-bottom: 1px solid var(--sd-line-soft); }

.tssd-samples__body { padding: 12px 14px 14px; }
.tssd-samples__intro { margin: 0 0 10px; }
/* Die Tabelle rollt in IHREM Kasten — die Seite selbst nie. */
.tssd-samples__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tssd-samples__table { width: 100%; }
.tssd-samples__name { text-align: left; }
.tssd-samples__sum { display: block; font-weight: 400; }
.tssd-samples__scope { white-space: normal; }

.tssd-samples__act {
	text-align: left;
	/* Die beiden Schaltflaechen bleiben nebeneinander (und die Spalte damit so breit,
	   wie sie sein muss). Ohne das brach „Zusammenstellung uebernehmen" unter „PDF
	   ansehen" um und jede Zeile wurde doppelt so hoch. */
	white-space: nowrap;
}
.tssd-samples__act > * { margin: 2px 6px 2px 0; }

.tssd-samples__hint { margin: 8px 0 0; }
.tssd-samples__done { margin: 8px 0 0; }

.tssd-samples__done-head { margin: 0; }
.tssd-samples__done-list { margin: 6px 0 0; padding-left: 20px; }
.tssd-samples__done-list li { margin: 2px 0; }
.tssd-samples__done-cta { margin: 8px 0 0; }

/* Auf schmalen Geräten wird aus jeder Zeile ein Block — sonst quetscht die
   Aktionsspalte den Namen auf zwei Buchstaben Breite. */
@media (max-width: 640px) {
	.tssd-samples__table thead { display: none; }
	.tssd-samples__table tr { display: block; padding: 6px 0; }
	.tssd-samples__table th,
	.tssd-samples__table td { display: block; width: auto; }
	/* Auf dem Telefon ist fuer zwei Schaltflaechen nebeneinander kein Platz. */
	.tssd-samples__act { white-space: normal; }
}
