:root {
	--storm-bg: #252324;
	--storm-panel: #595354;
	--storm-panel-dark: #454142;
	--storm-border: #9a8169;

	--storm-text: #d5cfca;
	--storm-muted: #aaa19b;
	--storm-light: #e4ded9;

	--storm-content-width: 1200px;
}


/* =========================
   HEADER GRUNDGERÜST
   ========================= */

#header {
	width: 100%;
}

.storm-header {
	width: var(--storm-content-width);
	margin: 10px auto 0 auto;

	display: grid;

	grid-template-columns: 680px 440px 80px;
	grid-template-rows: 400px 112px;

	background: var(--storm-panel);

	border-top: 3px solid var(--storm-border);
	border-bottom: 3px solid var(--storm-border);

	box-sizing: border-box;
}


/* =========================
   HEADERBILD
   ========================= */

.storm-header-image {
	grid-column: 1;
	grid-row: 1;

	padding: 22px 0 0 20px;

	box-sizing: border-box;
	overflow: hidden;
}

.storm-header-image img {
	display: block;

	width: 660px;
	height: 378px;

	object-fit: cover;
	object-position: center;

	border-bottom: 3px solid var(--storm-border);

	box-sizing: border-box;
}


/* =========================
   RECHTE TEXTFLÄCHE
   ========================= */

.storm-header-content {
	grid-column: 2;
	grid-row: 1;

	position: relative;

	padding: 28px 32px 20px 38px;

	box-sizing: border-box;

	color: var(--storm-text);

	background:
		linear-gradient(
			rgba(255, 255, 255, .015),
			rgba(0, 0, 0, .06)
		),
		var(--storm-panel);
}

.storm-header-content::after {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background:
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, .012) 0px,
			rgba(255, 255, 255, .012) 1px,
			transparent 1px,
			transparent 3px
		);

	opacity: .45;
}


/* =========================
   TITEL
   ========================= */

.storm-title {
	position: relative;
	z-index: 1;

	margin-bottom: 34px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	line-height: .78;
	letter-spacing: -3px;

	text-transform: uppercase;

	color: #d8d0ca;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, .08),
		0 3px 8px rgba(0, 0, 0, .12);
}

.storm-title span {
	display: block;
}


/* =========================
   INFOTEXTE
   ========================= */

.storm-info {
	position: relative;
	z-index: 1;

	font-size: 12px;
	line-height: 1.55;

	color: var(--storm-text);
}

.storm-info-block {
	margin-bottom: 20px;

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

	color: #d0c9c5;
        text-align: justify;
}

.storm-info-block strong {
	display: block;

	margin-bottom: 5px;

	font-size: 10px;
	font-weight: normal;
	letter-spacing: 1.5px;

	text-transform: uppercase;

	color: #b79b84;
}


/* =========================
   VERTIKALE ICON-NAVIGATION
   ========================= */

.storm-iconnav {
	grid-column: 3;
	grid-row: 1;

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

	background: #403c3d;

	border-left: 1px solid rgba(255, 255, 255, .025);
}

.storm-iconnav a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	font-size: 22px;
	line-height: 1;

	color: #c8c0bc;

	text-decoration: none;

	opacity: .75;

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

.storm-iconnav a:hover {
	color: #b79b84;

	opacity: 1;

	transform: translateX(-2px);
}

.storm-iconnav i,
.storm-iconnav svg {
	font-size: inherit;
}


/* =========================
   QUICKNAV GESAMT
   ========================= */

.storm-quicknav {
	grid-column: 1 / 4;
	grid-row: 2;

	display: grid;
	grid-template-rows: 68px 44px;

	width: 100%;
	height: 112px;

	margin: 0;
	padding: 0;

	background: var(--storm-panel);

	box-sizing: border-box;
}


/* =========================
   HAUPTNAVIGATION
   ========================= */

.storm-quicknav-main {
	display: grid;
	grid-template-columns: repeat(6, 1fr);

	width: 100%;
	height: 68px;

	padding: 0 35px;

	align-items: center;

	box-sizing: border-box;

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

.storm-quicknav-main a {
	display: block;

	width: 100%;

	text-align: center;
	white-space: nowrap;

	color: var(--storm-light);

	font-size: 10px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	text-decoration: none;

	transition: color .2s ease;
}

.storm-quicknav-main a:hover {
	color: #c98a68;
}


/* =========================
   USERZEILE
   ========================= */

.storm-quicknav-user {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 44px;

	padding: 0 25px;

	background: #252324;

	box-sizing: border-box;
}


/* =========================
   MEMBER / GUEST
   ========================= */

.storm-quicknav-user .header-member,
.storm-quicknav-user .header-guest {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	gap: 22px;

	margin: 0;
	padding: 0;
}

.storm-quicknav-user .header-welcome-text {
	margin: 0;

	color: var(--storm-muted);

	font-size: 9px;
	line-height: 1;

	white-space: nowrap;
}

.storm-quicknav-user .header-member-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;

	gap: 16px;

	margin: 0;
	padding: 0;
}

.storm-quicknav-user .header-member-links li {
	margin: 0;
	padding: 0;

	list-style: none;
}

.storm-quicknav-user .header-member-links a {
	color: var(--storm-light);

	font-size: 9px;
	letter-spacing: .8px;

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

	white-space: nowrap;

	transition: color .2s ease;
}

.storm-quicknav-user .header-member-links a:hover {
	color: var(--storm-border);
}


/* =========================
   KLEINE BILDSCHIRME
   ========================= */

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

	:root {
		--storm-content-width: 96%;
	}

	.storm-header {
		grid-template-columns: 56% 37% 7%;
	}

	.storm-header-image {
		padding-left: 20px;
	}

	.storm-header-image img {
		width: 100%;
	}

	.storm-title {
		font-size: 54px;
	}

	.storm-quicknav-main {
		padding: 0 20px;
	}

	.storm-quicknav-main a {
		font-size: 9px;
		letter-spacing: 1.2px;
	}

}

/* =========================
   MYALERTS IM HEADER
   ========================= */

.storm-quicknav-user .alerts {
	list-style: none !important;
	list-style-type: none !important;

	margin: 0;
	padding: 0;
}

.storm-quicknav-user .alerts::marker {
	content: "";
}

.storm-quicknav-user .alerts .myalerts {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	color: var(--storm-light);

	font-size: 9px;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-decoration: none;

	white-space: nowrap;

	transition: color .2s ease;
}

.storm-quicknav-user .alerts .myalerts:hover {
	color: var(--storm-border);
}


/* ZÄHLER */

.myalerts-count {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	font-size: 8px;
	line-height: 18px;
	letter-spacing: 0;

	color: #c98a68;

	text-align: center;

	box-sizing: border-box;
}


/* Raute hinter der Zahl */

.myalerts-count::before {
	content: "";

	position: absolute;

	width: 12px;
	height: 12px;

	top: 50%;
	left: 50%;

	border: 1px solid rgba(154,129,105,.65);
	background: #403c3d;

	transform:
		translate(-50%, -50%)
		rotate(45deg);

	box-sizing: border-box;
}


/* Zahl */

.myalerts-count span {
	position: relative;
	z-index: 1;

	display: block;

	width: 18px;
	height: 18px;

	line-height: 18px;
	text-align: center;

	font-size: 8px;
	letter-spacing: 0;

	color: #c98a68;
}

/* =========================
   PRIVATE NACHRICHTEN
   ========================= */

.header-pms {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	color: var(--storm-light);
	text-decoration: none;

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

	white-space: nowrap;

	transition: color .2s ease;
}

.header-pms:hover {
	color: var(--storm-border);
}

.header-pms-count {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	font-size: 8px;
	line-height: 18px;
	letter-spacing: 0;

	color: #c98a68;

	text-align: center;
}

.header-pms-count::before {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 12px;
	height: 12px;

	background: #403c3d;
	border: 1px solid rgba(154,129,105,.65);

	transform:
		translate(-50%, -50%)
		rotate(45deg);

	box-sizing: border-box;
}

.header-pms-count span {
	position: relative;
	z-index: 1;

	display: block;

	width: 18px;
	height: 18px;

	line-height: 18px;
	text-align: center;

	font-size: 8px;
	letter-spacing: 0;

	color: #c98a68;
}

/* =========================
   COUNTER – STANDARD
   ========================= */

.myalerts-count::before,
.header-pms-count::before {
	background: #353233;
	border-color: rgba(154, 129, 105, .45);

	box-shadow: none;

	transition:
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

.myalerts-count span,
.header-pms-count span {
	color: #9f9289;

	transition: color .2s ease;
}

.alerts.alerts--new .myalerts-count::before {
	background: #57372f;
	border-color: #c47c58;

	box-shadow:
		0 0 6px rgba(196, 92, 55, .55),
		0 0 13px rgba(196, 92, 55, .22);
}

.alerts.alerts--new .myalerts-count span {
	color: #e3aa86;
}

/* PNs grundsätzlich als aktiv behandeln */

.header-pms-count::before {
	background: #57372f;
	border-color: #c47c58;

	box-shadow:
		0 0 6px rgba(196, 92, 55, .55),
		0 0 13px rgba(196, 92, 55, .22);
}

.header-pms-count span {
	color: #e3aa86;
}


/* bei 0 wieder deaktivieren */

.header-pms-count.pms-count-0::before {
	background: #353233;
	border-color: rgba(154, 129, 105, .45);

	box-shadow: none;
}

.header-pms-count.pms-count-0 span {
	color: #9f9289;
}

/* =========================
   MYALERTS POPUP – EMBERS
   ========================= */

.modal.myalerts_popup,
.myalerts_popup {
	background: #292627 !important;

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

	box-shadow:
		0 14px 35px rgba(0,0,0,.45) !important;

	color: #d8d0ca !important;
}


/* Kopf */

.myalerts_popup .thead,
.modal.myalerts_popup .thead {
	background:
		linear-gradient(
			rgba(255,255,255,.025),
			rgba(0,0,0,.08)
		),
		#595354 !important;

	border: 0 !important;
	border-bottom: 2px solid #9a8169 !important;

	padding: 12px 14px !important;

	color: #e0d8d2 !important;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: normal;
}


/* Alert-Zeilen */

.myalerts_popup .trow1,
.myalerts_popup .trow2 {
	background: #302d2f !important;

	border-bottom: 1px solid rgba(255,255,255,.05) !important;

	color: #cfc7c2 !important;
}

.myalerts_popup .trow1:hover,
.myalerts_popup .trow2:hover {
	background: #353133 !important;
}


/* Avatar */

.myalerts_popup img.avatar,
.myalerts_popup .avatar img,
.myalerts_popup td img {
	border: 1px solid rgba(154,129,105,.35);

	object-fit: cover;
}


/* Links / Namen */

.myalerts_popup a {
	color: #d5b398 !important;

	text-decoration: none;
}

.myalerts_popup a:hover {
	color: #c98a68 !important;
}


/* Zeit rechts */

.myalerts_popup .smalltext {
	color: #9a918d !important;
}


/* Footer */

.myalerts_popup .tfoot {
	background: #252324 !important;

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

	padding: 8px 10px !important;

	color: #8f8783 !important;
}

.myalerts_popup .tfoot a {
	color: #9f9289 !important;

	font-size: 9px;
}

.myalerts_popup .tfoot a:hover {
	color: #c98a68 !important;
}


/* Buttons / Checkboxen */

.myalerts_popup input[type="checkbox"] {
	accent-color: #9a8169;
}


/* Modal-Unterkante / weiße Fläche killen */

.modal.myalerts_popup,
.myalerts_popup,
.myalerts_popup table {
	background-color: #292627 !important;
}


/* Schließen-X */

.modal_close {
	color: #d8d0ca !important;

	background: #252324 !important;

	border: 1px solid rgba(154,129,105,.55) !important;

	border-radius: 50%;

	box-shadow: none !important;
}

.modal_close:hover {
	color: #c98a68 !important;

	border-color: #c98a68 !important;
}

/* =========================
   MYALERTS – MODAL WRAPPER
   ========================= */

.modal {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.modal > div,
.modal_content {
	background: #292627 !important;
	border-radius: 0 !important;
}

.modal.myalerts_popup {
	overflow: hidden;
	border-radius: 0 !important;
}

/* weiße Unterkante / Standard-Modal-Fläche weg */
.modal.myalerts_popup::after,
.modal.myalerts_popup::before {
	display: none !important;
	content: none !important;
}

/* Tabelle wirklich bündig */
.myalerts_popup table {
	width: 100% !important;
	margin: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}

/* Footer */
.myalerts_popup .tfoot {
	background: #252324 !important;
	border: 0 !important;
	border-top: 1px solid rgba(154,129,105,.22) !important;
}

/* alle Zellrundungen raus */
.myalerts_popup td,
.myalerts_popup tr,
.myalerts_popup table {
	border-radius: 0 !important;
}

/* X dezenter */
.modal_close {
	top: -9px !important;
	right: -9px !important;

	width: 22px !important;
	height: 22px !important;

	line-height: 20px !important;

	background: #292627 !important;
	border: 1px solid #9a8169 !important;

	color: #d8d0ca !important;

	border-radius: 50% !important;
}

/* =========================================================
   HEADER – WELCOME / USERBAR
   ========================================================= */

.storm-quicknav-user {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 6px 14px;

	min-height: 42px;

	padding: 0 16px;

	background: #252324;

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

	box-sizing: border-box;

	font-size: 8px;
	line-height: 1.4;

	color: #817976;
}


/* allgemeine Links */

.storm-quicknav-user a,
.storm-quicknav-user a:link,
.storm-quicknav-user a:visited {
	color: #9f8d80 !important;

	text-decoration: none !important;

	transition: color .18s ease;
}

.storm-quicknav-user a:hover {
	color: #c98a68 !important;
}


/* Username hervorheben */

.storm-quicknav-user strong a,
.storm-quicknav-user .username,
.storm-quicknav-user a[href*="member.php?action=profile"] {
	color: #d8b49b !important;

	font-weight: normal;
}


/* Moderator / Admin / Abmelden */

.storm-quicknav-user a[href*="modcp.php"],
.storm-quicknav-user a[href*="admin"],
.storm-quicknav-user a[href*="member.php?action=logout"] {
	font-size: 7px;

	letter-spacing: .8px;
	text-transform: uppercase;

	color: #9a918d !important;
}

.storm-quicknav-user a[href*="member.php?action=logout"]:hover {
	color: #c98a68 !important;
}

/* =========================================================
   QUICK LOGIN – FIX
   ========================================================= */

#quick_login {
	display: none;

	position: fixed;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	width: 285px;

	z-index: 99999;

	background: #292627;

	border: 1px solid rgba(154,129,105,.35);

	box-shadow: 0 18px 45px rgba(0,0,0,.50);
}


/* wenn MyBB das Loginfenster öffnet */

#quick_login[style*="display: block"],
#quick_login[style*="display:block"] {
	display: block !important;
}


/* Formular */

.storm-login-form {
	margin: 0;
}


/* Tabelle */

.storm-login-form .tborder {
	width: 100%;

	margin: 0;

	background: transparent !important;

	border: 0 !important;
}


/* Überschrift */

.storm-login-form .thead {
	padding: 14px 16px !important;

	background: #302d2f !important;

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

	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: normal;

	color: #d8b49b !important;
}


/* Inhaltszellen */

.storm-login-form .trow1,
.storm-login-form .trow2 {
	padding: 10px 12px !important;

	background: #292627 !important;

	border: 0 !important;

	color: #aaa19b !important;
}


/* Eingabefelder */

.storm-login-form input[type="text"],
.storm-login-form input[type="password"] {
	width: 100%;

	height: 30px;

	padding: 0 8px;

	background: #343031 !important;

	border: 1px solid #514b4b !important;
	border-radius: 0 !important;

	color: #cfc8c3 !important;

	box-sizing: border-box;
}


/* Loginbutton */

.storm-login-form input[type="submit"] {
	height: 31px;

	padding: 0 14px;

	background: #454142 !important;

	border: 1px solid #5c5554 !important;
	border-radius: 0 !important;

	color: #d8b49b !important;

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

/* =========================================================
   QUICK LOGIN – INHALT
   ========================================================= */

.storm-login-fields {
	padding: 18px;

	background: #292627;

	box-sizing: border-box;
}


/* =========================================================
   FELDER
   ========================================================= */

.storm-login-field {
	display: flex;
	flex-direction: column;

	gap: 6px;

	margin-bottom: 14px;
}

.storm-login-field label {
	color: #9f8d80;

	font-size: 7px;
	letter-spacing: 1px;
	text-transform: uppercase;
}


/* Input */

.storm-login-field input[type="text"],
.storm-login-field input[type="password"] {
	width: 100%;
	height: 32px;

	padding: 0 9px;

	background: #343031 !important;

	border: 1px solid #514b4b !important;
	border-radius: 0 !important;

	color: #cfc8c3 !important;

	font-size: 10px;

	outline: none;

	box-sizing: border-box;
}

.storm-login-field input[type="text"]:focus,
.storm-login-field input[type="password"]:focus {
	border-color: #9a8169 !important;
}


/* =========================================================
   PASSWORT VERGESSEN
   ========================================================= */

.storm-login-field .lost_password {
	align-self: flex-end;

	color: #817976 !important;

	font-size: 7px;
	letter-spacing: .5px;

	text-decoration: none !important;
}

.storm-login-field .lost_password:hover {
	color: #c98a68 !important;
}


/* =========================================================
   EINGELOGGT BLEIBEN
   ========================================================= */

.storm-login-remember {
	display: flex;
	align-items: center;

	gap: 7px;

	margin: 4px 0 18px;

	color: #8f8783;

	font-size: 8px;
}

.storm-login-remember input {
	margin: 0;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.storm-login-submit {
	display: flex;
	justify-content: center;

	padding-top: 13px;

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

.storm-login-submit .button {
	height: 32px;

	padding: 0 16px;

	background: #454142 !important;

	border: 1px solid #5c5554 !important;
	border-radius: 0 !important;

	color: #d8b49b !important;

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

	cursor: pointer;
}

.storm-login-submit .button:hover {
	background: #504a4b !important;

	border-color: #9a8169 !important;
}

/* =========================================================
   GAST – LOGIN DIREKT IM WELCOMEBLOCK
   ========================================================= */

.guest-welcome {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 46px;

	padding: 7px 16px;

	background: #252324;

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

	box-sizing: border-box;
}


/* Formular horizontal */

.guest-login-form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 7px 12px;

	margin: 0;
}


/* Feld */

.guest-login-field {
	display: flex;
	align-items: center;

	gap: 6px;
}

.guest-login-field label {
	color: #756d69;

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


/* Inputs */

.guest-login-field input[type="text"],
.guest-login-field input[type="password"] {
	width: 130px;
	height: 28px;

	padding: 0 8px;

	background: #302d2f !important;

	border: 1px solid #514b4b !important;
	border-radius: 0 !important;

	color: #cfc8c3 !important;

	font-size: 9px;

	outline: none;

	box-sizing: border-box;
}

.guest-login-field input:focus {
	border-color: #9a8169 !important;
}


/* Merken */

.guest-login-remember {
	display: flex;
	align-items: center;

	gap: 5px;

	color: #817976;

	font-size: 7px;
	letter-spacing: .5px;
	text-transform: uppercase;

	cursor: pointer;
}

.guest-login-remember input {
	margin: 0;
}


/* Login */

.guest-login-submit {
	height: 28px;

	padding: 0 11px;

	background: #454142 !important;

	border: 1px solid #5c5554 !important;
	border-radius: 0 !important;

	color: #d8b49b !important;

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

	cursor: pointer;
}

.guest-login-submit:hover {
	background: #504a4b !important;

	border-color: #9a8169 !important;
}


/* Passwort vergessen */

.guest-login-lost {
	color: #756d69 !important;

	font-size: 7px;
	letter-spacing: .5px;
	text-transform: uppercase;

	text-decoration: none !important;
}

.guest-login-lost:hover {
	color: #c98a68 !important;
}