/* ==========================================================================
   PCTL Karte: gemeinsame Kartenkomponente im Banner-Look.

   Genutzt von der Startseite und der Seitenleiste (footer.php), deshalb
   global in header_admin.php eingebunden. Der Kartenkopf ist wie Menü und
   Banner immer dunkel (Navy, blaue Leuchtkante, Oswald in Versalien). Der
   Karteninhalt folgt dem gewählten Theme, dunkle Werte kommen aus den
   Variablen von stylev3.css.

   Alles hängt unter .pctl-karte bzw. .pctl-ticker, damit nichts in das
   übrige Layout ausstrahlt. Die alten Klassen .card und .card-header werden
   bewusst nicht verwendet, weil stylev3.css sie im Darkmode umfärbt.
   Seitenspezifisches steht in startseite.css.
   ========================================================================== */

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("/templates/fonts/oswald-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("/templates/fonts/oswald-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --- */

.pctl-karte,
.pctl-ticker {
	/* Kopf: immer dunkel */
	--k-deep: #05090f;
	--k-bg: #0a1424;
	--k-panel: #10203a;
	--k-accent: #4da3ff;
	--k-text: #e8f0fb;
	--k-muted: #8ea6c4;
	--k-line: rgba(93, 160, 233, 0.22);
	--k-font: "Oswald", "Arial Narrow", Arial, sans-serif;

	/* Inhalt: hell, im Darkmode unten überschrieben */
	--k-flaeche: #ffffff;
	--k-flaeche-2: #f4f7fb;
	--k-rand: #dfe5ee;
	--k-schrift: #1f2d3d;
	--k-gedaempft: #66768a;
	--k-zebra: #f8fafd;
	--k-hover: #edf4fe;
	--k-link: #2461a8;
	--k-link-hover: #2f7fe0;
	--k-schatten: 0 10px 28px rgba(10, 20, 36, 0.08);
}

html[data-user-theme='dark'] .pctl-karte,
html[data-user-theme='dark'] .pctl-ticker {
	--k-flaeche: var(--bg-secondary);
	--k-flaeche-2: var(--bg-tertiary);
	--k-rand: var(--border);
	--k-schrift: var(--text);
	--k-gedaempft: #93a3b5;
	--k-zebra: #1b2632;
	--k-hover: var(--hover-bg);
	--k-link: var(--lk);
	--k-link-hover: var(--link-hover);
	--k-schatten: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* --- Karte --- */

/* position: relative hält auch absolut gesetzte Kinder (z. B. .sr-only in
   Tabellenzellen) innerhalb der Karte, sonst verbreitern sie auf dem Handy die Seite */
.pctl-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	overflow: hidden;
	color: var(--k-schrift);
	background: var(--k-flaeche);
	border: 1px solid var(--k-rand);
	border-radius: 14px;
	box-shadow: var(--k-schatten);
}

.pctl-karte a {
	color: var(--k-link);
}

.pctl-karte a:hover,
.pctl-karte a:focus-visible {
	color: var(--k-link-hover);
}

.pctl-karte :focus-visible {
	outline: 2px solid var(--k-accent);
	outline-offset: 2px;
}

/* --- Kopf --- */

.pctl-karte__kopf {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	min-height: 54px;
	padding: 10px 16px;
	color: var(--k-text);
	background: linear-gradient(180deg, rgba(16, 32, 58, 0.97) 0%, rgba(6, 13, 26, 0.98) 100%);
	border-bottom: 1px solid var(--k-line);
}

/* Leuchtende Oberkante wie bei .pctl-card */
.pctl-karte__kopf::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--k-accent), transparent);
	opacity: 0.9;
}

.pctl-karte .pctl-karte__titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--k-text);
	font-family: var(--k-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.pctl-karte__titel .fas,
.pctl-karte__titel .far,
.pctl-karte__titel .fa-solid {
	color: var(--k-accent);
	font-size: 15px;
}

.pctl-karte__zusatz {
	color: var(--k-muted);
	font-size: 12px;
}

.pctl-karte .pctl-karte__aktion {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 12px;
	color: var(--k-text);
	font-family: var(--k-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background: rgba(77, 163, 255, 0.07);
	border: 1px solid rgba(93, 160, 233, 0.35);
	border-radius: 10px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pctl-karte .pctl-karte__aktion:hover,
.pctl-karte .pctl-karte__aktion:focus-visible {
	color: var(--k-text);
	text-decoration: none;
	background: rgba(77, 163, 255, 0.16);
	border-color: var(--k-accent);
}

.pctl-karte__aktion--still {
	cursor: default;
	opacity: 0.7;
}

/* --- Farbvarianten für Warnungen ---
   Gleiche Karte, nur Leuchtkante und Kopf-Icon in Warnfarbe, damit
   Warnungen auffallen, ohne vollflächig bunt zu sein. */

.pctl-karte--warnung {
	--k-accent: #f2a52b;
}

.pctl-karte--gefahr {
	--k-accent: #ff5a61;
}

/* Kopf-Icon und Kante nehmen --k-accent, Links und Knöpfe im Inhalt
   bleiben blau */
.pctl-karte--warnung .pctl-karte__inhalt,
.pctl-karte--gefahr .pctl-karte__inhalt {
	--k-accent: #4da3ff;
}

/* Anzahl im Kopf, z. B. „12“ bei Inaktive Trainer */
.pctl-karte .pctl-karte__anzahl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	color: #05090f;
	font-family: var(--k-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: var(--k-accent);
	border-radius: 999px;
}

/* --- Hinweisliste: Icon, Beschriftung mit Zahl, Link rechts --- */

.pctl-hinweise {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}

.pctl-hinweis {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--k-flaeche-2);
	border: 1px solid var(--k-rand);
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

.pctl-hinweis:hover {
	border-color: var(--k-accent);
}

.pctl-hinweis__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: #ffffff;
	font-size: 16px;
	background: var(--h-farbe, #2f7fe0);
	border-radius: 9px;
}

.pctl-hinweis__text {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;
}

.pctl-hinweis__text span {
	display: block;
	color: var(--k-gedaempft);
	font-size: 13px;
}

.pctl-hinweis__text b {
	display: block;
	font-family: var(--k-font);
	font-size: 20px;
	font-weight: 500;
}

.pctl-karte .pctl-hinweis__link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	color: var(--k-link);
	font-family: var(--k-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid var(--k-rand);
	border-radius: 9px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pctl-karte .pctl-hinweis__link:hover,
.pctl-karte .pctl-hinweis__link:focus-visible {
	color: var(--k-link-hover);
	text-decoration: none;
	border-color: var(--k-accent);
}

/* Tickermeldung: ganze Zeile ist Text, Farbe kommt vom Icon */
.pctl-hinweis--meldung .pctl-hinweis__text {
	color: var(--k-schrift);
	font-size: 14px;
	line-height: 1.45;
}

/* Fetter Text in Meldungen ist Betonung, keine Zahl */
.pctl-hinweis--meldung .pctl-hinweis__text b {
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
}

/* Zeile mit Formular (z. B. Screenshot-Nachweis): Text wächst, Knopf rechts */
.pctl-hinweis--formular {
	flex-wrap: wrap;
	align-items: flex-end;
	margin: 0;
}

.pctl-hinweis--formular .pctl-hinweis__text b {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
}

.pctl-hinweis__datei {
	display: block;
	margin: 8px 0 0;
	font-weight: 400;
}

.pctl-hinweis__datei > span {
	margin-bottom: 4px;
}

.pctl-karte .pctl-karte__hinweis--fehler {
	margin: 0;
	color: #9b2229;
	background: rgba(200, 56, 63, 0.1);
	border-color: rgba(200, 56, 63, 0.4);
}

html[data-user-theme='dark'] .pctl-karte .pctl-karte__hinweis--fehler {
	color: #ff9a9e;
}

/* Einklappbare Liste (z. B. inaktive Trainer) */
.pctl-karte .pctl-aufklapp > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	color: var(--k-link);
	font-family: var(--k-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	border-top: 1px solid var(--k-rand);
}

.pctl-karte .pctl-aufklapp > summary::-webkit-details-marker {
	display: none;
}

.pctl-karte .pctl-aufklapp > summary .fa-solid {
	transition: transform 0.15s ease;
}

.pctl-karte .pctl-aufklapp[open] > summary .fa-solid {
	transform: rotate(180deg);
}

/* Auf dem Handy nur ein Pfeil-Knopf rechts, der Linktext bleibt für
   Screenreader erhalten (und steht im title) */
@media (max-width: 576px) {
	.pctl-karte .pctl-hinweis__link {
		justify-content: center;
		width: 44px;
		min-height: 44px;
		padding: 0;
	}

	.pctl-hinweis__linktext {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* --- Reiter (Tabs im Kopf) --- */

.pctl-karte .pctl-karte__reiter {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0 8px;
	overflow-x: auto;
	list-style: none;
	background: var(--k-bg);
	border-bottom: 1px solid var(--k-line);
	scrollbar-width: none;
}

.pctl-karte .pctl-karte__reiter::-webkit-scrollbar {
	display: none;
}

.pctl-karte .pctl-karte__reiter li {
	flex: 0 0 auto;
}

.pctl-karte .pctl-karte__reiter a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 14px;
	color: var(--k-muted);
	font-family: var(--k-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pctl-karte .pctl-karte__reiter a:hover,
.pctl-karte .pctl-karte__reiter a:focus-visible {
	color: var(--k-text);
}

.pctl-karte .pctl-karte__reiter a.active {
	color: var(--k-text);
	border-bottom-color: var(--k-accent);
}

/* Wettbewerbslogos sind für helle Flächen gezeichnet, deshalb wie im Menü eine helle Unterlage */
.pctl-karte img.pctl-karte__logo {
	width: 28px;
	height: 28px;
	padding: 2px;
	object-fit: contain;
	background: rgba(236, 244, 255, 0.92);
	border-radius: 5px;
}

/* stylev3.css färbt einzelne Wettbewerbslogos im Darkmode weiß, auf der hellen Unterlage wären sie unsichtbar */
html[data-user-theme] .pctl-karte img.pctl-karte__logo {
	filter: none;
}

/* --- Inhalt --- */

.pctl-karte__inhalt {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--k-flaeche);
}

.pctl-karte__inhalt--luft {
	padding: 14px;
}

.pctl-karte__hinweis {
	margin: 12px 14px;
	padding: 10px 12px;
	font-size: 13px;
	background: rgba(217, 138, 18, 0.1);
	border: 1px solid rgba(217, 138, 18, 0.35);
	border-radius: 10px;
}

.pctl-karte__leer {
	margin: 0;
	padding: 40px 20px;
	color: var(--k-gedaempft);
	text-align: center;
}

.pctl-karte__leer .fas,
.pctl-karte__leer .far {
	display: block;
	margin-bottom: 12px;
	font-size: 40px;
	opacity: 0.5;
}

.pctl-karte__abschnitt {
	padding: 14px 14px 4px;
}

.pctl-karte__abschnitt + .pctl-karte__abschnitt {
	border-top: 1px solid var(--k-rand);
}

.pctl-karte .pctl-karte__untertitel {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--k-gedaempft);
	font-family: var(--k-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pctl-karte__untertitel .fas,
.pctl-karte__untertitel .fa-solid {
	color: var(--k-accent);
}

.pctl-karte__fuss {
	display: flex;
	justify-content: center;
	padding: 12px 14px;
	border-top: 1px solid var(--k-rand);
}

/* --- Knopf (Banner-Look, nach .pctl-btn--primary) --- */

.pctl-karte .pctl-karte__knopf {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 16px;
	overflow: hidden;
	color: #ffffff;
	font-family: var(--k-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: linear-gradient(180deg, #4da3ff 0%, #2f7fe0 52%, #1d5fb4 100%);
	border: 1px solid rgba(154, 204, 255, 0.55);
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(47, 127, 224, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pctl-karte .pctl-karte__knopf:hover,
.pctl-karte .pctl-karte__knopf:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(47, 127, 224, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pctl-karte .pctl-karte__knopf:active {
	transform: translateY(1px);
}

.pctl-karte .pctl-karte__knopf--warnung {
	color: #2a1a00;
	background: linear-gradient(180deg, #ffc55c 0%, #f2a52b 52%, #d98a12 100%);
	border-color: rgba(255, 214, 140, 0.6);
	box-shadow: 0 6px 16px rgba(217, 138, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pctl-karte .pctl-karte__knopf--warnung:hover,
.pctl-karte .pctl-karte__knopf--warnung:focus-visible {
	color: #2a1a00;
	box-shadow: 0 10px 22px rgba(217, 138, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pctl-karte .pctl-karte__knopf--klein {
	min-height: 30px;
	padding: 0 12px;
	font-size: 12px;
}

/* --- Marke (Textabzeichen, z. B. Transferart) --- */

/* Ersetzt die alten Markt-Symbole: Text ist eindeutiger als ein farbiges Preisschild */
.pctl-karte .pctl-marke {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	font-family: var(--k-font);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #1f6b3a;
	background: rgba(43, 157, 90, 0.1);
	border: 1px solid rgba(43, 157, 90, 0.35);
	border-radius: 999px;
}

.pctl-karte .pctl-marke--art-2,
.pctl-karte .pctl-marke--leihe {
	color: #7a4b00;
	background: rgba(217, 138, 18, 0.12);
	border-color: rgba(217, 138, 18, 0.4);
}

.pctl-karte .pctl-marke--art-3,
.pctl-karte .pctl-marke--tausch {
	color: #1d4f8c;
	background: rgba(47, 127, 224, 0.1);
	border-color: rgba(47, 127, 224, 0.3);
}

html[data-user-theme='dark'] .pctl-karte .pctl-marke {
	color: #7fe0a9;
	background: rgba(63, 191, 127, 0.12);
	border-color: rgba(63, 191, 127, 0.38);
}

html[data-user-theme='dark'] .pctl-karte .pctl-marke--art-2,
html[data-user-theme='dark'] .pctl-karte .pctl-marke--leihe {
	color: #ffc766;
	background: rgba(242, 165, 43, 0.12);
	border-color: rgba(242, 165, 43, 0.4);
}

html[data-user-theme='dark'] .pctl-karte .pctl-marke--art-3,
html[data-user-theme='dark'] .pctl-karte .pctl-marke--tausch {
	color: #8fc2ff;
	background: rgba(77, 163, 255, 0.12);
	border-color: rgba(77, 163, 255, 0.35);
}

/* Scouting, Jugend, Ausland: Spieler von außerhalb der Liga */
.pctl-karte .pctl-marke--scouting {
	color: #5a3aa0;
	background: rgba(122, 77, 179, 0.1);
	border-color: rgba(122, 77, 179, 0.35);
}

html[data-user-theme='dark'] .pctl-karte .pctl-marke--scouting {
	color: #c4a8ff;
	background: rgba(160, 120, 240, 0.14);
	border-color: rgba(160, 120, 240, 0.4);
}

/* Geschlossener Markt: gleiche Farbe, aber gedämpft und mit Schloss */
.pctl-karte .pctl-marke--zu {
	opacity: 0.6;
}

.pctl-karte .pctl-marke .fas {
	font-size: 10px;
}

.pctl-karte .pctl-tabelle__hinweis {
	display: block;
	margin-top: 3px;
}

/* --- Tabelle --- */

.pctl-karte .pctl-tabelle {
	width: 100%;
	margin: 0;
	color: var(--k-schrift);
	font-size: 13.5px;
	border-spacing: 0;
	border-collapse: separate;
}

.pctl-karte .pctl-tabelle th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 9px 10px;
	color: var(--k-gedaempft);
	font-family: var(--k-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--k-flaeche-2);
	border-bottom: 1px solid var(--k-rand);
}

.pctl-karte .pctl-tabelle td {
	padding: 8px 10px;
	vertical-align: middle;
	border-bottom: 1px solid var(--k-rand);
}

.pctl-karte .pctl-tabelle tbody tr:last-child td {
	border-bottom: 0;
}

.pctl-karte .pctl-tabelle tbody tr:nth-child(even) td {
	background: var(--k-zebra);
}

.pctl-karte .pctl-tabelle tbody tr:hover td {
	background: var(--k-hover);
}

/* Gruppierte Tabelle: Zwischenzeile je Gruppe (z. B. Liga), nicht sticky */
.pctl-karte .pctl-tabelle tbody tr.pctl-tabelle__gruppe th {
	position: static;
	padding: 10px;
	color: var(--k-schrift);
	font-size: 12px;
	background: var(--k-flaeche-2);
	border-top: 1px solid var(--k-rand);
}

.pctl-karte .pctl-tabelle__gruppe img.pctl-karte__logo {
	width: 22px;
	height: 22px;
	margin-right: 6px;
	vertical-align: middle;
}

.pctl-karte .pctl-tabelle__gruppenanzahl {
	margin-left: 6px;
	color: var(--k-gedaempft);
}

.pctl-karte .pctl-tabelle--gruppiert tbody tr:last-child td {
	border-bottom: 1px solid var(--k-rand);
}

/* Hervorgehobene Zeile (eigenes Team, laufende Woche): Akzentblau im
   Hintergrund und als Balken links, damit man sie beim Überfliegen findet */
.pctl-karte .pctl-tabelle tbody tr.is-markiert td,
.pctl-karte .pctl-tabelle tbody tr.is-markiert:hover td {
	background: rgba(47, 127, 224, 0.1);
}

html[data-user-theme='dark'] .pctl-karte .pctl-tabelle tbody tr.is-markiert td,
html[data-user-theme='dark'] .pctl-karte .pctl-tabelle tbody tr.is-markiert:hover td {
	background: rgba(77, 163, 255, 0.14);
}

.pctl-karte .pctl-tabelle tbody tr.is-markiert td:first-child {
	box-shadow: inset 4px 0 0 var(--k-accent);
}

/* In der Ligatabelle trägt die erste Zelle schon die Platzierungsfarbe, dort
   kommt der Akzent auf die letzte Zelle */
.pctl-karte .pctl-tabelle tbody tr.is-markiert td.pctl-tabelle__platz {
	box-shadow: inset 4px 0 0 var(--platz, transparent);
}

.pctl-karte .pctl-tabelle tbody tr.is-markiert td.pctl-tabelle__platz ~ td:last-child {
	box-shadow: inset -4px 0 0 var(--k-accent);
}

.pctl-karte .pctl-tabelle tbody tr.is-markiert td {
	font-weight: 600;
}

/* Kleines Etikett in der markierten Zeile, z. B. „Dein Team“ oder „Diese Woche“ */
.pctl-karte .pctl-etikett {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	color: #ffffff;
	font-family: var(--k-font);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: 1px;
	white-space: nowrap;
	/* dunkleres Blau, damit die weiße Schrift auch klein gut lesbar bleibt */
	background: #1d5fb4;
	border-radius: 999px;
}

.pctl-karte .pctl-tabelle small {
	color: var(--k-gedaempft);
}

.pctl-karte .pctl-tabelle .is-mitte {
	text-align: center;
}

.pctl-karte .pctl-tabelle .is-zahl {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pctl-karte .pctl-tabelle .is-schmal {
	width: 1%;
	white-space: nowrap;
}

.pctl-karte .pctl-tabelle .is-rot {
	color: #c8383f;
	font-weight: 700;
}

html[data-user-theme='dark'] .pctl-karte .pctl-tabelle .is-rot {
	color: #ff7a7f;
}

.pctl-karte .pctl-tabelle img.pctl-tabelle__wappen {
	width: auto;
	height: 30px;
}

.pctl-karte .pctl-tabelle img.pctl-tabelle__wettbewerb {
	width: auto;
	height: 30px;
}

/* Platzierungsmarkierung als Balken statt vollflächiger Zellfarbe, damit die
   Zahl in beiden Modi lesbar bleibt */
.pctl-karte .pctl-tabelle td.pctl-tabelle__platz {
	font-weight: 600;
	text-align: center;
	box-shadow: inset 4px 0 0 var(--platz, transparent);
}

/* --- Handy --- */

@media (max-width: 991.98px) {
	.pctl-karte .pctl-karte__aktion {
		min-height: 40px;
	}

	.pctl-karte .pctl-karte__reiter a {
		min-height: 48px;
	}
}

@media (max-width: 767px) {
	.pctl-karte__zusatz {
		display: none;
	}

	.pctl-karte__kopf {
		padding: 10px 12px;
	}

	.pctl-karte .pctl-karte__reiter a {
		padding: 0 10px;
	}

	/* Die Ligatabelle zeigt auf dem Handy nur das Wesentliche, die volle Tabelle
	   gibt es auf der Wettbewerbsseite */
	.pctl-karte .pctl-tabelle .is-ab-tablet {
		display: none;
	}

	/* Engere Zellen, damit schmale Tabellen wie die Mindestspiele ohne Seitwärtsscrollen passen */
	.pctl-karte .pctl-tabelle th,
	.pctl-karte .pctl-tabelle td {
		padding-right: 6px;
		padding-left: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pctl-hinweis,
	.pctl-karte .pctl-hinweis__link,
	.pctl-karte .pctl-aufklapp > summary .fa-solid,
	.pctl-karte .pctl-karte__aktion,
	.pctl-karte .pctl-karte__reiter a,
	.pctl-karte .pctl-karte__knopf {
		transition: none;
	}

	.pctl-karte .pctl-karte__knopf:hover,
	.pctl-karte .pctl-karte__knopf:active {
		transform: none;
	}
}