.checkin-experience{padding:0;border:1px solid #ffffffb3;border-radius:32px;width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 32px);margin:auto;background:#fff8fa;color:#361b26;box-shadow:0 32px 100px #39142245;overflow:auto;overscroll-behavior:contain;animation:checkin-arrive .35s cubic-bezier(.2,.8,.2,1)}
.checkin-experience::backdrop{background:#32152270;backdrop-filter:blur(12px)}
.checkin-ticket{position:relative;min-height:180px;padding:64px 28px 24px;display:flex;align-items:flex-end;isolation:isolate;background:#741d36;color:white;overflow:hidden}
.checkin-ticket:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#28121a20,#28121ad9)}
.checkin-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.checkin-ticket-copy{min-width:0}.checkin-ticket-copy>span{font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#ffe2eb}.checkin-ticket h2{font-size:clamp(22px,5vw,30px);line-height:1.08;letter-spacing:-.04em;margin:10px 0 8px;color:white;overflow-wrap:anywhere}.checkin-ticket p{font-size:13px;margin:0;color:#ffe5ed}
.checkin-experience .checkin-close{position:absolute;right:14px;top:14px;width:40px;height:40px;min-height:40px;padding:10px;border-radius:50%;border:1px solid #ffffff80;background:#3c182660;color:white;backdrop-filter:blur(12px)}.checkin-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.checkin-experience #event-flow{padding:26px}.checkin-experience .flow-card{padding:0;margin:0;border:0;background:transparent;box-shadow:none;overflow:visible;animation:checkin-step .3s ease-out}.checkin-experience .flow-card h2{font-size:26px;line-height:1.12;margin:10px 0 14px;letter-spacing:-.04em}.checkin-experience .flow-card p{font-size:14px;line-height:1.55;color:#765563}.checkin-experience .eyebrow{color:#ad2349;font-size:11px}.checkin-experience .group-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}.checkin-experience .group-actions>*{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:14px 22px;border:1px solid transparent;border-radius:999px;font-size:15px;font-weight:750;line-height:1.35;text-align:center;box-sizing:border-box}.checkin-experience .group-actions>.button{background:#e73553;color:#fff;border-color:#e73553;box-shadow:0 8px 24px #e7355326}.checkin-experience .group-actions>.ghost{border-color:#d9d9e1;background:linear-gradient(135deg,#fff,#f0f0f4);color:#555561;box-shadow:inset 0 1px 0 #fff,0 3px 10px #421a2e08}
.checkin-experience .checkin-mode-options{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0}.checkin-experience .checkin-mode-options label{box-sizing:border-box;width:100%;min-width:0;padding:14px;border-radius:18px;background:#fff;border:1px solid #efd6df;transition:border-color .2s,background .2s,box-shadow .2s}.checkin-experience .checkin-mode-options label:has(input:checked){border-color:#e73553;background:#fff0f4;box-shadow:inset 0 0 0 1px #e73553}.checkin-experience .checkin-mode-copy small{font-size:12px}.checkin-experience .spinner{margin:12px auto 24px}.checkin-experience button:focus-visible,.checkin-experience a:focus-visible{outline:3px solid #e73553;outline-offset:3px}
@keyframes checkin-arrive{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}@keyframes checkin-step{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:480px){.checkin-experience{width:calc(100% - 16px);max-height:calc(100dvh - 20px);border-radius:26px}.checkin-ticket{min-height:150px;padding:56px 22px 22px}.checkin-experience #event-flow{padding:22px}.checkin-experience .flow-card h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.checkin-experience,.checkin-experience .flow-card{animation:none}.checkin-experience .checkin-mode-options label{transition:none}}

.checkin-experience .checkin-feedback{padding:20px;border:1px solid #ffffffd9;border-radius:24px;background:linear-gradient(135deg,#ffffffb3,#f5edf3a6);box-shadow:inset 0 1px 0 #fff,0 8px 24px #421a2e0a;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow-wrap:anywhere}.checkin-feedback-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:#eee5ee;color:#795267;margin-bottom:18px}.checkin-feedback-icon svg{width:28px;height:28px}.checkin-experience .checkin-feedback h2{font-size:23px}.checkin-experience .checkin-feedback p{margin-bottom:0}

.flow-card .group-actions{display:grid;grid-template-columns:1fr;gap:12px}.flow-card .group-actions>:is(button,a){width:100%;min-height:48px;text-align:center}
/* v477 "Bist du schon vor Ort?": in the fullscreen check-in sheet (iOS app, demo phone) the event picture runs full-bleed up under
   the status bar / Dynamic Island and fades softly into a Liquid Glass bar instead of being cut at the safe-area edge. */
@media(max-width:650px){
 :is(html.native-app, .sandbox-device) dialog.checkin-experience.checkin-experience[open]{padding-top:0!important}
 :is(html.native-app, .sandbox-device) .checkin-experience .checkin-ticket{padding-top:calc(64px + var(--app-safe-top,env(safe-area-inset-top,0px)));min-height:calc(190px + var(--app-safe-top,env(safe-area-inset-top,0px)))}
 :is(html.native-app, .sandbox-device) .checkin-experience .checkin-close{top:calc(10px + var(--app-safe-top,env(safe-area-inset-top,0px)))}
 :is(html.native-app, .sandbox-device) .checkin-experience[open]::before{content:"";position:fixed;left:0;right:0;top:0;z-index:10;pointer-events:none;
  height:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 22px)!important;background:linear-gradient(180deg,#fff8fab8 0%,#fff8fa66 55%,#fff8fa00 100%)!important;
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
}

/* v495: every check-in state (start, location check, not-at-venue, permission, mode choice, profile needed) uses the
   same borderless layout under the hero fade: no card border/background/shadow, same padding, type and buttons. */
.checkin-experience :is(.flow-card,.checkin-feedback,.checkin-mode-card,.checkin-profile-required){padding:0!important;margin:0!important;max-width:none;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.checkin-experience :is(.flow-card,.checkin-feedback,.checkin-mode-card,.checkin-profile-required) h2{font-size:26px!important;line-height:1.12;margin:10px 0 14px;letter-spacing:-.04em}
.checkin-experience :is(.flow-card,.checkin-feedback,.checkin-mode-card,.checkin-profile-required)>p{font-size:14px;line-height:1.55;color:#765563}
.checkin-experience .checkin-feedback-icon{margin-bottom:10px}
.checkin-experience :is(.group-actions,.flow-actions){display:grid;gap:10px;margin-top:20px}
.checkin-experience :is(.group-actions,.flow-actions)>:is(.button,.ghost,button,a){width:100%;min-height:52px;justify-content:center;box-sizing:border-box}
/* v514 "Standort wird geprüft …": same layout as "Bist du schon vor Ort?" (left-aligned block; the spinner takes the eyebrow's place),
   no Abbrechen: leaving is the floating burger turned back arrow (fc-back-x / native menu button) */
.checkin-experience .flow-card>.spinner{display:block;width:26px!important;height:26px!important;margin:0 0 2px!important;border-width:3px!important}
.checkin-experience .flow-card:has(>.spinner){text-align:left}
.checkin-experience .flow-card:has(>.spinner)>h2{margin-top:12px!important}