/* ================================================================
   TOP-BAR
   Schmale Leiste mit Schnelllinks ganz oben. Scrollt normal mit
   (bewusst NICHT sticky – auf Tablets zu viel verdeckte Fläche).
   ================================================================ */

.bgrein-topbar {
	background: var(--color-topbar-bg);
	border-bottom: 1px solid var(--color-border);
	position: relative;
	width: 100%;
}

.bgrein-topbar-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-xs) var(--spacing-xl);
	/*max-width: calc(var(--content-max-width) + var(--spacing-xl) * 2);*/
	max-width: none;
	margin: 0 auto;
	min-height: var(--topbar-height);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

/* Einzelner Link */
.bgrein-topbar-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-base);
	white-space: nowrap;
}

.bgrein-topbar-link:hover,
.bgrein-topbar-link:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

.bgrein-topbar-link svg {
	flex-shrink: 0;
}

/* WP-Menü-Variante (wp_nav_menu gibt <a>-Elemente innerhalb <li> aus) */
.bgrein-topbar-menu {
	display: flex;
	gap: var(--spacing-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bgrein-topbar-menu li {
	margin: 0;
}

.bgrein-topbar-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-text-muted);
	text-decoration: none;
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	transition: color var(--transition-base);
}

.bgrein-topbar-menu a:hover {
	color: var(--color-primary);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.bgrein-topbar-inner {
		gap: var(--spacing-sm);
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	/* Auf Mobile nur Icons zeigen, Labels ausblenden */
	.bgrein-topbar-link span {
		display: none;
	}
}