@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Pirata+One&display=swap);

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--fire-text);
	font-family: var(--fire-body);
}

.index-wrapper {
	position: relative;
	min-height: 100vh;
}

#container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
}

.fire-page {
	position: relative;
	box-sizing: border-box;
	width: calc(100% - var(--fire-sidebar-width));
	margin-left: var(--fire-sidebar-width);
}

#content {
	position: relative;
	box-sizing: border-box;
	padding: 0;
}

.fire-after-hero {
	background: var(--fire-bg-dark);
	margin-top: 0;
}

.fire-visually-hidden {
	position: absolute;

	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;

	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;

	border: 0;
}

.fire-sidebar {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;

	box-sizing: border-box;
	width: var(--fire-sidebar-width);
	height: 100vh;

	overflow: visible;

	background:
		linear-gradient(
			to bottom,
			var(--layout-sidebar-bg-top),
			var(--layout-sidebar-bg-bottom)
		);

	border-right: 1px solid var(--fire-border);
	box-shadow: 12px 0 35px var(--layout-shadow);
}

.fire-sidebar__guestlogo {
	position: relative;

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

	flex: 0 0 69px;

	box-sizing: border-box;
	width: 100%;
	height: 69px;

	color: var(--fire-accent-light);
	text-decoration: none;

	background: var(--stecki-panel);
	border-bottom: 1px solid var(--fire-border);
}

.fire-sidebar__guestlogo::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	height: 1px;

	content: "";

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

.fire-sidebar__guestlogo span {
	font-family: var(--fire-display);
	font-size: 38px;
	line-height: 1;

	text-shadow:
		0 0 20px var(--stecki-scrollbar);
}

.fire-sidebar__guestlogo:hover {
	color: var(--stecki-hover-text);
}

.fire-user {
	position: relative;

	flex: 0 0 69px;

	width: 100%;
	height: 69px;
}

.fire-user__avatar {
	position: relative;

	display: block;

	box-sizing: border-box;
	width: 100%;
	height: 69px;

	overflow: hidden;

	background-color: var(--layout-avatar-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

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

.fire-user__avatar::before {
	position: absolute;
	inset: 0;

	content: "";

	background:
		linear-gradient(
			to bottom,
			var(--layout-avatar-overlay-top),
			var(--layout-avatar-overlay-bottom)
		);

	transition: background 0.2s ease;
}

.fire-user__avatar::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	height: 2px;

	content: "";

	background:
		linear-gradient(
			to right,
			transparent,
			var(--fire-accent),
			transparent
		);
}

.fire-user__avatar:hover::before {
	background: var(--stecki-hover-bg);
}

.fire-user__flyout {
	position: absolute;
	z-index: 1100;
	top: 0;
	left: calc(100% + 1px);

	box-sizing: border-box;
	width: 285px;
	padding: 23px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	background:
		linear-gradient(
			145deg,
			var(--layout-flyout-bg-top),
			var(--layout-flyout-bg-bottom)
		);

	border: 1px solid var(--fire-border);
	border-left: 2px solid var(--fire-accent);

	box-shadow:
		18px 20px 50px var(--layout-shadow);

	transform: translateX(-8px);

	transition:
		visibility 0.18s ease,
		opacity 0.18s ease,
		transform 0.18s ease;
}

.fire-user:hover .fire-user__flyout,
.fire-user:focus-within .fire-user__flyout {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transform: translateX(0);
}

.fire-user__label {
	display: block;
	margin-bottom: 6px;

	color: var(--fire-accent-light);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fire-user__name {
	display: block;

	color: var(--stecki-hover-text);
	font-family: var(--fire-display);
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
}

.fire-user__name:hover {
	color: var(--fire-accent-light);
}

.fire-user__links {
	display: grid;
	gap: 2px;

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

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

.fire-user__links a {
	display: flex;
	align-items: center;
	gap: 10px;

	box-sizing: border-box;
	min-height: 31px;
	padding: 5px 7px;

	color: var(--fire-text-soft);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.fire-user__links a:hover {
	color: var(--stecki-hover-text);
	background: var(--stecki-fraktion-bg);
}

.fire-user__links i {
	width: 15px;

	color: var(--fire-accent-light);
	text-align: center;
}

.fire-sidebar__navigation {
	display: flex;
	flex: 1;
	flex-direction: column;

	min-height: 0;
	width: 100%;
	padding: 5px 0;

	overflow: visible;
}

.fire-nav-item {
	position: relative;

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

	flex-shrink: 0;

	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0;

	color: var(--fire-accent);
	font-size: 13px;
	text-decoration: none;

	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fire-border-soft);

	cursor: pointer;

	transition:
		color 0.18s ease,
		background-color 0.18s ease;
}

.fire-nav-item::before {
	position: absolute;
	top: 50%;
	right: 0;

	width: 2px;
	height: 0;

	content: "";

	background: var(--fire-accent-light);
	transform: translateY(-50%);

	transition: height 0.18s ease;
}

.fire-nav-item > i {
	position: relative;
	z-index: 1;

	color: var(--fire-accent);

	transition:
		color 0.18s ease,
		transform 0.18s ease,
		text-shadow 0.18s ease;
}

.fire-nav-item:hover,
.fire-nav-item:focus-visible {
	color: var(--stecki-hover-text);
	background-color: var(--stecki-hover-bg);
	outline: none;
}

.fire-nav-item:hover > i,
.fire-nav-item:focus-visible > i {
	color: var(--stecki-hover-text) !important;

	text-shadow:
		0 0 12px var(--stecki-scrollbar);
}

.fire-nav-item:hover > i {
	transform: translateY(-1px);
}

.fire-nav-item:hover::before,
.fire-nav-item:focus-visible::before {
	height: 23px;
}

.fire-nav-tooltip {
	position: absolute;
	z-index: 9999;
	top: 50%;
	left: calc(100% + 12px);

	display: block;

	box-sizing: border-box;
	width: max-content;
	max-width: 210px;
	padding: 8px 11px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	color: var(--stecki-text);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;

	background: var(--layout-tooltip-bg);
	border: 1px solid var(--fire-border);
	border-left: 2px solid var(--fire-accent);

	box-shadow:
		10px 13px 30px var(--layout-shadow);

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

	transition:
		visibility 0s linear 0.15s,
		opacity 0.15s ease,
		transform 0.15s ease;
}

.fire-nav-tooltip::before {
	position: absolute;
	top: 50%;
	right: 100%;

	width: 0;
	height: 0;

	content: "";

	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 6px solid var(--fire-accent);

	transform: translateY(-50%);
}

.fire-nav-item:hover > .fire-nav-tooltip,
.fire-nav-item:focus-visible > .fire-nav-tooltip {
	visibility: visible;
	opacity: 1;

	transform: translate(0, -50%);

	transition-delay: 0s;
}

.fire-nav-badge {
	position: absolute;
	z-index: 4;
	top: 6px;
	right: 7px;

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

	box-sizing: border-box;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;

	color: var(--layout-badge-text);
	font-size: 8px;
	font-weight: 700;
	line-height: 1;

	background: var(--fire-accent-light);
	border: 2px solid var(--layout-badge-border);
	border-radius: 999px;

	box-shadow:
		0 2px 8px var(--layout-shadow);
}

.fire-nav-badge[data-count="0"],
.fire-nav-badge[data-count=""],
.fire-nav-badge[data-count=" "] {
	display: none;
}

.fire-nav-badge--messages {
	color: var(--layout-badge-text);
	background: var(--fire-accent-bright);
}

.fire-nav-item--messages
.fire-nav-badge--messages:not([data-count="0"]):not([data-count=""]) {
	animation: fire-message-pulse 2.5s infinite;
}

@keyframes fire-message-pulse {
	0%,
	68%,
	100% {
		box-shadow:
			0 2px 8px var(--layout-shadow),
			0 0 0 0 transparent;
	}

	80% {
		box-shadow:
			0 2px 8px var(--layout-shadow),
			0 0 0 6px var(--stecki-line);
	}
}

.fire-sidebar__bottom {
	flex-shrink: 0;
	width: 100%;

	overflow: visible;

	background: var(--layout-sidebar-bg-bottom);
	border-top: 1px solid var(--fire-border);
}

.fire-sidebar__bottom .fire-nav-item {
	min-height: 46px;
}

.fire-topbar {
	position: relative;
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-sizing: border-box;
	min-height: 58px;
	padding: 0 24px 0 32px;
	background: var(--layout-topbar-bg);
}

.fire-topbar__welcome {
	min-width: 0;

	color: var(--fire-text-soft);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fire-topbar__welcome a {
	color: var(--stecki-muted);
	text-decoration: none;
}

.fire-topbar__welcome a:hover {
	color: var(--fire-accent-light);
}

.fire-topbar__links {
	display: flex;
	align-items: stretch;

	align-self: stretch;
	flex-shrink: 0;
}

.fire-topbar__links a {
	position: relative;

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

	box-sizing: border-box;
	min-width: 94px;
	padding: 0 13px;

	color: var(--fire-text-soft);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;

}

.fire-topbar__links a:last-child {
	min-width: 52px;
}

.fire-topbar__links a:hover {
	color: var(--stecki-hover-text);
}

.fire-topbar__links i {
	color: var(--fire-accent);
	font-size: 9px;
}

.fire-topbar__links a:hover i {
	color: var(--stecki-hover-text);
}



.fire-header {
	position: relative;
	isolation: isolate;

	display: block;

	box-sizing: border-box;
	min-height: 720px;

	overflow: hidden;

	background-image: url(../../../images/misty.jpg);
	background-position: center 42%;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Ruhige filmische Abdunklung/Entsättigung statt weißem Schleier */
.fire-header::before {
	position: absolute;
	z-index: 0;
	inset: 0;

	content: "";
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(20, 28, 27, 0.02) 0%,
			rgba(20, 28, 27, 0.05) 58%,
			rgba(20, 28, 27, 0.10) 100%
		);
}

/* Nur der untere Rand läuft weich ins Forum aus */
.fire-header::after {
	display: none;
}

/* Titel nun groß und zentral wie bei der Referenz */
.fire-header__title {
	position: absolute;
	z-index: 3;

	top: 102px;
	left: 50%;

	width: min(980px, calc(100% - 120px));
	margin: 0;
	padding: 0;

	transform: translateX(-50%);

	text-align: center;
}

.fire-header__title::before {
	display: none;
}

.fire-header__title > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.fire-header__eyebrow {
	display: block;

	margin: 0 0 10px;

	color: rgba(242, 246, 244, 0.92);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.48em;
	line-height: 1.5;
	text-transform: uppercase;

	text-shadow: 0 1px 8px rgba(18, 26, 25, 0.44);
}

.fire-header__small {
	position: relative;
	display: block;

	margin: 0 0 -12px;

	color: rgba(245, 247, 246, 0.95);
	font-size: clamp(17px, 1.55vw, 22px);
	font-weight: 400;
	letter-spacing: 0.34em;
	line-height: 1.35;
	text-transform: uppercase;

	text-shadow: 0 2px 10px rgba(18, 26, 25, 0.40);
}

.fire-header__main {
	position: relative;
	display: block;

	margin: 0 auto;

	color: #f3f4f2;
	font-family: var(--fire-display);
	font-size: clamp(170px, 16vw, 270px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 0.74;

	-webkit-text-fill-color: #f3f4f2;
	-webkit-text-stroke: 0;

	text-shadow:
		0 2px 14px rgba(18, 26, 25, 0.30),
		0 0 26px rgba(255, 255, 255, 0.18);

	paint-order: normal;
}

.fire-header__subtitle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;

	margin: 19px auto 0;

	color: var(--stecki-heading);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.26em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fire-header__subtitle::before,
.fire-header__subtitle::after {
	width: 44px;
	height: 1px;

	content: "";

	background:
		linear-gradient(
			to right,
			transparent,
			var(--accent)
		);
}

.fire-header__subtitle::after {
	background:
		linear-gradient(
			to right,
			var(--accent),
			transparent
		);
}

.fire-header__memberwelcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;

	margin: 18px 0 0;

	text-transform: uppercase;
}

.fire-header__memberwelcome span {
	color: rgba(236, 242, 239, 0.90);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-shadow: 0 1px 8px rgba(18, 26, 25, 0.42);
}

.fire-header__memberwelcome strong {
	color: #f6f7f5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-shadow: 0 1px 8px rgba(18, 26, 25, 0.46);
}

/* Breites, flaches Panel im unteren Bildbereich – inspiriert vom Referenzaufbau */
.fire-hero-panel {
	position: absolute;
	z-index: 4;

	right: 50%;
	bottom: 0;

	width: 100%;
	min-height: 0;

	overflow: hidden;

	transform: translateX(50%);

	background: rgba(231, 235, 233)
		;

	border: 0;
	border-top: 1px solid rgba(95, 129, 134, 0.26);

	backdrop-filter: blur(10px) saturate(0.90);
	-webkit-backdrop-filter: blur(10px) saturate(0.90);

	box-shadow:
		0 -8px 28px rgba(52, 58, 58, 0.08);
}

.fire-hero-panel::before {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;

	width: 170px;
	height: 1px;

	content: "";
	pointer-events: none;

	background:
		linear-gradient(
			to right,
			var(--fire-accent),
			transparent
		);
}

.fire-hero-panel::after {
	display: none;
}

.fire-hero-panel__inner::before {
	display: none;
}

.fire-hero-panel__inner::after {
	display: none;
}

.fire-hero-panel__inner {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	align-items: center;
	column-gap: 42px;

	box-sizing: border-box;
	min-height: 0;
	padding: 28px 36px 32px;

	background: transparent;
}

/* Gastansicht bleibt auch sauber, obwohl dort andere Inhalte stehen */
.fire-hero-panel__header {
	position: relative;

	grid-column: 1 / -1;

	margin: 0 0 18px;
	padding: 0 0 14px;

	text-align: center;
}

.fire-hero-panel__header::after {
	position: absolute;
	bottom: 0;
	left: 50%;

	width: 76px;
	height: 1px;

	content: "";

	transform: translateX(-50%);

	background:
		linear-gradient(
			to right,
			transparent,
			var(--accent),
			transparent
		);
}

.fire-hero-panel__eyebrow {
	display: block;
	margin-bottom: 6px;

	color: var(--fire-accent);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fire-hero-panel__header h2 {
	max-width: 100%;
	margin: 0;

	color: var(--stecki-hover-text);
	font-family: var(--fire-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.08;
	text-align: center;

	text-shadow: none;
}

.fire-hero-panel__text {
	color: var(--stecki-strong-text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
}

.fire-hero-panel__text p {
	margin: 0 0 13px;
}

.fire-hero-panel__text p:last-child {
	margin-bottom: 0;
}

.fire-hero-panel__text a {
	color: var(--fire-accent-dark);
	text-decoration: none;

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

.fire-hero-panel__text a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.fire-member-intro {
	grid-column: 1;
	margin: 0;
	padding-right: 24px;

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

.fire-member-intro p {
	margin: 0;
}

.fire-scene-status {
	grid-column: 2;

	position: relative;

	margin: 0;
	padding: 0;

	border: 0;
}

.fire-scene-status::before {
	display: none;
}

.fire-scene-status__main {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;
	column-gap: 17px;
}

.fire-scene-status__number {
	font-family: var(--fire-display);
	font-size: 58px;
	line-height: 0.8;

	color: var(--accent);
}

.fire-scene-status__eyebrow {
	display: block;
	margin-bottom: 5px;

	color: var(--fire-accent);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

.fire-scene-status__copy p {
	margin: 0;

	color: var(--stecki-strong-text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
}

.fire-scene-status__copy strong {
	color: var(--stecki-hover-text);
	font-weight: 600;
}

.fire-scene-status__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

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

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

.fire-scene-status__meta > span {
	display: flex;
	align-items: center;
	gap: 7px;

	color: var(--stecki-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.fire-scene-status__meta > span i {
	color: var(--fire-accent);
}

.fire-scene-status__meta a {
	display: flex;
	align-items: center;
	gap: 8px;

	color: var(--fire-accent-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;

	transition:
		color 0.18s ease,
		gap 0.18s ease;
}

.fire-scene-status__meta a:hover {
	color: var(--accent);
	gap: 11px;
}

.fire-scene-status__meta a i {
	color: currentColor;
	font-size: 8px;
}

.fire-hero-panel__actions {
	grid-column: 1 / -1;

	display: flex;
	justify-content: center;
	gap: 8px;

	margin-top: 18px;
	padding-top: 14px;

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

.fire-hero-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	min-height: 34px;
	padding: 0 14px;

	color: var(--stecki-text);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-decoration: none;
	text-transform: uppercase;

	background: rgba(255, 255, 255, 0.16);
	border: 1px solid var(--stecki-line-strong);

	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

.fire-hero-panel__button:hover {
	color: var(--stecki-hover-text);
	background: rgba(255, 255, 255, 0.30);
	border-color: var(--accent);
}

.fire-hero-panel__button--primary {
	color: var(--stecki-hover-text);
	background: var(--stecki-fraktion-bg);
	border-color: var(--accent);
}

.fire-breadcrumbs {
	box-sizing: border-box;
	padding: 12px 28px;
	color: var(--fire-text-soft);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.5;
	text-transform: uppercase;
	background: var(--fire-bg-dark);
}

.fire-breadcrumbs a {
	color: var(--fire-text-soft);
	text-decoration: none;
}

.fire-breadcrumbs a:hover {
	color: var(--fire-accent-light);
}

.fire-title,
.forum-title,
.category-title,
thead .thead-title {
	font-family: var(--fire-display);
	font-weight: 400;
}

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

@media (max-width: 1100px) {

	.fire-header {
		min-height: 800px;
		background-position: 56% center;
	}

	.fire-header__title {
		top: 76px;
		width: min(760px, calc(100% - 70px));
	}

	.fire-header__main {
		font-size: clamp(150px, 22vw, 225px);
	}

	.fire-hero-panel {
		width: 100%;
		bottom: 0;
	}

	.fire-hero-panel__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
		column-gap: 30px;
		padding: 26px 30px 30px;
	}
}


/* =========================================================
   MOBILE NAVIGATION + HEADER
   Die Desktop-Seitenleiste wird zu einer horizontalen,
   sticky Navigationsleiste.
   ========================================================= */

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

	:root {
		--fire-mobile-nav-height: 64px;
	}

	/* Seitenleiste wird zur oberen Navigation */
	.fire-sidebar {
		position: sticky;
		z-index: 5000;
		top: 0;
		left: auto;

		display: flex;
		flex-direction: row;
		align-items: stretch;

		width: 100%;
		height: var(--fire-mobile-nav-height);

		overflow-x: auto;
		overflow-y: visible;

		background: var(--layout-sidebar-bg-top);
		border-right: 0;
		border-bottom: 1px solid var(--fire-border);

		box-shadow:
			0 8px 24px var(--layout-shadow);

		scrollbar-width: none;
	}

	.fire-sidebar::-webkit-scrollbar {
		display: none;
	}

	/* Logo / Avatar links */
	.fire-sidebar__guestlogo,
	.fire-user,
	.fire-user__avatar {
		flex: 0 0 var(--fire-mobile-nav-height);

		width: var(--fire-mobile-nav-height);
		height: var(--fire-mobile-nav-height);
	}

	.fire-sidebar__guestlogo {
		border-right: 1px solid var(--fire-border);
		border-bottom: 0;
	}

	.fire-sidebar__guestlogo span {
		font-size: 30px;
	}

	.fire-user {
		position: relative;
	}

	.fire-user__avatar {
		border-right: 1px solid var(--fire-border);
		border-bottom: 0;
	}

	/* Profil-Flyout unter der mobilen Leiste */
	.fire-user__flyout {
		position: fixed;
		top: var(--fire-mobile-nav-height);
		left: 8px;

		width: min(310px, calc(100vw - 16px));

		transform: translateY(-8px);
	}

	.fire-user:hover .fire-user__flyout,
	.fire-user:focus-within .fire-user__flyout {
		transform: translateY(0);
	}

	/* Hauptnavigation horizontal */
	.fire-sidebar__navigation {
		display: flex;
		flex: 1 0 auto;
		flex-direction: row;
		align-items: stretch;

		width: auto;
		min-width: max-content;
		height: var(--fire-mobile-nav-height);
		padding: 0;

		overflow: visible;
	}

	.fire-nav-item {
		flex: 0 0 54px;

		width: 54px;
		min-height: var(--fire-mobile-nav-height);

		border-bottom: 0;
		border-right: 1px solid var(--fire-border-soft);
	}

	.fire-nav-item::before {
		top: auto;
		right: 50%;
		bottom: 0;

		width: 0;
		height: 2px;

		transform: translateX(50%);

		transition: width 0.18s ease;
	}

	.fire-nav-item:hover::before,
	.fire-nav-item:focus-visible::before {
		width: 24px;
		height: 2px;
	}

	.fire-nav-item > i {
		font-size: 15px;
	}

	.fire-nav-badge {
		top: 7px;
		right: 7px;
	}

	/* Tooltips mobil nicht zeigen */
	.fire-nav-tooltip {
		display: none;
	}

	/* Accountswitcher ebenfalls in die Leiste integrieren */
	#accountswitcher_header {
		position: relative;

		display: flex;
		flex: 0 0 54px;
		align-items: stretch;
		justify-content: center;

		width: 54px;
		height: var(--fire-mobile-nav-height);

		border-right: 1px solid var(--fire-border-soft);
	}

	#accountswitcher_header > a {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;

		color: var(--fire-accent);
		cursor: pointer;
	}

	#accountswitcher_header_popup {
		position: fixed !important;
		z-index: 6000;

		top: var(--fire-mobile-nav-height) !important;
		left: 8px !important;

		width: min(310px, calc(100vw - 16px));

		background: var(--layout-tooltip-bg);
		border: 1px solid var(--fire-border);

		box-shadow:
			0 12px 30px var(--layout-shadow);
	}

	/* Unterer Sidebarbereich wird einfach Teil derselben Leiste */
	.fire-sidebar__bottom {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;

		width: auto;
		height: var(--fire-mobile-nav-height);

		background: transparent;
		border-top: 0;
		border-left: 1px solid var(--fire-border);
	}

	.fire-sidebar__bottom .fire-nav-item {
		min-height: var(--fire-mobile-nav-height);
	}

	/* Seiteninhalt nutzt mobil die komplette Breite */
	.fire-page {
		width: 100%;
		margin-left: 0;
	}

	/* Desktop-Topbar ist mobil redundant */
	.fire-topbar {
		display: none;
	}

	/* Hero */
	.fire-header {
		min-height: 760px;

		padding: 0;

		background-position: 58% center;
	}

	.fire-header__title {
		top: 52px;

		width: calc(100% - 34px);
	}

	.fire-header__eyebrow {
		font-size: 11px;
		letter-spacing: 0.34em;
	}

	.fire-header__small {
		font-size: clamp(14px, 4.2vw, 18px);
		letter-spacing: 0.18em;
	}

	.fire-header__main {
		font-size: clamp(125px, 38vw, 205px);
	}

	.fire-header__memberwelcome {
		margin-top: 14px;
	}

	.fire-header__memberwelcome span {
		font-size: 10px;
	}

	.fire-header__memberwelcome strong {
		font-size: 13px;
	}

	.fire-header__subtitle {
		font-size: 9px;
		letter-spacing: 0.16em;
	}

	/* Infobox nimmt mobil wie gewünscht die volle Breite ein */
	.fire-hero-panel {
		right: 0;
		bottom: 0;

		width: 100%;

		transform: none;

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

	.fire-hero-panel__inner {
		display: grid;
		grid-template-columns: 1fr;

		row-gap: 20px;
		column-gap: 0;

		padding: 28px 24px 30px;
	}

	.fire-member-intro {
		grid-column: 1;

		padding: 0 0 20px;

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

	.fire-hero-panel__text {
		font-size: 14px;
		line-height: 1.72;
	}

	.fire-hero-panel__header {
		grid-column: 1;
		margin-bottom: 10px;
	}

	.fire-hero-panel__header h2 {
		font-size: 34px;
	}

	.fire-hero-panel__eyebrow {
		font-size: 10px;
	}

	.fire-scene-status {
		grid-column: 1;
	}

	.fire-scene-status__main {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 18px;
	}

	.fire-scene-status__number {
		font-size: 64px;
	}

	.fire-scene-status__eyebrow {
		font-size: 10px;
	}

	.fire-scene-status__copy p {
		font-size: 13px;
		line-height: 1.65;
	}

	.fire-scene-status__meta {
		gap: 12px;

		margin-top: 18px;
		padding-top: 14px;
	}

	.fire-scene-status__meta > span,
	.fire-scene-status__meta a {
		font-size: 9px;
	}

	.fire-hero-panel__actions {
		grid-column: 1;
	}

	.fire-hero-panel__button {
		min-height: 42px;

		font-size: 10px;
	}
}


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

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

	:root {
		--fire-mobile-nav-height: 60px;
	}

	.fire-sidebar__guestlogo,
	.fire-user,
	.fire-user__avatar {
		flex-basis: var(--fire-mobile-nav-height);

		width: var(--fire-mobile-nav-height);
		height: var(--fire-mobile-nav-height);
	}

	.fire-nav-item,
	#accountswitcher_header {
		flex-basis: 50px;
		width: 50px;
	}

	.fire-header {
		min-height: 800px;
		background-position: 61% center;
	}

	.fire-header__title {
		top: 44px;
	}

	.fire-header__eyebrow {
		font-size: 10px;
	}

	.fire-header__small {
		font-size: 13px;
		letter-spacing: 0.14em;
	}

	.fire-header__main {
		font-size: clamp(116px, 41vw, 172px);
	}

	.fire-header__memberwelcome span {
		font-size: 9px;
	}

	.fire-header__memberwelcome strong {
		font-size: 12px;
	}

	.fire-hero-panel__inner {
		padding:
			26px
			18px
			28px;
	}

	.fire-hero-panel__text {
		font-size: 15px;
	}

	.fire-scene-status__main {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.fire-scene-status__number {
		font-size: 56px;
	}

	.fire-scene-status__copy p {
		font-size: 14px;
	}

	.fire-scene-status__meta {
		align-items: flex-start;
		flex-direction: column;
	}

	.fire-scene-status__meta > span,
	.fire-scene-status__meta a {
		font-size: 10px;
	}

	.fire-hero-panel__actions {
		flex-direction: column;
	}

	.fire-hero-panel__button {
		width: 100%;
	}
}

/* =========================================================
   MOBILE NAV FIX
   überschreibt mobile display:none-Regeln aus anderen CSS-Dateien
   ========================================================= */

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

	.fire-sidebar {
		display: flex !important;
		position: sticky !important;
		top: 0 !important;
		left: auto !important;
		right: auto !important;
		z-index: 99999 !important;

		flex-direction: row !important;
		align-items: stretch !important;

		width: 100% !important;
		max-width: none !important;
		height: var(--fire-mobile-nav-height) !important;
		min-height: var(--fire-mobile-nav-height) !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		visibility: visible !important;
		opacity: 1 !important;

		background: var(--layout-sidebar-bg-top) !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--fire-border) !important;

		box-shadow:
			0 8px 24px var(--layout-shadow) !important;
	}

	.fire-sidebar__navigation {
		display: flex !important;
		flex-direction: row !important;
		flex: 1 0 auto !important;

		width: auto !important;
		min-width: max-content !important;
		height: var(--fire-mobile-nav-height) !important;

		padding: 0 !important;

		overflow: visible !important;

		visibility: visible !important;
		opacity: 1 !important;
	}

	.fire-sidebar__guestlogo,
	.fire-user,
	.fire-user__avatar,
	.fire-sidebar__bottom,
	.fire-nav-item,
	#accountswitcher_header {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.fire-sidebar__guestlogo {
		display: flex !important;
	}

	.fire-user {
		display: block !important;
	}

	.fire-user__avatar {
		display: block !important;
	}

	.fire-sidebar__bottom {
		display: flex !important;
	}

	.fire-nav-item {
		display: flex !important;
	}

	#accountswitcher_header {
		display: flex !important;
	}

	.fire-page {
		width: 100% !important;
		margin-left: 0 !important;
	}
}

	.fire-header {
		min-height: 690px !important;
		background-position: 58% center !important;
	}

	.fire-header__title {
		width: calc(100% - 32px) !important;
	}

	.fire-header__eyebrow {
		font-size: 15px !important;
		letter-spacing: 0.30em !important;
	}

	.fire-header__small {
		font-size: 20px !important;
		letter-spacing: 0.15em !important;
	}

	.fire-header__main {
		font-size: clamp(137px, 38vw, 222px) !important;
	}

	.fire-header__memberwelcome span {
		font-size: 12px !important;
	}

	.fire-header__memberwelcome strong {
		font-size: 15px !important;
	}