/* =========================================================================== * header.css -- Kopfbereich. * * GEGEN WELCHES MARKUP HIER GESTYLT WIRD * * header#header.has-sticky * div#masthead.header-main * div.header-inner.flex-row.container * div#logo.flex-col.logo * div.flex-col.flex-left.flex-grow <- linke Zone * ul.header-nav-main.nav-left * li.header-search-form * div.searchform-wrapper.ux-search-box * form.searchform * input.search-field * button.ux-search-submit.submit-button.secondary.button.icon * div.flex-col.flex-right <- rechte Zone * ul.header-nav-main.nav-right * li.account-item / li.header-divider / li.cart-item * * Die Mittelzone gibt es nicht -- die Hauptzeile kennt nur links und rechts, * die Mitte gehoert dem Logo. "Suchfeld mittig" entsteht dadurch, dass links * nur das Suchfeld steht. * ======================================================================== */ /* -- Suchfeld ------------------------------------------------------------ * * Das Briefing verlangt ein sichtbares, breites Eingabefeld -- kein Icon, das * sich erst aufklappt. Feld und Absendeknopf bilden zusammen eine Pille: * links rund, rechts rund, in der Mitte buendig. */ .header .searchform-wrapper .search-field { height: 48px; padding-left: var(--shop-space-3); border: 1px solid var(--shop-border); border-right: 0; border-radius: var(--shop-radius-pill) 0 0 var(--shop-radius-pill); background: var(--shop-surface); color: var(--shop-text); box-shadow: none; transition: border-color var(--shop-transition); } .header .searchform-wrapper .search-field::placeholder { color: var(--shop-text-muted); opacity: 1; } .header .searchform-wrapper .search-field:focus { border-color: var(--fs-color-primary, #325645); } /* * Der Absendeknopf traegt bei Flatsome die Klasse "secondary" und waere damit * gold. Weiss auf Gold ergibt 3,18 : 1 -- fuer ein Bedienelement zu wenig. * Auf der Primaerfarbe sind es 8,23 : 1, und das Briefing sieht ohnehin nur * EINE Farbe fuer Aktionen vor. * * Der globale button_radius aus dem Customizer greift hier nicht: Er * schliesst .button.icon aus, und genau die Klasse traegt dieser Knopf. */ .header .searchform-wrapper .ux-search-submit { height: 48px; min-width: 56px; margin: 0; border-radius: 0 var(--shop-radius-pill) var(--shop-radius-pill) 0; background-color: var(--fs-color-primary, #325645); border-color: var(--fs-color-primary, #325645); color: var(--shop-surface); } .header .searchform-wrapper .ux-search-submit:hover { filter: brightness(.9); } /* Die Zeile aus Feld und Knopf soll die Zone fuellen, nicht nur so breit sein wie ihr Inhalt. */ .header .header-search-form, .header .header-search-form .header-search-form-wrapper, .header .header-search-form .searchform-wrapper { width: 100%; } /* -- Abstaende in der Kopfzeile ------------------------------------------ * * Suchfeld und Konto standen ohne Luft nebeneinander. Der Abstand kommt an * die Zonen, nicht an die einzelnen Elemente -- so bleibt er richtig, wenn * spaeter ein Element dazukommt oder wegfaellt. */ .header .header-inner > .flex-left.flex-grow { padding-right: var(--shop-space-6); } .header .header-nav-main.nav-right > li { margin-left: var(--shop-space-2); } .header .header-nav-main.nav-right > li.header-divider { margin-left: var(--shop-space-3); margin-right: var(--shop-space-1); } /* * SYMBOL AM KONTOPUNKT * * Steht RECHTS der Beschriftung, anders als im Hauptmenue. Der Punkt sitzt am * rechten Rand der Kopfzeile; dort fuehrt das Symbol den Blick nach aussen, * statt ihn zwischen Suchfeld und Text zurueckzuholen. * * a::after, NICHT li::before oder li::after: Der Punkt traegt .has-dropdown, * und beide Pseudoelemente des li gehoeren dort Flatsomes Dropdown-Dreieck -- * dieselbe Falle wie beim verworfenen Menuetrenner (siehe unten). a::before * waere ebenfalls frei, traegt im Hauptmenue aber die Symbole; fuer "rechts" * ist ::after ohnehin das richtige. * * Dieselbe Figur wie die Kachel "Kontodetails" in layout.css -- ein Konto, * ein Zeichen. */ .header .header-nav-main .account-item > a.account-link::after { content: ""; flex: 0 0 auto; /* * GROESSE: auf das Warenkorb-Symbol abgestimmt (Betreiber, 21.08.2026). * 1,35em -> 1,6em -> 2,6em -> 2,4em. Die 2,6 waren nach Augenschein * einen Tick zu gross; 2,4em bringt die Figur auf ~1,8em Tinte. * * Der Warenkorb ist .cart-icon strong aus flatsome-shop.css: * * width/height: 2.2em (der Beutel) * strong::after: 8px (der Henkel darueber) * * Also rund 2,7em sichtbare Hoehe. EIN GLEICH GROSSER KASTEN WAERE ZU * KLEIN GEWESEN: Der Warenkorb ist ein Rahmen, der seinen Kasten ganz * ausfuellt, unsere Strichfigur fuellt nur etwa drei Viertel ihrer * viewBox (die Figur sitzt zwischen y=3 und y=21 von 24). Bei 2,2em * haette sie also nur ~1,65em Tinte gehabt und daneben klein gewirkt. * * Die Einheit bleibt em: Beide haengen an der Schriftgroesse der * Kopfzeile und wachsen gemeinsam. Der Verkleinerer * .nav-small .cart-icon{font-size:.66em} trifft hier NICHT -- nav-small * vergibt nur header-top.php, die Konto- und Warenkorbpunkte stehen in * der Hauptzeile. Waere das anders, braeuchte es hier eine Gegenregel. */ width: 2.4em; height: 2.4em; margin-left: .5em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; } /* -- Sticky -------------------------------------------------------------- * * Beim Hochscrollen faehrt die verkleinerte Kopfzeile ein. Ohne feste * Hintergrundfarbe scheint der Seiteninhalt durch. * * HIER STAND EIN SCHATTEN ZU VIEL. Bis zum 14.08.2026 lag zusaetzlich ein * box-shadow auf #masthead -- also auf der oberen Haelfte der eingefahrenen * Kopfzeile. Der fiel damit nach unten auf die Navigationszeile, mitten in den * Kopfbereich hinein, statt unter ihn. * * Er war ausserdem ueberfluessig: Flatsome setzt bereits * * .header-shadow .header-wrapper, .header-wrapper.stuck * { box-shadow: 1px 1px 10px rgba(0,0,0,.15) } * * auf den GESAMTEN eingefahrenen Kopf. Ein zweiter Schatten im Inneren war * kein Gestaltungsmittel, sondern ein Versehen. */ .header.has-sticky .stuck #masthead { background: var(--shop-surface); } /* * SCHNELLER VERKLEINERN. * * Seit dem 14.08.2026 laeuft der Sticky-Stil "shrink" statt "jump" (Kunde) -- * der Kopf faehrt also nicht mehr von oben herein, sondern schrumpft. Flatsome * gibt dafuer vor: * * .sticky-shrink .stuck .header-main { transition: height .8s } * * Acht Zehntelsekunden sind fuer eine Reaktion auf Scrollen zu lang: Der Kopf * schrumpft noch, wenn das Scrollen laengst vorbei ist, und wirkt dadurch * traege statt mitgehend. Gewuenscht war "verkleinern, sobald gescrollt wird". * * Erst standen hier 200 ms mit "ease". Das war zu schroff (Kunde, * 14.08.2026) -- 80 Pixel Hoehenunterschied in einem Fuenftel einer Sekunde * sind ein Sprung, kein Schrumpfen. * * Jetzt 400 ms mit derselben Kurve wie die uebrigen Uebergaenge. Bewusst * laenger als der Token von 300 ms: Der Kopf legt den weitesten Weg aller * bewegten Elemente zurueck, und eine gleiche DAUER ergibt bei groesserer * Strecke eine hoehere Geschwindigkeit. Gleich schnell wirkt hier also * schneller. * * OHNE .stuck IM SELEKTOR -- das ist der Punkt, und er war bis zum * 21.08.2026 falsch. Flatsome gibt vor: * * .sticky-shrink .stuck .header-main { transition: height .8s } * * Der Uebergang ist damit nur im EINGEFAHRENEN Zustand definiert. Beim * Herunterscrollen kommt .stuck dazu, die Regel greift, es animiert sauber. * Beim Hochscrollen wird .stuck entfernt -- und damit im selben Augenblick * auch die transition. Die Hoehe springt. * * Wir hatten diesen Zuschnitt uebernommen und im Kommentar behauptet, es * gelte in beide Richtungen. Tat es nicht. Eine Eigenschaft, die nur im * Zielzustand steht, animiert nur IN diesen Zustand hinein. * * Die Regel haengt jetzt am Kopf selbst, nicht am eingefahrenen Kopf. Sie * gilt dadurch dauerhaft und traegt beide Richtungen. * * SPEZIFITAET: .header.has-sticky.sticky-shrink sind vier Klassen (0,4,0) * gegen Flatsomes drei (0,3,0). Die dritte Klasse ist bewusst dabei -- ohne * sie stuenden beide auf (0,3,0), und es entschiede die Ladereihenfolge. * Die stimmt zwar, aber ein Gleichstand faellt lautlos aus, wenn sie einmal * kippt. * * Das Logo bekommt dieselbe Dauer, sonst laufen Kopfhoehe und Logo * auseinander und es zappelt. */ .header.has-sticky.sticky-shrink .header-main { transition: height 400ms cubic-bezier(.33, 1, .68, 1); } .header.has-sticky.sticky-shrink #logo img { transition: max-height 400ms cubic-bezier(.33, 1, .68, 1); } /* * LOGOWECHSEL WEICH STATT HART * * Seit dem 21.08.2026 traegt der eingefahrene Kopf die horizontale Fassung * (site_logo_sticky). Flatsome schaltet die beiden um: * * .header-logo-sticky { display:none !important } * .stuck .header-logo-sticky { display:block !important } * .stuck .header-logo-sticky + img { display:none !important } * * DISPLAY LAESST SICH NICHT ANIMIEREN. Das eine Bild ist weg, das andere da, * dazwischen nichts -- deshalb sprang der Wechsel, waehrend die Kopfhoehe * daneben sanft lief. * * Also nicht schalten, sondern uebereinanderlegen und die Deckkraft * wechseln: Das Ankerelement wird zum Raster, beide Fassungen liegen in * derselben Zelle (grid-area 1/1). Die Zelle nimmt die Groesse der * groesseren an, und weil beide weiter max-height folgen, schrumpft sie mit * dem Kopf. Wie die Deckkraft wechselt, steht weiter unten -- eingeblendet * wird, ausgeblendet nicht. * * DIE BEIDEN !important SIND NOTWEHR, kein Stil: Sie kontern die drei * display-Regeln oben, die selbst mit !important gesetzt sind. Ohne sie * bleibt die zweite Fassung schlicht ausgeblendet und die Deckkraft * wirkungslos. * * Die dunkle Fassung bleibt bewusst geschaltet -- sie gehoert dem * .nav-dark-Fall und hat mit dem Sticky-Wechsel nichts zu tun. * * Die Regeln fuer die Deckkraft stehen BEIDE am Kopf selbst, nicht nur am * eingefahrenen -- derselbe Grund wie eine Regel weiter oben. */ .header.has-sticky.sticky-shrink #logo a { display: grid; align-items: center; justify-items: start; } .header.has-sticky.sticky-shrink #logo a > img { grid-area: 1 / 1; display: block !important; transition: max-height 400ms cubic-bezier(.33, 1, .68, 1); } .header.has-sticky.sticky-shrink #logo a > img.header-logo-dark { display: none !important; } /* * DIE BEIDEN FASSUNGEN WECHSELN UNTERSCHIEDLICH (Betreiber, 21.08.2026). * * Erst blendeten beide gleich lang. Das ergab eine Mitte, in der sie * halbdurchsichtig uebereinander lagen -- bei zwei so verschiedenen Formen * sieht das verschmiert aus. Dann blendete nur noch ein, nicht aus. Jetzt * blendet ueberhaupt nur die horizontale Fassung, und auch die nur herein: * * gestapelt (gross) -- keine Blende, nur Groesse * horizontal (klein) -- blendet ein, verschwindet ohne Blende * * Moeglich macht das genau die Eigenart, die eine Regel weiter oben der * Fehler war: Ein Browser nimmt die transition aus dem ZIELZUSTAND. Steht * opacity dort nicht in der Liste, springt sie; steht sie mit 400ms drin, * blendet sie. Also je Fassung zwei Regeln, und die Dauer sitzt in der, * die den Zielzustand beschreibt. * * max-height laeuft in allen vier Regeln weiter mit 400ms, sonst verloere * das Bild seine Hoehenanimation -- und die ist beim grossen Logo jetzt der * einzige Effekt. */ /* * Gestapelt: sichtbar ohne .stuck. GAR KEINE BLENDE (Betreiber, 21.08.2026) * -- die grosse Fassung soll allein ueber die Groesse kommen und gehen. * Deshalb steht opacity in keiner der beiden Regeln in der transition; sie * springt, waehrend max-height laeuft. Das Logo waechst also in seinen * Platz hinein, statt sich einzublenden. */ .header.has-sticky.sticky-shrink #logo a > img.header-logo { opacity: 1; transition: max-height 400ms cubic-bezier(.33, 1, .68, 1); } .header.has-sticky.sticky-shrink .stuck #logo a > img.header-logo { opacity: 0; transition: max-height 400ms cubic-bezier(.33, 1, .68, 1); } /* Horizontal: sichtbar mit .stuck -- blendet also beim Schrumpfen ein. */ .header.has-sticky.sticky-shrink #logo a > img.header-logo-sticky { opacity: 0; transition: max-height 400ms cubic-bezier(.33, 1, .68, 1), opacity 0s; } .header.has-sticky.sticky-shrink .stuck #logo a > img.header-logo-sticky { opacity: 1; transition: max-height 400ms cubic-bezier(.33, 1, .68, 1), opacity 400ms cubic-bezier(.33, 1, .68, 1); } /* -- Navigationszeile ---------------------------------------------------- * * Die zweite Zeile traegt die Rubriken. Eine feine Linie nach oben trennt sie * vom Kopf, ohne eine Farbflaeche zu brauchen -- das Briefing will Sektionen * ueber Weissraum trennen, nicht ueber Farbe. */ .header .header-bottom { border-top: 1px solid var(--shop-border); background: var(--shop-surface); } /* * AUFTEILUNG: SORTIMENT LINKS, INFORMATION RECHTS * * Flatsome kennt in der unteren Leiste zwar drei Zonen, aber der Baustein * "nav" rendert genau EIN Menue -- er laesst sich nicht auf zwei Zonen * verteilen. Zwei getrennte Menues waeren die andere Loesung und die * schlechtere: In der mobilen Seitenleiste steht nur "nav", das zweite Menue * waere auf dem Handy unsichtbar. Also ein Menue, aufgeteilt per CSS. * * Voraussetzung dafuer ist die naechste Regel. Flatsome gibt der linken Zone * nur Inhaltsbreite (.flex-left traegt margin-right:auto). In einer Spalte, * die genau so breit ist wie ihre Punkte, gibt es nichts zu verteilen -- ein * margin-left:auto liefe ins Leere, ohne dass etwas kaputt aussieht. */ .header .header-bottom .flex-col.flex-left { flex: 1 1 auto; min-width: 0; } /* * Und die zweite Haelfte derselben Sache, ohne die es nur halb wirkt. * * Die Vorlage rendert IMMER eine rechte Spalte -- auch wenn dort kein Element * eingerichtet ist. Sie enthaelt dann ein leeres ul, traegt aber .flex-grow * (flex:1) und beansprucht damit die halbe Zeile. Zusammen mit der gewachsenen * linken Spalte teilen sich beide den Platz, und die rechts gesetzten * Menuepunkte landen in der MITTE statt am Rand -- so gesehen am 14.08.2026. * * Kommt dort spaeter doch ein Element hinein, sitzt es weiterhin rechts: * .flex-right traegt margin-left:auto, und die linke Spalte hat den Platz * bereits belegt. */ .header .header-bottom .flex-col.flex-right { flex: 0 0 auto; } /* * Ab diesem Punkt nach rechts. * * Die Klasse haengt am MENUEPUNKT ("So bestellen Sie", gesetzt ueber * _menu_item_classes), nicht an einer Position im Menue. Ein :nth-child waere * verlockend kurz und beim naechsten zusaetzlichen Punkt still falsch -- * niemand denkt beim Anlegen einer Seite daran, dass eine CSS-Regel mitzaehlt. * * Was der Betreiber davon merkt: Ein neuer Menuepunkt landet links oder * rechts, je nachdem ob er vor oder hinter "So bestellen Sie" einsortiert * wird. Das ist die Regel, die man ihm in einem Satz erklaeren kann. * * Gesetzt wird die Klasse auch von scripts/setup-pages.sh, damit sie einen * Neuaufbau des Menues ueberlebt. */ .header .header-bottom-nav > li.nav-rechts-ab-hier { margin-left: auto; } /* * SCHRIFT UND ZUSTAENDE * * Ab Werk: .nav>li>a{font-size:.8em} in Versalien. Bei einer Grundgroesse von * 110 Prozent sind das rund 14 px -- fuer Versalien zu wenig, zumal die * Zielgruppe im Schnitt aelter ist. * * Am 14.08.2026 von .95em auf 1em nachgezogen: Die Navigation soll die Groesse * haben, die vorher der Brotkrumenpfad hatte -- der ist im Gegenzug kleiner * geworden (layout.css). Die beiden gehoeren zusammen, auch wenn sie in * verschiedenen Dateien stehen: Wer hier etwas aendert, sehe dort nach. * * Die Farbe kam aus rgba(74,74,74,.85), was auf Weiss als #656565 ankommt und * 5,3 : 1 ergibt. Der gedaempfte Ton aus den Tokens liegt bei 8,14 : 1. * * Der Hover wechselte bisher nur von Grau auf Fast-Schwarz -- ein Unterschied, * den man suchen muss. Jetzt auf die Primaerfarbe: ein echter Farbwechsel, * 8,23 : 1, und dieselbe Farbe, die im Shop ohnehin fuer Aktionen steht. * * Der Selektor ist absichtlich dreistufig. Flatsome setzt die Grundfarbe mit * (0,2,1) und den Hover mit (0,2,2); bei Gleichstand entschiede allein die * Ladereihenfolge. */ .header .header-bottom .header-bottom-nav > li > a { font-size: 1em; color: var(--shop-text-muted); transition: color var(--shop-transition); } .header .header-bottom .header-bottom-nav > li > a:hover, .header .header-bottom .header-bottom-nav > li.current-menu-item > a, .header .header-bottom .header-bottom-nav > li.current-menu-parent > a, .header .header-bottom .header-bottom-nav > li.current-menu-ancestor > a { color: var(--fs-color-primary, #325645); } /* * MEHR LUFT ZWISCHEN "STARTSEITE" UND "KARTEN" * * "Startseite" ist der einzige Punkt ohne Symbol (bewusst so). Dadurch laeuft * er optisch mit "Karten" zusammen, waehrend die uebrigen Punkte durch ihr * Symbol ohnehin voneinander abgesetzt sind. Flatsome gibt allen Punkten * .nav>li{margin:0 7px}, also 14 px -- hier reicht das nicht. * * VERWORFEN: EIN SENKRECHTER TRENNSTRICH * * Zwei Anlaeufe, beide gescheitert, und der Grund gehoert festgehalten: * * li::before ist bei Flatsome belegt -- es traegt das Dropdown-Dreieck * (.nav-dropdown-has-arrow li.has-dropdown:before, 11 px Rahmen * in #ddd). "Karten" hat ein Untermenue; ein Trenner dort hat * das Pseudoelement uebernommen, der Rahmen blieb gesetzt und * wurde beim Aufklappen als grauer Block sichtbar. * a::before traegt unsere Menuesymbole (siehe unten). * a::after war frei, aber .nav>li>a hat waagerecht KEIN Padding * (padding:10px 0). Der Strich sass damit auf der Symbolkante; * erst ein Versatz nach aussen brachte ihn in die Luecke. * * Am Ende sah der Strich neben den Symbolen zu betont aus. Abstand allein * loest dasselbe Problem ohne ein weiteres Gestaltungselement. Der Weg ist * hier notiert, damit ihn niemand ein drittes Mal geht. (19.08.2026) * * Der Wert steht in em, nicht in --shop-space-*: Er soll mit der Schriftgroesse * der Navigation wachsen, nicht mit dem Raster der Seite. */ .header .header-bottom .header-bottom-nav > li.nav-symbol-karten { margin-left: 1.5em; } /* * SYMBOLE VOR DEN MENUEPUNKTEN * * WARUM NICHT DIE SYMBOLSCHRIFT VON FLATSOME * * fl-icons bringt 54 Zeichen mit, davon ist der grosse Teil Social Media. * Nachgesehen am 14.08.2026: Es gibt WEDER ein Fragezeichen NOCH ein * brauchbares Kartensymbol. Von vier Punkten waeren nur "Kontakt" (envelop) * und "So bestellen Sie" (shopping-basket) ordentlich abgedeckt, der Rest * haette daneben gelegen. * * WARUM MASKE UND NICHT HINTERGRUNDBILD * * Als background-image traegt die Grafik ihre Farbe selbst, und der gruene * Hover muesste mit einer ZWEITEN, andersfarbigen Grafik nachgebaut werden -- * zwei Wahrheiten fuer dieselbe Form. Als Maske faerbt currentColor die * Flaeche, das Symbol erbt also die Linkfarbe und wechselt beim Hover * automatisch mit. Keine zusaetzliche Regel, kein zweites Bild. * * Die Symbole sind reine Zier: Als CSS-Pseudoelement stehen sie nicht im * Textbaum und werden von Screenreadern uebergangen. Die Beschriftung bleibt * die Information -- deshalb auch KEIN Punkt ohne Text. * * ZUORDNUNG UEBER EINE KLASSE AM MENUEPUNKT, wie bei nav-rechts-ab-hier. Ein * neuer Menuepunkt bekommt schlicht kein Symbol -- sichtbar, aber harmlos. * Gesetzt wird sie auch von scripts/setup-pages.sh. */ .header .header-bottom .header-bottom-nav > li[class*="nav-symbol-"] > a::before { content: ""; flex: 0 0 auto; width: .95em; height: .95em; margin-right: .45em; background-color: currentColor; -webkit-mask: var(--nav-symbol) center / contain no-repeat; mask: var(--nav-symbol) center / contain no-repeat; /* * NICHT ENTFERNEN. In flatsome.css steht: * * .nav:hover > li:not(:hover) > a:before { opacity: 0 } * * Die Regel gehoert zum Unterstreichungseffekt der Stile nav-line, * nav-line-grow und nav-line-bottom: Faehrt man ueber die Leiste, sollen * die Striche der ANDEREN Punkte verblassen. Der Selektor ist aber nicht * auf diese Stile eingeschraenkt und trifft jedes a:before -- also auch * unsere Symbole. Wir benutzen gar keinen Linienstil (nav_style_bottom * ist nicht gesetzt), der Effekt war hier reiner Kollateralschaden: * Beim Hover auf einen Punkt verschwanden die Symbole aller uebrigen. * * Spezifitaet ist nicht das Problem -- diese Regel liegt mit (0,4,3) ueber * Flatsomes (0,3,3). Es fehlte schlicht die Eigenschaft: Was man nicht * setzt, kann man auch nicht gewinnen. */ opacity: 1; } /* Zwei versetzte Karten -- bewusst nicht ein Umschlag, den traegt "Kontakt". */ .header .header-bottom .header-bottom-nav > li.nav-symbol-karten { --nav-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='14' height='11' rx='1.5'/%3E%3Cpath d='M7 8V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2'/%3E%3C/svg%3E"); } /* Eine Liste mit Aufzaehlungspunkten -- der Weg in Schritten. */ .header .header-bottom .header-bottom-nav > li.nav-symbol-bestellen { --nav-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h10M10 12h10M10 18h10M4 6h2M4 12h2M4 18h2'/%3E%3C/svg%3E"); } /* * Zwei versetzte Umschlaege -- die Briefhuellen werden im Bündel verkauft. * BEWUSST NICHT der einzelne Umschlag: Den traegt schon "Kontakt" weiter * rechts, und zwei gleiche Symbole in einer Leiste liest niemand auseinander. */ .header .header-bottom .header-bottom-nav > li.nav-symbol-huellen { --nav-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='15' height='10.5' rx='1.5'/%3E%3Crect x='6.5' y='8.5' width='15' height='10.5' rx='1.5'/%3E%3Cpath d='m7.3 9.3 6.7 4.6 6.7-4.6'/%3E%3C/svg%3E"); } /* Fragezeichen im Kreis. */ .header .header-bottom .header-bottom-nav > li.nav-symbol-fragen { --nav-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 1 1 3.1 2.3c-.7.3-1 .8-1 1.5v.4'/%3E%3Cpath d='M11.9 16.7h.1'/%3E%3C/svg%3E"); } /* Umschlag. */ .header .header-bottom .header-bottom-nav > li.nav-symbol-kontakt { --nav-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4 7.2 8 5.4 8-5.4'/%3E%3C/svg%3E"); }