/* ===========================================================================
   Kopfleiste - EIN Aussehen fuer die Shops (Event: Views/shop/header.php)
   und die oeffentlichen Seiten der Base-App (Views/_oeffentlich_kopf.php:
   Startseite, Rechtstexte, Konto der Kunden). Seit 02.10.2026 (Entscheidung
   02.10.2026: "wie im Event, nur moderner", Base ohne "Event" und Warenkorb).

   Aufbau (Bootstrap navbar navbar-expand-md, data-bs-theme="dark"): Logo
   links; im Menue (am Handy hinter dem Menueknopf) die Punkte als runde
   Knoepfe und "Anmelden" bzw. das Konto-Menue; rechts aussen Warenkorb
   (nur Shop), Sprache als Pill mit Flagge, Menueknopf. Die Leiste klebt
   oben (sticky-top); sobald die Seite scrollt, bekommt sie einen Schatten
   (CSS scroll-timeline, ohne Skript; Browser ohne Unterstuetzung zeigen
   sie ohne Schatten).

   Absichtlich KEINE .nav-link: das alte base.css der Shops setzt dort
   Abstaende mit !important. Die Punkte sind Bootstrap-Knoepfe (btn
   rounded-pill) mit eigener Ergaenzung. Praefix kl-.
     kl-kopf     die Leiste (Hintergrund, Glas, Schatten beim Scrollen)
     kl-logo     Logo
     kl-link     Menuepunkt (Event, Support, Konto) - aktiv: kl-link active
     kl-cta      "Anmelden" im Verlauf lila -> pink
     kl-rund     runder Knopf (Warenkorb, Menueknopf)
     kl-sprache  Sprache (Flagge + Kuerzel)
     kl-menue    aufklappendes Menue (hell, abgerundet)
   --kl-hoehe: Hoehe der Leiste - andere klebende Elemente rechnen damit
   (top: calc(var(--kl-hoehe, 0px) + 20px)), Sprungziele ebenso.
   =========================================================================== */

:root {
	--kl-hoehe: 72px;
	--kl-grund: rgba(20, 22, 28, .94);
	--kl-text: rgba(255, 255, 255, .74);
	--kl-flaeche: rgba(255, 255, 255, .08);
	--kl-flaeche-aktiv: rgba(255, 255, 255, .14);
	--kl-rand: rgba(255, 255, 255, .16);
	--kl-lila: #8a1286;
	--kl-pink: #e10168;
	--kl-weich: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 767.98px) {
	:root { --kl-hoehe: 64px; }
}

/* Sprungziele (#abschnitt) nicht unter der klebenden Leiste */
html { scroll-padding-top: calc(var(--kl-hoehe) + 12px); }

.kl-kopf {
	background: var(--kl-grund);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

.kl-kopf .navbar { --bs-navbar-padding-y: 0; min-height: var(--kl-hoehe); }
.kl-logo { padding: 0; margin-right: auto; line-height: 0; }
.kl-logo img { display: block; width: auto; height: 28px; transition: opacity .2s; }
.kl-logo:hover img { opacity: .85; }

/* Menuepunkte: runde Knoepfe, heller beim Ueberfahren, aktiv mit Flaeche */
.kl-link {
	--bs-btn-padding-x: .95rem;
	--bs-btn-padding-y: .5rem;
	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--kl-text);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--kl-flaeche);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--kl-flaeche-aktiv);
	--bs-btn-active-border-color: transparent;
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	transition: color .2s, background-color .2s;
}
.kl-link.active, .kl-link.show { color: #fff; background-color: var(--kl-flaeche-aktiv); }
.kl-link.dropdown-toggle::after { margin-left: 2px; vertical-align: .15em; opacity: .7; }

/* Anmelden: Verlauf wie der Hauptknopf der Seiten */
.kl-cta {
	--bs-btn-padding-x: 1.15rem;
	--bs-btn-padding-y: .5rem;
	--bs-btn-font-weight: 700;
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
	--bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
	--bs-btn-focus-shadow-rgb: 225, 1, 104;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-image: linear-gradient(135deg, var(--kl-lila), var(--kl-pink));
	box-shadow: 0 6px 18px rgba(225, 1, 104, .3);
	transition: transform .2s var(--kl-weich), box-shadow .2s var(--kl-weich), filter .2s;
}
@media (hover: hover) {
	.kl-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(225, 1, 104, .42); filter: brightness(1.06); }
}
.kl-cta:active { transform: none; }

/* Runde Knoepfe: Warenkorb, Menueknopf (am Handy) */
.kl-rund {
	--bs-btn-color: var(--kl-text);
	--bs-btn-border-color: var(--kl-rand);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--kl-flaeche);
	--bs-btn-hover-border-color: var(--kl-rand);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--kl-flaeche-aktiv);
	--bs-btn-active-border-color: var(--kl-rand);
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	font-size: 1.2rem;
}
.kl-rund.active { color: #fff; background-color: var(--kl-flaeche-aktiv); }
.kl-anzahl { font-size: .68rem; }

/* Sprache: Pill mit runder Flagge */
.kl-sprache {
	--bs-btn-padding-x: .7rem;
	--bs-btn-padding-y: .4rem;
	--bs-btn-font-size: .8rem;
	--bs-btn-font-weight: 700;
	--bs-btn-color: var(--kl-text);
	--bs-btn-border-color: var(--kl-rand);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--kl-flaeche);
	--bs-btn-hover-border-color: var(--kl-rand);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--kl-flaeche-aktiv);
	--bs-btn-active-border-color: var(--kl-rand);
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.kl-sprache.show { color: #fff; background-color: var(--kl-flaeche-aktiv); }
.kl-flagge { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.kl-sprache.dropdown-toggle::after { margin-left: 0; opacity: .7; }

/* Aufklappende Menues: hell, abgerundet, mit Schatten (base.css der Shops
   faerbt li beim Ueberfahren grau - hier die Eintraege selbst) */
.kl-menue {
	--bs-dropdown-padding-x: .375rem;
	--bs-dropdown-padding-y: .375rem;
	--bs-dropdown-border-width: 0;
	--bs-dropdown-border-radius: 14px;
	--bs-dropdown-link-hover-bg: #f1f3f6;
	--bs-dropdown-link-active-bg: #f1f3f6;
	--bs-dropdown-link-active-color: #16181d;
	--bs-dropdown-min-width: 13rem;
	box-shadow: 0 18px 44px rgba(16, 24, 40, .2);
}
/* Abstand zur Leiste (base.css der Shops setzt .navbar .dropdown-menu auf 0) */
.kl-kopf .kl-menue[data-bs-popper] { margin-top: 8px; }
.kl-menue > li:hover { background-color: transparent; }
.kl-menue .dropdown-item { display: flex; align-items: center; gap: 10px; padding: .55rem .8rem; border-radius: 10px; font-weight: 500; }
.kl-menue .dropdown-item .bi { width: 18px; color: #6c727f; }
.kl-menue .dropdown-item[aria-current] { font-weight: 700; }
.kl-menue .dropdown-item[aria-current]::after { content: "\2713"; margin-left: auto; color: var(--kl-pink); }

/* Handy: Menue als Liste unter der Leiste */
@media (max-width: 767.98px) {
	.kl-kopf .navbar-collapse { padding: 6px 0 16px; }
	.kl-kopf .navbar-nav { gap: 4px; }
	.kl-kopf .navbar-nav .kl-link { width: 100%; justify-content: flex-start; padding: .7rem 1rem; border-radius: 14px; font-size: 1.05rem; }
	.kl-kopf .navbar-nav .kl-cta { width: 100%; margin-top: 8px; padding: .75rem 1rem; border-radius: 14px; }
	.kl-kopf .navbar-nav .kl-menue { margin-top: 4px; box-shadow: none; }
	.kl-logo img { height: 24px; }
}

/* Schatten, sobald die Seite scrollt - ohne Skript (scroll-timeline) */
@supports (animation-timeline: scroll()) {
	.kl-kopf { animation: kl-schatten linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
	@keyframes kl-schatten {
		from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
		to { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-link, .kl-cta, .kl-logo img { transition: none; }
	.kl-cta:hover { transform: none; }
}

@media print {
	.kl-kopf { display: none; }
}