/* Customer visual system, based on the approved Grünstoff mobile sketches.
   Brand colors are scoped by app.js; all balances and goals remain server data. */
:root{--cream:#f8f5ec;--paper:#fffdf8;--ink:#172b21;--muted:#576357;--line:#e4e5d9;--sage:#e7eddc;--display:Georgia,'Times New Roman',serif}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--cream)}
.shell{max-width:560px;margin-inline:auto;background:var(--cream)}
header{height:calc(62px + env(safe-area-inset-top));padding-inline:22px;border:0;background:var(--cream)}
.wordmark{font-family:var(--display);font-weight:700;font-size:27px!important;letter-spacing:-1px}.wordmark span{font-size:8px;margin-left:2px}
.test-tag{font-size:10px;font-weight:400;background:transparent;border:0;border-radius:0;padding:0;color:var(--muted)}
.avatar{background:transparent;color:var(--green);border:1px solid var(--line);width:38px;height:38px;font-size:14px}
main{padding:16px 22px 32px;max-width:560px;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
h1,h2,.business h3,.offer h3,.reward h3,.reservation h3{font-family:var(--display);font-weight:700;color:var(--green);letter-spacing:-.8px;text-wrap:pretty}
h1,.intro.compact h1{font-size:clamp(31px,8.2vw,39px);line-height:1.08;letter-spacing:-1.3px}
h2{font-size:27px;line-height:1.16}h3{font-size:20px;line-height:1.2}
.intro{margin-bottom:26px;align-items:flex-start}.intro .eyebrow{display:none}.intro p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:32ch}.intro>.btn{border-radius:50%;min-width:42px;min-height:42px;padding:10px;margin-top:2px}
.btn{border-radius:12px;min-height:49px;padding:12px 17px;background:var(--green);font-size:15px;font-weight:600;transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.btn svg{width:21px;height:21px}.btn.light{background:transparent;border:1px solid var(--line);color:var(--green)}.btn.soft{background:var(--sage);color:var(--green)}
button:disabled{opacity:.58}button:active:not(:disabled){transform:scale(.98)}.scan-float:active{transform:translateX(-50%) scale(.97)}
.text-btn{font-size:13px;min-height:44px;display:inline-flex;gap:7px;align-items:center;color:var(--green)}.text-btn svg{width:17px;height:17px}
.grid{grid-template-columns:1fr;gap:24px}.business{border:0;border-radius:15px;background:var(--paper);overflow:hidden;box-shadow:none;transition:none;--green:var(--business-accent,#123f2d)}.business:hover{transform:none}
.image-button{height:auto;aspect-ratio:1.65;background:var(--sage)}.image-button img{display:block;object-fit:cover;object-position:center;transition:none}.business-body{padding:18px 19px 20px}
.business h3{font-size:27px;font-weight:700;line-height:1.14;letter-spacing:-.8px}.business-top{align-items:center}.heart{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.heart svg{width:22px;height:22px}
.business p.business-place{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.45;margin:10px 0 16px}.business-place svg{width:16px;height:16px}
.business-logo{display:block;width:auto;max-width:165px;height:52px;object-fit:contain;object-position:left;margin-bottom:9px}.business-logo+h3{font-size:22px}
.mini-track{height:5px;border-radius:5px;overflow:hidden;background:var(--sage);gap:0;margin:14px 0 10px}.mini-track .filled{height:5px;background:var(--green);border-radius:5px}
.card-meta{font-size:13px;line-height:1.4;gap:7px;align-items:baseline;color:var(--muted)}.card-meta strong{font-family:var(--display);font-size:16px;color:var(--green);font-weight:700}.business-open{margin-top:17px}
.discover-link{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:18px 0;margin:8px 0 4px;color:var(--green);background:transparent;font-size:14px;min-height:48px}.discover-link svg{width:18px;height:18px}
.section-head{margin:27px 0 15px;align-items:baseline}.section-head h2{font-size:25px}.section-head .text-btn{white-space:nowrap;font-size:12px}
.quiet-empty{display:flex;gap:13px;align-items:center;padding:16px 0;color:var(--green)}.quiet-empty>svg{width:26px;height:26px}.quiet-empty p{font-size:14px;line-height:1.6}.quiet-empty span{color:var(--muted)}
.booking-reminder{width:100%;display:flex;gap:10px;align-items:center;text-align:left;background:var(--sage);border-radius:10px;padding:14px;font-size:14px;color:var(--green);margin:0 0 22px}.booking-reminder span{flex:1}
.stats-strip{margin-top:24px;padding:22px 0}.stat strong{font-family:var(--display);font-size:27px;font-weight:700}.stat span{font-size:11px;line-height:1.4;display:block;margin-top:4px}.stat{padding:0 8px}
.business-view header .wordmark{font-family:inherit;font-size:15px!important;letter-spacing:0;font-weight:500}.business-view header .test-tag{display:none}.business-view header{height:calc(52px + env(safe-area-inset-top))}
main[data-page=business]{padding-top:0}.back{min-height:40px;padding:7px 0;align-items:center;font-size:13px;gap:6px}.back svg{width:17px;height:17px}
.detail-heading{align-items:center;margin:9px 0 20px;gap:12px}.detail-heading>div{flex:1;min-width:0}.detail-heading h1{font-family:var(--display);font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-1px;overflow-wrap:anywhere}.detail-heading .business-logo{height:58px;max-width:210px;margin:0 0 8px}.detail-heading:has(.business-logo) h1{font-size:20px}
.detail-cover{display:block;width:calc(100% + 44px);max-width:none;margin-inline:-22px;aspect-ratio:1.65;height:auto;object-fit:cover;border-radius:0}
.loyalty{position:relative;border:0!important;margin:-16px 0 24px;padding:23px 17px 20px;background:var(--paper);border-radius:17px;isolation:isolate}
.loyalty h2{font-size:26px;line-height:1.15;text-align:center;letter-spacing:-.9px}.stamps{grid-template-columns:repeat(var(--stamp-columns,4),minmax(0,1fr));gap:12px;max-width:330px;margin:23px auto 17px}
.stamp{background:transparent;border:1px solid #c9d5b7;color:#acbc94;border-radius:50%;aspect-ratio:1;min-width:0;max-height:70px;transform:none}.stamp svg{width:56%;height:56%;stroke-width:1.1}.stamp.filled{background:var(--green);border:1px solid var(--green);color:var(--paper);transform:none}.stamp img{border-radius:0;width:80%;height:80%}
.loyalty-count{text-align:center;display:grid;gap:4px;margin:14px 0 21px}.loyalty-count strong{font-family:var(--display);font-size:19px;font-weight:700;color:var(--green);letter-spacing:-.3px}.loyalty-count span{font-size:13px;line-height:1.45;color:var(--muted)}
.card-actions{gap:9px;margin-top:18px}.card-actions .btn{font-size:14px;padding:12px 10px;min-height:49px}.card-actions .btn.light{background:var(--sage);border:0;color:var(--green)}
.stamp.just-earned{animation:stamp-arrive 240ms cubic-bezier(.23,1,.32,1) both;outline:2px solid var(--olive);outline-offset:4px}
@keyframes stamp-arrive{from{transform:scale(1.14) rotate(-8deg);opacity:.35}to{transform:scale(1) rotate(0);opacity:1}}
.info-box{border:0;border-radius:14px;background:var(--paper);padding:20px;margin:18px 0}.info-box p{font-size:14px;line-height:1.6;color:var(--muted)}.reward{gap:15px}.reward>svg{height:31px;width:31px;color:var(--green)}.reward-box .eyebrow{font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}.reward-box h3{font-size:22px}.reward-box>.btn{margin-top:8px}.reward-box p{margin:12px 0}
.branch strong{font-size:16px}.branch p{margin:6px 0}.note{font-size:12px;line-height:1.6}.activity-row{gap:13px;font-size:16px;align-items:flex-start}.activity-row>div{min-width:0;flex:1}.activity-row small{font-size:12px;line-height:1.6}.activity-row .status{white-space:nowrap;flex-shrink:0;margin:0}.receipt-details summary{font-size:12px;padding:7px 0}.receipt-details p{font-size:12px;overflow-wrap:anywhere}.status{font-size:12px;letter-spacing:0}.status-pending{background:#fff1d5;color:#76500e}
.offer-grid{grid-template-columns:1fr;gap:22px}.offer{display:block;border:0;border-radius:14px;background:var(--paper)}.offer img{width:100%;height:auto;aspect-ratio:1.7;display:block;object-fit:cover}.offer-copy{padding:19px}.offer-copy h3{font-size:27px;margin:9px 0}.offer-copy small{font-size:12px;color:var(--muted)}.offer-copy p{font-size:13px;margin-top:10px}.price{font-size:24px;font-family:var(--display);font-weight:700}.price del{font-family:inherit;font-size:15px}
.searchbar{margin:22px 0 12px;grid-template-columns:minmax(0,1fr) auto}.searchbar input{grid-column:1/-1}.searchbar .btn{font-size:14px}.field{font-size:16px;min-height:49px;border-radius:11px;border-color:var(--line);background:var(--paper)}.searchbar select{min-width:130px}.empty{border:0;border-radius:0;background:transparent;padding:44px 12px}.empty h2{font-size:27px}.empty p{font-size:14px;line-height:1.6}.empty .btn{margin-top:4px}
.reservation{border:0;border-radius:14px;padding:22px;background:var(--paper)}.reservation h3{font-size:26px}.reservation p{font-size:14px;line-height:1.6}.pickup-code{border:0;background:var(--sage);padding:24px 16px}.pickup-code strong{font-size:32px}
.app-nav{background:var(--paper);border-top:1px solid var(--line)}.bottom{height:74px;max-width:560px;padding:8px 9px}.bottom .nav-item{color:var(--muted);font-size:11px;gap:6px;min-height:52px;font-weight:400;padding:6px 3px}.bottom .nav-item.active{color:var(--green);font-weight:600}.bottom .nav-item svg{width:22px;height:22px;stroke-width:1.5}.bottom .scan-gap{width:62px}
.scan-float{height:55px;width:55px;border-radius:50%;border:5px solid var(--paper);box-shadow:none;bottom:calc(26px + env(safe-area-inset-bottom))}.scan-float svg{height:24px;width:24px}.scan-float:after{content:'Scannen';position:absolute;top:48px;color:var(--green);font-family:Arial,sans-serif;font-size:10px;font-weight:400}
dialog{border-radius:19px;background:var(--paper);max-width:520px}.dialog-head{font-size:12px;letter-spacing:.1px}.dialog-head button{min-height:40px;min-width:40px}.dialog-head{padding:13px 19px}.dialog-head+div{padding:23px}#modal-body h2{font-size:30px;line-height:1.12}#modal-body img.cover{height:auto;aspect-ratio:1.55;border-radius:11px}#modal-body p{line-height:1.6}.scanner-mode .btn{font-family:inherit}.qr-display{padding:12px}.toast{font-size:14px;line-height:1.5}
.auth-view{padding-top:12px}.auth-view h1{font-size:39px;line-height:1.12;font-weight:700}.auth-view .eyebrow{font-size:10px;letter-spacing:1px}.auth-view form{margin:27px 0 15px}.auth-view .note{font-size:12px}
@media(min-width:700px){body{background:#eceee6}.shell{border-inline:1px solid var(--line)}main{padding-inline:28px}.detail-cover{width:calc(100% + 56px);margin-inline:-28px}.image-button{aspect-ratio:1.8}.favorites-grid{gap:27px}}
@media(max-width:360px){main{padding-inline:17px}header{padding-inline:17px}.detail-cover{width:calc(100% + 34px);margin-inline:-17px}.intro.compact h1{font-size:31px}.detail-heading h1{font-size:32px}.loyalty{padding-inline:12px}.stamps{gap:10px}.card-actions .btn{font-size:13px}.section-head h2{font-size:23px}.section-head .text-btn{font-size:11px}.business-body{padding:16px}.activity-row{flex-wrap:wrap}.test-tag{font-size:9px}}
@media(hover:hover) and (pointer:fine){.btn:not(:disabled):hover{filter:brightness(.96)}.business a:hover{text-decoration:underline;text-underline-offset:4px}}
@media(prefers-reduced-motion:reduce){.stamp.just-earned{animation:none}button:active:not(:disabled){transform:none}.scan-float:active{transform:translateX(-50%)}.btn{transition:none}}

/* Quiet botanical dividers give each customer section a clear beginning. */
main>.section-head{position:relative;margin-top:30px;padding-top:30px;gap:12px;flex-wrap:wrap}
main>.section-head::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--green);opacity:.2}
main>.section-head::after{content:'';position:absolute;top:-5px;left:calc(50% - 6px);width:12px;height:10px;border:1px solid var(--green);border-radius:10px 1px 10px 1px;transform:rotate(-25deg);background:var(--cream);box-shadow:0 0 0 7px var(--cream);opacity:.65;pointer-events:none}
main[data-page=business]>.loyalty{margin-bottom:32px}
main[data-page=business]>.info-box:not(.reward-box){border-top:1px solid var(--line);padding-top:23px;margin-block:24px}
main[data-page=business]>.info-box h3{margin-bottom:15px}
main[data-page=business] .branch+.branch{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
main>.section-head h2{margin:0}
main>.section-head .text-btn{margin-left:auto}

main[data-page=home]>.stats-strip{border-top:1px solid #b8c3ad;margin-top:30px;padding-top:25px}
main[data-page=home] .favorites-grid>.business+.business{border-top:1px solid #b8c3ad}

/* One section rhythm throughout the customer app. Keep scanner and QR areas clear. */
main>.intro{position:relative;padding-bottom:27px;margin-bottom:27px}
main>.intro::before,main>.info-box::before{content:'';position:absolute;left:0;right:0;height:1px;background:var(--green);opacity:.2;pointer-events:none}
main>.intro::before{bottom:0}
main>.intro::after,main>.info-box::after{content:'';position:absolute;left:calc(50% - 6px);width:12px;height:10px;border:1px solid var(--green);border-radius:10px 1px 10px 1px;transform:rotate(-25deg);background:var(--cream);box-shadow:0 0 0 7px var(--cream);opacity:.65;pointer-events:none}
main>.intro::after{bottom:-5px}
main>.info-box{position:relative;margin-top:40px;margin-bottom:24px}
main>.info-box::before{top:-20px}
main>.info-box::after{top:-25px}
main>.intro+.info-box{margin-top:0}
main>.intro+.info-box::before,main>.intro+.info-box::after,main>.section-head+.info-box::before,main>.section-head+.info-box::after{content:none}
main[data-page=business]>.info-box:not(.reward-box){margin-top:40px;border-top:0}
main[data-page=business]>.section-head+.info-box{margin-top:0}
main .activity-row+.activity-row,main .profile-row+.profile-row{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
main>.reservation+.reservation{border-top:1px solid var(--line);margin-top:24px}
main>.chips{margin-bottom:25px;padding-bottom:18px;border-bottom:1px solid var(--line)}
main .grid,main .offer-grid{row-gap:26px}
main>.note:last-child{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.auth-view form{border-top:1px solid var(--line);padding-top:24px}
#modal-body>.info-box+.info-box{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}