/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
/* The primary use-case for responsive spacings are
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
/* Elevation */
/* Border */
/* Transitions */
.db-page-document {
  block-size: 100%;
  overflow: hidden;
}

.db-page {
  opacity: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-page[data-fade-in=true] {
    transition: opacity var(--db-transition-straight-emotional);
  }
}
.db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
  opacity: 1;
}
.db-page[data-variant=fixed] {
  block-size: 100%;
  min-block-size: 100%;
  display: flex;
  flex-direction: column;
  /* workaround for angular */
}
.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
  display: flex;
  flex: 0 1 auto;
  flex-grow: 0;
  flex-shrink: 0;
}
.db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
  display: flex;
  flex: 0 1 auto;
  flex-grow: 0;
  flex-shrink: 0;
}
.db-page[data-variant=fixed] > .db-main {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1 1 auto;
  inline-size: 100%;
}