/* Lokale Schriften – kein Google, DSGVO-sauber */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}

/* ============================================================
   Döner Bestellsystem – Visuelles Design
   Signature: "Nummern-Ticket" (Imbiss-Zettel) · warm/appetitlich
   Display: Bricolage Grotesque · Body: DM Sans
   ============================================================ */

:root{
  --ink:#15233F;        /* tiefes Marken-Navy – dunkle Flächen, Text */
  --ink-2:#0E1830;      /* noch tiefer – Verläufe */
  --flame:#F07D00;      /* Marken-Orange – Hero/CTA */
  --ember:#D9521A;      /* tieferes Orange-Rot – Char/Verlauf */
  --chili:#E0341F;      /* scharf-Akzent, sparsam */
  --leaf:#2E9E5B;       /* frisch / fertig / bezahlt */
  --paper:#FBF5EC;      /* warmes Papier – heller Terminal-Grund */
  --card:#FFFFFF;
  --line:#ECE1D2;       /* warme Haarlinie */
  --ink-soft:#3A4763;
  --muted:#8C8170;      /* warmes Sekundärgrau */

  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 18px 40px -22px rgba(21,35,63,.45);
  --shadow-sm:0 8px 20px -14px rgba(21,35,63,.4);

  --disp: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--body); color:var(--ink);
  background:var(--paper);
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
}
/* sanfte, appetitliche Wärme im Hintergrund */
body:not(.screen-dark){
  background:
    radial-gradient(1100px 520px at 100% -10%, #FFE9CE 0%, transparent 55%),
    radial-gradient(900px 480px at -10% 0%, #FFEFE0 0%, transparent 50%),
    var(--paper);
  background-attachment:fixed;
}
body.screen-dark{
  color:#fff;
  background:
    radial-gradient(1200px 700px at 50% -15%, #21345C 0%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  background-attachment:fixed;
}

/* ---------- Top-Bar (Terminal) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px;
  background:linear-gradient(100deg, var(--ink) 0%, #1C2F55 100%);
  color:#fff; position:relative; z-index:5;
}
.topbar .shop{display:flex;align-items:center;gap:12px;min-width:0}
.topbar .logo{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(145deg,var(--flame),var(--ember));
  display:grid;place-items:center;font-size:24px;
  box-shadow:0 6px 16px -6px rgba(240,125,0,.7);
}
.topbar h1{
  font-family:var(--disp); font-weight:800; font-size:clamp(18px,2.4vw,24px);
  margin:0; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9FB0D6;font-weight:700}

/* Schritt-Fortschritt */
.progress{display:flex;gap:7px;align-items:center}
.progress .seg{width:30px;height:6px;border-radius:99px;background:#33457099}
.progress .seg.on{background:var(--flame)}
.progress .seg.done{background:#7FA0E0}

.wrap{max-width:1080px;margin:0 auto;padding:22px 20px 130px}

/* ---------- Schritt-Header ---------- */
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--flame);font-weight:800;margin-bottom:6px}
.step-h{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.05;margin:0 0 18px;letter-spacing:-.01em}
.step-sub{color:var(--muted);font-weight:500;font-size:16px}

/* ---------- Auswahl-Karten ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.tile{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px;cursor:pointer;text-align:left;position:relative;overflow:hidden;
  transition:transform .12s ease, box-shadow .18s ease, border-color .15s ease;
  box-shadow:var(--shadow-sm);
}
.tile:active{transform:scale(.975)}
.tile.sel{border-color:var(--flame);box-shadow:0 0 0 3px #F07D0030, var(--shadow)}
.tile .thumb{
  width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;margin-bottom:12px;
  background:linear-gradient(160deg,#FFF1DF,#FFE2C2);
  display:grid;place-items:center;
}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile .thumb .emoji{font-size:54px;line-height:1;filter:drop-shadow(0 6px 10px rgba(217,82,26,.25))}
.tile .nm{font-weight:700;font-size:18px;line-height:1.15}
.tile .pr{color:var(--muted);font-size:14px;font-weight:600;margin-top:3px}
.tile .pr.add{color:var(--flame)}
.tile .check{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:var(--flame);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:800;
  transform:scale(0);transition:transform .16s cubic-bezier(.2,1.4,.4,1);box-shadow:0 4px 10px -3px rgba(240,125,0,.7)
}
.tile.sel .check{transform:scale(1)}

/* ---------- Tray (sticky unten) ---------- */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1.5px solid var(--line);
  box-shadow:0 -16px 36px -28px rgba(21,35,63,.5);
}
.tray-in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px}
.tray .total{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1}
.tray .total small{display:block;font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.tray .spacer{flex:1}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body);border:0;border-radius:14px;padding:16px 26px;font-size:18px;font-weight:700;
  cursor:pointer;transition:transform .12s ease, box-shadow .18s ease, background .15s ease;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(145deg,var(--flame),var(--ember));color:#fff;box-shadow:0 12px 26px -12px rgba(217,82,26,.8)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn-lg{padding:20px 30px;font-size:20px}

/* ---------- Warenkorb ---------- */
.cart-item{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  box-shadow:var(--shadow-sm)
}
.cart-item .title{font-family:var(--disp);font-weight:700;font-size:18px}
.cart-item .desc{font-size:14px;color:var(--muted);margin-top:3px}
.cart-item .price{font-family:var(--disp);font-weight:700}
.icon-x{background:#FFF1E8;color:var(--ember);border:0;width:38px;height:38px;border-radius:11px;font-size:17px;cursor:pointer}

/* ---------- Zahl-Auswahl ---------- */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:540px;margin:0 auto}
.pay-tile{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:30px 18px;text-align:center;cursor:pointer;
  transition:transform .12s, box-shadow .18s, border-color .15s; box-shadow:var(--shadow-sm)
}
.pay-tile:active{transform:scale(.97)}
.pay-tile.sel{border-color:var(--flame);box-shadow:0 0 0 3px #F07D0030,var(--shadow)}
.pay-tile .ic{font-size:52px}
.pay-tile .nm{font-family:var(--disp);font-weight:700;font-size:22px;margin-top:8px}

/* ============================================================
   SIGNATURE: Nummern-Ticket
   ============================================================ */
.ticket{
  position:relative;max-width:430px;margin:10px auto;background:#fff;border-radius:24px;
  padding:34px 30px 30px;text-align:center;box-shadow:var(--shadow);
  border:1.5px solid var(--line);
  animation:ticketIn .5s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes ticketIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.ticket .eyebrow{color:var(--muted)}
.ticket .tnum{
  font-family:var(--disp);font-weight:800;font-size:clamp(96px,22vw,150px);line-height:.92;
  color:transparent;background:linear-gradient(160deg,var(--flame),var(--ember));-webkit-background-clip:text;background-clip:text;
  letter-spacing:-.03em;margin:6px 0 4px;
}
.ticket .perf{position:relative;border-top:2px dashed var(--line);margin:22px -30px 18px}
.ticket .perf::before,.ticket .perf::after{
  content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--line)
}
.ticket .perf::before{left:-13px}.ticket .perf::after{right:-13px}
.ticket .pay{display:inline-flex;align-items:center;gap:8px;font-weight:700;background:#FFF1E0;color:var(--ember);padding:9px 16px;border-radius:99px;font-size:15px}
.ticket .hint{color:var(--ink-soft);font-size:16px;margin:16px 4px 0;line-height:1.45}

.center{text-align:center}

/* ---------- Willkommen / Start-Screen ---------- */
.welcome{min-height:calc(100vh - 78px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;cursor:pointer}
.welcome .wlogo{width:104px;height:104px;border-radius:28px;display:grid;place-items:center;font-size:56px;
  background:linear-gradient(145deg,var(--flame),var(--ember));box-shadow:0 22px 46px -16px rgba(240,125,0,.75);margin-bottom:22px}
.welcome h1{font-family:var(--disp);font-weight:800;font-size:clamp(36px,6vw,58px);margin:0}
.welcome p{color:var(--muted);font-size:21px;margin:12px 0 0}
.welcome .foods{font-size:36px;letter-spacing:12px;margin:24px 0 4px;opacity:.85}
.welcome .start{margin-top:26px}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ============================================================
   ABHOLANZEIGE (Display)
   ============================================================ */
.disp{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(1200px 700px at 50% -15%,#21345C 0%,transparent 60%),linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff}
.disp-head{display:flex;align-items:center;justify-content:space-between;padding:26px 40px 6px}
.disp-head .brand{display:flex;align-items:center;gap:14px;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,30px)}
.disp-head .logo{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--flame),var(--ember));display:grid;place-items:center;font-size:26px}
.disp-head .clock{font-family:var(--disp);font-weight:700;font-size:22px;color:#9FB0D6}
.disp-title{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,52px);text-align:center;margin:6px 0 4px;letter-spacing:-.01em}
.disp-title .dot{color:var(--leaf)}
.nums{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:26px 40px 44px;align-content:center}
.token{
  position:relative;border-radius:24px;text-align:center;padding:34px 10px;
  background:linear-gradient(160deg,#21345C,#1A2A4C);border:1.5px solid #2E4373;
  animation:pop .45s cubic-bezier(.2,1.3,.3,1) both;
}
.token .n{font-family:var(--disp);font-weight:800;font-size:clamp(64px,9vw,120px);line-height:1;color:#DCE6FB}
.token .lbl{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#7E91BD;font-weight:700;margin-top:8px}
.token::before,.token::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:var(--ink-2)}
.token::before{left:-11px}.token::after{right:-11px}
/* neueste Nummer hervorgehoben */
.token.fresh{background:linear-gradient(160deg,var(--flame),var(--ember));border-color:transparent;box-shadow:0 22px 50px -20px rgba(240,125,0,.75);animation:popFresh .55s cubic-bezier(.2,1.4,.3,1) both}
.token.fresh .n{color:#fff}
.token.fresh .lbl{color:#FFE2C4}
.token.fresh::before,.token.fresh::after{background:var(--ink-2)}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes popFresh{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.disp .empty{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:clamp(26px,4vw,40px);color:#5C6E97;font-weight:700}

/* ============================================================
   KÜCHE (KDS)
   ============================================================ */
.k-top{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid #2A3C61}
.k-top h1{font-family:var(--disp);font-weight:800;font-size:22px;margin:0}
.k-top .brand{color:var(--flame)}
.k-top .meta{display:flex;gap:18px;align-items:center;color:#9FB0D6;font-weight:700}
.k-top .count{background:var(--flame);color:#fff;border-radius:99px;padding:4px 14px;font-family:var(--disp)}
.kbody{padding:22px 26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.kcard{
  background:#fff;color:var(--ink);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.6);border:2px solid transparent;
  animation:kin .35s ease both
}
@keyframes kin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kcard.warn{border-color:#F0A500}
.kcard.late{border-color:var(--chili)}
.khead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(100deg,var(--ink),#1C2F55);color:#fff}
.khead .knum{font-family:var(--disp);font-weight:800;font-size:30px}
.khead .right{display:flex;align-items:center;gap:8px}
.time-chip{font-weight:700;font-size:14px;background:#ffffff22;padding:5px 11px;border-radius:99px}
.kcard.warn .time-chip{background:#F0A50033;color:#7a5800}
.badge{padding:6px 12px;border-radius:99px;font-weight:800;font-size:13px}
.badge.cash{background:#E6F6EC;color:var(--leaf)}
.badge.card{background:#FFF1E0;color:var(--ember)}
.kpos{padding:13px 16px;border-bottom:1px dashed var(--line)}
.kpos:last-of-type{border-bottom:0}
.kpos .line1{font-family:var(--disp);font-size:21px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpos .icons{font-size:25px;margin-top:6px;letter-spacing:5px}
.kpos .notiz{color:var(--chili);font-weight:700;margin-top:6px;font-size:15px}
.kfoot{padding:14px;margin-top:auto}
.k-empty{grid-column:1/-1;text-align:center;color:#5C6E97;font-family:var(--disp);font-size:26px;font-weight:700;padding:70px 0}

/* ---------- Sperr-/Login-Seiten ---------- */
.gate-card{max-width:420px;margin:60px auto;background:#fff;border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow);border:1.5px solid var(--line);text-align:center}
.input{font-family:var(--body);font-size:20px;padding:15px 16px;border-radius:13px;border:1.5px solid var(--line);text-align:center;width:100%;outline:none}
.input:focus{border-color:var(--flame);box-shadow:0 0 0 3px #F07D0030}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
@media (max-width:560px){
  .nums{grid-template-columns:repeat(2,1fr)}
  .pay-grid{grid-template-columns:1fr}
}

/* ============================================================
   Account / Dashboard / Statistik
   ============================================================ */
.reg-form{display:grid;gap:12px;margin-top:18px}
.reg-form input{font-family:var(--body);font-size:16px;padding:14px 15px;border-radius:13px;border:1.5px solid var(--line);background:#fff;outline:none;width:100%}
.reg-form input:focus{border-color:var(--flame);box-shadow:0 0 0 3px #F07D0030}
.reg-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.reg-form .row2{grid-template-columns:1fr}}

.banner{display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-radius:16px;padding:16px 20px;margin:18px 0;font-weight:600;box-shadow:var(--shadow-sm)}
.banner .btn{margin-left:auto}
.banner.ok{background:#EAF7EF;color:#1d7a45;border:1.5px solid #bfe6cd}
.banner.trial{background:#FFF6E9;color:#9a5a00;border:1.5px solid #ffd99b}
.banner.gesperrt{background:#FDECEC;color:#b5302a;border:1.5px solid #f3c0bd}

.dash-h{font-family:var(--disp);font-size:26px;margin:30px 0 6px}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.linkcard{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}
.lk-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.lk-ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,#FFF1DF,#FFE2C2);display:grid;place-items:center;font-size:22px}
.lk-sub{font-size:13px;color:var(--muted)}
.linkcard input{width:100%;font-size:12px;padding:9px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:#FBF8F2;margin-bottom:8px}
.lk-btns{display:flex;gap:8px}
.lk-btns .btn{flex:1;justify-content:center}

.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.action{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm);transition:transform .15s}
.action:hover{transform:translateY(-4px)}
.action .ai{font-size:32px;margin-bottom:6px}
.action b{font-size:17px}
.action span{color:var(--muted);font-size:14px}

.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:14px}
.stat{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .sv{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--ink)}
.stat .sl{font-size:12px;color:var(--muted);margin-top:4px}

.stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.panel{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.panel h3{font-family:var(--disp);font-size:18px;margin:0 0 16px}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bf{width:100%;max-width:42px;background:linear-gradient(180deg,var(--flame),var(--ember));border-radius:8px 8px 4px 4px;position:relative;min-height:4px;display:flex;justify-content:center}
.bf span{position:absolute;top:-20px;font-size:12px;font-weight:700;color:var(--ink)}
.bl{font-size:12px;color:var(--muted);font-weight:600}
.toprow{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:15px}
.toprow span:first-child{width:130px;flex:none;font-weight:600}
.toprow .tbar{flex:1;background:#F1E7D8;border-radius:99px;height:12px;overflow:hidden}
.toprow .tbar div{height:100%;background:linear-gradient(90deg,var(--flame),var(--ember));border-radius:99px}
.toprow b{font-family:var(--disp)}

@media(max-width:820px){
  .links,.dash-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .stat-cols{grid-template-columns:1fr}
}