/* ================================================================ em_nav.css – Einachser-Marktplatz Eigenständige CSS-Datei für Header, Hamburger-Menü und Footer. Einbinden im jeder Seite mit: ================================================================ */ /* ── Header / Nav-Grundstruktur ──────────────────────────────── */ header { background:linear-gradient(135deg,#b71c1c 0%,#1b5e20 100%); color:white; padding:15px 0; box-shadow:0 2px 10px rgba(0,0,0,0.15); } nav { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap; position:static; } .em-nav-logo { color:white; text-decoration:none; font-weight:800; font-size:20px; display:flex; align-items:center; gap:6px; white-space:nowrap; } .em-logo-text { display:inline; } /* ── Hamburger-Button (immer sichtbar, Desktop UND Mobil) ────── */ .em-menu-wrap { position:relative; } .em-hamburger { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); color:white; padding:9px 16px; border-radius:7px; font-size:15px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .2s; } .em-hamburger:hover { background:rgba(255,255,255,0.28); } .em-hamburger-icon { font-size:18px; line-height:1; } /* ── Abdunkelung hinter dem Menü ──────────────────────────────── */ .em-menu-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:1999; } .em-menu-overlay.active { display:block; } /* ── Menü-Panel: einfaches Ein-/Ausblenden ───────────────────── Bewusst KEIN position:fixed-Trick, KEIN right:-100%, KEIN transform -> unabhängig von Bildschirmbreite, kann die alten RGM-Fehlerklassen technisch nicht wiederholen. */ .em-menu-panel { display:none; position:absolute; top:calc(100% + 10px); right:0; width:320px; max-width:90vw; max-height:80vh; overflow-y:auto; background-color:#ffffff; background-image:none; color:#333; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,0.3); z-index:2000; padding:8px; } .em-menu-panel.active { display:block; } .em-menu-kopf { display:flex; justify-content:space-between; align-items:center; padding:8px 10px 12px; color:#999; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid #f0f0f0; margin-bottom:6px; } .em-menu-close { background:none; border:none; color:#999; font-size:24px; cursor:pointer; line-height:1; padding:0 4px; } .em-menu-close:hover { color:#333; } .em-menu-panel a { display:block; padding:12px 14px; color:#333; text-decoration:none; border-radius:8px; font-size:15px; transition:background .15s; } .em-menu-panel a:hover { background:#fce4ec; } .em-menu-panel a.em-aktiv { background:#fce4ec; color:#b71c1c; font-weight:700; } .em-menu-sep { height:1px; background:#f0f0f0; margin:8px 6px; } .em-menu-label { padding:8px 14px 2px; font-size:11px; font-weight:700; text-transform:uppercase; color:#aaa; letter-spacing:.5px; } @media (max-width:480px) { .em-nav-logo { font-size:17px; } .em-logo-text { display:none; } .em-hamburger-text { display:none; } .em-hamburger { padding:9px 12px; } .em-menu-panel { width:92vw; } } /* ── Fußzeile ─────────────────────────────────────────────────── */ .em-footer { background:linear-gradient(135deg,#7f0000 0%,#0a3d0a 100%); color:white; padding:30px 0; margin-top:60px; text-align:center; } .em-footer-logo { font-size:18px; font-weight:bold; margin-bottom:12px; } .em-footer-links a { color:rgba(255,255,255,0.8); text-decoration:none; margin:0 4px; } .em-footer-links a:hover { color:white; } .em-footer-copy { font-size:12px; color:rgba(255,255,255,0.6); margin-top:10px; }