/* Webfonts liegen lokal (assets/css/fonts.css, assets/fonts). No original brand font files were supplied;
   Archivo is a substitution chosen to match the heavy geometric grotesque of the
   ZAUBERJAGD wordmark. See readme.md → VISUAL FOUNDATIONS → Type. */

:root{
/* ── Base ramps ─────────────────────────────────────────────── */
/* Forest — the dark brand tone (#1c251e), used for large calm surfaces */
--forest-950:#0f1511;--forest-900:#1c251e;--forest-800:#28332a;--forest-700:#36463a;--forest-600:#4a5c4d;

/* Olive — the main brand tone (#6d7850). Primary action + brand fields */
--olive-800:#3f472c;--olive-700:#565f3c;--olive-600:#6d7850;--olive-500:#818b66;--olive-400:#9aa284;--olive-200:#cdd2be;--olive-100:#e6e9dd;--olive-50:#f2f4ed;

/* Sand — the warm accent (#c4b49d). Rules, eyebrows, highlights on dark */
--sand-700:#7e6f57;--sand-600:#9c8b70;--sand-500:#b3a086;--sand-400:#c4b49d;--sand-300:#d6cab6;--sand-200:#e6dfd2;--sand-100:#f2eee6;

/* Neutrals — cool grey, reads as galvanised steel */
--paper:#f9f9f9;--white:#ffffff;
--grey-100:#eeefee;--grey-200:#dfe1df;--grey-300:#c7cac7;--grey-400:#a3a8a4;--grey-500:#7d837e;--grey-600:#5c625d;--grey-700:#41463f;

/* Signal — kept muted; rust reads as steel oxide, not web-red */
--rust-600:#8f3a2e;--rust-100:#f3e3df;
--amber-600:#a97a1f;--amber-100:#f6ecd6;
--moss-600:#4b7040;--moss-100:#e2ecdf;

/* ── Semantic aliases ───────────────────────────────────────── */
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-sunken:var(--grey-100);
--surface-brand:var(--olive-600);
--surface-dark:var(--forest-900);
--surface-dark-alt:var(--forest-800);
--surface-warm:var(--sand-100);
--surface-warm-strong:var(--sand-400);

--text-heading:var(--forest-900);
--text-body:var(--grey-700);
--text-muted:var(--grey-500);
--text-on-dark:var(--paper);
--text-on-dark-muted:var(--olive-200);
--text-on-brand:var(--white);
--text-accent:var(--olive-700);
--text-link:var(--olive-700);
--text-link-hover:var(--forest-900);

--border-hairline:var(--grey-200);
--border-strong:var(--grey-300);
--border-brand:var(--olive-600);
--border-on-dark:rgba(249,249,249,.18);
--border-warm:var(--sand-300);

--focus-ring:var(--olive-600);
--overlay-scrim:rgba(15,21,17,.62);

--state-danger:var(--rust-600);--state-danger-bg:var(--rust-100);
--state-warning:var(--amber-600);--state-warning-bg:var(--amber-100);
--state-success:var(--moss-600);--state-success-bg:var(--moss-100);

/* Protection gradient laid under text on full-bleed photography */
--scrim-bottom:linear-gradient(to top,rgba(15,21,17,.88) 0%,rgba(15,21,17,.55) 38%,rgba(15,21,17,0) 78%); /* @kind other */
--scrim-left:linear-gradient(to right,rgba(15,21,17,.86) 0%,rgba(15,21,17,.45) 45%,rgba(15,21,17,0) 85%); /* @kind other */
}

:root{
--font-display:"Archivo Expanded","Archivo",system-ui,sans-serif;
--font-core:"Archivo",system-ui,sans-serif;
--font-body:"IBM Plex Sans",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

/* Display — wordmark-adjacent. Always uppercase, tight, heavy. */
--type-display-1:800 clamp(44px,6.2vw,88px)/0.96 var(--font-display);
--type-display-2:800 clamp(34px,4.2vw,60px)/1.06 var(--font-display);
--type-display-3:700 clamp(26px,2.6vw,38px)/1.1 var(--font-display);

/* Headings — core grotesque, sentence case */
--type-h1:700 40px/1.1 var(--font-core);
--type-h2:700 30px/1.16 var(--font-core);
--type-h3:600 22px/1.24 var(--font-core);
--type-h4:600 17px/1.32 var(--font-core);

/* Body — Plex Sans, generous leading for German compound words */
--type-body-lg:400 19px/1.62 var(--font-body);
--type-body:400 16px/1.65 var(--font-body);
--type-body-sm:400 14px/1.6 var(--font-body);
--type-caption:400 12.5px/1.45 var(--font-body);

/* Utility */
--type-eyebrow:600 12px/1.2 var(--font-core);
--type-label:600 13px/1.3 var(--font-core);
--type-button:600 14px/1 var(--font-core);
--type-data:500 14px/1.4 var(--font-mono);

--tracking-display:-0.02em;
--tracking-eyebrow:0.16em;
--tracking-button:0.04em;
--tracking-data:0.01em;

--measure-prose:64ch;
--measure-narrow:46ch;
}

:root{
/* 4px base; the module jumps to 12px steps above 24 to keep sections airy */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;

--gap-inline:12px;      /* buttons, chips, inline icon+label */
--gap-stack:16px;        /* paragraph rhythm */
--gap-card:24px;         /* inside a card */
--gap-grid:32px;         /* between cards */
--section-y:96px;        /* vertical section padding, desktop */
--section-y-tight:64px;
--section-y-loose:128px;
--page-gutter:32px;
--page-max:1280px;
--page-max-prose:760px;
}

:root{
/* Fabricated-metal geometry: near-square. 2px hairline radius is the house default;
   nothing in the system is ever a pill except the state dot. */
--radius-0:0;--radius-1:2px;--radius-2:4px;--radius-3:8px;--radius-round:999px;
--radius-control:2px;
--radius-card:2px;
--radius-media:2px;

--border-width:1px;
--border-width-strong:2px;
--rule:1px solid var(--border-hairline);
--rule-warm:1px solid var(--border-warm);
--rule-dark:1px solid var(--border-on-dark);
/* The brand's signature mark: a short sand tick above section headings */
--tick:3px solid var(--sand-400);
}

:root{
/* Shadows are used sparingly — borders carry most separation.
   Where shadow appears it is low, cool and tight, never soft-glow. */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(15,21,17,.06);
--shadow-2:0 2px 6px rgba(15,21,17,.08);
--shadow-3:0 10px 24px -8px rgba(15,21,17,.22);
--shadow-overlay:0 24px 60px -16px rgba(15,21,17,.42);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
--ring-focus:0 0 0 3px rgba(109,120,80,.32);
--blur-panel:saturate(115%) blur(14px); /* @kind other */
}

:root{
/* Mechanical, not playful. No bounce, no overshoot, no spring. */
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.4); /* @kind other */
--dur-instant:90ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-reveal:640ms; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard); /* @kind other */
--transition-media:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-standard); /* @kind other */
--press-scale:0.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-reveal:0ms; /* @kind other */ --press-scale:1 /* @kind other */}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);text-wrap:balance}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 35%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{display:block;max-width:100%}
.zj-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.zj-display{font:var(--type-display-2);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading)}
.zj-prose{max-width:var(--measure-prose)}
.zj-shell{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}