:root{
  /* CI */
  --gusto:#400000;         /* GUSTO Rot */
  --gold:#ecd4c2;          /* Logo-Gold */
  --bg:#ffffff;            /* Hinter der Transparenz weiß */
  --card:#ffffff;
  --muted:#353535;
  --line:#e7e7e7;
  --transparent: transparent;

  --shadow:0 14px 30px rgba(0,0,0,.10);
  --shadow2:0 18px 40px rgba(0,0,0,.12);

  --rCard:24px;
  --r:16px;
  --max:520px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--muted);font-family:var(--font);color:#111}
.shell{min-height:100dvh;width:min(var(--max),100%);margin:0 auto;position:relative;background: linear-gradient(
  to bottom,
  var(--muted) 0%,
  var(--bg) 100%
);}

/* TOPBAR: transparent overlay */
.topbar{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:min(var(--max),100%);
  z-index:20;

  padding:18px 16px 12px;
  color:#fff;

  /* transparent like screenshot */
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hello{font-size:22px;font-weight:700}
.topbar__icons{display:flex;gap:10px; position:absolute; right:16px; top:14px}
.iconbtn{
  width:44px;height:44px;border-radius:14px; border: 0px;
  
  background: transparent;
  color: #fff;
  display:grid;place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.iconbtn svg{width:20px;height:20px;fill:currentColor}
.iconbtn:active{transform:scale(.98)}
@media (hover:hover){
  .iconbtn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26)}
}
.iconbtn--dark{border-color:var(--line);background:#fff;color:#111}

/* SHEET: white window coming from bottom */
.sheet{
  position:relative;
  margin-top: 78px; /* space under fixed topbar */
  background: #fff;
  border-top-left-radius: 34px;
  border-top-right-radius: 34px;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(0,0,0,.06);
  border-bottom:none;
  overflow:hidden;
}
.sheet__handle{
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background:#fff;
  margin: 10px auto 0;
}

/* enter animation */
.sheet--enter{
  animation: sheetIn .45s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes sheetIn{
  from{ transform: translateY(18px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* MAIN */
.main{padding:14px 16px 110px}
.view{display:none}
.view.is-active{display:block}
.h2{margin:18px 2px 10px;font-size:20px;font-weight:900}

/* WALLET */
.wallet{background:var(--card);border:1px solid var(--line);border-radius:var(--rCard);box-shadow:var(--shadow)}
.wallet__inner{padding:16px}
.wallet__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.wallet__kicker{font-weight:900;font-size:18px}
.wallet__sub{margin-top:4px;color:var(--muted);font-weight:700}
.wallet__logo{width:58px;height:58px;border-radius:16px;border:0px solid var(--line);background:#fff;padding:10px}
.wallet__row{margin:12px 0 14px}
.wallet__label{color:var(--muted);font-weight:800}
.wallet__value{font-size:28px;font-weight:900;margin-top:4px}

/* BUTTONS: gold text + hover */
.btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:14px 16px;
  font-weight:900;
  cursor:pointer;

  background:rgba(255,255,255,.08);
  color: #111;

  transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active{transform:scale(.99)}
.btn--primary{
  background: var(--gusto);
  color: var(--gold); /* requested */
}
@media (hover:hover){
  .btn--primary:hover{
    background: #2f0000;
    filter: saturate(1.05);
  }
  .btn:hover{filter: brightness(.98)}
}
.btn:focus-visible{
  outline: 3px solid rgba(64,0,0,.22);
  outline-offset: 2px;
}

.chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;

  color: var(--gusto);
  transition: background .12s ease, color .12s ease, transform .12s ease, border-color .12s ease;
}
.chip:active{transform:scale(.99)}
@media (hover:hover){
  .chip:hover{
    background: rgba(64,0,0,.06);
    border-color: rgba(64,0,0,.18);
  }
}

.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.inp{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  font-weight:800;
  outline:none;
}
.inp:focus{
  border-color: rgba(64,0,0,.22);
  box-shadow: 0 0 0 3px rgba(64,0,0,.08);
}
.inp--sm{width:140px}
.lbl{display:block;margin:10px 0 6px;font-weight:900;color:var(--muted);font-size:12px}
.muted{color:var(--muted);font-weight:700;font-size:12px;margin-top:10px}

/* NEWS */
.news__track{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.news__track::-webkit-scrollbar{height:8px}
.news__track::-webkit-scrollbar-thumb{background:#ddd;border-radius:999px}
.slide{
  flex:0 0 86%;
  scroll-snap-align:start;
  border-radius:var(--rCard);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.slide img{width:100%;height:210px;object-fit:cover;display:block;background:#ddd}
.slide__body{padding:14px}
.slide__t{font-size:22px;font-weight:900}
.slide__m{margin-top:6px;color:var(--muted);font-weight:700}
.slide__cta{
  margin-top:10px;
  color:var(--gusto);
  font-weight:900;
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
}
@media (hover:hover){
  .slide__cta:hover{opacity:.85}
}
.dots{display:flex;justify-content:center;gap:8px;padding:8px 0 2px}
.dot{width:10px;height:10px;border-radius:999px;background:#d8d8d8}
.dot.is-active{background:var(--gusto)}

/* MENU */
.headRow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.fbtn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.fbtn:active{transform:scale(.99)}
.fbtn.is-active{border-color:rgba(64,0,0,.22);background:rgba(64,0,0,.07);color:var(--gusto)}
@media (hover:hover){
  .fbtn:hover{background:#fafafa}
}

.menuGrid{display:grid;grid-template-columns:1fr;gap:12px}
.item{
  display:grid;
  grid-template-columns:120px 1fr;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.item img{width:100%;height:100%;object-fit:cover;display:block;background:#ddd}
.item__body{padding:12px;display:grid;gap:6px}
.item__t{font-weight:900}
.item__m{color:var(--muted);font-weight:700;font-size:12px;line-height:1.35}
.item__meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.price{font-weight:900;color:var(--gusto)}
.tag{
  border:1px solid rgba(64,0,0,.18);
  background:rgba(64,0,0,.06);
  color:var(--gusto);
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:11px
}
.item__actions{display:flex;gap:10px;margin-top:6px}
.item__actions .btn{width:auto;padding:10px 12px;min-width:110px}

/* CART */
.cartCard{
  margin-top:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rCard);
  box-shadow:var(--shadow);
  padding:16px
}
.cartCard__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.cartCard__t{font-weight:900;font-size:18px}
.cartCard__m{color:var(--muted);font-weight:700;font-size:12px}
.cart{display:grid;gap:10px}
.crow{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.crow__t{font-weight:900}
.crow__m{margin-top:2px;color:var(--muted);font-weight:700;font-size:12px}
.qty{display:flex;align-items:center;gap:8px}
.qbtn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.qbtn:active{transform:scale(.98)}
@media (hover:hover){
  .qbtn:hover{background:#fafafa}
}
.sum{margin-top:12px;border:1px solid var(--line);border-radius:18px;padding:12px}
.sum__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0}
.sum__row--total{border-top:1px solid var(--line);margin-top:6px}

/* CHECKOUT */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rCard);box-shadow:var(--shadow);padding:16px;margin-top:14px}
.card__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.card__row--total{border-top:1px solid var(--line);margin-top:6px}
.card__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.card__t{font-weight:900;font-size:18px}
.card__m{color:var(--muted);font-weight:700;font-size:12px}
.payTabs{display:flex;gap:8px;flex-wrap:wrap}
.ptab{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.ptab:active{transform:scale(.99)}
.ptab.is-active{border-color:rgba(64,0,0,.22);background:rgba(64,0,0,.07);color:var(--gusto)}
.payForm{display:none}
.payForm.is-active{display:block}
.check{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-weight:800}

/* REWARDS */
.big{font-weight:900;font-size:24px}
.bar{margin-top:10px;height:10px;border-radius:999px;background:#eee;overflow:hidden}
.bar__fill{height:100%;width:0%;background:var(--gusto)}
.rewardList{display:grid;gap:10px;margin-top:14px}
.reward{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px}
.reward__t{font-weight:900}
.reward__m{color:var(--muted);font-weight:700;font-size:12px;margin-top:2px}

/* MODAL */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.is-open{display:block}
.modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal__panel{
  position:relative;
  background:#fff;
  border-radius:24px;
  width:min(520px,calc(100% - 24px));
  margin: 14px auto;
  padding:14px;
  box-shadow:var(--shadow)
}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal__t{font-weight:900;font-size:18px}

/* SEG */
.seg{display:flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px;background:#fff;margin:12px 0}
.seg__btn{
  flex:1;border:none;border-radius:999px;padding:10px 12px;
  font-weight:900;cursor:pointer;background:transparent;
  transition: background .12s ease, transform .12s ease;
}
.seg__btn:active{transform:scale(.99)}
.seg__btn.is-active{background:rgba(64,0,0,.07);color:var(--gusto)}

/* BOTTOM NAV */
.bottomNav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(var(--max),100%);
  background:#fff;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:6px;
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  z-index:30;
}
.navBtn{
  flex:1;border:none;background:transparent;cursor:pointer;
  display:grid;justify-items:center;gap:6px;
  color:#7b8087;font-weight:900;
  transition: color .12s ease, transform .12s ease;
}
.navBtn:active{transform:scale(.99)}
.navBtn .i{font-size:18px;line-height:1}
.navBtn .l{font-size:12px}
.navBtn.is-active{color:var(--gusto)}

/* RESPONSIVE */
@media (min-width:700px){
  .menuGrid{grid-template-columns:1fr 1fr}
  .item{grid-template-columns:140px 1fr}
  .slide{flex-basis:62%}
}