/*
 * Das Einzige, was Axiom der Anwendung ueberlaesst: der Seitengrund.
 *
 * Nach Axioms Leitfaden "CSS Layers" gehoeren globale Regeln fuer Elemente in
 * die Schicht `optiaxiom.base` -- dort verlieren sie gegen jede Komponente.
 * **Hier steht keine Gestaltung einer Axiom-Komponente** (ADR-008).
 */
@layer optiaxiom.base {
  html,
  body {
    margin: 0;
    height: 100%;
    background: var(--ax-colors-bg-page);
    color: var(--ax-colors-fg-default);
  }

  /*
   * `hidden` muss verstecken -- auch ein Element, dem Axioms Box-Klassen ein
   * `display` geben. `!important` in der fruehesten Schicht schlaegt jede
   * spaetere; genau dafuer ist die Umkehrung der Schichten bei `!important`.
   */
  [hidden] {
    display: none !important;
  }

  /*
   * Der Sprung zum Inhalt: unsichtbar, bis er den Fokus hat. `!important`
   * aus demselben Grund wie oben -- der Knopf ist Axioms Button, und dessen
   * `position` steht in einer spaeteren Schicht.
   */
  .sprung:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .sprung:focus {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 1000;
  }
}