/* Sondello-Suche auf stuhlpapst.de (Live, 08.10.2026), übernommen aus der Demo vom
   29.09.2026: Suchleiste an der Stelle des alten Suchfelds links in der Menüzeile,
   Vorschau darunter (beim Reinklicken beliebte Produkte, beim Tippen die Treffer in
   einer Reihe), Enter führt auf /suche mit der vollen eingebetteten Suche. KI-Berater
   nicht in der Suche, nur als Knopf unten rechts. Farben und Schrift von stuhlpapst.de.
   Eingebunden in templates/_header2024.php, Markup dort und in such2024.php. */

/* ── Menüzeile als Flex: Suchleiste links, Menü rechts ──
   Im Original ist die Suchspalte 1/6 breit und das Menü (1000 px) rechts
   angeschlagen. Unter 1400 px ist die Menüspalte schmaler als das Menü, es
   schob sich über das Suchfeld („NEWS" verschwand darunter). */
.sondello-menuezeile{position:relative}
.sondello-menuezeile>.search{display:flex;align-items:center}
.sondello-menuezeile .navbar-brand{display:none}

/* ── Suchleiste ── */
.sondello-kopfleiste{flex:1 1 auto;min-width:0}
.sondello-kopfform{position:relative;margin:0}
.sondello-kopfform .form-control{height:40px;padding:6px 44px 6px 12px;border:1px solid #c9c9c9;border-radius:0;
  font-size:15px;color:#222;background:#fff;box-shadow:none}
.sondello-kopfform .form-control:focus{border-color:#891c21;box-shadow:0 0 0 2px rgba(137,28,33,.18)}
.sondello-kopfform .form-control::placeholder{color:#8a8a8a;opacity:1}
/* Browser-eigenes ✕ im Suchfeld weg, das Overlay hat eigenes Verhalten */
.sondello-kopfform .form-control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sondello-kopfknopf{position:absolute;top:4px;right:4px;bottom:4px;width:34px;display:flex;align-items:center;
  justify-content:center;padding:0;border:0;border-radius:0;background:#891c21;color:#fff;cursor:pointer}
.sondello-kopfknopf:hover,.sondello-kopfknopf:focus-visible{background:#4d0f13}
.sondello-kopfknopf svg{width:17px;height:17px}

@media (min-width:1200px){
  .sondello-menuezeile{display:flex!important;flex-wrap:nowrap}
  .sondello-menuezeile>.search{flex:0 0 300px!important;width:300px!important;max-width:none}
  .sondello-menuezeile>.search+div{flex:1 1 0%!important;width:auto!important;max-width:none;min-width:0;
    display:flex;justify-content:flex-end;padding-left:0!important}
  .sondello-menuezeile .nav-custom{float:none!important;padding:0!important}
}
@media (min-width:1200px) and (max-width:1399.98px){
  /* Container 1140 px: Suchleiste etwas schmaler, Menü etwas enger */
  .sondello-menuezeile>.search{flex-basis:250px!important;width:250px!important}
  .sondello-menuezeile #navbarSupportedContent .nav-link{font-size:12.5px;padding-left:5px!important;padding-right:5px!important}
}
@media (min-width:992px) and (max-width:1199.98px){
  /* Container 960 px: Suchleiste als eigene Zeile über dem Menü, Menü eng */
  .sondello-menuezeile>.search{flex:0 0 100%!important;width:100%!important;max-width:none;padding:8px 12px!important}
  .sondello-menuezeile>.search+div{width:100%!important;max-width:none;display:flex;justify-content:center}
  .sondello-menuezeile .nav-custom{float:none!important;padding:0!important}
  .sondello-menuezeile #navbarSupportedContent .nav-link{font-size:12.5px;padding-left:5px!important;padding-right:5px!important}
}

/* ── Vorschau unter der Menüzeile (nur Startseite) ── */
.sondello-vorschau{display:none;position:absolute;top:100%;left:0;right:0;z-index:1001;box-sizing:border-box;
  max-height:calc(100vh - 120px);overflow-y:auto;grid-template-columns:190px minmax(0,1fr);gap:30px;
  padding:24px 28px 26px;background:#fff;border:1px solid #d9d9d9;border-top:3px solid #891c21;
  box-shadow:0 18px 44px rgba(0,0,0,.22);text-align:left;color:#333}
.sondello-kopfleiste:focus-within .sondello-vorschau,.sondello-vorschau:hover{display:grid}
.sondello-vorschau-titel{margin:0 0 8px;font-family:'Bell Gothic Bold',sans-serif;font-weight:bold;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:#4d0f13}
.sondello-vorschau-links{display:flex;flex-direction:column;align-items:flex-start}
.sondello-vorschau-links a{color:#333;text-decoration:none;font-size:15px;line-height:1.95}
.sondello-vorschau-links a:hover,.sondello-vorschau-links a:focus-visible{color:#891c21;text-decoration:underline}
.sondello-vorschau-rechts{position:relative;min-width:0}
.sondello-vorschau-alle{position:absolute;top:-4px;right:0;z-index:1;margin:0;padding:7px 16px;border:0;border-radius:0;
  background:#4d0f13;color:#fff!important;font-family:'Bell Gothic Bold',sans-serif;font-weight:bold;font-size:14px;
  letter-spacing:.04em;line-height:1.5;text-transform:uppercase;cursor:pointer;text-decoration:none}
.sondello-vorschau-alle:hover,.sondello-vorschau-alle:focus-visible{background:#891c21}
/* Der Knopf bleibt immer sichtbar: mit Begriff sendet er das Formular ab, ohne Begriff führt er auf alle Produkte */
.sondello-vorschau-alle--leer{display:none}
.sondello-kopfleiste:has(#sondello-suchfeld:placeholder-shown) button.sondello-vorschau-alle{display:none}
.sondello-kopfleiste:has(#sondello-suchfeld:placeholder-shown) .sondello-vorschau-alle--leer{display:block}
/* In der Vorschau nur Produkte: keine Filter, keine Sortierung, EINE Reihe Karten */
.sondello-vorschau .sondello-rail,.sondello-vorschau .sondello-sort,.sondello-vorschau .sondello-barright,
.sondello-vorschau .sondello-highlight,.sondello-vorschau .sondello-active-filters,.sondello-vorschau .sondello-reset,
.sondello-vorschau .sondello-sentinel,.sondello-vorschau .sondello-popqueries{display:none!important}
.sondello-vorschau .sondello-fs-body{display:block!important}
.sondello-vorschau .sondello-mainwrap{padding:0!important}
.sondello-vorschau .sondello-toolbar{padding:0 250px 14px 0!important;min-height:0!important}
/* Treffer als eine Reihe, seitlich scrollbar, im Look des Karussells „Beliebte Produkte" */
.sondello-vorschau .sondello-gridwrap{position:relative;min-height:0!important;padding:0 48px 4px!important}
.sondello-vorschau .sondello-grid{display:flex!important;gap:18px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px;
  anchor-name:--sondello-reihe}
.sondello-vorschau .sondello-grid::-webkit-scrollbar{display:none}
.sondello-vorschau .sondello-grid>*{flex:0 0 clamp(180px,19%,250px);scroll-snap-align:start}
/* Pfeile ohne Skript: CSS-Scroll-Knöpfe (Chrome ab 135), wie die Karussell-Pfeile des Overlays */
.sondello-vorschau .sondello-grid::scroll-button(left),.sondello-vorschau .sondello-grid::scroll-button(right){
  position:absolute;position-anchor:--sondello-reihe;top:calc(anchor(center) - 18px);width:36px;height:36px;
  border:0;border-radius:50%;cursor:pointer;background:transparent center/22px no-repeat}
.sondello-vorschau .sondello-grid::scroll-button(left){content:"" / "Zurück";left:calc(anchor(left) - 48px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d0f13' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
.sondello-vorschau .sondello-grid::scroll-button(right){content:"" / "Weiter";left:calc(anchor(right) + 12px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d0f13' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
.sondello-vorschau .sondello-grid::scroll-button(left):hover,.sondello-vorschau .sondello-grid::scroll-button(right):hover{background-color:#f3eaea}
.sondello-vorschau .sondello-grid::scroll-button(left):disabled,.sondello-vorschau .sondello-grid::scroll-button(right):disabled{opacity:.25;cursor:default;background-color:transparent}
/* Ohne Scroll-Knöpfe (Safari, Firefox): schmale Leiste als Hinweis, dass es weitergeht */
@supports not selector(::scroll-button(*)){
  .sondello-vorschau .sondello-gridwrap{padding:0 0 4px!important}
  .sondello-vorschau .sondello-grid{scrollbar-width:thin;padding-bottom:10px}
  .sondello-vorschau .sondello-grid::-webkit-scrollbar{display:block;height:6px}
}

/* ── Ergebnisfläche in Stuhlpapst-Farben (Vorschau und Ergebnisseite) ── */
#sondello-search-results{--sondello-primary:#891c21;--sondello-primary-contrast:#fff;--sondello-text:#222;
  font-size:15px}
#sondello-search-results.sondello-embedded{border:0!important;border-radius:0!important;background:transparent!important}
#sondello-search-results .sondello-name{font-family:'Bell Gothic Bold',sans-serif;font-weight:bold;color:#4d0f13;letter-spacing:.02em}
/* Nettopreise wie im Shop: Zusatz „zzgl. MwSt." unter dem Preis */
#sondello-search-results .sondello-price-gross::after{content:"zzgl. MwSt.";display:block;margin-top:1px;
  font-size:11px;font-weight:normal;color:#777;letter-spacing:0}
/* KI-Berater nicht in der Suche (Nutzerwunsch 29.09.2026): Reiter „Filter | KI-Berater" weg, nur die
   Filter bleiben. Das Overlay öffnet den Berater-Reiter nur per Klick, er ist damit nicht erreichbar.
   Der schwebende Berater-Knopf unten rechts bleibt. */
#sondello-search-results .sondello-rail-tabs,#sondello-search-results .sondello-rail-chathost{display:none!important}
#sondello-search-results .sondello-rail-filters{display:block!important}

/* ── Ergebnisseite ── */
.sondello-suche{padding-bottom:70px}
.sondello-suche .kategorie-header{margin-top:26px}
.sondello-suche-unter{margin:10px 0 0;font-size:16px;color:#555}
.sondello-suche-beispiele{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 26px;font-size:14px;color:#777}
.sondello-suche-beispiele a{color:#4d0f13;text-decoration:none;border:1px solid #d9c9ca;padding:6px 13px;line-height:1.3;background:#fff}
.sondello-suche-beispiele a:hover{border-color:#891c21;color:#891c21}
.sondello-suche-beispiele a.sondello-suche-alle{border-color:#4d0f13;background:#4d0f13;color:#fff;font-weight:600}
.sondello-suche-beispiele a.sondello-suche-alle:hover{background:#891c21;border-color:#891c21}

/* ── Handy und Tablet: Suchleiste in ihrer eigenen Zeile, Vorschau darunter ── */
@media (max-width:991.98px){
  .sondello-menuezeile>.search{padding:6px 12px!important}
  .sondello-kopfleiste{position:relative}
  .sondello-vorschau{top:calc(100% + 6px);left:-12px;right:-12px;grid-template-columns:minmax(0,1fr)!important;gap:14px;
    padding:16px 16px 22px;max-height:none;overflow:visible;border-left:0;border-right:0}
  .sondello-vorschau-links{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 14px}
  .sondello-vorschau-links .sondello-vorschau-titel{width:100%;margin:0 0 2px!important}
  .sondello-vorschau-links a{line-height:1.7}
  .sondello-vorschau-rechts{padding-top:46px}
  .sondello-vorschau-alle{top:0;left:0;right:auto}
  .sondello-vorschau .sondello-toolbar{padding-right:0!important}
  /* Handy: wischen statt Pfeile, gut anderthalb Karten sichtbar */
  .sondello-vorschau .sondello-gridwrap{padding:0 0 4px!important}
  .sondello-vorschau .sondello-grid>*{flex-basis:62%}
  .sondello-vorschau .sondello-grid::scroll-button(left),.sondello-vorschau .sondello-grid::scroll-button(right){display:none}
}
@media (max-width:991.98px){
  /* Nur auf /suche: Kategorie-Kacheln weg, Treffer rücken nach oben */
  .sondello-kategorieleiste{display:none!important}
  .sondello-suche .kategorie-header{margin-top:14px}
}
@media (max-width:760px){
  /* Filter über dem Raster: zugeklappt, Antippen klappt auf */
  .sondello-suche #sondello-search-results .sondello-facet:not(.sondello-facet--collapsed) .sondello-facet-body{display:none}
  .sondello-suche #sondello-search-results .sondello-facet.sondello-facet--collapsed .sondello-facet-body{display:block}
  .sondello-suche #sondello-search-results .sondello-facet:not(.sondello-facet--collapsed) .sondello-facet-caret{transform:rotate(180deg)}
  .sondello-suche #sondello-search-results .sondello-facet.sondello-facet--collapsed .sondello-facet-caret{transform:none}
  .sondello-suche-beispiele{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px;padding-right:12px}
  .sondello-suche-beispiele::-webkit-scrollbar{display:none}
  .sondello-suche-beispiele>*{flex:0 0 auto}
}