/* F16 Produktsuche: Aufklappliste (Desktop) und Vollbild-Overlay (Handy). Entwurf: claude.ai/artifact/3ByRtm35pcta2p2KzuwAca */

.wcbr-s-live, .wcbr-s-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wcbr-s-box { color: #3a2b2b; font-size: 15px; line-height: 1.4; text-align: left; }
.wcbr-s-box[hidden] { display: none !important; }
.wcbr-s-box a { color: #8e153c; text-decoration: none; }
.wcbr-s-box a:hover { color: #6d0f2e; }
.wcbr-s-h { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b5e58; }
.wcbr-s-box [role="option"].is-aktiv,
.wcbr-s-box [role="option"]:hover { background: #f3e8e0; }

/* Desktop: Aufklappliste unter dem Suchfeld */
.aws-container:has(> .wcbr-s-box), .wcbr-mm__search:has(> .wcbr-s-box), .wcbr-404__suche:has(> .wcbr-s-box) { position: relative; }

/* Eigenes Suchfeld im Kopf (S4, statt AWS-Markup) – gleiche Maße wie bisher in header-design.css */
.wcbr-sf { position: relative; width: 100%; }
.wcbr-sf__form { margin: 0; display: flex; height: 44px; border-radius: 22px; overflow: hidden; background: #fff; }
.wcbr-sf .wcbr-sf__feld {
  flex: 1; width: 100% !important; max-width: none !important; min-width: 0; box-sizing: border-box !important; height: 44px !important;
  border: 0 !important; border-radius: 22px !important; padding: 0 20px !important; margin: 0 !important; font-size: 14px !important;
  color: #3a2b2b !important; background: #fff !important; box-shadow: none !important; outline: 0;
}
.wcbr-sf__form:focus-within { box-shadow: 0 0 0 3px rgba(242, 201, 214, .9); }
.wcbr-sf .wcbr-sf__feld::-webkit-search-cancel-button { display: none; }
.wcbr-header-neu #ast-desktop-header .ast-header-search .wcbr-sf { max-width: 640px; }
@media (min-width: 1025px) and (max-height: 820px) {
  .wcbr-header-neu #ast-desktop-header .wcbr-sf__form, .wcbr-header-neu #ast-desktop-header .wcbr-sf .wcbr-sf__feld { height: 40px !important; }
}
@media (max-width: 1024px) {
  .wcbr-sf .wcbr-sf__feld { font-size: 16px !important; padding: 0 18px !important; }
}
.wcbr-s-box:not(.wcbr-s-box--mobil) {
  position: absolute; z-index: 10050; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 160px); overflow: auto;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(58, 43, 43, .22);
}
.wcbr-s-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
/* Ohne linke Spalte (keine Vorschläge/Kategorien) volle Breite – sonst landen die Produkte in der 250-px-Spalte (Marcel 13.11.2026) */
.wcbr-s-grid > .wcbr-s-rechts:only-child { grid-column: 1 / -1; }
.wcbr-s-links { background: #fdfaf7; border-right: 1px solid #ece1d8; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.wcbr-s-links .wcbr-s-h { margin-top: 12px; }
.wcbr-s-links .wcbr-s-h:first-child { margin-top: 0; }
.wcbr-s-vor, .wcbr-s-kat { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.wcbr-s-vor { display: block; }
.wcbr-s-box .wcbr-s-vor { color: #3a2b2b; }
.wcbr-s-kat { font-weight: 600; line-height: 1.3; }
/* Kopf vererbt white-space: nowrap – lange Kategorie-/Rezeptnamen liefen sonst in die Produktspalte (Marcel 26.10.2026) */
.wcbr-s-box, .wcbr-s-ov { white-space: normal; }
.wcbr-s-kat > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wcbr-s-z { flex: none; color: #6b5e58; font-weight: 500; }
.wcbr-s-tipp { margin: auto 0 0; padding: 12px; border-radius: 10px; background: #f3e8e0; font-size: 13px; }
.wcbr-s-rechts { padding: 16px 18px 0; min-width: 0; display: flex; flex-direction: column; }
.wcbr-s-liste { display: flex; flex-direction: column; }
.wcbr-s-alle { display: flex; justify-content: space-between; align-items: center; margin: 8px -18px 0; padding: 15px 28px; border-top: 1px solid #ece1d8; background: #fdfaf7; font-weight: 700; }
.wcbr-s-korr { margin: 0; padding: 12px 18px 4px; font-size: 14px; }
.wcbr-s-null, .wcbr-s-leer { padding: 18px; }
.wcbr-s-null p { margin: 0; }

/* Produktzeile */
.wcbr-s-prod { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 10px; cursor: pointer; }
.wcbr-s-prod img, .wcbr-s-noimg { flex: none; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #f7f0e9; }
.wcbr-s-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wcbr-s-box .wcbr-s-name { color: #3a2b2b; font-weight: 600; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcbr-s-meta { font-size: 13px; color: #6b5e58; }
.wcbr-s-meta a { font-size: 12px; }
.wcbr-s-ok { color: #2f6b2a; font-weight: 600; }
.wcbr-s-nok { color: #6b5e58; }
.wcbr-s-prod.is-aus img { opacity: .55; }
.wcbr-s-preis { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.wcbr-s-preis strong { font-size: 16px; }
.wcbr-s-preis del { font-size: 12px; color: #6b5e58; }
.wcbr-s-preis small { font-size: 11px; color: #6b5e58; }
.wcbr-s-plus, .wcbr-s-mehr {
  flex: none; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer;
}
/* Astra färbt button:hover/:focus in der grünen Knopffarbe – alle Zustände hier fest in Bordeaux */
.wcbr-s-box .wcbr-s-plus, .wcbr-s-box .wcbr-s-plus:focus, .wcbr-s-box .wcbr-s-plus:active {
  border: 2px solid #8e153c !important; background: #fff !important; color: #8e153c !important; outline: 0 !important; box-shadow: none !important;
}
.wcbr-s-box .wcbr-s-plus:hover { background: #8e153c !important; color: #fff !important; }
.wcbr-s-box .wcbr-s-plus:focus-visible { outline: 2px solid #8e153c !important; outline-offset: 2px !important; }
.wcbr-s-box .wcbr-s-plus.is-laedt { opacity: .5; }
.wcbr-s-box .wcbr-s-plus.is-drin { background: #2f6b2a !important; border-color: #2f6b2a !important; color: #fff !important; }
.wcbr-s-zu, .wcbr-s-loeschen, .wcbr-s-zu:hover, .wcbr-s-zu:focus, .wcbr-s-loeschen:hover, .wcbr-s-loeschen:focus {
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0;
}
.wcbr-s-zu:focus-visible, .wcbr-s-loeschen:focus-visible { outline: 2px solid #8e153c !important; outline-offset: 2px; border-radius: 999px; }
.wcbr-s-box .wcbr-s-mehr { border: 2px solid #ece1d8; color: #3a2b2b; }

/* Fokus-Ansicht (leeres Feld) */
.wcbr-s-leer { display: flex; flex-direction: column; gap: 14px; }
.wcbr-s-leer .wcbr-s-h { margin-bottom: 0; }
.wcbr-s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wcbr-s-box .wcbr-s-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #e6dbd2; color: #3a2b2b; font-size: 15px; white-space: nowrap; }
.wcbr-s-box .wcbr-s-chip.is-erst { background: #8e153c; border-color: #8e153c; color: #fff; font-weight: 600; }
.wcbr-s-tel { margin: 0; padding: 14px; border-radius: 12px; background: #f3e8e0; font-size: 14px; }
.wcbr-s-tel a { font-weight: 700; }

/* Handy: Vollbild-Overlay */
html.wcbr-s-gesperrt, html.wcbr-s-gesperrt body { overflow: hidden; }
.wcbr-s-ov { display: none; position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100dvh; z-index: 100000; background: #fff; flex-direction: column; }
.wcbr-s-ov.is-offen { display: flex; }
.wcbr-s-ov__kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #ece1d8; margin: 0; }
.wcbr-s-zu { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: #3a2b2b; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.wcbr-s-ov__feld { flex: 1; min-width: 0; display: flex; align-items: center; height: 46px; border-radius: 999px; background: #f3e8e0; padding: 0 4px 0 16px; }
.wcbr-s-ov__feld:focus-within { box-shadow: 0 0 0 2px #8e153c; }
.wcbr-s-ov__feld input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; font-size: 16px !important; color: #3a2b2b; padding: 0 !important; height: 44px; box-shadow: none !important; }
.wcbr-s-ov__feld input::-webkit-search-cancel-button { display: none; }
.wcbr-s-loeschen { flex: none; width: 40px; height: 40px; border: 0; background: transparent; font-size: 22px; color: #6b5e58; padding: 0; }
.wcbr-s-ov__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wcbr-s-box--mobil { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wcbr-s-box--mobil .wcbr-s-korr { padding: 12px 16px 4px; }
.wcbr-s-chips--scroll { flex: none; flex-wrap: nowrap; overflow-x: auto; padding: 8px 16px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wcbr-s-chips--scroll::-webkit-scrollbar { display: none; }
.wcbr-s-box--mobil .wcbr-s-chip { min-height: 40px; padding: 0 14px; font-size: 14px; flex: none; }
.wcbr-s-scroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 0; -webkit-overflow-scrolling: touch; }
.wcbr-s-box--mobil .wcbr-s-scroll > .wcbr-s-h { display: none; }
.wcbr-s-box--mobil .wcbr-s-prod { padding: 12px 0; border-radius: 0; border-bottom: 1px solid #ece1d8; gap: 12px; }
.wcbr-s-box--mobil .wcbr-s-prod:last-child { border-bottom: 0; }
.wcbr-s-box--mobil .wcbr-s-leer { overflow: auto; flex: 1; padding: 18px 16px; gap: 16px; }
.wcbr-s-box--mobil .wcbr-s-leer .wcbr-s-tel { margin-top: auto; }
.wcbr-s-fuss { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #ece1d8; background: #fff; }
.wcbr-s-box--mobil .wcbr-s-alle { margin: 0; justify-content: center; min-height: 50px; padding: 0 16px; border: 0; border-radius: 999px; background: #8e153c; color: #fff; }
.wcbr-s-box--mobil .wcbr-s-alle.is-aktiv, .wcbr-s-box--mobil .wcbr-s-alle:hover { background: #6d0f2e; color: #fff; }
.wcbr-s-box--mobil .wcbr-s-null { padding: 18px 16px; }
@media (max-width: 380px) {
  .wcbr-s-box--mobil .wcbr-s-prod img { width: 56px; height: 56px; }
}

/* Ergebnisseite und „Keine Treffer“ (inc/suche-ergebnis.php) */
.wcbr-such { max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; color: #3a2b2b; }
.wcbr-such__kopf { margin-bottom: 18px; }
.wcbr-such__h { font-family: "Amatic SC", cursive; font-size: clamp(34px, 5vw, 48px); line-height: 1.05; color: #8e153c; margin: 0 0 6px; }
.wcbr-such__h2 { font-size: 20px; margin: 28px 0 12px; color: #3a2b2b; }
.wcbr-such__zahl { margin: 0 0 12px; color: #6b5e58; }
.wcbr-such__korr { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #f3e8e0; }
.wcbr-such__form { max-width: 560px; }
.wcbr-such__katkarte { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; margin: 0 0 16px; border: 1px solid #e6dbd2; border-radius: 14px; background: #fdfaf7; color: #3a2b2b; text-decoration: none; }
.wcbr-such__katkarte:hover { border-color: #8e153c; color: #8e153c; }
.wcbr-such__katkarte small { display: block; color: #6b5e58; font-size: 13px; }
.wcbr-such__katliste { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wcbr-such__katliste .wcbr-such__katkarte { margin: 0; }
.wcbr-such__filter { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.wcbr-such__reihe { display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wcbr-such__reihe::-webkit-scrollbar { display: none; }
.wcbr-such__lbl { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b5e58; margin-right: 4px; }
.wcbr-such__chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #e6dbd2; background: #fff; color: #3a2b2b; font-size: 14px; text-decoration: none; white-space: nowrap; }
.wcbr-such__chip:hover { border-color: #8e153c; color: #8e153c; }
.wcbr-such__chip.is-an { background: #8e153c; border-color: #8e153c; color: #fff; font-weight: 600; }
.wcbr-such__seiten { display: flex; gap: 6px; justify-content: center; margin: 24px 0; }
.wcbr-such__seiten a, .wcbr-such__seiten span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid #e6dbd2; text-decoration: none; color: #3a2b2b; }
.wcbr-such__seiten span { background: #8e153c; border-color: #8e153c; color: #fff; font-weight: 700; }
.wcbr-such__aus { margin-top: 24px; border-top: 1px solid #ece1d8; padding-top: 12px; }
.wcbr-such__aus summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: #8e153c; }
.wcbr-such__benachr { display: block; margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: #8e153c; }
.wcbr-such__hilfe { margin-top: 28px; padding: 18px; border-radius: 14px; background: #f3e8e0; }
.wcbr-such__hilfe p { margin: 4px 0; }
.wcbr-such__hilfe a { color: #8e153c; }
.wcbr-such__leer { padding: 16px; border-radius: 12px; background: #fdfaf7; }

/* Fokus: Astra setzt bei input:focus eigene Kontur/Rahmen – im Overlay und im Kopf-Feld zeigt nur der Ring ums ganze Feld den Fokus */
.wcbr-s-ov__feld input:focus, .wcbr-s-ov__feld input:focus-visible,
.wcbr-sf .wcbr-sf__feld:focus, .wcbr-sf .wcbr-sf__feld:focus-visible {
  outline: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important;
}
.wcbr-sf .wcbr-sf__feld:focus { background: #fff !important; }

/* Keine Treffer + Fokus-Inhalte darunter: im Overlay scrollbar, Abstand wie beim leeren Feld */
.wcbr-s-box--mobil .wcbr-s-null { flex: none; padding: 16px 16px 0; }
.wcbr-s-null + .wcbr-s-leer { padding-top: 12px; }

/* Ergebnisseite: alles auf einer Kante, Kopf und Filter als Karten wie die Produktkarten (Marcel 20.10.2026) */
.wcbr-such .wcbr-such__raster { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.wcbr-such .wcbr-such__form { margin-left: 0 !important; margin-right: 0 !important; }
.wcbr-such__kopf, .wcbr-such__filter, .wcbr-such__hilfe, .wcbr-such__leer {
  background: #fff; border: 1px solid #e7e2dc; border-radius: 14px; padding: 22px 24px; margin-bottom: 14px;
}
.wcbr-such__kopf .wcbr-such__form { margin-bottom: 0 !important; }
.wcbr-such__filter { padding: 16px 24px; gap: 10px; }
.wcbr-such__katkarte { background: #fff; margin-bottom: 14px; }
.wcbr-such__hilfe { background: #fdfaf7; }
.wcbr-such__aus { border-top: 0; margin-top: 18px; }
@media (max-width: 600px) {
  .wcbr-such { padding-left: 12px; padding-right: 12px; }
  .wcbr-such__kopf, .wcbr-such__filter, .wcbr-such__hilfe, .wcbr-such__leer { padding: 16px; }
}

/* Ergebnis- und Keine-Treffer-Seite: eine Überschriften-Ordnung, ruhigere Abstände (Marcel 20.10.2026) */
.wcbr-such .wcbr-such__h { font-size: 44px; line-height: 1.05; margin: 0 0 8px; }
.wcbr-such .wcbr-such__h2 { font-family: "Amatic SC", cursive; font-size: 34px; line-height: 1.1; font-weight: 700; color: #8e153c; margin: 34px 0 14px; }
.wcbr-such__zahl { font-size: 15px; }
.wcbr-such__katliste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wcbr-such__katkarte { padding: 16px 20px; }
.wcbr-such__katkarte > span:last-child { white-space: nowrap; color: #6b5e58; font-size: 14px; }
.wcbr-such__katkarte strong { color: #8e153c; }
.wcbr-such__hilfe .wcbr-such__h2 { margin-top: 0; }
@media (max-width: 900px) { .wcbr-such__katliste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .wcbr-such .wcbr-such__h { font-size: 36px; }
  .wcbr-such .wcbr-such__h2 { font-size: 30px; margin-top: 26px; }
}
/* Kategorie-Karten mit Bild */
.wcbr-such__katkarte { justify-content: flex-start; gap: 14px; }
.wcbr-such__katkarte img.wcbr-such__katbild, .wcbr-such__katkarte picture { flex: none; width: 56px !important; height: 56px !important; border-radius: 10px; object-fit: cover; display: block; }
.wcbr-such__katkarte picture img { width: 56px !important; height: 56px !important; border-radius: 10px; object-fit: cover; }
.wcbr-such__kattext { flex: 1; min-width: 0; }

/* „Mehr ist nicht vorrätig“ beim Plus-Knopf (Marcel 22.10.2026) */
.wcbr-s-voll { font-size: 11.5px; font-weight: 600; color: #8e153c; margin-right: 6px; white-space: nowrap; align-self: center; }

/* Plus exakt mittig (Marcel 22.10.2026): das „+“ der Schrift sitzt in Lexend zu tief → im Grundzustand als zwei Balken gezeichnet;
   „✓“ (is-drin) und „!“ (is-voll) bleiben Text. Der Text „+“ bleibt im Knopf (Bildschirmleser nutzen ohnehin aria-label). */
.wcbr-s-plus:not(.is-drin):not(.is-voll) { position: relative; font-size: 0 !important; }
.wcbr-s-plus:not(.is-drin):not(.is-voll)::before,
.wcbr-s-plus:not(.is-drin):not(.is-voll)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.wcbr-s-plus:not(.is-drin):not(.is-voll)::after { transform: translate(-50%, -50%) rotate(90deg); }

/* „Ausverkaufte ausblenden“ (Marcel 23.10.2026) */
.wcbr-s-box .wcbr-s-pkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wcbr-s-box .wcbr-s-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #e6dbd2;
  background: #fff; color: #3a2b2b; font: inherit; font-size: 13px; letter-spacing: normal; text-transform: none; cursor: pointer; white-space: nowrap;
}
.wcbr-s-box .wcbr-s-filter[aria-pressed="true"] { background: #8e153c; border-color: #8e153c; color: #fff; }
.wcbr-s-box .wcbr-s-filter[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.wcbr-s-box .wcbr-s-filter .wcbr-s-z { opacity: .8; }
.wcbr-s-box .wcbr-s-filter:focus-visible { outline: 2px solid #8e153c; outline-offset: 2px; }