fix(mobile): Card-Overflow (border-box) + Offcanvas-Menue in Markenfarbe

- .op-split__list: box-sizing border-box -> width:100%+padding ragte 34px
  ueber den Viewport, Kacheln/Suche waren rechts abgeschnitten
- Offcanvas-Menue: Markenblau statt UIkit-Grau, weisse Links,
  gelber Aktiv-/Hover-Akzent, sichtbarer Schliessen-Button
This commit is contained in:
maik
2026-08-19 12:10:04 +02:00
parent 933b886d48
commit 7d2949bf42
+20 -1
View File
@@ -241,6 +241,25 @@ a:hover { color: var(--op-blau-dunkel); }
} }
.op-navbar .op-logo__img { height: 44px; } .op-navbar .op-logo__img { height: 44px; }
/* Mobiles Offcanvas-Menü im Hausstil (Blau statt UIkit-Default-Grau) */
.uk-offcanvas-bar { background: var(--op-blau); color: #fff; }
.uk-offcanvas-bar .uk-nav-primary > li > a {
color: #fff; font-weight: 700; text-transform: none;
}
.uk-offcanvas-bar .uk-nav-primary > li > a:hover,
.uk-offcanvas-bar .uk-nav-primary > li > a:focus,
.uk-offcanvas-bar .uk-nav-primary > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-primary > li > a[aria-current="page"] {
color: var(--op-gelb);
}
.uk-offcanvas-bar .uk-nav-sub a { color: rgba(255,255,255,.75); font-weight: 600; }
.uk-offcanvas-bar .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-sub a:focus { color: var(--op-gelb); }
.uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a .uk-nav-parent-icon,
.uk-offcanvas-bar .uk-close,
.uk-offcanvas-bar .uk-offcanvas-close { color: #fff; }
.uk-offcanvas-bar .uk-offcanvas-close:hover { color: var(--op-gelb); }
/* ========================================================================= /* =========================================================================
6. TOPBAR 6. TOPBAR
========================================================================= */ ========================================================================= */
@@ -506,7 +525,7 @@ a:hover { color: var(--op-blau-dunkel); }
/* --- 15a. Split-View (Karte + Liste), Vorbild map.offener-prozess.de --- */ /* --- 15a. Split-View (Karte + Liste), Vorbild map.offener-prozess.de --- */
.op-split { display: flex; align-items: flex-start; } .op-split { display: flex; align-items: flex-start; }
.op-split__list { width: 50%; padding: 2rem clamp(1rem, 3vw, 2.5rem); } .op-split__list { box-sizing: border-box; width: 50%; padding: 2rem clamp(1rem, 3vw, 2.5rem); }
.op-split__map { .op-split__map {
width: 50%; width: 50%;
position: sticky; position: sticky;