/* x10aix — colour system.
   One warm-dark palette. Unchanged by the September 2026 type revision —
   the colour system was always single-mode.
   Base values are lifted verbatim from index.html, campaign-assets/style.css
   and assets/ki-kompass/ki-kompass.css. Do not round or "correct" them. */
:root{
  /* ── Surfaces (warm near-black browns) ── */
  --x-bg:#2a2420;              /* page background, both modes */
  --x-bg-raised:#2d2520;       /* cards, question blocks, inputs-on-panel */
  --x-bg-sunken:#221e1a;       /* inset blocks, pillar detail, module content */
  --x-bg-terminal:#1a1612;     /* inside a screen panel — the "screen" */
  --x-bg-overlay:20 18 15; /* @kind other */     /* rgb triple for hero protection gradients */

  /* ── Ink ── */
  --x-ink-bright:#e8d4a0;      /* headings, logo, terminal accent */
  --x-ink:#d4c5a9;             /* body copy */
  --x-ink-soft:#c4b59a;        /* secondary paragraph copy */
  --x-ink-muted:#a89968;       /* labels, taglines, nav idle */
  --x-ink-faint:#8a7d68;       /* footer, disclaimers */
  --x-ink-ghost:#6b5d4f;       /* smallest print, placeholder */

  /* ── Lines ── */
  --x-line-hair:#4a3f2f;       /* 0.5px hairlines — the default border */
  --x-line:#5a4d3f;            /* 1px control borders */
  --x-line-strong:#6b5d4f;     /* screen-panel frames, field borders */
  --x-line-quiet:#3a3228;      /* faintest divider */

  /* ── EEEE cycle: the brand's four-phase framework ── */
  --x-enable:#e8a030;          /* ENABLE — amber */
  --x-establish:#00bcd4;       /* ESTABLISH — cyan */
  --x-execute:#5fd35f;         /* EXECUTE — green */
  --x-evolve:#6b8db8;          /* EVOLVE — steel blue */

  /* ── Functional accents ── */
  --x-blue:#6b8db8;            /* primary interactive (buttons, focus) */
  --x-blue-deep:#4a6b8a;       /* pressed / filled button ground */
  --x-blue-light:#a8c8e8;      /* form labels, table headers, sub-headings */
  --x-cyan-doc:#7dd3e8;        /* Dokument-mode link + accent */
  --x-cyan-doc-hover:#a8e8f4;
  --x-green:#5fd35f;           /* ONLINE / positive */
  --x-amber:#e8a030;           /* CTA emphasis, warnings */
  --x-red:#d35f5f;             /* negative — deeper */
  --x-red-soft:#f08080;        /* negative — on tinted grounds */

  /* ── Status bar (the blue DOS strip) ── */
  --x-statusbar-bg:#1a3d5c;
  --x-statusbar-line:#4a6b8a;

  /* ── Tinted grounds: accent at 10–15% over the warm ground ── */
  --x-tint-enable:rgba(232,160,48,.1);
  --x-tint-establish:rgba(0,188,212,.1);
  --x-tint-execute:rgba(95,211,95,.1);
  --x-tint-evolve:rgba(107,141,184,.1);
  --x-tint-red:rgba(240,128,128,.1);
  --x-tint-white:rgba(255,255,255,.05);

  /* ── Semantic aliases ── */
  --x-text-body:var(--x-ink);
  --x-text-heading:var(--x-ink-bright);
  --x-text-label:var(--x-blue-light);
  --x-surface-page:var(--x-bg);
  --x-surface-card:var(--x-bg-raised);
  --x-surface-screen:var(--x-bg-terminal);
  --x-border-card:var(--x-line);
  --x-border-frame:var(--x-line-strong);
  --x-border-hair:var(--x-line-hair);
  --x-link:var(--x-cyan-doc);
  --x-link-hover:var(--x-cyan-doc-hover);
  --x-focus:var(--x-blue);
}


/* x10aix — typography.
   ONE scale, one reading face. Revised September 2026.

   The system used to run two type modes (a VT323 bitmap "Terminal" mode and a
   sans "Dokument" mode). It no longer does: the bitmap face forced a ~20px
   floor for legibility, which made every dense screen feel crowded. The
   KI-Kompass face is now the system face at every size.

   VT323 survives as a DISPLAY face only — the wordmark and standalone numerals
   (assessment score, prices). Never set a sentence in it. */
@font-face{
  font-family:'VT323';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/vt323.ttf") format("truetype");
}
:root{
  /* ── Families ── */
  --x-font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --x-font-display:'VT323','Courier New',Courier,monospace;  /* wordmark + numerals ONLY */
  --x-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;  /* prompt lines, code */

  /* ── The one type scale ── */
  --x-fs-wordmark:48px;   /* VT323 — page wordmark */
  --x-fs-numeral:72px;    /* VT323 — assessment score */
  --x-fs-h1:34px;         /* hero title */
  --x-fs-h2:24px;         /* section title */
  --x-fs-h3:18px;         /* card + panel heading */
  --x-fs-h4:16px;         /* sub-heading */
  --x-fs-lead:16.5px;     /* lead paragraph */
  --x-fs-body:15px;       /* default body */
  --x-fs-body-sm:13.5px;  /* dense body, table cells, card copy */
  --x-fs-ui:12.5px;       /* nav, status strip, buttons, footer */
  --x-fs-meta:11.5px;     /* captions, riders */
  --x-fs-micro:11px;      /* eyebrows, badges */
  --x-fs-nano:10px;       /* rail eyebrow */

  /* ── Weights (the sans has real weights; use them instead of size jumps) ── */
  --x-weight-body:400;
  --x-weight-medium:500;
  --x-weight-strong:600;
  --x-weight-bold:700;

  /* ── Line heights ── */
  --x-lh-tight:1.15; /* @kind other */
  --x-lh-head:1.3; /* @kind other */
  --x-lh-body:1.55; /* @kind other */
  --x-lh-prose:1.65; /* @kind other */

  /* ── Tracking ── */
  --x-ls-wordmark:4px; /* @kind other */
  --x-ls-display:.5px; /* @kind other */
  --x-ls-ui:.02em; /* @kind other */
  --x-ls-eyebrow:.06em; /* @kind other */
  --x-ls-eyebrow-wide:.1em; /* @kind other */

  /* Pixel drop-shadow — wordmark only, never on running text */
  --x-text-shadow-pixel:2px 2px 0 #4a3f2f,4px 4px 0 rgba(0,0,0,.5); /* @kind shadow */
  --x-text-shadow-legible:0 0 20px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,.8); /* @kind shadow */

  /* ── Legacy aliases ───────────────────────────────────────────────────
     Kept so existing markup keeps working. Both former scales now resolve
     into the single scale above. Prefer --x-fs-* in new work. */
  --x-font-terminal:var(--x-font-ui);
  --x-font-doc:var(--x-font-ui);
  --x-font-code:var(--x-font-mono);
  --x-t-logo:var(--x-fs-wordmark);
  --x-t-h1:var(--x-fs-h1);
  --x-t-display:var(--x-fs-h2);
  --x-t-h2:var(--x-fs-h3);
  --x-t-h3:var(--x-fs-h3);
  --x-t-lead:var(--x-fs-lead);
  --x-t-body:var(--x-fs-body);
  --x-t-body-sm:var(--x-fs-body-sm);
  --x-t-ui:var(--x-fs-ui);
  --x-t-meta:var(--x-fs-meta);
  --x-t-score:var(--x-fs-numeral);
  --x-d-h1:var(--x-fs-h1);
  --x-d-h2:var(--x-fs-h3);
  --x-d-h3:var(--x-fs-h4);
  --x-d-body:var(--x-fs-body);
  --x-d-body-sm:var(--x-fs-body-sm);
  --x-d-ui:var(--x-fs-ui);
  --x-d-micro:var(--x-fs-micro);
  --x-d-nano:var(--x-fs-nano);
  --x-lh-doc:var(--x-lh-prose);
  --x-lh-terminal:var(--x-lh-body);
  --x-ls-logo:var(--x-ls-wordmark);
  --x-ls-head:var(--x-ls-display);
  --x-weight-doc-strong:var(--x-weight-strong);
  --x-weight-doc-bold:var(--x-weight-bold);
}


/* x10aix — spacing & layout.
   UI and layout work in round 5px multiples (8/10/12/15/20/25/30/40).
   Prose blocks work in rem fractions off a 16px root (.4/.5/.75/1/1.25/1.5/2/2.5/3). */
:root{
  --x-s-1:4px;
  --x-s-2:8px;
  --x-s-3:10px;
  --x-s-4:12px;
  --x-s-5:15px;
  --x-s-6:20px;
  --x-s-7:25px;
  --x-s-8:30px;
  --x-s-9:40px;
  --x-s-10:60px;

  --x-d-s-1:.4rem;
  --x-d-s-2:.5rem;
  --x-d-s-3:.75rem;
  --x-d-s-4:1rem;
  --x-d-s-5:1.25rem;
  --x-d-s-6:1.5rem;
  --x-d-s-7:2rem;
  --x-d-s-8:2.5rem;
  --x-d-s-9:3rem;

  /* Containers */
  --x-container:1200px; /* @kind spacing */        /* marketing site */
  --x-container-tool:900px; /* @kind spacing */    /* assessment / tools */
  --x-container-doc:1100px; /* @kind spacing */    /* Dokument shell incl. sidebar */
  --x-measure-doc:760px; /* @kind spacing */       /* Dokument reading column */
  --x-measure-prose:680px; /* @kind spacing */     /* inline figures max width */
  --x-measure-hero:800px; /* @kind spacing */      /* hero paragraph */
  --x-measure-form:600px; /* @kind spacing */      /* form container */
  --x-sidebar-w:230px; /* @kind spacing */
  --x-header-h:52px; /* @kind spacing */           /* Dokument sticky header */

  /* Padding recipes lifted from source */
  --x-pad-panel:8px; /* @kind spacing */           /* .terminal-border inner padding */
  --x-pad-section:30px; /* @kind spacing */
  --x-pad-card:20px; /* @kind spacing */
  --x-pad-status:10px; /* @kind spacing */
  --x-pad-nav:8px 16px; /* @kind spacing */
  --x-pad-btn:12px 28px; /* @kind spacing */
  --x-pad-btn-lg:15px 40px; /* @kind spacing */
  --x-pad-cta:12px 32px; /* @kind spacing */
  --x-pad-input:12px; /* @kind spacing */
  --x-pad-doc-card:1rem 1.125rem; /* @kind spacing */
  --x-pad-doc-cell:10px 12px; /* @kind spacing */

  --x-gap-grid:20px; /* @kind spacing */           /* services grid */
  --x-gap-cycle:40px; /* @kind spacing */          /* EEEE grid — leaves room for the arrows */
  --x-gap-doc-grid:10px; /* @kind spacing */
  --x-grid-min-card:300px; /* @kind spacing */     /* auto-fit minmax for service cards */
  --x-grid-min-meta:200px; /* @kind spacing */
}


/* x10aix — borders, radii, shadows, textures.
   Revised September 2026: the system now uses ONE border idiom, the
   KI-Kompass one — hairlines and soft radii. The old 2–4px square-cornered
   frames read as heavy next to the sans face.

   The CRT signatures survive as TEXTURE and SHADOW, not as chunky borders:
   scan lines, pixel weave and the inset screen shadow all stay. */
:root{
  /* Border widths */
  --x-bw-hair:0.5px;
  --x-bw-1:1px;
  --x-bw-2:1px;                /* was 2px — inputs, status strip */
  --x-bw-3:1px;                /* was 3px — cards, buttons */
  --x-bw-4:1px;                /* was 4px — panel frames, header rules */
  --x-bw-rule:0.5px;           /* section rules */
  --x-bw-accent:3px;           /* left-edge accents — the one thick border left */
  --x-bw-emphasis:1.5px;       /* gate + primary-outline emphasis */

  /* Radii */
  --x-radius-none:0;
  --x-radius-sm:6px;
  --x-radius:10px;
  --x-radius-lg:14px;
  --x-radius-pill:20px;
  --x-radius-dos:2px;

  /* Shadows */
  --x-shadow-crt:inset 0 0 10px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.5); /* @kind shadow */
  --x-shadow-panel:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05); /* @kind shadow */
  --x-shadow-image:0 0 20px rgba(0,0,0,.8); /* @kind shadow */
  --x-shadow-float:0 4px 10px rgba(0,0,0,.5); /* @kind shadow */
  --x-shadow-glow-blue:0 0 20px rgba(107,141,184,.5); /* @kind shadow */
  --x-shadow-glow-blue-soft:0 0 15px rgba(107,141,184,.3); /* @kind shadow */
  --x-shadow-glow-amber:0 0 15px rgba(232,160,48,.4); /* @kind shadow */
  --x-shadow-glow-cyan:0 0 15px rgba(0,188,212,.4); /* @kind shadow */
  --x-shadow-focus:0 0 0 3px rgba(107,141,184,.25); /* @kind shadow */
  --x-shadow-gate:0 0 30px rgba(107,141,184,.15),0 0 60px rgba(107,141,184,.06); /* @kind shadow */
  --x-shadow-doc-hero-text:0 2px 12px rgba(0,0,0,.5); /* @kind shadow */

  /* Textures — the brand's surviving CRT signatures */
  --x-scanlines:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px); /* @kind other */
  --x-crt-bands:linear-gradient(rgba(18,16,16,.1) 50%,rgba(0,0,0,.1) 50%); /* @kind other */
  --x-pixel-weave:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(107,93,79,.1) 2px,rgba(107,93,79,.1) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(107,93,79,.1) 2px,rgba(107,93,79,.1) 4px); /* @kind other */

  /* Protection gradients over imagery */
  --x-protect-hero:linear-gradient(to bottom,rgba(20,18,15,.80) 0%,rgba(20,18,15,.82) 40%,rgba(20,18,15,.85) 100%); /* @kind other */
  --x-protect-hero-hdr:linear-gradient(to bottom,rgba(20,18,15,.94) 0%,rgba(20,18,15,.95) 40%,rgba(20,18,15,.96) 100%); /* @kind other */
  --x-protect-doc-hero:linear-gradient(105deg,rgba(18,16,13,.92) 0%,rgba(18,16,13,.78) 45%,rgba(18,16,13,.35) 75%,transparent 100%); /* @kind other */
  --x-protect-fade:linear-gradient(transparent,var(--x-bg) 75%); /* @kind other */
  --x-rule-gradient:linear-gradient(90deg,transparent,#6b8db8 50%,transparent); /* @kind other */
}


/* x10aix — motion.
   The brand animates like hardware, not like software: a blinking cursor,
   a 3-second glitch twitch, a 2px hover lift. Nothing bounces, nothing springs. */
:root{
  --x-dur-fast:.15s; /* @kind other */
  --x-dur:.2s; /* @kind other */
  --x-dur-slow:.3s; /* @kind other */
  --x-dur-bar:.4s; /* @kind other */             /* progress fill */
  --x-dur-bar-long:.6s; /* @kind other */        /* category score bars, gate reveal */
  --x-ease:ease; /* @kind other */
  --x-ease-out:ease-in-out; /* @kind other */
  --x-lift:translateY(-2px); /* @kind other */   /* the only hover displacement in the system */
  --x-cycle-blink:3s; /* @kind other */          /* status LED (site) */
  --x-cycle-cursor:1s; /* @kind other */         /* caret / cursor blink */
  --x-cycle-glitch:3s; /* @kind other */
}
@keyframes x-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes x-cursor{50%{opacity:0}}
@keyframes x-glitch{
  0%,90%,100%{transform:translate(0)}
  92%{transform:translate(-2px,2px)}
  94%{transform:translate(2px,-2px)}
  96%{transform:translate(-2px,-2px)}
}
@keyframes x-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes x-fade-in-sm{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}


/* Gemeinsame Basis. Seitenfamilien behalten ihre eigenen Layout-Regeln. */
:root {
  color-scheme: dark;
  --c-bg:var(--x-bg); --c-bg2:var(--x-bg-raised); --c-bg3:var(--x-bg-sunken);
  --c-border:var(--x-line-hair); --c-border2:var(--x-line-strong);
  --c-text:var(--x-ink-bright); --c-text2:var(--x-ink); --c-text3:var(--x-ink-muted);
  --c-accent:var(--x-cyan-doc); --c-accent-light:var(--x-cyan-doc-hover);
  --c-blue-text:var(--x-blue-light); --c-blue-border:var(--x-evolve); --c-blue-bg:var(--x-tint-evolve);
  --c-green-text:var(--x-green); --c-green-border:var(--x-execute); --c-green-bg:var(--x-tint-execute);
  --c-yellow-text:var(--x-amber); --c-yellow-border:var(--x-enable); --c-yellow-bg:var(--x-tint-enable);
  --c-red-text:var(--x-red-soft); --c-red-border:var(--x-red-soft); --c-red-bg:var(--x-tint-red);
  --radius:var(--x-radius); --radius-sm:var(--x-radius-sm);
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; font-family:var(--x-font-ui); font-size:var(--x-fs-body); line-height:var(--x-lh-prose); color:var(--x-ink); background:var(--x-bg); }
button, input, textarea, select { font:inherit; }
a { color:var(--x-cyan-doc); text-underline-offset:3px; }
a:hover { color:var(--x-cyan-doc-hover); }
button, input, select, textarea { accent-color:var(--x-blue-light); }
::placeholder { color:var(--x-ink-muted); opacity:1; }
:focus-visible { outline:2px solid var(--x-blue-light); outline-offset:3px; box-shadow:var(--x-shadow-focus); }
[hidden] { display:none !important; }
.x-eyebrow { font-family:var(--x-font-ui); font-size:var(--x-fs-micro); font-weight:600; letter-spacing:var(--x-ls-eyebrow); text-transform:uppercase; color:var(--x-ink-muted); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print {
  :root { color-scheme:light; }
  .scan-lines { display:none !important; }
}