/*
 * Zentrale CSS-Custom-Properties für das Vereins-CD (PR7, siehe Anchor.md,
 * Abschnitt "Corporate-Design-Referenz") UND ein paar wirklich geteilte
 * Badge-/Pillen-Komponentenregeln (Heim/Auswärts, "Kein Logo", Status), die
 * beide Widgets identisch nutzen (Anchor.md-Korrektur nach dem ersten
 * PR7-Staging-Test: "dieselbe visuelle Sprache" statt zweier fast
 * identischer Kopien in frontend-mannschaft.css/frontend-woche.css). Beide
 * Struktur-CSS-Dateien binden diese Datei zusätzlich ein und nutzen
 * ausschließlich diese Variablen statt fest verdrahteter Farb-/Radius-/
 * Schatten-Werte in ihren eigenen Regeln.
 *
 * Die Werte hier sind die verbindlichen CD-Standardwerte (1:1 aus dem alten
 * handball-apps.de-Widget übernommen bzw. – bei den Ausbaustufen-Feldern –
 * identisch mit den Defaults aus Admin\DesignSettings::get_fields()) und
 * zugleich der Fallback, falls der Inline-<style>-Block aus dem
 * Backend-Bereich "Design" (Admin\DesignSettings / Frontend\DesignStyleOutput)
 * aus irgendeinem Grund fehlt. Im Normalfall überschreibt dieser Inline-
 * Block praktisch alle Variablen hier mit den im Backend gespeicherten
 * Werten – siehe Anchor.md, "Erweiterter Design-Bereich"/"Weitere
 * Ausbaustufe".
 */
:root {
	/* Vereinsfarbe/Primärfarbe – aktive Zustände, Akzente. */
	--sus-color-primary: #008135;
	--sus-color-primary-tint: #d9ece1;

	/*
	 * Farbe für "Eigene Mannschaft hervorgehoben" (Anchor.md, "Weitere
	 * Ausbaustufe") – seit dieser Ausbaustufe unabhängig von
	 * --sus-color-primary einstellbar, Default identisch mit der
	 * Vereinsfarbe, damit sich am bisherigen Aussehen nichts ändert.
	 */
	--sus-color-own-team: var(--sus-color-primary);

	/* Dunkler Header-Hintergrund (z.B. Datums-/Gruppenkopf), Text weiß. */
	--sus-color-header-bg: #171717;
	--sus-color-header-text: #ffffff;

	/* Schriftfarben. */
	--sus-color-heading: #2c3e50;
	--sus-color-text: #333333;
	--sus-color-text-secondary: #555555;
	--sus-color-text-tertiary: #888888;
	--sus-color-meta: #7f8c8d;

	/*
	 * Rahmen/Radius, Schatten für Karten/Container UND Pillen/Badges
	 * (Anchor.md, "Weitere Ausbaustufe": ein Auswahlfeld "Eckenradius"
	 * steuert beide Werte gemeinsam, Default "rund" entspricht 1:1 dem
	 * bisherigen Aussehen).
	 */
	--sus-radius: 8px;
	--sus-badge-radius: 999px;
	--sus-shadow-container: 0 2px 8px rgba(0, 0, 0, 0.1);
	--sus-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12);

	/* Schriftart/-größe (Anchor.md, "Weitere Ausbaustufe"). */
	--sus-font-family: inherit;
	--sus-font-size-base: 15px;

	/* Logo-Größen (Tabelle/Desktop-Zeilen bzw. Mobile-Karten). */
	--sus-logo-size-desktop: 32px;
	--sus-logo-size-mobile: 40px;

	/*
	 * Tendenz-/Ergebnis-Farbcodierung (PR7, eigene Entscheidung – laut
	 * Anchor.md ausdrücklich freigestellt, "Grün für Sieg liegt aber nahe,
	 * da es zugleich die Vereinsfarbe ist"): Sieg als Tint der Vereinsfarbe
	 * (siehe Badge-Optik unten), Niederlage/Unentschieden als eigene,
	 * NICHT im Backend konfigurierbare CD-Neutraltöne (bereits im
	 * Tint-Stil: heller Hintergrund, kräftigere Farbe als Text).
	 */
	--sus-color-win-bg: var(--sus-color-primary-tint);
	--sus-color-win-text: var(--sus-color-primary);
	--sus-color-loss-bg: #f5d7d3;
	--sus-color-loss-text: #922b21;
	--sus-color-draw-bg: #e5e7e8;
	--sus-color-draw-text: var(--sus-color-meta);

	/*
	 * Platzhalter-Icon für noch nicht gespielte Slots in "Tendenz"/"Form"
	 * (Nachtrag, Staging-Korrektur) – deutlich blasser als
	 * --sus-color-draw-bg/-text oben, damit ein Platzhalter nie mit einem
	 * echten Unentschieden verwechselt wird (zusätzlich auch ein anderes
	 * Dashicon, siehe TeamShortcode::render_outcome_icon()).
	 */
	--sus-color-placeholder-bg: #f2f2f2;
	--sus-color-placeholder-text: #c2c2c2;

	/*
	 * Heim-/Auswärts-Badge-Farben (Anchor.md-Korrektur: "Heim/Auswärts-
	 * Badge farbig als Indikator" + "Erweiterter Design-Bereich") – im
	 * Backend-Bereich "Design" einstellbar (Admin\DesignSettings). Jede
	 * Farbe ist hier die kräftige TEXTFARBE der Pille; die helle
	 * Hintergrund-Tint-Variante (Anchor.md, "Badge-Optik modernisieren")
	 * wird serverseitig aus demselben Wert abgeleitet (siehe
	 * DesignSettings::lighten_hex()) statt ein zweites Farbfeld zu
	 * benötigen.
	 */
	--sus-color-badge-home: #008135;
	--sus-color-badge-home-tint: #d9ece1;
	--sus-color-badge-away: #2980b9;
	--sus-color-badge-away-tint: #dfecf5;

	/*
	 * Status-Pillen-Farben "Anstehend"/"Beendet" (Anchor.md, "Weitere
	 * Ausbaustufe") – seit dieser Ausbaustufe eigenständig im Backend
	 * einstellbar statt an feste CD-Werte gekoppelt, Defaults entsprechen
	 * dem bisherigen Aussehen (neutral-grau bzw. dunkler Header-Ton).
	 */
	--sus-color-status-anstehend: #7f8c8d;
	--sus-color-status-anstehend-tint: #eceeee;
	--sus-color-status-beendet: #171717;
	--sus-color-status-beendet-tint: #dcdcdc;

	/*
	 * Tabellenrahmen der Standings-Tabelle (Anchor.md, Design-Option
	 * "Tabellenrahmen ein/aus"): steuert die Sichtbarkeit der Kopf-/
	 * Zeilentrennlinien in .sus-mannschaft-tabelle (siehe
	 * frontend-mannschaft.css). Default entspricht 1:1 dem bisherigen
	 * Aussehen (derselbe Farbwert, der vorher dort fest verdrahtet war);
	 * "Ohne Rahmen" setzt diese Variable auf transparent statt die
	 * Randbreite selbst zu ändern, damit sich am Tabellen-Layout nichts
	 * verschiebt. --sus-table-cell-padding-block ist bewusst an dieselbe
	 * Auswahl gekoppelt (Anchor.md-Ergänzung vom 15.09.2026: "kein neuer
	 * Schalter") – "Ohne Rahmen" reduziert die vertikale Zellen-Polsterung
	 * zusätzlich etwas, damit die Tabelle insgesamt kompakter wirkt.
	 */
	--sus-table-border-color: var(--sus-color-draw-bg);
	--sus-table-cell-padding-block: 6px;
}

/*
 * Gemeinsame Basis-Optik für alle Pillen-/Badge-Elemente (Heim/Auswärts,
 * "Kein Logo", Status) – eine visuelle Sprache über beide Widgets hinweg
 * (Anchor.md: "in derselben visuellen Sprache wie die anderen Badges").
 * Radius kommt aus dem im Backend wählbaren --sus-badge-radius (Anchor.md,
 * "Weitere Ausbaustufe: Eckenradius"). Die Tendenz-Badges
 * (S/U/N-Einzelbuchstaben) bleiben bewusst als eigene, feste Kreis-Badges
 * in frontend-mannschaft.css definiert – gleiche Farbsprache, aber andere
 * Form (fixe Kreisgröße statt variabler Textpille).
 *
 * Farboptik (Anchor.md, "Badge-Optik modernisieren", nach dem zweiten
 * PR7-Staging-Test: "wirkt wie 1990er-Webdesign"): heller Tint als
 * Hintergrund, dieselbe (konfigurierte) Farbe kräftig als Text – kein
 * Vollton-Hintergrund mit weißer Schrift mehr. Die Tint-Variante wird
 * serverseitig aus dem jeweiligen Grundfarbwert abgeleitet (siehe
 * DesignSettings::lighten_hex()), nicht per CSS `color-mix()` (keine
 * Rücksicht auf Browser-Unterstützung nötig) und nicht über ein zweites,
 * manuell zu pflegendes Farbfeld.
 */
.sus-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: var(--sus-badge-radius);
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.4;
}

.sus-badge--heim {
	background: var(--sus-color-badge-home-tint);
	color: var(--sus-color-badge-home);
}

.sus-badge--auswaerts {
	background: var(--sus-color-badge-away-tint);
	color: var(--sus-color-badge-away);
}

/*
 * "Kein Logo"-Pille (Anchor.md-Korrektur: fehlendes Vereinslogo, z.B.
 * defekte Logo-URL bei handball.net) – bewusst kleinere Schrift/Padding als
 * die übrigen Badges, damit der Text auch in den schmalen, für runde Logos
 * ausgelegten Rasterspalten der Widgets Platz findet. Neutraler CD-Ton,
 * nicht an ein konfigurierbares Farbfeld gekoppelt (kein sinnvoller
 * "Grundfarbe"-Bezug für einen reinen Hinweistext).
 */
.sus-badge--missing-logo {
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-draw-text);
	font-size: 0.6em;
	padding: 2px 5px;
}

/*
 * Status-Pille "Anstehend"/"Beendet" im Akkordeon-Detailbereich des
 * Startseiten-Widgets (Teil 8 der PR7-Korrekturen: "dieselbe visuelle
 * Sprache wie die anderen Badges", kein eigener Pillen-Stil) – seit
 * "Weitere Ausbaustufe" eigenständig im Backend einstellbar
 * (--sus-color-status-anstehend/--beendet), Defaults entsprechen dem
 * bisherigen Aussehen (neutral-grau bzw. dunkler Header-Ton).
 */
.sus-badge--status-anstehend {
	background: var(--sus-color-status-anstehend-tint);
	color: var(--sus-color-status-anstehend);
}

.sus-badge--status-beendet {
	background: var(--sus-color-status-beendet-tint);
	color: var(--sus-color-status-beendet);
}

/*
 * Rundes Logo-Framing, Bug-Fix nach dem zweiten PR7-Staging-Test ("Logos
 * weiterhin eckig"): tatsächlich im Browser nachvollzogen (Screenshot-
 * Vergleich, nicht nur Code-Review) statt den vorherigen Fix ungeprüft für
 * erledigt zu halten. Befund: `border-radius: 50%` DIREKT auf dem `<img>`
 * funktioniert für ein erfolgreich geladenes Bild zuverlässig (bestätigt) –
 * die wahrscheinlichere reale Ursache ist eine `img`-Regel im aktiven
 * WordPress-Theme mit höherer Spezifität (oder eine spätere Ladereihenfolge),
 * die unser `border-radius: 50%` überschreibt. Robuster Fix: das Bild in
 * einen eigenen Rahmen-Container mit `overflow: hidden` + `border-radius`
 * einpacken (`!important`, da dieser Rahmen ausschließlich dem runden
 * Klippen dient und niemals von einem Theme absichtlich überschrieben
 * werden soll) – ein Theme, das generische `img`-Selektoren nutzt, trifft
 * damit nur noch das innere `<img>`, nicht mehr den äußeren, sichtbaren
 * Klipp-Rahmen. Die feste Breite/Höhe kommt weiterhin aus den jeweiligen
 * Kontext-Klassen (`.sus-standings-logo-frame` usw.).
 *
 * Ehemals bekannte Grenze, seit der Anchor.md-Korrektur vom 14.09.2026
 * behoben: bei einer tatsächlich fehlschlagenden Bildanfrage (Logo-URL im
 * Cache vorhanden, aber die Ressource selbst nicht erreichbar – realer Fall
 * DJK SG Bösperde, `.../4566/undefined`) rendern manche Browser-Engines ihr
 * Broken-Image-Icon bzw. den umbrechenden Alt-Text ohne jedes Box-Clipping
 * zu respektieren, auch nicht die `overflow: hidden` des Rahmens. Eine rein
 * serverseitige Prüfung des `logo`-Felds erkennt diesen Fall nicht, da die
 * URL dort gültig aussieht. Fix: TeamShortcode/WeekMatchesShortcode geben
 * bei vorhandener URL immer <img> UND eine initial versteckte "Kein
 * Logo"-Pille aus; das `onerror`-Attribut am <img> blendet bei einem
 * tatsächlichen Ladefehler den Rahmen aus und zeigt stattdessen die Pille.
 */
.sus-logo-frame {
	display: inline-block;
	overflow: hidden !important;
	border-radius: 50% !important;
	line-height: 0;
}

.sus-logo-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}