/*
 * Struktur- und Feinschliff-CSS für den Shortcode [sus_mannschaft] (PR5/PR6:
 * nur die funktional nötige Logo-Größenbegrenzung; PR7: Vereins-CD-Styling
 * gemäß Anchor.md, Abschnitt "Corporate-Design-Referenz").
 *
 * Nutzt ausschließlich die CSS-Custom-Properties aus assets/frontend-
 * shared.css (u.a. --sus-color-primary, --sus-radius, --sus-shadow-card) –
 * keine fest verdrahteten Farb-/Radius-/Schatten-Werte in den Regeln unten.
 * frontend-shared.css wird von TeamShortcode::enqueue_assets() zusätzlich
 * und vor dieser Datei eingebunden.
 */

.sus-mannschaft-widget {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--sus-color-text);
	font-size: var(--sus-font-size-base);
	font-family: var(--sus-font-family);
}

.sus-mannschaft-liga {
	margin: 0 0 4px;
	color: var(--sus-color-heading);
	font-size: 1.3em;
}

.sus-mannschaft-notice {
	margin: 0;
	color: var(--sus-color-text-secondary);
}

/*
 * Kartenoptik für jeden Inhaltsblock (Anchor.md-Vorgabe: "saubere
 * Kartenoptik für die Blöcke, Radius und Schatten gemäß CD-Referenz").
 */
.sus-mannschaft-block {
	background: #ffffff;
	border-radius: var(--sus-radius);
	box-shadow: var(--sus-shadow-card);
	padding: 14px 16px;
}

.sus-mannschaft-block-title {
	margin: 0 0 10px;
	color: var(--sus-color-heading);
	font-size: 1.05em;
}

/*
 * "Nächste Spiele" (und seit dem Nachtrag "Kompletter Spielplan", beide über
 * TeamShortcode::render_match_list()) als festes Grid, analog zum
 * Startseiten-Widget (Anchor.md-Korrektur nach dem ersten PR7-Staging-Test).
 * Spaltenreihenfolge (Nachtrag, geändert): Datum · Heim/Auswärts-Badge ·
 * Logo+Name · Uhrzeit/Ergebnis (jetzt ganz hinten statt an zweiter Stelle) –
 * identische Spaltenbreiten für jede Zeile, statt einer lose fließenden
 * Liste. Logo und Name teilen sich seit der Korrektur vom 15.09.2026 EINE
 * Grid-Spalte (statt zwei separaten mit dem regulären, dafür zu großen
 * Spalten-Gap dazwischen) – siehe `.sus-mannschaft-next-match-col--team`
 * unten.
 */
.sus-mannschaft-next-matches {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sus-mannschaft-next-match {
	display: grid;
	grid-template-columns: 90px 74px minmax(0, 1fr) 84px;
	align-items: center;
	gap: 8px;
}

.sus-mannschaft-next-match-col--date {
	color: var(--sus-color-text-secondary);
}

.sus-mannschaft-next-match-col--time {
	color: var(--sus-color-meta);
	font-size: 0.9em;
	text-align: right;
}

/*
 * Gemeinsame Flex-Gruppe für Logo + Mannschaftsname (Anchor.md-Korrektur
 * vom 15.09.2026: "Abstand Logo↔Name soll deutlich kleiner sein als die
 * übrigen Spaltenabstände im Grid"). Eigener, kleinerer Gap (6px) statt des
 * regulären 8px-Spalten-Gaps des äußeren Grids – wirkt dadurch wie ein
 * Icon direkt vor einem Text statt zwei unabhängiger Spalten.
 * `min-width: 0` ist nötig, damit der Name-Text innerhalb dieses
 * Flex-Containers weiterhin schrumpfen und per `text-overflow: ellipsis`
 * abschneiden kann (Flex-Items sind sonst standardmäßig nicht kleiner als
 * ihr Inhalt).
 */
.sus-mannschaft-next-match-col--team {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sus-mannschaft-next-match-col--name {
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

/*
 * Rundes Logo-Framing wie in der Standings-Tabelle, bewusst ohne
 * Hintergrundfläche (Anchor.md-Korrektur: "Rund heißt rund, ohne eckigen
 * Rahmen/Hintergrund darum"). Größe/Klipping sitzt auf dem
 * `.sus-logo-frame`-Rahmen (siehe frontend-shared.css) statt direkt auf dem
 * `<img>` – Bug-Fix, siehe Kommentar dort.
 */
.sus-mannschaft-next-match-logo-frame {
	width: var(--sus-logo-size-desktop);
	height: var(--sus-logo-size-desktop);
}

/*
 * Karten-Layout pro Spiel für "Nächste Spiele"/"Kompletter Spielplan" auf
 * schmalen Bildschirmen (Bugfix-Nachtrag, "Namen auf Telefonbreite fast bis
 * zur Unlesbarkeit abgeschnitten"): dasselbe Grundprinzip wie das
 * Tabellen-Karten-Layout weiter unten (`.sus-mannschaft-tabelle-karten`) –
 * beide Markups (Grid-Liste UND Karten-Liste) stehen immer im HTML,
 * unterhalb desselben 600px-Breakpoints wird per `display: none`/
 * `display: block` umgeschaltet (siehe Breakpoint-Regel weiter unten).
 * Standardmäßig (Desktop/Tablet) unsichtbar.
 */
.sus-mannschaft-next-matches-karten {
	display: none;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sus-mannschaft-next-match-karte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sus-table-border-color);
}

.sus-mannschaft-next-matches-karten .sus-mannschaft-next-match-karte:last-child {
	border-bottom: none;
}

.sus-mannschaft-next-match-karte-haupt {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sus-mannschaft-next-match-karte-datum {
	color: var(--sus-color-text-secondary);
	font-size: 0.9em;
}

/*
 * Uhrzeit/Ergebnis ganz rechts in der Hauptzeile (`margin-left: auto`
 * schiebt sie ans Ende, egal ob davor Datum + Badge oder nur Datum stehen).
 */
.sus-mannschaft-next-match-karte-zeit {
	margin-left: auto;
	color: var(--sus-color-meta);
	font-size: 0.9em;
	white-space: nowrap;
}

.sus-mannschaft-next-match-karte-team {
	display: flex;
	align-items: center;
	gap: 6px;
}

/*
 * Anders als die Namens-Spalte der Grid-Zeile bewusst OHNE Ellipsis/
 * Einzeiler-Zwang – die Karte hat für Datum/Badge/Uhrzeit bereits eine
 * eigene Hauptzeile, der Name bekommt seine eigene Sekundärzeile ohne
 * Nebeneinander mit anderen Werten und darf deshalb normal umbrechen.
 */
.sus-mannschaft-next-match-karte-name {
	font-weight: 600;
	white-space: normal;
	overflow-wrap: break-word;
}

/*
 * Sieg/Unentschieden/Niederlage-Icon (Nachtrag) direkt neben dem Ergebnis in
 * der Uhrzeit/Ergebnis-Spalte, nur bei Spielen mit tatsächlichen
 * Ergebniswerten (siehe TeamShortcode::render_result_icon()). Dashicons
 * statt einer neuen Icon-Bibliothek; Farben bewusst identisch zur
 * Tendenz-Icon-Reihe (--sus-color-win-/-loss-/-draw-text, siehe
 * assets/frontend-shared.css und .sus-mannschaft-tendenz-icon--sieg/
 * --niederlage/--unentschieden unten) statt neuer Farbwerte, damit
 * Sieg/Niederlage/Unentschieden im gesamten Widget konsistent aussehen.
 */
.sus-mannschaft-result-icon {
	margin-left: 4px;
	font-size: 1.1em;
	vertical-align: text-bottom;
}

.sus-mannschaft-result-icon--sieg {
	color: var(--sus-color-win-text);
}

.sus-mannschaft-result-icon--niederlage {
	color: var(--sus-color-loss-text);
}

.sus-mannschaft-result-icon--unentschieden {
	color: var(--sus-color-draw-text);
}

/*
 * Tendenz-Icon-Reihe (Nachtrag): ersetzt die früheren S/U/N-Buchstaben-
 * Badges durch dieselben kleinen, runden Sieg-/Unentschieden-/
 * Niederlage-Icons (Dashicons) wie das Ergebnis-Icon in "Kompletter
 * Spielplan" (siehe TeamShortcode::render_outcome_icon(), gemeinsam
 * genutzt von .sus-mannschaft-result-icon und .sus-mannschaft-tendenz-icon
 * unten) – keine eigene Icon-/Farblogik dupliziert. Farbcodierung siehe
 * assets/frontend-shared.css: Sieg als heller Tint der Vereinsfarbe
 * (--sus-color-win-*), Niederlage gedämpft/Rot (--sus-color-loss-*),
 * Unentschieden neutral (--sus-color-draw-*). Ältestes Spiel links,
 * neuestes rechts (Reihenfolge kommt unverändert aus PHP, siehe
 * TeamShortcode::render_tendenz()).
 */
.sus-mannschaft-tendenz-wrapper {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sus-mannschaft-tendenz {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.sus-mannschaft-tendenz-eintrag {
	display: flex;
}

.sus-mannschaft-tendenz-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	font-size: 0.95em;
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-draw-text);
}

.sus-mannschaft-tendenz-icon--sieg {
	background: var(--sus-color-win-bg);
	color: var(--sus-color-win-text);
}

.sus-mannschaft-tendenz-icon--niederlage {
	background: var(--sus-color-loss-bg);
	color: var(--sus-color-loss-text);
}

.sus-mannschaft-tendenz-icon--unentschieden {
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-draw-text);
}

/*
 * Platzhalter-Slot (Nachtrag, Staging-Korrektur): noch nicht gespielte
 * Partie, füllt die Reihe auf die konfigurierte Anzahl auf (siehe
 * TeamShortcode::pad_front_with_placeholders()). Bewusst deutlich blasser
 * als --unentschieden oben (eigene --sus-color-placeholder-*-Variablen,
 * siehe assets/frontend-shared.css) und ein anderes Dashicon
 * (dashicons-clock statt dashicons-minus) – niemals mit einem echten
 * Unentschieden verwechselbar.
 */
.sus-mannschaft-tendenz-icon--platzhalter {
	background: var(--sus-color-placeholder-bg);
	color: var(--sus-color-placeholder-text);
}

/*
 * Serien-Highlight (Nachtrag): kurzer Hinweistext oberhalb der Icon-Reihe
 * bei mindestens drei identischen Ergebnissen in Folge (siehe
 * TeamShortcode::detect_streak()) – dieselben Sieg-/Niederlage-Farben wie
 * die Icons selbst, damit der Text erkennbar zur jeweiligen Serie gehört.
 */
.sus-mannschaft-tendenz-streak {
	margin: 0;
	font-weight: 600;
}

.sus-mannschaft-tendenz-streak--sieg {
	color: var(--sus-color-win-text);
}

.sus-mannschaft-tendenz-streak--niederlage {
	color: var(--sus-color-loss-text);
}

/*
 * Tabelle. `table-layout: fixed` (Bugfix-Nachtrag, "Ellipsis/Tooltip fehlte
 * in der klassischen Tabelle") ist Voraussetzung dafür, dass die
 * Namens-Spalte per `text-overflow: ellipsis` sauber abschneiden kann statt
 * bei knappem Platz umzubrechen oder die Tabelle zu verbreitern: die
 * übrigen, schmalen Spalten bekommen dafür feste Breiten (siehe
 * `nth-child`-Regeln weiter unten), die Namens-Spalte bleibt bewusst ohne
 * eigene Breite und bekommt automatisch den kompletten Rest der
 * verfügbaren Breite.
 */
.sus-mannschaft-tabelle {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 0;
	font-size: 0.95em;
}

/*
 * Bug-Fix (Anchor.md-Korrektur vom 15.09.2026, "Ohne Rahmen entfernt nicht
 * alle Rahmenlinien"): explizites `border: 0` VOR der eigentlichen
 * `border-bottom`-Deklaration, statt nur `border-bottom` zu setzen und die
 * übrigen Seiten unangetastet zu lassen. Im Browser nachvollzogen (nicht
 * nur Code-Review): eine typische generische Theme-Regel wie
 * `table, th, td { border: 1px solid #ccc; }` setzt ALLE vier Seiten;
 * unsere vorherigen Regeln überschrieben nur `border-bottom` (per
 * spezifischerem Klassen-Selektor), wodurch `border-top`/`-left`/`-right`
 * des Themes unverändert sichtbar blieben – genau die im Screenshot
 * gemeldeten "Trennlinien zwischen den Spalten". Der explizite Reset macht
 * unsere Tabelle unabhängig von einem eventuell so gestalteten Theme.
 */
/*
 * `box-sizing: border-box` (Staging-Korrektur, Nachtrag) EXPLIZIT auf den
 * eigenen Tabellenzellen gesetzt statt sich auf einen eventuellen globalen
 * Reset des jeweiligen WordPress-Themes zu verlassen: unter
 * `table-layout: fixed` bestimmt die `width` unten die Spaltenbreite
 * bündig mit dem Zellenrand, ohne `box-sizing: border-box` würde das
 * horizontale Padding (8px je Seite) zur gesetzten Breite ADDIERT statt
 * darin enthalten zu sein – abhängig davon, ob das Theme selbst einen
 * globalen `border-box`-Reset mitbringt oder nicht, ergäben sich dadurch
 * unterschiedliche tatsächliche Spaltenbreiten auf verschiedenen Seiten.
 * Mit einer eigenen, expliziten Deklaration (höhere Spezifität als ein
 * theme-weiter `*`-Selektor) ist die Breitenberechnung immer dieselbe,
 * unabhängig vom Theme.
 */
.sus-mannschaft-tabelle th,
.sus-mannschaft-tabelle-zeile td {
	box-sizing: border-box;
}

/*
 * `white-space: nowrap` auf allen Kopfzeilen (Staging-Korrektur, Nachtrag:
 * "Platz"/"Team" brachen mitten im Wort um) – verhindert einen Umbruch
 * mitten im Wort zuverlässig, unabhängig von der genauen Ursache der zu
 * schmalen Spalte (siehe auch die unten auf `ch`-Einheiten umgestellten
 * Spaltenbreiten, die das eigentliche Platzproblem beheben; `nowrap` ist
 * das zusätzliche Sicherheitsnetz für den Fall, dass eine Spalte trotzdem
 * einmal knapp wird – Inhalt würde dann überlaufen statt mitten im Wort
 * umzubrechen, was immer noch besser lesbar ist).
 */
.sus-mannschaft-tabelle th {
	text-align: left;
	white-space: nowrap;
	padding: var(--sus-table-cell-padding-block) 8px;
	color: var(--sus-color-meta);
	font-weight: 600;
	border: 0;
	border-bottom: 2px solid var(--sus-table-border-color);
}

.sus-mannschaft-tabelle-zeile td {
	padding: var(--sus-table-cell-padding-block) 8px;
	border: 0;
	border-bottom: 1px solid var(--sus-table-border-color);
}

/*
 * Platz- und Logo-Spalte zentrieren (Anchor.md-Ergänzung vom 15.09.2026,
 * korrigiert am 15.09.2026: NUR Spaltenköpfe + Platzierungszahl + Logo,
 * NICHT der Mannschaftsname), damit sie optisch zu den übrigen, bereits
 * eng/zentriert wirkenden Spalten (Sp./Pkt./Tore/S/U/N) passen. Spalte 1 =
 * Platz, Spalte 2 = Logo, Spalte 3 = Name. Alle drei Spaltenköpfe bleiben
 * zentriert (auch der leere Kopf über der Namens-Spalte sowie „Team" über
 * der Logo-Spalte, bewusst so gewünscht, obwohl der Name-Inhalt darunter
 * linksbündig ist) – nur beim Zelleninhalt ist Spalte 3 (Name) davon
 * ausgenommen, siehe explizite `text-align: left` weiter unten. `nth-child`
 * analog zu den bereits bestehenden Responsive-Regeln unten, die Spalten
 * ebenfalls über ihre Position statt einer eigenen CSS-Klasse ansprechen.
 */
.sus-mannschaft-tabelle th:nth-child(1),
.sus-mannschaft-tabelle th:nth-child(2),
.sus-mannschaft-tabelle th:nth-child(3),
.sus-mannschaft-tabelle-zeile td:nth-child(1),
.sus-mannschaft-tabelle-zeile td:nth-child(2) {
	text-align: center;
}

/*
 * Mannschaftsname bleibt linksbündig (Korrektur vom 15.09.2026: die
 * vorherige Fassung zentrierte versehentlich auch den Namen mit) – explizit
 * gesetzt statt nur auf den Browser-Default zu vertrauen, robuster gegen
 * eine eventuell vererbte Zentrierung.
 */
.sus-mannschaft-tabelle-zeile td:nth-child(3) {
	text-align: left;
}

/*
 * Feste Breiten für alle Spalten außer der Namens-Spalte (Bugfix-Nachtrag,
 * "Ellipsis/Tooltip fehlte in der klassischen Tabelle") – Voraussetzung für
 * `table-layout: fixed` oben. Auf `th` UND `td` gesetzt (robuster als nur
 * auf der Kopfzeile, falls ein Browser bei versteckten `th`-Zellen anders
 * neu verteilt als erwartet). Die Namens-Spalte (3) bleibt bewusst ohne
 * eigene Breite, bekommt also automatisch den gesamten Rest der Tabellen-
 * breite – wächst entsprechend, sobald weiter unten einzelne Spalten per
 * `display: none` ausgeblendet werden.
 *
 * Werte seit der Staging-Korrektur (Nachtrag) in `ch` statt `px` (Vorgabe:
 * "robust für alle drei Schriftgrößen-Stufen") – `ch` orientiert sich an
 * der Zeichenbreite der aktuell wirksamen Schriftgröße
 * (--sus-font-size-base, siehe Design-Bereich), wächst/schrumpft also
 * automatisch mit ihr, statt bei "Groß" plötzlich zu eng zu werden. Jede
 * Breite wurde per Headless-Rendering bei allen drei Stufen gegen den
 * tatsächlich benötigten Platz verifiziert (Kopfzeilen-Text bzw. – bei
 * Spalte 2 – die breitere "Kein Logo"-Pille, bei Spalte 6 den längsten
 * realistischen "Tore"-Wert), mit spürbarem Sicherheitsabstand statt
 * einer knapp bemessenen Minimalbreite.
 */
.sus-mannschaft-tabelle th:nth-child(1),
.sus-mannschaft-tabelle-zeile td:nth-child(1) {
	width: 9ch;
}

/*
 * Spalte 2 trägt zwar den Kopf "Team", zeigt aber tatsächlich das
 * Vereinslogo bzw. bei fehlendem/kaputtem Logo die "Kein Logo"-Pille
 * (`.sus-badge--missing-logo`) – die Pille ist der eigentlich breitere
 * Inhalt (nicht der vierbuchstabige Kopfzeilen-Text "Team"), daher
 * großzügiger bemessen als die übrigen schmalen Statistik-Spalten.
 */
.sus-mannschaft-tabelle th:nth-child(2),
.sus-mannschaft-tabelle-zeile td:nth-child(2) {
	width: 12ch;
}

.sus-mannschaft-tabelle th:nth-child(4),
.sus-mannschaft-tabelle-zeile td:nth-child(4) {
	width: 8ch;
}

.sus-mannschaft-tabelle th:nth-child(5),
.sus-mannschaft-tabelle-zeile td:nth-child(5) {
	width: 9ch;
}

.sus-mannschaft-tabelle th:nth-child(6),
.sus-mannschaft-tabelle-zeile td:nth-child(6) {
	width: 11ch;
}

.sus-mannschaft-tabelle th:nth-child(7),
.sus-mannschaft-tabelle-zeile td:nth-child(7),
.sus-mannschaft-tabelle th:nth-child(8),
.sus-mannschaft-tabelle-zeile td:nth-child(8),
.sus-mannschaft-tabelle th:nth-child(9),
.sus-mannschaft-tabelle-zeile td:nth-child(9) {
	width: 7ch;
}

/*
 * Namens-Zelle: `text-overflow: ellipsis` sitzt auf einem inneren `<span
 * title="…">` statt direkt auf dem `<td>` (analog zum bereits etablierten
 * Muster in "Nächste Spiele"/Startseiten-Widget, siehe
 * `.sus-mannschaft-next-match-col--name`/`.sus-woche-col--name1`), damit
 * derselbe Name zusätzlich als nativer Tooltip beim Hover/Tap zur Verfügung
 * steht (`title`-Attribut, siehe TeamShortcode::render_table()). `min-width:
 * 0` auf der Zelle ist bei `table-layout: fixed` zwar nicht zwingend nötig
 * (anders als bei Flex/Grid), schadet aber nicht und macht die Absicht
 * explizit.
 */
.sus-mannschaft-tabelle-name-zelle {
	min-width: 0;
	overflow: hidden;
}

.sus-mannschaft-tabelle-name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sus-mannschaft-tabelle-zeile:last-child td {
	border-bottom: none;
}

/*
 * Positions-Trend-Spalte (Teil 3, Nachtrag, Attribut `tabelle_trend`,
 * Default "nein"): eigene Klasse statt `nth-child`-Positionierung, damit die
 * bereits bestehenden `nth-child`-Regeln oben (Zentrierung, Responsive-
 * Ausblenden) unberührt bleiben – die Trend-Spalte ist bewusst die letzte
 * Spalte der Tabelle. Grün/Rot nutzen dieselben Farbvariablen wie das
 * Sieg/Niederlage-Ergebnis-Icon (--sus-color-win-text/-loss-text), keine
 * neuen Farbwerte. Der Selektor mit vorangestelltem `td` erhöht bewusst die
 * Spezifität über die bereits bestehende `.sus-standings-own-row td`-Regel
 * hinaus, damit die Trend-Farbe auch in der eigenen (hervorgehobenen) Zeile
 * sichtbar bleibt statt von deren Textfarbe überschrieben zu werden.
 */
/*
 * Feste, kompakte Breite (Nachtrag, Staging-Korrektur: "Trend-Spalte zu
 * breit") – ohne explizite Breite verteilt `table-layout: fixed` (siehe
 * oben) den verbleibenden Platz automatisch auf diese Spalte, obwohl ihr
 * Inhalt (Pfeil + höchstens zweistellige Zahl, oder leer) genauso kompakt
 * ist wie Sp./Pkt./S/U/N. Ein Wert analog zu diesen übrigen schmalen
 * Statistik-Spalten statt automatischem Wachstum; deckt "▲ 13" (Extremfall
 * bei einer 14er-Liga) komfortabel ab.
 *
 * Folge-Korrektur (Nachtrag): `px` durch `ch` ersetzt (siehe ausführlicher
 * Kommentar bei den `nth-child`-Breiten weiter oben) – derselbe Grund
 * (robust bei allen drei Schriftgrößen-Stufen) UND derselbe Grund für den
 * anfangs noch zu breiten Zustand: `px` wächst nicht mit der Schriftgröße
 * mit, `ch` schon.
 */
.sus-mannschaft-tabelle-trend {
	width: 9ch;
	text-align: center;
	white-space: nowrap;
}

td.sus-mannschaft-tabelle-trend .sus-mannschaft-trend--auf {
	color: var(--sus-color-win-text);
}

td.sus-mannschaft-tabelle-trend .sus-mannschaft-trend--ab {
	color: var(--sus-color-loss-text);
}

.sus-mannschaft-trend {
	font-weight: 600;
}

/*
 * "Form"-Spalte (Nachtrag, `tabelle_form`, Default "nein"): eigene Klasse
 * statt `nth-child`-Positionierung, analog zur Trend-Spalte oben – bleibt
 * damit von den bestehenden `nth-child`-Regeln unberührt und steht in der
 * Spaltenreihenfolge bewusst VOR der Trend-Spalte (die laut Kommentar oben
 * bewusst die letzte Spalte bleibt). Icon-Reihe/Farben identisch zur
 * Tendenz-Icon-Reihe (`.sus-mannschaft-tendenz-icon`), nur etwas kompakter,
 * da mehrere Zeilen der Tabelle gleichzeitig sichtbar sind statt einer
 * einzelnen Tendenz-Anzeige. `flex-wrap: wrap` verhindert ein Überlaufen,
 * falls `tabelle_form_anzahl` hoch genug gewählt wird, dass die Icon-Reihe
 * nicht mehr in die (durch `table-layout: fixed` begrenzte) Spaltenbreite
 * passt.
 *
 * Staging-Korrektur (Nachtrag, "Form"-Spalte weiterhin zu breit): bewusst
 * KEINE `width` hier in der Stylesheet-Datei. Ohne eigene Breite verteilte
 * `table-layout: fixed` den kompletten verbleibenden Platz je zur Hälfte
 * auf diese Spalte UND die Namens-Spalte (beide ohne feste Breite,
 * empirisch per Headless-Rendering nachvollzogen: beide landeten bei
 * exakt derselben, sehr großen Breite) – die Icon-Reihe hing dadurch
 * mittig in einer viel zu breiten Zelle, mit auffälligem Leerraum zum
 * eigentlichen Inhalt. Da die benötigte Breite von der pro Einbindung
 * konfigurierbaren `tabelle_form_anzahl` abhängt (mehr Icons = breiter),
 * lässt sich das nicht mit einem einzelnen statischen CSS-Wert lösen wie
 * bei den übrigen Spalten – `TeamShortcode::render_table()` berechnet die
 * passende Breite deshalb serverseitig
 * (`form_column_width_ch()`, ebenfalls in `ch`, also weiterhin robust bei
 * allen drei Schriftgrößen-Stufen) und setzt sie direkt als Inline-Style
 * auf `<th>`/`<td>`.
 */
.sus-mannschaft-tabelle-form-spalte {
	text-align: center;
}

.sus-mannschaft-tabelle-form {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 3px;
	flex-wrap: wrap;
}

.sus-mannschaft-tabelle-form-eintrag {
	display: flex;
}

.sus-mannschaft-tabelle-form-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	font-size: 0.8em;
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-draw-text);
}

.sus-mannschaft-tabelle-form-icon--sieg {
	background: var(--sus-color-win-bg);
	color: var(--sus-color-win-text);
}

.sus-mannschaft-tabelle-form-icon--niederlage {
	background: var(--sus-color-loss-bg);
	color: var(--sus-color-loss-text);
}

.sus-mannschaft-tabelle-form-icon--unentschieden {
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-draw-text);
}

/*
 * Platzhalter-Slot (Nachtrag, Staging-Korrektur) – siehe ausführlicher
 * Kommentar bei .sus-mannschaft-tendenz-icon--platzhalter oben, dieselbe
 * Logik/Farben, nur in der kompakteren Form-Spalten-Größe.
 */
.sus-mannschaft-tabelle-form-icon--platzhalter {
	background: var(--sus-color-placeholder-bg);
	color: var(--sus-color-placeholder-text);
}

/*
 * Eigene Zeile hervorgehoben ("font-weight: 700" plus dezenter Akzentstrich
 * an der ersten Zelle, damit die Zeile auch ohne Farbwahrnehmung erkennbar
 * bleibt) in der Farbe --sus-color-own-team – seit "Weitere Ausbaustufe"
 * (Anchor.md) ein eigenständiges Farbfeld, Default identisch mit der
 * Vereinsfarbe.
 */
.sus-standings-own-row {
	font-weight: 700;
}

.sus-standings-own-row td {
	color: var(--sus-color-own-team);
}

.sus-standings-own-row td:first-child {
	border-left: 3px solid var(--sus-color-own-team);
}

/*
 * Rundes Logo-Framing wie bei handball.net (Anchor.md-Vorgabe, neu in PR7) –
 * die Größenbegrenzung selbst (32×32px, seitenverhältnistreu) ist bereits
 * seit dem PR6-Nachtrag funktional notwendig, "rund" kommt hier hinzu.
 * Bewusst OHNE Hintergrundfläche (Anchor.md-Korrektur: "Rund heißt rund,
 * ohne eckigen Rahmen/Hintergrund darum") – nur das kreisrund zugeschnittene
 * Bild selbst. Größe/Klipping sitzt auf dem `.sus-logo-frame`-Rahmen (siehe
 * frontend-shared.css) statt direkt auf dem `<img>` – Bug-Fix nach dem
 * zweiten PR7-Staging-Test, siehe Kommentar dort ("Logos weiterhin eckig").
 */
.sus-standings-logo-frame {
	width: var(--sus-logo-size-desktop);
	height: var(--sus-logo-size-desktop);
}

/*
 * Karten-Layout der Tabelle für schmale Bildschirme (Bugfix-Nachtrag,
 * Live-Befund auf iPhone-Breite: lange Mannschaftsnamen brachen in der
 * Vielspalten-Tabelle auf vier Zeilen um). Beide Markups (`.sus-mannschaft-
 * tabelle` UND `.sus-mannschaft-tabelle-karten`) stehen immer im HTML (siehe
 * TeamShortcode::render_table()/render_table_card()) – unterhalb 600px
 * (siehe Breakpoint-Regel weiter unten) wird die klassische Tabelle
 * ausgeblendet und stattdessen diese Karten-Liste gezeigt, oberhalb bleibt
 * es umgekehrt. Standardmäßig (Desktop/Tablet) also unsichtbar.
 */
.sus-mannschaft-tabelle-karten {
	display: none;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sus-mannschaft-tabelle-karte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 8px;
	border-radius: calc(var(--sus-radius) / 2);
}

/*
 * Abwechselnde, dezente Hintergrundfarbe pro Team-Block (Vorbild: vom Nutzer
 * geliefertes Screenshot-Vorbild) – bewusst eine theme-neutrale
 * Transparenz-Farbe statt einer neuen Design-Variable, da rein strukturelle
 * Lesbarkeits-Hilfe, nicht Teil der Vereins-CD-Farbpalette (die eigene
 * Mannschaft hebt sich weiterhin über --sus-color-own-team ab, siehe unten).
 */
.sus-mannschaft-tabelle-karte:nth-child(even) {
	background: rgba(0, 0, 0, 0.035);
}

.sus-mannschaft-tabelle-karte-haupt {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sus-mannschaft-tabelle-karte-platz {
	flex: none;
	width: 1.6em;
	color: var(--sus-color-meta);
	font-weight: 600;
	text-align: center;
}

/*
 * Anders als die Namens-Spalte der klassischen Tabelle bewusst OHNE
 * Ellipsis/Einzeiler-Zwang: die Karte hat pro Mannschaft ihre eigene Zeile,
 * kein Nebeneinander mit weiteren Spalten – ein langer Name (z.B. "RSV
 * Altenbögge-Bönen 1951 e.V. 1. Herren") darf hier normal umbrechen statt
 * abgeschnitten zu werden.
 */
.sus-mannschaft-tabelle-karte-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	white-space: normal;
	overflow-wrap: break-word;
}

.sus-mannschaft-tabelle-karte-punkte {
	flex: none;
	font-weight: 700;
}

.sus-mannschaft-tabelle-karte-neben {
	padding-left: 42px;
	color: var(--sus-color-text-secondary);
	font-size: 0.85em;
}

/*
 * "Form"-Zeile der Karte (Nachtrag, `tabelle_form`): eigenes Element statt
 * Teil der mit " · " verketteten `.sus-mannschaft-tabelle-karte-neben`
 * (deren Inhalt komplett per esc_html() ausgegeben wird, die Icons hier sind
 * aber echtes HTML – siehe TeamShortcode::render_table_card()). Gleiche
 * Einrückung wie die Neben-Zeile, damit beide Zeilen unter dem Namen sauber
 * untereinanderstehen.
 */
.sus-mannschaft-tabelle-karte-form {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 42px;
}

.sus-mannschaft-tabelle-karte-form-label {
	color: var(--sus-color-text-secondary);
	font-size: 0.85em;
}

/*
 * Eigene Mannschaft hervorgehoben, dieselbe Farbe wie die eigene Tabellen-
 * zeile (--sus-color-own-team) – eigene Selektoren nötig, da die bestehenden
 * `.sus-standings-own-row td`-Regeln oben nur die klassische `<table>`
 * betreffen, dieses Markup hier aber `<li>`/`<span>` statt `<td>` nutzt.
 */
.sus-mannschaft-tabelle-karten .sus-standings-own-row {
	border-left: 3px solid var(--sus-color-own-team);
}

.sus-mannschaft-tabelle-karten .sus-standings-own-row .sus-mannschaft-tabelle-karte-name,
.sus-mannschaft-tabelle-karten .sus-standings-own-row .sus-mannschaft-tabelle-karte-punkte {
	color: var(--sus-color-own-team);
}

/* Spielankündigung/Halle-Info */
.sus-mannschaft-halle-kontext {
	margin: 0 0 6px;
	color: var(--sus-color-text-secondary);
}

.sus-mannschaft-halle-name {
	margin: 0 0 2px;
	font-weight: 600;
}

.sus-mannschaft-halle-adresse {
	margin: 0 0 6px;
	color: var(--sus-color-text-secondary);
}

.sus-mannschaft-halle-link {
	color: var(--sus-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.sus-mannschaft-halle-link:hover,
.sus-mannschaft-halle-link:focus {
	text-decoration: underline;
}

/*
 * Responsive-Breakpoints (Anchor.md, "Corporate-Design-Referenz": 1024px,
 * 768px, 480px, bewährt aus dem alten Widget). Das alte Widget blendete bei
 * 1024px eine per-Zeile-"Liga"-Spalte aus – die gibt es in dieser Tabelle
 * nicht (die Liga steht hier einmalig als Überschrift über dem ganzen
 * Widget, siehe .sus-mannschaft-liga, PR5-Entscheidung), daher wird
 * stattdessen die nächst-entbehrliche Spalte "Tore" ausgeblendet (bei einem
 * schnellen Blick redundant zu Sp./Pkt.). Bei 768px reduziert sich die
 * Tabelle zusätzlich auf die Kernspalten (Platz, Logo, Team, Sp., Pkt.).
 *
 * Viertes, neu ergänztes Breakpoint bei 600px (Bugfix-Nachtrag, Live-Befund
 * auf iPhone-Breite): selbst die auf 5 Kernspalten reduzierte Tabelle
 * wirkte auf echten Telefonbreiten weiterhin chaotisch, weil lange
 * Mannschaftsnamen ohne Breitenbegrenzung mehrzeilig umbrachen. Unterhalb
 * 600px übernimmt deshalb komplett das zweizeilige Karten-Layout
 * (`.sus-mannschaft-tabelle-karten`, siehe eigener Abschnitt oben) – die
 * 768px-Spaltenreduktion bleibt für den Bereich 600–768px (z.B. Tablets im
 * Hochformat) weiterhin sinnvoll, da dort noch genug Breite für eine
 * schmale klassische Tabelle vorhanden ist. Bei 480px wachsen zusätzlich die
 * Logos auf die dafür vorgesehene Mobile-Größe (siehe --sus-logo-size-mobile,
 * wirkt jetzt automatisch auch auf die Karten-Logos, da beide Markups
 * dieselbe Logo-Klasse teilen) und die Schrift verkleinert sich weiter.
 *
 * Bugfix-Nachtrag 2 ("Namen auf Telefonbreite fast bis zur Unlesbarkeit
 * abgeschnitten"): derselbe 600px-Breakpoint schaltet jetzt zusätzlich
 * "Nächste Spiele"/"Kompletter Spielplan" von der festen Grid-Zeile
 * (`.sus-mannschaft-next-matches`) auf das zweizeilige Karten-Layout pro
 * Spiel um (`.sus-mannschaft-next-matches-karten`, siehe eigener Abschnitt
 * oben) – bewusst derselbe Breakpoint-Wert wie beim Tabellen-Karten-Layout,
 * damit das gesamte Mannschafts-Widget unterhalb 600px einheitlich auf
 * zweizeilige Karten wechselt statt mehrerer unterschiedlicher
 * Umschaltpunkte. Die vormals hier stehende 480px-Sonderregel für schmalere
 * Grid-Fixspalten (`.sus-mannschaft-next-match`) ist dadurch entfallen: die
 * Grid-Zeile ist unterhalb 600px ohnehin unsichtbar, die Regel griff also
 * nie mehr.
 */
@media (max-width: 1024px) {
	.sus-mannschaft-tabelle th:nth-child(6),
	.sus-mannschaft-tabelle td:nth-child(6) {
		display: none;
	}
}

@media (max-width: 768px) {
	.sus-mannschaft-tabelle th:nth-child(7),
	.sus-mannschaft-tabelle td:nth-child(7),
	.sus-mannschaft-tabelle th:nth-child(8),
	.sus-mannschaft-tabelle td:nth-child(8),
	.sus-mannschaft-tabelle th:nth-child(9),
	.sus-mannschaft-tabelle td:nth-child(9) {
		display: none;
	}

	.sus-mannschaft-tabelle {
		font-size: 0.9em;
	}
}

@media (max-width: 600px) {
	.sus-mannschaft-tabelle {
		display: none;
	}

	.sus-mannschaft-tabelle-karten {
		display: flex;
	}

	.sus-mannschaft-next-matches {
		display: none;
	}

	.sus-mannschaft-next-matches-karten {
		display: flex;
	}
}

@media (max-width: 480px) {
	.sus-mannschaft-widget {
		font-size: calc(var(--sus-font-size-base) - 1px);
	}

	.sus-mannschaft-block {
		padding: 12px;
	}

	.sus-mannschaft-tabelle {
		font-size: 0.85em;
	}

	.sus-standings-logo-frame {
		width: var(--sus-logo-size-mobile);
		height: var(--sus-logo-size-mobile);
	}
}