/* ==========================================================================
   Basis: Reset, Typografie, Layout-Primitive
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--wc-blue-100); color: var(--wc-ink); }

/* Fokus – immer sichtbar bei Tastaturbedienung */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--wc-ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 560; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- Typografie --------------------------------------------------------- */
.t-display {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); font-weight: 580;
  text-wrap: balance;
}
.t-h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: var(--tracking-head); font-weight: 580; text-wrap: balance; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-head); font-weight: 580; text-wrap: balance; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-2); text-wrap: pretty; }
.t-small { font-size: var(--fs-small); }
.t-caption { font-size: var(--fs-caption); color: var(--c-text-3); }
.t-muted { color: var(--c-text-2); }
.t-mono { font-family: var(--font-mono); font-feature-settings: "zero"; letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7;
}
.eyebrow--plain::before { display: none; }
.prose { max-width: var(--maxw-text); }
.prose p + p { margin-top: 1em; }
.prose h2 { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 600; margin: 2em 0 .6em; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.6em 0 .4em; }
.prose ul { padding-left: 1.2em; margin: .8em 0; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--c-primary); text-underline-offset: 3px; }

.link {
  color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 560; text-decoration: none;
  color: var(--c-primary);
}
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 920px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 4vw + 24px, 88px); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--wc-blue-900); color: #fff; }
.section--dark .t-lead, .section--dark .t-muted { color: #c3d3e6; }
.section--dark .eyebrow { color: #9fb8d3; }
.section-head { display: grid; gap: var(--s-4); margin-bottom: clamp(32px, 4vw, 64px); }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); }
}
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }
.divider { height: 1px; background: var(--wc-line); border: 0; margin: 0; }

/* --- Einblenden (nur wenn JS & Bewegung erlaubt) ------------------------- */
/* Bewusst ohne opacity:0 – Inhalte sind auch ohne Scrollen/Animation sichtbar */
.js [data-reveal] { transform: translateY(16px); transition: transform 800ms var(--ease-out); }
.js [data-reveal].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; }
}

/* Seitenwechsel */
#app { min-height: 60vh; }
.page-enter { animation: pageIn 420ms var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }