/*
 * Synapsenbrenner, Modul kopfleiste: der dunkle Streifen ueber dem Kopf (21.09.2026, Tor D3).
 * Theme-Umfeld (gemessen): 1rem = 10px, Menue-Umbruch bei 1200 px, :focus{outline:none} im Theme
 * (Fokusring deshalb als box-shadow), Kopf ist weder fix noch sticky.
 * Tokens aus bloecke/basis.css mit Ersatzwert.
 */

.sb-kopfleiste {
	display: none;
}

@media (min-width: 1200px) {
	.sb-kopfleiste {
		display: block;
		/* Zwischenton zwischen Menue-Gruen (petrol-700) und Fast-Schwarz (petrol-900), Daniel 21.09.2026 */
		background: var(--sb-petrol-800, #06302f);
	}
	.sb-kopfleiste-liste {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 2.8rem;
		margin: 0;
		padding: 0.7rem 0;
		list-style: none;
	}
	.sb-kopfleiste-punkt {
		margin: 0;
		padding: 0;
	}
	.sb-kopfleiste a {
		display: inline-flex;
		align-items: center;
		gap: 0.8rem;
		max-width: 26rem;
		padding: 0.3rem 0;
		font-family: var(--sb-schrift-text, 'Source Sans 3', sans-serif);
		font-size: 1.4rem;
		line-height: 1.2;
		color: rgba(255, 255, 255, 0.78);
		text-decoration: none;
		transition: color 0.15s ease;
	}
	.sb-kopfleiste a:hover,
	.sb-kopfleiste a:focus-visible {
		color: var(--sb-weiss, #fff);
		text-decoration: none;
	}
	.sb-kopfleiste a:focus-visible {
		box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00);
		border-radius: 4px;
	}
	.sb-kopfleiste svg {
		display: block;
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		max-width: none;
	}
	.sb-kopfleiste svg circle,
	.sb-kopfleiste svg path {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}
	/* Der Zaehler der Merkliste sitzt hier eine Spur kleiner als im Menue. */
	.sb-kopfleiste .sb-merk-zahl {
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 11px;
	}
	/* Der Text kuerzt sich, wenn nach der Anmeldung ein langer Spitzname einzieht. */
	.sb-kopfleiste .sb-merk-kopf-text,
	.sb-kopfleiste .sb-rp-kopf-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}