/* Header-Suche — Live-Vorschläge Dropdown */ /* Erzwingt einen Positionierungs-Anker direkt am Suchformular — ohne das würde .mp-header-search__results (position:absolute) sich gegen einen entfernten Vorfahren positionieren (z.B. das volle Kadence-Modal) statt direkt unter dem Eingabefeld zu erscheinen */ .search-form { position: relative; } .mp-header-search__results { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; margin-top: 4px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); max-height: 360px; overflow-y: auto; } .mp-header-search__results.mp-visible { display: block; } .mp-header-search__list { list-style: none; margin: 0; padding: 4px 0; } .mp-header-search__item { margin: 0; } .mp-header-search__link { display: block; padding: 10px 16px; color: #1a1a1a; text-decoration: none; font-size: 15px; line-height: 1.4; } .mp-header-search__link:hover, .mp-header-search__link:focus { background: rgba(46, 94, 46, 0.08); } .mp-header-search__loading, .mp-header-search__empty { padding: 14px 16px; font-size: 14px; color: rgba(0, 0, 0, 0.6); } /* Kadence-Modal-Hintergrund hinter dem Suchfeld: transparenter + primärgrün statt dunkel. "body" vorangestellt erhöht die Spezifität bewusst, da Kadences eigene Inline-Regel (gleicher Selektor #search-drawer .drawer-inner) im NACH dieser Datei lädt und bei gleicher Spezifität sonst gewinnen würde. */ body #search-drawer .drawer-inner { background: rgba(46, 94, 46, 0.7); } /* Eingabefeld: weißer Hintergrund statt transparent/dunkel im Modal, kein Durchschimmern. Kadences echter Selektor ist "#search-drawer .drawer-inner input.search-field" (1 ID + 2 Klassen + Element) — muss exakt mitgegangen werden, sonst verliert unsere Regel trotz "body"-Praefix die Spezifitaet. */ body #search-drawer .drawer-inner input.search-field, body #search-drawer .drawer-inner input.search-field:focus { background-color: #ffffff; opacity: 1; color: #1a1a1a; } /* Fokus-Schatten nutzt bei Kadence "currentColor" (box-shadow:5px 5px 0px 0px currentColor) — da unsere Textfarbe jetzt schwarz ist, wird der Schatten explizit auf Grau gesetzt statt currentColor zu folgen */ body #search-drawer .drawer-inner input.search-field:focus { box-shadow: 5px 5px 0px 0px #9a9a9a; } /* Natives "X"-Löschen-Icon im Suchfeld: schwarz statt unsichtbar/hell auf Weiß, mit Pointer + Grün-Hover. Webkit-Filter-Trick zum Einfärben eines nativ-gerenderten Icons: brightness(0) macht es erst schwarz, die restliche Filterkette auf Hover faerbt es Richtung Primärgrün (#2e5e2e) statt echter Farbeigenschaft, da ::-webkit-search-cancel-button kein color/background unterstützt. */ body #search-drawer .drawer-inner input.search-field::-webkit-search-cancel-button { filter: brightness(0) saturate(100%); opacity: 0.7; cursor: pointer; } body #search-drawer .drawer-inner input.search-field::-webkit-search-cancel-button:hover { filter: brightness(0) saturate(100%) invert(31%) sepia(53%) saturate(518%) hue-rotate(70deg) brightness(94%) contrast(92%); opacity: 1; } /* Lupen-Icon im Suchfeld: schwarz statt hellgrau, Hover auf Primärgrün statt Weiß (Kadence-Default macht es bei Hover auf den Submit-Button weiß — hier überschrieben) */ body #search-drawer .drawer-inner .kadence-search-icon-wrap { color: #1a1a1a; cursor: pointer; } body #search-drawer .drawer-inner .search-submit[type=submit]:hover ~ .kadence-search-icon-wrap, body #search-drawer .drawer-inner button[type=submit]:hover ~ .kadence-search-icon-wrap { color: var(--mp-color-primary, #2e5e2e); } /* Mobile-Hauptmenü-Drawer (#mobile-drawer): Kadence liefert denselben dunklen Hintergrund (rgba(9,12,16,0.97)) wie beim Such-Modal — auf helles Design-System-Farbschema umgestellt. "body"-Präfix nötig, da Kadences eigene Inline-Regel mit identischem Selektor nach dieser Datei im lädt. */ body #mobile-drawer .drawer-inner { background: var(--mp-color-white, #ffffff); } body #mobile-drawer .mobile-navigation ul li > a, body #mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--mp-color-dark, #1e1e1e); } body #mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, body #mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a { border-bottom: 1px solid var(--mp-color-bg, #f4f8f2); } body #mobile-drawer .drawer-header .drawer-toggle { color: var(--mp-color-dark, #1e1e1e); }