/** * Fahrradshop24 – Blocksy-Header-Grundlayout + Design (Desktop) * --------------------------------------------- * Betrifft ausschließlich die echte Blocksy-Header-Builder-Ausgabe * (Selektoren immer unter "#header", Blocksys fester Wrapper-ID, * kombiniert mit den von Blocksy selbst generierten * data-row/data-column/data-id-Attributen). Diese Ausgabe existiert * nur, wenn eine Seite Blocksys Header-Builder-Render-Actions * ("blocksy:header:before"/"blocksy:header:after") direkt aufruft – * aktuell ausschließlich die isolierte Vorschauseite * (page-templates/blocksy-header-preview.php). Die normale * Ridez-header.php hat ihr eigenes, komplett anderes * "
"-Markup und nutzt diese * Attribute/IDs nie. Zusätzlich wird diese Datei ausschließlich auf * der Vorschauseite selbst geladen (siehe inc/header-search.php, * is_page_template()-Check) – doppelte Absicherung für die * Preview-Isolation. * * Design-Referenz: design-reference/index-mockup.html. Alle Farb-/ * Typografie-/Abstandswerte unten wurden NICHT aus Erinnerung * übernommen, sondern durch tatsächliches Laden der Mockup-Datei in * einem Headless-Browser und Auslesen der ECHTEN computed styles * gewonnen (die Datei enthält mehrere übereinanderliegende * CSS-Revisionspässe; nur so ist der tatsächliche Endzustand * zuverlässig bestimmbar). Kernbefund: Der Header im Mockup ist * bewusst DUNKEL (nahezu Schwarz), nicht hell/weiß – das Mega-Menü- * Panel selbst bleibt dabei aber WEISS (helles Flyout vor dunklem * Header). Konkret ausgelesene Werte (1440px, Datei direkt im * Browser geöffnet): * .site-header background:#0c0e0f * .header-main min-height:82px * .brand-logo-panel 70px hoch, background:#000, radius:12px, * padding:4px 14px, border:1px solid * rgba(17,19,21,.12) * .search 50px hoch, background:#1a1d1f, radius:14px, * border:1px solid rgba(255,255,255,.13) * .search button 42px hoch, background:#ef6a24, radius:10px * .action-btn 45x45px, background:#171a1c, radius:13px * (abgerundetes Quadrat, kein Kreis), border:1px * solid rgba(255,255,255,.13) * .badge background:#ef6a24, radius:99px (rund) * .main-nav background:#090b0c, 49px hoch * .nav-link KEIN text-transform:uppercase (normale Groß-/ * Kleinschreibung!), font-size:13.12px, * font-weight:830, color:rgba(255,255,255,.84), * hover: #fff + Akzent-Unterstrich * Diese Datei überträgt genau diese Werte, gescopt auf unseren * Header. Die Mega-Menü-Werte (weißes Panel, Radius, Schatten, * Gruppenüberschrift/Link-Typografie) sind separat in * blocksy-mega-menu.css übernommen – die dortige Gruppen-/Grid- * Struktur aus Commit 6a88a95a bleibt unangetastet, nur Farben/ * Typografie/Abstände wurden dort angepasst. * * Nur Desktop: derselbe Breakpoint wie im Mega-Menü-CSS * (min-width: 1000px, komplementär zu Blocksys eigenem * Tablet-Breakpoint "max-width: 999.98px"). */ /* ========================================================== Weißer Leerraum oberhalb des Headers – Ursache (READ-ONLY per CDP "getMatchedStylesForNode" ermittelt, nichts an der Ursache selbst verändert): Ein GLOBALER, site-weiter Eintrag im Plugin "Code Snippets" (DB-Tabelle "wps_snippets", ID 145, Name "Sticky Header", scope=global, aktiv) hängt sich unbedingt in "wp_footer" ein und gibt dort u. a. "body{padding-top:160px}" aus – gedacht als Platzhalter für einen Ridez-Alt-Header "#masthead{position:fixed}". Dieses "#masthead" existiert im aktuellen DOM nicht mehr (weder hier noch auf der Startseite, per Playwright bestätigt) – die Fixed-/Shrink-Logik dieses Snippets ist toter Code, die kompensierende "padding-top:160px" bleibt aber unbedingt und GLOBAL aktiv (betrifft nachweislich auch die aktuelle Startseite identisch). Eine Änderung/Deaktivierung DIESES Snippets wäre daher eine globale Änderung außerhalb des Scopes dieses Schritts – bewusst NICHT angefasst (siehe Rückmeldung an Friedemann). Stattdessen ausschließlich hier, in genau dieser ohnehin nur auf der Vorschauseite geladenen Datei (siehe inc/header-search.php, is_page_template()), eine gezielte Gegen-Regel, beschränkt auf die von WordPress automatisch vergebene, für dieses eine Seiten- Template einzigartige Body-Klasse – keine negative Margin, keine absolute Positionierung, keine Änderung an der globalen Ursache selbst, keine Auswirkung auf irgendeine andere Seite. */ body.page-template-page-templatesblocksy-header-preview-php { padding-top: 0; } /* ========================================================== Geteilte Topbar-/Hotline-Texte (siehe header-config-snapshot.json, Items "text~fs24-topinfo"/"text~fs24-hotline"): dasselbe Blocksy- Text-Item "text~fs24-hotline" wird jetzt an DREI Stellen platziert – Desktop-Topbar, die neue Mobile-Topbar (beide [data-row="top"] innerhalb "#header") UND weiterhin im Offcanvas ("#offcanvas", ein von "#header" getrenntes Blocksy-Panel, siehe erste Mobile- Runde). Damit die neue Mobile-Topbar eine kürzere Variante zeigen kann, OHNE den Desktop- oder Offcanvas-Text zu verändern, ist das HTML bereits in zwei parallele Spans gesplittet ("Service-Hotline:" / "Service:"). Diese Regel hier ist bewusst NICHT in eine Media Query gesetzt und bewusst NICHT auf "#header" beschränkt (deckt damit auch "#offcanvas" ab) – der eine gemeinsame Default für alle drei Stellen: die Kurzform "Service:" bleibt standardmäßig unsichtbar, die Langform "Service-Hotline:" bleibt standardmäßig sichtbar – exakt der bisherige, unveränderte Text. Erst die Mobile-Topbar-Regel weiter unten (gescopt auf genau diese eine Stelle) dreht das dort gezielt um. */ .fs24-topbar-hotline-label-short { display: none; } @media (min-width: 1000px) { /* ========================================================== 0) Gemeinsamer Content-Container: Header (Topbar/Hauptzeile/ Navigation) links/rechts exakt auf derselben Linie wie das große Bild-/Produktraster der echten Seite. Referenz war NICHT der schmale Platzhalter-Textblock dieser isolierten Vorschauseite, sondern design-reference/index-mockup.html, dessen ".container"-Klasse (per Playwright/DOM auf der Mockup-Datei ausgelesen) exakt dieselbe Formel/Werte verwendet wie die tatsächliche Fahrradshop24-Frontpage (".container header-main"/".container"-Produktraster – per Vergleich identisch, echte Produktbilder liegen dort exakt an dieser Kante): "width: min(calc(100% - 52px), 1540px); margin-inline: auto" (≥1221px), darunter (Mockup-Breakpoint "max-width:1220px") "min(calc(100% - 36px), 1540px)". 1540px = "--max" aus dem Mockup, in unserem Breite-Bereich nie die bindende Grenze. Keine festen margin-left/right-Pixelwerte – dieselbe responsive Formel wie im Mockup, in beide Richtungen frei mitskalierend. "max-width" zusätzlich zu "width" nötig: Blocksys eigener ".ct-container" bringt standardmäßig ein eigenes "max-width:1290px" mit (site-globaler Container-Width-Wert) – das kappt eine reine "width"-Angabe bei Breiten >1290px zurück (max-width gewinnt gegenüber width), genau bei 1440px per CDP-Messung bemerkt (1228px/988px bei 1280px/1024px blieben unter 1290px und waren dadurch zufällig schon unbetroffen). */ #header [data-device="desktop"] [data-row="top"] > .ct-container, #header [data-device="desktop"] [data-row="middle"] > .ct-container, #header [data-device="desktop"] [data-row="bottom"] > .ct-container { width: min(calc(100% - 52px), 1540px); max-width: min(calc(100% - 52px), 1540px); margin-left: auto; margin-right: auto; } /* ========================================================== 1) Logo/Suche-Zeile als Grid: Logo bekommt nur so viel Breite wie nötig, Suche bekommt den gesamten verbleibenden Platz, dritte Spalte für die Aktionsgruppe (Konto/Wishlist/Warenkorb). Zusätzlich 24px Innenabstand links (nicht rechts) – exakt der Abstand, den das Mockup zwischen Container-Kante und Logo-Box verwendet ("brand-logo-panel" hat dort "margin-left:24px" auf denselben Container bezogen); Topbar/Navigation bekommen diesen Zusatzabstand bewusst NICHT (im Mockup dort beide flächenbündig mit der Container-Kante). Die Aktionsgruppe bleibt rechts ohne Zusatzabstand – im Mockup sitzt der letzte Action-Button ebenfalls flächenbündig mit der rechten Container-Kante. */ #header [data-device="desktop"] [data-row="middle"] > .ct-container { display: grid; grid-template-columns: auto minmax(320px, 1fr) auto; align-items: center; gap: 32px; min-height: 82px; padding-top: 14px; padding-bottom: 14px; padding-left: 24px; } #header [data-device="desktop"] [data-row="middle"] [data-column="start"] { grid-column: 1; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] { grid-column: 2; width: 100%; display: flex; align-items: center; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] { grid-column: 3; min-width: 132px; display: flex; align-items: center; } /* Logo/Suche/Aktionsgruppe auf eine gemeinsame vertikale Mittelachse: alle drei Spalten füllen die volle Zeilenhöhe (82px), Blocksys eigene Default-Ausrichtung zentriert dabei nur "start" (Logo) automatisch (per CDP-Messung bestätigt), "middle" (Suche) und "end" (Aktionsgruppe) blieben ohne dies oben ausgerichtet – daher hier explizit "display:flex; align-items:center" auf beiden Spalten, damit ihr jeweiliger Inhalt exakt wie beim Logo mittig in der 82px-Zeile sitzt. */ /* Zweite, tatsächliche Ursache derselben Achsen-Abweichung (per CDP "getMatchedStylesForNode" auf den Konto-Link zurückverfolgt): Blocksys "Text"-Item wickelt das Icon in "
" ein – diese Klasse stammt von Gutenbergs eigenem Block-Spacing-Mechanismus. Dessen globale Regel ":is(.is-layout-flow) > :where(:not(h1,h2,h3,h4,h5,h6)) { margin-block-end: var(--theme-content-spacing) }" verpasst dem Konto-/Wunschlisten-Link automatisch 22,5px Abstand nach unten (gedacht für normalen Absatz-Content, nicht für ein einzelnes Icon) – dadurch wurde die Box von ".entry-content" 68px statt 45px hoch, und das Icon rutschte aus der gemeinsamen Achse. Das native Warenkorb-Item hat keinen ".entry-content"-Wrapper und ist davon nicht betroffen, saß deshalb schon vorher korrekt zentriert. Dieselbe Ursache betraf auch das Suchfeld-Text-Item in der "middle"-Spalte (identischer ".entry-content"-Wrapper um "[fs24_product_search]"). Fix: genau diesen einen Margin-Wert gezielt auf 0 setzen, in beiden Spalten – keine Änderung an Gutenbergs globaler Regel selbst. */ #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] .entry-content > *, #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items="primary"] .entry-content > * { margin-block-end: 0; } /* ========================================================== 2) Header-Grundfarbe: dunkler Header, wie im Mockup (.site-header/.header-main/.main-nav – siehe Dateikopf- Kommentar). Alle drei Blocksy-Zeilen (top-row/middle-row/ bottom-row) bekommen denselben dunklen Ton, damit der Header als EIN zusammenhängendes Element wirkt statt als helle/dunkle Streifen nebeneinander. Text/Icons in diesen Zeilen werden in den folgenden Abschnitten gezielt auf helle Farben umgestellt. ========================================================== */ #header [data-device="desktop"] [data-row="top"], #header [data-device="desktop"] [data-row="middle"], #header [data-device="desktop"] [data-row="bottom"] { background: #0c0e0f; } /* Topbar (".topbar" im Mockup) einen Hauch dunkler als die Hauptzeile – exakter Wert aus dem Mockup übernommen. */ #header [data-device="desktop"] [data-row="top"] { background: #080a0b; } #header [data-device="desktop"] [data-row="bottom"] { background: #090b0c; border-top: 1px solid rgba(255, 255, 255, 0.09); } /* ========================================================== 3) Logo: dunkle, abgerundete Box um das bestehende Blocksy- Logo-Element (".site-logo-container", von Blocksys eigenem "site-branding"-Item erzeugt – keine neue Markup-Struktur, nur CSS auf dem bereits vorhandenen Link). Logo-Bilddatei unverändert. Bewusst KEIN eigenes "height" hier: Blocksys natives "Logo Height"-Feld (theme_mods logoMaxHeight, siehe header-config-snapshot.json, aktuell 66px – hochgesetzt von vorher 56px, da das Mockup sichtbar eine größere Logo-Proportion zeigt) setzt bereits selbst ".site-logo-container { height: var(--logo-max-height) }" (wp-content/themes/blocksy/static/sass/frontend/5-modules/ header/site-title.scss). Ein erster Versuch mit zusätzlichem eigenem "height" auf demselben Element überschrieb diesen Wert durch reine CSS-Spezifität komplett (per Screenshot/computed style entdeckt: Logo blieb bei jeder Slider-Änderung optisch gleich groß) – der Blocksy-Regler wäre dadurch dauerhaft wirkungslos geworden. Hier deshalb nur noch die rein dekorative Box (Hintergrund/Rahmen/Radius/seitlicher Innenabstand), die Höhe bleibt allein Blocksys eigene Zuständigkeit. ========================================================== */ #header [data-device="desktop"] .site-branding .site-logo-container { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } /* ========================================================== 4) Große Suche: dunkles Feld mit orangem Button, wie im Mockup. Nur Optik – das Formular selbst (WooCommerce- Produktsuche, siehe inc/header-search.php) bleibt unverändert. ========================================================== */ #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] .ct-header-text { width: 100%; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] .fs24-header-search { width: 100%; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; position: relative; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px; background: #1a1d1f; overflow: hidden; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search:focus-within { border-color: rgba(255, 122, 56, 0.7); box-shadow: 0 0 0 4px rgba(255, 100, 24, 0.13); } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search input.search-field { width: 100%; min-height: 50px; padding: 0 62px 0 18px; color: #fff; background: transparent; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search input.search-field::placeholder { color: rgba(255, 255, 255, 0.5); } /* Blocksys eigenes ".ct-search-form"-Positionierungssystem (data-form-controls="inside") setzt eine zusätzliche ".ct-search-form-inner"-Wrapper-
voraus, die das von WooCommerce-Core geladene, ebenfalls von Blocksy selbst bereitgestellte Template (wp-content/themes/blocksy/woocommerce/product-searchform.php) nicht ausgibt – Eingabefeld und Such-Button fielen dadurch in den normalen Blockfluss statt nebeneinander zu stehen. Fix: Button innerhalb des (jetzt umrahmten) Formulars rechts, vertikal zentriert, mit Mockup-Orange eingefärbt. */ #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search button { position: absolute; top: 4px; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; width: 42px; padding: 0; border-radius: 10px; background: #ef6a24; } #header [data-device="desktop"] [data-row="middle"] [data-column="middle"] form.woocommerce-product-search button svg { fill: #fff; } /* ========================================================== 5) Aktionsgruppe (Konto/Wunschliste/Warenkorb): einheitliche dunkle, abgerundete Icon-Boxen wie Mockups ".action-btn" (45x45px, radius 13px – bewusst ein abgerundetes Quadrat, kein Kreis). ".fs24-header-action" trifft Konto+Wunschliste (siehe inc/header-actions.php); der Warenkorb ist Blocksys eigenes natives Element (".ct-cart-item") und bekommt dieselbe Box separat zugewiesen, da er nicht dieselbe Klasse trägt. Ursache des zu dunkel wirkenden Warenkorb-Icons (gefunden per DOM-Vergleich): Unser eigenes Konto-/Wunschlisten-Markup (inc/header-actions.php) setzt bewusst die Klasse "ct-icon" auf das . Blocksys eigenes Warenkorb-Template (inc/panel-builder/header/cart/view.php) gibt sein dagegen OHNE jede Klasse aus – die Icon-Farb-Regel unten traf dadurch nie zu, das Warenkorb-Icon blieb bei Blocksys eigenem dunklen Standard-Textfarbton (~#3a4f66) hängen statt der hellen Icon-Farbe. Fix: zusätzlich direkt auf ".ct-cart-item svg" zielen statt auf ".ct-icon" zu bestehen – kein "!important"-Override, echte Ursache behoben. ========================================================== */ #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .fs24-header-action, #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-cart-item { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: #171a1c; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 13px; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .fs24-header-action:hover, #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-cart-item:hover { border-color: rgba(255, 100, 24, 0.5); background: #222629; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .fs24-header-action .ct-icon, #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-cart-item svg { fill: rgba(255, 255, 255, 0.9); } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [class*="ct-dynamic-count"] { background: #ef6a24; color: #fff; border-color: #101214; } /* ========================================================== 6) Topbar (top-row): schmale Informationszeile wie im Mockup (".topbar"/".topbar-items"/".top-help", computed styles geprüft). Inhalt kommt als reines statisches HTML (kein dynamischer WP-/WooCommerce-Wert nötig) über zwei neue Blocksy-"Text"-Items (theme_mods, siehe header-config-snapshot.json) – kein neuer Shortcode, da hier nichts Datenbank-Abhängiges gerendert wird. ========================================================== */ #header [data-device="desktop"] [data-row="top"] > .ct-container { min-height: 35px; display: flex; align-items: center; justify-content: space-between; } #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items { display: flex; align-items: center; gap: 26px; font-size: 12px; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.77); } /* Erster Eintrag ("Fahrradshop24.com: Fachhandel vom Bodensee") bekommt den orangen Akzent aus dem Mockup, alle anderen bleiben im ruhigen Grauton. */ #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items strong { color: #ff7b38; font-weight: 700; } /* Versandzeile jetzt komplett verlinkt (/versand-lieferung/) – Link übernimmt exakt die bisherige Textfarbe/-optik der Zeile statt Browser-Standard-Linkfarbe/-Unterstrich, damit sich an der bestehenden Topbar-Optik nichts ändert; Unterstrich nur als dezenter Hover-/Fokus-Hinweis. */ #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items a { color: inherit; text-decoration: none; } #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items a:hover, #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items a:focus-visible { text-decoration: underline; } #header [data-device="desktop"] [data-row="top"] .fs24-topbar-hotline { font-size: 12px; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.77); white-space: nowrap; } /* ========================================================== 7) Widerruf-Link: direkt unter der Aktionsgruppe statt isoliert oben. Die Spalte "end" der Hauptzeile enthält jetzt 4 Items (Konto, Wunschliste, Warenkorb, Widerruf). Ein erster Versuch mit "flex-wrap:wrap" + "flex-basis:100%" auf dem Widerruf-Item hat zwar den Zeilenumbruch erzeugt, aber die vertikale vom Auftraggeber geforderte ~2px-Mittelachse von Logo/Suche/Aktionsgruppe zerstört: die äußere Grid-Zeile (".ct-container", align-items:center) sowie der Flex-Wrapper selbst (align-items:center) zentrieren ihre Kinder anhand der GESAMTEN Blockhöhe – durch die zusätzliche Widerruf-Zeile wurde dieser Block spürbar höher als Logo/Suche, wodurch die 3-Icon-Zeile nach oben aus der gemeinsamen Achse rutschte (per CDP-Messung: bis zu 24px Abweichung). Lösung: Widerruf komplett aus dem normalen Fluss nehmen ("position:absolute"), damit seine Höhe weder den Flex-Wrapper noch die Grid-Zeile beeinflusst – Logo/Suche/Icons bleiben auf exakt derselben Achse wie zuvor, Widerruf hängt lediglich visuell direkt darunter, rechtsbündig zur Gruppe. ========================================================== */ #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items="primary"] { position: relative; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items="primary"] > [data-id="fs24-l"] { position: absolute; top: 100%; right: 0; margin-top: 6px; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .fs24-header-widerruf { font-size: 12px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] .fs24-header-widerruf:hover { color: rgba(255, 255, 255, 0.9); } /* ========================================================== 8) Navigationszeile: Typografie an das Mockup angeglichen. Blocksys Default gibt hier normalerweise "text-transform:uppercase" + kleine, kräftig-blaugraue Schrift vor (siehe Bestandsprüfung vor dieser Änderung) – das Mockup verwendet dagegen normale Groß-/Kleinschreibung, helle Schrift auf dunklem Grund und einen einblendenden Akzent-Unterstrich beim Hover (rein CSS, kein JavaScript). WICHTIG: Alle Selektoren hier verwenden ausschließlich direkte Kind-Kombinatoren (">") von "ul.menu > li > a.ct-menu-link", um sich strikt auf die 6 Top-Level-Hauptpunkte zu beschränken. Grund: ".ct-menu-link" ist dieselbe Klasse, die auch die Kategorie-Links INNERHALB der Mega-Menü-Panels tragen (siehe blocksy-mega-menu.css) – eine reine Nachfahren-Selektion (nur Leerzeichen) hätte beim ersten Versuch dieser Datei versehentlich auch die Mega-Menü-Links weiß eingefärbt und dadurch auf dem weißen Mega-Menü-Panel unsichtbar gemacht (per Screenshot entdeckt und hier korrigiert). ========================================================== */ #header [data-device="desktop"] [data-row="bottom"] > .ct-container { min-height: 49px; display: flex; align-items: center; justify-content: center; } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu { gap: 28px; } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu > li > a.ct-menu-link { position: relative; padding: 0; min-height: 49px; text-transform: none; font-size: 13px; font-weight: 830; color: rgba(255, 255, 255, 0.84); } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu > li > a.ct-menu-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: #ef6a24; transition: right 0.25s ease; } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu > li.menu-item:hover > a.ct-menu-link { color: #fff; } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu > li.menu-item:hover > a.ct-menu-link::after { right: 0; } #header [data-device="desktop"] #header-menu-1.menu-container > ul.menu > li > .ct-toggle-dropdown-desktop-ghost svg { fill: rgba(255, 255, 255, 0.6); } } /* ========================================================== Schmalere Container-Formel unterhalb des Mockup-Breakpoints "max-width:1220px" (deckt unseren 1024px-Test ab) – exakt aus dem Mockup übernommen (dort ab "@media (max-width:1220px)": ".container { width: min(calc(100% - 36px), var(--max)) }"). Eigener, hier absichtlich SPÄTER stehender Block statt Verschachtelung (reines CSS kennt keine verschachtelten "@media"-Regeln) – überschreibt Abschnitt 0 des Hauptblocks oben per Kaskade/Reihenfolge innerhalb von 1000–1220px korrekt. ========================================================== */ @media (min-width: 1000px) and (max-width: 1220px) { #header [data-device="desktop"] [data-row="top"] > .ct-container, #header [data-device="desktop"] [data-row="middle"] > .ct-container, #header [data-device="desktop"] [data-row="bottom"] > .ct-container { width: min(calc(100% - 36px), 1540px); max-width: min(calc(100% - 36px), 1540px); } /* ========================================================== Bekannter Übergangsbug bei ~1024px (Playwright bestätigt): Die volle Topbar (Claim + 2 Zusatztexte links, Hotline rechts) passt bei dieser Zwischenbreite nicht mehr nebeneinander in eine Zeile und bricht auf zwei Zeilen um ("justify-content: space-between" + "flex-wrap" der Kind-Spans, keine feste Höhe auf [data-row="top"]) – dadurch wächst die sonst schmale Topbar-Zeile ungleichmäßig. Fix: in genau diesem schmalen Desktop-Zwischenbereich dieselbe Reduktion wie auf Mobile (Abschnitt weiter unten) – nur die fett hervorgehobene Kernaussage bleibt sichtbar, die zwei sekundären Infotexte werden ausgeblendet. Ab 1221px (Hauptblock oben) unverändert alle drei Texte sichtbar, da dort nachweislich genug Platz ist. ========================================================== */ #header [data-device="desktop"] [data-row="top"] .fs24-topbar-items span:not(:first-child) { display: none; } } /* ========================================================== MOBILE (< 1000px, Blocksys eigener Umschaltpunkt zwischen "[data-device=desktop]" und "[data-device=mobile]" – per Playwright bestätigt: 999px zeigt noch die Desktop-Zeile, 1000px bereits Logo+Trigger). Eigener, bewusst getrennter Mobile-Entwurf statt verkleinerter Desktop-Zeile (Auftrag §6/§7): eigene, knappe Topbar-Zeile, eigene kompakte Logo/Trigger-Zeile, eigene volle Such-Zeile darunter, eigenes Offcanvas-Design. Alle Selektoren ausschließlich unter "#header [data-device=mobile]" bzw. "#offcanvas .ct-panel-content[data-device=mobile]" – betrifft nachweislich nie die Desktop-Zeile (siehe Playwright-Check: beide "[data-device]"-Zweige sind komplett getrennte DOM-Äste, nicht nur per CSS versteckt) und nie die alte Ridez-header.php. ========================================================== */ @media (max-width: 999px) { /* ========================================================== 0) Gemeinsamer Innenabstand, dieselbe responsive Container-Formel wie im Mockup unterhalb von 900px (".container { width:min(calc(100% - 24px), var(--max)) }"). ========================================================== */ #header [data-device="mobile"] [data-row] > .ct-container { width: min(calc(100% - 24px), 1540px); max-width: min(calc(100% - 24px), 1540px); margin-left: auto; margin-right: auto; } /* ========================================================== 1) Topbar (top-row): links nur noch "Fachhandel vom Bodensee" (das "Fahrradshop24.com:"-Präfix ist redundant, steht bereits im direkt darunterliegenden Logo – siehe finaler Mobile-Polish- Auftrag §2), rechts neu "Service: +49 7551 948255" (bewusst ZUSÄTZLICH zur weiterhin bestehenden Hotline im Offcanvas, nicht als Ersatz – §15). Beide Texte sind dasselbe geteilte Blocksy- Item wie am Desktop (siehe Kommentar am Dateianfang), hier nur anders zusammengesetzt/gekürzt. Eine schmale, ruhige Zeile in derselben dunklen Familie wie der restliche Header. ========================================================== */ #header [data-device="mobile"] [data-row="top"] { background: #080a0b; } #header [data-device="mobile"] [data-row="top"] > .ct-container { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ========================================================== Ursache für einen ~11px-Höhenversatz zwischen den beiden Topbar-Texten (per Playwright getBoundingClientRect() bestätigt): Blocksys eigener Item-Wrapper ".ct-header-text" ist zwar bei beiden Seiten "display:flex; align-items:center", sein direktes Kind ".entry-content" (Blocksys Block-Wrapper um den freien Text-Item-Inhalt) verhält sich dabei aber je nach Inhalt unterschiedlich: beim rechten Item (reiner ""-Inline-Inhalt) bleibt ".entry-content" auf seine Content-Höhe geschrumpft und wird dadurch von der Flex-Zentrierung sauber mittig positioniert; beim linken Item (Inhalt ist ".fs24-topbar-items", selbst "display:flex", siehe unten) streckt sich ".entry-content" stattdessen auf die volle Zeilenhöhe und der Text sitzt dadurch oben statt mittig. Fix an der eigentlichen Ursache (kein Einzel-Margin): ".entry-content" hier für beide Seiten gleichermaßen selbst zu einem zentrierenden Flex-Container machen, unabhängig vom jeweiligen Inhaltstyp – damit bekommen beide Texte denselben, expliziten Zentrierungsmechanismus statt sich auf Blocksys uneinheitliches Auto-Verhalten zu verlassen. ========================================================== */ #header [data-device="mobile"] [data-row="top"] .ct-header-text > .entry-content { display: flex; align-items: center; height: 100%; } #header [data-device="mobile"] [data-row="top"] .fs24-topbar-items { display: flex; min-width: 0; font-size: 11.5px; letter-spacing: 0.01em; line-height: 1.3; } #header [data-device="mobile"] [data-row="top"] .fs24-topbar-items span:not(:first-child) { display: none; } /* "Fahrradshop24.com: " ausblenden (steht bereits im Logo direkt darunter) – nur der eigentliche Claim "Fachhandel vom Bodensee" bleibt übrig, in derselben Orange-Akzentfarbe wie zuvor der gesamte Text. */ #header [data-device="mobile"] [data-row="top"] .fs24-topbar-brand { display: none; } #header [data-device="mobile"] [data-row="top"] .fs24-topbar-items strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Exakt dasselbe Orange wie der Hintergrund des mobilen Such-Buttons (".fs24-header-search button" / "input[type=submit]") – per Playwright/getComputedStyle aus dem tatsächlich gerenderten DOM ausgelesen: "rgb(239, 106, 36)" = "#ef6a24". Kein geschätzter/ähnlicher Ton. */ color: #ef6a24; /* Gleiche Schriftstärke wie der rechte Service-Text (".fs24-topbar-hotline" setzt hier bewusst kein eigenes font-weight, bleibt also beim Browser-Standard "normal"/400 – per Playwright/getComputedStyle bestätigt). Nur auf Mobile angeglichen; die Desktop-Regel (Zeile ~425) bleibt mit ihrem eigenen font-weight:700 unangetastet. */ font-weight: 400; } /* Rechte Seite: Hotline, mit der kurzen "Service:"-Beschriftung statt "Service-Hotline:" (§2/§15 – die Default-Regel am Dateianfang zeigt sonst die lange Desktop-Form). */ #header [data-device="mobile"] [data-row="top"] .fs24-topbar-hotline { flex: 0 0 auto; font-size: 11.5px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.77); white-space: nowrap; } #header [data-device="mobile"] [data-row="top"] .fs24-topbar-hotline-label-full { display: none; } #header [data-device="mobile"] [data-row="top"] .fs24-topbar-hotline-label-short { display: inline; } /* ========================================================== 2) Logo/Schnelllinks/Trigger-Zeile: kompakt, vertikal zentriert, keine unnötig hohe Kopfzeile (§6/§8 der ersten Mobile-Runde). Logo-Box optisch wie am Desktop (dunkle abgerundete Box), aber sichtbar kleiner – bewusst NICHT über ein eigenes "height" auf ".site-logo-container" gelöst (siehe Kommentar weiter oben / inc/header-config-restore.md: das würde Blocksys eigene Regel "height:var(--logo-max-height)" per Spezifität überschreiben und den Customizer-Regler wirkungslos machen), sondern über genau diese CSS-Variable selbst, gescopt auf Mobile – Blocksys eigene Regel bleibt unangetastet, liest hier innerhalb des Headers nur einen anderen Wert. Logo im finalen Polish-Schritt moderat vergrößert (38px -> 46px, §10 des Polish-Auftrags), im Gegenzug die Zeile selbst etwas höher (60px -> 64px), damit die Logo-Box nicht an den Rand der Zeile stößt. Drei Spalten (Logo/Schnelllinks/Trigger) statt bisher zwei: "justify-content:space-between" allein reicht dafür nicht mehr (drei Kinder würden gleichmäßig verteilt statt Logo/Trigger an den Rändern zu halten) – Logo und Trigger bekommen daher "flex:0 0 auto", die Schnelllinks-Spalte "flex:1 1 auto" und füllt/verteilt den Rest (Abschnitt 2b unten), alle drei auf derselben Zeilenhöhe zentriert (§11: gemeinsame Mittelachse). ========================================================== */ #header [data-device="mobile"] [data-row="middle"] { background: #0c0e0f; } #header [data-device="mobile"] [data-row="middle"] > .ct-container { display: flex; align-items: center; min-height: 64px; padding-top: 8px; padding-bottom: 8px; gap: 6px; } #header [data-device="mobile"] [data-row="middle"] [data-column="start"] { flex: 0 0 auto; display: flex; align-items: center; } #header [data-device="mobile"] [data-row="middle"] [data-column="middle"] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; } #header [data-device="mobile"] [data-row="middle"] [data-column="end"] { flex: 0 0 auto; display: flex; align-items: center; } #header [data-device="mobile"] .site-branding .site-logo-container { --logo-max-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Touch-Ziel: Blocksys Trigger ist von Haus aus quadratisch, aber ohne eigene Mindestgröße – hier auf ein komfortables 44x44px gebracht (WCAG-Zielgröße) und optisch an die übrigen dunklen Icon-Boxen angeglichen. */ #header [data-device="mobile"] .ct-header-trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #171a1c; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 12px; } #header [data-device="mobile"] .ct-header-trigger .ct-icon rect { fill: rgba(255, 255, 255, 0.9); } /* ========================================================== 2b) Schnelllinks (E-Bikes/Fahrräder/Zubehör & Teile) – reine Zusatz-Direktlinks zwischen Logo und Burger (§3/§4/§9 des Polish-Auftrags), ersetzen NICHT den Burger. Kompakte Mobile- Navigation statt großer Buttons: helle Schrift auf dunklem Header, "white-space:nowrap", vertikal exakt auf derselben Achse wie Logo/Trigger (durch "align-items:center" auf dem gemeinsamen Elternflex, Abschnitt 2 oben). Dieselbe Gutenberg-Block-Spacing-Ursache wie am Desktop bereits dokumentiert (siehe Abschnitt 1 im Desktop-Block oben, dort für [data-column="middle"]/[data-column="end"] bereits gefixt): Blocksys "Text"-Item wickelt den Shortcode-Output in "
", dessen globale Regel ":is(.is-layout-flow) > :where(...) { margin-block-end: var(--theme-content-spacing) }" der "