:root{
  --bg:#0e0e10; --card:#17171b; --fg:#f4f4f5; --muted:#a1a1aa;
  --accent:#d4af37; --accent2:#b8952f; --ok:#22c55e; --err:#ef4444; --line:#2a2a31;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);
  display:flex;align-items:flex-start;justify-content:center;min-height:100dvh;padding:24px;
  overflow-y:auto;
}
#app{width:100%;max-width:640px;margin:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.brand{text-align:center;margin-bottom:28px}
.brand h1{font-size:30px;letter-spacing:.14em;margin:0;font-weight:700;text-transform:uppercase}
.brand .sub{color:var(--muted);font-size:14px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.brand .dot{color:var(--accent)}

h2{font-size:22px;margin:0 0 6px}
.slogan{margin:0 0 22px;color:var(--accent);font-size:16px;font-style:italic;line-height:1.4}
.req{color:var(--accent);font-weight:700}
.opt{color:var(--muted);font-weight:400;font-size:13px}
label{display:block;font-size:15px;color:var(--muted);margin:0 0 8px}
.field{margin-bottom:18px}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;font-size:22px;padding:18px 18px;border-radius:14px;border:2px solid var(--line);
  background:#0c0c0f;color:var(--fg);outline:none;transition:border-color .15s;
}
input:focus,select:focus{border-color:var(--accent)}
.row{display:flex;gap:14px}
.row>*{flex:1}
.row .plz{flex:0 0 40%}

.btn{width:100%;font-size:22px;font-weight:700;padding:20px;border:none;border-radius:14px;cursor:pointer;
  background:var(--accent);color:#111;transition:transform .05s,background .15s;letter-spacing:.02em}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:transparent;color:var(--muted);border:2px solid var(--line);font-size:17px;font-weight:600;padding:14px}

/* PIN pad */
.pinbox{text-align:center}
.pindisplay{font-size:40px;letter-spacing:.4em;height:58px;margin:8px 0 22px;color:var(--accent)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pad button{font-size:30px;padding:24px 0;border-radius:16px;border:2px solid var(--line);background:#0c0c0f;color:var(--fg);cursor:pointer}
.pad button:active{background:var(--accent);color:#111}
.pad .wide{grid-column:span 1}

.consent{display:flex;gap:16px;align-items:flex-start;background:#0c0c0f;border:2px solid var(--line);border-radius:14px;padding:18px;margin:8px 0 22px;cursor:pointer}
.consent input{width:30px;height:30px;flex:0 0 30px;margin-top:2px;accent-color:var(--accent)}
.consent .txt{font-size:15px;color:var(--fg);line-height:1.5}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.topbar .who{color:var(--muted);font-size:15px}
.msg{padding:16px;border-radius:12px;margin-bottom:18px;font-size:16px}
.msg.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.35)}
.msg.err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.35)}

.success{text-align:center;padding:20px 0}
.success .check{font-size:72px}
.success h2{margin:12px 0 6px}
.success p{color:var(--muted);font-size:17px}

.link{color:var(--muted);text-align:center;margin-top:20px;font-size:13px}
.link a{color:var(--accent);text-decoration:none}

/* Mobile: kompakter, nichts abgeschnitten */
@media (max-width:520px){
  body{padding:12px;align-items:flex-start}
  .card{padding:20px}
  .brand h1{font-size:24px}
  h2{font-size:20px}
  input[type=text],input[type=email],input[type=tel],select{font-size:18px;padding:14px}
  .btn{font-size:19px;padding:16px}
  .pad button{font-size:26px;padding:18px 0}
  .pindisplay{font-size:32px}
  .slogan{font-size:15px;margin-bottom:16px}
  .row{gap:10px}
  .consent{padding:14px}
}
@media (max-height:720px){
  body{align-items:flex-start}
  .field{margin-bottom:12px}
}

/* Admin */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.tag.ok{background:rgba(34,197,94,.15);color:#86efac}
.tag.err{background:rgba(239,68,68,.15);color:#fca5a5}
.tag.pending{background:rgba(161,161,170,.15);color:var(--muted)}
.admgrid{display:grid;gap:10px}
.adm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.adm-actions .btn{width:auto;font-size:15px;padding:12px 18px}
.tabbar{display:flex;gap:8px;margin-bottom:20px}
.tabbar button{flex:1;padding:12px;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.tabbar button.active{border-color:var(--accent);color:var(--accent)}
.small{font-size:13px;color:var(--muted)}