/* =========================================================
   INDEX – FORENSTATISTIKEN
   ========================================================= */

.storm-boardstats {
	width: 100%;
	margin: 32px 0 26px;

	box-sizing: border-box;
}


/* =========================
   ÜBERSCHRIFT
   ========================= */

.storm-boardstats-heading {
	width: 100%;

	margin-bottom: 18px;

	text-align: center;
}

.storm-boardstats-title {
	font-family: Georgia, "Times New Roman", serif;

	font-size: 25px;
	font-style: italic;
	font-weight: normal;

	color: #d8b49b;
}

.storm-boardstats-line {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	margin-top: 8px;
}

.storm-boardstats-line span {
	display: block;

	width: 38%;
	height: 1px;

	background: rgba(154,129,105,.42);
}

.storm-boardstats-line i {
	display: block;

	width: 6px;
	height: 6px;

	background: #c77854;

	transform: rotate(45deg);

	box-shadow: 0 0 0 3px #282529;
}


/* =========================
   INHALT
   ========================= */

.storm-boardstats-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 18px;

	width: 100%;

	box-sizing: border-box;
}


/* alte Tabellen innerhalb der Plugin-/MyBB-Bits */
.storm-boardstats-content table {
	width: 100% !important;

	margin: 0 !important;

	border: 0 !important;

	background: transparent !important;
}


/* typische Zellen beruhigen */
.storm-boardstats-content td {
	background: #292627 !important;

	border: 0 !important;
	border-bottom: 1px solid rgba(154,129,105,.14) !important;

	padding: 14px 16px !important;

	color: #aaa19b;

	font-size: 9px;
	line-height: 1.6;
}


/* tcat-Überschriften */
.storm-boardstats-content .tcat {
	background: #252324 !important;

	color: #9f8d80 !important;

	font-size: 8px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}


/* Links */
.storm-boardstats-content a {
	color: #c8ad94 !important;

	text-decoration: none !important;
}

.storm-boardstats-content a:hover {
	color: #c98a68 !important;
}


/* =========================
   FOOTER
   ========================= */

.storm-boardstats-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-top: 12px;
	padding-top: 10px;

	border-top: 1px solid rgba(154,129,105,.16);

	box-sizing: border-box;
}

.storm-boardstats-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px 12px;

	font-size: 8px;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.storm-boardstats-links a {
	color: #817976 !important;

	text-decoration: none !important;
}

.storm-boardstats-links a:hover {
	color: #c98a68 !important;
}


/* Collapse */
.storm-boardstats-collapse {
	opacity: .45;

	transition: opacity .18s ease;
}

.storm-boardstats-collapse:hover {
	opacity: 1;
}


/* =========================
   RESPONSIVE
   ========================= */

@media screen and (max-width: 750px) {

	.storm-boardstats-content {
		display: block;
	}

	.storm-boardstats-content > * {
		margin-bottom: 14px;
	}

}

/* =========================================================
   INDEX – GRUPPEN / LÄNDER
   ========================================================= */

.storm-groupcount {
	grid-column: 1 / -1;

	width: 100%;

	margin-top: 4px;
	padding: 18px 20px 20px;

	background: #292627;

	border-top: 1px solid rgba(154,129,105,.18);
	border-bottom: 1px solid rgba(154,129,105,.18);

	box-sizing: border-box;
}


/* Überschrift */

.storm-groupcount-title {
	margin-bottom: 17px;

	text-align: center;

	color: #9f8d80;

	font-size: 8px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}


/* Wappenreihe */

.storm-groupcount-list {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 38px;

	width: 100%;
}


/* einzelnes Land */

.storm-groupcount-item {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 8px;

	min-width: 65px;
}


/* Wappen */

.storm-groupcount-item img {
	display: block;

	width: 52px;
	height: 52px;

	object-fit: contain;

	opacity: .78;

	filter: saturate(.75);

	transition:
		opacity .2s ease,
		filter .2s ease,
		transform .2s ease;
}


/* beim Hover darf das Wappen etwas leben */

.storm-groupcount-item:hover img {
	opacity: 1;

	filter: saturate(1);

	transform: translateY(-2px);
}


/* Anzahl */

.storm-groupcount-item span {
	font-family: Georgia, "Times New Roman", serif;

	font-size: 14px;

	color: #c8ad94;
}


/* kleine senkrechte Trenner */

.storm-groupcount-item + .storm-groupcount-item::before {
	content: "";

	position: absolute;

	left: -19px;
	top: 12px;

	width: 1px;
	height: 32px;

	background: rgba(154,129,105,.14);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 800px) {

	.storm-groupcount-list {
		flex-wrap: wrap;

		gap: 24px 32px;
	}

	.storm-groupcount-item + .storm-groupcount-item::before {
		display: none;
	}

}