/* * Kopfbereich und Navigation. * * Eigene Datei, weil hier nichts gestaltet, sondern Verhalten der * Core-Bloecke korrigiert wird: der Navigationsblock bringt eigene * Abstaende und Ausrichtungen mit, die sich in theme.json nicht * erreichen lassen. */ /* ========================================================== 1. Kopfleiste ========================================================== */ .nt-kopf { position: relative; z-index: 20; } /* WordPress setzt jedem direkten Kind von .wp-site-blocks einen Blockabstand nach oben - auch dem main-Element. Zwischen Kopfzeile und Aufmacher stand dadurch ein 24 Pixel breiter Streifen in Cremefarbe. Er liess die Kopfzeile nach unten offen wirken, und damit die Menuepunkte nicht mittig. */ .wp-site-blocks > main { margin-block-start: 0; } /* Kein Uebergangselement mehr unter dem Kopfbereich. Der Verlauf dieser Stelle: Haarlinie, dann Welle, dann drei Anlaeufe Pinselkante, dann eine Schraege. Keine davon hat getragen. Die Schraege scheiterte an ihrer eigenen Geometrie - ein Dreieck laeuft zwangslaeufig auf null aus, dort wirkt die Kante wieder gerade, und der Uebergang von schraeg zu gerade faellt auf. Entscheidung: gerade Linien als Grundordnung. Schraeg sind nur noch einzelne Elemente - Karten, Ziffern, Siegel. Die Kante zwischen zwei Farbfeldern ist jetzt einfach die Kante. */ /* Alle Elemente der Kopfzeile auf eine gemeinsame Mittellinie. nowrap, damit Logo und Menue nicht in zwei Zeilen kippen. */ .nt-kopf__reihe { align-items: center; gap: clamp(0.75rem, 2.2vw, 1.75rem); } .nt-kopf__rechts { align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); } /* Das Logo bringt als Bild eine Grundlinie mit und sitzt dadurch ein paar Pixel tiefer als der Text daneben. line-height 0 und display block nehmen diesen Versatz heraus. */ /* Die Breite im Block (parts/header.html) muss zur Anzeige hier passen. Steht dort eine kleinere Zahl, schreibt WordPress ein sizes-Attribut mit genau dieser Zahl, und der Browser waehlt aus dem srcset eine zu kleine Datei. Sie wird dann gestreckt, und das Logo sieht weich aus, obwohl eine scharfe Fassung danebenliegt. Genau das war Lutz' Beschwerde, in zweiter Auflage. Gefunden am 11.09.2026: Block stand auf 88, Anzeige auf 184. */ .nt-kopf .wp-block-site-logo { display: flex; align-items: center; line-height: 0; margin: 0; } .nt-kopf .wp-block-site-logo img { display: block; height: auto; width: 184px; } @media (max-width: 47.9375rem) { .nt-kopf .wp-block-site-logo img { width: 152px; } .nt-kopf { padding-block: 0.5rem; } } /* ========================================================== 2. Hauptnavigation ========================================================== */ /* WICHTIG: die Menueliste ist KEIN direktes Kind von .wp-block-navigation. WordPress schiebt vier Ebenen dazwischen: nav.wp-block-navigation button.wp-block-navigation__responsive-container-open div.wp-block-navigation__responsive-container div.wp-block-navigation__responsive-close div.wp-block-navigation__responsive-dialog div.wp-block-navigation__responsive-container-content ul.wp-block-navigation__container <- hier erst Ein Selektor mit "> ul" trifft deshalb nie. Genau daran sind Hovereffekt und Chevron-Abstand zweimal gescheitert, ohne dass im Stylesheet ein Fehler zu sehen gewesen waere. Anker ist jetzt .wp-block-navigation__container. */ .nt-kopf .wp-block-navigation { align-items: center; } .nt-kopf .wp-block-navigation__container { align-items: center; } /* Der Chevron ist ein GESCHWISTER des Links, nicht sein Kind - beide liegen nebeneinander im li. Der Abstand gehoert deshalb an das li, nicht an den Link. */ .wp-block-navigation .wp-block-navigation__submenu-icon { display: flex; align-items: center; margin: 0; padding: 0; align-self: center; } .wp-block-navigation .wp-block-navigation__submenu-icon svg { display: block; width: 0.68em; height: 0.68em; margin: 0; } @media (min-width: 48rem) { .nt-kopf .wp-block-navigation__container { gap: clamp(0.15rem, 0.8vw, 0.6rem); } /* Die Flaeche liegt auf dem li und umfasst damit Link UND Chevron. Auf dem Link allein waere der Chevron ausserhalb der Flaeche gelandet. */ .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 0; /* Groesser als die Standard-Kleinschrift, aber unterhalb der Fliesstextgroesse: die Menuezeile ist der meist- genutzte Weg durch die Seite. Bei voller Textgroesse brach sie in eine zweite Zeile um. */ font-size: 1rem; white-space: nowrap; transition: color var(--wp--custom--transition--basis); } /* Nur die Schriftfarbe wechselt. Eine Flaeche im Hintergrund machte aus der Menuezeile eine Reihe von Schaltflaechen - fuer eine Hauptnavigation ist das zu laut. */ .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item:hover, .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item:focus-within { color: var(--wp--preset--color--primary); } .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); } /* Beruehrungsziel bleibt bei 44px, auch wenn die Flaeche jetzt am li haengt. */ .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 44px; padding: 0; } /* Aktuelle Seite: Limette als Unterstrich unter dem ganzen Punkt. Als Textfarbe waere Limette auf Creme mit 1.6:1 unlesbar, als Flaeche ist sie es nicht. */ .nt-kopf .wp-block-navigation__container > .current-menu-item { background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)); background-repeat: no-repeat; background-size: calc(100% - 1.8rem) 3px; background-position: 0.9rem calc(100% - 0.4rem); } } /* ========================================================== 3. Aufklappmenue ========================================================== */ /* Die Regeln des Cores fuer das Aufklappmenue stehen bei 0,4,0 (.wp-block-navigation .has-child .wp-block-navigation__submenu-container und deren Kindselektoren). Sie setzen Flaeche, Innenabstand und eine mittige Ausrichtung. Die wiederholte Klasse hebt den eigenen Selektor knapp darueber - ohne !important. */ .nt-kopf .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { min-width: 15rem; padding-block: 0.4rem; align-items: stretch; border: 0; border-radius: var(--wp--custom--border-radius--klein); background-color: var(--wp--preset--color--weiss); box-shadow: 0 18px 44px rgba(9, 37, 92, 0.16); overflow: hidden; } .nt-kopf .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; } /* Aufklappmenues in der rechten Menuehaelfte oeffnen nach links. Der Core setzt jedes Aufklappmenue auf left: -1px, klappt es also immer nach rechts auf. Bei "Ueber uns" sind das 240 px, die am rechten Rand nicht mehr hineinpassen: Am 24.09.2026 gemessen ragte die Flaeche bei 1024 px Fensterbreite 48 px hinaus. Sie ist zwar unsichtbar, zaehlt aber zum scrollbaren Bereich - jede Seite liess sich deshalb auf einem Laptop seitlich schieben, ohne dass etwas zu sehen gewesen waere. Ab dem vierten Menuepunkt, nicht ab dem ersten: Ein nach links aufklappendes Menue am linken Rand haette dasselbe Problem spiegelverkehrt. Vier ist gemessen, nicht geraten - das Aufklappmenue ist 240 px breit, und ab dem vierten Punkt steht es immer weiter rechts als das. Im mobilen Menue greift die Regel nicht: Dort steht das Aufklappmenue auf position: static, und left/right tun nichts. */ .nt-kopf .wp-block-navigation__container > .wp-block-navigation-item:not(:nth-child(-n+3)) > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { left: auto; right: 0; } .nt-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; padding: 0.6rem 1.1rem; color: var(--wp--preset--color--contrast); transition: background-color var(--wp--custom--transition--basis), color var(--wp--custom--transition--basis), padding-left var(--wp--custom--transition--basis); } /* Der Hovereffekt im Aufklappmenue fehlte vollstaendig. Flaeche plus kleiner Einzug zeigen, welcher Eintrag gerade greift. */ .nt-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover, .nt-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { background-color: var(--wp--preset--color--oliv-sanft); color: var(--wp--preset--color--primary); padding-left: 1.35rem; } /* ========================================================== 4. Mobiles Menue ========================================================== */ @media (max-width: 47.9375rem) { /* Eine Zeile: Logo links, Burger rechts. "Online bestellen" faellt hier weg - der Knopf steht drei Zeilen weiter unten im Aufmacher noch einmal, ueber die volle Breite. Zweimal dieselbe Aktion im ersten Bildschirm kostet nur Platz, und der Platz gehoert dem Logo. */ .nt-kopf .nt-kopf__reihe { flex-wrap: nowrap; justify-content: space-between; gap: 1rem; } .nt-kopf .nt-kopf__rechts { width: auto; justify-content: flex-end; } } /* Der Burger als sichtbare Schaltflaeche statt nacktem Symbol. Ohne Medienabfrage wuerde display:flex das display:none von WordPress ueberschreiben und der Burger erschiene auch am Rechner - dann rutscht das Menue in eine zweite Zeile. */ @media (max-width: 47.9375rem) { .nt-kopf .wp-block-navigation__responsive-container-open { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--wp--custom--border-radius--klein); background-color: var(--wp--preset--color--oliv-sanft); color: var(--wp--preset--color--secondary); } } /* Die Punkte im geoeffneten Menue standen rechtsbuendig und ohne erkennbare Ebenen, weil der Overlay-Container die Ausrichtung der Kopfzeile erbt. Hier wird sie zurueckgesetzt. */ /* Die Kernregel fuer den Hintergrund lautet .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open und traegt damit vier Klassen. Ein Selektor mit .nt-kopf davor hat nur drei und verliert. Das Menue stand deshalb reinweiss in einem cremefarbenen Auftritt. Deshalb hier derselbe Aufbau plus .nt-kopf, also fuenf Klassen. Kein !important: Der naechste, der etwas aendern will, soll es noch koennen. */ .nt-kopf .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { padding: clamp(1.25rem, 5vw, 2rem); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* ACHTUNG, hier stand ein Fehler (gefunden 11.09.2026): Zwischen den beiden Zeilen fehlte das Komma. Der Browser las das als Nachfahrenselektor, also .nt-kopf innerhalb von .nt-kopf. Das gibt es nicht, die Regel griff also nie, und der erste Menuepunkt klebte am Schliessen-Knopf. Ein Selektor, der nichts trifft, meldet sich nicht. Deshalb faellt so etwas erst auf, wenn jemand hinsieht. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; justify-content: flex-start; width: 100%; /* Abstand zur Schliessen-Schaltflaeche. Ohne ihn klebt der erste Menuepunkt am Icon und der Fokusrahmen liegt teilweise darunter. */ padding-top: 5rem; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__container.items-justified-right, .wp-block-navigation__submenu-container) { align-items: stretch; gap: 0; width: 100%; text-align: right; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: flex-end; /* border-box: sonst kommt der Innenabstand zur Breite von 100% dazu und der Link ragt acht Pixel ueber seine Rasterspalte hinaus - genau der Versatz zu den Unterpunkten. */ box-sizing: border-box; width: 100%; min-height: 52px; padding: 0.25rem; line-height: 1.25; font-size: var(--wp--preset--font-size--lg); font-weight: 700; border-radius: var(--wp--custom--border-radius--klein); } /* Oberpunkte durch eine feine Linie voneinander trennen. */ /* Feste Spalte fuer den Pfeil - auch bei Punkten ohne Untermenue. Vorher war die zweite Spalte dort null Pixel breit, die Beschriftungen endeten deshalb auf zwei verschiedenen Kanten und die Liste sah ausgefranst aus. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item { display: grid; grid-template-columns: 1fr 44px; align-items: center; padding-block: 0.1rem; } /* Das Untermenue liegt in der zweiten Rasterzeile und nimmt beide Spalten ein. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { grid-column: 1 / -1; } /* Schalter zum Aufklappen. Nur im mobilen Menue sichtbar - am Rechner uebernimmt weiterhin der Hover. */ .nt-aufklapp { display: none; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-aufklapp { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--wp--preset--color--contrast); background: transparent; border: 0; border-radius: var(--wp--custom--border-radius--klein); cursor: pointer; transition: transform var(--wp--custom--transition--basis), background-color var(--wp--custom--transition--basis); } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-aufklapp svg { width: 22px; height: 22px; display: block; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-aufklapp[aria-expanded="true"] { transform: rotate(180deg); } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-aufklapp:hover { background-color: rgba(9, 37, 92, 0.06); } /* Untermenues sichtbar als zweite Ebene: eingerueckt, kleiner, mit senkrechter Linie statt beliebiger Einrueckung. WordPress sichert seine Overlay-Regeln, indem es dieselbe Klasse mehrfach in den Selektor schreibt - dadurch stehen dort padding-left von 2rem und border:none mit Spezifitaet 0,5,0. Ein normaler Selektor kommt dagegen nicht an, deshalb die Wiederholung auch hier. */ /* Eingeklappt, bis der Schalter gedrueckt wird. Die limettene Linie und die Trennstriche sind raus - im Menue soll die Schrift die Ordnung machen, nicht die Grafik. */ /* Die Unterpunkte enden auf derselben Kante wie die Oberpunkte. Das Untermenue nimmt beide Rasterspalten ein - der Platz der Pfeilspalte muss deshalb als Innenabstand nachgebildet werden. Die Wiederholung der Klasse ist noetig, weil WordPress seine eigene Regel dafuer mit derselben Technik schuetzt. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { display: none; margin-right: 0; margin-block: 0 0.5rem; /* 44px rechts: die Breite der Pfeilspalte der Oberpunkte. Die Kurzschreibweise padding stand vorher NACH padding-right und hat den Wert wieder auf null gesetzt. */ padding: 0 44px 0 0; border: 0; background: transparent; box-shadow: none; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nt-offen > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { display: block; } /* Die Regel fuer das Aufklappmenue am Rechner steht weiter oben bei 0,5,0 und setzt justify-content: flex-start. Sie gilt auch hier, solange dieser Selektor nicht daruebergeht - sonst stehen die Untereintraege links, waehrend alles andere rechts ausgerichtet ist. Deshalb dieselbe Wiederholung wie dort, plus den Overlay- Kontext davor. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { justify-content: flex-end; /* 40px statt 44: Untermenues sind die zweite Ebene, die Beruehrungsflaeche bleibt mit dem Innenabstand ueber 24px (WCAG 2.5.8) und die Liste passt auf einen Bildschirm. */ min-height: 40px; /* rechts null: der Abstand zur Kante kommt vom Untermenue- Kasten, sonst stuenden die Unterpunkte vier Pixel weiter links als die Oberpunkte. */ padding: 0.15rem 0 0.15rem 0; font-size: var(--wp--preset--font-size--md); font-weight: 400; /* Oliv statt Grau: die zweite Ebene gehoert zur Marke und soll nicht wie abgeschwaechter Text aussehen. 7.1:1. */ color: var(--wp--preset--color--primary); } /* Der Einzug beim Hover wandert mit auf die rechte Seite. */ .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { padding-left: 0.25rem; padding-right: 0.6rem; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: clamp(1.25rem, 5vw, 2rem); right: clamp(1.25rem, 5vw, 2rem); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--wp--custom--border-radius--klein); background-color: var(--wp--preset--color--oliv-sanft); color: var(--wp--preset--color--primary); } /* ========================================================== 5. Tastaturbedienung ========================================================== */ .nt-kopf :is(a, button):focus-visible { outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px; border-radius: var(--wp--custom--border-radius--klein); } /* ========================================================== 6. Sozialsymbole Als Inline-SVG im Template, nicht als Schriftart oder Fremdskript: keine zusaetzliche Anfrage, keine Einwilligung noetig, faerbbar ueber currentColor. ========================================================== */ .nt-sozial { display: flex; align-items: center; gap: 0.6rem; margin: 1.25rem 0 0; } .nt-sozial a { display: inline-flex; align-items: center; justify-content: center; /* 36px statt 44px. WCAG 2.5.8 verlangt 24px, die Symbole wirkten in der Fusszeile zu gewichtig. */ width: 36px; height: 36px; border-radius: var(--wp--custom--border-radius--pille); color: var(--wp--preset--color--secondary); background-color: transparent; box-shadow: inset 0 0 0 2px rgba(9, 37, 92, 0.22); transition: background-color var(--wp--custom--transition--basis), color var(--wp--custom--transition--basis), box-shadow var(--wp--custom--transition--basis); } .nt-sozial a:hover { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--weiss); box-shadow: inset 0 0 0 2px var(--wp--preset--color--secondary); } .nt-sozial svg { width: 17px; height: 17px; display: block; fill: currentColor; } @media (max-width: 47.9375rem) { .nt-sozial { justify-content: flex-end; } } /* ========================================================== 7. Schwebender Bestellknopf Eine einzige Aktion, sichtbar ab dem Moment, in dem der Aufmacher aus dem Bild ist. Auf dem Telefon als Leiste ueber die volle Breite im Daumenbereich, am Rechner als Knopf unten rechts. Steuerung in assets/js/schwebender-cta.js. ========================================================== */ .nt-schwebend { position: fixed; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(0.75rem); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms; pointer-events: none; } /* Bei geoeffnetem Menue verschwindet der Knopf - sonst liegt er ueber der Navigation und faengt Antipper ab. */ body:has(.wp-block-navigation__responsive-container.is-menu-open) .nt-schwebend { opacity: 0; visibility: hidden; pointer-events: none; } .nt-schwebend--sichtbar { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nt-schwebend a { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 56px; padding: 0 1.9rem; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--contrast); /* Limette statt Oliv: der Knopf soll sich vom Inhalt abheben, nicht mit ihm verschmelzen. Dunkler Text darauf 9.4:1. */ background-color: var(--wp--preset--color--accent); border-radius: var(--wp--custom--border-radius--pille); box-shadow: 0 14px 34px -12px rgba(35, 34, 25, 0.5), 0 0 0 1px rgba(83, 93, 0, 0.18); transition: background-color var(--wp--custom--transition--basis), transform var(--wp--custom--transition--basis), box-shadow var(--wp--custom--transition--basis); } .nt-schwebend a::before { content: ""; width: 20px; height: 20px; flex: none; background-color: currentColor; -webkit-mask-image: var(--nt-symbol-korb); mask-image: var(--nt-symbol-korb); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .nt-schwebend a:hover { background-color: var(--wp--preset--color--weiss); transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(35, 34, 25, 0.55), 0 0 0 2px var(--wp--preset--color--primary); } :root { --nt-symbol-korb: url('data:image/svg+xml;utf8,'); } @media (min-width: 48rem) { .nt-schwebend { right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); } } /* Platz am Seitenende, damit der schwebende Knopf die letzten Zeilen der Fusszeile nicht dauerhaft verdeckt. */ footer.wp-block-group { padding-bottom: clamp(3rem, 6vw, 5rem); } /* Telefon: Leiste ueber die volle Breite im Daumenbereich. */ @media (max-width: 47.9375rem) { /* Freistehend mit Abstand zum Rand statt als angeklebte Leiste: die Leiste schnitt den Inhalt hart ab und wirkte wie ein fremdes Element auf der Seite. */ /* Rechts unten statt ueber die volle Breite: der Knopf soll den Inhalt nicht mehr abdecken als noetig. Mit 56 Pixel Hoehe bleibt er weit ueber der empfohlenen Mindestgroesse. */ .nt-schwebend { right: var(--wp--preset--spacing--40); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .nt-schwebend a { padding: 0 1.4rem; font-size: var(--wp--preset--font-size--sm); } /* Fusszeile mittig statt rechtsbuendig - rechtsbuendige Spalten untereinander lasen sich als abgerissene Kolumne. */ footer.wp-block-group .wp-block-column { text-align: center; } .nt-sozial { justify-content: center; } /* Platz am Seitenende, sonst verdeckt die klebende Leiste die letzte Zeile der Fusszeile. */ footer.wp-block-group { padding-bottom: 6rem; } } /* Bestellknopf am Ende des mobilen Menues. Wird von assets/js/mobilmenue.js eingehaengt. */ .nt-menue-cta { display: none; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-menue-cta { display: block; grid-column: 1 / -1; margin-top: 1.5rem; padding: 0; } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-menue-cta a { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 1.75rem; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--accent); border-radius: var(--wp--custom--border-radius--pille); } .nt-kopf .wp-block-navigation__responsive-container.is-menu-open .nt-menue-cta a:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--weiss); } /* ---------------------------------------------------------- Nachbarn im Aufklappmenue der Biolaeden Natürlich NATURATA und SpielundKleid sind keine Biolaeden, sondern eigene Ladenkonzepte desselben Hauses. Im Menue standen sie bisher wie eine sechste und siebte Filiale. Die Zeile lautet bewusst nicht "Im selben Haus": Das gilt fuer Natürlich NATURATA, SpielundKleid liegt in Suelz aber gegenueber. Sie sagt deshalb, was die Eintraege sind, nicht wo sie liegen. Die Zwischenzeile kommt aus dem Pseudoelement des ersten Eintrags, damit die Navigation kein zusaetzliches Element braucht, das ohne Ziel dasteht und von Screenreadern als leerer Verweis vorgelesen wuerde. ---------------------------------------------------------- */ .wp-block-navigation__container .wp-block-navigation-item.nt-nachbar-erster { flex-wrap: wrap; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgba(9, 37, 92, 0.16); } .wp-block-navigation__container .wp-block-navigation-item.nt-nachbar-erster::before { content: "Ebenfalls von uns"; /* Der Listeneintrag ist ein Flex-Container. Ohne die volle Breite setzt sich die Zwischenzeile neben den Verweis statt darueber. */ display: block; flex: 0 0 100%; width: 100%; padding: 0.1rem 0 0.35rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); pointer-events: none; } @media (min-width: 48rem) { /* Im aufgeklappten Menue am Schreibtisch tragen die Eintraege einen Innenabstand, den die Zwischenzeile ausgleichen muss. */ .wp-block-navigation__container .wp-block-navigation-item.nt-nachbar-erster::before { padding-left: 1rem; padding-right: 1rem; } } /* ========================================================== Bewegliche Kopfleiste am Telefon Beim Hinunterscrollen faehrt die Leiste weg, beim Hochscrollen kommt sie zurueck. Am Schreibtisch bleibt alles wie gehabt. WICHTIG: Die Klassen sitzen auf der Huelle des Vorlagenteils, nicht auf .nt-kopf. WordPress wickelt jeden Vorlagenteil ein: div.wp-site-blocks volle Seitenhoehe header.wp-block-template-part 144 px, genau die Leiste header.nt-kopf der Inhalt Ein klebendes Element bewegt sich nur innerhalb seines Eltern- elements. Sass sticky auf .nt-kopf, war das Elternelement exakt so hoch wie die Leiste: kein Weg zum Kleben, die Leiste scrollte ganz normal weg. Im Stylesheet war dabei kein Fehler zu sehen. Die Klasse nt-kopf-huelle setzt das Skript. Faellt es aus, bleibt die Leiste normal am Seitenanfang stehen, es fehlt nichts. ========================================================== */ @media (max-width: 47.9375rem) { .nt-kopf-huelle { position: sticky; top: 0; z-index: 30; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); /* Ein Hauch Kante, sobald die Leiste ueber Inhalt liegt. */ box-shadow: 0 1px 0 rgba(9, 37, 92, 0.08); } /* KEIN will-change: transform. Es stand einmal da, als Beschleunigungshinweis. Folge: Die Huelle wurde damit zum Bezugsrahmen fuer alles, was darin position: fixed ist. Das Menue-Overlay von WordPress sitzt genau dort und war auf die Hoehe der Leiste eingesperrt, 144 statt 812 Pixel. */ .nt-kopf-huelle--versteckt { transform: translateY(-100%); } /* Bei offenem Menue bewegt sich nichts, und es ist auch kein transform gesetzt. Sonst waere das Overlay wieder eingesperrt, siehe oben. Der Uebergang muss mit weg: waehrend er laeuft, ist ein transform da. */ .nt-kopf-huelle:has(.wp-block-navigation__responsive-container.is-menu-open) { transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { .nt-kopf-huelle { transition: none; } } /* ---------------------------------------------------------- Ein Menuepunkt, dezent betont Fuer "Angebote". Erster Versuch war ein Limettenstrich unter dem Wort. Das ging schief: Die aktuelle Seite traegt im Menue schon einen Limettenstrich, und zwei Striche nebeneinander lesen sich als Fehler, nicht als Betonung. Fabian am 23.09.2026: "doppelt sich mit dem Navigationshighlight". Jetzt ohne Linie: ein kleiner Limettenpunkt vor dem Wort, dazu kraeftigere Schrift in dunklem Oliv. Der Punkt liegt in einer anderen Ebene als der Unterstrich, deshalb kann er sich mit ihm nicht mehr stossen. Limette nur als Flaeche, nie als Schriftfarbe: auf Creme waeren es 1.66:1. ---------------------------------------------------------- */ .nt-kopf .wp-block-navigation-item.nt-menue-betont .wp-block-navigation-item__label { font-weight: 700; color: var(--wp--preset--color--primary-dark); } .nt-kopf .wp-block-navigation-item.nt-menue-betont .wp-block-navigation-item__label::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.4em; border-radius: 50%; background: var(--wp--preset--color--accent); vertical-align: 0.08em; }