/* Base layer: the font face, reset, type defaults, layout primitives, and the
   shared component vocabulary (buttons, cards, surfaces) that more than one
   section uses.

   Load order: tokens.css, base.css, header.css, sections.css, interior.css,
   motion.css.

   Naming across all of them: block / block__element / block--modifier, every
   block prefixed `wr-` (AGENTS.md). Every rule targets a class so specificity
   stays flat, with the deliberate exception of the reset below, which uses
   element selectors because it applies to everything. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The full-bleed plate is 100vw wide, and 100vw counts the vertical
     scrollbar -- so on a desktop with one, every page with a plate scrolled
     sideways by the scrollbar's width. `clip` rather than `hidden`: hidden
     would make this a scroll container and break the sticky header. */
  overflow-x: clip;
}

body {
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* German compounds -- schwindelerregender, Windenergieanlagen -- are long and
     have no break opportunity, so at narrow widths they push their box wider
     than the viewport. Site-wide rather than per-component: every block of
     German prose has the same exposure. */
  overflow-wrap: break-word;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  /* German compounds are long and unbreakable; without this they push past a
     narrow viewport regardless of any wrapping rule. break-word only acts when
     a word genuinely cannot fit, so it costs nothing at comfortable widths. */
  overflow-wrap: break-word;
}

/* Hyphenation is for body copy, not for display type: at heading sizes a
   soft hyphen is a visible break in the middle of the one word the reader is
   looking at ("Sicherheits-prüfung", "Großkompo-nenten"). overflow-wrap above
   still stops a long compound overflowing a phone. */
h1,
h2,
h3 {
  hyphens: manual;
}

p,
li,
dd {
  hyphens: auto;
}

p {
  text-wrap: pretty;
}

/* ---------- Layout primitives ---------- */

.wr-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.wr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Pressed state ----------
   Hover is a lift; press is its physical inverse: the surface reads as pushed
   in, and resolves in --motion-fast (140ms) so it registers as immediate
   rather than as a slower second copy of the hover.

/* ---------- Focus ---------- */

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-ground),
    0 0 0 5px var(--color-accent);
  border-radius: var(--radius-sm);
}

.wr-skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 20;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease);
}

.wr-skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The universal rule above only reaches real DOM nodes. The scroll-linked
     reveal and the cross-document view transition (both motion.css) each
     generate content outside that tree -- a scroll-driven animation-timeline
     and the browser's own ::view-transition-* pseudo-elements -- so each
     needs an explicit rule disabling it outright rather than just racing its
     duration to zero. !important, so this keeps winning even though
     motion.css loads after this file. */
  .wr-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }}