/* ========================================================================= Kopfzeile und Burger-Menue – gilt auf JEDER Seite Bewusst von `fm.css` getrennt: die Kopfzeile ist ueberall dieselbe. Stuende das hier in `fm.css`, gaelte es nur auf Home, How To und Product Select, und auf dem Warenkorb, an der Kasse und auf den Rechtstextseiten saehe das Menue wieder anders aus. WAS IM BURGER-MENUE STEHT, KOMMT NICHT AUS EINEM MENUE. Dem mobilen Menue ist in WordPress kein Menue zugewiesen. Blocksy faellt dann auf `wp_list_pages()` zurueck – erkennbar an den Klassen `page_item page-item-` statt `menu-item`. Deshalb stehen dort ALLE veroeffentlichten Seiten, alphabetisch sortiert und mit dem Seitentitel so geschrieben, wie er im Backend eingetragen ist: Checkout · HOW TO · Legal Notice · Privacy Policy · PRODUCT SELECT · Terms & Conditions · Warenkorb Daher beides: die uneinheitliche Schreibweise und die Rechtstexte mitten im Menue. Die Regeln unten raeumen genau das auf. DAUERHAFTER WAERE EIN ECHTES MENUE (Design -> Menues -> Position „Mobile Menu"). Dann bestimmt die Reihenfolge dort, was hier steht, und diese Datei braucht nur noch die Grossschreibung. Solange keines zugewiesen ist, traegt sie beides. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Alles gross ------------------------------------------------------------------------- „Legal Notice", „Privacy Policy", „Terms & Conditions", „Checkout" und „Warenkorb" stehen so im Seitentitel; „HOME", „HOW TO" und „PRODUCT SELECT" sind schon gross eingetragen. `uppercase` schadet den bereits grossen nicht und zieht die uebrigen nach. ------------------------------------------------------------------------- */ #offcanvas .ct-menu-link, [data-id="mobile-menu"] .ct-menu-link, [data-id="mobile-menu"] a { text-transform: uppercase; } /* ------------------------------------------------------------------------- 2. Rechtstexte ans Ende ------------------------------------------------------------------------- Die Liste ist ein Flex-Container (Blocksy stellt das mobile Menue so dar), also laesst sich die Reihenfolge mit `order` aendern, ohne das Markup anzufassen. Ohne Angabe steht jedes Element auf `order: 0` und behaelt seinen Platz; die drei hier bekommen einen hoeheren Wert und rutschen dadurch hinter alle anderen. Angesprochen werden sie ueber ihre Seiten-ID, nicht ueber die Adresse – ein Seitentitel oder eine Adresse kann sich aendern, die ID nicht: 1256 Legal Notice 1257 Privacy Policy 1258 Terms & Conditions Sollten die Klassen einmal fehlen (etwa weil doch ein echtes Menue zugewiesen wurde), greifen die Regeln einfach nicht – die Eintraege stehen dann in der Reihenfolge des Menues, was ohnehin der bessere Zustand ist. ------------------------------------------------------------------------- */ #offcanvas [data-id="mobile-menu"] > ul, #offcanvas .mobile-menu > ul { display: flex; flex-direction: column; } #offcanvas .page-item-1256 { order: 90; } /* Legal Notice */ #offcanvas .page-item-1257 { order: 91; } /* Privacy Policy */ #offcanvas .page-item-1258 { order: 92; } /* Terms & Conditions */ /* ------------------------------------------------------------------------- 3. Die Kopfzeile bleibt auch auf dem Handy oben ------------------------------------------------------------------------- Am Schreibtisch klebt sie, auf dem Handy scrollte sie weg. Der Grund steckt im Aufbau, nicht im Stylesheet: Blocksy legt nur die obere Zeile in seinen Sticky-Behaelter (`[data-sticky]`). Auf dem Handy ist die aber leer – der sichtbare Kopf ist die mittlere Zeile, und die steht ausserhalb dieses Behaelters. Gemessen am 03.09.2026: Schreibtisch [data-sticky]="yes:shrink" position: fixed 67px hoch Handy [data-sticky]="shrink" position: static 0px hoch [data-device="mobile"] position: absolute 70px hoch Der mobile Kopf steht ohnehin schon ausserhalb des Textflusses (`absolute`), deshalb kostet `fixed` hier keinen Platz und nichts darunter verrutscht. `--fm-kopf-fest` setzt `kopf.js`, sobald weiter als eine Kopfhoehe gescrollt wurde. Ohne diesen Zusatz bliebe die Kopfzeile durchsichtig und die weisse Schrift stuende ueber hellem Inhalt. SAUBERER WAERE DER SCHALTER IM CUSTOMIZER (Header -> die mittlere Zeile -> Sticky, dort das Handy zulassen). Dann macht Blocksy es selbst, und `kopf.js` haelt sich von allein zurueck (es prueft das nach). ------------------------------------------------------------------------- */ @media (max-width: 999.98px) { .ct-header [data-device="mobile"] { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } /* Erst ab einer Kopfhoehe Scrollweg – oben soll sie durchsichtig auf dem Heldenbild liegen, so wie am Schreibtisch auch. */ body.fm-kopf-fest .ct-header [data-device="mobile"] { background-color: #000; } } /* ------------------------------------------------------------------------- 4. „Checkout" raus – und damit wird das X wieder anklickbar ------------------------------------------------------------------------- Gemeldet: das Schliesskreuz des Burger-Menues laesst sich nicht treffen, stattdessen landet man an der Kasse. Nachgemessen am 03.09.2026: Schliesskreuz y 10…42 „Checkout" y 25…68 (erster Eintrag, volle Breite) Die beiden ueberlappen sich zwischen y 25 und 42, und der Menuepunkt liegt obenauf. `document.elementFromPoint()` in der Mitte des Kreuzes liefert denn auch den Link zur Kasse, nicht den Knopf. Es war also nie ein Treffer-, sondern ein Reihenfolgeproblem. „Checkout" gehoert dort ohnehin nicht hin (Wunsch des Betreibers). Es verschwindet – aber SEIN PLATZ BLEIBT: `visibility: hidden` statt `display: none`. Zwei Gruende: * „Home soll dort anfangen, wo es gerade auch ist" – mit `display: none` rueckte es an die Stelle von Checkout nach oben. * Und damit unter das Kreuz. Der Fehler waere also nur weitergereicht. Ein Element mit `visibility: hidden` nimmt weder Klicks noch die Tabulator-Reihenfolge an; der Platz oben bleibt frei, das Kreuz liegt allein. ------------------------------------------------------------------------- */ #offcanvas .page-item-452 { /* Checkout */ visibility: hidden; pointer-events: none; } /* Und das Kreuz nach vorn. Der unsichtbare Checkout-Eintrag nimmt zwar keine Klicks mehr an, die Liste selbst liegt aber weiterhin darueber: nach dem ersten Schritt lieferte `elementFromPoint()` in der Mitte des Kreuzes das `