/* Ticket-Abriss-Popup: Klick auf „Ticket sichern“ zeigt das eigene Ticket, Abriss-Stück reißt ab, dann weiter zur Kasse */
html.tt-lock{overflow:hidden}
.tt{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:max(var(--s-4),env(safe-area-inset-top)) 16px max(var(--s-4),env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent}
.tt[hidden]{display:none}
.tt-scrim{position:fixed;inset:0;background:radial-gradient(90% 60% at 50% 35%,rgba(244,122,32,.10),transparent 70%),rgba(6,5,4,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s var(--ease)}
.tt.is-open .tt-scrim{opacity:1}
.tt.is-closing{opacity:0;transition:opacity .25s var(--ease)}

.tt-dialog{position:relative;width:100%;max-width:372px;outline:0}
.tt-eyebrow{display:flex;align-items:center;gap:.6em;min-height:44px;margin:0 52px var(--s-2) 0;font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink-2);opacity:0;transition:opacity .4s var(--ease) .1s}
.tt-dot{flex:none;width:6px;height:6px;background:var(--c-or);box-shadow:0 0 0 3px rgba(244,122,32,.22)}
.tt.is-open .tt-eyebrow{opacity:1}
.tt-x{position:absolute;top:0;right:-6px;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink-2);cursor:pointer;z-index:2}
.tt-x span::before,.tt-x span::after{content:"";position:absolute;left:13px;right:13px;top:50%;height:1.5px;margin-top:-1px;background:currentColor;transform:rotate(45deg)}
.tt-x span::after{transform:rotate(-45deg)}
.tt-x:hover,.tt-x:active{color:var(--c-ink)}

/* Ticket */
.tt-ticket{--gold-1:#ffd3a3;--gold-2:#ffad66;--notch:11px;--hole:3px;position:relative;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6));opacity:0;transform:translateY(36px) scale(.96);transition:opacity .45s var(--ease),transform .6s cubic-bezier(.2,.9,.2,1.15)}
.tt.is-open .tt-ticket{opacity:1;transform:none}

.tt-face{position:relative;overflow:hidden;padding:var(--s-5) var(--s-5) var(--s-5);background:radial-gradient(120% 80% at 100% 0%,rgba(255,173,102,.16),transparent 55%),linear-gradient(165deg,#1d1916 0%,#110f0d 55%,#171310 100%);border-radius:6px 6px 0 0;
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent var(--hole),#000 calc(var(--hole) + .6px)) 0 0/12px 100% repeat-x,radial-gradient(circle at 0 100%,transparent var(--notch),#000 calc(var(--notch) + .6px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--notch),#000 calc(var(--notch) + .6px)) 100% 0/51% 100% no-repeat;
  -webkit-mask-composite:source-in,source-over;
  mask:radial-gradient(circle at 50% 100%,transparent var(--hole),#000 calc(var(--hole) + .6px)) 0 0/12px 100% repeat-x,radial-gradient(circle at 0 100%,transparent var(--notch),#000 calc(var(--notch) + .6px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--notch),#000 calc(var(--notch) + .6px)) 100% 0/51% 100% no-repeat;
  mask-composite:intersect,add}
.tt-face::before{content:"";position:absolute;inset:7px 7px 10px;border:1px solid rgba(255,173,102,.28);border-bottom:0;border-radius:3px 3px 0 0;pointer-events:none}
.tt-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,211,163,.16) 46%,rgba(255,255,255,.08) 50%,transparent 64%);transform:translateX(-110%);pointer-events:none}
.tt-top{position:relative;display:flex;justify-content:space-between;gap:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid rgba(243,236,227,.12)}
.tt-brand,.tt-serial{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);white-space:nowrap}
.tt-serial{color:var(--gold-2)}
.tt-kicker{position:relative;margin:var(--s-4) 0 var(--s-1);font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-1)}
.tt-day{position:relative;margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(3rem,15vw,3.6rem);line-height:.96;letter-spacing:.005em;text-transform:uppercase;color:var(--c-ink);margin-left:-.02em}
.tt-day--long{font-size:clamp(2rem,9.5vw,2.4rem);line-height:1;text-wrap:balance}
.tt-ticket.is-vip .tt-day{background:linear-gradient(100deg,var(--gold-1),var(--gold-2) 55%,var(--c-or));-webkit-background-clip:text;background-clip:text;color:transparent}
.tt-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:var(--s-4) 0 0;border-top:1px solid rgba(243,236,227,.12)}
.tt-cell{min-width:0;padding:var(--s-2) 0;border-bottom:1px solid rgba(243,236,227,.12)}
.tt-cell[hidden]{display:none}
.tt-cell--wide{grid-column:1/-1}
.tt-cell:not(.tt-cell--wide){padding-right:var(--s-3)}
.tt-cell--price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-3) 0;border-bottom:0}
.tt-cell--price .tt-k{margin:0}
.tt-k{margin:0 0 2px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.tt-v{margin:0;font-family:var(--f-cond);font-weight:600;font-size:var(--t-l);letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:var(--c-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-v--price{font-family:var(--f-display);font-weight:400;font-size:2rem;letter-spacing:.01em;line-height:1;color:var(--c-or)}
.tt-where{position:relative;margin:var(--s-3) 0 0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}

.tt-perf{height:0}
.tt-lower{display:grid}
.tt-lower>*{grid-area:1/1}

/* Abriss-Stück */
.tt-stub{align-self:start;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:84px;padding:var(--s-4) var(--s-5);background:linear-gradient(160deg,#ff9a4a,var(--c-or) 45%,#e56c14);color:var(--c-or-ink);border-radius:0 0 6px 6px;transform-origin:0 0;
  -webkit-mask:radial-gradient(circle at 50% 0,transparent var(--hole),#000 calc(var(--hole) + .6px)) 0 0/12px 100% repeat-x,radial-gradient(circle at 0 0,transparent var(--notch),#000 calc(var(--notch) + .6px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--notch),#000 calc(var(--notch) + .6px)) 100% 0/51% 100% no-repeat;
  -webkit-mask-composite:source-in,source-over;
  mask:radial-gradient(circle at 50% 0,transparent var(--hole),#000 calc(var(--hole) + .6px)) 0 0/12px 100% repeat-x,radial-gradient(circle at 0 0,transparent var(--notch),#000 calc(var(--notch) + .6px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--notch),#000 calc(var(--notch) + .6px)) 100% 0/51% 100% no-repeat;
  mask-composite:intersect,add}
.tt-stub-l{display:flex;flex-direction:column;gap:2px}
.tt-stub-k{font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase}
.tt-stub-n{font-family:var(--f-display);font-size:2.4rem;line-height:.9}
.tt-bars{flex:0 1 150px;height:40px;background:repeating-linear-gradient(90deg,var(--c-or-ink) 0 2px,transparent 2px 4px,var(--c-or-ink) 4px 5px,transparent 5px 9px,var(--c-or-ink) 9px 12px,transparent 12px 13px,var(--c-or-ink) 13px 14px,transparent 14px 18px);opacity:.85}

/* Nach dem Abriss */
.tt-after{align-self:start;padding-top:var(--s-5);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.tt-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,9.5vw,2.5rem);line-height:1;text-transform:uppercase;letter-spacing:.005em;color:var(--c-ink);text-wrap:balance}
.tt-nw{white-space:nowrap;color:var(--c-or)}
.tt-sub{margin:var(--s-3) 0 var(--s-5);font-size:var(--t-m);line-height:1.5;color:var(--c-ink-2);text-wrap:balance}
.tt-cta{position:relative;width:100%;min-height:56px;font-size:var(--t-m);letter-spacing:.14em;box-shadow:0 12px 34px -8px rgba(244,122,32,.55)}
.tt-arrow{width:18px;height:2px;background:currentColor;position:relative;transition:transform .25s var(--ease)}
.tt-arrow::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg)}
.tt-cta:hover .tt-arrow{transform:translateX(3px)}
.tt-note{margin:var(--s-2) 0 0;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--gold-1);text-align:center}
.tt-note:empty{display:none}
.tt-back{display:block;width:100%;min-height:44px;margin-top:var(--s-2);border:0;background:transparent;font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-2);cursor:pointer}
.tt-back:hover,.tt-back:active{color:var(--c-ink)}

/* Ablauf: Spannung, Abriss, Freigabe */
.tt.is-strain .tt-stub{animation:tt-strain .5s cubic-bezier(.3,.7,.3,1) forwards}
.tt.is-torn .tt-stub{animation:tt-fall .95s cubic-bezier(.45,0,.85,.55) forwards}
.tt.is-torn .tt-face{animation:tt-release .7s cubic-bezier(.2,.9,.25,1.2)}
.tt.is-torn .tt-sheen{animation:tt-sheen 1.1s var(--ease) .15s forwards}
.tt.is-done .tt-stub{visibility:hidden}
.tt.is-done .tt-after{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
@keyframes tt-strain{0%{transform:none}35%{transform:rotate(1.4deg)}60%{transform:rotate(.4deg)}100%{transform:rotate(2.4deg) translateY(1px)}}
@keyframes tt-fall{0%{transform:rotate(2.4deg) translateY(1px);opacity:1}18%{transform:translate(4px,8px) rotate(9deg);opacity:1}100%{transform:translate(70px,320px) rotate(34deg);opacity:0}}
@keyframes tt-release{0%{transform:none}35%{transform:translateY(-10px) rotate(-1.4deg)}70%{transform:translateY(2px) rotate(.3deg)}100%{transform:none}}
@keyframes tt-sheen{to{transform:translateX(110%)}}

@media (max-height:680px){
  .tt{place-items:start center}
  .tt-face{padding:var(--s-4)}
  .tt-day{font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .tt-ticket,.tt-after{transform:none}
}