/* Schriften liegen lokal unter /fonts (werden beim Docker-Build geladen) – keine Verbindung zu Google nötig (DSGVO). */
@font-face{font-family:'Unbounded';font-weight:800;font-display:swap;src:url(/fonts/unbounded-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:900;font-display:swap;src:url(/fonts/unbounded-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-display:swap;src:url(/fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#0A0A0B; --surface:#121214; --surface-2:#16161A; --line:#2A2A2E; --line-2:#232327;
  --text:#F4F2EE; --muted:#C9C7CE; --dim:#A3A1A8; --faint:#6E6D74;
  --acid:#D3202C; --acid-text:#FF5A60; --acid-2:#FF8A8F; --on-acid:#FFFFFF; --ok:#2FD36B; --dark:#0A0A0B;
  --amber:#FFB020; --red:#B3141B;
  --display:'Unbounded','Inter Display',system-ui,sans-serif; --body:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100svh}
a{color:var(--acid-text)}
button{font:inherit}
.app{max-width:460px;margin:0 auto;min-height:100svh;position:relative;overflow-x:hidden}
.screen{display:none;min-height:100svh;padding:20px 20px 28px;flex-direction:column}
.screen.active{display:flex;animation:pyIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes pyIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hidden{display:none !important}

/* Kopfzeile */
.topbar{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.logo{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:-.3px}
.logo b{color:var(--acid-text);font-weight:900}
.pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--acid);animation:pyBlink 1.1s steps(2,start) infinite}
.pill.off .dot{background:var(--faint);animation:none}
@keyframes pyBlink{to{visibility:hidden}}

/* Landing */
.landing{padding:0 0 130px}
.landing .inner{padding:20px 20px 0;position:relative}
.glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(211,32,44,.28),rgba(211,32,44,0) 70%);top:60px;left:40px;pointer-events:none;animation:pyGlow 3.2s ease-in-out infinite}
@keyframes pyGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}
.hero{position:relative;margin-top:28px;font-family:var(--display);font-weight:900}
.hero .word{font-size:clamp(44px,14vw,58px);line-height:.9;letter-spacing:-2px}
.hero .row{display:flex;align-items:flex-end;gap:14px}
.hero .y{font-size:clamp(230px,77vw,320px);line-height:.8;letter-spacing:-12px;color:var(--acid)}
.hero .side{padding-bottom:22px;display:flex;flex-direction:column;gap:6px}
.hero .ghost{color:transparent;-webkit-text-stroke:1.5px #3A3A40;font-size:44px;line-height:.9;letter-spacing:-1px}
.hero .edition{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--muted);margin-top:6px}
.tagline{position:relative;margin-top:22px;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.5px;white-space:pre-line}
.meta{position:relative;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.meta .sep{color:#55545A}

.card{border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--surface)}
.counter{margin:28px 20px 0}
.label{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.counter .head,.counter .vals{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.counter .vals{margin-top:6px}
.big{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-1px}
.big small{color:#55545A;font-size:20px}
.timer{font-family:var(--mono);font-weight:700;font-size:20px;color:var(--acid-text)}
.bar{margin-top:14px;height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:8px;border-radius:99px;background:var(--acid);width:0;transition:width .8s ease}
.seats{margin-top:16px;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px}
.seats i{display:block;aspect-ratio:1;border-radius:50%;background:#26262B;transition:background .4s ease}
.seats i.sold{background:var(--acid)}
.seats i.pending{background:#6B1A20;animation:pyPend 1.6s ease-in-out infinite}
.seats i.new{animation:pyNew 1.2s ease-out}
@keyframes pyPend{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes pyNew{0%{transform:scale(2.4);box-shadow:0 0 0 0 rgba(211,32,44,.9)}100%{transform:scale(1);box-shadow:0 0 0 10px rgba(211,32,44,0)}}
.legend{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend .sold{background:var(--acid)}.legend .pending{background:#6B1A20}.legend .free{background:#26262B}
.toasts{position:fixed;left:0;right:0;top:calc(10px + env(safe-area-inset-top));z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.toast{width:100%;max-width:436px;background:var(--text);color:var(--dark);border-radius:16px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:pyToastIn .45s cubic-bezier(.2,1.3,.3,1) both}
.toast.out{animation:pyToastOut .35s ease-in both}
.toast .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--acid);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:12px}
@keyframes pyToastIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes pyToastOut{to{opacity:0;transform:translateY(-24px)}}
.counter .note{margin-top:10px;font-size:13px;color:var(--muted)}
.counter .note b{color:var(--text)}

.marquee{margin-top:28px;background:var(--acid);color:var(--on-acid);overflow:hidden;white-space:nowrap;padding:10px 0}
.marquee span{display:inline-block;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.5px;animation:pyMarquee 14s linear infinite}
@keyframes pyMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.infos{padding:28px 20px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.infos .card{padding:16px}
.infos .card.wide{grid-column:span 2}
.infos .t{margin-top:8px;font-weight:700;font-size:15px;line-height:1.3}
.infos .accent{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-1.5px;color:var(--acid-text)}

.cta-bar{position:fixed;left:0;right:0;bottom:0;padding:16px 20px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 65%,rgba(10,10,11,0));z-index:5}
.cta-bar .btn{max-width:420px;margin:0 auto;display:flex}

/* Buttons & Formulare */
.btn{width:100%;min-height:60px;border:none;border-radius:18px;background:var(--acid);color:var(--on-acid);font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.3px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:transform .1s ease,opacity .2s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.pulse{animation:pyPulse 1.8s ease-in-out infinite}
@keyframes pyPulse{0%,100%{box-shadow:0 0 0 0 rgba(211,32,44,.55)}50%{box-shadow:0 0 0 12px rgba(211,32,44,0)}}
.btn-outline{background:var(--surface);color:var(--acid-text);border:1px solid var(--acid);font-family:var(--body);font-weight:700;font-size:15px}
.btn-light{background:var(--text);color:var(--bg);font-family:var(--body);font-weight:700}
.link{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:13px;padding:12px 0;cursor:pointer;align-self:flex-start}
.back{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.step{margin-top:36px;font-family:var(--mono);font-size:12px;color:var(--acid-text);letter-spacing:1px}
.h1{margin:10px 0 0;font-family:var(--display);font-weight:900;font-size:34px;line-height:1.05;letter-spacing:-1px}
.lead{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.5}
.field{margin-top:28px;display:flex;flex-direction:column}
.field label{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.input,.select{margin-top:8px;width:100%;height:60px;padding:0 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:18px;font-family:var(--body);outline:none;transition:border-color .2s}
.input:focus,.select:focus{border-color:var(--acid)}
.input.mono{font-family:var(--mono)}
.phone-row{margin-top:8px;display:flex;gap:8px}
.top-right{display:flex;align-items:center;gap:8px}
.lang{min-width:44px;height:34px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--mono);font-weight:700;font-size:12px;cursor:pointer;padding:0 12px}
.lang:active{transform:scale(.96)}
.cc-wrap{position:relative;flex:none}
.phone-row select.cc{appearance:none;-webkit-appearance:none;cursor:pointer;padding:0 12px;width:112px;outline:none}
.phone-row select.cc:focus{border-color:var(--acid)}
.plusone{border-color:rgba(211,32,44,.55)}
.plusone .label{color:var(--acid-text);font-weight:700}
.plus-hint{margin-top:16px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:28px 20px 0;font-size:12px}
.foot a,.foot button{color:var(--dim);background:none;border:none;padding:8px 0;font:inherit;text-decoration:underline;cursor:pointer}
.consent{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:25;max-width:436px;margin:0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.5);animation:pyIn .4s ease both}
.consent-t{font-family:var(--display);font-weight:800;font-size:15px}
.consent p{margin:8px 0 12px;font-size:13px;line-height:1.45;color:var(--muted)}
.consent p a{color:var(--acid-text)}
.consent-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.consent-b .btn{min-height:46px;font-size:13px;border-radius:14px}
.phone-row .cc{height:60px;padding:0 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;font-family:var(--mono);font-size:18px;color:var(--muted)}
.phone-row .input{margin-top:0;flex:1;min-width:0;font-family:var(--mono)}
.code-input{height:76px;font-family:var(--mono);font-weight:700;font-size:34px;letter-spacing:14px;text-align:center;padding-left:28px}
.select-wrap{position:relative}
.select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;font-weight:500}
.select-wrap svg{position:absolute;right:18px;top:50%;margin-top:4px;transform:translateY(-50%);pointer-events:none;color:var(--acid-text)}
.select:invalid{color:var(--dim)}
.select option{background:var(--surface);color:var(--text)}
.hint{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.4}
.error{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(179,20,27,.18);border:1px solid rgba(255,90,90,.35);color:#FFD7D7;font-size:14px;line-height:1.4}
.spacer{flex:1;min-height:24px}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:var(--acid);color:var(--on-acid);border-radius:999px;padding:8px 14px;font-family:var(--display);font-weight:800;font-size:13px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:pySpin .8s linear infinite}
@keyframes pySpin{to{transform:rotate(360deg)}}
.summary{margin-top:24px;border-radius:18px;border:2px solid var(--acid);background:var(--surface);padding:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.summary .w{font-family:var(--display);font-weight:800;font-size:16px}
.summary .s{margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--acid-text)}
.summary .price{font-family:var(--display);font-weight:900;font-size:24px}
.payline{margin-top:10px;text-align:center;font-size:12px;color:var(--dim)}
.dev{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--amber)}
.center{text-align:center}

/* Ticket */
.ticket{margin-top:22px;border-radius:26px;overflow:hidden;background:var(--acid);color:var(--on-acid);position:relative;animation:pyDrop .9s cubic-bezier(.2,1.4,.3,1) both}
@keyframes pyDrop{from{opacity:0;transform:translateY(-120px) rotate(-8deg) scale(.9)}to{opacity:1;transform:none}}
.ticket .top{padding:20px 20px 18px}
.ticket .row1{display:flex;justify-content:space-between;align-items:flex-start}
.ticket .brand{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.3px}
.ticket .brand-y{font-family:var(--display);font-weight:900;font-size:64px;line-height:.8;letter-spacing:-3px;margin-top:4px}
.ticket .no{text-align:right;font-family:var(--mono);font-size:11px;line-height:1.5}
.ticket .no b{font-family:var(--display);font-weight:900;font-size:26px}
.ticket .grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:1px}
.ticket .grid div div{margin-top:3px;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:0}
.ticket .perf{border-top:2px dashed rgba(255,255,255,.45);margin:0 18px;position:relative}
.ticket .perf:before,.ticket .perf:after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--bg)}
.ticket .perf:before{left:-32px}.ticket .perf:after{right:-32px}
.ticket .bottom{padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ticket .qr{width:min(260px,70vw);background:#F4F2EE;border-radius:14px;padding:6px}
.ticket .qr svg{display:block;width:100%;height:auto}
.ticket .qrnote{font-size:13px;font-weight:600;text-align:center;line-height:1.4}
.ticket.is-used .qr{opacity:.35}
.used-stamp{display:none;position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-12deg);border:4px solid var(--on-acid);border-radius:12px;padding:8px 14px;font-family:var(--display);font-weight:900;font-size:22px}
.ticket.is-used .used-stamp{display:block}
.actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.actions .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}