/* ========================================================================== 01 – KOPFBEREICH: Öffnungszeiten-Leiste, Hauptnavigation, mobiles Menü ========================================================================== Gehört zu: header.php Verhalten (Hamburger auf/zu, Sticky-Header beim Scrollen, Öffnungszeiten- Uhr) steckt in assets/js/header-navigation.js und assets/js/oeffnungszeiten.js. ========================================================================== */ /* -------------------------------------------------------------------- ÖFFNUNGSZEITEN-LEISTE (ganz oben, über der eigentlichen Kopfzeile) Grüner/roter Punkt + Text werden per JavaScript live befüllt, siehe assets/js/oeffnungszeiten.js. Die Uhrzeiten selbst kommen aus den Website-Einstellungen im Backend. -------------------------------------------------------------------- */ .oh-bar { background: var(--blue); padding: 8px 40px; display: flex; align-items: center; justify-content: flex-start; font-size: 12px; font-family: 'PT Sans', Arial, sans-serif; } .oh-status { display: flex; align-items: center; gap: 8px; } .oh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .oh-dot.open { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,.5); } .oh-dot.closed { background: #EF4444; box-shadow: 0 0 6px rgba(239,68,68,.4); } .oh-text { font-weight: 700; letter-spacing: .04em; } .oh-text.open { color: #22C55E; } .oh-text.closed { color: #EF4444; } .oh-detail { color: rgba(255,255,255,.85); font-size: 11.5px; } /* -------------------------------------------------------------------- KOPFZEILE position:sticky hält den Header beim Scrollen oben fest. Die Übergänge (transition) sorgen dafür, dass er beim Zusammenschrumpfen (Klasse .scrolled, siehe scroll-effekte.js) weich statt ruckartig kleiner wird. -------------------------------------------------------------------- */ .hdr { position: sticky; top: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: height .25s ease, box-shadow .25s ease; } .hdr-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 72px; } .hdr-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .hdr-logo img { height: 46px; width: auto; transition: height .25s ease; } /* Kompakter Zustand, sobald weiter als 40px runtergescrollt wurde (Klasse wird von assets/js/scroll-effekte.js gesetzt). */ .hdr.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.1); } .hdr.scrolled .hdr-inner { height: 56px; } .hdr.scrolled .hdr-logo img { height: 36px; } /* -------------------------------------------------------------------- HAUPTNAVIGATION MIT DROPDOWNS Öffnet rein per CSS (:hover) – kein Klick nötig. Die Menüpunkte selbst kommen aus dem WordPress-Menü "Hauptnavigation" (Design > Menüs), gerendert über inc/class-nav-walker.php. -------------------------------------------------------------------- */ .nav { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; padding: 0 16px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--gray); padding: 8px 11px; text-decoration: none; border-radius: 6px; white-space: nowrap; transition: color .18s, background .18s; cursor: pointer; background: none; border: none; font-family: 'PT Sans', Arial, sans-serif; } .nav-link:hover, .nav-item:hover .nav-link { color: var(--blue); background: var(--blue-lt); } .nav-link svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform .2s; color: var(--gray); } .nav-item:hover .nav-link svg { transform: rotate(180deg); color: var(--blue); } /* Pfeil dreht sich beim Öffnen */ .dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.12); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 100; overflow: hidden; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown--wide { min-width: 260px; } /* automatisch bei 3+ Unterpunkten, siehe class-nav-walker.php */ .dropdown-section { padding: 8px 0; } .dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13.5px; font-weight: 400; color: var(--black); text-decoration: none; transition: background .15s, color .15s; font-family: 'PT Sans', Arial, sans-serif; } .dropdown-link:hover { background: var(--blue-lt); color: var(--blue); } .dropdown-link svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; opacity: .7; } /* -------------------------------------------------------------------- RECHTER BEREICH: Sprachumschalter, CTA-Button, Hamburger -------------------------------------------------------------------- */ .hdr-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .lang-switch { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .lang-btn { display: inline-block; font-size: 12px; font-weight: 700; color: var(--gray); padding: 6px 10px; background: none; border: none; cursor: pointer; font-family: 'PT Sans', Arial, sans-serif; transition: background .15s, color .15s; text-decoration: none; } .lang-btn.active { background: var(--blue); color: var(--white); } .lang-btn:not(.active):hover { background: var(--gray-lt); } .hdr-cta { background: var(--blue); color: var(--white); font-size: 13px; font-weight: 700; padding: 10px 18px; border: none; cursor: pointer; border-radius: 8px; white-space: nowrap; font-family: 'PT Sans', Arial, sans-serif; transition: background .18s; } .hdr-cta:hover { background: var(--blue-dk); } a.hdr-cta { justify-content: center; } /* falls als statt