/* ============================================================
   CX-UI — Base: Reset, Typo, Layout-Primitives, Utilities
   Setzt tokens.css voraus.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--cx-font);
  font-size: var(--cx-fs-md);
  line-height: var(--cx-lh);
  color: var(--cx-text);
  background: var(--cx-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Canvas ohne height:auto — sonst verzerren Charts mit festem width/height-Attribut */
canvas { max-width: 100%; }

a { color: var(--cx-accent); text-decoration: none; transition: color var(--cx-t); }
a:hover { color: var(--cx-accent-hover); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--cx-s4);
  line-height: var(--cx-lh-tight);
  font-weight: 700;
  color: var(--cx-text);
  text-wrap: balance;
}
h1 { font-size: var(--cx-fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--cx-fs-2xl); letter-spacing: -.01em; }
h3 { font-size: var(--cx-fs-xl); }
h4 { font-size: var(--cx-fs-lg); }
h5, h6 { font-size: var(--cx-fs-md); }

p  { margin: 0 0 var(--cx-s4); }
ul, ol { margin: 0 0 var(--cx-s4); padding-left: var(--cx-s5); }
li { margin-bottom: var(--cx-s2); }

hr { border: 0; border-top: 1px solid var(--cx-border); margin: var(--cx-s7) 0; }

small { font-size: var(--cx-fs-sm); color: var(--cx-text-light); }

code, pre {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: var(--cx-fs-sm);
  background: var(--cx-bg-alt);
  border-radius: var(--cx-r-sm);
}
code { padding: 2px 6px; }
pre { padding: var(--cx-s4); overflow-x: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
  border-radius: var(--cx-r-sm);
}

/* --- Layout-Primitives ------------------------------------- */

.cx-container {
  width: 100%;
  max-width: var(--cx-max);
  margin-inline: auto;
  padding-inline: var(--cx-gutter);
}
.cx-container--narrow { max-width: 820px; }
.cx-container--wide   { max-width: 1440px; }

.cx-main { flex: 1 0 auto; padding-top: var(--cx-header-h); }

.cx-section { padding-block: var(--cx-sec); }
.cx-section--alt { background: var(--cx-bg-alt); }
.cx-section--tight { padding-block: var(--cx-s7); }

/* minmax(0,1fr) statt 1fr: sonst blaeht eine Spalte auf die min-content-Breite
   ihres Inhalts auf (breite Inputs, Tabellen) und erzeugt horizontalen Overflow. */
.cx-grid { display: grid; gap: var(--cx-s5); }
.cx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.cx-stack  { display: flex; flex-direction: column; gap: var(--cx-s4); }
.cx-row    { display: flex; align-items: center; gap: var(--cx-s3); flex-wrap: wrap; }
.cx-row--between { justify-content: space-between; }
.cx-row--center  { justify-content: center; }

/* --- Utilities --------------------------------------------- */

.cx-muted    { color: var(--cx-text-light); }
.cx-faint    { color: var(--cx-text-faint); }
.cx-center   { text-align: center; }
.cx-sm       { font-size: var(--cx-fs-sm); }
.cx-xs       { font-size: var(--cx-fs-xs); }
.cx-bold     { font-weight: 600; }
.cx-lead     { font-size: var(--cx-fs-lg); color: var(--cx-text-mid); }
.cx-mt0 { margin-top: 0; }
.cx-mb0 { margin-bottom: 0; }
.cx-hide { display: none !important; }

.cx-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;
}

.cx-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--cx-text); color: var(--cx-white);
  padding: var(--cx-s3) var(--cx-s5); border-radius: 0 0 var(--cx-r) 0;
}
.cx-skip-link:focus { left: 0; color: var(--cx-white); }

/* --- Responsive -------------------------------------------- */

@media (max-width: 1024px) {
  .cx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .cx-grid--2, .cx-grid--3, .cx-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cx-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .cx-grid { gap: var(--cx-s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}