/* Zuschlag · DTC. Metapher: Losschild im Auktionshaus.
   Dunkel für Dashboard und Handy, cremefarbenes Papier für Overlay, Registrierung und Bezahlseite.
   Warmes Rot = live, Gold = Zuschlag. Bewegung nur bei Zustandswechsel, kurz, ease-out, kein Bounce. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0e0d0c; --panel:#161412; --panel2:#1e1b18; --line:#2a2622; --line2:#3b3530;
  --text:#f3ede3; --muted:#8e867a; --faint:#5d564d;
  --live:#d8432f; --live-soft:rgba(216,67,47,.14); --gold:#c9a24a; --gold-soft:rgba(201,162,74,.16); --ok:#86b893;
  --paper:#f3ead8; --paper2:#e9dec6; --ink:#1d1a16; --ink2:#6f6556; --rule:#d6c8ab;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif; --serif:"Fraunces",Georgia,serif;
  --r:3px; --ease:cubic-bezier(.23,1,.32,1); --t:180ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:transparent;border:1px solid var(--line2);border-radius:var(--r);padding:9px 14px;font-weight:600;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform 120ms var(--ease);user-select:none;touch-action:manipulation}
button:hover{border-color:var(--muted)}
button:active{transform:scale(.97)}
button:disabled{opacity:.35;pointer-events:none}
button.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
button.live{background:var(--live);border-color:var(--live);color:#fff}
button.gold{background:var(--gold);border-color:var(--gold);color:#1a150c}
button.ghost{border-color:transparent}
button.ghost:hover{background:var(--panel2)}
button.icon{padding:7px;line-height:0;border-color:transparent}
button.icon:hover{background:var(--panel2)}
button.danger{color:var(--live)}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--muted)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.dot.on{background:var(--ok)}
.dot.live{background:var(--live)}
.dot.warn{background:var(--gold)}
.chip{border:1px solid var(--line2);border-radius:999px;padding:8px 14px;font-weight:600;background:transparent}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 12px;opacity:0;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-weight:600;z-index:100;transition:opacity 200ms var(--ease),translate 200ms var(--ease);pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;translate:-50% 0}
.toast.err{background:var(--live);color:#fff}
.empty{color:var(--muted);padding:24px 0;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important;animation-duration:0ms!important}}

/* Papier */
body.paper{background:var(--paper);color:var(--ink)}
.paper input,.paper select,.paper textarea{background:#fbf6ec;border-color:var(--rule);color:var(--ink)}
.paper input:focus{border-color:var(--ink2)}
.paper button{border-color:var(--rule)}
.paper button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper .muted{color:var(--ink2)}
.paper .eyebrow{color:var(--ink2)}