/* Steri24 — Filter-UI der Kategorie-Kopftexte (.s24ktf / .s24kt-card)
   Byte-identisch aus den Kategoriefeldern 5/9/131/197 ausgelagert, damit die
   Felder unter dem MySQL-TEXT-Limit von 65.535 B bleiben. Kein Regelumbau. */
  /* Filter-UI (self-contained inline; bewusst OHNE type=text/css, damit build-kategorie.py es NICHT auslagert) */
  /* Fix: .s24kt-wrap hat width:100% + 8px Padding ohne border-box -> 16px horizontaler Overflow */
  .s24kt-wrap{box-sizing:border-box !important;}
  .s24ktf{margin:0 0 22px;}
  .s24ktf .s24kt-head__title{margin:10px auto 18px !important;}
  .s24ktf__bar{background:#f4f4f5;border:1px solid #dcdcdc;border-radius:14px;padding:20px 22px;}
  .s24ktf__toggle,.s24ktf__sheethead,.s24ktf__sheetfoot,.s24ktf__mobsum{display:none;}
  .s24ktf__groups{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:24px 26px;}
  /* Trennstrich einheitlich bei ALLEN Gruppen - vorher entfernte ":first-child"
     ihn nur bei Item 1 (Kammervolumen); Item 4 (Serie) und 7 (Chargenverfolgung)
     stehen bei 3 Spalten ebenfalls in Spalte 1, hatten den Strich aber behalten
     -> die Linie wirkte bei Kammervolumen wie abgerissen/fehlend. */
  .s24ktf__group{border:0;margin:0;padding:0 0 0 22px;border-left:2px solid #d8d8d9;min-width:0;}
  .s24ktf__group--wide{grid-column:auto;}
  .s24ktf__lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:800 14px/1.4 "Fira Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5f5f5f;margin:0 0 10px;padding:0;float:none;cursor:pointer;user-select:none;}
  .s24ktf__lblmeta{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .s24ktf__lblbadge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#A30027;color:#fff;font:800 11px/1 "Fira Sans",Arial,sans-serif;letter-spacing:0;}
  .s24ktf__lblbadge[hidden]{display:none;}
  .s24ktf__lbl:focus-visible{outline:2px solid #A30027;outline-offset:3px;border-radius:3px;}
  .s24ktf__grpchev{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.6;transition:transform .15s;}
  .s24ktf__group.is-open .s24ktf__grpchev{transform:rotate(180deg);}
  /* Gruppen standardmaessig eingeklappt — sonst ist das Panel sofort voller Felder */
  .s24ktf__group:not(.is-open) .s24ktf__chips{display:none;}
  .s24ktf__chips{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;}
  .s24ktf__chip{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:3px 11px;min-height:48px;width:100%;max-width:100%;padding:8px 15px;overflow-wrap:anywhere;border:1.5px solid #e0e0e0;border-radius:10px;background:#fff;cursor:pointer;font:600 16px/1.25 "Fira Sans",Arial,sans-serif;color:#333;user-select:none;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;}
  .s24ktf__chip input{position:absolute !important;left:0 !important;top:0 !important;right:auto !important;bottom:auto !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;border:0 !important;opacity:0 !important;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:1;}
  .s24ktf__box{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;margin:0;border:1.5px solid #c4c4c4;border-radius:5px;background:#fff;box-sizing:border-box;transition:background .15s,border-color .15s;flex:0 0 auto;align-self:center;}
  .s24ktf__box--r{border-radius:50%;}
  .s24ktf__chip{position:relative;}
  .s24ktf__chip > *{position:relative;z-index:2;}
  .s24ktf__box svg{width:14px;height:14px;stroke:#fff;stroke-width:3.6;fill:none;opacity:0;transition:opacity .15s;}
  .s24ktf__box--r i{display:block;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transition:opacity .15s;}
  .s24ktf__chip:hover{border-color:#A30027;background:#fdf7f8;box-shadow:0 4px 10px rgba(20,20,20,.13);}
  .s24ktf__chip:has(input:focus-visible){outline:2px solid #A30027;outline-offset:2px;}
  .s24ktf__chip input:checked + .s24ktf__box{background:#A30027;border-color:#A30027;}
  .s24ktf__chip input:checked + .s24ktf__box svg,.s24ktf__chip input:checked + .s24ktf__box i{opacity:1;}
  .s24ktf__chip:has(input:checked){border-color:#A30027;background:#f7dde4;color:#1a1a1a;font-weight:700;box-shadow:0 0 0 2px #A30027 inset,0 4px 10px rgba(163,0,39,.22);}
  .s24ktf__chip input:focus-visible + .s24ktf__box{box-shadow:0 0 0 3px rgba(163,0,39,.25);}
  .s24ktf__chip--neutral:has(input:checked){border-color:#e0e0e0;background:#fff;color:#333;box-shadow:none;}
  .s24ktf__chip--neutral input:checked + .s24ktf__box{background:#8a8a8a;border-color:#8a8a8a;}
  .s24ktf__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px;padding:0 4px;border:0;}
  .s24ktf__count{margin:0;padding:0;font:800 17px/1.35 "Fira Sans",Arial,sans-serif;letter-spacing:-.01em;color:#1a1a1a;}
          .s24ktf__reset{display:none;align-items:center;gap:7px;margin-left:auto;padding:9px 15px;font:700 14.5px/1 "Fira Sans",Arial,sans-serif;color:#A30027;background:#fff;border:1.5px solid #A30027;border-radius:9px;cursor:pointer;text-decoration:none;}
  .s24ktf__reset:hover{background:#A30027;color:#fff;}
  .s24ktf__reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}
  .s24ktf.is-filtered .s24ktf__reset{display:inline-flex;}
  .s24ktf__reset:hover{color:#7d001e;}
  .s24ktf__reset:focus-visible{outline:2px solid #A30027;outline-offset:3px;border-radius:4px;}
  @media (max-width:767px){ }
  .s24ktf__vol{font-weight:700;white-space:nowrap;flex:0 0 auto;}
  .s24ktf__instr{margin-left:auto;padding-left:12px;font-weight:500;font-size:13.5px;color:#7a7a7a;white-space:nowrap;flex:0 0 auto;max-width:100%;}
  .s24ktf__chip:has(input:checked) .s24ktf__instr{color:#8a4a5c;}
  .s24ktf__chip.is-disabled{opacity:.42;cursor:not-allowed;background:#f7f7f7;border-color:#e8e8e8;}
  .s24ktf__chip.is-disabled:hover{border-color:#e8e8e8;background:#f7f7f7;box-shadow:none;}
  .s24ktf__chip.is-disabled .s24ktf__instr{color:#a5a5a5;}
  .s24kt-card__cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:11px 14px;border-radius:9px;background:#1a5c33;color:#fff;font:700 14.5px/1 "Fira Sans",Arial,sans-serif;transition:background .15s,transform .15s;}
  .s24kt-card__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .15s;}
  .s24kt-card:hover .s24kt-card__cta{background:#144a29;}
  .s24kt-card:hover .s24kt-card__cta svg{transform:translateX(3px);}
  @media (max-width:767px){ .s24kt-card__cta{margin-top:10px;padding:12px;font-size:15px;} }
  .s24kt-card.is-hidden{display:none !important;}
  @media (max-width:767px){
    .s24ktf{margin-bottom:20px;}
    .s24ktf .s24kt-head__title{margin:8px auto 14px !important;}
    .s24ktf__bar{padding:0 0 1px;background:transparent;border:0;}
    .s24ktf__toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 16px;border:2px solid #A30027;border-radius:11px;background:#fff;font:700 16.5px/1 "Fira Sans",Arial,sans-serif;color:#A30027;cursor:pointer;box-shadow:0 2px 8px rgba(163,0,39,.12);}
    .s24ktf__toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;}
    .s24ktf.is-filtered .s24ktf__toggle{border-color:#A30027;color:#A30027;}
    .s24ktf__mobsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;padding-bottom:14px;}
    .s24ktf__mobsum .s24ktf__count{width:100%;font-size:14.5px;color:#4a4a4a;}
    /* Bottom Sheet — nichts darf horizontal herauslaufen */
    .s24ktf__panel{position:fixed;left:0;right:auto;bottom:0;top:auto;z-index:9999;width:100vw;max-width:100vw;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.28);transform:translateY(101%);transition:transform .26s ease;padding:0;}
    .s24ktf.is-open .s24ktf__panel{transform:translateY(0);}
    .s24ktf__backdrop{position:fixed;left:0;top:0;width:100vw;height:100%;z-index:9998;background:rgba(20,20,20,.45);opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;}
    .s24ktf.is-open .s24ktf__backdrop{opacity:1;visibility:visible;}
    .s24ktf__groups::-webkit-scrollbar{width:6px;}
    .s24ktf__groups::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:3px;}
    .s24ktf__sheethead{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:20px 20px 14px !important;border-bottom:1px solid #eee;font:800 17px/1.2 "Fira Sans",Arial,sans-serif;color:#1a1a1a;flex:0 0 auto;}
    .s24ktf__close{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#f2f2f2;cursor:pointer;padding:0;margin-right:-2px;}
    .s24ktf__close svg{width:14px;height:14px;stroke:#555;stroke-width:2.6;fill:none;}
    .s24ktf__groups{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9c9c9 transparent;padding:16px 20px 28px !important;flex:1 1 auto;-webkit-overflow-scrolling:touch;min-height:0;}
    /* Gruppen-Ueberschriften sind auf Mobil die Tipp-Ziele zum Auf-/Zuklappen -
       grosszuegige Hoehe (>=44px) + Trennlinie, damit sie sich nicht beruehren
       und der Finger nicht die falsche Zeile trifft. */
    /* Trennlinie NICHT als fieldset-border-top: <legend> "durchloechert" die
       border-top eines fieldset (natives Browserverhalten) - je nach Textlaenge
       blieb dadurch mal ein Reststueck Linie stehen, mal (bei kurzem/keinem
       Text) gar keins. Trennlinie stattdessen direkt auf die Legend (volle
       Breite) legen - dort gibt es diese Aussparung nicht. */
    .s24ktf__group{margin-bottom:0;padding-left:0;padding-top:0;border-left:0;}
    .s24ktf__lbl{margin:0;padding:14px 2px;min-height:46px;font-size:13.5px;border-bottom:1px solid #e9e9e9;}
    .s24ktf__group.is-open .s24ktf__lbl{padding-bottom:10px;}
    .s24ktf__group.is-open .s24ktf__chips{padding-bottom:14px;}
    .s24ktf__grpchev{width:16px;height:16px;}
    /* Kurze Optionen 3-spaltig, lange volle Breite — kein Overflow */
    .s24ktf__chips{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;}
    .s24ktf__chip{min-height:50px;width:100%;max-width:100%;padding:8px 12px 8px 14px;font-size:15.5px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;justify-content:flex-start;gap:10px;}
    .s24ktf__foot{display:none;}
    .s24ktf__sheetfoot{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;padding:12px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #eee;background:#fff;box-shadow:0 -6px 18px rgba(0,0,0,.06);flex:0 0 auto;z-index:2;}
    .s24ktf__apply{width:100%;min-height:50px;border:0;border-radius:12px;background:#A30027;color:#fff;font:700 16px/1 "Fira Sans",Arial,sans-serif;cursor:pointer;}
    .s24ktf__apply[disabled]{background:#c9c9c9;cursor:default;}
    .s24ktf__sheetreset{display:block;width:100%;min-height:40px;padding:8px 6px;border:0;background:transparent;color:#b9b9b9;font:600 14.5px/1.2 "Fira Sans",Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:default;pointer-events:none;}
    .s24ktf.is-filtered .s24ktf__sheetreset{color:#A30027;cursor:pointer;pointer-events:auto;}
  }
  @media (min-width:768px){
    .s24ktf__backdrop{display:none !important;}
    .s24ktf__panel{display:none;}
    .s24ktf.is-open .s24ktf__panel{display:block;}
    .s24ktf__dsum{display:flex;align-items:center;gap:18px;width:100%;padding:14px 18px;border:1.5px solid #dcdcdc;border-radius:12px;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;}
    .s24ktf__dsum:hover{border-color:#A30027;box-shadow:0 2px 10px rgba(20,20,20,.07);}
    .s24ktf__dsum:focus-visible{outline:2px solid #A30027;outline-offset:2px;}
    .s24ktf.is-open .s24ktf__dsum{border-color:#A30027;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px;}
    .s24ktf__dsumitems{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;flex:1 1 auto;min-width:0;}
    .s24ktf__dsumitem{display:flex;flex-direction:column;gap:3px;min-width:0;}
    .s24ktf__dsumitem b{font:700 11px/1.3 "Fira Sans",Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#9a9a9a;}
    .s24ktf__dsumitem span{font:700 15px/1.3 "Fira Sans",Arial,sans-serif;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .s24ktf__dsumcta{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font:700 14px/1 "Fira Sans",Arial,sans-serif;color:#A30027;}
    .s24ktf__dsumcta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s;}
    .s24ktf.is-open .s24ktf__dsumcta svg{transform:rotate(180deg);}
    .s24ktf.is-open .s24ktf__bar{background:#f4f4f5;border-color:#dcdcdc;}
    .s24ktf__bar{background:transparent;border:0;padding:0;}
    .s24ktf.is-open .s24ktf__panel{border:1.5px solid #A30027;border-top:1px solid #e6d3d8;border-radius:0 0 12px 12px;padding:20px 22px;background:#fafafa;}
  }
  @media (max-width:767px){ .s24ktf__dsum{display:none;} }
  @media (prefers-reduced-motion:reduce){ .s24ktf__panel,.s24ktf__backdrop,.s24ktf__grpchev{transition:none;} }
  
.s24kt-card__list li{position:relative;padding-left:21px;}
.s24kt-card__list li::before{content:"";position:absolute;left:1px;top:3px;width:9px;height:5px;border-left:2.6px solid #A30027;border-bottom:2.6px solid #A30027;transform:rotate(-45deg);border-radius:1px;}
.s24kt-card__list li svg{display:none;}

/* Preis, Lieferzeit und Button in einer Kachelreihe auf gleicher Hoehe */
.s24kt-card__body{flex:1 1 auto;}
.s24kt-card__list{flex:1 1 auto;}
.s24kt-card__price{margin-top:12px;}