/* ══════════════════════════════════════════════════════════════════════ MALERPLUS STARTMENÜ (2026-07-29, Neuaufbau) Kein neues Design — die App-Werte, aus der laufenden App gemessen: Glas rgba(255,255,255,.84) + blur(14px) saturate(1.6) (Topbar) Glasrand rgba(255,255,255,.45) (--glass-border) Schatten 0 24px 60px rgba(15,23,42,.22) (--shadow-strong) Karte radius 24px · Block 16px · Kachel 12px · klein 10px Kurve cubic-bezier(.16,1,.3,1) @ .18s / .22s (Kachel-Signatur) Typo 700 13.5px/16.2px, -.012em, #1e2430 (Kachel-Titel) Text #0c1526 (--mp-text) · #6b7f96 (--mp-muted) Marke #2bb0ff (--mp-blue) · #ff8a3d (--mp-orange) Die Icon-Flächen selbst werden zur Laufzeit von den Cockpit-Kacheln gespiegelt (mp-dock-startmenu.js) — hier stehen nur Maße und Zustände. ══════════════════════════════════════════════════════════════════════ */ :root { --dsm-ease: cubic-bezier(.16, 1, .3, 1); --dsm-glas: rgba(255, 255, 255, .84); --dsm-glas-rand: rgba(255, 255, 255, .45); --dsm-blur: blur(14px) saturate(1.6); --dsm-schatten: 0 24px 60px rgba(15, 23, 42, .22); --dsm-schatten-weich: 0 1px 2px rgba(15, 23, 42, .03); --dsm-schatten-heben: 0 18px 38px rgba(15, 23, 42, .18); --dsm-text: #0c1526; --dsm-titel: #1e2430; --dsm-muted: #6b7f96; --dsm-blau: #2bb0ff; --dsm-linie: rgba(15, 23, 42, .05); } /* Nicht-Favoriten aus der Dockleiste nehmen. Spezifität mit Absicht hoch: mp-dock-nav.css erzwingt display:flex !important bei gleicher Stärke. */ @media (min-width: 768px) { html body.mp-startmenu-on nav.bottom-nav .nav-btn.dash-launch-tile.mp-dsm-off, html body.mp-startmenu-on nav.bottom-nav .nav-launch-tile.mp-dsm-off { display: none !important; } } /* ── Startknopf: das Logo IST der Knopf ───────────────────────────────── */ /* GRÖSSE (30.07.2026, Marcel: „Mein Pinsel-Icon ist jetzt viel zu klein!!!!") Der Knopf war 44px mit einem 34px-Logo darin — das war stimmig, solange die Nachbarn im Dock blasse Tönungen waren. Seit dem Symbol-System sind die Nachbarkacheln 48×48 gefüllte Flächen (mp-dock-nav.css:155-158); daneben wirkte ein 34px-Bild auf transparentem Grund wie ein Fehler. Jetzt dieselbe Standfläche wie die Nachbarn: 48px Knopf, 48px Kachel, 40px Logo. Der Hintergrund bleibt transparent mit Glow — das ist Marcels Entscheidung vom 29.07. („kein Blau fürs Startmenü, lass es transparent mit Glow"), das Logo soll der Held des Knopfs bleiben. */ .mp-dsm-start { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; transition: transform .18s var(--dsm-ease); } .mp-dsm-start-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: transparent; transition: background .18s var(--dsm-ease), box-shadow .22s var(--dsm-ease); } .mp-dsm-start-logo { width: 40px; height: 40px; display: block; filter: drop-shadow(0 2px 4px rgba(2, 6, 23, .18)); transition: transform .18s var(--dsm-ease), filter .22s var(--dsm-ease); } .mp-dsm-start-fb { display: inline-flex; } .mp-dsm-start-fb svg { width: 34px; height: 34px; display: block; } /* Seitliches Dock: dort sind die Nachbarkacheln 40px (mp-dock-nav.css:354-359), also zieht der Startknopf mit — sonst kippt das Verhältnis andersherum. */ html[data-mp-dock-pos="left"] .mp-dsm-start, html[data-mp-dock-pos="right"] .mp-dsm-start, html[data-mp-dock-pos="left"] .mp-dsm-start-tile, html[data-mp-dock-pos="right"] .mp-dsm-start-tile { width: 40px; height: 40px; border-radius: 11px; } html[data-mp-dock-pos="left"] .mp-dsm-start-logo, html[data-mp-dock-pos="right"] .mp-dsm-start-logo { width: 33px; height: 33px; } .mp-dsm-start:hover .mp-dsm-start-tile { box-shadow: 0 0 18px -4px rgba(43, 176, 255, .45); } .mp-dsm-start:hover .mp-dsm-start-logo { transform: translateY(-1px) scale(1.05); filter: drop-shadow(0 4px 8px rgba(31, 158, 239, .34)); } .mp-dsm-start:active { transform: scale(.95); } /* Geöffnet: NUR Glow, keine blaue Füllung (2026-07-29, Marcel: „das Blau fürs Startmenü bei Aktivierung geht auch nicht — lass es transparent mit Glow"). Das Logo bleibt so der Held des Knopfs. */ .mp-dsm-start.is-open .mp-dsm-start-tile { background: transparent; box-shadow: 0 0 24px -2px rgba(43, 176, 255, .7), 0 0 0 1px rgba(43, 176, 255, .32); } .mp-dsm-start.is-open .mp-dsm-start-logo { filter: drop-shadow(0 3px 9px rgba(43, 176, 255, .55)); } .mp-dsm-start:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: 2px; } @media (min-width: 768px) { html body.mp-startmenu-on nav.bottom-nav .mp-dsm-start { position: relative; margin-right: 9px; } html body.mp-startmenu-on nav.bottom-nav .mp-dsm-start::after { content: ""; position: absolute; right: -6px; top: 9px; bottom: 9px; width: 1px; border-radius: 1px; background: linear-gradient(180deg, transparent, rgba(100, 116, 139, .24) 22%, rgba(100, 116, 139, .24) 78%, transparent); } } /* HANDY (2026-07-30, Marcel: „ich brauche genau das Dock auch in Mobilansicht mit Startmenü etc."): Startknopf und Panel gibt es jetzt überall. Das Panel wird auf schmalen Geräten ein Blatt über der ganzen Breite, damit Kacheln und Suche mit dem Finger bedienbar bleiben. */ @media (max-width: 767px) { html body.mp-startmenu-on nav.bottom-nav .nav-btn.dash-launch-tile.mp-dsm-off, html body.mp-startmenu-on nav.bottom-nav .nav-launch-tile.mp-dsm-off { display: none !important; } html body.mp-startmenu-on nav.bottom-nav .mp-dsm-start { margin-right: 8px; } .mp-dsm-start { width: 42px; height: 42px; } .mp-dsm-start-tile { width: 38px; height: 38px; } .mp-dsm-start-logo { width: 31px; height: 31px; } /* MP-20260904-039: die alte feste Breite/Position (`width:calc(100vw-16px)`, `left:8px`, `border-radius:22px`) entfällt — das Blatt ist jetzt echtes Vollbreiten-Bottom-Sheet, Breite/Position/Radius (28px) kommen von `.mps-overlay`/`.mps-container` in css/mp-sheet-engine.css. */ .mp-dsm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .mp-dsm-ic { width: 48px; height: 48px; } .mp-dsm-body { padding: 12px 12px 8px; } .mp-dsm-head { padding: 12px 12px 10px; } /* Marke bleibt auch mobil oben links — nur etwas kompakter. */ .mp-dsm-marke { margin-bottom: 9px; } .mp-dsm-marke-logo { width: 34px; height: 34px; } .mp-dsm-kbd { display: none; } /* Tastaturhinweis ist mobil sinnlos */ /* Nadel und Schnellaktion sind mobil dauerhaft sichtbar (kein Hover) */ .mp-dsm-pin, .mp-dsm-quick { opacity: .85; } } @media (max-width: 400px) { .mp-dsm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Panel: App-Drawer (MP-20260904-039, Ida Neumanns Spezifikation) ──── War bis 04.09.2026 ein eigenständig positionierter Flyout (fixed, 560px, per JS `ankern()` über dem Startknopf verankert). Jetzt echtes Bottom-Sheet: das Markup mountet als `.mps-overlay.mp-dsm-overlay > .mps-container.mps-glas#mpDockStartMenu` in `#sheet-layer` (core/mp-dock-startmenu.js), Breite/Position/Radius kommen von der Sheet-Engine (`css/mp-sheet-engine.css`), hier bleiben nur noch Farbe und die Auf/Zu-Bewegung. `ankern()` ist seither ungenutzt (bewusst nicht gelöscht, s. JS-Kommentar dort). */ #mpDockStartMenu { color: var(--dsm-text); } /* Auf/Zu: Standard-Sheet-Bewegung statt der alten Schrumpf-in-den-Knopf- Animation (dsmAuf/dsmZu, bis 04.09.2026 hier). 320ms Blatt, dieselbe Kurve wie das restliche Startmenü (--dsm-ease). Das eigentliche Ein-/Ausblenden (`display:none`↔`flex`) übernimmt der Vorfahre `.mp-dsm-overlay` weiter unten — `.mps-container` selbst ist laut Basisregel immer `display:flex`, unsichtbar ist das Panel also ausschließlich, weil sein Elternelement `display:none` trägt. Hier zählt nur `.is-shown` für den eigentlichen Transform-Übergang; `.is-open` allein hat auf DIESER Regel keine Wirkung, wird aber trotzdem gesetzt (core/mp-dock-startmenu.js) — als derselbe Zwei-Klassen-Kniff wie am Overlay: ein Reflow zwischen „eingefügt, noch unten" und „hochgefahren" ist nötig, sonst gäbe es keinen Ausgangszustand, von dem aus animiert werden könnte, und das Blatt spränge ohne Übergang auf. */ #mpDockStartMenu { transform: translateY(100%); transition: transform 320ms var(--dsm-ease); } #mpDockStartMenu.is-open.is-shown { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { #mpDockStartMenu { transition: none; } } /* ── Scrim/Overlay (MP-20260904-039 + MP-20260904-036) ──────────────────── `.mps-overlay` (css/mp-sheet-engine.css) ist die Basisregel für ALLE Blätter — hier nur der Startmenü-eigene Zusatz: standardmäßig ausgeblendet (das generische Sheet-Engine-JS baut/entfernt sein Overlay bei jedem Öffnen neu; unseres bleibt wie das Panel selbst dauerhaft im DOM und wird nur per Klasse ein-/ausgeblendet), eigene Timing-Kurve (280ms statt 360ms) und die obere Grenze an der Topbar. Kombinierter Selektor (0,2,0) mit Absicht — gewinnt unabhängig von der Ladereihenfolge gegen die Basisregel `.mps-overlay` (0,1,0), die in `mp-sheet-engine.css` HINTER dieser Datei eingebunden ist. */ .mps-overlay.mp-dsm-overlay { display: none; /* Obere Grenze: das Blatt legt sich NIE über die Topbar (aktive Bedienelemente dort). `inset` mit drei Werten setzt bottom automatisch auf 0 — der Scrim reicht damit lückenlos bis zur Geräteunterkante, inklusive der Fläche hinter der Dockleiste (MP-20260904-036, Marcels Blur-Beschwerde: „bei der dockleiste ist ein bisschen nicht mit Blur"). Sicherheitsnetz zusätzlich zur `max-height:92vh` der Sheet-Engine, falls beide je auseinanderlaufen (sehr niedriger Viewport, ausgefahrene Bildschirmtastatur). */ inset: var(--mp-topbar-h, 58px) 0 0; transition: background 280ms var(--dsm-ease), -webkit-backdrop-filter 280ms var(--dsm-ease), backdrop-filter 280ms var(--dsm-ease); } .mps-overlay.mp-dsm-overlay.is-open { display: flex; } .mps-overlay.mp-dsm-overlay .mps-container { max-height: 100%; } @media (prefers-reduced-motion: reduce) { .mps-overlay.mp-dsm-overlay { transition: none; } } /* Dockleiste: bleibt beim offenen Startmenü über Scrim UND Blatt (s. Z-Index-Block weiter unten) — ihr eigenes Glas (css/mp-dock-glas.css) bleibt dadurch scharf, während alles darunter (auch die Fläche HINTER der Leiste) durch den Scrim weichgezeichnet ist. */ /* Die eigene Lichtkante (früher hier als `#mpDockStartMenu::after`) entfällt seit MP-20260904-039 — `.mps-container.mps-glas::after` in `css/mp-sheet-engine.css` übernimmt denselben Zweck (Lichtreflex oben, 1:1 aus der Dockleiste gemessen) für den neuen Glas-Zustand. Zwei `::after`-Regeln auf demselben Element hätten sich nur überlagert. Kopf/Body/Handle bleiben über der Lichtkante — sie sitzt bei z-index:0. */ #mpDockStartMenu > * { position: relative; z-index: 2; } /* MP-20260904-051 — Startmenü-Glasoptik, drei Anläufe am selben Tag (Marcel entscheidet jeweils am lebenden Staging-Stand, nicht am Argument): 1) „das ist aber weiß, also so eine weiße Kachel. geil wäre, wenn das so Glasoptik wäre" → Fläche auf Glas umgestellt, aber jede Kachel, die FAVORITEN-Gruppe UND die Abschnitts-Überschriften bekamen eine eigene deckende Karte („Kärtchen"). 2) „du siehst ja selber, dass diese Icons irgendwie noch so einen weißen Rand haben" → IMMER NOCH zu viel Weiß, nur kleinteiliger. 3) (Endfassung, ersetzt 1+2 wo widersprüchlich) „der Name mit der E-Mail-Adresse, das kann eigentlich raus, der Betrieb, das kann weg. und dann kann das ganze Ding aus Glas sein … komplett durchgängig … keine weißen Flächen da drinne" — inkl. Suchfeld-Sonderfall („muss als solches erkennbar bleiben … aus Glas, nicht weiß"). Marcels Vorbild (Googles App-Drawer) ist eindeutig: die SYMBOLE liegen direkt auf dem Glas, kein Kärtchen, kein Rand, kein Schatten dahinter. Deckung trägt nur, was ohnehin schon deckend ist — die (von den Cockpit-Kacheln gespiegelte, s. Datei-Kopf) FARBIGE Symbolfläche und der Text. Endstand: Kopf (`.mp-dsm-head`) UND Körper (`.mp-dsm-body`): beide transparent. Das ganze Blatt ist eine einzige durchgehende `.mps-container.mps-glas`- Fläche (`css/mp-sheet-engine.css`), keine waagerechte Kante mehr. Kacheln (`.mp-dsm-item`): keine eigene Fläche mehr, weder Ruhe- noch Hoverzustand — reiner Behälter für Symbol + Text. Feedback bleibt über die Symbolfläche selbst (Lift+Leuchten, `css/mp-dsm-hub.css`) und einen Fokus-/Aktiv-Ring erhalten. FAVORITEN-Gruppenkarte + Abschnitts-Überschrift-Kärtchen (`css/mp-dsm-hub.css`, `.mp-dsm-sec[data-sec="fav"]`/`.mp-dsm-sec-t`): Fläche/Rand/Schatten entfernt, s. dort. Kontozeile (Firmenname + E-Mail unter der Suche, seit MP-20260904-039 Punkt 4): ERSATZLOS entfernt (Marcel: „das kann eigentlich raus … der Betrieb, das kann weg"), s. `core/mp-dock-startmenu.js` (Markup entfernt, `kontoZeile()` bleibt als No-op stehen — hat schon einen Existenz-Guard). Ida Neumanns damalige Begründung für die Kontozeile (MP-20260904-039): bei mehreren Mitarbeitern auf einem Gerät ist „wer bin ich hier" die erste Frage — bewusst festgehalten, falls das später vermisst wird; Marcels Entscheidung am 04.09. gilt. Suchfeld: bleibt als einziges Element eine EIGENE, kleinere Glas- fläche (`var(--dsm-glas-rand)` .45 + eigener Blur + `.65`-Kontur) statt fast-opak — ein Eingabefeld muss als solches erkennbar bleiben (Marcel), reine Transparenz hätte es unsichtbar gemacht. Textkontrast: Beschriftungen stehen jetzt direkt auf variablem Glas — dieselbe Fläche wie `.mps-container.mps-glas` (`css/mp-sheet- engine.css`), UNVERÄNDERT (.74/.58/.60), keine eigene, lokal angehobene Deckkraft. Ein erster Anlauf hatte hier probeweise eine lokal höhere Deckkraft für den Startmenü-Kopf eingezogen (`#mpDockStartMenu.mps-glas`, testweise bis .97/.91/.91), weil ein Kontrast-Messlauf gegen Staging an den Abschnitts-Köpfen wiederholt unter 4,5:1 lag (u. a. 3,64:1/3,79:1) — SELBST bei fast-opakem Weiß kaum besser. Der eigentliche Fehler steckte nicht im Glas, sondern im Messpunkt: `tools/test-startmenu-glasoptik-messung.js` nahm die Hintergrundprobe 4px VOR dem rechten Textrand statt dahinter — bei linksbündigem Text ohne Innenabstand lag das genau auf dem letzten Buchstaben, die „Hintergrund"-Probe enthielt also teils Tinte statt Glas und meldete einen Kontrast, der nie da war (Klasse „Prüfstand misst das Falsche"). Mit korrigiertem Messpunkt (außerhalb der Textbox, s. Skript) und der bereits vorhandenen dunkleren Schrift (`#000` statt `var(--mp-color-text-soft)`, s. `css/mp-dsm-hub.css`) reißt die UNVERÄNDERTE `.mps-glas`-Fläche die Grenze nirgends — real gemessen 9,05:1 bis 14,36:1 an allen geprüften Stellen (Abschnitts-Köpfe UND Kachel-Beschriftungen), deutlich über 4,5:1. Die lokal angehobene Deckkraft war deshalb NICHT nötig und ist wieder entfernt — das Blatt trägt exakt dieselbe Glasfläche wie jedes andere `.mps-glas`-Blatt der App, keine Sonderbehandlung. Der Textschatten an den Abschnitts-Köpfen (`css/mp-dsm-hub.css`) bleibt trotzdem stehen — reale Zusatzhilfe für die Augen, auch wenn er für die 4,5:1-Zahl selbst nicht nötig war. */ /* ── Kopf mit Suche ───────────────────────────────────────────────────── */ .mp-dsm-head { flex: 0 0 auto; padding: 14px 16px 12px; /* MP-20260904-051 (Nachbesserung): transparent — kein eigener Kopf-Ton mehr, das Blatt ist eine durchgehende Glasfläche (s. Begründung oben). Suchfeld/Kontozeile bleiben über ihre eigenen, kleineren Flächen bzw. Farben lesbar. */ background: transparent; border-bottom: 1px solid var(--dsm-linie); } /* ── Marke oben links (2026-07-30, Endstand) ────────────────────────────── Weg dorthin, in Marcels Worten: „Logo gut sichtbar links oben" → Pinsel + Schriftzug „MalerPlus muss schwarz sein, dieser Pinsel kommt da nicht rein" → das war der matschige 64px-Pinsel; Schriftzug wurde schwarz „Da fehlt noch mein Logo neben der Wortmarke" → Logo zurück, 256px-Asset „Das Wort weg und den Pinsel ein bisschen größer, ist präsenter" → nur noch das Logo, 38px Das 256er-Asset ist Pflicht: das 64px-Bild zermatscht bei dieser Größe den grauen Griff und das Plus zu einem orange-blauen Fleck — genau daran hat Marcel „das ist nicht mein Logo" erkannt. Kein Kasten, kein Hintergrund, nur ein Hauch Tiefe. */ .mp-dsm-marke { display: flex; align-items: center; margin: 0 2px 11px; min-width: 0; } .mp-dsm-marke-logo { flex: 0 0 auto; width: 38px; height: 38px; display: block; filter: drop-shadow(0 3px 7px rgba(2, 6, 23, .2)); } .mp-dsm-suchbox { position: relative; display: flex; align-items: center; } .mp-dsm-lupe { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--dsm-muted); pointer-events: none; } .mp-dsm-suche { width: 100%; height: 42px; padding: 0 62px 0 40px; /* MP-20260904-051 (2. Nachbesserung, Marcel: „Eingabefeld muss als solches erkennbar bleiben ... mach es aus Glas, nicht weiß — leichte Aufhellung plus Kontur genügt"): Fläche von `.9` (fast opak) auf `var(--dsm-glas-rand)` (.45 Weiß, derselbe Rand-Ton wie das Schnellaktionen-Popover) reduziert, dazu ein eigener, deutlicherer Rand (`.65`, derselbe Bordertоn wie `.mps-container.mps-glas`) als Kontur — das Feld bleibt dadurch klar als Eingabefläche erkennbar, ohne wieder eine deckend-weiße Kachel zu sein. Eigener Blur (`var(--dsm-blur)`) macht daraus eine zweite, kleinere Glasscheibe auf der großen Blattfläche (wie ein Spotlight-Suchfeld). */ border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; /* Hausregel 30.07.: keine runden Pillen */ background: var(--dsm-glas-rand); -webkit-backdrop-filter: var(--dsm-blur); backdrop-filter: var(--dsm-blur); font-weight: 500; font-size: 13.5px; line-height: 1; color: var(--dsm-text); outline: none; box-shadow: var(--dsm-schatten-weich); transition: border-color .18s var(--dsm-ease), box-shadow .22s var(--dsm-ease), background .18s var(--dsm-ease); } /* Platzhalter/Kbd-Hinweis gedämpft, aber jetzt auf Glas statt auf fast- weiß — dunkler als vorher (`#9aa8bb` → `--dsm-muted`, s. Messung), damit „Modul suchen …" nicht mit dem helleren Glas verschwimmt. */ .mp-dsm-suche::placeholder { color: var(--dsm-muted); } .mp-dsm-suche:focus { border-color: rgba(43, 176, 255, .6); background: rgba(255, 255, 255, .58); box-shadow: 0 0 0 3px rgba(43, 176, 255, .15), var(--dsm-schatten-weich); } .mp-dsm-kbd { position: absolute; right: 13px; font-weight: 600; font-size: 10px; line-height: 1; color: #9aa8bb; letter-spacing: .04em; padding: 4px 7px; border-radius: 7px; background: rgba(15, 23, 42, .04); pointer-events: none; } /* Kontozeile im Kopf, unter der Suche (MP-20260904-039, Punkt 4). War in der Fußzeile (`.mp-dsm-foot`, jetzt entfernt) — die Klasse `.mp-dsm-konto` selbst und ihre Attribute bleiben unverändert, nur die Position und die Breite (vorher `flex:1 1 auto` neben einem Zahnrad-Knopf, jetzt allein auf voller Breite). Der Topbar-Account-Knopf zeigt nur zwei Initialen und ersetzt diese Zeile nicht (Ida Neumann, `index.html:2813-2879`). */ .mp-dsm-head .mp-dsm-konto { width: 100%; margin-top: 10px; } /* ── Körper + Abschnitte ──────────────────────────────────────────────── */ .mp-dsm-body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: 14px 16px 10px; overscroll-behavior: contain; scrollbar-width: thin; /* MP-20260904-051 (Nachbesserung): transparent — zeigt das Panel-Glas (`.mps-container.mps-glas`, css/mp-sheet-engine.css) durchgehend mit dem jetzt ebenfalls transparenten Kopf. Die Kacheln selbst tragen KEINE eigene Fläche mehr (s. `.mp-dsm-item` weiter unten) — Marcels Vorbild ist Symbol+Text direkt auf Glas, kein Kärtchen darunter. */ background: transparent; } .mp-dsm-body::-webkit-scrollbar { width: 8px; } .mp-dsm-body::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .26); border-radius: 99px; } /* MP-20260905-010 (Jonas Falk, Marcel 05.09. 01:40: „jetzt ist das Dock wieder im Weg auf Handy"): Bei offenem Startmenü wird die Dockleiste ABSICHTLICH wieder voll eingeblendet (Zeile ~606-627 unten, Drop-Ziel zum Anheften, MP-20260904-039 „Dock bleibt scharf") — z-index 1305, also ÜBER dem Blatt. Der statische Boden-Abstand von `.mp-dsm-body` (10px, oben) reicht bei Weitem nicht an die 72px hohe, wieder eingeblendete Leiste heran: die zuletzt angehängte Reihe (Tube/„Was ist neu") lag dadurch bereits VOR der heutigen Färbung fast vollständig unter der Leiste — nur unauffällig, solange diese Kacheln transparent waren (MP-20260905-008 hat sie eingefärbt und damit sichtbar gemacht, nicht die Verdeckung selbst verursacht: Größe/Position dieser Zeile und der Dockleiste sind durch MP-20260905-008 nicht verändert worden, geprüft per `getBoundingClientRect()` gegen den unveränderten Stand dieser Datei). Fix: NUR während `body.mp-startmenu-open` bekommt der Drawer-Körper genug Bodenabstand, um die wieder eingeblendete Leiste plus Sicherheitsabstand zu unterlaufen — Zustand wie vor der Dock- Wiedereinblendung, letzte Reihe frei erreichbar. */ body.mp-startmenu-open .mp-dsm-body { padding-bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px)) !important; } .mp-dsm-sec + .mp-dsm-sec { margin-top: 15px; } .mp-dsm-sec[hidden] { display: none; } .mp-dsm-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 9px; } .mp-dsm-sec-t { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; line-height: 1; letter-spacing: -.01em; color: var(--dsm-titel); } /* MP-20260904-051 (Nachbesserung): die `.62`-Kärtchen hinter den Abschnitts-Überschriften aus der ersten Fassung sind wieder raus — Marcel wollte auch dort kein Kärtchen. Text direkt auf Glas, `is-btn` behält nur sein Hover-/Fokus-Feedback (kein Ruhezustands-Ton mehr). */ .mp-dsm-sec-t.is-btn { border: 0; background: transparent; padding: 4px 6px; margin-left: -6px; border-radius: 9px; cursor: pointer; color: var(--dsm-titel); transition: background .16s var(--dsm-ease); } .mp-dsm-sec-t.is-btn:hover { background: rgba(15, 23, 42, .045); } .mp-dsm-sec-t.is-btn:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: 1px; } .mp-dsm-chev { width: 14px; height: 14px; transition: transform .22s var(--dsm-ease); } .mp-dsm-sec.is-zu .mp-dsm-chev { transform: rotate(-90deg); } .mp-dsm-anz { margin-left: 6px; /* sonst klebte die Zahl am Wort ("Arbeitsfenster4") */ font-weight: 700; font-size: 10px; line-height: 1; color: var(--dsm-muted); padding: 3px 6px; border-radius: 99px; background: rgba(15, 23, 42, .05); } .mp-dsm-sec-a { font-weight: 500; font-size: 11px; line-height: 1.3; color: var(--dsm-muted); text-align: right; } .mp-dsm-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; transition: opacity .2s var(--dsm-ease); } .mp-dsm-sec.is-zu .mp-dsm-grid { display: none; } .mp-dsm-cell { position: relative; min-width: 0; } .mp-dsm-cell[hidden] { display: none; } /* ── Kachel: Maße/Verhalten wie im Cockpit ────────────────────────────── */ .mp-dsm-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 3px 10px; border: 1px solid transparent; border-radius: 12px; /* MP-20260904-051 (Nachbesserung): KEINE eigene Fläche mehr — Marcel nach Ansicht des ersten Standes: „diese Icons haben noch so einen weißen Rand". Die Kachel ist reiner Behälter für Symbol + Text, das Sichtbare bleibt Glas rundherum. Deckung kommt ausschließlich von der Symbolfläche selbst (von den Cockpit-Kacheln gespiegelt, s. Datei- Kopf) und vom Text. Sichtbares Feedback bei Hover/Fokus/Aktiv bleibt erhalten (Symbol-Lift in css/mp-dsm-hub.css, Fokusring + Aktiv-Ring unten) — nur die Fläche der Kachel selbst ist weg. */ background: transparent; color: var(--dsm-titel); font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: -.012em; text-align: center; cursor: pointer; transition: transform .18s var(--dsm-ease), box-shadow .22s var(--dsm-ease), border-color .18s var(--dsm-ease), background .18s var(--dsm-ease); } .mp-dsm-item.is-aktiv { box-shadow: 0 0 0 2px rgba(43, 176, 255, .45); } .mp-dsm-item:active { transform: scale(.97); } .mp-dsm-item:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: 1px; } /* ── „demnächst"-Kachel (2026-07-30) ────────────────────────────────────── Marcel wollte das Website-Studio-Icon schon im Startmenü sehen, mit „demnächst" als Info darunter. Sie ist deaktiviert, darf aber nicht wie ein Fehler aussehen: also nicht ausgegraut wie ein gesperrtes Modul, sondern ruhig-freundlich mit Markenblau-Hauch und lesbarem Hinweis. Deshalb steht sie VOR der allgemeinen [disabled]-Regel und hebt deren Deckkraft gezielt wieder an. */ .mp-dsm-item.is-bald[disabled] { opacity: 1; cursor: default; } /* 30.07.2026: „Website Studio" war die letzte blasse Kachel im Startmenü. Alle Nachbarn sind gefüllt (sie spiegeln die Cockpit-Kachel), diese hier hat keine Quelle zum Spiegeln und behielt deshalb ihren alten Tönungs-Verlauf. Jetzt gefüllt wie der Rest — bewusst im Markenblau statt in einer Modulfarbe, weil es noch kein Modul ist. Dass es erst kommt, sagt die Beschriftung „DEMNÄCHST", nicht eine blassere Kachel. */ .mp-dsm-item.is-bald .mp-dsm-ic--bald { color: #ffffff; background: linear-gradient(180deg, #4cbcff 0%, #2bb0ff 100%); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(0, 0, 0, .10), 0 2px 4px -1px rgba(43, 176, 255, .40), 0 7px 14px -7px rgba(43, 176, 255, .60); } .mp-dsm-item.is-bald .mp-dsm-ic--bald svg { stroke-width: 2.2; color: #ffffff; } .mp-dsm-item.is-bald .mp-dsm-ic--bald svg { width: 26px; height: 26px; } .mp-dsm-item.is-bald .mp-dsm-lb { color: var(--dsm-muted); } .mp-dsm-item.is-bald .mp-dsm-lb small { color: #1f9eef; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } html.dark .mp-dsm-item.is-bald .mp-dsm-ic--bald { background: linear-gradient(135deg, rgba(43, 176, 255, .22), rgba(43, 176, 255, .08)); border-color: rgba(43, 176, 255, .3); box-shadow: none; color: #7fd0ff; } html.dark .mp-dsm-item.is-bald .mp-dsm-lb small { color: #7fd0ff; } .mp-dsm-item[disabled] { opacity: .42; cursor: default; } .mp-dsm-item[disabled]:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; } /* Fläche + Innenlicht kommen zur Laufzeit von der Cockpit-Kachel. */ .mp-dsm-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 13px; background: linear-gradient(135deg, rgba(148, 163, 184, .14), rgba(148, 163, 184, .06)); border: .8px solid rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -8px 14px rgba(11, 15, 25, .07); transition: transform .18s var(--dsm-ease); } .mp-dsm-item:hover .mp-dsm-ic { transform: translateY(-2px) scale(1.05); } .mp-dsm-ic .dash-launch-tile-icon { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; color: inherit; /* Farbe kommt vom gespiegelten Rahmen bzw. per Inline-Stil */ } /* Der Glyph nimmt IMMER die Modulfarbe an — ohne das erbte er beim Klonen das dunkle Standardgrau (Fehlerbild 29.07.). */ .mp-dsm-ic svg { stroke: currentColor; } .mp-dsm-ic .dash-launch-tile-icon svg { color: inherit; } .mp-dsm-ic--fw { background: linear-gradient(135deg, rgba(43, 176, 255, .16), rgba(43, 176, 255, .07)); color: #1684d6; } .mp-dsm-ic--fw svg { width: 22px; height: 22px; } /* MalerPlus Tube (MP-20260822-009) — Farbwerte 1:1 aus dem Fenster-Kopf-Chip (mp-dlrcat-chip-Muster), damit Kachel und Fenster-Chip dieselbe Bildsprache benutzen. */ .mp-dsm-ic--tube { background: rgba(43, 176, 255, .12); color: #0a7cbe; } .mp-dsm-ic--tube svg { width: 22px; height: 22px; } html.dark .mp-dsm-ic--tube, [data-theme='dark'] .mp-dsm-ic--tube { background: rgba(43, 176, 255, .20); color: #7fd0ff; } /* „Was ist neu" — MP-20260904-039 (Punkt 3): der Knopf aus der Fußzeile (`core/mp-dock-startmenu.js`, unverändertes Markup: Icon-SVG, Text, `data-mp-updates`, `.mp-dsm-neu-punkt`) steht jetzt als Kachel im Raster. Gleiche Farbwerte wie die Tube-Kachel — beides „System"-Nutzen. `.mp-dsm-neu-punkt` bleibt DIESELBE Klasse (core/mp-updates.js sucht `[data-mp-updates] .mp-dsm-neu-punkt`, nicht nach Position, s. L-2026-09-04-Z) — hier nur zur Ecke des Icons statt in die Zeile umgesetzt (die alte `.mp-dsm-neu`-Fußzeilenoptik in css/mp-updates.css bleibt unbenutzt stehen, betrifft ausschließlich diesen einen Knopf). */ .mp-dsm-ic--neu { background: rgba(43, 176, 255, .12); color: #0a7cbe; position: relative; } .mp-dsm-ic--neu svg { width: 22px; height: 22px; } html.dark .mp-dsm-ic--neu, [data-theme='dark'] .mp-dsm-ic--neu { background: rgba(43, 176, 255, .20); color: #7fd0ff; } .mp-dsm-ic--neu .mp-dsm-neu-punkt { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px #fff; } html.dark .mp-dsm-ic--neu .mp-dsm-neu-punkt, [data-theme='dark'] .mp-dsm-ic--neu .mp-dsm-neu-punkt { box-shadow: 0 0 0 2px rgba(17, 24, 39, .92); } .mp-dsm-lb { display: block; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } .mp-dsm-lb small { display: block; margin-top: 2px; font-weight: 500; font-size: 9.5px; line-height: 1.3; color: var(--dsm-muted); } /* ── Kleingedrucktes je Modul (MP-20260930-029) ─────────────────────────── „Sprache der App": Symbol + fetter Titel + graues Kleingedrucktes. Werte NICHT erfunden, 1:1 vom Arbeitsfenster-Menue (#mpLauncherMenu, gemessen in docs/ai-company/qa/evidence/MP-20260930-026/vorbild-soll.json): 11px / 600 / Zeilenhoehe 15.4px, Abstand Titel→Klein 1px, hell rgb(71,85,105) bei Deckkraft .58, dunkel rgb(168,176,187) bei .58. .mp-dsm-tx haelt Titel + Klein zusammen, damit der Kachel-Abstand (gap 6–10px zwischen Symbol und Text) nicht zwischen die beiden Zeilen faellt. Umbruch an Wortgrenzen, hoechstens drei Zeilen (die Kachel ist schmal; das Vorbild-Menue ist eine breite Zeile). Kein Silbentrennen, kein Abschneiden mitten im Wort ausser als letzte Sicherung bei sehr langen Woertern. */ .mp-dsm-tx { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; } .mp-dsm-sm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 100%; padding: 0 2px; box-sizing: border-box; font-size: 11px; font-weight: 600; line-height: 15.4px; letter-spacing: 0; text-align: center; -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; color: rgb(71, 85, 105); opacity: .58; } /* !important: dark-mode.css (html.dark span:not(...) { color: inherit }) ueberstimmt sonst die Farbe — Lena B-2, L-2026-09-30-LB-2. */ html.dark .mp-dsm-sm { color: rgb(168, 176, 187) !important; opacity: .58; } /* ── Stern + Schnellaktions-Knopf ─────────────────────────────────────── */ .mp-dsm-pin, .mp-dsm-quick { position: absolute; top: 1px; width: 23px; height: 23px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #c3cdda; cursor: pointer; opacity: 0; transition: opacity .16s var(--dsm-ease), color .16s var(--dsm-ease), background .16s var(--dsm-ease), transform .16s var(--dsm-ease); z-index: 2; } .mp-dsm-pin { right: 1px; } .mp-dsm-quick { left: 1px; } .mp-dsm-pin svg, .mp-dsm-quick svg { width: 13px; height: 13px; display: block; } .mp-dsm-cell:hover .mp-dsm-pin, .mp-dsm-cell:focus-within .mp-dsm-pin, .mp-dsm-cell:hover .mp-dsm-quick, .mp-dsm-cell:focus-within .mp-dsm-quick, .mp-dsm-pin.is-on { opacity: 1; } .mp-dsm-pin:hover, .mp-dsm-quick:hover { background: rgba(15, 23, 42, .06); color: var(--dsm-muted); transform: scale(1.1); } .mp-dsm-pin.is-on { color: var(--dsm-blau); } .mp-dsm-pin:focus-visible, .mp-dsm-quick:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: 1px; opacity: 1; } @media (hover: none) and (pointer: coarse) { .mp-dsm-pin, .mp-dsm-quick { opacity: .8; } } /* ── Schnellaktionen-Popover ──────────────────────────────────────────── */ .mp-dsm-schnell { position: absolute; top: calc(100% - 6px); left: 4px; z-index: 6; min-width: 148px; padding: 5px; background: rgba(var(--mp-flaeche-rgb), .96); -webkit-backdrop-filter: var(--dsm-blur); backdrop-filter: var(--dsm-blur); border: 1px solid var(--dsm-glas-rand); border-radius: 14px; box-shadow: var(--dsm-schatten-heben); opacity: 0; transform: translateY(-4px) scale(.97); transition: opacity .16s var(--dsm-ease), transform .2s var(--dsm-ease); } .mp-dsm-schnell.is-open { opacity: 1; transform: translateY(0) scale(1); } .mp-dsm-schnell.is-links { left: auto; right: 4px; } .mp-dsm-schnell-b { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; font-weight: 650; font-size: 12px; line-height: 1.2; color: var(--dsm-titel); text-align: left; cursor: pointer; transition: background .14s var(--dsm-ease), color .14s var(--dsm-ease); } .mp-dsm-schnell-b svg { width: 14px; height: 14px; color: var(--dsm-blau); flex: 0 0 auto; } .mp-dsm-schnell-b:hover { background: rgba(43, 176, 255, .12); } .mp-dsm-schnell-b:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: -2px; } /* ── Drag & Drop ──────────────────────────────────────────────────────── */ .mp-dsm-cell[data-sortierbar] .mp-dsm-item { touch-action: manipulation; } /* Sobald „Bearbeiten" aktiv ist, gehört die Geste der Kachel. Dadurch kann Safari/iPad den Pointer nicht mehr als Seitenscroll übernehmen. */ #mpDockStartMenu.is-anordnen .mp-dsm-cell[data-sortierbar] .mp-dsm-item { touch-action: none !important; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .mp-dsm-cell.is-dragging { opacity: .28; } .mp-dsm-cell.is-dragging .mp-dsm-item { box-shadow: none; } body.mp-dsm-dragging { cursor: grabbing; } body.mp-dsm-dragging .mp-dsm-item { cursor: grabbing; } /* Startmenü offen = Dock ist sichtbares Drop-Ziel. Diese Regel überstimmt ausschließlich in diesem Zustand den Dashboard-Reveal `.hidden-nav`. MP-20260904-039 (Punkt 7): war 1297, also UNTER der Sheet-Engine (1300) — das Blatt hätte den Dock beim Ziehen verdeckt, Drag-in-Dock wäre tot gewesen. Jetzt 1305, über Scrim (1300) UND Blatt (1300). Die vier Werte hier und unten (Dock/Geist/Marke/Dockgeist) behalten ihre ursprüngliche relative Reihenfolge (vorher 1297/1299/1300/1301), nur pauschal +8, damit alle vier weiterhin über dem jetzt höheren Blatt liegen. */ html body.mp-startmenu-open nav.bottom-nav.hidden-nav { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; z-index: 1305 !important; } html body.mp-startmenu-open nav.bottom-nav.hidden-nav > .mp-dsm-start, html body.mp-startmenu-open nav.bottom-nav.hidden-nav > .nav-launch-tile:not(.mp-dsm-off), html body.mp-startmenu-open nav.bottom-nav.hidden-nav > [data-mp-dock-extra] { pointer-events: auto !important; visibility: visible !important; } .mp-dsm-ghost { position: fixed !important; top: 0 !important; left: 0 !important; z-index: 100010 !important; pointer-events: none !important; border-radius: 14px !important; background: rgba(var(--mp-flaeche-rgb), .94); box-shadow: var(--dsm-schatten-heben) !important; will-change: transform; } .mp-dsm-ghost .mp-dsm-pin, .mp-dsm-ghost .mp-dsm-quick { display: none; } /* Direkte Sortierung in der Dockleiste: das Original bleibt als matter Platzhalter stehen, eine hardwarebeschleunigte Kopie folgt dem Finger. MP-20261004-002: z-index 100010 !important garantiert, dass das gezogene Icon vollständig VOR der Dockleiste (z-index: 3000 / 4700 mit Frosted-Glass-Backdrop) schwebt und nicht dahinter durchs Milchglas schimmert. */ .mp-dsm-dockghost { position: fixed !important; top: 0 !important; left: 0 !important; z-index: 100010 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; pointer-events: none !important; opacity: .98; overflow: visible !important; border-radius: 14px !important; box-shadow: 0 18px 38px -8px rgba(15, 23, 42, .48), 0 0 0 1px rgba(255, 255, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .55) !important; will-change: transform; } .mp-dsm-dockghost .dash-launch-tile-text { display: none !important; } .mp-dsm-dockghost .dash-launch-tile-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: inherit !important; } .mp-dsm-dockghost.is-loesen { opacity: .58; box-shadow: 0 0 0 3px rgba(239, 68, 68, .48), 0 16px 34px -12px rgba(239, 68, 68, .6) !important; } nav.bottom-nav .nav-launch-tile.is-dock-dragging { opacity: .24 !important; } body.mp-dsm-dragging, body.mp-dsm-dragging * { cursor: grabbing !important; } @keyframes mpDockWackel { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-1px); } } body.mp-dock-anordnen nav.bottom-nav .nav-launch-tile:not(.mp-dsm-off):not(.mp-dtb-ki):not([data-nav="view-dashboard"]) { animation: mpDockWackel .3s ease-in-out infinite; touch-action: none !important; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } body.mp-dock-anordnen nav.bottom-nav .nav-launch-tile:nth-of-type(2n) { animation-delay: -.1s; } body.mp-dock-anordnen nav.bottom-nav .nav-launch-tile:nth-of-type(3n) { animation-delay: -.2s; } /* ── ZIEHEN BIS IN DIE LEISTE (31.07.2026 / MP-20261004-002) ───────────── Marcel: „Ich sollte meine Icons einfach per Drag & Drop in die Dockleiste schicken können oder rausschieben." Die Einfügemarke hängt an , NICHT in nav.bottom-nav: fitPlate() misst dort alle Knöpfe und würde die Glasplatte um die Marke mitwachsen lassen — die Leiste würde beim Ziehen zucken. MP-20261004-002: z-index 100005 !important platziert die Marke direkt über der Leiste (4700) und unter dem Ghost (100010). */ .mp-dsm-dockmarke { position: fixed !important; display: none; z-index: 100005 !important; /* über der Leiste, unter dem Geist */ pointer-events: none !important; border-radius: 2px !important; background: linear-gradient(180deg, #2bb0ff, #1a86c9) !important; box-shadow: 0 0 0 3px rgba(43, 176, 255, .25), 0 2px 10px rgba(26, 134, 201, .6) !important; } /* Die Leiste sagt „hier kannst du loslassen" — über die Umrandung, nicht über eine Bewegung: die Leiste selbst darf beim Ziehen nicht wandern. */ body.mp-dsm-ueber-dock nav.bottom-nav { box-shadow: 0 0 0 2px rgba(43, 176, 255, .55), 0 10px 30px -12px rgba(26, 134, 201, .5) !important; } /* Ausserhalb des Favoriten-Rasters losgelassen = abheften. Der Geist zeigt das vorher an, damit niemand aus Versehen abheftet. */ .mp-dsm-ghost.is-loesen { opacity: .55; } .mp-dsm-leer { padding: 20px 6px 10px; text-align: center; font-weight: 500; font-size: 12.5px; line-height: 1.5; color: var(--dsm-muted); } /* ── Fußzeile ─────────────────────────────────────────────────────────── */ .mp-dsm-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 10px; background: rgb(var(--mp-grund-rgb)); /* --mp-bg der App, flach */ border-top: 1px solid var(--dsm-linie); } /* Betriebszeile: Logo/Initialen links, zwei Zeilen Text daneben. flex-direction ausdrücklich row — die Kachel-Regeln der Module setzen column, das ließ Avatar und Text vorher übereinander stehen. */ .mp-dsm-konto { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px; min-width: 0; padding: 6px 14px 6px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; transition: background .16s var(--dsm-ease), border-color .16s var(--dsm-ease), box-shadow .22s var(--dsm-ease); } .mp-dsm-konto:hover { background: rgb(var(--mp-flaeche-rgb)); border-color: rgba(15, 23, 42, .07); box-shadow: var(--dsm-schatten-weich); } .mp-dsm-konto:focus-visible { outline: 2px solid var(--dsm-blau); outline-offset: 1px; } .mp-dsm-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #39b6ff, #1684d6); color: #fff; font-weight: 800; font-size: 12px; line-height: 1; overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .42), 0 2px 6px -2px rgba(31, 158, 239, .5); } /* Echtes Firmenlogo: heller Grund, damit auch dunkle Logos tragen */ .mp-dsm-avatar.has-logo { background: rgb(var(--mp-flaeche-rgb)); border: 1px solid rgba(15, 23, 42, .08); box-shadow: var(--dsm-schatten-weich); } .mp-dsm-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; } .mp-dsm-konto-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mp-dsm-konto-txt b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 12.5px; line-height: 1.25; letter-spacing: -.012em; color: var(--dsm-titel); } .mp-dsm-konto-txt small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 10.5px; line-height: 1.25; color: var(--dsm-muted); } .mp-dsm-foot-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--dsm-muted); cursor: pointer; transition: background .16s var(--dsm-ease), color .16s var(--dsm-ease); } .mp-dsm-foot-btn svg { width: 17px; height: 17px; } .mp-dsm-foot-btn:hover { background: rgba(15, 23, 42, .06); color: rgb(var(--mp-t2-334155)); } /* ── Nachsetzen gegen globale Formular-/Button-Regeln (gemessen) ──────── */ #mpDockStartMenu .mp-dsm-suche { padding: 0 62px 0 40px !important; height: 42px !important; font-size: 13.5px !important; line-height: 1 !important; border-radius: 12px !important; } /* MP-20260904-039: `max-width:calc(100% - 46px)` liess bis 04.09.2026 bewusst Platz für den benachbarten Zahnrad-Knopf (`.mp-dsm-foot-btn`, 34px) frei — die Kontozeile steht jetzt allein im Kopf, also volle Breite statt Lücke. */ #mpDockStartMenu .mp-dsm-konto { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: flex-start !important; } #mpDockStartMenu .mp-dsm-konto-txt { flex: 1 1 auto !important; min-width: 0 !important; text-align: left; } #mpDockStartMenu .mp-dsm-avatar { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; } #mpDockStartMenu .mp-dsm-foot-btn { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; } /* ── Responsiv ────────────────────────────────────────────────────────── */ /* MP-20260904-039: die feste `#mpDockStartMenu{width:...}` an diesen beiden Stufen ist entfallen — sie hätte gegen die Breite der Sheet-Engine (560px/620px zentrierter Dialog ab 768px, s. css/mp-sheet-engine.css) gearbeitet, per ID-Selektor sogar gewonnen und wäre ohne das jetzt entfernte `ankern()` an keiner sinnvollen Position mehr gelandet. Die Spaltenzahl der Kacheln bleibt unverändert nützlich. */ @media (max-width: 1100px) { .mp-dsm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 900px) { .mp-dsm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mp-dsm-ic { width: 50px; height: 50px; } } @media (max-width: 820px) { .mp-dsm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Bewegung reduzieren ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #mpDockStartMenu.is-open, #mpDockStartMenu.is-out { animation: none !important; } .mp-dsm-item, .mp-dsm-ic, .mp-dsm-pin, .mp-dsm-quick, .mp-dsm-start, .mp-dsm-start-tile, .mp-dsm-start-logo, .mp-dsm-chev, .mp-dsm-schnell { transition: none !important; } .mp-dsm-ghost, .mp-dsm-dockghost { display: none !important; } body.mp-dock-anordnen nav.bottom-nav .nav-launch-tile { animation: none !important; } } /* MP-20260930-050 (Marcel 30.09., Desktop-Screenshot: „dieses Startmenü hätte ich gerne ein bisschen weißer, den Hintergrund … passt irgendwie nicht ganz so zu unserer App"): Das Blatt bleibt EINE durchgehende Glasfläche ohne Kärtchen (Entscheidung 04.09., MP-20260904-051) — nur die Deckkraft steigt von .74/.58/.60 auf .92/.86/.88, lokal fürs Startmenü. Über dem weichgezeichneten Dashboard wirkte die alte Fläche grau statt weiß. Weichzeichner, Lichtkante und Schatten kommen unverändert aus `css/mp-sheet-engine.css`. Nur hell; der Dunkelmodus hat unten seine eigene Fläche. */ html:not(.dark) #mpDockStartMenu.mps-glas { background: linear-gradient( 180deg, rgba(var(--mp-flaeche-rgb), .92) 0%, rgba(var(--mp-flaeche-rgb), .86) 46%, rgba(var(--mp-f2-f7f9fc), .88) 100% ); } /* ── Dark-Mode (App schaltet html.dark) ───────────────────────────────── */ html.dark #mpDockStartMenu { background: rgba(15, 23, 42, .86); border-color: rgba(148, 163, 184, .2); box-shadow: 0 28px 68px rgba(0, 0, 0, .52); color: #e8eef7; } html.dark #mpDockStartMenu::before { background: radial-gradient(130% 66% at 50% -8%, rgba(43, 176, 255, .16) 0%, rgba(43, 176, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 30%); } html.dark #mpDockStartMenu::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } html.dark .mp-dsm-head { background: linear-gradient(180deg, rgba(30, 41, 59, .6), rgba(15, 23, 42, .3)); border-bottom-color: rgba(148, 163, 184, .16); } html.dark .mp-dsm-suche { background: rgba(30, 41, 59, .9); border-color: rgba(148, 163, 184, .26); color: #e8eef7; } html.dark .mp-dsm-kbd { background: rgba(148, 163, 184, .16); color: #94a3b8; } html.dark .mp-dsm-sec-t, html.dark .mp-dsm-item { color: #e2e8f0; } /* MP-20260904-051: die neuen hellen `.9`/`.62`-Ruhezustandsflächen (s. oben) sind NUR für Hell gedacht — ohne dieses Zurücksetzen würden sie unverändert in den Dunkelmodus durchschlagen (keine vorherige Dunkel-Fassung dieser Regeln existierte, s. `L-2026-09-04` Prüfhinweis im Auftrag: „Datei hat kein Dark-Mode-Gegenstück"). Ruhezustand bleibt in Dunkel wie zuvor unsichtbar, nur Hover/Aktiv (Zeile darunter, unverändert) bekommt eine Fläche. */ html.dark .mp-dsm-item, html.dark .mp-dsm-sec-t, html.dark .mp-dsm-sec-t.is-btn { background: transparent; } html.dark .mp-dsm-sec-t.is-btn:hover { background: rgba(148, 163, 184, .14); } html.dark .mp-dsm-anz { background: rgba(148, 163, 184, .16); color: #94a3b8; } html.dark .mp-dsm-item:hover, html.dark .mp-dsm-item.is-aktiv { background: rgba(51, 65, 85, .55); border-color: rgba(148, 163, 184, .2); } html.dark .mp-dsm-schnell { background: rgba(23, 33, 51, .97); border-color: rgba(148, 163, 184, .22); } html.dark .mp-dsm-schnell-b { color: #e2e8f0; } html.dark .mp-dsm-foot { background: linear-gradient(180deg, rgba(15, 23, 42, .4), rgba(12, 18, 30, .8)); border-top-color: rgba(148, 163, 184, .16); } html.dark .mp-dsm-konto-txt { color: #cbd5e1; } html.dark .mp-dsm-ghost { background: rgba(23, 33, 51, .96); } /* ===================================================================== AUFPIMPEN — REDESIGN-RUNDE 30.07.2026 Marcel: „Vielleicht können wir das ja auch noch ein bisschen aufpimpen. Die Beschriftung könnte auch ein bisschen fetter geschrieben sein. Und das Ganze vielleicht so ein bisschen Redesign, ein bisschen aufpimpen, dass das nicht so nach KI aussieht!!!" Was in seinem Screenshot konkret „nach KI" aussah — und warum: 1. SILBENTRENNUNG. `.mp-dsm-lb` trug `hyphens:auto`, also stand da „Rechnun-gen", „Einstellun-gen", „DEM-NÄCHST". Nichts von Hand Gebautem trennt so. Das ist der größte Einzeleffekt. 2. ZU ENGE SPALTEN. 6 Spalten ließen den Kacheln so wenig Platz, dass die Trennung überhaupt nötig wurde. 5 Spalten geben „Einstellungen" eine Zeile. 3. FLACHE BESCHRIFTUNG. 11px/700 auf hellem Grund liest sich dünn. 4. ÜBERSCHRIFTEN WIE FLIESSTEXT. „Favoriten" und „Alle Module" sahen aus wie Absätze, nicht wie Struktur. 5. KEINE TIEFE. Die Symbolflächen waren flach — ohne Lichtkante wirkt jede Pastellfläche generisch. ===================================================================== */ /* 1) Keine Silbentrennung. Umbruch nur an Wortgrenzen, höchstens zwei Zeilen, dann Auslassungspunkte — nie mitten im Wort. */ .mp-dsm-lb { -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: normal !important; word-break: keep-all !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2) Mehr Platz je Kachel: 5 statt 6 Spalten. Die schmaleren Stufen bleiben, wie sie sind (4 ab 1100, 3 ab 820). */ .mp-dsm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } /* 3) Beschriftung fetter und satter — 11,5px/750 statt 11px/700, dazu ein Hauch enger gesetzt, damit lange Wörter trotzdem passen. */ .mp-dsm-item { font-weight: 750; font-size: 11.5px; line-height: 1.25; letter-spacing: -.016em; color: rgb(var(--mp-t1-16202e)); padding: 12px 5px 11px; gap: 10px; } /* 4) Überschriften als Augenbrauen mit Haarlinie — das gibt der Liste Struktur, statt sie wie Fließtext aussehen zu lassen. */ .mp-dsm-sec-h { margin: 0 2px 11px; } .mp-dsm-sec-t { font-weight: 800; font-size: 10.5px; line-height: 1; letter-spacing: .085em; text-transform: uppercase; color: rgb(var(--mp-t3-55677d)); } .mp-dsm-sec-h::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 2px; background: linear-gradient(90deg, rgba(15, 23, 42, .11), rgba(15, 23, 42, 0)); } /* Der Hinweis rechts soll leise sein, nicht mitreden. */ .mp-dsm-sec-a { font-weight: 500; font-size: 10px; line-height: 1.3; opacity: .72; flex: 0 0 auto; } /* 5) Tiefe an den Symbolflächen: Lichtkante oben, weicher Schatten unten. Die Modulfarben bleiben unangetastet — nur das Licht kommt dazu, damit die Flächen gebaut statt generiert wirken. */ .mp-dsm-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(15, 23, 42, .05), 0 2px 5px rgba(15, 23, 42, .07); } /* Beim Zeigen hebt sich die Kachel samt Symbol — ein Zustand, keine Deko. */ .mp-dsm-item:hover .mp-dsm-ic, .mp-dsm-item.is-aktiv .mp-dsm-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(15, 23, 42, .06), 0 5px 12px rgba(15, 23, 42, .13); transform: translateY(-1px); } .mp-dsm-ic { transition: box-shadow .2s var(--dsm-ease), transform .2s var(--dsm-ease); } /* Dunkelmodus gegenlesen */ html.dark .mp-dsm-item, [data-theme='dark'] .mp-dsm-item { color: #eef2f7; } html.dark .mp-dsm-sec-t, [data-theme='dark'] .mp-dsm-sec-t { color: #93a4b8; } html.dark .mp-dsm-sec-h::after, [data-theme='dark'] .mp-dsm-sec-h::after { background: linear-gradient(90deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0)); } html.dark .mp-dsm-ic, [data-theme='dark'] .mp-dsm-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 .5px rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .35); } @media (prefers-reduced-motion: reduce) { .mp-dsm-ic { transition: none; } .mp-dsm-item:hover .mp-dsm-ic { transform: none; } } /* ===================================================================== ANPINNEN NACH APPLE-VORBILD — 30.07.2026 Marcel (mit Screenshot der blauen Nadel-Klötze): „Das gefällt mir auf jeden Fall gar nicht. Wir sollten uns zum Beispiel an Apple nehmen, wie man irgendwas anpinnt — und das Design auch so übernehmen." Apple hält den Normalzustand LEER: an der Kachel hängt nichts. Erst der Bearbeiten-Modus („Bearbeiten" oder lange drücken) zeigt an der Ecke ein kleines rundes Zeichen — Minus zum Entfernen, Plus zum Hinzufügen —, die Kacheln wackeln leicht, und „Fertig" beendet den Modus. Vorher: an jeder Favoriten-Kachel klebte dauerhaft eine Nadel, auf Touch sogar an allen (opacity .8). Fünf Klötze in einer Reihe. ===================================================================== */ /* 1) Normalzustand: nichts an der Kachel. Auch nicht beim Zeigen — Apple zeigt dort ebenfalls keine Griffe. */ .mp-dsm-pin, .mp-dsm-cell:hover .mp-dsm-pin, .mp-dsm-cell:focus-within .mp-dsm-pin, .mp-dsm-pin.is-on { display: none !important; } /* Die drei Punkte (Schnellaktionen) bleiben auf dem Desktop beim Zeigen, verschwinden aber auf Touch aus dem Dauerzustand — dort waren sie mit opacity .8 immer sichtbar und haben mit den Nadeln zusammen die Reihe zugemüllt. */ @media (hover: none) and (pointer: coarse) { .mp-dsm-quick { opacity: 0; } #mpDockStartMenu.is-anordnen .mp-dsm-quick { opacity: .85; } } /* 2) „Bearbeiten" / „Fertig" — Apples Textknopf in Systemblau. */ .mp-dsm-edit { border: 0; background: transparent; cursor: pointer; padding: 3px 7px; margin: -3px -5px -3px 0; border-radius: 8px; font-weight: 650; font-size: 11.5px; line-height: 1.2; letter-spacing: -.01em; color: #0a84ff; transition: background .16s var(--dsm-ease), color .16s var(--dsm-ease); flex: 0 0 auto; } .mp-dsm-edit:hover { background: rgba(10, 132, 255, .09); } .mp-dsm-edit:focus-visible { outline: 2px solid #0a84ff; outline-offset: 1px; } .mp-dsm-edit.is-fertig { font-weight: 800; } /* 3) Bearbeiten-Modus: rundes ⊖/⊕ an der oberen LINKEN Ecke, dunkles Grau mit weißem Zeichen und feinem Schatten — die iOS-Optik. */ #mpDockStartMenu.is-anordnen .mp-dsm-pin { display: inline-flex !important; opacity: 1; top: 2px; left: 2px; right: auto; /* Höhe MIT !important: eine globale Knopf-Regel der Aktionsleisten-Norm erzwingt min-height 40px auf jedem