/* PITRAN Design-System – gemeinsam für Website, Portal und Backoffice */
:root{
  --ink:#0E0F12; --ink-2:#16181D; --panel:#1B1E25; --panel-2:#22262F;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#F5F3EC; --muted:#A6A398;
  --yellow:#FFC81E; --yellow-2:#FFDD66; --yellow-ink:#14130F; --yellow-soft:rgba(255,200,30,.14);
  --ok:#7BD88F; --warn:#FFB547; --bad:#FF7A6B;
  --paper:#F6F4EF; --paper-ink:#121521;
  --radius:14px; --radius-lg:20px;
  --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-decoration:none}
button{font:inherit}

.logo{display:flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:.04em}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--yellow);display:grid;place-items:center}
.logo-mark span{width:11px;height:11px;border-radius:50%;background:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1.2em;border-radius:999px;font-weight:600;font-size:.92rem;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--yellow);color:var(--yellow-ink)}
.btn-primary:hover{background:#FFD54A}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-sm{padding:.45em .9em;font-size:.82rem}

label.field{display:grid;gap:.35rem;font-size:.8rem;color:var(--muted)}
.input,select.input,textarea.input{width:100%;padding:.75rem .85rem;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:inherit;font-size:.92rem}
.input:focus{outline:2px solid rgba(255,200,30,.6);outline-offset:1px}
select.input option{background:var(--ink-2)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem}
.badge{display:inline-flex;align-items:center;gap:.35em;font-size:.72rem;font-weight:600;padding:.25em .65em;border-radius:999px;background:var(--yellow-soft);color:var(--yellow)}
.badge.ok{background:rgba(123,216,143,.14);color:var(--ok)}
.badge.warn{background:rgba(255,181,71,.14);color:var(--warn)}
.badge.bad{background:rgba(255,122,107,.14);color:var(--bad)}
.muted{color:var(--muted)}
.note{font-size:.85rem;min-height:1.2em}
.note.err{color:var(--bad)} .note.ok{color:var(--ok)}

table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.7rem .8rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.75rem .8rem;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.num{font-variant-numeric:tabular-nums;text-align:right}