/* Schrift liegt lokal im Ordner – keine Verbindung zu Google (Datenschutz) */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(plex-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(plex-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(plex-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:700;src:url(plex-700.woff2) format('woff2')}
:root{
  --bg:#F6F5F1;--card:#fff;--line:#E3E1DA;--line2:#D5D2C9;--soft:#EFEDE7;
  --text:#1C1F24;--muted:#4B5260;--muted2:#5B6270;--faint:#8A909B;
  --accent:#2457C5;--accent-dark:#1A3F91;--accent-soft:#EEF3FC;
  --ok:#0F6B3A;--ok-dot:#16A34A;--ok-soft:#E4F4EA;
  --warn:#C2410C;--warn-text:#9A3412;--warn-soft:#FDF1EB;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
h1,h2,h3{margin:0}
.hidden{display:none!important}

/* Bausteine */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.field{width:100%;border:1px solid var(--line2);border-radius:10px;background:#fff;padding:0 12px;height:44px;font-size:15px}
textarea.field{height:auto;padding:10px 12px;resize:none;background:#FBFAF7;font-size:16px}
.btn{height:44px;padding:0 18px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:15px}
.btn:hover:not(:disabled){background:var(--accent-dark)}
.btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--text)}
.btn.ghost:hover:not(:disabled){background:var(--soft)}
.btn.dark{background:#fff;border:1px solid var(--text);color:var(--text)}
.btn.sm{height:32px;padding:0 10px;font-size:13px;font-weight:500;border-radius:8px}
.btn.danger-text{background:none;border:none;color:var(--warn-text)}
.chip{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--muted);background:var(--soft);padding:5px 9px;border-radius:6px}
.badge{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.badge.ok{color:var(--ok);background:var(--ok-soft)}
.badge.warn{color:var(--warn-text);background:var(--warn-soft)}
.badge.gray{color:var(--muted);background:var(--soft)}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.muted{color:var(--muted)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok-dot)}
.bar{height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.bar>div{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
/* Countdown */
.timer{display:flex;flex-direction:column;gap:6px}
.timer .tlabel{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.timer .tlabel b{color:var(--text);font-size:16px}
.timer .tbar{height:6px;background:var(--soft);border-radius:3px;overflow:hidden}
.timer .tfill{height:100%;background:var(--accent);border-radius:3px;transition:width .25s linear}
.timer.urgent .tfill{background:var(--warn)}
.timer.urgent .tlabel b{color:var(--warn-text)}
.timer.over .tlabel{color:var(--warn-text);font-weight:600}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:50;display:none}