/* ═══════════════════════════════════════════════════════════
   Clickshop – preisliste.html spezifisches CSS
═══════════════════════════════════════════════════════════ */
    /* Focus-Indikator (WCAG 2.4.7) */

    nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px);
      background: rgba(11,17,32,.85); border-bottom: 1px solid rgba(30,58,95,.5); }

    .page-header { padding: 56px 0 36px; position: relative; z-index: 1; }
    .label { font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
    .page-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 12px; }
    .page-header .sub { color: var(--text-d); font-size: 1rem; max-width: 640px; }
    .updated-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(34,197,94,.1);
      border: 1px solid rgba(34,197,94,.25); border-radius: 999px; padding: 5px 14px;
      font-size: .78rem; color: #86efac; margin-top: 14px; }
    .updated-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

    .legal-notice { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.22);
      border-radius: 12px; padding: 16px 20px; margin-bottom: 36px;
      font-size: .84rem; color: #fde68a; display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }

    /* Discount tiers */
    .discount-section { margin-bottom: 44px; }
    .discount-section h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
    .qty { font-size: .8rem; color: var(--text-d); margin-bottom: 5px; }
    .pct { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--accent); }

    /* Filter */
    .filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
    .filter-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--text-d); padding: 7px 16px; border-radius: 999px;
      font-size: .83rem; cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif; word-break: break-word; }
    .filter-btn.active, .filter-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
    .search-wrap { margin-left: auto; position: relative; }
    .search-wrap input { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px; padding: 7px 18px 7px 36px; color: var(--text);
      font-family: 'DM Sans', sans-serif; font-size: .88rem; outline: none;
      transition: border-color .2s; width: 210px; }
    .search-wrap input:focus { border-color: var(--accent); }
    .search-wrap::before { content: '🔍'; position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%); font-size: .8rem; pointer-events: none; }

    /* Category sections */
    .cat-section { margin-bottom: 44px; }
    .cat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
      padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .cat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex;
      align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .cat-header h2 { font-size: 1.2rem; font-weight: 800; }
    .cat-count { font-size: .8rem; color: var(--text-d); margin-left: auto; }

    /* Table */
    .table-wrap { background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(12px); }
    .table-wrap-inner { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    thead th { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .72rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--text-d);
      padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
    thead th.r { text-align: right; }
    thead th.c { text-align: center; }
    tbody tr { transition: background .15s; }
    tbody tr:hover td { background: rgba(255,255,255,.025); }
    tbody td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
      font-size: .9rem; vertical-align: middle; word-break: break-word; overflow-wrap: break-word; }
    tbody tr:last-child td { border-bottom: none; }
    td.r { text-align: right; }
    td.c { text-align: center; }
    .prod-name { font-weight: 500; color: var(--white); overflow-wrap: break-word; }
    .prod-detail { font-size: .76rem; color: var(--text-d); margin-top: 2px; }
    .price-fix { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: var(--white); white-space: nowrap; }
    .price-gross { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: var(--white); display: block; }
    .price-net { font-size: .75rem; color: var(--text-d); font-weight: 300; display: block; margin-top: 2px; }
    .price-req { font-size: .85rem; color: var(--text-d); font-style: italic; }

    /* Verfügbarkeits-Badge */
    .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
      font-size: .7rem; font-weight: 600; white-space: nowrap; }
    .row-unavail { opacity: .5; }
    .row-unavail .price-gross { text-decoration: line-through; color: #94a3b8 !important; }
    .row-unavail .price-net { color: #64748b !important; }
    .row-unavail:hover td { background: transparent !important; }
    .badge-unavail { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; }

    /* CTA */
    .cta-strip { background: linear-gradient(135deg, rgba(29,78,216,.2), rgba(6,182,212,.12));
      border: 1px solid rgba(29,78,216,.35); border-radius: var(--radius);
      padding: 28px 32px; display: flex; align-items: center; justify-content: space-between;
      gap: 20px; flex-wrap: wrap; margin: 12px 0 0; }
    .cta-strip h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
    .cta-strip p { font-size: .88rem; color: var(--text-d); }

    /* Loading / error */
    #loading { text-align: center; padding: 80px 20px; }
    .spinner { width: 40px; height: 40px; border: 3px solid rgba(56,189,248,.2);
      border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    #error-box { display: none; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
      border-radius: 12px; padding: 20px; color: #fca5a5; font-size: .9rem; margin-bottom: 32px; }

    /* VAT note */
    .vat-note { font-size: .8rem; color: var(--text-d); margin-top: 8px; }

    @media (max-width: 700px) {
      .search-wrap { margin-left: 0; width: 100%; }
      .search-wrap input { width: 100%; }
      .cta-strip { flex-direction: column; align-items: flex-start; padding: 20px; }
      .filter-bar { gap: 8px; }
      .filter-btn { padding: 8px 14px; font-size: .82rem; min-height: 40px; }
      .page-header { padding: 32px 0 24px; }
      .page-header h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
      .legal-notice { flex-direction: column; gap: 8px; }
      table { font-size: .85rem; }
      thead th, tbody td { padding: 10px 12px; }
    }
    @media (max-width: 480px) {
      .cat-header h2 { font-size: 1rem; }
      .table-wrap-inner { -webkit-overflow-scrolling: touch; }
      tbody td { padding: 10px 8px; }
      thead th { padding: 10px 8px; }
      .cta-strip { padding: 16px; }
      .page-header { padding: 24px 0 16px; }
    }
/* ── Hintergrund main (deckt Mesh ab) ───────────────────────── */
#main-content { background: var(--navy); position: relative; z-index: 1; padding-bottom: 56px; }

    /* Kleiner Anfrage-Button in der Preistabelle */
    .btn-sm {
      padding: 6px 14px !important;
      font-size: .78rem !important;
      white-space: nowrap;
    }