/* mobilemenu.css v=11 * Praxis Ragnitz Mobile Hamburger Menu * Editorial style, Forest plus Gold, dunkel, lesbar * Stand 27.04.2026, Trefferflaeche des Hamburger-Knopfes am 06.08.2026 von * 40 auf 44 Punkt gebracht (Barrierefreiheits-Messung auf Handy und Tablet). * Der sichtbare Ring bleibt 40 Punkt, die Trefferflaeche waechst nach aussen. */ .mobile-menu-trigger { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 100px; width: 44px; height: 44px; padding: 0; background-clip: padding-box; flex-shrink: 0; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: border-color 0.3s ease, background 0.3s ease; } .mobile-menu-trigger:hover { border-color: var(--forest); background: rgba(42,74,56,0.04); } .mobile-menu-trigger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; } @media (max-width: 1024px) { .mobile-menu-trigger { display: inline-flex; } #nav .nav-links { display: none !important; } } .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(10, 22, 16, 0.98); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .mobile-menu-overlay.open { opacity: 1; visibility: visible; } .mobile-menu-panel { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; background-color: #18302A; background-image: linear-gradient(180deg, #1F3A30 0%, #14241B 100%); color: #F8F5EE; z-index: 9999; transform: translateX(100%); /* A11-5 (14.08.2026): nur per transform verschoben blieb das Panel fokussierbar; 11 unsichtbare Tab-Stopps auf jeder Seite. */ visibility: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45); } .mobile-menu-panel.open { transform: translateX(0); visibility: visible; } .mobile-menu-panel::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, #C9AD77 30%, #C9AD77 70%, transparent); opacity: 0; transition: opacity 0.7s ease 0.25s; pointer-events: none; } .mobile-menu-panel.open::before { opacity: 0.55; } .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(201, 173, 119, 0.18); flex-shrink: 0; } .mobile-menu-brand { display: flex; align-items: center; gap: 10px; } .mobile-menu-brand-mark { width: 34px; height: 34px; border-radius: 100px; background: linear-gradient(135deg, #C9AD77 0%, #B89B68 100%); color: #1C3125; display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; } .mobile-menu-brand-text strong { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: 14px; color: #F8F5EE; line-height: 1.15; } .mobile-menu-brand-text span { display: block; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(248, 245, 238, 0.55); margin-top: 2px; } .mobile-menu-close { width: 36px; height: 36px; border-radius: 100px; border: 1px solid rgba(248, 245, 238, 0.2); background: transparent; color: #F8F5EE; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.3s ease, transform 0.4s ease; } .mobile-menu-close:hover { border-color: #C9AD77; transform: rotate(90deg); } .mobile-menu-close svg { width: 14px; height: 14px; } .mobile-menu-nav { flex: 1 1 auto; padding: 8px 22px; overflow-y: auto; } .mobile-menu-list { list-style: none; margin: 0; padding: 0; } .mobile-menu-item { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: calc(0.04s * var(--i, 0) + 0.15s); } .mobile-menu-panel.open .mobile-menu-item { opacity: 1; transform: translateY(0); } .mobile-menu-item + .mobile-menu-item { border-top: 1px solid rgba(201, 173, 119, 0.12); } .mobile-menu-link { display: flex; align-items: center; gap: 14px; padding: 11px 0; text-decoration: none; color: #F8F5EE; position: relative; transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu-link:active { padding-left: 4px; } .mobile-menu-num { font-family: 'Fraunces', serif; font-size: 10.5px; letter-spacing: 0.2em; color: #C9AD77; min-width: 22px; font-weight: 500; align-self: center; } .mobile-menu-text { flex: 1 1 auto; min-width: 0; } .mobile-menu-label { display: block; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; color: #F8F5EE; } .mobile-menu-sub { display: block; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.01em; color: rgba(248, 245, 238, 0.66); margin-top: 2px; line-height: 1.35; } .mobile-menu-arrow { width: 16px; height: 16px; color: #C9AD77; flex-shrink: 0; align-self: center; opacity: 0.85; transition: transform 0.4s ease, opacity 0.3s ease; } .mobile-menu-link:hover .mobile-menu-arrow, .mobile-menu-link:active .mobile-menu-arrow { transform: translateX(4px); opacity: 1; } body.mobile-menu-open { overflow: hidden; } @media (max-width: 380px) { .mobile-menu-label { font-size: 17px; } .mobile-menu-link { padding: 10px 0; } .mobile-menu-head { padding: 12px 18px; } .mobile-menu-nav { padding: 6px 18px; } } /* ============================================================ MENUE-FIX 2026-06-19 — Mobiles Menue blickdicht + lesbar ------------------------------------------------------------ Ursache Problem 1: index.html #mmf-v11 will den dunklen Hintergrund per !important erzwingen, zielt aber auf div[class~="mobile-menu-panel"]. Das Panel ist ein