*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --surface:      #0A0A0A;
      --surface-2:    #131313;
      --surface-3:    #1A1A1A;
      --surface-4:    #242424;
      --on-surface:   #E5E2E1;
      --on-dim:       #BBCAC5;
      --outline:      rgba(255,255,255,.08);
      --cyan:         #5CE6D1;
      --magenta:      #E60063;
      --yellow:       #DFDC01;
      --font-display: 'Space Grotesk', sans-serif;
      --font-mono:    'JetBrains Mono', monospace;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--surface);
      color: var(--on-surface);
      font-family: var(--font-display);
      min-height: 100vh;
    }

    /* ── Header ── */
    .page-header {
      position: sticky; top: 0; z-index: 100;
      background: var(--surface-2);
      border-bottom: 1px solid var(--outline);
    }
    .page-header::after {
      content: '';
      display: block; height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta));
    }
    .header-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 16px 32px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 380px);
      align-items: center;
      gap: 24px;
    }
    .header-brand { min-width: 0; }
    .header-brand img { width: clamp(160px, 16vw, 220px); height: auto; display: block; }
    .brand-label {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 500;
      letter-spacing: .2em; color: var(--cyan);
      text-transform: uppercase; display: block;
      margin-bottom: 3px;
    }
    .brand-name {
      font-size: 18px; font-weight: 700;
      color: #fff; letter-spacing: -.01em;
      text-transform: uppercase;
    }
    .brand-dot {
      display: inline-block;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--magenta);
      vertical-align: middle; margin: 0 2px 3px;
    }
    .header-meta {
      font-family: var(--font-mono);
      font-size: 9px; color: #859490;
      letter-spacing: .08em; text-transform: uppercase;
      line-height: 1.8;
    }
    .header-meta span { color: var(--on-dim); }

    /* Search */
    .search-wrap { width: 100%; max-width: 380px; }
    .search-input {
      width: 100%;
      background: var(--surface-3);
      border: 1px solid var(--outline);
      color: var(--on-surface);
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 10px 14px;
      outline: none;
      transition: border-color .2s;
    }
    .search-input::placeholder { color: #859490; }
    .search-input:focus { border-color: var(--cyan); }

    /* ── Stats Bar ── */
    .stats-bar {
      background: var(--surface-3);
      border-bottom: 1px solid var(--outline);
    }
    .stats-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 12px 32px;
      display: flex; gap: 8px; flex-wrap: wrap;
      align-items: center;
    }
    .stat-card {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface-4);
      border: 1px solid var(--outline);
      padding: 8px 16px;
    }
    .stat-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .stat-dot.cyan    { background: var(--cyan); box-shadow: 0 0 6px rgba(92,230,209,.5); }
    .stat-dot.yellow  { background: var(--yellow); box-shadow: 0 0 6px rgba(223,220,1,.5); }
    .stat-dot.magenta { background: var(--magenta); box-shadow: 0 0 6px rgba(230,0,99,.5); }
    .stat-dot.white   { background: rgba(255,255,255,.3); }
    .stat-value {
      font-family: var(--font-mono);
      font-size: 14px; font-weight: 500;
      color: #fff; letter-spacing: -.01em;
    }
    .stat-label {
      font-family: var(--font-mono);
      font-size: 8px; color: #859490;
      letter-spacing: .1em; text-transform: uppercase;
    }

    /* Filter buttons */
    .filter-bar {
      max-width: 1400px; margin: 0 auto;
      padding: 16px 32px 0;
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .filter-btn {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 500;
      letter-spacing: .12em; text-transform: uppercase;
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--outline);
      color: #859490; cursor: pointer;
      transition: all .15s;
    }
    .filter-btn:hover   { border-color: rgba(255,255,255,.2); color: var(--on-surface); }
    .filter-btn.active  { background: var(--cyan); border-color: var(--cyan); color: #0A0A0A; }
    .filter-btn.f-gering.active  { background: var(--yellow); border-color: var(--yellow); color: #0A0A0A; }
    .filter-btn.f-leer.active    { background: var(--magenta); border-color: var(--magenta); color: #fff; }

    /* ── Main Content ── */
    .main { max-width: 1400px; margin: 0 auto; padding: 24px 32px 80px; }

    /* Category Section */
    .category-section { margin-bottom: 32px; }
    .category-header {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 0; padding: 10px 0;
      cursor: pointer; user-select: none;
    }
    .category-header::before {
      content: ''; flex-shrink: 0;
      width: 3px; height: 20px;
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(92,230,209,.4);
    }
    .cat-name {
      font-size: 11px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--cyan);
    }
    .cat-count {
      font-family: var(--font-mono);
      font-size: 9px; color: #859490;
      letter-spacing: .08em;
    }
    .cat-stock-sum {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 9px; color: #859490;
      letter-spacing: .05em;
    }
    .cat-stock-sum span { color: var(--on-dim); }

    /* Table */
    .table-wrap { border: 1px solid var(--outline); overflow: hidden; }
    table { width: 100%; border-collapse: collapse; }
    thead tr {
      background: var(--surface-3);
      border-bottom: 1px solid rgba(92,230,209,.15);
    }
    thead th {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 500;
      letter-spacing: .15em; text-transform: uppercase;
      color: #859490; padding: 10px 14px;
      text-align: left; white-space: nowrap;
    }
    thead th.right { text-align: right; }
    tbody tr {
      border-bottom: 1px solid var(--outline);
      transition: background .1s;
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: rgba(92,230,209,.03); }
    tbody tr.row-leer { opacity: .45; }
    tbody tr.row-leer:hover { opacity: .7; }

    td {
      padding: 9px 14px;
      font-size: 13px;
      vertical-align: middle;
    }
    .td-art {
      font-family: var(--font-mono);
      font-size: 11px; color: #859490;
      white-space: nowrap;
    }
    .td-name { color: var(--on-surface); }
    .td-unit {
      font-family: var(--font-mono);
      font-size: 10px; color: #859490;
      text-align: center; white-space: nowrap;
    }
    .td-num {
      font-family: var(--font-mono);
      font-size: 12px; color: var(--on-dim);
      text-align: right; white-space: nowrap;
    }
    .td-badge { text-align: right; white-space: nowrap; }

    /* Stock Badge */
    .badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 500;
      letter-spacing: .05em;
      padding: 3px 8px;
    }
    .badge-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
    .badge-verfuegbar {
      background: rgba(92,230,209,.1);
      border: 1px solid rgba(92,230,209,.25);
      color: var(--cyan);
    }
    .badge-verfuegbar .badge-dot { background: var(--cyan); }
    .badge-gering {
      background: rgba(223,220,1,.1);
      border: 1px solid rgba(223,220,1,.25);
      color: var(--yellow);
    }
    .badge-gering .badge-dot { background: var(--yellow); }
    .badge-leer {
      background: rgba(230,0,99,.08);
      border: 1px solid rgba(230,0,99,.2);
      color: var(--magenta);
    }
    .badge-leer .badge-dot { background: var(--magenta); }

    /* No results */
    .no-results {
      padding: 48px; text-align: center;
      font-family: var(--font-mono);
      font-size: 11px; color: #859490;
      letter-spacing: .1em; text-transform: uppercase;
      display: none;
    }

    /* ── Footer ── */
    .page-footer {
      border-top: 1px solid var(--outline);
      padding: 20px 32px;
      text-align: center;
    }
    .page-footer p {
      font-family: var(--font-mono);
      font-size: 9px; color: #859490;
      letter-spacing: .08em; text-transform: uppercase;
    }

    /* ── Responsive header: collapse to 2-row layout on narrow screens ── */
    @media screen and (max-width: 700px) {
      .header-inner {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 12px;
      }
      .header-brand  { grid-column: 1; grid-row: 1; }
      .lang-toggle   { grid-column: 2; grid-row: 1; }
      .header-meta   { grid-column: 1 / -1; grid-row: 2; }
      .search-wrap   { grid-column: 1 / -1; grid-row: 3; max-width: 100%; }
    }

    /* ── Print Styles ── */
    @media print {
      body { background: #fff; color: #000; }
      .page-header { position: static; background: #fff; border-bottom: 2px solid #000; }
      .page-header::after { background: #000; }
      .brand-name, .brand-label, .cat-name { color: #000 !important; }
      .search-wrap, .stats-bar, .filter-bar, .lang-toggle { display: none; }
      .table-wrap { border-color: #ccc; }
      thead tr { background: #f5f5f5; border-bottom: 1px solid #000; }
      thead th { color: #000; }
      tbody tr { border-bottom: 1px solid #eee; }
      tbody tr:hover { background: transparent; }
      .td-art, .td-unit, .td-num { color: #555; }
      .td-name { color: #000; }
      .badge-verfuegbar { background: #e8faf7; border-color: #aaa; color: #007a6a; }
      .badge-gering { background: #fefce8; border-color: #aaa; color: #7a7000; }
      .badge-leer { background: #fce8ee; border-color: #aaa; color: #9a0040; }
      .category-header::before { background: #000; box-shadow: none; }

      /* Wunschliste im Druck */
      .wl-trigger, .wl-overlay, .wl-panel { display: none !important; }
      .wl-col, .td-wish { display: none !important; }
      .wl-sheet { display: none; }
      body.printing-wishlist > *:not(.wl-sheet) { display: none !important; }
      body.printing-wishlist .wl-sheet { display: block; }
    }

    /* ══ Wunschliste — Mengen-Stepper in der Tabelle ════════════════════ */
    thead th.wl-col { text-align: center; }
    .td-wish { text-align: center; white-space: nowrap; width: 1%; }
    .td-wish .wl-na {
      font-family: var(--font-mono); font-size: 9px; color: #859490;
    }
    tr.in-wishlist { background: rgba(92,230,209,.06) !important; }
    tr.in-wishlist .qty-stepper { border-color: rgba(92,230,209,.45); }

    .qty-stepper {
      display: inline-flex; align-items: center;
      border: 1px solid var(--outline);
      background: var(--surface-3);
    }
    .qty-stepper .qbtn {
      width: 24px; height: 26px; flex-shrink: 0;
      background: transparent; border: none;
      color: var(--on-dim); font-family: var(--font-mono);
      font-size: 15px; line-height: 1; cursor: pointer;
      transition: background .12s, color .12s;
    }
    .qty-stepper .qbtn:hover { background: var(--surface-4); color: var(--cyan); }
    .qty-stepper .qinput {
      width: 44px; height: 26px; text-align: center;
      background: transparent; border: none;
      border-left: 1px solid var(--outline);
      border-right: 1px solid var(--outline);
      color: var(--on-surface); font-family: var(--font-mono);
      font-size: 12px; outline: none; -moz-appearance: textfield;
    }
    .qty-stepper .qinput:focus { background: var(--surface-4); }
    .qty-stepper .qinput::-webkit-outer-spin-button,
    .qty-stepper .qinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* ══ Wunschliste — Trigger-Button ═══════════════════════════════════ */
    .wl-trigger {
      position: fixed; right: 24px; bottom: 24px; z-index: 200;
      display: flex; align-items: center; gap: 10px;
      background: var(--cyan); color: #0A0A0A; border: none; cursor: pointer;
      font-family: var(--font-mono); font-size: 11px; font-weight: 500;
      letter-spacing: .12em; text-transform: uppercase; padding: 14px 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(92,230,209,.3);
      transition: transform .15s, box-shadow .15s;
    }
    .wl-trigger:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 20px rgba(92,230,209,.4);
    }
    .wl-trigger .wl-count {
      display: none; align-items: center; justify-content: center;
      min-width: 20px; height: 20px; padding: 0 6px;
      background: var(--magenta); color: #fff; border-radius: 10px;
      font-size: 11px; font-weight: 600;
    }

    /* ══ Wunschliste — Panel (Drawer) ═══════════════════════════════════ */
    .wl-overlay {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.6);
      opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
    }
    .wl-overlay.open { opacity: 1; visibility: visible; }
    .wl-panel {
      position: fixed; top: 0; right: 0; z-index: 310;
      width: 440px; max-width: 100vw; height: 100vh;
      background: var(--surface-2); border-left: 1px solid var(--outline);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
      box-shadow: -20px 0 60px rgba(0,0,0,.5);
    }
    .wl-panel.open { transform: translateX(0); }
    .wl-panel-head {
      padding: 18px 24px; border-bottom: 1px solid var(--outline);
      display: flex; align-items: center; gap: 12px; background: var(--surface-3);
    }
    .wl-title {
      font-size: 13px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: #fff;
    }
    .wl-title .wl-accent { color: var(--cyan); }
    .wl-close {
      margin-left: auto; background: transparent; border: 1px solid var(--outline);
      color: var(--on-dim); width: 30px; height: 30px; cursor: pointer;
      font-size: 15px; line-height: 1; transition: all .15s;
    }
    .wl-close:hover { border-color: var(--magenta); color: var(--magenta); }
    .wl-body { flex: 1; overflow-y: auto; }
    .wl-empty {
      padding: 64px 24px; text-align: center; font-family: var(--font-mono);
      font-size: 11px; color: #859490; letter-spacing: .06em; line-height: 1.9;
    }
    .wl-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 24px; border-bottom: 1px solid var(--outline);
    }
    .wl-item-main { flex: 1; min-width: 0; }
    .wl-item-name { font-size: 12px; color: var(--on-surface); margin-bottom: 3px; line-height: 1.3; }
    .wl-item-art { font-family: var(--font-mono); font-size: 10px; color: #859490; }
    .wl-item-del {
      background: transparent; border: none; color: #859490; cursor: pointer;
      font-size: 13px; padding: 6px; flex-shrink: 0; transition: color .15s;
    }
    .wl-item-del:hover { color: var(--magenta); }
    .wl-foot { border-top: 1px solid var(--outline); padding: 18px 24px; background: var(--surface-3); }
    .wl-sum {
      display: flex; justify-content: space-between; font-family: var(--font-mono);
      font-size: 11px; color: #859490; margin-bottom: 14px; letter-spacing: .05em;
    }
    .wl-sum strong { color: var(--on-surface); font-weight: 500; }
    .wl-actions { display: flex; gap: 8px; }
    .wl-btn {
      font-family: var(--font-mono); font-size: 10px; font-weight: 500;
      letter-spacing: .12em; text-transform: uppercase; padding: 13px;
      cursor: pointer; transition: all .15s;
    }
    .wl-btn-primary { flex: 2; background: var(--cyan); border: 1px solid var(--cyan); color: #0A0A0A; }
    .wl-btn-primary:hover { background: #6ff0dc; }
    .wl-btn-primary:disabled { opacity: .35; cursor: not-allowed; }
    .wl-btn-ghost { flex: 1; background: transparent; border: 1px solid var(--outline); color: #859490; }
    .wl-btn-ghost:hover { border-color: var(--magenta); color: var(--magenta); }
    .wl-hint {
      font-family: var(--font-mono); font-size: 10px; color: #859490;
      letter-spacing: .06em; text-transform: uppercase; text-align: center;
      margin-top: 12px; line-height: 1.7;
    }

    /* ══ Wunschliste — Druckblatt ═══════════════════════════════════════ */
    .wl-sheet { display: none; padding: 8px 4px; color: #000; }
    .wl-sheet-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 24px; margin-bottom: 16px;
    }
    .wl-sheet-logo { height: 42px; width: auto; display: block; }
    .wl-sheet-meta { font-family: var(--font-mono); font-size: 10px; color: #444; text-align: right; line-height: 1.9; white-space: nowrap; }
    .wl-sheet-contact {
      font-family: var(--font-mono); font-size: 10px; color: #333; line-height: 1.7;
      border-bottom: 2px solid #000; padding-bottom: 18px; margin-bottom: 22px;
    }
    .wl-sheet-contact strong { font-size: 11px; color: #000; font-weight: 600; }
    .wl-sheet h1 { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
    .wl-sheet-ref { font-family: var(--font-mono); font-size: 10px; color: #555; letter-spacing: .05em; margin-bottom: 16px; }
    table.wl-sheet-table { width: 100%; border-collapse: collapse; }
    table.wl-sheet-table th {
      text-align: left; font-family: var(--font-mono); font-size: 9px;
      text-transform: uppercase; letter-spacing: .1em; color: #000;
      border-bottom: 1.5px solid #000; padding: 8px 10px;
    }
    table.wl-sheet-table td { padding: 8px 10px; font-size: 12px; border-bottom: 1px solid #ddd; }
    table.wl-sheet-table td.mono { font-family: var(--font-mono); font-size: 11px; color: #333; }
    table.wl-sheet-table th.num, table.wl-sheet-table td.num { text-align: right; }
    .wl-sheet-foot {
      margin-top: 26px; padding-top: 12px; border-top: 1px solid #ccc;
      font-family: var(--font-mono); font-size: 9px; color: #666; letter-spacing: .04em; line-height: 1.7;
    }
  
    /* ── Sprachumschalter ── */
    .lang-toggle {
      display: inline-flex; flex: 0 0 auto;
      border: 1px solid var(--outline); overflow: hidden;
      font-family: var(--font-mono);
    }
    .lang-toggle button {
      background: var(--surface-3); color: #859490;
      border: none; padding: 7px 13px; cursor: pointer;
      font-size: 10px; font-weight: 600; letter-spacing: .12em;
      transition: background .15s, color .15s;
    }
    .lang-toggle button + button { border-left: 1px solid var(--outline); }
    .lang-toggle button:hover { color: var(--on-surface); }
    .lang-toggle button.active { background: var(--cyan); color: #0A0A0A; }