/* aktenadler tools + marketing — shared design system.
   One source of truth for colours, spacing, typography, and the
   header/footer/form/result primitives used across /, /pruefen,
   /erstellen, /anzeigen, /konvertieren, /tools/*, /impressum,
   /datenschutz. Each page links this file in <head>; per-page
   overrides go in a small local <style> block afterwards.

   Convention — names follow what was already in the HTML files:
     .header / .brand / .main / .subtitle / .footer     page chrome
     .input-group                                         label row
     .result / .result-title / .detail / .info           output blocks
     .btn / .btn-primary / .btn-ghost                     actions
     .cta-btn                                             landing CTAs

   Tokens use the same `--s-*` / `--r-*` / `--text-*` scale that
   app.html introduced so page-specific rules keep working.        */

@font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark light;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-root: #09090b; --bg-surface: #0f0f11; --bg-raised: #18181b; --bg-overlay: #1c1c20; --bg-input: #131316;
  --border-subtle: #232328; --border-default: #2c2c32; --border-strong: #3f3f46;
  --text-primary: #fafaf9; --text-secondary: #a1a1aa; --text-tertiary: #8a8a93; --text-inverse: #09090b;
  --accent: #22d3ee; --accent-dim: #0891b2; --accent-wash: #22d3ee10; --accent-subtle: #22d3ee20;
  --ok: #22c55e; --warn: #eab308; --err: #ef4444; --info: #3b82f6;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px;
  --ease: cubic-bezier(0.16,1,0.3,1); --fast: 120ms; --normal: 200ms; --slow: 350ms;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg-root: #f8f8fa; --bg-surface: #fff; --bg-raised: #f0f0f3; --bg-overlay: #e8e8ec; --bg-input: #f4f4f7;
  --border-subtle: #e2e2e8; --border-default: #d4d4db; --border-strong: #b0b0ba;
  --text-primary: #111113; --text-secondary: #5c5c66; --text-tertiary: #6b6b76; --text-inverse: #fafaf9;
  --accent: #0891b2; --accent-dim: #0e7490; --accent-wash: #0891b210; --accent-subtle: #0891b218;
}}
:root[data-theme="light"] {
  --bg-root: #f8f8fa; --bg-surface: #fff; --bg-raised: #f0f0f3; --bg-overlay: #e8e8ec; --bg-input: #f4f4f7;
  --border-subtle: #e2e2e8; --border-default: #d4d4db; --border-strong: #b0b0ba;
  --text-primary: #111113; --text-secondary: #5c5c66; --text-tertiary: #6b6b76; --text-inverse: #fafaf9;
  --accent: #0891b2; --accent-dim: #0e7490; --accent-wash: #0891b210; --accent-subtle: #0891b218;
}

/* ── Reset + base typography ────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 400 14px/1.6 var(--font-sans); background: var(--bg-root); color: var(--text-primary); min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* WCAG 1.4.1 — inline text links must carry a non-colour cue. */
p a, li a, dd a, dt a, figcaption a, blockquote a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1 { font-size: 22px; font-weight: 600; margin-bottom: var(--s-sm); letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 600; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Page chrome ────────────────────────────────────────────── */
.header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-md) var(--s-xl); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.brand { font: 500 12px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); text-decoration: none; }

.main { flex: 1; max-width: 600px; margin: var(--s-2xl) auto; padding: 0 var(--s-xl); width: 100%; }
.subtitle { color: var(--text-secondary); margin-bottom: var(--s-xl); }

.footer { padding: var(--s-lg) var(--s-xl); text-align: center; color: var(--text-tertiary); font-size: 12px; border-top: 1px solid var(--border-subtle); margin-top: auto; }
.footer a { color: var(--text-secondary); }

/* ── Forms ──────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea {
  font: 400 16px/1.4 var(--font-sans);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg);
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }

.input-group { display: flex; gap: var(--s-sm); margin-bottom: var(--s-lg); }
.input-group > :first-child { flex: 1; }

/* ── Buttons ────────────────────────────────────────────────── */
button, .btn {
  font: 500 14px/1 var(--font-sans);
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-xl);
  cursor: pointer;
  transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease);
}
button:hover, .btn:hover { filter: brightness(1.1); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-ghost:hover { filter: none; background: var(--bg-raised); }

/* ── Result + info blocks ───────────────────────────────────── */
.result {
  padding: var(--s-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-xl);
  display: none;
}
.result.valid { border-color: var(--ok); }
.result.invalid { border-color: var(--err); }
.result-title { font-weight: 600; font-size: 15px; margin-bottom: var(--s-sm); }
.result.valid .result-title { color: var(--ok); }
.result.invalid .result-title { color: var(--err); }
.detail { color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.detail span { color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; }

.info { margin-top: var(--s-xl); color: var(--text-secondary); font-size: 13px; line-height: 1.8; }
.info h2 { margin: var(--s-xl) 0 var(--s-sm); color: var(--text-primary); font-size: 16px; }

/* ── Utilities ──────────────────────────────────────────────── */
.muted { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
