/* =========================================================
   SCHRIFTEN
   ========================================================= */

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


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

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);
}

.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;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.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,
			rgba(8, 11, 12, 0.98),
			rgba(5, 7, 8, 0.98)
		);

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


/* =========================================================
   GÄSTELOGO
   ========================================================= */

.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: rgba(255, 255, 255, 0.014);
	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 rgba(102, 143, 153, 0.28);
}

.fire-sidebar__guestlogo:hover {
	color: #ffffff;
}


/* =========================================================
   AVATAR UND PROFIL-FLYOUT
   ========================================================= */

.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: #111516;
	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,
			rgba(7, 10, 11, 0.04),
			rgba(6, 9, 10, 0.73)
		);

	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: rgba(102, 143, 153, 0.22);
}

.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,
			rgba(13, 18, 19, 0.985),
			rgba(6, 9, 10, 0.985)
		);

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

	box-shadow:
		18px 20px 50px rgba(0, 0, 0, 0.47);

	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: #e3e9e7;
	font-family: var(--fire-display);
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
}

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

/* Profil-Links */

.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: #ffffff;
	background: rgba(102, 143, 153, 0.07);
}

.fire-user__links i {
	width: 15px;

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


/* =========================================================
   SIDEBAR-NAVIGATION
   ========================================================= */

.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: #ffffff;
	background-color: rgba(165, 195, 200, 0.045);
	outline: none;
}

.fire-nav-item:hover > i,
.fire-nav-item:focus-visible > i {
	color: #ffffff !important;

	text-shadow:
		0 0 12px rgba(165, 195, 200, 0.35);
}

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

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


/* =========================================================
   SIDEBAR-TOOLTIPS
   ========================================================= */

.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: #d0d9d8;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;

	background: rgba(7, 11, 12, 0.985);
	border: 1px solid var(--fire-border);
	border-left: 2px solid var(--fire-accent);

	box-shadow:
		10px 13px 30px rgba(0, 0, 0, 0.42);

	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;
}


/* =========================================================
   BADGES
   ========================================================= */

.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: #071012;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;

	background: var(--fire-accent-light);
	border: 2px solid #0b0f10;
	border-radius: 999px;

	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.4);
}

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

.fire-nav-badge--messages {
	color: #071012;
	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 rgba(0, 0, 0, 0.4),
			0 0 0 0 rgba(165, 195, 200, 0);
	}

	80% {
		box-shadow:
			0 2px 8px rgba(0, 0, 0, 0.4),
			0 0 0 6px rgba(165, 195, 200, 0.13);
	}
}


/* =========================================================
   UNTERER SIDEBAR-BEREICH
   ========================================================= */

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

	overflow: visible;

	background: rgba(4, 7, 8, 0.74);
	border-top: 1px solid var(--fire-border);
}

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


/* =========================================================
   OBERE ZIERLEISTE
   ========================================================= */

.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: rgba(6, 9, 10, 0.95);
}

.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: #bac5c4;
	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: #ffffff;
}

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

.fire-topbar__links a:hover i {
	color: #ffffff;
}


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

.fire-header {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(55px, 7vw, 130px);

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

	padding:
		70px
		clamp(55px, 9vw, 145px)
		92px;

	overflow: hidden;
}

.fire-header::before {
	position: absolute;
	z-index: 0;
	inset: 0;

	content: "";
	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(4, 7, 8, 0.78) 0%,
			rgba(5, 9, 10, 0.42) 43%,
			rgba(5, 10, 12, 0.46) 72%,
			rgba(4, 8, 10, 0.65) 100%
		),
		linear-gradient(
			to bottom,
			rgba(5, 8, 9, 0.07),
			rgba(4, 7, 8, 0.73)
		);
}

.fire-header::after {
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	left: 0;

	height: 190px;

	content: "";
	pointer-events: none;

	background:
		linear-gradient(
			to top,
			rgba(4, 6, 7, 0.98),
			transparent
		);
}

/* =========================================================
   HERO-TITEL
   ========================================================= */

.fire-header__title {
	position: relative;
	z-index: 2;

	flex: 1 1 auto;

	width: auto;
	max-width: 650px;
	margin: 0;
}

.fire-header__title > a {
	display: block;

	color: inherit;
	text-decoration: none;
}

.fire-header__eyebrow {
	display: block;
	margin: 0 0 13px 9px;

	color: var(--fire-accent-light);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.42em;
	line-height: 1.8;
	text-transform: uppercase;

	text-shadow:
		0 0 16px rgba(102, 143, 153, 0.27);
}

.fire-header__small {
position: relative;
  display: block;
  margin: -16px 0 10px 8px;
  color: rgba(226, 232, 230, 0.86);
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-transform: uppercase;
}

.fire-header__main {
	position: relative;
	display: block;
	margin-left: -8px;
	font-family: var(--fire-display);
	font-size: 15em;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.79;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px var(--accent);

	paint-order: stroke fill;

	transition: none;
}

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

	margin: 27px 0 0 10px;

	color: rgba(191, 207, 207, 0.8);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.25em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fire-header__subtitle::before {
	flex: 0 0 48px;

	width: 48px;
	height: 1px;

	content: "";

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


/* Begrüßung für Mitglieder */

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

	margin: 28px 0 0 10px;

	text-transform: uppercase;
}

.fire-header__memberwelcome span {
	color: var(--fire-accent-light);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.35em;
}

.fire-header__memberwelcome strong {
	color: #dce6e5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3em;
}


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

.fire-hero-panel{
    position:relative;
    z-index:3;

    flex:0 0 min(465px,44%);
    width:min(465px,44%);
    min-height:355px;

    background:rgba(8,12,14,.34);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        0 22px 45px rgba(0,0,0,.32);
}

.fire-hero-panel__inner{

    position:relative;

    display:flex;
    flex-direction:column;

    min-height:355px;

    box-sizing:border-box;

    padding:42px 44px;

    background:
        linear-gradient(
            to bottom,
            rgba(8,12,14,.12),
            rgba(8,12,14,.28)
        );
}
/* =========================================================
   CORNER FRAME
   ========================================================= */

.fire-hero-panel::before,
.fire-hero-panel::after,
.fire-hero-panel__inner::before,
.fire-hero-panel__inner::after{

    content:"";

    position:absolute;

    width:48px;
    height:48px;

    pointer-events:none;
}

.fire-hero-panel::before{

    top:0;
    left:0;

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

.fire-hero-panel::after{

    top:0;
    right:0;

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

.fire-hero-panel__inner::before{

    left:0;
    bottom:0;

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

.fire-hero-panel__inner::after{

    right:0;
    bottom:0;

    border-bottom:1px solid var(--fire-accent-light);
    border-right:1px solid var(--fire-accent-light);
}
/* =========================================================
   PANEL-TYPOGRAFIE
   ========================================================= */

.fire-hero-panel__header{

    position:relative;

    margin-bottom:26px;
    padding-bottom:24px;
}

.fire-hero-panel__header::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:90px;
    height:1px;

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

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

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

.fire-hero-panel__header h2 {
	max-width: calc(100% - 25px);
	margin: 0;

	color: #dce7e6;
	font-family: var(--fire-display);
	font-size: 37px;
	font-weight: 400;
	line-height: 1.02;

	text-shadow:
		0 0 22px rgba(102, 143, 153, 0.16);
}

.fire-hero-panel__text {
	color: rgba(207, 214, 212, 0.76);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.85;
}

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

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

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

	border-bottom: 1px solid rgba(165, 195, 200, 0.24);
}

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


/* =========================================================
   GÄSTE-BUTTONS
   ========================================================= */

.fire-hero-panel__actions {
	display: flex;
	gap: 9px;

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

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

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

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

	color: rgba(213, 223, 221, 0.79);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;

	background: rgba(102, 143, 153, 0.04);
	border: 1px solid var(--fire-border);

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

.fire-hero-panel__button:hover {
	color: #ffffff;

	background: rgba(102, 143, 153, 0.15);
	border-color: var(--fire-border-strong);
}

.fire-hero-panel__button--primary {
	color: #f0f5f3;

	background: rgba(102, 143, 153, 0.17);
	border-color: rgba(165, 195, 200, 0.32);
}


/* =========================================================
   SZENENÜBERSICHT
   ========================================================= */

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

/* =========================================================
   SZENENSTATUS – TEXTLICHER AUFBAU
   ========================================================= */

.fire-scene-status{

    position:relative;

    margin-top:34px;
    padding-top:30px;
}

.fire-scene-status::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,.12),
            rgba(255,255,255,.03)
        );
}

.fire-scene-status__main{

    display:grid;

    grid-template-columns:58px 1fr;

    align-items:center;

    column-gap:22px;
}

.fire-scene-status__number{

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

    font-size:58px;

    line-height:.8;

    color:#ece7e5;
}

.fire-scene-status__copy p{

    margin:0;

    color:rgba(220,225,223,.72);

    line-height:1.8;
}

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

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

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

	color: rgba(211, 218, 216, 0.76);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.75;
}

.fire-scene-status__copy strong {
	color: #eef2f0;
	font-weight: 500;
}

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

	margin-top: 22px;
	padding-top: 16px;

	border-top: 1px solid rgba(165, 195, 200, 0.1);
}

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

	color: rgba(165, 195, 200, 0.68);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

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

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

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

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

.fire-scene-status__meta a:hover {
	color: #ffffff;
	gap: 14px;
}

.fire-scene-status__meta a i {
	color: var(--accent-light);
	font-size: 9px;
}

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

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

.fire-hero-panel__text {
	color: rgba(207, 214, 212, 0.78);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.85;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.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);
}


/* =========================================================
   WIEDERVERWENDBARE ZIERSCHRIFT
   ========================================================= */

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


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

@media (max-width: 1100px) {

	.fire-header {
		flex-direction: column;
		justify-content: center;
		gap: 58px;

		padding:
			78px
			clamp(30px, 7vw, 70px)
			88px;
	}

	.fire-header__title,
	.fire-hero-panel {
		flex-basis: auto;

		width: min(650px, 100%);
		max-width: 650px;
	}

	.fire-header__title {
		text-align: center;
	}

	.fire-header__eyebrow,
	.fire-header__small {
		margin-left: 0;
	}

	.fire-header__subtitle {
		justify-content: center;
		margin-left: 0;
	}

	.fire-header__memberwelcome {
		align-items: center;
		margin-left: 0;
	}

	.fire-topbar {
		padding-left: 22px;
	}

}


/* =========================================================
   KLEINERE BILDSCHIRME
   ========================================================= */

@media (max-width: 800px) {

	:root {
		--fire-sidebar-width: 56px;
	}

	.fire-user,
	.fire-user__avatar,
	.fire-sidebar__guestlogo {
		height: 58px;
		flex-basis: 58px;
	}

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

	.fire-nav-item {
		min-height: 45px;
		font-size: 12px;
	}

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

	.fire-topbar {
		min-height: 52px;
		padding-left: 17px;
	}

	.fire-topbar__welcome {
		font-size: 9px;
	}

	.fire-topbar__links a {
		min-width: 45px;
		padding: 0 12px;
	}

	.fire-topbar__links a span {
		display: none;
	}

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

	.fire-header {
		padding:
			68px
			30px
			78px;
	}

}


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

@media (max-width: 600px) {

	.fire-topbar {
		gap: 10px;
		padding-left: 13px;
	}

	.fire-topbar__welcome {
		max-width: calc(100% - 180px);

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fire-header {
		padding:
			62px
			18px
			72px;
	}

	.fire-header__main {
		font-size: clamp(104px, 31vw, 145px);
	}

	.fire-header__small {
		margin-bottom: -15px;

		font-size: 9px;
		letter-spacing: 0.19em;
	}

	.fire-header__subtitle {
		font-size: 6px;
		letter-spacing: 0.17em;
	}

	.fire-hero-panel {
		--fire-panel-cut: 14px;

		width: 100%;
	}

	.fire-hero-panel__inner {
		padding: 35px 27px 31px;
	}

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

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

	.fire-scene-overview {
		grid-template-columns: 1fr;

		padding: 10px 0;
	}

	.fire-scene-overview__item {
		flex-direction: row;
		justify-content: space-between;

		min-height: 48px;
		padding: 9px 5px;

		text-align: left;
	}

	.fire-scene-overview__item
	+ .fire-scene-overview__item::before {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;

		width: auto;
		height: 1px;
	}

	.fire-scene-overview__item strong {
		font-size: 28px;
	}

	.fire-scene-overview__item span {
		text-align: right;
	}

	.fire-user__flyout {
		width: 250px;
	}

}