/* Taxon Labs – Richtung „Minimalismus“
   Eine Schrift (Inter), 2 Gewichte, 3 Größen, 8-pt-Raster, 1 Akzent, keine Schatten. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  /* Farbe */
  --bg: #121212;
  --text: #ececec;
  --text-muted: #a3a3a3;
  --border: #2a2a2a;
  --accent: #8fc4ad;        /* einziger Akzent: primäre Aktion + aktiver Zustand */
  --on-accent: #121212;
  /* Typo: genau 3 Größen, 2 Gewichte */
  --size-lg: 2rem;
  --size-md: 1rem;
  --size-sm: 0.875rem;
  --weight-regular: 400;
  --weight-semibold: 600;
  /* Raster 8 pt */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 = Seitenrand */
  --space-4: 2rem;     /* 32 = Gruppenabstand */
  --space-6: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  /* Komponenten */
  --radius: 8px;
  --rule: 1px solid var(--border);
  --target: 44px;
  --motion: 160ms ease-out;
  --measure: 36rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--size-md);
  font-weight: var(--weight-regular);
  line-height: 1.6;
}
h1, h2, h3, p, ul, address { margin: 0; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-muted); text-underline-offset: 0.2em; transition: text-decoration-color var(--motion); }
a:hover { text-decoration-color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 var(--space-3); }

/* Kopf */
.site-header .wrap { min-height: calc(var(--target) + var(--space-4)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding-top: var(--space-2); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target); font-weight: var(--weight-semibold); text-decoration: none; }
.wordmark .mark { flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--size-sm); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--text-muted); text-decoration: none; transition: color var(--motion); }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--accent); }

main { padding: var(--space-8) 0; }

/* Startseite */
.definition { max-width: var(--measure); margin-bottom: var(--space-8); }
.definition .term { font-size: var(--size-lg); font-weight: var(--weight-semibold); line-height: 1.2; margin-bottom: var(--space-1); }
.definition .gram { color: var(--text-muted); font-size: var(--size-sm); margin-bottom: var(--space-3); }

.tree-root { font-size: var(--size-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.tree { list-style: none; margin: 0; padding: 0; }
.tree > li { position: relative; padding: 0 0 var(--space-6) var(--space-4); border-left: var(--rule); }
.tree > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.tree > li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: var(--space-2); border-top: var(--rule); }
.tree > li:last-child::after { content: ""; position: absolute; left: -1px; top: 0; height: 1.25rem; border-left: var(--rule); }
.taxon h2 { font-size: var(--size-lg); font-weight: var(--weight-semibold); line-height: 1.25; margin-bottom: var(--space-1); }
.taxon h2 a { text-decoration: none; }
.taxon h2 a:hover { text-decoration: underline; }
.taxon p { max-width: var(--measure); }
.taxon .status { color: var(--text-muted); font-size: var(--size-sm); margin-top: var(--space-1); }
.taxon.open h2 { color: var(--text-muted); }

/* Textseiten */
.prose { max-width: var(--measure); }
.prose h1 { font-size: var(--size-lg); font-weight: var(--weight-semibold); line-height: 1.25; margin-bottom: var(--space-4); }
.prose h2 { font-size: var(--size-md); font-weight: var(--weight-semibold); margin: var(--space-4) 0 var(--space-1); }
.prose p, .prose ul, .prose address { margin-bottom: var(--space-2); }
.prose ul { padding-left: var(--space-3); }
.prose li { margin-bottom: var(--space-1); }
.prose address { font-style: normal; }
.prose .lead { margin-bottom: var(--space-3); }
.prose .note { color: var(--text-muted); font-size: var(--size-sm); }

/* einziger gefüllter Button-Typ */
.button-primary {
  display: inline-flex; align-items: center; min-height: var(--target);
  padding: 0 var(--space-3); border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-weight: var(--weight-semibold); text-decoration: none;
  transition: opacity var(--motion);
}
.button-primary:hover { opacity: 0.88; }
.action { margin-bottom: var(--space-2); }

mark.todo { background: #f3dc8a; color: #121212; padding: 0 0.25em; }

/* Fuß */
.site-footer { border-top: var(--rule); padding: var(--space-3) 0 var(--space-6); font-size: var(--size-sm); color: var(--text-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.site-footer a { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }