/* * KW Biohof – Live-Such-Modal (Command-Palette). * Liegt im Top-Layer am , also AUSSERHALB der Elementor-Defense – Farben für * Knopf/Link daher hier mit .biohof-search-Spezifität explizit (gegen Theme-Pink). * Tokenbasiert (Dark Mode automatisch). Bewegung folgt --biohof-duration. */ .biohof-search { inline-size: min(40rem, 92vw); max-block-size: min(72vh, 42rem); margin: min(12vh, 7rem) auto auto; padding: 0; border: 1px solid var(--biohof-color-border); border-radius: var(--biohof-radius-lg); background: var(--biohof-color-surface); color: var(--biohof-color-text); box-shadow: var(--biohof-shadow-lg); overflow: hidden; } /* Schleier: in beiden Farbschemata dunkel (Token-Wechsel wie bei der Lightbox – text-strong kippt im Dark Mode auf hell, daher dort bg-Token). */ .biohof-search::backdrop { background: color-mix(in srgb, var(--biohof-color-text-strong) 60%, transparent); backdrop-filter: blur(2px); } @media (prefers-color-scheme: dark) { .biohof-search::backdrop { background: color-mix(in srgb, var(--biohof-color-bg) 88%, transparent); } } .biohof-search[open] { display: flex; } .biohof-search__panel { display: flex; flex-direction: column; inline-size: 100%; min-block-size: 0; } /* ── Kopf: Lupe + Eingabe + Schließen ───────────────────────────────────── */ .biohof-search__head { display: flex; align-items: center; gap: var(--biohof-space-sm); padding: var(--biohof-space-sm) var(--biohof-space-md); border-block-end: 1px solid var(--biohof-color-border); } .biohof-search__icon { flex: none; inline-size: 1.4rem; block-size: 1.4rem; color: var(--biohof-color-primary); background-color: currentColor; -webkit-mask: var(--biohof-search-glyph) center / contain no-repeat; mask: var(--biohof-search-glyph) center / contain no-repeat; --biohof-search-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .biohof-search .biohof-search__input { flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent; color: var(--biohof-color-text-strong); font-family: var(--biohof-font-body); font-size: var(--biohof-fs-500); line-height: var(--biohof-line-snug); padding-block: var(--biohof-space-2xs); } .biohof-search .biohof-search__input::placeholder { color: var(--biohof-color-text-muted); opacity: 1; } .biohof-search .biohof-search__input:focus { outline: none; } .biohof-search .biohof-search__close { flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--biohof-color-text); cursor: pointer; border-radius: var(--biohof-radius-sm); font-size: var(--biohof-fs-500); line-height: 1; } /* ── Trefferliste ───────────────────────────────────────────────────────── */ .biohof-search__results { list-style: none; margin: 0; padding: var(--biohof-space-2xs); overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; } .biohof-search__results:empty { display: none; } .biohof-search__option { display: flex; align-items: baseline; justify-content: space-between; gap: var(--biohof-space-sm); padding: var(--biohof-space-xs) var(--biohof-space-sm); border-radius: var(--biohof-radius-md); cursor: pointer; color: var(--biohof-color-text); } .biohof-search__option-title { font-weight: var(--biohof-weight-medium); overflow-wrap: anywhere; } .biohof-search__option-type { flex: none; font-size: var(--biohof-fs-300); color: var(--biohof-color-text-muted); } /* Tastatur-Auswahl (aria-activedescendant) – Maus-Hover nur auf Zeigergeräten. */ .biohof-search__option[aria-selected='true'] { background: color-mix(in srgb, var(--biohof-color-primary) 14%, transparent); color: var(--biohof-color-primary-hover); } .biohof-search__option[aria-selected='true'] .biohof-search__option-type { color: var(--biohof-color-primary-hover); } @media (hover: hover) { .biohof-search__option:hover { background: color-mix(in srgb, var(--biohof-color-primary) 10%, transparent); } } /* ── Hinweis / leer / „Alle Ergebnisse" ─────────────────────────────────── */ .biohof-search__hint { margin: 0; padding: var(--biohof-space-md); color: var(--biohof-color-text-muted); font-size: var(--biohof-fs-300); } .biohof-search__hint[hidden] { display: none; } .biohof-search .biohof-search__all { display: block; padding: var(--biohof-space-sm) var(--biohof-space-md); border-block-start: 1px solid var(--biohof-color-border); color: var(--biohof-color-primary-hover); text-decoration: none; font-size: var(--biohof-fs-300); font-weight: var(--biohof-weight-medium); } .biohof-search .biohof-search__all[hidden] { display: none; } /* ── Hover/Fokus (Top-Layer: explizit gegen Theme-Pink) ─────────────────── */ @media (hover: hover) { .biohof-search .biohof-search__close:hover, .biohof-search .biohof-search__all:hover { background: color-mix(in srgb, var(--biohof-color-primary) 12%, transparent); color: var(--biohof-color-primary-hover); } } .biohof-search .biohof-search__close:focus-visible, .biohof-search .biohof-search__all:focus-visible { outline: 3px solid var(--biohof-color-primary); outline-offset: -3px; } /* Sanftes Erscheinen – nur, wenn Bewegung erwünscht ist. */ @media (prefers-reduced-motion: no-preference) { .biohof-search[open] { animation: biohof-search-in var(--biohof-duration) var(--biohof-ease); } @keyframes biohof-search-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } }