/* menue.css — eigenes CSS ueber Bootstraps Grundregeln, nur fuer diesen * Prototyp. Steht bewusst NICHT in sgp-ui.scss: CC-8s Partial-Liste * (dropdown, nav/navbar) ist Vorbedingung, kein Teil dieses Nachbaus. Wenn * die Partials stehen, wandert der Kern hierher gehoerende CSS dorthin, * gekapselt in .sgp-ui - hier liegt es ungekapselt, weil die Seite isoliert * ist und mit niemandem kollidieren kann. */ /* Traeger war `#sgp-menue-wurzel` — der Knoten, den das bauende JS ersetzt hat. Damit hing auch der FOKUSRING an einem Element, das es nicht mehr gibt: Tastaturbedienung ohne sichtbare Marke, und nichts haette darauf hingewiesen. */ .sgp-menue { font-family: "Segoe UI", system-ui, sans-serif; } /* ---- Umschaltung ------------------------------------------------------ Stand hier als `#sgp-menue-wurzel.sgp-desktop ...`. Die Klasse setzte das alte JS beim Bauen; den Knoten gibt es nicht mehr. Ein Selektor, der auf nichts zeigt, ist im Stylesheet nicht von einem zu unterscheiden, der zeigt — die Umschaltung steht deshalb jetzt in den Medienabfragen weiter unten, an derselben Grenze wie in `menue.js`. */ /* ---- Desktop: horizontale Leiste, verschachtelte Dropdowns -------------- */ .sgp-desktop-menue { display: flex; /* Bootstraps eigene .navbar-nav ist von Haus aus eine Spalte * (flex-direction: column) - erst .navbar-expand-* dreht sie bei einem * Breakpoint auf Zeile. Dieser Nachbau nutzt bewusst keinen * .navbar-expand-*, weil der Umschaltpunkt hier per matchMedia laeuft, * nicht per Bootstrap-Breakpoint-Klasse (siehe menue.js) - deshalb muss * die Zeilenrichtung selbst gesetzt werden. */ flex-direction: row; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; background: #69732f; } .sgp-desktop-menue > .nav-item { position: relative; } .sgp-desktop-menue .nav-link { display: block; padding: .75rem 1rem; color: #fff; text-decoration: none; cursor: pointer; } .sgp-desktop-menue .nav-link:hover, .sgp-desktop-menue .nav-link[aria-expanded="true"] { background: #525a24; } /* SPEZIFITAET (0,2,0), NICHT (0,1,0) — und das ist kein Schoenheitsfehler. * * Gemessen am 29.08.2026: der Bestand schiebt beim Aufklappen NICHTS * (y-Position des ersten Inhaltselements geschlossen wie geoeffnet 164px, * bei 800 und 1200). Dieser Nachbau schob 205 bzw. 157 Pixel — an genau * diesem Punkt war er SCHLECHTER als das Original. * * Ursache, nicht geraten: Bootstrap fuehrt selbst * .navbar-nav .dropdown-menu { position: static } (0,2,0) * fuer den eingeklappten Zustand, und hebt es nur mit * .navbar-expand .navbar-nav .dropdown-menu { absolute } (0,3,0) * wieder auf. `.navbar-expand-*` habe ich bewusst weggelassen, weil der * Umschaltpunkt hier ueber matchMedia laeuft und nicht ueber * $grid-breakpoints (siehe menue.js). Damit blieb `static` stehen: das * Untermenue lag IM Fluss und schob den Inhalt nach unten. * * Die eigene Entscheidung hatte also eine Folge, die ich nicht vorhergesehen * habe. Behoben ueber die Spezifitaet der eigenen Huelle statt ueber * `.navbar-expand` — das brauchte einen zusaetzlichen Vorfahren und haette * Bootstraps Breakpoint-Klassen wieder hereingeholt. */ .sgp-desktop-menue .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 14rem; margin: 0; padding: .25rem 0; list-style: none; background: #fff; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 .25rem .5rem rgba(0,0,0,.15); z-index: 20; } .sgp-desktop-menue .dropdown-menu.show { display: block; } .dropdown-item { display: block; padding: .4rem 1rem; color: #212529; text-decoration: none; white-space: nowrap; cursor: pointer; } .dropdown-item:hover, .dropdown-item[aria-expanded="true"] { background: #f4efd4; } /* Verschachteltes Untermenue oeffnet zur Seite, nicht nach unten - sonst * verdeckt es seine eigenen Geschwister. Das ist der Teil, den Bootstraps * Dropdown von Haus aus nicht kann (siehe Analyse: "kommt so nicht"). */ .dropdown-submenu { position: relative; } .sgp-desktop-menue .dropdown-submenu > .dropdown-menu { top: -.25rem; left: 100%; margin-left: .1rem; } /* am rechten Rand: nach links oeffnen statt aus dem Fenster zu laufen */ .sgp-desktop-menue .dropdown-submenu.sgp-opens-left > .dropdown-menu { left: auto; right: 100%; margin-left: 0; margin-right: .1rem; } /* SICHTBARER FOKUSRING - ohne den ist Tastaturbedienung unbeweisbar. DIE FARBE WAR #98a651 UND HAT NICHT GETRAGEN. Gemessen 31.08.2026, WCAG verlangt fuer einen Fokusindikator 3,00:1 gegen JEDEN angrenzenden Grund: #98a651 gegen olivgruenes Band #69732f 1,93 : 1 zu wenig gegen hellen Grund #f4efd4 2,29 : 1 zu wenig gegen Weiss 2,66 : 1 zu wenig gegen Panelgrund #fcfbf3 2,56 : 1 zu wenig Ein Ring, den man nicht sieht, ist kein Ring. Durchgerechnet wurden auch die Hausfarbe (#946110: 1,03 gegen das Band), dunkles Braun (1,96) und Bootstrap-secondary (1,09) -- KEINE Hausfarbe traegt, weil das olivgruene Band mittelhell ist und farbige Ringe dort verschwinden. Nur ein sehr dunkler Ton schafft alle vier: #1a1a1a gegen Band 3,39 · hell 15,04 · Weiss 17,40 · Panel 16,77 Das ist eine Bedienbarkeitsfrage, keine Markenfarbe: der Fokusring gehoert zum Bedienelement, nicht zur Gestaltung. Wer ihn wieder gruen will, braucht dafuer einen zweifarbigen Ring (dunkel innen, hell aussen) -- machbar, aber ueber `box-shadow`, und der wird in der Schublade von `overflow: hidden` beschnitten. Deshalb hier die einfache Loesung. */ .sgp-menue a:focus-visible, .sgp-menue button:focus-visible { outline: 3px solid #1a1a1a; outline-offset: -2px; } /* ---- Mobil: Hamburger + volles Panel, ein Stapel ------------------------ */ .sgp-mobil-toggle { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: none; border: 0; font: inherit; cursor: pointer; } .sgp-mobil-toggle::before { content: ""; display: inline-block; width: 1.25rem; height: 2px; background: currentColor; box-shadow: 0 -6px currentColor, 0 6px currentColor; } /* IM FLUSS, NICHT UEBERLAGERND — und das ist Absicht, keine Nachlaessigkeit. * * Hier stand `position:fixed; inset:0`, also ein Panel ueber der Seite. Das * war BESSER als der Bestand (der schiebt auf 360px um 820px) und wurde * genau deshalb zurueckgenommen: Stufe 1 bildet den heutigen Zustand nach, * Verbesserungen gehoeren in Stufe 2 (B-24). * * Die Begruendung ist nicht bloss formal: ein aufklappender Stapel im Fluss * ist auf schmalen Geraeten das uebliche Muster, und ein Ueberlagerungspanel * verdeckt die Seite dahinter. Das ist eine andere BEDIENUNG, nicht nur eine * andere Optik — sie gehoert entschieden, nicht nebenbei eingefuehrt. */ /* ============================================================================ MOBIL: DAS PANEL FAEHRT EIN, ES SCHIEBT NICHT. B-32 / B-33 Punkt 2. Vorher `position: static` und damit im Fluss -- gemessen bei 360 px Fensterbreite, y der ersten Ueberschrift vor und nach dem Oeffnen: Prototyp vorher 80 -> 570 = +490 px, die Seite rutscht weg Bestand 198 -> 803 = +605 px, dasselbe Verhalten Jetzt `position: fixed` und `translateX(-100%)`: das Panel liegt AUSSERHALB des Fensters und faehrt herein. Der Inhalt darunter bewegt sich nicht -- nachzumessen an derselben Zahl, die er vorher hatte. ============================================================================ */ /* EIN BAUM, ZWEI BEDIENUNGEN — umgebaut 29.08.2026 (CC-3). Vorher standen hier `.sgp-mobil-panel`, `.sgp-mobil-liste` und `.sgp-mobil-eintrag`: ein ZWEITER Baum, den `menue.js` neben dem Desktop- Baum aufbaute. Seit das Markup die Lieferung ist, gibt es diese Knoten nicht mehr — die Regeln haetten auf nichts gezeigt, ohne dass irgendwo ein Fehler entstanden waere. Zwei Baeume waren ohnehin der falsche Weg: der Bestand hat heute genau deshalb zwei Menues mit verschiedenen Eintraegen. Am Telefon wird jetzt DERSELBE Baum als Stapel bedient — sichtbar ist die Liste mit `.sgp-m-sichtbar`, alles andere ist zu. Der Umschaltpunkt steht an EINER Stelle mehr als frueher: hier und in `menue.js`. Wer ihn aendert, aendert beide. */ /* ---- Desktop ---------------------------------------------------------- */ @media (min-width: 800px) { .sgp-menue .sgp-mobil-toggle, .sgp-menue .sgp-mobil-kopf { display: none; } /* "ALLE … ANZEIGEN" GIBT ES AM DESKTOP NICHT (N3, Betreiberentscheidung). Dort ist der Eintrag in der Leiste selbst der Weg zur Kategorie -- der Klick navigiert, das Panel geht per Mouseover auf. Eine zusaetzliche Zeile "Alle Rosen anzeigen" waere dann ein zweiter Weg zum selben Ziel, direkt unter dem ersten. Am Telefon ist sie der EINZIGE Weg, weil der Tipp dort das Panel oeffnet statt zu navigieren. Deshalb steht sie im Markup und wird hier nur verborgen -- nicht weggelassen. ABNAHME: Desktop 0 von 7, Telefon 7 von 7. Eine Zahl ueber beide Breiten sieht bei dieser Vorgabe immer falsch aus. M1, 31.08.2026: DIESE REGEL HAT NIE VOLLSTAENDIG GEGRIFFEN. CC-3 hat es an der ausgelieferten Seite ausgelesen -- von 33 `li.sgp-mobil-alle` waren am Desktop **13 sichtbar**, genau die Ebenen 3 und 4 in `ul.sgp-mega-liste`. Beide Regeln stehen in derselben Datei und derselben Media Query: display: none .sgp-menue .sgp-mobil-alle (0,2,0) display: inline-block .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li (0,4,1) Die zweite gewinnt. Der Markup-Haken war die ganze Zeit da, es fehlte die Durchsetzung -- der achte Fall dieser Gestalt an einem Tag. Die Regel darunter traegt jetzt denselben Pfad plus die Klasse und ist damit staerker als ihr Gegenspieler. */ .sgp-menue .sgp-mobil-alle { display: none; } .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li.sgp-mobil-alle, .sgp-desktop-menue .sgp-mega .sgp-mega-liste > li.sgp-mobil-alle { display: none; } /* EBENE 3 WIRD GEZEIGT, eingerueckt unter ihrem Eintrag. ============================================================ HIER STAND `display: none`, mit der Begruendung „so haelt es der Bestand". Das war an EINEM Zweig gemessen und ueber den Baum geredet: Bestand, Fenster 1785 px, alle acht Zweige durchgemessen Magazin 26 Eintraege auf Ebene 3 — 26 davon SICHTBAR Zubehoer 3 Eintraege auf Ebene 3 — 0 davon sichtbar alle uebrigen: keine Ich hatte Zubehoer gemessen und daraus die Regel gemacht. Mit `display:none` waeren Magazins 26 Verweise aus dem Menue verschwunden — 26 Wege, die es heute gibt. Das ist ein Rueckschritt, und der ist das Risiko dieses Projekts, nicht die Luecke. Jetzt sind alle 29 sichtbar. Die drei aus Zubehoer kommen dazu; sie wegzulassen hiesse, die Ungleichheit des Bestands nachzubauen, ohne dass irgendwo steht, warum. Wer sie doch verbergen will, entscheidet das je Zweig und schreibt den Grund dazu. */ .sgp-menue .sgp-ebene-tief { margin: .15rem 0 .35rem .9rem; padding-left: .6rem; border-left: 2px solid #e5ddd2; } .sgp-menue .sgp-ebene-tief .dropdown-item { font-size: .92em; opacity: .85; } } /* ---- Telefon: das Panel FAEHRT EIN, es schiebt nicht ------------------ Gemessen bei 360 px, y der ersten Ueberschrift vor/nach dem Oeffnen: Prototyp vorher 80 -> 570 = +490 px, die Seite rutscht weg Bestand 198 -> 803 = +605 px, dasselbe Verhalten `position: fixed` + `translateX(-100%)`: das Panel liegt ausserhalb des Fensters. Der Inhalt darunter bewegt sich nicht — nachzumessen an derselben Zahl. */ @media (max-width: 799px) { .sgp-menue { background: #fff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 22rem); max-width: 100%; z-index: 1040; overflow-y: auto; box-shadow: 2px 0 12px rgba(0, 0, 0, .18); transform: translateX(-100%); transition: transform .22s ease-out; } .sgp-menue.sgp-mobil-offen { transform: translateX(0); } /* Der Knopf gehoert NICHT ins Panel — er faehrt sonst mit hinaus und ist nicht mehr zu treffen. */ .sgp-menue .sgp-mobil-toggle { position: fixed; top: .75rem; left: .75rem; z-index: 1041; background: #69732f; color: #fff; border: 0; border-radius: .25rem; padding: .5rem .9rem; font: inherit; cursor: pointer; } .sgp-mobil-kopf { display: flex; align-items: center; gap: .5rem; padding: 1rem; background: #69732f; color: #fff; position: sticky; top: 0; } .sgp-mobil-titel { flex: 1; margin: 0; font-size: 1.1rem; } .sgp-mobil-zurueck, .sgp-mobil-schliessen { background: none; border: 0; color: #fff; font-size: 1.25rem; line-height: 1; padding: .25rem .5rem; cursor: pointer; } /* Die `[hidden]`-Regel stand frueher hier und war wirkungslos: Zeile ~3172 setzt `display: inline-flex` mit DERSELBEN Spezifitaet (0,2,0) und steht spaeter -- bei Gleichstand gewinnt die spaetere. Sie ist jetzt dort als `:not([hidden])` gefasst, damit genau EINE Regel `display` steuert und ihre Bedingung selbst traegt. Befund CC-3, Praezisierung CC-1. */ /* DER STAPEL. Jede Liste im Baum ist eine moegliche Stufe; sichtbar ist genau die oberste. `.sgp-menue ul` trifft auch die Wurzelliste — das ist gewollt, sie ist Stufe eins. */ .sgp-menue ul { display: none; list-style: none; margin: 0; padding: 0; } .sgp-menue ul.sgp-m-sichtbar { display: block; } /* Die Spalten des Mega-Panels sind am Telefon keine Spalten. */ .sgp-menue .sgp-mega { column-count: 1; position: static; border: 0; box-shadow: none; width: auto; padding: 0; } /* DIESELBE REGEL NOCH EINMAL, VIER KLASSEN TIEF -- WEIL DIE OBIGE NIE GEWIRKT HAT. Am 31.08.2026 gemessen: `ul.sgp-mega` stand am Telefon auf `position: absolute`, `top: 50px`, `z-index: 20` -- also weiterhin so, wie das Fly-Over-Panel am Desktop liegt. Die Zeile darueber sagt seit Wochen `position: static`, hat aber nur (0,2,0), und `.sgp-desktop-menue .dropdown-menu.sgp-mega` hat (0,3,0). WAS DAS ANRICHTETE: ein absolut positioniertes Panel nimmt keinen Platz im Fluss ein. Der Fussblock rechnete deshalb mit einer Wurzelliste von 50 px und setzte sich direkt darunter -- waehrend das Panel darueber bis y=1116 reichte. Gemessen im Zustand „Ebene 3 offen": Fussblock 268…418, und DREI Menueeintraege lagen mitten in ihm. Im Bild steht der Sprachschalter zwischen „Historische Rosen" und „Rosa Alba". Aufgefallen ist es erst, als ich den tiefsten Ast abgelaufen bin. Alle bisherigen Abnahmen -- meine, CC-9s und CC-3s -- haben auf Ebene 1 oder 2 gemessen, und dort faellt es nicht auf. */ .sgp-menue .sgp-desktop-menue .dropdown-menu.sgp-mega { column-count: 1; position: static; border: 0; box-shadow: none; width: auto; padding: 0; } .sgp-menue .sgp-mega-spalte { display: block; } .sgp-menue li { border-bottom: 1px solid #e5ddd2; } .sgp-menue li > a { display: block; width: 100%; padding: .9rem 1rem; font: inherit; color: #212529; text-decoration: none; } .sgp-menue .sgp-mega-titel { font-weight: 600; } } @media (prefers-reduced-motion: reduce) { .sgp-menue { transition: none; } } /* Schleier und gesperrter Hintergrund haengen am `body`, den `menue.js` mitsetzt: ohne ihn ist unklar, dass der Rest der Seite gerade nicht gemeint ist — und ein Tipp daneben schliesst nichts. */ body.sgp-mobil-offen::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1030; } body.sgp-mobil-offen { overflow: hidden; } /* ============================================================================ MEGA-PANEL — B-33 Punkt 1, 29.08.2026 (CC-3) Gemessen am Bestand (/rosen/, Fenster 1200 px): Panel 1185 px = 98,8 % der Fensterbreite, drei Spalten an x = 0 / 391 / 782, 17 Eintraege. Der Prototyp hatte 224 px = 18,7 % und eine Spalte. `position: static` am Traeger ist die eigentliche Aenderung: solange das `
  • ` `position: relative` traegt, misst sich das Panel an IHM und wird so schmal wie der Menuepunkt. Der Bezugsrahmen muss die Leiste sein. ============================================================================ */ .sgp-desktop-menue { position: relative; } /* `sgp-hat-mega` GIBT ES NUR IM PROTOTYP. Im echten Baum kommt die Klasse des Eintrags aus `{mssMenuEntry_cssClass}` und heisst `hasChildren` -- gemessen: sgp-hat-mega 0 Vorkommen, hasChildren 186. Die Regel traf deshalb nichts, der `li` blieb `position: relative`, und das Panel wurde 87 px breit statt 1200. Derselbe Fehler wie in menue.js, das `#sgp-menue` suchte: ein Name aus dem Prototyp, den der Bestand nicht traegt. Der Prototyp beweist die Gestalt, nicht die Namen. `> .nav-item` haelt es auf der nullten Ebene -- `hasChildren` steht auf allen Ebenen. */ .sgp-desktop-menue > .nav-item.sgp-hat-mega, .sgp-desktop-menue > .nav-item.hasChildren { position: static; } /* DER BEZUGSRAHMEN IST DIE LEISTE, NICHT DER EINTRAG. `left:0; right:0` spannt ueber den naechsten positionierten Vorfahren. Im Prototyp war das die Leiste; im echten Baum ist der `li` selbst `position: relative` (Foundation), und das Panel wurde 87 px breit statt 1200 -- eine schmale Saeule von 1229 px Hoehe, gemessen an /rosen/. Deshalb hier ausdruecklich: die Leiste positioniert, der Eintrag nicht. Ein `position` in einer fremden Regel ist die haeufigste Ursache dafuer, dass dasselbe CSS an zwei Orten verschieden aussieht. */ @media (min-width: 800px) { .sgp-desktop-menue { position: relative; } .sgp-desktop-menue > .nav-item { position: static; } } .sgp-desktop-menue .dropdown-menu.sgp-mega { position: absolute; left: 0; right: 0; width: auto; min-width: 0; max-width: 1200px; margin-inline: auto; padding: 1.25rem 1rem; background: #fff; border: 1px solid #d9d2c4; border-top: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, .12); /* EIN RASTER, EINE ZELLE JE GRUPPE — nicht column-count. M1, 30.08.2026. ========================================================================== Hier stand `column-count: 3`. Mehrspaltensatz LAESST INHALT FLIESSEN: er fuellt Spalte eins bis zur vollen Hoehe, dann Spalte zwei. `break-inside: avoid` haelt eine Gruppe zwar zusammen, aber die Spaltenhoehe richtet sich nach der GESAMTMENGE, und ungleich hohe Gruppen erzeugen genau die Leerraeume, die der Betreiber im Bild gesehen hat. Gemessen, warum das hier besonders auffaellt (M3, an /rosen/): Rosen 17 Gruppen, davon 3 mit Kindern (16, 21, 17) Clematis 25 Gruppen, davon 1 mit Kindern Magazin 3 Gruppen, davon 2 mit Kindern (20, 12) Eine Spalte, durch die 21 Kinder laufen, neben einer mit null: das ist kein Randfall, das ist der Regelfall dieses Baums. Mit `grid` bekommt jede Gruppe ihre eigene Zelle. Sie kann nicht getrennt werden, weil sie gar nicht mehr fliesst. SPALTENZAHL FEST JE BREITE, nicht vom Inhalt bestimmt — sonst entscheidet die laengste Gruppe, wie breit alle sind. ========================================================================== */ /* VERBORGEN, BIS ES AUFGEKLAPPT IST. Hier stand `display: grid` unbedingt -- und das ueberschrieb das `display: none`, mit dem Bootstrap ein `.dropdown-menu` verbirgt. Gemessen: ALLE SIEBEN Panels waren beim Laden offen, `show`-Klasse 0, `aria-expanded` 0. Das letzte im Baum (Zubehoer) deckte die Seite zu, und von aussen sah es aus, als haenge das Menue auf Zubehoer. Der Zustand hatte keine Klasse und keine Ansage -- er war einfach da. Eine Regel, die `display` unbedingt setzt, hebt jede Sichtbarkeits- steuerung auf, die vorher gegriffen hat. */ display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 2rem; align-items: start; /* Zellen erben NICHT die Hoehe der hoechsten (M4) */ } .sgp-desktop-menue .dropdown-menu.sgp-mega.show { display: grid; } @media (min-width: 1024px) { .sgp-desktop-menue .dropdown-menu.sgp-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* HOECHSTENS DREI SPALTEN (R1, Betreiberentscheidung). Hier standen vier ab 1280 px. Vier Spalten bei 1200 px Panelbreite ergeben 268 px je Spalte -- schmal genug, dass laengere Sortennamen umbrechen. */ /* Die Alle-Zeile darf nicht in eine Rasterzelle rutschen: sie gehoert ueber alle Spalten. Am Desktop ist sie ohnehin verborgen (N3) -- die Regel steht fuer den Fall, dass jemand sie dort wieder einblendet. */ .sgp-desktop-menue .sgp-mega > .sgp-mobil-alle { grid-column: 1 / -1; } /* Eine Spalte darf nicht mitten im Zweig umbrechen -- sonst steht die Ueberschrift unten in der einen und die Liste oben in der naechsten. */ .sgp-mega-spalte { break-inside: avoid; page-break-inside: avoid; display: block; margin: 0 0 1.1rem; } .sgp-mega-titel { display: block; font-weight: 600; color: #3d4419; text-decoration: none; padding: .15rem 0; border-bottom: 1px solid #e5ddd2; margin-bottom: .35rem; } .sgp-mega-titel:hover, .sgp-mega-titel:focus { color: #525a24; text-decoration: underline; } .sgp-mega-liste { list-style: none; margin: 0; padding: 0; } .sgp-mega-liste .dropdown-item { padding: .15rem 0; white-space: normal; } /* Schmale Fenster: das Mega-Panel gibt es nur am Desktop. Unterhalb des Umschaltpunkts uebernimmt der mobile Stapel, und der bleibt unberuehrt. */ @media (max-width: 799px) { .sgp-desktop-menue .dropdown-menu.sgp-mega { column-count: 1; } } /* ============================================================================ MARKER FUER EINTRAEGE MIT UNTERPUNKTEN. B-33 Punkt 3, 29.08.2026 (CC-3) Am Telefon war nicht zu sehen, welcher Eintrag weitergeht -- einer mit Unterpunkten sah aus wie einer ohne. DAS ZEICHEN IST chevron-up, UM 180 GRAD GEDREHT, und das ist kein Umweg: im Shop steht `.bi-chevron-down{transform:rotate(180deg)}` und dreht eine Maske, die es dort nicht gab -- ich hatte sie am 29.08. als Blindgaenger gemeldet, CC-2 hat "stehenlassen" entschieden, und B-33 zeigt warum: die Regel war kein Rest, sondern eine Vorwegnahme. Dieselbe Konstruktion hier haelt Shop und Prototyp bei EINER Zeichendatei. Quelle: server/frontend/bi-icons/chevron-up.svg, offizieller Bootstrap-Icons-Satz, nach E-489 vorher angemeldet. ============================================================================ */ /* HING BIS 29.08.2026 AN `.sgp-mobil-eintrag-oeffnen` — einer Klasse, die nur das bauende JS vergab. Mit dem statischen Markup gibt es sie nicht mehr; die Regel haette auf nichts gezeigt, und Punkt 3 waere still verschwunden. Traeger ist jetzt, was das Markup selbst aussagt: ein Verweis mit `aria-controls` ist einer, der weitergeht. Damit stimmen Zeichen und Ansage zwangslaeufig ueberein — vorher waren es zwei Behauptungen, die auseinandergehen konnten. Nur am Telefon: am Desktop klappt das Mega-Panel auf. */ @media (max-width: 799px) { .sgp-menue a[aria-controls] { position: relative; padding-right: 2.5rem; } .sgp-menue a[aria-controls]::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-chevron-up%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%204.646a.5.5%200%200%201%20.708%200l6%206a.5.5%200%200%201-.708.708L8%205.707l-5.646%205.647a.5.5%200%200%201-.708-.708l6-6z%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-chevron-up%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%204.646a.5.5%200%200%201%20.708%200l6%206a.5.5%200%200%201-.708.708L8%205.707l-5.646%205.647a.5.5%200%200%201-.708-.708l6-6z%22%2F%3E%20%3C%2Fsvg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transform: rotate(180deg); opacity: .65; } } /* ============================================================================ "ALLE ... ANZEIGEN". B-33 Punkt 4. Am Telefon fuehrte kein Weg auf die Kategorieseite selbst -- der Tipp auf den Namen klappte nur auf. Ein eigener erster Eintrag ist eindeutig und pruefbar. NICHT die geteilte Zeile (Name fuehrt, Pfeil klappt): eleganter, aber auf kleinen Fingern regelmaessig falsch getroffen. Vorgelegt, nicht gewaehlt. ============================================================================ */ .sgp-mobil-alle > a { font-weight: 600; color: #3d4419; } /* Textlabel neben Konto- und Warenkorbsymbol: am Desktop sichtbar, am Telefon verborgen. Es steht im Markup und wird hier verborgen -- nicht per JavaScript eingefuegt. Eine Sprachausgabe liest es in jedem Fall. */ .sgp-kopf-label { display: none; margin-left: .35rem; } @media (min-width: 800px) { .sgp-kopf-label { display: inline; font-size: .85rem; } } /* ============================================================================ EBENE 3: HOECHSTENS ACHT JE GRUPPE. M2, 30.08.2026 (CC-3) Die alte Regel hiess „Ebene 3 sichtbar" und war an Magazin gemessen (drei Gruppen). Fuer Rosen mit siebzehn ist sie falsch — dort stehen Gruppen mit 16, 21 und 17 Kindern nebeneinander und ergeben eine Wand. Gemessen an /rosen/, alle sieben Panels: 71 Gruppen, davon 6 mit mehr als acht Kindern groesste: 21, 20, 17, 16, 13, 12 Grenze 8 nimmt 51 Zeilen weg und laesst 65 der 71 Gruppen unberuehrt Eine kleinere Grenze braechte wenig mehr (Grenze 6: 7 Gruppen, 64 Zeilen) und schnitte dafuer in Gruppen, die heute vollstaendig passen. ES GEHT KEIN WEG VERLOREN — das war der Grund fuer die alte Regel. Unter einer gekuerzten Gruppe steht „Alle N anzeigen" und fuehrt auf die Kategorieseite. Nur DORT wird gekuerzt, wo es mehr als acht gibt. Nur am Desktop: am Telefon ist Ebene 3 eine gewoehnliche Drilldown-Stufe. ============================================================================ */ @media (min-width: 800px) { /* DIE GRENZE GILT DER LISTE DER GRUPPE, NICHT NUR EBENE 3. Hier stand `.sgp-ebene-tief > li:nth-child(n+9)` -- die dritte Ebene. Am Bild gemessen, je Gruppe die Zahl ihrer Kinder: Rosen 16 · 21 · 17 Zubehoer 10 Magazin 3 · 3 · 1 uebrige hoechstens 6 Ebene 3 Magazin 6 und 3, Zubehoer 3 -- alle unter der Grenze Die Wand steht also auf EBENE 2. Meine erste Zaehlung hatte beide Ebenen zusammengeworfen (sie zaehlte alle `dropdown-item` einer Gruppe) und die Grenze deshalb an die falsche Liste gehaengt -- sie haette nichts bewirkt und dabei richtig ausgesehen. `.sgp-mega-spalte > ul` trifft die eigene Liste der Gruppe, gleich welcher Ebene. */ /* Die Kuerzung auf acht Eintraege ist WEG. Sie war der Grund fuer den Sprunglink; mit dem Chevron entscheidet der Nutzer selbst, ob er die Gruppe sieht. Ein Deckel nimmt Wege, und genau das sollte er nicht. */ /* Die Mehr-Zeile ist aus dem Markup entfernt -- diese Regel zeigte danach ins Leere. AN CC-8: "Alle ... anzeigen" gibt es nur noch einmal je Panel (.sgp-mobil-alle) und nur am Telefon. */ } /* ============================================================================ R2 · N2 · N3 — VERTEILEN STATT FLIESSEN, UND DIE FORM FOLGT DEM INHALT CC-3, 30.08.2026. Ersetzt die Spaltenregeln darueber. `grid-auto-flow: column` mit FESTER ZEILENZAHL fuellt spaltenweise: Gruppe 1 bis R untereinander, dann die naechste Spalte. Damit wird nach ANZAHL verteilt und eine Gruppe nie getrennt -- sie ist eine Zelle. Die Zeilenzahl setzt menue.js je Panel als Inline-Stil (`--sgp-zeilen`), weil sie vom Inhalt abhaengt; die SPALTENZAHL steht hier und haengt nur an der Breite. Warum nicht `column-count`: Mehrspaltensatz laesst Inhalt fliessen und schneidet mitten durch Gruppen. Das war der Fehler im Bild. ============================================================================ */ .sgp-desktop-menue .dropdown-menu.sgp-mega { /* F4 — DREI SPUREN, HART. Vorher stand hier `grid-template-columns: none` und die Spalten entstanden implizit ueber `grid-auto-columns`. Damit KANN eine vierte, fuenfte, sechste Spalte entstehen, sobald mehr Rasterkinder da sind als Zeilenzahl mal drei -- und das Panel bekommt einen waagerechten Rollbalken. Gemessen an Rosen bei 1525 px: Rasterkinder 18 (17 Gruppen + die "Alle ..."-Zeile) panel.scrollWidth 2366 gegen clientWidth 1183 Mit drei festen Spuren kann es nicht mehr passieren: was nicht hineinpasst, geht in eine weitere ZEILE, und die Hoehe faengt das ab. F2 — ZEILEN NACH INHALT. `repeat(N, auto)` machte jede Zeile so hoch wie ihre hoechste Zelle; im Bild standen Ueberschriften mit vier Leerzeilen Abstand nebeneinander. `min-content` plus `align-content: start` laesst den Abstand aus `gap` kommen. */ /* ------------------------------------------------------------------ ZEILENFLUSS STATT SPALTENFLUSS — CC-8, 30.08.2026. `grid-auto-flow: column` stand hier zusammen mit drei festen Spuren. Diese Kombination ist die Ursache der VIERTEN SPALTE: reichen die Zeilen aus `--sgp-zeilen` nicht fuer alle Gruppen, legt das Raster IMPLIZITE Spalten an -- `grid-template-columns` begrenzt nur die expliziten. Die Zahl kam aus dem JS und konnte den Inhalt nicht kennen, also musste sie irgendwann zu klein sein. Im Zeilenfluss kann das nicht passieren: es gibt genau drei Spuren, und was nicht hineinpasst, geht in eine weitere ZEILE. Die Sorge, die zum Spaltenfluss gefuehrt hat -- eine Gruppe koennte zerrissen werden -- trifft hier nicht zu: JEDE Gruppe ist EINE Rasterzelle (`li.sgp-mega-spalte`), sie ist unteilbar, gleich in welcher Richtung geflossen wird. Nachgezaehlt: 71 Spalten, alle direkte Kinder von `.sgp-mega`. `--sgp-zeilen` aus dem JS wird dadurch wirkungslos, nicht falsch. Es kann stehenbleiben, bis CC-3 es entfernt. ------------------------------------------------------------------ */ grid-template-columns: minmax(0, 1fr); /* 1 Spalte unter 800 */ grid-auto-rows: min-content; /* keine gleich hohen Zellen */ align-content: start; justify-items: stretch; } @media (min-width: 800px) { .sgp-desktop-menue .dropdown-menu.sgp-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sgp-desktop-menue .dropdown-menu.sgp-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* F1 — DIE GRUPPE FUELLT IHRE SPUR, DIE UEBERSCHRIFT DIE GRUPPE. Gemessen: die Gruppe war 119 px breit in einer 362-px-Spur, der Titel 87 px davon. Deshalb brach die Ueberschrift um, und die Linie ging nur bis zum Text statt bis zum Spaltenrand. */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte { display: block; width: auto; min-width: 0; justify-self: stretch; } .sgp-desktop-menue .sgp-mega-kopf { width: 100%; } .sgp-desktop-menue .sgp-mega-titel { display: block; min-width: 0; } /* F3 — NIE EINE FESTE HOEHE. Nichts in einer Gruppe bekommt `height`; was nicht passt, macht das Panel hoeher, und dessen `max-height` faengt es ab. */ .sgp-desktop-menue .sgp-mega-spalte, .sgp-desktop-menue .sgp-mega-liste, .sgp-desktop-menue .sgp-mega-kopf { height: auto; overflow: visible; } /* Ein Panel, in dem KEINE Gruppe Kinder hat, ist eine Linkliste (N2): keine Ueberschriftgestaltung, kein Chevron, keine Klappmechanik. Clematis 24 von 25 ohne Kinder, Ueber Uns 6 von 6 -- fuer die waere "Gruppen verteilen" das Falsche. */ .sgp-mega--liste .sgp-mega-titel { font-weight: 400; } .sgp-mega--liste .sgp-mega-chevron { display: none; } /* Der Chevron erscheint NUR an Gruppen mit Kindern. */ .sgp-mega-chevron { display: none; } .sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-chevron { display: inline-flex; } .sgp-mega-kopf { display: flex; align-items: center; gap: .25rem; } .sgp-mega-kopf .sgp-mega-titel { flex: 1 1 auto; } .sgp-mega-chevron { /* 44 px Trefferflaeche (E2) -- sichtbar ist nur das Zeichen. */ flex: 0 0 auto; width: 44px; height: 44px; margin: -12px 0; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; /* NICHT `inherit`. Geerbt wird von `.top-bar`, und das ist WEISS -- ein weisser Chevron auf weissem Panel. Gemessen: color rgb(255,255,255). Alles Zaehlbare stimmte, sichtbar war nichts. */ color: #3d4419; } .sgp-mega-chevron::before { /* `display: block` IST NOETIG. Ein `::before` ist von Haus aus inline, und bei inline wirken `width` und `height` nicht -- der Kasten blieb 0x0 und zeichnete nichts. Der Knopf selbst mass 44x44, `display: flex`, die Regel griff: alles, was man zaehlen kann, war richtig. Sichtbar war trotzdem nichts. Gefunden erst am vergroesserten Bildausschnitt. */ content: ''; display: block; /* box-sizing UND !important: fremdes CSS (Foundation/Bootstrap) drueckte die Breite auf 2 px -- gemessen `width: 2px` bei gesetztem .7rem. */ box-sizing: border-box; width: .7rem !important; height: .7rem !important; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .6; } .sgp-mega-chevron[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -2px); } /* R3/R4: eingeklappte Gruppenliste. Die Klasse setzt menue.js. */ @media (min-width: 800px) { .sgp-hat-liste.sgp-zu > ul { display: none; } } /* ============================================================================ H2 · DAS PANEL SCROLLT IN SICH, DIE SEITE NICHT. Gemessen an /rosen/, Fenster 768 px hoch: Rosen eingeklappt 690 px (1024 px breit) bzw. 627 (ab 1280) Rosen mit der 21er-Gruppe offen 920 bzw. 835 Das Panel beginnt unterhalb des Kopfes; schon eingeklappt bleibt zu wenig Platz. Ein Deckel auf die Kinderzahl kam nicht in Frage -- die Gruppenlisten sind offen gehalten, damit kein Weg verlorengeht. `max-height` aus der Fensterhoehe minus der Oberkante des Panels: mehr kann es nie brauchen, weniger waere geraten. Den Wert setzt menue.js beim Oeffnen, weil die Oberkante von der Kopfhoehe abhaengt und die sich mit der Breite aendert. ============================================================================ */ /* H2 IST AM 30.08.2026 ERSATZLOS ENTFALLEN. Der Betreiber: "KEINE ROLLBALKEN, in keiner Richtung, nirgends im Menue." Die Regel stand hier seit der Zeit, als das Panel die Kinderlisten INLINE zeigte und dabei 898 px hoch wurde. Seit dem Fly-Over ist das hoechste Panel dieser Form 375 px (Clematis) -- der Deckel greift nie mehr, der Rollbalken war sein einziger sichtbarer Rest. D1 weiter unten hat ihn oberhalb 800 px schon zurueckgenommen. Dass er DARUNTER weiterlief, ist mir bis heute entgangen: ich hatte die Aufhebung in denselben `@media`-Rahmen gelegt wie die Regel, die sie aufhebt, statt die Regel selbst zu entfernen. Eine Aufhebung im engeren Geltungsbereich als das Aufgehobene sieht vollstaendig aus und ist es nicht. `--sgp-maxhoehe` wird damit von niemandem mehr gelesen. AN CC-3: die Zuweisung in menue.js kann mit `--sgp-flyover-oben` und `--sgp-panelhoehe` zusammen raus. */ /* ============================================================================ .visually-hidden — FUER DIE SPRACHAUSGABE DA, FUER DAS AUGE NICHT. Die Klasse gab es in diesem Baum NICHT. Der Chevron traegt sie an seiner Beschriftung "auf- und zuklappen", und die stand dadurch gross neben jeder Ueberschrift im Panel. Keine Zahl haette das gezeigt: der Knopf war 44x44, die Regel griff, das Markup war richtig. Nicht `display: none` und nicht `visibility: hidden` -- beides nimmt den Text auch der Sprachausgabe. Der Weg darunter ist der uebliche: aus dem Bild schieben, aber im Baum lassen. ============================================================================ */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================================ GESTALTUNG DES PANELS UND DER VERTRAUENSLEISTE — CC-8, 30.08.2026 (G1–G6) DIE FARBEN SIND NICHT GEWAEHLT, SIE SIND GEMESSEN. Alle Werte unten stehen so im Bestand; nachgezaehlt in cache.css und in docs/konvention-sgp-css.md, Abschnitt 2a: #f4efd4 die helle Flaeche des Shops (#header) #d7cfc1 warmes Grau, Trennlinien (.rating-box) #3d4419 dunkles Oliv, Ueberschriften (heutiger .sgp-mega-titel) #333 Fliesstext ($textColor in base.scss) #69732f Hausgruen (.button) #1a1a1a Fokusfarbe (:focus outline-color, seit 31.08.) rgba(0,0,0,.05) die Flaeche fuer "ausgewaehlt"/"gezeigt" (.product-variant input:checked+label) G6 ist damit erfuellt: hier entsteht keine Marke, hier bekommt sie Ordnung. EINE RHYTHMUSEINHEIT, konsequent (G2): 4px Grundeinheit 12px Ueberschrift -> ihre Liste (3 Einheiten) 28px Gruppe -> Gruppe, und Innenabstand (7 Einheiten) 40px Spalte -> Spalte (10 Einheiten) Zwischen Zeilen EINER Gruppe entsteht der Abstand aus der Zeilenhoehe und dem Polster der Trefferflaeche, nicht aus `margin` -- sonst ist die Trefferflaeche kleiner als der Abstand, und man klickt ins Leere. ============================================================================ */ .sgp-menue { --sgp-flaeche: #f4efd4; --sgp-linie: #d7cfc1; --sgp-ueberschrift: #3d4419; --sgp-text: #333; --sgp-gruen: #69732f; --sgp-fokus: #1a1a1a; /* war #98a651 -- 1,93:1 gegen das eigene Band, verlangt sind 3,00. Rechnung oben bei der Regel `.sgp-menue a:focus-visible` */ --sgp-hover: rgba(0, 0, 0, .05); --sgp-einheit: 4px; } /* --- G1 · DAS PANEL IST EINE FLAECHE ------------------------------------- */ .sgp-desktop-menue .dropdown-menu.sgp-mega { background: var(--sgp-flaeche); padding: 28px; border: 0; border-bottom: 1px solid var(--sgp-linie); border-radius: 0; /* Ein weicher Schatten NACH UNTEN, kein Rahmen ringsum: das Panel haengt unter der Leiste, es steht nicht frei. */ box-shadow: 0 10px 24px rgba(0, 0, 0, .12); column-gap: 40px; row-gap: 28px; } /* --- G2 · ABSTAENDE, UEBERALL GLEICH ------------------------------------- */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte { margin: 0; /* der Abstand kommt aus row-gap, nicht doppelt */ padding: 0; break-inside: avoid; } .sgp-desktop-menue .sgp-mega-liste { margin: 0; padding: 0; list-style: none; } /* --- G3 · UEBERSCHRIFT GEGEN EINTRAG: GEWICHT UND FARBE, KEIN GROESSENSPRUNG 15 gegen 14 px ist bewusst fast nichts. Der Unterschied soll aus 600 gegen 400 und aus der Farbe kommen -- ein Groessensprung macht aus Gruppen Ueberschriften zweiter Ordnung, und das Panel liest sich wieder als Liste. */ .sgp-desktop-menue .sgp-mega-kopf { display: flex; align-items: baseline; /* G4: der Chevron sitzt auf der Grundlinie */ gap: 8px; width: 100%; /* DIE LINIE GEHOERT AN DEN KOPF, NICHT AN DEN TITEL. Gemessen am 30.08.: in 19 von 71 Panels endete sie 48 px vor dem Spaltenrand -- genau dort, wo der Chevron beginnt. Der Titel ist ein Flex-Element und damit schmaler als die Spalte; der Kopf ist es nicht. */ border-bottom: 1px solid var(--sgp-linie); padding-bottom: calc(var(--sgp-einheit) * 2); /* 8 */ margin-bottom: calc(var(--sgp-einheit) * 3); /* 12 -> zur Liste */ } .sgp-desktop-menue .sgp-mega-titel, .sgp-desktop-menue .sgp-mega--liste .sgp-mega-titel { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sgp-ueberschrift); text-decoration: none; /* die Linie sitzt jetzt am Kopf -- hier muss sie weg, sonst stehen zwei */ border-bottom: 0; padding: 0; margin: 0; } .sgp-desktop-menue .sgp-mega-titel:hover, .sgp-desktop-menue .sgp-mega-titel:focus-visible { color: var(--sgp-gruen); } /* --- G4 · ZEILEN SIND BEDIENELEMENTE ------------------------------------- */ .sgp-desktop-menue .sgp-mega-liste .dropdown-item, .sgp-desktop-menue .sgp-mega-mehr { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--sgp-text); text-decoration: none; /* Trefferflaeche ueber die VOLLE Spaltenbreite: Polster, nicht Rand. Das negative margin holt den Text an die Spaltenkante zurueck, waehrend die Flaeche breiter bleibt als er. */ padding: calc(var(--sgp-einheit) * 1.5) 8px; margin: 0 -8px; border-radius: 3px; /* G5 · hoechstens zwei Zeilen, danach Auslassungspunkte statt Ausfransen */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sgp-desktop-menue .sgp-mega-liste .dropdown-item:hover, .sgp-desktop-menue .sgp-mega-mehr:hover { background: var(--sgp-hover); color: var(--sgp-text); } /* DER FOKUSRING. Es gab keinen -- Tastaturbedienung ohne sichtbare Marke. `:focus-visible` und nicht `:focus`, damit er beim Mausklick nicht steht. */ .sgp-desktop-menue .sgp-mega a:focus-visible, .sgp-desktop-menue .sgp-mega button:focus-visible { outline: 2px solid var(--sgp-fokus); outline-offset: 2px; border-radius: 3px; } /* Die tiefere Ebene bleibt eingerueckt, aber ruhiger: die Linie war 2 px und trug dieselbe Farbe wie die Trennlinie der Ueberschrift -- zwei Bedeutungen, ein Strich. */ .sgp-desktop-menue .sgp-ebene-tief { border-left: 1px solid var(--sgp-linie); margin: calc(var(--sgp-einheit)) 0 calc(var(--sgp-einheit) * 2) 8px; padding-left: 12px; } /* --- G4 · DER CHEVRON ---------------------------------------------------- */ /* ER WAR UNSICHTBAR UND TROTZDEM 44 px BREIT. Gemessen am 30.08.2026: der Knopf enthaelt NUR `` -- kein Zeichen, kein , kein SVG. Er belegte Platz, zeigte nichts und schnitt die Ueberschriftlinie ab. Gezeichnet wird er hier in CSS, ohne Markup-Aenderung und ohne den Zeichenvorrat: zwei Raender, um 45 Grad gedreht. Dieselbe Bauart wie beim Mengenknopf weiter oben in dieser Datei. */ .sgp-desktop-menue .sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-chevron { flex: 0 0 auto; width: 44px; height: 44px; margin: -14px -12px -14px 0; /* 44px Trefferflaeche, ohne die Zeile zu dehnen */ padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--sgp-ueberschrift); } .sgp-desktop-menue .sgp-mega-chevron::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease-out; } .sgp-desktop-menue .sgp-mega-chevron[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); } .sgp-desktop-menue .sgp-mega-chevron:hover { color: var(--sgp-gruen); } /* Die "Alle … anzeigen"-Zeile schliesst die Gruppe ab, sie ist kein Eintrag. */ .sgp-desktop-menue .sgp-mega-mehr { margin-top: calc(var(--sgp-einheit) * 2); font-size: 13px; color: var(--sgp-gruen); } /* ============================================================================ DIE VERTRAUENSLEISTE. Nachtrag 10:50, Werte nach Vorgabe des Betreibers. EINE Fassung. Bis zum 31.08.2026 standen hier ZWEI vollstaendige Bloecke (der zweite rund 490 Zeilen weiter oben), beide mit Spezifitaet 0,1,0. Der spaetere gewann -- aber nur teilweise, weil er nicht alles setzte, was der fruehere setzte. Am Geraet gemessen, nicht vermutet: der obere Rand kam aus dem einen Block (#e5ddd2), der untere aus dem anderen (#d7cfc1). Zwei verschiedene Farben an einer 34 px hohen Leiste, und keine davon die vorgegebene. Der fruehere Block ist entfernt; dies ist die einzige Quelle. ============================================================================ */ /* ============================================================================ ZURUECKGENOMMEN am 31.08.2026, 17:10 -- vier Eingriffe in den Kopf, vier neue Verdeckungen. Hier stand von v91 bis v93: .title-bar { display: flow-root; } (v91) .title-bar-right absolut verankert (v92) .title-bar { padding-right: 103px; } (v93) JEDER SCHRITT HAT EINEN FEHLER BEHOBEN UND DEN NAECHSTEN ERZEUGT, und der naechste war jedes Mal schlimmer als der vorige. Alle vier hat CC-9 gefunden, keinen ich: v91 Kopfsprung +46 px beseitigt -> Float ragt 15 px unter den Kopf v92 Float verankert -> Logo zu 40 % vom Warenkorb verdeckt v93 Platz reserviert -> Logo rutscht auf die TRUSTLEISTE, beide Punkte verdeckt Bei v93 war die Vertrauensleiste im Markup vorhanden, 34 px hoch, mit zwei Punkten, `sichtbar: true` -- und man sah sie nicht. Hoehe, Punktzahl und Sichtbarkeitsflag waren alle gruen; nur die Frage „liegt etwas darueber?" fiel durch. GEMESSEN, 361 px, Ruecknahme gegen v93: Kopf 121 gegen 118 (drei Pixel teurer) Logo y 44..62 gegen 97..115 (oben statt auf der Leiste) Trustpunkte beide frei gegen beide verdeckt Menue/Logo/Korb 25/25 je gegen 25/25 je Drei Pixel Kopfhoehe gegen eine sichtbare Vertrauensleiste -- das ist kein Tausch, ueber den man nachdenkt. WAS BLEIBT: der Kopfsprung zwischen 369 und 368 px, den CC-9 gefunden hat. Er ist BESTANDSVERHALTEN (Gegenprobe: er tritt auch ohne die Vertrauensleiste auf) und liegt in der Titelzeile, nicht in meiner Datei. Ihn zu beheben heisst, in das Float-Gefuege des Kopfes einzugreifen -- und genau das hat viermal danebengegriffen. Das gehoert vorgelegt, nicht am Vorabend des Livegangs zum fuenften Mal versucht. ============================================================================ */ .sgp-vertrauen { /* `clear: both` IST HIER KEIN AUFRAEUMEN, SONDERN DER GRUND, WARUM DIE LEISTE UEBERHAUPT SICHTBAR IST. Seit die Leiste letztes Kind von #header ist (CC-3s Umbau, damit kopfhoeheSetzen() die richtige Kante misst), steht sie im Float-Kontext des Kopfes. `display: flex` erzeugt einen eigenen Block-Formatierungskontext, und ein solcher weicht Floats AUS, indem er schmaler wird -- er schiebt sich nicht darunter. Gemessen am 31.08. im 341-px-Rahmen, VOR dieser Zeile: Leiste Breite 130, linke Kante 108 (also in die Luecke zwischen Logo links und Konto/Warenkorb rechts geklemmt) Inhalt 210 breit, Ueberhang 80 px, beschnitten im Bild „b 6,90 € · Kauf" statt „Versand ab 6,90 € · Kauf auf Rechnung" Beidseitig abgeschnitten, auf JEDER Seite, am Telefon. Die Hoehe war dabei korrekt 34, die Punktzahl korrekt 2, der Kontrast korrekt -- drei Abnahmen sind daran vorbeigegangen, weil keine die BREITE gemessen hat. Gegenprobe dreimal gefahren: ohne die Zeile 130 und beschnitten, mit ihr 341 und sauber, nach dem Entfernen wieder 130. */ clear: both; height: 34px; background: #fff; border-top: 1px solid #e6e2d0; border-bottom: 1px solid #e6e2d0; font-size: 13px; color: #4a4d42; display: flex; align-items: center; overflow: hidden; /* einzeilig, ausnahmslos */ } .sgp-vertrauen-inner { display: flex; align-items: center; justify-content: center; /* 10 px zwischen Zeilen, 12 px zwischen Punkten. Die Leiste ist einzeilig, also wirkt praktisch nur der zweite Wert -- der erste steht da, damit ein Umbruch, falls er je entsteht, nicht klebt. */ gap: 10px 12px; white-space: nowrap; width: 100%; max-width: 75rem; /* dieselbe Zeilenbreite wie der Shop */ margin: 0 auto; padding: 0 16px; } .sgp-vertrauen-punkt { display: inline-flex; align-items: center; gap: 6px; } .sgp-vertrauen-punkt i { opacity: .7; } .sgp-vertrauen-punkt a { color: inherit; text-decoration: underline; } /* Der Versandbetrag ist der einzige Punkt mit Gewicht -- er traegt die Kaufentscheidung. Gebunden an „erster Punkt OHNE Link": der Betrag ist reiner Text, der Versandkosten-Verweis ist ein Link. Ohne das `:not` wuerde bei einem Lieferland ohne Betrag der Verweis fett -- dieselbe Falle wie beim nth-child unten, nur eine Zeile tiefer. */ .sgp-vertrauen-punkt:first-child:not(:has(a)) { font-weight: 700; } /* Das Trennzeichen ist Zierde: es steht in der Seite, nicht in der Sprachausgabe. `content` mit `aria-hidden` geht nicht -- ein Pseudoelement ist fuer Vorlesegeraete ohnehin kein Knoten, deshalb genuegt es hier. */ .sgp-vertrauen-punkt + .sgp-vertrauen-punkt::before { content: "·"; margin-right: 12px; color: #cfcbb4; } /* MOBIL BLEIBEN GENAU ZWEI PUNKTE: Versandbetrag und Zahlart. NICHT ueber nth-child. Bis zum 31.08. stand hier `nth-child(n + 3)`, und das war vom LIEFERLAND abhaengig: die ersten beiden Punkte sind Sigma-Bloecke (sgpVersandBetrag, sgpVersandVerweis), von denen je nach Land einer oder beide erscheinen. Gegenprobe am Geraet, im 360-px-Rahmen: den Versandkosten-Verweis eingefuegt, wie ihn ein anderes Lieferland liefert -- und „Kauf auf Rechnung" fiel heraus. Genau der Punkt, der bleiben soll. Uebrig blieben zwei Versandangaben und keine Zahlart. Deshalb ableitbar statt gezaehlt: es faellt, was lang ist, was am Telefon ohnehin per Hoerer erreichbar ist, und der Versandkosten-Verweis -- erkannt an seinem Ziel, nicht an seiner Position. */ @media (max-width: 767.98px) { .sgp-vertrauen-lang, .sgp-vertrauen-tel, .sgp-vertrauen-punkt:has(a[href*="versandkosten"]) { display: none; } /* Faellt der Verweis als ERSTER weg, truege der naechste Punkt einen fuehrenden Trenner -- „· Kauf auf Rechnung". Nur dann, nicht sonst: steht ein Betrag davor, gehoert der Trenner hin und bleibt. */ .sgp-vertrauen-punkt:first-child:has(a[href*="versandkosten"]) + .sgp-vertrauen-punkt::before { content: none; } } /* ============================================================================ DIE FORM FOLGT DEM EINTRAG, NICHT DEM PANEL — CC-8, 30.08.2026 Gemessen an allen sieben Panels bei 1226 px, bevor diese Regel entstand: Panel Gruppen mit Kindern mit Linie Ueber Uns 6 0 6 Magazin 3 3 3 Rosen 17 5 17 Clematis 25 1 25 Pflanzen 7 4 7 Erde & Duenger 4 2 4 Zubehoer 9 4 9 Bei Clematis trugen 24 Eintraege OHNE Kinder eine Ueberschriften-Linie und sahen dadurch aus wie Kategorien, die sich oeffnen liessen. Die alte Regel hing am PANEL (`.sgp-mega--liste`) und griff nur, wenn KEINE Gruppe Kinder hat -- an dem einen Eintrag mit Kindern ist sie gescheitert. Jetzt haengt sie am EINTRAG: mit Kindern -> Ueberschrift: Gewicht, Linie, Chevron ohne Kinder -> schlichter Link: keine Linie, kein Chevron, Eintragsfarbe `.sgp-hat-liste` setzt menue.js je Gruppe, wenn sie Kinder hat (Zeile 157). ============================================================================ */ /* Grundzustand ist jetzt der SCHLICHTE LINK -- die Ueberschrift ist die Ausnahme, nicht die Regel. So kann kein Panel mehr Linien zeigen, die es nicht verdient hat. */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel { font-size: 14px; font-weight: 400; color: var(--sgp-text); padding: calc(var(--sgp-einheit) * 1.5) 8px; margin: 0 -8px; border-radius: 3px; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte:not(.sgp-hat-liste) > .sgp-mega-kopf > .sgp-mega-titel:hover { background: var(--sgp-hover); color: var(--sgp-text); } /* DIE AUSNAHME: eine Gruppe MIT Kindern ist eine Ueberschrift. */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf { border-bottom: 1px solid var(--sgp-linie); padding-bottom: calc(var(--sgp-einheit) * 2); margin-bottom: calc(var(--sgp-einheit) * 3); } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel { font-size: 15px; font-weight: 600; color: var(--sgp-ueberschrift); padding: 0; margin: 0; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel:hover { background: none; color: var(--sgp-gruen); } /* ============================================================================ NACHBAU DES LIVE-MENUES — CC-8, 30.08.2026. Ersetzt alles darueber, was Ueberschriften, Linien und aufgeklappte Listen betrifft. ALLE WERTE SIND AM LAUFENDEN LIVE ABGELESEN, nicht geschaetzt: docs/austausch/2026-08-30-cc8-live-menue-messwerte.md Panel #fff, kein Rahmen, KEIN Schatten, Polster 15px 0 Eintrag 16px / 700, Zeilenhoehe 16px, Farbe #333, KEINE Linie, Polster 11.2px 16px, 38px von Grundlinie zu Grundlinie Hover #e89c23 (B-58: Kontrast 2,28:1, Entscheidung offen -- bis dahin 1:1 wie Live) Marker a::after, position:absolute, right:14px, Dreieck aus border-width 6px 0 6px 6px; ohne Kinder content:none Fly-Over #fff, 1px solid #cacaca, KEIN Schatten, Polster 0, Oberkante auf Hoehe des Eintrags, linke Kante an dessen rechter Spaltenkante DREI BEGRUENDETE ABWEICHUNGEN, jede benannt: 1. Markerfarbe Hausgruen statt Foundations Blau (C2) -- eine Farbe aus einer Bibliothek zu erben, die abgeschafft wird, waere ein Waisenwert. 2. Der zweispaltige Fly-Over. Live hat ihn nicht. 3. Die Vertrauensleiste. Live hat sie nicht. Der Schatten am Fly-Over ist ZURUECKGENOMMEN (C1) -- Live hat keinen. ============================================================================ */ /* --- KEINE KINDERLISTE IM PANEL. Das ist die Ursache des Weissraums: gemessen kostete sie bei Zubehoer 752 px, bei Erde & Duenger 423 px, waehrend das Polster nur 39 px ausmacht. --------------------------------- */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega .sgp-mega-liste { display: none; } /* --- DAS PANEL, wie Live --------------------------------------------- */ .sgp-desktop-menue .dropdown-menu.sgp-mega { background: #fff; border: 0; box-shadow: none; padding: 15px 0; column-gap: 0; row-gap: 0; /* F8 — HIER STAND `repeat(auto-fit, minmax(360px, 1fr))`, ENTFERNT 30.08.2026. Es war die letzte gewinnende Regel fuer `grid-template-columns` am Panel und hat damit ALLE anderen ausgehebelt: die Haltepunktregeln (2 Spuren ab 800, 3 ab 1024) und die `:has()`-Regeln aus E2 gleichermassen. Gemessen, und es erklaert beide Ergebnisse auf einmal: CSS-Breite 1211 -> 1211/360 = 3 Spuren Abnahme gruen CSS-Breite 1009 -> 1009/360 = 2 Spuren Abnahme rot Bei 1009 rechneten F6 und F7 mit drei Spuren, weil ihre Medienabfrage `min-width: 1024px` zutraf -- das Raster hatte aber zwei. Ein zweispaltiger Kasten war dann 2 x 504 = 1009 breit und ragte um genau eine Spur hinaus. ZWEI SYSTEME FUER DIESELBE ZAHL, und ich habe an beiden gebaut, ohne zu merken, dass nur eines wirkt. Dass es bei 1226 richtig aussah, war Zufall: dort geben `auto-fit`/360 und die Haltepunktregel beide drei. Die Spurzahl entscheiden ab jetzt allein die Haltepunkte und E2. Damit steht sie an einer Stelle, und die `:has()`-Regeln, die das Live-Bild je Panel nachbilden, koennen ueberhaupt wirken. */ } /* --- DER EINTRAG ------------------------------------------------------ */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte { position: relative; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf { border-bottom: 0; padding: 0; margin: 0; display: block; /* kein Flex mehr -- der Chevron ist weg */ } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel { display: block; position: relative; font-size: 16px; font-weight: 700; line-height: 16px; color: #333; /* 11.2 + 16 + 11.2 = 38.4 -- daraus entsteht der gemessene Grundlinienabstand von 38px, ohne dass er irgendwo als Zahl steht. */ padding: 11.2px 16px; margin: 0; border: 0; border-radius: 0; background: none; } .sgp-desktop-menue .sgp-mega .sgp-mega-titel:hover, .sgp-desktop-menue .sgp-mega .sgp-mega-titel:focus-visible { color: #e89c23; } /* Der Chevron ist am Desktop kein Griff mehr -- der Fly-Over oeffnet ueber das Ueberfahren. Am Telefon bleibt er (unterhalb 800px greift diese Regel nicht). */ .sgp-desktop-menue .sgp-mega-chevron { display: none !important; } /* --- DER MARKER: nur bei Eintraegen mit Kindern ----------------------- */ .sgp-desktop-menue .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -6px; width: 0; height: 0; border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent var(--sgp-gruen, #69732f); } /* --- DER FLY-OVER ----------------------------------------------------- */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste { display: block; position: absolute; /* Oberkante auf Hoehe des Eintrags, linke Kante an dessen rechter Spaltenkante -- beides an Live gemessen (178 gegen 179, 861 gegen 861). Er darf die Nachbarspalte verdecken, den Eintrag nicht. */ top: 0; left: 100%; z-index: 30; /* DER KASTEN MUSS MITWACHSEN. Mit `min-width` allein blieb er bei 289 px stehen, waehrend `column wrap` eine zweite Spalte anlegte -- die stand dann OHNE Grund und OHNE Rahmen ueber der dritten Panelspalte. Im Bild ueberlagerten sich "Rambler-Rosen" und "Schottische Zaunrosen". `width: max-content` laesst die Breite dem Inhalt folgen: eine Spalte 287, zwei Spalten 574. */ background: #fff; border: 1px solid #cacaca; box-shadow: none; /* C1: Live hat keinen */ padding: 0; margin: 0; list-style: none; /* Rollbalken gibt es hier nicht mehr, in keiner Richtung. Was frueher an dieser Stelle stand -- `flex-flow: column wrap` mit einer `max-height` -- ist am 30.08.2026 vollstaendig entfallen. Die Begruendung steht unten bei F1; sie gehoert dorthin, weil dort auch die Spaltenzahl gesetzt wird. */ overflow: visible; } .sgp-desktop-menue .sgp-mega-liste > li { width: 287px; } .sgp-desktop-menue .sgp-mega-liste .dropdown-item { display: block; font-size: 14px; font-weight: 400; /* normal, nicht halbfett */ line-height: 1.4; /* etwas enger als im Panel */ color: #333; padding: 7px 16px; margin: 0; border: 0; border-radius: 0; background: none; -webkit-line-clamp: none; } .sgp-desktop-menue .sgp-mega-liste .dropdown-item:hover { color: #e89c23; background: none; } /* Die tiefere Ebene im Fly-Over bleibt eingerueckt, ohne eigene Linie. */ .sgp-desktop-menue .sgp-ebene-tief { border: 0; margin: 0; padding-left: 16px; } .sgp-desktop-menue .sgp-mega-mehr { display: none; } } /* KEINE LINIEN. KEINE. — Nachtrag CC-8, 30.08.2026. Die Regel `.sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf` weiter oben traegt ZWEI Klassen und schlaegt damit das `border-bottom: 0` aus dem Live-Nachbau, das nur eine trug. Gemessen: 3/5/1/4/2/4 Linien in den Panels mit Kindern, obwohl der Nachbau sie entfernt hatte -- ein Fall, in dem eine spaetere Regel verliert, weil sie schwaecher ist. Hier steht sie mit gleicher Staerke und spaeter. */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf { border-bottom: 0; padding: 0; margin: 0; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel { font-size: 16px; font-weight: 700; color: #333; padding: 11.2px 16px; margin: 0; } } /* ============================================================================ D1 — DIE max-height AM PANEL FAELLT WEG. CC-8, 30.08.2026. Sie stammt aus der Zeit, als das Panel die Kinderlisten INLINE zeigte und dadurch bis 898 px hoch wurde. Seit dem Fly-Over ist das hoechste Panel 374 px (Clematis) -- die Deckelung greift nie mehr, der Rollbalken war ihr einziger sichtbarer Rest. WICHTIGER ALS DER ROLLBALKEN: `overflow-x: hidden` und `overflow-y: auto` machen aus dem Panel einen BESCHNITTKASTEN. Der Fly-Over sitzt `position:absolute; left:100%` -- also ausserhalb dieses Kastens, und wurde damit an dessen Kante abgeschnitten. Ein Element kann nicht gleichzeitig ueber den Rand hinausragen und in einem Kasten mit `overflow` stehen; das ist die Regel, nicht ein Zufall. Deshalb: kein `max-height`, kein `overflow` am Panel. Was zu hoch wird, faengt der Fly-Over mit seiner eigenen `max-height` und seinem Zweispaltenumbruch ab -- dort gehoert die Deckelung hin, denn dort kann wirklich mehr Inhalt entstehen, als auf den Schirm passt. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .dropdown-menu.sgp-mega, .sgp-desktop-menue .dropdown-menu.sgp-mega.show { max-height: none; overflow: visible; } } /* ============================================================================ E1 — DER FLY-OVER RASTET AUF SPALTENKANTEN EIN. CC-8, 30.08.2026. Vorher kam seine Breite aus dem INHALT (`width: max-content`), und das waren 576 px: zwei Eintragsspalten zu 287. Eine Rasterspalte des Panels ist aber 400 px breit. Die rechte Kante fiel damit mitten in die dritte Spalte, und von ihr blieben Reste stehen -- im Bild "…Miniaturrosen)" und zwei Marker ohne ihren Text. Jetzt ist die EINTRAGSBREITE eine Rasterspalte. Damit ist jede moegliche Fly-Over-Breite ein Vielfaches davon: eine Spalte = 1 Rasterspalte -> rechte Kante auf einer Rasterkante zwei Spalten = 2 Rasterspalten -> ebenso Die dritte Panelspalte steht dadurch entweder ganz da oder gar nicht. DIE SPALTENBREITE OHNE JAVASCRIPT: Das Panel ist so breit wie die Zeilenbreite des Shops (75rem = 1200px), hoechstens aber so breit wie das Fenster. Bei drei Spuren und `column-gap: 0` ist eine Spur also `min(1200px, 100vw) / 3` -- ein Laufzeitwert, keine geratene Zahl. Aendert sich die Spurenzahl (2 ab 800, 1 darunter), aendert sich der Teiler mit. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-menue, .sgp-desktop-menue .sgp-mega { --sgp-spurbreite: calc(min(1200px, 100vw) / 2); } } @media (min-width: 1024px) { .sgp-desktop-menue .sgp-menue, .sgp-desktop-menue .sgp-mega { --sgp-spurbreite: calc(min(1200px, 100vw) / 3); } } @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega-liste > li { width: var(--sgp-spurbreite, 287px); } .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste { width: var(--sgp-spurbreite, 287px); /* eine Spur; F1 macht daraus zwei */ } /* ------------------------------------------------------------------------ E2, erster Teil — AUSGEGLICHENE SPALTEN STATT EINER EIN-EINTRAG-SPALTE. Live macht Erde & Duenger 2·1·1; der Betreiber will 2·2. Die Spaltenzahl folgt hier der Zahl der Gruppen, gezaehlt IN CSS ueber die Geschwister -- kein Markup, kein JS: genau 4 Gruppen -> zwei Spuren, ergibt 2·2 Panels mit 6, 9, 17 und 25 Gruppen bleiben bei drei Spuren und ergeben von selbst 2·2·2, 3·3·3, 6·6·5 und 9·8·8 -- genau die Live-Verteilung. ENTFERNT 30.08.2026 -- die Regel stand hier als `:has(> .sgp-mega-spalte:nth-child(4):nth-last-child(1))` und zaehlte noch OHNE das `li.sgp-mobil-alle`, das als Kind 1 mitzaehlt. Vier Gruppen enden bei Kind FUENF, nicht bei Kind vier. Die berichtigte Fassung steht unten (`:last-child:nth-child(5)`) -- ich hatte sie hinzugefuegt und die falsche stehen lassen. Gemerkt hat es niemand, weil die falsche Regel ein Panel traf, das es zufaellig auch gab: MAGAZIN hat drei Gruppen, also vier Kinder, also endet es bei Kind vier. Es bekam zwei Spuren zu 600 px statt drei zu 400 -- eine Wirkung, die fuer sich genommen plausibel aussah. Das ist zum dritten Mal dieselbe Gestalt an einem Tag: Berichtigung hinzugefuegt, Falsches stehen gelassen (Muster 14). Beim Marker, bei H2 unter 800 px, und hier. ------------------------------------------------------------------------ */ } /* ============================================================================ B-58 — DAS HOVER-GOLD, ABGEDUNKELT. CC-8, 30.08.2026. NACHGERECHNET. Vorgabe: Farbton behalten, abdunkeln bis 4,5 : 1. Der Rechenwert des Betreibers (HSL 37,81%,35% = #A26A11) ist gegen WEISS bestaetigt: 4,56 : 1. Gegen die anderen Gruende, auf denen der Hover steht, faellt er durch -- die zweite Warnung war berechtigt: Grund Live #E89C21 #A26A11 Weiss Panel / Fly-Over #FFFFFF 2,28 4,56 1,00 Vertrauensleiste #F4EFD4 1,97 3,94 1,16 Navigationsleiste #69732F 2,25 1,13 5,13 ZWEI ANTWORTEN, WEIL ES ZWEI GRUENDE SIND: 1. AUF HELLEM GRUND: HSL(37, 81%, 32%) = #946110. Der HELLSTE Wert, der auf BEIDEN hellen Gruenden besteht -- 5,28 : 1 auf Weiss, 4,56 : 1 auf dem Creme der Leiste. #A26A11 haette auf der Vertrauensleiste 3,94 ergeben, also durchgefallen. Dunkler als noetig zu waehlen waere ebenso falsch: es ist noch dasselbe Gold. 2. AUF DER OLIVGRUENEN LEISTE: WEISS, 5,13 : 1. Dort ist jedes Gold falsch. Abdunkeln macht es SCHLECHTER, nicht besser (1,13), weil es sich der Leuchtkraft des Olivs annaehert statt sich von ihr zu entfernen. Das ist die Stelle, an der die Regel "abdunkeln bis 4,5" ins Gegenteil kippt. BEWUSSTE ABWEICHUNG VON LIVE, die fuenfte. ============================================================================ */ .sgp-menue { --sgp-gold: #946110; } @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega .sgp-mega-titel:hover, .sgp-desktop-menue .sgp-mega .sgp-mega-titel:focus-visible, .sgp-desktop-menue .sgp-mega-liste .dropdown-item:hover, .sgp-desktop-menue .sgp-mega-liste .dropdown-item:focus-visible { color: var(--sgp-gold, #946110); } /* E2 BERICHTIGT: nth-child zaehlt ALLE Kinder, und das erste ist immer `li.sgp-mobil-alle` (in allen sieben Panels nachgezaehlt). Vier Gruppen sind also die Kinder 2 bis 5 -- die letzte ist Kind FUENF, nicht vier. Deshalb griff die Regel nicht und Erde & Duenger blieb bei 2·1·1. */ .sgp-desktop-menue .sgp-mega:has(> .sgp-mega-spalte:last-child:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); --sgp-spurbreite: calc(min(1200px, 100vw) / 2); } } /* Die Vertrauensleiste steht auf Creme -- derselbe Wert, dieselbe Rechnung. */ .sgp-vertrauen a:hover, .sgp-vertrauen a:focus-visible { color: var(--sgp-gold, #946110); } /* ============================================================================ MAGAZIN UND PFLANZEN KLAPPEN INLINE AUF — CC-8, 30.08.2026. CC-3 setzt dafuer `.sgp-mega--inline` bzw. `data-sgp-form="inline"` am Panel (seit v25). Gemessen an Live: Magazin 3 Gruppen, 3 mit Liste, 3 offen, EINSPALTIG, 691 px Pflanzen 7 Gruppen, 4 mit Liste, 4 offen, zweispaltig, 458 px VORBEHALT, den CC-3 ausdruecklich mitgibt und der hierher gehoert: Das ist eine LISTE, keine abgeleitete Regel. Es gibt kein Merkmal im Baum, an dem sich "inline" erkennen liesse -- `menuEntrySub` trennt Magazin, aber nicht Pflanzen, und "einspaltig -> inline" ist widerlegt (Pflanzen ist dreispaltig und zeigt trotzdem inline). Der Schluessel ist die Knotennummer. Kommt ein Panel ohne Kennung dazu, faellt es in den Fly-Over-Fall zurueck -- den haeufigeren und harmloseren. ============================================================================ */ @media (min-width: 800px) { /* Die Liste steht im Panel, nicht daneben: alles zuruecknehmen, was sie zum Fly-Over macht. */ .sgp-desktop-menue .sgp-mega--inline .sgp-mega-liste, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-mega-liste { display: block; position: static; width: auto; max-width: none; max-height: none; border: 0; background: none; overflow: visible; /* Kein Abstand. Hier standen 4px unten; Live hat `margin: 0` an dieser Liste. Der Wert war von mir, nicht abgelesen -- und er verschiebt den gemessenen Zeilenrhythmus von 38/39 px. */ margin: 0; } .sgp-desktop-menue .sgp-mega--inline .sgp-mega-liste > li, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-mega-liste > li { width: auto; } /* Ohne Fly-Over gibt es nichts aufzuklappen -- der Marker faellt weg. */ .sgp-desktop-menue .sgp-mega--inline .sgp-mega-titel::after, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-mega-titel::after { content: none; } /* Kein Abstand zwischen den Gruppen. Hier standen 12px "damit der Rhythmus haelt" -- eine Zutat. Live hat `margin: 0` und haelt den Rhythmus dadurch, dass jede Zeile 38/39 px hoch ist. */ .sgp-desktop-menue .sgp-mega--inline .sgp-mega-spalte, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-mega-spalte { margin-bottom: 0; } /* HIER STANDEN ZWEI SPALTENREGELN. BEIDE SIND WEG, 30.08.2026. Die erste ("Magazin ist einspaltig") hatte ich schon zurueckgenommen. Die zweite gab dem Panel mit sieben Gruppen zwei Spuren -- das war der 4x3-Beschluss. Der Betreiber hat ihn heute aufgehoben, nachdem der Live-Messbericht gezeigt hat, dass Live dort weder 4x3 noch 3x3x1 macht, sondern Floats mit zwei Breiten. Er stuetzte sich auf meine falsche Lesart, nicht auf eine Messung. Die Spaltenzahl der Inline-Panels entscheidet ab jetzt allein F11. */ } /* Inline-Panels: die Masse je Ebene, abgelesen. CC-8 30.08.2026. Vorlauf, damit der Umweg nicht noch einmal gegangen wird: ich hatte hier erst `display:none` auf `.sgp-ebene-tief` gesetzt, weil Magazin 1318 statt 691 px hoch war und neun Listen offen standen. Das war die falsche Richtung. Am laufenden Live nachgezaehlt, je Ebene: Ebene 0 (Gruppentitel) 3 sichtbar Ebene 1 (Liste) 7 sichtbar Ebene 2 (tiefe Ebene) 26 sichtbar <-- Live zeigt sie SEHR WOHL Dev hatte exakt dieselben 3 / 7 / 26. Die Auszeichnung stimmte also die ganze Zeit; abgewichen sind allein die MASSE: Ebene | Live | Dev (vorher) ------|----------------------------------------|------------------- 0 | 38 px · 16/700 · 11.2 16 | 38 px gleich 1 | 39 px · 16/700 · 11.2 16 · Linie #666 | 34 px · 14/400 2 | 27 px · 13.3333/700 · 11.2 16 0 | 34 px · 14/400 Und die Summe geht auf, in beide Richtungen: Live 3*38 + 7*39 + 26*27 = 1089, auf DREI Spuren -> 691 gemessen Dev 3*38 + 7*34 + 26*34 = 1236, auf EINER Spur -> 1318 gemessen Das ist der Beleg, dass hier nichts fehlt und nichts zu viel ist. Wer nur die Panelhoehe vergleicht, sieht 263 px Unterschied und faengt an, Listen auszublenden -- also genau das, was ich getan habe. Wer die Ebenen zaehlt, sieht in einem Schritt, dass es die Zeilenhoehe ist. Die 13.3333px sind kein Tippfehler: das ist Foundations `font-size: 83.33%` auf 16 px. Ich schreibe den ausgerechneten Wert hin, weil die Prozentangabe sich hier auf einen anderen Elternwert beziehen wuerde als dort. */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li > .dropdown-item, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste > li > .dropdown-item { font-size: 16px; font-weight: 700; line-height: 16px; color: #333; padding: 11.2px 16px; border-bottom: 1px solid #666; /* 16 + 11.2 + 11.2 + 1 = 39.4 -> 39 */ } .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief > li > .dropdown-item, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief > li > .dropdown-item { font-size: 13.3333px; font-weight: 700; line-height: 16px; color: #333; padding: 11.2px 16px 0; /* 16 + 11.2 + 0 = 27.2 -> 27 */ border-bottom: 0; } /* Der Marker blieb zuvor stehen: `content: none` verlor gegen `.sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel::after` -- zwei Klassen plus zwei Kindselektoren gegen meine eine Klasse. Dasselbe Muster wie schon bei den Linien: die spaetere Regel verliert, wenn sie schwaecher ist. Hier steht sie mit voller Kette. */ .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel::after, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel::after { content: none; } } /* ============================================================================ F1 — DER FLY-OVER OHNE JAVASCRIPT UND OHNE ROLLBALKEN. CC-8, 30.08.2026. Betreiberauftrag von heute, drei Abnahmebedingungen: 1. buendig am Eintrag, ohne Luecke, bei JEDEM Eintrag 2. hoechstens zwei Spalten 3. kein Rollbalken, weder waagerecht noch senkrecht, an keiner Breite Bedingung 1 ist reine Lage und steht schon oben: das `li` ist `position: relative`, die Liste `position: absolute; top: 0; left: 100%`. `left: 100%` IST die rechte Kante des Eintrags -- zwischen Eintrag und Kasten kann keine Luecke entstehen, der Zeiger kann nicht durchfallen. Nichts davon wird gerechnet, also kann es auch nicht falsch gerechnet werden. `--sgp-flyover-oben` und `--sgp-panelhoehe` sind entfallen. Bedingung 2 und 3 haengen zusammen, und daran ist die alte Fassung gescheitert. `flex-flow: column wrap` mit einer `max-height` laesst das LAYOUT die Spaltenzahl bestimmen -- und das Layout legt so viele Spalten an, wie noetig sind: drei, vier, fuenf. Gedeckelt war nur die BREITE, also standen die ueberzaehligen Spalten ausserhalb des Kastens, und der waagerechte Rollbalken war die Folge, nicht die Ursache. `column-count: 2` kann das strukturell nicht. Zwei ist keine Obergrenze, die eingehalten werden muss, sondern die Zahl der Spalten. Es gibt keinen Eingabewert, der daraus drei macht. DAS WIDERSPRICHT M1 NICHT, obwohl es so aussieht. Dort (Zeile ~381) habe ich `column-count` fuer das PANEL ausdruecklich verworfen, weil Mehrspaltensatz Inhalt FLIESSEN laesst: eine Gruppe waere in der Mitte zerrissen und ihr Rest in der Nachbarspalte gelandet. Hier geht es um die LISTE -- lauter gleichrangige Geschwister ohne Zusammenhalt, bei denen Fliessen genau das Gewuenschte ist. `break-inside: avoid` haelt dazu den einzelnen Eintrag zusammen. Dieselbe Eigenschaft, zwei Ebenen, zwei entgegengesetzte Urteile -- und beide bleiben richtig. DIE SCHWELLE, ausgerechnet statt geraten: Zeilenhoehe im Fly-Over 38 px (gemessen, wie im Panel) Oberkante des Fly-Over 179 px (an Live gemessen) kleinste gepruefte Hoehe 768 px verfuegbar 768 - 179 = 589 px passt einspaltig 589 / 38 = 15,5 -> 15 Eintraege Ab dem SECHZEHNTEN Eintrag also zwei Spalten. Gezaehlt wird in CSS ueber die Geschwister; die Liste hat ausschliesslich `li`-Kinder (nachgezaehlt: 19 Listen, keine Fremdknoten), sonst zaehlte `nth-child` wieder daneben wie beim `li.sgp-mobil-alle` im Panel. Es trifft die drei grossen Listen -- 21, 17 und 16 Eintraege, alle unter "Rosen" -- und keine der uebrigen sechzehn (10 und weniger). UEBERHANG IST ERLAUBT, ausdruecklich. Meine frueher gemeldete Kollision ("nie dreispaltig" gegen "passt in die Panelhoehe") ist damit vom Betreiber aufgeloest, und zwar gegen meine Aufloesung: zwei Spalten schlagen die Hoehe. 21 Eintraege ergeben 11 Zeilen zu 38 = 418 px, und der Kasten haengt dann unter dem Panel. Das ist der gewollte Zustand. Die BREITE folgt der Spaltenzahl, nicht dem Inhalt: eine Spalte = eine Panelspur, zwei Spalten = zwei Panelspuren. Damit faellt die rechte Kante immer auf eine Rasterkante (E1 bleibt gueltig) und nichts laeuft ueber. ============================================================================ */ @media (min-width: 800px) { /* Der Eintrag fuellt seine Spalte -- die Breite kommt vom Kasten, nicht vom `li`. Vorher stand hier eine feste Spurbreite; in einer zweispaltigen Multicol waere die Spalte eine Spur breit UND das `li` eine Spur, und die Polsterung der Verweise haette den Kasten gesprengt. */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste > li, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste > li { width: auto; break-inside: avoid; /* kein Eintrag zerreisst an der Spaltengrenze */ -webkit-column-break-inside: avoid; } /* Ab 16 Eintraegen zwei Spalten, und die Breite waechst mit. */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste:has(> li:nth-child(16)) { column-count: 2; column-gap: 0; column-fill: balance; width: calc(var(--sgp-spurbreite, 287px) * 2); } /* Eintraege der letzten Panelspur oeffnen nach links, sonst stuende der Kasten neben der Seite. CC-3 setzt die Klasse EINMAL beim Rendern. Beide Schreibweisen sind bedient, damit die Uebergabe nicht an einem Namen scheitert -- Klasse oder Datenattribut, je nachdem was drin steht. */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-oeffnet-links.sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-oeffnet-links.sgp-hat-liste:focus-within > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte[data-sgp-richtung="links"].sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte[data-sgp-richtung="links"].sgp-hat-liste:focus-within > .sgp-mega-liste { left: auto; right: 100%; } /* Bedingung 3, ausdruecklich und an jeder beteiligten Stelle. Ein einziges `overflow: auto` irgendwo in der Kette erzeugt den Balken wieder -- und macht den Kasten zugleich zum Beschnittrahmen fuer den Fly-Over, siehe D1 weiter oben. Deshalb steht es hier noch einmal ausgeschrieben. */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega-spalte { overflow: visible; max-height: none; } } /* ============================================================================ F2 — DIE LETZTE SPUR OEFFNET NACH LINKS, AUCH OHNE CC-3. CC-8, 30.08.2026. Gemessen an v31, Fenster 1226, "Rosen", letzte Gruppe (Kind 16): Panel zu docX = 0 Fly-Over auf docX = 1195 <-- Seitenrollbalken rechte Kante 2006 bei 1226 Fensterbreite, Ueberhang 780 Das ist Abnahmebedingung 3, und sie war rot. Kein Vorfahre kappt (nachgesehen: die ganze Kette hat overflow visible -- so gewollt, D1), also waechst stattdessen das Dokument. Der Betreiber hat die Klasse dafuer CC-3 zugewiesen. Bis sie da ist, stuende der Rollbalken im Ausgelieferten -- deshalb hier zusaetzlich der Rueckfall aus dem Raster selbst. Beide Wege sind nebeneinander gueltig; die Klasse steht spaeter und gewinnt, wenn sie einmal etwas anderes sagt. DIE SPUR AUS DER GESCHWISTERZAHL, ohne JS und ohne Namen: Das Panel ist ein Raster mit `grid-auto-flow: row`, die Kinder fuellen also zeilenweise von links. `li.sgp-mobil-alle` ist Kind 1 und keine Gruppe -- die Gruppen beginnen bei Kind 2. Damit ist Spur = (Kindnummer - 2) mod Spurenzahl drei Spuren -> letzte Spur bei Kind 4, 7, 10, ... = :nth-child(3n+1) zwei Spuren -> letzte Spur bei Kind 3, 5, 7, ... = :nth-child(odd) Gegenprobe an der Messung: Kind 16, drei Spuren, (16-2) mod 3 = 2 -- die dritte und damit letzte Spur. 16 = 3*5+1, die Regel trifft es. Dasselbe Abzaehlen hat mich schon einmal erwischt, als ich das `li.sgp-mobil-alle` vergessen hatte und vier Gruppen bei Kind vier statt fuenf suchte. Deshalb steht die Rechnung hier ausgeschrieben. ============================================================================ */ @media (min-width: 800px) { /* zwei Spuren: 800 bis 1023 */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):focus-within > .sgp-mega-liste { left: auto; right: 100%; } } @media (min-width: 1024px) { /* drei Spuren: die Regel fuer zwei Spuren muss dabei ZURUECKGENOMMEN werden, sonst oeffnen bei drei Spuren auch Kind 3, 5, 9 ... nach links. Eine Regel, die nur hinzufuegt, waere hier falsch -- das ist Muster 14. */ .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):focus-within > .sgp-mega-liste { left: 100%; right: auto; } .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):focus-within > .sgp-mega-liste { left: auto; right: 100%; } } /* F3 IST AM 30.08.2026 ERSATZLOS ENTFALLEN. Es war die Ruecknahme-Loesung: die Fly-Over-Regeln trafen im eingebauten Panel, und F3 nahm ihnen hinterher einzelne Eigenschaften wieder ab. Genau das schliesst die Zielregel des Betreibers aus -- "nicht: die Logik erkennt inline und tut nichts; sie laeuft dort gar nicht erst an." Und der Betrieb hat ihm recht gegeben: F3 deckte die LISTE ab, nicht ihre `li`. Uebrig blieb `width: auto` auf den Eintraegen, und das war P7 -- Magazin stapelte, Pflanzen wurde vierspaltig. Drei Anlaeufe, drei Luecken. Ersetzt durch eine Bedingung am Anfang JEDER Fly-Over-Regel (P7 unten). */ /* ============================================================================ F4 — FOUNDATIONS CLEARFIX WIRD IM RASTER ZUM RASTERKIND. CC-8, 30.08.2026. Das war die eigentliche Ursache des Seitenrollbalkens, und sie ist kein Element. Gemessen am Magazin-Panel bei 1226: mega.clientWidth 1200 mega.scrollWidth 2400 <-- doppelt ::before content " " width 1200px ::after content " " width 1200px Roter Lauf in beide Richtungen, damit es keine Vermutung bleibt: Ausgangslage docSW 2406 mit `content: none` docSW 1211 Regel wieder entfernt docSW 2406 Woher: `cache.css` setzt Foundations Clearfix auf `.menu`/`.row` (`&::before { content: ' '; display: table; }`). Solange das Panel ein Block war, war das ein unsichtbarer Nullkasten. Seit es ein RASTER ist, sind Pseudoelemente Rasterkinder -- und ein `display: table` ohne Breite dehnt sich auf die Zeilenbreite, also 1200 px, in eine 600er Spur. WARUM ICH ES SO LANGE GESUCHT HABE: mein Pruefer lief ueber `querySelectorAll('*')` und fand nichts, weil Pseudoelemente darin nicht vorkommen. Er meldete "0 ueberstehende Elemente" -- und das war wahr und nutzlos zugleich. Muster 7 in einer neuen Form: nicht der falsche Name, sondern die falsche GRUNDGESAMTHEIT. Der zweite Grund war ein kaputter Pruefer: die erste Fassung zaehlte `html` als kappenden Vorfahren mit (`html { overflow-x: hidden }`) und erklaerte damit JEDES Element fuer gekappt. Sie meldete gruen. Seither prueft sie sich selbst an Owl, das nachweislich gekappt IST. Und `html { overflow-x: hidden }` ist der Grund, warum der Balken niemandem auffiel: er unterdrueckt die ANZEIGE, nicht das Rollen. `documentElement.scrollLeft` liess sich auf 1195 setzen und blieb dort. Wer nur hinsieht, sieht nichts; wer scrollWidth misst, sieht es. ============================================================================ */ .sgp-desktop-menue .dropdown-menu.sgp-mega::before, .sgp-desktop-menue .dropdown-menu.sgp-mega::after { content: none; } /* ============================================================================ F5 — DIE SPURZAHL MUSS AUS DERSELBEN BEDINGUNG KOMMEN, DIE SIE SETZT. CC-8, 30.08.2026. F2 rechnet "letzte Spur" aus der Kindnummer modulo Spurzahl und nimmt ab 1024 px drei Spuren an. Das gilt fuer die meisten Panels, aber nicht fuer alle: E2 gibt Panels mit VIER Gruppen zwei Spuren, damit sie 2·2 stehen statt 2·1·1. "Erde & Duenger" ist so eins. Gemessen an v34, Fenster 1226: Gruppe "Bodenhilfsstoffe", Panel "Erde & Duenger" linke Kante 1206, rechte 1806, Fenster 1226 Seite liess sich 595 px nach rechts rollen Die Gruppe ist Kind 5, also (5-2) mod 2 = 1 -- letzte von ZWEI Spuren. F2 fragte nach `3n+1` und traf sie nicht. Der Fehler ist nicht die Zahl, sondern dass ich sie ZWEIMAL aufgeschrieben habe: einmal beim Setzen des Rasters, einmal beim Rechnen der Spur. Zwei Stellen fuer dieselbe Tatsache laufen auseinander -- hier nach genau einem Tag. Deshalb haengt die Ausnahme jetzt am selben `:has()` wie das Raster; wer das eine aendert, sieht das andere daneben stehen. Der Vollstaendigkeit halber, weil eine Aufzaehlung hier still falsch werden kann -- alle Faelle, in denen ein Panel ab 1024 NICHT drei Spuren hat, sind: · vier Gruppen (E2) -> zwei Spuren, hier behandelt · Inline-Panels mit sieben Gruppen -> zwei Spuren, aber F3 nimmt ihnen den Fly-Over ganz ab, also ohne Wirkung auf die Spurrechnung Kommt eine dritte Ausnahme dazu, gehoert sie hierher. ============================================================================ */ @media (min-width: 1024px) { /* Panels mit vier Gruppen haben ZWEI Spuren -- die Drei-Spuren-Regel aus F2 wird darin zurueckgenommen ... */ .sgp-desktop-menue .sgp-mega:has(> .sgp-mega-spalte:last-child:nth-child(5)) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:has(> .sgp-mega-spalte:last-child:nth-child(5)) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):focus-within > .sgp-mega-liste { left: 100%; right: auto; } /* ... und durch die Zwei-Spuren-Regel ersetzt. */ .sgp-desktop-menue .sgp-mega:has(> .sgp-mega-spalte:last-child:nth-child(5)) > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:has(> .sgp-mega-spalte:last-child:nth-child(5)) > .sgp-mega-spalte.sgp-hat-liste:nth-child(odd):focus-within > .sgp-mega-liste { left: auto; right: 100%; } } /* ============================================================================ F6 — ZWEI SPALTEN NUR DORT, WO ZWEI SPUREN FREI SIND. CC-8, 30.08.2026. Der letzte Rest des Seitenrollbalkens, und er ist kein Fehler in einer Regel, sondern eine Unmoeglichkeit in der Geometrie. Gemessen, v35, 1226: "Nach Rosenzuechter", Kind 15 -- MITTLERE Spur (406..806) Fly-Over zweispaltig, also 800 px breit left: 100% -> 806..1606 ragt 380 px aus dem Fenster Ich hatte die Gruppe fuer Kind 16 und damit fuer die letzte Spur gehalten und an der Spurformel gesucht. Die Formel ist richtig; nachgerechnet gegen alle sieben Panels stimmt sie in allen sieben (Rosen letzte Spur = 7, 13, 16 -- und 15 ist nicht dabei). DER BEWEIS, DASS ES KEINE LAGE GIBT: Panel 1200 breit, drei Spuren zu 400. Ein zweispaltiger Kasten ist 800 breit. Aus der mittleren Spur (406..806): nach rechts 806..1606 -- 380 aus dem Fenster nach links -394..406 -- 400 aus dem Fenster Und damit er den Eintrag nicht verdeckt, muesste er ganz links von 406 oder ganz rechts von 806 liegen -- dort ist Platz fuer 406 bzw. 420 px, nie fuer 800. Es gibt keine dritte Moeglichkeit. AUFLOESUNG: die mittlere Spur bekommt EINE Spalte. Das ist erlaubt, seit Ueberhang erlaubt ist -- 21 Eintraege sind dann 798 px hoch und haengen unter dem Panel. Alle drei Abnahmebedingungen bleiben erfuellt; ohne die Erlaubnis zum Ueberhang waere dieser Fall nicht loesbar gewesen. Wo zwei Spalten also bleiben, hergeleitet statt aufgezaehlt: Kasten = 2 Spuren, Panel = N Spuren, Eintrag in Spur t (ab 1 gezaehlt). nach rechts moeglich, wenn t + 2 <= N -> bei N=3 nur t=1 nach links moeglich, wenn t - 2 >= 1 -> bei N=3 nur t=3 Bei N=2 ist beides leer: zweispurige Panels bekommen NIE zwei Spalten. Das trifft heute keinen Fall (ihre laengste Liste hat 6 Eintraege), gilt aber, sobald sich das aendert -- und deshalb steht es als Bedingung da und nicht als Bemerkung. Spur 1 -> Kind 2, 5, 8, ... = :nth-child(3n+2) Spur 3 -> Kind 4, 7, 10, ... = :nth-child(3n+1) Spur 2 -> Kind 3, 6, 9, ... = :nth-child(3n) eine Spalte ============================================================================ */ @media (min-width: 800px) { /* Erst alles auf eine Spalte zuruecksetzen -- der Selektor traegt das `:has()` mit, weil die Regel aus F1 es traegt und sonst staerker waere. Eine Ruecknahme muss mindestens so stark sein wie das Zurueckgenommene; das ist genau der Fehler, den ich heute schon dreimal gemacht habe. */ .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste:has(> li:nth-child(16)) { column-count: auto; width: var(--sgp-spurbreite, 287px); } } @media (min-width: 1024px) { /* und nur in Spur 1 und Spur 3 dreispuriger Panels wieder zwei. `:not(:has(...nth-child(5)))` schliesst die zweispurigen Panels aus -- dieselbe Bedingung, die ihnen die zwei Spuren gibt (F5). */ .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+2):hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+2):focus-within > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):focus-within > .sgp-mega-liste:has(> li:nth-child(16)) { column-count: 2; column-gap: 0; width: calc(var(--sgp-spurbreite, 287px) * 2); } } /* ============================================================================ F7 — DIE BREITE KOMMT VOM EINTRAG, NICHT AUS EINER RECHNUNG. CC-8, 30.08.2026. Bei 1440 und 1226 war die Abnahme gruen, bei 1024 nicht: sieben Kaesten ausserhalb, die Seite liess sich 341 px rollen. Ursache ist `--sgp-spurbreite: calc(min(1200px, 100vw) / 3)`. Die Rechnung nimmt an, das Panel sei so breit wie `min(1200px, 100vw)`. Bei 1226 stimmt das zufaellig; bei 1024 ist das Panel um die waagerechten Innenabstaende der Zeile schmaler, und jede Spur ist ein paar Pixel kleiner als die gerechneten 341,33. Der Kasten ist dann breiter als seine Spur, und bei `left: 100%` summiert sich der Fehler. ICH HATTE DIE SPURBREITE HERGELEITET, OBWOHL SIE DANEBEN STAND. Der Eintrag IST eine Spur breit -- er ist das Rasterkind. Und weil der Kasten `position: absolute` in genau diesem Eintrag ist, ist `width: 100%` exakt eine Spur und `width: 200%` exakt zwei, an jeder Fensterbreite, ohne Annahme ueber Innenabstaende, Zeilenbreite oder Spurenzahl. Das ist dieselbe Art Fehler wie die doppelt aufgeschriebene Spurzahl in F5, nur eine Ebene tiefer: eine Groesse nachgerechnet, die das Layout schon kennt. Wo etwas abgefragt werden kann, wird es nicht ausgerechnet. `--sgp-spurbreite` bleibt als Rueckfall stehen, wird vom Fly-Over aber nicht mehr gelesen. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste, .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste:has(> li:nth-child(16)) { width: 100%; } } @media (min-width: 1024px) { .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+2):hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+2):focus-within > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):hover > .sgp-mega-liste:has(> li:nth-child(16)), .sgp-desktop-menue .sgp-mega:not(:has(> .sgp-mega-spalte:last-child:nth-child(5))) > .sgp-mega-spalte.sgp-hat-liste:nth-child(3n+1):focus-within > .sgp-mega-liste:has(> li:nth-child(16)) { width: 200%; } } /* F9 UND F10 SIND AM 30.08.2026 ENTFALLEN, auf Anweisung des Betreibers. F9 machte das Inline-Panel einspurig und die Liste darin dreispaltig; F10 gab den Linien ihre Luecke. Beide trafen bei MAGAZIN das richtige Bild -- dort haben alle Gruppen Kinder, also sind bei Live ohnehin alle voll breit, und ein Raster sieht genauso aus. Bei PFLANZEN fiel es auseinander, weil dort beide Sorten vorkommen. "Dasselbe Ergebnis mit dem falschen Mittel." Ersetzt durch F11, das Lives Mechanismus baut statt sein Ergebnis nachzuahmen. */ /* ============================================================================ F11 — DAS GEMESSENE LIVE-MODELL DER INLINE-PANELS. CC-8, 30.08.2026. Ersetzt F9 und F10. Gebaut wird nicht mehr das Ergebnis, sondern der Mechanismus. Alle Werte stammen aus dem Live-Messbericht (`docs/austausch/2026-08-30-cc8-live-messbericht-inline-panels.md`), abgelesen bei CSS-Breite 1440 an einem mit echtem Zeiger geoeffneten Panel. ul display:block 1200px padding 15px 0 E1 li float:left 33% -- ODER 100%, wenn eine Unterliste sichtbar ist E2 li inline-block 33% · Linie 1px #666 · a-Breite 383 E3 li inline-block 100% · keine Linie WARUM FLOATS UND NICHT EIN RASTER: weil genau das den Unterschied macht. In einem Raster stehen eine kinderlose Gruppe und eine kindertragende in derselben Zeile, und die Zeilenhoehe folgt der hoeheren -- daher die Loecher von 170 und 95 px. Ein Float von 100% Breite passt neben nichts und rutscht von selbst in die naechste Zeile. Das ist keine Nachbildung des Bildes, es ist die Ursache. DIE 33 % SIND NICHT 33,3333 %. Das ist der Fund, der die drei gemeldeten Restabweichungen (12 px am Panel, 4 px an der Linie, ein Teil der 9 px an der Hoehe) auf einmal aufloest -- sie waren keine Rundung. Live: @media print, screen and (min-width: 50em) { ul.top-bar-left > li > ul > li { width: 33%; } } 3 x 33 % = 99 %. Die fehlenden 12 px von 1200 sind das eine Prozent. Ich hatte die Abweichung gemeldet und als unvermeidbar bezeichnet, weil ein fester Pixelwert an jeder anderen Breite falsch waere. Das stimmte -- und war die falsche Schlussfolgerung: die Regel ist ein PROZENTWERT und damit an jeder Breite richtig. Wer ein Symptom meldet, ohne nach seiner Regel zu suchen, meldet richtig und hoert zu frueh auf. TYPOGRAFIE UNANGETASTET. Die gemessenen Werte stehen als Variablen, damit der moegliche Hebel (E2 auf 15px/500) EINE Zeile ist und nicht sechs Fundstellen -- siehe die Zeile "DER HEBEL" weiter unten. ============================================================================ */ @media (min-width: 800px) { /* --- das Panel ------------------------------------------------------- */ /* GETRENNT, UND DAS IST KEINE FORMSACHE. Hier stand `display: block` auf allen vier Selektoren -- auch auf den beiden OHNE `.show`. Damit standen Magazin und Pflanzen dauerhaft offen: `display:block` ohne Bedingung schlaegt das `display:none` der Grundregel, und `aria-expanded` blieb dabei `false`. Gemessen direkt nach dem Laden, ohne Zeiger: zwei Panels mit Hoehe 644 und 457, `show` nicht gesetzt, `:hover` nicht aktiv. Im selben Stylesheet steht seit Wochen mein eigener Satz dazu: "Eine Regel, die `display` unbedingt setzt, hebt jede Sichtbarkeits- steuerung auf, die vorher gegriffen hat." Ich habe ihn aufgeschrieben und danach wieder dagegen verstossen -- gefunden nur, weil die Abnahmeaufnahme einen Textrest zeigte, den ich zuerst fuer ein Rendering-Problem hielt. Deshalb: alles, was IMMER gilt, ohne `display`. Und `display` allein dort, wo `.show` steht. */ .sgp-desktop-menue .dropdown-menu.sgp-mega--inline, .sgp-desktop-menue .dropdown-menu.sgp-mega[data-sgp-form="inline"] { grid-template-columns: none; column-count: auto; padding: 15px 0; /* DER HEBEL. Solange Alexander nicht geantwortet hat, stehen hier die an Live abgelesenen Werte. Wird zeichengleich verworfen, aendern sich genau diese zwei Zeilen -- 15px und 500 -- und sonst nichts. */ --sgp-e2-size: 16px; --sgp-e2-weight: 700; } .sgp-desktop-menue .dropdown-menu.sgp-mega--inline.show, .sgp-desktop-menue .dropdown-menu.sgp-mega[data-sgp-form="inline"].show { display: block; /* kein Raster, kein Mehrspaltensatz */ } /* Die Floats muessen im Panel bleiben, sonst hat es die Hoehe null. F4 hat `::before`/`::after` am Panel abgeschaltet, weil Foundations Clearfix als RASTERKIND 1200 px breit wurde. Hier ist das Panel kein Raster mehr, also ist ein Clearfix wieder das, was er sein soll. */ .sgp-desktop-menue .dropdown-menu.sgp-mega--inline::after, .sgp-desktop-menue .dropdown-menu.sgp-mega[data-sgp-form="inline"]::after { content: ""; display: block; clear: both; } /* --- E1: die Gruppe --------------------------------------------------- */ .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte { box-sizing: border-box; float: left; width: 33%; /* Lives Wert, nicht 33.3333% */ margin: 0; padding: 0; } /* mit sichtbarer Unterliste: volle Zeile. Das ist die ganze Regel. */ .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte.sgp-hat-liste, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte.sgp-hat-liste { width: 100%; } /* --- E2: der Spalteneintrag ------------------------------------------- */ .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste { display: block; margin: 0; padding: 0; } .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste > li { box-sizing: border-box; display: inline-block; vertical-align: top; /* sonst haengen ungleich hohe Spalten */ width: 33%; margin: 0; padding-right: 13.3333px; /* 396 - 13,3333 = 383, Lives a-Breite */ float: none; } .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li > .dropdown-item, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste > li > .dropdown-item { font-size: var(--sgp-e2-size, 16px); font-weight: var(--sgp-e2-weight, 700); border-bottom: 1px solid #666; } /* --- E3: der Untereintrag --------------------------------------------- */ .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief { display: block; margin: 0; padding: 0; } .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief > li, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief > li { box-sizing: border-box; display: inline-block; vertical-align: top; width: 100%; /* erbt die Inhaltsbreite: 396 - 13,33 */ margin: 0; padding-right: 0; float: none; } /* Linien ausschliesslich auf E2 -- gemessen: E1 0 von 7, E2 9 von 9 bzw. 7 von 7, E3 0 von 26. Die Regel ist NICHT "hat Kinder": in Pflanzen tragen E2-Eintraege ohne Kinder die Linie, in Magazin traegt E1 mit Kindern keine. Sie haengt an der Ebene, die die Spalten bildet. */ .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief > li > .dropdown-item, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief > li > .dropdown-item { border-bottom: 0; } .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel { border-bottom: 0; } } /* F12 — DER ZEILENABSTAND DER E3 IST KEINE ZAHL, SONDERN EINE FOLGE. CC-8, 30.08.2026. Nach F11 stimmten in Magazin alle Einzelwerte (E1 1200/keine Linie, E2 396/383/1px/16px, E3 382,672/keine Linie/13,3333px) -- und das Panel war trotzdem 47 px zu kurz: 644 gegen 691. Gemessen an Live, E3 in "Allgemeines": li Hoehe 27 display inline-block margin 0 padding 0 aufeinanderfolgende Oberkanten 257 · 287 · 318 · 348 Abstand also 30,4 -- bei 27 px hohen Kaesten ul line-height: 21.3333px Die fehlenden 3,4 px je Zeile sind kein Abstand, den jemand gesetzt hat. Ein `inline-block` sitzt auf der Grundlinie seiner Zeilenschachtel, und die ist so hoch wie die `line-height` des Elternteils -- die Unterlaenge kommt dazu. Neun Zeilen mal 3,4 sind die 30 px, um die der erste Abschnitt zu kurz war, dreimal ergibt das die 47. Deshalb steht hier die abgelesene `line-height` des Elternteils und keine Zeilenhoehe an den Eintraegen. Wer 30,4 direkt hinschriebe, traefe dieselbe Zahl und verloere die Ursache -- und mit ihr die Frage, was passiert, wenn sich die Schriftgroesse aendert. Genau das steht als Hebel noch aus. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief { line-height: 21.3333px; } } /* F13 — `vertical-align: top` war meine Zutat. CC-8, 30.08.2026. F12 setzte die abgelesene `line-height: 21.3333px` und aenderte nichts: der Zeilenabstand der E3 blieb 27 statt 30,4. Der Grund stand zwei Zeilen darueber in meinem eigenen Code -- ich hatte `vertical-align: top` geschrieben, "sonst haengen ungleich hohe Spalten". Nachgemessen an Live: BEIDE Ebenen stehen auf `baseline`, dem Vorgabewert. Und genau daher kommen die 3,4 px: ein `inline-block` auf der Grundlinie laesst unter sich die Unterlaenge der Zeilenschachtel frei. `top` nimmt sie weg. Ich hatte also erst die Wirkung abgeschaltet und danach nach ihrer Ursache gesucht. Zusaetzlich abgelesen und hier gesetzt, weil beides zusammengehoert: E2 und E3 font-size: 13.3333px line-height: 21.3333px am li Die 13,3333 px am `li` sind nicht die Schriftgroesse der Eintraege -- die steht am `a` -- sondern die Groesse, aus der die Zeilenschachtel und damit der Abstand entsteht. Zwei verschiedene Dinge am selben Ort. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste > li, .sgp-desktop-menue .sgp-mega--inline .sgp-ebene-tief > li, .sgp-desktop-menue [data-sgp-form="inline"] .sgp-ebene-tief > li { /* ZURUECK AUF `top`, 30.08.2026 -- und zwar nach einer Messung, die zeigt, dass hier nichts mehr zu holen ist. Mit `baseline` (Lives Wert) stimmen auf Dev ALLE Einzelwerte mit Live ueberein, nachgemessen Eigenschaft fuer Eigenschaft: E2 li inline-block · 13,3333/21,3333 · baseline · 0 13.3333 0 0 E2 a 39 · block · 16/16 · 11.2px 16px · Linie 1px E3 li 27 · inline-block · 13,3333/21,3333 · baseline · 0 E3 a 27 · block · 13,3333/16 · 11.2px 16px 0 Und trotzdem kommt etwas anderes heraus: Live E3-Abstand 30,4 E2-Spalten alle bei y=217 Dev E3-Abstand 34 E2-Spalten bei 345 / 244 / 479 Gleiche Eigenschaften, anderes Ergebnis -- der Rest steckt in der SCHRIFTMETRIK. Wieviel Unterlaenge eine Zeilenschachtel unter der Grundlinie freilaesst, bestimmt die Schriftart, nicht eine Regel, die ich schreiben koennte. Live und Dev liefern hier nicht dieselbe. `baseline` kostet 4 px je Zeile UND die Bündigkeit der Spalten -- die 345/244/479 sind ein SICHTBARER Fehler, die fehlenden 47 px in Magazin sind es kaum. Also `top`: eine bewusst abweichende Eigenschaft, die das sichtbare Ergebnis naeher an Live bringt als der abgelesene Wert selbst. Gemeldet, nicht versteckt. Nach der Regel gesucht wurde, sie ist nicht in meiner Reichweite. */ vertical-align: top; font-size: 13.3333px; line-height: 21.3333px; } } /* ============================================================================ F14 — DIE BENANNTE AUSNAHME VON "LIVE ZEICHENGLEICH". CC-8, 30.08.2026. Beschluss A gilt: Menue-Typografie zeichengleich mit Live. Diese eine Stelle weicht bewusst ab, auf Alexanders Wunsch: E2-Eintraege OHNE tiefere Liste bekommen das Bild von Magazins EBENE 3 -- klein und ruhig. Live fuehrt diese Ebene mit 16 px. Wir tun es nicht. Das ist die EINZIGE Ausnahme; alles andere bleibt zeichengleich. DIE WERTE SIND ABGELESEN, nicht aus der Anweisung uebernommen. Gemessen an unserem eigenen Magazin, Eintrag "Rosen vermehren", Ebene 3: font-size 13.3333px font-weight 700 color rgb(51, 51, 51) line-height 16px (am `a`) padding 11.2px 16px 0px (unten NULL -- daher 27 statt 39) border-bottom keine text-transform none letter-spacing normal Einzug x = 120, identisch mit Ebene 2 -- kein Zusatzeinzug am `li` font-size 13.3333px, line-height 21.3333px, padding 0 DIE AUSWAHL IST ABLEITBAR, nicht panelspezifisch. Ich haette "das Panel mit sieben Gruppen" schreiben koennen -- das waere wieder eine Liste statt einer Regel gewesen, und die naechste Datenaenderung haette sie still falsch gemacht. Stattdessen: ein E2-Eintrag OHNE `.sgp-ebene-tief` ist ein Blatt -> klein ein E2-Eintrag MIT `.sgp-ebene-tief` ist ein Zweig -> bleibt 16px BERICHTIGT NACH DER MESSUNG, 30.08.2026. Hier stand: "das trifft Pflanzens neun E2-Eintraege und KEINEN von Magazins sieben (dort haengt an jedem eine dritte Ebene)". Das war eine Folgerung aus der Struktur, die ich fuer eine Zaehlung ausgegeben habe. Nachgezaehlt am Ausgelieferten: Pflanzen 9 von 9 E2 betroffen Magazin 1 von 7 betroffen -- "Rosenbilder" im Abschnitt "Blumenbilder" hat keine dritte Ebene und ist damit nach dieser Regel ein Blatt Sechs von Magazins sieben bleiben also 16 px, einer wird klein. Das ist eine Nebenwirkung, die ich NICHT beabsichtigt und nicht vorhergesagt habe -- sie ist gemeldet und nicht entschieden. Sie ist verteidigbar ("Blaetter sehen aus wie Blaetter") und sie ist trotzdem eine Aenderung an einem Panel, ueber das niemand gesprochen hat. Wer sie nicht will, braucht eine zweite Bedingung: das Panel darf ueberhaupt keine dritte Ebene fuehren. Die waere ableitbar (`:not(:has(.sgp-ebene-tief))` am Panel) und keine Namensliste. AUSDRUECKLICH NICHT betroffen sind E1-Blaetter ("Neue Pflanzen im Shop", "Heckenpflanzen", "Veredelungsunterlagen"). Die Regel "Blaetter sind klein" waere allgemeiner und haette sie mitgenommen -- verlangt war die zweite Ebene, also steht `.sgp-mega-liste >` davor. DIE LINIE IST NICHT ENTSCHIEDEN. Magazins Ebene 3 hat keine, Pflanzens Ebene 2 hat heute eine. Beide Fassungen werden als Bild vorgelegt: `pflanzen-klein-mit-linie.png` und `pflanzen-klein-ohne-linie.png`. Hier steht bis zur Entscheidung die Fassung MIT Linie -- die kleinere Aenderung gegenueber dem gemessenen Modell. ============================================================================ */ @media (min-width: 800px) { .sgp-desktop-menue .sgp-mega--inline > .sgp-mega-spalte > .sgp-mega-liste > li:not(:has(> .sgp-ebene-tief)) > .dropdown-item, .sgp-desktop-menue [data-sgp-form="inline"] > .sgp-mega-spalte > .sgp-mega-liste > li:not(:has(> .sgp-ebene-tief)) > .dropdown-item { font-size: 13.3333px; font-weight: 700; color: rgb(51, 51, 51); line-height: 16px; padding: 11.2px 16px 0; /* FASSUNG B -- OHNE LINIE. Magazins Ebene 3 hat keine; wer das Bild von Ebene 3 will, koennte auch ihre Linienlosigkeit meinen. Zur Entscheidung vorgelegt, nicht entschieden. */ border-bottom: 0; } } /* ============================================================================ M1 — DIE SCHUBLADE BEKOMMT EINE HOEHE. CC-8, 30.08.2026. Befund: `nav#navigation-top.sgp-menue` misst 352 x 0, sein einziges Kind `div.row` misst 328 x 96 und wird von `overflow-y: auto` abgeschnitten. DIE HOEHENANGABE, die gewinnt, ist nicht meine: cache.css nav.top-bar { height: inherit; background: #eaeaea } Zeichen 96163 in Zeile 4 -- die Datei ist minifiziert, sechs Zeilen fuer 232.758 Zeichen; eine Zeilennummer sagt dort nichts. `inherit` nimmt die Hoehe des Elternteils, und der ist der Sticky-Wrapper mit Hoehe 0 (bei 360 px: 15). Meine Regeln setzen `top` und `bottom` und ueberhaupt kein `height` -- gegen ein geerbtes reicht das nicht. WARUM HIER NICHT "DEM GEERBTEN WERT DIE WIRKUNG NEHMEN" REICHT, gemessen statt vermutet. Drei Zustaende am laufenden Baum, 390 px: Ausgangslage height 0px Rechteck 0 height: auto height 0px Rechteck 0 <-- hilft NICHT height: 100dvh height 860px Rechteck 860 <-- Fensterhoehe Regel entfernt height 0px Rechteck 0 `auto` ist genau das Zurueckgeben an `top`/`bottom` -- und es ergibt null. Der Grund steht eine Ebene hoeher: der Wrapper traegt einen `transform` (von Foundations Sticky-Plugin inline gesetzt), und ein transformierter Vorfahr wird zum ENTHALTENDEN BLOCK fuer alles, was darin `position: fixed` ist. Nachgeprueft: `offsetParent` der Schublade ist `navigation-top-wrapper`, nicht der Viewport. `top: 0; bottom: 0` beziehen sich damit nicht mehr auf das Fenster, sondern auf einen 0 px hohen Kasten. Solange die Schublade in diesem Wrapper haengt, KANN sie ihre Hoehe nicht aus top/bottom bekommen. `100dvh` ist deshalb keine feste Pixelzahl, die ich gegen etwas setze, sondern genau die Groesse, die `top`/`bottom` geliefert haetten, wenn der enthaltende Block der Viewport waere. `100vh` steht als Rueckfall davor, fuer Browser ohne `dvh`. Die andere Reparatur waere, die Schublade aus dem Wrapper zu nehmen. Das ist Auszeichnung und gehoert nicht mir -- gemeldet, nicht gemacht. Spezifitaet: (0,2,1) gegen (0,1,1) der `cache.css`-Regel. Am laufenden Baum geprueft, bevor ich sie geschrieben habe: mit ihr 860, ohne sie 0. ============================================================================ */ @media (max-width: 799px) { nav.top-bar.sgp-menue { height: 100vh; height: 100dvh; } } /* ============================================================================ M1, VIERTER FEHLER — DER WRAPPER BESCHNEIDET DIE SCHUBLADE. CC-8, 30.08.2026, bei der Abnahme von v51 gefunden. v51 war nach allen Zahlen gruen und trotzdem unsichtbar: Schublade 343 x 844 bei (0, 0) translateX(0) .sgp-mobil-offen div.row 343 x 555 nicht abgeschnitten Eintraege 9 sichtbar scrollHeight 844 == clientHeight 844 Und dann der Blick aufs Bild: nichts zu sehen. `elementFromPoint(60, y)` ueber die ganze Hoehe trifft die Schublade bei KEINEM y -- y=2/8/14 ergeben `DIV.sticky`, ab y=20 abwaerts Seiteninhalt. Ein Rechteck beweist LAGE, nicht SICHTBARKEIT. Das ist dieselbe Gestalt wie "eine gepruefte Datei ist keine gepruefte Seite", eine Ebene tiefer: eine geprueft GEOMETRIE ist keine geprueft SICHTBARKEIT. Vier gruene Werte, und der Benutzer sieht nichts. URSACHE, und sie ist die Kehrseite des Fundes von vorhin: der Wrapper traegt einen `transform` (Foundations Sticky). Dadurch ist er der enthaltende Block fuer `position: fixed` -- deshalb ergab `height: auto` null. DIESELBE Eigenschaft macht ihn aber auch zum BESCHNEIDENDEN Vorfahren: ein `fixed`-Element entkommt `overflow` normalerweise, aber nicht, wenn der Vorfahr durch `transform` sein enthaltender Block ist. cache.css #navigation-top-wrapper { overflow: scroll } Wrapper 390 x 15 height 15px clientHeight 0 Die Schublade hat ihre Hoehe bekommen. Der Kasten, in dem sie steckt, hatte weiterhin keine -- und schnitt sie auf null. ROTER LAUF, in beide Richtungen, vor dem Bauen: Ausgangslage elementFromPoint(60,120) -> BODY mit overflow: visible elementFromPoint(60,120) -> A (ein Verweis) Regel wieder entfernt elementFromPoint(60,120) -> BODY Warum `overflow` und nicht "dem Wrapper dieselbe Hoehe geben": die Hoehe des Wrappers ist Foundations Sache, sie wird beim Scrollen fortlaufend neu gesetzt. Wer sie ueberschreibt, kaempft gegen ein Skript. `overflow` fasst Foundation nicht an. Spezifitaet: `div#navigation-top-wrapper` (1,0,1) gegen `#navigation-top- wrapper` (1,0,0) -- gewinnt unabhaengig von der Ladereihenfolge der Blaetter. Auf den Telefonzweig begrenzt; oberhalb 800 px bleibt Sticky unberuehrt. ============================================================================ */ @media (max-width: 799px) { div#navigation-top-wrapper { overflow: visible; } } /* ============================================================================ A — DIE SCHUBLADENTEXTE WERDEN LESBAR. CC-8, 30.08.2026, freigegeben. Gemessen an v52, alle Texte in der Schublade gegen ihren TATSAECHLICHEN Hintergrund, nicht nur die acht Punkte: Ueber Uns · Magazin · Rosen · Clematis · Pflanzen · Erde & Duenger · Zubehoer · % NEUN Eintraege rgb(255,255,255) auf rgb(234,234,234) Kontrast 1,20 : 1 Ursache: die Eintraege tragen die Desktopfarbe. Dort stehen sie auf dem gruenen Balken; in der Schublade ist der Grund `#eaeaea` (cache.css: nav.top-bar { background: #eaeaea }). `#333` ist die Farbe, die jeder andere Menuetext in diesem Baum traegt. Gegen #eaeaea: 10,4 : 1. MEIN MESSWERKZEUG WAR ERST FALSCH, und das gehoert hierher, weil es die Regel beinahe zu weit gezogen haette: es suchte den Hintergrund ueber `backgroundColor` und lief an einem VERLAUF vorbei, weil der als `background-image` steht und `backgroundColor` dort durchsichtig ist. Es meldete deshalb "9 von 9 unter 4,5:1" -- der Titel "Menue" war faelschlich dabei. Er sitzt auf `linear-gradient(rgb(105,115,47), rgb(152,166,81))`, dem gruenen Kopfbalken, und ist dort WEISS richtig. Haette ich dem ersten Ergebnis geglaubt, waere "Menue" jetzt dunkelgrau auf dunkelgruen. Der Pruefer prueft sich seither selbst: er muss den Verlauf am Titel finden, bevor seine Zahlen gelten. Deshalb faerbt diese Regel die EINTRAEGE und nicht "alle Texte in der Schublade". ============================================================================ */ @media (max-width: 799px) { .sgp-menue .nav-link, .sgp-menue .nav-link:hover, .sgp-menue .nav-link:focus, .sgp-menue .menu-text { color: #333; } } /* ============================================================================ P7 — DIE FLY-OVER-REGELN TREFFEN IM EINGEBAUTEN PANEL NICHT MEHR. CC-8, 30.08.2026. Zielregel des Betreibers, woertlich umgesetzt. Vorher hing jede Fly-Over-Regel an `.sgp-mega-spalte.sgp-hat-liste:hover`. Diese Bedingung trifft eine Gruppe MIT KINDERN ueberall -- auch dort, wo die Kinder schon offen im Panel stehen. Wirksam wurde davon vor allem .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste > li { width: auto; } Spezifitaet (0,5,1) Sie schlug F11s `width: 33%` (0,4,1), obwohl sie 405 Zeilen frueher steht. Gemessen: Magazins E2 gingen von 396/396/396 auf 964/1200/513 und stapelten; Pflanzens vier Eintraege schrumpften auf 182/174/223/241 und standen zu viert in einer Zeile. Gleiche Regel, gegensaetzliches Bild, weil `auto` "so breit wie der Inhalt" heisst und der Inhalt verschieden ist. JETZT TRAEGT JEDE Fly-Over-Regel die Wache .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > … -- zwanzig Selektorzeilen, nachgezaehlt: null ohne Wache. Beide Schreibweisen sind bedient, weil beide am Panel vorkommen koennen. DAS IST AUSDRUECKLICH KEINE RUECKNAHME. F3 hat drei Runden lang versucht, den Fly-Over im Inline-Panel hinterher wieder abzuschalten, und jedes Mal eine Luecke gelassen: die Liste war abgedeckt, ihre `li` nicht. Eine Bedingung am ANFANG kann diese Luecke nicht haben -- die Regel matcht entweder oder nicht. ============================================================================ */ /* ============================================================================ C — DAS SUCHFELD IST NICHT VERSCHWUNDEN, ES WAR UNSICHTBAR. CC-8 nach CC-3s Erhebung, 30.08.2026. CC-3 hat die Vorgeschichte geprueft, wie verlangt (wiederherstellen, nicht neu bauen): Telefon-Titelleiste auf LIVE 0 input Telefon-Titelleiste auf DEV 0 input letzte 12 Fassungen headerNew.html 0 input Es ist NICHTS verschwunden. Live hatte dort nie ein Feld. Am Markup war nichts wiederherzustellen, und es wurde nichts gebaut. Das Feld sitzt in der Schublade und funktioniert -- 263 x 40, der Zeiger trifft es. Unsichtbar war es aus demselben Grund wie die acht Menuepunkte, nur an einem anderen Element: Schrift rgb(10,10,10) auf rgb(254,254,254) 19,63 : 1 gut PLATZHALTER rgb(202,202,202) auf rgb(254,254,254) 1,63 : 1 <-- Rahmen 1px rgb(202,202,202) 1,63 : 1 <-- Ein leeres Feld, dessen Platzhalter und Rahmen dieselbe helle Farbe haben wie der Grund, sieht aus wie gar nichts. WER NUR `getComputedStyle(input).color` MISST, HAELT ES FUER IN ORDNUNG -- das ist die Textfarbe, 19,63 : 1. Der Platzhalter hat einen eigenen Stil und muss ueber `::placeholder` gemessen werden. Derselbe Fehler wie mein Verlauf vorhin: ein Wert, der plausibel und fuer die Frage der falsche ist. Werte: `#6b6b6b` auf `#fefefe` = 5,2 : 1 (Text braucht 4,5). Rahmen `#8a8a8a` = 3,4 : 1 (Bedienelemente brauchen 3,0). Beide sind Grautoene derselben Achse wie der Bestand, nur dunkler -- keine neue Farbe. ============================================================================ */ @media (max-width: 799px) { .sgp-menue input::placeholder { color: #6b6b6b; opacity: 1; } .sgp-menue input::-webkit-input-placeholder { color: #6b6b6b; } .sgp-menue input[type="text"], .sgp-menue input[type="search"], .sgp-menue input[name="q"] { border-color: #8a8a8a; } } /* ============================================================================ B — "HINTER DEM HAMBURGER LIEGT ETWAS ANDERES". CC-8 nach CC-3s Erhebung, 30.08.2026. Es liegt nichts Fremdes dort. Es ist unsere eigene Schublade, und sie deckt den Griff zu, mit dem man sie aufgemacht hat. Gemessen bei 390 px, Schublade offen, `elementsFromPoint` auf der Burgermitte: 1. DIV.row 343 x 555 [SCHUBFACH] 2. NAV.top-bar 343 x 844 [SCHUBFACH] 3. BUTTON.menu-icon 33 x 53 [Seite] <- erst an dritter Stelle 4. DIV.title-bar-left 5. DIV.title-bar WARUM, und es ist kein Fehler in einer Zahl, sondern ein GLEICHSTAND: Burger in DIV#title-bar-wrapper z-index 10000, TRANSFORM Schublade in DIV#navigation-top-wrapper z-index 10000, TRANSFORM Beide Wrapper stehen auf DERSELBEN Zahl. Bei gleichem z-index entscheidet die Reihenfolge im Dokument, und `#navigation-top-wrapper` steht spaeter. Der Burger gewinnt also nie -- und er kann es auch nicht: sein eigenes `z-index` ist wirkungslos, weil er in einem fremden Stapelkontext sitzt (der Wrapper traegt einen `transform`). Nur der WRAPPER koennte steigen. WARUM ICH DEN WRAPPER NICHT HOCHSETZE: er ist 390 x 116 und traegt Logo, Suchlupe, Konto und Warenkorb. Ueber der Schublade laege dann die ganze Leiste -- genau ueber deren Kopf und Suchfeld. Das waere eine sichtbare Umstellung der Anordnung mit Nebenwirkungen, und die legt man vor, statt sie einzubauen. WAS STATTDESSEN: der Weg hinaus wird gross genug zum Treffen. Der Schliessknopf mass 25 x 20 -- die uebliche Mindestgroesse fuer ein Tippziel ist 44 x 44. Das ist kein Entwurf, sondern eine Untergrenze. Das Zeichen bleibt gleich gross; nur die Trefferflaeche waechst. ============================================================================ */ @media (max-width: 799px) { /* NACHGEBESSERT, 30.08.2026. Die erste Fassung setzte nur den Knopf auf 44 x 44 -- und er sass danach bei (283, -8), also acht Pixel OBERHALB der Schublade. Er ist im Kopf senkrecht zentriert, und der Kopf war nur 28 px hoch; der groessere Knopf wuchs nach beiden Seiten heraus. Ein Tippziel, das zur Haelfte ausserhalb seines Kastens liegt, ist nicht groesser geworden, sondern schlechter -- die obere Haelfte faengt Tipps, die dem Kopf gelten. Gefunden in der eigenen Abnahme, an der Zahl `bei (283, -8)`; im Bild sah es richtig aus. Deshalb waechst der KOPF mit. 44 ist die Untergrenze fuer ein Tippziel, nicht ein Entwurfsmass. */ /* DRITTE UND LETZTE FASSUNG. Die zweite gab dem Kopf `min-height: 44px` und der Knopf sass immer noch bei y = -6. Nachgemessen statt geraten: Kopf 343 x 44 padding: 16px -> Inhaltsbereich 12 px hoch Knopf 44 x 44 margin: 4px 0 16px -> braucht 64 px Elternteil ist flex mit align-items: center Die 44 des Kopfes waren von seinem eigenen Polster aufgefressen. Ein `min-height` an einem Kasten mit 16 px Polster gibt dem Inhalt 12 px -- das ist die Zahl, die ich haette ausrechnen muessen, bevor ich sie gesetzt habe. Jetzt umgekehrt: das senkrechte Polster faellt weg und der Rand des Knopfes auch, dann traegt der 44 px hohe Kopf genau den 44 px hohen Knopf. Das waagerechte Polster bleibt. */ .sgp-menue .sgp-mobil-kopf { min-height: 44px; padding-top: 0; padding-bottom: 0; } .sgp-menue .sgp-mobil-schliessen { min-width: 44px; min-height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================================ C0 — DER STAPEL WAR UNSICHTBAR. CC-8, 30.08.2026. Gemessen mit echter Eingabe bei 390: Burger tippen oeffnet, "ROSEN" tippen wechselt die Stufe -- der Kopf zeigt "< Rosen", der Zurueckknopf erscheint -- und die Stufe ist LEER. Null sichtbare Eintraege bei 18 Kindern in der Liste. Es navigiert also nicht (richtig), es klappt auch nicht auf (falsch). Man kommt am Telefon nirgendwo hin. URSACHE, ueber die CSSOM erfragt statt geraten. Zwei Regeln treffen die markierte Liste, beide gelten: sp=0,2,1 block .sgp-menue ul.sgp-m-sichtbar sp=0,3,0 none .sgp-desktop-menue .dropdown-menu.sgp-mega Die zweite gewinnt um eine Klasse. Und sie steht AUSSERHALB jeder Medienabfrage -- sie gilt am Telefon mit. Das ist derselbe Fehler wie bei P7, nur andersherum: dort schlug eine Fly-Over-Regel meine Panelregel, hier schlaegt eine Panelregel meine Telefonregel. Beide Male habe ich die spaetere Regel geschrieben und angenommen, spaeter heisse staerker. `menue.js` Zeile 517 setzt `sgp-m-sichtbar` korrekt; die Klasse sass am richtigen Element. Wer nur das JS prueft, findet nichts. Die Reparatur nennt die Klasse mit, gegen die sie antritt -- `ul.dropdown-menu.sgp-m-sichtbar` ist (0,3,1) und schlaegt (0,3,0). Kein doppelter Klassenname, kein `!important`: die Regel sagt, worauf sie sich bezieht. ============================================================================ */ @media (max-width: 799px) { .sgp-menue ul.dropdown-menu.sgp-m-sichtbar, .sgp-menue ul.sgp-desktop-menue.sgp-m-sichtbar, .sgp-menue ul.sgp-mega-liste.sgp-m-sichtbar { display: block; } /* Die Spalten des Mega-Panels sind am Telefon Stufen, keine Spalten -- und sie duerfen nicht am Raster haengen, das der Desktopzweig setzt. */ .sgp-menue .sgp-m-sichtbar > .sgp-mega-spalte { display: block; float: none; width: auto; } } /* ============================================================================ C0, ZWEITER TEIL — DIE STUFEN LIEGEN INEINANDER. CC-8, 30.08.2026. Nach der ersten Reparatur stand das markierte Panel auf `display: block` und war trotzdem 0 x 0. Gemessen die Kette nach oben: UL.dropdown-menu.sgp-m-sichtbar display: block 0 x 0 LI.nav-item list-item 0 x 0 UL.top-bar-left display: NONE 0 x 0 <-- hier DIV.column block 343 x 0 Der Stapel ist kein Nebeneinander, sondern eine SCHACHTELUNG: die Liste der zweiten Stufe liegt INNERHALB der ersten. Wenn das JS die Markierung weitergibt, faellt die erste Stufe auf `display: none` zurueck -- und nimmt die zweite mit, die in ihr steckt. "Sichtbar ist genau die oberste, alles andere ist zu" kann daher nicht stimmen. Richtig ist: die Vorfahren bleiben SICHTBAR, aber von ihren Eintraegen bleibt nur der eine, der zur markierten Liste fuehrt -- und auch von dem nur der Durchgang, nicht seine eigene Beschriftung. ul, die eine markierte enthaelt -> sichtbar deren li -> aus deren li, das die markierte enthaelt -> sichtbar, ohne Rahmen dessen eigener Verweis -> aus (sonst stuende "Rosen" ueber der Rosenliste) Vor dem Ausrollen am laufenden Baum geprueft, rot/gruen/rot: ohne die Regeln 0 sichtbare Eintraege mit den Regeln 18 sichtbare Eintraege "Alle Rosen anzeigen", "Historische Rosen", ... wieder entfernt 0 sichtbare Eintraege Das war die dritte Fassung fuer C0. Die ersten beiden waren richtig und unvollstaendig: die eine hob das Panel, die andere seine Spezifitaet -- beide haben nicht gefragt, ob der Kasten DARUEBER noch da ist. ============================================================================ */ @media (max-width: 799px) { /* UMGESTELLT AUF CC-3s PFADMARKIERUNG, 31.08.2026. Vorher stand hier `ul:has(.sgp-m-sichtbar)` -- ich habe den Pfad aus dem Inhalt ERSCHLOSSEN, weil nur die unterste Ebene markiert war. Auf Ebene 2 trug das, weil ihr Vorfahre die Wurzelliste ist und die ohnehin immer steht. Auf Ebene 3 nicht. Jetzt sagt es das JS selbst: `sgp-m-sichtbar` jede Liste AUF dem Pfad `sgp-m-aktuell` nur die, auf der man steht Der Pfad muss darstellbar sein, seine eigenen Eintraege duerfen es nicht -- sonst stuenden Ebene 2 und 3 untereinander. Und dem Durchgangs-`li` wird sein eigener Titel genommen, waehrend seine Kinder durchscheinen. DIE SPEZIFITAET IST HIER DER GANZE PUNKT, zum dritten Mal an derselben Stelle: `.sgp-menue ul.sgp-m-sichtbar` ist (0,2,1) und verliert gegen `.sgp-desktop-menue .dropdown-menu.sgp-mega` (0,3,0), die ohne Medienabfrage dasteht. Deshalb traegt jede dieser Regeln die Klasse mit, gegen die sie antritt. */ .sgp-menue ul.sgp-m-sichtbar, .sgp-menue ul.dropdown-menu.sgp-m-sichtbar, .sgp-menue ul.sgp-mega-liste.sgp-m-sichtbar { display: block; } .sgp-menue ul.sgp-m-sichtbar:not(.sgp-m-aktuell) > li, .sgp-menue ul.dropdown-menu.sgp-m-sichtbar:not(.sgp-m-aktuell) > li { display: none; } .sgp-menue ul.sgp-m-sichtbar:not(.sgp-m-aktuell) > li:has(.sgp-m-sichtbar), .sgp-menue ul.dropdown-menu.sgp-m-sichtbar:not(.sgp-m-aktuell) > li:has(.sgp-m-sichtbar) { display: block; border: 0; } .sgp-menue ul.sgp-m-sichtbar:not(.sgp-m-aktuell) > li:has(.sgp-m-sichtbar) > a { display: none; } } /* ============================================================================ DER ELTERNLINK IN DER AUFGEKLAPPTEN EBENE. CC-8, 31.08.2026. Erste Zeile jeder aufgeklappten Ebene: links der Elternname, rechts " anzeigen" in Gold, darunter eine Linie. Die GANZE Zeile ist die Trefflaeche. ZWEI KLASSEN, WEIL DIE UMSTELLUNG LAEUFT: heute traegt die Zeile `.sgp-mobil-alle`, CC-3 setzt kuenftig `.is-submenu-parent-item` wie auf Live. Beide sind bedient, damit die Gestalt sofort steht und nicht verlorengeht, wenn die Klasse wechselt. DIE KONTRASTZAHLEN HABE ICH NACHGERECHNET STATT UEBERNOMMEN, und sie weichen ab: Farbe Grund vorgegeben nachgerechnet #e89c23 weiss 2,25 2,28 #e89c23 #eaeaea 1,96 1,90 #946110 weiss 6,29 5,28 #946110 #eaeaea 5,48 4,39 <-- unter 4,5 Die Richtung der Entscheidung ist damit bestaetigt -- #e89c23 ist auf beiden Gruenden unlesbar. Aber #946110 haelt auf dem SCHUBFACHGRUND `#eaeaea` die 4,5 : 1 NICHT: 4,39. Deshalb bekommt diese eine Zeile einen weissen Grund. Dort steht #946110 bei 5,28 : 1, und die Zeile hebt sich zugleich von den Eintraegen darunter ab -- was ihrer Aufgabe entspricht: sie ist der Ausgang aus der Ebene, kein Eintrag darin. Gemeldet, nicht verschwiegen: waere der Grund grau geblieben, haette ich eine Farbe eingebaut, die unter der Schwelle liegt, die sie erfuellen soll. Das ist genau der Fall, den B-58 verhindern wollte. ============================================================================ */ @media (max-width: 799px) { .sgp-menue li.sgp-mobil-alle, .sgp-menue li.is-submenu-parent-item { background: #fff; border-bottom: 1px solid #ccc; } .sgp-menue li.sgp-mobil-alle > a, .sgp-menue li.is-submenu-parent-item > a { display: block; /* die GANZE Zeile ist die Trefflaeche */ width: auto; min-height: 44px; line-height: 1.4; padding: 12px 18px; font-weight: 700; color: #2b2b26; text-decoration: none; } /* Der zweite Teil, sobald CC-3 ihn als eigenes Element liefert: " anzeigen" kursiv, kleiner, in abgedunkeltem Gold. */ .sgp-menue li.sgp-mobil-alle > a .sgp-anzeigen, .sgp-menue li.is-submenu-parent-item > a .sgp-anzeigen, .sgp-menue li.is-submenu-parent-item > a em { float: right; font-style: italic; font-weight: 400; font-size: 0.875em; color: #946110; /* 5,28 : 1 auf dem weissen Zeilengrund */ } } /* ============================================================================ TELEFON: WEISSER GRUND UND DIE DREI GEMESSENEN MASSE. CC-8, 31.08.2026. 1 · WEISSER GRUND, bewusste Abweichung von Live. Live hat `rgb(234,234,234)` -- an Live gemessen, nicht angenommen. Wir nehmen Weiss, weil das abgedunkelte Gold `#946110` auf Grau nur 4,39 : 1 haelt und auf Weiss 5,28. Eine Farbe, die den Kontrast herstellen soll, darf ihn nicht selbst verfehlen. 2 · PANELBREITE. Live misst 375 von 390 und 345 von 360 -- zwei Punkte, eine Gerade: `100vw - 15px`. Das ist KEIN Prozentwert; bei 88 % waeren es 343 und 317 gewesen (unsere bisherigen Zahlen). Die 15 px sind bei Live der Rollbalkenplatz; auf dem Geraet bleiben sie als schmaler Streifen Seite stehen, in dem der Creme-Grund durchscheint (gemessen: `rgb(244,239,212)` bei x = 383). 3 · DIE EBENEN, an Live gemessen: Ebene 1 14px / 700 / uppercase Zeile 50 Ebene 2 16px / 400 / gemischt Zeile 38 Die zweite Ebene ist also GROESSER in der Schrift und FLACHER in der Zeile als die erste. Das haette ich aus einem Bild nicht abgelesen -- es sieht umgekehrt aus, weil Grossbuchstaben schwerer wirken. ============================================================================ */ @media (max-width: 799px) { /* --- 1 · der Grund ---------------------------------------------------- */ nav.top-bar.sgp-menue { background: #fff; } .sgp-menue .sgp-mega, .sgp-menue .sgp-mega-liste, .sgp-menue li { background: transparent; } /* --- 2 · die Breite --------------------------------------------------- */ nav.top-bar.sgp-menue { width: calc(100vw - 15px); max-width: 100%; } /* --- 3a · Ebene 1 ----------------------------------------------------- */ .sgp-menue .sgp-desktop-menue > li > a.nav-link { font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 1.2; min-height: 50px; display: flex; align-items: center; color: #333; } /* --- 3b · Ebene 2 ----------------------------------------------------- */ .sgp-menue .sgp-mega .sgp-mega-titel, .sgp-menue .sgp-mega .dropdown-item { font-size: 16px; font-weight: 400; text-transform: none; line-height: 1.2; /* keine min-height mehr: die Zeilenhoehe steht seit dem 44/60-Beschluss am KASTEN, nicht am Verweis. Hier stand 38px -- tot, weil spaeter ueberschrieben, und irrefuehrend fuer den naechsten Leser. */ display: flex; align-items: center; color: #333; } /* Der Elternlink behaelt sein Gewicht -- er ist keine Ebene, er ist der Ausgang aus ihr. */ .sgp-menue li.sgp-mobil-alle > a, .sgp-menue li.is-submenu-parent-item > a { font-weight: 700; } } /* ============================================================================ DER ELTERNLINK, ZWEITE FASSUNG. CC-8, 31.08.2026. Gemessen an v63, Ebene 2 offen: die Zeile ist da (`.sgp-mobil-alle.is-submenu-parent-item`), aber **96 x 44** statt ueber die volle Breite, und ihr Gewicht steht auf 400 statt 700. Beides meine Regeln, beide zu schwach gegen den Bestand. Und der Text ist nur "Rosen" -- den Zusatz " anzeigen" liefert das Markup nicht. Live macht ihn als PSEUDOELEMENT neben der Ueberschrift; genau so steht er jetzt hier. Das ist zugleich der Grund, warum er ueberhaupt gestaltbar ist, ohne dass CC-3 den Text teilen muss: Inhalt " anzeigen" kursiv, 0,875em, #946110 Grund weiss -> 5,28 : 1 Die GANZE Zeile bleibt die Trefflaeche -- der Zusatz ist Beschriftung, kein zweiter Knopf. Wer "Rosen" oder "anzeigen" trifft, geht auf die Kategorieseite; wer den Namen in der Liste darunter trifft, klappt auf. Das ist Lives Trennung, und sie liegt damit an zwei verschiedenen Elementen statt an zwei Stellen desselben. ============================================================================ */ @media (max-width: 799px) { .sgp-menue li.sgp-mobil-alle, .sgp-menue li.is-submenu-parent-item { display: block; width: 100%; } .sgp-menue li.sgp-mobil-alle > a, .sgp-menue li.is-submenu-parent-item > a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 18px; font-size: 16px; font-weight: 700; color: #2b2b26; text-transform: none; } /* DAS ::after IST WEG, 31.08.2026. CC-3 liefert `span.sgp-anzeigen` als echtes Element -- stuende die Regel daneben, hiesse es "Kletterpflanzen anzeigen anzeigen". Sein Grund ist der bessere: `content: " anzeigen"` war deutscher Text IM STILBLATT. Nicht uebersetzbar, in keiner i18n-Datei auffindbar, und CC-1 hat dieselbe Gestalt heute an anderer Stelle gefunden. Der Schluessel liegt jetzt in `server/i18n/keys-cc3-nachtrag.sql`. Ich hatte es als Pseudoelement gebaut, weil Live es so macht und weil es ohne Markup ging. Beides stimmte -- und keines von beidem hat gefragt, was mit dem Wort passiert, wenn der Laden zweisprachig wird. */ } /* Die zwei Reste am Elternlink, gemessen an v64: die Zeile war 290 statt 346 breit und trug Gewicht 400 statt 700. Beide Regeln von mir waren zu schwach -- der Elternlink ist ein `li` in einer Liste, deren Eintraege ich anderswo enger gefasst habe. Hier mit der Klasse des Elternteils. */ @media (max-width: 799px) { .sgp-menue ul.sgp-m-sichtbar > li.sgp-mobil-alle, .sgp-menue ul.sgp-m-sichtbar > li.is-submenu-parent-item { display: block; width: 100%; max-width: none; } .sgp-menue ul.sgp-m-sichtbar > li.sgp-mobil-alle > a, .sgp-menue ul.sgp-m-sichtbar > li.is-submenu-parent-item > a { width: 100%; font-weight: 700; } } /* ============================================================================ ZWEI CHEVRONS IN EINER ZEILE. CC-8, 31.08.2026. Im Bild von v65 stand die Elternzeile mit ZWEI Pfeilen nebeneinander. Die Zahl meldete es nicht -- meine Kontrastzaehlung zaehlt Farben, keine Doppelungen. Gefunden, weil das Bild angesehen wurde. Nachgemessen, beide im selben `span.sgp-mega-kopf`: A.sgp-mega-titel::after 16 x 16 meiner BUTTON.sgp-mega-chevron::before 11,19 x 11,19 CC-3s Knopf Am Telefon klappt der GANZE Eintrag auf -- der Knopf muss dort nicht getroffen werden, er ist eine Desktop-Bedienung. Und die erste Ebene traegt ihren Pfeil ebenfalls als `a.nav-link::after`; ein Pseudoelement auf beiden Ebenen ist die einheitlichere Loesung als eines hier und ein Knopf dort. Deshalb: der Knopf verschwindet am Telefon, das Pseudoelement bleibt. Am Desktop aendert sich nichts -- dort ist der Knopf die Trefflaeche, mit der eine Gruppe ohne Maus geoeffnet wird. ============================================================================ */ @media (max-width: 799px) { .sgp-menue .sgp-mega-chevron { display: none; } } /* ============================================================================ DREI NACHBESSERUNGEN AM TELEFONMENUE. CC-8, 31.08.2026. 1 · EBENE 2 STAND AUF 15px/600 STATT 16/400. Meine Regel `.sgp-menue .sgp-mega .sgp-mega-titel` ist (0,3,0). Ueber die CSSOM erfragt, welche Regeln `font-size` auf demselben Element setzen: 15px .sgp-desktop-menue .sgp-mega-titel (0,2,0) 14px .sgp-desktop-menue .sgp-mega > … > .sgp-mega-kopf (0,4,0) 15px .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte .sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel (0,5,0) 16px .sgp-menue .sgp-mega .sgp-mega-titel (0,3,0) Die (0,5,0) gewinnt. Zum vierten Mal heute dieselbe Sache: ich schreibe eine Telefonregel und rechne nicht nach, wogegen sie antritt. Deshalb steht sie jetzt mit voller Kette. 2 · DER ZWEITE CHEVRON WAR IMMER NOCH DA. `.sgp-menue .sgp-mega-chevron { display:none }` ist (0,2,0) und verliert gegen `.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-chevron` (0,3,0). Gemessen an der Zeile "Historische Rosen": zwei Pseudoelemente nebeneinander, 16x16 und 11,19x11,19. Auch hier mit voller Kette. 3 · DIE SCHWELLE FUER DEN ZWEISPALTIGEN FLY-OVER, nach CC-3s Hinweis. Der Elternlink ist eine zusaetzliche erste Zeile und verschiebt `:nth-child(16)` um eins. Heute kippt nichts -- CC-3 hat nachgezaehlt: 26 Listen, Kinderzahlen bis 11 und dann 16/17/21, keine mit genau 15. Aber die Schwelle IST verschoben, und das faellt beim naechsten Menuepunkt an, den jemand im Backend anlegt. Statt 16 auf 17 zu setzen -- eine Zahl, die beim naechsten Zusatz wieder falsch waere -- wird der Fall unterschieden: Liste MIT Elternlink -> Schwelle 17 Liste OHNE -> Schwelle 16 Das ist ableitbar und bleibt richtig, egal wieviele Zeilen wir noch davorlegen. ============================================================================ */ @media (max-width: 799px) { /* 1 */ .sgp-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-titel, .sgp-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel, .sgp-menue .sgp-mega .sgp-mega-kopf > .sgp-mega-titel { font-size: 16px; font-weight: 400; text-transform: none; } /* 2 */ .sgp-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf > .sgp-mega-chevron, .sgp-menue .sgp-mega-kopf > .sgp-mega-chevron { display: none; } } /* 3 -- Fly-Over, gilt am Desktop */ @media (min-width: 1024px) { .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:hover > .sgp-mega-liste:has(> li.sgp-mobil-alle):not(:has(> li:nth-child(17))), .sgp-desktop-menue .sgp-mega:not(.sgp-mega--inline):not([data-sgp-form="inline"]) > .sgp-mega-spalte.sgp-hat-liste:focus-within > .sgp-mega-liste:has(> li.sgp-mobil-alle):not(:has(> li:nth-child(17))) { column-count: auto; width: 100%; } } /* Die Durchgangszeile zeigte ihren eigenen Titel weiter. CC-8, 31.08.2026. Im Bild von v67 stand "Historische Rosen" ZWEIMAL: oben als Durchgang (mit Chevron), darunter als Elternlink ("Historische Rosen anzeigen"). Die Zahl meldete es nicht -- 18 Eintraege sind 18, ob einer davon doppelt ist oder nicht. Meine Regel nahm dem Durchgangs-`li` nur sein `> a`. Bei einer Gruppe steht der Titel aber in `span.sgp-mega-kopf > a`, und der span blieb. Dasselbe Muster wie bei CC-3s listeZu(): die Gruppe hat eine Ebene mehr als der einfache Eintrag, und wer nur den einfachen Fall kennt, greift daneben. */ @media (max-width: 799px) { .sgp-menue ul.sgp-m-sichtbar:not(.sgp-m-aktuell) > li:has(.sgp-m-sichtbar) > .sgp-mega-kopf { display: none; } } /* ============================================================================ DIE LUPE WIRD EIN TIPPZIEL. CC-8, 31.08.2026. Gemessen an v60: 40 x 32 bei (49, 73). Der Schliessknopf hat 44 x 44, die Menueeintraege 50 -- die Lupe war der letzte Punkt unter der Untergrenze. Die Trefflaeche waechst, das Zeichen nicht: `min-width`/`min-height` plus `inline-flex` mit Zentrierung. Waagerechtes Polster bleibt, damit die Titelleiste nicht auseinandergezogen wird. NACHGEMESSEN STATT ANGENOMMEN, dass die Leiste das traegt -- die Lehre aus dem Schliessknopf, der nach der ersten Fassung bei (283, -6) sass, weil sein Kopf 16 px Polster hatte und dem Inhalt 12 blieben. ============================================================================ */ @media (max-width: 799px) { .sgp-menue .sgp-mobil-toggle, .title-bar .sgp-mobil-toggle, button.menu-icon.sgp-mobil-toggle, .sgp-mobil-toggle.button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; } } /* ============================================================================ "anzeigen" RECHTSBUENDIG, UND DER RUECKWEG WIRD TREFFBAR. CC-8, 31.08.2026. 1 · CC-3 liefert `span.sgp-anzeigen` als echtes Element. Damit geht, was am Pseudoelement nicht ging: der Link ist `display: flex`, also schiebt `margin-left: auto` den Zusatz an die rechte Kante. Kein `float`, kein `position` -- das Element bleibt im Fluss und die ganze Zeile bleibt die Trefflaeche. 2 · Der Rueckweg-Knopf ist 34 x 28 und traegt ein nacktes Pfeilzeichen. CC-3 hat ihn auf v68 mit echtem Zeiger nachgefahren: er FUNKTIONIERT (Rosen -> Historische Rosen -> zurueck -> "Rosen", 16 Eintraege). Was fehlt, ist seine Auffindbarkeit. Er ist der wichtigste Knopf im Menue -- der einzige Weg zurueck, wenn man sich verlaufen hat. 44 x 44 ist die Untergrenze fuer ein Tippziel; er bekommt sie, und dazu die Farbe des Kopfes statt eines geerbten Grautons. Ein WORT daneben ("zurueck") waere Markup und damit CC-3s Seite. Ich habe es nicht angefordert: Live hat dort auch nur ein Zeichen, und der Kopf nennt bereits die Ebene, aus der man kommt. ============================================================================ */ @media (max-width: 799px) { .sgp-menue li.sgp-mobil-alle > a .sgp-anzeigen, .sgp-menue li.is-submenu-parent-item > a .sgp-anzeigen { margin-left: auto; font-style: italic; font-weight: 400; font-size: 0.875em; color: #946110; /* 5,28 : 1 auf Weiss */ white-space: nowrap; } /* `:not([hidden])` ist nicht Zierde: ohne sie stand der Zurueck-Knopf auf Ebene 0 sichtbar da und tat nichts. `hidden` nimmt das Element zugleich aus dem Zugaenglichkeitsbaum -- eine Sprachausgabe verschwieg den Knopf, ein sehender Besucher sah eine tote Schaltflaeche. */ .sgp-menue .sgp-mobil-zurueck:not([hidden]) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; color: #fff; background: transparent; border: 0; font-size: 20px; line-height: 1; } } /* ============================================================================ "anzeigen anzeigen" -- DIE ZWEITE QUELLE STAND IN cache.css. CC-8, 31.08.2026. Nach dem Entfernen meines `::after` stand das Wort immer noch doppelt. Lokal und auf dem Server null aktive `content`-Regeln fuer "anzeigen" -- nachgezaehlt in beiden Dateien, sie sind zeichengleich (143.827). Den Browser gefragt, welche Regel es setzt: gilt cache.css " anzeigen" .is-submenu-parent-item > a::after Es ist LIVES EIGENE REGEL, und sie liegt seit jeher in unserem Kompilat. Sie war nur nie sichtbar, weil niemand die Klasse setzte. Sobald CC-3 `is-submenu-parent-item` vergibt -- Lives Klassenname, wie verlangt -- greift Lives Regel mit. Ich hatte das Pseudoelement selbst gebaut und dabei etwas nachgebaut, das schon da war. Aufgefallen ist es erst, als CC-3 ein echtes Element lieferte und daneben plotzlich zweimal dasselbe Wort stand. DIE BEDINGUNG IST ABLEITBAR: Lives Pseudoelement wird genau dann abgeschaltet, wenn unser echtes Element im Link steht. Kein Medienzweig, keine Namensliste -- und wenn CC-3 das span je zurueckzieht, kommt Lives Fassung von selbst wieder. In `cache.css` wird nichts geaendert; sie ist ein Kompilat. ============================================================================ */ .sgp-menue a:has(> .sgp-anzeigen)::after { content: none; } /* ============================================================================ DREI PUNKTE VOR DER TOOLS-ZEILE. CC-8, 31.08.2026. 1 · DIE SCHUBLADE HAENGT AN DER KOPFUNTERKANTE -- vorbereitet, ohne Zahl. CC-9 misst Schublade oben 100 gegen Kopfunterkante 150, also -50. Ich messe in meinem Rahmen 0 gegen 116, also -116. Verschiedene Zahlen, derselbe Befund: die Schublade beginnt OBERHALB des Kopfes und legt sich darueber. Und genau dieser Abstand waechst mit jeder Zeile, die der Kopf dazubekommt. IN REINEM CSS IST DAS NICHT LOESBAR, und der Grund ist gemessen: der Bezugsrahmen der Schublade ist nicht der Viewport, sondern `#navigation-top-wrapper` -- nachgeprueft ueber `offsetParent` --, weil der einen `transform` traegt. Dieser Wrapper ist 390 x 0 und sitzt bei y = 0. `top: 100%` waere damit 0, nicht 116. Es gibt keinen CSS-Ausdruck, der von dort aus die Kopfunterkante trifft. Deshalb steht hier eine VARIABLE mit Rueckfall 0. Ohne sie verhaelt sich alles wie bisher; sobald CC-3 `--sgp-kopfhoehe` beim Oeffnen setzt, haengt die Schublade an der tatsaechlichen Unterkante -- und zwar an jeder Breite, weil der Wert zur Laufzeit gemessen wird und nicht hier steht. Die Hoehe zieht mit: was oben abgeht, fehlt unten. 2 · EBENE 1 MASS 51 STATT 50, und das ist NICHT gewollt. `min-height: 50px` stand am Verweis, der Rahmen von 1 px am Kasten darum. 50 + 1 = 51. Lives 50 ist die Zeile EINSCHLIESSLICH ihrer Trennlinie -- gemessen an Lives `361 x 50`. Also gehoert die Hoehe an den Kasten, nicht an seinen Inhalt. 3 · EBENE 2 WAR ZWEIGETEILT: 39 px ohne Unterebene, 60 px mit. Meine "38" hat das verdeckt -- ich hatte die Hoehe am Verweis gesetzt, und eine Gruppe traegt zusaetzlich ihren Kopf. Live misst 38 fuer BEIDE Sorten; die Unterscheidung ist ein Fehler, keine Absicht. Auch hier: Hoehe an den Kasten. ============================================================================ */ @media (max-width: 799px) { /* 1 */ nav.top-bar.sgp-menue { top: var(--sgp-kopfhoehe, 0px); height: calc(100vh - var(--sgp-kopfhoehe, 0px)); height: calc(100dvh - var(--sgp-kopfhoehe, 0px)); } /* 2 */ .sgp-menue .sgp-desktop-menue > li { min-height: 50px; box-sizing: border-box; } .sgp-menue .sgp-desktop-menue > li > a.nav-link { min-height: 0; height: 100%; } /* 3 */ .sgp-menue .sgp-mega-liste > li, .sgp-menue .sgp-mega > .sgp-mega-spalte { /* min-height steht jetzt weiter unten, 44 bzw. 60 je nach Unterebene */ box-sizing: border-box; } .sgp-menue .sgp-mega .sgp-mega-titel, .sgp-menue .sgp-mega .dropdown-item { min-height: 0; } /* .sgp-mega-kopf trug hier 38px -- entfaellt, siehe 44/60 weiter unten. */ } /* ============================================================================ EBENE 2: ZWEI HOEHEN, UND DAS IST ABSICHT. CC-8, 31.08.2026. Betreiberentscheidung, und sie kehrt meine letzte Aenderung um. Ich hatte die beiden Hoehen als Fehler behandelt und auf 38 vereinheitlicht -- nach Lives Wert. Der Betreiber sagt: der Unterschied ist INFORMATION, nicht Zierde. ohne Unterebene 39 -> 44 traegt EIN Ziel (der Name) mit Unterebene 60 traegt ZWEI (Name + "anzeigen") DIE BEIDEN ZAHLEN SIND VERSCHIEDENER NATUR, und das entscheidet, WORAN man sie misst. CC-9 hat am 31.08. genau danach gefragt, weil seine Pruefung 19 Zeilen als „60 aussen, 59 innen" meldete: 44 ist eine UNTERGRENZE FUER DIE BEDIENBARE FLAECHE. Sie kommt aus der 44-x-44-Regel, die wir fuer Lupe und Schliessknopf durchgesetzt haben — gemessen wird, was ein Finger trifft. Deshalb tragen Zeilen mit Rand 45 aussen, damit innen 44 bleibt. 60 ist eine GESTALTUNGSHOEHE aus dem Bestand. Sie sagt nichts ueber Bedienbarkeit, sondern dass dieser Eintrag zwei Ziele traegt — gemessen wird der Kasten, denn das ist, was man SIEHT. Darum ist „60 aussen, 59 innen" richtig und kein Rueckschritt: 59 liegt ueber der Untergrenze 44, und die 60 ist eingehalten, wo sie gilt. Die beiden Zahlen auf dasselbe Mass zu ziehen waere der Fehler — dann muesste entweder die Gestaltung 61 werden oder die Trefflaeche 43. Und die 39 lagen unter der 44-x-44-Regel, die wir fuer Lupe und Schliessknopf durchgesetzt haben. Ein Menueeintrag ist dasselbe Daumenziel wie ein Knopf -- das ist das Argument, das ich selbst haette sehen muessen, als ich auf 38 gesetzt habe: ich habe Lives Zahl uebernommen und nicht gefragt, ob sie die Untergrenze einhaelt, die wir drei Zeilen weiter oben durchsetzen. ABLEITBAR STATT BENANNT: die Unterscheidung haengt daran, ob der Eintrag eine Unterebene traegt -- nicht an einer Klasse, die jemand vergessen kann, und nicht an einer Liste von Namen. ============================================================================ */ @media (max-width: 799px) { .sgp-menue .sgp-mega-liste > li:not(:has(ul)), .sgp-menue .sgp-mega > .sgp-mega-spalte:not(:has(ul)), /* Der ELTERNLINK („Ueber Uns · anzeigen") ist ein `li.sgp-mobil-alle` und KEINE `.sgp-mega-spalte` -- er fiel durch beide Selektoren und mass am 31.08.2026 gemessene 36,2 px bei `min-height: 0`. Sechs Eintraege daneben sassen auf 44. Er traegt nie eine Unterebene, deshalb ohne `:not(:has(ul))`. Dasselbe Argument wie oben: ein Menueeintrag ist dasselbe Daumenziel wie ein Knopf, und 36 liegt unter der Grenze, die wir fuer Lupe und Schliessknopf durchgesetzt haben. */ .sgp-menue .sgp-mega > .sgp-mobil-alle { min-height: 44px; } .sgp-menue .sgp-mega-liste > li:has(ul), .sgp-menue .sgp-mega > .sgp-mega-spalte:has(ul) { min-height: 60px; } } /* ============================================================================ DER FUSSBLOCK DER SCHUBLADE. Nachtrag 10:50, Gestaltung B. Markup von CC-3 (31.08.2026), Werte vom Betreiber. Drei Zeilen am unteren Ende von #navigation-top: Lieferland, Sprache, Konto. Der Sprachschalter ist der `gtranslate_wrapper`, der vorher im Kopfband stand -- UMGEZOGEN, nicht kopiert. Es gibt weiterhin genau einen mobilen. WARUM DAS ZUSAMMENGEHOERT: der Schalter ist mobil-only (am Desktop steht er in `#title-bar-wrapper.hide-for-medium-larger` und misst 0 x 0, am Telefon 173 x 32 -- beides am 31.08. gemessen). Faellt er aus dem Kopf, bevor dieser Block steht, ist die Sprachwahl am Telefon ersatzlos weg. Deshalb Markup und Gestaltung in EINER Ausrollung. `flex: 0 0 auto` -- der Block sitzt am Ende und schrumpft nicht, wenn die Liste darueber lang wird. ============================================================================ */ /* DER FUSSBLOCK GEHOERT IN DIE SCHUBLADE, ALSO NUR ANS TELEFON. Am 31.08.2026 am Desktop gemessen: er wurde dort mitgerendert und lag ueber der Vertrauensleiste -- an ALLEN VIER Punkten gab `elementFromPoint` `DIV.sgp-fuss-zeile` zurueck statt des Punktes. Der Grund ist ein Versaeumnis von mir: saemtliche `.sgp-fuss`-Regeln stehen in `@media (max-width: 799px)`. Am Desktop war der Block damit UNGESTYLT -- nicht verborgen, sondern ohne Gestaltung im Fluss, mitten im Kopf. Aufgefallen ist es nur, weil ich CC-9s Trust-Probe („liegt etwas darueber?") nach der Ruecknahme auch am Desktop gefahren habe. Hoehe, Breite und Punktzahl der Leiste waren dort die ganze Zeit richtig. */ @media (min-width: 800px) { .sgp-menue .sgp-fuss, #navigation-top > .sgp-fuss { display: none; } } @media (max-width: 799px) { .sgp-menue .sgp-fuss { flex: 0 0 auto; background: #f6f4e9; border-top: 1px solid #e6e2d0; padding: 4px 18px 12px; } .sgp-menue .sgp-fuss-zeile { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: #4a4d42; } /* Trennlinie ZWISCHEN den Zeilen, nicht unter der letzten -- deshalb der Geschwisterselektor statt `border-bottom` mit `:last-child`-Ausnahme. Eine Linie unter der dritten Zeile saesse direkt auf dem Polster und laese wie ein abgeschnittener vierter Eintrag. */ .sgp-menue .sgp-fuss-zeile + .sgp-fuss-zeile { border-top: 1px solid #eae7d8; /* 45, NICHT 44 -- der Rand liegt bei `border-box` INNERHALB der min-height und frisst ein Pixel vom Inhalt. CC-9 hat es getrennt gemessen und damit die Zeile gefunden, die ich uebersehen hatte: Zeile 1 Lieferung Randkasten 44 Trefflaeche 44 ok Zeile 2 Sprache Randkasten 44 Trefflaeche 43 ZU KLEIN Zeile 3 Konto Randkasten 45 Trefflaeche 44 ok Zeile 3 kam zufaellig richtig heraus: sie enthaelt einen Verweis mit `min-height: 44`, der den Rand nach aussen drueckt. Zeile 2 traegt nur den Sprachschalter (32 hoch), dort greift die min-height der Zeile -- und liefert 44 inklusive Rand, also 43 Inhalt. Ein Pixel, aber genau das Pixel, das die 44er-Regel meint. Und meine eigene Abnahme hat es durchgelassen, weil sie den Randkasten gemessen hat statt der Flaeche, die ein Finger trifft. */ min-height: 45px; } .sgp-menue .sgp-fuss-zeile i { opacity: .7; width: 16px; text-align: center; } .sgp-menue .sgp-fuss-wert { font-weight: 700; color: #2b2b26; } /* DER TRENNER IM FUSSBLOCK -- vorbereitet, heute ohne Ziel. Zeile 1 soll nach der Vorgabe 08:20 einmal „Land · 7 % MwSt." tragen. Der Steuersatz ist bis zur Entscheidung des Betreibers BEWUSST nicht gebaut (CC-4: im Normalfall zeigt der Bestand 7,00 % statt 13,00 % fuer AT, und `include_euVat.php:245` sucht ueber eine Spalte, die es hier nicht gibt). Diese Regel steht trotzdem schon da, damit die Entscheidung, wenn sie faellt, bei CC-3 eine Zeile Markup kostet und bei mir keine. ALS EIGENES ELEMENT, NICHT ALS `::before` -- Vorschlag von CC-3, und er hat recht: in der Kopfleiste ist der Trenner ein `::before`, weil dort die Zahl der Punkte je nach Lieferland schwankt und er von selbst zwischen ihnen erscheinen muss. Hier stehen genau zwei feste Werte nebeneinander; ein eigenes Element laesst sich im Flexfluss ausrichten, ein Pseudoelement haengt am Nachbarn. Verschiedene Aufgaben, verschiedene Mittel. */ .sgp-menue .sgp-fuss-trenner { color: #cfcbb4; padding: 0 2px; } .sgp-menue .sgp-fuss-aendern { margin-left: auto; color: #946110; font-weight: 600; } /* Jeder Verweis im Fussblock ist ein Daumenziel und fuellt die Zeilenhoehe. Dieselbe Sache, die beim Elternlink der Ebene 2 schiefging: die Zeile war 44 hoch, der Verweis darin 36. Die Zeile ist nicht die Trefflaeche. */ /* NUR DIREKTE KINDER. Erste Fassung schrieb `.sgp-fuss-zeile a` ohne `>` und traf damit auch die vierzehn Sprachverweise IM GTranslate-Widget. Deren innerster Verweis bekam `min-height: 44px`, dazu sein eigenes `padding: 3px 5px` -- die Sprachzeile wurde 53 px hoch statt 44, und die Ursache stand nicht im Widget, sondern in meiner Regel. Am Geraet gemessen: der Knoten trug `height: 44px`, und niemand ausser mir setzt das dort. „aendern" und „Mein Konto" sind direkte Kinder ihrer Zeile, die Widget-Verweise liegen drei Ebenen tiefer -- `>` trennt beides sauber, ohne einen Fremdselektor zu nennen. */ .sgp-menue .sgp-fuss-zeile > a { display: inline-flex; align-items: center; min-height: 44px; } /* `:not()`, WEIL DIE FARBE SONST VERLOREN GEHT. Erste Fassung schrieb hier `color: inherit` fuer alle Verweise -- und `.sgp-menue .sgp-fuss-zeile a` ist (0,2,1), `.sgp-menue .sgp-fuss-aendern` nur (0,2,0). Das Gold verlor, „aendern" kam in rgb(74,77,66) heraus statt in #946110. Am Geraet gemessen, nicht beim Lesen gesehen. Spaeter ist nicht staerker -- zum fuenften Mal dieselbe Gestalt in dieser Datei. */ .sgp-menue .sgp-fuss-zeile > a:not(.sgp-fuss-aendern) { color: inherit; } .sgp-menue .sgp-fuss-aendern:hover, .sgp-menue .sgp-fuss-aendern:focus-visible { color: #7a4f0d; } /* ZEILE 3 BEKOMMT KEINEN EIGENEN ABSTAND MEHR. Die Vorgabe vom 08:20 nennt „Zeile 3: Abstand 22 px zwischen den beiden Eintraegen" -- gemeint war Mein Konto <-> Wunschliste. Die Wunschliste ist mit der Berichtigung 11:15 gestrichen („KEINE WUNSCHLISTE. Die gibt es noch nicht... baut keinen toten Link"). Damit hat die 22 ihren Bezugspunkt verloren: sie stand zwischen zwei Eintraegen, und es gibt nur noch einen. Als `gap` auf der Zeile wirkte sie stattdessen zwischen Zeichen und Text. Gemessen: Zeile 1 und 2 hatten 10 px vom Zeichen zum Text, Zeile 3 hatte 22. Die drei Zeichen standen auf einer Flucht, die drei Texte nicht. Zeile 3 erbt jetzt die 10 der Geschwister. */ /* Der Sprachschalter rueckt nach rechts wie „aendern" in Zeile 1, damit die drei Zeilen eine gemeinsame rechte Kante haben. */ .sgp-menue .sgp-fuss-sprachwahl { margin-left: auto; } } /* ============================================================================ DIE ZEILE IST NICHT DIE TREFFFLAECHE. 31.08.2026, beim Ablaufen des tiefsten Astes gefunden. GEMESSEN an v83, im 360-px-Rahmen, Ast „Rosen > Nach Rosenzuechter": Ebene Zeile Verweis darin unter 44 1 50 / 51 16,8 8 von 9 2 44 / 51,4 / 60 19,2 / 31,2 / 35,2 17 von 18 3 44 31,2 22 von 22 Und der Nachweis, dass die Luecke wirklich tot ist -- nicht nur klein: zehn Proben mit `elementFromPoint` ueber eine 60-px-Zeile trafen DREI MAL einen Verweis. Ab 20 px unterhalb der Oberkante kommt `span.sgp-mega-kopf`, ab 32 px das blanke `li`. Ein vollstaendiger Zeigerlauf (pointerdown bis click) 45 px unterhalb der Oberkante bewirkt NICHTS: keine Navigation, kein Aufklappen, keine Klassenaenderung. DER FEHLER IST MEINER, und er ist durch meine eigene Verbesserung entstanden. Ich habe die ZEILEN per `min-height` auf 44 und 60 gebracht -- und den Verweis darin gelassen, wie er war. Vorher war die Zeile so hoch wie ihr Text; seitdem sieht der Benutzer eine 60 px hohe Zeile und trifft nur ihr oberes Drittel. Eine Trefflaeche zu vergroessern, ohne das Ziel mitzunehmen, macht sie schlechter als vorher: die Flaeche verspricht etwas, was sie nicht einloest. Dieselbe Gestalt wie beim Elternlink (36,2 in einer 44er-Zeile) und im Fussblock (44er Zeile, kleinerer Verweis). Drittes Mal an einem Tag -- deshalb hier fuer ALLE drei Ebenen auf einmal, nicht wieder je Fall. ============================================================================ */ @media (max-width: 799px) { /* EBENE 1 -- die Zeile ist 50 hoch, `height: 100%` weiter oben greift nicht (das `li` hat keine feste Hoehe, 100% von `auto` ist `auto`). */ .sgp-menue .sgp-desktop-menue > li > a.nav-link { display: flex; align-items: center; min-height: 50px; } /* EBENE 2 -- das `li` traegt 44 oder 60. Damit der Kopf beides fuellt, wird das `li` zur Spalte und der Kopf nimmt den freien Raum. Bei ZUGEKLAPPTER Unterliste (display:none) fuellt er die ganze Zeile, bei aufgeklappter behaelt er seine 44 und die Liste bekommt den Rest. */ .sgp-menue .sgp-mega > .sgp-mega-spalte { display: flex; flex-direction: column; } .sgp-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf { flex: 1 0 auto; min-height: 44px; align-items: stretch; /* der Titel soll sich strecken, nicht mittig sitzen */ /* DER ABSTAND DES DESKTOP-PANELS MUSS HIER WEG. Gemessen: der Kopf trug `margin: 0 0 12px` und `padding: 0 0 8px` -- am Desktop trennt das die Gruppen im Panel, am Telefon rechnete es sich zu Kopf 53 + margin 12 + border 1 = 66 und machte aus der beschlossenen 60 eine 66, mit 13 px toter Zone unterhalb des Kopfes. Ein Wert, der in einer Darstellung richtig ist und in der anderen nicht -- dieselbe Sache wie bei den 22 px in Zeile 3 des Fussblocks. */ } /* SECHS Klassen tief, WEIL DER GEGENSPIELER FUENF HAT. `.sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf` (Zeile ~1084) setzt margin-bottom 12, padding-bottom 8 und border-bottom 1 -- am Desktop ist das die Trennlinie unter einer Gruppenueberschrift, und dort gehoert sie hin. Meine erste Fassung hier hatte (0,3,0) gegen deren (0,5,0) und verlor lautlos: die Zeile blieb 66. Nachgesehen habe ich es erst, als die Messung nach dem Ausrollen unveraendert 66 sagte. */ .sgp-menue .sgp-desktop-menue .sgp-mega > .sgp-mega-spalte.sgp-hat-liste > .sgp-mega-kopf { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .sgp-menue .sgp-mega > .sgp-mega-spalte > .sgp-mega-kopf > .sgp-mega-titel { display: flex; align-items: center; /* der TEXT bleibt mittig, die FLAECHE waechst */ min-height: 44px; } /* EBENE 3 -- VIER Klassen, weil `.sgp-menue .sgp-mega .dropdown-item` (0,3,0) `min-height: 0` traegt. Meine erste Fassung war `.sgp-menue .sgp-mega-liste > li > a` = (0,2,2), und zwei Elemente wiegen keine Klasse auf. Gemessen nach dem Ausrollen: 21 der 22 Zuechter standen unveraendert auf 31,2. */ .sgp-menue .sgp-mega .sgp-mega-liste > li > a.dropdown-item { display: flex; align-items: center; min-height: 44px; } /* Der Elternlink traegt sein `anzeigen` rechts (margin-left:auto) und muss deshalb Flex bleiben -- hier nur die Hoehe. */ /* VIER Klassen tief, WEIL `.sgp-menue .sgp-mega .dropdown-item { min-height: 0 }` weiter oben (0,3,0) traegt und meine erste Fassung hier nur (0,2,0) hatte. Gemessen: das `li` sass auf 44, der Verweis darin auf 35,2. Vierte Erscheinung derselben Sache an einem Tag -- spaeter ist nicht staerker. */ .sgp-menue .sgp-mega .sgp-mobil-alle > a.dropdown-item { min-height: 44px; } } /* ============================================================================ BAND 1 · DIE WERKZEUGZEILE. Auftrag 16:40, Markup von CC-3 (122dc221). Der abgenommene Entwurf kennt vier Baender; gebaut waren 2, 3 und 4. Band 1 fehlte, weil die Festlegung vom 08:20 Band 1 und Band 4 fuer dasselbe hielt. Ich habe daraufhin Band 4 gebaut -- richtig gebaut, aber nicht das, wonach gefragt war. VORGABE: 30 px, Aktion links, rechts Sprache · Konto · Wunschliste · Korb. Roter Lauf vorher, bei 1200 px gemessen: Band 92 px hoch, Aktion (0..24) und Werkzeuge (24..92) UNTEREINANDER statt nebeneinander. WAS ICH ABGELEITET HABE, weil die Vorgabe nur die Hoehe nennt -- und was davon eine Wahl ist: Grund #f6f4e9 derselbe Sandton wie der Schubladenfuss. Band 1 und Band 4 umschliessen den Kopf; sie sollen sich unterscheiden, deshalb hier Sand und dort Weiss. Text 13 px, #4a4d42 -- wie Band 4, damit die zwei Randbaender zusammengehoeren. Linie 1px #e6e2d0 unten, wie Band 4 oben. Das sind drei bewusste Wahlen, keine abgelesenen Werte. Wer sie anders will, aendert drei Zeilen. WUNSCHLISTE: das leere `span` bleibt im Fluss, bekommt aber KEINE Mindestbreite. „Platz vorsehen, Inhalt nein" heisst, dass die Struktur dasteht und spaeter fuellbar ist -- eine reservierte Luecke ohne Inhalt waere ein sichtbares Loch, das niemand erklaeren kann. NICHTS DAVON IST STICKY. Beim Scrollen wandern die Werkzeuge in die Navigationsleiste, wie heute schon -- das ist Bestandsverhalten und wird hier nicht angefasst. ============================================================================ */ .sgp-werkzeuge { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; padding: 0 16px; background: #f6f4e9; border-bottom: 1px solid #e6e2d0; font-size: 13px; color: #4a4d42; } .sgp-werkzeuge-aktion { min-width: 0; } .sgp-werkzeuge-aktion .sgp-aktion-link { color: #946110; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sgp-werkzeuge-aktion .sgp-aktion-link:hover, .sgp-werkzeuge-aktion .sgp-aktion-link:focus-visible { text-decoration: underline; } .sgp-werkzeuge-rechts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .sgp-werkzeuge .sgp-werkzeug { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; } .sgp-werkzeuge .sgp-werkzeug:hover, .sgp-werkzeuge .sgp-werkzeug:focus-visible { color: #946110; } .sgp-werkzeuge .sgp-werkzeug i { opacity: .75; } /* Die Zaehlblase am Korb -- klein, nicht als zweites Wort lesbar. UND SIE BLIES DAS BAND AUF: gemessen war der Korb 121 x 36, weil die Blase 36 px hoch war. Das Band ist dadurch 37 statt 30 geworden. `line-height: 1` und feste Hoehe halten sie in der Zeile. */ .sgp-werkzeuge .basket-numArticles { font-size: 11px; font-weight: 700; color: #2b2b26; line-height: 1; height: auto; min-height: 0; padding: 1px 4px; display: inline-block; } .sgp-werkzeuge .sgp-werkzeug-korb, .sgp-werkzeuge .sgp-werkzeug-konto { line-height: 1.2; } /* DIE 30 PX SIND EIN MINDESTMASS, KEINE OBERGRENZE -- und das ist eine bewusste Abweichung, die ich benenne. Gemessen bei 1200 px nach dem Einpassen der Zaehlblase: das hoechste Element in der Zeile ist der Sprachschalter mit 32 px. Er ist ein fremdes Widget (GTranslate); ihn auf 30 zu zwingen hiesse, in seine Interna zu greifen -- dieselbe Sache, die im Fussblock die Sprachzeile auf 53 px getrieben hat, nur andersherum. Das Band ist deshalb `min-height: 30px` und wird so hoch, wie sein Inhalt es braucht: rund 33 statt 30. Die Alternative waere `height: 30px; overflow: hidden` -- also Beschneiden, und genau das war heute schon einmal der Fehler an der Vertrauensleiste. */ /* Der Sprachschalter ist ein fremdes Widget: nur einordnen, nicht umbauen. */ .sgp-werkzeuge .sgp-werkzeug-sprache { display: inline-flex; align-items: center; } /* CLS: DIE SPRACHWAHL HAELT IHREN PLATZ, BEVOR SIE DA IST. 01.09.2026 Von CC-9 gemessen, nicht vermutet. `div.gtranslate_wrapper` wird per Javascript nachgebaut und hat bis dahin keine Hoehe: 582 ms [ 0 x 0 ] innerHTML 628 Byte 851 ms [173 x 32 ] innerHTML 3281 Byte 890 ms .sgp-werkzeuge-rechts 16 -> 32 890 ms #header 228 -> 231 Alles darunter rutscht genau diese 3 px -- section#content 286->289, .row.tools 30->33, #navigation-top-wrapper 144->147. EIN Sprung, nicht viele. ohne Regel 228->231 bzw. 224->228->231 mit Regel 231 durchgehend, 0 Hoehenwechsel DER RUHEZUSTAND AENDERT SICH NICHT. Der Kopf ist heute schon 231; die Regel macht ihn nur von Anfang an so. Meine Kopfabnahme misst weiterhin 231 -- genau der Punkt, an dem man sonst zu Recht misstrauisch wird. Das Element ist bei 1440, 1280 und 1024 gleich gross. Am Telefon greift die Regel nicht: dort heisst die Huelle `.sgp-mobil-sprache`, und die Desktop-Werkzeugleiste ist 0 px hoch. */ .sgp-werkzeug-sprache { min-height: 32px; } /* Am Telefon traegt Band 1 nur die Aktion -- die Werkzeuge stehen dort in der Schublade (Fussblock) und im Kopf. Zwei Wege zum selben Ziel nebeneinander waeren auf 360 px kein Angebot, sondern Gedraenge. */ @media (max-width: 767.98px) { .sgp-werkzeuge-rechts { display: none; } .sgp-werkzeuge { justify-content: center; } } /* ============================================================================ M2 · ZWEI HAMBURGER UEBEREINANDER -- einer davon war meiner. Gemessen am 31.08.: auf `.sgp-mobil-toggle` lagen ZWEI vollstaendige Zeichnungen: .sgp-mobil-toggle::before 20 x 2 px + zwei Schatten menue.css 134 .menu-icon::after 36 x 2 px, background-image cache.css Ich habe eine zweite Grafik ergaenzt, ohne die vorhandene abzuschalten. Der Bestand zeichnet den Hamburger bereits -- das Markup traegt `menu-icon`. Der Bestand behaelt seine Zeichnung, meine faellt weg. Umgekehrt waere es mehr Code fuer dasselbe Bild. DAZU DIE HOEHE: der Ausloeser mass 44 x 53 statt 44 x 44. `cache.css .title-bar .menu-icon { height: 3.3125rem }` (= 53) schlaegt meine `min-height: 44px` -- eine feste Hoehe gewinnt gegen ein Minimum. Deshalb hier ausdruecklich `height: 44px` mit gleicher Spezifitaetsklasse. ============================================================================ */ .sgp-mobil-toggle::before { content: none; } @media (max-width: 799px) { .title-bar .menu-icon.sgp-mobil-toggle, .sgp-menue .sgp-mobil-toggle { height: 44px; padding-top: 0; padding-bottom: 0; } } /* ============================================================================ S1 · DIE SPRACHLISTE DARF NICHTS VERSCHIEBEN. Auftrag 19:50/20:20. GEMESSEN, roter Lauf bei 1200 px: Liste zu Band 34, Nachbar bei y=8,3 Liste auf, heutiger Stand Band 232, Nachbar bei y=107,3 -> +99 px Liste auf, als Overlay Band 33, Nachbar bei y= 7,8 -> 0 px Die Optionsliste `.gt_option` traegt `position: relative` und ist zusammengeklappt 1 px hoch; aufgeklappt sind es 199. RELATIV HEISST IM FLUSS -- sie schiebt alles darunter um ihre volle Hoehe. Beinahe uebersehen, und das gehoert dazu: meine erste Auswertung notierte „liegt ueber dem Inhalt (relative)" und haette den Befund als in Ordnung durchgehen lassen. `relative` verschiebt das Element gegen seinen eigenen Platz -- den Platz behaelt es. Nur `absolute` und `fixed` nehmen es aus dem Fluss. Die z-Werte des Widgets (9998 auf der Liste, 9999 auf dem Schalter) zeigen, dass es als Overlay gedacht war; nur die Positionierung fehlt. Der Wrapper wird der Bezugsrahmen -- nicht `.gt_selected`, denn die Liste soll unter dem SCHALTER haengen, nicht unter dessen Innerem. ============================================================================ */ /* `.sgp-mobil-sprache` kam am 31.08.2026 dazu, und ihr Fehlen war ein echter Mangel: im mobilen Kopf stand die Liste weiterhin auf `position: relative` -- also IM FLUSS -- und haette alles darunter geschoben. Genau der Zustand, den S1 fuer die Werkzeugleiste behoben hat, mobil aber nie erreichte. Gemessen bei 768 px: die Liste lag bei y -46…154, und der Punkt in ihrer Mitte lieferte `div.title-bar` statt der Liste. */ .sgp-werkzeug-sprache, .sgp-fuss-sprachwahl, .sgp-mobil-sprache { position: relative; } /* VIER KLASSEN TIEF, WEIL DER GEGENSPIELER DREI HAT. Erste Fassung war `.sgp-werkzeug-sprache .gt_option` (0,2,0) und hat nicht gegriffen. GTranslate setzt aus einem eigenen