:root{
  --accent:#E8562B;
  --accent-dark:#C7431C;
  --bg:#FAF7F2;
  --ink:#22201D;
}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.06);
}
.app-header{
  padding:1rem 1.25rem;
  border-bottom:1px solid #EFEBE6;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.app-header .logo{
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #4a3418, #1a1207);
  box-shadow:inset 0 0 0 1px rgba(212,175,85,.45);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.app-header .logo img{width:20px;height:20px;}
.app-header h1{
  font-size:1rem;font-weight:700;margin:0;
}
.app-header small{color:#8A8378;}
.lang-switch{margin-left:auto;display:flex;gap:.2rem;background:var(--bg);border-radius:999px;padding:.2rem;flex-shrink:0;}
.lang-btn{border:none;background:transparent;font-size:.72rem;font-weight:700;padding:.32rem .6rem;border-radius:999px;color:#8A8378;line-height:1;}
.lang-btn.active{background:var(--accent);color:#fff;}
.resume-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:#FCEFE8;color:var(--accent-dark);font-size:.8rem;font-weight:600;
  padding:.6rem .9rem;border-bottom:1px solid #F3DCC9;
}
.resume-bar .resume-text{display:flex;align-items:center;gap:.4rem;}
.resume-btn{
  background:var(--accent);color:#fff;border:none;font-weight:700;font-size:.75rem;
  padding:.4rem .8rem;border-radius:999px;flex-shrink:0;
}
main{flex:1;display:flex;flex-direction:column;}
.screen{display:none;flex:1;flex-direction:column;padding:1.5rem 1.25rem 1rem;}
.screen.active{display:flex;}

.btn-accent{
  background:var(--accent);border:none;color:#fff;font-weight:700;
  padding:.9rem 1.25rem;border-radius:14px;font-size:1.05rem;
}
.btn-accent:hover, .btn-accent:focus{background:var(--accent-dark);color:#fff;}
.btn-accent:disabled{background:#E3DFD8;color:#A29C90;}
.btn-outline-accent{
  border:1px solid #E3DFD8;color:var(--ink);font-weight:600;
  padding:.8rem 1.1rem;border-radius:14px;background:#fff;
}
.btn-sm-outline{
  border:1px solid #E3DFD8;color:var(--ink);font-weight:600;font-size:.82rem;
  padding:.5rem .9rem;border-radius:12px;background:#fff;
}

/* Ticket cards */
.ticket-card{
  border:1px solid #EFEBE6;border-radius:16px;padding:1rem 1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.9rem;
}
.ticket-card .info{display:flex;align-items:center;gap:.75rem;}
.ticket-card .icon{
  width:44px;height:44px;border-radius:12px;background:#FCEFE8;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ticket-card .icon img{width:24px;height:24px;}
.ticket-card .name{font-weight:700;font-size:.98rem;margin:0;}
.ticket-card .price{color:#8A8378;font-size:.85rem;margin:0;}
.qty-control{display:flex;align-items:center;gap:.6rem;}
.qty-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid #E3DFD8;
  background:#fff;font-size:1.1rem;font-weight:700;color:var(--accent);
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.qty-btn:active{background:#FCEFE8;}
.qty-value{min-width:22px;text-align:center;font-weight:700;}

.subtotal-line{
  display:flex;justify-content:space-between;font-size:.85rem;color:#8A8378;
  padding:0 .1rem;margin-bottom:.25rem;
}

.sticky-bar{
  position:sticky;bottom:0;background:#fff;border-top:1px solid #EFEBE6;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:.6rem;
}
.total-row{display:flex;justify-content:space-between;align-items:baseline;}
.total-row .label{color:#6B655C;font-size:.9rem;}
.total-row .amount{font-size:1.4rem;font-weight:800;}

.step-indicator{display:flex;gap:.35rem;justify-content:center;margin-bottom:1rem;}
.step-dot{width:6px;height:6px;border-radius:50%;background:#E3DFD8;}
.step-dot.active{background:var(--accent);width:18px;border-radius:3px;}

/* Contact / Kontaktdaten */
.form-label{color:#6B655C;margin-bottom:.3rem;}
.form-control{border-radius:10px;border-color:#E3DFD8;padding:.65rem .8rem;}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(232,86,43,.15);}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent);}
.company-fields{background:var(--bg);border-radius:14px;padding:.9rem;margin-top:.5rem;}

.payment-card{
  border:1px solid #EFEBE6;border-radius:14px;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;cursor:pointer;
}
.payment-card.selected{border-color:var(--accent);background:#FCEFE8;}
.payment-icon{display:flex;align-items:center;}
.payment-icon img{width:20px;height:20px;}
.payment-label{flex:1;font-weight:600;font-size:.92rem;}
.radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid #E3DFD8;flex-shrink:0;}
.payment-card.selected .radio-dot{
  border-color:var(--accent);
  background:radial-gradient(circle, var(--accent) 0 40%, transparent 42%);
}

/* Payment (dummy) */
#screen-payment{align-items:center;justify-content:center;text-align:center;gap:.9rem;}
.icon-circle{
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFD8C4, var(--accent));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
}
.icon-circle img{width:40px;height:40px;}
.placeholder-note{
  font-size:.78rem;color:#A29C90;background:var(--bg);border-radius:10px;
  padding:.6rem .8rem;
}

/* Success */
#screen-success{align-items:center;justify-content:center;text-align:center;gap:.4rem;}
.check-circle{
  width:70px;height:70px;border-radius:50%;background:#E8F6EC;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.2rem;
}
.check-circle img{width:32px;height:32px;}
.ticket-mock{
  border:2px dashed #E3DFD8;border-radius:16px;padding:1.25rem;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.3rem;
}
.qr-wrap{position:relative;width:130px;height:130px;}
.qr-placeholder{
  width:130px;height:130px;border-radius:10px;
  border:4px solid #2E9E4E;
  background:
    repeating-linear-gradient(45deg,#22201D 0 6px,#fff 6px 12px);
  transition:filter .2s, border-color .2s;
}
.qr-placeholder.qr-used{
  border-color:#C7C2BA;
  filter:grayscale(1) opacity(.55);
}
.qr-stamp{
  display:none;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-14deg);
  border:3px solid #C0392B;color:#C0392B;background:rgba(255,255,255,.88);
  font-weight:800;font-size:.85rem;letter-spacing:.05em;
  padding:.25rem .65rem;border-radius:8px;white-space:nowrap;
}
.qr-stamp.show{display:block;}
.ticket-id{font-family:monospace;font-size:.95rem;letter-spacing:.05em;color:#6B655C;}

.ticket-nav{display:flex;align-items:center;justify-content:space-between;width:100%;margin:.4rem 0;}
.nav-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid #E3DFD8;background:#fff;
  font-size:1.3rem;color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.nav-btn:active{background:#FCEFE8;}
.ticket-position{font-size:.85rem;color:#6B655C;font-weight:600;}

.ticket-type-badge{
  display:inline-block;background:#FCEFE8;color:var(--accent-dark);font-weight:700;
  font-size:.8rem;padding:.25rem .7rem;border-radius:999px;
}
.status-badge{
  display:inline-block;font-weight:700;font-size:.78rem;padding:.3rem .8rem;
  border-radius:999px;margin-top:.15rem;
}
.status-valid{background:#E8F6EC;color:#2E9E4E;}
.status-used{background:#F1EFEA;color:#8A8378;}

.ticket-dots{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.7rem 0 .3rem;}
.ticket-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;border:2px solid transparent;padding:0;}
.dot-valid{background:#2E9E4E;}
.dot-used{background:#C7C2BA;}
.ticket-dot.dot-current{border-color:var(--ink);}

.summary-status{font-size:.82rem;color:#6B655C;margin:.3rem 0 0;}

.app-footer{
  text-align:center;font-size:.7rem;line-height:1.6;color:#A29C90;
  padding:.7rem 1rem 1.1rem;
}
.app-footer a{color:#A29C90;text-decoration:underline;text-underline-offset:2px;}
.app-footer a:hover{color:var(--accent-dark);}