/* ================================================================
   Auftragsbuch Design System
   Einbinden mit: <link rel="stylesheet" href="/design-system.css">
   ================================================================ */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --header:       #1a1a2e;
  --blue:         #2563eb;
  --blue-h:       #1d4ed8;
  --blue-bg:      #eff6ff;
  --blue-b:       #bfdbfe;
  --green:        #059669;
  --green-h:      #047857;
  --green-bg:     #d1fae5;
  --green-b:      #6ee7b7;
  --bg:           #f0f4f8;
  --surface:      #ffffff;
  --text:         #111827;
  --muted:        #6b7280;
  --border:       #e5e7eb;
  --error:        #dc2626;
  --error-bg:     #fef2f2;
  --warning:      #d97706;
  --warning-bg:   #fffbeb;
  --radius:       12px;
  --shadow:       0 2px 12px rgba(0,0,0,.07);
  --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
  font-family:  var(--font);
  background:   var(--bg);
  color:        var(--text);
  font-size:    15px;
  line-height:  1.6;
  min-height:   100vh;
}

/* ── Typografie ─────────────────────────────────────────────────── */
h1 { font-size: 32px; font-weight: 800; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
p  { line-height: 1.6; }

a       { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  max-width: 860px;
  margin: 32px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container--wide  { max-width: 1200px; }
.container--admin { max-width: 1100px; }
.container--form  { max-width: 560px; }

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  background:   var(--header);
  height:       58px;
  padding:      0 32px;
  display:      flex;
  align-items:  center;
  gap:          14px;
  box-shadow:   0 2px 8px rgba(0,0,0,.25);
  position:     sticky;
  top:          0;
  z-index:      100;
}
.nav__logo {
  color:       #ffffff;
  font-size:   15px;
  font-weight: 700;
  margin-right: auto;
}
.nav__link {
  color:       rgba(255,255,255,.75);
  font-size:   14px;
  font-weight: 500;
  transition:  color .15s;
}
.nav__link:hover { color: #ffffff; text-decoration: none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         11px 28px;
  border-radius:   8px;
  font-size:       15px;
  font-weight:     700;
  font-family:     var(--font);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .15s, transform .1s, box-shadow .15s;
  white-space:     nowrap;
}
.btn:active                  { transform: scale(.98); }
.btn:disabled, .btn[disabled]{ opacity: .4; cursor: not-allowed; transform: none; }

.btn--blue               { background: var(--blue);  color: #fff; }
.btn--blue:hover         { background: var(--blue-h); }
.btn--green              { background: var(--green); color: #fff; }
.btn--green:hover        { background: var(--green-h); }
.btn--outline            { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn--outline:hover      { background: var(--blue-bg); }
.btn--ghost              { background: transparent; color: var(--text); }
.btn--ghost:hover        { background: var(--border); }
.btn--sm                 { padding: 7px 16px; font-size: 13px; }
.btn--lg                 { padding: 14px 36px; font-size: 17px; }
.btn--full               { width: 100%; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  overflow:      hidden;
}
.card__header {
  background:  var(--header);
  color:       #ffffff;
  padding:     13px 22px;
  display:     flex;
  align-items: center;
  gap:         10px;
}
.card__header--gray { background: #374151; }
.card__title        { font-size: 14px; font-weight: 600; }
.card__body         { padding: 22px; }
.card__footer       { padding: 14px 22px; border-top: 1px solid var(--border); background: #fafafa; }

/* ── Schritt-Nummer (Badge in Card-Header) ───────────────────────── */
.step-badge {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--blue);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     700;
  flex-shrink:     0;
}

/* ── Formulare ───────────────────────────────────────────────────── */
input, select, textarea {
  padding:      9px 14px;
  border:       1.5px solid var(--border);
  border-radius:8px;
  font-size:    14px;
  font-family:  var(--font);
  background:   var(--surface);
  color:        var(--text);
  width:        100%;
  transition:   border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  outline:      none;
  border-color: var(--blue);
  box-shadow:   0 0 0 4px rgba(37,99,235,.08);
}
label {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom:  5px;
}
.field { display: flex; flex-direction: column; gap: 5px; }

/* ── Badges & Chips ──────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 9px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   600;
  color:         #fff;
  background:    #374151;
  white-space:   nowrap;
}
.badge--blue    { background: var(--blue); }
.badge--green   { background: var(--green); }
.badge--error   { background: var(--error); }
.badge--warning { background: var(--warning); }

.chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 11px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   500;
}
.chip--success  { background: var(--green-bg);  color: #065f46; }
.chip--info     { background: var(--blue-bg);   color: #1e40af; }
.chip--warning  { background: var(--warning-bg);color: #78350f; }
.chip--error    { background: var(--error-bg);  color: #991b1b; }
.chip--neutral  { background: #f3f4f6;           color: var(--muted); }

/* ── Alertboxen ──────────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  padding:       12px 16px;
  font-size:     13px;
  border:        1px solid transparent;
}
.alert--info    { background: var(--blue-bg);    border-color: var(--blue-b);   color: #1e40af; }
.alert--success { background: var(--green-bg);   border-color: var(--green-b);  color: #065f46; }
.alert--warning { background: var(--warning-bg); border-color: #f59e0b;         color: #78350f; }
.alert--error   { background: var(--error-bg);   border-color: #fca5a5;         color: #991b1b; }

/* ── Trennlinie ──────────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Stat-Block (Dashboard-Kennzahlen) ───────────────────────────── */
.stat-value       { font-size: 24px; font-weight: 700; }
.stat-value--blue { color: var(--blue); }
.stat-value--green{ color: var(--green); }
.stat-label       { font-size: 12px; color: var(--muted); }

/* ── Site Footer ─────────────────────────────────────────────────── */
.site-footer {
  border-top:     1px solid var(--border);
  padding:        20px 32px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            12px;
  margin-top:     auto;
  background:     var(--surface);
}
.site-footer__links       { display: flex; gap: 20px; }
.site-footer__links a     { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .15s; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__note        { font-size: 12px; color: var(--muted); }

/* Dark variant (landing, impressum, datenschutz) */
.site-footer--dark {
  background:  transparent;
  border-color: rgba(255,255,255,.08);
}
.site-footer--dark .site-footer__links a { color: #94a3b8; }
.site-footer--dark .site-footer__links a:hover { color: #f8fafc; }
.site-footer--dark .site-footer__note  { color: #94a3b8; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 16px; margin: 16px auto; }

  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15px; }

  .nav          { padding: 0 16px; }
  .card__body   { padding: 16px; }
  .card__header { padding: 11px 16px; }

  .btn--full-mobile { width: 100%; }

  .hide-mobile  { display: none !important; }
}

@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}