/* Seiten für Anmeldung, Konto und Auswertung – im Stil des Prototyps */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
:root {
  --paper: #F4F6F3; --grid: rgba(22, 32, 42, .05); --surface: #FFFFFF; --ink: #16202A; --ink-2: #5B6875; --line: #CBD3D8;
  --thread: #1B6DB3; --thread-soft: rgba(27, 109, 179, .10); --ok: #2E8656; --ok-soft: #E2F0E7;
  --gap: #C0412C; --gap-soft: #FBE4DF; --hit: #D97F00; --auto: #0F7B6C; --pr: #7A4FB5;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root { --paper: #0E141A; --grid: rgba(230, 237, 242, .04); --surface: #16202A; --ink: #E5ECF1; --ink-2: #9BAAB7; --line: #2A3743; --thread: #5AA8EE; --thread-soft: rgba(90,168,238,.14); --ok: #4CC184; --ok-soft: #153123; --gap: #FF7A62; --gap-soft: #3A1E19; --auto: #3CC4AE; --pr: #B99BEB; } }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background-color: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--f-body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
a { color: var(--thread); }
.wrapn { max-width: 560px; margin: 0 auto; padding: 48px 20px 32px; }
.wrapw { max-width: 1840px; margin: 0 auto; padding: 24px 20px 32px; }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.eyebrow { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
h1 { font-size: 34px; font-weight: 600; margin: 4px 0 0; line-height: 1.15; }
h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.unav { display: flex; gap: 16px; align-items: center; font-size: 14.5px; flex-wrap: wrap; }
.unav .who { font-weight: 600; }
.unav a { text-decoration: none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; margin-bottom: 16px; }
.card.danger { border-color: var(--gap); }
.lede { color: var(--ink-2); margin-top: 0; }
.small { font-size: 13.5px; color: var(--ink-2); }
.form { display: grid; gap: 14px; margin-top: 8px; }
.fld { display: grid; gap: 5px; }
.fld span { font-size: 14px; font-weight: 600; }
.fld small { font-size: 12.5px; color: var(--ink-2); }
input[type=text], input[type=email], input[type=password], select { font: 400 16px var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--thread); outline-offset: 1px; border-color: var(--thread); }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 13.5px; color: var(--ink-2); align-items: start; }
.chk input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--thread); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { display: inline-block; font: 600 15px var(--f-body); border-radius: 6px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--thread); border-color: var(--thread); color: #fff; }
.btn.danger { background: var(--gap); border-color: var(--gap); color: #fff; }
.btn.sm { font-size: 13px; padding: 5px 10px; }
.form .btn { justify-self: start; }
.alt { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-2); }
.msg { border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; font-size: 15px; border: 1px solid; }
.msg.err { background: var(--gap-soft); border-color: var(--gap); }
.msg.ok { background: var(--ok-soft); border-color: var(--ok); }
.msg.wait { background: var(--thread-soft); border-color: var(--thread); margin: 14px 0 0; display: flex; gap: 10px; align-items: center; }
.msg.wait::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--thread); border-right-color: transparent; animation: pa-spin .8s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .msg.wait::before { animation: none; } }
.btn.busy { opacity: .6; cursor: progress; pointer-events: none; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; font-size: 13px; color: var(--ink-2); }
.foot a { color: inherit; }
/* Auswertung */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 3px; gap: 3px; }
.seg a { font: 500 14px var(--f-body); padding: 6px 14px; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.seg a.on { background: var(--ink); color: var(--surface); }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.kpi span { display: block; font-size: 12.5px; color: var(--ink-2); }
.kpi b { display: block; font: 500 26px var(--f-mono); color: var(--thread); margin-top: 2px; }
.kpi small { display: block; font-size: 12px; color: var(--ink-2); }
.card .kpi b { font-size: 21px; }
.scrollbox { max-height: 720px; overflow: auto; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.grid2 > .card { margin-bottom: 16px; }
.chartbox { position: relative; height: 300px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 500 11.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]::after { content: " ↕"; opacity: .4; }
.tbl th.asc::after { content: " ↑"; opacity: 1; } .tbl th.desc::after { content: " ↓"; opacity: 1; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: var(--thread-soft); }
.tblwrap { overflow-x: auto; }
.tag { display: inline-block; font: 500 11px var(--f-mono); padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.pend { background: #FFF0D4; color: #9A5C08; } .tag.blk { background: var(--gap-soft); color: var(--gap); } .tag.adm { background: var(--thread-soft); color: var(--thread); }
.heat { border-collapse: separate; border-spacing: 2px; font: 11px var(--f-mono); color: var(--ink-2); }
.heat td { width: 26px; height: 20px; border-radius: 3px; text-align: center; color: var(--ink); }
.heat th { font-weight: 400; padding: 0 4px; }
.flow { display: flex; flex-wrap: wrap; gap: 4px; }
.flow span { font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions form { margin: 0; }
.search { max-width: 280px; padding: 7px 10px !important; font-size: 14px !important; }
@media (max-width: 1300px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } h1 { font-size: 28px; } }