/* docport CI tokens — Quelle: docport-ci Skill */
:root {
  --dp-indigo-100: #332F74;
  --dp-indigo-80: #5C5990;
  --dp-indigo-60: #8582AC;
  --dp-indigo-40: #ADACC7;
  --dp-indigo-20: #D6D5E3;
  --dp-purple-100: #5843AB;
  --dp-purple-80: #9278FA;
  --dp-purple-60: #A893FB;
  --dp-purple-40: #BEAEFC;
  --dp-purple-20: #D3C9FD;
  --dp-purple-10: #EFEBFE;
  --dp-red-100: #FF687A;
  --dp-red-80: #FF8695;
  --dp-red-60: #FFA4AF;
  --dp-red-40: #FFC3CA;
  --dp-red-20: #FFE1E4;
  --dp-beige-100: #EEDEBF;
  --dp-beige-80: #F1E5CC;
  --dp-beige-60: #F5EBD9;
  --dp-beige-40: #F8F2E5;
  --dp-beige-20: #FCF8F2;
  --dp-black: #09222B;
  --dp-white: #F9F9FB;
  --font-heading: 'Catamaran', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --grad-hero: linear-gradient(135deg, var(--dp-indigo-100) 0%, var(--dp-red-100) 100%);
  --grad-dark: linear-gradient(135deg, var(--dp-indigo-100) 0%, var(--dp-purple-100) 100%);
  --grad-cta: linear-gradient(135deg, var(--dp-purple-60) 0%, var(--dp-red-100) 100%);
  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(51, 47, 116, 0.08), 0 1px 3px rgba(51, 47, 116, 0.06);
  --shadow-modal: 0 12px 40px rgba(9, 34, 43, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--dp-white);
  color: var(--dp-black);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--dp-indigo-100);
  line-height: 1.25;
  margin: 0 0 0.4em;
}
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; color: var(--dp-indigo-80); }

a { color: var(--dp-purple-100); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dp-red-100);
  display: block;
  margin-bottom: 0.3em;
}

.muted { color: var(--dp-indigo-60); }
.small { font-size: 0.82rem; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  background: var(--grad-cta);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6em 1.5em;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.98); }

.btn-dark {
  background: var(--grad-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--dp-indigo-100);
  border: 2px solid var(--dp-indigo-40);
}
.btn-secondary:hover { border-color: var(--dp-indigo-100); filter: none; }

.btn-danger {
  background: transparent;
  color: var(--dp-red-100);
  border: 2px solid var(--dp-red-60);
}
.btn-danger:hover { border-color: var(--dp-red-100); filter: none; }

.btn-sm { font-size: 0.8rem; padding: 0.4em 1.1em; }

.btn-link {
  background: none;
  border: none;
  color: var(--dp-indigo-60);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover { color: var(--dp-indigo-100); }

.btn[disabled], .btn-secondary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Status-Badges */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2em 0.9em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.badge-OFFEN              { background: var(--dp-purple-10); color: var(--dp-purple-100); }
.badge-VERGEBEN           { background: var(--dp-indigo-20); color: var(--dp-indigo-100); }
.badge-DOKU_EINGEREICHT   { background: var(--dp-beige-80);  color: var(--dp-black); }
.badge-NACHARBEIT         { background: var(--dp-red-20);    color: #C43B4E; }
.badge-ABGENOMMEN         { background: var(--dp-purple-20); color: var(--dp-purple-100); }
.badge-RECHNUNG_ERHALTEN  { background: var(--dp-beige-100); color: var(--dp-black); }
.badge-BEZAHLT            { background: var(--dp-indigo-100); color: var(--dp-white); }

.badge-neutral { background: var(--dp-indigo-20); color: var(--dp-indigo-100); }
.badge-red     { background: var(--dp-red-20); color: #C43B4E; }
.badge-purple  { background: var(--dp-purple-10); color: var(--dp-purple-100); }

/* hidden-Attribut muss auch gegen display:flex gewinnen */
[hidden] { display: none !important; }