/*! WANDKIND Kopfzeile v1 (27.09.2026, Paket cf-header-20260927) – nur geladen, wenn die neue Kopfzeile ausgegeben wird (Vorschau-Link bzw. Schalter in layout/header/header.html.twig). Design wie Motivseite v3 / Kategorie v1 / Fußzeile v1: Quicksand, --wk-green-ink #467A4A (Text/Knöpfe), --wk-soft #F5F3EF, --wk-line #E4E0D9, Blatt-Radien, dünne Linien. Handy zuerst: <576 Menü · Logo · Suche · Merkzettel · Warenkorb | ab 576 + Konto | ab 768 Suchfeld in der Leiste | ab 992 Hauptnavigation mit Mega-Menü (Menü-Knopf weg) | ab 1400 Trustami-Link oben rechts. Höhen fest (keine Layoutsprünge): Vorteils-Zeile 32/36 px, Leiste 60 px, Navigation 44 px → mitlaufend sichtbar 60 bzw. 104 px (Motivseite/Kasse/Produktseite rücken ihre mitlaufenden Spalten auf 112 px, solange .header--main__sticky.is--active gilt – header-v1.js schaltet diese Klasse jetzt passend zur Sichtbarkeit der neuen Kopfzeile, siehe dort „syncSticky“). Raster wie der Seiteninhalt (Theme .container: max. 1620 px, 20 px Rand) → Logo/Navigation fluchten mit Brotkrumen und Überschrift. */ :root{--cf-hd-top-h:32px;--cf-hd-bar-h:60px;--cf-hd-nav-h:44px} @media (min-width:768px){:root{--cf-hd-top-h:36px}} /* Theme-Regel html,body{overflow-x:hidden} macht body zum (nie scrollenden) Scroll-Container → „sticky“ klebt nie. clip schneidet genauso ab, ohne Scroll-Container (wie Motivseite v3, Kasse v1, Kategorie v1). html behält hidden. */ body{overflow-x:clip} /* Mitlaufen: die ganze Kopfzeile ist sticky; die Vorteils-Zeile rutscht nach oben weg (negatives top), Leiste + Navigation bleiben. Normale Seiten:

; Kasse (Bestellübersicht/Danke/Adresse, ohne

): .cf-hd direkt im . */ .header-main,body>.cf-hd{position:-webkit-sticky;position:sticky;top:calc(var(--cf-hd-top-h) * -1);z-index:1020;background:#fff;transition:transform .25s ease} .header-main.cf-hd-hidden,body>.cf-hd.cf-hd-hidden{transform:translateY(-100%)} /* die alte mitlaufende Leiste (Kopie in der Fußzeile) bleibt im HTML (Theme-Skripte), wird aber nicht mehr gezeigt */ .header--main__sticky{display:none!important} .cf-hd{--wk-green:#7BB17E;--wk-green-ink:#467A4A;--wk-green-deep:#3B6A3F;--wk-green-tint:#E5EFE5;--wk-text:#2B3136;--wk-heading:#000;--wk-muted:#5F666C;--wk-line:#E4E0D9;--wk-field:#868C92;--wk-soft:#F5F3EF;--wk-font:"Quicksand",sans-serif;--wk-leaf-lg:0 40px 0 40px;--wk-leaf-md:0 30px 0 30px;--wk-leaf-sm:0 16px 0 16px;position:relative;color:var(--wk-text);font-family:var(--wk-font);font-size:15px;line-height:1.4;text-align:left;background:#fff} .cf-hd *,.cf-hd *::before,.cf-hd *::after{box-sizing:border-box} .cf-hd ul{list-style:none;margin:0;padding:0} .cf-hd a{color:inherit;text-decoration:none} /* (0,1,1): eigene Farb-Regeln für Links brauchen mind. zwei Klassen */ .cf-hd button{font-family:inherit;color:inherit;cursor:pointer} .cf-hd .cf-hd-i{display:block;flex:none;width:24px;height:24px} .cf-hd .cf-hd-sr,.cf-hd-drawer .cf-hd-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .cf-hd :focus-visible,.cf-hd-drawer :focus-visible{outline:2px solid var(--wk-green-ink,#467A4A);outline-offset:2px;box-shadow:none} /* Ring nach innen, wo außen kein Platz ist: Oben-Links (Zeile mit overflow:hidden), Hauptkategorien/Pfeile (Leiste liegt darüber), vollbreite Zeilen im Handy-Menü (scrollender Bereich schneidet seitlich ab) */ .cf-hd .cf-hd-toplinks a:focus-visible,.cf-hd .cf-hd-l1:focus-visible,.cf-hd .cf-hd-exp:focus-visible, .cf-hd-drawer .cf-hd-drow:focus-visible,.cf-hd-drawer .cf-hd-dback:focus-visible{outline-offset:-3px} .cf-hd-wrap{width:100%;max-width:1620px;margin:0 auto;padding:0 16px} /* Symbol-Knöpfe am Rand mit -6 px → Symbol bei 20 px wie der Inhalt */ @media (min-width:576px){.cf-hd-wrap{padding:0 20px}} .cf-hd-top,.cf-hd-bar,.cf-hd-nav{position:relative;z-index:2;background:#fff} .cf-hd-bar{z-index:4} /* Konto-Dropdown und Suchvorschläge (in der Leiste) liegen über der Navigation */ .cf-hd-nav{z-index:3} /* 1) Vorteils-Zeile */ .cf-hd-top{height:var(--cf-hd-top-h);background:var(--wk-soft);border-bottom:1px solid var(--wk-line);font-size:12.5px;font-weight:600;line-height:1.2} .cf-hd-top-in{display:flex;align-items:center;justify-content:center;gap:24px;height:100%;overflow:hidden} .cf-hd-usps{display:flex;align-items:center;gap:28px;min-width:0} .cf-hd-usp{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap} .cf-hd-usp span{overflow:hidden;text-overflow:ellipsis} .cf-hd-top .cf-hd-i{width:17px;height:17px;color:var(--wk-green-ink)} .cf-hd-toplinks{display:none} /* Nachtrag 1 (27.09., Inhaber): oben nur noch „Kauf auf Rechnung mit Klarna“ (alle Breiten) – Lieferung und „Made with love in Germany“ stehen im Seiteninhalt direkt darunter und in der Fußzeile (sonst doppelt). Ab 992 rechts „Hilfe & Kontakt“, Trustami-Link ab 1400. */ @media (min-width:768px){.cf-hd-top{font-size:13px}} @media (min-width:992px){ .cf-hd-top-in{justify-content:space-between} .cf-hd-toplinks{display:flex;align-items:center;gap:20px} .cf-hd-toplinks a{display:flex;align-items:center;gap:6px;min-height:var(--cf-hd-top-h);white-space:nowrap} .cf-hd-toplinks a:hover span{text-decoration:underline;text-underline-offset:3px} .cf-hd-toplink-trust{display:none} } @media (min-width:1400px){.cf-hd-toplink-trust{display:block}} /* 2) Leiste: Menü · Logo · Suche · Symbole */ .cf-hd-bar{height:var(--cf-hd-bar-h);border-bottom:1px solid var(--wk-line)} .cf-hd-bar-in{display:flex;align-items:center;gap:4px;height:100%} .cf-hd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:0 14px 0 14px;background:transparent;color:var(--wk-text);transition:background-color .15s,color .15s} .cf-hd-btn:hover,.cf-hd-btn[aria-expanded="true"]{background:var(--wk-soft);color:var(--wk-green-ink)} .cf-hd-burger{margin-left:-6px} .cf-hd-logo{display:flex;align-items:center;flex:none;height:44px;margin:0 auto 0 4px;padding:0 4px} .cf-hd-logo img{display:block;width:auto;height:28px;max-width:none} @media (min-width:400px){.cf-hd-logo img{height:31px}} .cf-hd-plugins{flex:none} .cf-hd-actions{display:flex;align-items:center;gap:2px;flex:none;margin-right:-6px} .cf-hd-act{position:relative;flex:none} .cf-hd .header-cart,.cf-hd .cf-hd-wish{margin:0;padding:0} .cf-hd-act-account{display:none} @media (min-width:576px){.cf-hd-act-account{display:block}} /* in der Kasse (Warenkorb, Anmelden, Bestellübersicht, Danke) wie bisher ohne Merkzettel/Konto */ body.is-ctl-checkout .cf-hd-act-wish,body.is-ctl-checkout .cf-hd-act-account, body.is-act-checkoutregisterpage .cf-hd-act-wish,body.is-act-checkoutregisterpage .cf-hd-act-account{display:none} /* Zähler (Merkzettel: #wishlist-basket, Warenkorb: Vorlage cart-widget im [data-cart-widget]) */ .cf-hd .header-wishlist-icon,.cf-hd .header-cart-icon,.cf-hd .header-cart-total,.cf-hd .account-menu-btn>.icon{display:none!important} .cf-hd-count{position:absolute;top:0;right:0;display:block;width:0;height:0} .cf-hd .header-wishlist-badge,.cf-hd .header-cart-badge{position:absolute;top:5px;right:3px;left:auto;display:inline-block;box-sizing:border-box;min-width:19px;height:19px;margin:0;padding:0 5px;border:0;border-radius:10px;background-color:var(--wk-green-ink)!important;color:#fff;box-shadow:0 0 0 2px #fff;font-family:var(--wk-font);font-size:11.5px;font-weight:700;line-height:19px;text-align:center;letter-spacing:0;pointer-events:none} .cf-hd .header-cart-badge{top:5px;right:3px} .cf-hd-count .header-cart-badge{top:5px;right:3px} .cf-hd .header-wishlist-badge:empty,.cf-hd .header-cart-badge:empty{display:none} /* Konto: Core-Vorlage (Knopf #accountWidget mit Dropdown bzw. am Handy Offcanvas) – unser Symbol liegt darunter, der Knopf darüber */ .cf-hd-act-account>.account-menu{position:relative;display:block;width:44px;height:44px;border-radius:0 14px 0 14px;color:var(--wk-text);transition:background-color .15s,color .15s} .cf-hd-act-account>.account-menu>.cf-hd-i{position:absolute;top:10px;left:10px;pointer-events:none} .cf-hd-act-account>.account-menu:hover,.cf-hd-act-account>.account-menu:has(>.dropdown>[aria-expanded="true"]){background:var(--wk-soft);color:var(--wk-green-ink)} .cf-hd-act-account>.account-menu>.dropdown{position:static} /* das innere .account-menu im Dropdown (Core-Vorlage) normal fließen lassen – auch gegen die Theme-Regel .header-main .account-menu{display:unset} (≤ 991 px) */ .cf-hd .account-menu-dropdown .account-menu{position:static;display:block;width:auto;height:auto;border-radius:0;background:none;color:inherit} .cf-hd .account-menu-btn{position:absolute!important;inset:0;width:44px;height:44px;margin:0;padding:0!important;border:0;border-radius:0 14px 0 14px;background:transparent!important;box-shadow:none!important} .cf-hd .account-menu-dropdown{min-width:280px;margin-top:8px!important;padding:16px 18px 10px;border:1px solid var(--wk-line);border-radius:var(--wk-leaf-sm);background:#fff;box-shadow:0 18px 36px -24px rgba(43,49,54,.45);color:var(--wk-text);font-family:var(--wk-font);font-size:15px} .cf-hd .account-menu-dropdown .account-menu-header,.offcanvas.account-menu-offcanvas .account-menu-header{padding:0 0 10px;color:var(--wk-heading,#000);font-size:16px;font-weight:700} .cf-hd .account-menu-dropdown .account-menu-login-button,.offcanvas.account-menu-offcanvas .account-menu-login-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border:0;border-radius:0 23px 0 23px;background:#467A4A;color:#fff;font-weight:700} .cf-hd .account-menu-dropdown .account-menu-login-button:hover,.offcanvas.account-menu-offcanvas .account-menu-login-button:hover{background:#3B6A3F} .cf-hd .account-menu-dropdown .account-menu-register,.offcanvas.account-menu-offcanvas .account-menu-register{margin:8px 0 6px;font-size:14px;text-align:center} .cf-hd .account-menu-dropdown .account-menu-register a,.offcanvas.account-menu-offcanvas .account-menu-register a{color:#467A4A;font-weight:700;text-decoration:underline;text-underline-offset:2px} .cf-hd .account-menu-dropdown .account-aside-item,.offcanvas.account-menu-offcanvas .account-aside-item{display:flex;align-items:center;min-height:40px;padding:6px 0!important;border:0;border-top:1px solid #E4E0D9;background:none;color:#2B3136;font-weight:600} .cf-hd .account-menu-dropdown .account-aside-item:hover,.cf-hd .account-menu-dropdown .account-aside-item.is--active{color:#467A4A;background:none} .offcanvas.account-menu-offcanvas{font-family:"Quicksand",sans-serif} /* Suche: Handy per Symbol (Zeile unter der Leiste), ab 768 px im Balken */ .cf-hd-search{display:none;position:absolute;left:0;right:0;top:100%;padding:10px 16px 14px;background:#fff;border-bottom:1px solid var(--wk-line);box-shadow:0 14px 24px -22px rgba(43,49,54,.5)} .cf-hd.is-search-open .cf-hd-search{display:block} .cf-hd-search-form{position:relative;display:flex;align-items:center;width:100%;height:48px;margin:0;border:1px solid var(--wk-field);border-radius:0 24px 0 24px;background:#fff;transition:border-color .15s,box-shadow .15s} .cf-hd-search-form:focus-within{border-color:var(--wk-green-ink);box-shadow:0 0 0 1px var(--wk-green-ink),0 0 0 4px rgba(70,122,74,.18)} /* = 2 px grüner Rahmen (Ersatz für den Fokus-Ring im Feld) */ .cf-hd .cf-hd-search-input{flex:1 1 auto;min-width:0;height:46px;margin:0;padding:0 6px 0 16px;border:0;border-radius:0 0 0 24px;background:transparent;color:var(--wk-text);font-family:var(--wk-font);font-size:16px;font-weight:500;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none} .cf-hd .cf-hd-search-input::placeholder{color:var(--wk-muted);opacity:1} .cf-hd .cf-hd-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .cf-hd .cf-hd-search-input:focus-visible{outline:0} .cf-hd-search-close,.cf-hd-search-submit{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--wk-text)} .cf-hd-search-close{display:none;border-radius:50%} .cf-hd-search-close .cf-hd-i{width:20px;height:20px} .cf-hd-search-close:hover{color:var(--wk-green-ink)} .cf-hd-search-form.has-value .cf-hd-search-close,.cf-hd.is-search-open .cf-hd-search-close{display:inline-flex} .cf-hd-search-submit{margin-right:1px;border-radius:0 22px 0 22px;background:var(--wk-green-ink);color:#fff} .cf-hd-search-submit .cf-hd-i{width:20px;height:20px} .cf-hd-search-submit:hover{background:var(--wk-green-deep)} .cf-hd-search-submit:disabled{opacity:1;cursor:progress} /* Shopware sperrt den Knopf, solange Vorschläge laden – kein Flackern */ .cf-hd-search-submit .loader{width:18px;height:18px;border-width:2px;color:#fff} .cf-hd-search-submit .loader~.cf-hd-i{display:none} /* während des Ladens nur der Kreisel, nicht Kreisel + Lupe */ @media (min-width:768px){ .cf-hd-act-search{display:none} .cf-hd-search,.cf-hd.is-search-open .cf-hd-search{display:block;position:static;flex:1 1 auto;min-width:0;max-width:560px;margin:0 16px;padding:0;border:0;background:transparent;box-shadow:none} .cf-hd-logo{margin-right:0} .cf-hd-actions{margin-left:auto} .cf-hd.is-search-open .cf-hd-search-close{display:none} .cf-hd.is-search-open .cf-hd-search-form.has-value .cf-hd-search-close{display:inline-flex} } @media (min-width:1200px){.cf-hd-search{max-width:600px;margin:0 auto}.cf-hd-actions{margin-left:0}} /* Suche mittig zwischen Logo und Symbolen */ /* Suchvorschläge (Shopware /suggest, Vorlage search-suggest inkl. PixelAreacalculator-Preis) */ .cf-hd .search-suggest{position:static;flex:none;width:0;min-width:0} /* Shopware hängt die Vorschläge ans Formular (Flex-Zeile) – Liste selbst schwebt */ .cf-hd .search-suggest-container{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;z-index:5;width:auto;max-height:min(70vh,560px);margin:0;padding:6px 14px;overflow-y:auto;transform:none;border:1px solid var(--wk-line);border-radius:var(--wk-leaf-sm);background:#fff;box-shadow:0 18px 36px -24px rgba(43,49,54,.45);font-family:var(--wk-font);text-align:left} .cf-hd .search-suggest-container::after{display:none} .cf-hd .search-suggest-product{border-bottom:1px solid var(--wk-line)} .cf-hd .search-suggest-product:last-child{border-bottom:0} .cf-hd .search-suggest-product-link{display:block;padding:8px 0;color:var(--wk-text)} .cf-hd .search-suggest-product.is-active .search-suggest-product-link,.cf-hd .search-suggest-product-link:hover{color:var(--wk-green-ink)} .cf-hd .search-suggest-product-image-container{width:44px;height:44px} .cf-hd .search-suggest-product-image{max-width:44px;max-height:44px;border-radius:0 8px 0 8px} .cf-hd .search-suggest-product-name{font-weight:600} .cf-hd .search-suggest-product-price{font-size:14px;font-weight:600} .cf-hd .search-suggest-product-list-price,.cf-hd .search-suggest-product-reference-price{color:var(--wk-muted)} .cf-hd .search-suggest-total{padding:10px 0 6px} .cf-hd .search-suggest-total-link{color:var(--wk-green-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* 3) Hauptnavigation + Mega-Menü (ab 992 px) */ .cf-hd-nav{display:none} .cf-hd-shade{position:fixed;inset:0;z-index:1;background:rgba(43,49,54,.28);animation:cf-hd-fade .2s ease} .cf-hd-shade[hidden]{display:none} @media (min-width:992px){ .cf-hd-burger{display:none} .cf-hd-logo{margin-left:-4px} .cf-hd-logo img{height:36px} .cf-hd-nav{display:block;height:var(--cf-hd-nav-h);border-bottom:1px solid var(--wk-line)} .cf-hd-nav>.cf-hd-wrap{height:100%} .cf-hd-menu{display:flex;align-items:stretch;gap:6px;height:100%;margin-left:-12px!important} .cf-hd-item{position:static;display:flex;align-items:center} .cf-hd-l1{position:relative;display:flex;align-items:center;height:var(--cf-hd-nav-h);padding:0 2px 0 12px;color:var(--wk-text);font-size:15.5px;font-weight:600;white-space:nowrap} .cf-hd-item:not(.has-panel) .cf-hd-l1{padding-right:12px} .cf-hd-l1::after{content:"";position:absolute;left:12px;right:2px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--wk-green-ink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease} .cf-hd-item:not(.has-panel) .cf-hd-l1::after{right:12px} .cf-hd-l1:hover,.cf-hd-item.is-open>.cf-hd-l1,.cf-hd-item.is-active>.cf-hd-l1{color:var(--wk-green-ink)} .cf-hd-l1:hover::after,.cf-hd-item.is-open>.cf-hd-l1::after,.cf-hd-item.is-active>.cf-hd-l1::after{transform:scaleX(1)} .cf-hd-exp{display:inline-flex;align-items:center;justify-content:center;width:34px;height:var(--cf-hd-nav-h);margin:0;padding:0;border:0;border-radius:0 10px 0 10px;background:transparent;color:var(--wk-muted)} .cf-hd-exp .cf-hd-i{width:18px;height:18px;transition:transform .2s ease} .cf-hd-exp:hover,.cf-hd-exp[aria-expanded="true"]{color:var(--wk-green-ink)} .cf-hd-exp[aria-expanded="true"] .cf-hd-i{transform:rotate(180deg)} .cf-hd-panel{position:absolute;left:0;right:0;top:100%;z-index:3;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-bottom:1px solid var(--wk-line);box-shadow:0 22px 34px -30px rgba(43,49,54,.55);animation:cf-hd-drop .18s ease} .cf-hd-panel[hidden]{display:none} .cf-hd-panel-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:26px;padding-bottom:34px} .cf-hd-panel-in.has-teaser{grid-template-columns:minmax(0,1fr) 280px} .cf-hd .cf-hd-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-8px 0 10px;color:var(--wk-green-ink);font-size:16px;font-weight:700} .cf-hd-all .cf-hd-i{width:20px;height:20px;transition:transform .2s ease} .cf-hd-all:hover>span:first-child{text-decoration:underline;text-underline-offset:4px} .cf-hd-all:hover .cf-hd-i{transform:translateX(3px)} .cf-hd-cols{columns:3 170px;column-gap:40px} .cf-hd-group{break-inside:avoid;padding:0 0 4px} .cf-hd-sub,.cf-hd-l3link{display:inline-block;padding:7px 0;color:var(--wk-text);font-size:15px;font-weight:600;line-height:1.35} .cf-hd-group.has-kids>.cf-hd-sub{font-weight:700;color:var(--wk-heading)} .cf-hd-l3{margin:0 0 6px!important;padding:0 0 0 12px!important;border-left:2px solid var(--wk-line)} .cf-hd .cf-hd-l3link{padding:5px 0;font-weight:500;color:var(--wk-muted)} .cf-hd .cf-hd-sub:hover,.cf-hd .cf-hd-l3link:hover,.cf-hd .cf-hd-sub.is-active,.cf-hd .cf-hd-l3link.is-active{color:var(--wk-green-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .cf-hd-teaser{display:block;align-self:start;color:var(--wk-text)} .cf-hd-teaser-img{display:block;overflow:hidden;aspect-ratio:4/3;border-radius:var(--wk-leaf-md);background:var(--wk-soft)} .cf-hd-teaser-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .cf-hd-teaser:hover .cf-hd-teaser-img img{transform:scale(1.03)} .cf-hd-teaser-txt{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:15px;font-weight:700} .cf-hd-teaser-txt .cf-hd-i{width:18px;height:18px;color:var(--wk-green-ink)} } @media (min-width:1200px){.cf-hd-menu{gap:14px}.cf-hd-l1{font-size:16px}} @media (min-width:1400px){.cf-hd-cols{columns:4 170px}.cf-hd-panel-in.has-teaser{grid-template-columns:minmax(0,1fr) 300px}} /* Tablet quer (ab 992 px mit Finger): Pfeil-Knopf und Unterkategorien ≥ 44 px hoch/breit; mit Maus bleibt alles kompakt */ @media (min-width:992px) and (pointer:coarse){.cf-hd-exp{width:44px}.cf-hd .cf-hd-sub,.cf-hd .cf-hd-l3link{padding-top:12px;padding-bottom:12px}} /* 4) Handy-Menü (