/* =========================================================
   ACTIVITY CHECK
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   GLOBALE DESIGNFARBEN
	----------------------------------------------------- */

	--ac-bg:
		var(--sidebit-bg);

	--ac-bg-deep:
		var(--sidebit-bg-deep);

	--ac-bg-soft:
		var(--sidebit-bg-soft);

	--ac-panel:
		var(--sidebit-panel);

	--ac-panel-raised:
		var(--sidebit-panel-raised);

	--ac-text:
		var(--sidebit-text);

	--ac-text-soft:
		var(--sidebit-text-soft);

	--ac-text-muted:
		var(--sidebit-text-muted);

	--ac-text-strong:
		var(--sidebit-text-strong);

	--ac-accent-dark:
		var(--sidebit-accent-dark);

	--ac-accent:
		var(--sidebit-accent-light);

	--ac-accent-pale:
		var(--sidebit-accent-pale);

	--ac-line:
		var(--sidebit-line);

	--ac-line-strong:
		var(--sidebit-line-strong);

	--ac-line-accent:
		var(--sidebit-line-accent);

	--ac-transparent:
		var(--sidebit-transparent);


	/* -----------------------------------------------------
	   SCHRIFTEN
	----------------------------------------------------- */

	--ac-font:
		var(--sidebit-font);

	--ac-display:
		var(--sidebit-display);


	/* -----------------------------------------------------
	   STATUSFARBEN
	----------------------------------------------------- */

	--ac-warning:
		#c09a57;

	--ac-warning-soft:
		rgba(192, 154, 87, 0.10);

	--ac-danger:
		#c65365;

	--ac-danger-soft:
		rgba(198, 83, 101, 0.10);

	--ac-success:
		#879b7b;

	--ac-success-soft:
		rgba(135, 155, 123, 0.09);


	/* -----------------------------------------------------
	   SONSTIGE FLÄCHEN
	----------------------------------------------------- */

	--ac-red-wash:
		rgba(116, 27, 42, 0.08);

	--ac-red-wash-medium:
		rgba(116, 27, 42, 0.13);

	--ac-black:
		rgba(0, 0, 0, 0.28);


	/* -----------------------------------------------------
	   VERLÄUFE
	----------------------------------------------------- */

	--ac-panel-gradient:
		linear-gradient(
			135deg,
			var(--ac-panel-raised),
			var(--ac-bg-soft) 58%,
			var(--ac-bg-deep)
		);

	--ac-soft-gradient:
		linear-gradient(
			to right,
			var(--ac-red-wash-medium),
			var(--ac-red-wash),
			var(--ac-transparent)
		);

	--ac-line-gradient:
		linear-gradient(
			to right,
			var(--ac-accent),
			var(--ac-line-accent) 27%,
			var(--ac-line) 64%,
			var(--ac-transparent)
		);


	/* -----------------------------------------------------
	   SCHATTEN
	----------------------------------------------------- */

	--ac-shadow:
		0 20px 52px var(--ac-black);


	/* -----------------------------------------------------
	   BREITE
	----------------------------------------------------- */

	--ac-width:
		1380px;
}


/* =========================================================
   BASIS
   ========================================================= */

.ac-page,
.ac-page * {
	box-sizing: border-box;
}


.ac-page {
	width:
		min(
			calc(100% - 50px),
			var(--ac-width)
		);

	margin:
		0
		auto;

	padding:
		48px
		0
		90px;

	color:
		var(--ac-text);

	font-family:
		var(--ac-font);

	font-size: 15px;
	line-height: 1.72;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ac-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;

	margin:
		0
		0
		8px;

	color:
		var(--ac-accent);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.21em;
	line-height: 1.5;

	text-transform: uppercase;
}


.ac-eyebrow::before {
	width: 5px;
	height: 5px;

	content: "";

	border:
		1px solid
		var(--ac-accent);

	transform:
		rotate(45deg);
}


/* =========================================================
   HERO
   ========================================================= */

.ac-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;

	margin-bottom: 30px;
	padding-bottom: 25px;

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-hero > div {
	min-width: 0;
}


.ac-hero__title {
	margin: 0;
	padding: 0;

	color:
		var(--ac-text-strong);

	font-family:
		var(--ac-display);

	font-size:
		clamp(
			48px,
			5.5vw,
			74px
		);

	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 0.94;
}


.ac-hero__title::before,
.ac-hero__title::after {
	display: none;

	content: none;
}


.ac-hero > p {
	max-width: 460px;

	margin: 0;

	color:
		var(--ac-text-muted);

	font-size: 13px;
	line-height: 1.7;
}


/* =========================================================
   TABNAVIGATION
   ========================================================= */

.ac-tabs {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	margin-bottom: 42px;

	background:
		var(--ac-line);

	gap: 1px;

	border-top:
		1px solid
		var(--ac-line-strong);

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-tablink {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;

	min-width: 0;
	min-height: 58px;

	margin: 0;
	padding:
		0
		22px;

	color:
		var(--ac-text-muted);

	font-family:
		var(--ac-font);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;

	text-align: left;
	text-transform: uppercase;

	background:
		var(--ac-bg-deep);

	border: 0;

	cursor: pointer;
}


.ac-tablink::after {
	position: absolute;

	right: 20px;
	bottom: -1px;
	left: 20px;

	height: 1px;

	content: "";

	background:
		var(--ac-transparent);
}


.ac-tablink__number {
	flex:
		0
		0
		auto;

	color:
		var(--ac-accent-dark);

	font-family:
		var(--ac-display);

	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0;
}


.ac-tablink:hover {
	color:
		var(--ac-text-strong);

	background:
		var(--ac-red-wash);
}


.ac-tablink.active {
	color:
		var(--ac-accent-pale);

	background:
		var(--ac-soft-gradient);
}


.ac-tablink.active::after {
	background:
		var(--ac-line-gradient);
}


/* =========================================================
   TABCONTENT
   ========================================================= */

.ac-tabcontent {
	display: none;
}


.ac-tabcontent.active {
	display: block;

	animation:
		ac-fade
		0.18s
		ease;
}


@keyframes ac-fade {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.ac-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 35px;

	margin-bottom: 25px;
	padding-bottom: 20px;

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-sectionhead__title {
	margin: 0;
	padding: 0;

	color:
		var(--ac-text-strong);

	font-family:
		var(--ac-display);

	font-size:
		clamp(
			34px,
			3.8vw,
			50px
		);

	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;

	text-transform: none;
}


.ac-sectionhead__title::before,
.ac-sectionhead__title::after {
	display: none;

	content: none;
}


.ac-sectionhead > p {
	max-width: 450px;

	margin: 0;

	color:
		var(--ac-text-muted);

	font-size: 13px;
	line-height: 1.7;
}


/* =========================================================
   INTRO
   ========================================================= */

.ac-intro {
	display: grid;

	grid-template-columns:
		72px
		minmax(0, 1fr);

	margin-bottom: 28px;

	background:
		var(--ac-panel-gradient);

	border:
		1px solid
		var(--ac-line);

	box-shadow:
		var(--ac-shadow);
}


.ac-intro__mark {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	padding-top: 30px;

	color:
		var(--ac-accent);

	font-size: 18px;

	background:
		var(--ac-bg-deep);

	border-right:
		1px solid
		var(--ac-line);
}


.ac-intro__copy {
	padding:
		27px
		clamp(25px, 3vw, 38px);
}


.ac-intro__copy p {
	margin:
		0
		0
		17px;

	color:
		var(--ac-text-soft);

	font-size: 14px;
	line-height: 1.82;

	text-align: left;
}


.ac-intro__copy p:last-of-type {
	margin-bottom: 0;
}


.ac-intro__copy strong,
.ac-intro__copy b {
	color:
		var(--ac-accent-pale);

	font-weight: 700;
}


.ac-intro__absence {
	margin-top: 23px;
	padding:
		15px
		18px;

	color:
		var(--ac-text);

	font-size: 13px;
	line-height: 1.7;

	background:
		var(--ac-red-wash);

	border-left:
		2px solid
		var(--ac-accent-dark);
}


.ac-intro__absence:empty {
	display: none;
}


/* =========================================================
   CONTENT BLOCKS
   ========================================================= */

.ac-block {
	margin-top: 26px;

	background:
		var(--ac-bg-soft);

	border:
		1px solid
		var(--ac-line);

	box-shadow:
		var(--ac-shadow);
}


.ac-block__header {
	padding:
		22px
		25px
		19px;

	background:
		var(--ac-soft-gradient);

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-block__header h3 {
	margin: 0;
	padding: 0;

	color:
		var(--ac-text-strong);

	font-family:
		var(--ac-display);

	font-size: 29px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;

	text-transform: none;
}


.ac-block__header h3::before,
.ac-block__header h3::after {
	display: none;

	content: none;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.ac-tablewrap {
	width: 100%;

	overflow-x: auto;

	scrollbar-width: thin;
	scrollbar-color:
		var(--ac-accent-dark)
		var(--ac-bg-deep);
}


/* =========================================================
   TABLE
   ========================================================= */

.ac-table {
	width: 100%;

	margin: 0;

	color:
		var(--ac-text);

	font-family:
		var(--ac-font);

	font-size: 13px;
	line-height: 1.65;

	background:
		var(--ac-bg-soft);

	border-collapse:
		separate;

	border-spacing:
		0;

	border: 0;
}


.ac-table th {
	padding:
		13px
		15px;

	color:
		var(--ac-text-muted);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.11em;
	line-height: 1.45;

	text-align: left;
	text-transform: uppercase;

	background:
		var(--ac-bg-deep);

	border: 0;
	border-right:
		1px solid
		var(--ac-line);

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-table th:last-child {
	border-right: 0;
}


.ac-table td {
	padding:
		16px
		15px;

	color:
		var(--ac-text-soft);

	font-size: 13px;
	line-height: 1.7;

	vertical-align: middle;

	background:
		var(--ac-bg-soft);

	border: 0;
	border-right:
		1px solid
		var(--ac-line);

	border-bottom:
		1px solid
		var(--ac-line);
}


.ac-table td:last-child {
	border-right: 0;
}


.ac-table tbody tr:last-child td {
	border-bottom: 0;
}


.ac-table a {
	color:
		var(--ac-accent-pale);

	font-weight: 600;
}


/* erste kleine Spalte */

.ac-table__icon {
	width: 54px;
}


/* =========================================================
   ACTIVITY TABLE
   ========================================================= */

.ac-table--activity th:nth-child(2),
.ac-table--activity td:nth-child(2) {
	width: 25%;
}


.ac-table--activity th:nth-child(3),
.ac-table--activity td:nth-child(3) {
	width: 23%;
}


.ac-table--activity th:nth-child(4),
.ac-table--activity td:nth-child(4) {
	width: 42%;
}


/* =========================================================
   STATISTICS
   ========================================================= */

.ac-statistics {
	margin-top: 32px;
}


.ac-table--statistics th,
.ac-table--statistics td {
	width: 33.333%;
}


/* =========================================================
   GENERIERTE BEREICHE
   Blacklist / Ingame
   ========================================================= */

.ac-generated {
	position: relative;

	margin-bottom: 22px;
	padding:
		27px
		clamp(24px, 3vw, 36px);

	color:
		var(--ac-text-soft);

	font-size: 14px;
	line-height: 1.8;

	background:
		var(--ac-panel-gradient);

	border:
		1px solid
		var(--ac-line);

	box-shadow:
		var(--ac-shadow);
}


.ac-generated:empty {
	display: none;
}


.ac-generated::before {
	position: absolute;

	top: -1px;
	left: 28px;

	width: 70px;
	height: 1px;

	content: "";

	background:
		var(--ac-accent);
}


/* =========================================================
   GENERIERTE TABELLEN
   ========================================================= */

.ac-generated table {
	width: 100%;

	margin:
		18px
		0;

	color:
		var(--ac-text);

	font-family:
		var(--ac-font);

	border-collapse:
		separate;

	border-spacing:
		0;

	border:
		1px solid
		var(--ac-line);
}


.ac-generated th {
	padding:
		13px
		14px;

	color:
		var(--ac-text-muted);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;

	text-align: left;
	text-transform: uppercase;

	background:
		var(--ac-bg-deep);

	border-right:
		1px solid
		var(--ac-line);

	border-bottom:
		1px solid
		var(--ac-line-strong);
}


.ac-generated td {
	padding:
		15px
		14px;

	color:
		var(--ac-text-soft);

	font-size: 13px;
	line-height: 1.7;

	background:
		var(--ac-bg-soft);

	border-right:
		1px solid
		var(--ac-line);

	border-bottom:
		1px solid
		var(--ac-line);
}


.ac-generated th:last-child,
.ac-generated td:last-child {
	border-right: 0;
}


/* =========================================================
   GENERIERTE ÜBERSCHRIFTEN
   ========================================================= */

.ac-generated h1,
.ac-generated h2,
.ac-generated h3,
.ac-generated h4 {
	color:
		var(--ac-text-strong);

	font-family:
		var(--ac-display);

	text-transform: none;
}


.ac-generated h1::before,
.ac-generated h1::after,
.ac-generated h2::before,
.ac-generated h2::after,
.ac-generated h3::before,
.ac-generated h3::after {
	display: none;

	content: none;
}


/* =========================================================
   LINKS
   ========================================================= */

.ac-generated a {
	color:
		var(--ac-accent-pale);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ac-page .button,
.ac-page input[type="submit"],
.ac-page button:not(.ac-tablink) {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 38px;

	padding:
		0
		13px;

	color:
		var(--ac-accent-pale);

	font-family:
		var(--ac-font);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;

	background:
		var(--ac-bg-soft);

	border:
		1px solid
		var(--ac-line-accent);

	border-radius: 0;

	text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.ac-page {
		width:
			calc(100% - 36px);
	}


	.ac-hero {
		align-items: flex-start;
		flex-direction: column;

		gap: 15px;
	}


	.ac-hero > p {
		max-width: 650px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px), (max-device-width: 700px) {

	.ac-page {
		width: 100%;

		padding:
			30px
			18px
			70px;

		font-size: 17px;
		line-height: 1.74;
	}


	.ac-eyebrow {
		font-size: 12px;
		letter-spacing: 0.17em;
	}


	.ac-hero__title {
		font-size:
			clamp(
				43px,
				12vw,
				59px
			);
	}


	.ac-hero > p {
		font-size: 16px;
		line-height: 1.72;
	}


	/* Tabs */

	.ac-tabs {
		grid-template-columns: 1fr;

		margin-bottom: 34px;
	}


	.ac-tablink {
		min-height: 58px;

		font-size: 14px;

		border-bottom:
			1px solid
			var(--ac-line);
	}


	.ac-tablink:last-child {
		border-bottom: 0;
	}


	.ac-tablink__number {
		font-size: 25px;
	}


	/* Section */

	.ac-sectionhead {
		align-items: flex-start;
		flex-direction: column;

		gap: 12px;
	}


	.ac-sectionhead__title {
		font-size:
			clamp(
				34px,
				8.5vw,
				43px
			);
	}


	.ac-sectionhead > p {
		font-size: 16px;
		line-height: 1.72;
	}


	/* Intro */

	.ac-intro {
		grid-template-columns: 48px minmax(0, 1fr);
	}


	.ac-intro__mark {
		padding-top: 27px;

		font-size: 17px;
	}


	.ac-intro__copy {
		padding:
			24px
			20px;
	}


	.ac-intro__copy p {
		font-size: 16px;
		line-height: 1.75;
	}


	.ac-intro__absence {
		font-size: 15px;
	}


	/* Table */

	.ac-block__header h3 {
		font-size: 32px;
	}


	.ac-table {
		min-width: 760px;
	}


	.ac-table th {
		font-size: 11px;
	}


	.ac-table td {
		font-size: 15px;
		line-height: 1.68;
	}


	/* Generated */

	.ac-generated {
		padding:
			24px
			20px;

		font-size: 16px;
		line-height: 1.75;

		overflow-x: auto;
	}


	.ac-generated table {
		min-width: 700px;
	}


	.ac-generated th {
		font-size: 11px;
	}


	.ac-generated td {
		font-size: 15px;
	}

}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 480px), (max-device-width: 480px) {

	.ac-page {
		padding:
			27px
			14px
			60px;
	}


	.ac-hero__title {
		font-size:
			clamp(
				41px,
				13vw,
				54px
			);
	}


	.ac-intro {
		display: block;
	}


	.ac-intro__mark {
		justify-content: flex-start;

		padding:
			20px
			20px
			0;

		background:
			var(--ac-transparent);

		border-right: 0;
	}


	.ac-intro__copy {
		padding:
			18px
			18px
			24px;
	}


	.ac-intro__copy p {
		font-size: 17px;
		line-height: 1.78;
	}


	.ac-tablink {
		font-size: 15px;
	}


	.ac-generated {
		font-size: 17px;
	}

}