/* ========================================= Such-Overlay ========================================= */ #search-megamenu.search-mega-overlay { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1000; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.16); padding: 20px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; /* kein horizontaler Scrollbalken */ } /* HENI-Farben (falls noch nicht vorhanden) */ .text-heni-blue { color: var(--color-primary); } :root { --divider-color: #e5e7eb; } /* ~gray-200 */ /* ========================================= Grid (mit .cols-[1..4] vom JS) + Breakpoints ========================================= */ #search-megamenu .mega-grid { display: grid; gap: 24px; } /* Desktop: Spaltenzahl laut Klasse */ #search-megamenu .mega-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #search-megamenu .mega-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #search-megamenu .mega-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #search-megamenu .mega-grid.cols-1 { grid-template-columns: 1fr; } /* Divider (vertikal) – Desktop */ #search-megamenu .mega-col { padding-left: 24px; border-left: 1px solid var(--divider-color); } /* Erste Spalte jeder Reihe ohne linke Linie – abhängig von .cols-* */ #search-megamenu .mega-grid.cols-4 .mega-col:nth-child(4n + 1), #search-megamenu .mega-grid.cols-3 .mega-col:nth-child(3n + 1), #search-megamenu .mega-grid.cols-2 .mega-col:nth-child(2n + 1), #search-megamenu .mega-grid.cols-1 .mega-col:nth-child(1) { border-left: none; padding-left: 0; } /* ≤1200px: immer 2 Spalten erzwingen (überschreibt .cols-*) */ @media (max-width: 1200px) { #search-megamenu .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #search-megamenu .mega-col { border-left: 1px solid var(--divider-color); padding-left: 24px; } #search-megamenu .mega-col:nth-child(2n + 1) { border-left: none; padding-left: 0; } } /* ≤640px: 1 Spalte + horizontale Divider */ @media (max-width: 640px) { #search-megamenu .mega-grid { grid-template-columns: 1fr !important; } #search-megamenu .mega-col { border-left: none; padding-left: 0; border-top: 1px solid var(--divider-color); padding-top: 14px; margin-top: 14px; } #search-megamenu .mega-col:first-child { border-top: none; padding-top: 0; margin-top: 0; } } /* ========================================= Spalten / Überschriften ========================================= */ #search-megamenu .mega-col-title { /* Tailwind "font-semibold" kommt per JS als Klasse dazu */ font-size: 0.95rem; margin: 0 0 10px; } /* Listen/Abstände */ #search-megamenu .mega-col-list { list-style: none; margin: 0; padding: 0; } #search-megamenu .mega-item + .mega-item { margin-top: 12px; } /* ========================================= Einträge ========================================= */ /* ohne Bild: 1 Spalte; mit Bild: 80px + Text */ #search-megamenu .mega-link { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; text-decoration: none; padding: 10px 12px; border-radius: 8px; line-height: 1.35; } #search-megamenu .mega-link.has-thumb { grid-template-columns: 80px 1fr; } #search-megamenu .mega-link:hover { background: rgba(0,0,0,.04); } /* Bild max 80×80, Seitenverhältnis wahren */ #search-megamenu .mega-thumb { max-width: 80px; max-height: 80px; width: auto; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); } /* Textfluss robust (keine harten Wortumbrüche) */ #search-megamenu .mega-text { display: grid; } #search-megamenu .mega-primary { font-size: 0.95rem; color: #111; white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: auto; /* empfohlen */ } #search-megamenu .mega-sub { font-size: 0.8rem; color: #666; } /* Highlight der Treffer */ #search-megamenu mark.hl { padding: 0 .1em; border-radius: .2em; background: rgba(0, 80, 159, .14); /* HENI-Blau light (#00509f) */ color: inherit; }