/* 10-basis.css · Grundelemente, Fokus, Auswahl, Bildlauf */
@layer basis {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; interpolate-size: allow-keywords; }
  body {
    margin: 0; min-height: 100dvh;
    font: 400 var(--gr-m)/1.5 var(--schrift);
    font-feature-settings: "cv11", "ss01", "tnum" 0;
    color: var(--t-haupt); background: var(--f-grund);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance; }
  h1 { font: 700 var(--gr-2xl)/1.2 var(--schrift-titel); letter-spacing: -0.015em; }
  h2 { font-size: var(--gr-xl); letter-spacing: -0.01em; }
  h3 { font-size: var(--gr-l); }
  p { margin: 0; text-wrap: pretty; }
  a { color: var(--aktion); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { color: var(--aktion-hover); }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  code, kbd, pre, .mono { font-family: var(--schrift-mono); font-size: 0.92em; }
  kbd {
    display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em;
    border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: var(--r-s);
    background: var(--f-flaeche); color: var(--t-zweit); font-size: var(--gr-xs); line-height: 1;
  }
  hr { border: 0; border-top: 1px solid var(--linie); margin: var(--a-4) 0; }
  ::selection { background: color-mix(in oklab, var(--akzent) 35%, transparent); }
  :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-s); }
  [hidden] { display: none !important; }
  .zahl, td.zahl, .tnum { font-variant-numeric: tabular-nums; }

  /* Bildlaufleisten schlank */
  * { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }

  /* Seitenwechsel (View Transitions, same-document) */
  ::view-transition-old(inhalt) { animation: vt-raus var(--d-mittel) var(--kurve) both; }
  ::view-transition-new(inhalt) { animation: vt-rein var(--d-lang) var(--kurve) both; }
  @keyframes vt-raus { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes vt-rein { from { opacity: 0; transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  }
}