.sz-tabelle { padding-block: var(--sz-raum-7); }
.sz-tabelle__rahmen { display: grid; gap: var(--sz-raum-4); }
.sz-tabelle__rolle { overflow-x: auto; border: 1px solid var(--sz-linie); border-radius: var(--sz-rund-m); background: var(--sz-papier); }
.sz-tabelle__tabelle { inline-size: 100%; border-collapse: collapse; font-size: var(--sz-text-s); }
.sz-tabelle__tabelle caption { text-align: start; font-weight: 600; color: var(--sz-blau); padding: var(--sz-raum-3) var(--sz-raum-4); caption-side: top; }
.sz-tabelle__tabelle :where(th, td) { text-align: start; padding: var(--sz-raum-2) var(--sz-raum-4); border-block-start: 1px solid var(--sz-linie); vertical-align: top; }
.sz-tabelle__tabelle thead th { background: var(--sz-blau); color: var(--sz-invers); font-weight: 600; white-space: nowrap; border: 0; position: sticky; top: 0; }
.sz-tabelle__tabelle tbody th { font-weight: 600; color: var(--sz-blau); white-space: nowrap; }
.sz-tabelle__tabelle tbody tr:nth-child(even) { background: var(--sz-hell); }
.sz-tabelle__tabelle tbody tr[hidden] { display: none; }
.sz-tabelle__suche { display: grid; gap: var(--sz-raum-2); max-inline-size: 48rem; }
.sz-tabelle__suche label { font-weight: 600; color: var(--sz-blau); }
.sz-tabelle__suche input { min-block-size: 4.4rem; padding: 0 var(--sz-raum-3); font: inherit; border: 1px solid var(--sz-linie-kraeftig); border-radius: var(--sz-rund-s); background: var(--sz-papier); color: var(--sz-tinte); }
.sz-tabelle__treffer { font-size: var(--sz-text-s); color: var(--sz-tinte-leise); min-block-size: 1.6em; }
.sz-tabelle__fussnote { font-size: var(--sz-text-xs); color: var(--sz-tinte-leise); max-inline-size: 80ch; }

/* Telefon: Tabellen mit mehr als zwei Spalten werden zu Karten, eine Zeile = eine Karte, Spaltenname vor jedem Wert.
   Kein Querscrollen, kein Abschneiden (Ben und Oliver 28.09.2026). Zweispaltige Typenlisten bleiben Tabellen. */
@media (max-width: 47.99rem) {
	.sz-tabelle__rolle[data-mobil="karten"] { overflow: visible; border: 0; background: none; }
	.sz-tabelle__rolle[data-mobil="karten"] .sz-tabelle__tabelle { display: block; }
	.sz-tabelle__rolle[data-mobil="karten"] caption { display: block; padding: 0 0 var(--sz-raum-3); }
	.sz-tabelle__rolle[data-mobil="karten"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
	.sz-tabelle__rolle[data-mobil="karten"] tbody, .sz-tabelle__rolle[data-mobil="karten"] tr { display: block; }
	.sz-tabelle__rolle[data-mobil="karten"] tr { margin-block-end: var(--sz-raum-3); border: 1px solid var(--sz-linie); border-radius: var(--sz-rund-m); background: var(--sz-papier); padding: var(--sz-raum-3) var(--sz-raum-4); }
	.sz-tabelle__rolle[data-mobil="karten"] tbody tr:nth-child(even) { background: var(--sz-papier); }
	.sz-tabelle__rolle[data-mobil="karten"] tbody th, .sz-tabelle__rolle[data-mobil="karten"] td { display: block; padding: 0; border: 0; white-space: normal; }
	.sz-tabelle__rolle[data-mobil="karten"] tbody th { font-size: var(--sz-text-m); padding-block-end: var(--sz-raum-2); margin-block-end: var(--sz-raum-2); border-block-end: 1px solid var(--sz-linie); }
	.sz-tabelle__rolle[data-mobil="karten"] td { padding-block: .3rem; }
	.sz-tabelle__rolle[data-mobil="karten"] td::before { content: attr(data-spalte); display: block; font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--sz-tinte-leise); }
}

/* Auswahl: Kaestchen in der ersten Spalte neben dem Namen, gewaehlte Zeile hell markiert, Leiste unten (28.09.2026). */
.sz-tabelle__kuerzel { font-family: var(--sz-schrift-mono); font-weight: 500; color: var(--sz-tinte-leise); margin-inline-start: var(--sz-raum-2); }
.sz-tabelle__wahl { inline-size: 1%; white-space: nowrap; text-align: start; padding-inline-end: 0; }
/* Kaestchen auf der Textzeile der Nachbarzellen; Tippflaeche 4.4rem ueber negative Raender, damit die Zeile nicht waechst. Das Wort «Anfragen» steht nur im Tabellenkopf (Oliver 28.09.2026), auf Handykarten je Karte. */
.sz-tabelle__wahl label { display: flex; align-items: center; gap: var(--sz-raum-2); box-sizing: content-box; block-size: 1lh; padding-block: .8rem; margin-block: -.8rem; padding-inline: var(--sz-raum-2); cursor: pointer; font-weight: 600; color: var(--sz-blau); }
.sz-tabelle__wahl label span { display: none; }
.sz-tabelle__wahl input { flex: none; inline-size: 2.2rem; block-size: 2.2rem; margin: 0; accent-color: var(--sz-orange); cursor: pointer; }
.sz-tabelle__tabelle tbody tr.is-gewaehlt { background: color-mix(in srgb, var(--sz-orange) 12%, var(--sz-papier)) !important; }
.sz-auswahl-leiste { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; background: var(--sz-blau); color: var(--sz-invers); box-shadow: 0 -8px 24px rgb(0 36 58 / .25); }
.sz-auswahl-leiste__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sz-raum-3) var(--sz-raum-5); padding-block: var(--sz-raum-3); }
.sz-auswahl-leiste__stand { font-weight: 600; margin-inline-end: auto; }
.sz-auswahl-leiste__leeren { background: none; border: 0; color: var(--sz-invers); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-block-size: 4.4rem; padding-inline: var(--sz-raum-2); }
body.sz-auswahl-offen { padding-block-end: 8rem; }
@media (max-width: 47.99rem) {
	.sz-tabelle__rolle[data-mobil="karten"] tr { display: flex; flex-direction: column; }
	.sz-tabelle__rolle[data-mobil="karten"] td.sz-tabelle__wahl { order: 9; text-align: start; padding-block-start: var(--sz-raum-2); }
	.sz-tabelle__rolle[data-mobil="karten"] td.sz-tabelle__wahl::before { display: none; }
	.sz-tabelle__rolle[data-mobil="karten"] td.sz-tabelle__wahl label { block-size: auto; min-block-size: 4.4rem; margin-block: 0; padding: 0; }
	.sz-tabelle__rolle[data-mobil="karten"] td.sz-tabelle__wahl label span { display: inline; }
	.sz-tabelle__wahl label { padding-inline: 0; }
}

/* Zweispaltige Tabellen (Typ, Bauart, Auswahl) am Handy ohne Querscrollen: Zellen umbrechen statt die Tabelle zu verbreitern.
   Clyde Bergemann war mit langen Typnamen 517 px breit in 350 px Rahmen (Oliver 07.10.2026, Prüflauf). */
@media (max-width: 47.99rem) {
	.sz-tabelle__rolle:not([data-mobil="karten"]) .sz-tabelle__tabelle { inline-size: 100%; table-layout: fixed; }
	.sz-tabelle__rolle:not([data-mobil="karten"]) :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
	.sz-tabelle__rolle:not([data-mobil="karten"]) .sz-tabelle__wahl { inline-size: 5.6rem; }
}