/* Kunden-App: Stämps-Look (Verlauf, Karte im Hochformat, runde Stempel-Taste) in Frachtgut-Farben */
body.kunde{background:linear-gradient(180deg,#005d5d 0%,#005d5d 30%,var(--petrol-500) 100%) fixed;color:#fff}
.kunde .app{padding:0 0 130px;max-width:480px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 6px}
.topbar .brand{height:44px;width:auto}
.burger{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:12px}
.burger svg{width:30px;height:30px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;fill:none}
.burger:focus-visible,.fab:focus-visible,.bar2 a:focus-visible{outline:3px solid var(--mustard)}
.page{padding:8px 20px 0}
.hello{font:600 34px/1.05 'Outfit',sans-serif;color:#fff}
.sub{color:var(--mint-200);font-weight:700;margin-top:4px}

/* Karte */
.loyalty{width:min(300px,80%);margin:22px auto 0;border-radius:22px;background:var(--mint-50);color:var(--charcoal-900);overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.35)}
.loyalty .head{background:#005d5d;padding:6px 10px 12px;display:flex;justify-content:center;position:relative}
.loyalty .head img{width:58%;max-width:200px;height:auto;display:block}
.loyalty .head::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:7px;background:radial-gradient(circle at 5px 7px,#fbf6ea 4.5px,transparent 5px) 0 0/10px 7px}
.loyalty .body{padding:14px 14px 18px}
.loyalty .tag{font:600 13px 'Outfit';letter-spacing:.12em;text-transform:uppercase;color:var(--petrol-700);text-align:center;margin-bottom:10px}
.loyalty .grid{gap:8px}
.loyalty .st{background:#fff;border-radius:16px}
.loyalty .st.on{background:#d9efe9}
.loyalty .count{margin-top:12px;text-align:center;font:600 20px 'Outfit';color:var(--petrol-700)}
.hint{margin:18px 20px 0;text-align:center;color:var(--mint-200);font-weight:800}
.hint b{color:#fff}

/* Belohnungen */
.panel{margin:16px 20px 0;background:#fff;color:var(--charcoal-900);border-radius:22px;padding:16px;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.panel.gold{background:#fff8e6;border:2px solid var(--mustard)}
.panel h2{font-size:18px;margin-bottom:10px}
.rw{display:flex;gap:12px;align-items:center;padding:6px 0}
.rw .muted{color:var(--charcoal-500)}
.gift{width:34px;height:34px;flex:none;border-radius:50%;background:var(--mustard);display:grid;place-items:center}
.gift svg{width:18px;height:18px;stroke:var(--charcoal-900);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Untere Leiste mit runder Mitte */
.bar2{position:fixed;left:0;right:0;bottom:0;background:var(--mint-400);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);z-index:10}
.bar2>div{display:grid;grid-template-columns:1fr 112px 1fr;width:100%;max-width:480px;align-items:end;height:74px}
.bar2 a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 12px;color:var(--petrol-900);font-weight:800;font-size:14px;text-decoration:none;cursor:pointer;position:relative}
.bar2 a svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bar2 a.on{color:#fff}
.bar2 a.on::after{content:'';position:absolute;left:30%;right:30%;bottom:5px;height:3px;border-radius:2px;background:#fff}
.fab{justify-self:center;align-self:start;margin-top:-34px;width:96px;height:96px;border-radius:50%;border:0;background:var(--ketchup);box-shadow:0 8px 20px rgba(0,0,0,.3);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .1s}
.fab:active{transform:scale(.95)}
.fab svg{width:50px;height:50px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tabbadge{position:absolute;top:6px;left:calc(50% + 8px);width:12px;height:12px;border-radius:50%;background:var(--ketchup);display:block}
.tabbadge[hidden]{display:none}

/* QR-Overlay */
.qr-bg{position:fixed;inset:0;background:rgba(2,63,62,.88);z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}
.qr-card{width:100%;max-width:360px;background:#fff;color:var(--charcoal-900);border-radius:28px;padding:22px 20px;text-align:center;position:relative}
.qr-card h2{margin-bottom:4px}
.qr-card .qrbox{border:0;padding:8px;margin:14px auto 10px;box-shadow:none;max-width:280px}
.qr-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:2px solid var(--mint-200);background:#fff;font:600 24px/1 'Outfit';color:var(--petrol-700);cursor:pointer}

/* Menü von rechts */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(78%,340px);background:var(--mint-400);color:var(--petrol-900);padding:70px 24px 24px;display:flex;flex-direction:column;gap:6px;box-shadow:-10px 0 30px rgba(0,0,0,.3);transform:translateX(0);animation:slidein .25s var(--e,ease)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer button.item{display:flex;align-items:center;gap:14px;border:0;background:transparent;padding:14px 4px;font:600 22px 'Outfit',sans-serif;color:var(--petrol-900);text-align:left;cursor:pointer}
.drawer button.item svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.drawer .x{position:absolute;right:16px;top:16px;border:0;background:transparent;font:600 36px/1 'Outfit';color:var(--petrol-900);cursor:pointer;width:44px;height:44px}
.drawer .code{margin-top:auto;font:800 15px 'Outfit';opacity:.7}

/* Unterseiten (Historie, Über, Namen) */
.sheet-page{background:var(--mint-50);color:var(--charcoal-900);border-radius:26px 26px 0 0;margin-top:16px;padding:22px 20px 40px;min-height:60vh}
.sheet-page h2{margin-bottom:12px}
.hist{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--mint-200)}
.kunde a.link{color:var(--petrol-700);font-weight:800}
.kunde .btn.light{background:#fff;color:var(--petrol-700);box-shadow:0 5px 0 var(--mint-200)}
.kunde .err{color:#ffd0c8}
.sheet-page .err{color:var(--ketchup)}

/* Anmelde-Bildschirm */
.welcome{text-align:center;padding:26px 24px}
.welcome img.statue{height:200px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.3))}
.welcome h1{font-size:44px;margin-top:6px}
.welcome p{color:var(--mint-200);margin:6px 0 18px;font-size:17px}
.welcome input{text-align:center}
.bar2[hidden]{display:none}

/* Papier-Stempelkarte: runde Felder, Statue als schiefer Stempelabdruck */
.loyalty .body{background:#fbf6ea;background-image:radial-gradient(rgba(3,94,92,.05) 1px,transparent 1.2px);background-size:7px 7px}
.circles{--cols:4;display:flex;flex-direction:column;gap:14px;padding:6px 2px 2px}
.srow{display:flex;justify-content:center;gap:10px}
.srow>.slot2,.srow>.slotwrap{flex:none;width:calc((100% - (var(--cols) - 1) * 10px) / var(--cols))}
.circles[style*="--cols:5"] .slot2 .num,.circles[style*="--cols:6"] .slot2 .num{font-size:13px}
.circles[style*="--cols:5"] .slot2.goal .num,.circles[style*="--cols:6"] .slot2.goal .num{font-size:9.5px;letter-spacing:.04em}
.slot2{position:relative;aspect-ratio:1;border-radius:50%;border:2.5px solid var(--petrol-700);display:grid;place-items:center}
.slot2 .num{font:600 15px 'Outfit',sans-serif;color:var(--petrol-700);opacity:.5;letter-spacing:.02em}
.slot2.goal{border-color:var(--ketchup);border-style:dashed}
.slot2.goal .num{color:var(--ketchup);opacity:.9;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.slot2.mile{border-color:var(--mustard);border-width:3px}
.slot2 .ink{position:absolute;width:128%;height:128%;left:-14%;top:-22%;object-fit:contain;pointer-events:none;z-index:1;
  transform:translate(var(--x),var(--y)) rotate(var(--r));filter:drop-shadow(0 2px 1px rgba(38,40,42,.25))}
.slot2 .ms{z-index:2}
.slot2 .ink.pop{animation:stampdown .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes stampdown{0%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.9);opacity:0}60%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.slot2 .ink.pop{animation:none}}

/* Feiern: Konfetti bei voller Karte, kleiner Funkenkranz beim Meilenstein */
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.slot2.celebrate{animation:milepop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes milepop{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(233,185,73,.35)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(233,185,73,0)}}
@media(prefers-reduced-motion:reduce){.slot2.celebrate{animation:none}}

/* Konto: Anmelden, Passwort vergessen, Karte sichern */
.welcome.auth h1{font-size:32px}
.welcome.auth p{margin:0 auto;max-width:320px}
.kunde .linkbtn{display:block;margin:14px auto 0;background:none;border:0;color:var(--mint-200);font:600 15px 'Outfit',sans-serif;text-decoration:underline;cursor:pointer;padding:8px}
.kunde .linkbtn.dark{color:var(--petrol-700)}
.panel.secure{display:flex;gap:12px;align-items:center;width:calc(100% - 40px);text-align:left;border:0;font:inherit;cursor:pointer;margin-bottom:6px}
.panel.secure .gift{background:var(--mint-50)}
.panel.secure .gift svg{stroke:var(--petrol-700)}
.panel.secure:focus-visible{outline:3px solid var(--mustard)}
.welcome.auth label{color:var(--mint-200)}
.sheet-page label{color:var(--petrol-700)}
/* Ab 5 Feldern pro Reihe wird die Karte breiter, damit die Kreise groß bleiben */
.loyalty:has(.circles[style*="--cols:5"]),.loyalty:has(.circles[style*="--cols:6"]){width:min(350px,92%)}
.loyalty .circles[style*="--cols:5"] .srow,.loyalty .circles[style*="--cols:6"] .srow{gap:8px}
.loyalty .circles[style*="--cols:5"] .srow>.slot2,.loyalty .circles[style*="--cols:6"] .srow>.slot2{width:calc((100% - (var(--cols) - 1) * 8px) / var(--cols))}
.panel.homehint{position:relative;padding-right:40px}
.panel.homehint .x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:none;font-size:22px;color:var(--charcoal-500);cursor:pointer;border-radius:50%}
.panel.homehint .gift{background:var(--mint-50)}
.panel.homehint .gift svg{stroke:var(--petrol-700)}
/* Belohnung mit Kassen-Code: antippbar */
.reward-btn{width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:14px}
.reward-btn:active{background:rgba(233,185,73,.18)}
.reward-btn:focus-visible{outline:3px solid var(--mustard)}
.reward-btn .grow{flex:1;min-width:0}
.reward-btn .qr-ic svg{width:26px;height:26px;stroke:var(--petrol-700);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Letztes Feld: Kurztext oder Geschenk-Symbol */
.slot2.goal .num{white-space:nowrap;text-align:center;line-height:1}
.slot2.goal .num svg{width:44%;height:auto;min-width:18px;stroke:var(--ketchup);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto}
.slot2.goal .num:has(svg){width:100%;display:grid;place-items:center}
.circles .slot2.goal .num.short{font-size:15px;letter-spacing:0;font-weight:700}

/* Kassen-Code: lebendige Ansicht gegen Screenshots */
.qr-card.live{animation:livepulse 2.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 4px var(--mustard),0 20px 50px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 4px var(--mint-400),0 20px 50px rgba(0,0,0,.35)}}
.road{position:relative;height:50px;margin:4px 0 0;border-bottom:3px dashed var(--mint-200);overflow:hidden}
.road .truck{position:absolute;bottom:1px;left:0;width:86px;height:auto;animation:drive 4.5s linear infinite}
/* Truck fährt von links herein und rechts hinaus, leicht wippend wie auf der Straße */
@keyframes drive{0%{transform:translate(-90px,0)}25%{transform:translate(calc(var(--w,260px) * .25 - 45px),-1px)}50%{transform:translate(calc(var(--w,260px) * .5 - 43px),0)}75%{transform:translate(calc(var(--w,260px) * .75 - 41px),-1px)}100%{transform:translate(var(--w,260px),0)}}
.qr-card .clock{font:700 17px 'Outfit',sans-serif;color:var(--petrol-700);margin-top:8px;font-variant-numeric:tabular-nums}
.timebar{height:6px;background:var(--mint-50);border-radius:6px;margin:8px 10px 4px;overflow:hidden}
.timebar span{display:block;height:100%;background:var(--ketchup);border-radius:6px;transition:width 1s linear}
.qr-card p.small{font-size:12px;margin-top:6px}
@media(prefers-reduced-motion:reduce){.road .truck,.qr-card.live{animation:none}.road .truck{left:calc(50% - 43px)}}