/* Werte exakt aus dem Frontend von PDFCloud-Pro (Tailwind v4: gray, purple, green, amber, red; font-sans).
   Hell/dunkel wie in der App: nur über die Systemeinstellung, ohne Umschalter. */
:root {
  --bg: #ffffff;
  --page: oklch(98.5% .002 247.839);        /* gray-50 */
  --surface: #ffffff;
  --fg: oklch(21% .034 264.665);            /* gray-900 */
  --muted: oklch(55.1% .027 264.364);       /* gray-500 */
  --faint: oklch(70.7% .022 261.325);       /* gray-400 */
  --line: oklch(92.8% .006 264.531);        /* gray-200 */
  --line-strong: oklch(87.2% .01 258.338);  /* gray-300 */
  --soft: oklch(96.7% .003 264.542);        /* gray-100 */
  --btn: oklch(55.8% .288 302.321);         /* purple-600 */
  --btn-hover: oklch(49.6% .265 301.924);   /* purple-700 */
  --btn-fg: #ffffff;
  --blue: oklch(49.6% .265 301.924);        /* Akzent-Text: purple-700 */
  --blue-soft: oklch(94.6% .033 307.174);   /* purple-100 */
  --blue-line: oklch(82.7% .119 306.383);   /* purple-300 */
  --focus: oklch(62.7% .265 303.9);         /* purple-500 */
  --ok: oklch(52.7% .154 150.069);          /* green-700 */
  --ok-dot: oklch(62.7% .194 149.214);      /* green-600 */
  --ok-soft: oklch(98.2% .018 155.826);     /* green-50 */
  --warn: oklch(55.5% .163 48.998);         /* amber-700 */
  --warn-dot: oklch(76.9% .188 70.08);      /* amber-500 */
  --warn-soft: oklch(98.7% .022 95.277);    /* amber-50 */
  --bad: oklch(57.7% .245 27.325);          /* red-600 */
  --bad-soft: oklch(97.1% .013 17.38);      /* red-50 */
  --shot-a: oklch(27.8% .033 256.848);
  --shot-b: oklch(37.3% .034 259.733);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: .5rem;
  --radius-sm: .25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(13% .028 261.692);          /* gray-950 */
    --page: oklch(13% .028 261.692);
    --surface: oklch(21% .034 264.665);     /* gray-900 */
    --fg: oklch(96.7% .003 264.542);        /* gray-100 */
    --muted: oklch(70.7% .022 261.325);     /* gray-400 */
    --faint: oklch(55.1% .027 264.364);
    --line: oklch(37.3% .034 259.733);      /* gray-700 */
    --line-strong: oklch(44.6% .03 256.802);
    --soft: oklch(27.8% .033 256.848);      /* gray-800 */
    --btn: oklch(55.8% .288 302.321);
    --btn-hover: oklch(49.6% .265 301.924);
    --blue: oklch(82.7% .119 306.383);      /* purple-300 */
    --blue-soft: oklch(38.1% .176 304.987 / .4); /* purple-900/40 */
    --blue-line: oklch(38.1% .176 304.987);
    --ok: oklch(79.2% .209 151.711);
    --ok-soft: oklch(26.6% .065 152.934 / .5);
    --warn: oklch(87.9% .169 91.605);
    --warn-soft: oklch(27.9% .077 45.635 / .5);
    --bad: oklch(70.4% .191 22.216);
    --bad-soft: oklch(25.8% .092 26.042 / .5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--blue); }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 500 14px/20px var(--font); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.btn.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.big { padding: 9px 18px; font-size: 15px; }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 999px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); background: var(--soft); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.blue { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

header.top { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
nav.links { display: flex; gap: 4px; margin-left: auto; }
nav.links a { text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 500; }
nav.links a:hover { background: var(--soft); color: var(--fg); }
footer.bottom { border-top: 1px solid var(--line); padding-block: 24px 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: 13px; }
footer.bottom .sp { margin-left: auto; }
footer.bottom a { text-decoration: none; color: var(--muted); }
footer.bottom a:hover { color: var(--fg); }

@media (max-width: 720px) {
  nav.links { display: none; }
  header.top .btn.primary { margin-left: auto; }
  footer.bottom .sp { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }