/* ── NPC Frontend Styles ──────────────────────────────────────────────────── */
:root {
    --npc-primary:   #bccf21;
    --npc-dark:      #1a1a2e;
    --npc-gray:      #6b7280;
    --npc-light:     #f9fafb;
    --npc-border:    #e5e7eb;
    --npc-red:       #ef4444;
    --npc-green:     #22c55e;
    --npc-blue:      #3b82f6;
    --npc-radius:    0.75rem;
    --npc-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

/* ── Filter-Bar ───────────────────────────────────────────────────────────── */
.npc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--npc-light);
    border: 1px solid var(--npc-border);
    border-radius: var(--npc-radius);
}
.npc-search-input,
.npc-filter-select {
    height: 2.4rem;
    padding: 0 .75rem;
    border: 1px solid var(--npc-border);
    border-radius: .5rem;
    font-size: .875rem;
    background: #fff;
    outline: none;
}
.npc-search-input { min-width: 200px; }
.npc-search-input:focus,
.npc-filter-select:focus { border-color: var(--npc-primary); }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.npc-grid { display: grid; gap: 1.25rem; }
.npc-grid-1 { grid-template-columns: 1fr; }
.npc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.npc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.npc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .npc-grid-3, .npc-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .npc-grid-2, .npc-grid-3, .npc-grid-4 { grid-template-columns: 1fr; } }

/* ── Karte ────────────────────────────────────────────────────────────────── */
.npc-card {
    background: #fff;
    border: 1px solid var(--npc-border);
    border-radius: var(--npc-radius);
    box-shadow: var(--npc-shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.npc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.npc-card-link { text-decoration: none; color: inherit; }
.npc-card-link:hover { color: inherit; }

/* Overlay-Link: gesamte Karte klickbar */
.npc-card-linkable { position: relative; }
.npc-card-overlay-link {
    position: absolute; inset: 0; z-index: 0;
    border-radius: var(--npc-radius);
}
/* Interaktive Elemente über dem Link-Overlay */
.npc-card-linkable .npc-btn-compare,
.npc-card-linkable .npc-badge-featured { position: relative; z-index: 1; }
.npc-card-featured { border-color: var(--npc-primary); }
.npc-badge-featured {
    position: absolute; top: .75rem; right: .75rem;
    background: var(--npc-primary); color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: .05em;
    padding: .2rem .5rem; border-radius: 20px; text-transform: uppercase;
}
.npc-card-image {
    aspect-ratio: 4/3; overflow: hidden;
    background: var(--npc-light);
    display: flex; align-items: center; justify-content: center;
}
.npc-card-image img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.npc-card-no-image { color: var(--npc-border); width: 48px; }
.npc-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.npc-card-manufacturer { font-size: .7rem; font-weight: 600; color: var(--npc-gray); text-transform: uppercase; letter-spacing: .04em; }
.npc-card-title { font-size: .95rem; font-weight: 700; color: var(--npc-dark); margin: 0; line-height: 1.3; }
.npc-card-desc { font-size: .8rem; color: var(--npc-gray); line-height: 1.5; margin: 0; }
.npc-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.npc-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.npc-art-nr { font-size: .7rem; color: var(--npc-gray); font-family: monospace; }

/* ── Tags / Badges ────────────────────────────────────────────────────────── */
.npc-tag {
    display: inline-block; font-size: .65rem; padding: .15rem .5rem;
    border-radius: 20px; background: var(--npc-light);
    border: 1px solid var(--npc-border); color: var(--npc-gray);
}
.npc-tag-wifi  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.npc-tag-poe   { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.npc-badge-pill {
    display: inline-block; font-size: .7rem; padding: .2rem .6rem;
    border-radius: 20px; font-weight: 600;
}
.npc-badge-blue  { background: #eff6ff; color: #1d4ed8; }
.npc-badge-green { background: #f0fdf4; color: #15803d; }
.npc-badge-gray  { background: var(--npc-light); color: var(--npc-gray); }

/* ── Lagerbestand ─────────────────────────────────────────────────────────── */
.npc-stock-badge { font-size: .75rem; font-weight: 600; }
.npc-stock-in  { color: var(--npc-green); }
.npc-stock-out { color: var(--npc-gray); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.npc-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem; border-radius: .5rem; font-size: .875rem;
    font-weight: 600; text-decoration: none; cursor: pointer;
    border: none; transition: opacity .15s;
}
.npc-btn:hover { opacity: .9; }
.npc-btn-primary  { background: var(--npc-primary); color: #fff; }
.npc-btn-secondary{ background: var(--npc-dark); color: #fff; }
.npc-btn-filter   { background: var(--npc-dark); color: #fff; }
.npc-btn-reset    { color: var(--npc-gray); background: none; border: 1px solid var(--npc-border); }
.npc-btn-sm       { padding: .25rem .6rem; font-size: .75rem; }
.npc-btn-compare  {
    width: 100%; margin-top: .5rem; text-align: center;
    background: none; border: 1px solid var(--npc-primary);
    color: var(--npc-dark); font-size: .8rem; font-weight: 600;
    border-radius: .5rem; padding: .4rem; cursor: pointer;
}
.npc-btn-compare:hover { background: var(--npc-primary); color: #fff; }
.npc-btn-datasheet { width: 100%; justify-content: center; }

/* ── Einzelprodukt ────────────────────────────────────────────────────────── */
.npc-single-product { max-width: 1100px; margin: 0 auto; }
.npc-sp-header { margin-bottom: 2rem; }
.npc-sp-title { font-size: 1.6rem; font-weight: 800; margin: .4rem 0; }
.npc-sp-manufacturer { color: var(--npc-gray); font-size: .9rem; margin: 0 0 .75rem; }
.npc-sp-badges { display: flex; gap: .4rem; flex-wrap: wrap; }

.npc-sp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
@media (max-width: 768px) { .npc-sp-layout { grid-template-columns: 1fr; } }

.npc-sp-main-image { border: 1px solid var(--npc-border); border-radius: var(--npc-radius); overflow: hidden; }
.npc-sp-main-image img { width: 100%; height: 320px; object-fit: contain; background: var(--npc-light); }
.npc-sp-thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.npc-thumb { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--npc-border); border-radius: .4rem; cursor: pointer; background: var(--npc-light); }
.npc-thumb:hover, .npc-thumb.active { border-color: var(--npc-primary); }

.npc-sp-short-desc { font-size: 1rem; color: var(--npc-dark); line-height: 1.6; margin-bottom: 1.25rem; }
.npc-sp-availability { margin-bottom: 1rem; font-size: .9rem; font-weight: 600; }
.npc-sp-article-info { border-top: 1px solid var(--npc-border); margin: 1rem 0; }
.npc-sp-info-row { display: flex; padding: .4rem 0; border-bottom: 1px solid var(--npc-border); font-size: .875rem; }
.npc-sp-info-label { color: var(--npc-gray); width: 130px; flex-shrink: 0; }
.npc-sp-info-value { font-weight: 600; }
.npc-sp-datasheet, .npc-sp-contact { margin-top: .75rem; }

.npc-sp-description { margin-bottom: 2rem; }
.npc-sp-description h3, .npc-sp-specs h3, .npc-sp-related h3 {
    font-size: 1.1rem; font-weight: 700; border-bottom: 2px solid var(--npc-primary);
    padding-bottom: .4rem; margin-bottom: 1rem; display: inline-block;
}

/* Abstände im Beschreibungstext */
.npc-sp-desc-content p {
    margin-bottom: 1.1rem;
    line-height: 1.75;
    color: var(--npc-dark);
}
.npc-sp-desc-content p:last-child { margin-bottom: 0; }

/* Fett-Zeilen die als Überschrift fungieren (z.B. "Highlights") */
.npc-sp-desc-content p strong:only-child {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--npc-dark);
    text-decoration: underline;
    text-decoration-color: var(--npc-primary);
    text-underline-offset: 3px;
}
.npc-sp-desc-content p:has(> strong:only-child) {
    margin-top: 1.75rem;
    margin-bottom: .4rem;
}

/* Listen */
.npc-sp-desc-content ul,
.npc-sp-desc-content ol {
    margin: .5rem 0 1.1rem 1.4rem;
    line-height: 1.75;
}
.npc-sp-desc-content li { margin-bottom: .25rem; }

/* ── Spec-Tabelle ─────────────────────────────────────────────────────────── */
.npc-specs-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.npc-specs-table tr:nth-child(even) { background: var(--npc-light); }
.npc-specs-table th, .npc-specs-table td { padding: .5rem .75rem; border: 1px solid var(--npc-border); text-align: left; }
.npc-specs-table th { font-weight: 600; width: 40%; color: var(--npc-dark); }

/* ── Vergleichstabelle ────────────────────────────────────────────────────── */
.npc-compare-table-wrap { overflow-x: auto; }
.npc-compare-scroll { min-width: 500px; }
.npc-compare-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.npc-compare-table th, .npc-compare-table td {
    padding: .65rem .9rem; border: 1px solid var(--npc-border); text-align: left; vertical-align: top;
}
.npc-compare-table thead th { background: var(--npc-dark); color: #fff; }
.npc-compare-label-col { width: 180px; background: var(--npc-light) !important; color: var(--npc-dark) !important; font-weight: 600; }
.npc-compare-product-col { text-align: center; min-width: 200px; }
.npc-compare-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: .4rem; display: block; margin: 0 auto .5rem; }
.npc-compare-product-title { font-size: .85rem; font-weight: 700; display: block; }
.npc-compare-label { background: var(--npc-light); font-weight: 600; color: var(--npc-dark); }
.npc-compare-value { }
.npc-compare-row-diff td { background: #fffbeb; }
.npc-compare-legend { font-size: .75rem; color: var(--npc-gray); margin-top: .75rem; }
.npc-compare-diff-indicator { display: inline-block; width: 14px; height: 14px; background: #fffbeb; border: 1px solid #fcd34d; vertical-align: middle; margin-right: .3rem; }

/* ── Floating Vergleichs-Bar ──────────────────────────────────────────────── */
.npc-compare-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--npc-dark); color: #fff; padding: .75rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.npc-compare-bar-inner { display: flex; align-items: center; gap: 1rem; max-width: 1200px; margin: 0 auto; }
.npc-compare-bar-label { font-weight: 700; white-space: nowrap; }
.npc-compare-items { display: flex; gap: .5rem; flex: 1; flex-wrap: wrap; }
.npc-compare-item { background: rgba(255,255,255,.1); border-radius: .3rem; padding: .2rem .6rem; font-size: .8rem; }
.npc-compare-clear { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; border-radius: .3rem; padding: .3rem .6rem; font-size: .8rem; }

/* ── Paginierung ──────────────────────────────────────────────────────────── */
.npc-pagination { display: flex; justify-content: center; gap: .3rem; margin-top: 2rem; }
.npc-pagination a, .npc-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: .4rem;
    border: 1px solid var(--npc-border); font-size: .875rem; text-decoration: none; color: var(--npc-dark);
}
.npc-pagination .current { background: var(--npc-primary); color: #fff; border-color: var(--npc-primary); }

/* ── Keine Ergebnisse ─────────────────────────────────────────────────────── */
.npc-no-results { padding: 3rem; text-align: center; color: var(--npc-gray); background: var(--npc-light); border-radius: var(--npc-radius); }

/* ── Anfrage-Modal ────────────────────────────────────────────────────────── */
.npc-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.npc-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.npc-modal-box {
    position: relative; z-index: 1; background: #fff; border-radius: 1rem;
    padding: 1.75rem; width: 100%; max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto;
}
.npc-modal-close {
    position: absolute; top: .75rem; right: .75rem;
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: var(--npc-gray); width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.npc-modal-close:hover { background: var(--npc-light); }

/* Inquiry-Formular Felder */
.npc-inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 480px) { .npc-inq-grid { grid-template-columns: 1fr; } }
.npc-inq-grid label,
.npc-inquiry-form label { display: block; font-size: .72rem; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.npc-inq-grid input,
.npc-inquiry-form input,
.npc-inquiry-form textarea {
    width: 100%; padding: .55rem .75rem; border: 1px solid #e5e7eb;
    border-radius: .4rem; font-size: .875rem; box-sizing: border-box;
}
.npc-inq-grid input:focus,
.npc-inquiry-form input:focus,
.npc-inquiry-form textarea:focus { outline: none; border-color: var(--npc-primary); }