/* ============================================================
   SBA Design-System — Base
   Tokens · Reset · Typografie · Basis-Komponenten
   Quelle: SBA App-Kit (Claude Design Export), Token-Layer 1:1
   ============================================================ */

:root {
  /* ---- Navy (Primär) ---- */
  --sba-navy:          #1a3a6b;
  --sba-navy-light:    #2a5298;
  --sba-navy-deep:     #0f2548;
  --sba-navy-faint:    #e8eef6;
  --sba-surface-blue:  #f0f4f8;

  /* ---- Neutral ---- */
  --sba-ink:           #1e293b;
  --sba-ink-2:         #334155;
  --sba-muted:         #64748b;
  --sba-border:        #d1d9e6;
  --sba-line-soft:     #edf1f7;
  --sba-faint:         #eef2f7;
  --sba-page:          #f4f6fa;
  --sba-cream:         #fafaf6;
  --sba-white:         #ffffff;

  /* ---- Lime (Sekundär) ---- */
  --sba-lime:          #d5f542;
  --sba-lime-bright:   #e4fa72;
  --sba-lime-deep:     #a6c41f;
  --sba-lime-soft:     #eef7c2;
  --sba-lime-ink:      #1a3a6b;  /* Text AUF Lime = Navy */

  /* ---- Semantisch ---- */
  --sba-success:#16a34a; --sba-success-bg:#ecfdf5; --sba-success-ink:#166534;
  --sba-warn:#f59e0b;    --sba-warn-bg:#fffbeb;    --sba-warn-ink:#92400e;
  --sba-error:#ef4444;   --sba-error-bg:#fef2f2;   --sba-error-ink:#991b1b;

  /* ---- Verläufe ---- */
  --sba-grad-navy: linear-gradient(135deg, var(--sba-navy), var(--sba-navy-light));
  --sba-grad-duo:  linear-gradient(90deg, var(--sba-navy), var(--sba-lime));

  /* ---- Typografie ---- */
  --font-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Times New Roman', Times, Georgia, serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:44px; --lh-display:1.05;
  --fs-h1:32px;      --lh-h1:1.12;
  --fs-h2:24px;      --lh-h2:1.2;
  --fs-h3:18px;      --lh-h3:1.3;
  --fs-body:15px;    --lh-body:1.6;
  --fs-sm:13px;      --lh-sm:1.5;
  --fs-xs:11px;      --lh-xs:1.4;
  --tracking-eyebrow:.06em; --tracking-tight:-.02em;

  /* ---- Form / Tiefe ---- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-2xl:14px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(15,37,72,.04), 0 1px 3px rgba(15,37,72,.06);
  --shadow-pop:0 8px 30px rgba(0,0,0,.22);
  --focus-ring:0 0 0 3px rgba(26,58,107,.22);

  /* ---- Spacing (4px-Basis) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --dur-fast:.12s; --dur-base:.15s; --dur-slow:.25s;

  /* ---- Layout ---- */
  --maxw:1120px;
  --pad-x:44px;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--sba-ink);
  background:var(--sba-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--sba-navy); text-decoration:none; transition:color var(--dur-base) var(--ease-standard); }
a:hover { color:var(--sba-navy-light); }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

/* ---- Typografie-Helfer (authentisch aus dem System) ---- */
h1,.sba-h1 { font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--tracking-tight); color:var(--sba-navy); }
h2,.sba-h2 { font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-h2); line-height:var(--lh-h2); color:var(--sba-ink); }
h3,.sba-h3 { font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--sba-ink); }
.sba-display  { font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--tracking-tight); color:var(--sba-navy); }
.sba-eyebrow  { font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--fs-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--sba-muted); }
.sba-mono     { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--sba-navy); }
.sba-editorial{ font-family:var(--font-serif); font-style:italic; color:var(--sba-ink); }
p { color:var(--sba-ink); }

/* ---- Buttons ---- */
.sba-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-body); line-height:1;
  padding:14px 26px; border-radius:var(--radius-md); border:2px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
/* Primär = Lime-Fläche mit Navy-Text (Marken-Signatur) */
.sba-btn-primary   { background:var(--sba-lime); color:var(--sba-lime-ink); border-color:var(--sba-lime); }
.sba-btn-primary:hover { background:var(--sba-lime-bright); border-color:var(--sba-lime-bright); transform:translateY(-1px); }
/* Sekundär = Outline */
.sba-btn-secondary { background:transparent; color:var(--sba-navy); border-color:var(--sba-border); }
.sba-btn-secondary:hover { border-color:var(--sba-navy); }

/* ---- Cards ---- */
.sba-card {
  background:var(--sba-white); border:1px solid var(--sba-border);
  border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-card);
  transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.sba-card:hover { border-color:var(--sba-navy-light); box-shadow:0 6px 20px rgba(15,37,72,.10); transform:translateY(-3px); }
.sba-card-icon { display:flex; color:var(--sba-navy); margin-bottom:var(--space-4); }
.sba-card h3 { margin-bottom:var(--space-3); }
.sba-card p  { color:var(--sba-muted); }

/* ---- Trust-Badges ---- */
.sba-trust-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--sba-navy-faint); color:var(--sba-navy);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  padding:9px 15px; border-radius:var(--radius-pill);
}
.sba-trust-badge svg { width:18px; height:18px; color:var(--sba-lime-deep); flex:none; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }