/* ============================================================================ FS-HEADER-FINAL — Kopfzeile nach der verbindlichen Referenz vom 27.08.2026 (Sitzung HEADER FINAL, Auftrag + Referenzbild + Referenz-HTML von Yunus) ---------------------------------------------------------------------------- DREI FLAECHEN, harte Kanten, keine Rundungen, keine Verlaeufe: #header-top-bar Trustbar WEISS 52 px .hide-navbar Hauptflaeche SCHWARZ 164 px .navbar-wrapper Navigationszeile WEISS 66 px WARUM EIGENE DATEI statt Eingriff in fs-redesign.css: fs-redesign.css ist 3.010 Zeilen lang und wird von mehreren parallelen Sitzungen beschrieben (Lese-Schreib-Rennen sind dort schon zweimal passiert). Diese Datei haengt in template.xml GANZ HINTEN und gewinnt dadurch bei gleicher Spezifitaet gegen F/F5-F14 und FM1. Rollback = Zeile aus template.xml nehmen, Version hochzaehlen — der alte Header ist danach unveraendert zurueck, weil in fs-redesign.css nichts geloescht wurde. ⚠️ F11 in fs-redesign.css ("NICHT LOESCHEN", Anweisung Yunus 20.08.: "logo auch in der desktopvariante mittig machen") ist NICHT geloescht. Die Absicht — Logo exakt mittig — wird hier weitergefuehrt, nur mit dem besseren Mittel: F11 zentriert per position:absolute, das kann bei engem Platz unter Haendlerknopf und Icons laufen. Hier steht stattdessen ein echtes dreispaltiges Raster (1fr auto 1fr), wie im Auftrag verlangt. Deshalb werden F11s !important-Werte hier gezielt zurueckgenommen. FARBEN — Vorgabe Yunus ("behalte unsere icons und die farben bei", "bleib bei unseren farben"): ausschliesslich Token aus fs-tokens.css. Das mitgelieferte Referenz-HTML bringt ein FREMDES Magenta #d100a9 mit — bewusst NICHT uebernommen. Im ganzen Header steht genau EIN Magenta: --brand-aktion #c90f88 Das ist nicht Bequemlichkeit, sondern gemessen die einzige Wahl, die den Farbkontrakt auf BEIDEN Untergruenden einhaelt: - Navigationszeile ist WEISS -> Hover-Magenta ist Textfarbe. #c90f88 = 5,37:1 (besteht), #e5169f = 4,24:1 (faellt durch). - Hauptflaeche ist SCHWARZ -> Magenta ist dort nur Kante, Flaeche, Icon, nie Textfarbe (#c90f88 auf Schwarz = 3,51:1). Text bleibt weiss. Weiss auf #c90f88 = 5,37:1 (besteht) — gilt fuer den gefuellten Haendlerknopf und die Warenkorb-Zahl. Nebenbefund erledigt: FEHLERLISTE F26 (Warenkorb-Zaehler #e5169f, 4,24:1) ist damit auf 5,37:1 gehoben — der Zaehler war ausdruecklich Header-Revier. ICONS — Vorgabe Yunus: unsere bleiben. Die Kopf-Icons kommen weiter aus fs-icons.css (Iconset Blocksatz v4.1, i.far/::before), der Haendler-Koffer aus dem vorhandenen Inline-SVG, WhatsApp/LKW aus header_top_bar.tpl. Aus dem Referenz-HTML ist KEIN einziges SVG uebernommen — nur die Mechanik (Raster, Hover-Fuellung, Glow, Panel-Suche). Rollback = Zeile in template.xml + Sicherungen der drei .tpl. ============================================================================ */ :root { /* Nur Zuordnungen auf vorhandene Marken-Token, keine neue Farbe. */ --fsh-magenta: var(--brand-aktion, #c90f88); --fsh-schwarz: var(--brand-tinte, #111114); --fsh-weiss: var(--brand-papier, #ffffff); --fsh-kante: var(--brand-kante, #d9d9de); /* Standard-Grauflaeche des Shops. Ansage Yunus 27.08.: "gib mal bitte der TRUSTBAR die standard grau farbe die wir verwenden die hinter staffelpreiserlaeuterung ist" — das ist --fs-st-grund in fs-staffel.css (#f6f5f3), und dieser Wert ist deckungsgleich mit --brand-flaeche aus fs-tokens.css. Es ist also nicht die Farbe der Staffelflaeche, sondern die shopweite Flaechenfarbe (auf ihr laufen u.a. auch die card-header). Deshalb wird hier das MARKEN-Token gebunden, nicht der Rohwert: wenn die Flaechenfarbe irgendwann zentral gedreht wird, geht die Trustbar von selbst mit. */ --fsh-grau: var(--brand-flaeche, #f6f5f3); --fsh-haar: var(--brand-haar, #e4e4e7); /* Glow der Navigation: dieselbe Farbe, nur transparent. */ --fsh-glow-nah: rgba(201, 15, 136, .55); --fsh-glow-fern: rgba(201, 15, 136, .28); /* Hoehen nach Referenz (52 / 164 / 66). Der Auftrag erlaubt fuer die schwarze Flaeche 150-165 px; 164 ist der Wert der Referenz. */ /* Abstand innerhalb der Iconreihe — an EINER Stelle, weil ihn auch der Trennstrich braucht (er sitzt auf der halben Luecke). */ --fsh-icongap: clamp(18px, 1.9vw, 32px); --fsh-trust-h: 36px; --fsh-main-h: 145px; /* 164 -> 160 -> 155 -> 145 (Ansage Yunus 31.08.: schwarze Flaeche 10px flacher, Inhalt unveraendert) */ --fsh-nav-h: 63px; /* 66 - 3, Menuezeile zusammengezogen (Yunus 27.08.) */ /* Standardbreite des Shops. Derselbe Wert, auf dem die drei Innencontainer oben schon stehen — hier als Token, weil ihn jetzt auch die FLAECHEN brauchen (Abschnitt 9). */ --fsh-breite: 1430px; } /* ============================================================================ 1 — TRUSTBAR: WEISS Auftrag: weisser Grund, schwarze Outline-Icons, schwarze Schrift, dezente graue Trenner, KEINE magentafarbene Sternflaeche, keine Schatten/Rundungen. Das Sternfeld ist im Template entfernt (nicht nur ausgeblendet). ============================================================================ */ #header-top-bar.topbar-wrapper { background: var(--fsh-grau) !important; /* schlaegt F10 (transparent) */ /* Kante entfaellt: darunter folgt sofort das schwarze Band, die Kante waere dort ohnehin unsichtbar. Grau gegen Schwarz trennt von selbst. */ border-bottom: 0; } .fs-topbar.fs-v6-utility { background: var(--fsh-grau); color: var(--fsh-schwarz); /* F10 hatte die Bar auf 1430px geboxt. Die Referenz zeigt durchgehende Baender ueber die volle Breite — der INHALT bleibt im 1430er-Raster (Abschnitt 4 unten), damit er weiter mit der Seite darunter fluchtet. */ max-width: none; } @media (min-width: 992px) { .fs-v6-utility .fs-topbar-inner { min-height: var(--fsh-trust-h); height: var(--fsh-trust-h); max-width: 1430px; margin: 0 auto; padding: 0 11px; /* VIER gleiche Spalten (Ansage Yunus: "eventuell noch einen punkt in die trustbar aber nur desktop"). Der vierte Punkt steht nur im Desktop-Markup, die mobile Swipe-Bar behaelt ihre drei Folien. */ display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; } /* Die alte Prozentverteilung (F5) ausser Kraft setzen */ .fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(1), .fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(2), .fs-v6-utility .fs-v6-utility-items > .fs-tb-item:nth-child(3) { flex: 0 1 auto; } .fs-v6-utility .fs-v6-utility-items { display: contents; /* die drei Punkte liegen direkt im Raster */ } /* "Trustbar auch viel kleiner auf dem Desktop" (Ansage Yunus): Bandhoehe 53 -> 36, Schrift 13 -> 11, Innenabstand 28 -> 16. Die Icons gehen mit (22 -> 16): in einem 36px-Band blieben bei 22px nur 7px Luft nach oben und unten — das waere kein kleineres Band, sondern ein volles. Sag Bescheid, wenn die Icons ihre 22px behalten sollen, dann brauchen wir eher 44px Bandhoehe. */ .fs-v6-utility .fs-tb-item { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; color: var(--fsh-schwarz) !important; /* schlaegt F/F7 (weiss) */ font-family: var(--fs-v6-body); font-size: 11px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; border-left: 0; } /* Dezente graue Trenner — vorher 2px Magenta bzw. weiss-transparent */ .fs-v6-utility .fs-tb-item + .fs-tb-item { border-left: 1px solid var(--fsh-kante); } .fs-v6-utility .fs-tb-gruppe .fs-tb-item:first-child { padding-left: 16px; } /* Alle vier Symbole liegen jetzt auf demselben 24er-Raster (header_top_bar.tpl) — erst dadurch wirkt EINE Strichstaerke bei allen gleich. Vorher lag der LKW auf einem 48er-Raster und rendelte mit halber Staerke, was ihn neben den anderen ausfransen liess. 16 -> 18px: bei 16px waren die Konturen bei 1,7 Strichstaerke zu fein, um die Formen auseinanderzuhalten. Das Band bleibt trotzdem 36px. */ .fs-v6-utility .fs-tb-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--fsh-schwarz); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Das WhatsApp-Original ist eine Flaechenform, keine Outline — es wird gefuellt statt gestrichen (Ansage Yunus 20.08.: Originalicon). */ .fs-v6-utility .fs-tb-item svg.wa { fill: currentColor; stroke: none; } } /* ============================================================================ ⚠️ 1b — DIE LKW-MASKE ABSCHALTEN (Befund Yunus 27.08.: "Suche passende ICONS fuer die TRUSTBAR du hast ausschliesslich LKWs drin") ---------------------------------------------------------------------------- DAS WAR DER EIGENTLICHE FEHLER — und er lag NICHT im Markup. In fs-icons.css (Sitzung ICONSET, Blocksatz v4.1) steht: .fs-v6-utility .fs-tb-item svg:not(.wa), .fs-mtrust .fs-mtrust-slide svg:not(.wa) { -webkit-mask-image: url("data:image/svg+xml,...LKW..."); } Also: JEDES Trustbar-Symbol ausser WhatsApp wird mit einer LKW-Silhouette maskiert. Eine Maske ersetzt die Form vollstaendig — was im steht, ist danach voellig gleichgueltig. Deshalb halfen weder die neuen Pfade noch das vereinheitlichte 24er-Raster: es kamen weiter drei LKWs heraus. Als die Regel entstand, war sie richtig: damals hatte die Trustbar genau EIN Nicht-WhatsApp-Symbol, und das war der LKW. Mit dem Kunden-Symbol (Punkt 1) und dem Kaeuferschutz-Schild (Punkt 4) ist die Annahme hinfaellig. Hier wird die Maske abgeschaltet, damit die Symbole ihre eigene Form zeichnen. fs-icons.css bleibt unangetastet (ICONSET-Revier) — die Sitzung ist ueber OFFENE-PUNKTE.md informiert; wenn sie die Maske dort auf den Versand-Punkt einschraenkt, kann dieser Block ersatzlos weg. ============================================================================ */ .fs-v6-utility .fs-tb-item svg:not(.wa), .fs-mtrust .fs-mtrust-slide svg:not(.wa) { -webkit-mask-image: none !important; mask-image: none !important; /* ⚠️ Die Maske allein abzuschalten reicht NICHT — dann kommen schwarze Kaesten heraus. Die Technik des ICONSETs ist zweiteilig: das ist nur eine mit `background-color: currentColor` eingefaerbte FLAECHE, und erst die Maske schneidet die Form heraus. Der Inhalt des wird dabei gar nicht gezeichnet. Nimmt man nur die Maske weg, bleibt die volle eingefaerbte Flaeche stehen (am Shop gesehen: vier schwarze Quadrate). Also muss auch der Hintergrund zurueck auf transparent — erst dann zeichnen die Pfade im selbst. */ background: none !important; background-color: transparent !important; } /* Teil DREI derselben Technik: fs-icons.css blendet zusaetzlich die Original-Pfade aus — .fs-v6-utility .fs-tb-item svg:not(.wa) > path, .fs-mtrust .fs-mtrust-slide svg:not(.wa) > path { display: none; } Konsequent gedacht, denn bei Maskentechnik zeichnet der Inhalt ja nichts. Fuer uns heisst das: ohne diese Zeile bleiben nur die uebrig (die standen nicht im Selektor) — am Shop zu sehen als "Punkt 1 nur ein Kreis, Punkt 2 nur zwei Raeder, Punkt 4 gar nichts". Zusammengefasst besteht die Iconset-Technik aus drei Teilen, und ALLE drei muessen zurueck, damit ein eigenes SVG sichtbar wird: 1. background-color am (die eingefaerbte Flaeche) 2. mask-image am (die Form) 3. display:none an > path (der Originalinhalt) */ .fs-v6-utility .fs-tb-item svg:not(.wa) > path, .fs-mtrust .fs-mtrust-slide svg:not(.wa) > path { display: inline !important; } @media (min-width: 992px) { } /* ============================================================================ 2 — SCHWARZE HAUPTFLAECHE + ECHTES DREISPALTIGES RASTER ============================================================================ */ /* F10 faerbte den Traeger weiss, damit der geboxte Kasten frei steht. Jetzt traegt er die durchgehende schwarze Flaeche. */ @media (min-width: 992px) { header#jtl-nav-wrapper { background: var(--fsh-weiss) !important; } } #jtl-nav-wrapper .hide-navbar { background: var(--fsh-schwarz); } @media (min-width: 992px) { #jtl-nav-wrapper .hide-navbar { min-height: var(--fsh-main-h); padding: 0; } /* --- Das Raster ------------------------------------------------------ 1fr auto 1fr: die beiden Aussenspalten sind per Definition gleich breit, das Logo in der Mitte steht damit exakt auf der Seitenmitte — unabhaengig davon, wie breit Haendlerknopf und Iconreihe werden. Genau das verlangt der Auftrag ("Unterschiedliche Breiten ... duerfen das Logo nicht verschieben"). */ #jtl-nav-wrapper .hide-navbar > .navbar { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; min-height: var(--fsh-main-h); max-width: 1430px; margin: 0 auto; padding: 0 11px; width: 100%; /* position:relative bleibt (kommt schon aus F11) — es wird jetzt nicht mehr fuer das Logo gebraucht, sondern als Bezugsrahmen fuer das Such-Panel, siehe Abschnitt 6. */ position: relative; } /* ⚠️ Die Spalten werden AUSDRUECKLICH zugewiesen, nicht der automatischen Platzierung ueberlassen. Grund: im BESTELLVORGANG gibt es die Haendlerspalte nicht (bewusst, siehe header_menu_single_row.tpl) und statt der Iconreihe steht dort die Spalte "Sichere Bezahlung". Mit automatischer Platzierung waeren das nur zwei Kinder, und das Logo waere in Spalte 1 gerutscht — also nach links statt in die Mitte. Mit fester Zuweisung sitzt das Logo IMMER in Spalte 2 und damit immer auf der Seitenmitte, egal wie viele Aussenspalten gerade da sind. */ #jtl-nav-wrapper .hide-navbar > .navbar > .secure-checkout-icon { grid-column: 3; justify-self: end; align-self: center; /* Schwarz auf Schwarz: das Theme faerbt diesen Hinweis #111111, das Band ist jetzt #111114 — der Text war unsichtbar (am Shop gemessen). Er ist ein Vertrauenselement mitten im Kaufprozess und muss lesbar sein. */ color: var(--fsh-weiss); font-family: var(--fs-v6-body); letter-spacing: .04em; } #jtl-nav-wrapper .hide-navbar > .navbar > .secure-checkout-icon i, #jtl-nav-wrapper .hide-navbar > .navbar > .secure-checkout-icon .fas { color: var(--fsh-weiss); } /* Spalte 1: Haendlerbereich (neue Spalte aus header_menu_single_row.tpl) */ #jtl-nav-wrapper .hide-navbar .fs-hd-col { grid-column: 1; order: 1; justify-self: start; display: flex; align-items: center; min-width: 0; padding: 0; max-width: none; flex: 0 0 auto; } /* Spalte 2: Logo. F11s Absolutsetzung wird hier zurueckgenommen — die Zentrierung uebernimmt das Raster. */ #jtl-nav-wrapper .hide-navbar .nav-logo-wrapper { position: static !important; left: auto !important; top: auto !important; transform: none !important; grid-column: 2; order: 2; justify-self: center; width: auto !important; flex: 0 0 auto; padding: 0; z-index: auto; } /* Spalte 3: Icons. align-self:stretch ist hier nicht Kosmetik, sondern traegt die Positionierung des Such-Panels: Bootstrap gibt jeder .col ein `position:relative`, damit ist diese Spalte der Bezugsrahmen fuer das absolut gesetzte Dropdown darin — nicht die Navbar. War die Spalte nur 46 px hoch (Icongroesse), landete `top:100%` mitten im schwarzen Band (gemessen: Panel-Oberkante 158 statt 217). Auf voller Bandhoehe gestreckt heisst `top:100%` genau Bandunterkante. Die Icons bleiben mittig, das uebernimmt #shop-nav. */ #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper { grid-column: 3; order: 4; justify-self: end; align-self: stretch; width: auto !important; min-width: 0; padding: 0; flex: 0 0 auto; } #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper > #shop-nav { width: auto; height: 100%; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } } /* ============================================================================ 3 — LOGO: WEISSE FASSUNG AUF SCHWARZ Auftrag: originales Logo, weiss/invertiert, Distressed-Optik erhalten, nicht verzerren, nicht durch HTML-Text ersetzen. ---------------------------------------------------------------------------- Umgesetzt ueber invert(1) auf die vorhandene Datei fogsmoke-logo-v8*.png (schwarze Zeichnung auf transparentem Grund). Der Filter dreht nur die Farbkanaele, der Alphakanal bleibt unangetastet — die ausgefransten Kanten der Distressed-Optik bleiben deshalb Pixel fuer Pixel erhalten. Kein zweites Bild, kein zusaetzlicher Download, kein Austausch im Template. (Der Weg ist im Shop erprobt: derselbe Filter hat vor dem 20.08. die mobile weisse Fassung erzeugt.) ============================================================================ */ #jtl-nav-wrapper .hide-navbar .navbar-brand img, #jtl-nav-wrapper .hide-navbar #shop-logo { filter: invert(1); } @media (min-width: 992px) { #jtl-nav-wrapper .hide-navbar .navbar-brand img, #jtl-nav-wrapper .hide-navbar #shop-logo { /* Ansage Yunus 27.08.: "Logo kleiner". 280 -> 240 (-14 %). max-height geht im selben Verhaeltnis mit (68 -> 58), sonst verzerrt der object-fit-Kasten das Seitenverhaeltnis. */ /* dritte Verkleinerung (Ansage Yunus): 240 -> 205, max-height im gleichen Verhaeltnis 58 -> 50 */ width: 205px; max-height: 50px; object-position: center center; /* mittige Spalte, nicht linksbuendig */ } } /* ============================================================================ 4 — HAENDLERBEREICH Auftrag woertlich: vollstaendig rechteckig, vier harte 90-Grad-Ecken, border-radius 0, KEINE Spitze, KEIN clip-path, schwarzer Grund, scharfer 2px-Rahmen in Magenta, weisser Text, kleiner Magenta-Pfeil rechts. Icon-Bereich schwarz, Koffer in Magenta, duenne Magenta-Trennlinie. Hover: Textflaeche fuellt sich rechteckig von links nach rechts, Icon- Bereich bleibt schwarz, Text weiss, Pfeil weiss + 4px nach rechts, 200ms. ---------------------------------------------------------------------------- Das loest zugleich den F13-Keil ab (clip-path polygon) — ausdruecklich verlangt ("keine angeschnittene Aussenkante"). ============================================================================ */ @media (min-width: 992px) { #jtl-nav-wrapper .hide-navbar .fs-hd-haendler { position: relative; isolation: isolate; /* Ansage Yunus 27.08.: "Destkop: Haendler button insgesamt kleiner!" Alle Masse um denselben Faktor (~0,86) heruntergezogen, damit die Proportionen des Knopfes untereinander erhalten bleiben: Hoehe 58 -> 50 Iconfeld 64 -> 55 Pfeilfeld 44 -> 38 Schrift 21 -> 18 Koffer 26 -> 22 Damit steht er jetzt in klarem Verhaeltnis zum Lupenknopf (46px) statt ihn zu ueberragen. */ /* Zweite Verkleinerung (Ansage Yunus 27.08.: "Haendlerbereich kleiner"), wieder alle Masse mit demselben Faktor: Hoehe 50 -> 44 · Iconfeld 55 -> 48 · Pfeilfeld 38 -> 33 Schrift 18 -> 16 · Koffer 22 -> 19 · Pfeil 19 -> 17 Er sitzt damit unter dem Lupenknopf (46px) statt darueber. */ height: 44px; display: inline-grid; /* Icon-Feld QUADRATISCH (44x44) — in der Vorlage ist der magentafarbene Block ein Quadrat, kein Streifen. */ grid-template-columns: 44px auto 33px; align-items: stretch; overflow: hidden; background: var(--fsh-schwarz); color: var(--fsh-weiss); /* Vorlage 27.08.: KEINE 2px-Magentakante mehr um den ganzen Knopf, sondern eine duenne, zurueckhaltende Kante nur um die Textflaeche. Auf dem schwarzen Band als Weiss mit niedriger Deckung statt als Grauton — so bleibt sie unabhaengig davon richtig, falls das Band spaeter einen anderen Schwarzton bekommt. */ border: 1px solid rgba(255, 255, 255, .26); border-radius: 0; clip-path: none; /* nimmt den F13-Keil zurueck */ padding: 0; gap: 0; text-decoration: none; transition: transform 120ms ease; } /* Die Fuellung ist eine eigene Ebene hinter dem Inhalt und beginnt erst HINTER dem Icon-Feld (inset links = Breite des Icon-Felds), damit der Icon-Bereich beim Hover schwarz bleibt — so verlangt der Auftrag. */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 44px; background: var(--fsh-magenta); transform: scaleX(0); transform-origin: left center; transition: transform 200ms cubic-bezier(.22, 1, .36, 1); } #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:hover::before, #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:focus-visible::before { transform: scaleX(1); } /* Icon-Feld: schwarz, Koffer magenta, Magenta-Haarkante nach rechts */ /* Icon-Feld: MAGENTA GEFUELLT (vorher schwarz mit Magentakante). Die negativen Raender legen den Block ueber die duenne Kante des Knopfes — in der Vorlage laeuft das Magenta-Quadrat oben, unten und links randlos durch, die graue Kante beginnt erst rechts davon. Ohne die -1px blitzte die Kante als heller Saum um das Magenta. */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler > svg:first-child, #jtl-nav-wrapper .hide-navbar .fs-hd-haendler .fs-hd-ikon { display: grid; place-items: center; background: var(--fsh-magenta); border-right: 0; margin: -1px 0 -1px -1px; } #jtl-nav-wrapper .hide-navbar .fs-hd-haendler .fs-hd-ikon svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; /* Koffer jetzt SCHWARZ auf der Magentaflaeche (vorher magenta auf schwarz). Schwarz auf #c90f88 = 3,51:1 und damit ueber der 3:1-Schwelle, die fuer Bedienelemente und Symbole gilt. */ stroke: var(--fsh-schwarz); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Beschriftung: exakt "HAENDLERBEREICH", einzeilig, Anton */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler .fs-hd-text { align-self: center; padding: 0 8px 0 17px; font-family: var(--fs-v6-title); font-weight: 400; /* Anton hat nur einen Schnitt */ font-size: 16px; line-height: 1; letter-spacing: .015em; white-space: nowrap; color: var(--fsh-weiss); } /* Pfeil rechts */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler .fs-hd-pfeil { align-self: center; justify-self: center; width: 17px; height: 17px; color: var(--fsh-magenta); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: color 180ms ease, transform 180ms ease; } #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:hover .fs-hd-pfeil, #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:focus-visible .fs-hd-pfeil { color: var(--fsh-weiss); transform: translateX(4px); } /* Text bleibt beim Hover weiss (kein Farbwechsel), Knopf kein Glow */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:hover, #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:focus-visible { background: var(--fsh-schwarz); color: var(--fsh-weiss); box-shadow: none; } #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:active { transform: scale(.98); } #jtl-nav-wrapper .hide-navbar .fs-hd-haendler:focus-visible { outline: 2px solid var(--fsh-magenta); outline-offset: 4px; } /* Die alte zweizeilige Fassung (F13) hat keine Traeger mehr, die Regeln werden hier trotzdem stillgelegt, falls Markup zurueckkommt. */ #jtl-nav-wrapper .hide-navbar .fs-hd-haendler .fs-hz { display: none; } } /* ============================================================================ 5 — KOPF-ICONS RECHTS Auftrag: weisse Outline-Icons, transparenter/schwarzer Grund, KEINE runden Icon-Flaechen, Suche als quadratischer Knopf mit weisser Kontur, Warenkorb-Badge Magenta mit weisser Zahl, Funktionen und Links erhalten. Reihenfolge nach Referenz: Suche, Konto, Wunschliste, Warenkorb. ---------------------------------------------------------------------------- Die Icon-FORMEN bleiben unsere (fs-icons.css, Iconset Blocksatz v4.1) — hier stehen nur Farbe, Kastenmass und Anordnung. ============================================================================ */ @media (min-width: 992px) { /* Reihenfolge im Raster der Iconreihe */ #jtl-nav-wrapper .hide-navbar #shop-nav > #search { order: 10; } #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown { order: 20; } #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish { order: 30; } #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown { order: 40; } /* ⚠️ Der Abstand kommt als `gap` vom FLEX-CONTAINER, nicht als margin-left an den einzelnen Punkten. Grund, am Shop gemessen: mit Einzelraendern stand die Reihe 36 / **0** / 37 px — Konto und Wunschliste klebten aneinander. Die Wunschliste traegt eine ID (#shop-nav-wish) und damit eine hoehere Spezifitaet als meine .nav-item-Regel; ihr Rand blieb auf 0 und war mit einer Klassenregel nicht zu erreichen. `gap` liegt am Elternteil und kann von einzelnen Kindern gar nicht ueberschrieben werden — es wirkt zwischen ALLEN Punkten gleich, auch bei umsortierter `order`. Die Einzelraender werden dafuer ausdruecklich genullt, sonst addieren sie sich dazu. */ #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper > #shop-nav { gap: var(--fsh-icongap); } #jtl-nav-wrapper .hide-navbar #shop-nav > .nav-item, #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish, #jtl-nav-wrapper .hide-navbar #shop-nav > #search { padding: 0; margin-left: 0 !important; margin-right: 0 !important; } /* ⚠️ ZWEI zusaetzliche Linien, die NICHT von hier kommen: custom.css setzt ab 992px #jtl-nav-wrapper .account-icon-dropdown, #jtl-nav-wrapper .cart-icon-dropdown { border-left: 1px solid rgba(255,255,255,.15) } Weiss auf 15 % — auf der frueheren WEISSEN Kopfzeile war davon nichts zu sehen, deshalb ist die Regel jahrelang nicht aufgefallen. Auf dem neuen schwarzen Band leuchten beide ploetzlich auf und standen als zusaetzliche Striche vor Konto und Warenkorb (Befund Yunus 27.08.). custom.css bleibt unangetastet (shopweit, fremdes Revier), hier nur zurueckgesetzt. */ #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown, #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown, #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish { border-left: 0; border-right: 0; } /* Alle Trennstriche der V6-Fassung weg ... */ #jtl-nav-wrapper .hide-navbar #shop-nav > .fs-hd-item::before, #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before, #jtl-nav-wrapper .hide-navbar #shop-nav > #shop-nav-wish::before, #jtl-nav-wrapper .hide-navbar #shop-nav > .cart-icon-dropdown::before { display: none !important; content: none !important; } /* ... EINER kommt zurueck. Ansage Yunus 27.08.: "Anordnung Icons: SUCHE *STRICH* dann die restlichen ICONs". Die Lupe ist Nummer eins in der Reihe (order 10), Konto folgt als Nummer zwei (order 20) — der Strich gehoert also VOR das Konto. Er wird hier vollstaendig neu definiert statt der Altregel wiederbelebt: die stammt aus der weissen Zeile und war rgba(3,3,3,.10), auf Schwarz waere davon nichts zu sehen. left: calc(-0.5 * ) setzt ihn in die MITTE der Luecke zwischen Lupe und Konto, nicht an die Kante des Kontos. */ #jtl-nav-wrapper .hide-navbar #shop-nav > .account-icon-dropdown::before { display: block !important; content: "" !important; position: absolute; left: calc(-0.5 * var(--fsh-icongap)); top: 50%; width: 1px; height: 26px; margin-top: -13px; background: rgba(255, 255, 255, .30); pointer-events: none; } /* Icons weiss auf Schwarz (vorher schwarz auf Weiss) */ #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link { color: var(--fsh-weiss); background: transparent; border-radius: 0; } #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:hover, #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:focus-visible { color: var(--fsh-magenta); } #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link i.fas, #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link i.far { color: inherit; } #jtl-nav-wrapper .hide-navbar #shop-nav a.nav-link:focus-visible { outline: 2px solid var(--fsh-magenta); outline-offset: 4px; } /* Der Warenkorbpreis neben dem Symbol war schwarz */ #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .price, #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link .cart-icon-dropdown-price { color: var(--fsh-weiss); } /* --- Warenkorb-Badge: Magenta, weisse Zahl, RUND (Ansage Yunus 30.08.) --- Das ist zugleich die Erledigung von FEHLERLISTE F26: der Zaehler stand auf #e5169f (4,24:1 gegen Weiss) und liegt jetzt auf 5,37:1. 999px statt 50%: bei einstelliger Zahl ein Kreis (24x24), ab zwei Ziffern waechst min-width zur Pille statt zur Ellipse. Zentrierung per Grid + line-height 1, nicht ueber line-height=Hoehe: die Ziffer sitzt damit unabhaengig von den Font-Metriken mittig. */ #jtl-nav-wrapper .hide-navbar #shop-nav i .fa-sup { background: var(--fsh-magenta) !important; color: var(--fsh-weiss) !important; border-radius: 999px !important; min-width: 24px; height: 24px; /* myclean_crit.css deckelt .fa-sup mit max-height:20px — ein max-height schlaegt height bei JEDER Spezifitaet. Ohne diese Zeile rendert der Kreis 24x20, also oval. */ max-height: none; line-height: 1; display: inline-grid; place-items: center; padding: 0 6px; font-family: var(--fs-v6-body); font-weight: 700; font-size: 13px; text-align: center; } } /* --- Fokusring im schwarzen Band, fuer ALLE Elemente ------------------------ fs-redesign.css setzt `#jtl-nav-wrapper .hide-navbar a:focus-visible { outline: 3px solid var(--fs-v6-purple) }` — also #830779. Das stammt aus der Zeit, als dieses Band WEISS war (dort 9,24:1, tadellos). Auf der neuen schwarzen Flaeche sind es **2,04:1**: der Farbkontrakt sagt dazu ausdruecklich "darf Schwarz nicht beruehren". Wer sich mit der Tastatur durch den Kopf bewegt, saehe praktisch nicht, wo er steht. Meine Einzelregeln weiter unten decken Haendlerknopf und Iconfamilie ab — aber NICHT den Logo-Link und den Burger. Deshalb hier eine Regel fuer alles im Band. #c90f88 auf Schwarz = 3,51:1 und damit ueber der 3:1-Schwelle, die fuer Bedienelemente und Fokusanzeigen gilt. Gleiche Spezifitaet wie die Altregel, aber spaeter geladen -> gewinnt. ------------------------------------------------------------------------- */ @media (min-width: 992px) { #jtl-nav-wrapper .hide-navbar a:focus-visible, #jtl-nav-wrapper .hide-navbar button:focus-visible { outline: 2px solid var(--fsh-magenta); outline-offset: 4px; } } @media (max-width: 991.98px) { #jtl-nav-wrapper .hide-navbar a:focus-visible, #jtl-nav-wrapper .hide-navbar button:focus-visible { outline: 2px solid var(--fsh-magenta); outline-offset: 3px; } } /* ============================================================================ 6 — GESCHLOSSENE SUCHE + SCHWEBENDES PANEL Auftrag: im Normalzustand NUR ein quadratischer Knopf, harte Ecken, weisse Kontur, weisses Lupensymbol. Beim Klick oeffnet die vorhandene Suche als schwebendes Panel — ohne Layout-Shift, Escape und Aussenklick schliessen, Fokus ins Feld, aria-expanded korrekt, Suchvorschlaege intakt. ---------------------------------------------------------------------------- WICHTIG, NICHT ANFASSEN: Der Shop haengt mit der gesamten Suche an Doofinder, und dessen Ausloeser ist die Klasse .form-control.ac_input am Suchfeld. Hier wird ausschliesslich deren OPTIK gesetzt, nie die Klasse. Die Aufklapp-Mechanik ist bereits die von JTL (navitemdropdown -> snippets/search_form.tpl, genau EIN Formular auf der Seite). Bootstrap liefert Escape, Aussenklick und aria-expanded von Haus aus; fs-header.js ergaenzt nur den Fokus ins Feld. Es wird KEIN zweites Suchformular gebaut. Weil das Panel position:absolute ist, veraendert das Oeffnen weder die Headerhoehe noch die Position von Logo oder Icons — kein Layout-Shift. ============================================================================ */ @media (min-width: 992px) { #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search > a.nav-link, #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search > .nav-link { /* 46 -> 44 (Ansage Yunus): der Kasten wird 2px schmaler und steht damit exakt auf der Hoehe des Haendlerknopfes (ebenfalls 44px) — die beiden gerahmten Elemente im schwarzen Band sind jetzt gleich hoch. Die Kantenstaerke bleibt bei 2px. */ width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--fsh-weiss); border-radius: 0; background: transparent; color: var(--fsh-weiss); transition: border-color 180ms ease, color 180ms ease; } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search > .nav-link:hover, #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search > .nav-link:focus-visible, #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search.show > .nav-link { border-color: var(--fsh-magenta); color: var(--fsh-magenta); background: transparent; } /* Das Panel soll an der UNTERKANTE der schwarzen Flaeche haengen, nicht auf halber Hoehe aus dem Lupenknopf herausfallen. Dafuer wird der Bezugsrahmen um eine Ebene nach aussen gelegt: die Navbar (= das ganze schwarze Band) wird zum Containing Block, der Suchpunkt selbst gibt seinen ab (position:static). `top:100%` heisst dann Bandunterkante, `right:0` die rechte Containerkante — beides wie in der Referenz. Nur >=992px: mobil richtet fs-header.js das Menue selbst per left/right aus (Theme nimmt dort keine feste width an). */ /* ⚠️ Die Selektorkette ist absichtlich so lang. fs-redesign.css (F5) setzt `#jtl-nav-wrapper .hide-navbar #shop-nav > #search { position: relative }` — das sind DREI IDs. Ein kuerzerer Selektor verliert hier, egal wie weit hinten die Datei haengt: Spezifitaet schlaegt Reihenfolge. Mit `> #search.fs-v6-search` stehen es 3 IDs + 2 Klassen gegen 3 IDs + 1 Klasse. */ #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search { position: static; } /* Theme-Aufklappanimation fuer DIESES eine Dropdown abschalten. myclean.css gibt jedem Header-Dropdown visibility:hidden; opacity:0; transform:translateY(-15px); transition:.3s ease-in-out und dreht es per .show um. Das hat hier zwei Nebenwirkungen: 1. Der translateY(-15px) verschiebt das Panel um 15px nach oben und machte meine Positionierung an der Bandunterkante zunichte (gemessen als matrix(1,0,0,1,0,-15)). 2. `visibility` wird MIT-transitioniert und springt erst nach der halben Laufzeit auf visible. In einem noch unsichtbaren Teilbaum nimmt aber kein Eingabefeld den Fokus an — der Autofokus aus fs-header.js lief deshalb ins Leere (am Shop nachgestellt: "visibility=hidden … erfolg=false"). Ohne Animation ist das Panel im Moment von shown.bs.dropdown wirklich da, und der Fokus sitzt beim ersten Versuch. Der Auftrag verlangt ohnehin nur "oeffnen", keine Einblendung. */ #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .dropdown-menu { transition: none; transform: none; } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .dropdown-menu.show { transform: none; visibility: visible; opacity: 1; } /* Das schwebende Panel */ #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; margin-top: 0; width: min(560px, calc(100vw - 32px)); max-width: none; padding: 18px; background: var(--fsh-weiss); border: 2px solid var(--fsh-schwarz); border-radius: 0; box-shadow: 10px 10px 0 var(--fsh-glow-fern); z-index: 1080; /* ueber dem Mega-Menue-Panel */ } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .form-control.ac_input { height: 52px; border: 2px solid var(--fsh-schwarz); border-right: 0; border-radius: 0; background: var(--fsh-weiss); color: var(--fsh-schwarz); padding: 0 16px; box-shadow: none; } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .form-control.ac_input:focus { border-color: var(--fsh-magenta); box-shadow: none; outline: 0; } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .input-group-append .btn, #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .btn { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--fsh-schwarz); color: var(--fsh-weiss); } #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .btn:hover, #jtl-nav-wrapper .hide-navbar #shop-nav > #search.fs-v6-search .btn:focus-visible { background: var(--fsh-magenta); color: var(--fsh-weiss); } } /* ============================================================================ 7 — WEISSE NAVIGATIONSZEILE Auftrag: weisser Grund, schwarze Kategorienamen UND schwarze Dropdown- Pfeile. Beim Hover ausschliesslich der Name (und sein Pfeil) auf Magenta, dazu ein enger und ein schwaecherer Glow um die Buchstaben. Keine Unterstreichungen, keine Balken, keine ::before/::after-Linien, keine farbigen Hintergrundflaechen, keine Bewegung, 180ms. ============================================================================ */ @media (min-width: 992px) { #jtl-nav-wrapper .navbar-wrapper { background: var(--fsh-weiss) !important; /* schlaegt F10 */ min-height: var(--fsh-nav-h); border-bottom: 1px solid var(--fsh-kante); } /* F9/F10: der schwarze Kasten und der Magenta-Keil am linken Rand */ #jtl-nav-wrapper .navbar-wrapper > .container, #jtl-nav-wrapper .navbar-wrapper > .container-fluid { background: transparent; max-width: 1430px; margin: 0 auto; padding: 0 11px; } #jtl-nav-wrapper .navbar-wrapper > .container::before, #jtl-nav-wrapper .navbar-wrapper > .container-fluid::before, #jtl-nav-wrapper .navbar-wrapper::before, #jtl-nav-wrapper .navbar-wrapper::after { display: none !important; content: none !important; } #jtl-nav-wrapper .navbar-wrapper .navbar { min-height: var(--fsh-nav-h); } /* ⚠️ Ohne diese drei Zeilen wirkt space-between nicht. myclean_crit.css macht `header .nav-mobile-body` ab 992px zum GRID. Das Grid legt eine einzige IMPLIZITE Spalte an, und die wird so breit wie ihr Inhalt (gemessen 1.243 px) — nicht so breit wie der Container (1.393 px). Die Spalte wird dann mittig gesetzt. Folge: die Zeile stand 74 px vom linken und 76 px vom rechten Containerrand entfernt, und weil Inhalt = Spaltenbreite war, blieb fuer space-between GENAU 0 px zu verteilen — alle elf Punkte klebten aneinander. Ein `width:100%` am