/* queue · Design-System (v2) – passend zur Startseite /warteschlange */
@font-face{font-family:"Fraunces";src:url("/queue/fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("/queue/fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#f6f5f1; --bg2:#efede6; --card:#fff; --ink:#12141a; --ink2:#3d414b; --soft:#6b6f78;
  --line:#e3e0d8; --hair:#efede8; --acc:#3a5bff; --on-acc:#fff; --acc-d:#2440d6; --acc-soft:#e8ecff;
  --ok:#1f8a4c; --ok-soft:#e5f4ea; --warn:#b4570b; --warn-soft:#fbefe2; --bad:#b42318; --bad-soft:#fdecea;
  --night:#0d1321; --night2:#151c2e;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --head:var(--serif); --head-w:400; --head-ls:-.012em;
  --r:14px; --rb:9px; --sh:0 1px 2px rgba(18,20,26,.04),0 8px 24px rgba(18,20,26,.06);
}
[data-mode=dark]{
  --bg:#0d1321; --bg2:#111829; --card:#161e31; --ink:#f2f3f7; --ink2:#c3c8d4; --soft:#8b93a6;
  --line:#263049; --hair:#1e2740; --sh:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.25);
  --ok-soft:#12301f; --warn-soft:#33240f; --bad-soft:#3a1714;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
.hd{font-family:var(--head);font-weight:var(--head-w);letter-spacing:var(--head-ls);font-variation-settings:"opsz" 36;line-height:1.12}
.muted{color:var(--soft)} .small{font-size:13.5px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.dot{color:var(--acc)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1.1 var(--sans);
  padding:15px 22px;border-radius:var(--rb);border:2px solid var(--acc);background:var(--acc);color:var(--on-acc);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .1s,opacity .15s;user-select:none}
.btn:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.o{background:transparent;color:var(--acc)}
.btn.o:hover{background:var(--acc-soft)}
.btn.q{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.q:hover{border-color:var(--ink);background:transparent}
.btn.dk{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.bad{background:transparent;border-color:var(--line);color:var(--bad)}
.btn.bad:hover{border-color:var(--bad);background:var(--bad-soft)}
.btn.sm{padding:10px 14px;font-size:14px;border-width:1.5px}
.btn.xl{padding:19px 26px;font-size:17px}
.btn.full{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:14px}
.linkbtn:hover{color:var(--ink)}

/* Cards / Layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:24px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:12.5px;font-weight:600}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--acc);display:block}
.chip.live i{background:var(--ok);box-shadow:0 0 0 0 rgba(31,138,76,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(31,138,76,0)}100%{box-shadow:0 0 0 0 rgba(31,138,76,0)}}
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 8px;border-radius:5px;background:var(--bg2);color:var(--ink2)}
.badge.acc{background:var(--acc-soft);color:var(--acc-d)} [data-mode=dark] .badge.acc{color:var(--ink)}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}

/* Forms */
.fld{display:block;margin-top:18px}
.fld>span{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.fld>span em{font-style:normal;font-weight:400;color:var(--soft)}
.inp{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:var(--rb);padding:13px 14px;font-size:16px;outline:0;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
textarea.inp{resize:vertical;min-height:84px;line-height:1.5}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6f78' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.help{font-size:12.5px;color:var(--soft);margin-top:6px}
.err{font-size:14px;color:var(--bad);margin-top:12px;min-height:0}
.seg{display:flex;background:var(--bg2);border-radius:calc(var(--rb) + 3px);padding:4px;gap:4px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:var(--rb);font-size:14px;font-weight:600;color:var(--ink2);text-align:center;transition:background .15s,color .15s}
.seg input:checked+span{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg input:focus-visible+span{outline:2px solid var(--acc)}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line);border-radius:20px;transition:.2s;cursor:pointer}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+i{background:var(--acc)}
.switch input:checked+i::after{transform:translateX(18px)}

/* Brand mark */
.qmark{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.03em;text-decoration:none;line-height:1}
.qmark span{color:#3a5bff}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

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