/* * Mobiles Navigationsmenü — Telefüchse * Die Seite blendet ab ≤860px die Desktop-Navigation aus, hatte aber keinen * Ersatz. Diese Datei + mobile-menu.js liefern Hamburger-Button + Klappmenü. * Im eingebunden (render-blocking), damit die überlaufende CTA-Leiste * gar nicht erst aufblitzt. Nutzt die CSS-Variablen der Seite (mit Fallback). */ .tfx-burger { display: none; } @media (max-width: 860px) { /* Desktop-CTA (Telefon + Button) ausblenden — Inhalte wandern ins Klappmenü */ .nav .nav-cta { display: none !important; } .tfx-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-left: auto; padding: 11px; border: 0; background: transparent; cursor: pointer; border-radius: 9px; -webkit-tap-highlight-color: transparent; } .tfx-burger:hover { background: var(--bg, #F5F7F8); } .tfx-burger span { display: block; height: 2px; width: 100%; background: var(--ink, #1A222B); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .tfx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tfx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tfx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (min-width: 861px) { .tfx-mobnav { display: none !important; } } .tfx-mobnav { position: fixed; left: 0; right: 0; top: 72px; /* per JS auf die echte Header-Höhe gesetzt */ background: #fff; border-bottom: 1px solid var(--line, #E4E7EB); box-shadow: 0 14px 34px rgba(26, 34, 43, .13); padding: 6px 24px 24px; z-index: 49; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .22s ease, visibility .22s; max-height: calc(100vh - 72px); overflow-y: auto; } .tfx-mobnav.is-open { transform: none; opacity: 1; visibility: visible; } .tfx-mobnav-links { display: flex; flex-direction: column; } .tfx-mobnav-links a { padding: 15px 4px; font-size: 18px; font-weight: 600; color: var(--ink, #1A222B); border-bottom: 1px solid #F1F3F5; } .tfx-mobnav-links a:active { color: var(--red, #A42C1C); } .tfx-mobnav-cta { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .tfx-mobnav-cta .phone { font-weight: 800; color: var(--ink, #1A222B); font-size: 17px; text-align: center; } .tfx-mobnav-cta .phone span { display: block; font-size: 12px; font-weight: 500; color: var(--gray, #5B6770); } .tfx-mobnav-cta .btn { display: block; text-align: center; } body.tfx-menu-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .tfx-mobnav { transition: none; } }