/* ==========================================================================
   V1.57.0 — Schnelleinstieg / Account-Navigation
   Eigenständige Mini-Styles (site-weit, unabhängig vom Buchungs-Widget).
   ========================================================================== */

/* V1.58.0 — No-Pixels-Branding: Petrol/Teal + Gold (statt Blau/Lila).
   Greift Logo & Seiten-Hintergrund auf, wirkt wie aus einem Guss. */
:root {
	--np-qa-accent: #15a392;   /* Teal */
	--np-qa-accent2: #0c5f57;  /* tiefes Petrol */
	--np-qa-gold: #e8b14c;     /* Gold-Akzent (Logo) */
	--np-qa-bg: #0c211f;       /* dunkles Petrol */
	--np-qa-bg-soft: #123330;
	--np-qa-fg: #f1f7f5;
	--np-qa-muted: #9cb6b0;
	--np-qa-border: rgba(232, 177, 76, .18); /* zarter Gold-Rand */
	--np-qa-radius: 12px;
}

/* ---------- Header-Button ([np_konto_button]) ---------- */
.np-tr-qa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.np-tr-qa-btn-icon { font-size: 16px; line-height: 1; }
.np-tr-qa-btn--solid {
	color: #fff;
	background: linear-gradient( 135deg, var(--np-qa-accent) 0%, var(--np-qa-accent2) 100% );
	box-shadow: 0 4px 14px rgba( 12, 95, 87, .38 );
}
.np-tr-qa-btn--solid:hover { transform: translateY( -1px ); box-shadow: 0 7px 20px rgba( 12, 95, 87, .5 ); color: #fff; }
.np-tr-qa-btn--ghost {
	color: var(--np-qa-gold);
	background: transparent;
	border: 1.5px solid currentColor;
}
.np-tr-qa-btn--ghost:hover { opacity: .82; }

/* ---------- Geteilte Link-Liste (Block + Panel) ---------- */
.np-tr-qa-links { display: flex; flex-direction: column; gap: 2px; }
.np-tr-qa-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--np-qa-fg);
	font-size: 15px;
	font-weight: 500;
	transition: background .12s ease, transform .08s ease;
}
.np-tr-qa-link:hover { background: var(--np-qa-bg-soft); color: var(--np-qa-fg); }
.np-tr-qa-link:active { transform: scale( .985 ); }
.np-tr-qa-link-icon { font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto; }
.np-tr-qa-link-label { flex: 1 1 auto; }
/* Account/Login/Register/Logout farblich hervorheben (Gold-Akzent) */
.np-tr-qa-link--account .np-tr-qa-link-label,
.np-tr-qa-link--register .np-tr-qa-link-label,
.np-tr-qa-link--appinstall .np-tr-qa-link-label { color: var(--np-qa-gold); }
.np-tr-qa-link--logout .np-tr-qa-link-label { color: #ff9a9a; }
/* V1.59.0 — Discord-Eintrag + Live-Status-Punkt (grün = verbunden). */
.np-tr-qa-link--discord .np-tr-qa-link-label { color: #c7d2fe; } /* dezentes Blurple-Hellblau */
.np-tr-qa-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #57d39b;
	box-shadow: 0 0 0 3px rgba( 87, 211, 155, .22 );
	flex: 0 0 auto;
}
.np-tr-qa-link--discord.is-connected .np-tr-qa-link-label { color: #57d39b; }
/* App-installieren-Eintrag: als <button> wie ein Link darstellen */
button.np-tr-qa-link {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
button.np-tr-qa-link[hidden] { display: none; }

/* ---------- Block ([np_schnelleinstieg]) ---------- */
.np-tr-qa-block {
	background: var(--np-qa-bg);
	border: 1px solid var(--np-qa-border);
	border-radius: var(--np-qa-radius);
	padding: 10px;
	max-width: 360px;
}
.np-tr-qa-block-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--np-qa-muted);
	padding: 6px 14px 8px;
}

/* ---------- Site-weite Lasche ---------- */
.np-tr-qa-sidetab { position: fixed; top: 50%; right: 0; transform: translateY( -50% ); z-index: 99990; }

.np-tr-qa-handle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 7px;
	border: 0;
	border-left: 2px solid var(--np-qa-gold);
	border-radius: 12px 0 0 12px;
	background: linear-gradient( 135deg, var(--np-qa-accent) 0%, var(--np-qa-accent2) 100% );
	color: #fff;
	cursor: pointer;
	box-shadow: -3px 0 14px rgba( 0, 0, 0, .28 );
	transition: padding-right .15s ease, filter .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.np-tr-qa-handle-icon { color: var(--np-qa-gold); }
.np-tr-qa-handle:hover { filter: brightness( 1.08 ); padding-right: 11px; }
.np-tr-qa-handle-icon { font-size: 20px; line-height: 1; }
.np-tr-qa-handle-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate( 180deg );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.np-tr-qa-panel {
	position: absolute;
	top: 50%;
	right: calc( 100% + 8px );
	transform: translateY( -50% ) translateX( 12px );
	width: 250px;
	max-height: 78vh;
	overflow-y: auto;
	background: var(--np-qa-bg);
	border: 1px solid var(--np-qa-border);
	border-radius: var(--np-qa-radius);
	padding: 10px;
	box-shadow: 0 18px 50px rgba( 0, 0, 0, .45 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.np-tr-qa-panel-head {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--np-qa-muted);
	padding: 4px 14px 8px;
}
.np-tr-qa-sidetab.is-open .np-tr-qa-panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateY( -50% ) translateX( 0 );
}
.np-tr-qa-sidetab.is-open .np-tr-qa-handle { filter: brightness( 1.08 ); }

/* Mobile: Lasche etwas höher (über evtl. Bottom-Nav), Panel volle Breite-nah */
@media ( max-width: 600px ) {
	.np-tr-qa-sidetab { top: auto; bottom: 96px; transform: none; }
	.np-tr-qa-panel {
		top: auto;
		bottom: 0;
		right: calc( 100% + 8px );
		transform: translateX( 12px );
		width: min( 78vw, 280px );
	}
	.np-tr-qa-sidetab.is-open .np-tr-qa-panel { transform: translateX( 0 ); }
}

/* Hell-Theme-Anpassung, falls die Seite hell ist */
@media ( prefers-color-scheme: light ) {
	.np-tr-qa-block, .np-tr-qa-panel {
		--np-qa-bg: #ffffff;
		--np-qa-bg-soft: #eef4f2;
		--np-qa-fg: #11302c;
		--np-qa-muted: #51695f;
		--np-qa-border: rgba(12, 95, 87, .16);
	}
	.np-tr-qa-link--account .np-tr-qa-link-label,
	.np-tr-qa-link--register .np-tr-qa-link-label,
	.np-tr-qa-link--appinstall .np-tr-qa-link-label { color: #b07d18; } /* dunkleres Gold für Kontrast */
	.np-tr-qa-link--logout .np-tr-qa-link-label { color: #c0392b; }
}