/* eqon Design System – Tokens (Kopie aus EQON\\Design System eqon\\tokens, 29.09.2026) */
/* Schriften – selbst ausgeliefert (SIL Open Font License, siehe schriften/LICENSE-*.txt) */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("schriften/hanken-grotesk-latin-400-normal.78c2be80e151.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/hanken-grotesk-latin-500-normal.8d6eb9d4c9c2.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("schriften/hanken-grotesk-latin-600-normal.0c156079a0be.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("schriften/hanken-grotesk-latin-700-normal.f3223a1e6b4c.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("schriften/hanken-grotesk-latin-ext-400-normal.466fba76f059.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/hanken-grotesk-latin-ext-500-normal.ea0ccbfbb9f2.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("schriften/hanken-grotesk-latin-ext-600-normal.77bef396d907.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("schriften/hanken-grotesk-latin-ext-700-normal.b91e9ab43544.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("schriften/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("schriften/ibm-plex-mono-latin-ext-400-normal.8450d5944de2.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/ibm-plex-mono-latin-ext-500-normal.fa8d8838b94a.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   medeqon Design System — single source of truth for tokens
   ============================================================
   TWO RENDER CONTEXTS, ONE SYSTEM:
   • WEB — Hanken Grotesk (text+display) + IBM Plex Mono (labels),
     loaded via @import so the site looks identical on every device.
   • OFFICE (Word/PowerPoint/Outlook) — those webfonts aren't
     installed, so the stack falls through to Aptos (M365/Win11
     default). Documents/PPTX render in Aptos natively, no embed.
   ============================================================ */

/* Schriften liefert eqon selbst aus (schriften.css) – kein Abruf bei Google. */
:root {
  /* COLOR — Brand: nur drei Blautöne (Festlegung Georg 05.10.2026): medeqon-Blau #004aad, Hell #e8eef7, Navy #0a1228.
     Die Stufen bleiben als Namen erhalten und zeigen auf diese drei Farben. */
  --brand-50:  #e8eef7;
  --brand-100: #e8eef7;
  --brand-200: #e8eef7;
  --brand-300: #e8eef7;
  --brand-400: #004aad;
  --brand-500: #004aad;  /* CORE — the medeqon blue */
  --brand-600: #004aad;
  --brand-700: #0a1228;
  --brand-800: #0a1228;
  --brand-900: #0a1228;

  /* COLOR — Neutral (cool gray, faint blue tilt) */
  --neutral-0:    #ffffff;
  --neutral-25:   #fbfcfd;
  --neutral-50:   #f7f8fa;
  --neutral-100:  #eef0f3;
  --neutral-200:  #dee1e7;
  --neutral-300:  #c4c9d2;
  --neutral-400:  #9aa1ae;
  --neutral-500:  #6b7383;
  --neutral-600:  #4a5160;
  --neutral-700:  #333947;
  --neutral-800:  #1f2530;
  --neutral-900:  #131822;
  --neutral-950:  #0a0e14;

  /* COLOR — Deep navy (hero dark surfaces) */
  --deep-700: #0a1228;
  --deep-800: #0a1228;
  --deep-900: #0a1228;

  /* COLOR — Semantic */
  --success-50:  #ecf6f0;  --success-500: #2e8654;  --success-700: #1f5e3a;
  --warning-50:  #fdf4e6;  --warning-500: #c98615;  --warning-700: #8a5a0a;
  --danger-50:   #fceeee;  --danger-500:  #c0392b;  --danger-700:  #8a261c;
  --info-50:     var(--brand-50);
  --info-500:    var(--brand-500);
  --info-700:    var(--brand-700);

  /* COLOR — Semantic role tokens */
  --fg-1:        var(--neutral-900);   /* primary text */
  --fg-2:        var(--neutral-700);   /* secondary text */
  --fg-3:        var(--neutral-500);   /* tertiary / captions */
  --fg-4:        var(--neutral-400);   /* placeholder, disabled */
  --fg-on-brand: var(--neutral-0);
  --fg-on-deep:  var(--neutral-0);
  --fg-link:     var(--brand-600);

  --bg-canvas:    var(--neutral-50);
  --bg-surface:   var(--neutral-0);
  --bg-raised:    var(--neutral-0);
  --bg-sunken:    var(--neutral-100);
  --bg-deep:      var(--deep-800);
  --bg-brand:     var(--brand-500);
  --bg-brand-soft: var(--brand-50);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--brand-500);
  --border-focus:   var(--brand-500);

  /* TYPE — Families.
     Web visitors load Hanken Grotesk; Office falls through to Aptos. */
  --font-sans:    'Hanken Grotesk', 'Aptos', 'Segoe UI Variable', 'Segoe UI', Calibri, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Hanken Grotesk', 'Aptos Display', 'Aptos', 'Segoe UI Variable Display', 'Segoe UI', Calibri, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* Technical labels / codes / tabular data. Web loads IBM Plex Mono;
     Office falls through to Consolas (Office-safe). */
  --font-mono:    'IBM Plex Mono', Consolas, 'Cascadia Mono', 'Courier New', monospace;

  /* TYPE — Scale */
  --text-2xs:  11px;  --text-xs:   12px;  --text-sm:   14px;
  --text-base: 16px;  --text-md:   18px;  --text-lg:   20px;
  --text-xl:   24px;  --text-2xl:  30px;  --text-3xl:  38px;
  --text-4xl:  48px;  --text-5xl:  64px;  --text-6xl:  80px;  --text-7xl:  104px;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800;

  --leading-tight: 1.05; --leading-snug: 1.20; --leading-normal: 1.45; --leading-relaxed: 1.60;
  --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em;

  /* SPACING — 4pt grid */
  --space-0: 0;     --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;
  --space-24: 96px; --space-32: 128px; --space-40: 160px;

  /* RADIUS */
  --radius-none: 0px;
  --radius-sm:   6px;   /* inputs, buttons, chips */
  --radius-md:   10px;  /* cards, modals */
  --radius-lg:   16px;  /* feature cards */
  --radius-xl:   20px;  /* hero panels */
  --radius-pill: 999px; /* status badges */

  /* SHADOW */
  --shadow-xs: 0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(0, 74, 173, 0.20);

  /* MOTION */
  --ease-out:    cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0); /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 180ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
  --dur-reveal: 480ms; /* @kind other */

  /* LAYOUT */
  --content-max: 1280px; --app-max: 1440px; --header-h: 64px; --sidebar-w: 240px;
}

/* ============================================================
   SEMANTIC TYPE — apply these classes to elements
   ============================================================ */
.t-eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); }

.t-display-1 { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.t-display-2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.t-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg-1); }
.t-h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg-1); }
.t-h5 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg-1); }

.t-lead { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.t-body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.t-body-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-2); }
.t-caption { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-3); }
.t-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--fg-1); }

/* Data — tabular figures for column alignment without going mono */
.t-data { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); font-feature-settings: 'tnum' 1, 'lnum' 1; color: var(--fg-1); letter-spacing: -0.005em; }
/* Identifier — replaces mono codes like "PRJ-2026-014" */
.t-id { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-feature-settings: 'tnum' 1, 'lnum' 1; letter-spacing: 0.02em; color: var(--fg-3); }

a.t-link, .t-link { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--dur-fast) var(--ease-out); }
a.t-link:hover, .t-link:hover { text-decoration-thickness: 2px; }

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-500); color: var(--neutral-0); }
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* eqon — application tokens on top of the medeqon foundations.
   eqon = equipment online: planning, cost estimation, project history, CRM. */
:root {
  /* Brand */
  --eqon-blue:        var(--brand-500);
  --eqon-navy:        var(--deep-800);
  --eqon-dot-on-dark: var(--brand-500);   /* Punkt auf Navy: medeqon-Blau (05.10.2026) */

  /* App shell */
  --eqon-header-h:     56px;
  --eqon-sidebar-w:    240px;
  --eqon-sidebar-w-collapsed: 64px;
  --eqon-sidebar-bg:   var(--deep-800);
  --eqon-sidebar-fg:   var(--neutral-300);
  --eqon-sidebar-fg-active: var(--neutral-0);
  --eqon-sidebar-hover: rgba(255, 255, 255, 0.06);
  --eqon-sidebar-active: rgba(232, 238, 247, 0.12);
  --eqon-page-pad:     32px;

  /* Data density */
  --eqon-row-h:         40px;
  --eqon-row-h-compact: 32px;
  --eqon-cell-px:       12px;
  --eqon-table-head-bg: var(--neutral-50);
  --eqon-row-hover:     var(--brand-50);
  --eqon-row-selected:  var(--brand-50);

  /* Controls */
  --eqon-control-h:    36px;
  --eqon-control-h-sm: 28px;

  /* Project status (signal dot = done/active, open ring = pending) */
  --eqon-status-draft:     var(--neutral-400);
  --eqon-status-planning:  var(--brand-500);
  --eqon-status-review:    var(--warning-500);
  --eqon-status-approved:  var(--success-500);
  --eqon-status-closed:    var(--neutral-600);
  --eqon-status-risk:      var(--danger-500);

  /* Cost figures */
  --eqon-cost-positive: var(--success-700);
  --eqon-cost-negative: var(--danger-700);
}