/* InvoiceWerk — Reset, Typografie, Layout-Primitive (§4.3, §12) */

/* Selbst gehostete Schriften (§4.3): statische Latin-Subsets in assets/fonts/,
   bezogen über google-webfonts-helper. Die Seite lädt keine externen Ressourcen (§13). */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600.woff2") format("woff2"); }

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--background);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--text-primary);
  letter-spacing: var(--track);
  line-height: 1.12;
  text-wrap: balance;
  font-weight: 800;
  /* Lange deutsche Komposita („Datenschutzerklärung") passen unter ~370 px in keine
     Zeile und erzwängen sonst horizontalen Überlauf. Greift nur im Notfall. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }

p { text-wrap: pretty; }
.prose { max-width: 70ch; }

a { color: var(--primary-on-surface); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--primary-pressed); }

::selection { background: var(--primary-tint); color: var(--text-primary); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--primary-on-surface);
}

.container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.section { padding-block: clamp(64px, 6vw + 32px, 128px); }
.section--band { background: var(--surface); border-block: 1px solid var(--divider); --band-bg: var(--surface); }
.section-head { max-width: 760px; display: grid; gap: var(--sp-16); margin-bottom: clamp(32px, 4vw, 64px); }
/* Ohne min-width: 0 zwingt die Mindestbreite des Inhalts (min-content) das Raster auf. */
.section-head > * { min-width: 0; }
.section-head .lead { color: var(--text-secondary); }

/* Zugänglichkeit */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-64px);
  background: var(--surface); color: var(--text-primary);
  padding: var(--sp-12) var(--sp-16); border-radius: var(--r-btn);
  border: 1px solid var(--border-card); box-shadow: var(--shadow-float);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 1.5px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
  border-radius: var(--r-sm);
}

/* Auftritte (AppEntrance, §5): Startzustand nur mit JS, damit die Seite ohne JS lesbar bleibt */
html.js [data-entrance] {
  opacity: 0;
  translate: 0 var(--rise);
  transition: opacity var(--dur-entrance) var(--ease), translate var(--dur-entrance) var(--ease);
  transition-delay: calc(var(--entrance-i, 0) * var(--stagger));
}
html.js [data-entrance].is-in { opacity: 1; translate: 0 0; }

/* Sprachwechsel: Fade-Through 90 ms raus / 210 ms rein (§8) */
.i18n-swap { transition: opacity 210ms var(--ease); }
.i18n-swap.is-out { opacity: 0; transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .i18n-swap, .i18n-swap.is-out { transition-duration: 0ms; }
}