/* ============================================================
   Bühne „Kaffee-Kiosk" · Projektfarbe Caramel #B5761F.
   Alle Selektoren gescoped auf [data-demo="kiosk"].
   Design-Fläche: 1100 x 688 px (Engine skaliert per transform).
   Optik: abgefilmtes 7"-Touch-Terminal auf warmer Theke.
   ============================================================ */

/* ---------- Bühnen-Grund: helle warme Theke + weiche Vignette ---------- */
[data-demo="kiosk"] .demo-fit{
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(201,150,59,.12), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 52%, rgba(140,110,72,.22) 100%),
    linear-gradient(180deg, #f6f1e8 0%, #f1ece2 55%, #e9e1d2 100%);
  font-family:'Instrument Sans','Segoe UI',sans-serif;
  color:#2A2521;
  overflow:hidden;
}

/* ============================================================
   Geräterahmen (7"-Display-Optik, ~1000 x 620, mittig)
   ============================================================ */
[data-demo="kiosk"] .kio-device{
  position:absolute; left:50px; top:24px; width:1000px; height:620px; z-index:10;
  background:linear-gradient(180deg, #221d18 0%, #15110d 100%);
  border-radius:28px;
  border:1px solid #3a322a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 40px 76px -28px rgba(107,78,46,.5),
    0 14px 34px -14px rgba(107,78,46,.28);
}
/* Standfuß-Schatten unter dem Gerät */
[data-demo="kiosk"] .kio-device::after{
  content:''; position:absolute; left:14%; right:14%; bottom:-30px; height:34px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(107,78,46,.4), transparent 72%);
  border-radius:50%;
}
/* dezente Frontkamera-/Logo-Punkte am Rahmen */
[data-demo="kiosk"] .kio-device::before{
  content:''; position:absolute; left:50%; top:11px; width:8px; height:8px;
  transform:translateX(-50%); border-radius:50%;
  background:#0a0806; box-shadow:inset 0 1px 2px rgba(255,255,255,.15);
}

/* Display-Panel (1024x600-Proportionen, innen 960 x 564) */
[data-demo="kiosk"] .kio-screen{
  position:absolute; inset:28px 20px; border-radius:12px; overflow:hidden;
  background:#F4F1EA;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.18);
}

/* ============================================================
   Kopfzeile
   ============================================================ */
[data-demo="kiosk"] .kio-topbar{
  position:absolute; left:0; right:0; top:0; height:64px; z-index:5;
  display:flex; align-items:center; padding:0 24px;
  background:#F4F1EA; border-bottom:1px solid #E7E0D4;
}
[data-demo="kiosk"] .kio-title{
  font-size:27px; font-weight:700; letter-spacing:-.01em; color:#B5761F;
}
[data-demo="kiosk"] .kio-topright{
  margin-left:auto; position:relative; height:40px; min-width:230px;
}

/* Badge-Pillen-Button (h 40, r 20) */
[data-demo="kiosk"] .kio-badgebtn{
  position:absolute; right:0; top:0; height:40px; border-radius:20px;
  display:flex; align-items:center; gap:8px; padding:0 20px;
  background:#B5761F; color:#fff; font-size:15px; font-weight:600;
  box-shadow:0 6px 16px -6px rgba(107,78,46,.55);
  transition:opacity .4s ease, transform .4s ease;
}
[data-demo="kiosk"] .kio-badgebtn .kio-badge-ico{ font-size:17px; line-height:1; }
[data-demo="kiosk"] .kio-badgebtn.hide{ opacity:0; transform:scale(.82); }

/* Sitzungs-Chip (nach Badge-Auflegen) */
[data-demo="kiosk"] .kio-session{
  position:absolute; right:0; top:0; height:40px; border-radius:20px;
  display:flex; align-items:center; gap:9px; padding:0 6px 0 5px;
  background:#FFFFFF; border:1px solid #E7E0D4;
  box-shadow:0 6px 16px -8px rgba(107,78,46,.4);
  opacity:0; transform:translateY(-10px) scale(.92);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
[data-demo="kiosk"] .kio-session.show{ opacity:1; transform:none; }
[data-demo="kiosk"] .kio-avatar{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#C9963B,#B5761F); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
[data-demo="kiosk"] .kio-user{ font-size:14px; font-weight:600; color:#2A2521; }
[data-demo="kiosk"] .kio-balance{
  height:28px; border-radius:14px; padding:0 12px; display:flex; align-items:center;
  background:#B5761F; color:#fff; font-size:13.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-balance.bump{ animation:kio-bump .55s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes kio-bump{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); box-shadow:0 0 0 6px rgba(57,179,106,.25); }
  100%{ transform:scale(1); }
}

/* ============================================================
   Hauptbereich: Katalog + Warenkorb
   ============================================================ */
[data-demo="kiosk"] .kio-body{
  position:absolute; left:0; right:0; top:64px; bottom:36px; overflow:hidden;
}

/* --- Produktkacheln (Karussell-Optik, 4 sichtbar) --- */
[data-demo="kiosk"] .kio-catalog{
  position:absolute; left:0; top:0; bottom:0;
  display:flex; align-items:center; gap:18px; padding:0 24px;
}
[data-demo="kiosk"] .kio-tile{
  width:210px; height:260px; flex:none;
  background:#FFFFFF; border-radius:18px; border:1px solid #E7E0D4;
  box-shadow:0 12px 26px -12px rgba(107,78,46,.35);
  padding:10px 10px 0; text-align:center;
  opacity:0; transform:translateX(400px);
  transition:transform .95s cubic-bezier(.16,.84,.26,1.04), opacity .55s ease,
             background .18s ease;
}
[data-demo="kiosk"] .kio-tile.in{ opacity:1; transform:none; }
[data-demo="kiosk"] .kio-tile.pressed{
  background:#EFE9DF;
  transform:scale(.96);
  transition:transform .14s ease, background .14s ease;
}
[data-demo="kiosk"] .kio-tile-img{
  position:relative; width:190px; height:190px; margin:0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
[data-demo="kiosk"] .kio-tile-img::before{
  content:''; position:absolute; left:12%; top:8%; width:56%; height:38%;
  background:radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.55), transparent 70%);
  border-radius:50%;
}
[data-demo="kiosk"] .kio-tile-img span{
  font-size:96px; line-height:1; position:relative;
  filter:drop-shadow(0 10px 14px rgba(80,50,20,.35));
}
[data-demo="kiosk"] .kio-img-kaffee { background:linear-gradient(160deg,#f6ddba,#dfa96f); }
[data-demo="kiosk"] .kio-img-riegel { background:linear-gradient(160deg,#f6e7c4,#d6b781); }
[data-demo="kiosk"] .kio-img-cookie { background:linear-gradient(160deg,#f4d7b6,#d29d67); }
[data-demo="kiosk"] .kio-img-limo   { background:linear-gradient(160deg,#fbeec2,#e6c877); }
[data-demo="kiosk"] .kio-tile-name{
  margin-top:9px; font-size:15px; font-weight:600; color:#9A9186;
}
[data-demo="kiosk"] .kio-tile-price{
  margin-top:1px; font-size:17px; font-weight:700; color:#B5761F;
  font-variant-numeric:tabular-nums;
}

/* --- Warenkorb-Panel (250 px, fährt von rechts auf) --- */
[data-demo="kiosk"] .kio-cart{
  position:absolute; right:0; top:0; bottom:0; width:250px; z-index:4;
  background:#FFFFFF; border-left:1px solid #E7E0D4;
  box-shadow:-16px 0 34px -18px rgba(107,78,46,.45);
  display:flex; flex-direction:column; padding:16px 16px 14px;
  transform:translateX(280px);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
[data-demo="kiosk"] .kio-cart.open{ transform:none; }
[data-demo="kiosk"] .kio-cart-head{
  font-size:16px; font-weight:700; color:#2A2521; margin-bottom:10px;
  padding-bottom:9px; border-bottom:1px solid #E7E0D4;
}
[data-demo="kiosk"] .kio-cart-items{ flex:1; }
[data-demo="kiosk"] .kio-ci{
  padding:9px 0 10px; border-bottom:1px solid #E7E0D4;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
[data-demo="kiosk"] .kio-ci.show{ opacity:1; transform:none; }
[data-demo="kiosk"] .kio-ci-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
[data-demo="kiosk"] .kio-ci-name{ font-size:14.5px; font-weight:600; color:#2A2521; }
[data-demo="kiosk"] .kio-ci-price{
  font-size:13.5px; font-weight:700; color:#B5761F; font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-ci-step{
  margin-top:7px; display:flex; align-items:center; gap:12px;
}
[data-demo="kiosk"] .kio-st-btn{
  width:28px; height:28px; border-radius:50%; flex:none;
  border:1.5px solid #E7E0D4; background:#F4F1EA; color:#9A9186;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; line-height:1;
  transition:background .15s ease, transform .15s ease, color .15s ease;
}
[data-demo="kiosk"] .kio-st-btn.pressed{
  background:#EFE9DF; color:#B5761F; transform:scale(.88);
}
[data-demo="kiosk"] .kio-ci-qty{
  min-width:20px; text-align:center; font-size:15px; font-weight:700; color:#2A2521;
  font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-cart-sum{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:11px 0 12px; font-size:14px; font-weight:600; color:#9A9186;
}
[data-demo="kiosk"] .kio-sum-val{
  font-size:19px; font-weight:800; color:#B5761F; font-variant-numeric:tabular-nums;
}
/* Caramel-CTA „Bezahlen" mit echtem Busy-State */
[data-demo="kiosk"] .kio-cta{
  height:48px; border-radius:14px; flex:none;
  background:#B5761F; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:16.5px; font-weight:700;
  box-shadow:0 10px 22px -8px rgba(107,78,46,.55);
  transition:background .2s ease, transform .2s ease;
}
[data-demo="kiosk"] .kio-cta.busy{
  background:#C9963B;
  animation:kio-busy .6s ease-in-out infinite;
}
[data-demo="kiosk"] .kio-cta.busy .kio-cta-bolt{
  animation:kio-bolt .6s ease-in-out infinite;
}
@keyframes kio-busy{
  0%,100%{ transform:scale(1);    box-shadow:0 10px 22px -8px rgba(107,78,46,.55); }
  50%    { transform:scale(.975); box-shadow:0 6px 26px -6px rgba(201,150,59,.8); }
}
@keyframes kio-bolt{
  0%,100%{ transform:scale(1);   opacity:1; }
  50%    { transform:scale(1.3); opacity:.75; }
}

/* ---------- Statuszeile unten ---------- */
[data-demo="kiosk"] .kio-statusline{
  position:absolute; left:0; right:0; bottom:0; height:36px; z-index:3;
  display:flex; align-items:center; gap:8px; padding:0 20px;
  background:#F4F1EA; border-top:1px solid #E7E0D4;
  font-size:12.5px; color:#9A9186; letter-spacing:.01em;
}
[data-demo="kiosk"] .kio-statusline::before{
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:#39B36A; box-shadow:0 0 6px rgba(57,179,106,.7);
}

/* ============================================================
   RFID-Karte + Puls-Ring am Rahmen
   ============================================================ */
[data-demo="kiosk"] .kio-rfid{
  position:absolute; right:-180px; bottom:96px; width:156px; height:98px; z-index:20;
  border-radius:13px;
  background:linear-gradient(140deg,#fbf6ec 0%, #ecdfc8 100%);
  border:1.5px solid #c2ab82;
  box-shadow:0 18px 38px -12px rgba(107,78,46,.55), 0 6px 14px -6px rgba(107,78,46,.3);
  transform:translate(30px,220px) rotate(22deg);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
  padding:11px 13px;
}
[data-demo="kiosk"] .kio-rfid.show{ transform:translate(-152px,0) rotate(7deg); }
[data-demo="kiosk"] .kio-rfid.away{ transform:translate(40px,240px) rotate(26deg); }
[data-demo="kiosk"] .kio-rfid-chip{
  width:30px; height:22px; border-radius:5px;
  background:linear-gradient(150deg,#C9963B,#B5761F);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
[data-demo="kiosk"] .kio-rfid-wave{
  position:absolute; top:12px; right:13px;
  font-size:17px; color:#B5761F; letter-spacing:-2px;
}
[data-demo="kiosk"] .kio-rfid-label{
  position:absolute; left:13px; bottom:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; color:#9A9186;
  text-transform:uppercase;
}
/* Puls-Ring am rechten Rahmenrand (Lesezone) */
[data-demo="kiosk"] .kio-pulse{
  position:absolute; right:-14px; bottom:130px; width:56px; height:56px; z-index:15;
  border-radius:50%; border:3px solid #B5761F; opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.4);
}
[data-demo="kiosk"] .kio-pulse.go{ animation:kio-pulse .9s ease-out 2; }
@keyframes kio-pulse{
  0%  { opacity:.95; transform:scale(.45); }
  70% { opacity:.35; }
  100%{ opacity:0;   transform:scale(1.5); }
}

/* ============================================================
   Bestätigungs-Overlay
   ============================================================ */
[data-demo="kiosk"] .kio-confirm{
  position:absolute; inset:0; z-index:8;
  display:flex; align-items:center; justify-content:center;
  background:rgba(42,37,33,.44);
  opacity:0; transition:opacity .35s ease;
}
[data-demo="kiosk"] .kio-confirm.show{ opacity:1; }
[data-demo="kiosk"] .kio-confirm-card{
  width:400px; background:#FFFFFF; border-radius:18px; padding:22px 24px 22px;
  box-shadow:0 30px 70px -20px rgba(20,12,4,.6);
  transform:translateY(22px) scale(.94);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
[data-demo="kiosk"] .kio-confirm.show .kio-confirm-card{ transform:none; }
[data-demo="kiosk"] .kio-confirm-title{
  font-size:19px; font-weight:700; color:#2A2521; margin-bottom:13px;
}
[data-demo="kiosk"] .kio-cf-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; font-size:14.5px; color:#2A2521;
  font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-cf-row .kio-cf-muted{ color:#9A9186; }
[data-demo="kiosk"] .kio-cf-div{ height:1px; background:#E7E0D4; margin:7px 0; }
[data-demo="kiosk"] .kio-cf-row.kio-cf-rest{ font-weight:800; color:#B5761F; font-size:16px; }
[data-demo="kiosk"] .kio-confirm-btn{
  margin-top:15px; height:48px; border-radius:14px;
  background:#B5761F; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16.5px; font-weight:700;
  box-shadow:0 10px 22px -8px rgba(107,78,46,.55);
}

/* ============================================================
   Erfolgs-Overlay (Badge-Zahlung)
   ============================================================ */
[data-demo="kiosk"] .kio-success{
  position:absolute; inset:0; z-index:9;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#F4F1EA;
  opacity:0; transition:opacity .4s ease;
}
[data-demo="kiosk"] .kio-success.show{ opacity:1; }
[data-demo="kiosk"] .kio-check{
  width:104px; height:104px; border-radius:50%;
  background:#39B36A; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:56px; font-weight:700; line-height:1;
  box-shadow:0 16px 40px -12px rgba(57,179,106,.65), 0 0 0 12px rgba(57,179,106,.14);
  transform:scale(0);
}
[data-demo="kiosk"] .kio-success.show .kio-check{ animation:kio-pop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes kio-pop{
  0%  { transform:scale(0); }
  70% { transform:scale(1.12); }
  100%{ transform:scale(1); }
}
[data-demo="kiosk"] .kio-success-title{
  font-size:23px; font-weight:700; color:#2A2521;
}
[data-demo="kiosk"] .kio-success-sub{
  font-size:14px; color:#9A9186;
}

/* ============================================================
   Übergangs-Wisch + QR-Modus
   ============================================================ */
[data-demo="kiosk"] .kio-wipe{
  position:absolute; inset:0; z-index:12;
  background:linear-gradient(100deg, transparent 0%, #C9963B 18%, #F4F1EA 50%, #C9963B 82%, transparent 100%);
  transform:translateX(-130%);
}
[data-demo="kiosk"] .kio-wipe.run{ animation:kio-wipe 1.2s cubic-bezier(.6,.05,.35,1) forwards; }
@keyframes kio-wipe{
  0%  { transform:translateX(-130%); }
  45% { transform:translateX(0); }
  55% { transform:translateX(0); }
  100%{ transform:translateX(130%); }
}

[data-demo="kiosk"] .kio-qrmode{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  background:#F4F1EA;
  opacity:0; transition:opacity .3s ease;
}
[data-demo="kiosk"] .kio-qrmode.show{ opacity:1; }
[data-demo="kiosk"] .kio-qr-card{
  position:relative; background:#FFFFFF; border-radius:16px; padding:20px; /* weiße Quiet-Zone */
  border:1px solid #E7E0D4;
  box-shadow:0 18px 42px -16px rgba(107,78,46,.45);
}
/* Fake-QR aus CSS-Grid-Zellen (~180 px) */
[data-demo="kiosk"] .kio-qr{
  display:grid; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr);
  width:180px; height:180px;
}
[data-demo="kiosk"] .kio-qr i{ background:#FFFFFF; }
[data-demo="kiosk"] .kio-qr i.on{ background:#241C15; border-radius:1px; }
/* grüner Erfolg über der QR-Karte */
[data-demo="kiosk"] .kio-qr-ok{
  position:absolute; inset:0; border-radius:16px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9);
  opacity:0; transition:opacity .3s ease;
}
[data-demo="kiosk"] .kio-qr-ok.show{ opacity:1; }
[data-demo="kiosk"] .kio-qr-ok .kio-check{
  width:84px; height:84px; font-size:44px;
}
[data-demo="kiosk"] .kio-qr-ok.show .kio-check{ animation:kio-pop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
[data-demo="kiosk"] .kio-qr-sum{
  margin-top:5px; font-size:21px; font-weight:800; color:#B5761F;
  font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-qr-hint{ font-size:14.5px; color:#9A9186; }
[data-demo="kiosk"] .kio-qr-count{
  font-size:13px; color:#9A9186; font-variant-numeric:tabular-nums;
}
[data-demo="kiosk"] .kio-qr-count.ok{ color:#39B36A; font-weight:700; }

/* ---------- Reduced Motion: Dauer-Animationen aus ---------- */
@media (prefers-reduced-motion: reduce){
  [data-demo="kiosk"] .kio-cta.busy,
  [data-demo="kiosk"] .kio-cta.busy .kio-cta-bolt,
  [data-demo="kiosk"] .kio-pulse.go{ animation:none; }
  [data-demo="kiosk"] .kio-pulse.go{ opacity:.6; }
}