Nav-Dropdown: Panel-Padding wirkt jetzt + gleichmäßiger Innenabstand

Das Submenu-Padding wurde stillschweigend vom globalen reset.css-Selektor
`ul[class] { padding: 0 }` (Spezifität 0,1,1) überschrieben, da
`.site-nav__submenu` nur (0,1,0) hat — die Hover-/Active-Pillen klebten
dadurch links/rechts am Panel-Rand. Selektoren auf
`.site-nav__list .site-nav__submenu` (0,2,0) gehoben (Haupt-Regel,
@supports-Glas, Mobile-Override), sodass das Padding ohne !important greift.
Innenabstand auf gleichmäßige 0.55rem rundum gesetzt — Pillen stehen
oben/unten/seitlich gleich dezent frei.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-20 21:08:59 +02:00
parent adf142b18e
commit 23778324c7

View File

@@ -152,7 +152,9 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
.site-nav__submenu { /* Höhere Spezifität (0,2,0) nötig, damit das Panel-Padding den globalen
reset.css-Selektor `ul[class] { padding: 0 }` (0,1,1) schlägt. */
.site-nav__list .site-nav__submenu {
position: absolute; position: absolute;
top: calc(100% + 0.4rem); top: calc(100% + 0.4rem);
left: 50%; left: 50%;
@@ -163,8 +165,8 @@
gap: 0.2rem; gap: 0.2rem;
min-width: 15rem; min-width: 15rem;
margin: 0; margin: 0;
/* Mehr Luft links/rechts, damit die abgerundeten Hover-Pillen klar rauskommen. */ /* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
padding: 0.55rem 0.85rem; padding: 0.55rem;
list-style: none; list-style: none;
/* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */ /* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
background: rgb(20 20 20 / 0.96); background: rgb(20 20 20 / 0.96);
@@ -179,7 +181,7 @@
} }
@supports (backdrop-filter: blur(1px)) { @supports (backdrop-filter: blur(1px)) {
.site-nav__submenu { .site-nav__list .site-nav__submenu {
background: rgb(20 20 20 / 0.82); background: rgb(20 20 20 / 0.82);
backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
} }
@@ -342,8 +344,9 @@
justify-content: center; justify-content: center;
} }
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert. */ /* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert.
.site-nav__submenu { Spezifität (0,2,0) gleich der Desktop-Regel; gewinnt hier per Quell-Reihenfolge. */
.site-nav__list .site-nav__submenu {
position: static; position: static;
transform: none; transform: none;
display: none; display: none;