/**
 * Punktesystem – Erweiterung für phpBB 3.3
 * Autorin: Maggan22 · Lizenz: GPL-2.0
 *
 * Farben lassen sich im Style überschreiben, z. B.:
 * :root { --punkte-akzent: #2f7d4f; }
 */
:root {
	--punkte-akzent: #3b6fb6;
	--punkte-plus: #2e8540;
	--punkte-minus: #c0392b;
	--punkte-gold: #d4a017;
	--punkte-silber: #9aa3ad;
	--punkte-bronze: #b0703c;
	--punkte-flaeche: rgba(127, 127, 127, 0.08);
	--punkte-rand: rgba(127, 127, 127, 0.25);
}

.punkte-titel {
	margin-bottom: 0.5em;
}

/* Reiter */
.punkte-reiter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.punkte-reiter a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--punkte-rand);
	border-radius: 999px;
	text-decoration: none;
}

.punkte-reiter li.aktiv a {
	background: var(--punkte-akzent);
	border-color: var(--punkte-akzent);
	color: #fff;
}

/* Kacheln */
.punkte-kacheln {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.punkte-kachel {
	flex: 1 1 180px;
	padding: 10px 14px;
	background: var(--punkte-flaeche);
	border: 1px solid var(--punkte-rand);
	border-radius: 7px;
}

.punkte-kachel-breit {
	flex: 2 1 300px;
}

.punkte-kachel-hervor {
	border-left: 4px solid var(--punkte-akzent);
}

.punkte-kachel-titel {
	display: block;
	font-size: 0.9em;
	opacity: 0.8;
}

.punkte-kachel-wert {
	display: block;
	font-size: 1.9em;
	font-weight: bold;
	line-height: 1.3;
}

.punkte-kachel-zusatz {
	display: block;
	font-size: 0.9em;
}

.punkte-regeln {
	margin: 4px 0 0 1.2em;
}

/* Tabellen */
.punkte-tabelle td,
.punkte-tabelle th {
	vertical-align: middle;
}

.punkte-spalte-platz {
	width: 60px;
	text-align: center;
}

.punkte-spalte-zahl {
	width: 120px;
	text-align: right;
	white-space: nowrap;
}

.punkte-spalte-zeit {
	width: 170px;
	white-space: nowrap;
}

.punkte-tabelle tr.punkte-ich td {
	font-weight: bold;
}

.punkte-tabelle tr.punkte-ich td:first-child {
	box-shadow: inset 3px 0 0 var(--punkte-akzent);
}

.punkte-avatar img {
	width: 28px;
	height: 28px;
	margin-right: 8px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

.punkte-podest {
	display: inline-block;
	min-width: 24px;
	padding: 2px 4px;
	border-radius: 999px;
	color: #fff;
	font-weight: bold;
}

.punkte-podest-1 { background: var(--punkte-gold); }
.punkte-podest-2 { background: var(--punkte-silber); }
.punkte-podest-3 { background: var(--punkte-bronze); }

.punkte-plus { color: var(--punkte-plus); }
.punkte-minus { color: var(--punkte-minus); }

.punkte-grund {
	font-style: italic;
	opacity: 0.85;
}

.punkte-hinweis {
	font-size: 0.9em;
	opacity: 0.85;
}

.punkte-filter {
	float: left;
	margin: 4px 0;
}

/* Kopfzeile */
.punkte-kopf strong {
	font-weight: bold;
}

@media (max-width: 700px) {
	.punkte-spalte-zeit {
		width: auto;
		white-space: normal;
	}

	.punkte-spalte-zahl {
		width: auto;
	}

	.punkte-kopf span {
		display: inline;
	}
}

/* Mitgliederliste */
th.punkte-liste,
td.punkte-liste {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}

/* Gruppen kaufen */
.punkte-angebote {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.punkte-angebot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: var(--punkte-flaeche);
	border: 1px solid var(--punkte-rand);
	border-radius: 7px;
}

.punkte-angebot h3 {
	margin: 0;
	border: 0;
	font-size: 1.2em;
	text-transform: none;
}

.punkte-angebot p {
	margin: 0;
}

.punkte-angebot form {
	margin-top: auto;
}

.punkte-angebot-status {
	color: var(--punkte-plus);
	font-weight: bold;
}