.customer-dashboard{max-width:880px;margin:auto;padding-top:62px}.dashboard-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}.dashboard-heading h1{font-size:clamp(48px,7vw,76px);margin:0}.dashboard-heading>p{margin:0 0 9px;color:var(--muted);font-size:14px;text-align:right}
.loyalty-card{position:relative;overflow:hidden;min-height:570px;padding:42px;border:1px solid rgba(16,35,31,.12);border-radius:28px;background:#f1e9d8;color:#14372e;box-shadow:0 28px 75px rgba(30,45,39,.18)}.loyalty-card:before{content:"";position:absolute;right:-80px;top:-95px;width:310px;height:310px;border:65px solid rgba(21,94,75,.07);border-radius:50%}.loyalty-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:linear-gradient(90deg,#155e4b 0 62%,#d4af37 62%)}
.loyalty-top,.loyalty-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px}.loyalty-brand{font:800 28px/.82 'Manrope',Arial,sans-serif;letter-spacing:-.06em}.loyalty-brand small{display:block;margin-top:10px;font-size:8px;letter-spacing:.22em}.card-number{text-align:right;font-size:9px;font-weight:700;letter-spacing:.16em}.card-number small{color:#6e7d76;font-size:8px}
.loyalty-message{position:absolute;z-index:1;right:42px;top:128px;text-align:right}.loyalty-message span{color:#155e4b;font-size:8px;font-weight:800;letter-spacing:.2em}.loyalty-message h2{margin:7px 0 0;font:600 30px/1.08 'Manrope',Arial,sans-serif;letter-spacing:-.04em}
.customer-stamps{position:relative;z-index:2;width:440px;grid-template-columns:repeat(5,72px);gap:16px;margin:72px 0 40px}.customer-stamps i{display:grid;place-items:center;width:72px;height:72px;aspect-ratio:1;border:1.5px solid rgba(20,55,46,.28);border-radius:50%;color:rgba(20,55,46,.38);background:rgba(255,255,255,.2);font-style:normal;transform:none}.customer-stamps i small{font:600 10px 'DM Sans',Arial,sans-serif}.customer-stamps i.stamped{border:0;background:#155e4b;color:#f1e9d8;box-shadow:inset 0 0 0 5px #155e4b,inset 0 0 0 6px rgba(241,233,216,.5);transform:rotate(-7deg)}.customer-stamps i.stamped b{font:500 27px serif}.customer-stamps i.reward-stamp:not(.stamped){border:1.5px solid #d4af37;color:#9a7b16}.customer-stamps i.reward-stamp small{font-size:8px;letter-spacing:.08em}
.loyalty-bottom{align-items:end}.reward-copy span,.reward-copy strong,.reward-copy small{display:block}.reward-copy span{margin-bottom:5px;color:#155e4b;font-size:9px;font-weight:800;letter-spacing:.18em}.reward-copy strong{font:700 22px 'Manrope',Arial,sans-serif}.reward-copy small{color:#6e7d76;font-size:10px}.loyalty-qr{padding:9px 9px 6px;border-radius:14px;background:#fffdf8;text-align:center;box-shadow:0 10px 25px rgba(20,55,46,.1)}.loyalty-qr #qrcode{padding:2px;background:#fff}.loyalty-qr img,.loyalty-qr canvas{display:block;width:112px!important;height:112px!important}.loyalty-qr>span{display:block;margin-top:6px;font-size:7px;font-weight:800;letter-spacing:.1em}
.wallet-area{text-align:center;margin:22px 0 15px}.wallet-button{display:inline-flex;align-items:center;gap:10px;border-radius:11px;background:#000;color:#fff;padding:14px 21px;font-size:16px;text-decoration:none}.wallet-button span{font-size:22px}.save-hint{display:inline-flex;align-items:center;gap:9px;margin:0!important;color:var(--muted);font-size:11px!important}.save-hint>span{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:50%}
@media(max-width:700px){.customer-dashboard{padding-top:38px}.dashboard-heading{display:block;margin-bottom:24px}.dashboard-heading h1{font-size:50px}.dashboard-heading>p{margin-top:18px;text-align:left}.loyalty-card{min-height:0;padding:25px 22px 27px;border-radius:22px}.loyalty-brand{font-size:22px}.loyalty-message{position:relative;right:auto;top:auto;margin:40px 0 25px;text-align:left}.loyalty-message h2{font-size:28px}.customer-stamps{width:100%;grid-template-columns:repeat(5,1fr);gap:9px;margin:0 0 30px}.customer-stamps i{width:auto;height:auto;aspect-ratio:1}.customer-stamps i.stamped b{font-size:21px}.loyalty-bottom{align-items:end}.reward-copy strong{font-size:18px}.loyalty-qr img,.loyalty-qr canvas{width:92px!important;height:92px!important}.save-hint{align-items:flex-start;text-align:left}.card-number{font-size:8px}}
@media(max-width:380px){.loyalty-card{padding-inline:17px}.customer-stamps{gap:6px}.loyalty-bottom{gap:10px}.reward-copy strong{font-size:16px}.loyalty-qr img,.loyalty-qr canvas{width:82px!important;height:82px!important}}
.customer-stamps i.stamped:has(img){padding:0;overflow:hidden;border:0;background:#f5dc00;box-shadow:0 5px 14px rgba(99,33,24,.18);transform:rotate(-6deg)}.customer-stamps i.stamped img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.save-card-panel{position:relative;margin:38px 0 10px;padding:30px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.35)}.save-card-panel>div:first-child{max-width:570px}.save-card-panel h2{margin:2px 0 8px;font:700 28px 'Manrope',Arial,sans-serif;letter-spacing:-.04em}.save-card-panel p{color:var(--muted);font-size:13px}.install-card-button{margin-top:12px}.install-card-button span{font-size:18px}.install-help{margin-top:22px;padding:20px;border-radius:15px;background:var(--mint)}.install-help b{font:700 16px 'Manrope',Arial,sans-serif}.install-help p{color:var(--ink)}.install-help .button{padding:10px 16px}.recovery-card{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.recovery-card summary{cursor:pointer;font-size:12px;font-weight:700}.recovery-content{display:flex;align-items:center;gap:24px;padding-top:20px}.recovery-content #recovery-qrcode{flex:0 0 auto;padding:9px;border-radius:12px;background:white}.recovery-content #recovery-qrcode img,.recovery-content #recovery-qrcode canvas{display:block;width:150px!important;height:150px!important}.recovery-content b{font:700 17px 'Manrope',Arial,sans-serif}.recovery-content a{color:var(--green);font-size:12px;font-weight:700}@media(max-width:600px){.save-card-panel{padding:22px}.install-card-button{width:100%}.recovery-content{align-items:flex-start;flex-direction:column}.recovery-content #recovery-qrcode{margin:auto}}

/* Kompaktes Hochformat der Bonuskarte – optimiert für iPhone-Bildschirme. */
.customer-dashboard{max-width:460px;padding-top:42px}.dashboard-heading{display:block;margin-bottom:24px}.dashboard-heading h1{font-size:clamp(44px,12vw,62px)}.dashboard-heading>p{margin-top:16px;text-align:left}.loyalty-card{min-height:760px;padding:34px 30px 38px;border-radius:32px}.loyalty-card:before{right:-118px;top:-78px;width:300px;height:300px}.loyalty-brand{font-size:25px}.customer-stamps{width:224px;grid-template-columns:repeat(2,96px);gap:15px 32px;margin:64px auto 46px}.customer-stamps i{width:96px;height:96px}.customer-stamps i small{font-size:11px}.loyalty-bottom{align-items:center;flex-direction:column;gap:28px;text-align:center}.reward-copy strong{font-size:22px}.loyalty-qr img,.loyalty-qr canvas{width:122px!important;height:122px!important}.loyalty-message{position:relative;right:auto;top:auto;margin:42px 0 -34px;text-align:center}.save-card-panel{margin-top:30px}
@media(max-width:500px){.customer-dashboard{padding-top:26px}.dashboard-heading h1{font-size:44px}.loyalty-card{min-height:0;padding:28px 22px 32px;border-radius:25px}.loyalty-brand{font-size:23px}.customer-stamps{width:204px;grid-template-columns:repeat(2,88px);gap:13px 28px;margin:52px auto 38px}.customer-stamps i{width:88px;height:88px}.loyalty-bottom{gap:24px}.loyalty-qr img,.loyalty-qr canvas{width:116px!important;height:116px!important}}
@media(max-width:360px){.loyalty-card{padding-inline:17px}.customer-stamps{width:188px;grid-template-columns:repeat(2,82px);gap:12px 24px}.customer-stamps i{width:82px;height:82px}.loyalty-brand{font-size:21px}.card-number{font-size:7px}}

/* Neun Besuche im 3×3-Raster, der zehnte Stempel als zentriertes Ziel. */
.loyalty-card{min-height:0}.customer-stamps{width:306px;grid-template-columns:repeat(3,90px);gap:13px 18px;margin:50px auto 38px}.customer-stamps i{width:90px;height:90px}.customer-stamps i:nth-child(10){grid-column:2;border-width:2px;box-shadow:0 0 0 7px rgba(212,175,55,.13)}.customer-stamps i:nth-child(10):not(.stamped){background:rgba(212,175,55,.08)}.customer-stamps i:nth-child(10) small{font-size:9px;font-weight:800;letter-spacing:.12em}.customer-stamps i:nth-child(10).stamped{box-shadow:0 0 0 7px rgba(212,175,55,.2),0 8px 20px rgba(99,33,24,.2)}
@media(max-width:500px){.customer-stamps{width:276px;grid-template-columns:repeat(3,82px);gap:12px 15px;margin:42px auto 32px}.customer-stamps i{width:82px;height:82px}.loyalty-bottom{gap:20px}}
@media(max-width:360px){.customer-stamps{width:252px;grid-template-columns:repeat(3,76px);gap:11px 12px}.customer-stamps i{width:76px;height:76px}}

/* Auf dem iPhone ist die vollständige Karte inklusive Kassen-QR sofort sichtbar. */
@media(max-width:500px){.customer-dashboard{padding-top:10px}.dashboard-heading{display:none}.loyalty-card{padding:20px 18px 24px;border-radius:23px}.loyalty-brand{font-size:20px}.loyalty-brand small{margin-top:7px;font-size:7px}.card-number{font-size:7px}.customer-stamps{width:228px;grid-template-columns:repeat(3,68px);gap:9px 12px;margin:24px auto 22px}.customer-stamps i{width:68px;height:68px}.customer-stamps i small{font-size:9px}.customer-stamps i:nth-child(10) small{font-size:7px}.loyalty-bottom{align-items:center;flex-direction:row;justify-content:space-between;gap:16px;text-align:left}.reward-copy strong{font-size:17px;line-height:1.15}.loyalty-qr{padding:7px 7px 5px}.loyalty-qr img,.loyalty-qr canvas{width:88px!important;height:88px!important}.loyalty-qr>span{font-size:6px}.loyalty-message{margin:22px 0 -10px}.loyalty-message h2{font-size:23px}.wallet-area{margin:14px 0 10px}}
@media(max-width:360px){.customer-stamps{width:210px;grid-template-columns:repeat(3,62px);gap:8px 12px;margin-block:20px}.customer-stamps i{width:62px;height:62px}.reward-copy strong{font-size:15px}.loyalty-qr img,.loyalty-qr canvas{width:82px!important;height:82px!important}}

/* Dezente 3D-Tiefe wie bei einer hochwertigen gedruckten Kundenkarte. */
.customer-dashboard{perspective:1400px}.loyalty-card{transform:rotateX(1.2deg) rotateY(-1.4deg);transform-style:preserve-3d;background-image:linear-gradient(125deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 31%,rgba(20,55,46,.05) 70%),linear-gradient(#f3ead9,#eee3ce);box-shadow:0 3px 2px rgba(255,255,255,.9) inset,0 -4px 8px rgba(20,55,46,.08) inset,0 18px 25px rgba(20,38,33,.16),0 42px 72px rgba(20,38,33,.2);transition:transform .35s ease,box-shadow .35s ease}.loyalty-card:hover{transform:rotateX(.3deg) rotateY(-.3deg) translateY(-3px);box-shadow:0 3px 2px rgba(255,255,255,.9) inset,0 -4px 8px rgba(20,55,46,.08) inset,0 22px 30px rgba(20,38,33,.17),0 50px 82px rgba(20,38,33,.22)}.loyalty-top,.customer-stamps,.loyalty-bottom,.loyalty-message{transform:translateZ(18px)}.customer-stamps i{box-shadow:0 2px 1px rgba(255,255,255,.65) inset,0 -3px 5px rgba(20,55,46,.08) inset,0 6px 12px rgba(20,55,46,.1)}.customer-stamps i.stamped:has(img){box-shadow:0 2px 2px rgba(255,255,255,.55) inset,0 8px 15px rgba(74,36,18,.24),0 2px 3px rgba(74,36,18,.2)}.customer-stamps i:nth-child(10){box-shadow:0 0 0 7px rgba(212,175,55,.13),0 9px 18px rgba(107,83,13,.16)}.loyalty-qr{transform:translateZ(8px);box-shadow:0 2px 2px rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,55,46,.08),0 12px 23px rgba(20,55,46,.18)}
@media(max-width:500px){.loyalty-card{transform:rotateX(.7deg) rotateY(-.8deg);box-shadow:0 2px 2px rgba(255,255,255,.9) inset,0 -3px 7px rgba(20,55,46,.08) inset,0 13px 20px rgba(20,38,33,.14),0 28px 45px rgba(20,38,33,.18)}.loyalty-card:hover{transform:rotateX(.7deg) rotateY(-.8deg)}}
@media(prefers-reduced-motion:reduce){.loyalty-card{transition:none}}

/* Auf kleinen Bildschirmen kommt zuerst die komplette Karte, danach der Introtext. */
@media(max-width:500px){.customer-dashboard{display:flex;flex-direction:column}.loyalty-card{order:1}.dashboard-heading{display:block;order:2;margin:22px 4px 8px}.dashboard-heading h1{font-size:30px;line-height:1.02;margin-bottom:12px}.dashboard-heading>p{margin:0;text-align:left}.wallet-area{order:3}.save-card-panel{order:4}}

/* Finale iPhone-Ansicht: kein Intro vor oder nach der Karte, alles im ersten Bildschirm. */
@media(max-width:500px){body>header{height:58px}.customer-dashboard{display:block;padding-top:8px}.dashboard-heading{display:none!important}.loyalty-card{margin:0 auto}.save-card-panel{margin-top:22px}}

/* Größerer, hochauflösender Kassen-QR für zuverlässiges Scannen am iPhone. */
@media(max-width:500px){.loyalty-bottom{gap:10px}.loyalty-qr{padding:9px 9px 6px}.loyalty-qr img,.loyalty-qr canvas{width:118px!important;height:118px!important}.reward-copy{max-width:145px}.reward-copy strong{font-size:16px}}
@media(max-width:360px){.loyalty-qr img,.loyalty-qr canvas{width:104px!important;height:104px!important}.reward-copy{max-width:128px}.reward-copy strong{font-size:14px}}

/* Verstärkte Kartentiefe mit sichtbarer Kante und plastischen Elementen. */
.customer-dashboard{perspective:1100px}.loyalty-card{border-top-color:rgba(255,255,255,.8);border-left-color:rgba(255,255,255,.58);border-right-color:rgba(20,55,46,.2);border-bottom-color:rgba(20,55,46,.3);transform:rotateX(2.2deg) rotateY(-2.7deg) translateZ(0);box-shadow:0 2px 1px rgba(255,255,255,.9) inset,0 -7px 12px rgba(20,55,46,.12) inset,0 5px 0 #ded2bb,0 8px 0 #cbbda3,0 22px 28px rgba(20,38,33,.2),0 55px 85px rgba(20,38,33,.26)}.loyalty-card:hover{transform:rotateX(.6deg) rotateY(-.8deg) translateY(-6px) translateZ(8px);box-shadow:0 2px 1px rgba(255,255,255,.95) inset,0 -7px 12px rgba(20,55,46,.12) inset,0 6px 0 #ded2bb,0 10px 0 #cbbda3,0 28px 34px rgba(20,38,33,.21),0 66px 95px rgba(20,38,33,.28)}.loyalty-top,.customer-stamps,.loyalty-bottom,.loyalty-message{transform:translateZ(32px)}.customer-stamps i{border-top-color:rgba(255,255,255,.78);border-bottom-color:rgba(20,55,46,.34);box-shadow:0 3px 2px rgba(255,255,255,.72) inset,0 -5px 7px rgba(20,55,46,.12) inset,0 3px 0 rgba(20,55,46,.12),0 10px 17px rgba(20,55,46,.16)}.customer-stamps i.stamped:has(img){box-shadow:0 3px 3px rgba(255,255,255,.62) inset,0 -4px 5px rgba(90,48,12,.16) inset,0 4px 0 #c7a500,0 12px 19px rgba(74,36,18,.3)}.loyalty-qr{transform:translateZ(24px);box-shadow:0 3px 2px rgba(255,255,255,.95) inset,0 -3px 5px rgba(20,55,46,.08) inset,0 4px 0 #d8d3c8,0 16px 28px rgba(20,55,46,.24)}
@media(max-width:500px){.customer-dashboard{perspective:900px}.loyalty-card{transform:rotateX(1.2deg) rotateY(-1.5deg);box-shadow:0 2px 1px rgba(255,255,255,.9) inset,0 -5px 9px rgba(20,55,46,.1) inset,0 4px 0 #ded2bb,0 6px 0 #cbbda3,0 17px 23px rgba(20,38,33,.18),0 36px 55px rgba(20,38,33,.22)}.loyalty-card:hover{transform:rotateX(1.2deg) rotateY(-1.5deg)}}

/* Bewegungssensor: Die physische iPhone-Neigung steuert die Kartenperspektive. */
.loyalty-card.motion-tilt,.loyalty-card.motion-tilt:hover{transform:rotateX(var(--motion-x,0deg)) rotateY(var(--motion-y,0deg)) translateZ(4px);transition:transform .12s linear;will-change:transform}
.reward-gift{margin:18px 0 26px;padding:24px;border:1px solid rgba(212,175,55,.55);border-radius:24px;background:linear-gradient(145deg,#fff9e8,#efe0b8);text-align:center;box-shadow:0 18px 45px rgba(52,44,27,.14)}.reward-gift-box{display:grid;width:200px;margin:auto;padding:34px 20px 4px;border:0;background:transparent;color:var(--ink)}.reward-gift-lid,.reward-gift-body{position:relative;display:block;margin:auto}.reward-gift-lid{z-index:2;width:108px;height:27px;border-radius:8px 8px 3px 3px;background:#720f18;box-shadow:0 6px 10px rgba(16,35,31,.24);transform-origin:8% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.reward-gift-lid:before,.reward-gift-lid:after{content:"";position:absolute;top:-31px;width:22px;height:35px;border:7px solid #d4af37}.reward-gift-lid:before{left:39px;border-radius:55% 55% 0 55%;transform:rotate(40deg)}.reward-gift-lid:after{right:39px;border-radius:55% 55% 55% 0;transform:rotate(-40deg)}.reward-gift-body{width:94px;height:76px;border-radius:3px 3px 12px 12px;background:linear-gradient(90deg,#720f18 0 40%,#d4af37 40% 60%,#720f18 60%)}.reward-gift-box b{margin-top:14px;font-size:13px}.reward-gift.is-open .reward-gift-lid{transform:translate(-38px,-22px) rotate(-25deg)}.reward-gift-message{animation:reward-pop .6s cubic-bezier(.2,.9,.25,1.2)}.reward-gift-message span{color:#720f18;font-size:10px;font-weight:800;letter-spacing:.15em}.reward-gift-message h2{margin:8px 0;font:800 32px/1.05 'Manrope',sans-serif}.reward-gift-message p{margin:0;font-size:13px}@keyframes reward-pop{0%{opacity:0;transform:translateY(18px) scale(.82)}100%{opacity:1;transform:none}}
.loyalty-card.has-pending-gift{position:relative;min-height:570px;overflow:hidden}.loyalty-card.has-pending-gift>:not(.reward-gift){visibility:hidden}.loyalty-card.has-pending-gift .reward-gift{position:absolute;inset:0;z-index:20;display:grid;place-items:center;margin:0;padding:28px;border:0;border-radius:inherit;background:linear-gradient(145deg,#fff9e8 0%,#efe0b8 55%,#e6d19e 100%);box-shadow:none}.loyalty-card.has-pending-gift .reward-gift-box,.loyalty-card.has-pending-gift .reward-gift-message{grid-area:1/1}.loyalty-card.has-pending-gift .reward-gift-box{align-self:center}.loyalty-card.has-pending-gift .reward-gift-message{align-self:center}.loyalty-card.has-pending-gift .reward-gift-message[hidden],.loyalty-card.has-pending-gift .reward-gift-box[hidden]{display:none}@media(max-width:500px){.loyalty-card.has-pending-gift{min-height:520px}}
.reward-gift[hidden]{display:none!important}
.loyalty-card{color:#2b2b2d;background-image:linear-gradient(125deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 31%,rgba(143,45,45,.045) 70%),linear-gradient(#f0eee4,#e2ded6)}.loyalty-card:before{border-color:rgba(143,45,45,.07)}.loyalty-card:after{background:linear-gradient(90deg,#8f2d2d 0 62%,#d4af37 62%)}.reward-copy span,.loyalty-message span{color:#8f2d2d}.customer-stamps i{border-color:rgba(43,43,45,.3);color:rgba(43,43,45,.42)}.install-help{background:#d0ccc6}.recovery-content a{color:#8f2d2d}
.loyalty-card+.dashboard-heading{display:flex!important;margin:44px 4px 28px}.loyalty-card+.dashboard-heading h1{margin-bottom:0}@media(max-width:500px){.loyalty-card+.dashboard-heading{display:block!important;margin:30px 4px 12px}.loyalty-card+.dashboard-heading h1{font-size:30px;line-height:1.02;margin-bottom:12px}.loyalty-card+.dashboard-heading>p{margin:0;text-align:left}}
.loyalty-brand>span{color:#8f2d2d}
.customer-stamps i.stamped img{background:#fff;object-fit:cover}.customer-stamps i.final-logo-stamp.stamped{background:#f0eee4!important}.customer-stamps i.final-logo-stamp.stamped img{padding:13%;background:#f0eee4;object-fit:contain}
.customer-stamps i.stamped:not(.final-logo-stamp) img{width:86%;height:86%;padding:3%;background:#fff;object-fit:contain}
.card-cache-warning{margin:26px 4px 0;padding:15px 17px;border-left:3px solid #8f2d2d;background:rgba(143,45,45,.07);color:#555154;font-size:12px;line-height:1.5}.card-cache-warning strong{color:#8f2d2d}@media(max-width:500px){.card-cache-warning{margin-top:24px;padding:13px 14px;font-size:11px}}