/* =====================================================================
   nixgekauft.de — Gestaltung
   Prospekt trifft Lieferapp. Keine externen Ressourcen.
   ===================================================================== */

:root{
  --butter:#FFF1D0;
  --butter-deep:#FFE29A;
  --white:#FFFFFF;
  --berry:#E03E63;
  --berry-dark:#B82B4C;
  --grape:#3B2352;
  --mint:#0FB183;
  --sun:#FFC61A;
  --sky:#3C8CE7;
  --ink:#2E2140;
  --ink-soft:#7A6E88;
  --line:#E8DCC4;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 1rem;
  --wrap: 52rem;
}

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

body{
  font-family:var(--font);
  background:var(--butter);
  color:var(--ink);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:1.25rem 1rem 7rem}

/* ---------- Kopfzeile ---------- */

.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--berry);
  color:var(--white);
  box-shadow:0 3px 0 var(--berry-dark);
}
.topbar .inner{
  max-width:var(--wrap);margin:0 auto;
  padding:.7rem 1rem;
  display:flex;align-items:center;gap:.75rem;
}
.brand{
  font-size:1.0625rem;font-weight:900;
  letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
}
.dept{
  font-size:.6875rem;font-weight:700;
  background:rgba(255,255,255,.22);
  padding:.2rem .55rem;border-radius:999px;
  white-space:nowrap;
}
.spacer{flex:1}

.cart-btn{
  font-family:inherit;font-size:.8125rem;font-weight:800;
  padding:.45rem .85rem;border-radius:999px;
  border:0;background:var(--sun);color:var(--ink);
  cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.22);
}
.cart-btn[data-count="0"]{background:rgba(255,255,255,.24);color:var(--white);box-shadow:none}
.cart-btn:active{transform:translateY(1px);box-shadow:none}

/* ---------- Überschriften ---------- */

.eyebrow{
  display:inline-block;
  font-size:.6875rem;font-weight:800;
  background:var(--grape);color:var(--white);
  padding:.15rem .6rem;border-radius:999px;
  margin-bottom:.6rem;
}
h1{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:.3rem}
h2{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.lede{font-size:.875rem;color:var(--ink-soft);margin-bottom:1.4rem}

/* ---------- Ladenliste ---------- */

.vendor{
  position:relative;overflow:hidden;
  display:block;width:100%;text-align:left;
  font-family:inherit;color:inherit;cursor:pointer;
  background:var(--white);
  border:0;border-radius:var(--r);
  padding:1.1rem 1.15rem 1.1rem 1.6rem;
  margin-bottom:.9rem;
  box-shadow:0 4px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease;
}
.vendor::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:.5rem;
  background:var(--berry);
}
.vendor:nth-of-type(2n)::before{background:var(--sky)}
.vendor:nth-of-type(3n)::before{background:var(--mint)}
.vendor:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--line)}
.vendor:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.vendor:focus-visible{outline:3px solid var(--grape);outline-offset:2px}

.vendor .kind{font-size:.8125rem;color:var(--ink-soft);margin-bottom:.6rem}
.vendor .facts{
  display:flex;flex-wrap:wrap;gap:.4rem;
  font-size:.75rem;font-weight:700;
}
.vendor .facts span{
  background:var(--butter);
  padding:.2rem .55rem;border-radius:999px;
}
.stars{color:var(--sun);-webkit-text-stroke:.5px var(--ink)}

/* ---------- Produktliste ---------- */

.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}

.card{
  position:relative;
  background:var(--white);
  border:0;border-radius:var(--r);
  padding:0;overflow:hidden;
  text-align:left;font-family:inherit;color:inherit;
  cursor:pointer;display:flex;flex-direction:column;
  box-shadow:0 4px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 7px 0 var(--line)}
.card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.card:focus-visible{outline:3px solid var(--grape);outline-offset:2px}

.card .thumb{
  aspect-ratio:4/3;position:relative;
  background:var(--butter-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(46,33,64,.42);
}
.card:nth-child(3n) .thumb{background:#CDE9FB}
.card:nth-child(3n+1) .thumb{background:#FFD9C7}
.card:nth-child(3n+2) .thumb{background:#D3F3E2}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Sternexplosion mit dem Preis, wie im Handzettel */
.card .price{
  position:absolute;top:.35rem;right:.35rem;
  width:4.35rem;height:4.35rem;
  background:var(--sun);
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:900;color:var(--ink);
  transform:rotate(-9deg);
  clip-path:polygon(50% 0%,58% 12%,72% 8%,74% 23%,88% 25%,84% 39%,97% 46%,88% 57%,
                    96% 69%,83% 74%,84% 89%,70% 86%,62% 98%,50% 90%,38% 98%,30% 86%,
                    16% 89%,17% 74%,4% 69%,12% 57%,3% 46%,16% 39%,12% 25%,26% 23%,28% 8%,42% 12%);
  pointer-events:none;
}

.card .body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card .name{font-size:.9375rem;font-weight:800;line-height:1.3}
.card .desc{font-size:.8125rem;color:var(--ink-soft);line-height:1.45;flex:1}
.card .foot{display:flex;justify-content:flex-end;align-items:center}
.card .kcal{
  font-size:.6875rem;font-weight:700;color:var(--ink-soft);
  background:var(--butter);padding:.15rem .5rem;border-radius:999px;
}

.badge{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-size:.625rem;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--mint);color:var(--white);
  padding:.2rem .5rem;border-radius:999px;
  transform:rotate(-3deg);
  box-shadow:0 2px 0 rgba(0,0,0,.16);
}

/* ---------- Produktdetail ---------- */

.sheet{
  position:fixed;inset:0;z-index:40;
  background:rgba(46,33,64,.55);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
.sheet[hidden]{display:none}
.sheet .panel{
  background:var(--white);
  width:100%;max-width:34rem;max-height:90vh;overflow-y:auto;
  border-radius:1.25rem 1.25rem 0 0;
  padding:0 1.15rem 1.15rem;
}
@media (min-width:40rem){
  .sheet{align-items:center;padding:1rem}
  .sheet .panel{border-radius:1.25rem}
}

.sheet .hero{
  aspect-ratio:16/9;margin:0 -1.15rem 1rem;
  background:var(--butter-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(46,33,64,.42);
}
@media (min-width:40rem){ .sheet .hero{border-radius:1.25rem 1.25rem 0 0} }
.sheet .hero img{width:100%;height:100%;object-fit:cover}

.sheet h3{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.25rem}
.sheet .desc{font-size:.875rem;color:var(--ink-soft);margin-bottom:1.2rem}

.optgroup{margin-bottom:1.2rem}
.optgroup .title{
  font-size:.75rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:.45rem;
}
.opt{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .75rem;margin-bottom:.35rem;
  font-size:.875rem;cursor:pointer;
  background:var(--butter);border-radius:.7rem;
  transition:background .12s ease;
}
.opt:hover{background:var(--butter-deep)}
.opt input{accent-color:var(--berry);width:1.15rem;height:1.15rem;flex:none}
.opt .label{flex:1;font-weight:600}
.opt .add{font-weight:800;color:var(--berry)}

.qty{display:flex;align-items:center;gap:.9rem;margin:1.2rem 0}
.qty button{
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:0;background:var(--butter-deep);color:var(--ink);
  font-family:inherit;font-size:1.25rem;font-weight:900;cursor:pointer;
}
.qty button:active{transform:translateY(1px)}
.qty .n{font-weight:900;font-size:1.125rem;min-width:2rem;text-align:center}

/* ---------- Schaltflächen ---------- */

.btn{
  font-family:inherit;font-size:.9375rem;font-weight:800;
  padding:.9rem 1.1rem;width:100%;cursor:pointer;
  border:0;border-radius:.85rem;
  background:var(--butter-deep);color:var(--ink);
  box-shadow:0 4px 0 rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.16)}
.btn:focus-visible{outline:3px solid var(--grape);outline-offset:2px}
.btn--primary{background:var(--berry);color:var(--white);box-shadow:0 4px 0 var(--berry-dark)}
.btn--primary:active{box-shadow:0 1px 0 var(--berry-dark)}
.btn--ghost{background:transparent;box-shadow:none;color:var(--ink-soft);font-weight:700}
.btn--ghost:active{transform:none}

/* ---------- Warenkorbleiste ---------- */

.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--grape);color:var(--white);
  padding:.85rem 1rem;
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:1rem;
  transform:translateY(115%);transition:transform .24s cubic-bezier(.2,.9,.3,1);
}
.cartbar.show{transform:none}
.cartbar .info{flex:1;font-size:.875rem;font-weight:700;line-height:1.3}
.cartbar .sum{font-size:1.0625rem;font-weight:900}
.cartbar .btn{width:auto;flex:none;padding:.75rem 1.25rem}

/* ---------- Eingangsseite ---------- */

.entry{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem 1rem;text-align:center;gap:2rem;
}
.entry .logo{
  font-size:2.25rem;font-weight:900;letter-spacing:-.035em;
  color:var(--berry);line-height:1;
}
.entry .q{font-size:1rem;font-weight:700;color:var(--ink-soft);margin-top:.6rem}

.doors{display:grid;gap:1rem;width:100%;max-width:36rem;grid-template-columns:1fr}
@media (min-width:34rem){ .doors{grid-template-columns:1fr 1fr} }

.door{
  position:relative;overflow:hidden;
  border:0;border-radius:1.25rem;
  padding:2rem 1.25rem 1.5rem;
  font-family:inherit;color:var(--ink);
  cursor:pointer;text-align:left;
  background:var(--white);
  box-shadow:0 6px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease;
}
.door::after{
  content:"";position:absolute;top:-2.5rem;right:-2.5rem;
  width:7rem;height:7rem;border-radius:50%;
  background:var(--sun);opacity:.55;
}
.door:nth-child(2)::after{background:var(--sky)}
.door:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 9px 0 var(--line)}
.door:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.door:focus-visible{outline:3px solid var(--grape);outline-offset:3px}
.door .t{position:relative;font-size:1.375rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.35rem}
.door .s{position:relative;font-size:.875rem;color:var(--ink-soft);line-height:1.5}

.fineprint{font-size:.75rem;color:var(--ink-soft);max-width:28rem;line-height:1.6}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- Kasse ---------- */

.panelcard{
  background:var(--white);
  border-radius:var(--r);
  padding:1.1rem 1.15rem;
  margin-bottom:.9rem;
  box-shadow:0 4px 0 var(--line);
}
.sec{
  font-size:.75rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.8rem;
}

.row{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--butter)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row-main{flex:1;min-width:0}
.row-name{font-size:.9375rem;font-weight:700;line-height:1.35}
.row-opts{font-size:.75rem;color:var(--ink-soft);margin-top:.1rem}
.row-vendor{font-size:.6875rem;font-weight:700;color:var(--berry);margin-top:.2rem}
.row-price{font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.row-del{
  border:0;background:var(--butter);color:var(--ink-soft);
  width:1.75rem;height:1.75rem;border-radius:50%;flex:none;
  font-family:inherit;font-size:1.125rem;line-height:1;cursor:pointer;
}
.row-del:hover{background:var(--berry);color:var(--white)}

.field{display:block;margin-bottom:.7rem}
.field .lbl{
  display:block;font-size:.75rem;font-weight:700;
  color:var(--ink-soft);margin-bottom:.25rem;
}
.field input{
  width:100%;font-family:inherit;font-size:.9375rem;
  padding:.7rem .8rem;border:2px solid var(--butter-deep);
  border-radius:.7rem;background:var(--butter);color:var(--ink);
}
.field input:focus{outline:0;border-color:var(--berry);background:var(--white)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

.hint{font-size:.75rem;color:var(--ink-soft);margin:-.3rem 0 .9rem;line-height:1.45}
.hint--center{text-align:center;margin:.8rem 0 0}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.chip{
  font-family:inherit;font-size:.8125rem;font-weight:800;
  padding:.5rem .9rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--butter-deep);background:var(--butter);color:var(--ink);
}
.chip.is-on{background:var(--berry);border-color:var(--berry);color:var(--white)}

.sumline{
  display:flex;justify-content:space-between;
  font-size:.9375rem;padding:.35rem 0;
  font-variant-numeric:tabular-nums;
}
.sumline--total{
  font-size:1.125rem;font-weight:900;
  border-top:2px dashed var(--line);margin-top:.4rem;padding-top:.7rem;
}

.btn--big{font-size:1rem;padding:1.05rem 1.1rem}

/* ---------- Schrittanzeige ---------- */

.steps{display:flex;gap:.4rem;margin-bottom:1.4rem}
.stepdot{
  flex:1;display:flex;align-items:center;gap:.45rem;
  background:var(--white);border-radius:999px;
  padding:.4rem .7rem;
  box-shadow:0 3px 0 var(--line);
  font-size:.75rem;font-weight:800;color:var(--ink-soft);
  min-width:0;
}
.stepdot .n{
  width:1.35rem;height:1.35rem;flex:none;border-radius:50%;
  background:var(--butter-deep);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:900;
}
.stepdot .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepdot.is-on{background:var(--berry);color:var(--white);box-shadow:0 3px 0 var(--berry-dark)}
.stepdot.is-on .n{background:var(--white);color:var(--berry)}
.stepdot.is-done .n{background:var(--mint);color:var(--white)}

@media (max-width:26rem){
  .stepdot .t{display:none}
  .stepdot{flex:0 0 auto;padding:.4rem}
  .stepdot.is-on{flex:1}
  .stepdot.is-on .t{display:block}
}

/* ---------- Fußleiste der Kasse ---------- */

.stepbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--grape);color:var(--white);
  padding:.8rem 1rem;
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.75rem;
}
.stepbar-back{
  width:2.6rem;height:2.6rem;flex:none;border-radius:50%;
  border:0;background:rgba(255,255,255,.16);color:var(--white);
  font-family:inherit;font-size:1.125rem;cursor:pointer;
}
.stepbar-back:active{transform:translateY(1px)}
.stepbar-sum{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0}
.stepbar-sum .l{font-size:.6875rem;opacity:.65;font-weight:700}
.stepbar-sum .v{font-size:1.125rem;font-weight:900;font-variant-numeric:tabular-nums}
.stepbar .btn{width:auto;flex:none;padding:.8rem 1.15rem;font-size:.875rem}

/* ---------- Kartenoptik im Zahlungsschritt ---------- */

.cardface{position:relative;background:linear-gradient(135deg,var(--grape) 0%,#5B3A7E 100%);color:var(--white)}
.cardface .lbl{color:rgba(255,255,255,.7)}
.cardface input{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
  color:var(--white);
}
.cardface input:focus{background:rgba(255,255,255,.2);border-color:var(--sun)}
.cardface-brand{
  position:absolute;top:1.1rem;right:1.15rem;
  font-size:.75rem;font-weight:900;letter-spacing:-.01em;
  color:var(--sun);
}

/* ---------- Lieferverfolgung ---------- */

.track-eta{
  background:var(--berry);color:var(--white);
  border-radius:var(--r);
  padding:1rem 1.15rem;margin-bottom:.9rem;
  box-shadow:0 4px 0 var(--berry-dark);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.track-eta .l{font-size:.8125rem;font-weight:700;opacity:.85}
.track-eta .v{font-size:1.5rem;font-weight:900;letter-spacing:-.02em}

.map{
  border-radius:var(--r);overflow:hidden;
  margin-bottom:.9rem;box-shadow:0 4px 0 var(--line);
  background:#EFE6D2;
}
.map svg{display:block;width:100%;height:auto}
.map .street{
  font-family:var(--font);font-size:8px;font-weight:700;
  fill:#A99A7C;letter-spacing:.02em;
}
#marker{transition:transform .5s linear}

.courier{display:flex;align-items:center;gap:.85rem}
.avatar{
  width:2.75rem;height:2.75rem;flex:none;border-radius:50%;
  background:var(--grape);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;font-weight:900;
}
.courier-main{flex:1;min-width:0}
.courier-name{font-size:.9375rem;font-weight:800}
.courier-sub{font-size:.8125rem;color:var(--ink-soft)}
.courier-rate{font-size:.8125rem;font-weight:800;white-space:nowrap}

.stages{list-style:none;position:relative}
.stages::before{
  content:"";position:absolute;left:.5rem;top:.9rem;bottom:.9rem;
  width:2px;background:var(--butter-deep);
}
.stage{display:flex;gap:.85rem;padding:.5rem 0;position:relative}
.stage .dot{
  width:1.05rem;height:1.05rem;flex:none;border-radius:50%;
  background:var(--butter-deep);margin-top:.2rem;z-index:1;
  border:3px solid var(--white);box-sizing:content-box;
  margin-left:-.05rem;
}
.stage.is-done .dot{background:var(--mint)}
.stage.is-on .dot{background:var(--berry);box-shadow:0 0 0 4px rgba(224,62,99,.18)}
.stage .txt{display:flex;flex-direction:column;min-width:0}
.stage .st{font-size:.875rem;font-weight:700;color:var(--ink-soft)}
.stage .ss{font-size:.75rem;color:var(--ink-soft);opacity:.75}
.stage.is-on .st,.stage.is-done .st{color:var(--ink)}
.stage.is-on .st{font-weight:900}