/* ========================================================= MALERPLUS • BOTTOM-NAV ALS macOS-DOCK (Desktop) ------------------------------------------------------- 2026-07-25 (Marcel): "Bottom-Navigation genauso wie das Apple-Dock". NUR auf Desktop mit Maus (hover:hover, ≥900px): schwebende Frosted-Glass-Leiste, Labels werden zu hellen Tooltips, Aktiv-Punkt + Modulfarbe statt blauer Kachel, Magnification via core/mp-dock-nav.js. Mobile/Tablet-Touch bleibt 1:1 die bisherige Navigation. v2 (Feedback Marcel): Glas dunkler, Zoom dezenter (JS 1.25), mehr Kopffreiheit (nichts wird abgeschnitten), Tooltip hell, Aktiv-Icon war weiß-auf-weiß (Premium-CSS färbt aktives SVG weiß) → Modulfarbe erzwungen, und ALLE Kacheln bekommen die Dashboard-Modulfarben (Material/Stunden/Status/Chat/Cockpit/ Meine Zeit/Einstellungen hatten in der Nav nie eine Farbe — legacy dashboard.css kennt sie nicht). ========================================================= */ @media (min-width: 900px) and (hover: hover) and (pointer: fine) { /* ── Die Leiste wird zum schwebenden Dock ── Etwas dunkleres, smokiges Glas + Luft nach oben, damit vergrößerte Icons IM Glas bleiben statt abgeschnitten zu wirken. */ nav.bottom-nav { left: 50% !important; right: auto !important; transform: translateX(-50%); width: max-content !important; max-width: calc(100vw - 28px); bottom: 12px !important; display: flex !important; align-items: flex-end !important; gap: 7px !important; padding: 16px 14px 10px !important; border-radius: 26px !important; /* v6 (Marcel 2026-07-28): "richtig helles Glas" — lichte Milchglas- Fläche statt dunkel, Icons bleiben farbig, Schrift schwarz. */ /* v7 (Marcel 2026-07-28, final): GAR KEIN Glas-Brett — nur die schwebenden Icons (3D-Glas wie auf dem Dashboard), Schrift schwarz. */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; /* Scroll-Fade links/rechts (mask aus mp-bottom-nav-premium.css) hat im Dock nichts zu suchen (Marcel: "der kann auch weg"). */ -webkit-mask-image: none !important; mask-image: none !important; } /* Beim Hovern über die Leiste: über die Sheet-Ebene (z 2000) heben, damit Tooltips IMMER frei über z. B. angedockten Sheet-Griffen liegen (Marcel: "den Text sauber darüber legen"). Offene Sheets blenden die Nav ohnehin aus (body.sheet-open). */ nav.bottom-nav:hover { z-index: 3000 !important; } /* ── Nav-Ausblenden-Griff (#mpBottomNavGrip, core/mp-bottomnav- collapse.js, z 6400) saß per JS mittig AUF dem Dock und verdeckte die Tooltips (Marcel: "vielleicht anders lösen"). Im Dock-Modus: runder Glas-Button rechts unten NEBEN dem Dock — Funktion bleibt identisch (Klick blendet das Dock aus/ein), Handy unverändert. CSS-!important schlägt die inline bottom/left-Werte aus dem JS. */ #mpBottomNavGrip { left: auto !important; right: 16px !important; bottom: 34px !important; transform: none !important; width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .16) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 100%), rgba(17, 24, 39, .58) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45) !important; backdrop-filter: blur(24px) saturate(1.45) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .14) !important; } #mpBottomNavGrip:active { transform: scale(.94) !important; } #mpBottomNavGrip .mpbn-grab { display: none !important; } #mpBottomNavGrip::before { content: ""; width: 17px; height: 17px; background: center / contain no-repeat url("data:image/svg+xml;utf8,"); } /* Eingeklappt: Marken-blaue "Menü"-Pille unten rechts (JS liefert Pfeil+Text) — nur Form/Position angleichen. */ #mpBottomNavGrip.is-collapsedstate { width: auto !important; height: 34px !important; padding: 0 15px !important; bottom: 16px !important; background: linear-gradient(135deg, #2bb0ff, #1f9eef) !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(31, 158, 239, .35) !important; } #mpBottomNavGrip.is-collapsedstate::before { display: none; } html.dark #mpBottomNavGrip { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%), rgba(9, 14, 26, .62) !important; border-color: rgba(255, 255, 255, .14) !important; } html.dark #mpBottomNavGrip::before, html.mp-dock-stil-dunkel #mpBottomNavGrip::before { background-image: url("data:image/svg+xml;utf8,") !important; } html.dark #mpBottomNavGrip.is-collapsedstate, html.mp-dock-stil-dunkel #mpBottomNavGrip.is-collapsedstate { background: linear-gradient(135deg, #2bb0ff, #1f9eef) !important; } /* MP-20261004-014: Dock Aus- und Einfahren Spezifitäts-Härtung */ html body nav.bottom-nav.bottom-nav.is-navcollapsed { transform: translate3d(-50%, 160%, 0) !important; opacity: 0 !important; pointer-events: none !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav.bottom-nav.is-navcollapsed { transform: translate3d(-160%, 0, 0) !important; opacity: 0 !important; pointer-events: none !important; } html[data-mp-dock-pos="right"] body nav.bottom-nav.bottom-nav.is-navcollapsed { transform: translate3d(160%, 0, 0) !important; opacity: 0 !important; pointer-events: none !important; } /* ── Buttons: nackte Icon-Kacheln, kein Karten-Look ── WICHTIG: mp-bottom-nav-premium.css hat .active:hover/:focus/ :focus-visible-Varianten mit Spezifität (0,4,2) !important (blauer Kachel-Gradient) — deshalb hier ALLE Zustände mit (0,5,3) abdecken, sonst blitzt beim Hovern/Fokussieren des aktiven Moduls der "hässliche blaue Kasten" wieder auf. */ html body nav.bottom-nav .nav-btn.dash-launch-tile, html body nav.bottom-nav .nav-btn.dash-launch-tile:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile:focus, html body nav.bottom-nav .nav-btn.dash-launch-tile:focus-visible, html body nav.bottom-nav .nav-btn.dash-launch-tile:active, html body nav.bottom-nav .nav-btn.dash-launch-tile.active, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:focus, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:focus-visible, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:active, html body nav.bottom-nav .nav-btn.dash-launch-tile.is-active, html body nav.bottom-nav .nav-btn.dash-launch-tile.is-active:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile[aria-current="page"], html body nav.bottom-nav .nav-btn.dash-launch-tile[aria-current="page"]:hover { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; padding: 0 0 7px !important; min-width: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; transform: none !important; outline: none !important; } /* Premium-CSS skaliert das SVG bei Hover nochmal (1.05) — im Dock übernimmt das die Magnification, sonst doppelt. */ nav.bottom-nav .nav-btn:hover svg { transform: none !important; } /* Icon-Kachel — Größe/Radius wie Dock; v7: Glas-3D wie die Dashboard-Icons (Licht oben, Tiefe, weißer Hairline, Fallschatten). */ nav.bottom-nav .dash-launch-tile-icon { width: 48px !important; height: 48px !important; border-radius: 13px !important; margin: 0 !important; padding: 11px !important; box-sizing: border-box !important; transform-origin: bottom center; transition: transform .12s cubic-bezier(.2, .8, .3, 1); position: relative !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, .65) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -6px 10px rgba(11, 15, 25, .08), 0 8px 18px rgba(15, 23, 42, .22) !important; /* MP-20260901-018, Punkt ②: `will-change:transform` stand hier DAUERHAFT (nicht nur waehrend der `.12s`-Transition selbst) — dieselbe Fehlerklasse wie K-333 (mp-dock-startmenu.css), dort als Verdacht auf Sub-Pixel-/Schaerfe-Nebenwirkung notiert. Entfernt: Chromium promotet das Element ohnehin automatisch waehrend einer laufenden Transition/Animation auf einen Compositing-Layer — der Hinweis war fuer eine 120ms-Transition ohnehin ueberdimensioniert und kostet nur (moeglicherweise) Bildschaerfe im Ruhezustand. */ } nav.bottom-nav .dash-launch-tile-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* 30.07.2026 — DER DOCK-SCHLEIER. Hier lagen 75 % Weiss ueber JEDER Dockkachel. Das war richtig, solange die Kacheln blass getoent waren: der Verlauf machte den Glas-Effekt. Seit dem Symbol-System sind sie satt gefuellt — und derselbe Schleier wusch die Modulfarbe wieder aus. Genau deshalb sah das Dock milchig aus, egal wie kraeftig die Fuellung oben war. Der Glanz bleibt, nur eben als Glanz und nicht als Deckel: 22 % statt 75 %, und frueher ausgeblendet. Die eigentliche Lichtkante sitzt ohnehin schon als `inset 0 1px 0` in der Kachel selbst (css/mp-icon-system.css). */ background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, 0) 58%); } nav.bottom-nav .dash-launch-tile-icon svg { position: relative; z-index: 1; } /* ── Dashboard-Modulfarben: AUFGERÄUMT 28.07. ── Die per-Modul-Tint-Regeln lebten hier im Desktop-Media und fehlten dadurch auf Tablet/Handy. Sie stehen jetzt EINMAL GLOBAL im Block „v8.7 GLOBAL-TINTS" am Dateiende (identische Selektoren/Werte) — dieses Duplikat wurde entfernt, damit Farbänderungen nur noch an EINER Stelle gepflegt werden. */ /* ── Label wird zum hellen macOS-Tooltip (Ultra-Sharp Retina) ── */ nav.bottom-nav .dash-launch-tile-text { display: block !important; position: absolute; z-index: 50; /* Deutlich ÜBER der schwebenden Leiste (Marcel: "der Text muss außerhalb der Bottom-Navigation schweben") — auch bei vergrößertem Icon bleibt Luft dazwischen. */ bottom: calc(100% + 28px); left: 50%; transform: translateX(-50%) translateY(4px) translateZ(0); width: max-content !important; background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(15, 23, 42, .14); border-radius: 8px; padding: 4px 10px; box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .08); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; will-change: opacity, transform; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } nav.bottom-nav .dash-launch-tile-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(255, 255, 255, .98); } html.dark nav.bottom-nav .dash-launch-tile-text { background: rgba(30, 41, 59, .98); border-color: rgba(255, 255, 255, .16); box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .45); } html.dark nav.bottom-nav .dash-launch-tile-text::after { border-top-color: rgba(30, 41, 59, .98); } nav.bottom-nav .dash-launch-tile-title { font-size: 12px !important; font-weight: 650 !important; color: rgb(var(--mp-t1-0f172a)) !important; white-space: nowrap !important; letter-spacing: .01em; } html.dark nav.bottom-nav .dash-launch-tile-title { color: #f8fafc !important; } nav.bottom-nav .nav-btn.dash-launch-tile.mp-tip-on .dash-launch-tile-text, nav.bottom-nav .nav-btn.dash-launch-tile:hover .dash-launch-tile-text { opacity: 1; transform: translateX(-50%) translateY(0) translateZ(0); } /* ── Aktiv: Punkt + Modulfarbe statt blauer Kachel ── mp-bottom-nav-premium.css macht das aktive Icon weiß (svg color/stroke #fff für die alte blaue Kachel) — ohne blaue Kachel wäre es unsichtbar → zurückdrehen. */ nav.bottom-nav .nav-btn.dash-launch-tile.active { background: transparent !important; box-shadow: none !important; transform: none !important; color: rgb(var(--mp-t1-0f172a)) !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active::after { display: none !important; } /* Lucide ersetzt das Icon-DIV durch ein SVG mit derselben Klasse — beide Varianten (ersetzt/verschachtelt) abdecken, damit die Modulfarbe (Tint-Regeln oben) das Premium-Weiß sicher schlägt. */ html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { stroke: currentColor !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon svg { color: inherit !important; stroke: currentColor !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-title { color: rgb(var(--mp-t1-0f172a)) !important; } /* Aktiv: Punkt + sanfter Glow in der MODULFARBE (Marcel 25.07.: "leichter Glow, dass man erkennt, in welchem Modul man ist" — aber kein blauer Kasten). currentColor = Modulfarbe aus den Tint-Regeln oben; Fallback ohne color-mix = neutraler Schatten. */ nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { box-shadow: 0 4px 12px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .7) inset !important; } @supports (color: color-mix(in srgb, red 50%, transparent)) { nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 38%, transparent), 0 0 18px color-mix(in srgb, currentColor 45%, transparent), 0 4px 12px rgba(15, 23, 42, .10), 0 1px 0 rgba(255, 255, 255, .7) inset !important; } } nav.bottom-nav .nav-btn.dash-launch-tile::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(15, 23, 42, .70); opacity: 0; } nav.bottom-nav .nav-btn.dash-launch-tile.active::before { opacity: 1; } /* Klick-Bounce (Klasse setzt mp-dock-nav.js) — bleibt im Glas */ @keyframes mpDockBounce { 0% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 35% { transform: translateY(-10px) scale(var(--mp-dock-s, 1)); } 70% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 85% { transform: translateY(-3px) scale(var(--mp-dock-s, 1)); } 100% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } } nav.bottom-nav .dash-launch-tile-icon.mp-dock-bounce { animation: mpDockBounce .5s cubic-bezier(.28, .84, .42, 1); } /* Dark Mode: dunkles Glas + dunkle Kachel-Basis */ html.dark { --mp-dock-tile-base: #1e293b; } html.dark nav.bottom-nav { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%), rgba(9, 14, 26, .62) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 12px 40px rgba(0, 0, 0, .5) !important; } html.dark nav.bottom-nav .nav-btn.dash-launch-tile::before { background: rgba(255, 255, 255, .6); } html.dark nav.bottom-nav .dash-launch-tile-text { background: rgba(30, 41, 59, .95); border-color: rgba(255, 255, 255, .1); } html.dark nav.bottom-nav .dash-launch-tile-text::after { border-top-color: rgba(var(--mp-t1-1e293b), 0.95); } html.dark nav.bottom-nav .dash-launch-tile-title { color: #f1f5f9 !important; } html.dark nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-title { color: #f1f5f9 !important; } /* ── Dock-Position wählbar (Marcel: "frei verschieben / zur Seite"): Leiste an leerer Stelle greifen und an den linken/ rechten Bildschirmrand ziehen → vertikales Dock (wie macOS). Position steuert html[data-mp-dock-pos], JS merkt sie sich. ── */ nav.bottom-nav { cursor: grab; } nav.bottom-nav:active { cursor: grabbing; } nav.bottom-nav .nav-btn.dash-launch-tile { cursor: pointer; } html[data-mp-dock-pos="left"] nav.bottom-nav, html[data-mp-dock-pos="right"] nav.bottom-nav { flex-direction: column !important; align-items: center !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); width: max-content !important; max-width: none !important; max-height: calc(100vh - 32px); padding: 14px 13px !important; gap: 6px !important; } html[data-mp-dock-pos="left"] nav.bottom-nav { left: 12px !important; right: auto !important; } html[data-mp-dock-pos="right"] nav.bottom-nav { left: auto !important; right: 12px !important; } /* Vertikal: kompaktere Kacheln, damit alle Module in die Höhe passen */ html[data-mp-dock-pos="left"] nav.bottom-nav .nav-btn.dash-launch-tile, html[data-mp-dock-pos="right"] nav.bottom-nav .nav-btn.dash-launch-tile { padding: 0 !important; min-height: 0 !important; min-width: 0 !important; } html[data-mp-dock-pos="left"] nav.bottom-nav .dash-launch-tile-icon, html[data-mp-dock-pos="right"] nav.bottom-nav .dash-launch-tile-icon { width: 40px !important; height: 40px !important; padding: 8px !important; border-radius: 11px !important; } html[data-mp-dock-pos="left"] nav.bottom-nav, html[data-mp-dock-pos="right"] nav.bottom-nav { gap: 5px !important; padding: 12px 11px !important; } html[data-mp-dock-pos="left"] nav.bottom-nav .dash-launch-tile-icon { transform-origin: left center; } html[data-mp-dock-pos="right"] nav.bottom-nav .dash-launch-tile-icon { transform-origin: right center; } /* Tooltips seitlich: neben dem Icon statt darüber */ html[data-mp-dock-pos="left"] nav.bottom-nav .dash-launch-tile-text, html[data-mp-dock-pos="right"] nav.bottom-nav .dash-launch-tile-text { bottom: auto; top: 50%; } html[data-mp-dock-pos="left"] nav.bottom-nav .dash-launch-tile-text { left: calc(100% + 20px); transform: translateY(-50%) translateX(4px); } html[data-mp-dock-pos="left"] nav.bottom-nav .nav-btn.dash-launch-tile.mp-tip-on .dash-launch-tile-text, html[data-mp-dock-pos="left"] nav.bottom-nav .nav-btn.dash-launch-tile:hover .dash-launch-tile-text { transform: translateY(-50%) translateX(0); } html[data-mp-dock-pos="left"] nav.bottom-nav .dash-launch-tile-text::after { top: 50%; left: auto; right: 100%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: rgba(255, 255, 255, .96); } html[data-mp-dock-pos="right"] nav.bottom-nav .dash-launch-tile-text { left: auto; right: calc(100% + 20px); transform: translateY(-50%) translateX(-4px); } html[data-mp-dock-pos="right"] nav.bottom-nav .nav-btn.dash-launch-tile.mp-tip-on .dash-launch-tile-text, html[data-mp-dock-pos="right"] nav.bottom-nav .nav-btn.dash-launch-tile:hover .dash-launch-tile-text { transform: translateY(-50%) translateX(0); } html[data-mp-dock-pos="right"] nav.bottom-nav .dash-launch-tile-text::after { top: 50%; left: 100%; right: auto; transform: translateY(-50%); border: 5px solid transparent; border-left-color: rgba(255, 255, 255, .96); } /* Aktiv-Punkt seitlich: neben dem Icon */ html[data-mp-dock-pos="left"] nav.bottom-nav .nav-btn.dash-launch-tile::before { bottom: auto; top: 50%; left: auto; right: -1px; transform: translateY(-50%); } html[data-mp-dock-pos="right"] nav.bottom-nav .nav-btn.dash-launch-tile::before { bottom: auto; top: 50%; right: auto; left: -1px; transform: translateY(-50%); } /* Während des Ziehens: folgt dem Cursor (Vars setzt JS) */ nav.bottom-nav.mp-dock-dragging { left: var(--mp-dock-drag-x, 50%) !important; top: var(--mp-dock-drag-y, 50%) !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; transition: none !important; opacity: .85; } /* Reduced Motion: keine Magnification-Transitions/Bounce */ @media (prefers-reduced-motion: reduce) { nav.bottom-nav .dash-launch-tile-icon { transition: none; animation: none !important; } } } /* ========================================================= GLOBAL (alle Größen) — 2026-07-25 (Marcel): "auf der Mobil- ansicht habe ich immer noch die alte Navigation" → Modul- farben, neutraler Aktiv-Zustand (kein blauer Kasten) und Glow gelten jetzt ÜBERALL; das Maus-Dock (Tooltips/Zoom) bleibt Desktop-only, unten folgt die Touch-Glasbar. ========================================================= */ html.dark { --mp-dock-tile-base: #1e293b; } /* Dock-Glas ist jetzt DUNKEL (Marcel v7: "Glas dunkel, Schrift hell") — Intro-Animation friert per fill-mode ihren End-Transform ein und hebelt das translateX(-50%)-Zentrieren aus → im Dock-Modus aus. */ nav.bottom-nav { animation: none !important; transform: translateX(-50%); } /* Tap-Bounce global (auch Tablet/Handy). v2: echte Apple-Kurve — kräftiger erster Hüpfer, kleiner Nachhüpfer, weiches Landen. */ @keyframes mpDockBounce { 0% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 22% { transform: translateY(-14px) scale(var(--mp-dock-s, 1)); } 44% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 62% { transform: translateY(-7px) scale(var(--mp-dock-s, 1)); } 78% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 90% { transform: translateY(-2px) scale(var(--mp-dock-s, 1)); } 100% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } } nav.bottom-nav .dash-launch-tile-icon.mp-dock-bounce { animation: mpDockBounce .65s cubic-bezier(.3, .7, .4, 1); } @media (prefers-reduced-motion: reduce) { nav.bottom-nav .dash-launch-tile-icon.mp-dock-bounce { animation: none !important; } } /* Modulfarben: AUFGERAEUMT 28.07. (Schritt 3) - dieser zweite globale Tint-Block war ein Duplikat; die EINZIGE Quelle ist jetzt der Block v8.7 GLOBAL-TINTS am Dateiende. */ /* Aktiv/Hover-Zustände neutralisieren — Premium-CSS malt sonst den blauen Kachel-Gradient (Marcels "hässlicher blauer Kasten") auch auf dem Handy. Plain :active (Press-Feedback, scale .97) bleibt. */ html body nav.bottom-nav .nav-btn.dash-launch-tile:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile:focus, html body nav.bottom-nav .nav-btn.dash-launch-tile:focus-visible, html body nav.bottom-nav .nav-btn.dash-launch-tile.active, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:focus, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:focus-visible, html body nav.bottom-nav .nav-btn.dash-launch-tile.active:active, html body nav.bottom-nav .nav-btn.dash-launch-tile.is-active, html body nav.bottom-nav .nav-btn.dash-launch-tile.is-active:hover, html body nav.bottom-nav .nav-btn.dash-launch-tile[aria-current="page"], html body nav.bottom-nav .nav-btn.dash-launch-tile[aria-current="page"]:hover { background: transparent !important; box-shadow: none !important; border: 0 !important; transform: none !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active::after, html body nav.bottom-nav .nav-btn.dash-launch-tile.is-active::after, html body nav.bottom-nav .nav-btn.dash-launch-tile[aria-current="page"]::after { display: none !important; } /* Aktives Icon: Modulfarbe statt Premium-Weiß (beide Lucide-Fälle) */ html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { stroke: currentColor !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon svg { color: inherit !important; stroke: currentColor !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-title { color: rgb(var(--mp-t1-0f172a)) !important; } html.dark body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-title { color: #f1f5f9 !important; } /* Aktiv-Punkt + Glow in Modulfarbe — überall */ nav.bottom-nav .nav-btn.dash-launch-tile::before { content: ""; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; /* hell — sitzt jetzt auf dunklem Glas */ background: rgba(var(--mp-flaeche-rgb), .85); opacity: 0; } nav.bottom-nav .nav-btn.dash-launch-tile.active::before { opacity: 1; } nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { box-shadow: 0 4px 12px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .7) inset !important; } @supports (color: color-mix(in srgb, red 50%, transparent)) { nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-icon { box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 38%, transparent), 0 0 18px color-mix(in srgb, currentColor 45%, transparent), 0 4px 12px rgba(15, 23, 42, .10), 0 1px 0 rgba(255, 255, 255, .7) inset !important; } } /* ========================================================= MOBIL/TOUCH (Handy + iPad): schwebende Glas-Leiste im Dock-Look — MIT Labels und großen Touch-Zielen, ohne Tooltips/Magnification. Scrollen + Kanten-Fade bleiben. ========================================================= */ @media (max-width: 899px), (hover: none) and (pointer: coarse) { nav.bottom-nav { width: calc(100% - 20px) !important; max-width: 680px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; /* v5 (Marcel): unten war zu viel Luft — Polster ausbalanciert, Safe-Area steckt schon im bottom-Offset. */ padding: 9px 8px 7px !important; margin-bottom: 0 !important; gap: 6px !important; border-radius: 24px !important; /* v7 (Marcel): auch das Handy bekommt das dunkle Dock-Glas — "auf Tablet perfekt, dasselbe auf mobil". */ background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 100%), rgba(17, 24, 39, .58) !important; -webkit-backdrop-filter: blur(24px) saturate(1.4) !important; backdrop-filter: blur(24px) saturate(1.4) !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 10px 30px rgba(15, 23, 42, .16) !important; /* v2 (Marcel): "Fake/Fade-Effekt" auch mobil weg — Scrollen zeigt sich durch die angeschnittene letzte Kachel selbst. */ -webkit-mask-image: none !important; mask-image: none !important; } html.dark nav.bottom-nav { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%), rgba(9, 14, 26, .62) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 34px rgba(0, 0, 0, .5) !important; } nav.bottom-nav .nav-btn.dash-launch-tile { position: relative; padding: 2px 4px 6px !important; min-width: 62px !important; max-width: 78px !important; min-height: 0 !important; gap: 5px !important; border-radius: 12px !important; } nav.bottom-nav .dash-launch-tile-icon { width: 46px !important; height: 46px !important; border-radius: 13px !important; padding: 10px !important; box-sizing: border-box !important; margin: 0 auto !important; box-shadow: 0 3px 10px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .7) inset !important; } nav.bottom-nav .dash-launch-tile-title { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .01em !important; /* v7: helle Schrift auf dunklem Glas */ color: #e2e8f0 !important; white-space: nowrap !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile.active .dash-launch-tile-title { color: #ffffff !important; } nav.bottom-nav .nav-btn.dash-launch-tile::before { bottom: 2px; } } /* ========================================================= TABLET (Touch ≥ 768px) — 2026-07-25 (Marcel): "auf dem Tablet gerne die GANZE Bottom-Navigation sehen mit allen Symbolen" (kein Scrollen) + "Ein-/Ausblenden wie auf dem Desktop". Wie das iPad-Dock: nur Icons, keine Labels — so passen alle Kacheln auch im Hochformat in eine Reihe. Lädt NACH dem Mobile-Block und übersteuert ihn gezielt. ========================================================= */ @media (min-width: 768px) and (hover: none) and (pointer: coarse) { nav.bottom-nav { width: max-content !important; max-width: calc(100% - 20px) !important; /* v5 (Marcel): Inhalt mit Schrift vertikal ZENTRIERT — unten war mehr Luft als oben. */ padding: 9px 10px 5px !important; gap: 4px !important; bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 100%), rgba(17, 24, 39, .58) !important; border: 1px solid rgba(255, 255, 255, .16) !important; } /* v2 (Marcel): "auf dem Tablet brauchen wir Beschriftungen unter den Buttons" — Labels bleiben, kompakt genug, dass im Querformat alle Module ohne Scrollen in die Leiste passen. */ /* v4 (Marcel): "noch ein Tick größer" — 52px-Kacheln; Hochformat scrollt dafür, Querformat zeigt weiter alle Module. */ html body nav.bottom-nav .nav-btn.dash-launch-tile { min-width: 62px !important; max-width: 80px !important; min-height: 0 !important; padding: 2px 2px 4px !important; gap: 4px !important; } nav.bottom-nav .dash-launch-tile-icon { width: 52px !important; height: 52px !important; padding: 11px !important; } nav.bottom-nav .dash-launch-tile-text { max-width: 100% !important; overflow: hidden !important; } nav.bottom-nav .dash-launch-tile-title { font-size: 10px !important; max-width: 72px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Ausblenden-Griff wie am Desktop: runder Glas-Button rechts unten, eingeklappt die blaue "Menü"-Pille. */ #mpBottomNavGrip { left: auto !important; right: 16px !important; bottom: 34px !important; transform: none !important; width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .16) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 100%), rgba(17, 24, 39, .58) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45) !important; backdrop-filter: blur(24px) saturate(1.45) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .14) !important; } #mpBottomNavGrip:active { transform: scale(.94) !important; } #mpBottomNavGrip .mpbn-grab { display: none !important; } #mpBottomNavGrip::before { content: ""; width: 17px; height: 17px; background: center / contain no-repeat url("data:image/svg+xml;utf8,"); } #mpBottomNavGrip.is-collapsedstate { width: auto !important; height: 34px !important; padding: 0 15px !important; bottom: 16px !important; background: linear-gradient(135deg, #2bb0ff, #1f9eef) !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(31, 158, 239, .35) !important; } #mpBottomNavGrip.is-collapsedstate::before { display: none; } html.dark #mpBottomNavGrip { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%), rgba(9, 14, 26, .62) !important; border-color: rgba(255, 255, 255, .14) !important; } html.dark #mpBottomNavGrip::before, html.mp-dock-stil-dunkel #mpBottomNavGrip::before { background-image: url("data:image/svg+xml;utf8,") !important; } html.dark #mpBottomNavGrip.is-collapsedstate, html.mp-dock-stil-dunkel #mpBottomNavGrip.is-collapsedstate { background: linear-gradient(135deg, #2bb0ff, #1f9eef) !important; } } /* 2026-07-28 v6 (Marcel): helles Glas => SCHWARZE Schrift im Dock (Labels/Tooltips) */ nav.bottom-nav .dash-launch-tile-title, nav.bottom-nav .nav-btn span, nav.bottom-nav .nav-label, nav.bottom-nav [class*='tooltip'], nav.bottom-nav [class*='label']{ color:rgb(var(--mp-t1-0b0f19)) !important; text-shadow:none !important; } /* ========================================================= v7-TOUCH (Marcel 2026-07-28): Handy/Tablet bekommen DENSELBEN Look wie das Desktop-Dock — kein Glas-Brett, schwebende 3D-Glas-Icons, SCHWARZE Schrift. Einziger Zusatz: ein hauchzarter Verlauf nach unten, damit Labels über scrollendem Inhalt lesbar bleiben. ========================================================= */ @media (max-width: 899.98px), (hover: none), (pointer: coarse) { nav.bottom-nav { background: linear-gradient(180deg, rgba(251, 250, 247, 0) 0%, rgba(var(--mp-f2-fbfaf7), 0.88) 42%, rgba(var(--mp-f2-fbfaf7), 0.96) 100%) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } nav.bottom-nav .nav-btn, nav.bottom-nav .nav-btn.dash-launch-tile, nav.bottom-nav .nav-btn.active, nav.bottom-nav .nav-btn.dash-launch-tile.active { background: transparent !important; border: 0 !important; box-shadow: none !important; } nav.bottom-nav .dash-launch-tile-icon { position: relative !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, .65) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -6px 10px rgba(11, 15, 25, .08), 0 6px 14px rgba(15, 23, 42, .18) !important; } nav.bottom-nav .dash-launch-tile-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* 30.07.2026 — DER DOCK-SCHLEIER. Hier lagen 75 % Weiss ueber JEDER Dockkachel. Das war richtig, solange die Kacheln blass getoent waren: der Verlauf machte den Glas-Effekt. Seit dem Symbol-System sind sie satt gefuellt — und derselbe Schleier wusch die Modulfarbe wieder aus. Genau deshalb sah das Dock milchig aus, egal wie kraeftig die Fuellung oben war. Der Glanz bleibt, nur eben als Glanz und nicht als Deckel: 22 % statt 75 %, und frueher ausgeblendet. Die eigentliche Lichtkante sitzt ohnehin schon als `inset 0 1px 0` in der Kachel selbst (css/mp-icon-system.css). */ background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, 0) 58%); } nav.bottom-nav .dash-launch-tile-icon svg { position: relative; z-index: 1; } /* v7.1 (Marcel): "die Schrift kann weg" — Touch zeigt NUR die Icons. */ nav.bottom-nav .nav-btn span, nav.bottom-nav .dash-launch-tile-title, nav.bottom-nav .nav-label, nav.bottom-nav [class*='label'] { display: none !important; } nav.bottom-nav .nav-btn, nav.bottom-nav .nav-btn.dash-launch-tile { padding-bottom: 4px !important; } html.dark nav.bottom-nav, [data-theme='dark'] nav.bottom-nav { background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .88) 42%, rgba(11, 18, 32, .96) 100%) !important; } html.dark nav.bottom-nav .nav-btn span, html.dark nav.bottom-nav .dash-launch-tile-title, [data-theme='dark'] nav.bottom-nav .nav-btn span, [data-theme='dark'] nav.bottom-nav .dash-launch-tile-title { color: #f1f5f9 !important; } html.dark nav.bottom-nav .dash-launch-tile-icon, [data-theme='dark'] nav.bottom-nav .dash-launch-tile-icon { border-color: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 10px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .35) !important; } } /* ========================================================= v7.2 (28.07., Marcel): Dock-Kacheln DECKEND. Ohne Brett schien der Seiteninhalt durch die Glas-Kacheln — hier bekommt JEDE Kachel eine satte Basis unter ihrem Tint (background-color liegt unter allen Gradient-Ebenen). Hell: Weiß, Dark: Slate — Modulfarben bleiben unangetastet. ========================================================= */ html body nav.bottom-nav .nav-btn .dash-launch-tile-icon, html body nav.bottom-nav .nav-btn[data-nav] .dash-launch-tile-icon, html body nav.bottom-nav .dash-launch-tile-icon { background-color: var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; } html.dark body nav.bottom-nav .nav-btn .dash-launch-tile-icon, html.dark body nav.bottom-nav .nav-btn[data-nav] .dash-launch-tile-icon, html.dark body nav.bottom-nav .dash-launch-tile-icon { background-color: var(--mp-dock-tile-base, #1e293b) !important; } /* ========================================================= DOCK v8 (28.07., Marcel-Screenshot Lenovo-Tablet): Zurück zum BRETT — helles Milchglas, schwebend zentriert, Icons als weiße Squircles mit farbigen Glyphen (Android-Look). Ersetzt v7 „kein Brett" + Tint-Kacheln. Lädt zuletzt → gewinnt. ========================================================= */ html body nav.bottom-nav { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100vw - 24px) !important; margin: 0 !important; padding: 10px 14px !important; align-items: center !important; overflow: visible !important; border-radius: 26px !important; /* v8.5 (Marcel: „Glas muss KOMPLETT über alle Icons gehen"): Zahnrad und KI-Mikro sind fremd-positionierte fixed-Elemente, die per JS relativ zum Nav-Rand nachrücken — Brett-Verbreitern bringt nichts. Deshalb ist die GLASPLATTE jetzt ein ::before, das rechts 116px WEITER reicht als die Leiste; die Nav selbst bleibt transparent. Farbe = Rail-Chevron- Slate (v8.3, rgba(148,163,184,.18)). */ background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body nav.bottom-nav::before { content: ""; position: absolute; top: 0; bottom: 0; /* v8.7: Ränder kommen aus der ECHTEN Icon-Hülle (core/mp-dock-home.js vermisst Nav-Kinder + Zahnrad + KI-Mikro) — Fallbacks für den Boot. 2026-07-29 (Marcel): SYMMETRISCH per max() — die Platte ragte rechts (Zahnrad + KI-Mikro) weiter als links und wirkte rechtslastig. Beide Seiten nehmen jetzt den größeren Überhang, die Platte sitzt dadurch mittig um die (weiter unverschobene) Nav; NUR Optik der Platte, keine Positionsänderung der Leiste. */ left: calc(-1 * max(var(--mp-plate-l, 14px), var(--mp-plate-r, 116px))); right: calc(-1 * max(var(--mp-plate-l, 14px), var(--mp-plate-r, 116px))); z-index: -1; border-radius: 26px; background: rgba(148, 163, 184, .20); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 10px 34px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .35); pointer-events: none; } html.dark body nav.bottom-nav::before { background: rgba(30, 41, 59, .55); border-color: rgba(255, 255, 255, .12); box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); } html.dark body nav.bottom-nav { background: rgba(24, 27, 34, .68) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08) !important; } /* v8.1 (Marcel): Icons wie die ECHTEN Dashboard-Kacheln — Modulfarb-Tönung + Glas-Licht bleiben (die [data-nav]-Tint-Regeln oben greifen wieder, ihr Stack endet auf var(--mp-dock-tile-base,#fff) = opak). Hier nur Squircle-Form, opake Fallback-Basis und weicher Schatten — KEIN background-image-Override, KEIN ::before-Kill mehr. */ html body nav.bottom-nav .nav-btn[data-nav] .dash-launch-tile-icon, html body nav.bottom-nav .nav-btn .dash-launch-tile-icon { background-color: var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; border: 0 !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(15, 23, 42, .16), 0 1px 2px rgba(15, 23, 42, .1) !important; } /* Glyphen kräftig statt blass: volle Modulfarbe, dickerer Strich. */ html body nav.bottom-nav .nav-btn .dash-launch-tile-icon svg { stroke-width: 2.4 !important; filter: saturate(1.25); opacity: 1 !important; } html.dark body nav.bottom-nav .nav-btn[data-nav] .dash-launch-tile-icon, html.dark body nav.bottom-nav .nav-btn .dash-launch-tile-icon { background-color: var(--mp-dock-tile-base, #1e293b) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important; } /* v8.2 MOBIL/TOUCH (28.07.): Brett bleibt der Homescreen-Dock — kompakter, mit Safe-Area, Icon-Reihe horizontal wischbar statt gequetscht. */ @media (max-width: 899.98px), (hover: none) and (pointer: coarse) { html body nav.bottom-nav { bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; max-width: calc(100vw - 16px) !important; padding: 8px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html body nav.bottom-nav::-webkit-scrollbar { display: none; } html body nav.bottom-nav .dash-launch-tile-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 14px !important; } } /* v8.4 (28.07.): (a) Das Glas-Brett endete VOR Zahnrad + KI-Mikro (beide sind fixed-Elemente außerhalb der Nav) — Brett bekommt rechts Raum, sodass es durchgehend unter allen Icons liegt. (b) Einfahr-Grip vom dunklen v7-Glas auf das helle Slate-Glas des Bretts umgestellt. */ @media (min-width: 900px) and (hover: hover) and (pointer: fine) { /* v8.5: padding-right-Ansatz verworfen — die Glasplatte (::before, oben) reicht jetzt selbst über Zahnrad + Mikro hinaus. */ html body nav.bottom-nav { padding-right: 14px !important; } #mpBottomNavGrip { background: rgba(148, 163, 184, .22) !important; border: 1px solid rgba(255, 255, 255, .5) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; backdrop-filter: blur(24px) saturate(150%) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .14) !important; } } /* v8.7 Mobil: gleiche Mess-Variablen wie Desktop (mp-dock-home.js läuft überall) — nur konservativere Fallbacks vor der ersten Messung. */ @media (max-width: 899.98px), (hover: none) and (pointer: coarse) { html body nav.bottom-nav::before { /* 2026-07-29 FINAL (Marcel „Dock muss exakt mittig"): auch mobil symmetrisch per max() — Fallback 0 vor der ersten Messung. Voraussetzung dafür steckt in mp-dock-home.js (fitPlate): die Hülle wird auf den Viewport GEKLEMMT (scrollende Nav-Kinder lieferten sonst --mp-plate-r ~730px bei 390px Breite und die Platte stand einseitig weit neben der Mitte). Nav ist per Layout exakt zentriert → symmetrische Insets = zentrierte Platte. */ left: calc(-1 * max(var(--mp-plate-l, 0px), var(--mp-plate-r, 0px))); right: calc(-1 * max(var(--mp-plate-l, 0px), var(--mp-plate-r, 0px))); } } /* v8.7 (28.07., Marcel): Versteck-/Einblende-Verhalten. - Sanftes Hochfaden von unten (hidden-nav = opacity 0 + translateY 16). - Sheet offen (body.sheet-open) → Dock weg; die Sichtbarkeits- Erzwingung aus v8.6 gilt nur OHNE offenes Sheet. - Touch: Einklapp-Grip nach LINKS (lag rechts über dem KI-Mikro). */ /* WURZELFIX ZENTRIERUNG (2026-07-29, im Browser gemessen): Oben steht `width: auto !important` (Z. 819). Bei einem fixed-Element, das per `left: 50%` verankert ist, heißt `auto` = Shrink-to-fit gegen den Platz AB der Bildschirmmitte — die Box wurde also nie breiter als ~halbe Bildschirmbreite (gemessen: 762 px Box bei 1315 px Inhalt). Folge: Die Kinder liefen rechts aus der Box heraus (das KI-Mikro hing immer ~120 px über, mit Task-Knöpfen sogar aus dem Bildschirm), und weil `translateX(-50%)` die BOX zentriert, saß der sichtbare Inhalt dadurch links neben der Mitte — genau Marcels „Dock ist nicht zentriert". `max-content` lässt die Box ihren Inhalt umschließen: Box-Mitte = Inhalts-Mitte = Bildschirmmitte, und die Glasplatte braucht keinen einseitigen Überhang mehr auszugleichen. Nur ≥768 px: Mobil bleibt die geprüfte Scroll-Mechanik (Z. 898 ff.). */ @media (min-width: 768px) { html body nav.bottom-nav { width: max-content !important; } } html body nav.bottom-nav { transition: opacity .3s ease, transform .3s ease !important; } html body.sheet-open nav.bottom-nav { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(16px) !important; } /* MP-20260902-044 (03.09.2026, Jonas Falk): Planer-Vollbild (dashboard.js #dashPlannerMobile) hängt sein Dock-Versteck-Signal bewusst NICHT an body.sheet-open (mp-termin.js schreibt diese Klasse an core/ mp-termin.js:1042/1089 DIREKT per classList, am MPBottomsheet-Zähler vorbei — SHARED_LEARNINGS.md L-2026-09-03-N/-U — Öffnen/Schließen eines Termins aus dem Vollbild heraus würde sonst das Dock mitten in der noch offenen Vollbild-Ansicht wieder einblenden). Eigene, ungeteilte Klasse body.mp-planner-vollbild-open stattdessen. MUSS zusätzlich in der Force-Visible-Regel weiter unten (":not(.sheet-open)") ausgeschlossen werden, sonst gewinnt DIESE hier wegen niedrigerer Spezifität nicht. */ html body.mp-planner-vollbild-open nav.bottom-nav { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(16px) !important; } @media (max-width: 899.98px), (hover: none) and (pointer: coarse) { #mpBottomNavGrip { left: 14px !important; right: auto !important; } } /* v8.7 GLOBAL-TINTS: Die Modulfarb-Regeln oben leben im Desktop-Media — auf Tablet/Handy fehlte das Farbschema komplett (Marcel). Hier einmal global; beim Aufräumen wird der Desktop-Block darauf reduziert. */ html body nav.bottom-nav .nav-btn[data-nav="view-dashboard"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(99, 102, 241, .20), rgba(99, 102, 241, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #6366f1 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-kunden"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(168, 85, 247, .20), rgba(168, 85, 247, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #a855f7 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-aufmass"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(239, 68, 68, .20), rgba(239, 68, 68, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #ef4444 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-kva"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(234, 88, 12, .20), rgba(234, 88, 12, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #ea580c !important; } html body nav.bottom-nav .nav-btn[data-nav="view-projekte"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(22, 163, 74, .20), rgba(22, 163, 74, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #16a34a !important; } html body nav.bottom-nav .nav-btn[data-nav="view-baustellenplanung"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(43, 176, 255, .20), rgba(43, 176, 255, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #2bb0ff !important; } html body nav.bottom-nav .nav-btn[data-nav="view-rechnung"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(31, 158, 239, .20), rgba(31, 158, 239, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #1f9eef !important; } html body nav.bottom-nav .nav-btn[data-nav="view-mail"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(2, 132, 199, .20), rgba(2, 132, 199, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #1f9eef !important; } html body nav.bottom-nav .nav-btn[data-nav="view-baustellenchat"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(37, 211, 102, .20), rgba(37, 211, 102, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #25d366 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-briefe"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(13, 148, 136, .20), rgba(13, 148, 136, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #0d9488 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-notizen"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(217, 119, 6, .20), rgba(217, 119, 6, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #d97706 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-material"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(245, 158, 11, .20), rgba(245, 158, 11, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #f59e0b !important; } html body nav.bottom-nav .nav-btn[data-nav="view-dateien"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(251, 146, 60, .20), rgba(251, 146, 60, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #fb923c !important; } html body nav.bottom-nav .nav-btn[data-nav="view-stundenuebersicht"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(6, 182, 212, .20), rgba(6, 182, 212, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #06b6d4 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-workerstatus"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(6, 182, 212, .20), rgba(6, 182, 212, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #06b6d4 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-meine-stunden"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(236, 72, 153, .20), rgba(236, 72, 153, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #ec4899 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-worker-fotos"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(99, 102, 241, .20), rgba(99, 102, 241, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: #6366f1 !important; } html body nav.bottom-nav .nav-btn[data-nav="view-settings"] .dash-launch-tile-icon { background: linear-gradient(135deg, rgba(100, 116, 139, .20), rgba(100, 116, 139, .07)), var(--mp-dock-tile-base, rgb(var(--mp-flaeche-rgb))) !important; color: rgb(var(--mp-t3-64748b)) !important; } html body nav.bottom-nav .mp-dock-laser .dash-launch-tile-icon { position:relative; background:linear-gradient(135deg,rgba(14,165,233,.24),rgba(2,132,199,.08)),var(--mp-dock-tile-base,rgb(var(--mp-flaeche-rgb)))!important;color:#0284c7!important; } html body:not(.mp-laser-context):not(.mp-view-aufmass):not(.mp-view-view-aufmass) nav.bottom-nav .mp-dock-laser, html body nav.bottom-nav .mp-dock-laser[hidden] { display:none!important; } /* Eigene Geometrie statt von einer normalen Favoriten-Kachel zu erben. Das verhindert den beobachteten schmalen Strich, wenn Dock-Skripte gleichzeitig Breite, Reihenfolge und Sichtbarkeit der Favoriten berechnen. */ html body.mp-laser-context nav.bottom-nav .mp-dock-laser:not([hidden]), html body.mp-view-aufmass nav.bottom-nav .mp-dock-laser:not([hidden]), html body.mp-view-view-aufmass nav.bottom-nav .mp-dock-laser:not([hidden]) { display:inline-flex!important; flex:0 0 58px!important; flex-shrink:0!important; width:58px!important; min-width:58px!important; max-width:58px!important; min-height:58px!important; overflow:visible!important; padding:2px 4px 4px!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; z-index:3!important; } html body nav.bottom-nav .mp-dock-laser .mp-laser-dot { position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-radius:50%;background:#94a3b8;border:2px solid var(--mp-dock-tile-base,#fff);box-sizing:content-box; } html body nav.bottom-nav .mp-dock-laser.mp-laser-connected .mp-laser-dot { background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14); } html body nav.bottom-nav .mp-dock-laser.mp-laser-busy .dash-launch-tile-icon { animation:mpDockLaserBusy 1.05s ease-in-out infinite; } @keyframes mpDockLaserBusy { 50% { transform:scale(.92);filter:saturate(1.35); } } html body nav.bottom-nav .mp-dock-laser.mp-laser-pulse .dash-launch-tile-icon { animation:mpDockLaserMeasure .72s cubic-bezier(.2,1.25,.35,1); } @keyframes mpDockLaserMeasure { 45% { transform:scale(1.13);box-shadow:0 0 0 9px rgba(34,197,94,.12); } } html body nav.bottom-nav .mp-dock-laser.is-context-on { animation:mpDockLaserEnter .42s cubic-bezier(.2,1.28,.38,1) both; } @keyframes mpDockLaserEnter { from { opacity:0;transform:translateY(13px) scale(.72); } to { opacity:1;transform:translateY(0) scale(1); } } @media (prefers-reduced-motion:reduce) { html body nav.bottom-nav .mp-dock-laser.is-context-on { animation:none!important; } } /* v8.6 (28.07.): Dock auf dem Dashboard sichtbar — eine Alt-Mechanik hielt die Nav dort auf opacity:0 (Gegenstück zum entfernten hidden-nav-Toggle). Sichtbarkeit erzwingen, solange nicht explizit versteckt (hidden-nav bleibt als Versteck-Mechanik voll funktionsfähig). MP-20260901-022 (Marcel-Morgenbefund, Dock über Dialog-Aktionsknöpfen): `body.sheet-open nav.bottom-nav{opacity:0 …}` weiter oben (Z. 1001, 01.09.2026) und DIESE „Sichtbarkeit erzwingen"-Regel (28.07.2026) haben dieselbe Selektor-Spezifität (0 IDs, 1 Klasse, 3 Elemente) — bei Gleichstand gewinnt die SPÄTERE Position in der Kaskade, hier zufällig diese Regel, weil sie nach der sheet-open-Regel in derselben Datei steht. Per CDP `CSS.getMatchedStylesForNode` real gemessen (kein Vermutungsfall): mit `body.sheet-open` blieb `opacity:1`, `pointer-events:auto` bestehen — das Dock lag sichtbar über den Dialog-Aktionsknöpfen (Abbrechen/Speichern), exakt Marcels Befund. Fix: `:not(.sheet-open)` zusätzlich auf `body` — dieselbe Technik wie bereits bei `#aufmassQuickDock` weiter unten in dieser Datei. Die Regel matcht dann im sheet-open-Zustand gar nicht mehr, statt mit ihr um `!important`-Vorrang zu konkurrieren — kein Spezifitäts-Wettlauf, kein Risiko für den 28.07.-Ursprungsfall (Dashboard ohne offenes Sheet). ERGÄNZT 03.09.2026 (MP-20260902-044, Jonas Falk): zusätzlich `:not(.mp-planner-vollbild-open)` — dieselbe Spezifität (0,3,3) wie diese Regel selbst schlug sonst die neue, ungeteilte Dock-Versteck-Klasse des Planer-Vollbilds (0,2,3, siehe Regel bei `body.mp-planner-vollbild- open` weiter oben, Z. ~1006) trotz `!important` auf beiden Seiten — exakt dieselbe Fehlerklasse, die der Kommentar oben für `sheet-open` bereits beschreibt, hier vor dem Bau per Spezifitäts-Rechnung gefunden, nicht erst nach einem Marcel-Befund. */ html body:not(.sheet-open):not(.mp-planner-vollbild-open) nav.bottom-nav:not(.hidden-nav):not(.is-navcollapsed) { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } /* v8.8 (28.07.): Einfahr-Grip UEBERALL im hellen Slate-Glas des Bretts (Touch zeigte noch das dunkle Alt-Design). Eingeklappte Blau-Pille (is-collapsedstate) bleibt unveraendert. */ html body #mpBottomNavGrip:not(.is-collapsedstate) { background: rgba(148, 163, 184, .22) !important; border: 1px solid rgba(255, 255, 255, .5) !important; color: rgb(var(--mp-t1-0b0f19)) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; backdrop-filter: blur(24px) saturate(150%) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .14) !important; } html.dark body #mpBottomNavGrip:not(.is-collapsedstate) { background: rgba(30, 41, 59, .6) !important; border-color: rgba(255, 255, 255, .12) !important; color: #f1f5f9 !important; } /* v8.9 (28.07.): Runder KI-FAB — Look wie die Dock-Buttons (Squircle) und Rueckzug, sobald das Dock sichtbar ist (mp-dock-home.js setzt .mp-fab-dockhidden — "sonst doppelt gemoppelt"). */ .mp-hub-fab { border-radius: 16px !important; transition: opacity .25s ease, transform .25s ease !important; } .mp-hub-fab.mp-fab-dockhidden { opacity: 0 !important; pointer-events: none !important; /* v9 (Marcel): FAB fliegt von der SEITE ein/aus, Dock von unten. */ transform: translateX(28px) scale(.9) !important; } /* MP-20260905-001 (Jonas Falk, 05.09.2026) — Marcel live: „das Mikrofon überdeckt mein KI-Fenster, das muss natürlich ausgeblendet werden, wenn das KI-Fenster hochgefahren [ist]." GEMESSEN (elementFromPoint, 390×844, echter Staging-Stand vor dem Fix): der FAB liegt exakt über dem „Absenden"-Knopf der KI-Blase (`.kb-go`, Rect x321-369/y773-821 vs. FAB x320-372/y764-816) — ein Tap auf „Absenden" trifft den FAB und SCHLIESST die ganze KI (`auf()` toggelt ohne `ensureOpen`), statt die Frage abzuschicken. Reiner CSS-Fix auf die bestehenden body-Zustände aus `core/mp-dock-ki-blase.js` — die Datei selbst bleibt unangetastet: `body.mp-kib-sheet-open` (Blatt <900px, gesetzt/entfernt in sheetMounten()/sheetAbbauen(), Z. 1664/1691) UND `body.mp-ki-platz` (gesetzt bei JEDEM Öffnen, Z. 1850, entfernt beim Schließen Z. 1260 — ABER auch vorzeitig entfernt, sobald das freie Fenster („kb-geo") aktiv wird, Z. 1527). Beide Klassen sind bei <900px gemeinsam gesetzt, decken zusammen Blatt + angedockten Zustand + Voice-Stage ab (letztere ändert weder Klasse), und die Doppel-Selektor-Absicherung verhindert eine Lücke im (Desktop-only) freien Fenstermodus. Kein Flackern beim Öffnen ÜBER den FAB selbst: beide Klassen werden synchron im selben Klick-Handler gesetzt, bevor die Öffnen-Animation überhaupt einen Frame gemalt hat. */ body.mp-kib-sheet-open .mp-hub-fab, body.mp-ki-platz .mp-hub-fab { opacity: 0 !important; pointer-events: none !important; transform: translateX(28px) scale(.9) !important; } /* ========================================================= BOUNCE GLOBAL + PRIORISIERT (28.07., Marcel: „mal geht er, mal nicht"): Die Keyframes lebten nur im Desktop-Media — Touch hatte NIE Bounce. Hier global, und mit !important gewinnt der Bounce gegen jede konkurrierende animation- Zuweisung (z. B. Aktiv-Puls), solange die Klasse anliegt. ========================================================= */ @keyframes mpDockBounceG { 0% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 28% { transform: translateY(-11px) scale(var(--mp-dock-s, 1)); } 44% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 62% { transform: translateY(-7px) scale(var(--mp-dock-s, 1)); } 78% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } 90% { transform: translateY(-2px) scale(var(--mp-dock-s, 1)); } 100% { transform: translateY(0) scale(var(--mp-dock-s, 1)); } } html body nav.bottom-nav .dash-launch-tile-icon.mp-dock-bounce { animation: mpDockBounceG .65s cubic-bezier(.3, .7, .4, 1) !important; } @media (prefers-reduced-motion: reduce) { html body nav.bottom-nav .dash-launch-tile-icon.mp-dock-bounce { animation: none !important; } } /* v9.1 (28.07., Marcel): Auf Mobil KEIN Einklapp-Faehnchen — das Dock regelt sich dort ueber den Homescreen-Reveal von selbst. */ @media (max-width: 760px) { #mpBottomNavGrip { display: none !important; } } /* v9.2 (29.07., Marcel): "Wenn ich meine Faehnchen an der Seite benutze, dann muss die Dockleiste automatisch aufblenden und runterfahren." Der Rail-Drawer (body.mp-rail-open — Leads/Projekte/Termine/Stunden) und der Notizblock des gelben Faehnchens (.mp-notes-ov.is-on) fahren das Dock sanft runter (Transition aus v8.7) und beim Schliessen wieder hoch. Die alte Regel in mp-leads-sidebar.js verlor das !important- Duell gegen die v8.6-Sichtbarkeits-Erzwingung — diese hier gewinnt ueber hoehere Spezifitaet UND Datei-Reihenfolge. */ html body.mp-rail-open nav.bottom-nav:not(.hidden-nav), html body:has(> .mp-notes-ov.is-on) nav.bottom-nav:not(.hidden-nav) { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(16px) !important; } /* Der Einklapp-Grip neben dem Dock faehrt mit runter. */ body.mp-rail-open #mpBottomNavGrip, body:has(> .mp-notes-ov.is-on) #mpBottomNavGrip { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s ease !important; } /* ========================================================= HANDY-MASS (2026-07-30, im Chrome auf 412x915 gemessen) Marcel: „Geht das mit den Task nicht auf mobil? Und die Dockleiste, dieser Glashintergrund passt auch noch nicht so ganz auf dem Mobilen." BEFUND (eine Ursache für beides): Der Inhalt der Leiste war 471 px breit, die Leiste selbst 396 px. Weil mobil `overflow-x:auto` gilt, ist nichts geclippt worden — es ist lautlos AUS DEM BILD gerutscht: Task-Bereich bei 414→477 px, das KI-Mikro dahinter. Und die Glasplatte (::before) legt sich per max(--mp-plate-l, --mp-plate-r) über die Hülle ALLER Kinder; ragen die aus dem Bild, klemmt mp-dock-home.js den Wert auf den Viewport → Platte von 0 bis 412 px, also randlos mit abgeschnittenen 26px-Ecken. Genau der „graue Balken". MASSNAHME: Auf Handys (<768px) das echte Platzbudget einhalten. Die Kacheln trugen 10 px Luft (Icon 44 in 62 px Breite, Label ist mobil ohnehin `display:none`) — das Wegnehmen kostet optisch nichts und bringt vier Favoriten statt zwei. 48px bleibt über dem Mindest- Touchziel (48dp). Gegenstück in JS: sichtbareFavAnzahl() in core/mp-dock-startmenu.js MISST diese Breiten jetzt statt sie zu schätzen — die Zahlen hier und dort können nicht auseinanderlaufen. Tablets (≥768px) bleiben bewusst unangetastet: dort passen 62 px locker, und das Tablet-Maß ist am 28./30.07. abgenommen worden. Budget-Rechnung 412 px: 396 Leiste − 20 Padding = 376 innen. Anker: Mikro 54 + Startknopf 38 + Task-Bereich ~43 = 135 + 3 Lücken × 6 = 18 → 153 belegt, 223 frei 4 Kacheln × 48 + 3 × 6 = 210 ≤ 223 ✓ (13 px Reserve) 390 px → 3 Kacheln · 360 px → 3 · 320 px → 2 (jeweils gerechnet). ========================================================= */ @media (max-width: 767.98px) { /* ══ VIER DIREKTE KNÖPFE, SONST NICHTS ════════════════════════════════ Startmenü, Home, Task-Bereich und KI bleiben auf dem Handy direkt erreichbar. Home ist bewusst kein zweiter Knopf: Der vorhandene Dashboard-Eintrag wird aus der allgemeinen Modul-Ausblendung genommen. Er hat recht, und es räumt die eigentliche Ursache ab: Die Modul-Kacheln waren auf dem Handy DOPPELT — das Cockpit zeigt sie groß, das Startmenü hat alle 22 (geprüft, inklusive Cockpit). Und sie waren der einzige Grund für Überlauf, Wischen und die randlose Glasplatte. Ohne sie ist das Dock ein kompakter Pille-Balken aus Startknopf · Task-Bereich · Mikro, der nie überläuft. Ein Modul ist damit zwei Antippen entfernt (Start → Modul) statt einem — dafür ist nichts mehr angeschnitten und nichts versteckt. Die Kacheln werden nur AUSGEBLENDET, nicht abgemeldet: Favoriten, Reihenfolge und Anpinnen laufen unverändert weiter (Startmenü, Tablet, Desktop). #mpDockKi trägt dieselben Klassen wie eine Kachel — deshalb per :not() ausgenommen. */ html body nav.bottom-nav .nav-btn.dash-launch-tile:not(#mpDockKi):not(.mp-dock-laser):not([data-nav="view-dashboard"]) { display: none !important; } /* Home bleibt auch nach horizontalem Wischen direkt neben dem Startmenü. Der Abstand berücksichtigt Startknopf, dessen Mobil-Margin und Dock-Gap. */ html body nav.bottom-nav .nav-btn.dash-launch-tile[data-nav="view-dashboard"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: sticky !important; left: 62px !important; z-index: 3 !important; flex: 0 0 50px !important; width: 50px !important; min-width: 50px !important; max-width: 50px !important; padding: 2px !important; } /* Der Laser ist die einzige kontextuelle Modulaktion im Handy-Dock. Er erscheint nur im Aufmass; alle normalen Modul-Favoriten bleiben weiterhin im Startmenue und damit aus der kompakten Leiste heraus. */ html body.mp-view-aufmass nav.bottom-nav .mp-dock-laser:not([hidden]), html body.mp-view-view-aufmass nav.bottom-nav .mp-dock-laser:not([hidden]), html body.mp-laser-context nav.bottom-nav .mp-dock-laser:not([hidden]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 52px !important; flex-shrink: 0 !important; min-width: 52px !important; max-width: 52px !important; width: 52px !important; min-height: 52px !important; padding: 3px !important; overflow: visible !important; } /* Mit nur drei Knöpfen ist Platz — also bequeme Größen statt der gequetschten 44 px von vorhin. */ html body nav.bottom-nav .dash-launch-tile-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 14px !important; padding: 10px !important; } /* Auch das KI-Mikro folgt mobil dem quadratischen Dock-Raster. Die frühere Kombination aus 58×50-Außenmaß und 2/2/4-Padding presste das sichtbare Symbol im Hochformat auf 50×44 zusammen. */ html body nav.bottom-nav #mpDockKi { width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; min-height: 50px !important; padding: 0 !important; } html body nav.bottom-nav #mpDockKi .dash-launch-tile-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 15px !important; } /* Startknopf (Startmenü) und Fenster-Starter (Task-Bereich) sind zweitrangig — 38 px reichen, beide behalten ihre Funktion. KEIN Zusammenlegen: .mp-dsm-start öffnet das Startmenü (Module), .mp-dtb-start den Fenster-Launcher (Arbeitsfenster). */ html body nav.bottom-nav .mp-dsm-start { width: 46px !important; height: 46px !important; min-width: 46px !important; } html body nav.bottom-nav .mp-dtb-start, html body nav.bottom-nav .mp-dtb-start .mp-dtb-tile { width: 46px !important; height: 46px !important; min-width: 46px !important; } /* Lücke 5 statt 6 und Padding 8 statt 10: Damit passt die vierte Kachel. Nachgerechnet, nicht geschätzt — mit 6/10 fehlte GENAU 1 px (frei 209, gebraucht 210), und eine Kachel fiel wegen dieses einen Pixels weg. Die Leiste bleibt wischbar als Sicherheitsnetz; im Normalfall gibt es nichts zu wischen. */ html body nav.bottom-nav { gap: 8px !important; padding: 9px 10px !important; } /* Die Leiste ist ein fixed-Element mit left:50%, right:auto, width:auto. Shrink-to-fit rechnet gegen den Platz AB der Bildschirmmitte (bei 412 px nur 206 px) — ist der kleiner als der Inhalt, nimmt die Box die MIN-CONTENT-Breite. Und die liegt hier 16 px unter der echten Breite, weil der Task-Bereich `min-width:0` hat und damit unter seine Inhaltsbreite schrumpfen DARF (Kacheln und Mikro haben feste min-width, .mp-dtb nicht). Folge, mit einem offenen Fenster gemessen: Box 345,6 px bei 361,6 px Inhalt → das letzte Element (KI-Mikro) wurde von `overflow-x:auto` um 16 px angeschnitten. Nicht außerhalb des Bildschirms, aber angeschnitten — und genau so sieht es aus. `max-content` nimmt die ECHTE Inhaltsbreite. Gemessen: Überstand 0, Leiste 361,6 px, weiter mittig. `max-width` deckelt weiter auf 100vw-16, darüber greifen Wisch + Sticky-Anker unten. (flex-shrink:0 steht schon in mp-bottom-nav-premium.css:40 — es hilft hier nicht, weil min-width:0 die min-content-Rechnung bestimmt.) */ html body nav.bottom-nav { width: max-content !important; /* 16 px Rand je Seite statt 8: Die Glasplatte ist unten auf die Leisten-Box gesetzt (inset 0) — ohne diesen Rand klebte sie an der Bildschirmkante und die 26px-Ecken waren wieder abgeschnitten. */ max-width: calc(100vw - 32px) !important; } /* GLASPLATTE = LEISTEN-BOX (2026-07-30, zweite Runde). Die Platte richtete sich nach der Hülle ALLER Kinder (--mp-plate-l/-r aus core/mp-dock-home.js). Sobald die Leiste wischt — und mit allen angehefteten Favoriten wischt sie —, liegt diese Hülle weit außerhalb des Bildes, `fitPlate()` klemmt auf den Viewport, und die Platte wird randlos: genau der graue Balken von Kante zu Kante. Auf dem Handy ist die Hülle als Bezug ohnehin falsch: dort sitzt alles IN der Leiste (auf dem Desktop liegen Zahnrad und Mikro als fixed-Elemente daneben, dafür war die Rechnung gedacht). Also: Platte = Leisten-Box, punktgenau, egal wie weit der Inhalt scrollt. Gilt in JEDEM Dock-Stil, deshalb ohne :not()-Anker. */ html body nav.bottom-nav::before { left: 0 !important; right: 0 !important; } /* REIHENFOLGE DEKLARATIV FESTNAGELN. Sticky funktioniert nur, wenn die Anker wirklich an den Enden sitzen: `right:0` an einem Element, das ganz vorn liegt, tut nichts — es wischt einfach weg. Genau das war der Fall: gemessen kam das KI-Mikro als ERSTES Kind (Reihenfolge je nach Render-Rennen zwischen kiAnsEnde() in mp-dock-taskbar.js und einsortieren() in mp-dock-ki.js). Mit flex-order ist die Optik unabhängig davon, wer das Rennen gewinnt — und sie entspricht dem Desktop: Startknopf · Module · Task-Bereich · Mikro. (#mpDockKi ist selbst eine .dash-launch-tile; die ID-Regel gewinnt.) */ html body nav.bottom-nav .mp-dsm-start { order: 1 !important; } html body nav.bottom-nav .nav-btn.dash-launch-tile { order: 2 !important; } html body nav.bottom-nav .mp-dock-laser { order: 3 !important; } html body nav.bottom-nav .mp-dtb { order: 4 !important; } html body nav.bottom-nav #mpDockKi { order: 5 !important; } /* Der Startknopf klebt links, damit das Startmenü beim Wischen nicht wegrutscht — Gegenstück zu Task-Bereich und Mikro rechts. Und er bekommt einen EIGENEN Grund: er war vollständig durchsichtig (gemessen: background rgba(0,0,0,0)), sodass beim Wischen die Modul-Kacheln sichtbar hinter dem Pinsel-Logo durchgelaufen sind. Bewusst KEIN weißer Kasten (den hat Marcel am 29.07. abgelehnt), sondern derselbe Glas-Verlauf wie die Platte, eine Spur dichter — das liest sich als eingelassene Taste im Dock, nicht als Aufkleber. */ html body nav.bottom-nav .mp-dsm-start { position: sticky !important; left: 0 !important; z-index: 3 !important; background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), .96), rgba(var(--mp-f2-f0f4fa), 0.92)) !important; box-shadow: inset 0 0 0 .5px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .10) !important; } html.dark body nav.bottom-nav .mp-dsm-start, html.mp-dock-stil-dunkel body nav.bottom-nav .mp-dsm-start { background: linear-gradient(180deg, rgba(38, 46, 62, .96), rgba(24, 31, 44, .94)) !important; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .35) !important; } /* Gleiches Problem am rechten Anker: der Fenster-Starter im Task-Bereich war ebenfalls durchsichtig, die Kunden-Kachel lief sichtbar hinter seinem Gitter-Symbol durch. Gleiche Taste, gleicher Grund. */ html body nav.bottom-nav .mp-dtb-start .mp-dtb-tile { background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), .96), rgba(var(--mp-f2-f0f4fa), 0.92)) !important; box-shadow: inset 0 0 0 .5px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .10) !important; } html.dark body nav.bottom-nav .mp-dtb-start .mp-dtb-tile, html.mp-dock-stil-dunkel body nav.bottom-nav .mp-dtb-start .mp-dtb-tile { background: linear-gradient(180deg, rgba(38, 46, 62, .96), rgba(24, 31, 44, .94)) !important; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .35) !important; } /* SICHERHEITSNETZ: Sollte der Inhalt doch breiter werden als der Bildschirm (viele angepinnte Favoriten, mehrere offene Fenster), wischt die Leiste — dann dürfen Task-Bereich und Mikro NICHT mitwandern, sonst sucht man den Task-Knopf. Beide kleben rechts. Versatz 55px am Task-Bereich = Mikro (50) + Lücke (5), damit sich die zwei nie überlappen. Auf ≥768px macht das mp-window-launcher.css schon seit 29.07. — dort mit right:0 für beide. */ html body.mp-taskbar-on nav.bottom-nav #mpDockKi { position: sticky !important; right: 0 !important; z-index: 3 !important; } html body.mp-taskbar-on nav.bottom-nav .mp-dtb { position: sticky !important; right: 55px !important; z-index: 2 !important; } /* Mobil repraesentiert der Fenster-Starter den kompletten Taskbereich. Einzelne Task-Miniaturen machten die Leiste bei jedem neuen Tab breiter und schoben Start/Fenster/KI sichtbar uebereinander. Der Starter oeffnet dieselbe Fensterliste, daher geht keine Funktion verloren. */ html body nav.bottom-nav .mp-dtb-sep, html body nav.bottom-nav .mp-dtb-tasks { display: none !important; } html body.mp-taskbar-on nav.bottom-nav .mp-dtb { position: static !important; right: auto !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; padding: 0 !important; gap: 0 !important; } html body.mp-taskbar-on nav.bottom-nav #mpDockKi { position: static !important; right: auto !important; } /* ── GLASPLATTE (Marcel: „dieser Glashintergrund passt auch noch nicht so ganz auf dem Mobilen") ────────────────────────────────────────── Zwei Gründe, warum sie auf dem Handy als grauer Balken gelesen wurde: (1) Sie lief randlos von 0 bis 412 px, weil die Kinder-Hülle aus dem Bild ragte — das ist mit dem Platzbudget oben erledigt (gemessen: jetzt 15…398 px, also 15 px Luft auf JEDER Seite, die 26px-Ecken sind wieder sichtbar). (2) Die Füllung ist ein flaches Slate-Grau (rgba(148,163,184,.20)). Auf einem weißen Formular ist das schmutziges Grau, kein Glas. Auf dem großen Schirm fällt das kaum auf, auf 412 px ist die Platte fast das halbe Bild. Also: heller, mit Verlauf, feiner Lichtkante oben und tieferem Schatten — das hebt sie von der Seite ab statt sie zu überdecken. NUR im Stil „Standard": die Stile hell/dunkel färben die Leiste selbst (mp-dock-premium.js) und liegen dank z-index:-1 der Platte ohnehin darüber; der :not()-Anker macht das unmissverständlich. Tablets bleiben unangetastet — deren Dock ist abgenommen. */ html:not(.mp-dock-stil-hell):not(.mp-dock-stil-dunkel):not(.dark) body nav.bottom-nav::before { background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), .80) 0%, rgba(var(--mp-flaeche-rgb), .62) 46%, rgba(var(--mp-f3-dee5f0), .66) 100%) !important; /* Kante UND Schatten sind hier nicht Deko, sondern die Funktion: Die Platte ist hell und durchsichtig — über einem weißen Formular hätte sie sonst gar keinen Rand und die Icons schwebten im Nichts. Die feine dunkle Innenlinie (.5px) zieht die Kontur unabhängig davon, was hinter der Platte liegt. */ border: 1px solid rgba(255, 255, 255, .92) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(15, 23, 42, .07), 0 3px 10px rgba(15, 23, 42, .10), 0 20px 46px rgba(15, 23, 42, .22) !important; -webkit-backdrop-filter: blur(30px) saturate(170%) !important; backdrop-filter: blur(30px) saturate(170%) !important; } /* Dunkelmodus: gleiche Idee, nur andersherum — tiefes Glas mit Lichtkante, statt eines grauen Klotzes. */ html.dark:not(.mp-dock-stil-hell):not(.mp-dock-stil-dunkel) body nav.bottom-nav::before { background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 46%, rgba(2, 6, 14, .30) 100%), rgba(17, 24, 39, .62) !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 44px rgba(0, 0, 0, .5) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; backdrop-filter: blur(30px) saturate(150%) !important; } } /* ========================================================= MOBILE SEITENDOCK — gespeicherte Rechts-/Linksposition gilt auch auf Touchgeraeten. Nur die Position, kein Maus-Zoom. ========================================================= */ @media (max-width: 767.98px) { html[data-mp-dock-pos="left"] body nav.bottom-nav:not(.hidden-nav), html[data-mp-dock-pos="right"] body nav.bottom-nav:not(.hidden-nav) { display: flex !important; position: fixed !important; top: calc(50% + 28px) !important; bottom: auto !important; left: auto !important; right: auto !important; z-index: 13040 !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; box-sizing: border-box !important; max-height: calc(100dvh - 82px) !important; margin: 0 !important; padding: 7px !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; transform: translateY(-50%) !important; border-radius: 22px !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav:not(.hidden-nav) { left: 5px !important; } html[data-mp-dock-pos="right"] body nav.bottom-nav:not(.hidden-nav) { right: 5px !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav::-webkit-scrollbar, html[data-mp-dock-pos="right"] body nav.bottom-nav::-webkit-scrollbar { display: none; } html[data-mp-dock-pos="left"] body nav.bottom-nav .nav-btn.dash-launch-tile[data-nav="view-dashboard"], html[data-mp-dock-pos="right"] body nav.bottom-nav .nav-btn.dash-launch-tile[data-nav="view-dashboard"] { position: relative !important; left: auto !important; top: auto !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav .nav-btn.dash-launch-tile, html[data-mp-dock-pos="right"] body nav.bottom-nav .nav-btn.dash-launch-tile, html[data-mp-dock-pos="left"] body nav.bottom-nav .mp-dsm-start, html[data-mp-dock-pos="right"] body nav.bottom-nav .mp-dsm-start, html[data-mp-dock-pos="left"] body nav.bottom-nav .mp-dtb-start, html[data-mp-dock-pos="right"] body nav.bottom-nav .mp-dtb-start, html[data-mp-dock-pos="left"] body nav.bottom-nav .mp-dtb-start .mp-dtb-tile, html[data-mp-dock-pos="right"] body nav.bottom-nav .mp-dtb-start .mp-dtb-tile, html[data-mp-dock-pos="left"] body nav.bottom-nav #mpDockKi, html[data-mp-dock-pos="right"] body nav.bottom-nav #mpDockKi { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav .dash-launch-tile-icon, html[data-mp-dock-pos="right"] body nav.bottom-nav .dash-launch-tile-icon, html[data-mp-dock-pos="left"] body nav.bottom-nav #mpDockKi .dash-launch-tile-icon, html[data-mp-dock-pos="right"] body nav.bottom-nav #mpDockKi .dash-launch-tile-icon { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 8px !important; border-radius: 13px !important; } html[data-mp-dock-pos="left"] body nav.bottom-nav .dash-launch-tile-text, html[data-mp-dock-pos="right"] body nav.bottom-nav .dash-launch-tile-text { display: none !important; } }