/* AUTO-SYNC aus Jarvis/frontend/leithold.css — NICHT hier editieren.
   Änderungen im Master machen, dann Jarvis/deploy/sync-design.sh laufen lassen. */
/* ============================================================================
   LEITHOLD DESIGN SYSTEM v2
   Single source of truth for every Leithold surface (JARVIS, Money, Application
   Autopilot, CCRM, future tools).

   All values are DERIVED FROM leithold.com (measured from the live site's markup
   and screenshots), not invented:
     #1C4D88  primary blue   — top bar, headline sections, primary buttons
     #99D4D2  mint           — active nav, secondary buttons, highlights
     #F79007  orange         — call-to-action (Ilja's choice as accent)
     #17252A  ink            — near-black body/heading text
     #FCFAF5  cream          — warm section background
     #03A9F4  bright blue    — links, focus, data accents
     Poppins  headings · Open Sans  body

   LIGHT IS THE DEFAULT for every Leithold surface (white background, Leithold blue).
   [data-skin="dark"] stays available as an opt-in night mode — never as a default.
   ========================================================================== */

/* ---------- 1. BRAND TOKENS (never override these) ---------- */
:root {
  --lh-blue-900:#0F2E52; --lh-blue-800:#153E6E; --lh-blue:#1C4D88;
  --lh-blue-600:#2C64A8; --lh-blue-400:#5B8FC7; --lh-blue-200:#B9D0E7;
  --lh-mint-700:#4E9C99; --lh-mint-600:#6FB8B5; --lh-mint:#99D4D2;
  --lh-mint-300:#BFE4E2; --lh-mint-100:#E6F4F3;
  --lh-orange-700:#C06B00; --lh-orange:#F79007; --lh-orange-300:#FFC073;
  --lh-ink:#17252A; --lh-ink-700:#2E4148; --lh-grey:#585858;
  --lh-grey-400:#808080; --lh-grey-200:#D5D9DC;
  --lh-cream:#FCFAF5; --lh-white:#FFFFFF;
  --lh-sky:#03A9F4;
  --lh-success:#1D9A6C; --lh-warning:#E0A200; --lh-danger:#C8102E;

  /* type */
  --lh-font-head:"Poppins","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lh-font-body:"Open Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lh-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --lh-fs-display:clamp(2.4rem,5vw,4rem);   /* hero */
  --lh-fs-h1:clamp(1.9rem,3.2vw,2.6rem);
  --lh-fs-h2:clamp(1.4rem,2.2vw,1.85rem);
  --lh-fs-h3:1.15rem; --lh-fs-body:1rem; --lh-fs-sm:.875rem; --lh-fs-xs:.75rem;
  --lh-lh-tight:1.15; --lh-lh-body:1.65;
  --lh-tracking-label:.14em;   /* uppercase labels + buttons, as on the site */

  /* space — 4px base */
  --lh-1:4px; --lh-2:8px; --lh-3:12px; --lh-4:16px; --lh-5:20px; --lh-6:24px;
  --lh-8:32px; --lh-10:40px; --lh-12:48px; --lh-16:64px; --lh-20:80px; --lh-24:96px;

  /* radius — website uses pill buttons + soft cards */
  --lh-r-sm:8px; --lh-r:14px; --lh-r-lg:20px; --lh-r-pill:999px;

  /* elevation */
  --lh-sh-1:0 1px 2px rgba(23,37,42,.05), 0 2px 8px rgba(23,37,42,.05);
  --lh-sh-2:0 2px 6px rgba(23,37,42,.07), 0 12px 32px rgba(23,37,42,.08);
  --lh-sh-3:0 8px 48px rgba(23,37,42,.16);
  --lh-focus:0 0 0 3px rgba(3,169,244,.35);
  --lh-dur:.18s; --lh-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. SEMANTIC LAYER — light skin (default) ---------- */
:root,
[data-skin="light"] {
  --bg:var(--lh-white); --bg-alt:var(--lh-cream); --bg-invert:var(--lh-blue);
  --surface:var(--lh-white); --surface-2:var(--lh-cream); --surface-3:#F1F4F7;
  --border:var(--lh-grey-200); --border-strong:#B9C2C8;
  --text:var(--lh-ink); --text-muted:var(--lh-grey); --text-invert:var(--lh-white);
  --primary:var(--lh-blue); --primary-hover:var(--lh-blue-800);
  --accent:var(--lh-mint); --accent-hover:var(--lh-mint-600);
  --cta:var(--lh-orange); --cta-hover:var(--lh-orange-700); --cta-text:#fff;
  --link:var(--lh-blue-600);
  --ok:var(--lh-success); --warn:var(--lh-warning); --err:var(--lh-danger);
  --shadow:var(--lh-sh-1); --shadow-lg:var(--lh-sh-2);
  color-scheme:light;
}

/* ---------- 3. SEMANTIC LAYER — dark skin (JARVIS command centre) ---------- */
[data-skin="dark"] {
  --bg:#050A14; --bg-alt:#081222; --bg-invert:var(--lh-mint);
  --surface:rgba(11,24,44,.72); --surface-2:#0C1729; --surface-3:#122036;
  --border:rgba(91,143,199,.22); --border-strong:rgba(91,143,199,.42);
  --text:#E2EDF9; --text-muted:#7F98BA; --text-invert:var(--lh-ink);
  --primary:var(--lh-blue-400); --primary-hover:#7FAEDC;
  --accent:var(--lh-mint); --accent-hover:var(--lh-mint-300);
  --cta:var(--lh-orange); --cta-hover:var(--lh-orange-300); --cta-text:#17252A;
  --link:var(--lh-mint);
  --ok:#35E0A1; --warn:#FFC247; --err:#FF5069;
  --shadow:0 0 24px rgba(0,16,38,.4); --shadow-lg:0 0 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- 4. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
body.lh{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--lh-font-body);font-size:var(--lh-fs-body);line-height:var(--lh-lh-body);
  -webkit-font-smoothing:antialiased}
.lh h1,.lh h2,.lh h3,.lh h4,.lh .lh-head{font-family:var(--lh-font-head);
  line-height:var(--lh-lh-tight);font-weight:600;margin:0;color:var(--text)}
.lh h1{font-size:var(--lh-fs-h1)} .lh h2{font-size:var(--lh-fs-h2)} .lh h3{font-size:var(--lh-fs-h3)}
.lh-display{font-family:var(--lh-font-head);font-size:var(--lh-fs-display);font-weight:300;
  line-height:1.05;letter-spacing:.01em}          /* hero style of leithold.com */
.lh a{color:var(--link);text-decoration:none}
.lh a.lh-btn{color:#fff}   /* Buttons behalten ihre eigene Textfarbe */
.lh a:hover{text-decoration:underline}
.lh-muted{color:var(--text-muted)}
.lh-mono{font-family:var(--lh-font-mono);font-variant-numeric:tabular-nums}
.lh-label{font-size:var(--lh-fs-xs);text-transform:uppercase;letter-spacing:var(--lh-tracking-label);
  font-weight:600;color:var(--text-muted)}

/* ---------- 5. LAYOUT ---------- */
.lh-container{width:min(1240px,100% - var(--lh-8));margin-inline:auto}
.lh-section{padding-block:var(--lh-20)}
.lh-section--alt{background:var(--bg-alt)}
.lh-section--invert{background:var(--lh-blue);color:var(--lh-white)}
.lh-section--invert h1,.lh-section--invert h2,.lh-section--invert h3{color:var(--lh-white)}
.lh-grid{display:grid;gap:var(--lh-4)}
.lh-grid--12{grid-template-columns:repeat(12,1fr)}
.lh-grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lh-stack{display:flex;flex-direction:column;gap:var(--lh-3)}
.lh-row{display:flex;align-items:center;gap:var(--lh-3);flex-wrap:wrap}
@media(max-width:900px){.lh-grid--12{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.lh-grid--12{grid-template-columns:1fr}.lh-section{padding-block:var(--lh-12)}}

/* ---------- 6. BUTTONS (pill + uppercase, exactly the website's language) ---- */
.lh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lh-2);
  font-family:var(--lh-font-body);font-size:var(--lh-fs-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--lh-tracking-label);
  padding:14px 30px;border-radius:var(--lh-r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:all var(--lh-dur) var(--lh-ease);text-decoration:none!important;
  background:var(--primary);color:#fff}
.lh-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--lh-sh-2)}
.lh-btn:focus-visible{outline:none;box-shadow:var(--lh-focus)}
.lh-btn--cta,.lh a.lh-btn--cta{background:var(--cta);color:var(--cta-text)}
.lh-btn--cta:hover{background:var(--cta-hover)}
.lh-btn--mint,.lh a.lh-btn--mint{background:var(--lh-mint);color:var(--lh-ink)}
.lh-btn--mint:hover{background:var(--lh-mint-600);color:#fff}
.lh-btn--ghost,.lh a.lh-btn--ghost{background:transparent;border-color:currentColor;color:var(--text)}
.lh-btn--ghost:hover{background:var(--text);color:var(--bg)}
.lh-btn--on-image,.lh a.lh-btn--on-image{background:transparent;border-color:#fff;color:#fff}
.lh-btn--on-image:hover{background:#fff;color:var(--lh-ink)}
.lh-btn--sm{padding:9px 18px;font-size:var(--lh-fs-xs)}
.lh-btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- 7. CARDS ---------- */
.lh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--lh-r);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.lh-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--lh-3);
  padding:var(--lh-3) var(--lh-4);border-bottom:1px solid var(--border)}
.lh-card__title{font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:var(--lh-tracking-label);font-weight:700;color:var(--primary)}
.lh-card__meta{font-size:var(--lh-fs-xs);color:var(--text-muted)}
.lh-card__body{padding:var(--lh-4);flex:1}
.lh-card--flat{box-shadow:none}
.lh-card--accent{border-top:3px solid var(--accent)}

/* metric tile */
.lh-metric{border:1px solid var(--border);border-radius:var(--lh-r-sm);padding:var(--lh-3);
  background:var(--surface-2)}
.lh-metric__value{font-family:var(--lh-font-mono);font-size:1.4rem;font-weight:700;color:var(--primary)}
.lh-metric__label{font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);margin-top:2px}

/* ---------- 8. FORMS ---------- */
.lh-field{display:flex;flex-direction:column;gap:6px}
.lh-input,.lh-select,.lh-textarea{width:100%;font-family:inherit;font-size:var(--lh-fs-body);
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--lh-r-sm);padding:11px 14px;transition:border-color var(--lh-dur)}
.lh-input:focus,.lh-select:focus,.lh-textarea:focus{outline:none;border-color:var(--lh-sky);
  box-shadow:var(--lh-focus)}
.lh-input::placeholder{color:var(--text-muted)}
.lh-help{font-size:var(--lh-fs-xs);color:var(--text-muted)}

/* ---------- 9. TABLE ---------- */
.lh-table{width:100%;border-collapse:collapse;font-size:var(--lh-fs-sm)}
.lh-table th{text-align:left;font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);font-weight:700;
  padding:var(--lh-3);border-bottom:1px solid var(--border)}
.lh-table td{padding:var(--lh-3);border-bottom:1px solid var(--border)}
.lh-table tr:hover td{background:var(--surface-2)}

/* ---------- 10. STATUS ---------- */
.lh-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--lh-fs-xs);font-weight:700;
  padding:4px 11px;border-radius:var(--lh-r-pill);text-transform:uppercase;letter-spacing:.08em;
  background:var(--lh-mint-100);color:var(--lh-mint-700)}
[data-skin="dark"] .lh-badge{background:rgba(153,212,210,.14);color:var(--lh-mint)}
.lh-badge--ok{background:rgba(29,154,108,.13);color:var(--ok)}
.lh-badge--warn{background:rgba(224,162,0,.15);color:var(--warn)}
.lh-badge--err{background:rgba(200,16,46,.12);color:var(--err)}
.lh-badge--cta{background:rgba(247,144,7,.15);color:var(--lh-orange-700)}
[data-skin="dark"] .lh-badge--cta{color:var(--lh-orange-300)}
.lh-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:none}
.lh-dot--ok{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.lh-dot--warn{background:var(--warn)} .lh-dot--err{background:var(--err)}

/* progress */
.lh-track{height:6px;border-radius:var(--lh-r-pill);background:var(--surface-3);overflow:hidden}
.lh-track>i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--lh-blue-400),var(--primary))}
.lh-track--warn>i{background:linear-gradient(90deg,var(--lh-orange-300),var(--lh-orange))}
.lh-track--err>i{background:linear-gradient(90deg,#ff7b8c,var(--err))}

/* ---------- 11. NAVIGATION (mirrors leithold.com header) ---------- */
.lh-topbar{background:var(--lh-blue);color:#fff;font-size:var(--lh-fs-sm)}
.lh-topbar a{color:#fff}
.lh-header{background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:stretch;justify-content:space-between;gap:var(--lh-4)}
.lh-header__brand{display:flex;align-items:center;gap:var(--lh-3);padding:var(--lh-4)}
.lh-nav{display:flex}
.lh-nav a{display:flex;align-items:center;padding:0 var(--lh-5);color:var(--text);
  font-size:var(--lh-fs-sm);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  text-decoration:none;transition:background var(--lh-dur)}
.lh-nav a:hover{background:var(--lh-mint-100);text-decoration:none}
.lh-nav a.is-active{background:var(--lh-mint);color:var(--lh-ink)}   /* the website's active state */
[data-skin="dark"] .lh-nav a:hover{background:rgba(153,212,210,.12)}
[data-skin="dark"] .lh-nav a.is-active{background:var(--lh-mint);color:var(--lh-ink)}

/* sidebar */
.lh-sidebar{background:var(--surface);border-right:1px solid var(--border);
  padding:var(--lh-4);display:flex;flex-direction:column;gap:var(--lh-1)}
.lh-sidebar a{display:flex;align-items:center;gap:var(--lh-3);padding:10px var(--lh-3);
  border-radius:var(--lh-r-sm);color:var(--text);font-size:var(--lh-fs-sm);text-decoration:none}
.lh-sidebar a:hover{background:var(--surface-2);text-decoration:none}
.lh-sidebar a.is-active{background:var(--lh-mint-100);color:var(--lh-blue);font-weight:600}

/* ---------- 12. HERO (image + overlay + display type) ---------- */
.lh-hero{position:relative;min-height:min(72vh,620px);display:flex;align-items:center;
  color:#fff;background-size:cover;background-position:center}
.lh-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,37,42,.72),rgba(23,37,42,.25))}
.lh-hero>*{position:relative;z-index:1}
.lh-hero h1,.lh-hero .lh-display{color:#fff}
.lh-hero p{max-width:46ch;font-size:1.1rem;opacity:.94}

/* ---------- 13. FEEDBACK ---------- */
.lh-toast{display:flex;gap:var(--lh-3);align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:var(--lh-r-sm);padding:var(--lh-3) var(--lh-4);box-shadow:var(--lh-sh-2)}
.lh-toast--ok{border-left-color:var(--ok)} .lh-toast--warn{border-left-color:var(--warn)}
.lh-toast--err{border-left-color:var(--err)}
.lh-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:100;
  background:rgba(23,37,42,.55);backdrop-filter:blur(3px)}
.lh-modal__box{background:var(--surface);border-radius:var(--lh-r-lg);box-shadow:var(--lh-sh-3);
  width:min(560px,92vw);max-height:86vh;overflow:auto}
.lh-skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;animation:lh-shimmer 1.3s infinite;border-radius:var(--lh-r-sm)}
@keyframes lh-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- 14. UTILITIES ---------- */
.lh-divider{height:1px;background:var(--border);border:0}
.lh-scroll-x{overflow-x:auto}
.lh-center{text-align:center}
.lh-mt-0{margin-top:0}.lh-mt-2{margin-top:var(--lh-2)}.lh-mt-4{margin-top:var(--lh-4)}
.lh-mt-6{margin-top:var(--lh-6)}.lh-mb-4{margin-bottom:var(--lh-4)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}