/* ============================================================
   BASE — element defaults & shared primitives.
   Keeps consumer pages on-brand out of the box.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Bricolage Grotesque, tight & confident */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent-active); }

strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); }

::selection { background: var(--blue-100); color: var(--ink-950); }

hr { border: none; border-top: 1px solid var(--ink-900); margin: var(--space-8) 0; }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* ---- Shared brand primitives (utility classes) ---- */

/* Layout container */
.lk-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Focus-visible ring for keyboard users */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ============================================================
   UTILITIES — hover states (vorher per Runtime generiert)
   ============================================================ */
.hover-opacity-100:hover { opacity: 1 !important; }
.hover-opacity-72:hover  { opacity: .72 !important; }
.hover-opacity-70:hover  { opacity: .7 !important; }
.hover-paper:hover    { color: var(--paper) !important; }
.hover-blue-200:hover { color: var(--blue-200) !important; }
.hover-ink-950:hover  { color: var(--ink-950) !important; }
.hover-klein:hover    { color: var(--klein) !important; }
.hover-invert:hover   { background: var(--paper) !important; color: var(--klein) !important; }

/* Shared layout */
.lk-clip { display: block; overflow: hidden; }
.lk-nav-links { display: none; }
@media (min-width: 940px) { .lk-nav-links { display: flex; } }

/* Shared keyframes */
@keyframes v4-up { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes v4-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes v4-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v4-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  [data-v4] { animation: none !important; opacity: 1 !important; transform: none !important; }
}