/* ===========================================================================
 * header.css -- Kopfbereich (Eugen, Phase 3, 14.09.2026).
 *
 * GENERIERT aus scripts/header.css.tpl: die Symbol-Masken (--ams-icon-*)
 * setzt scripts/gen-css.py aus den SVG-Pfaden des Entwurfs
 * output/startseite/Main.dc.html ein. Aenderungen an den Regeln in der
 * .tpl machen, dann das Skript laufen lassen -- nicht hier.
 *
 * Werte nur aus tokens.css (--ams-*). Brief: design-system/startseite-brief.md.
 *
 * MARKUP, gegen das hier gestylt wird (Flatsome 3.20, Header-Builder):
 *
 *   header#header.has-sticky
 *     div#masthead.header-main                  <- Zeile 1 (72 px, Customizer)
 *       div.header-inner.flex-row.container
 *         div#logo.flex-col.logo
 *         div.flex-col.flex-left.flex-grow      <- nur das Suchfeld (search-form)
 *           ul.header-nav-main.nav-left > li.header-search-form
 *             div.searchform-wrapper > form.searchform
 *               input.search-field + button.ux-search-submit
 *         div.flex-col.flex-right
 *           ul.header-nav-main.nav-right > li.account-item, li.header-divider, li.cart-item
 *     div#wide-nav.header-bottom                <- Zeile 2 (56 px, Customizer)
 *       div.flex-row.container
 *         div.flex-col.flex-left > ul.header-bottom-nav.nav > li.menu-item.nav-symbol-*
 *         div.flex-col.flex-right > ul (leer, Flatsome rendert sie trotzdem)
 *
 * SYMBOLE: Font Awesome 6 Free (solid), als SVG-Maske mit currentColor --
 * kein Icon-Font, kein CDN, kein Upload. Zugeordnet ueber CSS-Klassen am
 * MENUEPUNKT (Design > Menues > "CSS-Klassen", standardmaessig ausgeblendet):
 *
 *   nav-symbol-karten (= weihnachtskarten), nav-symbol-kalender, nav-symbol-muster,
 *   nav-symbol-bestellen, nav-symbol-fragen, nav-symbol-kontakt, nav-symbol-praesente (08.10.2026)
 *   nav-rechts-ab-hier  = ab diesem Punkt stehen die Punkte rechts
 *
 * Wer einen Menuepunkt loescht und neu anlegt, verliert die Klassen -- ohne
 * Fehler, die Zeile rutscht nur zusammen. wp_update_nav_menu_item() setzt
 * nicht uebergebene Felder ebenfalls zurueck.
 * ======================================================================== */

:root {
	--ams-icon-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
	--ams-icon-konto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
	--ams-icon-weihnachtskarten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M215.4 96L144 96l-36.2 0L96 96l0 8.8L96 144l0 40.4 0 89L.2 202.5c1.6-18.1 10.9-34.9 25.7-45.8L48 140.3 48 96c0-26.5 21.5-48 48-48l76.6 0 49.9-36.9C232.2 3.9 243.9 0 256 0s23.8 3.9 33.5 11L339.4 48 416 48c26.5 0 48 21.5 48 48l0 44.3 22.1 16.4c14.8 10.9 24.1 27.7 25.7 45.8L416 273.4l0-89 0-40.4 0-39.2 0-8.8-11.8 0L368 96l-71.4 0-81.3 0zM0 448L0 242.1 217.6 403.3c11.1 8.2 24.6 12.7 38.4 12.7s27.3-4.4 38.4-12.7L512 242.1 512 448s0 0 0 0c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64c0 0 0 0 0 0zM176 160l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
	--ams-icon-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E");
	--ams-icon-muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M58.9 42.1c3-6.1 9.6-9.6 16.3-8.7L320 64 564.8 33.4c6.7-.8 13.3 2.7 16.3 8.7l41.7 83.4c9 17.9-.6 39.6-19.8 45.1L439.6 217.3c-13.9 4-28.8-1.9-36.2-14.3L320 64 236.6 203c-7.4 12.4-22.3 18.3-36.2 14.3L37.1 170.6c-19.3-5.5-28.8-27.2-19.8-45.1L58.9 42.1zM321.1 128l54.9 91.4c14.9 24.8 44.6 36.6 72.5 28.6L576 211.6l0 167c0 22-15 41.2-36.4 46.6l-204.1 51c-10.2 2.6-20.9 2.6-31 0l-204.1-51C79 419.7 64 400.5 64 378.5l0-167L191.6 248c27.8 8 57.6-3.8 72.5-28.6L318.9 128l2.2 0z'/%3E%3C/svg%3E");
	--ams-icon-bestellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
	--ams-icon-fragen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
	--ams-icon-kontakt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
	--ams-icon-konto-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M58.9 42.1c3-6.1 9.6-9.6 16.3-8.7L320 64 564.8 33.4c6.7-.8 13.3 2.7 16.3 8.7l41.7 83.4c9 17.9-.6 39.6-19.8 45.1L439.6 217.3c-13.9 4-28.8-1.9-36.2-14.3L320 64 236.6 203c-7.4 12.4-22.3 18.3-36.2 14.3L37.1 170.6c-19.3-5.5-28.8-27.2-19.8-45.1L58.9 42.1zM321.1 128l54.9 91.4c14.9 24.8 44.6 36.6 72.5 28.6L576 211.6l0 167c0 22-15 41.2-36.4 46.6l-204.1 51c-10.2 2.6-20.9 2.6-31 0l-204.1-51C79 419.7 64 400.5 64 378.5l0-167L191.6 248c27.8 8 57.6-3.8 72.5-28.6L318.9 128l2.2 0z'/%3E%3C/svg%3E");
	--ams-icon-konto-payment-methods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96l0 32 576 0 0-32c0-35.3-28.7-64-64-64L64 32zM576 224L0 224 0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-192zM112 352l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm112 16c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/svg%3E");
	--ams-icon-konto-downloads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
	--ams-icon-konto-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm320 96c0-26.9-16.5-49.9-40-59.3L280 88c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 204.7c-23.5 9.5-40 32.5-40 59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-16 80a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM400 144a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
	--ams-icon-startseite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
	--ams-icon-produkte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M264.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 149.8C37.4 145.8 32 137.3 32 128s5.4-17.9 13.9-21.8L264.5 5.2zM476.9 209.6l53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 277.8C37.4 273.8 32 265.3 32 256s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0l152-70.2zm-152 198.2l152-70.2 53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 405.8C37.4 401.8 32 393.3 32 384s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0z'/%3E%3C/svg%3E");
	--ams-icon-konto-edit-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
	--ams-icon-konto-customer-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/svg%3E");
	--ams-icon-anlaesse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
	--ams-icon-praesente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm288 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z'/%3E%3C/svg%3E");
	--ams-icon-konto-edit-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/svg%3E");
}

/* -- Zeile 1: Suchfeld als Pille, mittig -------------------------------------
 * Flatsome kennt in der Hauptzeile nur links/rechts vom Logo. "Mittig" ist
 * die linke Zone, in der nur das Suchfeld steht, zentriert und begrenzt.
 */

.header-main .flex-left.flex-grow {
	justify-content: center;
	padding: 0 var(--ams-s-6);
}

.header-main .header-search-form {
	width: 100%;
	max-width: 520px;
}

.header-main .header-search-form .header-search-form-wrapper,
.header-main .header-search-form .searchform-wrapper {
	width: 100%;
}

.header-main .searchform-wrapper .search-field {
	height: 44px;
	padding-left: var(--ams-s-5);
	border: 0;
	border-radius: var(--ams-r-pill) 0 0 var(--ams-r-pill);
	background: var(--ams-surface);
	color: var(--ams-ink);
	font-size: 15px;
	box-shadow: none;
}

.header-main .searchform-wrapper .search-field::placeholder {
	color: var(--ams-ink-3);
	opacity: 1;
}

.header-main .searchform-wrapper .search-field:focus {
	background: var(--ams-surface);
	box-shadow: none;
}

/* Der Absendeknopf traegt .button.icon; Flatsomes globaler button_radius
   schliesst genau diese Klasse aus, deshalb der Radius hier. */
.header-main .searchform-wrapper .ux-search-submit {
	height: 44px;
	min-width: 56px;
	margin: 0;
	border: 0;
	border-radius: 0 var(--ams-r-pill) var(--ams-r-pill) 0;
	background-color: var(--ams-primary);
	color: var(--ams-white);
}

.header-main .searchform-wrapper .ux-search-submit:hover {
	background-color: var(--ams-primary-dark);
}

/* Live-Suche: Flatsomes Ergebnisliste haengt unter dem Feld. */
.header-main .searchform-wrapper .live-search-results {
	border-radius: var(--ams-r-card);
	box-shadow: var(--ams-shadow-card-hover);
}

/* -- Zeile 1: Konto und Warenkorb -------------------------------------------- */

.header-main .nav-right > li > a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ams-ink);
}

/* Symbol RECHTS der Beschriftung (fuehrt den Blick nach aussen). a::after,
   weil li::before/::after Flatsomes Dropdown-Dreieck gehoeren. Der Link
   heisst a.nav-top-link (angemeldet wie abgemeldet), gemessen 14.09.2026. */
.header-main .account-item > a.nav-top-link::after {
	content: "";
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	margin-left: .55em;
	vertical-align: -.25em;
	background-color: currentColor;
	-webkit-mask: var(--ams-icon-konto) center / contain no-repeat;
	mask: var(--ams-icon-konto) center / contain no-repeat;
}

/* Zaehler als rote Kachel statt Rahmen (Entwurf). Flatsome zeichnet den
   Korb aus .cart-icon strong plus Henkel (strong::after). */
.header-main .cart-icon strong {
	background: var(--ams-primary);
	border-color: var(--ams-primary);
	color: var(--ams-white);
	border-radius: 6px;
	font-weight: 600;
}

.header-main .cart-icon strong::after {
	border-color: var(--ams-primary);
}

.header-main .header-divider {
	border-color: var(--ams-line);
}

/* -- Zeile 2: Navigation ------------------------------------------------------
 * Ein Menue, per CSS geteilt: Sortimente links, Informationen rechts.
 * Zwei Menues waeren mobil unsichtbar (Off-Canvas zeigt nur "nav").
 */

.header-bottom {
	border-top: 1px solid var(--ams-line);
	border-bottom: 1px solid var(--ams-line);
}

/* Flatsome gibt der linken Zone nur Inhaltsbreite; ohne flex-grow gaebe es
   nichts zu verteilen. Die rechte Zone rendert Flatsome immer (leeres ul)
   und mit flex:1 -- sie darf keinen Platz nehmen, sonst landen die rechten
   Punkte in der Mitte. */
.header-bottom .flex-col.flex-left {
	flex: 1 1 auto;
	min-width: 0;
}

.header-bottom .flex-col.flex-right {
	flex: 0 0 auto;
}

.header-bottom .header-bottom-nav > li.nav-rechts-ab-hier {
	margin-left: auto;
}

/* Zustaende (Eugen, 14./15.09.2026): Ruhe = Text dunkel, Sortiment-Symbol
   rot; Hover = Text UND Symbol hellrot; aktiv = Text und Symbol dunkelrot,
   keine Flaeche (die Pille sah aus wie ein Knopf). Das Symbol haengt an
   a::after mit order:-1 -- a::before gehoert Flatsomes Hover-Linie
   (nav-line-*), die das Symbol sonst ueberschreibt und "verschwinden" laesst. */

.header-bottom .header-bottom-nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ams-ink);
	transition: color var(--ams-t-base) var(--ams-ease-out);
}

.header-bottom .header-bottom-nav > li > a:hover {
	color: var(--ams-primary);
}

/* Ohne Pillenpolster ruecken die Punkte zusammen -- Luft dazwischen. */
.header-bottom .header-bottom-nav > li + li:not(.nav-rechts-ab-hier) {
	margin-left: var(--ams-s-4);
}

.header-bottom .header-bottom-nav > li.current-menu-item > a,
.header-bottom .header-bottom-nav > li.current-menu-ancestor > a,
.header-bottom .header-bottom-nav > li.current-menu-parent > a {
	color: var(--ams-primary);   /* aktiv hellrot wie Hover (Eugen, 30.09.2026; vorher dunkelrot) */
}

/* Symbole: <span class="ams-nav-symbol ams-nav-symbol--x"> vor dem Text
   (inc/navigation.php setzt ihn aus der Klasse nav-symbol-x). Ueber
   currentColor -- Hover und Aktiv faerben mit. Gilt auch im Off-Canvas. */
.ams-nav-symbol {
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	vertical-align: -.2em;
	background-color: currentColor;
	/* Langformen, KEINE mask-Kurzform: die setzt mask-image auf none und
	   ist spezifischer als die Bild-Regeln je Klasse weiter unten. */
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color var(--ams-t-base) var(--ams-ease-out);
}

.header-bottom-nav > li > a > .ams-nav-symbol {
	margin-right: 0; /* der Abstand kommt aus gap */
}

/* Sortimente und Anlaesse tragen das Symbol in Ruhe rot; Hover und Aktiv
   folgen der Textfarbe. :not(.current-*) haelt diese Regel unter der
   Aktiv-Regel. */
.header-bottom-nav > li.nav-symbol-produkte:not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-parent) > a:not(:hover) > .ams-nav-symbol,
.header-bottom-nav > li.nav-symbol-anlaesse:not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-parent) > a:not(:hover) > .ams-nav-symbol,
.header-bottom-nav > li.nav-symbol-praesente:not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-parent) > a:not(:hover) > .ams-nav-symbol {
	background-color: var(--ams-primary);
}

.header-bottom-nav > li.current-menu-item > a > .ams-nav-symbol,
.header-bottom-nav > li.current-menu-ancestor > a > .ams-nav-symbol,
.header-bottom-nav > li.current-menu-parent > a > .ams-nav-symbol {
	background-color: var(--ams-primary);
}

.ams-nav-symbol--startseite       { -webkit-mask-image: var(--ams-icon-startseite);       mask-image: var(--ams-icon-startseite); }
.ams-nav-symbol--produkte         { -webkit-mask-image: var(--ams-icon-produkte);         mask-image: var(--ams-icon-produkte); }
.ams-nav-symbol--anlaesse         { -webkit-mask-image: var(--ams-icon-anlaesse);         mask-image: var(--ams-icon-anlaesse); width: 16px; }
.ams-nav-symbol--praesente        { -webkit-mask-image: var(--ams-icon-praesente);        mask-image: var(--ams-icon-praesente); width: 16px; }  /* Praesente (08.10.2026) */
.ams-nav-symbol--karten,
.ams-nav-symbol--weihnachtskarten { -webkit-mask-image: var(--ams-icon-weihnachtskarten); mask-image: var(--ams-icon-weihnachtskarten); }
.ams-nav-symbol--kalender         { -webkit-mask-image: var(--ams-icon-kalender);         mask-image: var(--ams-icon-kalender); width: 16px; }
.ams-nav-symbol--muster           { -webkit-mask-image: var(--ams-icon-muster);           mask-image: var(--ams-icon-muster); width: 20px; }
.ams-nav-symbol--bestellen        { -webkit-mask-image: var(--ams-icon-bestellen);        mask-image: var(--ams-icon-bestellen); }
.ams-nav-symbol--fragen           { -webkit-mask-image: var(--ams-icon-fragen);           mask-image: var(--ams-icon-fragen); }
.ams-nav-symbol--kontakt          { -webkit-mask-image: var(--ams-icon-kontakt);          mask-image: var(--ams-icon-kontakt); }

/* -- Dropdowns (Produkte, Anlaesse) ----------------------------------------------
 * Flatsome-Markup: li.has-dropdown > a (+ i.icon-angle-down) + ul.nav-dropdown
 * > li > a; Unterpunkte mit eigenem Untermenue klappen seitlich aus.
 * Karte im CI: Rundung, Schatten, kein Rahmen.
 */
.header-bottom-nav .nav-dropdown {
	min-width: 220px;
	padding: var(--ams-s-2) 0;
	border: 0;
	border-radius: var(--ams-r-card);
	box-shadow: var(--ams-shadow-card-hover);
}

.header-bottom-nav .nav-dropdown > li > a {
	padding: 8px var(--ams-s-4);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ams-ink);
}

.header-bottom-nav .nav-dropdown > li > a:hover,
.header-bottom-nav .nav-dropdown > li.current-menu-item > a {
	color: var(--ams-primary);
	background: var(--ams-surface);
}

/* Spalten im Dropdown "Produkte" (Flatsome: li.nav-dropdown-col > a + ul.nav-column
   > li > a). Eine Schriftgroesse fuer Kopf und Unterpunkte -- vorher 14 px gegen
   16 px -- und dieselbe Einrueckung: die Unterpunkte standen 16 px weiter links
   als ihr Spaltenkopf (Eugen, 30.09.2026). Der Kopf bleibt an der Staerke erkennbar. */
/* :has(): jeder Punkt der obersten Reihe ist dort Spaltenkopf, auch einer ohne
   Unterpunkte (Bloecke). */
.header-bottom-nav .nav-dropdown:has(> li.nav-dropdown-col) > li > a {
	font-weight: 600;
}

/* Einfache Listen (Anlaesse) sind Endpunkte wie die Unterpunkte der Spalten. */
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li > a {
	font-weight: 400;
}

.header-bottom-nav .nav-dropdown .nav-column > li > a {
	padding: 8px var(--ams-s-4);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ams-ink-2);
}

/* Aktiv hellrot, im Dropdown wie in der Leiste: der Punkt selbst und die Spalte, in der er liegt. */
.header-bottom-nav .nav-dropdown .nav-column > li > a:hover,
.header-bottom-nav .nav-dropdown .nav-column > li.current-menu-item > a,
.header-bottom-nav .nav-dropdown > li.current-menu-ancestor > a,
.header-bottom-nav .nav-dropdown > li.current-menu-parent > a {
	color: var(--ams-primary);
}

/* Lange einfache Listen (Anlaesse) ab fuenf Eintraegen in zwei Spalten, wie bei
   Kurschat24 (Eugen, 30.09.2026). column-count statt Grid: Flatsome liefert eine
   flache <li>-Folge; display muss von table auf block, sonst wirkt es nicht.
   :has() zaehlt mit -- kommt ein Anlass dazu oder faellt einer weg, passt es sich an.
   Nicht fuer Dropdowns, die schon Flatsome-Spalten haben (Produkte). */
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)):has(> li:nth-child(5)) {
	display: block;
	width: 26em;
	column-count: 2;
	column-gap: 0;
}

.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)):has(> li:nth-child(5)) > li {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Unterpunkte mit eigenem Untermenue (Karten, Kalender): Flatsomes Pfeil
   bleibt, das Untermenue liegt rechts daneben. */
.header-bottom-nav .nav-dropdown .nav-dropdown {
	margin-top: calc(-1 * var(--ams-s-2));
}

/* -- Dropdowns in der Hauptzeile: Mein Konto, Warenkorb ----------------------
 * Flatsome: li.account-item.has-dropdown > ul.nav-dropdown > li > a
 *           li.cart-item.has-dropdown > ul.nav-dropdown > li.widget_shopping_cart
 *             ul.woocommerce-mini-cart > li.mini_cart_item (img, a, .remove, .quantity)
 *             p.woocommerce-mini-cart__total, p.woocommerce-mini-cart__buttons > a.button
 * Gleiche Karte wie die Menue-Dropdowns (Eugen, 15.09.2026).
 */
.header-main .nav-dropdown {
	min-width: 240px;
	padding: var(--ams-s-2) 0;
	border: 0;
	border-radius: var(--ams-r-card);
	box-shadow: var(--ams-shadow-card-hover);
}

.header-main .account-item .nav-dropdown > li {
	border: 0;
}

.header-main .account-item .nav-dropdown > li > a {
	padding: 8px var(--ams-s-4);
	border: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ams-ink);
}

.header-main .account-item .nav-dropdown > li > a:hover {
	color: var(--ams-primary);
	background: var(--ams-surface);
}

/* Symbol je WooCommerce-Endpunkt (Klasse woocommerce-MyAccount-navigation-link--<endpunkt>
   am li); a::before ist hier frei, Flatsomes Linie gilt nur der obersten Ebene. */
.header-main .account-item .nav-dropdown > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-main .account-item .nav-dropdown > li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--ams-ink-3);
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain;    mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	transition: background-color var(--ams-t-base) var(--ams-ease-out);
}

.header-main .account-item .nav-dropdown > li > a:hover::before {
	background-color: var(--ams-primary);
}

.woocommerce-MyAccount-navigation-link--dashboard > a::before       { -webkit-mask-image: var(--ams-icon-konto-dashboard);       mask-image: var(--ams-icon-konto-dashboard); }
.woocommerce-MyAccount-navigation-link--orders > a::before          { -webkit-mask-image: var(--ams-icon-konto-orders);          mask-image: var(--ams-icon-konto-orders); }
.woocommerce-MyAccount-navigation-link--downloads > a::before       { -webkit-mask-image: var(--ams-icon-konto-downloads);       mask-image: var(--ams-icon-konto-downloads); }
.woocommerce-MyAccount-navigation-link--edit-address > a::before    { -webkit-mask-image: var(--ams-icon-konto-edit-address);    mask-image: var(--ams-icon-konto-edit-address); }
.woocommerce-MyAccount-navigation-link--payment-methods > a::before { -webkit-mask-image: var(--ams-icon-konto-payment-methods); mask-image: var(--ams-icon-konto-payment-methods); }
.woocommerce-MyAccount-navigation-link--edit-account > a::before    { -webkit-mask-image: var(--ams-icon-konto-edit-account);    mask-image: var(--ams-icon-konto-edit-account); }
.woocommerce-MyAccount-navigation-link--customer-logout > a::before { -webkit-mask-image: var(--ams-icon-konto-customer-logout); mask-image: var(--ams-icon-konto-customer-logout); }

.header-main .cart-item .nav-dropdown {
	min-width: 320px;
	padding: var(--ams-s-4);
}

.header-main .cart-item .nav-dropdown > li.widget_shopping_cart {
	padding: 0;
	border: 0;
}

/* Genau EINE Trennlinie: Flatsome zieht selbst welche am Artikel und ueber
   der Summe (doppelt, 15.09.2026); alle aus, dann eine unter dem Artikel. */
.header-main .woocommerce-mini-cart > li,
.header-main .ux-mini-cart-footer,
.header-main .cart-item .woocommerce-mini-cart__total,
.header-main .woocommerce-mini-cart__buttons {
	border: 0 !important; /* WooCommerce setzt an .total eine doppelte Linie */
}

.header-main .woocommerce-mini-cart > li.mini_cart_item {
	padding-bottom: var(--ams-s-3);
	border-bottom: 1px solid var(--ams-line) !important; /* spezifischer als die Nullung oben */
}

.header-main .mini_cart_item img {
	border-radius: var(--ams-r-image);
}

.header-main .mini_cart_item > a:not(.remove) {
	font-weight: 600;
	color: var(--ams-ink);
}

.header-main .mini_cart_item .remove {
	border-color: var(--ams-line);
	color: var(--ams-ink-3);
}

.header-main .mini_cart_item .remove:hover {
	border-color: var(--ams-primary);
	background: var(--ams-primary);
	color: var(--ams-white);
}

.header-main .woocommerce-mini-cart__total {
	margin-top: var(--ams-s-3);
	font-size: 15px;
	color: var(--ams-ink);
}

.header-main .woocommerce-mini-cart__buttons .button {
	margin-bottom: var(--ams-s-2);
	letter-spacing: .04em;
}

.header-main .woocommerce-mini-cart__buttons .button.checkout {
	background-color: var(--ams-primary-dark);
}

/* Der Hinweis von German Market im Mini-Warenkorb (Versand, Zahlung,
   Widerruf): klein, gedaempft, ohne die Kartenbreite zu sprengen. */
.header-main .nav-dropdown .wgm-info,
.header-main .nav-dropdown .jde_hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ams-ink-2);
}

/* -- Sticky ----------------------------------------------------------------- */

.header.has-sticky .stuck #masthead {
	background: var(--ams-white);
}

/* Der Umbruch steht fest hinter der ersten Haelfte (aufgerundet): sich selbst
   ueberlassen verteilte der Browser 4 zu 5, die zweite Spalte war laenger
   (dieselbe Falle wie bei Kurschat24). Die Paare aus nth-child und nth-last-child
   treffen genau den mittleren Eintrag fuer 5 bis 20 Eintraege. */
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(3):nth-last-child(3),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(3):nth-last-child(4),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(4):nth-last-child(4),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(4):nth-last-child(5),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(5):nth-last-child(5),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(5):nth-last-child(6),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(6):nth-last-child(6),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(6):nth-last-child(7),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(7):nth-last-child(7),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(7):nth-last-child(8),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(8):nth-last-child(8),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(8):nth-last-child(9),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(9):nth-last-child(9),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(9):nth-last-child(10),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(10):nth-last-child(10),
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(10):nth-last-child(11) {
	break-after: column;
}

/* Der Fuss der ersten Spalte ohne Trennlinie, wie der letzte Eintrag der zweiten. */
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(3):nth-last-child(3) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(3):nth-last-child(4) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(4):nth-last-child(4) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(4):nth-last-child(5) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(5):nth-last-child(5) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(5):nth-last-child(6) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(6):nth-last-child(6) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(6):nth-last-child(7) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(7):nth-last-child(7) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(7):nth-last-child(8) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(8):nth-last-child(8) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(8):nth-last-child(9) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(9):nth-last-child(9) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(9):nth-last-child(10) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(10):nth-last-child(10) > a,
.header-bottom-nav > li > ul.nav-dropdown:not(:has(> li.nav-dropdown-col)) > li:nth-child(10):nth-last-child(11) > a {
	border-bottom: 0;
}