/* Textilepro.de - industriell, technisch, minimalistisch */
:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --ink:#111418;
  --ink-2:#3a4047;
  --muted:#7a828c;
  --line:#e5e7eb;
  --line-2:#d6d9de;
  --accent:#0b5fff;
  --accent-ink:#ffffff;
  --ok:#0a8a4a;
  --warn:#c9461a;
  --radius:2px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.01em}
h1{font-size:18px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--muted);font-weight:400}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:14px;align-items:center}
.logo-mark{width:28px;height:28px;background:var(--ink);position:relative}
.logo-mark::after{content:"";position:absolute;inset:6px;background:var(--surface)}
.brand .sub{margin:2px 0 0;color:var(--muted);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
.tabs{display:flex;gap:0;border:1px solid var(--line);background:var(--surface)}
.tab{background:transparent;border:0;padding:8px 18px;font:inherit;color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line);text-transform:uppercase;font-size:11px;letter-spacing:0.14em}
.tab:last-child{border-right:0}
.tab.active{background:var(--ink);color:#fff}

/* Layout */
.container{padding:32px;max-width:1400px;margin:0 auto}
.tab-panel{display:none}
.tab-panel.active{display:block}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card.wide{grid-column:1/-1}
.card>header{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.hint{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.1em}

/* Form rows */
.row3,.row5{display:grid;gap:14px}
.row3{grid-template-columns:repeat(3,1fr)}
.row5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.grid{grid-template-columns:1fr}.row3,.row5{grid-template-columns:1fr 1fr}}
label{display:flex;flex-direction:column;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
input,select{font:inherit;font-family:var(--mono);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:8px 10px;color:var(--ink);width:100%}
input:focus,select:focus{outline:0;border-color:var(--ink)}
input:disabled{background:#f3f4f6;color:var(--muted)}

/* Buttons */
.btn,.btn-primary,.btn-ghost{font:inherit;font-size:12px;padding:8px 14px;border-radius:var(--radius);cursor:pointer;letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;border-style:dashed}
.btn:hover,.btn-ghost:hover{border-color:var(--ink)}

/* Tables */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle}
table.data th{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:500;background:#fcfcfd}
table.data td .num,table.data .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.data input{padding:5px 8px;font-size:12px}
table.staffel tbody tr:hover{background:#f5f7fb}
table.staffel td{font-family:var(--mono)}

/* KPI */
.kpi{display:flex;gap:20px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.kpi>div{display:flex;flex-direction:column}
.k-label{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted)}
.k-val{font-size:18px;color:var(--ink);font-weight:600;margin-top:2px}

/* Misc */
.icon-x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px}
.icon-x:hover{color:var(--warn)}
.status{margin:14px 0 0;color:var(--muted);font-size:12px}
.foot{padding:24px 32px;text-align:center;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.12em}