/* ============================================================
   OrgHistory · gemeinsames Design-System
   Eine Datei, in der Sie Farben & Typografie zentral ändern.
   ============================================================ */
:root{
  --ink:#161D2F; --ink-2:#222C44; --paper:#F5F7FB; --snow:#FFFFFF;
  --brand:#0E9F8E; --brand-d:#0B7E70; --brand-soft:#E2F4F1;
  --gold:#C2933A; --gold-soft:#F6EDDA;
  --ok:#0E9F8E; --warn:#C2933A; --alert:#C0432F;
  --muted:#5E6B85; --line:#E4E8F0; --line-2:#D2D9E6;
  --shadow-s:0 1px 2px rgba(22,29,47,.05);
  --shadow:0 1px 2px rgba(22,29,47,.05), 0 10px 30px -14px rgba(22,29,47,.22);
  --shadow-l:0 30px 70px -24px rgba(22,29,47,.34);
  --r:14px; --r-s:10px; --r-l:22px;
  --display:'Bricolage Grotesque','Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

/* ---- Brand mark ---- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo .seal{width:32px;height:32px;flex:none;border-radius:9px;
  background:linear-gradient(150deg,var(--brand),var(--ink));display:grid;place-items:center;color:#fff}
.logo .seal svg{width:18px;height:18px}
.logo b{font-weight:700}
.logo .hi{color:var(--brand)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-2);background:var(--snow);color:var(--ink);
  padding:11px 18px;border-radius:11px;font-size:14.5px;font-weight:600;
  transition:transform .12s,background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand-d)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink-2);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--brand-soft);color:var(--brand-d)}
.btn.lg{padding:14px 24px;font-size:15.5px;border-radius:13px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.block{width:100%}
.btn.danger:hover{border-color:var(--alert);color:var(--alert)}
.btn svg{width:17px;height:17px}

/* ---- Card ---- */
.card{background:var(--snow);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:22px 24px}

/* ---- Tags ---- */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-d);white-space:nowrap}
.tag svg{width:12px;height:12px}
.tag.gold{background:var(--gold-soft);color:#8a6a22}
.tag.ok{background:var(--brand-soft);color:var(--brand-d)}
.tag.alert{background:#FBE7E3;color:var(--alert)}
.tag.grey{background:#EEF1F6;color:var(--muted)}

/* ---- Forms ---- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
label .opt{color:var(--muted);font-weight:500}
input,select,textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;
  padding:11px 13px;font-family:inherit;font-size:14.5px;background:var(--snow);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,159,142,.15)}
textarea{resize:vertical;min-height:64px}

.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-d);font-weight:700}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}