/* =========================================================
   INDEX BOTTOM AREA
   BOARDSTATS + QUOTE + FOOTER
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   GLOBALE FARBEN ÜBERNEHMEN
	----------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


	/* -----------------------------------------------------
	   ZIRKUSBILD

	   quadratische Grafik
	----------------------------------------------------- */

	--bs-circus-image:
		url(/images/circusicon1.png);


	/* -----------------------------------------------------
	   ZUSÄTZLICHE FARBEN
	----------------------------------------------------- */

	--bottom-black:
		rgba(0, 0, 0, 0.42);

	--bottom-black-strong:
		rgba(0, 0, 0, 0.70);

	--bottom-image-overlay:
		rgba(7, 6, 7, 0.24);

	--bottom-image-overlay-deep:
		rgba(7, 6, 7, 0.74);

	--bottom-red-wash:
		rgba(116, 27, 42, 0.12);

	--bottom-red-wash-strong:
		rgba(116, 27, 42, 0.22);

	--bottom-light:
		rgba(255, 255, 255, 0.025);


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

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

	--bottom-image-gradient:
		linear-gradient(
			to top,
			var(--bottom-image-overlay-deep),
			var(--bottom-image-overlay) 48%,
			var(--bottom-image-overlay-deep)
		);

	--bottom-accent-gradient:
		linear-gradient(
			to right,
			var(--bottom-accent),
			var(--bottom-line-accent) 24%,
			var(--bottom-line) 62%,
			var(--bottom-transparent)
		);

	--bottom-divider:
		linear-gradient(
			to bottom,
			var(--bottom-transparent),
			var(--bottom-line-strong),
			var(--bottom-transparent)
		);


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

	--bottom-shadow:
		0 24px 60px var(--bottom-black);

	--bottom-image-shadow:
		inset 0 0 70px var(--bottom-black-strong);


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

	--bottom-width: 1380px;
}


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

.bs-boardstats,
.bs-boardstats *,
.iq-quote,
.iq-quote *,
.ft-footer,
.ft-footer * {
	box-sizing: border-box;
}


/* =========================================================
   GEMEINSAME EYEBROWS
   ========================================================= */

.bs-eyebrow,
.iq-eyebrow,
.ft-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-bottom: 8px;

	color: var(--bottom-accent);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.5;

	text-transform: uppercase;
}


.bs-eyebrow::before,
.iq-eyebrow::before,
.ft-eyebrow::before {
	width: 4px;
	height: 4px;

	content: "";

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

	transform: rotate(45deg);
}


/* =========================================================
   BOARDSTATS
   ========================================================= */

.bs-boardstats {
	display: grid;

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

	align-items: start;

	width:
		min(
			calc(100% - 50px),
			var(--bottom-width)
		);

	margin:
		60px
		auto
		22px;

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

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

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


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

.bs-boardstats__main {
	min-width: 0;

	padding:
		38px
		clamp(34px, 4vw, 52px)
		42px;
}


.bs-boardstats__header {
	padding-bottom: 25px;

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


.bs-boardstats__title {
	margin: 0;
	padding: 0;

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

	font-family: var(--bottom-display);
	font-size: clamp(38px, 4vw, 56px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 0.98;

	text-transform: none;
}


.bs-boardstats__title::before,
.bs-boardstats__title::after {
	display: none;

	content: none;
}


/* =========================================================
   STATS
   ========================================================= */

.bs-boardstats__stats {
	display: grid;

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

	margin-top: 28px;

	background: var(--bottom-line);
	gap: 1px;
}


.bs-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	min-width: 0;

	padding:
		17px
		16px;

	background: var(--bottom-bg-soft);
}


.bs-stat__value {
	color: var(--bottom-text-strong);

	font-family: var(--bottom-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1;
}


.bs-stat__label {
	margin-top: 5px;

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

	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.14em;

	text-transform: uppercase;
}


/* =========================================================
   ONLINE
   ========================================================= */

.bs-boardstats__body {
	margin-top: 28px;
}


.bs-online__header {
	display: flex;
	align-items: center;
	gap: 15px;

	margin-bottom: 18px;
}


.bs-online__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 35px;
	height: 35px;

	color: var(--bottom-accent);

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


.bs-online__label {
	display: block;

	margin-bottom: 3px;

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

	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.14em;

	text-transform: uppercase;
}


.bs-online h3 {
	margin: 0;
	padding: 0;

	font-family: var(--bottom-display);
	font-size: 27px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
}


.bs-online h3::before,
.bs-online h3::after {
	display: none;

	content: none;
}


.bs-online h3 a {
	color: var(--bottom-text-strong);
}


.bs-online__content {
	max-height: 175px;

	padding:
		18px
		20px;

	overflow-y: auto;

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

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

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

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

	scrollbar-width: thin;
	scrollbar-color:
		var(--bottom-accent-dark)
		var(--bottom-transparent);
}


.bs-online__content a {
	color: var(--bottom-accent-pale);

	font-weight: 600;
}


/* =========================================================
   BOARDSTATS BILDSPALTE
   ========================================================= */

.bs-visual {
	position: relative;

	width: 100%;
	aspect-ratio: 1 / 1;

	overflow: hidden;

	background-image:
		var(--bottom-image-gradient),
		var(--bs-circus-image);

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

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

	box-shadow: var(--bottom-image-shadow);
}


.bs-visual::before {
	position: absolute;

	top: 26px;
	right: 26px;
	bottom: 26px;
	left: 26px;

	content: "";

	pointer-events: none;

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


.bs-visual::after {
	position: absolute;

	top: 26px;
	left: 26px;

	width: 72px;
	height: 1px;

	content: "";

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


.bs-visual__content {
	position: absolute;
	z-index: 2;

	right: 42px;
	bottom: 42px;
	left: 42px;
}


.bs-visual__small {
	display: block;

	margin-bottom: 9px;

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

	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;

	text-transform: uppercase;
}


.bs-visual__member {
	color: var(--bottom-text-strong);

	font-family: var(--bottom-display);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 600;
	line-height: 1;

	overflow-wrap: anywhere;
}


.bs-visual__member a {
	color: inherit;
}


.bs-visual__copy {
	display: block;

	margin-top: 11px;

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

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


/* =========================================================
   INGAME QUOTE
   ========================================================= */

.iq-quote {
	display: grid;

	grid-template-columns:
		90px
		minmax(0, 1fr)
		minmax(220px, 0.34fr);

	width:
		min(
			calc(100% - 50px),
			var(--bottom-width)
		);

	margin:
		22px
		auto
		0;

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

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


/* große Anführungszeichen */

.iq-quote__mark {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	padding-top: 26px;

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

	font-family: var(--bottom-display);
	font-size: 82px;
	font-weight: 600;
	line-height: 0.8;

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

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


.iq-quote__content {
	min-width: 0;

	padding:
		30px
		clamp(28px, 4vw, 48px);
}


.iq-quote__title {
	margin: 0;
	padding: 0;

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

	font-family: var(--bottom-display);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;

	text-transform: none;
}


.iq-quote__title::before,
.iq-quote__title::after {
	display: none;

	content: none;
}


.iq-quote__text {
	margin:
		22px
		0
		0;
	padding: 0;

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

	font-family: var(--bottom-display);
	font-size: 18px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.75;

	background: var(--bottom-transparent);

	border: 0;
}


/* =========================================================
   QUOTE META
   ========================================================= */

.iq-quote__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	min-width: 0;

	padding:
		30px
		28px;

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

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


.iq-quote__author {
	color: var(--bottom-accent-pale);

	font-family: var(--bottom-display);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.15;
}


.iq-quote__source {
	margin-top: 8px;

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

	font-size: 10px;
	line-height: 1.5;
}


.iq-quote__source a {
	color: var(--bottom-text-soft);

	font-weight: 600;
}


.iq-quote__date {
	margin-top: 5px;

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

	font-size: 10px;
}


.iq-quote__all {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	margin-top: 24px;
	padding-bottom: 5px;

	color: var(--bottom-accent);

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

	text-transform: uppercase;

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


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

.ft-footer {
	position: relative;

	width: 100%;

	margin-top: 55px;

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

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

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

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


/* =========================================================
   PARTNER
   ========================================================= */

.ft-partners {
	display: grid;

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

	align-items: center;
	gap:
		clamp(
			40px,
			7vw,
			100px
		);

	padding:
		38px
		max(
			30px,
			calc(
				(100% - var(--bottom-width))
				/
				2
			)
		);

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


.ft-partners__title {
	margin: 0;
	padding: 0;

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

	font-family: var(--bottom-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;

	text-transform: none;
}


.ft-partners__title::before,
.ft-partners__title::after {
	display: none;

	content: none;
}


.ft-partners__heading p {
	max-width: 300px;

	margin:
		12px
		0
		0;

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

	font-size: 12px;
	line-height: 1.65;
}


.ft-partners__list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 11px;
}


.ft-partner {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100px;
	height: 42px;

	padding:
		6px
		8px;

	background: var(--bottom-panel);

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


.ft-partner img {
	display: block;

	max-width: 100%;
	max-height: 100%;

	object-fit: contain;

	filter:
		saturate(0.72)
		brightness(0.84);

	opacity: 0.8;
}


.ft-partner:hover {
	border-color:
		var(--bottom-line-accent);
}


.ft-partner:hover img {
	filter:
		saturate(0.9)
		brightness(0.96);

	opacity: 1;
}


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

.ft-main {
	display: grid;

	grid-template-columns:
		minmax(180px, 0.28fr)
		minmax(0, 1fr)
		auto;

	align-items: center;
	gap:
		30px
		50px;

	padding:
		28px
		max(
			30px,
			calc(
				(100% - var(--bottom-width))
				/
				2
			)
		);

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


.ft-main__title {
	display: block;

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

	font-family: var(--bottom-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
}


/* Navigation */

.ft-footer .bottom_links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap:
		9px
		21px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.ft-footer .bottom_links li {
	position: relative;

	margin: 0;
	padding: 0;
}


.ft-footer .bottom_links li + li::before {
	position: absolute;

	top: 50%;
	left: -13px;

	width: 3px;
	height: 3px;

	content: "";

	background: var(--bottom-accent-dark);

	transform:
		translateY(-50%)
		rotate(45deg);
}


.ft-footer .bottom_links a {
	color: var(--bottom-text-muted);

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

	text-decoration: none;
	text-transform: uppercase;
}


.ft-footer .bottom_links a:hover {
	color: var(--bottom-accent-pale);
}


/* =========================================================
   CONTROLS
   ========================================================= */

.ft-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}


.ft-controls form {
	display: flex;
	align-items: center;
	gap: 7px;

	margin: 0;
	padding: 0;
}


.ft-controls form > div,
.ft-controls form > span {
	margin: 0;
	padding: 0;
}


.ft-controls img {
	display: none !important;
}


.ft-controls select {
	width: 145px;
	min-width: 145px;
	height: 34px;

	margin: 0;
	padding:
		0
		28px
		0
		9px;

	color: var(--bottom-text);

	font-family: var(--bottom-font);
	font-size: 11px;
	line-height: 34px;

	background: var(--bottom-panel);

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

	border-radius: 0;

	box-shadow: none;
	outline: none;
}


.ft-controls select option {
	color: var(--bottom-text);

	background: var(--bottom-bg-deep);
}


.ft-controls input[type="submit"],
.ft-controls button {
	height: 34px;

	margin: 0;
	padding:
		0
		12px;

	color: var(--bottom-accent);

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

	background: var(--bottom-transparent);

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

	cursor: pointer;

	text-transform: uppercase;
}


/* =========================================================
   LOWER
   ========================================================= */

.ft-lower {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;

	padding:
		17px
		max(
			30px,
			calc(
				(100% - var(--bottom-width))
				/
				2
			)
		)
		20px;
}


.ft-copyright {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap:
		5px
		12px;

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

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


.ft-copyright strong {
	color: var(--bottom-accent);

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

	text-transform: uppercase;
}


.ft-copyright a {
	color: var(--bottom-text-soft);
}


.ft-time {
	display: flex;
	align-items: center;
	gap: 8px;

	flex-shrink: 0;

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

	font-size: 10px;
	letter-spacing: 0.05em;

	text-align: right;
}


.ft-time i {
	color: var(--bottom-accent-dark);
}


/* =========================================================
   MYBB FOOTER RESET
   ========================================================= */

.ft-footer .upper,
.ft-footer .lower,
.ft-footer .wrapper {
	width: auto;

	margin: 0;
	padding: 0;

	background: var(--bottom-transparent);

	border: 0;
}


.ft-footer ul {
	margin-top: 0;
	margin-bottom: 0;
}


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

@media (max-width: 1000px) {

	.bs-boardstats {
		grid-template-columns:
			minmax(0, 1fr)
			340px;
	}


	.bs-boardstats__stats {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.iq-quote {
		grid-template-columns:
			70px
			minmax(0, 1fr);
	}


	.iq-quote__meta {
		grid-column:
			1
			/
			-1;

		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap:
			8px
			20px;

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

		border-left: 0;
	}


	.iq-quote__all {
		margin:
			0
			0
			0
			auto;
	}


	.ft-main {
		grid-template-columns:
			1fr
			auto;
	}


	.ft-main__label {
		grid-column:
			1
			/
			-1;
	}

}


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

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

	.bs-boardstats,
	.iq-quote {
		width:
			calc(100% - 30px);
	}


	.bs-boardstats {
		display: flex;
		flex-direction: column;

		margin-top: 40px;
	}


	.bs-boardstats__main {
		padding:
			28px
			22px
			30px;
	}


	.bs-eyebrow,
	.iq-eyebrow,
	.ft-eyebrow {
		font-size: 12px;
	}


	.bs-boardstats__title {
		font-size:
			clamp(
				40px,
				10vw,
				52px
			);
	}


	.bs-boardstats__stats {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.bs-stat__value {
		font-size: 34px;
	}


	.bs-stat__label {
		font-size: 11px;
	}


	.bs-online__label {
		font-size: 11px;
	}


	.bs-online h3 {
		font-size: 31px;
	}


	.bs-online__content {
		max-height: 230px;

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


	/* Bild bleibt quadratisch */

	.bs-visual {
		align-self: center;

		width: 100%;
		max-width: 460px;

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

		border-left: 0;
	}


	.bs-visual__small {
		font-size: 12px;
	}


	.bs-visual__member {
		font-size: 38px;
	}


	.bs-visual__copy {
		font-size: 15px;
	}


	/* Quote */

	.iq-quote {
		display: block;
	}


	.iq-quote__mark {
		justify-content: flex-start;

		padding:
			20px
			22px
			0;

		font-size: 68px;

		border-right: 0;
	}


	.iq-quote__content {
		padding:
			16px
			22px
			27px;
	}


	.iq-quote__title {
		font-size: 31px;
	}


	.iq-quote__text {
		font-size: 19px;
		line-height: 1.72;
	}


	.iq-quote__meta {
		display: block;

		padding:
			22px;

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


	.iq-quote__author {
		font-size: 27px;
	}


	.iq-quote__source,
	.iq-quote__date {
		font-size: 13px;
	}


	.iq-quote__all {
		margin-top: 18px;

		font-size: 12px;
	}


	/* Partner */

	.ft-partners {
		grid-template-columns: 1fr;

		gap: 24px;

		padding:
			32px
			22px;
	}


	.ft-partners__title {
		font-size: 38px;
	}


	.ft-partners__heading p {
		max-width: none;

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


	.ft-partners__list {
		display: grid;

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

		width: 100%;
	}


	.ft-partner {
		width: 100%;
		height: 48px;
	}


	/* main */

	.ft-main {
		display: block;

		padding:
			28px
			22px;
	}


	.ft-main__title {
		font-size: 25px;
	}


	.ft-navigation {
		margin-top: 24px;
	}


	.ft-footer .bottom_links {
		display: grid;

		grid-template-columns: 1fr;

		gap: 11px;
	}


	.ft-footer .bottom_links li + li::before {
		display: none;
	}


	.ft-footer .bottom_links a {
		font-size: 15px;
		line-height: 1.55;
	}


	.ft-controls {
		display: block;

		width: 100%;

		margin-top: 27px;
	}


	.ft-controls form {
		align-items: stretch;
		flex-direction: column;

		width: 100%;

		margin-top: 9px;
	}


	.ft-controls select,
	.ft-controls input[type="submit"],
	.ft-controls button {
		width: 100%;
		min-width: 0;
		height: 45px;
	}


	.ft-controls select {
		font-size: 16px;
		line-height: 45px;
	}


	.ft-controls input[type="submit"],
	.ft-controls button {
		font-size: 14px;
	}


	.ft-lower {
		align-items: flex-start;
		flex-direction: column;

		padding:
			19px
			22px
			22px;
	}


	.ft-copyright,
	.ft-time {
		font-size: 13px;
		line-height: 1.65;

		text-align: left;
	}


	.ft-copyright strong {
		font-size: 13px;
	}

}


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

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

	.bs-boardstats,
	.iq-quote {
		width:
			calc(100% - 24px);
	}


	.bs-boardstats__main {
		padding:
			25px
			17px
			28px;
	}


	.bs-stat {
		padding:
			15px
			12px;
	}


	.bs-online__content {
		font-size: 17px;
	}


	.bs-visual__content {
		right: 28px;
		bottom: 30px;
		left: 28px;
	}


	.bs-visual__member {
		font-size: 35px;
	}


	.iq-quote__text {
		font-size: 19px;
	}


	.ft-partners,
	.ft-main,
	.ft-lower {
		padding-right: 17px;
		padding-left: 17px;
	}

}