@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ivory:#F7F2EA; --sand:#E9DDCC; --sand-2:#DCCBB5; --taupe:#B89F86;
  --mocha:#7A5A45; --espresso:#3B2A21; --muted:#8C7666; --ok:#5E7A55; --warn:#A5643A;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:22px; --shadow:0 18px 40px -22px rgba(59,42,33,.45);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ivory);color:var(--espresso);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
body{min-height:100dvh}
a{color:var(--mocha)}
button{font-family:inherit}
.wrap{max-width:460px;margin:0 auto;padding:28px 20px calc(40px + env(safe-area-inset-bottom))}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 22px;color:var(--mocha)}
.brand img{height:120px;width:auto}
.brand .name{font-family:var(--serif);font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--mocha)}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--espresso);margin:0}
h1{font-size:34px;line-height:1.1}
h2{font-size:26px}
h3{font-size:20px}
.lead{color:var(--muted);font-size:16px;line-height:1.55;margin:10px 0 0}
.center{text-align:center}
.small{font-size:13px;color:var(--muted);line-height:1.5}
.hidden{display:none!important}

/* Formular */
form.stack,.stack{display:flex;flex-direction:column;gap:14px}
label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
label.field .opt{text-transform:none;letter-spacing:0;color:var(--taupe)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=number],input[type=url],input[type=search],textarea,select{
  font:inherit;font-size:16px;font-weight:400;color:var(--espresso);background:#fff;border:1px solid var(--sand-2);
  border-radius:14px;padding:13px 14px;outline:none;width:100%;transition:border-color .2s, box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--mocha);box-shadow:0 0 0 3px rgba(122,90,69,.12)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--espresso)}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--mocha);flex:none}
.row{display:flex;gap:10px}
.row>*{flex:1}

.btn{appearance:none;border:0;border-radius:999px;padding:15px 22px;font-size:15px;font-weight:500;letter-spacing:.04em;cursor:pointer;
  background:var(--mocha);color:var(--ivory);transition:transform .12s, background .2s, opacity .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--mocha);border:1px solid var(--taupe)}
.btn.soft{background:var(--sand);color:var(--espresso)}
.btn.big{padding:20px 22px;font-size:18px}
.btn.block{width:100%}
.btn.danger{background:transparent;color:var(--warn);border:1px solid rgba(165,100,58,.4)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;cursor:pointer;padding:6px}

.panel{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:20px;box-shadow:0 10px 30px -24px rgba(59,42,33,.35)}
.err{color:var(--warn);font-size:14px;min-height:1em}

/* Stempelkarte */
.card{position:relative;border-radius:26px;padding:24px 22px 22px;color:var(--espresso);overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(120% 90% at 100% 0%, #F3EADD 0%, transparent 60%), linear-gradient(155deg,#EFE4D4 0%, #E3D3BE 55%, #D8C4AB 100%)}
.card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(122,90,69,.22);border-radius:19px;pointer-events:none}
.card .top{display:flex;justify-content:space-between;align-items:flex-start}
.card .title{font-family:var(--serif);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--mocha)}
.card .holder{font-family:var(--serif);font-size:28px;font-weight:500;margin-top:4px}
.card .mono{height:50px;width:auto;opacity:.85}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0 16px}
.stamp{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(122,90,69,.45);display:grid;place-items:center;position:relative;background:rgba(255,255,255,.25)}
.stamp .n{font-family:var(--serif);font-size:15px;color:rgba(122,90,69,.55)}
.stamp.on{border:0;background:var(--mocha);box-shadow:inset 0 0 0 3px rgba(247,242,234,.35)}
.stamp.on .n{display:none}
.stamp.on::before{content:"";width:50%;height:60%;background:var(--ivory);-webkit-mask:url(/logo-mono.png) center/contain no-repeat;mask:url(/logo-mono.png) center/contain no-repeat}
.stamp.gift{border-style:solid;border-color:var(--mocha)}
.stamp.gift .n{font-size:18px;color:var(--mocha)}
.stamp.pop{animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(2.2) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(var(--r,0deg))}}
.card .foot{display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;color:var(--mocha)}
.card .foot b{font-weight:500}

.progress-note{text-align:center;margin:18px 0 6px;font-family:var(--serif);font-size:21px;line-height:1.3}
.progress-note small{display:block;font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:4px}

.reward{margin-top:16px;border-radius:20px;padding:18px;background:var(--espresso);color:var(--ivory);text-align:center}
.reward h3{color:var(--ivory)}
.reward p{margin:6px 0 0;opacity:.85;font-size:14px}

.qrbox{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px}
.qrbox .qr{width:200px;height:200px;background:#fff;padding:10px;border-radius:16px}
.qrbox .qr svg{width:100%;height:100%;display:block}
.code{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.3em;color:var(--espresso)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.actions .wide{grid-column:1/-1}

.history{list-style:none;padding:0;margin:8px 0 0}
.history li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--sand);font-size:14px}
.history li:last-child{border-bottom:0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px);opacity:0;background:var(--espresso);color:var(--ivory);
  padding:13px 20px;border-radius:999px;font-size:15px;transition:all .35s;z-index:50;pointer-events:none;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal-bg{position:fixed;inset:0;background:rgba(59,42,33,.45);display:grid;place-items:center;z-index:40;padding:20px}
.modal{background:var(--ivory);border-radius:24px;padding:24px;max-width:400px;width:100%;box-shadow:var(--shadow)}
.modal h3{margin-bottom:8px}
.modal .row{margin-top:18px}

.spinner{width:28px;height:28px;border:2px solid var(--sand-2);border-top-color:var(--mocha);border-radius:50%;animation:spin .8s linear infinite;margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}

.fadein{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
h1,h2,h3,.progress-note,.card,.tile b,.stamp .n{font-variant-numeric:lining-nums}
input::placeholder{letter-spacing:normal;text-transform:none;color:var(--taupe)}

/* Startbildschirm-Popup */
.sheet-bg{position:fixed;inset:0;background:rgba(59,42,33,.42);z-index:45;display:flex;align-items:flex-end;justify-content:center;animation:fadein .25s ease}
.sheet{position:relative;background:var(--ivory);width:100%;max-width:480px;border-radius:28px 28px 0 0;padding:12px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px -10px rgba(59,42,33,.35);animation:slideup .45s cubic-bezier(.2,.9,.3,1)}
.sheet .grab{width:42px;height:5px;border-radius:5px;background:var(--sand-2);margin:0 auto 18px}
.sheet-head{display:flex;gap:14px;align-items:center}
.sheet-head h3{font-size:24px}
.appicon{width:58px;height:58px;border-radius:14px;flex:none;box-shadow:0 6px 16px -8px rgba(59,42,33,.5)}
.steps{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--sand);border-radius:16px;padding:12px 14px;font-size:15px;line-height:1.45}
.steps li b{font-weight:500}
.steps .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mocha);color:var(--ivory);display:grid;place-items:center;font-size:13px;font-weight:500}
.steps svg{width:20px;height:20px;vertical-align:-4px;display:inline-block}
.sheet-arrow{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:26px;color:var(--mocha);animation:bob 1.2s ease-in-out infinite}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* VIP-Goldkarte */
.card.vip{color:#F3E6CF;background:radial-gradient(120% 80% at 100% 0%, rgba(217,185,122,.28) 0%, transparent 55%), linear-gradient(155deg,#3A2B22 0%, #2A1F19 60%, #1F1712 100%)}
.card.vip::after{border-color:rgba(217,185,122,.45)}
.card.vip .title{color:#D9B97A}
.card.vip .holder{color:#F7F2EA}
.card.vip .mono{opacity:.85}
.card.vip .stamp{border-color:rgba(217,185,122,.55);background:rgba(255,255,255,.04)}
.card.vip .stamp .n{color:rgba(217,185,122,.7)}
.card.vip .stamp.on{background:linear-gradient(145deg,#E2C68C,#B8914F);box-shadow:inset 0 0 0 3px rgba(42,31,25,.25)}
.card.vip .stamp.on::before{background:#2A1F19}
.card.vip .stamp.gift{border-color:#D9B97A}
.card.vip .stamp.gift .n{color:#D9B97A}
.card.vip .foot{color:#D9B97A}
.vip-badge{position:absolute;top:16px;right:76px;font-size:10px;letter-spacing:.25em;font-weight:500;color:#2A1F19;background:linear-gradient(145deg,#E2C68C,#B8914F);padding:4px 9px 4px 11px;border-radius:999px}
/* Aktionsbanner */
.promo{margin:0 0 14px;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#F1E3CB,#E8D3B0);color:var(--espresso);font-size:14px;text-align:center;line-height:1.45;border:1px solid #DCC39A}
.promo b{font-weight:500}
/* Einladen */
.invite{margin-top:16px;padding:20px;border-radius:var(--radius);background:linear-gradient(160deg,#fff 0%,#FBF6EF 100%);border:1px solid var(--sand)}
.invite h3{display:flex;align-items:center;gap:8px}
.invite .count{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.ref-banner{margin:18px 0 0;padding:14px 16px;border-radius:16px;background:var(--espresso);color:var(--ivory);font-size:14px;line-height:1.5;text-align:center}

/* iOS: Datumsfelder auf volle Breite zwingen (Safari setzt sonst eine eigene Mindestbreite) */
input[type=date],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;min-height:50px;text-align:left;line-height:1.3}
input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5}
label.field,.row>*{min-width:0}

/* Termin, Gewinne, Glücksrad, freie Termine */
.appt{display:flex;gap:12px;align-items:center;margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--sand)}
.appt .ic{font-size:22px}
.appt .tx{flex:1;font-size:14px;line-height:1.45}
.appt .tx b{font-weight:500;display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prize{margin-top:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#FBF3E4,#F1E3CB);border:1px dashed #C9A35F;font-size:14px;line-height:1.5;text-align:center}
.prize b{font-weight:500}
.spinbtn{margin-top:12px;width:100%;border:0;border-radius:20px;padding:16px;font:inherit;font-size:16px;font-weight:500;color:#2A1F19;cursor:pointer;
  background:linear-gradient(135deg,#E9CF95,#C9A35F);box-shadow:0 10px 24px -12px rgba(150,110,40,.7);animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 24px -12px rgba(150,110,40,.7)}50%{box-shadow:0 10px 30px -6px rgba(201,163,95,.9)}}
.wheel-wrap{position:relative;width:min(300px,78vw);margin:10px auto 6px}
.wheel-wrap svg.wheel{width:100%;height:auto;display:block;transform:rotate(0deg);transition:transform 4.8s cubic-bezier(.12,.62,.08,1)}
.wheel-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--espresso);filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));z-index:2}
.win{font-family:var(--serif);font-size:28px;text-align:center;margin-top:6px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-20px;font-style:normal;font-size:20px;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.7}}
.slot-li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--sand)}
.slot-li:last-child{border-bottom:0}
.slot-li .w{font-weight:400}
.slot-li .s{font-size:12px;color:var(--muted)}
.btn.sm{padding:10px 14px;font-size:13px}

/* Umschalter Neu / Login */
.seg{display:flex;gap:4px;margin-top:22px;padding:4px;border-radius:999px;background:var(--sand)}
.seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:12px 10px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;transition:all .2s}
.seg button.on{background:#fff;color:var(--espresso);font-weight:500;box-shadow:0 4px 12px -6px rgba(59,42,33,.35)}