/* ============================================================================
   hh-navigation.css — Kopf und Menue, netzwerkweit
   Erzeugt 2026-09-22 aus dem Entwurf Menuenavigation.dc.html (Option 1a).

   Gilt fuer die Dachmarke und fuer jede Kampagne. Der einzige Unterschied je
   Site steht in zwei Variablen (--nav-akzent, --nav-akzent-text), gesetzt im
   Theme, nicht hier.

   UMSCHALTPUNKTE, uebernommen aus wf-nachtrag.css (gemessen am 21.09.2026):
     ab 1100px   volle Leiste
     960-1099    kompakte Leiste, engere Abstaende, kleinere Schrift
     unter 960   Burger und Overlay
   Unter 960px zerfaellt die Wortmarke der Dachmarke (19px bei 768px), deshalb
   liegt die Grenze nicht bei 768.
   ========================================================================== */

:root {
	--nav-blau:        var(--wp--preset--color--ci-blau, #2a3287);
	--nav-blau-dunkel: var(--wp--preset--color--ci-blau-dunkel, #1e256b);
	--nav-text:        var(--wp--preset--color--text-dunkel, #2a3287);
	--nav-text-ruhe:   #3f4894;
	--nav-flaeche:     #f3f4fb;
	--nav-linie:       #e8eaf6;
	--nav-akzent:      var(--wp--preset--color--ci-blau, #2a3287);
	--nav-akzent-text: #ffffff;
	--nav-kopf-hoehe:  80px;
	--nav-kopf-mobil:  64px;
	--nav-dauer:       .28s;
	--nav-ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------------
   KOPF

   DER KOPF MUSS POSITIONIERT BLEIBEN, auch wenn das Kleben woanders passiert.
   Zwei Dinge haengen daran, beide teuer erkauft:

     1. z-index. Auf statischen Elementen ignoriert der Browser ihn. Am
        2026-08-09 lag das Overlay deshalb ueber dem Burger — das Menue ging
        auf und nicht mehr zu. Damals half position: relative am Kopf.
     2. Das Panel. Es steht mit position: absolute und top: 100% und braucht
        den Kopf als Bezugsrahmen; ein statischer Kopf gaebe ihm den Body.

   In einem Block-Theme, in dem WordPress den Template Part in einen eigenen
   <header class="wp-block-template-part"> wickelt, klebt dieses sticky nicht
   von selbst: Der Wrapper ist genau so hoch wie der Kopf, also gibt es keinen
   Weg zum Kleben. Dort traegt der Wrapper das sticky (Rettungsgasse:
   assets/css/custom.css, Abschnitt HEADER). Die Zeile hier bleibt trotzdem
   stehen — sie sorgt fuer die zwei Punkte oben und klebt in Themes ohne
   Wrapper.
--------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 1px 0 var(--nav-linie);
	transition: transform var(--nav-dauer) var(--nav-ease),
	            box-shadow var(--nav-dauer) var(--nav-ease);
}
.site-header.is-gescrollt { box-shadow: 0 4px 12px rgba(42, 50, 135, .08); }

/* Beim Runterscrollen faehrt die Leiste aus dem Bild, beim Hochscrollen
   kommt sie zurueck. Die Klasse setzt hh-navigation.js ab 140px Scrolltiefe. */
.site-header.is-weg { transform: translateY(-100%); }

.header-container {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	height: var(--nav-kopf-hoehe);
}
.header-logo,
.header-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img,
.header-logo-link img { height: 48px; width: auto; max-width: none; display: block; }

.header-rechts {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-shrink: 0;
	margin-left: auto;
}
/* Die Navigation schiebt sich nach rechts, die rechte Gruppe schliesst an.
   Sobald die Navigation da ist, traegt sie den Rand.

   DIE REGEL HAENGT AN DER 960er-ABFRAGE, nicht am Nachbarselektor allein:
   Die Navigation bleibt unter 960px im DOM (nur display:none), der Selektor
   greift also weiter. Mit Spezifitaet 0,2,0 schlug er '.header-rechts
   { margin-left: auto }' aus der Mobilabfrage (0,1,0) — Spezifitaet geht vor
   Quellreihenfolge — und Warenkorb und Burger klebten am Logo. */
@media (min-width: 960px) {
	.header-nav { margin-left: auto; }
	.header-nav + .header-rechts { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   WAAGRECHTE LEISTE
--------------------------------------------------------------------------- */
.header-nav__liste {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.header-nav__punkt,
.header-nav__ausloeser {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 12px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, .9375rem);
	font-weight: 600;
	color: var(--nav-text);
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--md, 8px);
	cursor: pointer;
	white-space: nowrap;
	transition: background .16s var(--nav-ease), color .16s var(--nav-ease);
}
.header-nav__punkt:hover,
.header-nav__ausloeser:hover,
.header-nav__ausloeser[aria-expanded="true"] { background: var(--nav-flaeche); }

/* Der aktive Punkt zeigt, wo man steht. Auf Ankerseiten setzt das Skript
   aria-current beim Scrollen, auf Seitenstrukturen setzt es WordPress. */
.header-nav__punkt[aria-current],
.header-nav__ausloeser[aria-current] {
	border-bottom: 2px solid var(--nav-blau);
	border-radius: var(--wp--custom--radius--md, 8px) var(--wp--custom--radius--md, 8px) 0 0;
}
.header-nav__ausloeser { border-bottom: 2px solid transparent; }
.header-nav__pfeil { width: 13px; height: 13px; flex: 0 0 auto; }
.header-nav__ausloeser[aria-expanded="true"] .header-nav__pfeil { transform: rotate(180deg); }

.header-nav__punkt:focus-visible,
.header-nav__ausloeser:focus-visible {
	outline: 2px solid var(--nav-blau);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   PANEL
   Liegt im <header>, nicht daneben: 'top: 100%' braucht den Kopf als
   Bezugsrahmen. Geschlossen ist es visibility:hidden, damit es nicht
   fokussierbar bleibt.
--------------------------------------------------------------------------- */
.nav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--nav-linie);
	box-shadow: 0 8px 24px rgba(42, 50, 135, .12);
	border-bottom-left-radius: var(--wp--custom--radius--lg, 16px);
	border-bottom-right-radius: var(--wp--custom--radius--lg, 16px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s var(--nav-ease), transform .2s var(--nav-ease), visibility .2s;
}
.nav-panel.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-panel__inhalt {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding: 28px clamp(1rem, 3vw, 2rem) 32px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem 2rem;
}
.nav-panel__punkt {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--md, 8px);
	text-decoration: none;
}
.nav-panel__punkt:hover { background: var(--nav-flaeche); }
.nav-panel__punkt:focus-visible { outline: 2px solid var(--nav-blau); outline-offset: 2px; }
.nav-panel__icon { font-size: 24px; width: 36px; text-align: center; padding-top: 2px; flex: 0 0 auto; }
.nav-panel__icon svg { width: 24px; height: 24px; }
.nav-panel__text { display: flex; flex-direction: column; min-width: 0; }
.nav-panel__titel { font-size: 17px; font-weight: 700; color: var(--nav-blau); line-height: 1.3; }
.nav-panel__satz { font-size: 14px; color: #5a62a0; margin-top: 3px; line-height: 1.4; text-wrap: pretty; }
.nav-panel__schild {
	align-self: flex-start;
	margin-top: .5rem;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--sm, 4px);
	background: var(--nav-linie);
	font-size: 14px;
	font-weight: 700;
	color: var(--nav-blau);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   KAMPAGNEN-CTA UND WARENKORB
--------------------------------------------------------------------------- */
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .75rem 1.5rem;
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--nav-akzent);
	color: var(--nav-akzent-text);
	font-size: 1rem;
	/* 600, nicht 700: der Knopf traegt seine Betonung ueber Flaeche und Farbe,
	   nicht ueber Fettung (Entscheid 2026-09-22). */
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid var(--nav-akzent);
}
.header-cta:hover { filter: brightness(1.06); color: var(--nav-akzent-text); }

.header-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--md, 8px);
	color: var(--nav-text);
	cursor: pointer;
}
.header-cart:hover { background: var(--nav-flaeche); }
.header-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-cart[hidden] { display: none; }

/* SPRACHWECHSLER. Entscheid 2026-09-22: auf dem Desktop im Kopf, mobil in der
   Fussleiste. Im Kopf sind unter 960px Logo, Burger, Warenkorb und CTA schon
   vier Elemente; ein fuenftes draengt sie unter die Trefferflaechengrenze. */
.lang-switch { display: flex; align-items: center; gap: .15rem; font-size: .8125rem; color: var(--nav-text-ruhe); }
.lang-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: .35rem;
	color: inherit;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm, 4px);
}
.lang-switch a:hover { color: var(--nav-blau); }
.lang-switch a.active,
.lang-switch a[aria-current] { color: var(--nav-blau); font-weight: 700; }
.lang-sep { opacity: .3; user-select: none; }
.cart-count {
	position: absolute;
	top: 1px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 9999px;
	background: var(--nav-blau);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	display: none;
}
.cart-count.hat-inhalt { display: block; }

/* ---------------------------------------------------------------------------
   BURGER UND OVERLAY, unter 960px
--------------------------------------------------------------------------- */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--md, 8px);
	cursor: pointer;
}
.menu-toggle__balken { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.menu-toggle__balken span { display: block; height: 2px; border-radius: 2px; background: var(--nav-text); }

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 1050;
	background: linear-gradient(160deg, var(--nav-blau) 0%, #1e2668 60%, #151b4a 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--nav-ease), visibility .4s;
}
.nav-overlay.ist-offen { opacity: 1; visibility: visible; }
.nav-overlay__kopf {
	height: var(--nav-kopf-mobil);
	padding-inline: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nav-overlay__kopf img { height: 36px; width: auto; display: block; }
.nav-overlay__schliessen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.nav-overlay__inhalt {
	padding: 12px 1rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.nav-overlay__gruppe { display: flex; flex-direction: column; gap: 4px; }
.nav-overlay__gruppentitel {
	margin: 0 0 6px;
	padding-left: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
}
.nav-overlay__punkt {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none;
}
.nav-overlay__punkt:hover,
.nav-overlay__punkt:focus-visible { background: rgba(255, 255, 255, .08); }
.nav-overlay__punkt .nav-panel__icon { font-size: 22px; width: 32px; padding-top: 0; }
.nav-overlay__punkt .nav-panel__titel { color: #fff; font-size: 16px; }
.nav-overlay__punkt .nav-panel__satz { color: #bec7f0; font-size: 13px; }
.nav-overlay__punkt .nav-panel__schild { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-overlay__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	border-radius: 12px;
	background: var(--nav-akzent);
	color: var(--nav-akzent-text);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}
.nav-overlay__kanaele { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* Auf dunklem Grund ist der Fokusring nie CI-Blau: das ergibt 1,24:1.
   Weiss auf dem Overlay-Verlauf ergibt mindestens 11:1. */
.nav-overlay a:focus-visible,
.nav-overlay button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   STUFEN
--------------------------------------------------------------------------- */
@media (max-width: 959px) {
	/* DER BURGER STEHT MITTIG. Der Kopf wird dafuer zum Raster mit drei
	   Spalten: Logo links, Burger in der Mitte, rechte Gruppe rechts. Mit
	   Flex waere der Burger nur im restlichen Platz zentriert, also je nach
	   Logobreite verschoben. Die Reihenfolge im Markup bleibt unveraendert,
	   die Spalten ordnen.

	   JEDES KIND BRAUCHT grid-row: 1 (ergaenzt 2026-09-22, gemessen bei 959px
	   und 390px). Im Markup steht der Burger NACH der rechten Gruppe. Die
	   automatische Platzierung setzt ihren Cursor nach der rechten Gruppe auf
	   Spalte 4; das naechste Kind mit fester Spalte 2 liegt davor, also
	   beginnt der Algorithmus eine neue Zeile. Der Burger landete dadurch
	   unter der Leiste, auf dem Hero, ausserhalb des 64px hohen Kopfes. Eine
	   feste Zeile stellt die drei nebeneinander, egal in welcher Reihenfolge
	   sie im Markup stehen. */
	.header-container {
		height: var(--nav-kopf-mobil);
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-rows: 100%;
		gap: .5rem;
	}
	.header-logo,
	.header-logo-link { grid-column: 1; grid-row: 1; justify-self: start; }
	.header-logo img,
	.header-logo-link img { height: 36px; }
	.header-nav { display: none; }
	.menu-toggle { grid-column: 2; grid-row: 1; justify-self: center; display: flex; }
	.header-rechts { grid-column: 3; grid-row: 1; justify-self: end; gap: .25rem; margin-left: 0; }
	.header-rechts .lang-switch { display: none; }
	/* «Jetzt spenden» ist laenger als «Spenden». Gemessen bei 390px: die
	   Randspalten sind je 148px breit, der Text 98px. Mit 16px Polsterung je
	   Seite blieben 0.3px Reserve und der Knopf brach auf zwei Zeilen in
	   einen Knopf fester Hoehe. Deshalb weniger Polsterung, min-height statt
	   height und ein Zeilenabstand, der die Zeilenbox nicht unterschreitet.

	   44px STATT 40px seit dem 2026-09-22. Gemessen wurde der Knopf danach
	   41px hoch — die Polsterung allein trug ihn nicht ueber die 40, und 41
	   liegt unter der Trefferflaechengrenze von 44
	   (_WEBSTRATEGIE/barrierefreiheit-standard.md Abschnitt 2.7). min-height
	   waechst nur, der Umbruchschutz oben bleibt unberuehrt. */
	.header-cta {
		padding: .625rem .75rem;
		min-height: 44px;
		font-size: var(--wp--preset--font-size--small, .9375rem);
		line-height: 1.2;
	}
	/* Das X im Overlay steht dort, wo der Burger stand. */
	.nav-overlay__kopf {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.nav-overlay__kopf img { justify-self: start; }
	.nav-overlay__schliessen { grid-column: 2; justify-self: center; }
	/* Sprungziele duerfen nicht unter dem Kopf landen. */
	[id]:not(body):not(html) { scroll-margin-top: calc(var(--nav-kopf-mobil) + 16px); }
}
@media (min-width: 960px) {
	.nav-overlay { display: none; }
	[id]:not(body):not(html) { scroll-margin-top: calc(var(--nav-kopf-hoehe) + 16px); }
}
@media (min-width: 960px) and (max-width: 1099px) {
	.header-container { gap: 1rem; }
	.header-nav__liste { gap: 0; }
	.header-nav__punkt,
	.header-nav__ausloeser { font-size: var(--wp--preset--font-size--xs, .875rem); padding: 0 8px; }
	.header-cta { padding: .75rem 1.125rem; }
}
@media (min-width: 768px) {
	.nav-panel__inhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nav-panel__inhalt.hat-zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nav-panel__inhalt.hat-eine-spalte { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.nav-panel,
	.nav-overlay { transition: none; }
	.site-header.is-weg { transform: none; }
}