body {
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#111;
  color:#fff;
}

/* HEADER */
header {
  text-align:center;
  padding:30px;
  background:#000;
}

h1 {
  margin:0;
  color:#ff3c00;
}

/* CALL BUTTON */
.call-btn {
  display:block;
  margin:20px auto;
  width:200px;
  text-align:center;
  padding:12px;
  background:#ff3c00;
  color:white;
  border-radius:30px;
  text-decoration:none;
}

/* SIDEBAR */
.menu-icon {
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 26px;
  cursor: pointer;
  z-index: 9999; /* wichtig */
}

#sidebar {
  position:fixed;
  left:-250px;
  top:0;
  width:250px;
  height:100%;
  background:#000;
  padding-top:60px;
  transition:0.3s;
}

#sidebar.active {
  left:0;
}

#sidebar a {
  display:block;
  padding:15px;
  color:white;
  text-decoration:none;
}

#sidebar a:hover {
  background:#ff3c00;
}

/* PAGES */
.page {
  display:none;
  padding:20px;
}

.page.active {
  display:block;
}

/* TABS */
.tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:20px;
}

.tabs button {
  padding:10px;
  border:none;
  background:#333;
  color:white;
  border-radius:20px;
}

.tabs button.active {
  background:#ff3c00;
}

/* ITEMS */
.tab {
  display:none;
}

.tab.active {
  display:grid;
  gap:10px;
}

.item {
  background:#1c1c1c;
  padding:15px;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.item:hover {
  background:#ff3c00;
}

.price {
  color:#ff3c00;
}

/* POPUP */
.popup {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
}

.popup.hidden {
  display:none;
}

.popup-box {
  background:#222;
  padding:20px;
  border-radius:10px;
  width:300px;
}

.close {
  float:right;
  cursor:pointer;
}

/* MOBILE */
@media (max-width:600px){
  .call-btn {
    width:90%;
  }
}

.family-box {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color:#000;
  padding:20px;
  border-radius:15px;
  text-align:center;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(255,200,0,0.3);
  animation:glow 2s infinite alternate;
}

.family-box h3 {
  margin:0;
  font-size:20px;
}

.family-box p {
  margin:5px 0;
  font-size:14px;
}

.family-box span {
  font-size:22px;
  font-weight:800;
}

@keyframes glow {
  from {box-shadow:0 0 10px rgba(255,200,0,0.3);}
  to {box-shadow:0 0 25px rgba(255,200,0,0.8);}
}