/* OVERLAY & PANEL */
html, body { margin:0; padding:0; background:transparent; height:100%; width:100%; }
.overlay { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.panel { pointer-events:all; width:80vw; height:80vh; background:linear-gradient(135deg,#000126,#001039 50%,#000000); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,0.6); }
.hidden { display:none; }

/* HEADER */
.header { position:relative; height:4rem; background:#081233; display:flex; align-items:center; padding:0 1rem; border-bottom:1px solid #002060; }
.logo { width:2.5rem; height:2.5rem; background:linear-gradient(45deg,#0066cc,#3399ff); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; }
.title { margin-left:0.75rem; font-size:1.25rem; color:#fff; }
.title .blue { color:#4aa5ff; }
.close-btn { position:absolute; top:0.5rem; right:0.5rem; width:1.5rem; height:1.5rem; background:none; border:none; cursor:pointer; }
.close-btn img { width:100%; height:100%; }

/* MAIN LAYOUT */
.main { flex:1; display:flex; overflow:hidden; }

/* SIDEBAR */
.sidebar { width:10rem; background:#08143b; display:flex; flex-direction:column; padding:1rem; }
.nav-btn { background:#0b2340; color:#fff; border:none; border-radius:0.5rem; padding:0.75rem; font-weight:600; cursor:pointer; margin-bottom:5mm; transition:background .2s; }
.nav-btn:last-child { margin-bottom:0; }
.nav-btn.active, .nav-btn:hover { background:#1E90FF; }

/* CONTENT AREA */
.content { flex:1; padding:1rem; overflow-y:auto; border-left:1px solid #002060; border-right:1px solid #002060; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:1rem; }

/* CARD */
.card {
  background: #001a4d;                  /* dunkles Blaustück */
  border-radius: 0.75rem;               /* abgerundete Ecken */
  padding: 1.5rem 1rem;                 /* innen Platz lassen */
  text-align: center;                   /* Inhalt zentrieren */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* leichter Schatten */

  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.card img { width:4rem; height:4rem; object-fit:contain; margin-bottom:1rem; }
.card .name { margin:0; font-size:1rem; font-weight:600; color:#fff; text-transform:uppercase; margin-bottom:0.5rem; text-align:center; }
.card .price { margin:0; font-size:1.125rem; font-weight:bold; color:#4aa5ff; text-align:center; }


.logo {
  width: 2.5rem;      /* wie vorher */
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;   /* zuvor Farb-Gradient, jetzt transparent */
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* CART */
.cart { width:16rem; background:#08143b; padding:1rem; display:flex; flex-direction:column; }
.cart h2 { margin:0 0 0.5rem; color:#fff; font-size:1.125rem; }
.cart ul { list-style:none; margin:0; padding:0; flex:1; overflow-y:auto; }
.cart li {
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; background:rgba(0,0,0,0.2); padding:0.5rem; border-radius:0.5rem; margin-bottom:0.5rem;
}
.cart li img { width:2rem; height:2rem; border-radius:0.25rem; object-fit:cover; }
.cart li .item-name { flex:1; margin:0 0.5rem; white-space:nowrap; }
.cart li .item-total { margin-left:0.5rem; }

/* QUANTITY BUTTONS */
.qty-controls { display:flex; align-items:center; }
.quantity-btn {
  width:1.5rem; height:1.5rem;
  background:linear-gradient(to right,#0055aa,#0077dd);
  border:none; border-radius:0.25rem;
  color:#fff; font-size:1rem; font-weight:bold; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin:0 0.25rem; transition:background .2s;
}
.quantity-btn:hover { background:linear-gradient(to right,#0066cc,#3399ff); }

/* TOTAL & FOOTER BUTTONS */
.total { margin:0.5rem 0; display:flex; justify-content:space-between; color:#fff; font-weight:600; }
.footer-btns { display:flex; gap:0.5rem; }
.pay-icon-btn {
  flex:1; background:linear-gradient(to right,#0055aa,#0077dd);
  border:none; border-radius:0.5rem; padding:0.75rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.pay-icon-btn:hover { background:linear-gradient(to right,#0066cc,#3399ff); }
.pay-icon-btn img { width:1.5rem; height:1.5rem; }