/* ============================================================
   La Fête — CSS Phone-Mockups (Variante ohne Screenshots)
   Jeder Screen ist reines HTML/CSS, skaliert per cqw.
   ============================================================ */

.pf{
  position:relative;
  container-type:inline-size;
  width:100%;
  aspect-ratio:300/620;
  background:linear-gradient(150deg,#3a3238,#141014);
  border-radius:13.5% / 6.6%;
  padding:2.6%;
  box-shadow:0 40px 60px -22px rgba(61,30,46,0.42),
             inset 0 0 0 1.5px rgba(255,255,255,0.06);
}
.pf .screen{
  position:relative;
  height:100%;
  border-radius:11% / 5.4%;
  overflow:hidden;
  background:var(--cream);
  font-size:4cqw;
  line-height:1.4;
  color:var(--aubergine);
}
.pf .pf-island{
  position:absolute; top:2.2cqw; left:50%; transform:translateX(-50%);
  width:26%; height:3.4cqw; background:#0d0a0d; border-radius:2cqw; z-index:20;
}

/* status bar */
.sb{ display:flex; align-items:center; justify-content:space-between;
  padding:2.4em 1.5em 0.4em; font-family:var(--sans); }
.sb-t{ font-size:1em; font-weight:700; letter-spacing:0.01em; }
.sb-i{ display:flex; align-items:center; gap:0.4em; }
.sb-i i{ display:block; width:0.34em; height:0.9em; border-radius:0.1em; background:currentColor; }
.sb-i i:nth-child(1){ height:0.5em; } .sb-i i:nth-child(2){ height:0.68em; }
.sb-i i:nth-child(3){ height:0.86em; }
.sb-bat{ width:1.6em; height:0.86em; border:0.13em solid currentColor; border-radius:0.24em;
  position:relative; margin-left:0.3em; }
.sb-bat::before{ content:""; position:absolute; inset:0.12em; right:0.4em; background:currentColor; border-radius:0.06em; }
.sb-bat::after{ content:""; position:absolute; right:-0.22em; top:0.26em; width:0.12em; height:0.34em;
  background:currentColor; border-radius:0 0.1em 0.1em 0; }

.scr-body{ padding:0.6em 1.5em 1.5em; }
.scr-dark{ background:var(--aubergine); color:var(--cream); }
.scr-dark .sb, .scr-dark .scr-hd{ color:var(--cream); }

/* app header row */
.scr-hd{ display:flex; align-items:center; justify-content:space-between; padding:0.6em 1.5em 0.9em; }
.scr-hd .wm{ font-size:1.5em; }
.scr-hd .hd-sub{ font-family:var(--mono); font-size:0.72em; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--mute); }
.scr-hd .hd-c{ display:flex; align-items:center; gap:0.55em; }
.hd-live{ font-family:var(--mono); font-size:0.66em; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sage-2); display:inline-flex; align-items:center; gap:0.5em;
  border:1px solid color-mix(in srgb,var(--sage) 45%,transparent); padding:0.4em 0.75em; border-radius:999px; }
.hd-live::before{ content:""; width:0.5em; height:0.5em; border-radius:50%; background:var(--sage); }
.hd-round{ width:2.4em; height:2.4em; border-radius:50%; border:1px solid var(--rule);
  display:grid; place-items:center; font-size:0.9em; color:var(--aubergine-2); }
.scr-dark .hd-round{ border-color:rgba(250,245,236,0.28); color:var(--cream-3); }
.scr-crumb{ font-family:var(--mono); font-size:0.68em; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--mute); }
.scr-avatar{ width:2.1em; height:2.1em; border-radius:50%; background:var(--accent); color:var(--cream);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:0.9em; }

/* ---------- WALLET ---------- */
.bon-card{ background:linear-gradient(160deg,#4a2536,#2f1624); border-radius:1.5em; padding:1.4em 1.4em 1.2em;
  color:var(--cream); position:relative; overflow:hidden; }
.bon-card .bc-lbl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.66em;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--amber-soft); }
.bon-ticket{ margin:0.7em auto 0.6em; width:64%; aspect-ratio:5/2.7; border-radius:0.7em;
  background:linear-gradient(150deg,#F4D29A,#E7B45C); position:relative; display:grid; place-items:center;
  box-shadow:0 0.8em 1.4em -0.5em rgba(0,0,0,0.4); }
.bon-ticket::before, .bon-ticket::after{ content:""; position:absolute; width:1em; height:1em; border-radius:50%;
  background:#2f1624; top:50%; transform:translateY(-50%); }
.bon-ticket::before{ left:-0.5em; } .bon-ticket::after{ right:-0.5em; }
.bon-ticket b{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:2.6em; color:#3D1E2E; line-height:1; }
.bon-fest{ text-align:center; font-family:var(--serif); font-style:italic; font-size:0.92em;
  color:var(--amber-soft); margin-top:0.2em; }
.bon-fam{ display:flex; align-items:center; gap:0.5em; margin-top:0.9em;
  border-top:1px solid rgba(250,245,236,0.14); padding-top:0.9em; }
.bon-fam .avs{ display:flex; }
.bon-fam .avs span{ width:1.9em; height:1.9em; border-radius:50%; border:0.16em solid #2f1624;
  margin-left:-0.55em; display:grid; place-items:center; font-size:0.7em; font-weight:700; color:#fff; }
.bon-fam .avs span:first-child{ margin-left:0; }
.bon-fam .fam-t{ font-size:0.74em; color:var(--cream-3); line-height:1.25; }
.bon-fam .fam-sum{ margin-left:auto; font-family:var(--mono); font-size:0.64em; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--amber-soft); text-align:right; }

.pay-btn{ margin-top:1em; background:var(--accent); color:var(--cream); text-align:center;
  font-family:var(--sans); font-weight:600; font-size:1.05em; padding:1em; border-radius:999px;
  display:flex; align-items:center; justify-content:center; gap:0.6em;
  box-shadow:0 1em 1.6em -0.7em color-mix(in srgb,var(--accent) 70%,transparent); }
.pay-btn svg{ width:1.1em; height:1.1em; }

.act-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.6em; margin-top:1em; }
.act{ border:1px solid var(--rule); border-radius:1em; padding:0.85em 0.3em; text-align:center; }
.act .ai{ width:1.9em; height:1.9em; margin:0 auto 0.5em; border-radius:50%;
  display:grid; place-items:center; background:var(--cream-2); color:var(--aubergine-2); }
.act .ai svg{ width:1em; height:1em; }
.act.spend .ai{ background:#D5E5C9; color:var(--sage-2); }
.act .al{ font-size:0.7em; color:var(--aubergine-2); }

.tx-hd{ display:flex; justify-content:space-between; align-items:baseline; margin:1.2em 0 0.4em; }
.tx-hd .th{ font-family:var(--mono); font-size:0.66em; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); }
.tx-hd .ta{ font-size:0.72em; color:var(--accent-2); }
.tx{ display:flex; align-items:center; gap:0.75em; padding:0.62em 0; border-top:1px solid var(--rule-soft); }
.tx .txi{ width:2.1em; height:2.1em; border-radius:0.6em; background:var(--cream-2); color:var(--aubergine-2);
  display:grid; place-items:center; flex:none; }
.tx .txi svg{ width:0.95em; height:0.95em; }
.tx .txt{ flex:1; min-width:0; }
.tx .txt .tn{ font-family:var(--serif); font-size:0.98em; font-weight:600; line-height:1.1; }
.tx .txt .ts{ font-size:0.64em; color:var(--mute); }
.tx .tv{ font-family:var(--serif); font-weight:600; font-size:1em; }
.tx .tv.minus{ color:var(--aubergine); } .tx .tv.plus{ color:var(--sage-2); }
.tx .tv .u{ font-size:0.62em; color:var(--mute); font-weight:400; }

/* ---------- TOPUP ---------- */
.tp-title{ font-family:var(--serif); font-size:2.4em; line-height:0.95; margin:0.4em 0 0.15em; }
.tp-title em{ color:var(--accent); font-style:italic; display:block; }
.tp-lede{ font-family:var(--serif); font-style:italic; font-size:0.92em; color:var(--aubergine-3);
  line-height:1.3; margin-bottom:1.1em; }
.tp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.7em; }
.tp-tile{ border:1px solid var(--rule); border-radius:1.1em; padding:1.1em 1em; min-height:6.2em;
  display:flex; flex-direction:column; justify-content:space-between; }
.tp-tile.dark{ background:var(--aubergine); border-color:transparent; color:var(--cream); }
.tp-tile .tt-n{ font-family:var(--serif); font-size:1.7em; font-weight:600; line-height:1; }
.tp-tile .tt-n .u{ font-size:0.5em; color:var(--accent); font-style:italic; }
.tp-tile.dark .tt-n .u{ color:var(--amber-soft); }
.tp-tile .tt-s{ font-family:var(--mono); font-size:0.6em; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mute); line-height:1.4; }
.tp-tile.dark .tt-s{ color:var(--cream-3); }
.tp-tile .tt-badge{ align-self:flex-start; font-family:var(--mono); font-size:0.56em; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--amber-soft); }
.tp-tile.own .tt-n{ font-style:italic; color:var(--aubergine); }
.scr-topup{ display:flex; flex-direction:column; }
.scr-topup .scr-body{ flex:1; }
.tp-foot{ padding:0 1.2em 1.2em; }
.tp-bar{ background:#1a0f16; color:var(--cream);
  border-radius:1.1em; padding:0.9em 1.2em; display:flex; align-items:center; gap:0.7em; font-size:0.84em; line-height:1.2; }
.tp-bar .tb-ic{ width:1.7em; height:1.7em; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex:none; }
.tp-bar .tb-ic svg{ width:0.9em; height:0.9em; color:var(--cream); }
.tp-bar b{ font-weight:600; }
.tp-note{ text-align:center; margin-top:0.8em; padding:0 0.4em;
  font-size:0.62em; color:var(--mute); line-height:1.4; }

/* ---------- CASHIER ---------- */
.cs-tabs{ display:flex; gap:0.5em; background:var(--cream-2); border-radius:999px; padding:0.35em; margin-bottom:0.9em; }
.cs-tab{ flex:1; text-align:center; font-weight:600; font-size:0.82em; padding:0.65em; border-radius:999px; color:var(--aubergine-2); }
.cs-tab.on{ background:var(--aubergine); color:var(--cream); }
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.55em; }
.cs-prod{ border:1px solid var(--rule); border-radius:0.9em; padding:0.7em 0.6em; min-height:4.4em;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.cs-prod.sel{ background:var(--aubergine); border-color:transparent; color:var(--cream); }
.cs-prod .cp-n{ font-size:0.82em; font-weight:600; line-height:1.1; }
.cs-prod .cp-p{ font-family:var(--serif); font-size:1.2em; font-weight:600; color:var(--accent-2); }
.cs-prod.sel .cp-p{ color:var(--amber-soft); }
.cs-prod .cp-p .u{ font-size:0.5em; color:var(--mute); font-weight:400; }
.cs-prod.sel .cp-p .u{ color:var(--cream-3); }
.cs-prod .cp-q{ position:absolute; top:0.5em; right:0.5em; width:1.5em; height:1.5em; border-radius:50%;
  background:var(--accent); color:var(--cream); display:grid; place-items:center; font-size:0.72em; font-weight:700; }
.cs-order{ margin-top:0.9em; background:var(--cream-2); border-radius:1em; padding:0.85em 1em;
  display:flex; align-items:center; gap:0.7em; }
.cs-order .co-l{ font-family:var(--mono); font-size:0.58em; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); }
.cs-order .co-n{ font-size:0.86em; font-weight:600; }
.cs-order .co-v{ margin-left:auto; font-family:var(--serif); font-size:1.4em; font-weight:600; }
.cs-order .co-v .u{ font-size:0.5em; color:var(--mute); font-weight:400; }
.cs-order .co-x{ width:1.9em; height:1.9em; border-radius:50%; border:1px solid var(--rule);
  display:grid; place-items:center; color:var(--aubergine-2); flex:none; }
.cs-cam{ margin-top:0.8em; border-radius:1.1em; overflow:hidden; aspect-ratio:16/10; position:relative;
  background:radial-gradient(120% 90% at 50% 40%,#3a2028,#0e0810); display:grid; place-items:center; }
.cs-cam .cam-lbl{ position:absolute; top:0.7em; left:0.9em; font-family:var(--mono); font-size:0.58em;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(250,245,236,0.7); display:flex; align-items:center; gap:0.4em; }
.cs-cam .cam-lbl::before{ content:""; width:0.45em; height:0.45em; border-radius:50%; background:#E7534F; }
.cs-cam .cam-hint{ position:absolute; bottom:0.7em; left:0; right:0; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:0.78em; color:rgba(250,245,236,0.72); }
.scan-frame{ width:34%; aspect-ratio:1; position:relative; }
.scan-frame span{ position:absolute; width:26%; height:26%; border:0.18em solid var(--amber-soft); }
.scan-frame span:nth-child(1){ top:0; left:0; border-right:none; border-bottom:none; }
.scan-frame span:nth-child(2){ top:0; right:0; border-left:none; border-bottom:none; }
.scan-frame span:nth-child(3){ bottom:0; left:0; border-right:none; border-top:none; }
.scan-frame span:nth-child(4){ bottom:0; right:0; border-left:none; border-top:none; }

/* ---------- GUEST SCAN ---------- */
.scr-scan{ background:var(--aubergine); color:var(--cream); }
.qr-wrap{ margin:1.4em 1em 0; border:1px solid rgba(250,245,236,0.16); border-radius:1.4em; padding:1.4em;
  background:#0e0810; }
.qr-code{ width:100%; aspect-ratio:1; border-radius:0.5em; position:relative; overflow:hidden;
  background:#EDE6D8;
  background-image:
    repeating-linear-gradient(90deg,#1a1014 0 6.66%,transparent 0 13.32%),
    repeating-linear-gradient(0deg,#1a1014 0 6.66%,transparent 0 13.32%);
  background-size:15% 100%,100% 15%;
  filter:contrast(1.15); }
.qr-code::before{ content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(26,16,20,0.55) 0 8%,transparent 0 16%); mix-blend-mode:multiply; }
.qr-scanline{ position:absolute; left:8%; right:8%; top:50%; height:0.2em; border-radius:2px;
  background:var(--accent); box-shadow:0 0 1.2em 0.2em color-mix(in srgb,var(--accent) 70%,transparent); z-index:3; }
.qr-corners span{ position:absolute; width:14%; height:14%; border:0.24em solid var(--amber-soft); z-index:3; }
.qr-corners span:nth-child(1){ top:0.7em; left:0.7em; border-right:none; border-bottom:none; border-radius:0.3em 0 0 0; }
.qr-corners span:nth-child(2){ top:0.7em; right:0.7em; border-left:none; border-bottom:none; border-radius:0 0.3em 0 0; }
.qr-corners span:nth-child(3){ bottom:0.7em; left:0.7em; border-right:none; border-top:none; border-radius:0 0 0 0.3em; }
.qr-corners span:nth-child(4){ bottom:0.7em; right:0.7em; border-left:none; border-top:none; border-radius:0 0 0.3em 0; }
.scan-amt{ display:flex; align-items:center; gap:0.7em; justify-content:center; margin-top:1.4em; }
.scan-amt .sa-v{ font-family:var(--serif); font-size:1.4em; font-weight:600; }
.scan-amt .sa-v .u{ font-size:0.6em; color:var(--amber-soft); font-style:italic; }
.scan-amt .sa-s{ font-size:0.74em; color:var(--cream-3); border-left:1px solid rgba(250,245,236,0.2); padding-left:0.7em; }
.scan-title{ text-align:center; font-family:var(--serif); font-size:1.5em; margin-top:0.5em; }
.scan-sub{ text-align:center; font-size:0.78em; color:rgba(250,245,236,0.66); line-height:1.4; margin-top:0.5em;
  padding:0 1.2em; }
.scan-foot{ position:absolute; left:0; right:0; bottom:1.2em; text-align:center;
  font-family:var(--mono); font-size:0.6em; letter-spacing:0.08em; color:rgba(250,245,236,0.45); }

/* ---------- SUCCESS ---------- */
.scr-success{ background:var(--aubergine); color:var(--cream); display:flex; flex-direction:column;
  align-items:center; text-align:center; }
.suc-check{ width:5.4em; height:5.4em; border-radius:50%; background:rgba(250,245,236,0.08);
  display:grid; place-items:center; margin:2.6em auto 0; }
.suc-check .ring{ width:3.9em; height:3.9em; border-radius:50%; background:var(--sage);
  display:grid; place-items:center; box-shadow:0 0.8em 1.6em -0.5em rgba(126,176,105,0.6); }
.suc-check .ring svg{ width:1.9em; height:1.9em; color:#fff; }
.suc-toast{ font-family:var(--serif); font-style:italic; font-size:1.3em; color:var(--amber-soft);
  margin-top:1.2em; line-height:1.15; }
.suc-amt{ font-family:var(--serif); font-size:3.4em; font-weight:600; line-height:1; margin-top:0.2em; }
.suc-amt .u{ font-size:0.42em; font-style:italic; color:var(--amber-soft); }
.suc-where{ font-size:0.86em; color:var(--cream-3); margin-top:0.3em; }
.suc-left{ margin-top:1.4em; display:inline-flex; align-items:center; gap:0.6em;
  background:rgba(250,245,236,0.08); border-radius:999px; padding:0.7em 1.1em; }
.suc-left .sl-l{ font-family:var(--mono); font-size:0.58em; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(250,245,236,0.55); }
.suc-left .sl-v{ font-family:var(--serif); font-style:italic; font-size:1em; }
.suc-btn{ margin-top:auto; margin-bottom:1.4em; width:calc(100% - 3em); background:var(--cream);
  color:var(--aubergine); font-weight:600; font-size:1em; padding:1em; border-radius:999px; text-align:center; }

/* ---------- LIVE DASHBOARD ---------- */
.lv-cards{ display:grid; grid-template-columns:1.35fr 1fr; gap:0.6em; }
.lv-card{ border:1px solid var(--rule); border-radius:1.1em; padding:0.95em 1em; }
.lv-card.rev{ background:var(--aubergine); border-color:transparent; color:var(--cream); }
.lv-card .lc-l{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:0.58em; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); }
.lv-card.rev .lc-l{ color:var(--amber-soft); }
.lv-card .lc-pct{ color:var(--sage-2); font-weight:700; }
.lv-card.rev .lc-pct{ color:var(--sage); }
.lv-card .lc-v{ font-family:var(--serif); font-size:2em; font-weight:600; line-height:1; margin-top:0.35em; }
.lv-card .lc-sub{ font-size:0.6em; color:var(--cream-3); margin-top:0.5em; }
.lv-card.bons .lc-v{ color:var(--aubergine); font-size:1.5em; }
.lv-bons-rows{ font-size:0.62em; }
.lv-bons-rows div{ display:flex; justify-content:space-between; color:var(--aubergine-2); padding:0.15em 0; }
.lv-bons-rows b{ font-family:var(--serif); font-size:1.5em; color:var(--accent-2); }
.lv-bons-rows .circ{ color:var(--accent-2); }
.lv-mesh{ margin-top:0.6em; background:#D5E5C9; color:var(--sage-2); border-radius:0.8em;
  padding:0.6em 0.9em; display:flex; align-items:center; gap:0.5em; font-size:0.72em; font-weight:600; }
.lv-mesh::before{ content:""; width:0.5em; height:0.5em; border-radius:50%; background:var(--sage-2); }
.lv-mesh .mesh-r{ margin-left:auto; font-family:var(--mono); font-size:0.72em; letter-spacing:0.1em;
  text-transform:uppercase; opacity:0.7; }
.lv-chart{ margin-top:0.7em; border:1px solid var(--rule); border-radius:1.1em; padding:0.9em 1em; }
.lv-chart .ch-hd{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:0.58em; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); }
.lv-chart .ch-hd em{ font-family:var(--serif); font-style:italic; font-size:1.4em; letter-spacing:0; text-transform:none; color:var(--aubergine); }
.lv-bars{ display:flex; align-items:flex-end; gap:0.5em; height:4.2em; margin-top:0.7em; }
.lv-bars .bar{ flex:1; background:var(--accent); border-radius:0.3em 0.3em 0 0; }
.lv-bars .bar.soft{ background:var(--amber-soft); }
.lv-bars .bar.hatch{ background:repeating-linear-gradient(45deg,var(--amber-soft) 0 3px,transparent 0 6px);
  border:1px solid var(--amber-soft); }
.lv-xlabels{ display:flex; gap:0.5em; margin-top:0.4em; }
.lv-xlabels span{ flex:1; text-align:center; font-family:var(--mono); font-size:0.52em; color:var(--mute); }
.lv-stands{ margin-top:0.7em; border:1px solid var(--rule); border-radius:1.1em; padding:0.9em 1em; }
.lv-stands .st-t{ font-family:var(--mono); font-size:0.58em; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:0.6em; }
.lv-stand{ display:flex; align-items:center; gap:0.6em; padding:0.32em 0; }
.lv-stand .st-i{ font-family:var(--serif); font-style:italic; font-size:0.8em; color:var(--mute); width:1em; }
.lv-stand .st-n{ font-size:0.78em; width:5em; }
.lv-stand .st-bar{ flex:1; height:0.5em; border-radius:999px; background:var(--cream-3); overflow:hidden; }
.lv-stand .st-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--amber-soft)); }
.lv-stand .st-v{ font-family:var(--serif); font-size:0.82em; font-weight:600; color:var(--accent-2); width:3.4em; text-align:right; }
.lv-foot{ display:grid; grid-template-columns:1fr 1fr; gap:0.6em; margin-top:0.7em; }
.lv-foot .lf{ border:1px solid var(--rule); border-radius:1em; padding:0.7em 0.9em; }
.lv-foot .lf-l{ font-family:var(--mono); font-size:0.54em; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); }
.lv-foot .lf-v{ font-family:var(--serif); font-size:1.15em; font-weight:600; margin-top:0.2em; }
.lv-foot .lf-s{ font-size:0.58em; color:var(--mute); }
.lv-btn{ margin-top:0.7em; background:var(--accent); color:var(--cream); text-align:center; font-weight:600;
  font-size:0.92em; padding:0.95em; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:0.5em;
  box-shadow:0 1em 1.6em -0.7em color-mix(in srgb,var(--accent) 70%,transparent); }
.lv-btn svg{ width:1em; height:1em; }

/* scale phones inside their host slots */
.hero-phone .pf{ width:min(300px,78%); transform:rotate(3deg);
  filter:drop-shadow(0 40px 60px rgba(61,30,46,0.28)); }
.role-shot .pf{ width:min(290px,80%); transform:rotate(-2.5deg); }
.role-panel.r-2 .role-shot .pf{ transform:rotate(2.5deg); }
.step .shot .pf{ width:100%; }