/* xbrain — Auslieferungsseite. Alle Farben, Abstände und Radien als Token (R14, R30). */

:root{
  /* Layout-Anker (R3, R8) */
  --container-max: 60rem;
  --pad-x: 1.25rem;
  --section-y: 2.5rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-pill: 62.4375rem;

  --border-hair: .0625rem;
  --border-focus: .125rem;
  --focus-offset: .125rem;

  --tap-min: 2.75rem;

  --fs-body: 1rem;
  --fs-helper: .875rem;
  --fs-button: .9375rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.1875rem;
  --fs-h3: 1.0625rem;
  --lh-body: 1.6;
  --lh-tight: 1.25;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Farb-Token hell */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --line: #cbd2dc;
  --fg: #14181f;
  --muted: #4d5561;
  --accent: #b04b09;
  --accent-fg: #ffffff;
  --code-bg: #eceff4;
  --focus: #14181f;

  --motion-fast: .15s;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0b1220;
    --surface: #121b2c;
    --line: #2b3a53;
    --fg: #e9edf4;
    --muted: #a8b3c6;
    --accent: #ff8a34;
    --accent-fg: #1a1103;
    --code-bg: #0a1424;
    --focus: #e9edf4;
  }
}

:root[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #121b2c;
  --line: #2b3a53;
  --fg: #e9edf4;
  --muted: #a8b3c6;
  --accent: #ff8a34;
  --accent-fg: #1a1103;
  --code-bg: #0a1424;
  --focus: #e9edf4;
}

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

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

html{ hyphens: auto; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.wrap{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.page-header{
  padding-block: var(--section-y) var(--space-5);
  border-bottom: var(--border-hair) solid var(--line);
}

.page-section{ padding-block: var(--section-y) 0; }

.page-footer{
  margin-block-start: var(--space-7);
  padding-block: var(--space-5) var(--section-y);
  border-top: var(--border-hair) solid var(--line);
  color: var(--muted);
  font-size: var(--fs-helper);
}

h1{
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}

h2{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h3{
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

p{ margin: 0 0 var(--space-4); text-wrap: pretty; }

.lead{ color: var(--muted); }

a{ color: var(--accent); }

:focus-visible{
  outline: var(--border-focus) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.header-top{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}

.tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.tag{
  display: inline-block;
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-helper);
  color: var(--muted);
}

.theme-toggle{
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-button);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}

.theme-toggle:hover{ border-color: var(--fg); }
.theme-toggle:active{ background: var(--code-bg); }

.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding: 0;
  list-style: none;
}

.card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.card p{ color: var(--muted); font-size: var(--fs-helper); margin-block-end: var(--space-4); }
.card .download{ margin-block-start: auto; }

.download{
  display: inline-block;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--accent-fg);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-button);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: anywhere;
  transition: filter var(--motion-fast) ease;
}

.download:hover{ filter: brightness(1.08); }

/* Der Fokusring liegt INNEN auf der Akzentfläche und wird gegen sie gemessen —
   aussen läge er auf der Karte und käme im Dunkeln nicht auf 3:1 (R68). */
.download:focus-visible{
  outline-color: var(--accent-fg);
  outline-offset: calc(var(--space-1) * -1);
}

.file-links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.file-link{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-button);
  text-decoration: none;
  white-space: nowrap;
}

.file-link:hover{ border-color: var(--accent); text-decoration: underline; }

pre{
  background: var(--code-bg);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--fs-helper);
  line-height: 1.5;
}

code{ font-family: var(--font-mono); }

ol{ padding-inline-start: var(--space-5); margin-block: 0 var(--space-4); }
ol li{ margin-block: var(--space-2); }

.table-scroll{ overflow-x: auto; margin-block-end: var(--space-4); }

table{ width: 100%; border-collapse: collapse; font-size: var(--fs-helper); }

th, td{
  text-align: left;
  padding: var(--space-3);
  border-bottom: var(--border-hair) solid var(--line);
  vertical-align: top;
}

th{ color: var(--muted); font-weight: 600; white-space: nowrap; }

.hash{ font-family: var(--font-mono); overflow-wrap: anywhere; }

@media (min-width: 40rem){
  :root{ --pad-x: 2rem; --section-y: 3rem; --fs-h1: 2rem; }
}

@media (min-width: 64rem){
  :root{ --pad-x: 2.5rem; --fs-h1: 2.5rem; --fs-h2: 1.25rem; --fs-button: .875rem; }
}