/* ──────────────────────────────────────────────────────────────
   Schönfelder EDV · News — Shared Design Tokens
   ────────────────────────────────────────────────────────────── */

/* Fonts are SELF-HOSTED for DSGVO compliance — no Google Fonts, no external CDN.
   Local @font-face rules (Geist, JetBrains Mono, Instrument Serif) are appended
   at the bottom of this file in Step 10. Until the .woff2 files exist, the
   --font-* fallback stacks (system-ui / ui-monospace / Georgia) apply. */

/* Inter — only the two weights the CSS text wordmark needs (self-hosted, OFL). */
@font-face {
  font-family: 'Inter';
  font-weight: 300; font-style: normal; font-display: swap;
  src: url('/assets/fonts/inter/Inter-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* ─── S-EDV wordmark (CSS text logo — pixel-sharp, 0 KB, screenreader-friendly) ─── */
.logo-wordmark { display: inline-flex; align-items: baseline; gap: 14px; text-decoration: none; font-family: 'Inter', var(--font-sans, system-ui), sans-serif; user-select: none; white-space: nowrap; }
.logo-wordmark__brand { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink, #111); line-height: 1; }
.logo-wordmark__sep { display: inline-block; width: 1px; height: 22px; background: var(--ink-3, #999); align-self: center; }
.logo-wordmark__suffix { font-weight: 300; font-size: 20px; color: var(--ink-3, #999); letter-spacing: -0.01em; line-height: 1; transition: color 200ms ease; }
.logo-wordmark:hover .logo-wordmark__suffix { color: var(--ink, #111); }
.footer .logo-wordmark__brand { font-size: 18px; }
.footer .logo-wordmark__suffix { font-size: 16px; }
.footer .logo-wordmark__sep { height: 18px; }
@media (max-width: 640px) {
  .logo-wordmark { gap: 10px; }
  .logo-wordmark__brand { font-size: 18px; }
  .logo-wordmark__suffix { font-size: 16px; }
  .logo-wordmark__sep { height: 18px; }
}

:root {
  /* Brand */
  --brand: #0a0a0a;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, .08);
  --accent-strong: #1d4ed8;

  /* Surfaces (light) */
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-sunken: #f4f4f5;
  --bg-elev: #ffffff;

  /* Ink (light) */
  --ink: #0a0a0a;
  --ink-2: #525252;
  --ink-3: #6b7280;   /* muted/secondary text — WCAG AA (~4.8:1 on #fff, ~4.7:1 on --bg-soft) */
  --ink-on-accent: #ffffff;

  /* Lines */
  --line: #e5e5e5;
  --line-soft: #f0f0f0;
  --line-strong: #d4d4d8;

  /* Code surface (always dark) */
  --code-bg: #0b0f17;
  --code-fg: #e5e7eb;
  --code-comment: #6b7280;
  --code-keyword: #93c5fd;
  --code-string: #86efac;
  --code-number: #fcd34d;
  --code-prop: #fda4af;

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  /* Density */
  --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;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Layout */
  --content-max: 1280px;
  --content-narrow: 720px;
  --gutter: clamp(16px, 4vw, 48px);

  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-3: 0 20px 60px rgba(0,0,0,.12);

  --transition: 180ms cubic-bezier(.2, 0, 0, 1);
}

/* Dark mode — matches schoenfelder-edv.de exactly */
[data-theme="dark"] {
  --brand: #fafafa;
  --bg: #07080d;
  --bg-soft: #0d0f15;
  --bg-sunken: #11141c;
  --bg-elev: #14171f;

  --ink: #fafafa;
  --ink-2: #a1a1aa;
  --ink-3: #71717a;

  --line: #1f2129;
  --line-soft: #15171e;
  --line-strong: #2a2d37;

  --accent-soft: rgba(96, 165, 250, .12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}

/* Density */
[data-density="compact"] {
  --space-4: 12px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 36px;
  --space-8: 48px;
}
[data-density="comfy"] {
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
}

/* Font swaps via tweak */
[data-font="ibm"]   { --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; }
[data-font="space"] { --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', monospace; }
[data-font="system"]{ --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* ─────────────────────────────────────  Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fff; }

/* Keyboard focus: visible ring on every interactive element (A11y). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong, #1d4ed8);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Lighter ring on the always-dark code surfaces. */
.prose pre:focus-visible, .code-copy:focus-visible { outline-color: #82d4ff; }

/* "Skip to main content" — off-screen until focused (keyboard users). */
.skip-to-main {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--ink, #0a0a0a); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm, 6px);
  font-size: 14px; text-decoration: none;
  transition: top 140ms ease;
}
.skip-to-main:focus { top: 8px; }

/* ─────────────────────────────────────  Layout primitives */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* ─────────────────────────────────────  Site chrome */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.topnav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: var(--space-6);
  position: relative;   /* anchor for the absolutely-centred .topnav__main */
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 28px; height: 28px;
  background-image: url('/assets/img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.brand__wordmark {
  font-size: 13px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
}
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: 6px;
  color: var(--ink-2);
  transition: color var(--transition), background var(--transition);
}
.nav a:hover { color: var(--ink); background: var(--bg-sunken); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: "";
  display: block;
  height: 1px; background: var(--ink);
  margin-top: 2px;
}
.nav__cta {
  margin-left: 8px;
  padding: 7px 14px !important;
  border: 1px solid var(--line-strong);
  border-radius: 999px !important;
  background: var(--bg);
  font-size: 12.5px !important;
}
.nav__cta:hover { border-color: var(--ink); background: var(--bg) !important; }

/* ─────────────────────────────────────  Section numbering */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: attr(data-num);
  color: var(--ink);
  font-weight: 500;
}
.eyebrow__sep {
  width: 24px; height: 1px; background: var(--line-strong);
  display: inline-block;
}

/* ─────────────────────────────────────  Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-2);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.chip--dot::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.chip--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ─────────────────────────────────────  Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  font-size: 14px; font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: default;
  transition: all var(--transition);
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-strong); }
.btn--sm { padding: 7px 12px; font-size: 12.5px; }
.btn--icon { padding: 8px; }

/* ─────────────────────────────────────  Inputs */
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color var(--transition), background var(--transition);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--bg);
}
.label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: block;
  letter-spacing: .01em;
}

/* ─────────────────────────────────────  Cards (news) */
.card {
  display: flex; flex-direction: column;
  gap: 16px;
  transition: transform var(--transition);
}
.card:hover .card__title { color: var(--accent); }
.card__media {
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.card__meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.card__cat { color: var(--accent); font-weight: 500; }
.card__title {
  font-size: 22px;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
  transition: color var(--transition);
  text-wrap: balance;
}
.card__lede {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ─────────────────────────────────────  Footer */
.footer {
  border-top: 1px solid var(--line);
  margin-top: var(--space-9);
  padding: var(--space-7) 0 var(--space-6);
  background: var(--bg-soft);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col a { font-size: 13.5px; color: var(--ink-2); }
.footer__col a:hover { color: var(--ink); }
.footer__legal {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}

/* ─────────────────────────────────────  Utilities */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); font-weight: 400; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav a:not(.nav__cta) { display: none; }
}


/* ── CTA box (article-end call-to-action) — S-EDV: square, black/white, left rule. Shared by public + admin preview. ── */
.cta-box { max-width: 64ch; margin: 64px 0 48px; padding: 40px 48px; background: var(--bg-soft, #fafafa); border: 1px solid var(--line, #e5e5e5); border-left: 4px solid var(--ink, #0a0a0a); border-radius: 0; }
.cta-box__inner { max-width: 720px; }
.cta-box__headline { font-family: 'Inter', var(--font-sans), system-ui, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink, #0a0a0a); margin: 0 0 12px; line-height: 1.2; text-wrap: balance; }
.cta-box__subline { font-size: 16px; line-height: 1.6; color: var(--ink-2, #525252); margin: 0 0 24px; }
/* Button styles raised in specificity so they win even if the box ever lands inside .prose
   (.prose a is (0,0,1,1) and would otherwise override .cta-box__button (0,0,1,0)). */
.cta-box .cta-box__button,
.prose .cta-box .cta-box__button { display: inline-flex; align-items: center; gap: 10px; background: var(--ink, #0a0a0a); color: var(--bg, #fff); text-decoration: none; padding: 14px 24px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; border-radius: 0; transition: transform 150ms ease, background 150ms ease; }
.cta-box .cta-box__button:hover,
.prose .cta-box .cta-box__button:hover { background: #262626; color: var(--bg, #fff); text-decoration: none; transform: translateX(2px); }
.cta-box .cta-box__button span,
.prose .cta-box .cta-box__button span { color: inherit; text-decoration: none; }
.cta-box__button span:last-child { font-size: 18px; transition: transform 150ms ease; }
.cta-box__button:hover span:last-child { transform: translateX(4px); }
@media (max-width: 768px) {
  .cta-box { padding: 28px 24px; margin: 48px 0 32px; }
  .cta-box__headline { font-size: 20px; }
  .cta-box__subline { font-size: 15px; }
  .cta-box .cta-box__button, .prose .cta-box .cta-box__button { padding: 12px 20px; font-size: 14px; }
}
/* Compact variant for admin preview panes */
.cta-box--preview { max-width: none; margin: 0; }
.cta-box--preview .cta-box__inner { max-width: none; }
.cta-box--preview .cta-box__headline { font-size: 19px; }
.cta-box--preview .cta-box__subline { font-size: 14px; margin-bottom: 16px; }
.cta-box--preview .cta-box__button { padding: 11px 18px; font-size: 13px; pointer-events: none; }