@import url('/css/fonts/instrument-sans.css');@import url('/css/fonts/jetbrains-mono.css');
/* fonts.css */
/* NexoGraph webfonts.
   Source: Google Fonts, exactly the families named in NexoGraph-Vorgaben.md.
   The Vorgaben ship a <link> tag; this @import is the same stylesheet so the
   font closure travels with the design system. */


/* colors.css */
:root{
/* --- Base: Akzent (Microsoft-Blau) --- */
--nx-accent:#0078D4;
--nx-accent-hover:#005A9E;
--nx-accent-deep:#004578;

/* --- Base: Flaechen --- */
--nx-surface-light:#FFFFFF;
--nx-surface-quiet:#F3F7FA;
--nx-surface-blue-light:#EFF6FC;
--nx-surface-blue-strong:#DEECF9;
--nx-surface-blue-active:#C7E0F4;

/* --- Base: Text --- */
--nx-text-strong:#10243B;
--nx-text-normal:#3A4A5A;
--nx-text-quiet:#5A6B7D;
--nx-text-faint:#6B7A8C;

/* --- Base: Semantik --- */
--nx-success:#107C10;
--nx-success-surface:#DFF6DD;
--nx-error:#A80000;
--nx-error-surface:#FDE7E9;

/* --- Semantic aliases: Flaeche --- */
--surface-page:var(--nx-surface-light);
--surface-card:var(--nx-surface-quiet);
--surface-card-highlight:var(--nx-surface-blue-strong);
--surface-subtle:var(--nx-surface-blue-light);
--surface-active:var(--nx-surface-blue-active);
--surface-inverse:var(--nx-text-strong);

/* --- Semantic aliases: Text --- */
--text-heading:var(--nx-text-strong);
--text-body:var(--nx-text-normal);
--text-muted:var(--nx-text-quiet);
--text-faint:var(--nx-text-faint);
--text-accent:var(--nx-accent);
--text-on-accent:#FFFFFF;
--text-on-inverse:#FFFFFF;

/* --- Semantic aliases: interaktiv --- */
--action-bg:var(--nx-accent);
--action-bg-hover:var(--nx-accent-hover);
--action-bg-active:var(--nx-accent-deep);
--action-fg:#FFFFFF;
--action-ghost-bg:transparent;
--action-ghost-bg-hover:var(--nx-surface-blue-light);
--action-ghost-bg-active:var(--nx-surface-blue-strong);
--link-color:var(--nx-accent);
--link-color-hover:var(--nx-accent-hover);
--focus-ring:var(--nx-accent);

/* --- Semantic aliases: Linien --- */
--border-hairline:#E3EBF2;
--border-strong:#C7D6E4;
--border-accent:var(--nx-accent);

/* --- Semantic aliases: Status --- */
--status-success-fg:var(--nx-success);
--status-success-bg:var(--nx-success-surface);
--status-error-fg:var(--nx-error);
--status-error-bg:var(--nx-error-surface);
--status-info-fg:var(--nx-accent-deep);
--status-info-bg:var(--nx-surface-blue-light);
}

/* typography.css */
:root{
/* --- Familien --- */
--font-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono","SF Mono",Menlo,monospace;
--font-body:var(--font-sans);
--font-heading:var(--font-sans);
--font-label:var(--font-mono);

/* --- Groessen --- */
--text-display:clamp(44px,5.2vw,68px);
--text-h1:clamp(38px,4.4vw,54px);
--text-h2:clamp(30px,3.2vw,40px);
--text-h3:26px;
--text-h4:20px;
--text-lead:20px;
--text-base:16px;
--text-sm:14px;
--text-xs:13px;
--text-label:11px;

/* --- Gewichte --- */
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

/* --- Zeilenhoehe --- */
--leading-display:1.04;
--leading-heading:1.12;
--leading-snug:1.35;
--leading-body:1.62;
--leading-label:1.2;

/* --- Laufweite --- */
--tracking-heading:-.03em;
--tracking-tight:-.01em;
--tracking-normal:0;
--tracking-label:.16em;

/* --- Masse --- */
--measure-prose:68ch;
}

/* spacing.css */
:root{
/* Basisskala */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:26px;
--space-7:30px;
--space-8:40px;
--space-9:56px;
--space-10:72px;
--space-11:96px;
--space-12:104px;

/* Layout (Vorgaben) */
--layout-max:1240px;
--layout-gutter:40px;
--section-y:96px;
--section-y-lg:104px;
--grid-gap:16px;
--grid-gap-lg:20px;
--card-padding:26px;
--card-padding-lg:30px;
}

/* shape.css */
:root{
/* Radien */
--radius-xs:6px;
--radius-sm:8px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:18px;
--radius-pill:999px;
--radius-card:16px;
--radius-card-lg:18px;
--radius-control:10px;

/* Linienstaerken */
--stroke-hairline:1px;
--stroke-strong:1.5px;

/* Schatten - flach und blaustichig, nie weich-grau */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(16,36,59,.06);
--shadow-md:0 2px 10px rgba(16,36,59,.07);
--shadow-lg:0 12px 32px rgba(16,36,59,.10);
--shadow-focus:0 0 0 3px rgba(0,120,212,.28);
}

/* motion.css */
:root{
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:180ms; /* @kind other */
--duration-slow:260ms; /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}

/* base.css */
/* Minimale Grundlagen. Bewusst klein - das System liefert Tokens, keine Resets fuer fremde Seiten. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body)}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-heading);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0}
h1 em,h2 em,h3 em{font-style:italic;color:var(--text-accent);font-weight:inherit}
p{margin:0;text-wrap:pretty}
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-color-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--surface-blue-active,#C7E0F4);color:var(--text-heading)}