/* Navy-Kopfleiste am Handy auf allen Seiten (functions.php lkt_kopf_navy(): v2-Häkchen an; bis 11/2026 nur / und /konfigurator/).
   Body-Klasse lkt-kopf-navy. Lädt nach theme.css; ohne Häkchen lädt sie nicht und alle Seiten haben ihren alten Kopf. */

/* ---------- Kopf am Handy (Thomas 31.10., seit 13.11. auch auf /konfigurator/): eine navy Leiste mit Logo, Warenkorb und Burger, ohne Kopf-Knopf (seit 13.11., ein
   roter Knopf pro Bildschirm). Logo 56 px hoch (Wert wie Kompaktmodus /konfigurator/) in der hellen Fassung aus
   dem Fuß (<picture> aus lkt_logo()). FAQs steht im Burger-Menü (li.lkt-menue__extra, Filter wp_nav_menu_items),
   Facebook und Instagram am Handy nur noch im Fuß. Nur CSS, header.php und theme.css bleiben; auf /konfigurator/ überschreibt diese Datei den Kompaktkopf aus theme.css (lädt danach): die Wrapper-divs
   werden zu display: contents, .lkt-kopf zum Raster. Ab 781 px alles wie heute. ---------- */
body.lkt-kopf-navy .lkt-menue__extra { display: none; }
@media (max-width: 780px) {
	/* column-gap 14: Warenkorb und Burger bekommen 8 px Lücke zwischen den Trefferflächen, der Zähler 13 px zum Kasten */
	body.lkt-kopf-navy .lkt-kopf { --v2-kopf-h: 68px; position: relative; display: grid; grid-template: var(--v2-kopf-h) auto / auto 1fr auto auto; align-items: center; column-gap: 14px; padding: 0 10px; background: linear-gradient(var(--lkt-navy) var(--v2-kopf-h), var(--lkt-kopf-bg) 0); }
	body.lkt-kopf-navy :is(.lkt-topbar, .lkt-topbar__innen, .lkt-topbar__rechts, .lkt-hauptleiste, .lkt-hauptleiste__innen) { display: contents; }
	body.lkt-kopf-navy .lkt-topbar .lkt-social,
	body.lkt-kopf-navy .lkt-topbar__faq { display: none; }
	body.lkt-kopf-navy .lkt-logo { grid-area: 1 / 1; width: auto; padding: 0 0 0 10px; }
	body.lkt-kopf-navy .lkt-logo a { width: auto; }
	body.lkt-kopf-navy .lkt-logo img { width: auto; height: 56px; max-width: none; }
	body.lkt-kopf-navy .lkt-logo__text { color: #fff; } /* Text-Rückfall von lkt_logo(), sonst navy auf navy */
	body.lkt-kopf-navy .lkt-korb { grid-area: 1 / 3; margin: 0; padding: 4px 6px; }
	/* Betrag leiser als die Marke; Zähler als Beere-Pille mit weißem Ring (passt zum Burger, Weiß auf Beere 7,3:1, „500“ hat Luft) */
	body.lkt-kopf-navy .lkt-korb__betrag { font-size: 14px; font-weight: 400; opacity: .85; }
	body.lkt-kopf-navy .lkt-korb__zahl { padding: 0 .35em; border-radius: .8em; background: var(--lkt-beere); box-shadow: 0 0 0 2px #fff; }
	body.lkt-kopf-navy .lkt-nav { grid-area: 1 / 4; width: auto; padding: 0 10px 0 0; } /* Burger-Kasten bündig mit dem Inhaltsrand (20 px) */
	/* Kopf-Knopf am Handy aus (Thomas 13.11.: nie zwei rote Knöpfe übereinander); es führt der Hero-Knopf (home_kaufbox). */
	body.lkt-kopf-navy .lkt-cta { display: none; }
	/* Seiten ohne eigenen Kaufknopf (Info- und Rechtsseiten, Galerie, 404): Kopf-Knopf als schmale zweite Zeile, sonst führt
	   dort am Handy nichts in den Konfigurator (das Burger-Menü hat keinen Eintrag dafür). Seiten mit eigenem roten Knopf
	   (Startseite, Konfigurator, LPs, Sorten, Shop) sowie Warenkorb, Kasse und Konto bleiben ohne: ein roter Knopf pro
	   Bildschirm. Kennt ein Browser :has() nicht, fällt die Regel weg und der Knopf ist überall aus. */
	body.lkt-kopf-navy:not(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account):not(:has(.lkt-v2-btn, #lk24-konfigurator-root, .lk24-lp-cta, .lkt-sorten__btn, .lkt-shop__btn)) .lkt-cta { display: flex; grid-area: 2 / 1 / 3 / -1; width: auto; padding: 10px 0; }
	body.lkt-kopf-navy .lkt-cta .lkt-cta__knopf { width: 100%; padding-block: 6px; }
	/* Burger ohne Beere-Fläche, nur weißer Rand: sonst steht er als zweiter roter Knopf neben dem Hero-Knopf auf / bzw.
	   über dem Weiter-Knopf des Konfigurators. Gilt auf allen Seiten mit navy Kopf, damit er beim Wechsel gleich bleibt. */
	body.lkt-kopf-navy .lkt-burger__kasten { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
	/* Warenkorb-Zeile des Konfigurators (.cfg-cartnote, Ersatz für den Korb im hellen Kompaktkopf) aus: die Pille in der
	   Leiste führt zum Warenkorb (Thomas 13.11.). Ohne v2-Häkchen lädt diese Datei nicht, dann bleibt die Zeile. */
	body.lkt-kopf-navy .cfg-cartnote { display: none; }
	/* lkt.js setzt top relativ zu .lkt-hauptleiste, die hier keine Box hat: Menü fest unter der Leiste, oben eckig angesetzt.
	   overflow rundet die Ecken; den Fokusring deshalb nach innen, sonst schneidet er ihn ab. */
	body.lkt-kopf-navy .lkt-nav .lkt-menue { top: var(--v2-kopf-h) !important; overflow: hidden; border-radius: 0 0 16px 16px; box-shadow: 0 22px 28px -14px rgba(9, 34, 55, .5); }
	body.lkt-kopf-navy .lkt-nav .lkt-menue a { border-radius: 0; }
	body.lkt-kopf-navy .lkt-nav .lkt-menue a:focus-visible { outline: 2px solid #fff; outline-offset: -5px; box-shadow: none; }
	body.lkt-kopf-navy .lkt-menue__extra { display: block; }
}
/* 781–1024 px: das versteckte FAQ-li bleibt :last-child, also bekommt der letzte sichtbare Eintrag die runden Ecken selbst */
@media (min-width: 781px) and (max-width: 1024px) {
	body.lkt-kopf-navy .lkt-menue li:nth-last-child(2) a { border-radius: 0 0 16px 16px; }
}
@media (max-width: 780px) and (scripting: none) {
	body.lkt-kopf-navy .lkt-nav { grid-area: 3 / 1 / 4 / -1; padding: 0 10px 10px; } /* statisches Menü (noscript in header.php) als eigene Zeile */
	body.lkt-kopf-navy .lkt-nav .lkt-menue { flex: 1; }
}