/* ============================================================
   Die Suchtafel und die Ergebnisseite.

   Die Tafel fährt unter dem Kopf hervor, nicht von der Seite: sie
   gehört zur Lupe, und die steht oben. Der Schleier darunter ist
   derselbe wie beim Mobilmenü und bei der Warenkorb-Tafel — ein
   zweites Bedienkonzept für dieselbe Geste müsste der Besucher
   lernen, ohne etwas davon zu haben.

   `--kopf-h` setzt das Skript beim Öffnen: es MISST den Kopf, statt
   seine drei Höhen hier noch einmal zu behaupten.
   ============================================================ */


/* ---------------------------------------------------------- Die Hülle
   Ohne JavaScript steht die Tafel offen unter dem Kopf und ist ein
   gewöhnliches Formular. Erst die Klasse `js` versteckt sie — dieselbe
   Mechanik wie überall im Theme. */

.suchtafel{position:relative;z-index:20;background:var(--n00);
  border-bottom:1px solid var(--n10)}
.suchtafel .s-schleier{display:none}
.suchtafel .s-schliessen{display:none}

/* Der Seitenrand gehoert an das Blatt und nicht an die Fassung mit
   JavaScript: ohne Skript steht das Blatt in der Seite, und dort lag
   „Haeufig gesucht" sonst halb hinter der linken Fensterkante. */
.s-blatt{padding:18px 44px 20px}

.js .suchtafel{position:fixed;z-index:29;inset:0;
  background:none;border:0;
  visibility:hidden;pointer-events:none}
.js .suchtafel.auf{visibility:visible;pointer-events:auto}

.js .suchtafel .s-schleier{display:block;position:absolute;inset:0;
  background:rgba(17,17,17,.34);opacity:0;
  transition:opacity .22s ease}
.js .suchtafel.auf .s-schleier{opacity:1}

.js .s-blatt{position:absolute;top:var(--kopf-h,72px);left:0;right:0;
  background:var(--n00);box-shadow:0 1px 0 var(--n20);
  padding-top:22px;padding-bottom:26px;
  transform:translateY(-14px);opacity:0;
  transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .18s ease}
.js .suchtafel.auf .s-blatt{transform:none;opacity:1}

/* Die Tafel bleibt so breit wie der Seiteninhalt, damit die Treffer
   nicht über die ganze Bildschirmbreite auseinanderlaufen. */
.s-form,.s-treffer,.s-oft{max-width:1560px;margin-left:auto;margin-right:auto}

@media(prefers-reduced-motion:reduce){
  .js .s-blatt{transition:opacity .18s ease;transform:none}
  .js .suchtafel .s-schleier{transition:none}
}


/* ---------------------------------------------------------- Das Feld
   Eine Zeile: Lupe, Eingabe, Knopf, Kreuz. Die Kontur liegt am
   Behälter und nicht am Feld, damit die Lupe innerhalb sitzt. */

.s-form{display:flex;align-items:center;gap:12px;
  height:54px;padding:0 8px 0 16px;
  border-radius:var(--rundung);box-shadow:inset 0 0 0 1px var(--n20)}
.s-form:focus-within{box-shadow:inset 0 0 0 2px var(--teal-d)}

.s-lupe{flex:none;width:20px;height:20px;fill:none;stroke:var(--n50);
  stroke-width:1.5;stroke-linecap:square}
.s-form:focus-within .s-lupe{stroke:var(--teal-d)}

.s-form input[type=search]{-webkit-appearance:none;appearance:none;
  flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;
  font:400 17px/1 Archivo,sans-serif;color:var(--n90)}
.s-form input[type=search]:focus{outline:none}
.s-form input[type=search]::placeholder{color:var(--n40)}
/* Das Kreuz, das Chrome von sich aus in ein Suchfeld setzt: es säße
   neben unserem und meinte etwas anderes. */
.s-form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

.s-form .s-los{flex:none;height:40px;padding:0 20px;border:0;border-radius:var(--rundung);
  background:var(--n90);color:var(--n00);cursor:pointer;
  font:500 14px/1 Archivo,sans-serif}
.s-form .s-los:hover{background:var(--teal);color:#000}
.s-form .s-los:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}

.js .s-form .s-schliessen{display:flex;flex:none;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;color:var(--n50)}
.s-form .s-schliessen svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:square}
.s-form .s-schliessen:hover{color:var(--n90)}


/* ---------------------------------------------------------- Die Treffer */

.s-treffer:empty{display:none}
.s-treffer{margin-top:18px}
.s-treffer[data-laedt]{opacity:.5}

.s-gruppe{margin:18px 0 8px;
  font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n50)}
.s-gruppe:first-child{margin-top:0}

/* Zwei Spalten, sobald Platz ist: sechs Teile untereinander schieben
   die Ratgeber-Treffer unter die Fensterkante. */
.s-liste{display:grid;gap:0 34px;grid-template-columns:repeat(2,minmax(0,1fr))}

.s-teil,.s-text{display:flex;align-items:center;gap:14px;
  padding:10px 12px;margin:0 -12px;border-radius:var(--rundung);
  color:var(--n90);text-decoration:none}
.s-teil:hover,.s-text:hover,
.s-teil:focus-visible,.s-text:focus-visible{background:var(--n05);outline:none}
.s-teil:focus-visible,.s-text:focus-visible{box-shadow:inset 0 0 0 2px var(--teal-d)}

.s-teil img,.s-teil .s-ohne{flex:none;width:56px;height:56px;
  object-fit:cover;border-radius:var(--rundung);background:var(--n05)}

.s-wort{flex:1;min-width:0;
  font:500 15px/1.35 Archivo,sans-serif}

/* Die Klammer sitzt am TITEL, nicht am ganzen Block: lag sie aussen,
   schnitt sie bei einem langen Namen die Artikelnummer mit ab — und
   die ist der Grund, warum jemand nach einer Nummer sucht. */
.s-titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.s-nr{display:block;margin-top:3px;
  font:400 12px/1 'IBM Plex Mono',monospace;color:var(--n50)}

.s-preis{flex:none;font:500 15px/1 Archivo,sans-serif;color:var(--n90);
  white-space:nowrap}
.s-wo{flex:none;font:400 13px/1 Archivo,sans-serif;color:var(--n50);
  white-space:nowrap}

.s-alle{display:inline-block;margin-top:16px;
  font:500 15px/1 Archivo,sans-serif;color:var(--teal-d);text-decoration:none}
.s-alle:hover{text-decoration:underline;text-underline-offset:3px}

.s-nichts{margin:0;color:var(--n60)}


/* ---------------------------------------------------------- Häufig gesucht
   Ein leeres Suchfeld ist eine Frage ohne Vorschlag. */

.s-oft{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font:400 14px/1 Archivo,sans-serif;color:var(--n50)}
.s-oft a{padding:7px 12px;border:1px solid var(--n20);border-radius:var(--rundung);
  color:var(--n70);text-decoration:none}
.s-oft a:hover{border-color:var(--teal);color:var(--teal-d)}

/* Stehen schon Treffer da, sind die Startpunkte erledigt. */
.s-treffer:not(:empty) ~ .s-oft{display:none}


/* ---------------------------------------------------------- Schmaler */

@media(max-width:1180px){
  .s-blatt{padding:18px 32px 22px}
}

@media(max-width:860px){
  .s-liste{grid-template-columns:1fr}
  /* Am Handy zählt das Feld; die vier Startpunkte kosten nur Höhe. */
  .s-oft{display:none}
}

@media(max-width:760px){
  .s-blatt{padding:14px 22px 20px}
  .s-form{height:48px;padding:0 6px 0 12px;gap:8px}
  .s-form input[type=search]{font-size:16px}  /* darunter zoomt iOS hinein */
  .s-form .s-los{display:none}                /* Enter genügt, Platz zählt */
  .s-preis{font-size:14px}
}


/* ============================================================
   Die Ergebnisseite
   ============================================================ */

.suchseite .is-kopf .is-suche{margin-top:20px}

.such-titel{margin:0 0 4px;
  font:600 clamp(20px,2.2vw,24px)/1.2 Archivo,sans-serif;
  letter-spacing:-.02em;color:var(--n90)}

.such-teile{margin-top:14px}
/* Das Raster kommt aus `kategorie.css`; hier steht nur, was die
   Suchseite anders braucht als die Kategorieseite. */
.such-teile .raster{margin-top:22px}

.such-texte{margin-top:64px;padding-top:38px;border-top:1px solid var(--n10)}
.such-texte .is-liste{margin-top:22px}
.such-texte .is-liste li:first-child{padding-top:0}

.suchseite .is-leer{margin-top:32px}
.suchseite .is-leer .wege{margin-top:24px}