/* ================================================================
   STRICHCODE-NAVIGATION — Entwurf 5 (50/50, gleich breite Balken)

   Layout (CSS-Grid, 1fr 1fr):
     .bgrein-header
       .bgrein-header-inner          ← grid 1fr 1fr, align-items: end
         .bgrein-logo                ← linke Zelle, Schulname einzeilig
         .bgrein-strichcode-nav      ← rechte Zelle
           .bgrein-nav-inner
             .bgrein-nav-labels      ← grid repeat(18, 1fr), Gruppen-Span
             .bgrein-bars            ← grid repeat(18, 1fr), Balken
   ================================================================ */

/* ── Header-Element (unter Top-Bar, scrollt normal mit) ────────── */

.bgrein-header {
	background: var(--color-surface);
	box-shadow: var(--shadow-nav);
	width: 100%;
	/* Bewusst NICHT sticky. relative + z-index nur, damit die
	   Tooltip-Labels der Balken über dem Hero liegen. */
	position: relative;
	z-index: 1000;
	/* Kein padding-bottom: der Hero sitzt bündig unter dem Header.
	   Die Tooltip-Labels (.bgrein-bar::after) schweben als Chip
	   über dem Hero statt Platz im Header zu reservieren. */
	padding-bottom: 0;
}

.bgrein-header-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	column-gap: 2rem;
	padding: var(--header-padding);
}

/* ── Logo / Schulname ──────────────────────────────────────────── */

.bgrein-logo {
	align-self: end;
	min-width: 0;
	padding-bottom: 0.5rem;
	/* Schulname füllt die Breite dieser Zelle (cqi = % der Zellbreite);
	   strichcode-nav.js passt die Größe danach pixelgenau an. */
	container-type: inline-size;
}

.bgrein-logo-link {
	display: block;
	text-decoration: none;
}

.bgrein-logo-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.bgrein-site-name {
	display: block;
	font-family: var(--font-display);
	/* v1.9.3: füllt immer die verfügbare Breite (Feedback „zu unauffällig“),
	   normale Strichstärke bleibt gut lesbar. Startwert ≈ Zellbreite,
	   Feinanpassung in assets/js/strichcode-nav.js (bgrFitSiteName). */
	font-size: 9.6cqi;
	/* Zeilenhöhe + Polster unten: Unterlängen (g, y) dürfen nie abgeschnitten
	   werden. Seitlich begrenzt strichcode-nav.js die Breite, deshalb kein
	   overflow: hidden mehr (das schnitt die Unterlängen ab). */
	line-height: 1.3;
	padding-bottom: 0.06em;
	color: var(--color-primary);
	font-weight: 400;
	letter-spacing: 0.03em;
	white-space: nowrap;
	overflow: visible;
}

.bgrein-tagline {
	display: block;
	/* Gleiche Schrift + Farbe wie die Gruppenlabels über dem Strichcode
	   (.bgrein-nav-label) – Größe = aktives Label (22px). */
	font-family: var(--font-handwriting);
	font-size: 1.75rem; /* v1.9.3: vorher 1.375rem */
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	color: var(--color-brand-green);
	margin-top: 0.35rem;
	white-space: nowrap;
}

/* Logo-Bild (the_custom_logo) */
.bgrein-logo .custom-logo-link img {
	max-height: 90px;
	width: auto;
}

/* ── Nav-Wrapper ────────────────────────────────────────────────── */

.bgrein-strichcode-nav {
	align-self: end;
	position: relative;
	min-width: 0;
}

.bgrein-nav-inner {
	position: relative;
	width: 100%;
}

/* ── Kategorie-Labels ───────────────────────────────────────────── */

.bgrein-nav-labels {
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	column-gap: 1.356%;   /* 8px bei 590px Nav-Breite (Entwurf-5-Referenz) —
	                         Wert auch in template-parts/strichcode-nav.php
	                         (Position der Trennpunkte) */
	align-items: end;
	position: relative;   /* Bezug für .bgrein-nav-sep */
}

/* Gruppenlabel = Button → öffnet die Schnellnavigation. Alle Button-
   Stile von GeneratePress (button, :hover, :focus) neutralisieren. */
.bgrein-nav-labels .bgrein-nav-label,
.bgrein-nav-labels .bgrein-nav-label:hover,
.bgrein-nav-labels .bgrein-nav-label:focus {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--color-brand-green);
}

.bgrein-nav-label {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0 0 6px;
	text-align: center;
	cursor: pointer;

	font-family: var(--font-handwriting);
	font-size: 1.0625rem;   /* 17px */
	/* Feste Zeilenhöhe = Höhe des aktiven (22px) Labels. Die Schrift wächst
	   beim Hover, die Zeile aber nicht → Header und Seite springen nicht. */
	line-height: 2.2rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;

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

	transition:
		font-size   var(--transition-nav),
		font-weight var(--transition-nav);
}

/* Text mit verspielter Unterstreichung (wächst beim Hover von der Mitte) */
.bgrein-nav-label__text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 50% 92%;
	background-size: 0% 1.5px;
	transition: background-size var(--transition-nav);
}

.bgrein-nav-label:hover .bgrein-nav-label__text,
.bgrein-nav-label:focus-visible .bgrein-nav-label__text,
.bgrein-nav-label[aria-expanded="true"] .bgrein-nav-label__text {
	background-size: 100% 1.5px;
}

.bgrein-nav-label:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: -2px;
	border-radius: var(--radius-sm);
}

.bgrein-nav-label.is-active {
	font-size: 1.375rem;    /* 22px */
	font-weight: 700;
}

/* Trennpunkt zwischen den Gruppen: sitzt mittig in der Balkenlücke
   (left per PHP) und vertikal mittig zur Label-Zeile (2.2rem hoch,
   6px Abstand nach unten wie die Labels). */
.bgrein-nav-sep {
	position: absolute;
	bottom: 6px;
	height: 2.2rem;
	width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bgrein-nav-sep::before {
	content: '';
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-brand-green);
	opacity: 0.45;
	transform: translateY(1px);   /* optische Mitte der Caveat-Kleinbuchstaben */
}

/* ── Balken-Container ───────────────────────────────────────────── */

.bgrein-bars {
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	column-gap: 1.356%;   /* identisch mit nav-labels, Balken und Labels fluchten */
	height: var(--nav-bar-height);
	align-items: end;
}

/* ── Einzelner Balken ───────────────────────────────────────────── */

.bgrein-bar {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 8px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	color: var(--bar-color, currentColor);
	min-width: 0;

	transition:
		transform   var(--transition-nav),
		box-shadow  var(--transition-nav),
		height      var(--transition-nav);
}

.bgrein-bar:focus-visible {
	outline: 2px solid white;
	outline-offset: -3px;
}

/* Stapelreihenfolge: Jeder angehobene Balken (transform) bildet einen
   eigenen Stacking-Context, sonst gewinnt die DOM-Reihenfolge – Labels
   links vom aktiven Balken lagen dann UNTER dessen Label-Chip.
   Aktiv = Ebene 1, Hover/Fokus = Ebene 3 → Hover-Label immer oben. */
.bgrein-bar.is-active {
	z-index: 1;
}

.bgrein-bar:hover,
.bgrein-bar:focus-visible {
	z-index: 3;
}

.bgrein-bar:hover,
.bgrein-bar.is-active {
	transform: translateY(-4px);
	height: calc(var(--nav-bar-height) + 6px);
	box-shadow: var(--shadow-bar-hover);
}

/* Tooltip-Label unter dem Balken. Der Header reserviert dafür keinen
   Platz mehr (padding-bottom: 0) — das Label liegt als heller Chip
   über dem Seiteninhalt/Hero, damit es dort lesbar bleibt. */
.bgrein-bar::after {
	content: attr(data-label);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-nav);
	white-space: nowrap;
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--bar-color, var(--color-primary));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base);
	z-index: 5;
}

.bgrein-bar:hover::after,
.bgrein-bar.is-active::after {
	opacity: 1;
}

/* ── SVG-Icons ──────────────────────────────────────────────────── */

.bgrein-bar svg {
	display: block;
	flex-shrink: 0;
	overflow: visible;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1280px) {
	.bgrein-header-inner {
		column-gap: 1.25rem;
		padding: 1rem var(--spacing-lg) 1rem;
	}
}

@media (max-width: 768px) {
	.bgrein-header-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.75rem var(--spacing-sm) 0.5rem;
		gap: 0.5rem;
	}

	.bgrein-logo {
		align-self: auto;
		padding-bottom: 0;
	}

	.bgrein-site-name {
		font-size: 9.6cqi;
	}

	.bgrein-strichcode-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		align-self: auto;
	}

	.bgrein-nav-labels {
		display: none;
	}

	.bgrein-bar::after {
		display: none;
	}
}