/* Grundbausteine für Websites der CI. Auf <html data-theme="dark"> nach tokens.css einbinden.
   Alle Werte kommen aus den Tokens; hier stehen keine Farben, Größen oder Radien als Zahl, nur Formregeln. */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-site-body);
  line-height: 1.6;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-site-h1); font-stretch: var(--font-stretch-display); line-height: 0.98; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-site-h2); font-stretch: var(--font-stretch-heading); line-height: 1.05; }
h3 { font-size: var(--fs-site-h3); font-stretch: var(--font-stretch-heading); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.w {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: max(var(--site-gutter), env(safe-area-inset-left, 0px)) max(var(--site-gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--site-section); }
.cap {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-label);
  font-weight: 600;
  font-size: var(--fs-site-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--btn-site-py) var(--btn-site-px);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--acc);
  color: var(--on-acc);
  font: inherit;
  font-size: var(--btn-site-fs);
  font-weight: var(--btn-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-mid), transform var(--t-mid) var(--ease);
}
.btn:hover { background: var(--acc-hover); transform: translateY(-1px); }
.lnk {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.card {
  padding: var(--s-6);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--line);
}
/* Einheitliche Bildstimmung. */
.grade { filter: saturate(.8) sepia(.08) contrast(1.03); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; transform: none; }
}