/* ANRO Suche UI (.ansu) - Suchpanel am Kopf-Suchfeld, bodenschutz24.de
 * Regeln: nur px, keine rem (Wurzelschrift springt: 15px@1440, 19.85px@390), keine :root-Variablen,
 * keine Theme-Klasse umdefiniert, eigener Praefix ansu-, kein Webfont (Poppins kommt vom Theme).
 * Farben NUR gemessen (Playwright computed style LIVE www.bodenschutz24.de 06.10.2026, 1440x900 + 390x844;
 * Zaehlung themes/anro/css/main.min.css 462 891 B; Spur zz-ay-bs100):
 *   #2b161b Text        body color; .product-card .nm color; main.min.css 281x
 *   #31a717 Gruen       .btn background-color; a:hover color; main.min.css 158x (nur Flaechen/Linien, weiss darauf 3.15:1)
 *   #268311 Gruen tief  zz-ay-bs100-lp-behoerden.php:376 Linkfarbe (4.84:1 auf Weiss -> Text erlaubt)
 *   #f4f5f5 Linie       #dgwt-wcas-search-input-1 border-color; .wp-megamenu-sub-menu border; 99x
 *   #4a3a3c Text weich  zz-ay-bs100 Fliesstext (10.71:1)
 *   #d26e4b Angebot     .product-card .prc ins color; p.stock.out-of-stock bg; 35x (nur Rahmen, 3.46:1)
 *   #232f3e Navy        .header background-color @390 (mobiler Kopf)
 *   #eff6ec Tint        main.min.css 3x, zz-ay-bs100 Badge-Hintergrund
 *   #979797 Grau        ::placeholder color des Kopf-Suchfelds (2.92:1 -> nicht fuer Text)
 *   Schatten 0 4px 15px rgba(0,0,0,.25)  .header box-shadow @390
 *   Radius 5px = .35rem@15px (Suchfeld 5.25px), 7px = .35rem@19.85px (Suchfeld mobil 6.95px)
 *   Breakpoint 768px = Haupt-Breakpoint des Themes (18x min-width:768px)
 * z-index: .header ist sticky z 12 (eigener Stapelkontext) -> Panel z 20 darin;
 *   Overlay mobil haengt an body, z 99 (unter .cart-section z 100).
 */
.ansu{--ansu-ink:#2b161b;--ansu-gruen:#31a717;--ansu-gruen-tief:#268311;--ansu-linie:#f4f5f5;--ansu-weich:#4a3a3c;--ansu-angebot:#d26e4b;--ansu-navy:#232f3e;--ansu-tint:#eff6ec;--ansu-weiss:#fff;--ansu-schatten:0 4px 15px rgba(0,0,0,.25);font-family:inherit;font-size:12px;line-height:1.35;color:var(--ansu-ink);text-align:left;box-sizing:border-box}
.ansu *,.ansu *::before,.ansu *::after{box-sizing:border-box}
.ansu[hidden],.ansu [hidden]{display:none}
.ansu-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--ansu-weiss);border:1px solid var(--ansu-linie);border-radius:5px;box-shadow:var(--ansu-schatten);max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
.ansu-body{display:grid;grid-template-columns:minmax(0,1fr) 220px}
.ansu-sp{padding:8px 0}
.ansu-sp+.ansu-sp{border-left:1px solid var(--ansu-linie)}
.ansu-kopf{margin:0;padding:6px 15px 6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ansu-weich)}
.ansu-liste{list-style:none;margin:0;padding:0 6px}
.ansu-opt{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 9px;border-radius:5px;color:var(--ansu-ink);text-decoration:none;cursor:pointer}
.ansu-opt:hover,.ansu-opt.ansu-aktiv{background:var(--ansu-linie);color:var(--ansu-ink);text-decoration:none}
.ansu-opt.ansu-aktiv{box-shadow:inset 3px 0 0 var(--ansu-gruen)}
.ansu-bild{display:block;width:56px;height:56px;object-fit:contain;background:var(--ansu-weiss);border:1px solid var(--ansu-linie);border-radius:5px}
.ansu-txt{min-width:0}
.ansu-titel{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;font-weight:400;line-height:1.35}
.ansu-titel mark{background:transparent;color:inherit;font-weight:600;box-shadow:inset 0 -2px 0 var(--ansu-gruen)}
.ansu-kat{display:block;margin-top:2px;font-size:12px;font-weight:300;color:var(--ansu-weich);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ansu-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.ansu-preis{font-size:13px;font-weight:600;white-space:nowrap}
.ansu-badge{display:inline-block;padding:2px 6px;border:1px solid var(--ansu-linie);border-radius:5px;background:var(--ansu-linie);font-size:12px;font-weight:400;line-height:1.2;color:var(--ansu-weich);white-space:nowrap}
.ansu-badge-angebot{background:var(--ansu-weiss);border-color:var(--ansu-angebot);color:var(--ansu-ink);font-weight:600}
.ansu-katopt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:5px;color:var(--ansu-ink);text-decoration:none;font-size:13px}
.ansu-katopt:hover,.ansu-katopt.ansu-aktiv{background:var(--ansu-linie);color:var(--ansu-ink);text-decoration:none}
.ansu-katopt.ansu-aktiv{box-shadow:inset 3px 0 0 var(--ansu-gruen)}
.ansu-anz{flex:none;min-width:24px;padding:1px 6px;border-radius:999px;background:var(--ansu-tint);font-size:12px;text-align:center;color:var(--ansu-ink)}
.ansu-fuss{border-top:1px solid var(--ansu-linie);padding:6px}
.ansu-alle{display:block;padding:9px;border-radius:5px;font-size:13px;font-weight:600;color:var(--ansu-gruen-tief);text-decoration:none}
.ansu-alle:hover,.ansu-alle.ansu-aktiv{background:var(--ansu-tint);color:var(--ansu-gruen-tief);text-decoration:underline}
.ansu-leer{margin:0;padding:18px 15px;font-size:13px;color:var(--ansu-ink)}
.ansu-leer span{display:block;margin-top:4px;font-size:12px;color:var(--ansu-weich)}
.ansu-lade{position:absolute;top:0;left:0;height:2px;width:30%;background:var(--ansu-gruen);animation:ansu-lauf 1s linear infinite}
@keyframes ansu-lauf{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.ansu-lade{animation:none;width:100%}}
.ansu-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ansu-opt:focus-visible,.ansu-katopt:focus-visible,.ansu-alle:focus-visible,.ansu-zu:focus-visible{outline:2px solid var(--ansu-gruen);outline-offset:2px}
/* Weiterleitung oben im Panel (09.10.2026) */
.ansu-weiter{border-top:0;border-bottom:1px solid var(--ansu-linie)}
/* Ergebnisseite ?s=: Zeile unter der H1 (Trefferzahl bzw. Hinweis bei 0 Treffern), 09.10.2026 */
.ansu-seite-info{margin:6px 0 0;font-size:14px;line-height:1.45;color:#4a3a3c}
/* Mobil: Vollbild-Overlay */
.ansu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;flex-direction:column;background:var(--ansu-weiss)}
.ansu-ov-kopf{display:flex;align-items:center;gap:8px;padding:10px;background:var(--ansu-navy);box-shadow:var(--ansu-schatten)}
.ansu-ov-feld{flex:1;min-width:0;height:44px;margin:0;padding:0 12px;border:1px solid var(--ansu-linie);border-radius:7px;background:var(--ansu-weiss);font-family:inherit;font-size:16px;font-weight:300;color:var(--ansu-ink);-webkit-appearance:none;appearance:none}
.ansu-ov-feld:focus{outline:2px solid var(--ansu-gruen);outline-offset:0}
.ansu-zu{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--ansu-weiss);border-radius:7px;background:transparent;color:var(--ansu-weiss);cursor:pointer}
.ansu-zu svg{width:18px;height:18px}
.ansu-overlay .ansu-panel{position:relative;top:auto;flex:1;max-height:none;border:0;border-radius:0;box-shadow:none}
html.ansu-offen,html.ansu-offen body{overflow:hidden}
@media (max-width:767px){
.ansu-body{grid-template-columns:minmax(0,1fr)}
.ansu-sp+.ansu-sp{border-left:0;border-top:1px solid var(--ansu-linie)}
.ansu-opt{grid-template-columns:56px minmax(0,1fr);row-gap:4px;padding:8px 9px}
.ansu-rechts{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left}
.ansu-titel,.ansu-katopt,.ansu-alle,.ansu-leer{font-size:14px}
.ansu-preis{font-size:16px}
.ansu-katopt,.ansu-alle{min-height:44px}
.ansu-alle{display:flex;align-items:center}
}