/* Kanzlei DS — gebündelt (Build-Output, keine @imports → schneller). Quellen: tokens/*, css/* */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   FONTS — Kanzlei Design System (self-hosted, lean 7-cut set)
   Display: Fraunces — 500, 500-italic, 600
   Body:    Hanken Grotesk — 400, 500, 600
   Mono:    IBM Plex Mono — 400
   Trimmed to the weights the brand actually renders, for page
   speed. Files in assets/fonts/ (verified: names match
   contents). Licenses (SIL OFL) alongside them. url() resolves
   relative to THIS file, so every consumer of styles.css gets
   the right path. font-display:swap = no invisible-text flash.
   ============================================================ */

/* ---------- Fraunces — display serif ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-600.woff2") format("woff2");
}

/* ---------- Hanken Grotesk — body sans ---------- */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/hanken-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/hanken-500.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/hanken-600.woff2") format("woff2");
}

/* ---------- IBM Plex Mono — labels & data ---------- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plexmono-400.woff2") format("woff2");
}


/* ===== tokens/colors.css ===== */
/* ============================================================
   COLORS — Kanzlei Design System
   A warm, trust-led palette: deep petrol green as the anchor of
   authority + calm, amber as the single warm accent, on a softly
   toned paper white. Saturation is kept low for a considered,
   professional feel.
   ============================================================ */
:root {
  /* ---- Base ramp: ink & petrol (cool, authoritative) ---- */
  --ink: #15292D;          /* primary text, darkest surfaces */
  --petrol: #173A40;       /* brand anchor — dark sections, primary brand */
  --petrol-600: #1F4D54;   /* petrol step up (gradients, hover) */
  --petrol-wash: #ECF1EF;  /* tinted section background */

  /* ---- Warm accent: amber ---- */
  --amber: #BC7E38;        /* primary accent — CTAs, rules, ticks */
  --amber-deep: #9A6326;   /* accent hover / on-light text */
  --amber-light: #E6B97A;  /* accent on dark surfaces */

  /* ---- Paper & neutrals ---- */
  --paper: #FBFAF7;        /* page background (warm off-white) */
  --white: #FFFFFF;        /* cards on paper */
  --muted: #5C6B6A;        /* secondary text */
  --line: #E4E1D9;         /* hairline borders */
  --line-soft: #EEEBE3;    /* faint dividers, grid lines */

  /* ---- Semantic aliases (prefer these in components) ---- */
  --text-strong: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-accent: var(--amber-deep);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-wash: var(--petrol-wash);
  --surface-dark: var(--petrol);

  --accent: var(--amber);
  --accent-hover: var(--amber-deep);
  --accent-on-dark: var(--amber-light);

  --border: var(--line);
  --border-soft: var(--line-soft);

  /* On-dark text tiers */
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, .72);
  --on-dark-faint: rgba(255, 255, 255, .12);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Kanzlei Design System
   Three families, fluid display sizing. Headlines lean on
   Fraunces at weight 500 with tight tracking; body is Hanken
   Grotesk at 17px / 1.6. Eyebrows are mono, uppercase, wide.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Fluid display scale ---- */
  --fs-h1: clamp(2.4rem, 6vw, 4.1rem);   /* hero headline */
  --fs-h2: clamp(1.9rem, 4.5vw, 3rem);   /* section headline */
  --fs-h3: 1.3rem;                        /* card / sub-head */
  --fs-lead: clamp(1.05rem, 2vw, 1.22rem);/* intro paragraph */
  --fs-body: 1.0625rem;                   /* 17px running text */
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.72rem;                  /* mono label */

  /* ---- Line heights ---- */
  --lh-display: 1.08;
  --lh-body: 1.6;

  /* ---- Tracking ---- */
  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   SPACING, LAYOUT, RADII & SHADOW — Kanzlei Design System
   Generous vertical rhythm, a single content measure, and
   barely-there radii (2–3px) that read as "precise", not "soft".
   ============================================================ */
:root {
  /* ---- Layout ---- */
  --maxw: 1180px;                          /* content measure */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);   /* page inline padding */
  --gap: clamp(1rem, 4vw, 2.5rem);         /* generic grid gap */
  --section-y: clamp(4rem, 9vw, 7rem);     /* section vertical padding */

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;

  /* ---- Radii — kept tight & technical ---- */
  --r-xs: 2px;     /* buttons, inputs */
  --r-sm: 3px;     /* cards, badges */

  /* ---- Shadows — soft, low, cool-tinted ---- */
  --shadow-card: 0 10px 34px -22px rgba(21, 41, 45, .5);
  --shadow-raise: 0 18px 48px -28px rgba(21, 41, 45, .55);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .6s;
}


/* ===== css/base.css ===== */
/* ============================================================
   BASE — Kanzlei Design System
   Reset, document defaults, headings, and the core layout
   helpers (.wrap / .section / .eyebrow / .lead) that every
   surface in the system builds on.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  background: var(--surface-page);
  color: var(--text-body);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Headings ---------- */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }

/* Italic display = warm, editorial emphasis */
h1 em, h2 em { font-style: italic; color: var(--petrol); }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* Tinted + dark section variants */
.section--wash { background: var(--surface-wash); }
.section--dark { background: var(--surface-dark); color: var(--on-dark); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--on-dark); }

/* ---------- Eyebrow (signature brand label) ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
}
.section--dark .eyebrow { color: var(--accent-on-dark); }
.section--dark .eyebrow::before { background: var(--accent-on-dark); }

/* Section head block */
.shead { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.shead p { color: var(--text-muted); margin-top: 1rem; text-wrap: pretty; }
.section--dark .shead p { color: var(--on-dark-muted); }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}


/* ===== css/components.css ===== */
/* ============================================================
   COMPONENTS — Kanzlei Design System
   Reusable, brand-defining primitives. Each maps 1:1 to a React
   component in /components and is demonstrated on a card in the
   Design System tab. Pure CSS-class driven — no JS required.
   ============================================================ */

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-body);
  font-weight: var(--fw-semibold);
  font-size: .97rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--petrol); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--petrol); transform: translateY(-1px); }

.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.section--dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }

/* ---------- Surface card ---------- */
.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1.8rem;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ds-card--hover:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }

/* Card on dark sections (e.g. services) */
.ds-card--dark {
  background: rgba(255,255,255,.04);
  border-color: var(--on-dark-faint);
  color: var(--on-dark);
}
.ds-card--dark.ds-card--hover:hover {
  border-color: rgba(230,185,122,.55);
  background: rgba(255,255,255,.06);
  transform: translateY(-3px);
  box-shadow: none;
}

/* Icon chip used inside cards */
.ds-iconchip {
  width: 42px; height: 42px;
  border: 1px solid rgba(230,185,122,.5);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  margin-bottom: 1.2rem;
}
.ds-iconchip svg { width: 21px; height: 21px; color: var(--accent-on-dark); }

/* Tick list (chevron bullets) */
.ds-ticks { list-style: none; display: grid; gap: .5rem; }
.ds-ticks li { font-size: .9rem; padding-left: 1.3rem; position: relative; }
.ds-ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
}
.ds-card--dark .ds-ticks li { color: var(--on-dark-muted); }
.ds-card--dark .ds-ticks li::before { border-color: var(--accent-on-dark); }

/* ---------- Badge ---------- */
.badge {
  display: flex; gap: .9rem; align-items: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.2rem;
  background: var(--surface-card);
}
.badge__mark {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-wash);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .62rem;
  color: var(--petrol); text-align: center; flex: none;
  line-height: 1.15;
}
.badge__title { font-weight: var(--fw-semibold); font-size: .95rem; }
.badge__sub { font-size: .82rem; color: var(--text-muted); }

/* ---------- Form field ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .82rem;
  font-weight: var(--fw-semibold); margin-bottom: .4rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--f-body); font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--petrol); }

/* ---------- FAQ / disclosure ---------- */
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  overflow: hidden;
}
.faq__q {
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: var(--fw-semibold);
  font-size: 1.02rem; color: var(--text-strong);
  padding: 1.15rem 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq__q .ic { flex: none; width: 18px; height: 18px; position: relative; transition: transform var(--dur) var(--ease); }
.faq__q .ic::before, .faq__q .ic::after { content: ""; position: absolute; background: var(--accent); inset: 0; margin: auto; }
.faq__q .ic::before { width: 100%; height: 2px; }
.faq__q .ic::after { width: 2px; height: 100%; }
.faq__item[open] .ic { transform: rotate(45deg); }
.faq__a { padding: 0 1.4rem 1.25rem; color: var(--text-muted); font-size: .96rem; }

/* ---------- Scroll reveal utility ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }