/* Site-wide search — see assets/search/search.js for the behaviour. A fixed, top-anchored overlay rather than a dropdown positioned under the trigger button on purpose: the trigger sits inside one of six different header markups across this site (the legacy Elementor header plus five separate page-generator functions, see scripts/build-search-index.js's header notes), each a different width and layout. A fixed overlay needs no per-header anchor math and looks identical everywhere it appears. */ .vm-search { --vm-red: #94152b; --vm-red-dark: #700f2b; --vm-ink: #241417; --vm-body: #4a4143; --vm-line: #e7dfe0; --vm-tint: #faf7f7; } /* A floating trigger, not a nav-bar item, on purpose. This site has at least six independent places that render header markup (the legacy Elementor theme plus five separate page-generator functions — see scripts/build-search-index.js's header notes), and on at least one measured page the "Lösungen" nav link alone appears 32 times across sections that are not all the visible header. Anchoring to any of that structure would mean either missing pages or duplicating triggers in places that are not the nav. A fixed corner button needs exactly one injection point — right after opens — and looks identical on every page regardless of which of the six generators built it. */ .vm-search-toggle { position: fixed; /* scripts/inject-language-switcher.js already owns top:16px;right:16px (#vm-lang-switch) on every page. Stacked directly below it rather than placed beside it — the switch's pill width depends on its own font and padding, which is a number to keep re-deriving every time either widget changes; a fixed vertical offset from a fixed top offset needs no such estimate and cannot drift out of sync with it. */ top: 58px; right: 16px; z-index: 9998; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--vm-line); background: #fff; color: var(--vm-ink); cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(36, 20, 23, 0.1); } .vm-search-toggle:hover { border-color: var(--vm-red); color: var(--vm-red); } .vm-search-toggle svg { width: 17px; height: 17px; display: block; } @media (max-width: 640px) { .vm-search-toggle { top: 10px; right: 10px; width: 34px; height: 34px; } } .vm-search-panel { position: fixed; inset: 0; z-index: 10000; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 20px 20px; background: rgba(36, 20, 23, 0.42); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .vm-search-panel[hidden] { display: none; } .vm-search-box { width: 100%; max-width: 640px; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(36, 20, 23, 0.28); overflow: hidden; max-height: 74vh; display: flex; flex-direction: column; } .vm-search-field { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--vm-line); flex: 0 0 auto; } .vm-search-field svg { width: 19px; height: 19px; color: var(--vm-body); flex: 0 0 auto; } .vm-search-input { flex: 1 1 auto; border: none; outline: none; font-size: 17px; font-family: inherit; color: var(--vm-ink); background: transparent; } .vm-search-input::placeholder { color: #9c9092; } .vm-search-close { flex: 0 0 auto; border: none; background: var(--vm-tint); color: var(--vm-body); border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; } .vm-search-close:hover { background: var(--vm-line); } .vm-search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1 1 auto; } .vm-search-results[hidden] { display: none; } .vm-search-empty { padding: 24px 16px; text-align: center; color: var(--vm-body); font-size: 14.5px; } .vm-search-result a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; } .vm-search-result.is-active a, .vm-search-result a:hover { background: var(--vm-tint); } .vm-search-type { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-red); } .vm-search-result strong { font-size: 15px; font-weight: 700; color: var(--vm-ink); line-height: 1.35; } .vm-search-result strong mark { background: none; color: var(--vm-red); font-weight: 700; padding: 0; } .vm-search-excerpt { font-size: 13px; color: var(--vm-body); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vm-search-excerpt mark { background: none; color: var(--vm-ink); font-weight: 700; padding: 0; } @media (max-width: 640px) { .vm-search-panel { padding: 0; align-items: stretch; } .vm-search-box { max-width: none; max-height: none; height: 100%; border-radius: 0; } }