/* Produktfinder · omaneo Design Tokens
   Erbt --bg, --accent, --text etc. aus assets/style.css wenn integriert.
   Standalone-Fallback: */
:root{
  --bg:#fff; --surface:#f8f6f3; --surface-2:#f0ede8; --border:#e8e3dc;
  --accent:#9b7a4a; --accent-h:#7d6038; --accent-dim:rgba(155,122,74,.10);
  --text:#1a1a1a; --muted:#6b6560; --subtle:#a8a39d;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-head:'Playfair Display',Georgia,serif;
  --r:4px; --r-lg:8px;
  --shadow:0 1px 8px rgba(0,0,0,.07);
  --shadow-lg:0 4px 24px rgba(0,0,0,.10);
}

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6}

.pf-hero{max-width:1280px;margin:0 auto;padding:48px 32px 32px;text-align:center}
.pf-hero h1{font-family:var(--font-head);font-weight:400;font-size:38px;margin:0 0 12px;line-height:1.15}
.pf-lead{color:var(--muted);max-width:none;margin:0;font-size:16px}

/* Toolbox: Suchfeld + Filter-Dropdown-Buttons */
.pf-toolbox{max-width:1280px;margin:0 auto;padding:8px 32px 0}
.pf-search-wrap{position:relative;margin-bottom:16px}
.pf-search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
}
.pf-search-wrap input{
  width:100%;padding:14px 14px 14px 44px;font-family:var(--font);font-size:15px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;color:var(--text);
  box-sizing:border-box;transition:border-color .2s,box-shadow .2s;
}
.pf-search-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

.pf-filterbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.pf-dd-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;background:#fff;color:var(--text);
  border:1px solid var(--border);border-radius:99px;
  font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;
  transition:all .2s;
}
.pf-dd-btn:hover{border-color:var(--accent);color:var(--accent)}
.pf-dd-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pf-dd-btn.active .pf-dd-arrow{color:#fff}
.pf-dd-arrow{color:var(--muted);font-size:10px;margin-left:2px;transition:color .2s}
.pf-reset{
  margin-left:auto;padding:8px 14px;background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:99px;font-family:var(--font);font-size:12px;
  cursor:pointer;letter-spacing:.3px;transition:all .2s;
}
.pf-reset:hover{color:var(--danger)}

/* Chips: aktive Filter zur Vor-Augen-Anzeige */
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pf-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px 4px 12px;background:var(--accent-dim);color:var(--accent-h);
  border-radius:99px;font-size:12px;font-weight:500;
}
.pf-chip-x{
  background:none;border:none;color:inherit;cursor:pointer;
  font-size:14px;line-height:1;padding:0 4px;opacity:.7;
}
.pf-chip-x:hover{opacity:1}

/* Popover: erscheint unter dem Dropdown-Button */
.pf-dd-popover{
  position:absolute;z-index:100;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);min-width:240px;max-width:340px;
  padding:10px;overflow:hidden;
}
.pf-dd-body{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.pf-option{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;padding:6px 10px;border-radius:var(--r);
}
.pf-option:hover{background:var(--surface)}
.pf-option input{accent-color:var(--accent)}
.pf-option-count{margin-left:auto;color:var(--subtle);font-size:12px}
/* Preis-Block im Popover */
.pf-price-range{display:flex;align-items:center;gap:8px;padding:6px}
.pf-price-range input{
  width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--r);
  font-family:var(--font);font-size:13px;background:#fff;
}
.pf-price-range input:focus{outline:none;border-color:var(--accent)}

/* Results-Container — kein Sidebar mehr, volle Breite */
.pf-results{max-width:1280px;margin:0 auto;padding:24px 32px 80px}

/* Welcome-Box (initial leerer Zustand) */
.pf-welcome{
  text-align:center;padding:80px 24px;color:var(--muted);
  max-width:520px;margin:0 auto;
}
.pf-welcome svg{color:var(--accent);opacity:.6;margin-bottom:16px}
.pf-welcome h3{
  font-family:var(--font-head);font-weight:400;font-size:22px;color:var(--text);
  margin:0 0 8px;
}
.pf-welcome p{margin:0;line-height:1.6;font-size:14px}

/* Results */
.pf-toolbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.pf-count{font-size:14px;color:var(--muted)}
.pf-count span{color:var(--text);font-weight:600}
.pf-sort label{font-size:13px;color:var(--muted);margin-right:8px}
.pf-sort select{
  padding:6px 28px 6px 12px;border:1px solid var(--border);border-radius:var(--r);
  background:#fff;font-family:var(--font);font-size:13px;cursor:pointer;
}

.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pf-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;
}
.pf-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pf-card-img{
  width:100%;aspect-ratio:1;background:var(--surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pf-card-img img{max-width:90%;max-height:90%;object-fit:contain}
.pf-card-img.empty{color:var(--subtle);font-size:12px}

/* Scope-Zeile: Tabs + Sold-Out-Toggle nebeneinander, gleicher Themenkomplex „Was wird gezeigt" */
.pf-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;            /* gleicher Abstand wie zwischen den Scope-Tabs (kein Bruch nach dem zweiten Button) */
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.pf-scope-row .pf-scope-tabs { margin: 0; }

/* „Nur lieferbare"-Toggle: optisch IDENTISCH zu den Scope-Tabs, aber eigene
   Klasse damit der scope-Refresh-Selector (refreshOnlyOmaneoBtn) ihn nicht
   versehentlich umschaltet. */
.pf-sold-out-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 248, 231, .6);
  border: 1.5px solid var(--accent, #A38855);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #6b5e3e;
  cursor: pointer;
  border-radius: 99px;
  transition: all .18s ease;
  white-space: nowrap;
}
.pf-sold-out-toggle:hover { background: var(--accent, #A38855); color: #fff; }
.pf-sold-out-toggle[data-active="1"] {
  background: var(--accent, #A38855);
  color: #fff;
  box-shadow: 0 2px 6px rgba(163, 136, 85, .3);
}

/* Scope-Tabs: einheitlicher Stil mit Show-Sold-Out — alle drei sind einzelne
   Pills nebeneinander mit demselben Border/Cream-Background. Aktiv = braun. */
.pf-scope-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
}
.pf-scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 248, 231, .6);
  border: 1.5px solid var(--accent, #A38855);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: #6b5e3e;
  cursor: pointer;
  border-radius: 99px;
  transition: all .18s ease;
  white-space: nowrap;
}
.pf-scope-tab:hover { background: var(--accent, #A38855); color: #fff; }
.pf-scope-tab[data-active="1"] {
  background: var(--accent, #A38855);
  color: #fff;
  box-shadow: 0 2px 6px rgba(163, 136, 85, .3);
}
@media (max-width: 480px) {
  .pf-scope-tab { padding: 8px 14px; font-size: 12px; }
}

/* Card-Action-Leiste: Detail-Auge links, Warenkorb rechts. Schwebt unten auf der Card. */
.pf-card { position: relative; }
.pf-card-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}
.pf-card-actions > button,
.pf-card-actions > a { pointer-events: auto; }

/* Linksgruppe (Auge + ggf. Edit-Stift) und Rechtsgruppe (Cart) — Cart wandert
   nach ganz rechts, weil pf-card-actions space-between layoutet und nur
   diese eine Gruppe noch in die Rechts-Position rückt. */
.pf-card-actions { gap:8px; }
.pf-card-cart { margin-left:auto; }

.pf-card-detail, .pf-card-cart, .pf-card-edit {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--accent, #A38855);
  border: 1.5px solid var(--accent, #A38855);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  padding: 0;
  position: relative;
  text-decoration: none;
}
.pf-card-detail:hover, .pf-card-cart:hover, .pf-card-edit:hover {
  background: var(--accent, #A38855);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(163,136,85,.35);
}

/* Modal-Buttons: kleiner Kreis-Stil wie auf den Cards, konsistent für
   Cart-Icon, Admin-Edit und Druck-Icon. */
.pf-detail-cart, .pf-detail-admin-edit, .pf-detail-print {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--accent, #A38855);
  border: 1.5px solid var(--accent, #A38855);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  text-decoration: none; cursor: pointer; padding: 0;
  transition: all .15s ease;
}
.pf-detail-cart:hover:not(:disabled),
.pf-detail-admin-edit:hover,
.pf-detail-print:hover {
  background: var(--accent, #A38855);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(163,136,85,.35);
}
.pf-detail-cart.is-sold-out {
  opacity: .4; cursor: not-allowed;
  border-color: #7a4c4c; color: #7a4c4c;
}

/* Druck-Layout: Modal als Datenblatt; alles andere weg.
   Wird aktiv wenn User Strg/Cmd+P drückt oder den Drucker-Knopf nutzt. */
/* ── Print: Datenblatt-Ausgabe ──────────────────────────────────────────
   Stand 2026-05-25 (Fix nach 68-leere-Seiten-Bug):
   Statt `visibility:hidden` (das den Layout-Raum stehenlässt) klonen wir
   den Modal-Inhalt vor dem Drucken in `<div class="om-print-target">`
   direkt unter <body> und setzen `body.is-printing`. Dann verstecken wir
   alle anderen Body-Kinder mit `display:none` → kein Platzhalter-Raum.
   Trigger: omaneoPrintDetail() in produktfinder.js, cleanup via afterprint.
─────────────────────────────────────────────────────────────────────── */
@media print {
  /* Während des Drucks alles ausblenden außer dem Print-Target.
     `display:none` (nicht visibility) damit kein Layout-Platz entsteht. */
  body.is-printing > *:not(.om-print-target) { display: none !important; }

  body.is-printing { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.is-printing .om-print-target { display: block !important; }

  /* Geklontes Detail: aus dem Modal-Wrapper holen, Datenblatt-Look */
  .om-print-target .pf-detail {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    background: #fff !important;
  }

  /* Was nicht aufs Datenblatt gehört */
  .om-print-target .pf-modal-close,
  .om-print-target .pf-detail-cta-row,
  .om-print-target .pf-detail-thumbs,
  .om-print-target .pf-detail-video,
  .om-print-target .pf-translate-hint,
  .om-print-target .pf-lightbox { display: none !important; }

  /* Bild auf Datenblatt-Größe */
  .om-print-target .pf-detail-main-img img {
    max-width: 8cm !important;
    max-height: 8cm !important;
    cursor: default !important;
  }

  /* Specs zweispaltig mit Trennlinien */
  .om-print-target .pf-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    font-size: 11pt;
  }
  .om-print-target .pf-spec {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 3px 0;
  }
  .om-print-target .pf-spec-label { color: #555; font-weight: 600; }
  .om-print-target h1,
  .om-print-target h2,
  .om-print-target h3 { color: #000; }

  /* Page-Setup: A4 hochkant mit kleinen Rändern */
  @page { size: A4 portrait; margin: 14mm 14mm 18mm 14mm; }
}

/* Verstecke om-print-target im normalen Screen-Modus (kommt nur kurz beim Print rein) */
.om-print-target { display: none; }
.pf-card-cart.is-added {
  background: #2e7d4f;
  color: #fff;
  border-color: #2e7d4f;
  transform: scale(1.18);
}

/* Mengen-Badge auf dem Cart-Button (oben rechts wie shop-typisch) */
.pf-cart-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  pointer-events: none;
}
.pf-cart-qty[hidden] { display: none; }

/* Produkt-Karten-Badges: oben links auf dem Bild */
.pf-card-img{position:relative}
.pf-shop-badge, .pf-market-badge{
  position:absolute;top:10px;left:10px;
  font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;box-shadow:0 1px 4px rgba(0,0,0,.15);
  pointer-events:none;
}
.pf-shop-badge{background:var(--accent);color:#fff}
.pf-market-badge{background:rgba(255,255,255,.94);color:var(--muted);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Inline-Varianten im Detail-Modal */
.pf-detail-source-line{margin:0 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-shop-badge.inline, .pf-market-badge.inline{position:static;display:inline-flex;align-items:center}
.pf-detail-source-hint{font-size:12px;color:var(--muted)}

/* CTA-Buttons */
.pf-shop-cta, .pf-market-cta{
  display:inline-block;margin:8px 0 18px;padding:11px 22px;
  text-decoration:none;border-radius:99px;
  font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  transition:background .2s,transform .15s,border-color .2s;
}
.pf-shop-cta{background:var(--accent);color:#fff}
.pf-shop-cta:hover{background:var(--accent-h);transform:translateY(-1px);color:#fff}
.pf-market-cta{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
.pf-market-cta:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.pf-card-body{padding:14px 16px 62px;display:flex;flex-direction:column;flex:1;gap:6px}
.pf-card-brand{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:500}
.pf-card-name{font-family:var(--font-head);font-size:16px;line-height:1.25;color:var(--text);margin:0;min-height:40px}
/* Kurzbeschreibung auf der Card — abgeschnitten nach 2 Zeilen mit „…",
   damit Cards einheitlich hoch bleiben (Wiederaufnahme 2026-05-25). */
.pf-card-short{
  font-size:12px;line-height:1.45;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  /* Reserviert immer 2 Zeilen Platz, auch wenn der Text kürzer ist */
  min-height:calc(2 * 1.45em);
}
.pf-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:8px}
.pf-tag{
  font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;
  background:var(--accent-dim);color:var(--accent);border-radius:99px;font-weight:500;
}
.pf-card-price{
  margin-top:6px;font-family:var(--font-head);font-size:18px;color:var(--text);
}
.pf-card-price small{font-family:var(--font);font-size:11px;color:var(--muted);margin-left:4px}

.pf-loading, .pf-empty{padding:60px 20px;text-align:center;color:var(--muted)}

/* Modal */
.pf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.pf-modal[hidden]{display:none}
.pf-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.pf-modal-card{
  position:relative;background:#fff;border-radius:var(--r-lg);max-width:960px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);
}
.pf-modal-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  font-size:32px;line-height:1;color:var(--muted);cursor:pointer;z-index:1;
  width:40px;height:40px;border-radius:50%;
}
.pf-modal-close:hover{background:var(--surface);color:var(--text)}

.pf-detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px}
.pf-detail-gallery{display:flex;flex-direction:column;gap:12px}
.pf-detail-main-img{
  width:100%;aspect-ratio:1;background:var(--surface);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pf-detail-main-img img{max-width:90%;max-height:90%;object-fit:contain}
.pf-detail-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.pf-detail-thumbs img{
  width:60px;height:60px;object-fit:contain;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:4px;cursor:pointer;
}
.pf-detail-thumbs img.active{border-color:var(--accent)}

/* Unified Thumb-Button (Bilder + Videos in der Galerie). */
.pf-detail-thumbs .pf-thumb{
  position:relative; width:60px; height:60px; padding:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, transform .15s;
}
.pf-detail-thumbs .pf-thumb:hover{ transform:scale(1.04); }
.pf-detail-thumbs .pf-thumb.active{ border-color:var(--accent); }
.pf-detail-thumbs .pf-thumb img{
  width:100%; height:100%; object-fit:contain; padding:4px;
  border:none; border-radius:0;
}
.pf-detail-thumbs .pf-thumb-video img{ object-fit:cover; padding:0; }
.pf-detail-thumbs .pf-thumb-video::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.35);
}
.pf-detail-thumbs .pf-thumb-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none;
}

/* Externe Links unter der Gallery: Herstellerseite + YouTube-Testvideo */
.pf-detail-links{
  display:flex;flex-direction:column;gap:6px;margin-top:6px;
}
.pf-detail-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r);
  text-decoration:none;font-size:13px;font-weight:500;
  transition:background .15s,border-color .15s,color .15s;
}
.pf-detail-link:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.pf-detail-link svg{flex-shrink:0;opacity:.85}
/* Text-Span (immer letztes Kind) dehnt sich, NICHT der Icon-Span davor.
   2026-05-27: Bei doc-Links (zwei Spans: Icon + Text) hat das alte
   `.pf-detail-link span{flex:1}` beide Spans gestreckt und den Text
   weit nach rechts geschoben → frühe Ellipsis-Abschneidung. */
.pf-detail-link > span:last-child{flex:1;min-width:0}
.pf-detail-link-yt svg{color:#cc0000}
.pf-detail-link-yt:hover svg{opacity:1}

/* Dokumente (PDF-Downloads aus rheinland.coffee Crawl etc.) */
.pf-detail-docs{
  display:flex;flex-direction:column;gap:4px;margin-top:4px;
  padding-top:6px;border-top:1px dashed var(--border);
}
/* Buttons kompakter: halbiertes Padding, einzeiliger Text mit Ellipsis bei Überlauf */
.pf-detail-link-doc{
  padding:4px 10px;
  font-size:13px;
  min-height:0;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pf-detail-link-doc > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}
.pf-detail-doc-icon{font-size:14px;line-height:1;flex-shrink:0;}
.pf-detail-link-manual:hover{border-color:#3b82f6;color:#3b82f6}
.pf-detail-link-brochure:hover{border-color:#8b5cf6;color:#8b5cf6}
.pf-detail-link-catalog:hover{border-color:#10b981;color:#10b981}
.pf-detail-link-datasheet:hover{border-color:#f59e0b;color:#f59e0b}
.pf-detail-info h2,
.pf-detail-info h2.pf-detail-name{font-family:var(--font-head);font-size:28px;font-weight:400;margin:0 0 6px;line-height:1.2}
.pf-detail-brand{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:8px}
.pf-detail-artnr{color:var(--muted);font-weight:400;letter-spacing:1px}
.pf-detail-subtitle{color:var(--muted);font-size:14px;line-height:1.45;margin:0 0 12px;font-style:italic}

/* Detail-Header Z4 (Preis | Badge) + Z5 (CTA-Icons | Kategorie) — analog Edit-Form.
   Name und Subtitle bleiben voll-breit; nur diese beiden Zeilen sind 2-spaltig.
   Refactor 2026-05-25 sehr spät (Dieter: „rechts neben Preis Badge, darunter
   neben Icons die Kategorie"). */
.pf-detail-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.pf-detail-row-price{margin:14px 0 16px}
.pf-detail-row-price .pf-detail-price{margin:0}
/* Preis-Block: Art-Nr dezent darüber, Preis prominent darunter (Dieter 2026-05-25 spät:
   „artikelnummer elegant unterbringen" — analog zur Karte, aber im Modal vertikal gestapelt). */
.pf-detail-price-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pf-detail-artnr{font-family:'SF Mono',Menlo,monospace;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}
.pf-detail-cat{color:var(--accent);font-weight:500;letter-spacing:1.5px}
.pf-detail-row-cta{margin-bottom:24px}
.pf-detail-cta-icons{display:flex;gap:10px;align-items:center}
.pf-detail-badge{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--accent);text-align:right;align-self:end}
.pf-detail-category{font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);text-align:right}
.pf-detail-price{font-family:var(--font-head);font-size:28px;margin:14px 0;color:var(--text)}
.pf-detail-price small{font-family:var(--font);font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}
.pf-detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
/* Kurzbeschreibung — eigener Block oben mit etwas Gewicht */
.pf-detail-short-block{margin-bottom:16px}
.pf-detail-short{color:var(--text);font-size:15px;line-height:1.65;margin:0 0 10px;font-weight:500}
.pf-detail-short:last-child{margin-bottom:0}
/* Lange Beschreibung — kommt darunter, leichteres Gewicht */
.pf-detail-desc{color:var(--text);line-height:1.7;font-size:14px}
.pf-detail-desc p{margin:0 0 12px}
.pf-detail-desc p:last-child{margin-bottom:0}
.pf-detail-desc ul.pf-feature-list{margin:0 0 12px;padding-left:20px;list-style:disc}
.pf-detail-desc ul.pf-feature-list li{margin:0 0 4px;line-height:1.55}

/* Fachbegriffe mit Tooltip */
.pf-term{
  position:relative;color:var(--accent);text-decoration:none;
  border-bottom:1px dotted var(--accent);cursor:help;
}
.pf-term:hover{color:var(--accent-h);border-bottom-color:var(--accent-h)}
.pf-term-tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--text);color:#fff;font-size:12px;line-height:1.4;font-weight:400;
  padding:8px 12px;border-radius:var(--r);width:max-content;max-width:280px;
  z-index:10;box-shadow:var(--shadow-lg);pointer-events:none;
  border-bottom:none;
}
.pf-term-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--text);
}
.pf-detail-meta{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.pf-detail-meta a{color:var(--accent)}
/* Admin-only-Hinweise zurückgenommen anzeigen (intern, nur für Admin sichtbar) */
.pf-detail-meta .pf-admin-only{
  margin-top:8px;padding:6px 10px;background:var(--surface);
  border-left:2px solid var(--accent);font-size:11px;font-style:italic;
}

.pf-specs{padding:0 32px 32px;grid-column:1/-1}
.pf-specs h3{font-family:var(--font-head);font-weight:400;font-size:20px;margin:0 0 16px;padding-top:24px;border-top:1px solid var(--border)}
.pf-specs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 24px;
}
.pf-spec{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted var(--border);font-size:13px}
.pf-spec-label{color:var(--muted)}
.pf-spec-value{color:var(--text);font-weight:500;text-align:right}

/* Detail-Modal: Sold-Out Hinweis */
.pf-detail-sold-out{
  margin:12px 0;
  padding:10px 14px;
  background:#fef0ee;
  border-left:3px solid #c0392b;
  color:#922b1f;
  font-weight:500;
  font-size:14px;
  border-radius:4px;
}
.pf-shop-cta.is-sold-out{ opacity:0.6; }

/* Sold-Out Banner (diagonal über dem Produktbild) */
.pf-card-img.is-sold-out img { opacity:0.4; filter:grayscale(0.3); }
.pf-sold-out-banner{
  position:absolute;
  top:18px;
  left:-50px;
  width:200px;
  text-align:center;
  background:#c0392b;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  padding:6px 0;
  transform:rotate(-32deg);
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  text-transform:uppercase;
  pointer-events:none;
  z-index:5;
}
.pf-card-img{ position:relative; overflow:hidden; }

/* Admin-Edit-Icon auf Card (nur sichtbar wenn als Admin eingeloggt).
   Dunkler Background + weißes Icon — Cards haben oft weiße Produkt-Backgrounds,
   da würde weiß-auf-weiß komplett verschwinden. */
.pf-card-admin-edit{
  position:absolute; bottom:8px; left:8px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  background:rgba(20,20,20,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  text-decoration:none; transition:background .15s, transform .15s;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.6);
}
.pf-card-admin-edit:hover{ background:var(--accent, #A38855); color:#fff; transform:scale(1.12); border-color:#fff; }

/* Lightbox: Vollbild-Ansicht des Produktbilds. */
.pf-lightbox{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  padding:48px;
  cursor:zoom-out;
}
.pf-lightbox-img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  cursor:default;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  border-radius:4px;
}
.pf-lightbox-close{
  position:absolute; top:18px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.95); color:#222;
  border:none; font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.pf-lightbox-close:hover{ background:#fff; }
.pf-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.85); color:#222;
  border:none; font-size:36px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.pf-lightbox-nav.prev{ left:24px; }
.pf-lightbox-nav.next{ right:24px; }
.pf-lightbox-nav:hover{ background:#fff; }
.pf-lightbox-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff;
  padding:6px 14px; border-radius:14px; font-size:13px;
}
@media (max-width:640px){
  .pf-lightbox{ padding:12px; }
  .pf-lightbox-nav{ width:40px; height:40px; font-size:28px; }
  .pf-lightbox-nav.prev{ left:6px; }
  .pf-lightbox-nav.next{ right:6px; }
}

/* Mobile */
@media (max-width:840px){
  .pf-toolbox, .pf-results{padding-left:16px;padding-right:16px}
  .pf-filterbar{gap:6px}
  .pf-dd-btn{padding:6px 10px;font-size:12px}
  .pf-detail{grid-template-columns:1fr;padding:20px}
  .pf-hero{padding:24px 16px}
  .pf-hero h1{font-size:28px}
}