/* ─────────────────────────────────────────────────────────────
   DizitalFabrik — brand stylesheet
   Tokens from assets/brand/tokens.json. Rules from BRAND.md:
   signal is used once per view, borders are preferred to shadows,
   labels are mono/uppercase/steel, and nothing uses emoji.
   ───────────────────────────────────────────────────────────── */

:root {
  /* colour — light */
  --paper:     #f3f2ed;
  --surface:   #ffffff;
  --ink:       #15171c;
  --steel:     #5e636d;
  --signal:    #2347d9;
  --on-signal: #f3f2ed;
  --border:    #7e838d;
  --hairline:  #dedcd4;

  /* type */
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing — 4px base */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  /* radius — from the mark: a 32px block with a 5px corner */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #15171c;
    --surface:   #1e2026;
    --ink:       #f3f2ed;
    --steel:     #9aa0aa;
    --signal:    #6e8df7;
    --on-signal: #0b0d12;
    --border:    #6b707a;
    --hairline:  #2e3138;
  }
}
:root[data-theme="dark"] {
  --paper:     #15171c;
  --surface:   #1e2026;
  --ink:       #f3f2ed;
  --steel:     #9aa0aa;
  --signal:    #6e8df7;
  --on-signal: #0b0d12;
  --border:    #6b707a;
  --hairline:  #2e3138;
}

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img, svg { max-width: 100%; }

/* ── TYPE SCALE ── */
h1 { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }

.lead {
  font-size: 19px; line-height: 30px; font-weight: 300;
  color: var(--steel); max-width: 60ch; margin-bottom: var(--space-12);
}

/* label — always mono, uppercase, tracked, steel */
.section-label {
  font-family: var(--mono);
  font-size: 11px; line-height: 14px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--space-3);
}

code, .code { font-family: var(--mono); font-size: 13px; line-height: 20px; }

/* ── ICONS — inline stroke SVG, 2px on a 24px grid (never emoji) ── */
.icon {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  display: block;
}
.card-icon { color: var(--signal); margin-bottom: var(--space-4); }

/* ── NAV ── */
nav {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--space-16);
}
.nav-logo { display: flex; align-items: center; }
/* BRAND.md: the full lockup needs 180px of width, which is where the mark hits
   its own 32px floor. The lockup is 5.64:1, so 32px high = 180.5px wide. Do not
   reduce this height without re-reading that rule. */
.nav-logo img { height: 32px; width: auto; display: block; }
/* The nav logo must follow the EFFECTIVE theme, not the OS. A <picture> with a
   prefers-color-scheme source cannot see data-theme, so a manual override put
   the ink lockup on a dark bar. These rules mirror the token cascade exactly. */
.nav-logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .nav-logo .logo-dark { display: block; }
}
:root[data-theme="dark"] .nav-logo .logo-light { display: none; }
:root[data-theme="dark"] .nav-logo .logo-dark { display: block; }
:root[data-theme="light"] .nav-logo .logo-light { display: block; }
:root[data-theme="light"] .nav-logo .logo-dark { display: none; }
.nav-links { display: flex; gap: var(--space-1); list-style: none; margin-left: auto; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
  color: var(--steel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border); }
.theme-toggle .icon { width: 18px; height: 18px; }
/* Show only the icon for the current mode. data-mode is set in the markup so
   this renders correctly before main.js runs. */
.theme-toggle .icon { display: none; }
.theme-toggle[data-mode="system"] .icon[data-icon="system"],
.theme-toggle[data-mode="light"]  .icon[data-icon="light"],
.theme-toggle[data-mode="dark"]   .icon[data-icon="dark"] { display: block; }
.nav-links a {
  color: var(--steel);
  font-size: 14px; line-height: 22px; font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
.nav-links a.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--signal); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.2s; }

/* ── HERO — the one ink ground, carrying the single signal action ── */
.hero {
  /* Intentionally dark in BOTH themes, so these are literal, not --ink/--paper,
     which swap under prefers-color-scheme and would invert the panel. */
  background: #15171c;
  color: #f3f2ed;
  padding: var(--space-16) var(--space-6);
}
.hero .section-inner { max-width: 1100px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: var(--space-6);
  max-width: 18ch;
}
.hero p {
  font-size: 19px; line-height: 30px; font-weight: 300;
  color: #9aa0aa;
  max-width: 60ch; margin-bottom: var(--space-8);
}

/* ── PAGE HEADER ── */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-16) var(--space-6) var(--space-12);
}
.page-header h1, .page-header p { max-width: 1100px; margin-left: auto; margin-right: auto; }
.page-header p {
  font-size: 19px; line-height: 30px; font-weight: 300;
  color: var(--steel); margin-top: var(--space-3);
}

/* ── SECTIONS ── */
section { padding: var(--space-16) var(--space-6); }
.section-inner { max-width: 1100px; margin: 0 auto; }
.bg-light {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ── CARDS — borders, never shadows ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--border); }
.bg-light .card { background: var(--paper); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--steel); font-size: 14px; line-height: 22px; }
.card p a { font-weight: 500; }

/* ── BUTTONS — radius-md, never pill ── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px; line-height: 22px; font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.btn:hover { text-decoration: none; opacity: 0.88; }
.btn-primary { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); margin-left: var(--space-3); }
.btn-outline:hover { background: var(--surface); opacity: 1; }
/* On an ink ground the outline button carries paper ink */
.hero .btn-outline, .cta-panel .btn-outline { color: #f3f2ed; border-color: #6b707a; }
.hero .btn-outline:hover, .cta-panel .btn-outline:hover { background: rgba(243,242,237,0.06); }

/* ── CTA PANEL ── */
.cta-panel { background: #15171c; color: #f3f2ed; } /* literal: dark in both themes */
.cta-panel h2 { color: #f3f2ed; }
.cta-panel p {
  color: #9aa0aa; font-size: 19px; line-height: 30px; font-weight: 300;
  margin-bottom: var(--space-8); max-width: 60ch;
}

/* ── TEAM (retained for reuse) ── */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.member { text-align: left; }
.member-avatar {
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--signal); color: var(--on-signal);
  margin-bottom: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.member h3 { font-size: 16px; }
.member p { color: var(--steel); font-size: 14px; }

/* ── FAQ ── */
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  font-family: var(--sans);
  padding: var(--space-6) 0;
  font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-4); color: var(--ink);
}
.faq-q::after {
  content: ''; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  transform: rotate(45deg); margin-bottom: 4px;
  transition: transform 0.2s;
}
.faq-item.open .faq-q::after { transform: rotate(-135deg); margin-bottom: -4px; }
.faq-a { display: none; padding: 0 0 var(--space-6); color: var(--steel); max-width: 70ch; }
.faq-item.open .faq-a { display: block; }

/* ── FORMS ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.form-group { margin-bottom: var(--space-4); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-2); }
input, textarea, select {
  width: 100%;
  font-family: var(--sans); font-size: 16px; line-height: 26px;
  padding: var(--space-3) var(--space-4);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal);
}
textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 13px; line-height: 18px; color: var(--steel); margin-top: var(--space-2); }
.req { color: var(--signal); }

/* ── PROSE ── */
.prose { max-width: 70ch; }
.prose h2 { margin: var(--space-12) 0 var(--space-3); }
.prose h3 { margin: var(--space-8) 0 var(--space-2); }
.prose p, .prose li { color: var(--ink); font-size: 16px; line-height: 26px; margin-bottom: var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--steel); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: 14px; }
.prose th {
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--border);
}
.prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 22px; }

/* ── BADGES ── */
.badge {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--ink);
}
.badge-yes { border-color: var(--signal); color: var(--signal); }
.badge-no { border-color: var(--hairline); color: var(--steel); }
.badge-optional { border-color: var(--border); color: var(--steel); }

/* ── EMAIL REVEAL ── */
.email-reveal { cursor: pointer; border-bottom: 1px dashed currentColor; user-select: none; }
.email-reveal:hover { text-decoration: none; opacity: 0.75; }
.email-reveal.revealed { border-bottom: none; user-select: text; }
.email-reveal.revealed:hover { text-decoration: underline; opacity: 1; }

/* ── ALERT ── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--signal);
  background: var(--surface);
  font-size: 14px; line-height: 22px;
  margin-bottom: var(--space-4);
}

/* ── FOOTER ── */
footer {
  background: #15171c; color: #9aa0aa; /* literal: dark in both themes */
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-8); margin-bottom: var(--space-12);
}
.footer-brand .nav-logo { margin-bottom: var(--space-4); }
.footer-brand .nav-logo img { height: 32px; }
.footer-brand p { font-size: 14px; line-height: 22px; max-width: 34ch; }
/* Nav labels, not document structure — they were <h4> under an <h2>, which
   skipped a heading level on every page. */
.footer-col .footer-col-title {
  color: #f3f2ed;
  font-family: var(--mono); font-size: 11px; line-height: 14px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: #9aa0aa; font-size: 14px; line-height: 22px; }
.footer-col a:hover { color: #f3f2ed; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid #2e3138;
  padding-top: var(--space-6);
  font-size: 13px; line-height: 18px;
}
.footer-bottom a { color: #9aa0aa; }

/* ── RESPONSIVE ── */
/* A two-column form is cramped below this, independent of the nav. */
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Nav collapse. Measured budget: logo 181 + links 339 + theme button 36 +
   margin 12 + padding 48 = 616px bare. The revised lockup is 5.64:1, so the
   logo is 181px wide at 32px high — 62px wider than the previous mark-heavy
   one, which is why this sits at 700px rather than 640px. That leaves ~84px
   between the logo and the links.
   Flex items WRAP rather than overflow, so if nav items change, re-measure
   .nav-links height — a scrollWidth check reports clean while it is broken. */
@media (max-width: 700px) {
  .nav-links {
    display: none; flex-direction: column; gap: 0;
    position: absolute; top: var(--space-16); left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-3) var(--space-6) var(--space-6);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--space-3) 0; }
  .nav-links a.active { box-shadow: none; color: var(--signal); }
  .nav-toggle { display: block; }
}

/* Phone layout: tighter gutters and full-width buttons. */
@media (max-width: 640px) {
  section, .hero, .page-header { padding-left: var(--space-4); padding-right: var(--space-4); }
  .nav-inner { padding: 0 var(--space-4); }
  footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .btn { display: block; text-align: center; }
  .btn-outline { margin-left: 0; margin-top: var(--space-3); }
}