/* Grundlage: Seite, Schrift, Links, Fokus. Keine Bausteine, nur was jedes Element erbt. */
@layer grundlage {
  body {
    margin: 0;
    background: var(--grund);
    color: CanvasText;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  main { max-width: 60rem; width: 100%; margin: 0 auto; padding: var(--abstand); flex: 1; min-height: 0; overflow-y: auto; }
  h1 { font-size: var(--gross); line-height: 1.2; margin: 0 0 .6rem; }
  h2 { font-size: var(--mittel); margin: 1.2rem 0 .4rem; }
  a { color: var(--d-akzent); text-decoration: underline; text-decoration-skip-ink: auto; }
  a:where([class]) { text-decoration: none; }
  :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: var(--fokus); outline-offset: 2px; border-radius: var(--rundung-klein); }
  :is(a, button, input, textarea, select) { touch-action: manipulation; transition: background-color var(--dauer), border-color var(--dauer), opacity var(--dauer), color var(--dauer); }
  code, kbd, .uin-klein, .fest { font-family: var(--mono); }
  kbd { font-size: .7em; font-weight: 600; border: 1px solid var(--ton-4); border-bottom-width: 2px; border-radius: .3em; padding: 0 .35em; opacity: .7; }
  small { font-size: var(--klein); }
  .tipp { font-size: var(--winzig); opacity: .55; margin: 0 0 .4rem; }
  .dev { opacity: .6; font-size: .9rem; }
  .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .nur-handy { display: none; }
  turbo-cable-stream-source, turbo-frame { display: contents; }
  .turbo-progress-bar { background: var(--d-akzent); height: 2px; }
  form { display: flex; gap: var(--abstand-halb); flex-wrap: wrap; }
  .knopf-form, .zeile-form { display: contents; }
  form.button_to, .aktion-form { display: inline; }
}