/* =========================== Mobile & Tablet (≤1024px) =========================== */ @media screen and (max-width: 1024px) { /* Header/Navi oben halten, eigener Stack */ header { position: sticky; top: 0; z-index: 22000 !important; isolation: isolate; } .navbar { width: 100%; margin: 0; border-radius: 0; position: relative; min-height: 56px; z-index: 22010 !important; } /* ---------- Logo & Burger ---------- */ /* Großes foxcom-Logo verstecken, stattdessen Favicon zeigen */ .logo-title .logo-image { display: none !important; } /* Den Link selbst als kompaktes Logo (Favicon) nutzen */ .logo-title a { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: block; width: 40px; /* ggf. 32–48px anpassen */ height: 40px; background-image: url("Favicon.png"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); } /* Burger mittig */ .mobile-toggle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 44px; font-size: 26px; line-height: 1; user-select: none; cursor: pointer; padding: 6px 8px; border-radius: 10px; z-index: 22015; /* unter Panel, über Navbar */ touch-action: manipulation; } /* ---------- Slide-in Menü ---------- */ .nav-links { position: fixed; top: 0; left: 0; height: 100vh; width: 80vw; max-width: 360px; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: stretch; padding: 16px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); will-change: transform; transition: transform .28s ease-in-out; z-index: 23000 !important; /* über Content */ } .nav-links.open { transform: translateX(0); } /* Schließen-Overlay (kommt per JS ins ) */ #nav-close-overlay { z-index: 24000 !important; pointer-events: auto !important; } /* alter Close-Eintrag in der UL ausschalten */ .nav-links li.close-menu { display: none !important; } /* ---------- Menüeinträge ---------- */ .nav-links > li { position: relative; width: 100%; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; } .nav-links > li > span, .nav-links > li > a { display: block; width: 100%; text-align: left; font-size: 18px; font-weight: 700; touch-action: manipulation; } /* ---------- Dropdowns als Akkordeon ---------- */ /* Desktop-Hover auf Mobile deaktivieren */ .nav-links > li:hover > .dropdown-content, .nav-links > li:focus-within > .dropdown-content { display: none !important; } .dropdown-content { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; min-width: 100% !important; width: 100% !important; display: none !important; background: rgba(255,255,255,.06); border-radius: 8px; margin-top: 8px; padding: 8px 12px; z-index: 23500 !important; /* über evtl. Stacking-Contexts */ } .dropdown-content.open { display: block !important; } .dropdown-content li { padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.15); } .dropdown-content li:last-child { border-bottom: none; } .dropdown-content a { display: block; color: #fff; text-decoration: none; } /* ---------- Wenn Menü offen: Content klickdurchlässig ---------- */ /* (setzt voraus, dass JS die Klasse body.nav-open setzt/löscht) */ body.nav-open #main-wrapper, body.nav-open #east, body.nav-open #east .east-carousel, body.nav-open #east .east-head, body.nav-open #east .east-footer { pointer-events: none !important; } body.nav-open .nav-links, body.nav-open #nav-close-overlay { pointer-events: auto !important; } /* ---------- East-Bereich sicher UNTER der Navi ---------- */ #east, #east .east-head, #east .east-header, /* falls irgendwo noch

vorkommt */ #east .east-carousel, #east .east-track, #east .east-item, #east .east-fade, #east .east-footer, #east .east-foot { position: relative; z-index: 1 !important; } /* ---------- „Über …“ mobil: Bild rechts, klein ---------- */ .ueber-container{ display: grid !important; grid-template-columns: 1fr 140px; /* Text | Bild */ gap: 12px; align-items: start; } .ueber-text{ grid-column: 1; } .ueber-image{ grid-column: 2; justify-self: end; } .ueber-image img{ width: 140px; height: auto; border-radius: 10px; } } /* =========================== Landscape (≤1024px) =========================== */ @media screen and (max-width: 1024px) and (orientation: landscape) { .navbar { position: fixed; top: 0; left: 0; } #main-wrapper { margin-top: 70px; } .ueber-image img { max-width: 300px; } } /* =========================== Tablet-Feinschliff (769–1024px) =========================== */ @media screen and (min-width: 769px) and (max-width: 1024px) { .nav-links > li > span, .nav-links a { font-size: 16px; padding: 8px 16px; } .ueber-image img { max-width: 320px; height: auto; } } /* =========================== Desktop (≥1025px): Rückbau =========================== */ @media screen and (min-width: 1025px) { /* Menü zurück in die Topbar */ .nav-links { position: static !important; left: auto !important; top: auto !important; height: auto !important; width: auto !important; background: transparent !important; flex-direction: row !important; overflow: visible !important; transition: none !important; z-index: auto !important; transform: none !important; will-change: auto !important; } /* Close-Pfeil nie auf Desktop */ .nav-links li.close-menu { display: none !important; } /* „Über …“: klassisches 2-Spalten-Layout */ .ueber-container { display: flex !important; align-items: flex-start; gap: 20px; text-align: left; } .ueber-text { flex: 2; } .ueber-image img { flex: 1; max-width: 350px; height: auto; border-radius: 10px; cursor: pointer; } } /* =========================== Hotfix: :hover vs .open (Mobile) =========================== */ @media (max-width: 1024px){ .dropdown-content { display: none !important; } .dropdown-content.open { display: block !important; } .nav-links > li:hover > .dropdown-content.open, .nav-links > li:focus-within > .dropdown-content.open { display: block !important; } }