/* product-list.css
   ------------------------------------------------------------
   Katalog-Layout (B2B, clean) – optisch nah an product-view.css
*/

:root{
  /* --bg kommt aus /css/styles.css (Seiten-Hintergrund/Farbverlauf wie rma.php) */
  /* NICHT überschreiben, sonst wird der Verlauf „platt“ (weiß). */
  /* --bg:#ffffff; */

  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --line:#e2e8f0;
  --soft:#f8fafc;

  --brand:#0f2740;

  --shadow: 0 10px 26px rgba(15,23,42,.08);
  --shadow2: 0 18px 44px rgba(15,23,42,.10);

  --r:16px;
  --max:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  /* Hintergrund aus /css/styles.css übernehmen (z.B. Farbverlauf wie rma.php) */
  /* background: var(--bg); */
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit}

/* Container */
.pl-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px 60px;
}

/* Topbar */
.pl-topbar{
  max-width:var(--max);
  margin:14px auto 0 auto;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pl-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:0;
}
.pl-logo{height:22px; width:auto; display:block}
.pl-brandtext{
  font-weight:900;
  color:var(--brand);
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Language pills */
.pl-lang{
  display:flex;
  gap:6px;
  background:var(--soft);
  border:1px solid var(--line);
  padding:4px;
  border-radius:999px;
}
.pl-langbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  min-width:44px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  text-decoration:none;
}
.pl-langbtn.is-active{
  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
  color:var(--text);
}

/* Panel */
.pl-panel{
  position:relative;
  overflow:hidden;

  /* Look & Feel wie rma.php (glassy, dezent, mit Akzentlinie) */
  border-radius: 22px;
  border: 1px solid rgba(15,74,160,.10);
  box-shadow: var(--shadow2);
  padding: 18px;

  /* background:
    radial-gradient(900px 360px at 18% 18%, rgba(245,130,32,.08), rgba(245,130,32,0) 60%),
    radial-gradient(900px 420px at 82% 24%, rgba(15,74,160,.07), rgba(15,74,160,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.92)); */
}
.pl-panel::before{
  content:"";
  position:absolute;
  left:-1px; right:-1px; top:-1px;
  height: 5px;
  background: linear-gradient(90deg, rgba(245,130,32,.98), rgba(245,130,32,.35), rgba(15,74,160,.16));
}
.pl-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  opacity:.75;
}
.pl-panel > *{ position:relative; z-index:1; }

.pl-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.pl-h1{
  margin:0;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing:-.35px;
  line-height:1.18;
}
.pl-sub{
  margin:8px 0 0 0;
  color:var(--muted);
  font-size:14px;
}

/* ERSETZEN: .pl-meta + .pl-meta-item
   (Mobil: "Ergebnisse" und "Heute" nebeneinander statt untereinander) */
.pl-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pl-meta-item{
  border:1px solid rgba(15,74,160,.10);
  background: rgba(255,255,255,.80);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 170px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* Mobil: 2 Spalten */
@media (max-width: 560px){
  .pl-meta{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    width:100%;
  }
  .pl-meta-item{
    min-width: 0; /* erlaubt echtes Shrinken in der Grid-Spalte */
    width:100%;
  }
}

.pl-meta-k{
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
}
.pl-meta-v{
  margin-top:6px;
  font-weight:950;
  letter-spacing:-.2px;
  color:var(--brand);
  font-size:14px;
}

/* Filters */
.pl-filters{
  margin-top: 14px;
  border-top: 1px solid rgba(15,74,160,.10);
  padding-top: 14px;

  display:grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(320px, 420px);
  gap:12px;
  align-items:start; /* Labels in einer Zeile ausrichten */
}
@media (max-width: 980px){
  .pl-filters{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .pl-filters{ grid-template-columns: 1fr; }
}

.pl-field{ display:grid; gap:6px; }
.pl-field--search{ grid-column: span 1; }

.pl-label{
  font-size:12px;
  color:var(--muted2);
  font-weight:900;
}

.pl-input, .pl-select{
  width:100%;
  height: 42px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  padding: 10px 12px;
  font-size:14px;
  outline:none;
}
.pl-input:focus, .pl-select:focus{
  border-color: rgba(245,130,32,.55); /* nutzt --orange-500 aus styles.css */
  box-shadow: 0 0 0 4px rgba(245,130,32,.12);
}

/* ERSETZEN: .pl-field--inline + @media-Blöcke (Checkbox soll in Zeile darunter) */
.pl-field--inline{
  display:grid;
  grid-template-columns: minmax(220px, 1fr) auto; /* Sortierung | Reset */
  grid-template-rows: auto auto;                 /* Zeile 1: Sort+Reset, Zeile 2: Nur verfügbar */
  gap:12px;
  align-items:end;
  justify-content:stretch;
}

/* Explizite Platzierung (damit nichts überläuft/überlappt) */
.pl-field--inline .pl-sort{
  grid-column:1;
  grid-row:1;
  min-width:0;
}
.pl-field--inline .pl-btn{
  grid-column:2;
  grid-row:1;
}
.pl-field--inline .pl-check{
  grid-column:1 / -1;   /* volle Breite innerhalb des rechten Blocks */
  grid-row:2;           /* untere Zeile */
  justify-self:end;     /* rechts ausrichten (wie Aktionen) */
}

@media (max-width: 980px){
  .pl-field--inline{
    grid-template-columns: 1fr auto;
  }
  .pl-field--inline .pl-check{
    justify-self:start; /* auf kleineren Breiten angenehmer */
  }
}

@media (max-width: 560px){
  .pl-field--inline{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .pl-field--inline .pl-sort{ grid-column:1; grid-row:1; }
  .pl-field--inline .pl-check{ grid-column:1; grid-row:2; justify-self:start; }
  .pl-field--inline .pl-btn{ grid-column:1; grid-row:3; width:100%; }
}


.pl-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  height:42px;
  padding:0 12px;
  white-space:nowrap;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--soft);
  font-size:13px;
  font-weight:800;
  color: var(--muted);
}
.pl-check input{ width:16px; height:16px; margin:0; cursor:pointer; }

.pl-sort{ display:grid; gap:6px; min-width: 190px; }

.pl-btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 14px;
  height: 42px;
  padding: 0 14px;
  cursor:pointer;
  font-weight:900;
  font-size:14px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pl-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

.pl-noresults{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(15,74,160,.20);
  background: rgba(15,74,160,.06);
  color: rgba(23,50,85,.85);
  font-weight: 800;
}

/* Grid */
.pl-grid{
  margin-top: 16px;
  display:grid;
  gap: 12px;
}

/* Item card */
.pl-item{
  display:grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;

  border:1px solid var(--line);
  background:#fff;
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
  padding: 12px;
  overflow:hidden;
}
@media (max-width: 980px){
  .pl-item{ grid-template-columns: 1fr; }
}

.pl-thumb{
  border:1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
  background: var(--soft);
  display:block;
  text-decoration:none;
}
.pl-thumb img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 11/10;
  object-fit: contain;
}
.pl-thumb-empty{
  padding: 44px 16px;
  text-align:center;
  color: var(--muted2);
  font-weight:800;
}

/* Body */
.pl-body{ display:grid; gap: 10px; min-width:0; }

.pl-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.pl-titles{ min-width: 0; flex: 1 1 520px; }

.pl-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom: 8px;
}
.pl-kchip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  /* color: rgba(23,50,85,.78); */
  /* border: 1px solid rgba(230,237,247,.90); */
  /* background: rgba(246,248,251,.55); */
  padding: 6px 8px;
  border-radius: 999px;
}

.pl-kchip--status{
  font-weight: 900;
}

/* Verfügbarkeit (Status) – subtil, aber eindeutig */
.pl-kchip--ok{
  color: rgba(6,95,70,.95);
  border-color: rgba(16,185,129,.25);
  background: rgba(209,250,229,.45);
}
.pl-kchip--no{
  color: rgba(153,27,27,.95);
  border-color: rgba(239,68,68,.25);
  background: rgba(254,226,226,.55);
}
.pl-kchip--wait{
  color: rgba(120,53,15,.95);
  border-color: rgba(245,158,11,.28);
  background: rgba(254,243,199,.55);
}
.pl-kchip--neutral{
  /* übernimmt Default-Look von .pl-kchip */
}

.pl-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.15px;
}
.pl-title a{ text-decoration:none; }
.pl-title a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.pl-desc{
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 90ch;
}

/* Price box */
.pl-pricebox{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  min-width: 220px;
  position: relative;
  overflow:hidden;
}
.pl-pricebox::before{
  content:"";
  position:absolute;
  inset: -1px -1px auto -1px;
  height: 5px;
  background: linear-gradient(90deg, #8220f5, var(--orange-600)); /* var aus styles.css */
}
.pl-price{
  font-weight: 950;
  font-size: 20px;
  letter-spacing: -.2px;
}
.pl-pricesub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pl-pricenote{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 700;
}

/* Facts grid */
.pl-facts{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 980px){
  .pl-facts{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .pl-facts{ grid-template-columns: 1fr; }
}
.pl-fact{
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 0;
}
.pl-fact .k{
  display:block;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
}
.pl-fact .v{
  display:block;
  margin-top: 6px;
  font-weight: 900;
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}

/* Bottom row */
.pl-bottom{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.pl-badges{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.pl-badge{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 900;
}

/* Actions */
.pl-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.pl-btn-ghost, .pl-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:14px;
  text-decoration:none;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pl-btn-ghost:hover, .pl-btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

.pl-btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color: #1a1209;
  box-shadow: 0 12px 32px rgba(245,130,32,.30);
}

/* Filtern: hidden MUSS wirklich unsichtbar sein (robust gegen eigene display-Regeln) */
.pl-item[hidden] { display: none !important; }


/* =========================================================
   Multi-Level Taxonomy Selects (v2)
   - mehrere Selects nebeneinander, brechen bei kleiner Breite um
   ========================================================= */
.pl-taxlevels{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pl-taxlevels .pl-select{
  flex: 1 1 180px;
  min-width: 180px;
}
/* =========================================================
   Pagination (client-side)
   ========================================================= */

.pl-pagerbar{
  margin-top: 14px;
  border-top: 1px solid rgba(15,74,160,.10);
  padding-top: 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.pl-pagerbar--bottom{
  margin-top: 18px;
}

.pl-field--perpage{
  min-width: 220px;
}

.pl-pagerwrap{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}

.pl-pagerinfo{
  color: var(--muted2);
  font-size:12px;
  font-weight:900;
  padding: 0 4px;
}

.pl-pager{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pl-pgbtn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  height:38px;
  min-width:38px;
  padding:0 12px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}

.pl-pgbtn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.pl-pgbtn.is-active{
  border-color: rgba(245,130,32,.55);
  box-shadow: 0 0 0 4px rgba(245,130,32,.12);
  background: rgba(255,255,255,.92);
}

.pl-pgbtn--nav{
  min-width: 84px;
}

.pl-pgbtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}

.pl-pg-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  min-width:24px;
  color: var(--muted2);
  font-weight:900;
}

/* Pagination-Hide: zweiter Layer (Filter nutzt [hidden]) */
.pl-item.pl-page-hidden{ display:none !important; }

@media (max-width: 560px){
  .pl-pagerwrap{ justify-content:stretch; width:100%; }
  .pl-pager{ justify-content:flex-start; }
  .pl-field--perpage{ width:100%; }
  .pl-pgbtn--nav{ min-width: 72px; }
}


.pl-info-icon{
  width:16px;
  height:16px;
  vertical-align:middle;
  margin-right:2px;
  filter: grayscale(100%) brightness(0.6); /* macht das Icon grau/dunkler */
  display:inline-block;
  margin-bottom: 2px;
}


/* Status-Chip: On request (blau) */
.pl-kchip--status.pl-kchip--info{
  background: rgba(37, 99, 235, .12);
  color: rgb(38 77 161);
}