/* Kategorie- und Shopseite: Seitenkopf, Unterkategorie-Kacheln, Werkzeugleiste,
 * Produktraster, Filterpanel-Inhalt.
 *
 * Quelle: design/handoff/Kategorie-Steaks.dc.html und Shop.dc.html
 * (<style>-Block). Beide Seiten sind dasselbe Template mit anderen Daten.
 * Karte, Chips und Buttons stehen in css/komponenten.css, die Panel-Huelle in
 * css/panel.css.
 */

/* NOVA polstert #content-wrapper oben mit 64px. Die Referenz setzt den
   Seitenkopf auf 60px - beides zusammen waere zu viel. data-page="2" ist
   PAGE_ARTIKELLISTE aus includes/defines_inc.php. */
body[data-page="2"] #content-wrapper{padding-top:0}

.pgh{padding:60px 0 0}
/* Die Referenz setzt die 46px als Inline-Stil am <h1> und holt sie sich bei
   640 mit !important zurueck. Hier genuegt die hoehere Spezifitaet. */
.pgh .stitle{font-size:46px;margin:0}
.bcrumb{display:flex;gap:7px;align-items:center;font:500 12.5px/1 var(--font-body);color:var(--color-text-muted);margin-bottom:10px;flex-wrap:wrap}
.bcrumb a{color:var(--color-text-muted);text-decoration:none}
.bcrumb a:hover{color:var(--color-link)}
.bcrumb a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.bcrumb svg{width:13px;height:13px;flex:none}
.catdesc{font:400 15.5px/1.75 var(--font-body);color:var(--color-text-muted);max-width:720px;margin:18px 0 0;text-wrap:pretty}

/* ================= Unterkategorie-Kacheln ================= */
.subcats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding:40px 0 6px}
.scat{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;color:var(--navy-800);font:700 13px/1 var(--font-body);text-align:center}
.scat .im{width:94px;height:94px;border-radius:var(--radius-pill);background-color:#f5f9fd;display:grid;grid-template-rows:100%;place-items:center;border:1px solid var(--hair);transition:all var(--transition-fast)}
.scat .im img{width:74%;height:74%;object-fit:contain}
/* Marmorfoto statt KI-Illustration (29.09.2026): fuellt die Scheibe ganz. */
.scat .im{overflow:hidden}
.scat .im img:is([src*="/image/product/"],[src*="/images/kategorie/"]){width:100%;height:100%;object-fit:cover}
.scat:hover{color:var(--navy-950)}
.scat:hover .im{border-color:var(--sky-400);transform:translateY(-3px)}
.scat:focus-visible{outline:none}
.scat:focus-visible .im{box-shadow:var(--focus-ring)}
[data-theme="dark"] .scat{color:var(--navy-100)}
[data-theme="dark"] .scat .im{background-color:rgba(160,218,254,.07)}
/* Hauptkategorie ohne Sortiment: sichtbar, aber erkennbar nicht anklickbar -
   dieselbe Behandlung wie im Mega-Menue (.mbald in layout.css). Sie
   verschwindet bewusst nicht: im Menue steht sie ebenfalls, und eine Kachel,
   die zwischen zwei Seitenaufrufen auftaucht, verwirrt mehr als eine
   ausgegraute. */
.scat.sbald{color:var(--color-text-muted);cursor:default}
.scat.sbald img{filter:grayscale(1)}
.scat.sbald .mbaldtag{margin-top:2px}

/* ================= Werkzeugleiste ================= */
.shoptools{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0 16px;flex-wrap:wrap}
/* Trefferzahl und Seitennavigation bilden die linke Gruppe. */
.shoptools .tw-seiten-oben{margin-right:auto}
.scount{font:500 13px/1 var(--font-body);color:var(--color-text-muted)}
.tw .fbtn{gap:8px;padding:12px 19px;font-size:13.5px}
.stools{display:flex;gap:10px;position:relative}

/* Sortierung: <details> statt Skript. Ohne JS klappt die Liste trotzdem auf,
   jeder Eintrag ist ein Link auf die von JTL erzeugte Sortier-URL. */
.sortd{position:relative}
.sortd > summary{list-style:none;cursor:pointer}
.sortd > summary::-webkit-details-marker{display:none}
.sortmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:210px;background:var(--color-surface);border:1px solid var(--hair);border-radius:12px;box-shadow:0 18px 40px -20px rgba(17,28,53,.4);padding:6px;display:flex;flex-direction:column}
.sortmenu a{font:600 13px/1 var(--font-body);color:var(--color-text);text-decoration:none;padding:11px 13px;border-radius:8px}
.sortmenu a:hover{background:var(--color-bg-alt);color:var(--color-link)}
.sortmenu a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sortmenu a.on{color:var(--color-link);font-weight:800}
[data-theme="dark"] .sortmenu{border-color:rgba(160,218,254,.14)}
[data-theme="dark"] .sortmenu a:hover{background:rgba(160,218,254,.08)}

/* ================= Produktraster ================= */
.g3p{display:grid;grid-template-columns:repeat(3,1fr);gap:72px 56px}
.g3p .pimg{height:252px}
.plist{padding:4px 0 56px}
/* Der Kategorietext sass hier schon vom 28.08. bis zum 30.08.2026, zog dann
   fuer eine Weile in den Kopf (.catdesc-oben, inzwischen entfernt) und
   landet per Ansage 08.09.2026 wieder hier - unter Raster und Blaettern,
   ausgegeben ueber Block 'tw-kat-text-unten' in productlist/index.tpl. Eine
   Haarlinie darueber trennt Sortiment von Lesestoff, damit der Wechsel
   nicht wie eine abgerissene Produktliste wirkt. */
.katext{padding:0 0 120px}
.katext .shell{border-top:1px solid var(--hair);padding-top:38px}
.katext .catdesc{margin:0}
.pempty{font:400 15.5px/1.75 var(--font-body);color:var(--color-text-muted);padding:20px 0 60px}

/* ================= Filterpanel ================= */
.fitems{flex:1;overflow-y:auto;overflow-x:hidden}
.fgroup{padding:18px 20px;border-bottom:1px solid var(--hair)}
.fgroup h4{display:flex;align-items:center;gap:8px;font:700 13.5px/1 var(--font-body);margin:0 0 12px}
.fgroup h4 svg{width:15px;height:15px;color:var(--sky-600)}
[data-theme="dark"] .fgroup h4 svg{color:var(--sky-300)}
.fchips{display:flex;gap:7px;flex-wrap:wrap}
.fchips .sz{gap:6px}
.fcount{opacity:.6;font-weight:500}
.szi{display:inline-flex;align-items:center;gap:7px}
.szi svg{width:14px;height:14px;opacity:.75}
.sz.on svg{opacity:1}

/* ================= Responsive =================
 * Werte und Reihenfolge wie in der Referenz.
 */
/* Die Referenz bricht das Raster zweimal auf zwei Spalten (1024 und 1000) -
   der zweite Block ist wirkungslos und steht deshalb hier nicht. */
@media (max-width:1024px){
.g3p{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.pgh .stitle{font-size:32px}
.g3p{grid-template-columns:1fr}
.subcats{gap:14px}
.shoptools{flex-wrap:wrap}
}


/* Kopfbereich mittig: der Titel steht ueber der zentrierten Kachelreihe und
   nimmt deren Achse auf. Die HTML-Referenz hat ihn linksbuendig
   (Kategorie-Steaks.dc.html), Ansage vom 30.08.2026 geht bewusst darueber. */
.tw-kat .stitle,
.tw-kat .bcrumb{text-align:center}
.tw-kat .bcrumb{justify-content:center}

/* Seitennavigation in Hausform: runde Ziffern statt Bootstraps Kaesten mit
   gelbem Unterstrich. Die Klassen kommen aus NOVAs Snippet, deshalb wird hier
   umgefaerbt statt neu gebaut - so bleibt das Ajax-Nachladen
   (js-pagination-ajax) unangetastet. */
.tw-kat .navbar-pagination .pagination{display:flex;gap:8px;align-items:center;
  justify-content:center;padding:0;margin:0;list-style:none}
/* NOVA klappt die Seiten unter 768px in ein Dropdown. Bei dieser Seitenzahl
   ist die Liste kuerzer als der Umweg - deshalb ueberall inline. */
.tw-kat .navbar-pagination .pagination .dropdown>.btn{display:none}
.tw-kat .navbar-pagination .pagination .dropdown-menu{position:static!important;
  transform:none!important;display:flex;gap:8px;margin:0;padding:0;border:0;
  background:none;box-shadow:none;min-width:auto;float:none}
.tw-kat .navbar-pagination .pagination .dropdown-item{width:auto;padding:0;
  background:none;display:inline-block}
.tw-kat .navbar-pagination .page-item{position:relative;font-weight:400}
/* Der gelbe Balken unter der aktiven Seite ist NOVA-Erbe. */
.tw-kat .navbar-pagination .page-item.active .page-link::after{content:none}
.tw-kat .navbar-pagination .page-link{display:grid;place-items:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-pill);
  background:var(--color-surface);color:var(--color-text);
  box-shadow:inset 0 0 0 1px var(--color-border);
  font:700 14px/1 var(--font-body);text-decoration:none;
  transition:background var(--transition-fast),transform var(--transition-fast),
             box-shadow var(--transition-fast)}
.tw-kat .navbar-pagination .page-link:hover{background:var(--color-bg-alt);
  color:var(--color-text);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px var(--sky-400)}
.tw-kat .navbar-pagination .page-item.active .page-link,
.tw-kat .navbar-pagination .dropdown-item.active .page-link{
  background:var(--color-cta);color:var(--color-cta-ink);
  box-shadow:0 12px 26px -14px rgba(17,28,53,.4)}
.tw-kat .navbar-pagination .page-item.active .page-link:hover,
.tw-kat .navbar-pagination .dropdown-item.active .page-link:hover{
  background:var(--color-cta-hover)}
.tw-kat .navbar-pagination .page-item.disabled .page-link{
  color:var(--color-text-muted);opacity:.45;pointer-events:none}
.tw-kat .navbar-pagination .page-link:focus-visible{outline:none;
  box-shadow:var(--focus-ring)}
/* "Seite" ausblenden, die Ziffer allein traegt im Kreis. */
.tw-kat .navbar-pagination .pagination-site{display:none}

/* Die Zeile drumherum: NOVA setzt hier ein Bootstrap-Raster mit Trennlinien. */
.tw-kat .productlist-page-nav{display:flex;justify-content:center;
  align-items:center;gap:16px;flex-wrap:wrap;margin:0}
.tw-kat .productlist-page-nav .productlist-item-info{
  font:400 var(--text-small)/1.4 var(--font-body);color:var(--color-text-muted);
  border:0;padding:0}
.tw-kat hr.productlist-page-nav-top,
.tw-kat hr.productlist-page-nav-bottom{border:0;border-top:1px solid var(--hair);
  margin:22px 0}
/* Oben doppelt sich die Trefferzahl mit der Werkzeugleiste darunter. */
.tw-kat .tw-seiten-oben .productlist-item-info{display:none}


/* Seitennavigation in der Werkzeugleiste: kompakter als die untere, damit sie
   neben der Trefferzahl nicht dominiert. Die untere bleibt gross und mittig -
   dort ist sie das Hauptziel, oben nur eine Abkuerzung. */
.tw-kat .tw-seiten-oben .productlist-page-nav{gap:8px;justify-content:flex-start}
.tw-kat .tw-seiten-oben hr{display:none}
.tw-kat .tw-seiten-oben .page-link{min-width:32px;height:32px;padding:0 9px;font-size:13px}
.tw-kat .tw-seiten-oben .navbar-pagination .pagination{gap:6px}

/* Mobil faellt die Seitennavigation kleiner aus und die Abstaende ruecken
   zusammen - Ansage vom 30.08.2026. */
@media (max-width:720px){
  .tw-kat .navbar-pagination .page-link{min-width:34px;height:34px;padding:0 9px;font-size:13px}
  .tw-kat .tw-seiten-oben .page-link{min-width:29px;height:29px;padding:0 7px;font-size:12px}
  .tw-kat .navbar-pagination .pagination{gap:6px}
  /* Kleinere Scheiben, damit drei statt zwei in eine Zeile passen: sechs
     Hauptkategorien brauchten am Telefon sonst drei Zeilen und schoben die
     Produkte weit nach unten. */
  .subcats{padding:20px 0 2px;gap:10px 14px}
  .scat{gap:7px;font-size:12px;max-width:96px}
  .scat .im{width:70px;height:70px}
  .scat.sbald .mbaldtag{font-size:9.5px;padding:4px 7px}
  .shoptools{padding:12px 0 10px;gap:10px}
  .tw-kat hr.productlist-page-nav-top,
  .tw-kat hr.productlist-page-nav-bottom{margin:14px 0}
}

/* Reihe der aktiven Filter, oben im Filterpanel. Sie steht dort, weil sich
   Filter im Shop-Core selbst verstecken koennen (Availability.php ruft
   hide(), sobald er greift) - ohne diese Reihe bleibt so ein Filter gesetzt
   und ist nirgends mehr abwaehlbar. Optisch dieselben Chips wie darunter,
   nur mit x-Symbol statt Wert-Symbol. */
.faktiv{border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:4px}
.faktiv .sz svg{width:12px;height:12px}