:root{ --bg:#0c0f14;
      --card:#111622;
      --muted:#8b93a1;
      --text:#e8ecf1;
      --primary:#6c5ce7;
      --border:#243044;
      --bordernote:#792f00;
      --accent:#22c55e;
      --warn:#f59e0b; 
    }

    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif}
    .wrap{max-width:1600px;margin:28px auto;padding:0 18px}
    h1{font-size:26px;margin:0 0 6px;font-weight:800}
    .sub{color:var(--muted);margin-bottom:18px;font-size:14px}
    .grid{display:grid;gap:18px}
    @media(min-width:1100px){.grid{grid-template-columns:2.2fr 1fr}}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:18px;padding:14px 14px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
    footer { text-align:center; margin-top:18px; opacity:.8; }

#options{
  column-count: 1;    
  column-gap: 14px;
}
@media (min-width: 1000px){
  #options{ column-count: 2; }
}
@media (min-width: 1400px){
  #options{ column-count: 3; }
}
.category{
  display:block;
  break-inside: avoid;
  margin: 0 0 14px;
  height:auto;
}

.category{ margin:0; }
.category, .opt{ height:auto; }
    .category{display:block;background:#0c1322;border:1px solid #1c2740;border-radius:14px;padding:12px;margin:0 0 14px;break-inside:avoid}
    .cat-title{font-weight:800;margin-top:2px;letter-spacing:.2px}
    .opt{display:flex;align-items:center;justify-content:space-between;background:#0d1629;border:1px solid var(--border);padding:9px 10px;border-radius:12px;transition:transform .08s ease,border-color .2s,box-shadow .2s;margin-top:8px}
    .opt:hover{transform:translateY(-1px);border-color:#344765}
    .opt.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 0 12px rgba(108,92,231,.35)}
    .opt input[type=checkbox]{transform:scale(1.05)}
    .price{opacity:.9;font-variant-numeric:tabular-nums}
    .qty{display:flex;align-items:center;gap:6px}
    .btn{appearance:none;border:1px solid var(--border);background:#0b1220;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
    .btn:hover{border-color:var(--primary)}
    .btn.primary{background:var(--primary);border-color:var(--primary)}
    .btn.ghost{background:transparent}
    .btn.danger{background:#1a0f12;border-color:#4d1d20;color:#ffb4b4}
    .btn.danger:hover{border-color:#bd1414}
    .tag{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}
    .list{max-height:280px;overflow:auto;border:1px dashed var(--border);border-radius:12px;padding:10px;background:#0c1322}
    .line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #203048}
    .line:last-child{border-bottom:0}
    .muted{color:var(--muted)}
    input[type="checkbox"]{
       appearance:none;         
       -webkit-appearance:none;
       width:18px; height:18px;
       margin:0;
       border:1px solid var(--border);
       background:#0b1220;     
       border-radius:4px;
        display:inline-grid;
       place-content:center;
       transition:background .2s, border-color .2s, box-shadow .2s, transform .05s;
    }
    input[type="checkbox"]:hover{ border-color:#344765 }
    input[type="checkbox"]:active{ transform:scale(.96) }

    input[type="checkbox"]::before{
     content:"";
     width:12px; height:12px;
     transform:scale(0);
     transform-origin:center;
     transition:transform .12s ease-out;
     clip-path: polygon(14% 44%, 8% 58%, 43% 90%, 95% 20%, 82% 9%, 42% 70%);
     background: #fff;
        }
        input[type="checkbox"]:checked{
        background: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 0 12px rgba(108,92,231,.35);
      }
      input[type="checkbox"]:checked::before{ transform:scale(1) }
      input[type="checkbox"]:focus-visible{
       outline:none;
        box-shadow: 0 0 0 2px rgba(108,92,231,.55);
      }
      input[type="checkbox"]:disabled{
       opacity:.6; cursor:not-allowed;
       box-shadow:none;
      }

    .total{font-size:22px;font-weight:900}
    .discount{color:var(--accent)}
    .coupon{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#0f172a}
    .coupon:hover{ border-color:#2f4c33 }
    .coupon input[type=checkbox]{transform:scale(1.05);margin-top:2px}
    .input{background:#0b1220;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;min-width:60px}
    .select{background:#0b1220;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px}
    .footer{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    @media(min-width:1100px){ .card.sticky{position:sticky;top:16px}}
    .topbar a{margin-left:auto;text-decoration:none}
  #gate{
   position:fixed; inset:0; z-index:9999;
   background:var(--bg);
   display:flex; align-items:center; justify-content:center;
  }
  .gate-card{
   background:#0e1422; border:1px solid var(--border); border-radius:16px;
    padding:18px; width: min(92vw, 480px);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
    .gate-title{font-size:20px;font-weight:800;margin-bottom:10px}
    .gate-row{display:flex;gap:10px;align-items:center}

.header-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-right: 8px;
}
.top, .toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
}



.tag.type-fam{ 
  border-color:#3b82f6; 
  color:#cfe2ff; 
  background:rgba(59,130,246,.08);
}
.tag.type-gov{ 
  border-color:#a78bfa; 
  color:#e9ddff; 
  background:rgba(167,139,250,.10);
}
.tag.type-biz{ 
  border-color:#f59e0b; 
  color:#ffe7c2; 
  background:rgba(245,158,11,.08);
}

/* Zähler-Farben: Familie (blau), Staatlich (lila), Unternehmen (orange) */
.chip.type-fam{
  border-color:#3b82f6;
  background:rgba(59,130,246,.08);
  color:#cfe2ff;
}
.chip.type-gov{
  border-color:#a78bfa;
  background:rgba(167,139,250,.10);
  color:#e9ddff;
}
.chip.type-biz{
  border-color:#f59e0b;
  background:rgba(245,158,11,.08);
  color:#ffe7c2;
}


  .toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:#0e1422;min-width:180px}
  .chip .num{font-size:20px;font-weight:800}
  .chip.type-fam{box-shadow:0 0 0 1px rgba(59,130,246,.35) inset}
  .chip.type-gov{box-shadow:0 0 0 1px rgba(167,139,250,.35) inset}
  .chip.type-biz{box-shadow:0 0 0 1px rgba(249,115,22,.4) inset}
  #cards{display:grid;gap:16px;margin-top:14px}
  @media(min-width:900px){ #cards{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media(min-width:1300px){ #cards{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
  @media(min-width:1600px){ #cards{ grid-template-columns: repeat(4,minmax(0,1fr)); } }
  .entry{background:#0e1422;border:1px solid #22304a;border-radius:16px;padding:14px}
  .entry h3{margin:0 0 8px;font-size:18px}
  .row{display:flex;align-items:center;gap:10px;margin:6px 0}
  .dot{width:14px;height:14px;border-radius:999px;border:2px solid rgba(255,255,255,.18);display:inline-block}
  .hex{font-size:12px;opacity:.9}
  .hint{color:var(--muted);font-size:12px}
  details.more{margin-top:10px;border:1px solid var(--bordernote);border-radius:10px;padding:8px}
  details.more>summary{cursor:pointer;list-style:none}
  details.more>summary::-webkit-details-marker{display:none}
  .note-cell{background:#0c1322;border:1px dashed var(--bordernote);border-radius:8px;padding:8px;font-size:13px;color:var(--muted);margin-top:6px}
  .tag.type-fam{border-color:rgba(59,130,246,.4);color:#9cc2ff}
  .tag.type-gov{border-color:rgba(167,139,250,.4);color:#d4c5ff}
  .tag.type-biz{border-color:rgba(249,115,22,.5);color:#ffcfb0}
  .copy{cursor:pointer; position:relative}
  .copy.copied::after{
    content:"kopiert";
    position:absolute; top:-18px; left:0;
    font-size:11px; color:#9fe29f;
  }