/* Reset + Body + Link + Skip-Link + Admin-Bar-Offset.
   Intentional minimalism — Pick 3's aesthetic is typography-first. */

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

html {
  color-scheme: light;
  scroll-behavior: auto;                     /* Lenis handles smooth scroll */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-stone);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: 400;
  min-height: 100vh;
  /* Safety net against any rogue child causing horizontal scroll on narrow
     viewports (rotated paper visual, long unbreakable strings, etc.). */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'kern';
}

/* Tabular numerals wherever data appears — inputs, prices, dates, IBANs,
   percentages, monetary chips. Proportional digits in form fields look
   amateur next to numeric data. */
input, select, textarea,
.tabular,
.chip--stand,
.card__indicator,
.card__meta,
.archive-header__count,
.trust-card__num,
.sources-list,
[class*="price"], [class*="amount"], [class*="value"] {
  font-variant-numeric: tabular-nums;
}

/* Sticky-Header-Offset bei eingeloggten WP-Admins */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-line);
  transition: color var(--motion-duration-instant) var(--motion-ease-standard),
              text-decoration-color var(--motion-duration-instant) var(--motion-ease-standard);
}
a:not(.btn):not(.btn *):hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-ink);
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-height-snug);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

p { max-width: var(--max-width-content); }

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  background: var(--color-ink);
  color: var(--color-stone);
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  z-index: 10000;
  font-weight: 500;
  transition: top var(--motion-duration-fast) var(--motion-ease-standard);
}
.skip-link:focus { top: 1rem; outline: 3px solid var(--color-ink); outline-offset: 2px; }

/* Screen-Reader-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Container helpers */
.container { max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--space-6); }
.container--content { max-width: var(--max-width-content); }
.container--full    { max-width: var(--max-width-full); }

/* Section spacing — generous by default */
.section { padding-block: var(--space-16); }
@media (min-width: 1024px) {
  .section       { padding-block: var(--space-24); }
  .section--hero { padding-block: var(--space-32); }
}

/* Visible focus ring — 2 px ink + 3 px stone offset (double-ring visibility on stone BG) */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Selection */
::selection { background: var(--color-ink); color: var(--color-stone); }

/* Tabular numerals wherever data is shown */
.tabular { font-variant-numeric: tabular-nums; }